fix(studio): make flat inspector's Stroke width free of style-name typing

packages/studio/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 };
-}

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

packages/studio/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}