@hyperframes/studio 0.8.50 → 0.8.52

package/src/components/dock/dockLayout.test.ts

@@ -0,0 +1,134 @@
+// @vitest-environment happy-dom
+
+import type { DockviewApi } from "dockview-react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  applySideMinimums,
+  buildEditLayout,
+  defaultSideWidths,
+  sideMinimumWidth,
+} from "./dockLayout";
+import { mountBareDockview } from "./dockTestHarness";
+
+class ResizeObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = ResizeObserverStub;
+
+// Expected values are hand-derived from the old fitPanels rule: the preview keeps 360 first,
+// then each side column takes half of what remains, never above 200 or below 120.
+describe("sideMinimumWidth", () => {
+  it.each([
+    [1680, 200],
+    [1200, 200],
+    [860, 200],
+    [760, 200],
+    [700, 170],
+    [600, 120],
+    [560, 120],
+    [400, 120],
+  ])("is %ipx wide -> sides shrink to %ipx at most", (viewport, expected) => {
+    expect(sideMinimumWidth(viewport)).toBe(expected);
+  });
+});
+
+describe("defaultSideWidths", () => {
+  it.each([
+    [1680, 384, 424],
+    [1280, 329, 364],
+    [860, 221, 244],
+    [560, 120, 120],
+  ])("at %ipx gives %i / %i", (viewport, left, right) => {
+    expect(defaultSideWidths(viewport)).toEqual({ left, right });
+  });
+
+  it.each([1680, 1280, 1000, 860, 760, 700, 600, 560, 480])(
+    "leaves the preview its 360px floor at %ipx whenever the sides can shrink enough",
+    (viewport) => {
+      const { left, right } = defaultSideWidths(viewport);
+      const floor = sideMinimumWidth(viewport);
+      const overflow = left + right + 360 - viewport;
+      expect(overflow <= 0 || (left === floor && right === floor)).toBe(true);
+    },
+  );
+});
+
+describe("applySideMinimums", () => {
+  let api: DockviewApi;
+  beforeEach(() => {
+    ({ api } = mountBareDockview());
+  });
+  afterEach(() => {
+    api.dispose();
+    document.body.innerHTML = "";
+  });
+
+  it("lowers side groups' minimum on a narrow window and shrinks them, never touching the preview", () => {
+    api.layout(1200, 700);
+    buildEditLayout(api, 1200);
+    applySideMinimums(api, 560);
+    expect(api.getPanel("compositions")?.group.minimumWidth).toBe(120);
+    expect(api.getPanel("design")?.group.minimumWidth).toBe(120);
+    expect(api.getPanel("compositions")?.group.width).toBe(120);
+    expect(api.getPanel("design")?.group.width).toBe(120);
+    expect(api.getPanel("preview")?.group.minimumWidth).toBe(360);
+  });
+
+  it("leaves a wide window's user-chosen widths alone", () => {
+    api.layout(1200, 700);
+    buildEditLayout(api, 1200);
+    api.getPanel("compositions")?.group.api.setSize({ width: 300 });
+    applySideMinimums(api, 1200);
+    expect(api.getPanel("compositions")?.group.width).toBe(300);
+  });
+
+  it("keeps the preview's floor when a side panel is tabbed into the preview group", () => {
+    api.layout(1200, 700);
+    buildEditLayout(api, 1200);
+    const preview = api.getPanel("preview");
+    const design = api.getPanel("design");
+    if (!preview || !design) throw new Error("default layout is missing panels");
+    design.api.moveTo({ group: preview.group, position: "center", index: 0 });
+    preview.api.setActive();
+    applySideMinimums(api, 560);
+    expect(preview.group.minimumWidth).toBe(360);
+  });
+
+  it("pins the preview floor when a side panel that was showing gets the preview dragged in", () => {
+    api.layout(1200, 700);
+    buildEditLayout(api, 1200);
+    applySideMinimums(api, 560);
+    const preview = api.getPanel("preview");
+    const design = api.getPanel("design");
+    if (!preview || !design) throw new Error("default layout is missing panels");
+    preview.api.moveTo({ group: design.group });
+    applySideMinimums(api, 560);
+    expect(preview.group.minimumWidth).toBe(360);
+  });
+
+  it("rewrites the minimum of a group that is neither the preview nor side-only", () => {
+    api.layout(1200, 700);
+    buildEditLayout(api, 1200);
+    const timeline = api.getPanel("timeline");
+    const compositions = api.getPanel("compositions");
+    if (!timeline || !compositions) throw new Error("default layout is missing panels");
+    timeline.api.moveTo({ group: compositions.group });
+    applySideMinimums(api, 560);
+    expect(compositions.group.minimumWidth).toBe(120);
+  });
+
+  it("drops the preview floor from a group the preview has left", () => {
+    api.layout(1200, 700);
+    buildEditLayout(api, 1200);
+    const preview = api.getPanel("preview");
+    const timeline = api.getPanel("timeline");
+    if (!preview || !timeline) throw new Error("default layout is missing panels");
+    preview.api.moveTo({ group: timeline.group });
+    applySideMinimums(api, 560);
+    preview.api.moveTo({ position: "right", group: api.getPanel("design")?.group });
+    applySideMinimums(api, 560);
+    expect(timeline.group.minimumWidth).toBe(120);
+  });
+});

