@pascal-app/nodes 1.0.7 → 1.1.1

package/dist/column/panel.js

@@ -1,54 +1,195 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { COLUMN_PRESETS, scriptImages, usePascalI18n, useScene, } from '@pascal-app/core';
-import { ActionButton, ActionGroup, cn, PanelSection, PanelWrapper, SliderControl, ToggleControl, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { ColumnBaseStyle, ColumnCapitalStyle, ColumnCarvingPlacement, ColumnCrossSection, ColumnPanelShape, ColumnShaftDetail, ColumnShaftProfile, ColumnStyle, scriptImages, useLiveNodeOverrides, usePascalI18n, useScene, } from '@pascal-app/core';
+import { ActionButton, ActionGroup, armMaterialPaint, PanelSection as BasePanelSection, SliderControl as BaseSliderControl, PanelWrapper, ToggleControl, triggerSFX, useEditor, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
-import { Move, Trash2 } from 'lucide-react';
-import { useCallback } from 'react';
+import { Move, PaintBucket, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { AuthoredParams } from '../item/authored-params.js';
+import { isManagedColumn } from './edit-policy.js';
 import { planColumnEdit } from './hosted-resize.js';
+import { ColumnInspectorHover } from './inspector-highlight.js';
 import { FramingPostSection } from './post-section.js';
-const SELECT_CLASS = 'h-10 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm text-foreground outline-none transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] focus:ring-1 focus:ring-border';
-const MANAGED_LEAN_TO_LAYOUT_FIELDS = new Set([
-    'position',
-    'height',
-    'width',
-    'depth',
-    'crossSection',
-    'baseStyle',
-    'baseHeight',
-    'baseWidthScale',
-    'baseDepthScale',
-    'slots',
-]);
-/** Preset names in the UI language; core's `COLUMN_PRESETS` labels stay English. */
-const COLUMN_PRESET_LABELS = {
-    basicPillar: /* i18n */ { id: 'node.column.preset.basicPillar', message: 'Straight Round' },
-    squarePillar: /* i18n */ { id: 'node.column.preset.squarePillar', message: 'Square Block' },
-    taperedPillar: /* i18n */ { id: 'node.column.preset.taperedPillar', message: 'Tapered Round' },
-    bulgedPillar: /* i18n */ { id: 'node.column.preset.bulgedPillar', message: 'Soft Bulged' },
-    hourglassPillar: /* i18n */ { id: 'node.column.preset.hourglassPillar', message: 'Hourglass' },
-    aFrameSupport: /* i18n */ { id: 'node.column.preset.aFrameSupport', message: 'A-Frame Support' },
-    yFrameSupport: /* i18n */ { id: 'node.column.preset.yFrameSupport', message: 'Y Support' },
-    vFrameSupport: /* i18n */ { id: 'node.column.preset.vFrameSupport', message: 'V Support' },
-    xBraceSupport: /* i18n */ { id: 'node.column.preset.xBraceSupport', message: 'X Brace' },
-    kBraceSupport: /* i18n */ { id: 'node.column.preset.kBraceSupport', message: 'K Brace' },
-    singleStrutSupport: /* i18n */ {
-        id: 'node.column.preset.singleStrutSupport',
-        message: 'Single Strut',
+import { ColumnPresetGallery } from './preset-gallery.js';
+import { columnSectionReset } from './presets.js';
+import { createColumnPropertyPreview } from './property-preview.js';
+function PanelSection({ part, ...props }) {
+    return (_jsx("div", { "data-column-part": part, children: _jsx(BasePanelSection, { ...props }) }));
+}
+function SliderControl({ axis, ...props }) {
+    return (_jsx("div", { "data-column-axis": axis, children: _jsx(BaseSliderControl, { ...props }) }));
+}
+/** Display names for the column's style, section, profile, detail and part values. */
+const COLUMN_OPTION_LABELS = {
+    plain: /* i18n */ { id: 'node.column.panel.plain', message: 'Plain' },
+    faceted: /* i18n */ { id: 'node.column.panel.faceted', message: 'Faceted' },
+    fluted: /* i18n */ { id: 'node.column.panel.fluted', message: 'Fluted' },
+    'lathe-turned': /* i18n */ { id: 'node.column.panel.latheTurned', message: 'Lathe Turned' },
+    'dravidian-carved': /* i18n */ {
+        id: 'node.column.panel.dravidianCarved',
+        message: 'Dravidian Carved',
+    },
+    cluster: /* i18n */ { id: 'node.column.panel.cluster', message: 'Cluster' },
+    round: /* i18n */ { id: 'node.column.panel.round', message: 'Round' },
+    square: /* i18n */ { id: 'node.column.panel.square', message: 'Square' },
+    rectangular: /* i18n */ { id: 'node.column.panel.rectangular', message: 'Rectangular' },
+    octagonal: /* i18n */ { id: 'node.column.panel.octagonal', message: 'Octagonal' },
+    'sixteen-sided': /* i18n */ { id: 'node.column.panel.sixteenSided', message: 'Sixteen Sided' },
+    straight: /* i18n */ { id: 'node.column.panel.straight', message: 'Straight' },
+    tapered: /* i18n */ { id: 'node.column.panel.tapered', message: 'Tapered' },
+    bulged: /* i18n */ { id: 'node.column.panel.bulged', message: 'Bulged' },
+    baluster: /* i18n */ { id: 'node.column.panel.baluster', message: 'Baluster' },
+    hourglass: /* i18n */ { id: 'node.column.panel.hourglass', message: 'Hourglass' },
+    none: /* i18n */ { id: 'node.column.panel.none', message: 'None' },
+    spiral: /* i18n */ { id: 'node.column.panel.spiral', message: 'Spiral' },
+    panelled: /* i18n */ { id: 'node.column.panel.panelled', message: 'Panelled' },
+    rectangle: /* i18n */ { id: 'node.column.panel.rectangle', message: 'Rectangle' },
+    arched: /* i18n */ { id: 'node.column.panel.arched', message: 'Arched' },
+    diamond: /* i18n */ { id: 'node.column.panel.diamond', message: 'Diamond' },
+    'simple-square': /* i18n */ { id: 'node.column.panel.simpleSquare', message: 'Simple Square' },
+    'round-rings': /* i18n */ { id: 'node.column.panel.roundRings', message: 'Round Rings' },
+    'square-plinth': /* i18n */ { id: 'node.column.panel.squarePlinth', message: 'Square Plinth' },
+    'stepped-square': /* i18n */ { id: 'node.column.panel.steppedSquare', message: 'Stepped Square' },
+    lotus: /* i18n */ { id: 'node.column.panel.lotus', message: 'Lotus' },
+    'ribbed-lotus': /* i18n */ { id: 'node.column.panel.ribbedLotus', message: 'Ribbed Lotus' },
+    'panelled-pedestal': /* i18n */ {
+        id: 'node.column.panel.panelledPedestal',
+        message: 'Panelled Pedestal',
+    },
+    simple: /* i18n */ { id: 'node.column.panel.simple', message: 'Simple' },
+    'simple-slab': /* i18n */ { id: 'node.column.panel.simpleSlab', message: 'Simple Slab' },
+    rounded: /* i18n */ { id: 'node.column.panel.rounded', message: 'Rounded' },
+    stepped: /* i18n */ { id: 'node.column.panel.stepped', message: 'Stepped' },
+    doric: /* i18n */ { id: 'node.column.panel.doric', message: 'Doric' },
+    volute: /* i18n */ { id: 'node.column.panel.volute', message: 'Volute' },
+    'ionic-volute': /* i18n */ { id: 'node.column.panel.ionicVolute', message: 'Ionic Volute' },
+    'leaf-carved': /* i18n */ { id: 'node.column.panel.leafCarved', message: 'Leaf Carved' },
+    'corinthian-leaf': /* i18n */ {
+        id: 'node.column.panel.corinthianLeaf',
+        message: 'Corinthian Leaf',
     },
-    tripodSupport: /* i18n */ { id: 'node.column.preset.tripodSupport', message: 'Tripod Support' },
-    trestleSupport: /* i18n */ { id: 'node.column.preset.trestleSupport', message: 'Trestle Frame' },
-    portalFrameSupport: /* i18n */ {
-        id: 'node.column.preset.portalFrameSupport',
-        message: 'Portal Frame',
+    'south-indian-bracket': /* i18n */ {
+        id: 'node.column.panel.southIndianBracket',
+        message: 'South Indian Bracket',
     },
-    boxFrameSupport: /* i18n */ { id: 'node.column.preset.boxFrameSupport', message: 'Box Frame' },
+    'wood-bracket': /* i18n */ { id: 'node.column.panel.woodBracket', message: 'Wood Bracket' },
+    shaft: /* i18n */ { id: 'node.column.panel.shaft', message: 'Shaft' },
+    base: /* i18n */ { id: 'node.column.panel.base', message: 'Base' },
+    capital: /* i18n */ { id: 'node.column.panel.capital', message: 'Capital' },
+    all: /* i18n */ { id: 'node.column.panel.all', message: 'All' },
+    frame: /* i18n */ { id: 'node.column.panel.frame', message: 'Frame' },
 };
-const COLUMN_PRESET_OPTIONS = Object.keys(COLUMN_PRESETS).map((value) => ({
-    value: value,
-    label: COLUMN_PRESET_LABELS[value],
-}));
+const detailFields = [
+    [
+        'fluteCount',
+        /* i18n */ { id: 'node.column.panel.fluteCount', message: 'Flute Count' },
+        0,
+        32,
+        1,
+    ],
+    [
+        'fluteDepth',
+        /* i18n */ { id: 'node.column.panel.fluteDepth', message: 'Flute Depth' },
+        0.005,
+        0.08,
+        0.005,
+    ],
+    [
+        'fluteWidth',
+        /* i18n */ { id: 'node.column.panel.fluteWidth', message: 'Flute Width' },
+        0.005,
+        0.1,
+        0.005,
+    ],
+    [
+        'spiralRibCount',
+        /* i18n */ { id: 'node.column.panel.spiralRibCount', message: 'Spiral Ribs' },
+        0,
+        32,
+        1,
+    ],
+    [
+        'spiralTwist',
+        /* i18n */ { id: 'node.column.panel.spiralTwist', message: 'Spiral Turns' },
+        -3,
+        3,
+        0.1,
+    ],
+    [
+        'panelCount',
+        /* i18n */ { id: 'node.column.panel.panelCount', message: 'Carved Panels' },
+        0,
+        24,
+        1,
+    ],
+    [
+        'panelInsetDepth',
+        /* i18n */ { id: 'node.column.panel.panelInsetDepth', message: 'Panel Relief' },
+        0,
+        0.1,
+        0.005,
+    ],
+    [
+        'latheRingCount',
+        /* i18n */ { id: 'node.column.panel.latheRingCount', message: 'Lathe Rings' },
+        0,
+        32,
+        1,
+    ],
+    ['voluteCount', /* i18n */ { id: 'node.column.panel.voluteCount', message: 'Volutes' }, 0, 8, 1],
+    [
+        'voluteSize',
+        /* i18n */ { id: 'node.column.panel.voluteSize', message: 'Volute Size' },
+        0.02,
+        0.3,
+        0.01,
+    ],
+    ['leafCount', /* i18n */ { id: 'node.column.panel.leafCount', message: 'Leaves' }, 0, 48, 1],
+    ['leafRows', /* i18n */ { id: 'node.column.panel.leafRows', message: 'Leaf Rows' }, 0, 4, 1],
+    [
+        'bracketDepth',
+        /* i18n */ { id: 'node.column.panel.bracketDepth', message: 'Bracket Depth' },
+        0,
+        1.5,
+        0.01,
+    ],
+    [
+        'bracketTierCount',
+        /* i18n */ { id: 'node.column.panel.bracketTierCount', message: 'Bracket Tiers' },
+        0,
+        8,
+        1,
+    ],
+    [
+        'pendantCount',
+        /* i18n */ { id: 'node.column.panel.pendantCount', message: 'Pendants' },
+        0,
+        16,
+        1,
+    ],
+    [
+        'baseRibCount',
+        /* i18n */ { id: 'node.column.panel.baseRibCount', message: 'Base Ribs' },
+        0,
+        48,
+        1,
+    ],
+    [
+        'baseCarvingLevel',
+        /* i18n */ { id: 'node.column.panel.baseCarvingLevel', message: 'Base Carving' },
+        0,
+        4,
+        1,
+    ],
+    [
+        'capitalCarvingLevel',
+        /* i18n */ { id: 'node.column.panel.capitalCarvingLevel', message: 'Capital Carving' },
+        0,
+        4,
+        1,
+    ],
+];
+const SELECT_CLASS = 'h-10 w-full rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm text-foreground outline-none transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] focus:ring-1 focus:ring-border';
 const COLUMN_PROPORTION_PRESETS = {
     slender: {
         label: /* i18n */ { id: 'node.column.panel.slender', message: 'Slender' },
@@ -95,136 +236,9 @@ const COLUMN_PROPORTION_OPTIONS = Object.entries(COLUMN_PROPORTION_PRESETS).map(
     value: value,
     label: preset.label,
 }));
-const SUPPORT_STYLE_OPTIONS = [
-    {
-        label: /* i18n */ { id: 'node.column.panel.vertical', message: 'Vertical' },
-        value: 'vertical',
-    },
-    { label: /* i18n */ { id: 'node.column.panel.aFrame', message: 'A-Frame' }, value: 'a-frame' },
-    {
-        label: /* i18n */ { id: 'node.column.panel.ySupport', message: 'Y Support' },
-        value: 'y-frame',
-    },
-    {
-        label: /* i18n */ { id: 'node.column.panel.vSupport', message: 'V Support' },
-        value: 'v-frame',
-    },
-    { label: /* i18n */ { id: 'node.column.panel.xBrace', message: 'X Brace' }, value: 'x-brace' },
-    { label: /* i18n */ { id: 'node.column.panel.kBrace', message: 'K Brace' }, value: 'k-brace' },
-    {
-        label: /* i18n */ { id: 'node.column.panel.singleStrut', message: 'Single Strut' },
-        value: 'single-strut',
-    },
-    { label: /* i18n */ { id: 'node.column.panel.tripod', message: 'Tripod' }, value: 'tripod' },
-    { label: /* i18n */ { id: 'node.column.panel.trestle', message: 'Trestle' }, value: 'trestle' },
-    {
-        label: /* i18n */ { id: 'node.column.panel.portalFrame', message: 'Portal Frame' },
-        value: 'portal-frame',
-    },
-    {
-        label: /* i18n */ { id: 'node.column.panel.boxFrame', message: 'Box Frame' },
-        value: 'box-frame',
-    },
-];
-// Per-style brace defaults. Values mirror each support's renderer
-// fall-through expressions so switching styles snaps the column to the
-// shape that style was designed around — e.g. an A-frame opens wide at
-// the foot and pinches at the top, an X-brace runs parallel legs, a
-// tripod's "bottomSpread" / "topSpread" double as its X-span / Z-span.
-// Without these, a user who customised one style (say A-frame bottom =
-// 2.0) then switched to Y-frame would carry that 2.0 around in state
-// even though Y-frame doesn't use it — and switching back to X-brace
-// would inherit the leftover 0.12 top from A-frame, making the X look
-// pinched.
-const SUPPORT_STYLE_DEFAULTS = {
-    'a-frame': {
-        braceBottomSpread: 1.4,
-        braceTopSpread: 0.12,
-        braceWidth: 0.16,
-        braceDepth: 0.16,
-    },
-    'y-frame': {
-        braceBottomSpread: 0.2,
-        braceTopSpread: 0.9,
-        braceWidth: 0.16,
-        braceDepth: 0.16,
-    },
-    'v-frame': {
-        braceBottomSpread: 0.2,
-        braceTopSpread: 1.0,
-        braceWidth: 0.16,
-        braceDepth: 0.16,
-    },
-    'x-brace': {
-        braceBottomSpread: 1.0,
-        braceTopSpread: 1.0,
-        braceWidth: 0.14,
-        braceDepth: 0.14,
-    },
-    'k-brace': {
-        braceBottomSpread: 1.0,
-        braceTopSpread: 1.0,
-        braceWidth: 0.14,
-        braceDepth: 0.14,
-    },
-    'single-strut': {
-        braceBottomSpread: 0.6,
-        braceTopSpread: 0.6,
-        braceWidth: 0.12,
-        braceDepth: 0.12,
-    },
-    tripod: {
-        // bottomSpread = X span, topSpread = Z span (tripod's three legs).
-        braceBottomSpread: 1.1,
-        braceTopSpread: 1.1,
-        braceWidth: 0.12,
-        braceDepth: 0.12,
-    },
-    trestle: {
-        braceBottomSpread: 1.2,
-        braceTopSpread: 1.0,
-        braceWidth: 0.16,
-        braceDepth: 0.16,
-    },
-    'portal-frame': {
-        braceBottomSpread: 1.4,
-        braceTopSpread: 1.0,
-        braceWidth: 0.16,
-        braceDepth: 0.16,
-    },
-    'box-frame': {
-        // bottomSpread = X span, topSpread = Z span (rectangular footprint).
-        braceBottomSpread: 1.4,
-        braceTopSpread: 1.0,
-        braceWidth: 0.16,
-        braceDepth: 0.16,
-    },
-};
 function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));
 }
-function isManagedLeanToPost(node) {
-    const metadata = node.metadata;
-    if (!metadata || typeof metadata !== 'object' || Array.isArray(metadata))
-        return false;
-    const record = metadata;
-    return record.managedByLeanTo !== undefined && record.leanToRole === 'post';
-}
-function filterManagedLeanToLayoutUpdates(updates) {
-    const filtered = { ...updates };
-    for (const key of MANAGED_LEAN_TO_LAYOUT_FIELDS) {
-        delete filtered[key];
-    }
-    return filtered;
-}
-function presetUpdates(presetId) {
-    const { label, ...preset } = COLUMN_PRESETS[presetId];
-    return {
-        name: label,
-        supportStyle: 'supportStyle' in preset ? preset.supportStyle : 'vertical',
-        ...preset,
-    };
-}
 function proportionUpdates(node, presetId) {
     const preset = COLUMN_PROPORTION_PRESETS[presetId];
     const depth = node.crossSection === 'rectangular'
@@ -257,7 +271,7 @@ function shaftProfileUpdates(shaftProfile) {
             shaftSegmentCount: 32,
         };
     }
-    if (shaftProfile === 'bulged') {
+    if (shaftProfile === 'bulged' || shaftProfile === 'baluster') {
         return {
             shaftProfile,
             shaftTaper: 0,
@@ -295,17 +309,34 @@ export default function ColumnPanel() {
     const updateNodes = useScene((s) => s.updateNodes);
     const deleteNode = useScene((s) => s.deleteNode);
     const setMovingNode = useEditor((s) => s.setMovingNode);
-    const node = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
+    const storedNode = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
+    const overrides = useLiveNodeOverrides((s) => selectedId ? s.overrides.get(selectedId) : undefined);
+    const [previewingPreset, setPreviewingPreset] = useState(false);
+    const node = storedNode && overrides && !previewingPreset
+        ? { ...storedNode, ...overrides }
+        : storedNode;
+    const preview = useMemo(() => (selectedId ? createColumnPropertyPreview(selectedId) : null), [selectedId]);
+    useEffect(() => () => preview?.cancel(), [preview]);
+    const previewProp = useCallback((updates) => preview?.preview(updates), [preview]);
+    const commitPreview = useCallback(() => preview?.commit(), [preview]);
+    const cancelPreview = useCallback(() => preview?.cancel(), [preview]);
+    const previewPreset = useCallback((updates) => {
+        // Presets preview the scene, while controls keep the committed shape's layout.
+        setPreviewingPreset(true);
+        preview?.preview(updates);
+    }, [preview]);
+    const cancelPresetPreview = useCallback(() => {
+        preview?.cancel();
+        setPreviewingPreset(false);
+    }, [preview]);
     const handleUpdate = useCallback((updates) => {
         if (!selectedId)
             return;
-        const nextUpdates = node && isManagedLeanToPost(node) ? filterManagedLeanToLayoutUpdates(updates) : updates;
-        if (Object.keys(nextUpdates).length === 0)
-            return;
-        const updatesToApply = planColumnEdit(selectedId, nextUpdates);
+        preview?.cancel();
+        const updatesToApply = planColumnEdit(selectedId, updates);
         if (updatesToApply)
             updateNodes(updatesToApply.map(([id, data]) => ({ id, data })));
-    }, [node, selectedId, updateNodes]);
+    }, [selectedId, updateNodes, preview]);
     const handleClose = useCallback(() => {
         setSelection({ selectedIds: [] });
     }, [setSelection]);
@@ -317,7 +348,7 @@ export default function ColumnPanel() {
         setSelection({ selectedIds: [] });
     }, [deleteNode, selectedId, setSelection]);
     const handleMove = useCallback(() => {
-        if (!node)
+        if (!node || isManagedColumn(node))
             return;
         triggerSFX('sfx:item-pick');
         setMovingNode(node);
@@ -326,8 +357,10 @@ export default function ColumnPanel() {
     if (!(node && node.type === 'column' && selectedId && selectedCount === 1))
         return null;
     const shaftProfile = node.shaftProfile ?? 'straight';
+    const radialSection = ['round', 'octagonal', 'sixteen-sided'].includes(node.crossSection);
+    const spatialFrame = ['tripod', 'trestle', 'box-frame'].includes(node.supportStyle);
     const supportStyle = node.supportStyle ?? 'vertical';
-    const managedByLeanTo = isManagedLeanToPost(node);
+    const managedByLeanTo = isManagedColumn(node);
     const isBraceSupport = supportStyle === 'a-frame' ||
         supportStyle === 'y-frame' ||
         supportStyle === 'v-frame' ||
@@ -338,201 +371,256 @@ export default function ColumnPanel() {
         supportStyle === 'trestle' ||
         supportStyle === 'portal-frame' ||
         supportStyle === 'box-frame';
-    return (_jsxs(PanelWrapper, { icon: scriptImages(node)?.thumbnail ?? '/icons/column.webp', onClose: handleClose, title: node.name || i18n._({ id: 'node.column.panel.column', message: 'Column' }), width: 300, children: [node.role === 'post' ? (_jsx(FramingPostSection, { node: node, onUpdate: handleUpdate })) : node.source ? (_jsx(AuthoredParams, { node: node })) : (_jsxs(_Fragment, { children: [_jsx(PanelSection, { title: i18n._({ id: 'node.column.panel.preset', message: 'Preset' }), children: _jsxs("select", { className: SELECT_CLASS, onChange: (event) => {
-                                if (!event.target.value)
-                                    return;
-                                handleUpdate(presetUpdates(event.target.value));
-                            }, value: "", children: [_jsx("option", { value: "", children: i18n._({ id: 'node.column.panel.applyPreset', message: 'Apply preset...' }) }), COLUMN_PRESET_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: i18n._(option.label) }, option.value)))] }) }), _jsxs(PanelSection, { title: i18n._({ id: 'node.column.panel.shape', message: 'Shape' }), children: [_jsx("div", { className: "grid grid-cols-2 gap-2 px-1 pt-1", children: SUPPORT_STYLE_OPTIONS.map((option) => {
-                                    const isSelected = supportStyle === option.value;
-                                    return (_jsx("button", { className: cn('flex min-h-12 items-center rounded-lg border px-3 py-2.5 text-left text-xs transition-colors', isSelected
-                                            ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
-                                            : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground'), onClick: () => {
-                                            // Per-style brace defaults reset the column to that
-                                            // style's natural proportions on switch. Spread last
-                                            // so the preset's braceWidth / braceDepth win over
-                                            // the carried-from-previous-style values.
-                                            const stylePreset = option.value === 'vertical' ? {} : SUPPORT_STYLE_DEFAULTS[option.value];
-                                            handleUpdate({
-                                                supportStyle: option.value,
-                                                ...(option.value !== 'vertical'
-                                                    ? {
-                                                        crossSection: 'rectangular',
-                                                        width: node.braceWidth ?? node.width,
-                                                        depth: node.braceDepth ?? node.depth,
-                                                        baseStyle: 'none',
-                                                        capitalStyle: 'none',
-                                                    }
-                                                    : {}),
-                                                ...stylePreset,
-                                            });
-                                        }, type: "button", children: _jsx("span", { className: "min-w-0 break-words font-medium", children: i18n._(option.label) }) }, option.value));
-                                }) }), isBraceSupport ? (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.braceWidth', message: 'Brace Width' }), max: 0.8, min: 0.04, onChange: (value) => handleUpdate({ braceWidth: value, width: value }), precision: 2, step: 0.01, unit: "m", value: node.braceWidth ?? node.width }), _jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.braceDepth', message: 'Brace Depth' }), max: 0.8, min: 0.04, onChange: (value) => handleUpdate({ braceDepth: value, depth: value }), precision: 2, step: 0.01, unit: "m", value: node.braceDepth ?? node.depth })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-3 gap-2 px-1 pt-1", children: [
-                                            {
-                                                value: 'round',
-                                                label: i18n._({ id: 'node.column.panel.round', message: 'Round' }),
-                                                icon: (_jsx("svg", { "aria-hidden": "true", fill: "none", height: "22", viewBox: "0 0 22 22", width: "22", children: _jsx("circle", { cx: "11", cy: "11", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }) })),
-                                            },
-                                            {
-                                                value: 'square',
-                                                label: i18n._({ id: 'node.column.panel.square', message: 'Square' }),
-                                                icon: (_jsx("svg", { "aria-hidden": "true", fill: "none", height: "22", viewBox: "0 0 22 22", width: "22", children: _jsx("rect", { height: "15", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", width: "15", x: "3.5", y: "3.5" }) })),
-                                            },
-                                            {
-                                                value: 'rectangular',
-                                                label: i18n._({
-                                                    id: 'node.column.panel.rectangular',
-                                                    message: 'Rectangular',
-                                                }),
-                                                icon: (_jsx("svg", { "aria-hidden": "true", fill: "none", height: "22", viewBox: "0 0 22 22", width: "22", children: _jsx("rect", { height: "11", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", width: "16", x: "3", y: "5.5" }) })),
-                                            },
-                                        ].map((option) => {
-                                            const isSelected = node.crossSection === option.value;
-                                            return (_jsxs("button", { className: cn('group flex flex-col items-center justify-center gap-1.5 rounded-lg border py-2.5 transition-all', isSelected
-                                                    ? 'border-orange-400/60 bg-orange-400/10 text-foreground shadow-[0_0_0_1px_rgba(251,146,60,0.25)_inset]'
-                                                    : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:border-border hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground'), onClick: () => handleUpdate({ crossSection: option.value }), type: "button", children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center', isSelected
-                                                            ? 'text-orange-700 dark:text-orange-300'
-                                                            : 'text-muted-foreground/80'), children: option.icon }), _jsx("span", { className: "font-medium text-[11px] leading-none tracking-wide", children: option.label })] }, option.value));
-                                        }) }), _jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.edgeSoftness', message: 'Edge Softness' }), max: 0.12, min: 0, onChange: (value) => handleUpdate({ edgeSoftness: value }), precision: 3, step: 0.005, unit: "m", value: node.edgeSoftness ?? 0.025 }), (node.crossSection === 'square' || node.crossSection === 'rectangular') && (_jsx(SliderControl, { label: i18n._({
-                                            id: 'node.column.panel.shaftCornerRadius',
-                                            message: 'Shaft Corner Radius',
-                                        }), max: 0.3, min: 0, onChange: (value) => handleUpdate({ shaftCornerRadius: value }), precision: 3, step: 0.005, unit: "m", value: node.shaftCornerRadius ?? 0.035 }))] }))] }), _jsxs(PanelSection, { title: i18n._({ id: 'node.column.panel.dimensions', message: 'Dimensions' }), children: [managedByLeanTo && (_jsx("p", { className: "px-1 pt-1 text-muted-foreground text-xs leading-relaxed", children: i18n._({
-                                    id: 'node.column.panel.heightAndFootprintAreControlledBy',
-                                    message: 'Height and footprint are controlled by the lean-to extension. Rotate or change the support style here; resize from the parent lean-to.',
-                                }) })), !isBraceSupport && !managedByLeanTo && (_jsxs("select", { className: SELECT_CLASS, onChange: (event) => {
-                                    if (!event.target.value)
-                                        return;
-                                    handleUpdate(proportionUpdates(node, event.target.value));
-                                }, value: "", children: [_jsx("option", { value: "", children: i18n._({
-                                            id: 'node.column.panel.applyProportion',
-                                            message: 'Apply proportion...',
-                                        }) }), COLUMN_PROPORTION_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: i18n._(option.label) }, option.value)))] })), !managedByLeanTo && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.height', message: 'Height' }), max: 1000, min: 0.8, onChange: (value) => handleUpdate({ height: value }), precision: 2, step: 0.05, unit: "m", value: node.height })), isBraceSupport ? (_jsxs(_Fragment, { children: [(supportStyle === 'a-frame' ||
-                                        supportStyle === 'x-brace' ||
-                                        supportStyle === 'k-brace' ||
-                                        supportStyle === 'single-strut' ||
-                                        supportStyle === 'tripod' ||
-                                        supportStyle === 'trestle' ||
-                                        supportStyle === 'portal-frame' ||
-                                        supportStyle === 'box-frame') && (_jsx(SliderControl, { label: i18n._({
-                                            id: 'node.column.panel.bottomSpread',
-                                            message: 'Bottom Spread',
-                                        }), max: 1000, min: 0.2, onChange: (value) => handleUpdate({
-                                            braceBottomSpread: value,
-                                            braceTopSpread: supportStyle === 'a-frame'
-                                                ? Math.min(node.braceTopSpread ?? 0.12, value)
-                                                : (node.braceTopSpread ?? 1),
-                                        }), precision: 2, step: 0.05, unit: "m", value: node.braceBottomSpread ?? 1.2 })), _jsx(SliderControl, { label: supportStyle === 'y-frame'
-                                            ? i18n._({ id: 'node.column.panel.forkSpread', message: 'Fork Spread' })
-                                            : i18n._({ id: 'node.column.panel.topSpread', message: 'Top Spread' }), max: supportStyle === 'y-frame' ||
-                                            supportStyle === 'v-frame' ||
+    const renderDetails = (fields) => fields.map(([field, label, min, max, step]) => (_jsx(SliderControl, { label: i18n._(label), min: min, max: max, step: step, precision: step === 1 ? 0 : 3, unit: field === 'spiralTwist' ? 'turns' : step === 1 ? '' : 'm', value: node[field], onChange: (value) => previewProp({ [field]: value }), onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false }, field)));
+    const hasPanels = node.panelCount > 0 || node.style === 'dravidian-carved' || node.shaftDetail === 'panelled';
+    const shaftFields = detailFields.filter(([field]) => {
+        if (field.startsWith('flute'))
+            return node.crossSection === 'round' && (node.fluteCount > 0 || node.shaftDetail === 'fluted');
+        if (field.startsWith('spiral'))
+            return node.spiralRibCount > 0 || node.shaftDetail === 'spiral';
+        if (field.startsWith('panel'))
+            return hasPanels;
+        if (field === 'latheRingCount')
+            return node.latheRingCount > 0 || node.shaftDetail === 'lathe-turned';
+        return false;
+    });
+    const capitalFields = detailFields.filter(([field]) => {
+        if (node.capitalStyle === 'none')
+            return false;
+        if (field.startsWith('volute'))
+            return ['volute', 'ionic-volute'].includes(node.capitalStyle);
+        if (field.startsWith('leaf'))
+            return ['leaf-carved', 'corinthian-leaf'].includes(node.capitalStyle);
+        if (field.startsWith('bracket') || field === 'pendantCount')
+            return ['south-indian-bracket', 'wood-bracket'].includes(node.capitalStyle);
+        return field === 'capitalCarvingLevel' && ['capital', 'all'].includes(node.carvingPlacement);
+    });
+    const baseFields = detailFields.filter(([field]) => node.baseStyle !== 'none' &&
+        ((field === 'baseRibCount' && ['lotus', 'ribbed-lotus'].includes(node.baseStyle)) ||
+            (field === 'baseCarvingLevel' && ['base', 'all'].includes(node.carvingPlacement))));
+    return (_jsx(PanelWrapper, { icon: scriptImages(node)?.thumbnail ?? '/icons/column.webp', onClose: handleClose, title: node.name || i18n._({ id: 'node.column.panel.column', message: 'Column' }), width: 300, children: _jsxs(ColumnInspectorHover, { nodeId: selectedId, children: [node.role === 'post' ? (_jsx(FramingPostSection, { node: node, onUpdate: handleUpdate })) : node.source ? (_jsx("div", { "data-column-part": "all", children: _jsx(AuthoredParams, { node: node }) })) : (_jsxs(_Fragment, { children: [_jsxs(PanelSection, { part: "all", title: i18n._({ id: 'node.column.panel.shape', message: 'Shape' }), children: [_jsx("button", { type: "button", className: "self-end text-xs text-muted-foreground hover:text-foreground", onClick: () => handleUpdate(columnSectionReset('Shape')), children: i18n._({ id: 'node.column.panel.resetShape', message: 'Reset shape' }) }), _jsx(ColumnPresetGallery, { node: node, onPreview: previewPreset, onCancel: cancelPresetPreview, onApply: handleUpdate }), !isBraceSupport && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-xs text-muted-foreground", children: i18n._({ id: 'node.column.panel.style', message: 'Style' }) }), _jsx("select", { "aria-label": i18n._({
+                                                id: 'node.column.panel.columnStyle',
+                                                message: 'Column style',
+                                            }), className: SELECT_CLASS, value: node.style, onChange: (event) => handleUpdate({ style: ColumnStyle.parse(event.target.value) }), children: ColumnStyle.options.map((value) => (_jsx("option", { value: value, children: i18n._(COLUMN_OPTION_LABELS[value]) }, value))) }), _jsx("p", { className: "text-xs text-muted-foreground", children: i18n._({ id: 'node.column.panel.crossSection', message: 'Cross section' }) }), _jsx("select", { "aria-label": i18n._({
+                                                id: 'node.column.panel.crossSection',
+                                                message: 'Cross section',
+                                            }), className: SELECT_CLASS, value: node.crossSection, onChange: (event) => handleUpdate({ crossSection: ColumnCrossSection.parse(event.target.value) }), children: ColumnCrossSection.options.map((value) => (_jsx("option", { value: value, children: i18n._(COLUMN_OPTION_LABELS[value]) }, value))) }), _jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                                id: 'node.column.panel.edgeSoftness',
+                                                message: 'Edge Softness',
+                                            }), max: 0.12, min: 0, onChange: (value) => previewProp({ edgeSoftness: value }), precision: 3, step: 0.005, unit: "m", value: node.edgeSoftness ?? 0.025 }), (node.crossSection === 'square' || node.crossSection === 'rectangular') && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                                id: 'node.column.panel.shaftCornerRadius',
+                                                message: 'Shaft Corner Radius',
+                                            }), max: 0.3, min: 0, onChange: (value) => previewProp({ shaftCornerRadius: value }), precision: 3, step: 0.005, unit: "m", value: node.shaftCornerRadius ?? 0.035 }))] }))] }), _jsxs(PanelSection, { part: "all", title: i18n._({ id: 'node.column.panel.size', message: 'Size' }), children: [_jsx("button", { type: "button", className: "self-end text-xs text-muted-foreground hover:text-foreground", onClick: () => handleUpdate(columnSectionReset('Size')), children: i18n._({ id: 'node.column.panel.resetSize', message: 'Reset size' }) }), isBraceSupport && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.memberWidth', message: 'Member Width' }), axis: "x", max: 1000, min: 0.04, onChange: (value) => previewProp({ braceWidth: value, width: value }), precision: 2, step: 0.01, unit: "m", value: node.braceWidth ?? node.width }), _jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.memberDepth', message: 'Member Depth' }), axis: "z", max: 1000, min: 0.04, onChange: (value) => previewProp({ braceDepth: value, depth: value }), precision: 2, step: 0.01, unit: "m", value: node.braceDepth ?? node.depth })] })), managedByLeanTo && (_jsx("p", { className: "px-1 pt-1 text-muted-foreground text-xs leading-relaxed", children: i18n._({
+                                        id: 'node.column.panel.heightAndFootprintAreControlledBy',
+                                        message: 'Height and footprint are controlled by the lean-to extension. Rotate or change the support style here; resize from the parent lean-to.',
+                                    }) })), !isBraceSupport && !managedByLeanTo && (_jsxs("select", { "aria-label": i18n._({
+                                        id: 'node.column.panel.columnProportions',
+                                        message: 'Column proportions',
+                                    }), className: SELECT_CLASS, onChange: (event) => {
+                                        if (!event.target.value)
+                                            return;
+                                        handleUpdate(proportionUpdates(node, event.target.value));
+                                    }, value: "", children: [_jsx("option", { value: "", children: i18n._({
+                                                id: 'node.column.panel.applyProportion',
+                                                message: 'Apply proportion...',
+                                            }) }), COLUMN_PROPORTION_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: i18n._(option.label) }, option.value)))] })), !managedByLeanTo && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.height', message: 'Height' }), axis: "y", max: 1000, min: 0.2, onChange: (value) => previewProp({ height: value }), precision: 2, step: 0.05, unit: "m", value: node.height })), isBraceSupport ? (_jsxs(_Fragment, { children: [(supportStyle === 'a-frame' ||
                                             supportStyle === 'x-brace' ||
                                             supportStyle === 'k-brace' ||
                                             supportStyle === 'single-strut' ||
                                             supportStyle === 'tripod' ||
                                             supportStyle === 'trestle' ||
