@hyperframes/studio 0.7.59 → 0.7.61

package/src/components/editor/PropertyPanel.tsx

@@ -197,11 +197,11 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
   const manualSizeEditingDisabled = !element.capabilities.canApplyManualSize;
   const manualRotationEditingDisabled = !element.capabilities.canApplyManualRotation;
   const sourceLabel = element.id ? `#${element.id}` : (element.selector ?? "");
-  const showEditableSections = element.capabilities.canEditStyles;
   // Capabilities are already resolved on the selection; recompute only sections,
   // feeding the live GSAP tween count (arrives on the gsapAnimations prop, not the
   // selection) so the Timing section shows for pure-GSAP elements with no data-start.
   const sections = resolveEditingSections(domEditSelectionToFacts(element, gsapAnimations.length));
+  const showEditableSections = element.capabilities.canEditStyles && sections.style;
   const manualOffset = readStudioPathOffset(element.element);
   const manualSize = readStudioBoxSize(element.element);
   const resolvedWidth =
@@ -385,161 +385,163 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
           />
         )}
 
-        <Section title="Layout" icon={<Move size={15} />}>
-          <div className={RESPONSIVE_GRID}>
-            <div className="flex items-center gap-1">
-              <div className="flex-1">
-                <MetricField
-                  label="X"
-                  value={formatPxMetricValue(displayX)}
-                  disabled={manualOffsetEditingDisabled}
-                  scrub
-                  onCommit={(next) => commitManualOffset("x", next)}
-                />
+        {sections.layout && (
+          <Section title="Layout" icon={<Move size={15} />}>
+            <div className={RESPONSIVE_GRID}>
+              <div className="flex items-center gap-1">
+                <div className="flex-1">
+                  <MetricField
+                    label="X"
+                    value={formatPxMetricValue(displayX)}
+                    disabled={manualOffsetEditingDisabled}
+                    scrub
+                    onCommit={(next) => commitManualOffset("x", next)}
+                  />
+                </div>
+                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                  <KeyframeNavigation
+                    property="x"
+                    keyframes={navKeyframes}
+                    currentPercentage={currentPct}
+                    onSeek={seekFromKfPct}
+                    onAddKeyframe={() =>
+                      onCommitAnimatedProperty &&
+                      void onCommitAnimatedProperty(element, "x", displayX)
+                    }
+                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("x"), pct)}
+                    onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("x"))}
+                  />
+                )}
               </div>
-              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
-                <KeyframeNavigation
-                  property="x"
-                  keyframes={navKeyframes}
-                  currentPercentage={currentPct}
-                  onSeek={seekFromKfPct}
-                  onAddKeyframe={() =>
-                    onCommitAnimatedProperty &&
-                    void onCommitAnimatedProperty(element, "x", displayX)
-                  }
-                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("x"), pct)}
-                  onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("x"))}
-                />
-              )}
-            </div>
-            <div className="flex items-center gap-1">
-              <div className="flex-1">
-                <MetricField
-                  label="Y"
-                  value={formatPxMetricValue(displayY)}
-                  disabled={manualOffsetEditingDisabled}
-                  scrub
-                  onCommit={(next) => commitManualOffset("y", next)}
-                />
+              <div className="flex items-center gap-1">
+                <div className="flex-1">
+                  <MetricField
+                    label="Y"
+                    value={formatPxMetricValue(displayY)}
+                    disabled={manualOffsetEditingDisabled}
+                    scrub
+                    onCommit={(next) => commitManualOffset("y", next)}
+                  />
+                </div>
+                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                  <KeyframeNavigation
+                    property="y"
+                    keyframes={navKeyframes}
+                    currentPercentage={currentPct}
+                    onSeek={seekFromKfPct}
+                    onAddKeyframe={() =>
+                      onCommitAnimatedProperty &&
+                      void onCommitAnimatedProperty(element, "y", displayY)
+                    }
+                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("y"), pct)}
+                    onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("y"))}
+                  />
+                )}
               </div>
-              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
-                <KeyframeNavigation
-                  property="y"
-                  keyframes={navKeyframes}
-                  currentPercentage={currentPct}
-                  onSeek={seekFromKfPct}
-                  onAddKeyframe={() =>
-                    onCommitAnimatedProperty &&
-                    void onCommitAnimatedProperty(element, "y", displayY)
-                  }
-                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("y"), pct)}
-                  onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("y"))}
-                />
-              )}
-            </div>
-            <div className="flex items-center gap-1">
-              <div className="flex-1">
-                <MetricField
-                  label="W"
-                  value={formatPxMetricValue(displayW)}
-                  disabled={manualSizeEditingDisabled}
-                  scrub
-                  onCommit={(next) => commitManualSize("width", next)}
-                />
+              <div className="flex items-center gap-1">
+                <div className="flex-1">
+                  <MetricField
+                    label="W"
+                    value={formatPxMetricValue(displayW)}
+                    disabled={manualSizeEditingDisabled}
+                    scrub
+                    onCommit={(next) => commitManualSize("width", next)}
+                  />
+                </div>
+                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                  <KeyframeNavigation
+                    property="width"
+                    keyframes={navKeyframes}
+                    currentPercentage={currentPct}
+                    onSeek={seekFromKfPct}
+                    onAddKeyframe={() =>
+                      onCommitAnimatedProperty &&
+                      void onCommitAnimatedProperty(element, "width", displayW)
+                    }
+                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("width"), pct)}
+                    onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("width"))}
+                  />
+                )}
               </div>