package/src/components/dock/dockLayout.ts

@@ -0,0 +1,105 @@
+import type { Direction, DockviewApi } from "dockview-react";
+import { DOCK_PANEL_COMPONENT } from "./dockLayoutSchema";
+import { PANEL_DEFINITIONS, isPanelId, type PanelId } from "./panelRegistry";
+
+const MIN_PREVIEW_W = 360;
+const MIN_PREVIEW_H = 200;
+const MIN_TIMELINE_H = 100;
+const MIN_SIDE_W = 200;
+const MIN_SIDE_W_FLOOR = 120;
+const DEFAULT_TIMELINE_H = 360;
+
+/** Preferred side widths; when they overflow the preview's floor the right yields first, then the left. */
+export function defaultSideWidths(viewportWidth: number) {
+  const floor = sideMinimumWidth(viewportWidth);
+  const left = Math.max(floor, Math.min(384, Math.round(viewportWidth * 0.257)));
+  const right = Math.max(Math.min(280, floor), Math.min(424, Math.round(viewportWidth * 0.284)));
+  const excess = left + right - Math.max(0, viewportWidth - MIN_PREVIEW_W);
+  if (excess <= 0) return { left, right };
+  const shrunkRight = Math.max(floor, right - excess);
+  return { left: Math.max(floor, left - (excess - (right - shrunkRight))), right: shrunkRight };
+}
+
+/**
+ * Side groups keep MIN_SIDE_W while both fit beside the preview's floor, then shrink down to
+ * MIN_SIDE_W_FLOOR; below that the dock overflows and clips rather than squeezing the preview.
+ */
+export function sideMinimumWidth(dockWidth: number): number {
+  const fair = Math.floor((dockWidth - MIN_PREVIEW_W) / 2);
+  return Math.min(MIN_SIDE_W, Math.max(MIN_SIDE_W_FLOOR, fair));
+}
+
+function holdsPreview(group: DockviewApi["groups"][number]) {
+  return group.panels.some((panel) => panel.id === "preview");
+}
+
+/** The zone of a group whose every tab is a side panel, else null. */
+function sideZone(group: DockviewApi["groups"][number]): "left" | "right" | null {
+  const zones = group.panels.map((panel) =>
+    isPanelId(panel.id) ? PANEL_DEFINITIONS[panel.id].zone : "center",
+  );
+  const first = zones[0];
+  const allSide = zones.every((zone) => zone !== "center");
+  return allSide && first && first !== "center" ? first : null;
+}
+
+/** Idempotent; rewrites every group's minimum, since dockview keeps a constraint once set. */
+export function applySideMinimums(api: DockviewApi, dockWidth = window.innerWidth) {
+  const minimumWidth = sideMinimumWidth(dockWidth);
+  const cap = defaultSideWidths(dockWidth);
+  for (const group of api.groups) {
+    if (holdsPreview(group)) {
+      group.api.setConstraints({ minimumWidth: MIN_PREVIEW_W });
+      continue;
+    }
+    group.api.setConstraints({ minimumWidth });
+    const zone = sideZone(group);
+    const limit = zone === "right" ? cap.right : cap.left;
+    if (zone && minimumWidth < MIN_SIDE_W && group.width > limit) {
+      group.api.setSize({ width: limit });
+    }
+  }
+}
+
+function minimumSize(id: PanelId) {
+  if (id === "preview") return { minimumWidth: MIN_PREVIEW_W, minimumHeight: MIN_PREVIEW_H };
+  if (id === "timeline") return { minimumHeight: MIN_TIMELINE_H };
+  return { minimumWidth: MIN_SIDE_W };
+}
+
+export function addRegisteredPanel(
+  api: DockviewApi,
+  id: PanelId,
+  position?: { referencePanel: PanelId; direction: Direction },
+) {
+  return api.addPanel({
+    id,
+    component: DOCK_PANEL_COMPONENT,
+    title: PANEL_DEFINITIONS[id].title,
+    renderer: "always",
+    ...minimumSize(id),
+    ...(position ? { position } : {}),
+  });
+}
+
+/** The default Edit layout: [library | preview | inspector] over a full-width timeline. */
+export function buildEditLayout(api: DockviewApi, viewportWidth: number) {
+  api.clear();
+  const widths = defaultSideWidths(viewportWidth);
+  addRegisteredPanel(api, "preview");
+  addRegisteredPanel(api, "timeline", { referencePanel: "preview", direction: "below" });
+  addRegisteredPanel(api, "compositions", { referencePanel: "preview", direction: "left" });
+  for (const id of ["assets", "code", "catalog"] as const) {
+    addRegisteredPanel(api, id, { referencePanel: "compositions", direction: "within" });
+  }
+  addRegisteredPanel(api, "design", { referencePanel: "preview", direction: "right" });
+  for (const id of ["layers", "renders", "variables"] as const) {
+    addRegisteredPanel(api, id, { referencePanel: "design", direction: "within" });
+  }
+  api.getPanel("compositions")?.api.setActive();
+  api.getPanel("design")?.api.setActive();
+  applySideMinimums(api, viewportWidth);
+  api.getPanel("compositions")?.group.api.setSize({ width: widths.left });
+  api.getPanel("design")?.group.api.setSize({ width: widths.right });
+  api.getPanel("timeline")?.group.api.setSize({ height: DEFAULT_TIMELINE_H });
+}

