@hyperframes/studio 0.8.50 → 0.8.52

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

package/src/components/editor/propertyPanelFxControls.tsx

@@ -88,7 +88,7 @@ export function AutomationToggle({
     <Tooltip label={automated ? "Automated" : "Automate"}>
       <button
         type="button"
-        className={`hf-fx-automate w-[16px] flex-shrink-0 rounded-[3px] border font-mono text-[9px] leading-none ${
+        className={`hf-fx-automate w-[16px] shrink-0 rounded-[3px] border font-mono text-[9px] leading-none ${
           automated
             ? "border-panel-accent text-panel-accent"
             : "border-panel-border-input text-panel-text-2 hover:text-panel-text-0"
@@ -192,10 +192,10 @@ export function FxParamRow({
             big the space is" — so 86px of truncation left "How big the sp…", and
             three rows of that read as the same word four times. A title only
             answers it on hover, one row at a time; wrapping answers it for the
-            whole column at rest. `break-words` so a long single token breaks
+            whole column at rest. `wrap-break-word` so a long single token breaks
             instead of widening the column. The row keeps `title={param.hint}`:
             the name and the explanation are different questions. */}
-        <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">
           {param.label}
         </span>
         <select
@@ -236,7 +236,7 @@ export function FxParamRow({
     >
       {/* See the enum row above for why the name wraps instead of truncating. */}
       <span
-        className={`hf-fx-label w-[86px] flex-shrink-0 break-words text-[10px] leading-tight ${
+        className={`hf-fx-label w-[86px] shrink-0 wrap-break-word text-[10px] leading-tight ${
           automated ? "text-panel-accent" : "text-panel-text-2"
         }`}
       >
@@ -258,7 +258,7 @@ export function FxParamRow({
         onBlur={commit}
       />
       <input
-        className="hf-fx-number w-[54px] flex-shrink-0 rounded-[3px] bg-panel-surface px-1 py-0.5 text-right font-mono text-[10px] text-panel-text-0"
+        className="hf-fx-number w-[54px] shrink-0 rounded-[3px] bg-panel-surface px-1 py-0.5 text-right font-mono text-[10px] text-panel-text-0"
         type="number"
         min={param.min}
         max={param.max}
@@ -287,7 +287,7 @@ export function FxParamRow({
         }}
       />
       {param.unit ? (
-        <span className="hf-fx-unit w-[22px] flex-shrink-0 font-mono text-[9px] text-panel-text-2">
+        <span className="hf-fx-unit w-[22px] shrink-0 font-mono text-[9px] text-panel-text-2">
           {param.unit}
         </span>
       ) : null}

package/src/components/editor/propertyPanelFxEqModule.tsx

@@ -87,7 +87,7 @@ function Fader({
       <div className="relative h-[74px] w-full">
         <span className="pointer-events-none absolute inset-x-0 top-1/2 h-px bg-panel-border-input" />
         <span
-          className="pointer-events-none absolute left-1/2 w-[3px] -translate-x-1/2 rounded-sm bg-panel-accent"
+          className="pointer-events-none absolute left-1/2 w-[3px] -translate-x-1/2 rounded-xs bg-panel-accent"
           style={
             // `value`, not `band.gain`: mid-drag across zero the fill would
             // otherwise keep pointing the way it started.
@@ -95,7 +95,7 @@ function Fader({
           }
         />
         <input
-          className="hf-fx-eq-fader absolute left-1/2 h-[19px] w-[74px] -translate-x-1/2 -translate-y-1/2 rotate-[-90deg] cursor-ns-resize appearance-none bg-transparent"
+          className="hf-fx-eq-fader absolute left-1/2 h-[19px] w-[74px] -translate-x-1/2 -translate-y-1/2 -rotate-90 cursor-ns-resize appearance-none bg-transparent"
           style={{ top: "50%" }}
           type="range"
           min={-HF_AUDIO_EQ_RANGE_DB}

package/src/components/editor/propertyPanelFxPresetStyle.ts

@@ -146,7 +146,7 @@ export const FX_PRESET_STYLE: Record<string, FxPresetStyle> = {
   },
   // The name is a joke and the type is in on it.
   "doofus-worble": {
-    type: "text-[16px] tracking-[0.1em]",
+    type: "text-[16px] tracking-widest",
     color: "hsl(288, 85%, 72%)",
     family: FACE.theatrical,
   },
@@ -164,7 +164,7 @@ export const FX_PRESET_STYLE: Record<string, FxPresetStyle> = {
   },
   // Rough and too close — heavy industrial caps, growled rather than shouted.
   monster: {
-    type: "text-[15px] font-black uppercase tracking-[0.05em]",
+    type: "text-[15px] font-black uppercase tracking-wider",
     color: "hsl(350, 78%, 64%)",
     family: FACE.condensed,
   },

package/src/components/editor/propertyPanelGradingNumberField.tsx

@@ -109,7 +109,7 @@ export function GradingNumberField({
             event.currentTarget.blur();
           }
         }}
-        className={`border-b border-panel-border-input/50 bg-transparent py-0.5 text-right font-mono text-[9px] text-panel-text-2 outline-none focus:border-panel-accent disabled:opacity-40 ${inputClassName}`}
+        className={`border-b border-panel-border-input/50 bg-transparent py-0.5 text-right font-mono text-[9px] text-panel-text-2 outline-hidden focus:border-panel-accent disabled:opacity-40 ${inputClassName}`}
       />
     </label>
   );

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -182,7 +182,7 @@ export function MediaSection({
                   event.stopPropagation();
                   void runBackgroundRemoval();
                 }}
-                className="flex h-8 flex-shrink-0 items-center gap-1.5 rounded-md bg-panel-input px-2.5 text-[11px] font-medium text-panel-text-2 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-panel-input px-2.5 text-[11px] font-medium text-panel-text-2 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-50"
                 title={
                   canRemoveBackground
                     ? "Remove background and save a transparent asset"

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -70,21 +70,21 @@ export function MetricField({
     scrub && !disabled
       ? ({
           className:
-            "flex-shrink-0 text-[11px] font-medium text-neutral-500 cursor-ew-resize select-none",
+            "shrink-0 text-[11px] font-medium text-neutral-500 cursor-ew-resize select-none",
           onPointerDown: handleScrubPointerDown,
           onPointerMove: handleScrubPointerMove,
           onPointerUp: handleScrubPointerUp,
           onPointerCancel: handleScrubPointerUp,
           onLostPointerCapture: handleScrubPointerUp,
         } as const)
-      : ({ className: "flex-shrink-0 text-[11px] font-medium text-neutral-500" } as const);
+      : ({ className: "shrink-0 text-[11px] font-medium text-neutral-500" } as const);
 
   return (
     <div className={FIELD} title={tooltip}>
       <div className="flex min-w-0 items-center gap-3">
         <span {...scrubProps}>{label}</span>
         <CommitField value={value} disabled={disabled} liveCommit={liveCommit} onCommit={commit} />
-        {suffix && <span className="flex-shrink-0 text-[10px] text-neutral-600">{suffix}</span>}
+        {suffix && <span className="shrink-0 text-[10px] text-neutral-600">{suffix}</span>}
       </div>
     </div>
   );
@@ -262,7 +262,7 @@ export function SelectField({
   const renderedOptions = value && !options.includes(value) ? [value, ...options] : options;
   return (
     <label className={`${FIELD} flex items-center gap-3`}>
-      <span className="flex-shrink-0 text-[11px] font-medium text-neutral-500">{label}</span>
+      <span className="shrink-0 text-[11px] font-medium text-neutral-500">{label}</span>
       <select
         value={value}
         disabled={disabled}
@@ -270,7 +270,7 @@ export function SelectField({
           track("select", label);
           onChange(e.target.value);
         }}
-        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"
       >
         {renderedOptions.map((option) => (
           <option key={option} value={option}>
@@ -302,7 +302,7 @@ export function Section({
       height="10"
       viewBox="0 0 10 10"
       fill="currentColor"
-      className={`flex-shrink-0 text-panel-text-5 transition-transform duration-150 ${
+      className={`shrink-0 text-panel-text-5 transition-transform duration-150 ${
         collapsed ? "-rotate-90" : ""
       }`}
     >
@@ -324,7 +324,7 @@ export function Section({
             <h3 className="text-[12px] font-semibold text-panel-text-1">{title}</h3>
             {collapseIcon}
           </button>
-          {accessory && <div className="flex flex-shrink-0 items-center">{accessory}</div>}
+          {accessory && <div className="flex shrink-0 items-center">{accessory}</div>}
         </div>
         {!collapsed && <div className="px-4 pb-3">{children}</div>}
       </section>

package/src/components/editor/propertyPanelSections.tsx

@@ -147,7 +147,7 @@ export function TextAreaField({
           onFocus={handleFocus}
           onChange={handleChange}
           onBlur={handleBlur}
-          className="[field-sizing:content] max-h-[40vh] min-h-12 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent font-mono text-[11px] leading-normal text-panel-text-0 outline-none disabled:cursor-not-allowed disabled:text-panel-text-4"
+          className="field-sizing-content max-h-[40vh] min-h-12 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent font-mono text-[11px] leading-normal text-panel-text-0 outline-hidden disabled:cursor-not-allowed disabled:text-panel-text-4"
         />
       </div>
     );
@@ -165,7 +165,7 @@ export function TextAreaField({
           onFocus={handleFocus}
           onChange={handleChange}
           onBlur={handleBlur}
-          className="[field-sizing:content] max-h-[40vh] min-h-20 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+          className="field-sizing-content max-h-[40vh] min-h-20 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
         />
       </div>
     </label>
@@ -189,7 +189,7 @@ function FontWeightField({
   return (
     <div className={FIELD}>
       <div className="flex min-w-0 items-center gap-3">
-        <span className="flex-shrink-0 text-[11px] font-medium text-neutral-500">Weight</span>
+        <span className="shrink-0 text-[11px] font-medium text-neutral-500">Weight</span>
         <select
           value={value}
           disabled={disabled}
@@ -197,7 +197,7 @@ function FontWeightField({
             track("select", "Weight");
             onCommit(e.target.value);
           }}
-          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"
         >
           {displayOptions.map((o) => (
             <option key={o} value={o}>
@@ -323,7 +323,7 @@ function TextFieldEditor({
               track("button", "Remove text field");
               onRemoveTextField(field.key);
             }}
-            className="inline-flex h-7 flex-shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
+            className="inline-flex h-7 shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
           >
             Remove
           </button>
@@ -476,7 +476,7 @@ export function TextSection({
             }}
             className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
           >
-            <Plus size={12} className="flex-shrink-0" />
+            <Plus size={12} className="shrink-0" />
             <span className="truncate">Add text</span>
           </button>
         </div>
@@ -497,14 +497,14 @@ export function TextSection({
                 <div className="flex min-w-0 items-center justify-between gap-2">
                   <div className="flex min-w-0 items-center gap-2">
                     <span
-                      className="h-4 w-4 flex-shrink-0 rounded border border-neutral-700 bg-neutral-950"
+                      className="h-4 w-4 shrink-0 rounded-sm border border-neutral-700 bg-neutral-950"
                       style={{ backgroundColor: getTextFieldColor(field, styles) }}
                     />
                     <span className="min-w-0 truncate text-[11px] font-medium text-neutral-100">
                       {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
                     </span>
                   </div>
-                  <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
+                  <span className="shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
                     {field.tagName}
                   </span>
                 </div>

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

@@ -4,6 +4,8 @@ import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
+import { runtimeProtocolMetadata } from "@hyperframes/core/runtime/protocol";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
 import { useColorGradingController } from "./useColorGradingController";
 import type { DomEditSelection } from "./domEditing";
 
@@ -22,6 +24,7 @@ function cleanStudioGrading() {
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
+  usePreviewIframeStore.setState({ iframe: null });
   document.body.innerHTML = "";
 });
 
@@ -737,3 +740,38 @@ describe("useColorGradingController", () => {
     vi.unstubAllGlobals();
   });
 });
+
+describe("useColorGradingController after the preview iframe is replaced", () => {
+  it("replays the grade to the new iframe on its ready message and ignores the old one", () => {
+    vi.useFakeTimers();
+    const a = createPreviewFrame();
+    const b = createPreviewFrame();
+    const ref = { current: a.iframe as HTMLIFrameElement | null };
+    usePreviewIframeStore.getState().setIframe(a.iframe);
+    const initialElement = makeElement({
+      dataAttributes: { "color-grading": JSON.stringify({ preset: "bright-pop", intensity: 1 }) },
+    });
+    const { root } = renderHook(vi.fn(), initialElement, ref);
+    act(() => vi.advanceTimersByTime(100));
+
+    const postToA = vi.spyOn(a.contentWindow, "postMessage");
+    const postToB = vi.spyOn(b.contentWindow, "postMessage");
+    act(() => {
+      ref.current = b.iframe;
+      usePreviewIframeStore.getState().setIframe(b.iframe);
+    });
+    const ready = { source: "hf-preview", type: "ready", ...runtimeProtocolMetadata(30) };
+    act(() => {
+      window.dispatchEvent(new MessageEvent("message", { data: ready, source: a.contentWindow }));
+    });
+    expect(colorGradingMessages(postToB.mock.calls)).toHaveLength(0);
+    act(() => {
+      window.dispatchEvent(new MessageEvent("message", { data: ready, source: b.contentWindow }));
+    });
+
+    expect(colorGradingMessages(postToB.mock.calls)).toHaveLength(1);
+    expect(postToA).not.toHaveBeenCalled();
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+});

package/src/components/editor/useColorGradingController.ts

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
@@ -430,6 +431,7 @@ export function useColorGradingController({
     [previewIframeRef, target],
   );
 
+  const livePreviewIframe = useLivePreviewIframe();
   useEffect(() => {
     const iframe = previewIframeRef?.current;
     if (!iframe) return;
@@ -455,7 +457,13 @@ export function useColorGradingController({
       window.removeEventListener("message", onMessage);
       window.clearTimeout(timer);
     };
-  }, [postColorGrading, postCompare, previewIframeRef, scheduleRuntimeStatusRefresh]);
+  }, [
+    postColorGrading,
+    postCompare,
+    previewIframeRef,
+    scheduleRuntimeStatusRefresh,
+    livePreviewIframe,
+  ]);
 
   useEffect(
     () => () => {