@pascal-app/nodes 0.1.1

package/dist/column/panel.js

@@ -0,0 +1,414 @@
+'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 { 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';
+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 COLUMN_PRESET_OPTIONS = Object.entries(COLUMN_PRESETS).map(([value, preset]) => ({
+    value: value,
+    label: preset.label,
+}));
+const COLUMN_PROPORTION_PRESETS = {
+    slender: {
+        label: 'Slender',
+        height: 3.6,
+        width: 0.34,
+        baseHeight: 0.18,
+        capitalHeight: 0.16,
+        baseWidthScale: 1.18,
+        capitalWidthScale: 1.16,
+        edgeSoftness: 0.02,
+    },
+    standard: {
+        label: 'Standard',
+        height: 2.9,
+        width: 0.44,
+        baseHeight: 0.22,
+        capitalHeight: 0.2,
+        baseWidthScale: 1.24,
+        capitalWidthScale: 1.22,
+        edgeSoftness: 0.025,
+    },
+    heavy: {
+        label: 'Heavy',
+        height: 3,
+        width: 0.58,
+        baseHeight: 0.28,
+        capitalHeight: 0.26,
+        baseWidthScale: 1.34,
+        capitalWidthScale: 1.3,
+        edgeSoftness: 0.035,
+    },
+    stout: {
+        label: 'Short / Stout',
+        height: 2.2,
+        width: 0.62,
+        baseHeight: 0.3,
+        capitalHeight: 0.28,
+        baseWidthScale: 1.38,
+        capitalWidthScale: 1.34,
+        edgeSoftness: 0.04,
+    },
+};
+const COLUMN_PROPORTION_OPTIONS = Object.entries(COLUMN_PROPORTION_PRESETS).map(([value, preset]) => ({
+    value: value,
+    label: preset.label,
+}));
+const SUPPORT_STYLE_OPTIONS = [
+    { label: 'Vertical', value: 'vertical' },
+    { label: 'A-Frame', value: 'a-frame' },
+    { label: 'Y Support', value: 'y-frame' },
+    { label: 'V Support', value: 'v-frame' },
+    { label: 'X Brace', value: 'x-brace' },
+    { label: 'K Brace', value: 'k-brace' },
+    { label: 'Single Strut', value: 'single-strut' },
+    { label: 'Tripod', value: 'tripod' },
+    { label: 'Trestle', value: 'trestle' },
+    { label: 'Portal Frame', value: 'portal-frame' },
+    { label: '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 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'
+        ? clamp(preset.width * (node.depth / Math.max(node.width, 0.01)), 0.12, 1.6)
+        : preset.width;
+    const shaftCornerRadius = Math.min(node.shaftCornerRadius ?? 0.035, preset.width * 0.18);
+    return {
+        height: preset.height,
+        width: preset.width,
+        depth,
+        radius: preset.width / 2,
+        baseHeight: preset.baseHeight,
+        capitalHeight: preset.capitalHeight,
+        baseWidthScale: preset.baseWidthScale,
+        baseDepthScale: preset.baseWidthScale,
+        capitalWidthScale: preset.capitalWidthScale,
+        capitalDepthScale: preset.capitalWidthScale,
+        edgeSoftness: preset.edgeSoftness,
+        shaftCornerRadius,
+    };
+}
+function shaftProfileUpdates(shaftProfile) {
+    if (shaftProfile === 'tapered') {
+        return {
+            shaftProfile,
+            shaftTaper: 0.14,
+            shaftBulge: 0,
+            shaftStartScale: 0.82,
+            shaftEndScale: 0.72,
+            shaftSegmentCount: 32,
+        };
+    }
+    if (shaftProfile === 'bulged') {
+        return {
+            shaftProfile,
+            shaftTaper: 0,
+            shaftBulge: 0.12,
+            shaftStartScale: 0.68,
+            shaftEndScale: 0.68,
+            shaftSegmentCount: 32,
+        };
+    }
+    if (shaftProfile === 'hourglass') {
+        return {
+            shaftProfile,
+            shaftTaper: 0,
+            shaftBulge: 0.12,
+            shaftStartScale: 0.84,
+            shaftEndScale: 0.84,
+            shaftSegmentCount: 32,
+        };
+    }
+    return {
+        shaftProfile,
+        shaftTaper: 0,
+        shaftBulge: 0,
+        shaftStartScale: 0.72,
+        shaftEndScale: 0.72,
+        shaftSegmentCount: 1,
+        shaftTwistStep: 0,
+    };
+}
+export default function ColumnPanel() {
+    const selectedId = useViewer((s) => s.selection.selectedIds[0]);
+    const selectedCount = useViewer((s) => s.selection.selectedIds.length);
+    const setSelection = useViewer((s) => s.setSelection);
+    const updateNode = useScene((s) => s.updateNode);
+    const deleteNode = useScene((s) => s.deleteNode);
+    const setMovingNode = useEditor((s) => s.setMovingNode);
+    const node = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
+    const handleUpdate = useCallback((updates) => {
+        if (!selectedId)
+            return;
+        updateNode(selectedId, updates);
+    }, [selectedId, updateNode]);
+    const handleClose = useCallback(() => {
+        setSelection({ selectedIds: [] });
+    }, [setSelection]);
+    const handleDelete = useCallback(() => {
+        if (!selectedId)
+            return;
+        triggerSFX('sfx:structure-delete');
+        deleteNode(selectedId);
+        setSelection({ selectedIds: [] });
+    }, [deleteNode, selectedId, setSelection]);
+    const handleMove = useCallback(() => {
+        if (!node)
+            return;
+        triggerSFX('sfx:item-pick');
+        setMovingNode(node);
+        setSelection({ selectedIds: [] });
+    }, [node, setMovingNode, setSelection]);
+    if (!(node && node.type === 'column' && selectedId && selectedCount === 1))
+        return null;
+    const shaftProfile = node.shaftProfile ?? 'straight';
+    const supportStyle = node.supportStyle ?? 'vertical';
+    const isBraceSupport = supportStyle === 'a-frame' ||
+        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';
+    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: [!isBraceSupport && (_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)))] })), _jsx(SliderControl, { label: "Height", max: 6, 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: 4, 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 }) })] })) : (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: "Width", max: 1.6, 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: 1.6, min: 0.12, onChange: (value) => handleUpdate({ depth: value }), precision: 2, step: 0.02, unit: "m", value: node.depth }))] }))] }), !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 })] }) })] }));
+}