-              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
-                <KeyframeNavigation
-                  property="width"
-                  keyframes={navKeyframes}
-                  currentPercentage={currentPct}
-                  onSeek={seekFromKfPct}
-                  onAddKeyframe={() =>
-                    onCommitAnimatedProperty &&
-                    void onCommitAnimatedProperty(element, "width", displayW)
-                  }
-                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("width"), pct)}
-                  onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("width"))}
-                />
-              )}
-            </div>
-            <div className="flex items-center gap-1">
-              <div className="flex-1">
-                <MetricField
-                  label="H"
-                  value={formatPxMetricValue(displayH)}
-                  disabled={manualSizeEditingDisabled}
-                  scrub
-                  onCommit={(next) => commitManualSize("height", next)}
-                />
+              <div className="flex items-center gap-1">
+                <div className="flex-1">
+                  <MetricField
+                    label="H"
+                    value={formatPxMetricValue(displayH)}
+                    disabled={manualSizeEditingDisabled}
+                    scrub
+                    onCommit={(next) => commitManualSize("height", next)}
+                  />
+                </div>
+                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                  <KeyframeNavigation
+                    property="height"
+                    keyframes={navKeyframes}
+                    currentPercentage={currentPct}
+                    onSeek={seekFromKfPct}
+                    onAddKeyframe={() =>
+                      onCommitAnimatedProperty &&
+                      void onCommitAnimatedProperty(element, "height", displayH)
+                    }
+                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("height"), pct)}
+                    onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("height"))}
+                  />
+                )}
               </div>
-              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
-                <KeyframeNavigation
-                  property="height"
-                  keyframes={navKeyframes}
-                  currentPercentage={currentPct}
-                  onSeek={seekFromKfPct}
-                  onAddKeyframe={() =>
-                    onCommitAnimatedProperty &&
-                    void onCommitAnimatedProperty(element, "height", displayH)
-                  }
-                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("height"), pct)}
-                  onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("height"))}
-                />
-              )}
-            </div>
-            <div className="flex items-center gap-1">
-              <div className="flex-1">
-                <MetricField
-                  label="R"
-                  value={`${displayR}°`}
-                  disabled={manualRotationEditingDisabled}
-                  onCommit={(next) => commitManualRotation(next.replace("°", ""))}
-                />
+              <div className="flex items-center gap-1">
+                <div className="flex-1">
+                  <MetricField
+                    label="R"
+                    value={`${displayR}°`}
+                    disabled={manualRotationEditingDisabled}
+                    onCommit={(next) => commitManualRotation(next.replace("°", ""))}
+                  />
+                </div>
+                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                  <KeyframeNavigation
+                    property="rotation"
+                    keyframes={navKeyframes}
+                    currentPercentage={currentPct}
+                    onSeek={seekFromKfPct}
+                    onAddKeyframe={() =>
+                      onCommitAnimatedProperty &&
+                      void onCommitAnimatedProperty(element, "rotation", displayR)
+                    }
+                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("rotation"), pct)}
+                    onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("rotation"))}
+                  />
+                )}
               </div>
-              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
-                <KeyframeNavigation
-                  property="rotation"
-                  keyframes={navKeyframes}
-                  currentPercentage={currentPct}
-                  onSeek={seekFromKfPct}
-                  onAddKeyframe={() =>
-                    onCommitAnimatedProperty &&
-                    void onCommitAnimatedProperty(element, "rotation", displayR)
-                  }
-                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("rotation"), pct)}
-                  onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("rotation"))}
-                />
-              )}
             </div>
