@hyperframes/studio 0.7.60 → 0.7.62

package/src/components/editor/propertyPanelFlatStyleHelpers.ts

@@ -12,16 +12,3 @@ export const STROKE_STYLE_OPTIONS: string[] = [
   "inset",
   "outset",
 ];
-
-export function formatStrokeSummary(widthPx: number, style: string): string {
-  return `${widthPx}px ${style}`;
-}
-
-export function parseStrokeSummary(text: string): { widthPx: number; style: string } | null {
-  const match = /^\s*(-?\d+(?:\.\d+)?)px\s+(\S+)\s*$/.exec(text);
-  if (!match) return null;
-  const widthPx = Number.parseFloat(match[1]);
-  const style = match[2];
-  if (!Number.isFinite(widthPx) || !style) return null;
-  return { widthPx, style };
-}

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

@@ -175,31 +175,43 @@ function setInputValue(input: HTMLInputElement, nextValue: string) {
 }
 
 describe("FlatStyleSection — Stroke and Radius", () => {
-  it("renders the combined stroke row and commits width+style together on blur", () => {
+  it("renders a width-only Stroke width row — style is only ever set through the Stroke style select below it", () => {
     const { host, root } = renderSection(STROKE_STYLES);
-    expect(host.textContent).toContain("Stroke");
-    expect(getFlatRowInput(host, "Stroke").value).toBe("1px solid");
+    expect(host.textContent).toContain("Stroke width");
+    expect(host.textContent).toContain("Stroke style");
+    expect(getFlatRowInput(host, "Stroke width").value).toBe("1px");
     act(() => root.unmount());
   });
 
-  it("commits the stroke row's new width and style together on blur", async () => {
+  it("commits a new stroke width without touching the existing style", async () => {
     const { host, root, onSetStyle } = renderSection(STROKE_STYLES);
-    await commitFlatRowInput(host, "Stroke", "2px dashed");
+    await commitFlatRowInput(host, "Stroke width", "2px");
     expect(onSetStyle).toHaveBeenCalledWith("border-width", "2px");
-    expect(onSetStyle).toHaveBeenCalledWith("border-style", "dashed");
+    expect(onSetStyle).not.toHaveBeenCalledWith("border-style", expect.anything());
+    act(() => root.unmount());
+  });
+
+  it("defaults a from-zero width commit to solid, since a width with no style renders no visible border", async () => {
+    const { host, root, onSetStyle } = renderSection({
+      "border-width": "0px",
+      "border-style": "none",
+      "border-color": "rgba(255,255,255,.12)",
+    });
+    await commitFlatRowInput(host, "Stroke width", "3px");
+    expect(onSetStyle).toHaveBeenCalledWith("border-style", "solid");
     act(() => root.unmount());
   });
 
   it("clamps an out-of-range stroke width commit to 200px (fix 2)", async () => {
     const { host, root, onSetStyle } = renderSection(STROKE_STYLES);
-    await commitFlatRowInput(host, "Stroke", "9999px solid");
+    await commitFlatRowInput(host, "Stroke width", "9999px");
     expect(onSetStyle).toHaveBeenCalledWith("border-width", "200px");
     act(() => root.unmount());
   });
 
-  it("rejects a stroke commit whose style token is not a valid border-style (fix 2)", async () => {
+  it("ignores an unparseable stroke width commit", async () => {
     const { host, root, onSetStyle } = renderSection(STROKE_STYLES);
-    await commitFlatRowInput(host, "Stroke", "12px bogus");
+    await commitFlatRowInput(host, "Stroke width", "bogus");
     expect(onSetStyle).not.toHaveBeenCalled();
     act(() => root.unmount());
   });
@@ -226,7 +238,11 @@ describe("FlatStyleSection — Stroke and Radius", () => {
       (input) => !host.contains(input),
     );
     if (!hexInput) throw new Error("expected the color picker's hex input");
-    act(() => setInputValue(hexInput, "#112233"));
+    act(() => {
+      setInputValue(hexInput, "#112233");
+      hexInput.focus();
+      hexInput.blur();
+    });
     expect(onSetStyle).toHaveBeenCalledWith("border-color", "rgb(17, 34, 51)");
     act(() => root.unmount());
   });

package/src/components/editor/propertyPanelFlatStyleSections.tsx

@@ -3,11 +3,7 @@ import { useEffect, useState } from "react";
 import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
 import { buildDefaultGradientModel, serializeGradient } from "./gradientValue";
 import { BorderRadiusEditor } from "./BorderRadiusEditor";
-import {
-  formatStrokeSummary,
-  parseStrokeSummary,
-  STROKE_STYLE_OPTIONS,
-} from "./propertyPanelFlatStyleHelpers";
+import { STROKE_STYLE_OPTIONS } from "./propertyPanelFlatStyleHelpers";
 import {
   buildBoxShadowPresetValue,
   buildClipPathValue,
@@ -47,6 +43,7 @@ function FlatFillFields({
   styles,
   assets,
   onSetStyle,
+  onPreviewStyle,
   onImportAssets,
 }: {
   projectId: string;
@@ -54,6 +51,7 @@ function FlatFillFields({
   styles: Record<string, string>;
   assets: string[];
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
+  onPreviewStyle?: (prop: string, value: string) => void;
   onImportAssets?: (files: FileList) => Promise<string[]>;
 }) {
   const styleEditingDisabled = !element.capabilities.canEditStyles;
@@ -109,6 +107,7 @@ function FlatFillFields({
           label="Color"
           value={styles["background-color"] ?? "transparent"}
           disabled={styleEditingDisabled}
+          onPreview={(next) => onPreviewStyle?.("background-color", next)}
           onCommit={(next) => onSetStyle("background-color", next)}
         />
       ) : preferredFillMode === "Gradient" ? (
@@ -147,10 +146,9 @@ function FlatFillFields({
 }
 
 /* ------------------------------------------------------------------ */
-/*  Flat Stroke row — combined width+style+color                       */
+/*  Flat Stroke row — width (numeric), style (select), color           */
 /* ------------------------------------------------------------------ */
 
-// fallow-ignore-next-line complexity
 function FlatStrokeRow({
   styles,
   disabled,
@@ -167,52 +165,40 @@ function FlatStrokeRow({
   const borderStyleValue = styles["border-style"] || styles["border-top-style"] || "none";
   const borderColorValue =
     styles["border-color"] || styles["border-top-color"] || "rgba(255, 255, 255, 0.18)";
-  const summary = formatStrokeSummary(borderWidthValue, borderStyleValue);
-  const tier = resolveValueTier(
-    styles["border-width"] != null || styles["border-style"] != null ? summary : undefined,
-    formatStrokeSummary(0, "none"),
-  );
+  const widthDisplay = formatPxMetricValue(borderWidthValue);
 
   return (
     <>
       <FlatRow
-        label="Stroke"
-        value={summary}
-        tier={tier}
+        label="Stroke width"
+        value={widthDisplay}
+        tier={resolveValueTier(styles["border-width"], "0px")}
         disabled={disabled}
         onCommit={async (next) => {
-          const parsed = parseStrokeSummary(next);
-          if (!parsed) return;
-          if (!STROKE_STYLE_OPTIONS.includes(parsed.style)) return;
-          const normalizedWidth = normalizePanelPxValue(`${parsed.widthPx}px`, {
+          const normalizedWidth = normalizePanelPxValue(next, {
             min: 0,
             max: 200,
             fallback: borderWidthValue,
           });
           if (!normalizedWidth) return;
+          // buildStrokeWidthStyleUpdates already covers "a width typed in
+          // from 0 needs a style to actually render a visible border" —
+          // it only defaults to solid when the current style is none/hidden,
+          // never clobbering an already-chosen style (dashed, dotted, …).
           for (const [property, value] of buildStrokeWidthStyleUpdates(
             normalizedWidth,
-            parsed.style,
+            borderStyleValue,
           )) {
             await onSetStyle(property, value);
           }
-          for (const [property, value] of buildStrokeStyleUpdates(parsed.style, normalizedWidth)) {
-            await onSetStyle(property, value);
-          }
         }}
-        suffix={
-          <>
-            <span
-              className="h-4 w-4 flex-shrink-0 rounded border border-panel-border-input"
-              style={{ backgroundColor: borderColorValue }}
-            />
-            <span className="font-mono text-[10px] text-panel-text-3">{borderColorValue}</span>
-          </>
-        }
       />
       <FlatSelectRow
         label="Stroke style"
         value={borderStyleValue}
+        // Valid border-style keywords — the ONLY way to set this, since a
+        // free-text field here would require typing an exact CSS keyword
+        // (e.g. "dashed") with no indication of which ones are valid.
         options={STROKE_STYLE_OPTIONS}
         tier={resolveValueTier(styles["border-style"], "none")}
         disabled={disabled}
@@ -470,6 +456,7 @@ export function FlatStyleSection({
   styles,
   assets,
   onSetStyle,
+  onPreviewStyle,
   onImportAssets,
   gsapBorderRadius,
 }: {
@@ -478,6 +465,7 @@ export function FlatStyleSection({
   styles: Record<string, string>;
   assets: string[];
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
+  onPreviewStyle?: (prop: string, value: string) => void;
   onImportAssets?: (files: FileList) => Promise<string[]>;
   gsapBorderRadius?: { tl: number; tr: number; br: number; bl: number } | null;
 }) {
@@ -490,6 +478,7 @@ export function FlatStyleSection({
         styles={styles}
         assets={assets}
         onSetStyle={onSetStyle}
+        onPreviewStyle={onPreviewStyle}
         onImportAssets={onImportAssets}
       />
       <FlatStrokeRow styles={styles} disabled={styleEditingDisabled} onSetStyle={onSetStyle} />

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

@@ -2,6 +2,8 @@
 
 import React, { act, useState } from "react";
 import { createRoot } from "react-dom/client";
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { FlatTextLayerList, FlatTextSection } from "./propertyPanelFlatTextSection";
 import type { DomEditSelection, DomEditTextField } from "./domEditingTypes";
@@ -256,8 +258,9 @@ describe("FlatTextFieldEditor controls", () => {
     act(() => root.unmount());
   });
 
-  it("live-commits the Size field on input, without requiring blur/Enter", async () => {
+  it("previews Size input immediately and persists once on blur", () => {
     const onSetTextFieldStyle = vi.fn();
+    const onPreviewTextFieldStyle = vi.fn();
     const { host, root } = renderInto(
       <FlatTextSection
         element={makeSingleFieldElement()}
@@ -265,6 +268,7 @@ describe("FlatTextFieldEditor controls", () => {
         fontAssets={[]}
         onSetText={vi.fn()}
         onSetTextFieldStyle={onSetTextFieldStyle}
+        onPreviewTextFieldStyle={onPreviewTextFieldStyle}
         onAddTextField={vi.fn()}
         onRemoveTextField={vi.fn()}
       />,
@@ -275,6 +279,7 @@ describe("FlatTextFieldEditor controls", () => {
     const input = sizeLabel?.parentElement?.querySelector<HTMLInputElement>("input");
     if (!input) throw new Error("expected the Size row's input");
     act(() => {
+      input.focus();
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
         window.HTMLInputElement.prototype,
         "value",
@@ -282,9 +287,10 @@ describe("FlatTextFieldEditor controls", () => {
       nativeInputValueSetter?.call(input, "24px");
       input.dispatchEvent(new Event("input", { bubbles: true }));
     });
-    // liveCommit debounces on a 120ms timer — no blur/Enter dispatched here.
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 160));
+    expect(onPreviewTextFieldStyle).toHaveBeenCalledWith("a", "font-size", "24px");
+    expect(onSetTextFieldStyle).not.toHaveBeenCalled();
+    act(() => {
+      input.blur();
     });
     expect(onSetTextFieldStyle).toHaveBeenCalledWith("a", "font-size", "24px");
     act(() => root.unmount());
@@ -462,4 +468,41 @@ describe("FlatTextSection — multi-field", () => {
 
     act(() => root.unmount());
   });
+
+  it("keeps Content expandable and grows it with multiline text", async () => {
+    const element = makeMultiFieldElement();
+    element.textFields[0].value = "First line\nSecond line\nThird line";
+
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <FlatTextSection
+          element={element}
+          styles={{}}
+          fontAssets={[]}
+          onSetText={vi.fn()}
+          onSetTextFieldStyle={vi.fn()}
+          onAddTextField={vi.fn()}
+          onRemoveTextField={vi.fn()}
+        />,
+      );
+    });
+
+    const contentTextarea = host.querySelector<HTMLTextAreaElement>("textarea");
+    expect(contentTextarea?.value).toBe("First line\nSecond line\nThird line");
+    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");
+
+    act(() => root.unmount());
+  });
 });

package/src/components/editor/propertyPanelFlatTextSection.tsx

@@ -47,6 +47,7 @@ function FlatTextFieldEditor({
   onImportFonts,
   onSetText,
   onSetTextFieldStyle,
+  onPreviewTextFieldStyle,
   autoFocus = false,
 }: {
   field: DomEditSelection["textFields"][number];
@@ -55,6 +56,7 @@ function FlatTextFieldEditor({
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
   onSetText: (value: string, fieldKey?: string) => void;
   onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+  onPreviewTextFieldStyle?: (fieldKey: string, property: string, value: string) => void;
   autoFocus?: boolean;
 }) {
   const track = useTrackDesignInput();
@@ -100,6 +102,7 @@ function FlatTextFieldEditor({
         value={field.computedStyles["font-size"] || styles["font-size"] || "16px"}
         tier={resolveValueTier(field.inlineStyles["font-size"], styles["font-size"] || "16px")}
         liveCommit
+        onPreview={(next) => onPreviewTextFieldStyle?.(field.key, "font-size", next)}
         onCommit={(next) => onSetTextFieldStyle(field.key, "font-size", next)}
       />
       <div className="flex min-h-[30px] items-center justify-between">
@@ -220,6 +223,7 @@ function FlatTextFieldEditor({
             flat
             label="Color"
             value={value ?? getTextFieldColor(field, styles)}
+            onPreview={(next) => onPreviewTextFieldStyle?.(field.key, "color", next)}
             onCommit={onCommit ?? ((next) => onSetTextFieldStyle(field.key, "color", next))}
           />
         )}
@@ -235,6 +239,7 @@ export function FlatTextSection({
   onImportFonts,
   onSetText,
   onSetTextFieldStyle,
+  onPreviewTextFieldStyle,
   onAddTextField,
   onRemoveTextField,
 }: {
@@ -244,6 +249,7 @@ export function FlatTextSection({
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
   onSetText: (value: string, fieldKey?: string) => void;
   onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+  onPreviewTextFieldStyle?: (fieldKey: string, property: string, value: string) => void;
   onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
   onRemoveTextField: (fieldKey: string) => void;
 }) {
@@ -267,7 +273,7 @@ export function FlatTextSection({
 
   if (textFields.length > 1) {
     return (
-      <div className="space-y-1.5">
+      <div className="space-y-2.5">
         <FlatTextLayerList
           fields={textFields}
           activeFieldKey={activeField.key}
@@ -288,6 +294,7 @@ export function FlatTextSection({
           onImportFonts={onImportFonts}
           onSetText={onSetText}
           onSetTextFieldStyle={onSetTextFieldStyle}
+          onPreviewTextFieldStyle={onPreviewTextFieldStyle}
           autoFocus
         />
       </div>
@@ -295,7 +302,7 @@ export function FlatTextSection({
   }
 
   return (
-    <div className="space-y-1.5">
+    <div className="space-y-2.5">
       <FlatTextFieldEditor
         field={activeField}
         styles={styles}
@@ -303,6 +310,7 @@ export function FlatTextSection({
         onImportFonts={onImportFonts}
         onSetText={onSetText}
         onSetTextFieldStyle={onSetTextFieldStyle}
+        onPreviewTextFieldStyle={onPreviewTextFieldStyle}
       />
       <button
         type="button"

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

@@ -134,6 +134,13 @@ describe("classic property-panel primitive telemetry", () => {
     const input = host.querySelector("input");
     if (!input) throw new Error("expected metric input");
 
+    // Regression guard for CommitField's shared `align` default: the classic
+    // panel lays out label-then-value inline, where left-aligned reads
+    // naturally — this must stay left even though the flat inspector's
+    // FlatRow now opts into `align="right"` for its own justify-between rows.
+    expect(input.className).toContain("text-left");
+    expect(input.className).not.toContain("text-right");
+
     act(() => blurInput(input));
     expect(trackStudioEvent).not.toHaveBeenCalled();
 
@@ -349,7 +356,10 @@ describe.each(["classic", "flat"] as const)("shared %s input telemetry", (ui) =>
       (input) => input.value === "#FF0000",
     );
     if (!hex) throw new Error("expected color hex input");
-    act(() => changeInput(hex, "#00FF00"));
+    act(() => {
+      changeInput(hex, "#00FF00");
+      blurInput(hex);
+    });
 
     expect(trackStudioEvent).toHaveBeenCalledTimes(1);
     expect(trackStudioEvent).toHaveBeenLastCalledWith("design_input", {
@@ -448,6 +458,13 @@ function representativeElement() {
 
 describe("classic PropertyPanel input coverage", () => {
   it("emits only named, known-section events across body inputs and header/footer chrome", async () => {
+    vi.resetModules();
+    vi.doMock("./manualEditingAvailability", async () => {
+      const actual = await vi.importActual<typeof import("./manualEditingAvailability")>(
+        "./manualEditingAvailability",
+      );
+      return { ...actual, STUDIO_FLAT_INSPECTOR_ENABLED: false };
+    });
     const { PropertyPanel } = await import("./PropertyPanel");
     const host = render(
       <PropertyPanel

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -3,99 +3,10 @@ import {
   DesignPanelInputProvider,
   useTrackDesignInput,
 } from "../../contexts/DesignPanelInputContext";
-import { adjustNumericToken, FIELD, LABEL, parseNumericToken } from "./propertyPanelHelpers";
+import { FIELD, LABEL } from "./propertyPanelHelpers";
+import { CommitField } from "./propertyPanelCommitField";
 
-export function CommitField({
-  value,
-  disabled,
-  liveCommit,
-  onCommit,
-}: {
-  value: string;
-  disabled?: boolean;
-  liveCommit?: boolean;
-  onCommit: (nextValue: string) => void;
-}) {
-  const [draft, setDraft] = useState(value);
-  const commitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const valueRef = useRef(value);
-  const draftRef = useRef(draft);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  valueRef.current = value;
-  draftRef.current = draft;
-
-  useEffect(() => {
-    setDraft(value);
-  }, [value]);
-
-  useEffect(() => {
-    const el = inputRef.current;
-    if (!el) return;
-    const handler = (e: WheelEvent) => {
-      if (disabled || document.activeElement !== el) return;
-      const delta = e.deltaY === 0 ? e.deltaX : e.deltaY;
-      if (delta === 0) return;
-      const nextDraft = adjustNumericToken(draftRef.current, delta < 0 ? 1 : -1, e);
-      if (!nextDraft) return;
-      e.preventDefault();
-      e.stopPropagation();
-      setDraft(nextDraft);
-      scheduleCommitRef.current(nextDraft);
-    };
-    el.addEventListener("wheel", handler, { passive: false });
-    return () => el.removeEventListener("wheel", handler);
-  }, [disabled]);
-
-  useEffect(
-    () => () => {
-      if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-    },
-    [],
-  );
-
-  const commitDraft = (nextDraft: string) => {
-    if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-    if (nextDraft !== valueRef.current) onCommit(nextDraft);
-  };
-
-  const scheduleCommit = (nextDraft: string) => {
-    if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-    commitTimerRef.current = setTimeout(() => {
-      if (nextDraft !== valueRef.current) onCommit(nextDraft);
-    }, 120);
-  };
-  const scheduleCommitRef = useRef(scheduleCommit);
-  scheduleCommitRef.current = scheduleCommit;
-
-  return (
-    <input
-      ref={inputRef}
-      type="text"
-      value={draft}
-      disabled={disabled}
-      onChange={(e) => {
-        setDraft(e.target.value);
-        if (liveCommit) scheduleCommit(e.target.value);
-      }}
-      onBlur={() => commitDraft(draft)}
-      onKeyDown={(e) => {
-        if (e.key === "Enter") {
-          (e.target as HTMLInputElement).blur();
-          return;
-        }
-        if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-        const nextDraft = adjustNumericToken(draft, e.key === "ArrowUp" ? 1 : -1, e);
-        if (!nextDraft) return;
-        e.preventDefault();
-        setDraft(nextDraft);
-        scheduleCommit(nextDraft);
-      }}
-      title={parseNumericToken(value) ? "Scroll or use Arrow keys to adjust" : undefined}
-      className="min-w-0 w-full bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
-    />
-  );
-}
+export { CommitField } from "./propertyPanelCommitField";
 
 /* ------------------------------------------------------------------ */
 /*  MetricField                                                        */

package/src/components/editor/propertyPanelSections.tsx

@@ -147,7 +147,7 @@ export function TextAreaField({
           onFocus={handleFocus}
           onChange={handleChange}
           onBlur={handleBlur}
-          className="w-full resize-none 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-none disabled:cursor-not-allowed disabled:text-panel-text-4"
         />
       </div>
     );
@@ -165,7 +165,7 @@ export function TextAreaField({
           onFocus={handleFocus}
           onChange={handleChange}
           onBlur={handleBlur}
-          className="w-full resize-none 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-none disabled:cursor-not-allowed disabled:text-neutral-600"
         />
       </div>
     </label>

package/src/components/editor/propertyPanelTypes.ts

@@ -32,6 +32,7 @@ export interface PropertyPanelProps {
   onClearSelection: () => void;
   onUngroup?: () => void;
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
+  onPreviewStyle?: (prop: string, value: string) => void;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
   /** Commits several data-* attributes on the SAME element in ONE atomic
    *  persist call — e.g. a pinned timing range's start+duration together, so
@@ -62,6 +63,7 @@ export interface PropertyPanelProps {
   onSetManualRotation: (element: DomEditSelection, next: { angle: number }) => void;
   onSetText: (value: string, fieldKey?: string) => void;
   onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+  onPreviewTextFieldStyle?: (fieldKey: string, property: string, value: string) => void;
   onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
   onRemoveTextField: (fieldKey: string) => void;
   onAskAgent: () => void;

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

@@ -0,0 +1,37 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it, vi } from "vitest";
+import { useInspectorGestureTransaction } from "./useInspectorGestureTransaction";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("useInspectorGestureTransaction", () => {
+  it("keeps a new gesture active when the prior async commit is acknowledged", () => {
+    const host = document.createElement("div");
+    const root = createRoot(host);
+    const onPreview = vi.fn();
+    const onCommit = vi.fn();
+    let gesture: ReturnType<typeof useInspectorGestureTransaction<number>> | null = null;
+
+    function Probe({ sourceValue }: { sourceValue: number }) {
+      gesture = useInspectorGestureTransaction({ sourceValue, onPreview, onCommit });
+      return null;
+    }
+
+    act(() => root.render(<Probe sourceValue={10} />));
+    act(() => {
+      gesture?.preview(20);
+      gesture?.settle();
+      gesture?.preview(30);
+    });
+    act(() => root.render(<Probe sourceValue={20} />));
+
+    expect(onPreview).toHaveBeenLastCalledWith(30);
+    act(() => gesture?.settle());
+    expect(onCommit.mock.calls.map(([value]) => value)).toEqual([20, 30]);
+
+    act(() => root.unmount());
+  });
+});

package/src/components/editor/useInspectorGestureTransaction.ts

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useRef } from "react";
+
+/** One owner for continuous inspector edits: preview freely, persist once. */
+export function useInspectorGestureTransaction<T>({
+  sourceValue,
+  onPreview,
+  onCommit,
+}: {
+  sourceValue: T;
+  onPreview: (value: T) => void;
+  onCommit: (value: T) => void;
+}) {
+  const sourceRef = useRef(sourceValue);
+  const activeRef = useRef<{ before: T; latest: T } | null>(null);
+  const previewRef = useRef(onPreview);
+  const commitRef = useRef(onCommit);
+  if (!activeRef.current) sourceRef.current = sourceValue;
+  previewRef.current = onPreview;
+  commitRef.current = onCommit;
+
+  const begin = useCallback(() => {
+    if (!activeRef.current) {
+      activeRef.current = { before: sourceRef.current, latest: sourceRef.current };
+    }
+  }, []);
+
+  const preview = useCallback((value: T) => {
+    if (!activeRef.current) {
+      activeRef.current = { before: sourceRef.current, latest: sourceRef.current };
+    }
+    activeRef.current.latest = value;
+    previewRef.current(value);
+  }, []);
+
+  const settle = useCallback(() => {
+    const active = activeRef.current;
+    activeRef.current = null;
+    if (active && !Object.is(active.before, active.latest)) {
+      sourceRef.current = active.latest;
+      // Restore the captured baseline before the persistent commit captures
+      // rollback state. The commit reapplies `latest` synchronously, so this
+      // is not visible but a failed save can now correctly restore `before`.
+      previewRef.current(active.before);
+      commitRef.current(active.latest);
+    }
+  }, []);
+
+  const cancel = useCallback(() => {
+    const active = activeRef.current;
+    activeRef.current = null;
+    if (active && !Object.is(active.before, active.latest)) {
+      sourceRef.current = active.before;
+      previewRef.current(active.before);
+    }
+  }, []);
+
+  useEffect(() => cancel, [cancel]);
+
+  return { begin, preview, settle, cancel, activeRef };
+}