@hyperframes/studio 0.8.50 → 0.8.52

package/src/components/editor/TopologyLens.tsx

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import {
   useEffect,
   useLayoutEffect,
@@ -113,13 +114,14 @@ export function TopologyLens({ iframeRef, activeCompositionPath }: TopologyLensP
     setMeasured(geometry ? { callId, geometry } : null);
   }, [activeCompositionPath, callId, handle, iframeRef, phase]);
 
+  const livePreviewIframe = useLivePreviewIframe();
   useEffect(() => {
     const iframe = iframeRef.current;
     if (!iframe || !callId) return;
     const dismiss = () => studioEditLifecycle.dismiss(callId);
     iframe.addEventListener("load", dismiss);
     return () => iframe.removeEventListener("load", dismiss);
-  }, [callId, iframeRef]);
+  }, [callId, iframeRef, livePreviewIframe]);
 
   useEffect(() => {
     if (pendingUnmountDismissRef.current !== null) {
@@ -143,7 +145,7 @@ export function TopologyLens({ iframeRef, activeCompositionPath }: TopologyLensP
       ref={overlayRef}
       aria-hidden="true"
       data-topology-lens={visible ? state.phase : "hidden"}
-      className="pointer-events-none absolute inset-0 z-[58] overflow-hidden"
+      className="pointer-events-none absolute inset-0 z-58 overflow-hidden"
     >
       {visible && (
         <>
@@ -171,7 +173,7 @@ export function TopologyLens({ iframeRef, activeCompositionPath }: TopologyLensP
                   key={index}
                   data-topology-contour="true"
                   data-topology-node={label}
-                  className="hf-topology-contour pointer-events-none absolute z-[1] rounded"
+                  className="hf-topology-contour pointer-events-none absolute z-1 rounded-sm"
                   style={{
                     ...rectStyle(rect),
                     animationDelay: `${Math.min(index, 5) * 28}ms`,
@@ -181,7 +183,7 @@ export function TopologyLens({ iframeRef, activeCompositionPath }: TopologyLensP
               {!reducedMotion && (
                 <div
                   data-topology-scan="true"
-                  className="pointer-events-none absolute z-[2] overflow-hidden rounded"
+                  className="pointer-events-none absolute z-2 overflow-hidden rounded-sm"
                   style={rectStyle(geometry.field.rect)}
                 >
                   <div className="hf-topology-scan absolute inset-y-0 left-0 w-1/4" />
@@ -196,7 +198,7 @@ export function TopologyLens({ iframeRef, activeCompositionPath }: TopologyLensP
             data-topology-terminal={
               state.phase === "localizing" ? (state.terminal ?? undefined) : undefined
             }
-            className="hf-topology-target pointer-events-none absolute z-[3] rounded-md"
+            className="hf-topology-target pointer-events-none absolute z-3 rounded-md"
             style={rectStyle(geometry.target.rect)}
           />
         </>

package/src/components/editor/Transform3DCube.tsx

@@ -183,7 +183,7 @@ export function Transform3DCube({
   };
 
   return (
-    <div className="relative overflow-hidden rounded-lg border border-neutral-800 bg-gradient-to-b from-neutral-900 to-neutral-950">
+    <div className="relative overflow-hidden rounded-lg border border-neutral-800 bg-linear-to-b from-neutral-900 to-neutral-950">
       <svg
         ref={svgRef}
         viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
@@ -294,7 +294,7 @@ export function Transform3DCube({
           onClick={onRecenter}
           title="Reset 3D orientation"
           aria-label="Reset 3D orientation"
-          className="absolute right-1.5 top-1.5 rounded p-0.5 text-neutral-500 hover:bg-neutral-800 hover:text-neutral-200"
+          className="absolute right-1.5 top-1.5 rounded-sm p-0.5 text-neutral-500 hover:bg-neutral-800 hover:text-neutral-200"
         >
           <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor">
             <circle cx="12" cy="12" r="9" strokeWidth="2" />

package/src/components/editor/audioFxRevealTarget.ts

@@ -37,6 +37,7 @@ export function audioFxRevealTarget(
   const parsed = parseAutomationTarget(target);
   if (!parsed) return null;
   if (parsed.kind === "volume") return { kind: "volume" };
+  if (parsed.kind === "rate") return null;
   if (parsed.kind === "preset") {
     // A preset-level lane names the preset, not a node inside it: find its run
     // by the first node that belongs to it, which is how `runKey` is built.

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

@@ -1103,7 +1103,7 @@ describe("patch builders and prompt builder", () => {
     expect(prompt).toContain("Computed styles (browser-resolved):");
     expect(prompt).toContain("Target HTML:");
     expect(prompt).toContain("Guardrails:");
-    expect(prompt).toContain("Do not modify other elements' data-* attributes or positioning.");
+    expect(prompt).toContain("Do not modify other elements' data-* attributes or positioning");
   });
 
   it("uses an absolute source path in copied agent prompts when provided", () => {

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

@@ -78,9 +78,10 @@ describe("buildElementAgentPrompt", () => {
         "Text: Hello world",
         "",
         "Guardrails:",
-        "- Make a targeted change to this element only.",
-        "- Preserve the rest of the composition and its timing.",
-        "- Do not modify other elements' data-* attributes or positioning.",
+        "- Make a targeted change to this element only, unless the request is a timeline edit.",
+        "- Preserve the rest of the composition and its timing, except what a timeline edit changes.",
+        "- Do not modify other elements' data-* attributes or positioning, except where the requested timeline edit requires it (split, retime, reorder, copy a group, swap media).",
+        "- For timeline edits (trim, split, speed, volume, copy, swap), follow the creator-editing-recipes reference of the hyperframes-core skill and use its exact attribute forms.",
         "- Prefer existing inline styles or existing CSS rules for this element over adding unrelated selectors.",
       ].join("\n"),
     );
@@ -160,9 +161,10 @@ describe("buildPickerAgentPrompt", () => {
     // Both end on the identical guardrails block, byte for byte.
     const guardrails = [
       "Guardrails:",
-      "- Make a targeted change to this element only.",
-      "- Preserve the rest of the composition and its timing.",
-      "- Do not modify other elements' data-* attributes or positioning.",
+      "- Make a targeted change to this element only, unless the request is a timeline edit.",
+      "- Preserve the rest of the composition and its timing, except what a timeline edit changes.",
+      "- Do not modify other elements' data-* attributes or positioning, except where the requested timeline edit requires it (split, retime, reorder, copy a group, swap media).",
+      "- For timeline edits (trim, split, speed, volume, copy, swap), follow the creator-editing-recipes reference of the hyperframes-core skill and use its exact attribute forms.",
       "- Prefer existing inline styles or existing CSS rules for this element over adding unrelated selectors.",
     ].join("\n");
     expect(domPrompt.endsWith(guardrails)).toBe(true);

package/src/components/editor/domEditingAgentPrompt.ts

@@ -28,9 +28,10 @@ export interface AgentPromptElementInfo {
 
 const GUARDRAIL_LINES = [
   "Guardrails:",
-  "- Make a targeted change to this element only.",
-  "- Preserve the rest of the composition and its timing.",
-  "- Do not modify other elements' data-* attributes or positioning.",
+  "- Make a targeted change to this element only, unless the request is a timeline edit.",
+  "- Preserve the rest of the composition and its timing, except what a timeline edit changes.",
+  "- Do not modify other elements' data-* attributes or positioning, except where the requested timeline edit requires it (split, retime, reorder, copy a group, swap media).",
+  "- For timeline edits (trim, split, speed, volume, copy, swap), follow the creator-editing-recipes reference of the hyperframes-core skill and use its exact attribute forms.",
   "- Prefer existing inline styles or existing CSS rules for this element over adding unrelated selectors.",
 ];
 

package/src/components/editor/propertyPanelColor.tsx

@@ -79,7 +79,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-panel-accent focus:ring-2 focus:ring-panel-accent/40 ${
+        className={`relative h-4 rounded-full border border-neutral-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.55)] outline-hidden focus:border-panel-accent focus:ring-2 focus:ring-panel-accent/40 ${
           disabled ? "cursor-not-allowed opacity-50" : "cursor-ew-resize"
         }`}
         style={{ background }}
@@ -328,7 +328,7 @@ export function ColorField({
           role="dialog"
           aria-label={`${label} color picker`}
           tabIndex={-1}
-          className="fixed z-[9999] w-[292px] overflow-hidden rounded-2xl border border-neutral-700 bg-neutral-950 shadow-2xl shadow-black/50 outline-none"
+          className="fixed z-9999 w-[292px] overflow-hidden rounded-2xl border border-neutral-700 bg-neutral-950 shadow-2xl shadow-black/50 outline-hidden"
           style={{
             left: panelPosition?.left ?? -9999,
             top: panelPosition?.top ?? -9999,
@@ -367,8 +367,8 @@ export function ColorField({
               onPointerUp={settleColorGesture}
               onPointerCancel={cancelColorGesture}
             >
-              <div className="absolute inset-0 bg-gradient-to-r from-white to-transparent" />
-              <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent" />
+              <div className="absolute inset-0 bg-linear-to-r from-white to-transparent" />
+              <div className="absolute inset-0 bg-linear-to-t from-black to-transparent" />
               <div
                 className="pointer-events-none absolute top-0 h-full w-px -translate-x-1/2 bg-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.45)] mix-blend-difference"
                 style={{ left: `${hsv.saturation * 100}%` }}
@@ -389,7 +389,7 @@ export function ColorField({
 
             <div className="flex min-w-0 items-center gap-3">
               <div
-                className="h-9 w-9 flex-shrink-0 rounded-xl border border-neutral-600 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]"
+                className="h-9 w-9 shrink-0 rounded-xl border border-neutral-600 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]"
                 style={{ backgroundColor: currentColor }}
               />
               <div className="min-w-0 flex-1">
@@ -442,7 +442,7 @@ export function ColorField({
                 value={hexDraft}
                 onChange={(event) => handleHexChange(event.target.value)}
                 onBlur={settleColorGesture}
-                className={`${FIELD} h-10 w-full text-[11px] font-medium outline-none`}
+                className={`${FIELD} h-10 w-full text-[11px] font-medium outline-hidden`}
                 spellCheck={false}
               />
             </label>
@@ -475,7 +475,7 @@ export function ColorField({
           className="flex items-center gap-2 disabled:cursor-not-allowed"
         >
           <span
-            className="h-4 w-4 flex-shrink-0 rounded-[4px]"
+            className="h-4 w-4 shrink-0 rounded-[4px]"
             style={{ backgroundColor: open ? currentColor : value || "transparent" }}
           />
           <span className="font-mono text-[11px] text-panel-text-0">
@@ -484,7 +484,7 @@ export function ColorField({
           {mixed && (
             <span
               data-color-mixed-indicator="true"
-              className="rounded bg-panel-hover px-1.5 py-0.5 text-[9px] font-medium text-panel-text-4"
+              className="rounded-sm bg-panel-hover px-1.5 py-0.5 text-[9px] font-medium text-panel-text-4"
             >
               Mixed
             </span>
@@ -504,7 +504,7 @@ export function ColorField({
             type="button"
             disabled={disabled}
             onClick={onReset}
-            className="rounded bg-panel-hover px-1.5 py-0.5 text-[9px] font-medium text-panel-text-4 transition-colors hover:text-panel-text-0 disabled:cursor-not-allowed disabled:opacity-40"
+            className="rounded-sm bg-panel-hover px-1.5 py-0.5 text-[9px] font-medium text-panel-text-4 transition-colors hover:text-panel-text-0 disabled:cursor-not-allowed disabled:opacity-40"
           >
             Reset
           </button>
@@ -519,7 +519,7 @@ export function ColorField({
         className={`${FIELD} flex items-center gap-3 text-left hover:border-neutral-700 disabled:cursor-not-allowed ${open ? "border-neutral-600" : ""}`}
       >
         <div
-          className="relative h-7 w-7 flex-shrink-0 overflow-hidden rounded-lg border border-neutral-700 bg-neutral-950 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
+          className="relative h-7 w-7 shrink-0 overflow-hidden rounded-lg border border-neutral-700 bg-neutral-950 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
           style={{ backgroundColor: value || "transparent" }}
         />
         <span className="min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100">
@@ -528,7 +528,7 @@ export function ColorField({
         {mixed && (
           <span
             data-color-mixed-indicator="true"
-            className="rounded bg-panel-hover px-1.5 py-0.5 text-[9px] font-medium text-panel-text-4"
+            className="rounded-sm bg-panel-hover px-1.5 py-0.5 text-[9px] font-medium text-panel-text-4"
           >
             Mixed
           </span>

package/src/components/editor/propertyPanelColorCurveGraph.tsx

@@ -477,7 +477,7 @@ export function CurveGraph({
           onSettle();
         }
       }}
-      className="mx-auto aspect-square w-full max-w-[200px] touch-none rounded border border-panel-border-input bg-black/20 outline-none focus:ring-1 focus:ring-panel-accent"
+      className="mx-auto aspect-square w-full max-w-[200px] touch-none rounded-sm border border-panel-border-input bg-black/20 outline-hidden focus:ring-1 focus:ring-panel-accent"
     >
       <defs>
         <linearGradient id={`hf-hue-axis-${tab.key}`}>

package/src/components/editor/propertyPanelColorGradingControls.tsx

@@ -328,7 +328,7 @@ export function ColorGradingControls({
         <select
           value={String(grading.preset ?? "neutral")}
           onChange={(event) => applyPreset(event.target.value)}
-          className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-none"
+          className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-hidden"
         >
           {HF_COLOR_GRADING_PRESETS.map((preset) => (
             <option key={preset.id} value={preset.id}>
@@ -358,14 +358,12 @@ export function ColorGradingControls({
           aria-expanded={lutOpen}
         >
           {lutOpen ? (
-            <ChevronDown size={11} className="flex-shrink-0 text-panel-text-5" />
+            <ChevronDown size={11} className="shrink-0 text-panel-text-5" />
           ) : (
-            <ChevronRight size={11} className="flex-shrink-0 text-panel-text-5" />
+            <ChevronRight size={11} className="shrink-0 text-panel-text-5" />
           )}
           <span className="min-w-0 flex-1 truncate">Custom LUT</span>
-          {grading.lut && (
-            <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-studio-accent" />
-          )}
+          {grading.lut && <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-studio-accent" />}
         </button>
         {lutOpen && (
           <div className="grid gap-1.5 border-t border-panel-border/60 p-1.5">
@@ -380,7 +378,7 @@ export function ColorGradingControls({
                     nextSrc && grading.lut?.src === nextSrc ? grading.lut.intensity : 1,
                   );
                 }}
-                className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-none"
+                className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-hidden"
                 title="Uploaded .cube LUT"
               >
                 <option value="">None</option>
@@ -441,7 +439,7 @@ export function ColorGradingControls({
               <div className="grid gap-2">
                 {selectedProjectLut && (
                   <div className="flex min-w-0 items-start gap-2 text-[10px] leading-4 text-panel-text-3">
-                    <span className="mt-[5px] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-studio-accent" />
+                    <span className="mt-[5px] h-1.5 w-1.5 shrink-0 rounded-full bg-studio-accent" />
                     <span className="min-w-0 flex-1 truncate" title={selectedProjectLut}>
                       <span className="font-medium text-panel-text-2">Uploaded LUT</span>
                       {` · ${selectedProjectLut}`}
@@ -527,7 +525,7 @@ export function ColorGradingControls({
                 aria-label="Close settings"
                 title="Close settings"
                 onClick={() => setDetailSettings(null)}
-                className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-panel-text-5 transition-colors hover:bg-panel-hover hover:text-panel-text-1"
+                className="flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-panel-text-5 transition-colors hover:bg-panel-hover hover:text-panel-text-1"
               >
                 <X size={11} />
               </button>

package/src/components/editor/propertyPanelColorGradingSection.tsx

@@ -22,10 +22,10 @@ function StatusPill({ status }: { status: RuntimeColorGradingStatus }) {
           : "bg-panel-text-5";
   return (
     <div
-      className="flex min-w-0 items-center gap-1.5 rounded bg-panel-input px-2 py-1 text-[10px] font-medium text-panel-text-3"
+      className="flex min-w-0 items-center gap-1.5 rounded-sm bg-panel-input px-2 py-1 text-[10px] font-medium text-panel-text-3"
       title={status.message}
     >
-      <span className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${dotClass}`} />
+      <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${dotClass}`} />
       <span className="truncate">{status.message}</span>
     </div>
   );
@@ -47,7 +47,7 @@ function HdrMediaWarning({ metadata }: { metadata: MediaMetadata | null }) {
     <div className="mb-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] leading-4 text-amber-100">
       <div className="mb-1 flex min-w-0 items-center justify-between gap-2">
         <span className="font-semibold">{metadata.color.label} source</span>
-        <span className="rounded bg-amber-400/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-100">
+        <span className="rounded-sm bg-amber-400/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-100">
           SDR preview
         </span>
       </div>
@@ -118,7 +118,7 @@ function HoldBeforeButton({
         event.preventDefault();
         onHoldChange(false);
       }}
-      className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded transition-colors ${
+      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${
         active
           ? "bg-studio-accent text-black"
           : "text-panel-text-4 hover:bg-panel-hover hover:text-panel-text-1"
@@ -194,7 +194,7 @@ export function ColorGradingSection({
               track("button", "Reset color grading");
               resetGrading();
             }}
-            className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded text-panel-text-4 transition-colors hover:bg-panel-hover hover:text-panel-text-1"
+            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm text-panel-text-4 transition-colors hover:bg-panel-hover hover:text-panel-text-1"
             title="Reset color grading"
           >
             <RotateCcw size={12} />
@@ -218,7 +218,7 @@ export function ColorGradingSection({
               setApplyScope(event.currentTarget.value as typeof applyScope);
             }}
             disabled={applyBusy}
-            className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
             title="Choose where to copy these color grading settings"
           >
             <option value="source-file">Current file media</option>

package/src/components/editor/propertyPanelColorGradingSlider.tsx

@@ -157,7 +157,7 @@ export function ColorGradingSliderControl({
               event.stopPropagation();
               settings.onClick();
             }}
-            className={`relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40 ${
+            className={`relative flex h-5 w-5 shrink-0 items-center justify-center rounded transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40 ${
               settings.active ? "text-studio-accent" : "text-panel-text-5"
             }`}
             title={settings.label}
@@ -178,7 +178,7 @@ export function ColorGradingSliderControl({
               track("button", `Reset ${label}`);
               onReset();
             }}
-            className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-panel-text-5 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
+            className="flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-panel-text-5 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
             title={`Reset ${label}`}
           >
             <RotateCcw size={11} />
@@ -228,7 +228,7 @@ export function ColorGradingSliderControl({
       </div>
 
       <div className="flex min-w-0 items-center justify-end gap-1">
-        <div className="flex flex-shrink-0 items-center rounded-md bg-panel-input px-1.5 py-px">
+        <div className="flex shrink-0 items-center rounded-md bg-panel-input px-1.5 py-px">
           <input
             type="number"
             value={inputValue}
@@ -256,12 +256,12 @@ export function ColorGradingSliderControl({
                 nudge(-1);
               }
             }}
-            className="hf-color-grading-number h-4 w-[36px] bg-transparent text-right text-[10px] font-medium tabular-nums text-panel-text-1 outline-none disabled:cursor-not-allowed"
+            className="hf-color-grading-number h-4 w-[36px] bg-transparent text-right text-[10px] font-medium tabular-nums text-panel-text-1 outline-hidden disabled:cursor-not-allowed"
             title={displayValue}
           />
           {suffix && <span className="ml-0.5 text-[10px] text-panel-text-5">{suffix}</span>}
         </div>
-        <div className="flex flex-shrink-0 overflow-hidden rounded-md bg-panel-input">
+        <div className="flex shrink-0 overflow-hidden rounded-md bg-panel-input">
           <button
             type="button"
             disabled={disabled}

package/src/components/editor/propertyPanelColorWheels.tsx

@@ -204,7 +204,7 @@ function TonalWheel({
           }
         }}
         onBlur={onSettle}
-        className="relative mx-auto aspect-square w-full max-w-[112px] touch-none rounded-full border border-panel-border-input outline-none focus:ring-1 focus:ring-panel-accent disabled:opacity-40"
+        className="relative mx-auto aspect-square w-full max-w-[112px] touch-none rounded-full border border-panel-border-input outline-hidden focus:ring-1 focus:ring-panel-accent disabled:opacity-40"
         style={{
           background:
             "radial-gradient(circle, rgb(128 128 128) 0%, transparent 72%), conic-gradient(from 90deg, #f33, #f3f, #33f, #3ff, #3f3, #ff3, #f33)",

package/src/components/editor/propertyPanelCommitField.tsx

@@ -213,7 +213,7 @@ export function CommitField({
       }}
       onKeyDown={handleKeyDown}
       title={parseNumericToken(value) ? "Scroll or use Arrow keys to adjust" : undefined}
-      className={`min-w-0 w-full bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600 ${
+      className={`min-w-0 w-full bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600 ${
         align === "right" ? "text-right" : "text-left"
       }`}
     />

package/src/components/editor/propertyPanelFill.tsx

@@ -133,7 +133,7 @@ export function ImageFillField({
                 : "cursor-pointer hover:border-neutral-600 hover:text-white"
             }`}
           >
-            <Plus size={12} className="flex-shrink-0" />
+            <Plus size={12} className="shrink-0" />
             <span className="truncate">{uploading ? "Uploading…" : "Upload image"}</span>
           </button>
           <input
@@ -178,7 +178,7 @@ export function ImageFillField({
                   }
                   onCommit(`url("${toProjectRootAssetPath(next)}")`);
                 }}
-                className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+                className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
               >
                 <option value="">None</option>
                 {imageAssets.map((asset) => (
@@ -288,7 +288,7 @@ export function GradientField({
                   position: Math.max(0, Math.min(100, Math.round(stop.position + delta))),
                 });
               }}
-              className="absolute top-1/2 h-4 w-4 -translate-y-1/2 cursor-ew-resize rounded-full border-2 border-white/90 shadow-[0_0_0_1px_rgba(0,0,0,0.35)] outline-none focus-visible:ring-2 focus-visible:ring-studio-accent"
+              className="absolute top-1/2 h-4 w-4 -translate-y-1/2 cursor-ew-resize rounded-full border-2 border-white/90 shadow-[0_0_0_1px_rgba(0,0,0,0.35)] outline-hidden focus-visible:ring-2 focus-visible:ring-studio-accent"
               style={{
                 left: `calc(${stop.position}% - 8px)`,
                 backgroundColor: stop.color,
@@ -339,7 +339,7 @@ export function GradientField({
                 track("toggle", "Repeat gradient");
                 patch({ repeating: e.target.checked });
               }}
-              className="h-4 w-4 rounded border-neutral-700 bg-neutral-950 text-panel-accent focus:ring-panel-accent"
+              className="h-4 w-4 rounded-sm border-neutral-700 bg-neutral-950 text-panel-accent focus:ring-panel-accent"
             />
             Repeat
           </label>

package/src/components/editor/propertyPanelFlatColorGradingAccessory.tsx

@@ -74,7 +74,7 @@ export function FlatColorGradingAccessory({
           commitCompare(false);
         }}
         title="Hold to show original"
-        className="flex-shrink-0 text-panel-text-3 hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
+        className="shrink-0 text-panel-text-3 hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
       >
         <Compare size={12} />
       </button>
@@ -82,7 +82,7 @@ export function FlatColorGradingAccessory({
         <span
           data-flat-grade-status-dot="true"
           title={runtimeStatus.message}
-          className={`h-[5px] w-[5px] flex-shrink-0 rounded-full ${STATUS_DOT_CLASS[runtimeStatus.state]}`}
+          className={`h-[5px] w-[5px] shrink-0 rounded-full ${STATUS_DOT_CLASS[runtimeStatus.state]}`}
         />
         <span
           data-flat-grade-status-message="true"
@@ -100,7 +100,7 @@ export function FlatColorGradingAccessory({
           track("button", "Reset color grading");
           resetGrading();
         }}
-        className="flex-shrink-0 text-panel-text-3 hover:text-panel-text-1"
+        className="shrink-0 text-panel-text-3 hover:text-panel-text-1"
       >
         <RotateCcw size={12} />
       </button>

package/src/components/editor/propertyPanelFlatColorGradingSection.tsx

@@ -74,7 +74,7 @@ function HdrBanner({ metadata }: { metadata: MediaMetadata | null }) {
     >
       <div className="mb-0.5 flex items-center justify-between gap-2">
         <span className="font-semibold">{metadata.color.label} source</span>
-        <span className="rounded bg-amber-400/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-100">
+        <span className="rounded-sm bg-amber-400/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-100">
           SDR preview
         </span>
       </div>
@@ -389,7 +389,7 @@ export function FlatColorGradingSection({
             height="10"
             viewBox="0 0 10 10"
             fill="currentColor"
-            className={`flex-shrink-0 text-panel-text-5 transition-transform ${lutOpen ? "rotate-90" : ""}`}
+            className={`shrink-0 text-panel-text-5 transition-transform ${lutOpen ? "rotate-90" : ""}`}
           >
             <path d="M2 3l3 4 3-4z" />
           </svg>
@@ -409,7 +409,7 @@ export function FlatColorGradingSection({
                   track("select", "Custom LUT");
                   actions.applyLut(src || null, src && lut?.src === src ? lut.intensity : 1);
                 }}
-                className="border-b border-panel-border-input/50 bg-transparent font-mono text-[10px] text-panel-text-3 outline-none hover:border-panel-border-input"
+                className="border-b border-panel-border-input/50 bg-transparent font-mono text-[10px] text-panel-text-3 outline-hidden hover:border-panel-border-input"
               >
                 <option value="">None</option>
                 {lutAssets.map((asset) => (
@@ -423,7 +423,7 @@ export function FlatColorGradingSection({
                 disabled={!onImportAssets}
                 onClick={() => lutInputRef.current?.click()}
                 title="Import .cube LUT"
-                className="flex-shrink-0 text-panel-text-4 hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
+                className="shrink-0 text-panel-text-4 hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
               >
                 <Plus size={12} />
               </button>
@@ -467,7 +467,7 @@ export function FlatColorGradingSection({
             data-flat-grade-settings="vignette"
             title="Vignette settings"
             onClick={() => setDetailSettingsOpen((c) => (c === "vignette" ? null : "vignette"))}
-            className="flex-shrink-0 text-panel-text-4 hover:text-panel-text-1"
+            className="shrink-0 text-panel-text-4 hover:text-panel-text-1"
           >
             <Settings size={12} />
           </button>
@@ -479,7 +479,7 @@ export function FlatColorGradingSection({
             data-flat-grade-settings="grain"
             title="Grain settings"
             onClick={() => setDetailSettingsOpen((c) => (c === "grain" ? null : "grain"))}
-            className="flex-shrink-0 text-panel-text-4 hover:text-panel-text-1"
+            className="shrink-0 text-panel-text-4 hover:text-panel-text-1"
           >
             <Settings size={12} />
           </button>
@@ -505,7 +505,7 @@ export function FlatColorGradingSection({
                 onSetApplyScope(e.target.value as "source-file" | "project");
               }}
               disabled={applyBusy}
-              className="border-b border-panel-border-input/50 bg-transparent font-mono text-[11px] text-panel-text-0 outline-none hover:border-panel-border-input disabled:opacity-50"
+              className="border-b border-panel-border-input/50 bg-transparent font-mono text-[11px] text-panel-text-0 outline-hidden hover:border-panel-border-input disabled:opacity-50"
             >
               <option value="source-file">Current file media</option>
               <option value="project">All project media</option>

package/src/components/editor/propertyPanelFlatEffectsSection.tsx

@@ -48,7 +48,7 @@ export function FlatEffectsAccessory({
         track("button", "Reset effects");
         onCommitColorGrading({ ...grading, effects: { ...DEFAULT_EFFECTS }, palette: null });
       }}
-      className="flex-shrink-0 text-panel-text-3 hover:text-panel-text-1"
+      className="shrink-0 text-panel-text-3 hover:text-panel-text-1"
     >
       <RotateCcw size={12} />
     </button>
@@ -215,7 +215,7 @@ export function FlatEffectsSection({
                       nextPalette[index] = event.target.value;
                       onCommitColorGrading({ ...grading, palette: nextPalette });
                     }}
-                    className="h-6 w-6 cursor-pointer rounded-sm border border-panel-border-input bg-transparent p-0"
+                    className="h-6 w-6 cursor-pointer rounded-xs border border-panel-border-input bg-transparent p-0"
                   />
                   {palette.length > 2 && (
                     <button
@@ -227,7 +227,7 @@ export function FlatEffectsSection({
                           palette: palette.filter((_, colorIndex) => colorIndex !== index),
                         })
                       }
-                      className="absolute -right-1 -top-1 hidden h-3.5 w-3.5 items-center justify-center rounded-full bg-panel-bg text-panel-text-2 shadow group-hover/swatch:flex"
+                      className="absolute -right-1 -top-1 hidden h-3.5 w-3.5 items-center justify-center rounded-full bg-panel-bg text-panel-text-2 shadow-sm group-hover/swatch:flex"
                     >
                       <X size={8} />
                     </button>
@@ -244,7 +244,7 @@ export function FlatEffectsSection({
                       palette: [...palette, palette.at(-1) ?? "#ffffff"],
                     })
                   }
-                  className="flex h-6 w-6 items-center justify-center rounded-sm border border-panel-border-input text-panel-text-4 hover:text-panel-text-1"
+                  className="flex h-6 w-6 items-center justify-center rounded-xs border border-panel-border-input text-panel-text-4 hover:text-panel-text-1"
                 >
                   <Plus size={11} />
                 </button>

package/src/components/editor/propertyPanelFlatMediaSection.tsx

@@ -146,7 +146,7 @@ export function FlatMediaSection({
     <div className="space-y-1.5">
       <div className="flex min-h-8 items-center justify-between gap-2">
         <span className="flex min-w-0 items-center gap-2">
-          <span className="h-5 w-8 flex-shrink-0 rounded-[3px] bg-panel-surface" />
+          <span className="h-5 w-8 shrink-0 rounded-[3px] bg-panel-surface" />
           <span className="min-w-0 truncate font-mono text-[11px] text-panel-text-0">
             {srcAttr}
           </span>
@@ -161,14 +161,14 @@ export function FlatMediaSection({
               setTimeout(() => setCopied(false), 1500);
             });
           }}
-          className="flex flex-shrink-0 items-center gap-1 text-[10px] text-panel-text-3 hover:text-panel-text-1"
+          className="flex shrink-0 items-center gap-1 text-[10px] text-panel-text-3 hover:text-panel-text-1"
         >
           {copied ? <Check size={11} /> : <ClipboardList size={11} />}
           {copied ? "Copied" : "Copy"}
         </button>
       </div>
       {isVisualMedia && (
-        <div className="ml-[1px] border-l-2 border-panel-border-input py-1 pl-[10px]">
+        <div className="ml-px border-l-2 border-panel-border-input py-1 pl-[10px]">
           <div className="flex min-h-6 items-center justify-between">
             <span className="flex items-baseline gap-[7px]">
               <span className="text-[11px] font-semibold text-panel-text-1">Cutout</span>

package/src/components/editor/propertyPanelFlatOverlaysSection.tsx

@@ -95,7 +95,7 @@ export function FlatOverlaysSection({
             )}
             <Plus
               size={12}
-              className="absolute right-1.5 top-1.5 text-white opacity-70 drop-shadow group-hover:text-panel-accent group-hover:opacity-100"
+              className="absolute right-1.5 top-1.5 text-white opacity-70 drop-shadow-sm group-hover:text-panel-accent group-hover:opacity-100"
             />
           </span>
           <span className="block truncate px-2 py-1.5 text-[10px] text-panel-text-2">