@hyperframes/studio 0.8.50 → 0.8.51

package/src/components/editor/PromotableControl.tsx

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

package/src/components/editor/PropertyPanelEmptyState.tsx

@@ -18,7 +18,7 @@ function FlatEmptyState() {
         </svg>
       </span>
       <div className="text-[13px] font-semibold text-panel-text-0">Nothing selected</div>
-      <div className="max-w-[250px] text-[11px] leading-[1.5] text-panel-text-3">
+      <div className="max-w-[250px] text-[11px] leading-normal text-panel-text-3">
         Click any element on the canvas to edit it, or drag to select several.
       </div>
       <div className="mt-2 flex w-full flex-col gap-1.5">
@@ -27,7 +27,7 @@ function FlatEmptyState() {
             <span className="text-panel-danger">●</span>
             Record a gesture
           </span>
-          <span className="rounded border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
+          <span className="rounded-sm border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
             R
           </span>
         </span>
@@ -36,7 +36,7 @@ function FlatEmptyState() {
             <span className="text-panel-accent">✦</span>
             Describe a change to the agent
           </span>
-          <span className="rounded border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
+          <span className="rounded-sm border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
             ⌘K
           </span>
         </span>
@@ -74,7 +74,7 @@ function FlatMultiSelectState({
   return (
     <div className="flex flex-col gap-3 px-4 py-3">
       <div className="flex items-center gap-3 rounded-xl border border-panel-border bg-panel-surface p-3">
-        <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-panel-accent">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-panel-accent">
           <Layers size={16} />
         </span>
         <div className="min-w-0 flex-1">
@@ -90,7 +90,7 @@ function FlatMultiSelectState({
           data-flat-multiselect-clear="true"
           aria-label="Clear selection"
           onClick={onClearSelection}
-          className="flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center text-panel-text-3"
+          className="flex h-[26px] w-[26px] shrink-0 items-center justify-center text-panel-text-3"
         >
           <svg
             width="13"
@@ -113,14 +113,14 @@ function FlatMultiSelectState({
               className="flex items-center gap-2 rounded-lg border border-panel-border bg-panel-bg px-2.5 py-[7px]"
             >
               <span
-                className={`flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded text-[9px] font-bold ${className}`}
+                className={`flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-sm text-[9px] font-bold ${className}`}
               >
                 {glyph}
               </span>
               <span className="min-w-0 flex-1 truncate text-[11px] text-panel-text-1">
                 {element.label}
               </span>
-              <span className="flex-shrink-0 font-mono text-[9px] text-panel-text-4">
+              <span className="shrink-0 font-mono text-[9px] text-panel-text-4">
                 {element.id ? `#${element.id}` : element.selector}
               </span>
             </span>

package/src/components/editor/PropertyPanelFlatHeader.tsx

@@ -41,13 +41,13 @@ export function PropertyPanelFlatHeader({
       <Icon
         size={15}
         data-flat-header-icon="true"
-        className={`flex-shrink-0 ${ICON_COLOR_BY_KIND[elementKind]}`}
+        className={`shrink-0 ${ICON_COLOR_BY_KIND[elementKind]}`}
       />
       <div className="flex min-w-0 flex-1 items-baseline gap-2">
         <span className="truncate text-[13px] font-semibold text-panel-text-0">{name}</span>
         <span className="truncate font-mono text-[10px] text-panel-text-4">{meta}</span>
       </div>
-      <div className="flex flex-shrink-0 items-center gap-2.5 text-panel-text-3">
+      <div className="flex shrink-0 items-center gap-2.5 text-panel-text-3">
         {showUngroup && (
           <button
             type="button"

package/src/components/editor/SnapToolbar.tsx

@@ -179,7 +179,7 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
         </button>
         <button
           type="button"
-          className="absolute -right-0.5 -bottom-0.5 rounded p-0.5 text-white/50 hover:text-white/90 bg-black/50"
+          className="absolute -right-0.5 -bottom-0.5 rounded-sm p-0.5 text-white/50 hover:text-white/90 bg-black/50"
           onClick={() => setGridPopoverOpen((v) => !v)}
           title="Grid options"
           aria-label="Grid options"
@@ -209,7 +209,7 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
                     updatePrefs({ gridSpacing: val });
                   }
                 }}
-                className="w-16 rounded bg-neutral-900 border border-neutral-600 px-1.5 py-0.5 text-xs text-white text-right tabular-nums outline-none focus:border-studio-accent"
+                className="w-16 rounded-sm bg-neutral-900 border border-neutral-600 px-1.5 py-0.5 text-xs text-white text-right tabular-nums outline-hidden focus:border-studio-accent"
               />
             </label>
             <label className="flex items-center gap-2 text-xs text-white/80 cursor-pointer">

package/src/components/editor/TimelineFxPopover.tsx

@@ -139,7 +139,7 @@ export function TimelineFxPopover({
       ref={rootRef}
       role="dialog"
       aria-label="Effects"
-      className="z-[200] flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl"
+      className="z-200 flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl"
       style={clampedStyle(anchorRect)}
       onKeyDown={onKeyDown}
       onPointerDown={(event) => event.stopPropagation()}

package/src/components/editor/TopologyLens.tsx

@@ -143,7 +143,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 +171,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 +181,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 +196,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>