@hyperframes/studio 0.8.49 → 0.8.51

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/feedback/StudioFeedbackCard.tsx

@@ -243,7 +243,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 if (req) trackStudioFeedbackInterviewClick({ reason: req.reason });
                 close("sent");
               }}
-              className="h-6 flex-shrink-0 whitespace-nowrap rounded-full border border-white/20 bg-white/[0.08] px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-white/35 hover:bg-white/[0.16] active:scale-[0.97] motion-reduce:transition-none"
+              className="h-6 shrink-0 whitespace-nowrap rounded-full border border-white/20 bg-white/8 px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-white/35 hover:bg-white/16 active:scale-[0.97] motion-reduce:transition-none"
             >
               Talk to us, 30 min
             </a>
@@ -251,7 +251,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
           <button
             type="button"
             onClick={() => close("close")}
-            className="-mr-1 -mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-white/10 hover:text-neutral-200"
+            className="-mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-white/10 hover:text-neutral-200"
             aria-label="Dismiss"
           >
             <svg
@@ -283,7 +283,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                   key={n}
                   // A resting fill, so the row reads as eleven controls rather
                   // than as a line of text that happens to be clickable.
-                  className="flex h-7 cursor-pointer items-center justify-center rounded-md bg-white/[0.04] text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/[0.14] hover:text-neutral-100 active:scale-[0.97] has-[:checked]:bg-white/90 has-[:checked]:text-neutral-900 has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-white/50 motion-reduce:transition-none"
+                  className="flex h-7 cursor-pointer items-center justify-center rounded-md bg-white/4 text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/[0.14] hover:text-neutral-100 active:scale-[0.97] has-checked:bg-white/90 has-checked:text-neutral-900 has-focus-visible:ring-1 has-focus-visible:ring-white/50 motion-reduce:transition-none"
                 >
                   <input
                     type="radio"
@@ -328,8 +328,8 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                   // attached to nothing.
                   className={`h-6 rounded-full border px-2.5 text-[11px] transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none ${
                     failed
-                      ? "border-red-300/20 bg-red-100/[0.06] text-red-100/80 hover:border-red-200/70 hover:bg-red-100/25 hover:text-white"
-                      : "border-white/10 bg-white/[0.04] text-neutral-300 hover:border-white/60 hover:bg-white/25 hover:text-white"
+                      ? "border-red-300/20 bg-red-100/6 text-red-100/80 hover:border-red-200/70 hover:bg-red-100/25 hover:text-white"
+                      : "border-white/10 bg-white/4 text-neutral-300 hover:border-white/60 hover:bg-white/25 hover:text-white"
                   }`}
                 >
                   {preset.label}
@@ -355,12 +355,12 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 placeholder={followUp.placeholder}
                 aria-label={followUp.prompt}
                 maxLength={500}
-                className="h-7 min-w-0 flex-1 rounded-md border border-white/10 bg-black/20 px-2 text-[11px] text-neutral-100 outline-none transition-colors duration-150 placeholder:text-neutral-500 focus:border-white/25"
+                className="h-7 min-w-0 flex-1 rounded-md border border-white/10 bg-black/20 px-2 text-[11px] text-neutral-100 outline-hidden transition-colors duration-150 placeholder:text-neutral-500 focus:border-white/25"
               />
               <button
                 type="button"
                 onClick={() => submit()}
-                className="h-7 flex-shrink-0 rounded-md bg-white/10 px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-white/[0.16] active:scale-[0.97] motion-reduce:transition-none"
+                className="h-7 shrink-0 rounded-md bg-white/10 px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-white/16 active:scale-[0.97] motion-reduce:transition-none"
               >
                 Send
               </button>

package/src/components/feedback/feedbackTrigger.ts

@@ -76,7 +76,6 @@ const FOLLOW_UPS: readonly FollowUpQuestion[] = [
       { label: "Layers panel", hint: "The layer tree on the right" },
       { label: "Variables panel", hint: "Composition variables on the right" },
       { label: "Blocks browser", hint: "The block library in the sidebar" },
-      { label: "Storyboard mode", hint: "The storyboard view next to Preview" },
       { label: "Caption editing", hint: "Editing caption words and presets in Studio" },
       { label: "Render history", hint: "The list of past exports" },
       { label: "Nothing", hint: "It all earns its place" },

package/src/components/nle/AssetPreviewOverlay.tsx

@@ -42,7 +42,11 @@ function AssetPreviewMedia({
 }) {
   if (kind === "image") {
     return (
-      <img src={serveUrl} alt={name} className="max-w-full max-h-[40vh] rounded object-contain" />
+      <img
+        src={serveUrl}
+        alt={name}
+        className="max-w-full max-h-[40vh] rounded-sm object-contain"
+      />
     );
   }
   if (kind === "video") {
@@ -53,7 +57,7 @@ function AssetPreviewMedia({
         autoPlay
         muted
         playsInline
-        className="max-w-full max-h-[40vh] rounded"
+        className="max-w-full max-h-[40vh] rounded-sm"
       />
     );
   }

package/src/components/nle/CompositionBreadcrumb.tsx

@@ -21,7 +21,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
   return (
     <nav
       aria-label="Composition navigation"
-      className="flex items-center gap-1 px-2 h-8 border-b border-neutral-800/50 bg-neutral-900/50 flex-shrink-0"
+      className="flex items-center gap-1 px-2 h-8 border-b border-neutral-800/50 bg-neutral-900/50 shrink-0"
     >
       {/* Back button — always goes to parent */}
       <button
@@ -33,7 +33,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
           });
           onNavigate(stack.length - 2);
         }}
