@hyperframes/studio 0.6.86 → 0.6.87

package/src/components/editor/domEditing.test.ts

@@ -1156,3 +1156,46 @@ describe("patch builders and prompt builder", () => {
     ).not.toThrow();
   });
 });
+
+describe("hfId — find, key, capabilities (R7 fixes)", () => {
+  it("getDomEditTargetKey keeps two hfId-only elements distinct", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const a = getDomEditTargetKey({ sourceFile: "index.html", hfId: "hf-aaa" } as any);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const b = getDomEditTargetKey({ sourceFile: "index.html", hfId: "hf-bbb" } as any);
+    expect(a).not.toBe(b);
+  });
+
+  it("findElementForSelection finds element by data-hf-id when no id or selector", () => {
+    const doc = createDocument(`
+      <div data-composition-id="root">
+        <div data-hf-id="hf-xyz789" class="clip" style="position:absolute;left:0;top:0;width:100px;height:100px;"></div>
+      </div>
+    `);
+    const el = doc.querySelector('[data-hf-id="hf-xyz789"]') as HTMLElement;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const found = findElementForSelection(doc, { hfId: "hf-xyz789" } as any);
+    expect(found).toBe(el);
+  });
+
+  it("resolveDomEditCapabilities enables editing for hfId-only element (no CSS selector)", () => {
+    const result = resolveDomEditCapabilities({
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      hfId: "hf-abc" as any,
+      selector: undefined,
+      inlineStyles: { left: "10px", top: "20px", width: "100px", height: "50px" },
+      computedStyles: {
+        position: "absolute",
+        left: "10px",
+        top: "20px",
+        width: "100px",
+        height: "50px",
+      },
+      isCompositionHost: false,
+      isInsideLockedComposition: false,
+      isMasterView: false,
+    });
+    expect(result.canSelect).toBe(true);
+    expect(result.canMove).toBe(true);
+  });
+});

package/src/components/editor/domEditing.ts

