feat(studio): widen FlatSelectRow options to support label!=value entries

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

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>