From 760aa09a43ce5311417bec6e730ced9e5baea4de Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Thu, 9 Jul 2026 00:35:08 -0700
Subject: [PATCH] feat(studio): add stroke-summary format/parse helpers for the
 flat Style group

---
 .../propertyPanelFlatStyleHelpers.test.ts     | 23 +++++++++++++++++++
 .../editor/propertyPanelFlatStyleHelpers.ts   | 12 ++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 packages/studio/src/components/editor/propertyPanelFlatStyleHelpers.test.ts
 create mode 100644 packages/studio/src/components/editor/propertyPanelFlatStyleHelpers.ts

diff --git a/packages/studio/src/components/editor/propertyPanelFlatStyleHelpers.test.ts b/packages/studio/src/components/editor/propertyPanelFlatStyleHelpers.test.ts
new file mode 100644
index 000000000..dff96a42f
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelFlatStyleHelpers.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { formatStrokeSummary, parseStrokeSummary } from "./propertyPanelFlatStyleHelpers";
+
+describe("formatStrokeSummary", () => {
+  it("formats width and style into one string", () => {
+    expect(formatStrokeSummary(1, "solid")).toBe("1px solid");
+    expect(formatStrokeSummary(2.5, "dashed")).toBe("2.5px dashed");
+    expect(formatStrokeSummary(0, "none")).toBe("0px none");
+  });
+});
+
+describe("parseStrokeSummary", () => {
+  it("parses a well-formed summary back into width and style", () => {
+    expect(parseStrokeSummary("1px solid")).toEqual({ widthPx: 1, style: "solid" });
+    expect(parseStrokeSummary("  2.5px   dashed  ")).toEqual({ widthPx: 2.5, style: "dashed" });
+  });
+
+  it("returns null for unparseable input", () => {
+    expect(parseStrokeSummary("garbage")).toBeNull();
+    expect(parseStrokeSummary("")).toBeNull();
+    expect(parseStrokeSummary("1px")).toBeNull();
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelFlatStyleHelpers.ts b/packages/studio/src/components/editor/propertyPanelFlatStyleHelpers.ts
new file mode 100644
index 000000000..3f1db7ef7
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelFlatStyleHelpers.ts
@@ -0,0 +1,12 @@
+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 };
+}