-        className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 active:scale-[0.98] transition-colors"
+        className="flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 active:scale-[0.98] transition-colors"
         title="Back (Esc, or double-click empty timeline)"
         aria-label="Back to parent composition"
       >
@@ -45,7 +45,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
         const isLast = i === stack.length - 1;
         return (
           <span key={level.id} className="flex items-center gap-1">
-            {i > 0 && <CaretRight size={10} className="text-neutral-600 flex-shrink-0" />}
+            {i > 0 && <CaretRight size={10} className="text-neutral-600 shrink-0" />}
             {isLast ? (
               <span className="text-xs text-neutral-200 font-medium">{level.label}</span>
             ) : (

package/src/components/nle/NLEPreview.test.ts

@@ -134,6 +134,19 @@ describe("getPreviewPlayerKey", () => {
 });
 
 describe("resolvePreviewStageSize", () => {
+  it("reserves the ruler gutter on both sides of both axes", () => {
+    const wide = { width: 1920, height: 1080 };
+    const tall = { width: 1080, height: 1920 };
+    expect(resolvePreviewStageSize(512, 402, wide, undefined, 16)).toEqual({
+      width: 464,
+      height: 261,
+    });
+    expect(resolvePreviewStageSize(512, 402, tall, undefined, 16)).toEqual({
+      width: 199.125,
+      height: 354,
+    });
+  });
+
   it("fits portrait composition dimensions by height in a narrow viewport", () => {
     expect(resolvePreviewStageSize(512, 402, { width: 1080, height: 1920 }, undefined)).toEqual({
       width: 217.125,

package/src/components/nle/NLEPreview.tsx

@@ -11,6 +11,7 @@ import {
   toDomPrecision,
   type PreviewZoomState,
 } from "./previewZoom";
+import { RULER_GUTTER_PX, usePreviewGuidesStore } from "../editor/previewGuidesStore";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
 interface NLEPreviewProps {
   projectId: string;
@@ -89,9 +90,10 @@ export function resolvePreviewStageSize(
   viewportHeight: number,
   compositionSize: PreviewCompositionSize | null,
   portrait: boolean | undefined,
+  gutterPx = 0,
 ): { width: number; height: number } {
-  const availableWidth = Math.max(0, viewportWidth - PREVIEW_STAGE_INSET_PX);
-  const availableHeight = Math.max(0, viewportHeight - PREVIEW_STAGE_INSET_PX);
+  const availableWidth = Math.max(0, viewportWidth - PREVIEW_STAGE_INSET_PX - 2 * gutterPx);
+  const availableHeight = Math.max(0, viewportHeight - PREVIEW_STAGE_INSET_PX - 2 * gutterPx);
   const aspectRatio =
     compositionSize && compositionSize.width > 0 && compositionSize.height > 0
       ? compositionSize.width / compositionSize.height
@@ -135,6 +137,7 @@ export const NLEPreview = memo(function NLEPreview({
     onStageRef?.(stageRef);
   }, [onStageRef]);
   const [compositionSize, setCompositionSize] = useState<PreviewCompositionSize | null>(null);
+  const gutterPx = usePreviewGuidesStore((s) => (s.rulerVisible ? RULER_GUTTER_PX : 0));
   const [stageSize, setStageSize] = useState(() => resolvePreviewStageSize(0, 0, null, portrait));
 
   const zoomRef = useRef<PreviewZoomState>(loadInitialZoom());
@@ -164,14 +167,16 @@ export const NLEPreview = memo(function NLEPreview({
 
     const updateStageSize = () => {
       const rect = viewport.getBoundingClientRect();
-      setStageSize(resolvePreviewStageSize(rect.width, rect.height, compositionSize, portrait));
+      setStageSize(
+        resolvePreviewStageSize(rect.width, rect.height, compositionSize, portrait, gutterPx),
+      );
     };
 
     updateStageSize();
     const observer = new ResizeObserver(updateStageSize);
     observer.observe(viewport);
     return () => observer.disconnect();
-  }, [compositionSize, portrait]);
+  }, [compositionSize, portrait, gutterPx]);
 
   const onCompositionSizeChangeRef = useRef(onCompositionSizeChange);
   onCompositionSizeChangeRef.current = onCompositionSizeChange;
@@ -437,7 +442,7 @@ export const NLEPreview = memo(function NLEPreview({
     <div className="flex flex-col h-full min-h-0">
       <div
         ref={viewportRef}
-        className="relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-none focus:ring-1 focus:ring-studio-accent/40 bg-neutral-950"
+        className="relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-hidden focus:ring-1 focus:ring-studio-accent/40 bg-neutral-950"
         tabIndex={0}
         aria-label="Composition preview"
       >
@@ -487,14 +492,14 @@ export const NLEPreview = memo(function NLEPreview({
         </div>
         <div
           ref={hudRef}
-          className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 rounded-lg px-4 py-2 text-sm font-mono tabular-nums text-white/90 bg-black/60 backdrop-blur-sm shadow-lg"
+          className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 rounded-lg px-4 py-2 text-sm font-mono tabular-nums text-white/90 bg-black/60 backdrop-blur-xs shadow-lg"
           style={{ opacity: 0, transition: "opacity 200ms ease-in" }}
           aria-live="polite"
         />
         {!isPreviewAtFit(settledZoom) && (
           <button
             type="button"
-            className="absolute bottom-3 right-3 z-50 rounded-md px-2.5 py-1 text-xs font-medium text-white/80 bg-black/50 backdrop-blur-sm hover:bg-black/70 hover:text-white transition-colors"
+            className="absolute bottom-3 right-3 z-50 rounded-md px-2.5 py-1 text-xs font-medium text-white/80 bg-black/50 backdrop-blur-xs hover:bg-black/70 hover:text-white transition-colors"
             onClick={() => applyZoom(DEFAULT_PREVIEW_ZOOM)}
             aria-label="Reset zoom to fit"
             data-testid="preview-reset-zoom"

package/src/components/nle/PreviewOverlays.tsx

@@ -222,13 +222,13 @@ export function PreviewOverlays({
         <TopologyLens iframeRef={previewIframeRef} activeCompositionPath={activeCompPath} />
         <CaptionOverlay iframeRef={previewIframeRef} />
         {/* Mode indicator + explicit exit */}
-        <div className="absolute top-2 left-1/2 -translate-x-1/2 z-[60] flex items-center gap-2 rounded-full border border-studio-accent/40 bg-black/70 px-2.5 py-1">
+        <div className="absolute top-2 left-1/2 -translate-x-1/2 z-60 flex items-center gap-2 rounded-full border border-studio-accent/40 bg-black/70 px-2.5 py-1">
           <span className="h-1.5 w-1.5 rounded-full bg-studio-accent" aria-hidden="true" />
           <span className="text-2xs text-neutral-200">Editing captions</span>
           <button
             type="button"
             onClick={exitCaptionMode}
-            className="rounded text-2xs text-neutral-400 underline underline-offset-2 hover:text-neutral-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-studio-accent"
+            className="rounded-sm text-2xs text-neutral-400 underline underline-offset-2 hover:text-neutral-100 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent"
           >
             Exit
           </button>
@@ -236,13 +236,13 @@ export function PreviewOverlays({
         {captionSyncError && (
           <div
             role="alert"
-            className="absolute top-10 left-1/2 -translate-x-1/2 z-[60] flex items-center gap-2 rounded-full border border-red-500/50 bg-red-950/90 px-2.5 py-1"
+            className="absolute top-10 left-1/2 -translate-x-1/2 z-60 flex items-center gap-2 rounded-full border border-red-500/50 bg-red-950/90 px-2.5 py-1"
           >
             <span className="text-2xs text-red-200">{captionSyncError}</span>
             <button
               type="button"
               onClick={() => useCaptionStore.getState().retrySave?.()}
-              className="rounded text-2xs text-red-100 underline underline-offset-2 hover:text-white"
+              className="rounded-sm text-2xs text-red-100 underline underline-offset-2 hover:text-white"
             >
               Retry
             </button>
@@ -250,7 +250,7 @@ export function PreviewOverlays({
               type="button"
               onClick={() => useCaptionStore.getState().setSyncError(null)}
               aria-label="Dismiss"
-              className="rounded px-0.5 text-2xs text-red-300/70 hover:text-red-100"
+              className="rounded-sm px-0.5 text-2xs text-red-300/70 hover:text-red-100"
             >
               ✕
             </button>
@@ -338,7 +338,7 @@ export function PreviewOverlays({
         <button
           type="button"
           onClick={enterCaptionMode}
-          className="absolute top-2 left-1/2 -translate-x-1/2 z-[60] rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-studio-accent focus-visible:outline focus-visible:outline-1 focus-visible:outline-studio-accent"
+          className="absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-studio-accent focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent"
         >
           Edit captions
         </button>