package/src/components/dock/dockLayoutSchema.ts

@@ -0,0 +1,66 @@
+import type { SerializedDockview } from "dockview-react";
+import { isPanelId } from "./panelRegistry";
+
+export const DOCK_PANEL_COMPONENT = "panel";
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function collectLeafViews(node: unknown, into: unknown[]): boolean {
+  if (!isRecord(node)) return false;
+  if (node.type === "leaf") {
+    if (!isRecord(node.data) || !Array.isArray(node.data.views)) return false;
+    into.push(...node.data.views);
+    return true;
+  }
+  if (node.type === "branch") {
+    return Array.isArray(node.data) && node.data.every((child) => collectLeafViews(child, into));
+  }
+  return false;
+}
+
+function hasGridShape(grid: Record<string, unknown>): boolean {
+  const oriented = grid.orientation === "HORIZONTAL" || grid.orientation === "VERTICAL";
+  return oriented && typeof grid.width === "number" && typeof grid.height === "number";
+}
+
+function panelsAreRegistered(panels: Record<string, unknown>): boolean {
+  const ids = Object.keys(panels);
+  return (
+    ids.length > 0 &&
+    ids.every((id) => {
+      const state = panels[id];
+      return (
+        isPanelId(id) &&
+        isRecord(state) &&
+        state.id === id &&
+        state.contentComponent === DOCK_PANEL_COMPONENT
+      );
+    })
+  );
+}
+
+function collectFloatingViews(floating: unknown, into: unknown[]): boolean {
+  if (floating === undefined) return true;
+  if (!Array.isArray(floating)) return false;
+  return floating.every((group) => {
+    if (!isRecord(group) || !isRecord(group.data) || !Array.isArray(group.data.views)) return false;
+    into.push(...group.data.views);
+    return true;
+  });
+}
+
+/** Parses a stored layout at the trust boundary; null (stale or foreign shape) means use the default preset. */
+export function parseDockLayout(value: unknown): SerializedDockview | null {
+  if (!isRecord(value) || !isRecord(value.grid) || !isRecord(value.panels)) return null;
+  const { grid, panels } = value;
+  if (!hasGridShape(grid) || !panelsAreRegistered(panels)) return null;
+
+  const views: unknown[] = [];
+  if (!collectLeafViews(grid.root, views)) return null;
+  if (!collectFloatingViews(value.floatingGroups, views)) return null;
+  const everyViewIsAPanel = views.every((id) => typeof id === "string" && id in panels);
+  const everyPanelIsPlaced = Object.keys(panels).every((id) => views.includes(id));
+  return everyViewIsAPanel && everyPanelIsPlaced ? (value as unknown as SerializedDockview) : null;
+}