-                                            supportStyle === 'box-frame'
-                                            ? 4
-                                            : Math.max(0.2, node.braceBottomSpread ?? 1.2), min: 0, onChange: (value) => handleUpdate({ braceTopSpread: value }), precision: 2, step: 0.02, unit: "m", value: node.braceTopSpread ??
-                                            (supportStyle === 'y-frame' ||
+                                            supportStyle === 'portal-frame' ||
+                                            supportStyle === 'box-frame') && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, axis: "x", label: spatialFrame || supportStyle === 'portal-frame'
+                                                ? i18n._({ id: 'node.column.panel.widthSpan', message: 'Width Span' })
+                                                : i18n._({
+                                                    id: 'node.column.panel.bottomSpread',
+                                                    message: 'Bottom Spread',
+                                                }), max: 1000, min: 0.2, onChange: (value) => previewProp({
+                                                braceBottomSpread: value,
+                                                braceTopSpread: supportStyle === 'a-frame'
+                                                    ? Math.min(node.braceTopSpread ?? 0.12, value)
+                                                    : (node.braceTopSpread ?? 1),
+                                            }), precision: 2, step: 0.05, unit: "m", value: node.braceBottomSpread ?? 1.2 })), supportStyle !== 'portal-frame' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, axis: spatialFrame ? 'z' : 'x', label: spatialFrame
+                                                ? i18n._({ id: 'node.column.panel.depthSpan', message: 'Depth Span' })
+                                                : supportStyle === 'y-frame' || supportStyle === 'v-frame'
+                                                    ? i18n._({ id: 'node.column.panel.forkSpread', message: 'Fork Spread' })
+                                                    : i18n._({ id: 'node.column.panel.topSpread', message: 'Top Spread' }), max: supportStyle === 'y-frame' ||
                                                 supportStyle === 'v-frame' ||
                                                 supportStyle === 'x-brace' ||
                                                 supportStyle === 'k-brace' ||
                                                 supportStyle === 'single-strut' ||
                                                 supportStyle === 'tripod' ||
                                                 supportStyle === 'trestle' ||
