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 = 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 ( + onUpdate({ [key]: next } as Partial)} + options={field.options.map((opt) => ({ label: prettifyEnumValue(opt), value: opt }))} + value={str} + /> + ) + } return (
{prettifyKey(key)} 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 = { { 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' }, ], }, ],