@hyperframes/studio 0.8.50 → 0.8.53-desktop.0

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">

package/src/components/editor/propertyPanelFlatPrimitives.tsx

@@ -42,7 +42,7 @@ export function FlatRow({
   return (
     <div className="group flex min-h-[30px] items-center justify-between gap-3">
       <span className={`text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
-      <span className="flex min-w-0 flex-shrink-0 items-center gap-1.5">
+      <span className="flex min-w-0 shrink-0 items-center gap-1.5">
         <span
           data-flat-row-value="true"
           className={`min-w-0 border-b pb-px font-mono text-[11px] ${VALUE_TIER_VALUE_CLASS[tier]} ${
@@ -73,7 +73,7 @@ export function FlatRow({
               track("button", `Reset ${label}`);
               onReset();
             }}
-            className="flex-shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100"
+            className="shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100"
           >
             <RotateCcw size={11} />
           </button>
@@ -84,7 +84,7 @@ export function FlatRow({
             height="10"
             viewBox="0 0 10 10"
             fill="currentColor"
-            className="flex-shrink-0 text-panel-text-5"
+            className="shrink-0 text-panel-text-5"
           >
             <path d="M2 3l3 4 3-4z" />
           </svg>
@@ -196,7 +196,7 @@ export function FlatGroupHeader({
         type="button"
         data-flat-group-collapsed="true"
         onClick={onToggleOpen}
-        className={`${animateEntrance ? "hf-flat-group-enter " : ""}flex min-h-10 w-full flex-shrink-0 items-center justify-between gap-2 border-b border-panel-hairline bg-panel-bg px-4 text-left`}
+        className={`${animateEntrance ? "hf-flat-group-enter " : ""}flex min-h-10 w-full shrink-0 items-center justify-between gap-2 border-b border-panel-hairline bg-panel-bg px-4 text-left`}
       >
         <span className="flex min-w-0 items-center gap-2">
           <span className="text-[12px] font-medium text-panel-text-2">{title}</span>
@@ -211,7 +211,7 @@ export function FlatGroupHeader({
           height="12"
           viewBox="0 0 12 12"
           fill="currentColor"
-          className="flex-shrink-0 text-panel-text-5"
+          className="shrink-0 text-panel-text-5"
         >
           <path d="M4 2l4 4-4 4z" />
         </svg>
@@ -221,7 +221,7 @@ export function FlatGroupHeader({
 
   return (
     <div
-      className={`${animateEntrance ? "hf-flat-group-enter " : ""}flex min-h-10 flex-shrink-0 items-center justify-between bg-panel-bg px-4`}
+      className={`${animateEntrance ? "hf-flat-group-enter " : ""}flex min-h-10 shrink-0 items-center justify-between bg-panel-bg px-4`}
     >
       <span className="text-[12px] font-semibold text-panel-text-0">{title}</span>
       <span className="flex items-center gap-2.5 text-panel-text-5">
@@ -415,7 +415,7 @@ export function FlatSlider({
 
   return (
     <div className="flex min-h-[28px] items-center gap-2.5">
-      <span className="w-[86px] flex-shrink-0 text-[11px] text-panel-text-3">{label}</span>
+      <span className="w-[86px] shrink-0 text-[11px] text-panel-text-3">{label}</span>
       <div
         data-flat-slider-track="true"
         role="slider"
@@ -516,7 +516,7 @@ export function FlatSlider({
           {centerTick && (
             <div
               data-flat-slider-center-tick="true"
-              className="absolute left-1/2 top-[-1px] h-1 w-px -translate-x-1/2 bg-panel-text-5"
+              className="absolute left-1/2 -top-px h-1 w-px -translate-x-1/2 bg-panel-text-5"
             />
           )}
           {tier === "explicitCustom" && (
@@ -537,14 +537,14 @@ export function FlatSlider({
       </div>
       <span
         data-flat-slider-value="true"
-        className={`w-11 flex-shrink-0 text-right font-mono text-[10px] ${
+        className={`w-11 shrink-0 text-right font-mono text-[10px] ${
           tier === "explicitCustom" ? "text-panel-text-0" : "text-panel-text-3"
         }`}
       >
         {displayValue}
       </span>
       {(centerTick || onReset) && (
-        <span data-flat-slider-reset-slot="true" className="w-3.5 flex-shrink-0">
+        <span data-flat-slider-reset-slot="true" className="w-3.5 shrink-0">
           {tier === "explicitCustom" && onReset && (
             <button
               type="button"

package/src/components/editor/propertyPanelFlatSelectRow.tsx

@@ -68,7 +68,7 @@ export function FlatSelectRow({
               track("select", trackName);
               onChange(e.target.value);
             }}
-            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
+            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-hidden disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
           >
             {renderedOptions.map((option) => (
               <option key={option.value} value={option.value}>
@@ -81,7 +81,7 @@ export function FlatSelectRow({
             height="10"
             viewBox="0 0 10 10"
             fill="currentColor"
-            className="flex-shrink-0 text-panel-text-5"
+            className="shrink-0 text-panel-text-5"
           >
             <path d="M2 3l3 4 3-4z" />
           </svg>
@@ -96,7 +96,7 @@ export function FlatSelectRow({
               track("button", `Reset ${trackName}`);
               onReset();
             }}
-            className="flex-shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-40"
+            className="shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-40"
           >
             <RotateCcw size={11} />
           </button>

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

@@ -2,8 +2,7 @@
 
 import React, { act, useState } from "react";
 import { createRoot } from "react-dom/client";
-import postcss from "postcss";
-import tailwindcss from "tailwindcss";
+import { compile } from "tailwindcss";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { FlatTextLayerList, FlatTextSection } from "./propertyPanelFlatTextSection";
 import type { DomEditSelection, DomEditTextField } from "./domEditingTypes";
@@ -511,13 +510,13 @@ describe("FlatTextSection — multi-field", () => {
     expect(contentTextarea?.classList).toContain("resize-y");
     expect(contentTextarea?.classList).toContain("overflow-y-auto");
 
-    const compiled = await postcss([
-      tailwindcss({
-        content: [{ raw: host.innerHTML, extension: "html" }],
-        corePlugins: { preflight: false },
-      }),
-    ]).process("@tailwind utilities;", { from: undefined });
-    expect(compiled.css).toContain("field-sizing: content");
+    // Tailwind v4 has no PostCSS-plugin JS API; `compile` takes the stylesheet
+    // and is handed the candidates directly instead of scanning raw content.
+    const candidates = Array.from(host.querySelectorAll<HTMLElement>("*")).flatMap((el) =>
+      Array.from(el.classList),
+    );
+    const compiled = await compile("@tailwind utilities;");
+    expect(compiled.build(candidates)).toContain("field-sizing: content");
 
     act(() => root.unmount());
   });

package/src/components/editor/propertyPanelFlatTextSection.tsx

@@ -121,7 +121,7 @@ function FlatTextFieldEditor({
               track("select", "Weight");
               onSetTextFieldStyle(field.key, "font-weight", e.target.value);
             }}
-            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none ${
+            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-hidden ${
               VALUE_TIER_VALUE_CLASS[resolveValueTier(field.inlineStyles["font-weight"], "400")]
             }`}
           >
@@ -138,7 +138,7 @@ function FlatTextFieldEditor({
             height="10"
             viewBox="0 0 10 10"
             fill="currentColor"
-            className="flex-shrink-0 text-panel-text-5"
+            className="shrink-0 text-panel-text-5"
           >
             <path d="M2 3l3 4 3-4z" />
           </svg>
@@ -387,13 +387,13 @@ export function FlatTextLayerList({
               }`}
             >
               <span
-                className="h-3 w-3 flex-shrink-0 rounded-sm"
+                className="h-3 w-3 shrink-0 rounded-xs"
                 style={{ backgroundColor: getTextFieldColor(field, styles) }}
               />
               <span className="min-w-0 flex-1 truncate text-[11px] text-panel-text-1">
                 {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
               </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">
                 {field.tagName}
               </span>
               {fields.length > 1 && (
@@ -406,7 +406,7 @@ export function FlatTextLayerList({
                     track("button", "Remove text field");
                     onRemove(field.key);
                   }}
-                  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"
                 >
                   <X size={10} />
                 </button>

package/src/components/editor/propertyPanelFlatToggle.tsx

@@ -37,7 +37,7 @@ export function FlatToggle({
           track("toggle", label);
           onChange(!checked);
         }}
-        className={`relative h-[14px] w-6 flex-shrink-0 rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+        className={`relative h-[14px] w-6 shrink-0 rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
           checked ? "bg-panel-accent/35" : "bg-panel-hover"
         }`}
       >

package/src/components/editor/propertyPanelFont.tsx

@@ -425,7 +425,7 @@ export function FontFamilyField({
           role="combobox"
           aria-expanded={open}
           aria-autocomplete="list"
-          className="min-w-0 rounded-lg border border-neutral-800 bg-neutral-900 px-2.5 py-2 text-[11px] font-medium text-neutral-100 outline-none placeholder:text-neutral-600 focus:border-neutral-600"
+          className="min-w-0 rounded-lg border border-neutral-800 bg-neutral-900 px-2.5 py-2 text-[11px] font-medium text-neutral-100 outline-hidden placeholder:text-neutral-600 focus:border-neutral-600"
         />
         {canQueryLocalFonts && (
           <button
@@ -487,12 +487,12 @@ export function FontFamilyField({
                   {option.family}
                 </span>
                 {renderAliasFor(option.family) && (
-                  <span className="flex-shrink-0 text-[9px] text-neutral-500">
+                  <span className="shrink-0 text-[9px] text-neutral-500">
                     → {renderAliasFor(option.family)}
                   </span>
                 )}
               </span>
-              <span className="flex-shrink-0 text-[9px] uppercase tracking-[0.14em] text-neutral-600">
+              <span className="shrink-0 text-[9px] uppercase tracking-[0.14em] text-neutral-600">
                 {option.source}
               </span>
             </button>
@@ -524,7 +524,7 @@ export function FontFamilyField({
             height="10"
             viewBox="0 0 10 10"
             fill="currentColor"
-            className="flex-shrink-0 text-panel-text-5"
+            className="shrink-0 text-panel-text-5"
           >
             <path d="M2 3l3 4 3-4z" />
           </svg>
@@ -549,7 +549,7 @@ export function FontFamilyField({
         >
           {currentFamily}
         </span>
-        <span className="flex-shrink-0 text-[10px] uppercase tracking-[0.14em] text-neutral-600">
+        <span className="shrink-0 text-[10px] uppercase tracking-[0.14em] text-neutral-600">
           Font
         </span>
       </button>

package/src/components/editor/propertyPanelFxCarveModule.tsx

@@ -338,7 +338,7 @@ function CarveSourceRow({
     <div className="hf-fx-row flex min-h-6 items-center gap-2">
       {/* Wraps like every other name in this column (see FxParamRow) — one
           truncating row beside wrapping ones reads as a rendering bug. */}
-      <span className="hf-fx-label w-[86px] flex-shrink-0 break-words text-[10px] leading-tight text-panel-text-2">
+      <span className="hf-fx-label w-[86px] shrink-0 wrap-break-word text-[10px] leading-tight text-panel-text-2">
         Listen to
       </span>
       {soleVoice ? (

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

@@ -141,7 +141,7 @@ describe("FxParamRow label tooltip", () => {
     // The whole name is present and allowed to wrap. No `title`: a tooltip
     // answers one row on hover, wrapping answers the column at rest.
     expect(label?.textContent).toBe("Gap between repeats");
-    expect(label?.className).toContain("break-words");
+    expect(label?.className).toContain("wrap-break-word");
     expect(label?.className).not.toContain("truncate");
     expect(label?.getAttribute("title")).toBeNull();
     // The hint stays where it was: the two are different questions, and the