@pascal-app/nodes 1.0.3 → 1.0.4

package/dist/column/floorplan.js

@@ -1,3 +1,4 @@
+import { scriptImages, } from '@pascal-app/core';
 import { floorplanGeometryMetadata } from '@pascal-app/editor';
 import { collectStructuralGridAxes, resolveStructuralGridReference, } from '../structural-grid/coordination';
 // Offsets for the floor-plan selection arrows. Resize chevrons hug the
@@ -40,10 +41,13 @@ export function buildColumnFloorplan(node, ctx) {
     const showSelectedChrome = isSelected || isHighlighted;
     const stroke = showSelectedChrome && palette ? palette.selectedStroke : '#374151';
     const fill = showSelectedChrome ? '#fed7aa' : '#9ca3af';
+    // A scripted column draws its floor-plan image the way a catalog item does.
+    const floorPlanUrl = scriptImages(node)?.floorPlan;
     const body = {
         kind: 'polygon',
         points,
-        fill,
+        // Transparent, not none: the body stays the hit target under the image.
+        fill: floorPlanUrl ? 'transparent' : fill,
         stroke,
         strokeWidth: showSelectedChrome ? 0.03 : 0.02,
         opacity: 0.92,
@@ -63,6 +67,24 @@ export function buildColumnFloorplan(node, ctx) {
             { ...body, metadata: undefined },
         ]
         : [body];
+    if (floorPlanUrl && node.source) {
+        const { min, max } = node.source.manifest.bounds;
+        const [cx, cz] = points
+            .reduce((sum, [x, z]) => [sum[0] + x, sum[1] + z], [0, 0])
+            .map((total) => total / points.length);
+        children.push({
+            kind: 'image',
+            url: floorPlanUrl,
+            center: [cx, cz],
+            width: max[0] - min[0],
+            height: max[2] - min[2],
+            // The footprint turns by R(-rotation); the renderer's SVG rotate is R(+angle).
+            rotation: -node.rotation,
+        });
+        // The selection ring goes back on top of the image.
+        if (showSelectedChrome)
+            children.push({ ...body, fill: 'none', pointerEvents: 'none', metadata: undefined });
+    }
     const { halfX, halfZ } = columnPlanHalfExtents(node);
     const centerMarkHalf = Math.min(0.09, Math.max(0.035, Math.min(halfX, halfZ) * 0.45));
     const centerX = node.position[0];
@@ -153,7 +175,14 @@ export function buildColumnFloorplan(node, ctx) {
                 payload: { dim, planAxis: [planAxisX, planAxisY] },
             });
         };
