From 18e4aef7dc105519c1de91c64ca5696f4c042eeb Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Thu, 9 Jul 2026 14:53:05 -0700
Subject: [PATCH] feat(studio): widen FlatSelectRow options to support
 label!=value entries

---
 .../propertyPanelFlatPrimitives.test.tsx      | 38 +++++++++++++++++++
 .../editor/propertyPanelFlatPrimitives.tsx    | 11 ++++--
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
index 32c7f4b9f..6ff132760 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -378,6 +378,44 @@ describe("FlatSelectRow", () => {
   });
 });
 
+describe("FlatSelectRow — label/value options", () => {
+  it("renders distinct labels for entries with a different display label than value", () => {
+    const { host, root } = renderInto(
+      <FlatSelectRow
+        label="Preset"
+        value="natural-lift"
+        options={[
+          { value: "neutral", label: "Neutral" },
+          { value: "natural-lift", label: "Natural Lift" },
+          { value: "fresh-pop", label: "Fresh Pop" },
+        ]}
+        tier="explicitCustom"
+        onChange={vi.fn()}
+      />,
+    );
+    const select = host.querySelector("select");
+    expect(select?.value).toBe("natural-lift");
+    const options = Array.from(host.querySelectorAll("option")).map((o) => o.textContent);
+    expect(options).toEqual(["Neutral", "Natural Lift", "Fresh Pop"]);
+    act(() => root.unmount());
+  });
+
+  it("still treats a bare string array as value===label (Plan 2 behavior unchanged)", () => {
+    const { host, root } = renderInto(
+      <FlatSelectRow
+        label="Blend"
+        value="multiply"
+        options={["normal", "multiply", "screen"]}
+        tier="explicitCustom"
+        onChange={vi.fn()}
+      />,
+    );
+    const options = Array.from(host.querySelectorAll("option")).map((o) => o.textContent);
+    expect(options).toEqual(["normal", "multiply", "screen"]);
+    act(() => root.unmount());
+  });
+});
+
 describe("FlatToggle", () => {
   it("renders the off state with a dim label and dim knob, and fires onChange(true) on click", () => {
     const onChange = vi.fn();
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index 0ea2174c7..078845bd1 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -352,12 +352,15 @@ export function FlatSelectRow({
 }: {
   label: string;
   value: string;
-  options: string[];
+  options: Array<string | { value: string; label: string }>;
   tier: PropertyValueTier;
   disabled?: boolean;
   onChange: (nextValue: string) => void;
   onReset?: () => void;
 }) {
+  const normalizedOptions = options.map((option) =>
+    typeof option === "string" ? { value: option, label: option } : option,
+  );
   return (
     <div className="group flex min-h-[30px] items-center justify-between">
       <span className={`text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
@@ -369,9 +372,9 @@ export function FlatSelectRow({
             onChange={(e) => onChange(e.target.value)}
             className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
           >
-            {options.map((option) => (
-              <option key={option} value={option}>
-                {option}
+            {normalizedOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
               </option>
             ))}
           </select>