package/src/components/dock/dockLayoutStore.ts

@@ -0,0 +1,91 @@
+import { create } from "zustand";
+import {
+  PANEL_DEFINITIONS,
+  PANEL_IDS,
+  panelsInZone,
+  type PanelId,
+  type PanelZone,
+} from "./panelRegistry";
+
+/** The narrow surface Dock.Root exposes; dockview types never leave the dock folder. */
+export interface DockController {
+  /** Adds the panel at its default place if it is closed; never moves focus. */
+  open: (id: PanelId) => void;
+  /** Focuses the panel, reopening it at its default place if it was closed. */
+  activate: (id: PanelId) => void;
+  setTitle: (id: PanelId, title: string) => void;
+  close: (id: PanelId) => void;
+  /** Hides or shows the panel's whole tab group without closing it. */
+  setGroupVisible: (id: PanelId, visible: boolean) => void;
+  reset: () => void;
+}
+
+export interface DockSnapshot {
+  openPanels: ReadonlySet<PanelId>;
+  /** Open panels whose tab is showing and whose group is not hidden. */
+  visiblePanels: ReadonlySet<PanelId>;
+  activePanel: PanelId | null;
+}
+
+type LastActive = Partial<Record<PanelZone, PanelId>>;
+
+interface DockLayoutState extends DockSnapshot {
+  controller: DockController | null;
+  lastActive: LastActive;
+  /** An activation requested before the dock mounted; Dock.Root applies it on ready. */
+  pendingActivation: PanelId | null;
+  attach: (controller: DockController) => void;
+  detach: () => void;
+  sync: (snapshot: DockSnapshot) => void;
+  takePendingActivation: () => PanelId | null;
+  activatePanel: (id: PanelId) => void;
+  closePanel: (id: PanelId) => void;
+  togglePanel: (id: PanelId) => void;
+  setZoneVisible: (zone: PanelZone, visible: boolean) => void;
+  resetLayout: () => void;
+}
+
+export const useDockLayoutStore = create<DockLayoutState>((set, get) => ({
+  controller: null,
+  openPanels: new Set(PANEL_IDS),
+  visiblePanels: new Set(PANEL_IDS),
+  activePanel: null,
+  lastActive: {},
+  pendingActivation: null,
+  attach: (controller) => set({ controller }),
+  detach: () => set({ controller: null }),
+  sync: (snapshot) =>
+    set((state) => {
+      const { activePanel } = snapshot;
+      if (!activePanel) return snapshot;
+      const zone = PANEL_DEFINITIONS[activePanel].zone;
+      return { ...snapshot, lastActive: { ...state.lastActive, [zone]: activePanel } };
+    }),
+  takePendingActivation: () => {
+    const { pendingActivation } = get();
+    set({ pendingActivation: null });
+    return pendingActivation;
+  },
+  activatePanel: (id) => {
+    const { controller } = get();
+    if (!controller) {
+      set({ pendingActivation: id });
+      return;
+    }
+    controller.setGroupVisible(id, true);
+    controller.activate(id);
+  },
+  closePanel: (id) => get().controller?.close(id),
+  togglePanel: (id) => {
+    const { openPanels, activatePanel, closePanel } = get();
+    if (openPanels.has(id)) closePanel(id);
+    else activatePanel(id);
+  },
+  setZoneVisible: (zone, visible) => {
+    const { controller, openPanels } = get();
+    for (const id of panelsInZone(zone)) {
+      if (openPanels.has(id)) controller?.setGroupVisible(id, visible);
+    }
+  },
+  resetLayout: () => get().controller?.reset(),
+}));