package/dist/column/parametrics.d.ts

@@ -0,0 +1,12 @@
+import type { ParametricDescriptor } from '@pascal-app/core';
+import type { ColumnNode } from './schema';
+/**
+ * Stage A inspector — minimal. Column has 60+ schema fields (cross-
+ * section, shaft profile, capital style, base style, carvings, ring
+ * placement, etc.); the legacy `<ColumnPanel>` renders these via
+ * panel-manager's hardcoded switch. The descriptor below registers
+ * the kind as "has parametric data" without trying to express the
+ * full legacy panel — Stage E will replace it via `customPanel`.
+ */
+export declare const columnParametrics: ParametricDescriptor<ColumnNode>;
+//# sourceMappingURL=parametrics.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/column/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,oBAAoB,CAAC,UAAU,CAY9D,CAAA"}

package/dist/column/parametrics.js

@@ -0,0 +1,21 @@
+/**
+ * Stage A inspector — minimal. Column has 60+ schema fields (cross-
+ * section, shaft profile, capital style, base style, carvings, ring
+ * placement, etc.); the legacy `<ColumnPanel>` renders these via
+ * panel-manager's hardcoded switch. The descriptor below registers
+ * the kind as "has parametric data" without trying to express the
+ * full legacy panel — Stage E will replace it via `customPanel`.
+ */
+export const columnParametrics = {
+    groups: [
+        {
+            label: 'Dimensions',
+            fields: [
+                { key: 'height', kind: 'number', unit: 'm', min: 0.5, max: 6, step: 0.05 },
+                { key: 'width', kind: 'number', unit: 'm', min: 0.1, max: 2, step: 0.01 },
+                { key: 'depth', kind: 'number', unit: 'm', min: 0.1, max: 2, step: 0.01 },
+            ],
+        },
+    ],
+    customPanel: () => import('./panel'),
+};

package/dist/column/renderer.d.ts

@@ -0,0 +1,20 @@
+import { type ColumnNode } from '@pascal-app/core';
+/**
+ * Translucent, non-interactive ghost of a column — the placement tool's
+ * cursor preview, mirroring `ShelfPreview`. Builds the same geometry tree
+ * as the real renderer via `<ColumnBody>` but:
+ *   - clones the material and makes it transparent (cloning is required:
+ *     `createLegacyColumnMaterial` can hand back a shared/cached instance, and
+ *     mutating it would turn every committed column see-through);
+ *   - disables raycast on every mesh so the ghost doesn't intercept the
+ *     placement cursor ray (which would stall `grid:move`);
+ *   - renders at the local origin so the caller's cursor group positions it.
+ */
+export declare const ColumnPreview: ({ node }: {
+    node: ColumnNode;
+}) => import("react").JSX.Element;
+export declare const ColumnRenderer: ({ node: rawNode }: {
+    node: ColumnNode;
+}) => import("react").JSX.Element;
+export default ColumnRenderer;
+//# sourceMappingURL=renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/column/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,UAAU,EAKhB,MAAM,kBAAkB,CAAA;AAwwEzB;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,gCA6C3D,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,mBAAmB;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,gCAgDrE,CAAA;AAED,eAAe,cAAc,CAAA"}