@hyperframes/studio 0.8.134 → 0.8.135

package/dist/ui.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ButtonHTMLAttributes, ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
-import * as node_modules_cn_dist_types from 'node_modules/cn/dist/types';
+import { CnFunction } from 'cn';
 import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
 import { Menu as Menu$1 } from '@base-ui/react/menu';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
@@ -101,7 +101,8 @@ declare function Tooltip({ label, children, delay, side }: TooltipProps): react_
  * Studio's tailwind-merge config: teaches it the two scales `theme.css`
  * invents (`text-step-*`, `ctl`/`ctl-sm`/`ctl-lg`) so overrides replace, not stack.
  */
-declare const cn: node_modules_cn_dist_types.CnFunction;
+
+declare const cn: CnFunction;
 
 /**
  * Base UI lets `className` be a function of the part's state. Studio's parts

package/dist/ui.js

@@ -30,7 +30,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-5VSXRGIX.js";
+} from "./chunk-NM7BXNZ7.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.134",
+  "version": "0.8.135",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/sdk": "0.8.134",
-    "@hyperframes/core": "0.8.134",
-    "@hyperframes/studio-server": "0.8.134",
-    "@hyperframes/parsers": "0.8.134",
-    "@hyperframes/player": "0.8.134",
-    "@hyperframes/shader-transitions": "0.8.134"
+    "@hyperframes/core": "0.8.135",
+    "@hyperframes/player": "0.8.135",
+    "@hyperframes/shader-transitions": "0.8.135",
+    "@hyperframes/parsers": "0.8.135",
+    "@hyperframes/studio-server": "0.8.135",
+    "@hyperframes/sdk": "0.8.135"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.134"
+    "@hyperframes/producer": "0.8.135"
   },
   "peerDependencies": {
     "react": "19",

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

@@ -149,6 +149,66 @@ function restoreScrollIntoView(descriptor: PropertyDescriptor | undefined): void
 }
 
 describe("AnimationCard", () => {
+  it("heads a keyframed card with the segment ease and names the run ease on its own line", () => {
+    const view = renderFocusCard(null, vi.fn(), true);
+    expect(view.host.querySelector("[data-card-ease]")?.textContent).toBe("power1.inOut");
+    expect(view.host.querySelector("[data-card-run-ease]")?.textContent).toBe(
+      "Run ease: power1.out",
+    );
+    act(() => view.root.unmount());
+  });
+
+  it("heads a keyframed card Mixed when its segments differ, with no run line for a linear run", () => {
+    const animation: GsapAnimation = {
+      ...ANIMATION,
+      ease: undefined,
+      keyframes: {
+        format: "percentage",
+        keyframes: [
+          { percentage: 0, properties: { x: 0 } },
+          { percentage: 50, properties: { x: 100 }, ease: "expo.in" },
+          { percentage: 100, properties: { x: 200 } },
+        ],
+      },
+    };
+    const view = renderFocusCard(null, vi.fn(), true, animation);
+    expect(view.host.querySelector("[data-card-ease]")?.textContent).toBe("Mixed");
+    expect(view.host.querySelector("[data-card-run-ease]")).toBeNull();
+    act(() => view.root.unmount());
+  });
+
+  it("labels segments with rounded percentages, never float noise or exponents", () => {
+    const animation: GsapAnimation = {
+      ...ANIMATION,
+      keyframes: {
+        format: "percentage",
+        keyframes: [
+          { percentage: 0, properties: { x: 0 } },
+          { percentage: 1.2860082304526747e-7, properties: { x: 1 } },
+          { percentage: 0.13484773662551455, properties: { x: 2 } },
+          { percentage: 100, properties: { x: 200 } },
+        ],
+      },
+    };
+    const view = renderFocusCard(null, vi.fn(), true, animation);
+    const labels = [
+      ...view.host.querySelectorAll("[data-ease-segment-pct] button span:first-child"),
+    ];
+    expect(labels.map((label) => label.textContent)).toEqual([
+      "0% → <0.001%",
+      "<0.001% → 0.135%",
+      "0.135% → 100%",
+    ]);
+    act(() => view.root.unmount());
+  });
+
+  it("labels an unset segment with the ease GSAP plays, not the tween's run ease", () => {
+    const view = renderFocusCard(null, vi.fn(), true);
+    const labels = [...view.host.querySelectorAll("[data-ease-segment-pct] button span.ml-auto")];
+    expect(labels.map((label) => label.textContent)).toEqual(["power1.inOut", "power1.inOut"]);
+    act(() => view.root.unmount());
+  });
+
   it("scrolls a focused segment into view but not a manually toggled segment", () => {
     const originalScrollIntoView = Object.getOwnPropertyDescriptor(
       HTMLElement.prototype,

package/src/components/editor/AnimationCard.tsx

@@ -6,7 +6,8 @@ import { RESPONSIVE_GRID } from "./propertyPanelHelpers";
 import { MetricField, SelectField } from "./propertyPanelPrimitives";
 import { controlPointsForGsapEase } from "./studioMotion";
 import { EASE_LABELS, METHOD_LABELS, METHOD_TOOLTIPS, PROP_LABELS } from "./gsapAnimationConstants";
-import { buildTweenSummary } from "./gsapAnimationHelpers";
+import { buildTweenSummary, uniformSegmentEase } from "./gsapAnimationHelpers";
+import { keyframedTweenEases } from "../../utils/gsapKeyframeEases";
 import { EaseCurveSection } from "./EaseCurveSection";
 import { ArcPathControls } from "./ArcPathControls";
 import type { GsapAnimationEditCallbacks } from "./gsapAnimationCallbacks";
@@ -31,6 +32,9 @@ interface AnimationCardProps extends GsapAnimationEditCallbacks {
   onFocusSegmentConsumed?: () => void;
 }
 
+const easeDisplayName = (ease: string) =>
+  ease.startsWith("custom(") ? "Custom curve" : (EASE_LABELS[ease] ?? ease);
+
 // fallow-ignore-next-line complexity
 export const AnimationCard = memo(function AnimationCard({
   animation,
@@ -152,9 +156,9 @@ export const AnimationCard = memo(function AnimationCard({
   const methodLabel = METHOD_LABELS[animation.method] ?? animation.method;
   const easeName =
     (animation.keyframes ? animation.keyframes.easeEach : undefined) ?? animation.ease ?? "none";
-  const easeLabel = easeName.startsWith("custom(")
-    ? "Custom curve"
-    : (EASE_LABELS[easeName] ?? easeName);
+  const headerEase = animation.keyframes ? uniformSegmentEase(animation) : easeName;
+  const easeLabel = headerEase === null ? "Mixed" : easeDisplayName(headerEase);
+  const runEase = animation.keyframes ? keyframedTweenEases(animation).run : undefined;
   const endTime =
     typeof animation.position === "number"
       ? animation.position + (animation.duration ?? 0)
@@ -217,7 +221,8 @@ export const AnimationCard = memo(function AnimationCard({
         </span>
         <span
           className={`ml-auto text-[10px] ${flat ? "text-panel-text-3" : "text-neutral-500"}`}
-          title={easeName}
+          title={headerEase ?? "Mixed"}
+          data-card-ease
         >
           {easeLabel}
         </span>
@@ -254,6 +259,11 @@ export const AnimationCard = memo(function AnimationCard({
                     Keyframed — click a segment below to edit its curve
                   </p>
                 )}
+                {runEase && runEase !== "none" && (
+                  <p className="mt-1 text-[9px] text-neutral-500" data-card-run-ease>
+                    Run ease: {easeDisplayName(runEase)}
+                  </p>
+                )}
               </div>
               <button
                 type="button"
@@ -296,7 +306,7 @@ export const AnimationCard = memo(function AnimationCard({
                 {animation.keyframes && onUpdateKeyframeEase ? (
                   <KeyframeEaseList
                     keyframes={animation.keyframes.keyframes}
-                    globalEase={animation.keyframes.easeEach ?? animation.ease ?? "none"}
+                    globalEase={keyframedTweenEases(animation).segment({})}
                     expandedPct={expandedKfPct}
                     collidingAnimationTargets={focusedCollidingAnimationTargets}
                     onToggle={(pct) => {

package/src/components/editor/KeyframeEaseList.tsx

@@ -1,6 +1,7 @@
 import type { GsapPercentageKeyframe } from "@hyperframes/core/gsap-parser";
 import { EASE_LABELS } from "./gsapAnimationConstants";
 import { EaseCurveSection } from "./EaseCurveSection";
+import { roundTo3 } from "../../utils/rounding";
 import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
 
 // The full GSAP easing vocabulary offered by the "Set all…" bulk control —
@@ -41,6 +42,8 @@ const APPLY_ALL_EASES = [
   "bounce.inOut",
 ] as const;
 
+const percentLabel = (pct: number) => (pct > 0 && pct < 0.001 ? "<0.001" : String(roundTo3(pct)));
+
 export function KeyframeEaseList({
   keyframes,
   globalEase,
@@ -91,7 +94,7 @@ export function KeyframeEaseList({
         if (i === 0) return null;
         const segEase = kf.ease ?? globalEase;
         const isExpanded = expandedPct === kf.percentage;
-        const label = `${keyframes[i - 1].percentage}% → ${kf.percentage}%`;
+        const label = `${percentLabel(keyframes[i - 1].percentage)}% → ${percentLabel(kf.percentage)}%`;
         const easeLabel = segEase.startsWith("custom(")
           ? "Custom"
           : (EASE_LABELS[segEase] ?? segEase);

package/src/components/editor/LayersPanel.tsx

@@ -20,7 +20,17 @@ import {
   findMatchingTimelineElementId,
   resolveTimelineSelectionSeekTime,
 } from "../../utils/studioHelpers";
-import { Layers } from "../../icons/SystemIcons";
+import {
+  Film,
+  Folder,
+  ImageIcon,
+  Layers,
+  Music,
+  Square,
+  Type,
+  Vector,
+} from "../../icons/SystemIcons";
+import { isCompositionHost, layerKindOf } from "./layerKind";
 import { useLayerDrag, isLayerDraggable, type LayerReorderEvent } from "./useLayerDrag";
 import { getVisibleLayers, sortLayersByZIndex } from "./layersPanelSort";
 import { deriveTimelineStoreKey } from "../../player/lib/timelineElementHelpers";
@@ -34,38 +44,18 @@ import { useLayerRevealOverride } from "./useLayerRevealOverride";
 // Rows this panel renders before it stops. A display budget, not a document limit.
 const LAYERS_PANEL_MAX_ROWS = 80;
 
-const TAG_ICONS: Record<string, string> = {
-  video: "Vi",
-  audio: "Au",
-  img: "Im",
-  svg: "Sv",
-  canvas: "Cn",
-  div: "Di",
-  section: "Se",
-  span: "Sp",
-  p: "P",
-  h1: "H1",
-  h2: "H2",
-  h3: "H3",
-  h4: "H4",
-  h5: "H5",
-  h6: "H6",
-  a: "A",
-  button: "Bt",
-  ul: "Ul",
-  ol: "Ol",
-  li: "Li",
-  style: "St",
-  template: "Te",
-};
-
-function getTagBadge(tagName: string): string {
-  return TAG_ICONS[tagName] ?? tagName.slice(0, 2).toUpperCase();
-}
+const [CARET, ICON, GAP] = [16, 20, 6];
+const CHILD_INDENT = CARET + GAP + ICON + GAP;
 
-function isCompositionHost(el: HTMLElement): boolean {
-  return el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
-}
+const KIND_ICON = {
+  image: ImageIcon,
+  video: Film,
+  audio: Music,
+  vector: Vector,
+  group: Folder,
+  text: Type,
+  shape: Square,
+} as const;
 
 /**
  * A trailing-rAF + cooldown throttle: `invoke` runs `run` at most once per
@@ -452,7 +442,7 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
           <button
             type="button"
             onClick={() => setActiveGroupElement(null)}
-            className="flex w-full items-center gap-1.5 px-2 py-1 text-left text-[11px] text-panel-text-3 hover:bg-panel-hover/40 hover:text-panel-text-1"
+            className="mx-1 flex w-[calc(100%-0.5rem)] items-center gap-1.5 rounded-md px-2 py-1 text-left text-[11px] text-panel-text-3 hover:bg-panel-hover/40 hover:text-panel-text-1"
           >
             <span aria-hidden="true">←</span>
             <span className="truncate">
@@ -467,6 +457,14 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
           const isCollapsed = collapsed[layer.key] ?? false;
           const hasChildren = layer.childCount > 0;
           const isCompHost = isCompositionHost(layer.element);
+          const kind = layerKindOf(layer.element, hasChildren);
+          const KindIcon = KIND_ICON[kind];
+          const kindName = kind[0].toUpperCase() + kind.slice(1);
+          const hint = draggable
+            ? layer.element.hasAttribute("data-hf-group")
+              ? "Double-click to enter group"
+              : undefined
+            : "This layer can't be reordered";
 
           return (
             <div
@@ -484,21 +482,15 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
                   handleSelectLayer(layer);
                 }
               }}
-              className={`group flex w-full items-center gap-1.5 px-2 py-1 text-left transition-colors ${
+              className={`group mx-1 flex items-center gap-1.5 rounded-md px-2 py-1 text-left transition-colors ${
                 isDragged
                   ? "opacity-40"
                   : selected
                     ? "bg-panel-accent/14 text-accent-ink"
                     : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"
               } ${dragKey ? "cursor-grabbing" : "cursor-pointer"}`}
-              style={{ paddingLeft: 8 + layer.depth * 16 }}
-              title={
-                draggable
-                  ? layer.element.hasAttribute("data-hf-group")
-                    ? "Double-click to enter group"
-                    : undefined
-                  : "This layer can't be reordered"
-              }
+              style={{ paddingLeft: 8 + layer.depth * CHILD_INDENT }}
+              title={hint}
             >
               {hasChildren ? (
                 <button
@@ -518,11 +510,11 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
                     <path d="M2 1l4 3-4 3z" />
                   </svg>
                 </button>
-              ) : (
-                <span className="w-4 shrink-0" />
-              )}
+              ) : null}
               <span
-                className={`flex h-5 w-5 shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${
+                data-layer-kind={kind}
+                title={hint ? `${kindName} · ${hint}` : kindName}
+                className={`flex h-5 w-5 shrink-0 items-center justify-center rounded ${
                   selected
                     ? "bg-panel-accent/18 text-accent-ink"
                     : isCompHost
@@ -530,7 +522,7 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
                       : "bg-panel-hover text-panel-text-4"
                 }`}
               >
-                {getTagBadge(layer.tagName)}
+                <KindIcon size={12} />
               </span>
               <span className="min-w-0 flex-1 truncate text-[11px]">{layer.label}</span>
               {hasChildren && (

package/src/components/editor/domEditInlineText.ts

@@ -53,7 +53,7 @@ export function canEditElementTextInline(element: HTMLElement | null): boolean {
   return (element.textContent ?? "").trim().length > 0;
 }
 
-function hasOnlyFormattingChildren(element: HTMLElement): boolean {
+export function hasOnlyFormattingChildren(element: HTMLElement): boolean {
   for (const child of Array.from(element.children)) {
     if (!isRichTextFormattingTag(child.tagName)) return false;
     if (!isHtmlFromAnyWindow(child)) return false;

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

@@ -52,6 +52,35 @@ describe("buildTweenSummary", () => {
     expect(s).toContain("opacity");
   });
 
+  it("describes a keyframed tween by its keyframes and the segment ease it plays", () => {
+    const keyframes = {
+      easeEach: "power3.out",
+      keyframes: [
+        { percentage: 0, properties: { x: 0 } },
+        { percentage: 50, properties: { x: 300, opacity: 0.5 } },
+        { percentage: 100, properties: { x: 600 } },
+      ],
+    };
+    expect(buildTweenSummary(anim({ ease: undefined, keyframes } as Partial<GsapAnimation>))).toBe(
+      "Starting at 0s, over 1s, animate #box's move x, opacity through 3 keyframes, each segment eased power3.out.",
+    );
+  });
+
+  it("names a keyframed tween's run ease and mixed segment eases", () => {
+    const keyframes = {
+      keyframes: [
+        { percentage: 0, properties: { x: 0 } },
+        { percentage: 50, properties: { x: 300 }, ease: "expo.in" },
+        { percentage: 100, properties: { x: 600 } },
+      ],
+    };
+    expect(
+      buildTweenSummary(anim({ ease: "sine.inOut", keyframes } as Partial<GsapAnimation>)),
+    ).toBe(
+      "Starting at 0s, over 1s, animate #box's move x through 3 keyframes, with per-keyframe easing, across a sine.inOut run.",
+    );
+  });
+
   it("describes a set tween", () => {
     const s = buildTweenSummary(anim({ method: "set", properties: { opacity: 0 } }));
     expect(s).toMatch(/^At 0s, instantly set/);

package/src/components/editor/gsapAnimationHelpers.ts

@@ -1,5 +1,6 @@
 import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import { EASE_LABELS, PERCENT_PROPS, PROP_LABELS, PROP_UNITS } from "./gsapAnimationConstants";
+import { keyframedTweenEases } from "../../utils/gsapKeyframeEases";
 
 function formatPropValue(prop: string, v: number | string): string {
   const unit = PROP_UNITS[prop] ?? "";
@@ -7,6 +8,38 @@ function formatPropValue(prop: string, v: number | string): string {
   return `${v}${unit}`;
 }
 
+const easeLabel = (ease: string) =>
+  ease.startsWith("custom(") ? "custom" : (EASE_LABELS[ease] ?? ease);
+
+export function uniformSegmentEase(animation: GsapAnimation): string | null {
+  const eases = keyframedTweenEases(animation);
+  const steps = animation.keyframes?.keyframes ?? [];
+  const segmentEases = new Set(steps.slice(1).map((kf) => eases.segment(kf)));
+  if (segmentEases.size === 0) return eases.segment({});
+  return segmentEases.size === 1 ? [...segmentEases][0]! : null;
+}
+
+function keyframedTweenSummary(
+  animation: GsapAnimation,
+  pos: number | string,
+  dur: number,
+): string {
+  const steps = animation.keyframes?.keyframes ?? [];
+  const props = [...new Set(steps.flatMap((kf) => Object.keys(kf.properties)))];
+  const propText = props.map((p) => (PROP_LABELS[p] ?? p).toLowerCase()).join(", ");
+  const segmentEase = uniformSegmentEase(animation);
+  const segmentText =
+    steps.length < 2
+      ? ""
+      : segmentEase
+        ? `, each segment eased ${easeLabel(segmentEase)}`
+        : ", with per-keyframe easing";
+  const run = keyframedTweenEases(animation).run;
+  const runText = run && run !== "none" ? `, across a ${easeLabel(run)} run` : "";
+  const count = `${steps.length} keyframe${steps.length === 1 ? "" : "s"}`;
+  return `Starting at ${pos}s, over ${dur}s, animate ${animation.targetSelector}'s ${propText || "no properties yet"} through ${count}${segmentText}${runText}.`;
+}
+
 // fallow-ignore-next-line complexity
 export function buildTweenSummary(animation: GsapAnimation): string {
   const easeName = animation.ease ?? "none";
@@ -16,6 +49,7 @@ export function buildTweenSummary(animation: GsapAnimation): string {
   const dur = animation.duration ?? 0;
   const rawPos = animation.position;
   const pos = typeof rawPos === "number" ? parseFloat(rawPos.toFixed(3)) : rawPos;
+  if (animation.keyframes) return keyframedTweenSummary(animation, pos, dur);
   const propDescs = props.map(([p, v]) => {
     const label = (PROP_LABELS[p] ?? p).toLowerCase();
     return `${label} to ${formatPropValue(p, v)}`;

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

@@ -0,0 +1,38 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import { layerKindOf } from "./layerKind";
+
+const el = (html: string) => {
+  const host = document.createElement("div");
+  host.innerHTML = html;
+  return host.firstElementChild!;
+};
+
+describe("layerKindOf", () => {
+  it.each([
+    ['<img src="a.png">', "image"],
+    ['<picture><img src="a.png"></picture>', "image"],
+    ['<video src="a.mp4"></video>', "video"],
+    ['<audio src="a.mp3"></audio>', "audio"],
+    ['<svg viewBox="0 0 10 10"><path d="M0 0h10"/></svg>', "vector"],
+    ['<div data-hf-group="Intro"><div></div></div>', "group"],
+    ['<div data-composition-src="intro.html"></div>', "group"],
+    ['<div data-composition-file="intro.html"></div>', "group"],
+    ["<h1>Title</h1>", "text"],
+    ["<div>Plain words</div>", "text"],
+    ["<p>Rich <b>bold</b> and <em>soft</em> words</p>", "text"],
+    ['<div style="background:red"></div>', "shape"],
+    ["<div><img></div>", "shape"],
+    ["<div>Caption<img></div>", "shape"],
+    ["<p>H<sub>2</sub>O</p>", "shape"],
+    ["<div>   </div>", "shape"],
+    ["<canvas></canvas>", "shape"],
+  ])("%s is %s", (html, kind) => {
+    expect(layerKindOf(el(html), false)).toBe(kind);
+  });
+});
+
+it("a row with layer children is a group unless it is text", () => {
+  expect(layerKindOf(el("<div><div></div></div>"), true)).toBe("group");
+  expect(layerKindOf(el('<p>Hi <span class="x">there</span></p>'), true)).toBe("text");
+});

package/src/components/editor/layerKind.ts

@@ -0,0 +1,19 @@
+import { hasOnlyFormattingChildren } from "./domEditInlineText";
+
+export type LayerKind = "image" | "video" | "audio" | "vector" | "group" | "text" | "shape";
+
+export function isCompositionHost(el: Element): boolean {
+  return el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
+}
+
+/** What a Layers row tells a person an element is: its media tag, a group, text, or else a shape. */
+export function layerKindOf(el: Element, hasChildren: boolean): LayerKind {
+  const tag = el.tagName.toLowerCase();
+  if (tag === "img" || tag === "picture") return "image";
+  if (tag === "video") return "video";
+  if (tag === "audio") return "audio";
+  if (tag === "svg") return "vector";
+  if (el.hasAttribute("data-hf-group") || isCompositionHost(el)) return "group";
+  if (hasOnlyFormattingChildren(el as HTMLElement) && el.textContent?.trim()) return "text";
+  return hasChildren ? "group" : "shape";
+}

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

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 import { trackStudioEvent } from "../../utils/studioTelemetry";
 // @vitest-environment happy-dom
 import React, { act } from "react";