@@ -26,6 +26,7 @@ export {
 // Layers, text fields, capabilities, selection, patch ops
 export {
   buildDefaultDomEditTextField,
+  buildDomEditPatchTarget,
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
   collectDomEditLayerItems,
@@ -34,6 +35,7 @@ export {
   getDomEditNonEditableReason,
   getDomEditTargetKey,
   isTextEditableSelection,
+  readHfId,
   refreshDomEditSelection,
   resolveDomEditCapabilities,
   resolveDomEditSelection,

package/src/components/editor/domEditingElement.ts

@@ -37,9 +37,26 @@ export function isElementComputedVisible(el: HTMLElement): boolean {
 
 const VISUAL_LEAF_TAGS = new Set(["img", "video", "canvas", "svg", "audio"]);
 
+function hasVisualPresence(el: HTMLElement): boolean {
+  const win = el.ownerDocument.defaultView;
+  if (!win) return false;
+  const cs = win.getComputedStyle(el);
+  if (cs.backgroundImage !== "none") return true;
+  if (
+    cs.backgroundColor &&
+    cs.backgroundColor !== "transparent" &&
+    cs.backgroundColor !== "rgba(0, 0, 0, 0)"
+  )
+    return true;
+  if (cs.borderWidth && parseFloat(cs.borderWidth) > 0 && cs.borderStyle !== "none") return true;
+  if (cs.boxShadow && cs.boxShadow !== "none") return true;
+  return false;
+}
+
 function isEmptyVisualContainer(el: HTMLElement): boolean {
   const tag = el.tagName.toLowerCase();
   if (VISUAL_LEAF_TAGS.has(tag)) return false;
+  if (hasVisualPresence(el)) return false;
 
   const { children } = el;
   if (children.length === 0) {
@@ -95,7 +112,7 @@ function isInspectableLayerElement(el: HTMLElement): boolean {
 export function getDomLayerPatchTarget(
   el: HTMLElement,
   activeCompositionPath: string | null,
-): Pick<DomEditSelection, "id" | "selector" | "selectorIndex" | "sourceFile"> | null {
+): Pick<DomEditSelection, "id" | "hfId" | "selector" | "selectorIndex" | "sourceFile"> | null {
   if (!isInspectableLayerElement(el)) return null;
   if (el.hasAttribute("data-composition-id")) return null;
 
@@ -105,6 +122,7 @@ export function getDomLayerPatchTarget(
   const { sourceFile } = getSourceFileForElement(el, activeCompositionPath);
   return {
     id: el.id || undefined,
+    hfId: el.getAttribute("data-hf-id") || undefined,
     selector,
     selectorIndex: getSelectorIndex(
       el.ownerDocument,
@@ -229,9 +247,14 @@ export function isLargeRasterDomEditSelection(
 
 export function findElementForSelection(
   doc: Document,
-  selection: Pick<DomEditSelection, "id" | "selector" | "selectorIndex" | "sourceFile">,
+  selection: Pick<DomEditSelection, "id" | "hfId" | "selector" | "selectorIndex" | "sourceFile">,
   activeCompositionPath: string | null = null,
 ): HTMLElement | null {
+  if (selection.hfId) {
+    const byHfId = doc.querySelector(`[data-hf-id="${selection.hfId}"]`);
+    if (isHtmlElement(byHfId)) return byHfId;
+  }
+
   if (selection.id) {
     const byId = doc.getElementById(selection.id);
     if (

package/src/components/editor/domEditingLayers.test.ts

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import { resolveDomEditSelection, buildDomEditPatchTarget, readHfId } from "./domEditingLayers";
+
+const opts = { activeCompositionPath: "index.html", isMasterView: true, skipSourceProbe: true };
+
+describe("buildDomEditPatchTarget", () => {
+  it("includes hfId when selection has hfId", () => {
+    const target = buildDomEditPatchTarget({
+      id: undefined,
+      hfId: "hf-abc",
+      selector: ".foo",
+      selectorIndex: 0,
+    });
+    expect(target.hfId).toBe("hf-abc");
+  });
+
+  it("includes id and selector when hfId absent", () => {
+    const target = buildDomEditPatchTarget({
+      id: "hero",
+      hfId: undefined,
+      selector: "#hero",
+      selectorIndex: undefined,
+    });
+    expect(target.id).toBe("hero");
+    expect(target.hfId).toBeUndefined();
+  });
+});
+
+describe("readHfId", () => {
+  it("returns the attribute value when present", () => {
+    const el = document.createElement("div");
+    el.setAttribute("data-hf-id", "hf-abc");
+    expect(readHfId(el)).toBe("hf-abc");
+  });
+
+  it("returns undefined when attribute is absent", () => {
+    const el = document.createElement("div");
+    expect(readHfId(el)).toBeUndefined();
+  });
+
+  it("returns undefined when attribute is empty string", () => {
+    const el = document.createElement("div");
+    el.setAttribute("data-hf-id", "");
+    expect(readHfId(el)).toBeUndefined();
+  });
+
+  it("returns undefined when attribute is whitespace-only", () => {
+    const el = document.createElement("div");
+    el.setAttribute("data-hf-id", "  ");
+    expect(readHfId(el)).toBeUndefined();
+  });
+});
+
+describe("resolveDomEditSelection — hfId from data-hf-id", () => {
+  it("populates hfId from the element data-hf-id attribute", async () => {
+    const el = document.createElement("div");
+    el.id = "hero";
+    el.setAttribute("data-hf-id", "hf-x7k2");
+    document.body.appendChild(el);
+
+    const selection = await resolveDomEditSelection(el, opts);
+    document.body.removeChild(el);
+
+    expect(selection?.hfId).toBe("hf-x7k2");
+  });
+
+  it("leaves hfId undefined when element has no data-hf-id", async () => {
+    const el = document.createElement("div");
+    el.id = "no-hfid-el";
+    document.body.appendChild(el);
+
+    const selection = await resolveDomEditSelection(el, opts);
+    document.body.removeChild(el);
+
+    expect(selection?.hfId).toBeUndefined();
+  });
+});

package/src/components/editor/domEditingLayers.ts

@@ -173,6 +173,7 @@ export function buildDefaultDomEditTextField(base?: Partial<DomEditTextField>):
 // fallow-ignore-next-line complexity
 export function resolveDomEditCapabilities(args: {
   selector?: string;
+  hfId?: string;
   tagName?: string;
   className?: string;
   inlineStyles: Record<string, string>;
@@ -182,7 +183,7 @@ export function resolveDomEditCapabilities(args: {
   isMasterView: boolean;
   existsInSource?: boolean;
 }): DomEditCapabilities {
-  if (!args.selector || args.isInsideLockedComposition) {
+  if ((!args.selector && !args.hfId) || args.isInsideLockedComposition) {
     return {
       canSelect: !args.isInsideLockedComposition,
       canEditStyles: false,
@@ -289,7 +290,7 @@ export function buildElementLabel(el: HTMLElement): string {
 async function probeSourceElement(
   projectId: string,
   sourceFile: string,
-  target: { id?: string; selector?: string; selectorIndex?: number },
+  target: { id?: string; hfId?: string; selector?: string; selectorIndex?: number },
 ): Promise<boolean> {
   try {
     const response = await fetch(
@@ -321,7 +322,8 @@ export async function resolveDomEditSelection(
   let current: HTMLElement | null = getSelectionCandidate(startEl, options);
   while (current && current !== doc.body && current !== doc.documentElement) {
     const selector = buildStableSelector(current);
-    if (!selector) {
+    const hfId = readHfId(current);
+    if (!selector && !hfId) {
       current = current.parentElement;
       continue;
     }
@@ -330,13 +332,9 @@ export async function resolveDomEditSelection(
       current,
       options.activeCompositionPath,
     );
-    const selectorIndex = getSelectorIndex(
-      doc,
-      current,
-      selector,
-      sourceFile,
-      options.activeCompositionPath,
-    );
+    const selectorIndex = selector
+      ? getSelectorIndex(doc, current, selector, sourceFile, options.activeCompositionPath)
+      : undefined;
     const compositionSrc =
       current.getAttribute("data-composition-src") ??
       current.getAttribute("data-composition-file") ??
@@ -346,15 +344,18 @@ export async function resolveDomEditSelection(
     const textFields = collectDomEditTextFields(current);
     const isInsideLocked = Boolean(findClosestByAttribute(current, ["data-timeline-locked"]));
     let existsInSource: boolean | undefined;
-    if (!options.skipSourceProbe && options.projectId && (current.id || selector)) {
-      const probeTarget: { id?: string; selector?: string; selectorIndex?: number } = {};
+    if (!options.skipSourceProbe && options.projectId && (current.id || selector || hfId)) {
+      const probeTarget: { id?: string; hfId?: string; selector?: string; selectorIndex?: number } =
+        {};
       if (current.id) probeTarget.id = current.id;
+      if (hfId) probeTarget.hfId = hfId;
       if (selector) probeTarget.selector = selector;
       if (selectorIndex != null) probeTarget.selectorIndex = selectorIndex;
       existsInSource = await probeSourceElement(options.projectId, sourceFile, probeTarget);
     }
     const capabilities = resolveDomEditCapabilities({
       selector,
+      hfId,
       tagName: current.tagName.toLowerCase(),
       className: current.className,
       inlineStyles,
@@ -369,6 +370,7 @@ export async function resolveDomEditSelection(
     return {
       element: current,
       id: current.id || undefined,
+      hfId,
       selector,
       selectorIndex,
       sourceFile,
@@ -451,6 +453,7 @@ export function collectDomEditLayerItems(
   if (!root) return [];
 
   const items: DomEditLayerItem[] = [];
+  // fallow-ignore-next-line complexity
   const visit = (el: HTMLElement, depth: number) => {
     if (items.length >= maxItems) return;
 
@@ -464,6 +467,7 @@ export function collectDomEditLayerItems(
         depth,
         childCount: getDirectLayerChildren(el, options).length,
         id: target.id ?? undefined,
+        hfId: target.hfId ?? undefined,
         selector: target.selector ?? undefined,
         selectorIndex: target.selectorIndex,
         sourceFile: target.sourceFile,
@@ -535,10 +539,11 @@ export function getDomEditNonEditableReason(
 }
 
 export function getDomEditTargetKey(
-  selection: Pick<DomEditSelection, "id" | "selector" | "selectorIndex" | "sourceFile">,
+  selection: Pick<DomEditSelection, "id" | "hfId" | "selector" | "selectorIndex" | "sourceFile">,
 ): string {
   return [
     selection.sourceFile || "index.html",
+    selection.hfId ?? "",
     selection.id ?? "",
     selection.selector ?? "",
     selection.selectorIndex ?? "",
@@ -554,3 +559,18 @@ export function isTextEditableSelection(selection: DomEditSelection): boolean {
 }
 
 // buildElementAgentPrompt is in domEditingAgentPrompt.ts
+
+export function readHfId(element: Element): string | undefined {
+  return element.getAttribute("data-hf-id")?.trim() || undefined;
+}
+
+export function buildDomEditPatchTarget(
+  selection: Pick<DomEditSelection, "id" | "hfId" | "selector" | "selectorIndex">,
+): { id?: string | null; hfId?: string; selector?: string; selectorIndex?: number } {
+  return {
+    id: selection.id,
+    hfId: selection.hfId,
+    selector: selection.selector,
+    selectorIndex: selection.selectorIndex,
+  };
+}

package/src/components/editor/domEditingTypes.ts

@@ -98,6 +98,7 @@ export interface DomEditLayerItem {
   depth: number;
   childCount: number;
   id?: string;
+  hfId?: string;
   selector?: string;
   selectorIndex?: number;
   sourceFile: string;

package/src/components/editor/manualEditingAvailability.ts

@@ -74,7 +74,7 @@ export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
 export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],
-  false,
+  true,
 );
 
 export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;

package/src/components/editor/manualEdits.ts

@@ -240,6 +240,7 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
     "renderSeek",
   );
   const wrappedTimelineSeek = wrapSeekReapplyFunction(studioWin, studioWin.__timeline, "seek");
+  wrapSeekReapplyFunction(studioWin, studioWin.__timeline, "totalTime");
   const wrappedPlayerPlay = wrapPlayReapplyFunction(studioWin, studioWin.__player, "play");
   const wrappedTimelinePlay = wrapPlayReapplyFunction(studioWin, studioWin.__timeline, "play");
   const wrappedPlayerPause = wrapApplyAfterFunction(studioWin, studioWin.__player, "pause");
@@ -250,6 +251,7 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
   for (const timeline of Object.values(studioWin.__timelines ?? {})) {
     wrappedNamedTimelineSeek =
       wrapSeekReapplyFunction(studioWin, timeline, "seek") || wrappedNamedTimelineSeek;
+    wrapSeekReapplyFunction(studioWin, timeline, "totalTime");
     wrappedNamedTimelinePlay =
       wrapPlayReapplyFunction(studioWin, timeline, "play") || wrappedNamedTimelinePlay;
     wrappedNamedTimelinePause =
@@ -268,6 +270,7 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
         if (typeof value === "object" && value !== null) {
           const tl = value as Record<string, unknown>;
           wrapSeekReapplyFunction(studioWin, tl, "seek");
+          wrapSeekReapplyFunction(studioWin, tl, "totalTime");
           wrapPlayReapplyFunction(studioWin, tl, "play");
           wrapApplyAfterFunction(studioWin, tl, "pause");
           studioWin.__hfStudioManualEditsApply?.();

package/src/components/editor/manualEditsDom.ts

@@ -273,11 +273,25 @@ export function applyStudioPathOffsetDraft(
 ): void {
   promoteInlineForTransform(element);
   writeStudioPathOffsetVars(element, offset, { updateBase: false });
-  element.style.setProperty(
-    "translate",
-    composeTranslateValue(element, `${Math.round(offset.x)}px`, `${Math.round(offset.y)}px`),
-  );
-  stripGsapTranslateFromTransform(element);
+
+  const isGsapAnimated = gsapAnimatesProperty(element, "x", "y");
+  if (isGsapAnimated) {
+    // For GSAP-animated elements: use gsap.set for positioning (the timeline
+    // is paused during drag). Set translate:none explicitly to prevent
+    // double-counting with the transform.
+    element.style.setProperty("translate", "none");
+    const win = element.ownerDocument.defaultView as
+      | (Window & { gsap?: { set: (el: Element, vars: Record<string, unknown>) => void } })
+      | null;
+    win?.gsap?.set(element, { x: offset.x, y: offset.y });
+  } else {
+    // Non-GSAP elements: use CSS translate as before.
+    element.style.setProperty(
+      "translate",
+      composeTranslateValue(element, `${Math.round(offset.x)}px`, `${Math.round(offset.y)}px`),
+    );
+    stripGsapTranslateFromTransform(element);
+  }
 }
 
 /* ── Box size apply ───────────────────────────────────────────────── */
@@ -505,6 +519,10 @@ function queryStudioElements(doc: Document, attr: string): HTMLElement[] {
 
 function reapplyPathOffsets(doc: Document): void {
   for (const el of queryStudioElements(doc, STUDIO_PATH_OFFSET_ATTR)) {
+    // Skip elements where GSAP actively animates position — GSAP bakes the
+    // CSS translate into its transform and sets translate: none every tick.
+    // Stripping/restoring would oscillate against GSAP's rendering.
+    if (gsapAnimatesProperty(el, "x", "y")) continue;
     const x = el.style.getPropertyValue(STUDIO_OFFSET_X_PROP);
     const y = el.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
     if (x || y) {

package/src/components/editor/manualOffsetDrag.ts

@@ -232,6 +232,41 @@ export function createManualOffsetDragMember(input: {
   rect: ManualOffsetDragRect;
 }): ManualOffsetDragMemberResult {
   const initialOffset = readStudioPathOffset(input.element);
+  input.element.setAttribute("data-hf-drag-initial-offset-x", String(initialOffset.x));
+  input.element.setAttribute("data-hf-drag-initial-offset-y", String(initialOffset.y));
+
+  // Capture GSAP's x/y BEFORE any draft applies gsap.set — the commit path
+  // needs the original (uncorrupted) GSAP position to compute the new keyframe value.
+  const win = input.element.ownerDocument.defaultView as
+    | (Window & {
+        gsap?: { getProperty?: (el: Element, prop: string) => number };
+        __timelines?: Record<string, { pause?: () => void; paused?: () => boolean }>;
+      })
+    | null;
+  const gsapX = win?.gsap?.getProperty?.(input.element, "x") || 0;
+  const gsapY = win?.gsap?.getProperty?.(input.element, "y") || 0;
+  input.element.setAttribute("data-hf-drag-gsap-base-x", String(gsapX));
+  input.element.setAttribute("data-hf-drag-gsap-base-y", String(gsapY));
+
+  // Pause GSAP timelines during drag to prevent the tween from overwriting
+  // the draft's gsap.set on every tick. Track which we paused to resume later.
+  if (win?.__timelines) {
+    const paused: string[] = [];
+    for (const [id, tl] of Object.entries(win.__timelines)) {
+      try {
+        if (tl?.pause && !tl.paused?.()) {
+          tl.pause();
+          paused.push(id);
+        }
+      } catch {
+        /* cross-origin guard */
+      }
+    }
+    if (paused.length > 0) {
+      input.element.setAttribute("data-hf-drag-paused-timelines", paused.join(","));
+    }
+  }
+
   const initialPathOffset = captureStudioPathOffset(input.element);
   const gestureToken = beginStudioManualEditGesture(input.element);
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset);
@@ -313,11 +348,35 @@ function restoreManualOffsetDragMember(member: ManualOffsetDragMember): void {
 export function restoreManualOffsetDragMembers(members: ManualOffsetDragMember[]): void {
   for (const member of members) {
     restoreManualOffsetDragMember(member);
+    resumeGsapTimelines(member.element);
   }
 }
 
 export function endManualOffsetDragMembers(members: ManualOffsetDragMember[]): void {
   for (const member of members) {
     endStudioManualEditGesture(member.element, member.gestureToken);
+    member.element.removeAttribute("data-hf-drag-initial-offset-x");
+    member.element.removeAttribute("data-hf-drag-initial-offset-y");
+    member.element.removeAttribute("data-hf-drag-gsap-base-x");
+    member.element.removeAttribute("data-hf-drag-gsap-base-y");
+    resumeGsapTimelines(member.element);
   }
 }
+
+function resumeGsapTimelines(element: HTMLElement): void {
+  const ids = element.getAttribute("data-hf-drag-paused-timelines");
+  element.removeAttribute("data-hf-drag-paused-timelines");
+  if (!ids) return;
+  const win = element.ownerDocument.defaultView as
+    | (Window & {
+        __timelines?: Record<string, { pause?: () => void }>;
+        __player?: { seek?: (t: number) => void; getTime?: () => number };
+      })
+    | null;
+  if (!win) return;
+  // Re-seek to the current time to restore the paused timeline's render state.
+  // play() would start playback; pause() already stops. Seek re-renders at the
+  // current position without starting playback.
+  const t = win.__player?.getTime?.() ?? 0;
+  win.__player?.seek?.(t);
+}

package/src/components/editor/panelTokens.ts

@@ -0,0 +1,10 @@
+// ── Design Panel Tokens (for inline style={{}} usage) ──────────────────
+// Tailwind classes use `panel-*` from tailwind.config.js theme.extend.colors.
+// This file provides the same values for inline styles where Tailwind can't reach.
+
+export const P = {
+  accent: "#3CE6AC",
+  borderInput: "#27272A",
+  textMuted: "#52525B",
+  white: "#FAFAFA",
+} as const;

package/src/components/editor/propertyPanelColor.tsx

@@ -71,7 +71,7 @@ function ColorSlider({
         aria-valuemax={max}
         aria-valuenow={value}
         aria-disabled={disabled}
-        className={`relative h-4 rounded-full border border-neutral-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.55)] outline-none focus:border-[#f5a400] focus:ring-2 focus:ring-[#f5a400]/40 ${
+        className={`relative h-4 rounded-full border border-neutral-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.55)] outline-none focus:border-panel-accent focus:ring-2 focus:ring-panel-accent/40 ${
           disabled ? "cursor-not-allowed opacity-50" : "cursor-ew-resize"
         }`}
         style={{ background }}
@@ -294,7 +294,7 @@ export function ColorField({
                 <div className="truncate text-[11px] font-medium text-neutral-100">
                   {currentColor}
                 </div>
-                <div className="mt-0.5 text-[9px] uppercase tracking-[0.12em] text-neutral-600">
+                <div className="mt-0.5 text-[9px] text-neutral-600">
                   S {saturationPercent}% · B {brightnessPercent}% · A {alphaPercent}%
                 </div>
               </div>

package/src/components/editor/propertyPanelFill.tsx

@@ -278,7 +278,7 @@ export function GradientField({
               checked={parsed.repeating}
               disabled={disabled}
               onChange={(e) => patch({ repeating: e.target.checked })}
-              className="h-4 w-4 rounded border-neutral-700 bg-neutral-950 text-[#3ce6ac] focus:ring-[#3ce6ac]"
+              className="h-4 w-4 rounded border-neutral-700 bg-neutral-950 text-panel-accent focus:ring-panel-accent"
             />
             Repeat
           </label>

package/src/components/editor/propertyPanelHelpers.ts

@@ -41,6 +41,19 @@ export interface PropertyPanelProps {
   onAddGsapFromProperty?: (animId: string, prop: string) => void;
   onRemoveGsapFromProperty?: (animId: string, prop: string) => void;
   onAddGsapAnimation?: (method: "to" | "from" | "set" | "fromTo") => void;
+  onSetArcPath?: (
+    animId: string,
+    config: {
+      enabled: boolean;
+      autoRotate?: boolean | number;
+      segments?: import("@hyperframes/core/gsap-parser").ArcPathSegment[];
+    },
+  ) => void;
+  onUpdateArcSegment?: (
+    animId: string,
+    segmentIndex: number,
+    update: Partial<import("@hyperframes/core/gsap-parser").ArcPathSegment>,
+  ) => void;
   onAddKeyframe?: (
     animationId: string,
     percentage: number,
@@ -55,6 +68,9 @@ export interface PropertyPanelProps {
     value: number | string,
   ) => Promise<void>;
   onSeekToTime?: (time: number) => void;
+  recordingState?: "idle" | "recording" | "preview";
+  recordingDuration?: number;
+  onToggleRecording?: () => void;
 }
 
 /* ------------------------------------------------------------------ */
@@ -184,8 +200,8 @@ function fontSourceRank(source: FontSource): number {
 /* ------------------------------------------------------------------ */
 
 export const FIELD =
-  "min-w-0 rounded-xl border border-neutral-800 bg-neutral-900/95 px-3 py-2 text-neutral-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)] transition-colors focus-within:border-neutral-600";
-export const LABEL = "text-[11px] font-medium uppercase tracking-[0.18em] text-neutral-500";
+  "min-w-0 rounded-md bg-panel-input px-3 py-[7px] text-panel-text-1 transition-colors focus-within:ring-1 focus-within:ring-panel-accent/30";
+export const LABEL = "text-[11px] font-medium text-panel-text-3";
 export const RESPONSIVE_GRID = "grid grid-cols-[repeat(auto-fit,minmax(118px,1fr))] gap-3";
 export const EMPTY_STYLES: Record<string, string> = {};
 

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -76,7 +76,7 @@ export function MediaSection({
         {srcAttr && (
           <div className="min-w-0">
             <div className="flex items-center justify-between gap-2">
-              <div className="text-[10px] uppercase tracking-[0.12em] text-neutral-500">Source</div>
+              <div className="text-[11px] font-medium text-neutral-500">Source</div>
               <button
                 type="button"
                 onClick={() => {