-                                                supportStyle === 'portal-frame' ||
                                                 supportStyle === 'box-frame'
-                                                ? 1
-                                                : 0.12) }), _jsx(ToggleControl, { checked: node.bracePlateEnabled ?? true, label: i18n._({
-                                            id: 'node.column.panel.connectorPlates',
-                                            message: 'Connector Plates',
-                                        }), onChange: (checked) => handleUpdate({ bracePlateEnabled: checked }) })] })) : !managedByLeanTo ? (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.width', message: 'Width' }), max: 1000, min: 0.12, onChange: (value) => handleUpdate({
-                                            width: value,
-                                            radius: value / 2,
-                                            ...(node.crossSection === 'rectangular' ? {} : { depth: value }),
-                                        }), precision: 2, step: 0.02, unit: "m", value: node.width }), node.crossSection === 'rectangular' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.depth', message: 'Depth' }), max: 1000, min: 0.12, onChange: (value) => handleUpdate({ depth: value }), precision: 2, step: 0.02, unit: "m", value: node.depth }))] })) : null] }), !isBraceSupport && (_jsxs(PanelSection, { title: i18n._({ id: 'node.column.panel.shaft', message: 'Shaft' }), children: [_jsxs("select", { className: SELECT_CLASS, onChange: (event) => handleUpdate(shaftProfileUpdates(event.target.value)), value: shaftProfile, children: [_jsx("option", { value: "straight", children: i18n._({ id: 'node.column.panel.straight', message: 'Straight' }) }), _jsx("option", { value: "tapered", children: i18n._({ id: 'node.column.panel.tapered', message: 'Tapered' }) }), _jsx("option", { value: "bulged", children: i18n._({ id: 'node.column.panel.bulged', message: 'Bulged' }) }), _jsx("option", { value: "hourglass", children: i18n._({ id: 'node.column.panel.hourglass', message: 'Hourglass' }) })] }), shaftProfile === 'straight' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.shaftWidth', message: 'Shaft Width' }), max: 1.2, min: 0.3, onChange: (value) => handleUpdate({ shaftStartScale: value, shaftEndScale: value }), precision: 2, step: 0.02, value: node.shaftStartScale ?? 0.72 })), shaftProfile === 'tapered' && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.bottomWidth', message: 'Bottom Width' }), max: 1.2, min: 0.3, onChange: (value) => handleUpdate({ shaftStartScale: value }), precision: 2, step: 0.02, value: node.shaftStartScale ?? 0.82 }), _jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.topWidth', message: 'Top Width' }), max: 1.2, min: 0.3, onChange: (value) => handleUpdate({ shaftEndScale: value }), precision: 2, step: 0.02, value: node.shaftEndScale ?? 0.72 }), _jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.taper', message: 'Taper' }), max: 0.45, min: 0, onChange: (value) => handleUpdate({ shaftTaper: value }), precision: 2, step: 0.01, value: node.shaftTaper ?? 0.14 })] })), shaftProfile === 'bulged' && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.endWidth', message: 'End Width' }), max: 1.2, min: 0.3, onChange: (value) => handleUpdate({ shaftStartScale: value, shaftEndScale: value }), precision: 2, step: 0.02, value: node.shaftStartScale ?? 0.68 }), _jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.bulge', message: 'Bulge' }), max: 0.35, min: 0, onChange: (value) => handleUpdate({ shaftBulge: value }), precision: 2, step: 0.01, value: node.shaftBulge ?? 0.12 })] })), shaftProfile === 'hourglass' && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.endWidth', message: 'End Width' }), max: 1.2, min: 0.3, onChange: (value) => handleUpdate({ shaftStartScale: value, shaftEndScale: value }), precision: 2, step: 0.02, value: node.shaftStartScale ?? 0.84 }), _jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.waist', message: 'Waist' }), max: 0.35, min: 0, onChange: (value) => handleUpdate({ shaftBulge: value }), precision: 2, step: 0.01, value: node.shaftBulge ?? 0.12 })] })), _jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.segmentTwist', message: 'Segment Twist' }), max: 90, min: -90, onChange: (value) => handleUpdate({
-                                    shaftTwistStep: value,
-                                    ...(Math.abs(value) > 0.001 && (node.shaftSegmentCount ?? 1) < 8
-                                        ? { shaftSegmentCount: 12 }
-                                        : {}),
-                                }), precision: 0, step: 5, unit: "\u00B0", value: node.shaftTwistStep ?? 0 }), Math.abs(node.shaftTwistStep ?? 0) > 0.001 && (_jsx(SliderControl, { label: i18n._({
-                                    id: 'node.column.panel.twistSegments',
-                                    message: 'Twist Segments',
-                                }), max: 48, min: 4, onChange: (value) => handleUpdate({ shaftSegmentCount: Math.round(value) }), precision: 0, step: 1, value: node.shaftSegmentCount ?? 12 })), _jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.ringPairs', message: 'Ring Pairs' }), max: 4, min: 0, onChange: (value) => handleUpdate({
-                                    ringCount: Math.round(value) * 2,
-                                    ringPlacement: 'ends',
-                                    ringSpread: node.ringSpread ?? 0.16,
-                                    ringThickness: node.ringThickness ?? 0.055,
-                                }), precision: 0, step: 1, value: Math.ceil((node.ringCount ?? 0) / 2) }), (node.ringCount ?? 0) > 0 && (_jsx(SliderControl, { label: i18n._({
-                                    id: 'node.column.panel.ringThickness',
-                                    message: 'Ring Thickness',
-                                }), max: 0.14, min: 0.01, onChange: (value) => handleUpdate({ ringThickness: value }), precision: 3, step: 0.005, unit: "m", value: node.ringThickness ?? 0.055 })), (node.ringCount ?? 0) > 0 && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.ringSpread', message: 'Ring Spread' }), max: 0.45, min: 0.04, onChange: (value) => handleUpdate({ ringSpread: value, ringPlacement: 'ends' }), precision: 2, step: 0.01, value: node.ringSpread ?? 0.16 }))] })), !isBraceSupport && (_jsxs(PanelSection, { title: i18n._({ id: 'node.column.panel.ends', message: 'Ends' }), children: [_jsxs("select", { className: SELECT_CLASS, onChange: (event) => {
-                                    const capitalStyle = event.target.value;
-                                    handleUpdate({
-                                        capitalStyle,
-                                        ...(capitalStyle === 'none'
-                                            ? {}
-                                            : {
-                                                capitalHeight: Math.max(node.capitalHeight, 0.12),
-                                                capitalTierCount: capitalStyle === 'stepped'
-                                                    ? Math.max(node.capitalTierCount ?? 3, 3)
-                                                    : node.capitalTierCount,
-                                                capitalWidthScale: Math.max(node.capitalWidthScale ?? 1.3, capitalStyle === 'stepped' ? 1.42 : 1.28),
-                                                capitalDepthScale: Math.max(node.capitalDepthScale ?? 1.3, capitalStyle === 'stepped' ? 1.42 : 1.28),
-                                                capitalStepSpread: capitalStyle === 'stepped'
-                                                    ? Math.max(node.capitalStepSpread ?? 0.34, 0.34)
-                                                    : node.capitalStepSpread,
-                                            }),
-                                    });
-                                }, value: node.capitalStyle === 'simple-slab' ? 'simple' : (node.capitalStyle ?? 'simple'), children: [_jsx("option", { value: "none", children: i18n._({ id: 'node.column.panel.noTop', message: 'No Top' }) }), _jsx("option", { value: "simple", children: i18n._({ id: 'node.column.panel.simpleTop', message: 'Simple Top' }) }), _jsx("option", { value: "stepped", children: i18n._({ id: 'node.column.panel.steppedTop', message: 'Stepped Top' }) }), _jsx("option", { value: "rounded", children: i18n._({ id: 'node.column.panel.roundedTop', message: 'Rounded Top' }) })] }), node.capitalStyle !== 'none' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.topHeight', message: 'Top Height' }), max: 0.8, min: 0.06, onChange: (value) => handleUpdate({ capitalHeight: value }), precision: 2, step: 0.02, unit: "m", value: node.capitalHeight })), node.capitalStyle !== 'none' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.topWidth', message: 'Top Width' }), max: 2.4, min: 0.6, onChange: (value) => handleUpdate({
-                                    capitalWidthScale: value,
-                                    ...(node.crossSection === 'rectangular' ? {} : { capitalDepthScale: value }),
-                                }), precision: 2, step: 0.02, value: node.capitalWidthScale ?? 1.28 })), node.capitalStyle !== 'none' && node.crossSection === 'rectangular' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.topDepth', message: 'Top Depth' }), max: 2.4, min: 0.6, onChange: (value) => handleUpdate({ capitalDepthScale: value }), precision: 2, step: 0.02, value: node.capitalDepthScale ?? node.capitalWidthScale ?? 1.28 })), node.capitalStyle === 'stepped' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.topTiers', message: 'Top Tiers' }), max: 8, min: 3, onChange: (value) => handleUpdate({ capitalTierCount: Math.round(value) }), precision: 0, step: 1, value: node.capitalTierCount ?? 3 })), node.capitalStyle === 'stepped' && (_jsx(SliderControl, { label: i18n._({
-                                    id: 'node.column.panel.topStepSpread',
-                                    message: 'Top Step Spread',
-                                }), max: 0.9, min: 0.05, onChange: (value) => handleUpdate({ capitalStepSpread: value }), precision: 2, step: 0.01, value: node.capitalStepSpread ?? 0.34 })), _jsxs("select", { className: `${SELECT_CLASS} mt-2`, onChange: (event) => {
-                                    const baseStyle = event.target.value;
-                                    handleUpdate({
-                                        baseStyle,
-                                        ...(baseStyle === 'none'
-                                            ? {}
-                                            : {
-                                                baseHeight: Math.max(node.baseHeight, 0.12),
-                                                baseTierCount: baseStyle === 'stepped-square'
-                                                    ? Math.max(node.baseTierCount ?? 3, 3)
-                                                    : node.baseTierCount,
-                                                baseWidthScale: Math.max(node.baseWidthScale ?? 1.24, baseStyle === 'stepped-square' ? 1.42 : 1.24),
-                                                baseDepthScale: Math.max(node.baseDepthScale ?? 1.24, baseStyle === 'stepped-square' ? 1.42 : 1.24),
-                                                baseStepSpread: baseStyle === 'stepped-square'
-                                                    ? Math.max(node.baseStepSpread ?? 0.34, 0.34)
-                                                    : node.baseStepSpread,
-                                                basePlinthHeightRatio: baseStyle === 'round-rings'
-                                                    ? (node.basePlinthHeightRatio ?? 0.44)
-                                                    : node.basePlinthHeightRatio,
-                                                baseRoundBandScale: baseStyle === 'round-rings'
-                                                    ? (node.baseRoundBandScale ?? 0.92)
-                                                    : node.baseRoundBandScale,
-                                                baseNeckScale: baseStyle === 'round-rings'
-                                                    ? (node.baseNeckScale ?? 0.72)
-                                                    : node.baseNeckScale,
-                                            }),
-                                    });
-                                }, value: node.baseStyle ?? 'square-plinth', children: [_jsx("option", { value: "none", children: i18n._({ id: 'node.column.panel.noBottom', message: 'No Bottom' }) }), _jsx("option", { value: "simple-square", children: i18n._({
-                                            id: 'node.column.panel.simpleBlockBottom',
-                                            message: 'Simple Block Bottom',
-                                        }) }), _jsx("option", { value: "square-plinth", children: i18n._({
-                                            id: 'node.column.panel.squarePlinthBottom',
-                                            message: 'Square Plinth Bottom',
-                                        }) }), _jsx("option", { value: "stepped-square", children: i18n._({ id: 'node.column.panel.steppedBottom', message: 'Stepped Bottom' }) }), _jsx("option", { value: "round-rings", children: i18n._({ id: 'node.column.panel.roundedBottom', message: 'Rounded Bottom' }) })] }), node.baseStyle !== 'none' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.bottomHeight', message: 'Bottom Height' }), max: 0.8, min: 0.06, onChange: (value) => handleUpdate({ baseHeight: value }), precision: 2, step: 0.02, unit: "m", value: node.baseHeight })), node.baseStyle !== 'none' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.bottomWidth', message: 'Bottom Width' }), max: 2.4, min: 0.6, onChange: (value) => handleUpdate({
-                                    baseWidthScale: value,
-                                    ...(node.crossSection === 'rectangular' ? {} : { baseDepthScale: value }),
-                                }), precision: 2, step: 0.02, value: node.baseWidthScale ?? 1.24 })), node.baseStyle !== 'none' && node.crossSection === 'rectangular' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.bottomDepth', message: 'Bottom Depth' }), max: 2.4, min: 0.6, onChange: (value) => handleUpdate({ baseDepthScale: value }), precision: 2, step: 0.02, value: node.baseDepthScale ?? node.baseWidthScale ?? 1.24 })), node.baseStyle === 'round-rings' && (_jsx(SliderControl, { label: i18n._({
-                                    id: 'node.column.panel.plinthThickness',
-                                    message: 'Plinth Thickness',
-                                }), max: 0.7, min: 0.2, onChange: (value) => handleUpdate({ basePlinthHeightRatio: value }), precision: 2, step: 0.01, value: node.basePlinthHeightRatio ?? 0.44 })), node.baseStyle === 'round-rings' && (_jsx(SliderControl, { label: i18n._({
-                                    id: 'node.column.panel.roundBandWidth',
-                                    message: 'Round Band Width',
-                                }), max: 1.2, min: 0.5, onChange: (value) => handleUpdate({ baseRoundBandScale: value }), precision: 2, step: 0.01, value: node.baseRoundBandScale ?? 0.92 })), node.baseStyle === 'round-rings' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.neckWidth', message: 'Neck Width' }), max: 1, min: 0.35, onChange: (value) => handleUpdate({ baseNeckScale: value }), precision: 2, step: 0.01, value: node.baseNeckScale ?? 0.72 })), node.baseStyle === 'stepped-square' && (_jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.bottomTiers', message: 'Bottom Tiers' }), max: 8, min: 3, onChange: (value) => handleUpdate({ baseTierCount: Math.round(value) }), precision: 0, step: 1, value: node.baseTierCount ?? 3 })), node.baseStyle === 'stepped-square' && (_jsx(SliderControl, { label: i18n._({
-                                    id: 'node.column.panel.bottomStepSpread',
-                                    message: 'Bottom Step Spread',
-                                }), max: 0.9, min: 0.05, onChange: (value) => handleUpdate({ baseStepSpread: value }), precision: 2, step: 0.01, value: node.baseStepSpread ?? 0.34 }))] }))] })), _jsx(PanelSection, { title: i18n._({ id: 'node.column.panel.transform', message: 'Transform' }), children: _jsx(SliderControl, { label: i18n._({ id: 'node.column.panel.yaw', message: 'Yaw' }), max: 180, min: -180, onChange: (value) => handleUpdate({ rotation: (value * Math.PI) / 180 }), precision: 0, step: 1, unit: "\u00B0", value: Math.round((node.rotation * 180) / Math.PI) }) }), _jsx(PanelSection, { title: i18n._({ id: 'node.column.panel.actions', message: 'Actions' }), children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Move, { className: "h-4 w-4" }), label: i18n._({ id: 'node.column.panel.move', message: 'Move' }), onClick: handleMove }), _jsx(ActionButton, { className: "border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15", icon: _jsx(Trash2, { className: "h-4 w-4" }), label: i18n._({ id: 'node.column.panel.delete', message: 'Delete' }), onClick: handleDelete })] }) })] }));
+                                                ? 1000
+                                                : Math.max(0.2, node.braceBottomSpread ?? 1.2), min: 0, onChange: (value) => previewProp({ braceTopSpread: value }), precision: 2, step: 0.02, unit: "m", value: node.braceTopSpread ??
+                                                (supportStyle === 'y-frame' ||
+                                                    supportStyle === 'v-frame' ||
+                                                    supportStyle === 'x-brace' ||
+                                                    supportStyle === 'k-brace' ||
+                                                    supportStyle === 'single-strut' ||
+                                                    supportStyle === 'tripod' ||
+                                                    supportStyle === 'trestle' ||
+                                                    supportStyle === 'box-frame'
+                                                    ? 1
+                                                    : 0.12) })), _jsx(ToggleControl, { checked: node.bracePlateEnabled ?? true, label: i18n._({
+                                                id: 'node.column.panel.connectorPlates',
+                                                message: 'Connector Plates',
+                                            }), onChange: (checked) => handleUpdate({ bracePlateEnabled: checked }) })] })) : !managedByLeanTo ? (_jsxs(_Fragment, { children: [_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: radialSection
+                                                ? i18n._({ id: 'node.column.panel.diameter', message: 'Diameter' })
+                                                : i18n._({ id: 'node.column.panel.width', message: 'Width' }), axis: "x", max: 1000, min: 0.1, onChange: (value) => previewProp({
+                                                width: value,
+                                                radius: value / 2,
+                                                ...(node.crossSection === 'rectangular' ? {} : { depth: value }),
+                                            }), precision: 2, step: 0.02, unit: "m", value: radialSection ? node.radius * 2 : node.width }), node.crossSection === 'rectangular' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.depth', message: 'Depth' }), axis: "z", max: 1000, min: 0.1, onChange: (value) => previewProp({ depth: value }), precision: 2, step: 0.02, unit: "m", value: node.depth }))] })) : null] }), !isBraceSupport && node.style !== 'cluster' && (_jsxs(PanelSection, { part: "shaft", title: i18n._({ id: 'node.column.panel.profile', message: 'Profile' }), children: [_jsx("button", { type: "button", className: "self-end text-xs text-muted-foreground hover:text-foreground", onClick: () => handleUpdate(columnSectionReset('Profile')), children: i18n._({ id: 'node.column.panel.resetProfile', message: 'Reset profile' }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: i18n._({
+                                        id: 'node.column.panel.scalesMultiplyTheDimensionsInSize',
+                                        message: 'Scales multiply the dimensions in Size. A ratio of 0.2 means 20%.',
+                                    }) }), _jsx("select", { "aria-label": i18n._({
+                                        id: 'node.column.panel.shaftProfile',
+                                        message: 'Shaft profile',
+                                    }), className: SELECT_CLASS, onChange: (event) => handleUpdate(shaftProfileUpdates(event.target.value)), value: shaftProfile, children: ColumnShaftProfile.options.map((value) => (_jsx("option", { value: value, children: i18n._(COLUMN_OPTION_LABELS[value]) }, value))) }), shaftProfile === 'straight' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.shaftScale', message: 'Shaft Scale' }), unit: "\u00D7", max: 2, min: 0.2, onChange: (value) => previewProp({ shaftStartScale: value, shaftEndScale: value }), precision: 2, step: 0.02, value: node.shaftStartScale ?? 0.72 })), shaftProfile === 'tapered' && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                                id: 'node.column.panel.bottomScale',
+                                                message: 'Bottom Scale',
+                                            }), unit: "\u00D7", max: 2, min: 0.2, onChange: (value) => previewProp({ shaftStartScale: value }), precision: 2, step: 0.02, value: node.shaftStartScale ?? 0.82 }), _jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.topScale', message: 'Top Scale' }), unit: "\u00D7", max: 2, min: 0.2, onChange: (value) => previewProp({ shaftEndScale: value }), precision: 2, step: 0.02, value: node.shaftEndScale ?? 0.72 }), _jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.taperRatio', message: 'Taper Ratio' }), max: 0.85, min: 0, onChange: (value) => previewProp({ shaftTaper: value }), precision: 2, step: 0.01, value: node.shaftTaper ?? 0.14 })] })), (shaftProfile === 'bulged' || shaftProfile === 'baluster') && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.endScale', message: 'End Scale' }), unit: "\u00D7", max: 2, min: 0.2, onChange: (value) => previewProp({ shaftStartScale: value, shaftEndScale: value }), precision: 2, step: 0.02, value: node.shaftStartScale ?? 0.68 }), _jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.bulgeRatio', message: 'Bulge Ratio' }), max: 0.8, min: -0.5, onChange: (value) => previewProp({ shaftBulge: value }), precision: 2, step: 0.01, value: node.shaftBulge ?? 0.12 })] })), shaftProfile === 'hourglass' && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.endScale', message: 'End Scale' }), unit: "\u00D7", max: 2, min: 0.2, onChange: (value) => previewProp({ shaftStartScale: value, shaftEndScale: value }), precision: 2, step: 0.02, value: node.shaftStartScale ?? 0.84 }), _jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                                id: 'node.column.panel.waistReductionRatio',
+                                                message: 'Waist Reduction Ratio',
+                                            }), max: 0.8, min: -0.5, onChange: (value) => previewProp({ shaftBulge: value }), precision: 2, step: 0.01, value: node.shaftBulge ?? 0.12 })] })), _jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                        id: 'node.column.panel.twistPerSegment',
+                                        message: 'Twist per Segment',
+                                    }), max: 90, min: -90, onChange: (value) => previewProp({
+                                        shaftTwistStep: value,
+                                        ...(Math.abs(value) > 0.001 && (node.shaftSegmentCount ?? 1) < 8
+                                            ? { shaftSegmentCount: 12 }
+                                            : {}),
+                                    }), precision: 0, step: 5, unit: "\u00B0", value: node.shaftTwistStep ?? 0 }), Math.abs(node.shaftTwistStep ?? 0) > 0.001 && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                        id: 'node.column.panel.twistSegments',
+                                        message: 'Twist Segments',
+                                    }), max: 64, min: 4, onChange: (value) => previewProp({ shaftSegmentCount: Math.round(value) }), precision: 0, step: 1, value: node.shaftSegmentCount ?? 12 }))] })), !isBraceSupport && (_jsxs(_Fragment, { children: [_jsxs(PanelSection, { part: "base", title: i18n._({ id: 'node.column.panel.base', message: 'Base' }), children: [_jsx("button", { type: "button", className: "self-end text-xs text-muted-foreground hover:text-foreground", onClick: () => handleUpdate(columnSectionReset('Base')), children: i18n._({ id: 'node.column.panel.resetBase', message: 'Reset base' }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: i18n._({
+                                                id: 'node.column.panel.widthAndDepthScalesUseSize',
+                                                message: 'Width and depth scales use Size. Band and neck scales use the base footprint.',
+                                            }) }), _jsx("select", { "aria-label": i18n._({
+                                                id: 'node.column.panel.baseStyle',
+                                                message: 'Base style',
+                                            }), className: `${SELECT_CLASS} mt-2`, onChange: (event) => {
+                                                const baseStyle = event.target.value;
+                                                handleUpdate({
+                                                    baseStyle,
+                                                    ...(baseStyle === 'none'
+                                                        ? {}
+                                                        : {
+                                                            baseHeight: Math.max(node.baseHeight, 0.12),
+                                                            baseTierCount: baseStyle === 'stepped-square'
+                                                                ? Math.max(node.baseTierCount ?? 3, 3)
+                                                                : node.baseTierCount,
+                                                            baseWidthScale: Math.max(node.baseWidthScale ?? 1.24, baseStyle === 'stepped-square' ? 1.42 : 1.24),
+                                                            baseDepthScale: Math.max(node.baseDepthScale ?? 1.24, baseStyle === 'stepped-square' ? 1.42 : 1.24),
+                                                            baseStepSpread: baseStyle === 'stepped-square'
+                                                                ? Math.max(node.baseStepSpread ?? 0.34, 0.34)
+                                                                : node.baseStepSpread,
+                                                            basePlinthHeightRatio: baseStyle === 'round-rings'
+                                                                ? (node.basePlinthHeightRatio ?? 0.44)
+                                                                : node.basePlinthHeightRatio,
+                                                            baseRoundBandScale: baseStyle === 'round-rings'
+                                                                ? (node.baseRoundBandScale ?? 0.92)
+                                                                : node.baseRoundBandScale,
+                                                            baseNeckScale: baseStyle === 'round-rings'
+                                                                ? (node.baseNeckScale ?? 0.72)
+                                                                : node.baseNeckScale,
+                                                        }),
+                                                });
+                                            }, value: node.baseStyle ?? 'square-plinth', children: ColumnBaseStyle.options.map((value) => (_jsx("option", { value: value, children: i18n._(COLUMN_OPTION_LABELS[value]) }, value))) }), node.baseStyle !== 'none' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.baseHeight', message: 'Base Height' }), axis: "y", max: node.height * 0.4, min: 0, onChange: (value) => previewProp({ baseHeight: value }), precision: 2, step: 0.02, unit: "m", value: node.baseHeight })), node.baseStyle !== 'none' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.widthScale', message: 'Width Scale' }), axis: "x", unit: "\u00D7", max: 3, min: 0.4, onChange: (value) => previewProp({
+                                                baseWidthScale: value,
+                                                ...(node.crossSection === 'rectangular' ? {} : { baseDepthScale: value }),
+                                            }), precision: 2, step: 0.02, value: node.baseWidthScale ?? 1.24 })), node.baseStyle !== 'none' && node.crossSection === 'rectangular' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.depthScale', message: 'Depth Scale' }), axis: "z", unit: "\u00D7", max: 3, min: 0.4, onChange: (value) => previewProp({ baseDepthScale: value }), precision: 2, step: 0.02, value: node.baseDepthScale ?? node.baseWidthScale ?? 1.24 })), node.baseStyle === 'round-rings' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                                id: 'node.column.panel.plinthHeightFraction',
+                                                message: 'Plinth Height Fraction',
+                                            }), max: 0.7, min: 0.2, onChange: (value) => previewProp({ basePlinthHeightRatio: value }), precision: 2, step: 0.01, value: node.basePlinthHeightRatio ?? 0.44 })), node.baseStyle === 'round-rings' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.bandScale', message: 'Band Scale' }), unit: "\u00D7", max: 1.2, min: 0.5, onChange: (value) => previewProp({ baseRoundBandScale: value }), precision: 2, step: 0.01, value: node.baseRoundBandScale ?? 0.92 })), node.baseStyle === 'round-rings' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.neckScale', message: 'Neck Scale' }), unit: "\u00D7", max: 1, min: 0.35, onChange: (value) => previewProp({ baseNeckScale: value }), precision: 2, step: 0.01, value: node.baseNeckScale ?? 0.72 })), node.baseStyle === 'stepped-square' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.tierCount', message: 'Tier Count' }), max: 8, min: 3, onChange: (value) => previewProp({ baseTierCount: Math.round(value) }), precision: 0, step: 1, value: node.baseTierCount ?? 3 })), node.baseStyle === 'stepped-square' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                                id: 'node.column.panel.stepScaleReduction',
+                                                message: 'Step Scale Reduction',
+                                            }), unit: "\u00D7", max: 0.9, min: 0.05, onChange: (value) => previewProp({ baseStepSpread: value }), precision: 2, step: 0.01, value: node.baseStepSpread ?? 0.34 })), renderDetails(baseFields)] }), _jsxs(PanelSection, { part: "capital", title: i18n._({ id: 'node.column.panel.capital', message: 'Capital' }), children: [_jsx("button", { type: "button", className: "self-end text-xs text-muted-foreground hover:text-foreground", onClick: () => handleUpdate(columnSectionReset('Capital')), children: i18n._({ id: 'node.column.panel.resetCapital', message: 'Reset capital' }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: i18n._({
+                                                id: 'node.column.panel.widthAndDepthScalesMultiplyThe',
+                                                message: 'Width and depth scales multiply the dimensions in Size.',
+                                            }) }), _jsx("select", { "aria-label": i18n._({
+                                                id: 'node.column.panel.capitalStyle',
+                                                message: 'Capital style',
+                                            }), className: SELECT_CLASS, onChange: (event) => {
+                                                const capitalStyle = event.target.value;
+                                                handleUpdate({
+                                                    capitalStyle,
+                                                    ...(capitalStyle === 'none'
+                                                        ? {}
+                                                        : {
+                                                            capitalHeight: Math.max(node.capitalHeight, 0.12),
+                                                            capitalTierCount: capitalStyle === 'stepped'
+                                                                ? Math.max(node.capitalTierCount ?? 3, 3)
+                                                                : node.capitalTierCount,
+                                                            capitalWidthScale: Math.max(node.capitalWidthScale ?? 1.3, capitalStyle === 'stepped' ? 1.42 : 1.28),
+                                                            capitalDepthScale: Math.max(node.capitalDepthScale ?? 1.3, capitalStyle === 'stepped' ? 1.42 : 1.28),
+                                                            capitalStepSpread: capitalStyle === 'stepped'
+                                                                ? Math.max(node.capitalStepSpread ?? 0.34, 0.34)
+                                                                : node.capitalStepSpread,
+                                                        }),
+                                                });
+                                            }, value: node.capitalStyle, children: ColumnCapitalStyle.options.map((value) => (_jsx("option", { value: value, children: i18n._(COLUMN_OPTION_LABELS[value]) }, value))) }), node.capitalStyle !== 'none' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                                id: 'node.column.panel.capitalHeight',
+                                                message: 'Capital Height',
+                                            }), axis: "y", max: node.height * 0.4, min: 0, onChange: (value) => previewProp({ capitalHeight: value }), precision: 2, step: 0.02, unit: "m", value: node.capitalHeight })), node.capitalStyle !== 'none' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.widthScale', message: 'Width Scale' }), axis: "x", unit: "\u00D7", max: 3, min: 0.4, onChange: (value) => previewProp({
+                                                capitalWidthScale: value,
+                                                ...(node.crossSection === 'rectangular'
+                                                    ? {}
+                                                    : { capitalDepthScale: value }),
+                                            }), precision: 2, step: 0.02, value: node.capitalWidthScale ?? 1.28 })), node.capitalStyle !== 'none' && node.crossSection === 'rectangular' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.depthScale', message: 'Depth Scale' }), axis: "z", unit: "\u00D7", max: 3, min: 0.4, onChange: (value) => previewProp({ capitalDepthScale: value }), precision: 2, step: 0.02, value: node.capitalDepthScale ?? node.capitalWidthScale ?? 1.28 })), node.capitalStyle === 'stepped' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.tierCount', message: 'Tier Count' }), max: 8, min: 3, onChange: (value) => previewProp({ capitalTierCount: Math.round(value) }), precision: 0, step: 1, value: node.capitalTierCount ?? 3 })), node.capitalStyle === 'stepped' && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                                id: 'node.column.panel.stepScaleReduction',
+                                                message: 'Step Scale Reduction',
+                                            }), unit: "\u00D7", max: 0.9, min: 0.05, onChange: (value) => previewProp({ capitalStepSpread: value }), precision: 2, step: 0.01, value: node.capitalStepSpread ?? 0.34 })), renderDetails(capitalFields)] })] })), !isBraceSupport && (_jsxs(PanelSection, { part: "shaft", title: i18n._({
+                                id: 'node.column.panel.surfaceDetails',
+                                message: 'Surface Details',
+                            }), children: [_jsx("button", { type: "button", className: "self-end text-xs text-muted-foreground hover:text-foreground", onClick: () => handleUpdate(columnSectionReset('Surface Details')), children: i18n._({
+                                        id: 'node.column.panel.resetSurfaceDetails',
+                                        message: 'Reset surface details',
+                                    }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: i18n._({ id: 'node.column.panel.shaftDetail', message: 'Shaft detail' }) }), _jsx("select", { "aria-label": i18n._({
+                                        id: 'node.column.panel.shaftDetail',
+                                        message: 'Shaft detail',
+                                    }), className: SELECT_CLASS, value: node.shaftDetail, onChange: (event) => handleUpdate({ shaftDetail: ColumnShaftDetail.parse(event.target.value) }), children: ColumnShaftDetail.options.map((value) => (_jsx("option", { value: value, disabled: value === 'fluted' && node.crossSection !== 'round', children: i18n._(COLUMN_OPTION_LABELS[value]) }, value))) }), hasPanels && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-xs text-muted-foreground", children: i18n._({ id: 'node.column.panel.panelShape', message: 'Panel shape' }) }), _jsx("select", { "aria-label": i18n._({
+                                                id: 'node.column.panel.panelShape',
+                                                message: 'Panel shape',
+                                            }), className: SELECT_CLASS, value: node.panelShape, onChange: (event) => handleUpdate({ panelShape: ColumnPanelShape.parse(event.target.value) }), children: ColumnPanelShape.options.map((value) => (_jsx("option", { value: value, children: i18n._(COLUMN_OPTION_LABELS[value]) }, value))) })] })), renderDetails(shaftFields), _jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.ringPairs', message: 'Ring Pairs' }), max: 8, min: 0, onChange: (value) => previewProp({
+                                        ringCount: Math.round(value) * 2,
+                                        ringPlacement: 'ends',
+                                        ringSpread: node.ringSpread ?? 0.16,
+                                        ringThickness: node.ringThickness ?? 0.055,
+                                    }), precision: 0, step: 1, value: Math.ceil((node.ringCount ?? 0) / 2) }), (node.ringCount ?? 0) > 0 && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                        id: 'node.column.panel.ringThickness',
+                                        message: 'Ring Thickness',
+                                    }), max: 0.14, min: 0.01, onChange: (value) => previewProp({ ringThickness: value }), precision: 3, step: 0.005, unit: "m", value: node.ringThickness ?? 0.055 })), (node.ringCount ?? 0) > 0 && (_jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({
+                                        id: 'node.column.panel.ringSpreadRatio',
+                                        message: 'Ring Spread Ratio',
+                                    }), max: 0.45, min: 0.04, onChange: (value) => previewProp({ ringSpread: value, ringPlacement: 'ends' }), precision: 2, step: 0.01, value: node.ringSpread ?? 0.16 })), (node.baseStyle !== 'none' || node.capitalStyle !== 'none') && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-xs text-muted-foreground", children: i18n._({
+                                                id: 'node.column.panel.carvingPlacement',
+                                                message: 'Carving placement',
+                                            }) }), _jsx("select", { "aria-label": i18n._({
+                                                id: 'node.column.panel.carvingPlacement',
+                                                message: 'Carving placement',
+                                            }), className: SELECT_CLASS, value: node.carvingPlacement, onChange: (event) => handleUpdate({
+                                                carvingPlacement: ColumnCarvingPlacement.parse(event.target.value),
+                                            }), children: ColumnCarvingPlacement.options.map((value) => (_jsx("option", { value: value, children: i18n._(COLUMN_OPTION_LABELS[value]) }, value))) })] }))] }))] })), _jsxs(PanelSection, { title: i18n._({ id: 'node.column.panel.materials', message: 'Materials' }), defaultExpanded: false, children: [_jsx("button", { type: "button", className: "self-end text-xs text-muted-foreground hover:text-foreground", onClick: () => handleUpdate(columnSectionReset('Materials')), children: i18n._({ id: 'node.column.panel.resetMaterials', message: 'Reset materials' }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: i18n._({
+                                id: 'node.column.panel.chooseAMaterialThenClickThe',
+                                message: 'Choose a material, then click the surface to paint.',
+                            }) }), _jsx("div", { className: "flex flex-wrap gap-1", children: (node.source
+                                ? ['all']
+                                : isBraceSupport
+                                    ? ['frame']
+                                    : [
+                                        'shaft',
+                                        ...(node.baseStyle !== 'none' ? ['base'] : []),
+                                        ...(node.capitalStyle !== 'none' ? ['capital'] : []),
+                                    ]).map((part) => (_jsx("button", { type: "button", "data-column-part": part, className: "rounded border border-border px-2 py-1 text-xs", onClick: () => {
+                                    cancelPreview();
+                                    armMaterialPaint(undefined, 'surface');
+                                }, children: part === 'all'
+                                    ? i18n._({ id: 'node.column.panel.entireObject', message: 'Entire Object' })
+                                    : i18n._(COLUMN_OPTION_LABELS[part]) }, part))) }), _jsx(ActionButton, { icon: _jsx(PaintBucket, { className: "h-4 w-4" }), label: i18n._({ id: 'node.column.panel.paintMaterials', message: 'Paint Materials' }), onClick: () => {
+                                cancelPreview();
+                                armMaterialPaint(undefined, 'surface');
+                            } })] }), _jsxs(PanelSection, { part: "all", title: i18n._({ id: 'node.column.panel.transform', message: 'Transform' }), children: [_jsx("button", { type: "button", className: "self-end text-xs text-muted-foreground hover:text-foreground", onClick: () => handleUpdate(columnSectionReset('Transform')), children: i18n._({ id: 'node.column.panel.resetTransform', message: 'Reset transform' }) }), _jsx(SliderControl, { onCommit: commitPreview, onCancel: cancelPreview, restoreOnCommit: false, label: i18n._({ id: 'node.column.panel.rotation', message: 'Rotation' }), max: 180, min: -180, onChange: (value) => previewProp({ rotation: (value * Math.PI) / 180 }), precision: 0, step: 1, unit: "\u00B0", value: Math.round((node.rotation * 180) / Math.PI) })] }), _jsx(PanelSection, { title: i18n._({ id: 'node.column.panel.actions', message: 'Actions' }), children: _jsxs(ActionGroup, { children: [!managedByLeanTo && (_jsx(ActionButton, { icon: _jsx(Move, { className: "h-4 w-4" }), label: i18n._({ id: 'node.column.panel.move', message: 'Move' }), onClick: handleMove })), _jsx(ActionButton, { className: "border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15", icon: _jsx(Trash2, { className: "h-4 w-4" }), label: i18n._({ id: 'node.column.panel.delete', message: 'Delete' }), onClick: handleDelete })] }) })] }) }));
 }