@@ -7,7 +8,11 @@ import { installReactActEnvironment, makeSelection } from "../../hooks/domSelect
 import { useDomEditNudge, type UseDomEditNudgeParams } from "./useDomEditNudge";
 import { CANVAS_NUDGE_COMMIT_DEBOUNCE_MS, CANVAS_NUDGE_STEP_PX } from "./domEditNudge";
 import { __resetForTests } from "../../utils/canvasNudgeGate";
-import { flushStudioPendingEdits, hasStudioPendingEdits } from "../../utils/studioPendingEdits";
+import {
+  flushStudioPendingEdits,
+  hasStudioPendingEdits,
+  trackedStudioEdit,
+} from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
 import type { OverlayRect } from "./domEditOverlayGeometry";
 
@@ -392,23 +397,32 @@ describe("useDomEditNudge pauses playback before it snapshots the timelines", ()
   });
 });
 
+/** A burst-ready Harness on a fresh element, under fake timers. */
+function mountBurstHarness(
+  id: string,
+  onPathOffsetCommit: UseDomEditNudgeParams["onPathOffsetCommitRef"]["current"],
+) {
+  __resetForTests();
+  vi.useFakeTimers();
+  const root = createRoot(document.body.appendChild(document.createElement("div")));
+  const element = document.body.appendChild(document.createElement("div"));
+  element.id = id;
+  act(() => {
+    root.render(
+      React.createElement(Harness, {
+        selection: makeSelection("Dot", element),
+        onPathOffsetCommit,
+      }),
+    );
+  });
+  return root;
+}
+
 describe("useDomEditNudge — undo right after a burst", () => {
   it("undo's drain commits a burst still inside its debounce and waits for its save", async () => {
-    __resetForTests();
-    vi.useFakeTimers();
-    const root = createRoot(document.body.appendChild(document.createElement("div")));
-    const element = document.body.appendChild(document.createElement("div"));
-    element.id = "dot-undo";
     let saved!: () => void;
     const commit = vi.fn(() => new Promise<void>((resolve) => (saved = resolve)));
-    act(() => {
-      root.render(
-        React.createElement(Harness, {
-          selection: makeSelection("Dot", element),
-          onPathOffsetCommit: commit,
-        }),
-      );
-    });
+    const root = mountBurstHarness("dot-undo", commit);
     act(() => dispatchArrowRight());
 
     let drained = false;
@@ -424,21 +438,9 @@ describe("useDomEditNudge — undo right after a burst", () => {
   });
 
   it("counts the burst as a pending edit from its first key until its save lands", async () => {
-    __resetForTests();
-    vi.useFakeTimers();
-    const root = createRoot(document.body.appendChild(document.createElement("div")));
-    const element = document.body.appendChild(document.createElement("div"));
-    element.id = "dot-pending";
     let saved!: () => void;
     const commit = vi.fn(() => new Promise<void>((resolve) => (saved = resolve)));
-    act(() => {
-      root.render(
-        React.createElement(Harness, {
-          selection: makeSelection("Dot", element),
-          onPathOffsetCommit: commit,
-        }),
-      );
-    });
+    const root = mountBurstHarness("dot-pending", commit);
     expect(hasStudioPendingEdits()).toBe(false);
     act(() => dispatchArrowRight());
     expect(hasStudioPendingEdits()).toBe(true);
@@ -452,6 +454,25 @@ describe("useDomEditNudge — undo right after a burst", () => {
   });
 });
 
+describe("useDomEditNudge — a Design-panel edit during a burst", () => {
+  it("commits the burst before the panel edit, so one undo takes back the panel edit", async () => {
+    const order: string[] = [];
+    const root = mountBurstHarness("dot-panel", async () => void order.push("nudge"));
+    try {
+      act(() => dispatchArrowRight());
+      const panelEdit = trackedStudioEdit(async () => void order.push("width"), {
+        afterOlderSaves: true,
+      })();
+      vi.useRealTimers();
+      await panelEdit;
+      expect(order).toEqual(["nudge", "width"]);
+    } finally {
+      vi.useRealTimers();
+      act(() => root.unmount());
+    }
+  });
+});
+
 describe("useDomEditNudge — a commit that throws", () => {
   it("still ends the burst's pending edit, so undo and export never wait on it", async () => {
     __resetForTests();

package/src/components/ui/cn.ts

@@ -3,6 +3,7 @@
  * invents (`text-step-*`, `ctl`/`ctl-sm`/`ctl-lg`) so overrides replace, not stack.
  */
 
+import type { CnFunction } from "cn";
 import { createCn } from "cn/config";
 
 /** `text-step-11`, `text-step-9`, … — the type scale from `theme.css`. */
@@ -11,7 +12,7 @@ const isTypeStep = (value: string) => /^step-\d+$/.test(value);
 /** `ctl`, `ctl-sm`, `ctl-lg` — the control heights from `theme.css`. */
 const isControlSize = (value: string) => /^ctl(-sm|-lg)?$/.test(value);
 
-export const cn = createCn({
+export const cn: CnFunction = createCn({
   extend: {
     classGroups: {
       "font-size": [{ text: [isTypeStep] }],

package/src/contexts/DomEditContext.tsx

@@ -107,7 +107,9 @@ function trackEditCommits(actions: DomEditActionsValue): DomEditActionsValue {
   const tracked: Record<string, unknown> = { ...actions };
   for (const key of Object.keys(SAVES_AN_EDIT) as Array<keyof typeof SAVES_AN_EDIT>) {
     if (!SAVES_AN_EDIT[key]) continue;
-    tracked[key] = trackedStudioEdit(actions[key] as (...args: unknown[]) => unknown);
+    tracked[key] = trackedStudioEdit(actions[key] as (...args: unknown[]) => unknown, {
+      afterOlderSaves: true,
+    });
   }
   return tracked as unknown as DomEditActionsValue;
 }