From 80199dc890bd21f7de1207d1f4b1bc6f99b32b39 Mon Sep 17 00:00:00 2001
From: Wassim SAMAD <wass08@gmail.com>
Date: Mon, 18 May 2026 10:21:56 -0400
Subject: [PATCH] parametrics: add `display: 'segmented'` enum hint + drop
 fence color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User pointed out two regressions in the auto-derived fence inspector:

- A `color` field rendered for fence — but the legacy `FencePanel`
  hid it (fence's color is a leftover schema field that isn't part of
  the inspector UX). Dropped from `fenceParametrics`.

- Style + base-style enums rendered as a dropdown, but the legacy
  used the inline segmented switcher (Slat/Rail/Privacy +
  Grounded/Floating). Added a `display?: 'select' | 'segmented'` hint
  to the enum field kind. ParametricInspector renders SegmentedControl
  when set; defaults to dropdown otherwise.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/registry/types.ts               | 10 +++++++++-
 .../components/ui/panels/parametric-inspector.tsx | 10 ++++++++++
 packages/nodes/src/fence/parametrics.ts           | 15 ++++++++++++---
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index 784892a0..90623c22 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -372,7 +372,15 @@ export type ParamField<N> =
       customEditor?: ComponentType
     }
   | { key: keyof N; kind: 'boolean'; visibleIf?: (n: N) => boolean }
-  | { key: keyof N; kind: 'enum'; options: readonly string[]; visibleIf?: (n: N) => boolean }
+  | {
+      key: keyof N
+      kind: 'enum'
+      options: readonly string[]
+      /** Defaults to 'select' (dropdown). 'segmented' renders the inline
+       *  tabbed switcher — better for short option lists (2-4 items). */
+      display?: 'select' | 'segmented'
+      visibleIf?: (n: N) => boolean
+    }
   | { key: keyof N; kind: 'vec3'; visibleIf?: (n: N) => boolean }
   | { key: keyof N; kind: 'color'; visibleIf?: (n: N) => boolean }
   | { key: keyof N; kind: 'material'; visibleIf?: (n: N) => boolean }
diff --git a/packages/editor/src/components/ui/panels/parametric-inspector.tsx b/packages/editor/src/components/ui/panels/parametric-inspector.tsx
index c4443c6b..4cbb5d44 100644
--- a/packages/editor/src/components/ui/panels/parametric-inspector.tsx
+++ b/packages/editor/src/components/ui/panels/parametric-inspector.tsx
@@ -14,6 +14,7 @@ import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelSection } from '../controls/panel-section'
+import { SegmentedControl } from '../controls/segmented-control'
 import { SliderControl } from '../controls/slider-control'
 import { ToggleControl } from '../controls/toggle-control'
 import { PanelWrapper } from './panel-wrapper'
@@ -204,6 +205,15 @@ function FieldRenderer({ field, nodeId, onUpdate }: FieldRendererProps) {
 
     case 'enum': {
       const str = typeof value === 'string' ? value : (field.options[0] ?? '')
+      if (field.display === 'segmented') {
+        return (
+          <SegmentedControl
+            onChange={(next) => onUpdate({ [key]: next } as Partial<AnyNode>)}
+            options={field.options.map((opt) => ({ label: prettifyEnumValue(opt), value: opt }))}
+            value={str}
+          />
+        )
+      }
       return (
         <div className="flex items-center justify-between px-3 py-2">
           <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
diff --git a/packages/nodes/src/fence/parametrics.ts b/packages/nodes/src/fence/parametrics.ts
index 19f341cb..f292a435 100644
--- a/packages/nodes/src/fence/parametrics.ts
+++ b/packages/nodes/src/fence/parametrics.ts
@@ -32,10 +32,19 @@ export const fenceParametrics: ParametricDescriptor<FenceNode> = {
     {
       label: 'Style',
       fields: [
-        { key: 'style', kind: 'enum', options: ['slat', 'rail', 'privacy'] },
-        { key: 'baseStyle', kind: 'enum', options: ['floating', 'grounded'] },
+        {
+          key: 'style',
+          kind: 'enum',
+          options: ['slat', 'rail', 'privacy'],
+          display: 'segmented',
+        },
+        {
+          key: 'baseStyle',
+          kind: 'enum',
+          options: ['grounded', 'floating'],
+          display: 'segmented',
+        },
         { key: 'showInfill', kind: 'boolean' },
-        { key: 'color', kind: 'color' },
       ],
     },
   ],