-          </div>
-          <PropertyPanel3dTransform
-            gsapRuntimeValues={gsap3dValues}
-            gsapAnimId={gsapAnimId}
-            resolveAnimIdForProp={animIdForProp}
-            gsapKeyframes={navKeyframes}
-            currentPct={currentPct}
-            elStart={elStart}
-            elDuration={elDuration}
-            element={element}
-            onCommitAnimatedProperty={onCommitAnimatedProperty}
-            onCommitAnimatedProperties={onCommitAnimatedProperties}
-            onSeekToTime={onSeekToTime}
-            onRemoveKeyframe={onRemoveKeyframe}
-            onConvertToKeyframes={onConvertToKeyframes}
-            onLivePreviewProps={createGsapLivePreview(iframeRef)}
-          />
-          <div className="mt-3">
-            <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
-              Stacking
-            </div>
-            <MetricField
-              label="Z-index"
-              value={String(parseInt(styles["z-index"] || "auto", 10) || 0)}
-              scrub
-              onCommit={(next) => onSetStyle("z-index", next)}
+            <PropertyPanel3dTransform
+              gsapRuntimeValues={gsap3dValues}
+              gsapAnimId={gsapAnimId}
+              resolveAnimIdForProp={animIdForProp}
+              gsapKeyframes={navKeyframes}
+              currentPct={currentPct}
+              elStart={elStart}
+              elDuration={elDuration}
+              element={element}
+              onCommitAnimatedProperty={onCommitAnimatedProperty}
+              onCommitAnimatedProperties={onCommitAnimatedProperties}
+              onSeekToTime={onSeekToTime}
+              onRemoveKeyframe={onRemoveKeyframe}
+              onConvertToKeyframes={onConvertToKeyframes}
+              onLivePreviewProps={createGsapLivePreview(iframeRef)}
             />
-          </div>
-        </Section>
+            <div className="mt-3">
+              <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
+                Stacking
+              </div>
+              <MetricField
+                label="Z-index"
+                value={String(parseInt(styles["z-index"] || "auto", 10) || 0)}
+                scrub
+                onCommit={(next) => onSetStyle("z-index", next)}
+              />
+            </div>
+          </Section>
+        )}
 
         {STUDIO_GSAP_PANEL_ENABLED &&
           onUpdateGsapProperty &&

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/propertyPanelFlatColorGradingSection.tsx

@@ -377,7 +377,7 @@ export function FlatColorGradingSection({
                   track("select", "Custom LUT");
                   applyLut(src || null, src && lut?.src === src ? lut.intensity : 1);
                 }}
-                className="bg-transparent font-mono text-[10px] text-panel-text-3 outline-none"
+                className="border-b border-panel-border-input/50 bg-transparent font-mono text-[10px] text-panel-text-3 outline-none hover:border-panel-border-input"
               >
                 <option value="">None</option>
                 {lutAssets.map((asset) => (
@@ -545,7 +545,7 @@ export function FlatColorGradingSection({
                 onSetApplyScope(e.target.value as "source-file" | "project");
               }}
               disabled={applyBusy}
-              className="bg-transparent font-mono text-[11px] text-panel-text-0 outline-none disabled:opacity-50"
+              className="border-b border-panel-border-input/50 bg-transparent font-mono text-[11px] text-panel-text-0 outline-none hover:border-panel-border-input disabled:opacity-50"
             >
               <option value="source-file">Current file media</option>
               <option value="project">All project media</option>

package/src/components/editor/propertyPanelFlatMotionSection.tsx

@@ -85,7 +85,7 @@ export function FlatTimingRow({
   const cell = (label: string, value: string, onCommit: (next: string) => void) => (
     <div className="grid gap-px">
       <span className="text-[9px] text-panel-text-4">{label}</span>
-      <span className="border-b border-transparent font-mono text-[11px] text-panel-text-0 hover:border-panel-border-input">
+      <span className="border-b border-panel-border-input/50 font-mono text-[11px] text-panel-text-0 hover:border-panel-border-input">
         <CommitField
           value={value}
           onCommit={(next) => {

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

@@ -43,14 +43,15 @@ export function FlatRow({
           data-flat-row-value="true"
           className={`min-w-0 border-b pb-px font-mono text-[11px] ${VALUE_TIER_VALUE_CLASS[tier]} ${
             tier === "explicitCustom"
-              ? "border-transparent group-hover:border-panel-accent/35"
-              : "border-transparent group-hover:border-panel-border-input"
+              ? "border-panel-accent/30 group-hover:border-panel-accent/70"
+              : "border-panel-border-input/50 group-hover:border-panel-border-input"
           }`}
         >
           <CommitField
             value={value}
             disabled={disabled}
             liveCommit={liveCommit}
+            align="right"
             onCommit={(nextValue) => {
               track("metric", label);
               onCommit(nextValue);

package/src/components/editor/propertyPanelFlatSelectRow.tsx

@@ -53,7 +53,13 @@ export function FlatSelectRow({
     <div className="group flex min-h-[30px] items-center justify-between">
       <span className={`text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
       <span className="flex items-center gap-2">
-        <label className="flex items-center gap-1.5">
+        <label
+          className={`flex items-center gap-1.5 border-b pb-px ${
+            tier === "explicitCustom"
+              ? "border-panel-accent/30 group-hover:border-panel-accent/70"
+              : "border-panel-border-input/50 group-hover:border-panel-border-input"
+          }`}
+        >
           <select
             value={value}
             disabled={disabled}

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