@hyperframes/studio 0.8.49 → 0.8.51

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/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)}

package/src/components/editor/EaseParamFields.tsx

@@ -93,7 +93,7 @@ export function EaseBezierField({
             }
           }}
           onBlur={(event) => commit(event.currentTarget.value)}
-          className={`w-full rounded border bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none ${
+          className={`w-full rounded border bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden ${
             error
               ? "border-red-500/70 focus:border-red-400"
               : "border-white/10 focus:border-panel-accent/50"
@@ -183,7 +183,7 @@ export function SpringBounceField({
           const bounce = parseSpringBounce(`spring(${value})`);
           if (bounce !== null) onCommit(`spring(${round2(bounce)})`);
         }}
-        className="w-16 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+        className="w-16 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
       />
     </div>
   );
@@ -207,7 +207,7 @@ export function WiggleField({
           min={1}
           step={1}
           onCommit={(value) => commitWiggle(onCommit, value, config.type, amplitude)}
-          className="w-14 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+          className="w-14 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         />
       </div>
       <div className="flex items-center gap-1">
@@ -220,7 +220,7 @@ export function WiggleField({
               commitWiggle(onCommit, config.wiggles, event.currentTarget.value, amplitude);
             }
           }}
-          className="rounded border border-white/10 bg-black/20 px-1.5 py-1 text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+          className="rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         >
           {WIGGLE_TYPES.map((type) => (
             <option key={type} value={type}>
@@ -238,7 +238,7 @@ export function WiggleField({
           max={1}
           step={0.01}
           onCommit={(value) => commitWiggle(onCommit, config.wiggles, config.type, value)}
-          className="w-16 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+          className="w-16 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         />
       </div>
     </div>

package/src/components/editor/FileTree.tsx

@@ -235,14 +235,14 @@ export const FileTree = memo(function FileTree({
     <div className="flex flex-col h-full min-h-0">
       {/* FILES header with action buttons */}
       {hasFileOps && (
-        <div className="flex items-center justify-between px-2.5 py-1.5 border-b border-neutral-800/50 flex-shrink-0">
+        <div className="flex items-center justify-between px-2.5 py-1.5 border-b border-neutral-800/50 shrink-0">
           <span className="text-[10px] font-semibold tracking-wider text-neutral-600 uppercase">
             Files
           </span>
           <div className="flex items-center gap-0.5">
             <button
               onClick={() => handleNewFile("")}
-              className="p-1.5 rounded hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
+              className="p-1.5 rounded-sm hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
               title="New File"
               aria-label="New File"
             >
@@ -250,7 +250,7 @@ export const FileTree = memo(function FileTree({
             </button>
             <button
               onClick={() => handleNewFolder("")}
-              className="p-1.5 rounded hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
+              className="p-1.5 rounded-sm hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
               title="New Folder"
               aria-label="New Folder"
             >
@@ -263,7 +263,7 @@ export const FileTree = memo(function FileTree({
       <div
         className={`flex-1 overflow-y-auto py-1 transition-colors ${
           dragOverFolder === ""
-            ? "bg-[#3CE6AC]/5 outline outline-1 outline-[#3CE6AC]/30 -outline-offset-1"
+            ? "bg-[#3CE6AC]/5 outline-solid outline-1 outline-[#3CE6AC]/30 -outline-offset-1"
             : ""
         }`}
         onContextMenu={handleRootContextMenu}

package/src/components/editor/FileTreeIcons.tsx

@@ -23,7 +23,7 @@ const W = "duotone" as const;
 
 export function FileIcon({ path }: { path: string }) {
   const ext = path.split(".").pop()?.toLowerCase() ?? "";
-  const c = "flex-shrink-0";
+  const c = "shrink-0";
   if (ext === "html") return <FileHtml size={SZ} weight={W} color="#E44D26" className={c} />;
   if (ext === "css") return <FileCss size={SZ} weight={W} color="#264DE4" className={c} />;
   if (ext === "js" || ext === "mjs" || ext === "cjs")

package/src/components/editor/FileTreeNodes.tsx

@@ -107,7 +107,7 @@ export function ContextMenu({
         <>
           <button
             role="menuitem"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-hidden cursor-pointer text-left"
             onClick={() => {
               onNewFile(state.targetPath);
               onClose();
@@ -118,7 +118,7 @@ export function ContextMenu({
           </button>
           <button
             role="menuitem"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-hidden cursor-pointer text-left"
             onClick={() => {
               onNewFolder(state.targetPath);
               onClose();
@@ -134,7 +134,7 @@ export function ContextMenu({
         <>
           <button
             role="menuitem"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-hidden cursor-pointer text-left"
             onClick={() => {
               onNewFile(parentPath);
               onClose();
@@ -148,7 +148,7 @@ export function ContextMenu({
       )}
       <button
         role="menuitem"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onRename(state.targetPath);
           onClose();
@@ -160,7 +160,7 @@ export function ContextMenu({
       {!state.targetIsFolder && (
         <button
           role="menuitem"
-          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
+          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-hidden cursor-pointer text-left"
           onClick={() => {
             onDuplicate(state.targetPath);
             onClose();
@@ -173,7 +173,7 @@ export function ContextMenu({
       <div className="border-t border-neutral-700 my-1" />
       <button
         role="menuitem"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-900/30 focus-visible:bg-red-900/30 active:bg-red-900/50 outline-none cursor-pointer text-left"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-900/30 focus-visible:bg-red-900/30 active:bg-red-900/50 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onDelete(state.targetPath);
           onClose();
@@ -263,7 +263,7 @@ export function InlineInput({
       style={{ paddingLeft: `${8 + depth * 12 + (isFolder ? 0 : 14)}px` }}
     >
       {isFolder ? (
-        <FolderSimple size={SZ_ICON} weight="duotone" color="#6B7280" className="flex-shrink-0" />
+        <FolderSimple size={SZ_ICON} weight="duotone" color="#6B7280" className="shrink-0" />
       ) : (
         <FileIcon path={value} />
       )}
@@ -278,7 +278,7 @@ export function InlineInput({
           onKeyDown={handleKeyDown}
           onBlur={handleBlur}
           aria-invalid={error ? true : undefined}
-          className={`w-full min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border outline-none ${
+          className={`w-full min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border outline-hidden ${
             error ? "border-red-500/70" : "border-neutral-600 focus:border-[#3CE6AC]"
           }`}
           spellCheck={false}
@@ -344,13 +344,13 @@ export function DeleteConfirm({
       <div className="flex gap-1.5">
         <button
           onClick={onCancel}
-          className="flex-1 px-2 py-1 rounded bg-neutral-700 text-neutral-300 hover:bg-neutral-600 transition-colors"
+          className="flex-1 px-2 py-1 rounded-sm bg-neutral-700 text-neutral-300 hover:bg-neutral-600 transition-colors"
         >
           Cancel
         </button>
         <button
           onClick={onConfirm}
-          className="flex-1 px-2 py-1 rounded bg-red-900/60 text-red-300 hover:bg-red-800/60 transition-colors"
+          className="flex-1 px-2 py-1 rounded-sm bg-red-900/60 text-red-300 hover:bg-red-800/60 transition-colors"
         >
           Delete
         </button>
@@ -419,7 +419,7 @@ export const TreeFile = memo(function TreeFile({
       <span className="truncate flex-1">{node.name}</span>
       {lintInfo && lintInfo.count > 0 && (
         <span
-          className="flex-shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400 text-center mr-1"
+          className="shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400 text-center mr-1"
           title={lintInfo.messages.join("\n")}
         >
           {lintInfo.count}
@@ -505,11 +505,11 @@ export const TreeFolder = memo(function TreeFolder({
         }}
         onDragLeave={onDragLeave}
         className={`w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-neutral-400 hover:bg-neutral-800/30 hover:text-neutral-300 transition-colors ${
-          isDragOver ? "bg-[#3CE6AC]/10 outline outline-1 outline-[#3CE6AC]/40" : ""
+          isDragOver ? "bg-[#3CE6AC]/10 outline-solid outline-1 outline-[#3CE6AC]/40" : ""
         }`}
         style={{ paddingLeft: `${8 + depth * 12}px` }}
       >
-        <Chevron size={10} className="flex-shrink-0 text-neutral-600" />
+        <Chevron size={10} className="shrink-0 text-neutral-600" />
         <span className="truncate font-medium">{node.name}</span>
       </button>
       {isOpen && (

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-white/10 bg-[#15171c] p-1 shadow-[0_8px_24px_rgba(0,0,0,0.55)]"
       style={{
         left: placement.left,
         top: placement.top,

package/src/components/editor/InspectorHeaderActions.tsx

@@ -37,7 +37,7 @@ export function InspectorHeaderActions({
             track("toggle", "Element visibility");
             void onToggleHidden(selectedElementId, !selectedElementHidden);
           }}
-          className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+          className="flex h-6 w-6 items-center justify-center rounded-sm text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
         >
           {selectedElementHidden ? (
             <EyeSlash size={13} weight="bold" aria-hidden="true" />
@@ -54,7 +54,7 @@ export function InspectorHeaderActions({
             onUngroup();
           }}
           title="Ungroup (⌘⇧G)"
-          className="flex h-6 items-center rounded px-2 text-[11px] font-medium text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
+          className="flex h-6 items-center rounded-sm px-2 text-[11px] font-medium text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
         >
           Ungroup
         </button>
@@ -91,7 +91,7 @@ export function InspectorHeaderActions({
           track("button", "Clear selection");
           onClear();
         }}
-        className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+        className="flex h-6 w-6 items-center justify-center rounded-sm text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
       >
         <X size={13} />
       </button>

package/src/components/editor/KeyframeDiamond.tsx

@@ -29,7 +29,7 @@ export const KeyframeDiamond = memo(function KeyframeDiamond({
         e.stopPropagation();
         onClick();
       }}
-      className="relative flex-shrink-0 p-0.5 transition-opacity hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']"
+      className="relative shrink-0 p-0.5 transition-opacity hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']"
       style={{ color, opacity }}
       title={title}
       aria-label={title}

package/src/components/editor/KeyframeEaseList.tsx

@@ -74,7 +74,7 @@ export function KeyframeEaseList({
               const next = e.target.value;
               if (next) onApplyAll(next);
             }}
-            className="ml-auto cursor-pointer rounded bg-neutral-800 px-1.5 py-0.5 text-[9px] text-neutral-300 outline-none hover:bg-neutral-700 focus:ring-1 focus:ring-panel-accent/40"
+            className="ml-auto cursor-pointer rounded-sm bg-neutral-800 px-1.5 py-0.5 text-[9px] text-neutral-300 outline-hidden hover:bg-neutral-700 focus:ring-1 focus:ring-panel-accent/40"
           >
             <option value="" disabled>
               Set all…

package/src/components/editor/LayersPanel.tsx

@@ -485,7 +485,7 @@ export const LayersPanel = memo(function LayersPanel() {
                   onClick={(e) => toggleCollapse(layer.key, e)}
                   aria-expanded={!isCollapsed}
                   aria-label={isCollapsed ? "Expand children" : "Collapse children"}
-                  className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center rounded text-neutral-500 hover:text-neutral-300 before:absolute before:-inset-1.5 before:content-['']"
+                  className="relative flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-300 before:absolute before:-inset-1.5 before:content-['']"
                 >
                   <svg
                     width="8"
@@ -498,10 +498,10 @@ export const LayersPanel = memo(function LayersPanel() {
                   </svg>
                 </button>
               ) : (
-                <span className="w-4 flex-shrink-0" />
+                <span className="w-4 shrink-0" />
               )}
               <span
-                className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${
+                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"
                     : isCompHost

package/src/components/editor/MarqueeOverlay.tsx

@@ -19,7 +19,7 @@ export function MarqueeOverlay({ candidateRects, marqueeRect }: MarqueeOverlayPr
         <div
           key={i}
           aria-hidden="true"
-          className="pointer-events-none absolute rounded-sm border border-studio-accent bg-studio-accent/5"
+          className="pointer-events-none absolute rounded-xs border border-studio-accent bg-studio-accent/5"
           style={{ left: r.left, top: r.top, width: r.width, height: r.height }}
         />
       ))}

package/src/components/editor/OffCanvasIndicators.tsx

@@ -167,7 +167,7 @@ export function ChildRectOutlines({
       {rects.map((rect, index) => (
         <div
           key={index}
-          className="pointer-events-none absolute border border-dashed border-white/20 rounded-sm"
+          className="pointer-events-none absolute border border-dashed border-white/20 rounded-xs"
           style={{
             left: rect.left,
             top: rect.top,