@hyperframes/studio 0.8.104 → 0.8.106

package/src/components/editor/GsapAddAnimationControl.tsx

@@ -3,7 +3,7 @@ import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimation
 const STYLES = {
   classic: {
     method:
-      "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white",
+      "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0",
     cancel: "px-1.5 text-[11px] text-neutral-500 hover:text-neutral-300",
     trigger: "text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200",
   },

package/src/components/editor/GsapAnimationSection.tsx

@@ -24,13 +24,13 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
   return (
     <Section title="Animation" icon={<Film size={15} />}>
       {multipleTimelines && (
-        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400">
+        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink">
           This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss
           — consolidate into a single timeline to enable editing.
         </p>
       )}
       {unsupportedTimelinePattern && (
-        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400">
+        <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink">
           This timeline uses a computed key (window.__timelines[variable]) the editor can&apos;t
           resolve statically. Use a string-literal key (window.__timelines[&quot;id&quot;]) or a
           variable declaration (const tl = gsap.timeline()) to enable editing.

package/src/components/editor/InlineTextToolbar.tsx

@@ -77,7 +77,7 @@ export function InlineTextToolbar({
       data-inline-text-toolbar="true"
       role="toolbar"
       aria-label="Text formatting"
-      className="pointer-events-auto fixed z-200 flex items-center gap-1 rounded-lg border border-white/10 bg-[#15171c] p-1 shadow-[0_8px_24px_rgba(0,0,0,0.55)]"
+      className="pointer-events-auto fixed z-200 flex items-center gap-1 rounded-lg border border-border bg-raised p-1 shadow-[0_8px_24px_rgba(0,0,0,0.55)]"
       style={{
         left: placement.left,
         top: placement.top,
@@ -98,12 +98,12 @@ export function InlineTextToolbar({
       onClick={(event) => event.stopPropagation()}
     >
       <label
-        className="group relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-white/10"
+        className="group relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-hover"
         title="Text colour"
       >
         <span
           aria-hidden="true"
-          className="h-4 w-4 rounded-full border-2 border-white/25 transition-transform duration-150 group-hover:scale-110 group-active:scale-95"
+          className="h-4 w-4 rounded-full border-2 border-border-strong transition-transform duration-150 group-hover:scale-110 group-active:scale-95"
           // `background` maps a gradient to the PADDING box and then repeats it
           // to fill the border box, so the 1px border shows the strip either
           // side of the tile: the end colour on the left, the start colour on
@@ -202,7 +202,7 @@ function ToolbarToggle({
       aria-label={label}
       aria-pressed={on}
       className={`flex h-6 w-6 items-center justify-center rounded-md text-xs ${
-        on ? "bg-studio-accent/20 text-studio-accent" : "text-white/70 hover:bg-white/10"
+        on ? "bg-studio-accent/20 text-accent-ink" : "text-text-2 hover:bg-hover"
       }`}
       style={{
         fontWeight: bold ? 700 : 400,

package/src/components/editor/InspectorHeaderActions.tsx

@@ -67,7 +67,7 @@ export function InspectorHeaderActions({
         }}
         className={`flex h-6 w-6 items-center justify-center rounded transition-colors ${
           copied
-            ? "text-studio-accent"
+            ? "text-accent-ink"
             : "text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"
         }`}
         title={copied ? "Copied!" : "Copy element info to clipboard"}

package/src/components/editor/KeyframeDiamond.tsx

@@ -19,8 +19,11 @@ export const KeyframeDiamond = memo(function KeyframeDiamond({
   isHold = false,
 }: KeyframeDiamondProps) {
   const isFilled = state === "active";
-  const opacity = state === "ghost" ? 0.25 : state === "inactive" ? 0.6 : 1;
-  const color = state === "active" ? "#3CE6AC" : "#a3a3a3";
+  const color = {
+    active: "text-accent",
+    inactive: "text-text-2 hover:text-text-0",
+    ghost: "text-text-off hover:text-text-0",
+  }[state];
 
   return (
     <button
@@ -29,8 +32,7 @@ export const KeyframeDiamond = memo(function KeyframeDiamond({
         e.stopPropagation();
         onClick();
       }}
-      className="relative shrink-0 p-0.5 transition-opacity hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']"
-      style={{ color, opacity }}
+      className={`relative shrink-0 p-0.5 transition-colors before:absolute before:-inset-1.5 before:content-[''] ${color}`}
       title={title}
       aria-label={title}
       aria-pressed={state === "active"}

package/src/components/editor/KeyframeNavigation.tsx

@@ -82,11 +82,11 @@ function ArrowLeft({ disabled }: { disabled: boolean }) {
       height="10"
       viewBox="0 0 6 10"
       fill="none"
-      style={{ opacity: disabled ? 0.25 : 1 }}
+      className={disabled ? "text-text-off" : "text-text-2"}
     >
       <path
         d="M5 1L1 5L5 9"
-        stroke="#a3a3a3"
+        stroke="currentColor"
         strokeWidth="1.4"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -102,11 +102,11 @@ function ArrowRight({ disabled }: { disabled: boolean }) {
       height="10"
       viewBox="0 0 6 10"
       fill="none"
-      style={{ opacity: disabled ? 0.25 : 1 }}
+      className={disabled ? "text-text-off" : "text-text-2"}
     >
       <path
         d="M1 1L5 5L1 9"
-        stroke="#a3a3a3"
+        stroke="currentColor"
         strokeWidth="1.4"
         strokeLinecap="round"
         strokeLinejoin="round"

package/src/components/editor/LayersPanel.tsx

@@ -458,7 +458,7 @@ export const LayersPanel = memo(function LayersPanel() {
                 isDragged
                   ? "opacity-40"
                   : selected
-                    ? "bg-panel-accent/14 text-panel-accent"
+                    ? "bg-panel-accent/14 text-accent-ink"
                     : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"
               } ${dragKey ? "cursor-grabbing" : "cursor-pointer"}`}
               style={{ paddingLeft: 8 + layer.depth * 16 }}
@@ -494,9 +494,9 @@ export const LayersPanel = memo(function LayersPanel() {
               <span
                 className={`flex h-5 w-5 shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${
                   selected
-                    ? "bg-panel-accent/18 text-panel-accent"
+                    ? "bg-panel-accent/18 text-accent-ink"
                     : isCompHost
-                      ? "bg-panel-accent/40 text-panel-accent"
+                      ? "bg-on text-accent-ink"
                       : "bg-panel-hover text-panel-text-4"
                 }`}
               >

package/src/components/editor/PromotableControl.tsx

@@ -83,7 +83,7 @@ export function PromotableControl({
         <span
           // Sits above the row (not on top of top-0) so it clears a value that
           // renders flush to the row's right edge, e.g. flat Font/Color rows.
-          className="pointer-events-none absolute -top-2 right-1.5 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded-sm bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent"
+          className="pointer-events-none absolute -top-2 right-1.5 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded-sm bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-accent-ink"
           title={`Bound to variable "${promote.boundId}"`}
         >
           ◆ {promote.boundId}
@@ -97,7 +97,7 @@ export function PromotableControl({
             e.stopPropagation();
             promote.promote();
           }}
-          className="absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded-sm bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100"
+          className="absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded-sm bg-raised/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-accent-ink hover:opacity-100"
         >
           ◇ var
         </button>

package/src/components/editor/PropertyPanelEmptyState.tsx

@@ -24,7 +24,7 @@ function FlatEmptyState() {
       <div className="mt-2 flex w-full flex-col gap-1.5">
         <span className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2">
           <span className="flex items-center gap-2 text-[11px] text-panel-text-2">
-            <span className="text-panel-danger">●</span>
+            <span className="text-danger-ink">●</span>
             Record a gesture
           </span>
           <span className="rounded-sm border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
@@ -33,7 +33,7 @@ function FlatEmptyState() {
         </span>
         <span className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2">
           <span className="flex items-center gap-2 text-[11px] text-panel-text-2">
-            <span className="text-panel-accent">✦</span>
+            <span className="text-accent-ink">✦</span>
             Describe a change to the agent
           </span>
           <span className="rounded-sm border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
@@ -50,7 +50,7 @@ function elementKindGlyph(element: DomEditSelection): { glyph: string; className
     return { glyph: "◆", className: "bg-panel-media/10 text-panel-media" };
   }
   if (element.textFields?.length > 0) {
-    return { glyph: "T", className: "bg-panel-accent/10 text-panel-accent" };
+    return { glyph: "T", className: "bg-panel-accent/10 text-accent-ink" };
   }
   return { glyph: "▦", className: "bg-panel-container/10 text-panel-container" };
 }
@@ -74,7 +74,7 @@ function FlatMultiSelectState({
   return (
     <div className="flex flex-col gap-3 px-4 py-3">
       <div className="flex items-center gap-3 rounded-xl border border-panel-border bg-panel-surface p-3">
-        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-panel-accent">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-accent-ink">
           <Layers size={16} />
         </span>
         <div className="min-w-0 flex-1">

package/src/components/editor/PropertyPanelFlatFooter.tsx

@@ -40,7 +40,7 @@ export function PropertyPanelFlatFooter({
           height="13"
           viewBox="0 0 16 16"
           fill="currentColor"
-          className="text-panel-accent"
+          className="text-accent-ink"
         >
           <path d="M8 1l1.4 4.6L14 7l-4.6 1.4L8 13l-1.4-4.6L2 7l4.6-1.4z" />
         </svg>
@@ -57,7 +57,7 @@ export function PropertyPanelFlatFooter({
             track("button", "Gesture recording");
             onToggleRecording();
           }}
-          className={recording ? "text-panel-danger animate-pulse" : "text-panel-danger"}
+          className={recording ? "text-danger-ink animate-pulse" : "text-danger-ink"}
         >
           <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
             {recording ? (

package/src/components/editor/PropertyPanelFlatHeader.test.tsx

@@ -38,7 +38,7 @@ describe("PropertyPanelFlatHeader", () => {
     expect(host.textContent).toContain("Mono Label");
     expect(host.textContent).toContain(".mono-label · div");
     const icon = host.querySelector('[data-flat-header-icon="true"]');
-    expect(icon?.className).toContain("text-panel-accent");
+    expect(icon?.className).toContain("text-accent-ink");
     act(() => root.unmount());
   });
 

package/src/components/editor/PropertyPanelFlatHeader.tsx

@@ -4,7 +4,7 @@ import { ClipboardList, Film, Square, Type, X } from "../../icons/SystemIcons";
 
 const ICON_BY_KIND = { text: Type, media: Film, other: Square } as const;
 const ICON_COLOR_BY_KIND = {
-  text: "text-panel-accent",
+  text: "text-accent-ink",
   media: "text-panel-media",
   other: "text-panel-container",
 } as const;
@@ -92,7 +92,7 @@ export function PropertyPanelFlatHeader({
             track("button", "Copy element info");
             onCopy();
           }}
-          className={copied ? "text-panel-accent" : undefined}
+          className={copied ? "text-accent-ink" : undefined}
         >
           <ClipboardList size={13} />
         </button>

package/src/components/editor/SnapToolbar.tsx

@@ -73,7 +73,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
           type="button"
           className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
             motionPathArmed
-              ? "bg-studio-accent/20 text-studio-accent"
+              ? "bg-studio-accent/20 text-accent-ink"
               : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
           }`}
           onClick={() => setMotionPathArmed(!motionPathArmed)}
@@ -99,7 +99,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
             type="button"
             className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
               visible
-                ? "bg-studio-accent/20 text-studio-accent"
+                ? "bg-studio-accent/20 text-accent-ink"
                 : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
             }`}
             onClick={toggle}
@@ -115,7 +115,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
         type="button"
         className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
           prefs.snapEnabled
-            ? "bg-studio-accent/20 text-studio-accent"
+            ? "bg-studio-accent/20 text-accent-ink"
             : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
         }`}
         onClick={toggleSnap}
@@ -131,7 +131,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
           type="button"
           className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
             prefs.gridVisible
-              ? "bg-studio-accent/20 text-studio-accent"
+              ? "bg-studio-accent/20 text-accent-ink"
               : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
           }`}
           onClick={toggleGrid}
@@ -164,7 +164,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
         {gridPopoverOpen && (
           <div
             ref={popoverRef}
-            className="absolute right-0 top-full mt-1 rounded-lg bg-neutral-800 border border-neutral-700 p-3 shadow-xl min-w-[180px]"
+            className="absolute right-0 top-full mt-1 rounded-lg bg-raised border border-border p-3 shadow-xl min-w-[180px]"
           >
             <label className="flex items-center justify-between text-xs text-white/80 mb-2">
               <span>Grid spacing</span>

package/src/components/editor/SourceEditor.tsx

@@ -11,12 +11,12 @@ import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { bracketMatching, foldGutter, indentOnInput } from "@codemirror/language";
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
-import { oneDark } from "@codemirror/theme-one-dark";
 import type { Extension } from "@codemirror/state";
 import { html } from "@codemirror/lang-html";
 import { css } from "@codemirror/lang-css";
 import { javascript } from "@codemirror/lang-javascript";
 import { markdown } from "@codemirror/lang-markdown";
+import { studioCodeTheme } from "./studioCodeTheme";
 
 // Marks a programmatic doc sync (external content push — e.g. a manual-edit
 // commit writing the source) so the update listener doesn't mistake it for a
@@ -114,13 +114,9 @@ export const SourceEditor = memo(function SourceEditor({
           highlightSelectionMatches(),
           keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...historyKeymap]),
           getLanguageExtension(lang),
-          oneDark,
+          studioCodeTheme,
           updateListener,
           EditorState.readOnly.of(readOnly),
-          EditorView.theme({
-            "&": { height: "100%" },
-            ".cm-scroller": { overflow: "auto" },
-          }),
         ],
       });
 

package/src/components/editor/TimelineFxPopover.tsx

@@ -139,7 +139,7 @@ export function TimelineFxPopover({
       ref={rootRef}
       role="dialog"
       aria-label="Effects"
-      className="z-200 flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl"
+      className="z-200 flex flex-col overflow-hidden rounded-md border border-border bg-raised p-2 shadow-xl"
       style={clampedStyle(anchorRect)}
       onKeyDown={onKeyDown}
       onPointerDown={(event) => event.stopPropagation()}
@@ -165,10 +165,10 @@ export function TimelineFxPopover({
           onAuditionTracked={(id) => trackPresetAuditioned(id, { trackKind })}
         />
       </div>
-      <div className="mt-2 flex shrink-0 items-center justify-between border-t border-white/10 pt-2 text-[10px] text-white/55">
+      <div className="mt-2 flex shrink-0 items-center justify-between border-t border-border pt-2 text-[10px] text-text-muted">
         <button
           type="button"
-          className="hover:text-white"
+          className="hover:text-text-0"
           onClick={() => {
             onClose();
             onOpenRack();
@@ -178,7 +178,7 @@ export function TimelineFxPopover({
         </button>
         <button
           type="button"
-          className="hover:text-white"
+          className="hover:text-text-0"
           onClick={() => {
             onClose();
             onOpenRack();

package/src/components/editor/Transform3DCube.tsx

@@ -314,7 +314,7 @@ export function Transform3DCube({
           aria-label="Keyframe 3D transform"
           aria-pressed={keyframed}
           className={`absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${
-            keyframed ? "text-[#5ff0bf]" : "text-neutral-500 hover:text-neutral-200"
+            keyframed ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
           }`}
         >
           <svg

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

@@ -1,12 +1,6 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from "vitest";
-import { applyStudioBoxSize, applyStudioPathOffset, readStudioBoxSize } from "./manualEditsDom";
-import { reapplyPositionEditsAfterSeek } from "./manualEditsSeekReapply";
-import { buildBoxSizePatches, buildPathOffsetPatches } from "./manualEditsDomPatches";
-import { createManualOffsetDragMember, applyManualOffsetDragCommit } from "./manualOffsetDrag";
 import { computeNextResizeAnchor } from "./domEditResizeLocal";
-import type { PatchOperation } from "../../utils/sourcePatcher";
-import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
 
 /**
  * Center-anchored corner resize (CapCut model): the element scales about its
@@ -38,40 +32,6 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-/** Apply a built PatchOperation[] to a live element, mirroring sourcePatcher's
- * inline-style / attribute application — i.e. what the persisted source carries
- * when it is re-parsed into the DOM on the next preview load. */
-function applyPatchesToElement(el: HTMLElement, ops: PatchOperation[]): void {
-  for (const op of ops) {
-    if (op.type === "inline-style") {
-      if (op.value === null) el.style.removeProperty(op.property);
-      else el.style.setProperty(op.property, op.value);
-    } else if (op.type === "attribute") {
-      if (op.value === null) el.removeAttribute(op.property);
-      else el.setAttribute(op.property, op.value);
-    }
-  }
-}
-
-/** Net translate applied to an element, resolving the studio offset var()
- * expression to its px value so we compare the actually-rendered translation. */
-function resolvedTranslatePx(el: HTMLElement): { x: number; y: number } {
-  const raw = el.style.getPropertyValue("translate").trim();
-  if (!raw || raw === "none") return { x: 0, y: 0 };
-  const vx = Number.parseFloat(el.style.getPropertyValue("--hf-studio-offset-x")) || 0;
-  const vy = Number.parseFloat(el.style.getPropertyValue("--hf-studio-offset-y")) || 0;
-  const parts = splitTopLevelWhitespace(raw);
-  const parseAxis = (part: string, varVal: number): number => {
-    if (part && part.includes("--hf-studio-offset")) return varVal;
-    const n = Number.parseFloat(part);
-    return Number.isFinite(n) ? n : 0;
-  };
-  return {
-    x: parseAxis(parts[0] ?? "", vx),
-    y: parseAxis(parts[1] ?? "", vy),
-  };
-}
-
 describe("center-anchored corner resize — no shift after release", () => {
   it("the per-frame center anchor converges (does NOT oscillate) — the release-shift root cause", () => {
     // Model the pointermove anchor loop that pins the element's CENTER. The physical
@@ -157,48 +117,4 @@ describe("center-anchored corner resize — no shift after release", () => {
       }
     }
   });
-
-  it("net translate after persist+reload equals the committed anchor offset (non-GSAP)", () => {
-    // The committed offset flows through the real apply → persist → reload chain
-    // unchanged (this hop was proved clean; the shift is upstream in the anchor
-    // loop above, not in persistence).
-    const el = document.createElement("div");
-    el.style.setProperty("width", "200px");
-    el.style.setProperty("height", "100px");
-    document.body.appendChild(el);
-
-    const anchorDx = -30;
-    const anchorDy = -18;
-    const finalSize = { width: 240, height: 130 };
-
-    applyStudioBoxSize(el, finalSize);
-    const memberResult = createManualOffsetDragMember({
-      key: "k",
-      selection: { element: el } as never,
-      element: el,
-      rect: { left: 0, top: 0, width: 240, height: 130, editScaleX: 1, editScaleY: 1 },
-    });
-    expect(memberResult.ok).toBe(true);
-    if (!memberResult.ok) return;
-
-    const finalOffset = applyManualOffsetDragCommit(memberResult.member, anchorDx, anchorDy);
-
-    applyStudioBoxSize(el, finalSize);
-    const patches = buildBoxSizePatches(el);
-    applyStudioPathOffset(el, finalOffset);
-    patches.push(...buildPathOffsetPatches(el));
-
-    expect(resolvedTranslatePx(el)).toEqual({ x: anchorDx, y: anchorDy });
-
-    // Persist → fresh element re-parsed from source → reload re-stamp.
-    const reloaded = document.createElement("div");
-    reloaded.style.setProperty("width", "200px");
-    reloaded.style.setProperty("height", "100px");
-    document.body.appendChild(reloaded);
-    applyPatchesToElement(reloaded, patches);
-    reapplyPositionEditsAfterSeek(reloaded.ownerDocument);
-
-    expect(resolvedTranslatePx(reloaded)).toEqual({ x: anchorDx, y: anchorDy });
-    expect(readStudioBoxSize(reloaded)).toEqual(finalSize);
-  });
 });