-        if (node.supportStyle !== 'vertical') {
+        if (node.source) {
+            const params = new Set(node.source.manifest.params.map((spec) => spec.id));
+            if (params.has('width'))
+                emitArrowAlong('width', 'x', node.width / 2 + RESIZE_ARROW_OFFSET);
+            if (params.has('depth'))
+                emitArrowAlong('depth', 'z', node.depth / 2 + RESIZE_ARROW_OFFSET);
+        }
+        else if (node.supportStyle !== 'vertical') {
             // Brace columns — width + depth of the bracing structure. Spread
             // arrows (top + bottom) project to the same XZ in top-view, so
             // we only surface bracing dimensions here. The 3D set still has
@@ -197,6 +226,20 @@ export function buildColumnFloorplan(node, ctx) {
     return { kind: 'group', children };
 }
 export function getColumnFloorplanFootprint(node) {
+    if (node.source) {
+        const cos = Math.cos(node.rotation), sin = Math.sin(node.rotation);
+        const { min, max } = node.source.manifest.bounds;
+        const footprint = [
+            [min[0], min[2]],
+            [max[0], min[2]],
+            [max[0], max[2]],
+            [min[0], max[2]],
+        ];
+        return footprint.map(([x, z]) => [
+            node.position[0] + x * cos + z * sin,
+            node.position[2] - x * sin + z * cos,
+        ]);
+    }
     return getColumnPlanFootprint(node).map((point) => [point.x, point.y]);
 }
 /**
@@ -207,6 +250,8 @@ export function getColumnFloorplanFootprint(node) {
  * arrows clear the splay.
  */
 function columnPlanHalfExtents(column) {
+    if (column.source)
+        return { halfX: column.width / 2, halfZ: column.depth / 2 };
     if (column.supportStyle !== 'vertical') {
         return {
             halfX: Math.max(column.width, column.braceWidth ?? 0, column.braceBottomSpread ?? 0, column.braceTopSpread ?? 0) / 2,

package/dist/column/hosted-resize.d.ts

@@ -54,7 +54,7 @@ export declare const columnHostedPolicy: {
         pendantCount: number;
         capitalCarvingLevel: number;
         ringCount: number;
-        ringPlacement: "top" | "ends" | "even" | "bottom";
+        ringPlacement: "bottom" | "top" | "ends" | "even";
         ringThickness: number;
         ringSpread: number;
         fluteCount: number;
@@ -66,7 +66,7 @@ export declare const columnHostedPolicy: {
         panelInsetDepth: number;
         panelShape: "rectangle" | "arched" | "diamond";
         latheRingCount: number;
-        latheRingSpacing: "top" | "ends" | "even" | "bottom";
+        latheRingSpacing: "bottom" | "top" | "ends" | "even";
         carvingLevel: number;
         carvingPlacement: "base" | "shaft" | "capital" | "all";
         lowerBandEnabled: boolean;
@@ -81,6 +81,94 @@ export declare const columnHostedPolicy: {
         braceTopSpread: number;
         bracePlateEnabled: boolean;
         type: "column";
+        source?: {
+            kind: "script";
+            language: "three" | "bpy";
+            script: string;
+            params: Record<string, string | number | boolean>;
+            artifact: string;
+            manifest: {
+                bounds: {
+                    min: [number, number, number];
+                    max: [number, number, number];
+                };
+                params: {
+                    id: string;
+                    kind: "string" | "number" | "boolean";
+                    default: string | number | boolean;
+                    label?: string | undefined;
+                    min?: number | undefined;
+                    max?: number | undefined;
+                    step?: number | undefined;
+                    unit?: string | undefined;
+                    options?: string[] | undefined;
+                }[];
+                parts: {
+                    id: string;
+                    label?: string | undefined;
+                    type?: string | undefined;
+                    bounds?: {
+                        min: [number, number, number];
+                        max: [number, number, number];
+                    } | undefined;
+                }[];
+                surfaces: {
+                    y: number;
+                    polygon: [number, number][];
+                    part?: string | undefined;
+                }[];
+                slots: {
+                    id: string;
+                    label?: string | undefined;
+                    color?: string | undefined;
+                    roughness?: number | undefined;
+                    metalness?: number | undefined;
+                    transparent?: boolean | undefined;
+                    emissive?: boolean | undefined;
+                }[];
+                anchors: {
+                    id: string;
+                    position: [number, number, number];
+                    normal?: [number, number, number] | undefined;
+                }[];
+                lights: {
+                    id: string;
+                    position: [number, number, number];
+                    color: string;
+                    intensity: number;
+                    distance?: number | undefined;
+                }[];
+                undersides: {
+                    polygon: [number, number][];
+                    plane: [number, number, number, number];
+                    part?: string | undefined;
+                }[];
+                animations: {
+                    name: string;
+                    duration: number;
+                }[];
+                cutout: boolean;
+                collider: boolean;
+                triangles: number;
+                cutters?: {
+                    host: "wall" | "slab" | "ceiling" | "mounted";
+                    polygon: number[][];
+                    minY: number;
+                    maxY: number;
+                }[] | undefined;
+            };
+            meta?: {
+                description?: string | undefined;
+                category?: string | undefined;
+                tags?: string[] | undefined;
+                parent?: string | undefined;
+            } | undefined;
+            images?: {
+                artifact: string;
+                thumbnail: string;
+                floorPlan: string;
+            } | undefined;
+        } | undefined;
         material?: {
             id?: string | undefined;
             preset?: "custom" | "white" | "brick" | "concrete" | "wood" | "glass" | "metal" | "plaster" | "tile" | "marble" | undefined;
@@ -106,6 +194,17 @@ export declare const columnHostedPolicy: {
             fov?: number | undefined;
             zoom?: number | undefined;
         } | undefined;
+        provenance?: {
+            refs: {
+                id: string;
+                ns?: string | undefined;
+                role?: "primary" | "piece" | "absorbed" | "alias" | "derived" | undefined;
+            }[];
+            lineage?: {
+                op: "import" | "split" | "merge" | "duplicate" | "convert" | "promote" | "make-independent" | "attach";
+                fromIds: string[];
+            } | undefined;
+        } | undefined;
         materialPreset?: string | undefined;
         slots?: Record<string, string> | undefined;
         supportSlabId?: string | undefined;

package/dist/column/hosted-resize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hosted-resize.d.ts","sourceRoot":"","sources":["../../src/column/hosted-resize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAA4B,MAAM,kBAAkB,CAAA;AAGzF,eAAO,MAAM,kBAAkB;iBAChB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBACL,OAAO;CACvB,CAAA;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,2DAMpE"}
+{"version":3,"file":"hosted-resize.d.ts","sourceRoot":"","sources":["../../src/column/hosted-resize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAA4B,MAAM,kBAAkB,CAAA;AAGzF,eAAO,MAAM,kBAAkB;iBAChB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBACL,OAAO;CACvB,CAAA;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,2DAMpE"}

package/dist/column/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/column/panel.tsx"],"names":[],"mappings":"AAkSA,MAAM,CAAC,OAAO,UAAU,WAAW,uCAq1BlC"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/column/panel.tsx"],"names":[],"mappings":"AAoSA,MAAM,CAAC,OAAO,UAAU,WAAW,uCA42BlC"}

package/dist/column/panel.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { COLUMN_PRESETS, useScene, } from '@pascal-app/core';
+import { COLUMN_PRESETS, scriptImages, useScene, } from '@pascal-app/core';
 import { ActionButton, ActionGroup, cn, PanelSection, PanelWrapper, SliderControl, ToggleControl, triggerSFX, useEditor, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { Move, Trash2 } from 'lucide-react';
 import { useCallback } from 'react';
+import { AuthoredParams } from '../item/authored-params';
 import { planColumnEdit } from './hosted-resize';
 const SELECT_CLASS = 'h-10 w-full rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm text-foreground outline-none transition-colors hover:bg-[#3e3e3e] focus:ring-1 focus:ring-border';
 const MANAGED_LEAN_TO_LAYOUT_FIELDS = new Set([
@@ -293,155 +294,155 @@ export default function ColumnPanel() {
         supportStyle === 'trestle' ||
         supportStyle === 'portal-frame' ||
         supportStyle === 'box-frame';
-    return (_jsxs(PanelWrapper, { icon: "/icons/column.webp", onClose: handleClose, title: node.name || 'Column', width: 300, children: [_jsx(PanelSection, { title: "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: "Apply preset..." }), COLUMN_PRESET_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }) }), _jsxs(PanelSection, { title: "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-[#2C2C2E] text-muted-foreground 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: "truncate font-medium", children: option.label }) }, option.value));
-                        }) }), isBraceSupport ? (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: "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: "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: '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: '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: '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-[#2C2C2E] text-muted-foreground hover:border-border 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-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: "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: "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: "Dimensions", children: [managedByLeanTo && (_jsx("p", { className: "px-1 pt-1 text-muted-foreground text-xs leading-relaxed", children: "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: "Apply proportion..." }), COLUMN_PROPORTION_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })), !managedByLeanTo && (_jsx(SliderControl, { label: "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: "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' ? 'Fork Spread' : 'Top Spread', max: supportStyle === 'y-frame' ||
-                                    supportStyle === 'v-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 === 'v-frame' ||
+    return (_jsxs(PanelWrapper, { icon: scriptImages(node)?.thumbnail ?? '/icons/column.webp', onClose: handleClose, title: node.name || 'Column', width: 300, children: [node.source ? (_jsx(AuthoredParams, { node: node })) : (_jsxs(_Fragment, { children: [_jsx(PanelSection, { title: "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: "Apply preset..." }), COLUMN_PRESET_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }) }), _jsxs(PanelSection, { title: "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-[#2C2C2E] text-muted-foreground 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: "truncate font-medium", children: option.label }) }, option.value));
+                                }) }), isBraceSupport ? (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: "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: "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: '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: '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: '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-[#2C2C2E] text-muted-foreground hover:border-border 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-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: "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: "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: "Dimensions", children: [managedByLeanTo && (_jsx("p", { className: "px-1 pt-1 text-muted-foreground text-xs leading-relaxed", children: "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: "Apply proportion..." }), COLUMN_PROPORTION_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })), !managedByLeanTo && (_jsx(SliderControl, { label: "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'
-                                        ? 1
-                                        : 0.12) }), _jsx(ToggleControl, { checked: node.bracePlateEnabled ?? true, label: "Connector Plates", onChange: (checked) => handleUpdate({ bracePlateEnabled: checked }) })] })) : !managedByLeanTo ? (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: "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: "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: "Shaft", children: [_jsxs("select", { className: SELECT_CLASS, onChange: (event) => handleUpdate(shaftProfileUpdates(event.target.value)), value: shaftProfile, children: [_jsx("option", { value: "straight", children: "Straight" }), _jsx("option", { value: "tapered", children: "Tapered" }), _jsx("option", { value: "bulged", children: "Bulged" }), _jsx("option", { value: "hourglass", children: "Hourglass" })] }), shaftProfile === 'straight' && (_jsx(SliderControl, { label: "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: "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: "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: "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: "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: "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: "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: "Waist", max: 0.35, min: 0, onChange: (value) => handleUpdate({ shaftBulge: value }), precision: 2, step: 0.01, value: node.shaftBulge ?? 0.12 })] })), _jsx(SliderControl, { label: "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: "Twist Segments", max: 48, min: 4, onChange: (value) => handleUpdate({ shaftSegmentCount: Math.round(value) }), precision: 0, step: 1, value: node.shaftSegmentCount ?? 12 })), _jsx(SliderControl, { label: "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: "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: "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: "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: "No Top" }), _jsx("option", { value: "simple", children: "Simple Top" }), _jsx("option", { value: "stepped", children: "Stepped Top" }), _jsx("option", { value: "rounded", children: "Rounded Top" })] }), node.capitalStyle !== 'none' && (_jsx(SliderControl, { label: "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: "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: "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: "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: "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: "No Bottom" }), _jsx("option", { value: "simple-square", children: "Simple Block Bottom" }), _jsx("option", { value: "square-plinth", children: "Square Plinth Bottom" }), _jsx("option", { value: "stepped-square", children: "Stepped Bottom" }), _jsx("option", { value: "round-rings", children: "Rounded Bottom" })] }), node.baseStyle !== 'none' && (_jsx(SliderControl, { label: "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: "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: "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: "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: "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: "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: "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: "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: "Transform", children: _jsx(SliderControl, { label: "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: "Actions", children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Move, { className: "h-4 w-4" }), label: "Move", onClick: handleMove }), _jsx(ActionButton, { className: "border-red-500/40 text-red-200 hover:bg-red-500/15", icon: _jsx(Trash2, { className: "h-4 w-4" }), label: "Delete", onClick: handleDelete })] }) })] }));
+                                        supportStyle === 'box-frame') && (_jsx(SliderControl, { label: "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' ? 'Fork Spread' : 'Top Spread', max: supportStyle === 'y-frame' ||
+                                            supportStyle === 'v-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 === '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: "Connector Plates", onChange: (checked) => handleUpdate({ bracePlateEnabled: checked }) })] })) : !managedByLeanTo ? (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: "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: "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: "Shaft", children: [_jsxs("select", { className: SELECT_CLASS, onChange: (event) => handleUpdate(shaftProfileUpdates(event.target.value)), value: shaftProfile, children: [_jsx("option", { value: "straight", children: "Straight" }), _jsx("option", { value: "tapered", children: "Tapered" }), _jsx("option", { value: "bulged", children: "Bulged" }), _jsx("option", { value: "hourglass", children: "Hourglass" })] }), shaftProfile === 'straight' && (_jsx(SliderControl, { label: "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: "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: "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: "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: "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: "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: "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: "Waist", max: 0.35, min: 0, onChange: (value) => handleUpdate({ shaftBulge: value }), precision: 2, step: 0.01, value: node.shaftBulge ?? 0.12 })] })), _jsx(SliderControl, { label: "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: "Twist Segments", max: 48, min: 4, onChange: (value) => handleUpdate({ shaftSegmentCount: Math.round(value) }), precision: 0, step: 1, value: node.shaftSegmentCount ?? 12 })), _jsx(SliderControl, { label: "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: "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: "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: "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: "No Top" }), _jsx("option", { value: "simple", children: "Simple Top" }), _jsx("option", { value: "stepped", children: "Stepped Top" }), _jsx("option", { value: "rounded", children: "Rounded Top" })] }), node.capitalStyle !== 'none' && (_jsx(SliderControl, { label: "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: "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: "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: "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: "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: "No Bottom" }), _jsx("option", { value: "simple-square", children: "Simple Block Bottom" }), _jsx("option", { value: "square-plinth", children: "Square Plinth Bottom" }), _jsx("option", { value: "stepped-square", children: "Stepped Bottom" }), _jsx("option", { value: "round-rings", children: "Rounded Bottom" })] }), node.baseStyle !== 'none' && (_jsx(SliderControl, { label: "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: "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: "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: "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: "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: "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: "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: "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: "Transform", children: _jsx(SliderControl, { label: "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: "Actions", children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Move, { className: "h-4 w-4" }), label: "Move", onClick: handleMove }), _jsx(ActionButton, { className: "border-red-500/40 text-red-200 hover:bg-red-500/15", icon: _jsx(Trash2, { className: "h-4 w-4" }), label: "Delete", onClick: handleDelete })] }) })] }));
 }