package/src/components/dock/dockTestHarness.ts

@@ -0,0 +1,11 @@
+import { createDockview, type DockviewApi } from "dockview-react";
+
+/** A real dockview mounted on a fresh host element, with empty panel bodies. */
+export function mountBareDockview(): { host: HTMLElement; api: DockviewApi } {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const api = createDockview(host, {
+    createComponent: () => ({ element: document.createElement("div"), init() {}, dispose() {} }),
+  });
+  return { host, api };
+}

package/src/components/dock/panelRegistry.ts

@@ -0,0 +1,67 @@
+import type { Direction } from "dockview-react";
+
+export const PANEL_IDS = [
+  "preview",
+  "timeline",
+  "compositions",
+  "assets",
+  "code",
+  "catalog",
+  "design",
+  "layers",
+  "renders",
+  "variables",
+  "slideshow",
+] as const;
+
+export type PanelId = (typeof PANEL_IDS)[number];
+export type PanelZone = "left" | "center" | "right";
+
+export interface PanelDefinition {
+  title: string;
+  zone: PanelZone;
+  /** Where Window > <panel> puts it when it has no saved place: next to `near`. */
+  reopen: { near: PanelId; direction: Direction };
+  /** Content stays mounted while its tab is hidden (the preview iframe must not reload). */
+  keepMounted?: true;
+}
+
+export const PANEL_DEFINITIONS = {
+  preview: {
+    title: "Preview",
+    zone: "center",
+    reopen: { near: "timeline", direction: "above" },
+    keepMounted: true,
+  },
+  timeline: {
+    title: "Timeline",
+    zone: "center",
+    reopen: { near: "preview", direction: "below" },
+    keepMounted: true,
+  },
+  compositions: {
+    title: "Compositions",
+    zone: "left",
+    reopen: { near: "preview", direction: "left" },
+  },
+  assets: { title: "Assets", zone: "left", reopen: { near: "compositions", direction: "within" } },
+  code: { title: "Code", zone: "left", reopen: { near: "compositions", direction: "within" } },
+  catalog: {
+    title: "Catalog",
+    zone: "left",
+    reopen: { near: "compositions", direction: "within" },
+  },
+  design: { title: "Design", zone: "right", reopen: { near: "preview", direction: "right" } },
+  layers: { title: "Layers", zone: "right", reopen: { near: "design", direction: "within" } },
+  renders: { title: "Renders", zone: "right", reopen: { near: "design", direction: "within" } },
+  variables: { title: "Variables", zone: "right", reopen: { near: "design", direction: "within" } },
+  slideshow: { title: "Slideshow", zone: "right", reopen: { near: "design", direction: "within" } },
+} as const satisfies Record<PanelId, PanelDefinition>;
+
+export function isPanelId(value: unknown): value is PanelId {
+  return typeof value === "string" && (PANEL_IDS as readonly string[]).includes(value);
+}
+
+export function panelsInZone(zone: PanelZone): PanelId[] {
+  return PANEL_IDS.filter((id) => PANEL_DEFINITIONS[id].zone === zone);
+}

package/src/components/editor/AnimationCard.tsx

