@hyperframes/studio 0.7.60 → 0.7.61

package/src/components/editor/PropertyPanelFlat.tsx

@@ -388,48 +388,50 @@ export function PropertyPanelFlat({
       ),
     });
   }
-  groups.push({
-    id: "layout",
-    title: "Layout",
-    // No scrub accessory: FlatRow/CommitField has no pointer-drag scrubbing
-    // (wheel/arrow keys only) — advertising "drag values to scrub" here lies.
-    summary: `${formatPxMetricValue(displayX)},${formatPxMetricValue(displayY)} · ${Math.round(displayW)}×${Math.round(displayH)}`,
-    content: (
-      <FlatLayoutSection
-        element={element}
-        styles={styles}
-        onSetStyle={onSetStyle}
-        disabled={!element.capabilities.canEditStyles}
-        displayX={displayX}
-        displayY={displayY}
-        displayW={displayW}
-        displayH={displayH}
-        displayR={displayR}
-        manualOffsetEditingDisabled={manualOffsetEditingDisabled}
-        manualSizeEditingDisabled={manualSizeEditingDisabled}
-        manualRotationEditingDisabled={manualRotationEditingDisabled}
-        commitManualOffset={commitManualOffset}
-        commitManualSize={commitManualSize}
-        commitManualRotation={commitManualRotation}
-        gsapAnimId={gsapAnimId}
-        navKeyframes={navKeyframes}
-        currentPct={currentPct}
-        seekFromKfPct={seekFromKfPct}
-        animIdForProp={animIdForProp}
-        resolveAnimIdForProp={animIdForProp}
-        gsapRuntimeValues={gsapRuntimeValues}
-        gsapKeyframes={navKeyframes}
-        elStart={elStart}
-        elDuration={elDuration}
-        onCommitAnimatedProperty={onCommitAnimatedProperty}
-        onCommitAnimatedProperties={onCommitAnimatedProperties}
-        onSeekToTime={onSeekToTime}
-        onRemoveKeyframe={onRemoveKeyframe}
-        onConvertToKeyframes={onConvertToKeyframes}
-        onLivePreviewProps={createGsapLivePreview(previewIframeRef ?? { current: null })}
-      />
-    ),
-  });
+  if (sections.layout) {
+    groups.push({
+      id: "layout",
+      title: "Layout",
+      // No scrub accessory: FlatRow/CommitField has no pointer-drag scrubbing
+      // (wheel/arrow keys only) — advertising "drag values to scrub" here lies.
+      summary: `${formatPxMetricValue(displayX)},${formatPxMetricValue(displayY)} · ${Math.round(displayW)}×${Math.round(displayH)}`,
+      content: (
+        <FlatLayoutSection
+          element={element}
+          styles={styles}
+          onSetStyle={onSetStyle}
+          disabled={!element.capabilities.canEditStyles}
+          displayX={displayX}
+          displayY={displayY}
+          displayW={displayW}
+          displayH={displayH}
+          displayR={displayR}
+          manualOffsetEditingDisabled={manualOffsetEditingDisabled}
+          manualSizeEditingDisabled={manualSizeEditingDisabled}
+          manualRotationEditingDisabled={manualRotationEditingDisabled}
+          commitManualOffset={commitManualOffset}
+          commitManualSize={commitManualSize}
+          commitManualRotation={commitManualRotation}
+          gsapAnimId={gsapAnimId}
+          navKeyframes={navKeyframes}
+          currentPct={currentPct}
+          seekFromKfPct={seekFromKfPct}
+          animIdForProp={animIdForProp}
+          resolveAnimIdForProp={animIdForProp}
+          gsapRuntimeValues={gsapRuntimeValues}
+          gsapKeyframes={navKeyframes}
+          elStart={elStart}
+          elDuration={elDuration}
+          onCommitAnimatedProperty={onCommitAnimatedProperty}
+          onCommitAnimatedProperties={onCommitAnimatedProperties}
+          onSeekToTime={onSeekToTime}
+          onRemoveKeyframe={onRemoveKeyframe}
+          onConvertToKeyframes={onConvertToKeyframes}
+          onLivePreviewProps={createGsapLivePreview(previewIframeRef ?? { current: null })}
+        />
+      ),
+    });
+  }
   if (showMotionGroup) {
     groups.push({
       id: "motion",

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

@@ -106,13 +106,13 @@ describe("manual editing availability", () => {
     expect(resolveStudioBooleanEnvFlag({ UNKNOWN: "maybe" }, ["UNKNOWN"], false)).toBe(false);
   });
 
-  it("defaults the flat inspector flag to false and honors an explicit override", async () => {
-    const off = await loadAvailabilityWithEnv({});
-    expect(off.STUDIO_FLAT_INSPECTOR_ENABLED).toBe(false);
+  it("defaults the flat inspector flag to true and honors an explicit override", async () => {
+    const on = await loadAvailabilityWithEnv({});
+    expect(on.STUDIO_FLAT_INSPECTOR_ENABLED).toBe(true);
 
-    const on = await loadAvailabilityWithEnv({
-      VITE_STUDIO_FLAT_INSPECTOR_ENABLED: "true",
+    const off = await loadAvailabilityWithEnv({
+      VITE_STUDIO_FLAT_INSPECTOR_ENABLED: "false",
     });
-    expect(on.STUDIO_FLAT_INSPECTOR_ENABLED).toBe(true);
+    expect(off.STUDIO_FLAT_INSPECTOR_ENABLED).toBe(false);
   });
 });

package/src/components/editor/manualEditingAvailability.ts

@@ -98,12 +98,14 @@ export const STUDIO_SDK_RESOLVER_SHADOW_ENABLED = resolveStudioBooleanEnvFlag(
 );
 
 // Studio inspector redesign ("Ledger, flat" — design_handoff_studio_inspector):
-// flat identity header/footer/groups behind a flag for incremental review.
-// Default false; enable via VITE_STUDIO_FLAT_INSPECTOR_ENABLED=true.
+// flat identity header/footer/groups. Default true as of v0.7.59+ bug-fix pass
+// (right-aligned values, Stroke select-only, promote-badge overlap, Layout/
+// Style section gating); disable via VITE_STUDIO_FLAT_INSPECTOR_ENABLED=false
+// to fall back to the legacy panel.
 export const STUDIO_FLAT_INSPECTOR_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_FLAT_INSPECTOR", "VITE_STUDIO_FLAT_INSPECTOR_ENABLED"],
-  false,
+  true,
 );
 
 export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";

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

@@ -38,6 +38,16 @@ describe("FlatRow", () => {
     act(() => root.unmount());
   });
 
+  it("right-aligns the value input — the flat inspector's justify-between row layout leaves a left-aligned value looking stranded at the edge of its own box", () => {
+    const { host, root } = renderInto(
+      <FlatRow label="Size" value="72px" tier="explicitCustom" onCommit={vi.fn()} />,
+    );
+    const input = host.querySelector("input");
+    expect(input?.className).toContain("text-right");
+    expect(input?.className).not.toContain("text-left");
+    act(() => root.unmount());
+  });
+
   it("renders the explicitCustom tier with a mint value and a reset button", () => {
     const onReset = vi.fn();
     const { host, root } = renderInto(

package/src/components/editor/propertyPanelFlatPrimitives.tsx

@@ -51,6 +51,7 @@ export function FlatRow({
             value={value}
             disabled={disabled}
             liveCommit={liveCommit}
+            align="right"
             onCommit={(nextValue) => {
               track("metric", label);
               onCommit(nextValue);

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());
   });

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,
@@ -147,10 +143,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 +162,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}

package/src/components/editor/propertyPanelFlatTextSection.tsx

@@ -267,7 +267,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}
@@ -295,7 +295,7 @@ export function FlatTextSection({
   }
 
   return (
-    <div className="space-y-1.5">
+    <div className="space-y-2.5">
       <FlatTextFieldEditor
         field={activeField}
         styles={styles}

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();
 
@@ -448,6 +455,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

@@ -9,11 +9,17 @@ export function CommitField({
   value,
   disabled,
   liveCommit,
+  align = "left",
   onCommit,
 }: {
   value: string;
   disabled?: boolean;
   liveCommit?: boolean;
+  /** The legacy panel lays out label-then-value inline (left reads naturally);
+   *  the flat inspector lays out label…value across a `justify-between` row,
+   *  where a left-aligned value looks stranded at the edge of its own
+   *  right-hand box instead of lining up with every other row's value. */
+  align?: "left" | "right";
   onCommit: (nextValue: string) => void;
 }) {
   const [draft, setDraft] = useState(value);
@@ -92,7 +98,9 @@ export function CommitField({
         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"
+      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 ${
+        align === "right" ? "text-right" : "text-left"
+      }`}
     />
   );
 }

package/src/components/storyboard/AgentChatMessageButton.test.tsx

@@ -0,0 +1,47 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AgentChatMessageButton } from "./AgentChatMessageButton";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+describe("AgentChatMessageButton", () => {
+  it("reports a successful copy and resets to an explicit re-copy action", async () => {
+    vi.useFakeTimers();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText },
+    });
+    const onCopied = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(<AgentChatMessageButton message="handoff" onCopied={onCopied} />);
+    });
+
+    const button = host.querySelector("button");
+    if (!button) throw new Error("copy button not rendered");
+    await act(async () => {
+      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+    });
+
+    expect(writeText).toHaveBeenCalledWith("handoff");
+    expect(onCopied).toHaveBeenCalledOnce();
+    expect(button.textContent).toBe("Copied — paste in your agent chat");
+
+    act(() => vi.advanceTimersByTime(3000));
+    expect(button.textContent).toBe("Copy again");
+    act(() => root.unmount());
+  });
+});

package/src/components/storyboard/AgentChatMessageButton.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { Button } from "../ui/Button";
+
+export const APPLY_STORYBOARD_FEEDBACK_MESSAGE =
+  "Read the storyboard feedback I saved in .hyperframes/frame-comments.json and revise the frames.";
+
+export function AgentChatMessageButton({
+  message,
+  label = "Copy prompt for agent",
+  onCopied,
+}: {
+  message: string;
+  label?: string;
+  onCopied?: () => void;
+}) {
+  const [copyState, setCopyState] = useState<"idle" | "copied" | "again" | "failed">("idle");
+
+  useEffect(() => {
+    if (copyState !== "copied") return;
+    const timeout = window.setTimeout(() => setCopyState("again"), 3000);
+    return () => window.clearTimeout(timeout);
+  }, [copyState]);
+
+  const copyMessage = async () => {
+    try {
+      await navigator.clipboard.writeText(message);
+      setCopyState("copied");
+      onCopied?.();
+    } catch {
+      setCopyState("failed");
+    }
+  };
+
+  return (
+    <Button size="sm" variant="secondary" onClick={() => void copyMessage()}>
+      {copyState === "copied"
+        ? "Copied — paste in your agent chat"
+        : copyState === "again"
+          ? "Copy again"
+          : copyState === "failed"
+            ? "Copy failed"
+            : label}
+    </Button>
+  );
+}