heygen-com--hyperframes/packages/studio/src/components/editor/ComputedTweenNotice.tsx

import { editabilityForProvenance, type GsapProvenance } from "@hyperframes/core/gsap-parser-acorn";

/**
 * Notice shown for computed tweens: helper/loop tweens offer an "unroll to
 * edit" action; runtime-computed values point to the Code tab. Literal tweens
 * render nothing.
 */
export function ComputedTweenNotice({
  provenance,
  onUnroll,
}: {
  provenance?: GsapProvenance;
  onUnroll?: () => void;
}) {
  const editability = editabilityForProvenance(provenance);
  if (editability === "direct") return null;
  if (editability === "source") {
    return (
      <div className="rounded-md border border-neutral-800 bg-neutral-900/50 px-2 py-1.5 text-[9px] text-neutral-400">
        Computed value — edit it in the Code tab.
      </div>
    );
  }
  const source = provenance?.fn ? `${provenance.fn}()` : "a loop";
  return (
    <div className="flex items-center justify-between gap-2 rounded-md border border-neutral-800 bg-neutral-900/50 px-2 py-1.5 text-[9px] text-neutral-400">
      <span>Generated by {source} — not directly editable.</span>
      {onUnroll && (
        <button
          type="button"
          onClick={onUnroll}
          className="flex-shrink-0 rounded px-1.5 py-0.5 text-[9px] font-medium text-panel-accent hover:bg-neutral-800"
          title="Rewrite the helper/loop into explicit tweens so this keyframe edits directly"
        >
          Unroll to edit
        </button>
      )}
    </div>
  );
}