@@ -172,7 +172,7 @@ export const AnimationCard = memo(function AnimationCard({
     return (
       <div className="border-b border-neutral-800 pb-2">
         <div className="flex items-center gap-2 py-1.5">
-          <span className="rounded bg-neutral-800 px-1.5 py-0.5 text-[10px] font-medium text-neutral-400">
+          <span className="rounded-sm bg-neutral-800 px-1.5 py-0.5 text-[10px] font-medium text-neutral-400">
             Position
           </span>
           <span className="text-[11px] text-neutral-500">
@@ -201,7 +201,7 @@ export const AnimationCard = memo(function AnimationCard({
         className="flex w-full items-center gap-2 py-1.5 active:scale-[0.99]"
       >
         <span
-          className="rounded bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-panel-accent"
+          className="rounded-sm bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-panel-accent"
           title={METHOD_TOOLTIPS[animation.method]}
         >
           {methodLabel}
@@ -226,7 +226,7 @@ export const AnimationCard = memo(function AnimationCard({
           height="10"
           viewBox="0 0 10 10"
           fill="currentColor"
-          className={`flex-shrink-0 transition-transform ${flat ? "text-panel-text-5" : "text-neutral-500"} ${expanded ? "" : "-rotate-90"}`}
+          className={`shrink-0 transition-transform ${flat ? "text-panel-text-5" : "text-neutral-500"} ${expanded ? "" : "-rotate-90"}`}
         >
           <path d="M2 3l3 4 3-4z" />
         </svg>
@@ -262,7 +262,7 @@ export const AnimationCard = memo(function AnimationCard({
                   setCopied(true);
                   setTimeout(() => setCopied(false), 1500);
                 }}
-                className="flex-shrink-0 rounded px-1.5 py-0.5 text-[9px] font-medium text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+                className="shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
                 title="Copy description to clipboard — paste into agent prompts"
               >
                 {copied ? "Copied" : "Copy"}

package/src/components/editor/AnimationCardParts.tsx

@@ -46,7 +46,7 @@ function RemoveButton({ onClick, title }: { onClick: () => void; title: string }
     <button
       type="button"
       onClick={onClick}
-      className="relative flex-shrink-0 rounded p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-red-400 active:scale-[0.95]"
+      className="relative shrink-0 rounded-sm p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-red-400 active:scale-[0.95]"
       title={title}
       aria-label={title}
     >
@@ -91,7 +91,7 @@ export function PropertyRow({
             role="switch"
             aria-checked={isVisible}
             onClick={() => onCommit(isVisible ? "hidden" : "visible")}
-            className="flex-shrink-0 rounded-full transition-colors duration-200 relative"
+            className="shrink-0 rounded-full transition-colors duration-200 relative"
             style={{ width: 28, height: 16, background: isVisible ? P.accent : P.borderInput }}
             title={isVisible ? "Visible — click to hide" : "Hidden — click to show"}
           >
@@ -117,13 +117,13 @@ export function PropertyRow({
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-1">
           <div className="min-w-0 flex-1 flex items-center gap-2 px-2 py-1 rounded-lg bg-neutral-900 border border-neutral-800">
-            <span className="flex-shrink-0 text-[11px] font-medium text-neutral-500">
+            <span className="shrink-0 text-[11px] font-medium text-neutral-500">
               {PROP_LABELS[prop] ?? prop}
             </span>
             <input
               type="text"
               defaultValue={String(val)}
-              className="flex-1 bg-transparent text-[11px] text-neutral-200 outline-none"
+              className="flex-1 bg-transparent text-[11px] text-neutral-200 outline-hidden"
               onBlur={(e) => onCommit(e.currentTarget.value)}
               onKeyDown={(e) => {
                 if (e.key === "Enter") e.currentTarget.blur();
@@ -139,7 +139,7 @@ export function PropertyRow({
                 key={p.value}
                 type="button"
                 onClick={() => onCommit(p.value)}
-                className="px-1.5 py-0.5 rounded text-[9px] font-medium text-neutral-500 bg-neutral-800/50 hover:bg-neutral-800 hover:text-neutral-300 transition-colors"
+                className="px-1.5 py-0.5 rounded-sm text-[9px] font-medium text-neutral-500 bg-neutral-800/50 hover:bg-neutral-800 hover:text-neutral-300 transition-colors"
               >
                 {p.label}
               </button>
@@ -190,7 +190,7 @@ export function AddPropertyTrigger({
     return (
       <select
         autoFocus
-        className="min-w-0 rounded-lg border border-neutral-700 bg-neutral-900 px-2 py-1 text-[11px] text-neutral-100 outline-none"
+        className="min-w-0 rounded-lg border border-neutral-700 bg-neutral-900 px-2 py-1 text-[11px] text-neutral-100 outline-hidden"
         defaultValue=""
         onChange={(e) => {
           if (e.target.value) onAdd(e.target.value);

package/src/components/editor/BlockParamsPanel.tsx

@@ -222,7 +222,7 @@ function ParamControl({
             disabled={disabled}
             aria-label={`${param.label} color`}
             onChange={(e) => onChange(e.target.value)}
-            className="w-7 h-7 rounded border border-neutral-700 bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-7 h-7 rounded-sm border border-neutral-700 bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
           />
           <input
             type="text"
@@ -230,7 +230,7 @@ function ParamControl({
             disabled={disabled}
             aria-label={`${param.label} value`}
             onChange={(e) => onChange(e.target.value)}
-            className="flex-1 bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 font-mono focus:outline-none focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
+            className="flex-1 bg-neutral-900 border border-neutral-800 rounded-sm px-2 py-1 text-[10px] text-neutral-200 font-mono focus:outline-hidden focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
           />
         </div>
       )}
@@ -259,7 +259,7 @@ function ParamControl({
           disabled={disabled}
           aria-label={param.label}
           onChange={(e) => onChange(e.target.value)}
-          className="w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 focus:outline-none focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
+          className="w-full bg-neutral-900 border border-neutral-800 rounded-sm px-2 py-1 text-[10px] text-neutral-200 focus:outline-hidden focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
         />
       )}
 
@@ -269,7 +269,7 @@ function ParamControl({
           disabled={disabled}
           aria-label={param.label}
           onChange={(e) => onChange(e.target.value)}
-          className="w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 focus:outline-none focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
+          className="w-full bg-neutral-900 border border-neutral-800 rounded-sm px-2 py-1 text-[10px] text-neutral-200 focus:outline-hidden focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
         >
           {param.options.map((opt) => (
             <option key={opt.value} value={opt.value}>

package/src/components/editor/BorderRadiusEditor.tsx

@@ -71,7 +71,7 @@ export function BorderRadiusEditor({
           width={PREVIEW_W}
           height={PREVIEW_H}
           viewBox={`0 0 ${PREVIEW_W} ${PREVIEW_H}`}
-          className="flex-shrink-0"
+          className="shrink-0"
         >
           <path
             d={path}

package/src/components/editor/CanvasContextMenu.tsx

@@ -212,7 +212,7 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
   return createPortal(
     <div
       ref={menuRef}
-      className="fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
+      className="fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
       onPointerDown={stopBubble}
       onMouseDown={stopBubble}

package/src/components/editor/ComputedTweenNotice.tsx

@@ -29,7 +29,7 @@ export function ComputedTweenNotice({
         <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"
+          className="shrink-0 rounded-sm 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

package/src/components/editor/DomEditOverlay.tsx

@@ -465,7 +465,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       ref={overlayRef}
       // Standing aside is the only way the caret below can be reached, and is
       // what keeps selection, drag and marquee from firing mid-edit.
-      className={`absolute inset-0 z-10 outline-none ${
+      className={`absolute inset-0 z-10 outline-hidden ${
         inlineText.editing ? "pointer-events-none" : "pointer-events-auto"
       }`}
       data-editing-text={inlineText.editing ? "true" : undefined}

package/src/components/editor/EaseCurveSection.tsx

@@ -518,7 +518,7 @@ export function EaseCurveSection({
                       aria-valuemax={1}
                       aria-valuenow={key === "p1" ? x1 : x2}
                       aria-valuetext={`x ${key === "p1" ? x1 : x2}, y ${key === "p1" ? y1 : y2}`}
-                      className="cursor-grab stroke-transparent outline-none active:cursor-grabbing focus-visible:stroke-white focus-visible:stroke-[2px]"
+                      className="cursor-grab stroke-transparent outline-hidden active:cursor-grabbing focus-visible:stroke-white focus-visible:stroke-[2px]"
                       onPointerDown={(e) => handlePointerDown(key, e)}
                       onKeyDown={(event) => handleKeyDown(key, event)}
                       onPointerEnter={() => setHover(key)}