From 53393b7def5c7abdc8cb19b3a5c2309f1083e204 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Fri, 8 May 2026 12:54:59 +0530
Subject: [PATCH] Add procedural support column variants

---
 packages/core/src/schema/index.ts             |    1 +
 packages/core/src/schema/nodes/column.ts      |  582 +++++
 packages/core/src/schema/nodes/fence.ts       |    2 +
 .../src/components/editor/floorplan-panel.tsx |   58 +-
 .../src/components/ui/panels/column-panel.tsx |  611 ++++--
 .../src/components/ui/panels/fence-panel.tsx  |    7 +
 .../renderers/column/column-renderer.tsx      | 1907 ++++++++++++-----
 .../viewer/src/systems/fence/fence-system.tsx |   23 +-
 8 files changed, 2461 insertions(+), 730 deletions(-)

diff --git a/packages/core/src/schema/index.ts b/packages/core/src/schema/index.ts
index 0a16d951..b088079a 100644
--- a/packages/core/src/schema/index.ts
+++ b/packages/core/src/schema/index.ts
@@ -39,6 +39,7 @@ export {
   ColumnShaftDetail,
   ColumnShaftProfile,
   ColumnStyle,
+  ColumnSupportStyle,
 } from './nodes/column'
 export { DoorNode, DoorSegment } from './nodes/door'
 export { FenceBaseStyle, FenceNode, FenceStyle } from './nodes/fence'
diff --git a/packages/core/src/schema/nodes/column.ts b/packages/core/src/schema/nodes/column.ts
index a7fa83a8..0e19a8d6 100644
--- a/packages/core/src/schema/nodes/column.ts
+++ b/packages/core/src/schema/nodes/column.ts
@@ -56,6 +56,20 @@ export const ColumnRingPlacement = z.enum(['ends', 'even', 'top', 'bottom'])
 
 export const ColumnCarvingPlacement = z.enum(['shaft', 'base', 'capital', 'all'])
 
+export const ColumnSupportStyle = z.enum([
+  'vertical',
+  'a-frame',
+  'y-frame',
+  'v-frame',
+  'x-brace',
+  'k-brace',
+  'single-strut',
+  'tripod',
+  'trestle',
+  'portal-frame',
+  'box-frame',
+])
+
 export type ColumnStyle = z.infer<typeof ColumnStyle>
 export type ColumnCrossSection = z.infer<typeof ColumnCrossSection>
 export type ColumnShaftProfile = z.infer<typeof ColumnShaftProfile>
@@ -65,6 +79,7 @@ export type ColumnBaseStyle = z.infer<typeof ColumnBaseStyle>
 export type ColumnCapitalStyle = z.infer<typeof ColumnCapitalStyle>
 export type ColumnRingPlacement = z.infer<typeof ColumnRingPlacement>
 export type ColumnCarvingPlacement = z.infer<typeof ColumnCarvingPlacement>
+export type ColumnSupportStyle = z.infer<typeof ColumnSupportStyle>
 
 export const ColumnNode = BaseNode.extend({
   id: objectId('column'),
@@ -136,6 +151,12 @@ export const ColumnNode = BaseNode.extend({
   lowerBandCarvingLevel: z.number().int().min(0).max(4).default(0),
   dentilCount: z.number().int().min(0).max(48).default(0),
   beadCount: z.number().int().min(0).max(64).default(0),
+  supportStyle: ColumnSupportStyle.default('vertical'),
+  braceWidth: z.number().positive().default(0.16),
+  braceDepth: z.number().positive().default(0.16),
+  braceBottomSpread: z.number().min(0.2).default(1.2),
+  braceTopSpread: z.number().min(0).default(0.12),
+  bracePlateEnabled: z.boolean().default(true),
   material: MaterialSchema.optional(),
   materialPreset: z.string().optional(),
 }).describe(dedent`
@@ -150,6 +171,7 @@ export const ColumnNode = BaseNode.extend({
   - baseStyle/capitalStyle: procedural base and top treatment with tier/detail controls
   - baseHeight/capitalHeight: bottom and top block proportions
   - ring/flute/spiral/panel/lathe/carving fields: procedural detail controls
+  - supportStyle/brace fields: vertical column or procedural support assembly
 `)
 
 export const COLUMN_PRESETS = {
@@ -403,6 +425,566 @@ export const COLUMN_PRESETS = {
     dentilCount: 0,
     beadCount: 0,
   },
+  aFrameSupport: {
+    label: 'A-Frame Support',
+    supportStyle: 'a-frame',
+    style: 'faceted',
+    crossSection: 'rectangular',
+    height: 2.6,
+    radius: 0.08,
+    width: 0.16,
+    depth: 0.16,
+    edgeSoftness: 0.012,
+    baseHeight: 0,
+    capitalHeight: 0,
+    shaftProfile: 'straight',
+    shaftTaper: 0,
+    shaftBulge: 0,
+    shaftStartScale: 1,
+    shaftEndScale: 1,
+    shaftSegmentCount: 1,
+    shaftTwistStep: 0,
+    shaftCornerRadius: 0.012,
+    shaftDetail: 'none',
+    baseStyle: 'none',
+    baseWidthScale: 1,
+    baseDepthScale: 1,
+    baseTierCount: 1,
+    baseStepSpread: 0.34,
+    basePlinthHeightRatio: 0.44,
+    baseRoundBandScale: 0.92,
+    baseNeckScale: 0.72,
+    baseRoundBandCount: 0,
+    baseRibCount: 0,
+    baseCarvingLevel: 0,
+    capitalStyle: 'none',
+    capitalWidthScale: 1,
+    capitalDepthScale: 1,
+    capitalTierCount: 1,
+    capitalStepSpread: 0.34,
+    capitalBandCount: 0,
+    capitalCarvingLevel: 0,
+    ringCount: 0,
+    ringSpread: 0.16,
+    fluteCount: 0,
+    spiralTwist: 0,
+    spiralRibCount: 0,
+    panelCount: 0,
+    latheRingCount: 0,
+    carvingLevel: 0,
+    lowerBandEnabled: false,
+    dentilCount: 0,
+    beadCount: 0,
+    braceWidth: 0.16,
+    braceDepth: 0.16,
+    braceBottomSpread: 1.2,
+    braceTopSpread: 0.06,
+    bracePlateEnabled: false,
+  },
+  yFrameSupport: {
+    label: 'Y Support',
+    supportStyle: 'y-frame',
+    style: 'faceted',
+    crossSection: 'rectangular',
+    height: 2.7,
+    radius: 0.08,
+    width: 0.16,
+    depth: 0.16,
+    edgeSoftness: 0.012,
+    baseHeight: 0,
+    capitalHeight: 0,
+    shaftProfile: 'straight',
+    shaftTaper: 0,
+    shaftBulge: 0,
+    shaftStartScale: 1,
+    shaftEndScale: 1,
+    shaftSegmentCount: 1,
+    shaftTwistStep: 0,
+    shaftCornerRadius: 0.012,
+    shaftDetail: 'none',
+    baseStyle: 'none',
+    baseWidthScale: 1,
+    baseDepthScale: 1,
+    baseTierCount: 1,
+    baseStepSpread: 0.34,
+    basePlinthHeightRatio: 0.44,
+    baseRoundBandScale: 0.92,
+    baseNeckScale: 0.72,
+    baseRoundBandCount: 0,
+    baseRibCount: 0,
+    baseCarvingLevel: 0,
+    capitalStyle: 'none',
+    capitalWidthScale: 1,
+    capitalDepthScale: 1,
+    capitalTierCount: 1,
+    capitalStepSpread: 0.34,
+    capitalBandCount: 0,
+    capitalCarvingLevel: 0,
+    ringCount: 0,
+    ringSpread: 0.16,
+    fluteCount: 0,
+    spiralTwist: 0,
+    spiralRibCount: 0,
+    panelCount: 0,
+    latheRingCount: 0,
+    carvingLevel: 0,
+    lowerBandEnabled: false,
+    dentilCount: 0,
+    beadCount: 0,
+    braceWidth: 0.16,
+    braceDepth: 0.16,
+    braceBottomSpread: 0.2,
+    braceTopSpread: 1,
+    bracePlateEnabled: false,
+  },
+  vFrameSupport: {
+    label: 'V Support',
+    supportStyle: 'v-frame',
+    style: 'faceted',
+    crossSection: 'rectangular',
+    height: 2.6,
+    radius: 0.08,
+    width: 0.16,
+    depth: 0.16,
+    edgeSoftness: 0.012,
+    baseHeight: 0,
+    capitalHeight: 0,
+    shaftProfile: 'straight',
+    shaftTaper: 0,
+    shaftBulge: 0,
+    shaftStartScale: 1,
+    shaftEndScale: 1,
+    shaftSegmentCount: 1,
+    shaftTwistStep: 0,
+    shaftCornerRadius: 0.012,
+    shaftDetail: 'none',
+    baseStyle: 'none',
+    baseWidthScale: 1,
+    baseDepthScale: 1,
+    baseTierCount: 1,
+    baseStepSpread: 0.34,
+    basePlinthHeightRatio: 0.44,
+    baseRoundBandScale: 0.92,
+    baseNeckScale: 0.72,
+    baseRoundBandCount: 0,
+    baseRibCount: 0,
+    baseCarvingLevel: 0,
+    capitalStyle: 'none',
+    capitalWidthScale: 1,
+    capitalDepthScale: 1,
+    capitalTierCount: 1,
+    capitalStepSpread: 0.34,
+    capitalBandCount: 0,
+    capitalCarvingLevel: 0,
+    ringCount: 0,
+    ringSpread: 0.16,
+    fluteCount: 0,
+    spiralTwist: 0,
+    spiralRibCount: 0,
+    panelCount: 0,
+    latheRingCount: 0,
+    carvingLevel: 0,
+    lowerBandEnabled: false,
+    dentilCount: 0,
+    beadCount: 0,
+    braceWidth: 0.16,
+    braceDepth: 0.16,
+    braceBottomSpread: 0.2,
+    braceTopSpread: 1,
+    bracePlateEnabled: false,
+  },
+  xBraceSupport: {
+    label: 'X Brace',
+    supportStyle: 'x-brace',
+    style: 'faceted',
+    crossSection: 'rectangular',
+    height: 2.6,
+    radius: 0.07,
+    width: 0.14,
+    depth: 0.14,
+    edgeSoftness: 0.01,
+    baseHeight: 0,
+    capitalHeight: 0,
+    shaftProfile: 'straight',
+    shaftTaper: 0,
+    shaftBulge: 0,
+    shaftStartScale: 1,
+    shaftEndScale: 1,
+    shaftSegmentCount: 1,
+    shaftTwistStep: 0,
+    shaftCornerRadius: 0.01,
+    shaftDetail: 'none',
+    baseStyle: 'none',
+    baseWidthScale: 1,
+    baseDepthScale: 1,
+    baseTierCount: 1,
+    baseStepSpread: 0.34,
+    basePlinthHeightRatio: 0.44,
+    baseRoundBandScale: 0.92,
+    baseNeckScale: 0.72,
+    baseRoundBandCount: 0,
+    baseRibCount: 0,
+    baseCarvingLevel: 0,
+    capitalStyle: 'none',
+    capitalWidthScale: 1,
+    capitalDepthScale: 1,
+    capitalTierCount: 1,
+    capitalStepSpread: 0.34,
+    capitalBandCount: 0,
+    capitalCarvingLevel: 0,
+    ringCount: 0,
+    ringSpread: 0.16,
+    fluteCount: 0,
+    spiralTwist: 0,
+    spiralRibCount: 0,
+    panelCount: 0,
+    latheRingCount: 0,
+    carvingLevel: 0,
+    lowerBandEnabled: false,
+    dentilCount: 0,
+    beadCount: 0,
+    braceWidth: 0.14,
+    braceDepth: 0.14,
+    braceBottomSpread: 1,
+    braceTopSpread: 1,
+    bracePlateEnabled: false,
+  },
+  kBraceSupport: {
+    label: 'K Brace',
+    supportStyle: 'k-brace',
+    style: 'faceted',
+    crossSection: 'rectangular',
+    height: 2.6,
+    radius: 0.07,
+    width: 0.14,
+    depth: 0.14,
+    edgeSoftness: 0.01,
+    baseHeight: 0,
+    capitalHeight: 0,
+    shaftProfile: 'straight',
+    shaftTaper: 0,
+    shaftBulge: 0,
+    shaftStartScale: 1,
+    shaftEndScale: 1,
+    shaftSegmentCount: 1,
+    shaftTwistStep: 0,
+    shaftCornerRadius: 0.01,
+    shaftDetail: 'none',
+    baseStyle: 'none',
+    baseWidthScale: 1,
+    baseDepthScale: 1,
+    baseTierCount: 1,
+    baseStepSpread: 0.34,
+    basePlinthHeightRatio: 0.44,
+    baseRoundBandScale: 0.92,
+    baseNeckScale: 0.72,
+    baseRoundBandCount: 0,
+    baseRibCount: 0,
+    baseCarvingLevel: 0,
+    capitalStyle: 'none',
+    capitalWidthScale: 1,
+    capitalDepthScale: 1,
+    capitalTierCount: 1,
+    capitalStepSpread: 0.34,
+    capitalBandCount: 0,
+    capitalCarvingLevel: 0,
+    ringCount: 0,
+    ringSpread: 0.16,
+    fluteCount: 0,
+    spiralTwist: 0,
+    spiralRibCount: 0,
+    panelCount: 0,
+    latheRingCount: 0,
+    carvingLevel: 0,
+    lowerBandEnabled: false,
+    dentilCount: 0,
+    beadCount: 0,
+    braceWidth: 0.14,
+    braceDepth: 0.14,
+    braceBottomSpread: 1,
+    braceTopSpread: 1,
+    bracePlateEnabled: false,
+  },
+  singleStrutSupport: {
+    label: 'Single Strut',
+    supportStyle: 'single-strut',
+    style: 'faceted',
+    crossSection: 'rectangular',
+    height: 2.6,
+    radius: 0.07,
+    width: 0.14,
+    depth: 0.14,
+    edgeSoftness: 0.01,
+    baseHeight: 0,
+    capitalHeight: 0,
+    shaftProfile: 'straight',
+    shaftTaper: 0,
+    shaftBulge: 0,
+    shaftStartScale: 1,
+    shaftEndScale: 1,
+    shaftSegmentCount: 1,
+    shaftTwistStep: 0,
+    shaftCornerRadius: 0.01,
+    shaftDetail: 'none',
+    baseStyle: 'none',
+    baseWidthScale: 1,
+    baseDepthScale: 1,
+    baseTierCount: 1,
+    baseStepSpread: 0.34,
+    basePlinthHeightRatio: 0.44,
+    baseRoundBandScale: 0.92,
+    baseNeckScale: 0.72,
+    baseRoundBandCount: 0,
+    baseRibCount: 0,
+    baseCarvingLevel: 0,
+    capitalStyle: 'none',
+    capitalWidthScale: 1,
+    capitalDepthScale: 1,
+    capitalTierCount: 1,
+    capitalStepSpread: 0.34,
+    capitalBandCount: 0,
+    capitalCarvingLevel: 0,
+    ringCount: 0,
+    ringSpread: 0.16,
+    fluteCount: 0,
+    spiralTwist: 0,
+    spiralRibCount: 0,
+    panelCount: 0,
+    latheRingCount: 0,
+    carvingLevel: 0,
+    lowerBandEnabled: false,
+    dentilCount: 0,
+    beadCount: 0,
+    braceWidth: 0.14,
+    braceDepth: 0.14,
+    braceBottomSpread: 1,
+    braceTopSpread: 1,
+    bracePlateEnabled: false,
+  },
+  tripodSupport: {
+    label: 'Tripod Support',
+    supportStyle: 'tripod',
+    style: 'faceted',
+    crossSection: 'rectangular',
+    height: 2.6,
+    radius: 0.07,
+    width: 0.14,
+    depth: 0.14,
+    edgeSoftness: 0.01,
+    baseHeight: 0,
+    capitalHeight: 0,
+    shaftProfile: 'straight',
+    shaftTaper: 0,
+    shaftBulge: 0,
+    shaftStartScale: 1,
+    shaftEndScale: 1,
+    shaftSegmentCount: 1,
+    shaftTwistStep: 0,
+    shaftCornerRadius: 0.01,
+    shaftDetail: 'none',
+    baseStyle: 'none',
+    baseWidthScale: 1,
+    baseDepthScale: 1,
+    baseTierCount: 1,
+    baseStepSpread: 0.34,
+    basePlinthHeightRatio: 0.44,
+    baseRoundBandScale: 0.92,
+    baseNeckScale: 0.72,
+    baseRoundBandCount: 0,
+    baseRibCount: 0,
+    baseCarvingLevel: 0,
+    capitalStyle: 'none',
+    capitalWidthScale: 1,
+    capitalDepthScale: 1,
+    capitalTierCount: 1,
+    capitalStepSpread: 0.34,
+    capitalBandCount: 0,
+    capitalCarvingLevel: 0,
+    ringCount: 0,
+    ringSpread: 0.16,
+    fluteCount: 0,
+    spiralTwist: 0,
+    spiralRibCount: 0,
+    panelCount: 0,
+    latheRingCount: 0,
+    carvingLevel: 0,
+    lowerBandEnabled: false,
+    dentilCount: 0,
+    beadCount: 0,
+    braceWidth: 0.14,
+    braceDepth: 0.14,
+    braceBottomSpread: 1.1,
+    braceTopSpread: 1.1,
+    bracePlateEnabled: false,
+  },
+  trestleSupport: {
+    label: 'Trestle Frame',
+    supportStyle: 'trestle',
+    style: 'faceted',
+    crossSection: 'rectangular',
+    height: 2.6,
+    radius: 0.07,
+    width: 0.14,
+    depth: 0.14,
+    edgeSoftness: 0.01,
+    baseHeight: 0,
+    capitalHeight: 0,
+    shaftProfile: 'straight',
+    shaftTaper: 0,
+    shaftBulge: 0,
+    shaftStartScale: 1,
+    shaftEndScale: 1,
+    shaftSegmentCount: 1,
+    shaftTwistStep: 0,
+    shaftCornerRadius: 0.01,
+    shaftDetail: 'none',
+    baseStyle: 'none',
+    baseWidthScale: 1,
+    baseDepthScale: 1,
+    baseTierCount: 1,
+    baseStepSpread: 0.34,
+    basePlinthHeightRatio: 0.44,
+    baseRoundBandScale: 0.92,
+    baseNeckScale: 0.72,
+    baseRoundBandCount: 0,
+    baseRibCount: 0,
+    baseCarvingLevel: 0,
+    capitalStyle: 'none',
+    capitalWidthScale: 1,
+    capitalDepthScale: 1,
+    capitalTierCount: 1,
+    capitalStepSpread: 0.34,
+    capitalBandCount: 0,
+    capitalCarvingLevel: 0,
+    ringCount: 0,
+    ringSpread: 0.16,
+    fluteCount: 0,
+    spiralTwist: 0,
+    spiralRibCount: 0,
+    panelCount: 0,
+    latheRingCount: 0,
+    carvingLevel: 0,
+    lowerBandEnabled: false,
+    dentilCount: 0,
+    beadCount: 0,
+    braceWidth: 0.14,
+    braceDepth: 0.14,
+    braceBottomSpread: 1.2,
+    braceTopSpread: 1,
+    bracePlateEnabled: false,
+  },
+  portalFrameSupport: {
+    label: 'Portal Frame',
+    supportStyle: 'portal-frame',
+    style: 'faceted',
+    crossSection: 'rectangular',
+    height: 2.6,
+    radius: 0.08,
+    width: 0.16,
+    depth: 0.16,
+    edgeSoftness: 0.012,
+    baseHeight: 0,
+    capitalHeight: 0,
+    shaftProfile: 'straight',
+    shaftTaper: 0,
+    shaftBulge: 0,
+    shaftStartScale: 1,
+    shaftEndScale: 1,
+    shaftSegmentCount: 1,
+    shaftTwistStep: 0,
+    shaftCornerRadius: 0.012,
+    shaftDetail: 'none',
+    baseStyle: 'none',
+    baseWidthScale: 1,
+    baseDepthScale: 1,
+    baseTierCount: 1,
+    baseStepSpread: 0.34,
+    basePlinthHeightRatio: 0.44,
+    baseRoundBandScale: 0.92,
+    baseNeckScale: 0.72,
+    baseRoundBandCount: 0,
+    baseRibCount: 0,
+    baseCarvingLevel: 0,
+    capitalStyle: 'none',
+    capitalWidthScale: 1,
+    capitalDepthScale: 1,
+    capitalTierCount: 1,
+    capitalStepSpread: 0.34,
+    capitalBandCount: 0,
+    capitalCarvingLevel: 0,
+    ringCount: 0,
+    ringSpread: 0.16,
+    fluteCount: 0,
+    spiralTwist: 0,
+    spiralRibCount: 0,
+    panelCount: 0,
+    latheRingCount: 0,
+    carvingLevel: 0,
+    lowerBandEnabled: false,
+    dentilCount: 0,
+    beadCount: 0,
+    braceWidth: 0.16,
+    braceDepth: 0.16,
+    braceBottomSpread: 1.4,
+    braceTopSpread: 0.2,
+    bracePlateEnabled: false,
+  },
+  boxFrameSupport: {
+    label: 'Box Frame',
+    supportStyle: 'box-frame',
+    style: 'faceted',
+    crossSection: 'rectangular',
+    height: 2.6,
+    radius: 0.07,
+    width: 0.14,
+    depth: 0.14,
+    edgeSoftness: 0.01,
+    baseHeight: 0,
+    capitalHeight: 0,
+    shaftProfile: 'straight',
+    shaftTaper: 0,
+    shaftBulge: 0,
+    shaftStartScale: 1,
+    shaftEndScale: 1,
+    shaftSegmentCount: 1,
+    shaftTwistStep: 0,
+    shaftCornerRadius: 0.01,
+    shaftDetail: 'none',
+    baseStyle: 'none',
+    baseWidthScale: 1,
+    baseDepthScale: 1,
+    baseTierCount: 1,
+    baseStepSpread: 0.34,
+    basePlinthHeightRatio: 0.44,
+    baseRoundBandScale: 0.92,
+    baseNeckScale: 0.72,
+    baseRoundBandCount: 0,
+    baseRibCount: 0,
+    baseCarvingLevel: 0,
+    capitalStyle: 'none',
+    capitalWidthScale: 1,
+    capitalDepthScale: 1,
+    capitalTierCount: 1,
+    capitalStepSpread: 0.34,
+    capitalBandCount: 0,
+    capitalCarvingLevel: 0,
+    ringCount: 0,
+    ringSpread: 0.16,
+    fluteCount: 0,
+    spiralTwist: 0,
+    spiralRibCount: 0,
+    panelCount: 0,
+    latheRingCount: 0,
+    carvingLevel: 0,
+    lowerBandEnabled: false,
+    dentilCount: 0,
+    beadCount: 0,
+    braceWidth: 0.14,
+    braceDepth: 0.14,
+    braceBottomSpread: 1.4,
+    braceTopSpread: 1,
+    bracePlateEnabled: false,
+  },
 } as const satisfies Record<string, { label: string } & Partial<z.input<typeof ColumnNode>>>
 
 export type ColumnPresetId = keyof typeof COLUMN_PRESETS
diff --git a/packages/core/src/schema/nodes/fence.ts b/packages/core/src/schema/nodes/fence.ts
index 234da407..fe84c885 100644
--- a/packages/core/src/schema/nodes/fence.ts
+++ b/packages/core/src/schema/nodes/fence.ts
@@ -23,6 +23,7 @@ export const FenceNode = BaseNode.extend({
   groundClearance: z.number().default(0),
   edgeInset: z.number().default(0.015),
   baseStyle: FenceBaseStyle.default('grounded'),
+  showInfill: z.boolean().default(true),
   color: z.string().default('#ffffff'),
   style: FenceStyle.default('slat'),
 }).describe(
@@ -33,6 +34,7 @@ export const FenceNode = BaseNode.extend({
   - height/thickness: overall fence dimensions in meters
   - baseHeight/postSpacing/postSize/topRailHeight: exact geometric controls from the plan3D fence model
   - groundClearance/edgeInset/baseStyle: fence support and inset configuration
+  - showInfill: whether to draw intermediate posts/slats between end posts
   - color/style: visual appearance options
   `,
 )
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index 7c91df60..b74e4515 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -1768,6 +1768,56 @@ function getRotatedRectanglePolygon(
 
 function getColumnPlanFootprint(column: ColumnNode): Point2D[] {
   const center = { x: column.position[0], y: column.position[2] }
+
+  if (
+    column.supportStyle === 'a-frame' ||
+    column.supportStyle === 'y-frame' ||
+    column.supportStyle === 'v-frame' ||
+    column.supportStyle === 'x-brace' ||
+    column.supportStyle === 'k-brace' ||
+    column.supportStyle === 'single-strut' ||
+    column.supportStyle === 'tripod' ||
+    column.supportStyle === 'trestle' ||
+    column.supportStyle === 'portal-frame' ||
+    column.supportStyle === 'box-frame'
+  ) {
+    const width = Math.max(
+      column.supportStyle === 'a-frame' ||
+        column.supportStyle === 'x-brace' ||
+        column.supportStyle === 'k-brace' ||
+        column.supportStyle === 'single-strut' ||
+        column.supportStyle === 'tripod' ||
+        column.supportStyle === 'trestle' ||
+        column.supportStyle === 'portal-frame' ||
+        column.supportStyle === 'box-frame'
+        ? (column.braceBottomSpread ?? 1.2)
+        : 0,
+      column.braceTopSpread ??
+        (column.supportStyle === 'y-frame' ||
+        column.supportStyle === 'v-frame' ||
+        column.supportStyle === 'x-brace' ||
+        column.supportStyle === 'k-brace' ||
+        column.supportStyle === 'single-strut' ||
+        column.supportStyle === 'tripod' ||
+        column.supportStyle === 'trestle' ||
+        column.supportStyle === 'portal-frame' ||
+        column.supportStyle === 'box-frame'
+          ? 1
+          : 0),
+      (column.braceWidth ?? column.width) * 2,
+    )
+    const depth = Math.max(
+      column.supportStyle === 'tripod' ||
+        column.supportStyle === 'trestle' ||
+        column.supportStyle === 'box-frame'
+        ? (column.braceTopSpread ?? 1)
+        : 0,
+      column.braceDepth ?? column.depth,
+      0.08,
+    )
+    return getRotatedRectanglePolygon(center, width, depth, column.rotation)
+  }
+
   const shaftWidth =
     column.crossSection === 'round' ||
     column.crossSection === 'octagonal' ||
@@ -5742,6 +5792,12 @@ const FloorplanFenceLayer = memo(function FloorplanFenceLayer({
         const fenceGlowOpacity = isDeleteHovered ? 0.18 : isActive ? 0.22 : isHovered ? 0.14 : 0
         const fenceUnderlayWidth = isActive ? '6.5' : isHovered ? '6' : '5.2'
         const fenceStrokeWidth = isActive ? '2.6' : isHovered ? '2.35' : '2.05'
+        const showFenceInfill = fence.showInfill ?? true
+        const visibleMarkerFrames = showFenceInfill
+          ? markerFrames
+          : markerFrames.filter(
+              (_, markerIndex) => markerIndex === 0 || markerIndex === markerFrames.length - 1,
+            )
         const privacyMarkerWidth = clamp(fence.postSize * 0.58, 0.038, 0.068)
         const privacyMarkerHeight = clamp(
           Math.max(fence.baseHeight * 0.5, fence.postSize * 1.4),
@@ -5792,7 +5848,7 @@ const FloorplanFenceLayer = memo(function FloorplanFenceLayer({
               strokeWidth={fenceStrokeWidth}
               vectorEffect="non-scaling-stroke"
             />
-            {markerFrames.map(({ angleDeg, point }, markerIndex) => {
+            {visibleMarkerFrames.map(({ angleDeg, point }, markerIndex) => {
               const svgPoint = toSvgPoint(point)
 
               if (fence.style === 'privacy') {
diff --git a/packages/editor/src/components/ui/panels/column-panel.tsx b/packages/editor/src/components/ui/panels/column-panel.tsx
index 8b7e97de..283dc2da 100644
--- a/packages/editor/src/components/ui/panels/column-panel.tsx
+++ b/packages/editor/src/components/ui/panels/column-panel.tsx
@@ -15,6 +15,7 @@ import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
+import { ToggleControl } from '../controls/toggle-control'
 import { PanelWrapper } from './panel-wrapper'
 
 const SELECT_CLASS =
@@ -83,6 +84,7 @@ function presetUpdates(presetId: ColumnPresetId): Partial<ColumnNode> {
   const { label, ...preset } = COLUMN_PRESETS[presetId]
   return {
     name: label,
+    supportStyle: 'supportStyle' in preset ? preset.supportStyle : 'vertical',
     ...preset,
   }
 }
@@ -199,6 +201,18 @@ export function ColumnPanel() {
 
   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 (
     <PanelWrapper icon="/icons/column.png" onClose={handleClose} title={node.name || 'Column'} width={300}>
@@ -223,53 +237,115 @@ export function ColumnPanel() {
       <PanelSection title="Shape">
         <select
           className={SELECT_CLASS}
-          onChange={(event) => handleUpdate({ crossSection: event.target.value as ColumnNode['crossSection'] })}
-          value={node.crossSection}
+          onChange={(event) => {
+            const nextSupportStyle = event.target.value as ColumnNode['supportStyle']
+            handleUpdate({
+              supportStyle: nextSupportStyle,
+              ...(nextSupportStyle !== 'vertical'
+                ? {
+                    crossSection: 'rectangular',
+                    width: node.braceWidth ?? node.width,
+                    depth: node.braceDepth ?? node.depth,
+                    baseStyle: 'none',
+                    capitalStyle: 'none',
+                  }
+                : {}),
+            })
+          }}
+          value={supportStyle}
         >
-          <option value="round">Round</option>
-          <option value="square">Square</option>
-          <option value="rectangular">Rectangular</option>
+          <option value="vertical">Vertical</option>
+          <option value="a-frame">A-Frame</option>
+          <option value="y-frame">Y Support</option>
+          <option value="v-frame">V Support</option>
+          <option value="x-brace">X Brace</option>
+          <option value="k-brace">K Brace</option>
+          <option value="single-strut">Single Strut</option>
+          <option value="tripod">Tripod Support</option>
+          <option value="trestle">Trestle Frame</option>
+          <option value="portal-frame">Portal Frame</option>
+          <option value="box-frame">Box Frame</option>
         </select>
-        <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') && (
-          <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}
-          />
+        {isBraceSupport ? (
+          <>
+            <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}
+            />
+            <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}
+            />
+          </>
+        ) : (
+          <>
+            <select
+              className={SELECT_CLASS}
+              onChange={(event) =>
+                handleUpdate({ crossSection: event.target.value as ColumnNode['crossSection'] })
+              }
+              value={node.crossSection}
+            >
+              <option value="round">Round</option>
+              <option value="square">Square</option>
+              <option value="rectangular">Rectangular</option>
+            </select>
+            <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') && (
+              <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}
+              />
+            )}
+          </>
         )}
       </PanelSection>
 
       <PanelSection title="Dimensions">
-        <select
-          className={SELECT_CLASS}
-          onChange={(event) => {
-            if (!event.target.value) return
-            handleUpdate(proportionUpdates(node, event.target.value as ColumnProportionPresetId))
-          }}
-          value=""
-        >
-          <option value="">Apply proportion...</option>
-          {COLUMN_PROPORTION_OPTIONS.map((option) => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
+        {!isBraceSupport && (
+          <select
+            className={SELECT_CLASS}
+            onChange={(event) => {
+              if (!event.target.value) return
+              handleUpdate(proportionUpdates(node, event.target.value as ColumnProportionPresetId))
+            }}
+            value=""
+          >
+            <option value="">Apply proportion...</option>
+            {COLUMN_PROPORTION_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        )}
         <SliderControl
           label="Height"
           max={6}
@@ -280,202 +356,286 @@ export function ColumnPanel() {
           unit="m"
           value={node.height}
         />
-        <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' && (
-          <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 ? (
+          <>
+            {(supportStyle === 'a-frame' ||
+              supportStyle === 'x-brace' ||
+              supportStyle === 'k-brace' ||
+              supportStyle === 'single-strut' ||
+              supportStyle === 'tripod' ||
+              supportStyle === 'trestle' ||
+              supportStyle === 'portal-frame' ||
+              supportStyle === 'box-frame') && (
+              <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}
+              />
+            )}
+            <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)
+              }
+            />
+            <ToggleControl
+              checked={node.bracePlateEnabled ?? true}
+              label="Connector Plates"
+              onChange={(checked) => handleUpdate({ bracePlateEnabled: checked })}
+            />
+          </>
+        ) : (
+          <>
+            <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' && (
+              <SliderControl
+                label="Depth"
+                max={1.6}
+                min={0.12}
+                onChange={(value) => handleUpdate({ depth: value })}
+                precision={2}
+                step={0.02}
+                unit="m"
+                value={node.depth}
+              />
+            )}
+          </>
         )}
       </PanelSection>
 
-      <PanelSection title="Shaft">
-        <select
-          className={SELECT_CLASS}
-          onChange={(event) => handleUpdate(shaftProfileUpdates(event.target.value as ColumnNode['shaftProfile']))}
-          value={shaftProfile}
-        >
-          <option value="straight">Straight</option>
-          <option value="tapered">Tapered</option>
-          <option value="bulged">Bulged</option>
-          <option value="hourglass">Hourglass</option>
-        </select>
-        {shaftProfile === 'straight' && (
+      {!isBraceSupport && (
+        <PanelSection title="Shaft">
+          <select
+            className={SELECT_CLASS}
+            onChange={(event) =>
+              handleUpdate(
+                shaftProfileUpdates(event.target.value as ColumnNode['shaftProfile']),
+              )
+            }
+            value={shaftProfile}
+          >
+            <option value="straight">Straight</option>
+            <option value="tapered">Tapered</option>
+            <option value="bulged">Bulged</option>
+            <option value="hourglass">Hourglass</option>
+          </select>
+          {shaftProfile === 'straight' && (
+            <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' && (
+            <>
+              <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}
+              />
+              <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}
+              />
+              <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' && (
+            <>
+              <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}
+              />
+              <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' && (
+            <>
+              <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}
+              />
+              <SliderControl
+                label="Waist"
+                max={0.35}
+                min={0}
+                onChange={(value) => handleUpdate({ shaftBulge: value })}
+                precision={2}
+                step={0.01}
+                value={node.shaftBulge ?? 0.12}
+              />
+            </>
+          )}
           <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}
+            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="°"
+            value={node.shaftTwistStep ?? 0}
           />
-        )}
-        {shaftProfile === 'tapered' && (
-          <>
+          {Math.abs(node.shaftTwistStep ?? 0) > 0.001 && (
             <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}
+              label="Twist Segments"
+              max={48}
+              min={4}
+              onChange={(value) => handleUpdate({ shaftSegmentCount: Math.round(value) })}
+              precision={0}
+              step={1}
+              value={node.shaftSegmentCount ?? 12}
             />
-            <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}
-            />
-            <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' && (
-          <>
-            <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}
-            />
-            <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' && (
-          <>
-            <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}
-            />
-            <SliderControl
-              label="Waist"
-              max={0.35}
-              min={0}
-              onChange={(value) => handleUpdate({ shaftBulge: value })}
-              precision={2}
-              step={0.01}
-              value={node.shaftBulge ?? 0.12}
-            />
-          </>
-        )}
-        <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="°"
-          value={node.shaftTwistStep ?? 0}
-        />
-        {Math.abs(node.shaftTwistStep ?? 0) > 0.001 && (
+          )}
           <SliderControl
-            label="Twist Segments"
-            max={48}
-            min={4}
-            onChange={(value) => handleUpdate({ shaftSegmentCount: Math.round(value) })}
+            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={node.shaftSegmentCount ?? 12}
+            value={Math.ceil((node.ringCount ?? 0) / 2)}
           />
-        )}
-        <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 && (
-          <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 && (
-          <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}
-          />
-        )}
-      </PanelSection>
+          {(node.ringCount ?? 0) > 0 && (
+            <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 && (
+            <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}
+            />
+          )}
+        </PanelSection>
+      )}
 
+      {!isBraceSupport && (
       <PanelSection title="Ends">
         <select
           className={SELECT_CLASS}
@@ -685,6 +845,7 @@ export function ColumnPanel() {
           />
         )}
       </PanelSection>
+      )}
 
       <PanelSection title="Transform">
         <SliderControl
diff --git a/packages/editor/src/components/ui/panels/fence-panel.tsx b/packages/editor/src/components/ui/panels/fence-panel.tsx
index cb900dae..00e95955 100644
--- a/packages/editor/src/components/ui/panels/fence-panel.tsx
+++ b/packages/editor/src/components/ui/panels/fence-panel.tsx
@@ -24,6 +24,7 @@ import { MaterialPicker } from '../controls/material-picker'
 import { PanelSection } from '../controls/panel-section'
 import { SegmentedControl } from '../controls/segmented-control'
 import { SliderControl } from '../controls/slider-control'
+import { ToggleControl } from '../controls/toggle-control'
 import { PanelWrapper } from './panel-wrapper'
 
 type FenceStyleValue = 'slat' | 'rail' | 'privacy'
@@ -115,6 +116,12 @@ export function FencePanel() {
           options={FENCE_BASE_STYLE_OPTIONS}
           value={node.baseStyle}
         />
+        <ToggleControl
+          checked={node.showInfill ?? true}
+          className="mt-2"
+          label="Fence Infill"
+          onChange={(checked) => handleUpdate({ showInfill: checked })}
+        />
       </PanelSection>
 
       <PanelSection title="Dimensions">
diff --git a/packages/viewer/src/components/renderers/column/column-renderer.tsx b/packages/viewer/src/components/renderers/column/column-renderer.tsx
index d80b89cf..e97adc59 100644
--- a/packages/viewer/src/components/renderers/column/column-renderer.tsx
+++ b/packages/viewer/src/components/renderers/column/column-renderer.tsx
@@ -1,88 +1,105 @@
-import { type ColumnNode, useLiveTransforms, useRegistry } from '@pascal-app/core'
-import { createContext, useContext, useMemo, useRef } from 'react'
-import type { Group, Material } from 'three'
-import { useNodeEvents } from '../../../hooks/use-node-events'
-import { baseMaterial, createMaterial, createMaterialFromPresetRef } from '../../../lib/materials'
+import {
+  type ColumnNode,
+  useLiveTransforms,
+  useRegistry,
+} from "@pascal-app/core";
+import { createContext, useContext, useMemo, useRef } from "react";
+import {
+  BufferGeometry,
+  Float32BufferAttribute,
+  type Group,
+  type Material,
+} from "three";
+import { useNodeEvents } from "../../../hooks/use-node-events";
+import {
+  baseMaterial,
+  createMaterial,
+  createMaterialFromPresetRef,
+} from "../../../lib/materials";
 import {
   createColumnBoxGeometry,
   createColumnCylinderGeometry,
   createColumnSphereGeometry,
   createColumnTorusGeometry,
-} from '../../../systems/column/column-geometry'
+} from "../../../systems/column/column-geometry";
 
-const ColumnMaterialContext = createContext<Material>(baseMaterial as Material)
-const ColumnEdgeSoftnessContext = createContext(0.025)
+const ColumnMaterialContext = createContext<Material>(baseMaterial as Material);
+const ColumnEdgeSoftnessContext = createContext(0.025);
 
 function ColumnMaterial() {
-  const material = useContext(ColumnMaterialContext)
-  return <primitive attach="material" object={material} />
+  const material = useContext(ColumnMaterialContext);
+  return <primitive attach="material" object={material} />;
 }
 
 function createColumnMaterial({
   material,
   materialPreset,
-}: Pick<ColumnNode, 'material' | 'materialPreset'>) {
-  const presetMaterial = createMaterialFromPresetRef(materialPreset)
-  if (presetMaterial) return presetMaterial
-  if (material) return createMaterial(material)
-  return baseMaterial
+}: Pick<ColumnNode, "material" | "materialPreset">) {
+  const presetMaterial = createMaterialFromPresetRef(materialPreset);
+  if (presetMaterial) return presetMaterial;
+  if (material) return createMaterial(material);
+  return baseMaterial;
 }
 
 function getSegments(node: ColumnNode) {
-  if (node.crossSection === 'octagonal') return 8
-  if (node.crossSection === 'sixteen-sided') return 16
-  return 32
+  if (node.crossSection === "octagonal") return 8;
+  if (node.crossSection === "sixteen-sided") return 16;
+  return 32;
 }
 
 function getShaftProfile(node: ColumnNode) {
-  return node.shaftProfile ?? (node.shaftTaper > 0 ? 'tapered' : 'straight')
+  return node.shaftProfile ?? (node.shaftTaper > 0 ? "tapered" : "straight");
 }
 
 function getShaftSegmentCount(node: ColumnNode) {
-  const shaftProfile = getShaftProfile(node)
-  const shaftTaper = node.shaftTaper ?? 0
-  const hasTwist = Math.abs(node.shaftTwistStep ?? 0) > 0.001
+  const shaftProfile = getShaftProfile(node);
+  const shaftTaper = node.shaftTaper ?? 0;
+  const hasTwist = Math.abs(node.shaftTwistStep ?? 0) > 0.001;
   return Math.max(
     hasTwist ? 4 : 1,
-    shaftProfile === 'straight' && shaftTaper <= 0 && !hasTwist
+    shaftProfile === "straight" && shaftTaper <= 0 && !hasTwist
       ? 1
       : (node.shaftSegmentCount ?? (hasTwist ? 12 : 24)),
-  )
+  );
 }
 
 function getShaftTwistRadians(node: ColumnNode, index: number) {
-  return ((node.shaftTwistStep ?? 0) * Math.PI * index) / 180
+  return ((node.shaftTwistStep ?? 0) * Math.PI * index) / 180;
 }
 
 function getShaftScaleAt(node: ColumnNode, t: number) {
-  const shaftProfile = getShaftProfile(node)
-  const shaftTaper = Math.min(node.shaftTaper ?? 0, 0.85)
-  const startScale = node.shaftStartScale ?? 0.72
-  const endScale = node.shaftEndScale ?? startScale
+  const shaftProfile = getShaftProfile(node);
+  const shaftTaper = Math.min(node.shaftTaper ?? 0, 0.85);
+  const startScale = node.shaftStartScale ?? 0.72;
+  const endScale = node.shaftEndScale ?? startScale;
   const shaftBulge =
     node.shaftBulge ??
-    (shaftProfile === 'bulged'
+    (shaftProfile === "bulged"
       ? 0.16
-      : shaftProfile === 'baluster'
+      : shaftProfile === "baluster"
         ? 0.2
-        : shaftProfile === 'hourglass'
+        : shaftProfile === "hourglass"
           ? 0.18
-          : 0)
-  const taperedScale = 1 - shaftTaper * t
-  const linearScale = (startScale + (endScale - startScale) * t) * taperedScale
-  const bulgeCurve = Math.sin(Math.PI * t)
-  const hourglassCurve = Math.abs(t - 0.5) * 2
+          : 0);
+  const taperedScale = 1 - shaftTaper * t;
+  const linearScale = (startScale + (endScale - startScale) * t) * taperedScale;
+  const bulgeCurve = Math.sin(Math.PI * t);
+  const hourglassCurve = Math.abs(t - 0.5) * 2;
   const profileScale =
-    shaftProfile === 'bulged' || shaftProfile === 'baluster'
+    shaftProfile === "bulged" || shaftProfile === "baluster"
       ? linearScale + shaftBulge * bulgeCurve
-      : shaftProfile === 'hourglass'
+      : shaftProfile === "hourglass"
         ? linearScale - shaftBulge * (1 - hourglassCurve)
-        : linearScale
+        : linearScale;
 
-  return Math.max(0.1, profileScale)
+  return Math.max(0.1, profileScale);
 }
 
-type VectorTuple = [number, number, number]
+type VectorTuple = [number, number, number];
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
 
 function MappedBox({
   depth,
@@ -92,29 +109,700 @@ function MappedBox({
   softenEdges = true,
   width,
 }: {
-  depth: number
-  height: number
-  position: VectorTuple
-  rotation?: VectorTuple
-  softenEdges?: boolean
-  width: number
+  depth: number;
+  height: number;
+  position: VectorTuple;
+  rotation?: VectorTuple;
+  softenEdges?: boolean;
+  width: number;
 }) {
-  const edgeSoftness = useContext(ColumnEdgeSoftnessContext)
-  const minDimension = Math.max(0, Math.min(width, height, depth))
-  const bevelRadius = softenEdges ? Math.min(Math.max(0, edgeSoftness), minDimension * 0.35) : 0
+  const edgeSoftness = useContext(ColumnEdgeSoftnessContext);
+  const minDimension = Math.max(0, Math.min(width, height, depth));
+  const bevelRadius = softenEdges
+    ? Math.min(Math.max(0, edgeSoftness), minDimension * 0.35)
+    : 0;
   const geometry = useMemo(() => {
-    if (height <= 0 || width <= 0 || depth <= 0) return null
-    return createColumnBoxGeometry(width, height, depth, bevelRadius)
-  }, [bevelRadius, depth, height, width])
+    if (height <= 0 || width <= 0 || depth <= 0) return null;
+    return createColumnBoxGeometry(width, height, depth, bevelRadius);
+  }, [bevelRadius, depth, height, width]);
 
-  if (!geometry) return null
+  if (!geometry) return null;
 
   return (
     <mesh dispose={null} position={position} rotation={rotation}>
       <primitive attach="geometry" dispose={null} object={geometry} />
       <ColumnMaterial />
     </mesh>
-  )
+  );
+}
+
+function FlatEndedBeam({
+  depth,
+  end,
+  start,
+  width,
+}: {
+  depth: number;
+  end: VectorTuple;
+  start: VectorTuple;
+  width: number;
+}) {
+  const dx = end[0] - start[0];
+  const dy = end[1] - start[1];
+  const dz = end[2] - start[2];
+  const length = Math.hypot(dx, dy, dz);
+  const geometry = useMemo(() => {
+    if (length <= 0.001 || width <= 0 || depth <= 0) return null;
+
+    const halfWidth = width / 2;
+    const halfDepth = depth / 2;
+    const bottomY = start[1];
+    const topY = end[1];
+    const bottomCenterX = start[0];
+    const topCenterX = end[0];
+    const bottomCenterZ = start[2];
+    const topCenterZ = end[2];
+    const vertices: VectorTuple[] = [
+      [bottomCenterX - halfWidth, bottomY, bottomCenterZ - halfDepth],
+      [bottomCenterX + halfWidth, bottomY, bottomCenterZ - halfDepth],
+      [bottomCenterX + halfWidth, bottomY, bottomCenterZ + halfDepth],
+      [bottomCenterX - halfWidth, bottomY, bottomCenterZ + halfDepth],
+      [topCenterX - halfWidth, topY, topCenterZ - halfDepth],
+      [topCenterX + halfWidth, topY, topCenterZ - halfDepth],
+      [topCenterX + halfWidth, topY, topCenterZ + halfDepth],
+      [topCenterX - halfWidth, topY, topCenterZ + halfDepth],
+    ];
+    const faceQuads: [number, number, number, number][] = [
+      [0, 1, 2, 3],
+      [4, 7, 6, 5],
+      [0, 4, 5, 1],
+      [1, 5, 6, 2],
+      [2, 6, 7, 3],
+      [3, 7, 4, 0],
+    ];
+    const positions: number[] = [];
+    const pushTriangle = (a: number, b: number, c: number) => {
+      const va = vertices[a];
+      const vb = vertices[b];
+      const vc = vertices[c];
+      if (!va || !vb || !vc) return;
+      positions.push(...va, ...vb, ...vc);
+    };
+
+    for (const [a, b, c, d] of faceQuads) {
+      pushTriangle(a, b, c);
+      pushTriangle(a, c, d);
+      pushTriangle(a, c, b);
+      pushTriangle(a, d, c);
+    }
+
+    const geometry = new BufferGeometry();
+    geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+    geometry.computeVertexNormals();
+    return geometry;
+  }, [depth, length, start, end, width]);
+
+  if (!geometry) return null;
+
+  return (
+    <mesh dispose={null}>
+      <primitive attach="geometry" dispose={null} object={geometry} />
+      <ColumnMaterial />
+    </mesh>
+  );
+}
+
+function AFrameSupport({ node }: { node: ColumnNode }) {
+  const height = Math.max(0.2, node.height);
+  const braceWidth = clamp(node.braceWidth ?? node.width, 0.04, 1.6);
+  const braceDepth = clamp(node.braceDepth ?? node.depth, 0.04, 1.6);
+  const bottomSpread = Math.max(
+    0.2,
+    node.braceBottomSpread ?? Math.max(node.width * 3, 1.2),
+  );
+  const topSpread = clamp(node.braceTopSpread ?? 0.12, 0, bottomSpread);
+  const bottomY = 0;
+  const topY = height;
+  const leftBottom: VectorTuple = [-bottomSpread / 2, bottomY, 0];
+  const rightBottom: VectorTuple = [bottomSpread / 2, bottomY, 0];
+  const leftTop: VectorTuple = [-topSpread / 2, topY, 0];
+  const rightTop: VectorTuple = [topSpread / 2, topY, 0];
+  const plateHeight = Math.max(0.035, Math.min(0.08, braceWidth * 0.45));
+  const footPlateWidth = braceWidth * 1.9;
+  const footPlateDepth = braceDepth * 1.75;
+  const topPlateWidth = Math.max(
+    topSpread + braceWidth * 1.9,
+    braceWidth * 2.2,
+  );
+  const topPlateDepth = braceDepth * 1.75;
+
+  return (
+    <group>
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={leftTop}
+        start={leftBottom}
+        width={braceWidth}
+      />
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={rightTop}
+        start={rightBottom}
+        width={braceWidth}
+      />
+      {(node.bracePlateEnabled ?? true) && (
+        <>
+          <MappedBox
+            depth={footPlateDepth}
+            height={plateHeight}
+            position={[leftBottom[0], plateHeight / 2, leftBottom[2]]}
+            width={footPlateWidth}
+          />
+          <MappedBox
+            depth={footPlateDepth}
+            height={plateHeight}
+            position={[rightBottom[0], plateHeight / 2, rightBottom[2]]}
+            width={footPlateWidth}
+          />
+          <MappedBox
+            depth={topPlateDepth}
+            height={plateHeight}
+            position={[0, height - plateHeight / 2, 0]}
+            width={topPlateWidth}
+          />
+        </>
+      )}
+    </group>
+  );
+}
+
+function YFrameSupport({ node }: { node: ColumnNode }) {
+  const height = Math.max(0.2, node.height);
+  const braceWidth = clamp(node.braceWidth ?? node.width, 0.04, 1.6);
+  const braceDepth = clamp(node.braceDepth ?? node.depth, 0.04, 1.6);
+  const topSpread = Math.max(0.2, node.braceTopSpread ?? 0.9);
+  const splitY = height * 0.56;
+  const foot: VectorTuple = [0, 0, 0];
+  const split: VectorTuple = [0, splitY, 0];
+  const leftTop: VectorTuple = [-topSpread / 2, height, 0];
+  const rightTop: VectorTuple = [topSpread / 2, height, 0];
+  const plateHeight = Math.max(0.035, Math.min(0.08, braceWidth * 0.45));
+  const footPlateWidth = braceWidth * 1.9;
+  const footPlateDepth = braceDepth * 1.75;
+  const topPlateWidth = topSpread + braceWidth * 1.9;
+  const topPlateDepth = braceDepth * 1.75;
+
+  return (
+    <group>
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={split}
+        start={foot}
+        width={braceWidth}
+      />
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={leftTop}
+        start={split}
+        width={braceWidth}
+      />
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={rightTop}
+        start={split}
+        width={braceWidth}
+      />
+      {(node.bracePlateEnabled ?? true) && (
+        <>
+          <MappedBox
+            depth={footPlateDepth}
+            height={plateHeight}
+            position={[foot[0], plateHeight / 2, foot[2]]}
+            width={footPlateWidth}
+          />
+          <MappedBox
+            depth={topPlateDepth}
+            height={plateHeight}
+            position={[0, height - plateHeight / 2, 0]}
+            width={topPlateWidth}
+          />
+        </>
+      )}
+    </group>
+  );
+}
+
+function VFrameSupport({ node }: { node: ColumnNode }) {
+  const height = Math.max(0.2, node.height);
+  const braceWidth = clamp(node.braceWidth ?? node.width, 0.04, 1.6);
+  const braceDepth = clamp(node.braceDepth ?? node.depth, 0.04, 1.6);
+  const topSpread = Math.max(0.2, node.braceTopSpread ?? 1);
+  const foot: VectorTuple = [0, 0, 0];
+  const leftTop: VectorTuple = [-topSpread / 2, height, 0];
+  const rightTop: VectorTuple = [topSpread / 2, height, 0];
+  const plateHeight = Math.max(0.035, Math.min(0.08, braceWidth * 0.45));
+  const footPlateWidth = braceWidth * 1.9;
+  const footPlateDepth = braceDepth * 1.75;
+  const topPlateWidth = topSpread + braceWidth * 1.9;
+  const topPlateDepth = braceDepth * 1.75;
+
+  return (
+    <group>
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={leftTop}
+        start={foot}
+        width={braceWidth}
+      />
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={rightTop}
+        start={foot}
+        width={braceWidth}
+      />
+      {(node.bracePlateEnabled ?? true) && (
+        <>
+          <MappedBox
+            depth={footPlateDepth}
+            height={plateHeight}
+            position={[foot[0], plateHeight / 2, foot[2]]}
+            width={footPlateWidth}
+          />
+          <MappedBox
+            depth={topPlateDepth}
+            height={plateHeight}
+            position={[0, height - plateHeight / 2, 0]}
+            width={topPlateWidth}
+          />
+        </>
+      )}
+    </group>
+  );
+}
+
+function XBraceSupport({ node }: { node: ColumnNode }) {
+  const height = Math.max(0.2, node.height);
+  const braceWidth = clamp(node.braceWidth ?? node.width, 0.04, 1.6);
+  const braceDepth = clamp(node.braceDepth ?? node.depth, 0.04, 1.6);
+  const bottomSpread = Math.max(0.2, node.braceBottomSpread ?? 1);
+  const topSpread = Math.max(0.2, node.braceTopSpread ?? 1);
+  const leftBottom: VectorTuple = [-bottomSpread / 2, 0, 0];
+  const rightBottom: VectorTuple = [bottomSpread / 2, 0, 0];
+  const leftTop: VectorTuple = [-topSpread / 2, height, 0];
+  const rightTop: VectorTuple = [topSpread / 2, height, 0];
+  const plateHeight = Math.max(0.035, Math.min(0.08, braceWidth * 0.45));
+  const footPlateWidth = braceWidth * 1.9;
+  const footPlateDepth = braceDepth * 1.75;
+  const topPlateWidth = braceWidth * 1.9;
+  const topPlateDepth = braceDepth * 1.75;
+
+  return (
+    <group>
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={rightTop}
+        start={leftBottom}
+        width={braceWidth}
+      />
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={leftTop}
+        start={rightBottom}
+        width={braceWidth}
+      />
+      {(node.bracePlateEnabled ?? true) && (
+        <>
+          <MappedBox
+            depth={footPlateDepth}
+            height={plateHeight}
+            position={[leftBottom[0], plateHeight / 2, leftBottom[2]]}
+            width={footPlateWidth}
+          />
+          <MappedBox
+            depth={footPlateDepth}
+            height={plateHeight}
+            position={[rightBottom[0], plateHeight / 2, rightBottom[2]]}
+            width={footPlateWidth}
+          />
+          <MappedBox
+            depth={topPlateDepth}
+            height={plateHeight}
+            position={[leftTop[0], height - plateHeight / 2, leftTop[2]]}
+            width={topPlateWidth}
+          />
+          <MappedBox
+            depth={topPlateDepth}
+            height={plateHeight}
+            position={[rightTop[0], height - plateHeight / 2, rightTop[2]]}
+            width={topPlateWidth}
+          />
+        </>
+      )}
+    </group>
+  );
+}
+
+function KBraceSupport({ node }: { node: ColumnNode }) {
+  const height = Math.max(0.2, node.height);
+  const braceWidth = clamp(node.braceWidth ?? node.width, 0.04, 1.6);
+  const braceDepth = clamp(node.braceDepth ?? node.depth, 0.04, 1.6);
+  const spread = Math.max(
+    0.2,
+    Math.max(node.braceBottomSpread ?? 1, node.braceTopSpread ?? 1),
+  );
+  const leftBottom: VectorTuple = [-spread / 2, 0, 0];
+  const leftTop: VectorTuple = [-spread / 2, height, 0];
+  const centerBottom: VectorTuple = [0, 0, 0];
+  const centerMiddle: VectorTuple = [0, height / 2, 0];
+  const centerTop: VectorTuple = [0, height, 0];
+  const plateHeight = Math.max(0.035, Math.min(0.08, braceWidth * 0.45));
+  const plateWidth = braceWidth * 1.9;
+  const plateDepth = braceDepth * 1.75;
+
+  return (
+    <group>
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={centerTop}
+        start={centerBottom}
+        width={braceWidth}
+      />
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={centerMiddle}
+        start={leftBottom}
+        width={braceWidth}
+      />
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={centerMiddle}
+        start={leftTop}
+        width={braceWidth}
+      />
+      {(node.bracePlateEnabled ?? true) && (
+        <>
+          <MappedBox
+            depth={plateDepth}
+            height={plateHeight}
+            position={[leftBottom[0], plateHeight / 2, leftBottom[2]]}
+            width={plateWidth}
+          />
+          <MappedBox
+            depth={plateDepth}
+            height={plateHeight}
+            position={[centerBottom[0], plateHeight / 2, centerBottom[2]]}
+            width={plateWidth}
+          />
+          <MappedBox
+            depth={plateDepth}
+            height={plateHeight}
+            position={[leftTop[0], height - plateHeight / 2, leftTop[2]]}
+            width={plateWidth}
+          />
+          <MappedBox
+            depth={plateDepth}
+            height={plateHeight}
+            position={[centerTop[0], height - plateHeight / 2, centerTop[2]]}
+            width={plateWidth}
+          />
+        </>
+      )}
+    </group>
+  );
+}
+
+function SingleStrutSupport({ node }: { node: ColumnNode }) {
+  const height = Math.max(0.2, node.height);
+  const braceWidth = clamp(node.braceWidth ?? node.width, 0.04, 1.6);
+  const braceDepth = clamp(node.braceDepth ?? node.depth, 0.04, 1.6);
+  const spread = Math.max(
+    0.2,
+    Math.max(node.braceBottomSpread ?? 1, node.braceTopSpread ?? 1),
+  );
+  const bottom: VectorTuple = [-spread / 2, 0, 0];
+  const top: VectorTuple = [spread / 2, height, 0];
+  const plateHeight = Math.max(0.035, Math.min(0.08, braceWidth * 0.45));
+  const plateWidth = braceWidth * 1.9;
+  const plateDepth = braceDepth * 1.75;
+
+  return (
+    <group>
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={top}
+        start={bottom}
+        width={braceWidth}
+      />
+      {(node.bracePlateEnabled ?? true) && (
+        <>
+          <MappedBox
+            depth={plateDepth}
+            height={plateHeight}
+            position={[bottom[0], plateHeight / 2, bottom[2]]}
+            width={plateWidth}
+          />
+          <MappedBox
+            depth={plateDepth}
+            height={plateHeight}
+            position={[top[0], height - plateHeight / 2, top[2]]}
+            width={plateWidth}
+          />
+        </>
+      )}
+    </group>
+  );
+}
+
+function TripodSupport({ node }: { node: ColumnNode }) {
+  const height = Math.max(0.2, node.height);
+  const braceWidth = clamp(node.braceWidth ?? node.width, 0.04, 1.6);
+  const braceDepth = clamp(node.braceDepth ?? node.depth, 0.04, 1.6);
+  const width = Math.max(0.2, node.braceBottomSpread ?? 1.1);
+  const depth = Math.max(0.2, node.braceTopSpread ?? 1.1);
+  const top: VectorTuple = [0, height, 0];
+  const feet: VectorTuple[] = [
+    [0, 0, -depth / 2],
+    [-width / 2, 0, depth / 2],
+    [width / 2, 0, depth / 2],
+  ];
+  const plateHeight = Math.max(0.035, Math.min(0.08, braceWidth * 0.45));
+  const plateWidth = braceWidth * 1.9;
+  const plateDepth = braceDepth * 1.75;
+
+  return (
+    <group>
+      {feet.map((foot, index) => (
+        <FlatEndedBeam
+          depth={braceDepth}
+          end={top}
+          key={`leg-${index}`}
+          start={foot}
+          width={braceWidth}
+        />
+      ))}
+      {(node.bracePlateEnabled ?? true) && (
+        <>
+          {feet.map((foot, index) => (
+            <MappedBox
+              depth={plateDepth}
+              height={plateHeight}
+              key={`foot-${index}`}
+              position={[foot[0], plateHeight / 2, foot[2]]}
+              width={plateWidth}
+            />
+          ))}
+          <MappedBox
+            depth={plateDepth}
+            height={plateHeight}
+            position={[0, height - plateHeight / 2, 0]}
+            width={plateWidth}
+          />
+        </>
+      )}
+    </group>
+  );
+}
+
+function TrestleSupport({ node }: { node: ColumnNode }) {
+  const height = Math.max(0.2, node.height);
+  const braceWidth = clamp(node.braceWidth ?? node.width, 0.04, 1.6);
+  const braceDepth = clamp(node.braceDepth ?? node.depth, 0.04, 1.6);
+  const width = Math.max(0.2, node.braceBottomSpread ?? 1.2);
+  const depth = Math.max(0.2, node.braceTopSpread ?? 1);
+  const zPositions = [-depth / 2, depth / 2];
+  const topPoints: VectorTuple[] = zPositions.map((z) => [0, height, z]);
+  const footPoints: VectorTuple[] = zPositions.flatMap((z) => [
+    [-width / 2, 0, z] as VectorTuple,
+    [width / 2, 0, z] as VectorTuple,
+  ]);
+  const plateHeight = Math.max(0.035, Math.min(0.08, braceWidth * 0.45));
+  const plateWidth = braceWidth * 1.9;
+  const plateDepth = braceDepth * 1.75;
+
+  return (
+    <group>
+      {zPositions.map((z, index) => {
+        const leftBottom: VectorTuple = [-width / 2, 0, z];
+        const rightBottom: VectorTuple = [width / 2, 0, z];
+        const top: VectorTuple = topPoints[index] ?? [0, height, z];
+        return (
+          <group key={`frame-${z}`}>
+            <FlatEndedBeam
+              depth={braceDepth}
+              end={top}
+              start={leftBottom}
+              width={braceWidth}
+            />
+            <FlatEndedBeam
+              depth={braceDepth}
+              end={top}
+              start={rightBottom}
+              width={braceWidth}
+            />
+          </group>
+        );
+      })}
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={topPoints[1] ?? [0, height, depth / 2]}
+        start={topPoints[0] ?? [0, height, -depth / 2]}
+        width={braceWidth}
+      />
+      {(node.bracePlateEnabled ?? true) && (
+        <>
+          {footPoints.map((foot, index) => (
+            <MappedBox
+              depth={plateDepth}
+              height={plateHeight}
+              key={`foot-${index}`}
+              position={[foot[0], plateHeight / 2, foot[2]]}
+              width={plateWidth}
+            />
+          ))}
+          {topPoints.map((top, index) => (
+            <MappedBox
+              depth={plateDepth}
+              height={plateHeight}
+              key={`top-${index}`}
+              position={[top[0], height - plateHeight / 2, top[2]]}
+              width={plateWidth}
+            />
+          ))}
+        </>
+      )}
+    </group>
+  );
+}
+
+function PortalFrameSupport({ node }: { node: ColumnNode }) {
+  const height = Math.max(0.2, node.height);
+  const braceWidth = clamp(node.braceWidth ?? node.width, 0.04, 1.6);
+  const braceDepth = clamp(node.braceDepth ?? node.depth, 0.04, 1.6);
+  const width = Math.max(0.2, node.braceBottomSpread ?? 1.4);
+  const leftBottom: VectorTuple = [-width / 2, 0, 0];
+  const rightBottom: VectorTuple = [width / 2, 0, 0];
+  const leftTop: VectorTuple = [-width / 2, height, 0];
+  const rightTop: VectorTuple = [width / 2, height, 0];
+  const plateHeight = Math.max(0.035, Math.min(0.08, braceWidth * 0.45));
+  const plateWidth = braceWidth * 1.9;
+  const plateDepth = braceDepth * 1.75;
+
+  return (
+    <group>
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={leftTop}
+        start={leftBottom}
+        width={braceWidth}
+      />
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={rightTop}
+        start={rightBottom}
+        width={braceWidth}
+      />
+      <FlatEndedBeam
+        depth={braceDepth}
+        end={rightTop}
+        start={leftTop}
+        width={braceWidth}
+      />
+      {(node.bracePlateEnabled ?? true) && (
+        <>
+          {[leftBottom, rightBottom].map((foot, index) => (
+            <MappedBox
+              depth={plateDepth}
+              height={plateHeight}
+              key={`foot-${index}`}
+              position={[foot[0], plateHeight / 2, foot[2]]}
+              width={plateWidth}
+            />
+          ))}
+          {[leftTop, rightTop].map((top, index) => (
+            <MappedBox
+              depth={plateDepth}
+              height={plateHeight}
+              key={`top-${index}`}
+              position={[top[0], height - plateHeight / 2, top[2]]}
+              width={plateWidth}
+            />
+          ))}
+        </>
+      )}
+    </group>
+  );
+}
+
+function BoxFrameSupport({ node }: { node: ColumnNode }) {
+  const height = Math.max(0.2, node.height);
+  const braceWidth = clamp(node.braceWidth ?? node.width, 0.04, 1.6);
+  const braceDepth = clamp(node.braceDepth ?? node.depth, 0.04, 1.6);
+  const width = Math.max(0.2, node.braceBottomSpread ?? 1.4);
+  const depth = Math.max(0.2, node.braceTopSpread ?? 1);
+  const corners: VectorTuple[] = [
+    [-width / 2, 0, -depth / 2],
+    [width / 2, 0, -depth / 2],
+    [width / 2, 0, depth / 2],
+    [-width / 2, 0, depth / 2],
+  ];
+  const topCorners = corners.map(([x, _y, z]) => [x, height, z] as VectorTuple);
+  const plateHeight = Math.max(0.035, Math.min(0.08, braceWidth * 0.45));
+  const plateWidth = braceWidth * 1.9;
+  const plateDepth = braceDepth * 1.75;
+
+  return (
+    <group>
+      {corners.map((corner, index) => (
+        <FlatEndedBeam
+          depth={braceDepth}
+          end={topCorners[index] ?? [corner[0], height, corner[2]]}
+          key={`post-${index}`}
+          start={corner}
+          width={braceWidth}
+        />
+      ))}
+      {topCorners.map((corner, index) => (
+        <FlatEndedBeam
+          depth={braceDepth}
+          end={topCorners[(index + 1) % topCorners.length] ?? corner}
+          key={`top-rail-${index}`}
+          start={corner}
+          width={braceWidth}
+        />
+      ))}
+      {corners.map((corner, index) => (
+        <FlatEndedBeam
+          depth={braceDepth}
+          end={corners[(index + 1) % corners.length] ?? corner}
+          key={`bottom-rail-${index}`}
+          start={corner}
+          width={braceWidth}
+        />
+      ))}
+      {(node.bracePlateEnabled ?? true) && (
+        <>
+          {corners.map((corner, index) => (
+            <MappedBox
+              depth={plateDepth}
+              height={plateHeight}
+              key={`foot-${index}`}
+              position={[corner[0], plateHeight / 2, corner[2]]}
+              width={plateWidth}
+            />
+          ))}
+          {topCorners.map((corner, index) => (
+            <MappedBox
+              depth={plateDepth}
+              height={plateHeight}
+              key={`top-${index}`}
+              position={[corner[0], height - plateHeight / 2, corner[2]]}
+              width={plateWidth}
+            />
+          ))}
+        </>
+      )}
+    </group>
+  );
 }
 
 function MappedCylinder({
@@ -128,18 +816,19 @@ function MappedCylinder({
   rotation,
   segments = 32,
 }: {
-  height: number
-  position: VectorTuple
-  radius: number
-  radiusBottom?: number
-  radiusTop?: number
-  radiusX?: number
-  radiusZ?: number
-  rotation?: VectorTuple
-  segments?: number
+  height: number;
+  position: VectorTuple;
+  radius: number;
+  radiusBottom?: number;
+  radiusTop?: number;
+  radiusX?: number;
+  radiusZ?: number;
+  rotation?: VectorTuple;
+  segments?: number;
 }) {
   const geometry = useMemo(() => {
-    if (height <= 0 || radius <= 0 || radiusBottom < 0 || radiusTop < 0) return null
+    if (height <= 0 || radius <= 0 || radiusBottom < 0 || radiusTop < 0)
+      return null;
     return createColumnCylinderGeometry({
       height,
       radiusBottom,
@@ -147,17 +836,17 @@ function MappedCylinder({
       radiusX,
       radiusZ,
       segments,
-    })
-  }, [height, radius, radiusBottom, radiusTop, radiusX, radiusZ, segments])
+    });
+  }, [height, radius, radiusBottom, radiusTop, radiusX, radiusZ, segments]);
 
-  if (!geometry) return null
+  if (!geometry) return null;
 
   return (
     <mesh dispose={null} position={position} rotation={rotation}>
       <primitive attach="geometry" dispose={null} object={geometry} />
       <ColumnMaterial />
     </mesh>
-  )
+  );
 }
 
 function MappedCone({
@@ -168,15 +857,15 @@ function MappedCone({
   rotation,
   segments = 6,
 }: {
-  height: number
-  position: VectorTuple
-  radiusX: number
-  radiusZ?: number
-  rotation?: VectorTuple
-  segments?: number
+  height: number;
+  position: VectorTuple;
+  radiusX: number;
+  radiusZ?: number;
+  rotation?: VectorTuple;
+  segments?: number;
 }) {
   const geometry = useMemo(() => {
-    if (height <= 0 || radiusX <= 0 || radiusZ <= 0) return null
+    if (height <= 0 || radiusX <= 0 || radiusZ <= 0) return null;
     return createColumnCylinderGeometry({
       height,
       radiusBottom: 1,
@@ -184,17 +873,17 @@ function MappedCone({
       radiusX,
       radiusZ,
       segments,
-    })
-  }, [height, radiusX, radiusZ, segments])
+    });
+  }, [height, radiusX, radiusZ, segments]);
 
-  if (!geometry) return null
+  if (!geometry) return null;
 
   return (
     <mesh dispose={null} position={position} rotation={rotation}>
       <primitive attach="geometry" dispose={null} object={geometry} />
       <ColumnMaterial />
     </mesh>
-  )
+  );
 }
 
 function MappedSphere({
@@ -203,24 +892,24 @@ function MappedSphere({
   segments = 10,
   verticalSegments = 8,
 }: {
-  position: VectorTuple
-  radius: number
-  segments?: number
-  verticalSegments?: number
+  position: VectorTuple;
+  radius: number;
+  segments?: number;
+  verticalSegments?: number;
 }) {
   const geometry = useMemo(() => {
-    if (radius <= 0) return null
-    return createColumnSphereGeometry(radius, segments, verticalSegments)
-  }, [radius, segments, verticalSegments])
+    if (radius <= 0) return null;
+    return createColumnSphereGeometry(radius, segments, verticalSegments);
+  }, [radius, segments, verticalSegments]);
 
-  if (!geometry) return null
+  if (!geometry) return null;
 
   return (
     <mesh dispose={null} position={position}>
       <primitive attach="geometry" dispose={null} object={geometry} />
       <ColumnMaterial />
     </mesh>
-  )
+  );
 }
 
 function MappedTorus({
@@ -233,28 +922,35 @@ function MappedTorus({
   scaleZ,
   tubeRadius,
 }: {
-  arc?: number
-  position: VectorTuple
-  ringRadius: number
-  rotation?: VectorTuple
-  scaleX?: number
-  scaleY?: number
-  scaleZ?: number
-  tubeRadius: number
+  arc?: number;
+  position: VectorTuple;
+  ringRadius: number;
+  rotation?: VectorTuple;
+  scaleX?: number;
+  scaleY?: number;
+  scaleZ?: number;
+  tubeRadius: number;
 }) {
   const geometry = useMemo(() => {
-    if (ringRadius <= 0 || tubeRadius <= 0) return null
-    return createColumnTorusGeometry({ arc, ringRadius, scaleX, scaleY, scaleZ, tubeRadius })
-  }, [arc, ringRadius, scaleX, scaleY, scaleZ, tubeRadius])
+    if (ringRadius <= 0 || tubeRadius <= 0) return null;
+    return createColumnTorusGeometry({
+      arc,
+      ringRadius,
+      scaleX,
+      scaleY,
+      scaleZ,
+      tubeRadius,
+    });
+  }, [arc, ringRadius, scaleX, scaleY, scaleZ, tubeRadius]);
 
-  if (!geometry) return null
+  if (!geometry) return null;
 
   return (
     <mesh dispose={null} position={position} rotation={rotation}>
       <primitive attach="geometry" dispose={null} object={geometry} />
       <ColumnMaterial />
     </mesh>
-  )
+  );
 }
 
 function SquareBlock({
@@ -264,11 +960,11 @@ function SquareBlock({
   depth,
   softenEdges = true,
 }: {
-  y: number
-  height: number
-  width: number
-  depth: number
-  softenEdges?: boolean
+  y: number;
+  height: number;
+  width: number;
+  depth: number;
+  softenEdges?: boolean;
 }) {
   return (
     <MappedBox
@@ -278,7 +974,7 @@ function SquareBlock({
       softenEdges={softenEdges}
       width={width}
     />
-  )
+  );
 }
 
 function RoundBlock({
@@ -289,12 +985,12 @@ function RoundBlock({
   radius,
   segments = 32,
 }: {
-  x?: number
-  y: number
-  z?: number
-  height: number
-  radius: number
-  segments?: number
+  x?: number;
+  y: number;
+  z?: number;
+  height: number;
+  radius: number;
+  segments?: number;
 }) {
   return (
     <MappedCylinder
@@ -303,7 +999,7 @@ function RoundBlock({
       radius={radius}
       segments={segments}
     />
-  )
+  );
 }
 
 function RoundedRectangleShaftSegment({
@@ -313,31 +1009,46 @@ function RoundedRectangleShaftSegment({
   depth,
   cornerRadius,
 }: {
-  y: number
-  height: number
-  width: number
-  depth: number
-  cornerRadius: number
+  y: number;
+  height: number;
+  width: number;
+  depth: number;
+  cornerRadius: number;
 }) {
-  if (height <= 0) return null
+  if (height <= 0) return null;
 
-  const radius = Math.min(Math.max(0, cornerRadius), Math.min(width, depth) * 0.45)
+  const radius = Math.min(
+    Math.max(0, cornerRadius),
+    Math.min(width, depth) * 0.45,
+  );
   if (radius <= 0.001) {
-    return <SquareBlock depth={depth} height={height} width={width} y={y} />
+    return <SquareBlock depth={depth} height={height} width={width} y={y} />;
   }
 
-  const innerWidth = Math.max(0, width - radius * 2)
-  const innerDepth = Math.max(0, depth - radius * 2)
-  const cornerX = width / 2 - radius
-  const cornerZ = depth / 2 - radius
+  const innerWidth = Math.max(0, width - radius * 2);
+  const innerDepth = Math.max(0, depth - radius * 2);
+  const cornerX = width / 2 - radius;
+  const cornerZ = depth / 2 - radius;
 
   return (
     <group>
       {innerWidth > 0 && (
-        <SquareBlock depth={depth} height={height} softenEdges={false} width={innerWidth} y={y} />
+        <SquareBlock
+          depth={depth}
+          height={height}
+          softenEdges={false}
+          width={innerWidth}
+          y={y}
+        />
       )}
       {innerDepth > 0 && (
-        <SquareBlock depth={innerDepth} height={height} softenEdges={false} width={width} y={y} />
+        <SquareBlock
+          depth={innerDepth}
+          height={height}
+          softenEdges={false}
+          width={width}
+          y={y}
+        />
       )}
       {(
         [
@@ -347,10 +1058,18 @@ function RoundedRectangleShaftSegment({
           [-cornerX, -cornerZ],
         ] satisfies [number, number][]
       ).map(([x, z], index) => (
-        <RoundBlock height={height} key={index} radius={radius} segments={18} x={x} y={y} z={z} />
+        <RoundBlock
+          height={height}
+          key={index}
+          radius={radius}
+          segments={18}
+          x={x}
+          y={y}
+          z={z}
+        />
       ))}
     </group>
-  )
+  );
 }
 
 function OvalBlock({
@@ -360,11 +1079,11 @@ function OvalBlock({
   depth,
   segments = 32,
 }: {
-  y: number
-  height: number
-  width: number
-  depth: number
-  segments?: number
+  y: number;
+  height: number;
+  width: number;
+  depth: number;
+  segments?: number;
 }) {
   return (
     <MappedCylinder
@@ -375,7 +1094,7 @@ function OvalBlock({
       radiusZ={depth / 2}
       segments={segments}
     />
-  )
+  );
 }
 
 function ColumnBlock({
@@ -384,35 +1103,53 @@ function ColumnBlock({
   height,
   scale = 1,
 }: {
-  node: ColumnNode
-  y: number
-  height: number
-  scale?: number
+  node: ColumnNode;
+  y: number;
+  height: number;
+  scale?: number;
 }) {
-  if (height <= 0) return null
+  if (height <= 0) return null;
 
-  const width = node.width * scale
-  const depth = node.depth * scale
-  const radius = node.radius * scale
+  const width = node.width * scale;
+  const depth = node.depth * scale;
+  const radius = node.radius * scale;
 
-  if (node.crossSection === 'square' || node.crossSection === 'rectangular') {
-    return <SquareBlock depth={depth} height={height} width={width} y={y} />
+  if (node.crossSection === "square" || node.crossSection === "rectangular") {
+    return <SquareBlock depth={depth} height={height} width={width} y={y} />;
   }
 
-  return <RoundBlock height={height} radius={radius} segments={getSegments(node)} y={y} />
+  return (
+    <RoundBlock
+      height={height}
+      radius={radius}
+      segments={getSegments(node)}
+      y={y}
+    />
+  );
 }
 
-function TaperedRoundShaft({ node, y, height }: { node: ColumnNode; y: number; height: number }) {
-  const segmentCount = getShaftSegmentCount(node)
-  const segmentHeight = height / segmentCount
+function TaperedRoundShaft({
+  node,
+  y,
+  height,
+}: {
+  node: ColumnNode;
+  y: number;
+  height: number;
+}) {
+  const segmentCount = getShaftSegmentCount(node);
+  const segmentHeight = height / segmentCount;
 
   return (
     <group>
       {Array.from({ length: segmentCount }, (_, index) => {
-        const t = (index + 0.5) / segmentCount
-        const profileScale = getShaftScaleAt(node, t)
+        const t = (index + 0.5) / segmentCount;
+        const profileScale = getShaftScaleAt(node, t);
         return (
-          <group key={index} rotation={[0, getShaftTwistRadians(node, index), 0]}>
+          <group
+            key={index}
+            rotation={[0, getShaftTwistRadians(node, index), 0]}
+          >
             <RoundBlock
               height={segmentHeight * 1.015}
               radius={node.radius * profileScale}
@@ -420,23 +1157,34 @@ function TaperedRoundShaft({ node, y, height }: { node: ColumnNode; y: number; h
               y={y + index * segmentHeight}
             />
           </group>
-        )
+        );
       })}
     </group>
-  )
+  );
 }
 
-function TaperedSquareShaft({ node, y, height }: { node: ColumnNode; y: number; height: number }) {
-  const segmentCount = getShaftSegmentCount(node)
-  const segmentHeight = height / segmentCount
+function TaperedSquareShaft({
+  node,
+  y,
+  height,
+}: {
+  node: ColumnNode;
+  y: number;
+  height: number;
+}) {
+  const segmentCount = getShaftSegmentCount(node);
+  const segmentHeight = height / segmentCount;
 
   return (
     <group>
       {Array.from({ length: segmentCount }, (_, index) => {
-        const t = (index + 0.5) / segmentCount
-        const profileScale = getShaftScaleAt(node, t)
+        const t = (index + 0.5) / segmentCount;
+        const profileScale = getShaftScaleAt(node, t);
         return (
-          <group key={index} rotation={[0, getShaftTwistRadians(node, index), 0]}>
+          <group
+            key={index}
+            rotation={[0, getShaftTwistRadians(node, index), 0]}
+          >
             <RoundedRectangleShaftSegment
               cornerRadius={(node.shaftCornerRadius ?? 0.035) * profileScale}
               depth={node.depth * profileScale}
@@ -445,21 +1193,34 @@ function TaperedSquareShaft({ node, y, height }: { node: ColumnNode; y: number;
               y={y + index * segmentHeight}
             />
           </group>
-        )
+        );
       })}
     </group>
-  )
+  );
 }
 
-function Shaft({ node, y, height }: { node: ColumnNode; y: number; height: number }) {
-  if (height <= 0) return null
+function Shaft({
+  node,
+  y,
+  height,
+}: {
+  node: ColumnNode;
+  y: number;
+  height: number;
+}) {
+  if (height <= 0) return null;
 
-  if (node.style === 'cluster') {
-    const sideRadius = Math.max(0.04, node.radius * 0.36)
-    const offset = Math.max(node.radius * 0.78, node.width * 0.22)
+  if (node.style === "cluster") {
+    const sideRadius = Math.max(0.04, node.radius * 0.36);
+    const offset = Math.max(node.radius * 0.78, node.width * 0.22);
     return (
       <group>
-        <RoundBlock height={height} radius={node.radius * 0.62} segments={24} y={y} />
+        <RoundBlock
+          height={height}
+          radius={node.radius * 0.62}
+          segments={24}
+          y={y}
+        />
         {(
           [
             [offset, 0],
@@ -479,30 +1240,30 @@ function Shaft({ node, y, height }: { node: ColumnNode; y: number; height: numbe
           />
         ))}
       </group>
-    )
+    );
   }
 
   if (
-    node.crossSection === 'round' ||
-    node.crossSection === 'octagonal' ||
-    node.crossSection === 'sixteen-sided'
+    node.crossSection === "round" ||
+    node.crossSection === "octagonal" ||
+    node.crossSection === "sixteen-sided"
   ) {
-    return <TaperedRoundShaft height={height} node={node} y={y} />
+    return <TaperedRoundShaft height={height} node={node} y={y} />;
   }
 
-  return <TaperedSquareShaft height={height} node={node} y={y} />
+  return <TaperedSquareShaft height={height} node={node} y={y} />;
 }
 
 function Base({ node, height }: { node: ColumnNode; height: number }) {
-  if (height <= 0) return null
+  if (height <= 0) return null;
 
-  const baseStyle = node.baseStyle ?? 'round-rings'
-  const widthScale = node.baseWidthScale ?? 1.24
-  const depthScale = node.baseDepthScale ?? widthScale
+  const baseStyle = node.baseStyle ?? "round-rings";
+  const widthScale = node.baseWidthScale ?? 1.24;
+  const depthScale = node.baseDepthScale ?? widthScale;
 
-  if (baseStyle === 'none') return null
+  if (baseStyle === "none") return null;
 
-  if (baseStyle === 'simple-square') {
+  if (baseStyle === "simple-square") {
     return (
       <SquareBlock
         depth={node.depth * depthScale}
@@ -510,10 +1271,10 @@ function Base({ node, height }: { node: ColumnNode; height: number }) {
         width={node.width * widthScale}
         y={0}
       />
-    )
+    );
   }
 
-  if (baseStyle === 'square-plinth') {
+  if (baseStyle === "square-plinth") {
     return (
       <group>
         <SquareBlock
@@ -529,19 +1290,19 @@ function Base({ node, height }: { node: ColumnNode; height: number }) {
           y={height * 0.35}
         />
       </group>
-    )
+    );
   }
 
-  if (baseStyle === 'stepped-square') {
-    const tierCount = Math.max(3, node.baseTierCount ?? 3)
-    const tierHeight = height / tierCount
-    const stepSpread = node.baseStepSpread ?? 0.42
+  if (baseStyle === "stepped-square") {
+    const tierCount = Math.max(3, node.baseTierCount ?? 3);
+    const tierHeight = height / tierCount;
+    const stepSpread = node.baseStepSpread ?? 0.42;
     return (
       <group>
         {Array.from({ length: tierCount }, (_, index) => {
-          const t = index / Math.max(1, tierCount - 1)
-          const widthScaleAt = Math.max(0.5, widthScale - t * stepSpread)
-          const depthScaleAt = Math.max(0.5, depthScale - t * stepSpread)
+          const t = index / Math.max(1, tierCount - 1);
+          const widthScaleAt = Math.max(0.5, widthScale - t * stepSpread);
+          const depthScaleAt = Math.max(0.5, depthScale - t * stepSpread);
           return (
             <SquareBlock
               depth={node.depth * depthScaleAt}
@@ -550,25 +1311,33 @@ function Base({ node, height }: { node: ColumnNode; height: number }) {
               width={node.width * widthScaleAt}
               y={index * tierHeight}
             />
-          )
+          );
         })}
       </group>
-    )
+    );
   }
 
-  if (baseStyle === 'round-rings') {
-    const baseWidth = node.width * widthScale
-    const baseDepth = node.depth * depthScale
-    const plinthRatio = Math.min(0.7, Math.max(0.2, node.basePlinthHeightRatio ?? 0.44))
-    const plinthHeight = height * plinthRatio
-    const roundedHeight = height - plinthHeight
-    const bandHeight = roundedHeight * 0.57
-    const neckHeight = roundedHeight - bandHeight
-    const bandScale = node.baseRoundBandScale ?? 0.92
-    const neckScale = node.baseNeckScale ?? 0.72
+  if (baseStyle === "round-rings") {
+    const baseWidth = node.width * widthScale;
+    const baseDepth = node.depth * depthScale;
+    const plinthRatio = Math.min(
+      0.7,
+      Math.max(0.2, node.basePlinthHeightRatio ?? 0.44),
+    );
+    const plinthHeight = height * plinthRatio;
+    const roundedHeight = height - plinthHeight;
+    const bandHeight = roundedHeight * 0.57;
+    const neckHeight = roundedHeight - bandHeight;
+    const bandScale = node.baseRoundBandScale ?? 0.92;
+    const neckScale = node.baseNeckScale ?? 0.72;
     return (
       <group>
-        <SquareBlock depth={baseDepth} height={plinthHeight} width={baseWidth} y={0} />
+        <SquareBlock
+          depth={baseDepth}
+          height={plinthHeight}
+          width={baseWidth}
+          y={0}
+        />
         <OvalBlock
           depth={baseDepth * bandScale}
           height={bandHeight}
@@ -584,13 +1353,17 @@ function Base({ node, height }: { node: ColumnNode; height: number }) {
           y={plinthHeight + bandHeight}
         />
       </group>
-    )
+    );
   }
 
-  if (baseStyle === 'lotus' || baseStyle === 'ribbed-lotus') {
-    const ribCount = node.baseRibCount ?? (baseStyle === 'ribbed-lotus' ? 24 : 14)
-    const ribRadius = Math.max(0.01, node.width * 0.025)
-    const baseRadius = Math.max(node.radius * widthScale, node.width * widthScale * 0.5)
+  if (baseStyle === "lotus" || baseStyle === "ribbed-lotus") {
+    const ribCount =
+      node.baseRibCount ?? (baseStyle === "ribbed-lotus" ? 24 : 14);
+    const ribRadius = Math.max(0.01, node.width * 0.025);
+    const baseRadius = Math.max(
+      node.radius * widthScale,
+      node.width * widthScale * 0.5,
+    );
     return (
       <group>
         <SquareBlock
@@ -606,7 +1379,7 @@ function Base({ node, height }: { node: ColumnNode; height: number }) {
           y={height * 0.22}
         />
         {Array.from({ length: ribCount }, (_, index) => {
-          const angle = (index / ribCount) * Math.PI * 2
+          const angle = (index / ribCount) * Math.PI * 2;
           return (
             <MappedCylinder
               height={height * 0.38}
@@ -620,7 +1393,7 @@ function Base({ node, height }: { node: ColumnNode; height: number }) {
               rotation={[0, -angle, 0]}
               segments={6}
             />
-          )
+          );
         })}
         <RoundBlock
           height={height * 0.16}
@@ -629,11 +1402,11 @@ function Base({ node, height }: { node: ColumnNode; height: number }) {
           y={height * 0.82}
         />
       </group>
-    )
+    );
   }
 
-  if (baseStyle === 'panelled-pedestal') {
-    const inset = node.basePanelInset ?? 0.02
+  if (baseStyle === "panelled-pedestal") {
+    const inset = node.basePanelInset ?? 0.02;
     return (
       <group>
         <SquareBlock
@@ -661,27 +1434,34 @@ function Base({ node, height }: { node: ColumnNode; height: number }) {
           />
         ))}
       </group>
-    )
+    );
   }
 
-  return <ColumnBlock height={height} node={node} scale={1.12} y={0} />
+  return <ColumnBlock height={height} node={node} scale={1.12} y={0} />;
 }
 
 function BaseCarvings({ node, height }: { node: ColumnNode; height: number }) {
-  const placement = node.carvingPlacement ?? 'capital'
-  const carvingLevel = node.baseCarvingLevel ?? 0
-  if (carvingLevel <= 0 || height <= 0 || (placement !== 'base' && placement !== 'all')) {
-    return null
+  const placement = node.carvingPlacement ?? "capital";
+  const carvingLevel = node.baseCarvingLevel ?? 0;
+  if (
+    carvingLevel <= 0 ||
+    height <= 0 ||
+    (placement !== "base" && placement !== "all")
+  ) {
+    return null;
   }
 
-  const count = Math.max(8, carvingLevel * 8)
-  const radius = Math.max(node.radius * 1.04, Math.max(node.width, node.depth) * 0.5)
-  const y = height * 0.52
+  const count = Math.max(8, carvingLevel * 8);
+  const radius = Math.max(
+    node.radius * 1.04,
+    Math.max(node.width, node.depth) * 0.5,
+  );
+  const y = height * 0.52;
 
   return (
     <group>
       {Array.from({ length: count }, (_, index) => {
-        const angle = (index / count) * Math.PI * 2
+        const angle = (index / count) * Math.PI * 2;
         return (
           <MappedCone
             height={height * 0.28}
@@ -692,10 +1472,10 @@ function BaseCarvings({ node, height }: { node: ColumnNode; height: number }) {
             rotation={[0.36, -angle, 0]}
             segments={5}
           />
-        )
+        );
       })}
     </group>
-  )
+  );
 }
 
 function Rings({
@@ -703,49 +1483,60 @@ function Rings({
   shaftY,
   shaftHeight,
 }: {
-  node: ColumnNode
-  shaftY: number
-  shaftHeight: number
+  node: ColumnNode;
+  shaftY: number;
+  shaftHeight: number;
 }) {
-  if (node.ringCount <= 0 || shaftHeight <= 0) return null
+  if (node.ringCount <= 0 || shaftHeight <= 0) return null;
 
-  const ringPlacement = node.ringPlacement ?? 'ends'
-  const ringSpread = Math.min(0.45, Math.max(0.04, node.ringSpread ?? 0.16))
+  const ringPlacement = node.ringPlacement ?? "ends";
+  const ringSpread = Math.min(0.45, Math.max(0.04, node.ringSpread ?? 0.16));
   const ringHeight = Math.min(
     node.ringThickness ?? 0.055,
     shaftHeight / Math.max(8, node.ringCount * 3),
-  )
+  );
   const rings = Array.from({ length: node.ringCount }, (_, index) => {
-    const pairIndex = Math.floor(index / 2)
-    const nearTop = index % 2 === 1
-    const pairCount = Math.ceil(node.ringCount / 2)
-    const pairT = pairCount <= 1 ? 0 : pairIndex / (pairCount - 1)
-    const offset = Math.min(0.48, 0.06 + pairT * Math.max(0, ringSpread - 0.06))
+    const pairIndex = Math.floor(index / 2);
+    const nearTop = index % 2 === 1;
+    const pairCount = Math.ceil(node.ringCount / 2);
+    const pairT = pairCount <= 1 ? 0 : pairIndex / (pairCount - 1);
+    const offset = Math.min(
+      0.48,
+      0.06 + pairT * Math.max(0, ringSpread - 0.06),
+    );
     const oneSideT =
-      0.06 + (index / Math.max(1, node.ringCount - 1)) * Math.max(0, ringSpread - 0.06)
+      0.06 +
+      (index / Math.max(1, node.ringCount - 1)) *
+        Math.max(0, ringSpread - 0.06);
     const t =
-      ringPlacement === 'even'
+      ringPlacement === "even"
         ? (index + 1) / (node.ringCount + 1)
-        : ringPlacement === 'top'
+        : ringPlacement === "top"
           ? 1 - Math.min(0.48, oneSideT)
-          : ringPlacement === 'bottom'
+          : ringPlacement === "bottom"
             ? Math.min(0.48, oneSideT)
             : nearTop
               ? 1 - offset
-              : offset
+              : offset;
     return {
       scale: Math.min(1.4, getShaftScaleAt(node, t) + 0.12),
       y: shaftY + shaftHeight * t - ringHeight / 2,
-    }
-  }).sort((a, b) => a.y - b.y)
+    };
+  }).sort((a, b) => a.y - b.y);
 
   return (
     <group>
       {rings.map((ring, index) => (
-        <ColumnBlock height={ringHeight} key={index} node={node} scale={ring.scale} y={ring.y} />
+        <ColumnBlock
+          height={ringHeight}
+          key={index}
+          node={node}
+          scale={ring.scale}
+          y={ring.y}
+        />
       ))}
     </group>
-  )
+  );
 }
 
 function LatheBands({
@@ -753,34 +1544,37 @@ function LatheBands({
   shaftY,
   shaftHeight,
 }: {
-  node: ColumnNode
-  shaftY: number
-  shaftHeight: number
+  node: ColumnNode;
+  shaftY: number;
+  shaftHeight: number;
 }) {
   const latheRingCount = Math.max(
     node.latheRingCount ?? 0,
-    node.shaftDetail === 'lathe-turned' ? 8 : 0,
-  )
-  if (latheRingCount <= 0 || shaftHeight <= 0) return null
+    node.shaftDetail === "lathe-turned" ? 8 : 0,
+  );
+  if (latheRingCount <= 0 || shaftHeight <= 0) return null;
 
-  const placement = node.latheRingSpacing ?? 'ends'
-  const bandHeight = Math.min(0.04, shaftHeight / Math.max(12, latheRingCount * 3))
+  const placement = node.latheRingSpacing ?? "ends";
+  const bandHeight = Math.min(
+    0.04,
+    shaftHeight / Math.max(12, latheRingCount * 3),
+  );
   const bands = Array.from({ length: latheRingCount }, (_, index) => {
-    const pairIndex = Math.floor(index / 2)
-    const nearTop = index % 2 === 1
-    const offset = Math.min(0.48, 0.1 + pairIndex * 0.04)
+    const pairIndex = Math.floor(index / 2);
+    const nearTop = index % 2 === 1;
+    const offset = Math.min(0.48, 0.1 + pairIndex * 0.04);
     const t =
-      placement === 'even'
+      placement === "even"
         ? (index + 1) / (latheRingCount + 1)
-        : placement === 'top'
+        : placement === "top"
           ? 1 - Math.min(0.48, 0.08 + index * 0.04)
-          : placement === 'bottom'
+          : placement === "bottom"
             ? Math.min(0.48, 0.08 + index * 0.04)
             : nearTop
               ? 1 - offset
-              : offset
-    return shaftY + shaftHeight * t - bandHeight / 2
-  }).sort((a, b) => a - b)
+              : offset;
+    return shaftY + shaftHeight * t - bandHeight / 2;
+  }).sort((a, b) => a - b);
 
   return (
     <group>
@@ -794,7 +1588,7 @@ function LatheBands({
         />
       ))}
     </group>
-  )
+  );
 }
 
 function Flutes({
@@ -802,24 +1596,28 @@ function Flutes({
   shaftY,
   shaftHeight,
 }: {
-  node: ColumnNode
-  shaftY: number
-  shaftHeight: number
+  node: ColumnNode;
+  shaftY: number;
+  shaftHeight: number;
 }) {
-  const fluteCount = Math.max(node.fluteCount, node.shaftDetail === 'fluted' ? 16 : 0)
-  if (fluteCount <= 0 || shaftHeight <= 0 || node.crossSection !== 'round') return null
+  const fluteCount = Math.max(
+    node.fluteCount,
+    node.shaftDetail === "fluted" ? 16 : 0,
+  );
+  if (fluteCount <= 0 || shaftHeight <= 0 || node.crossSection !== "round")
+    return null;
 
-  const fluteDepth = node.fluteDepth ?? 0.02
-  const fluteWidth = node.fluteWidth ?? fluteDepth
-  const fluteRadius = Math.max(0.006, fluteWidth * 0.42)
-  const shaftRadius = node.radius * 0.74
+  const fluteDepth = node.fluteDepth ?? 0.02;
+  const fluteWidth = node.fluteWidth ?? fluteDepth;
+  const fluteRadius = Math.max(0.006, fluteWidth * 0.42);
+  const shaftRadius = node.radius * 0.74;
 
   return (
     <group>
       {Array.from({ length: fluteCount }, (_, index) => {
-        const angle = (index / fluteCount) * Math.PI * 2
-        const x = Math.cos(angle) * shaftRadius
-        const z = Math.sin(angle) * shaftRadius
+        const angle = (index / fluteCount) * Math.PI * 2;
+        const x = Math.cos(angle) * shaftRadius;
+        const z = Math.sin(angle) * shaftRadius;
         return (
           <MappedCylinder
             height={shaftHeight * 0.92}
@@ -828,10 +1626,10 @@ function Flutes({
             radius={fluteRadius}
             segments={8}
           />
-        )
+        );
       })}
     </group>
-  )
+  );
 }
 
 function DravidianShaftPanels({
@@ -839,31 +1637,39 @@ function DravidianShaftPanels({
   shaftY,
   shaftHeight,
 }: {
-  node: ColumnNode
-  shaftY: number
-  shaftHeight: number
+  node: ColumnNode;
+  shaftY: number;
+  shaftHeight: number;
 }) {
   const panelCount = Math.max(
     node.panelCount ?? 0,
-    node.style === 'dravidian-carved' || node.shaftDetail === 'panelled' ? 3 : 0,
-  )
-  if (panelCount <= 0 || shaftHeight <= 0) return null
+    node.style === "dravidian-carved" || node.shaftDetail === "panelled"
+      ? 3
+      : 0,
+  );
+  if (panelCount <= 0 || shaftHeight <= 0) return null;
 
-  const shaftWidth = node.width * 0.72
-  const shaftDepth = node.depth * 0.72
-  const panelHeight = Math.min(0.42, shaftHeight / Math.max(4, panelCount + 2))
-  const panelWidth = node.width * 0.26
-  const rail = Math.max(0.012, node.width * 0.028)
-  const reliefDepth = Math.max(0.012, node.panelInsetDepth ?? node.width * 0.025)
-  const rows = Array.from({ length: panelCount }, (_, index) => (index + 1) / (panelCount + 1))
-  const panelShape = node.panelShape ?? 'rectangle'
+  const shaftWidth = node.width * 0.72;
+  const shaftDepth = node.depth * 0.72;
+  const panelHeight = Math.min(0.42, shaftHeight / Math.max(4, panelCount + 2));
+  const panelWidth = node.width * 0.26;
+  const rail = Math.max(0.012, node.width * 0.028);
+  const reliefDepth = Math.max(
+    0.012,
+    node.panelInsetDepth ?? node.width * 0.025,
+  );
+  const rows = Array.from(
+    { length: panelCount },
+    (_, index) => (index + 1) / (panelCount + 1),
+  );
+  const panelShape = node.panelShape ?? "rectangle";
 
   const PanelFace = ({
     position,
     rotation = 0,
   }: {
-    position: [number, number, number]
-    rotation?: number
+    position: [number, number, number];
+    rotation?: number;
   }) => (
     <group position={position} rotation={[0, rotation, 0]}>
       <MappedBox
@@ -894,7 +1700,7 @@ function DravidianShaftPanels({
         softenEdges={false}
         width={rail}
       />
-      {panelShape === 'diamond' && (
+      {panelShape === "diamond" && (
         <MappedBox
           depth={reliefDepth}
           height={panelHeight * 0.42}
@@ -904,7 +1710,7 @@ function DravidianShaftPanels({
           width={rail * 1.2}
         />
       )}
-      {panelShape === 'arched' && (
+      {panelShape === "arched" && (
         <MappedTorus
           arc={Math.PI}
           position={[0, panelHeight * 0.28, 0]}
@@ -916,26 +1722,29 @@ function DravidianShaftPanels({
         />
       )}
     </group>
-  )
+  );
 
   return (
     <group>
       {rows.map((t, rowIndex) => {
-        const y = shaftY + shaftHeight * t
+        const y = shaftY + shaftHeight * t;
         return (
           <group key={rowIndex}>
             <PanelFace position={[0, y, shaftDepth / 2 + reliefDepth / 2]} />
             <PanelFace position={[0, y, -shaftDepth / 2 - reliefDepth / 2]} />
-            <PanelFace position={[shaftWidth / 2 + reliefDepth / 2, y, 0]} rotation={Math.PI / 2} />
+            <PanelFace
+              position={[shaftWidth / 2 + reliefDepth / 2, y, 0]}
+              rotation={Math.PI / 2}
+            />
             <PanelFace
               position={[-shaftWidth / 2 - reliefDepth / 2, y, 0]}
               rotation={Math.PI / 2}
             />
           </group>
-        )
+        );
       })}
     </group>
-  )
+  );
 }
 
 function SpiralRibs({
@@ -943,31 +1752,36 @@ function SpiralRibs({
   shaftY,
   shaftHeight,
 }: {
-  node: ColumnNode
-  shaftY: number
-  shaftHeight: number
+  node: ColumnNode;
+  shaftY: number;
+  shaftHeight: number;
 }) {
-  const spiralRibCount = node.spiralRibCount ?? 0
-  const spiralTwist = node.spiralTwist ?? 0
-  const shaftTaper = node.shaftTaper ?? 0
-  const ribCountSetting = Math.max(spiralRibCount, node.shaftDetail === 'spiral' ? 12 : 0)
-  if (ribCountSetting <= 0 || spiralTwist === 0 || shaftHeight <= 0) return null
+  const spiralRibCount = node.spiralRibCount ?? 0;
+  const spiralTwist = node.spiralTwist ?? 0;
+  const shaftTaper = node.shaftTaper ?? 0;
+  const ribCountSetting = Math.max(
+    spiralRibCount,
+    node.shaftDetail === "spiral" ? 12 : 0,
+  );
+  if (ribCountSetting <= 0 || spiralTwist === 0 || shaftHeight <= 0)
+    return null;
 
-  const ribCount = Math.min(ribCountSetting, 24)
-  const stepCount = 28
-  const ribDistance = node.radius * 0.78
-  const ribWidth = Math.max(0.012, node.radius * 0.06)
-  const segmentHeight = (shaftHeight / stepCount) * 1.18
-  const lean = spiralTwist > 0 ? -0.55 : 0.55
+  const ribCount = Math.min(ribCountSetting, 24);
+  const stepCount = 28;
+  const ribDistance = node.radius * 0.78;
+  const ribWidth = Math.max(0.012, node.radius * 0.06);
+  const segmentHeight = (shaftHeight / stepCount) * 1.18;
+  const lean = spiralTwist > 0 ? -0.55 : 0.55;
 
   return (
     <group>
       {Array.from({ length: ribCount * stepCount }, (_, index) => {
-        const ribIndex = index % ribCount
-        const stepIndex = Math.floor(index / ribCount)
-        const t = (stepIndex + 0.5) / stepCount
-        const angle = (ribIndex / ribCount) * Math.PI * 2 + t * spiralTwist * Math.PI * 2
-        const taperScale = 1 - Math.min(shaftTaper, 0.85) * t
+        const ribIndex = index % ribCount;
+        const stepIndex = Math.floor(index / ribCount);
+        const t = (stepIndex + 0.5) / stepCount;
+        const angle =
+          (ribIndex / ribCount) * Math.PI * 2 + t * spiralTwist * Math.PI * 2;
+        const taperScale = 1 - Math.min(shaftTaper, 0.85) * t;
         return (
           <MappedCylinder
             height={segmentHeight}
@@ -981,10 +1795,10 @@ function SpiralRibs({
             rotation={[0, -angle, lean]}
             segments={8}
           />
-        )
+        );
       })}
     </group>
-  )
+  );
 }
 
 function LowerCarvedBand({
@@ -992,30 +1806,33 @@ function LowerCarvedBand({
   shaftY,
   shaftHeight,
 }: {
-  node: ColumnNode
-  shaftY: number
-  shaftHeight: number
+  node: ColumnNode;
+  shaftY: number;
+  shaftHeight: number;
 }) {
-  const placement = node.carvingPlacement ?? 'capital'
+  const placement = node.carvingPlacement ?? "capital";
   if (
     !node.lowerBandEnabled ||
     shaftHeight <= 0 ||
-    (placement !== 'shaft' && placement !== 'all')
+    (placement !== "shaft" && placement !== "all")
   ) {
-    return null
+    return null;
   }
 
-  const bandHeight = Math.min(node.lowerBandHeight ?? 0.24, shaftHeight * 0.35)
-  const y = shaftY + shaftHeight * 0.12
-  const level = Math.max(1, node.lowerBandCarvingLevel ?? 1)
-  const count = Math.max(6, level * 6)
-  const distance = Math.max(node.radius * 0.82, Math.max(node.width, node.depth) * 0.36)
+  const bandHeight = Math.min(node.lowerBandHeight ?? 0.24, shaftHeight * 0.35);
+  const y = shaftY + shaftHeight * 0.12;
+  const level = Math.max(1, node.lowerBandCarvingLevel ?? 1);
+  const count = Math.max(6, level * 6);
+  const distance = Math.max(
+    node.radius * 0.82,
+    Math.max(node.width, node.depth) * 0.36,
+  );
 
   return (
     <group>
       <ColumnBlock height={bandHeight} node={node} scale={0.84} y={y} />
       {Array.from({ length: count }, (_, index) => {
-        const angle = (index / count) * Math.PI * 2
+        const angle = (index / count) * Math.PI * 2;
         return (
           <MappedCylinder
             height={bandHeight * 0.62}
@@ -1029,10 +1846,10 @@ function LowerCarvedBand({
             rotation={[0, -angle, 0]}
             segments={5}
           />
-        )
+        );
       })}
     </group>
-  )
+  );
 }
 
 function CapitalCarvings({
@@ -1040,45 +1857,48 @@ function CapitalCarvings({
   capitalY,
   capitalHeight,
 }: {
-  node: ColumnNode
-  capitalY: number
-  capitalHeight: number
+  node: ColumnNode;
+  capitalY: number;
+  capitalHeight: number;
 }) {
-  const placement = node.carvingPlacement ?? 'capital'
-  const carvingLevel = Math.max(node.carvingLevel ?? 0, node.capitalCarvingLevel ?? 0)
-  const bandSetting = node.capitalBandCount ?? 0
+  const placement = node.carvingPlacement ?? "capital";
+  const carvingLevel = Math.max(
+    node.carvingLevel ?? 0,
+    node.capitalCarvingLevel ?? 0,
+  );
+  const bandSetting = node.capitalBandCount ?? 0;
   if (
     (carvingLevel <= 0 && bandSetting <= 0) ||
     capitalHeight <= 0 ||
-    (placement !== 'capital' && placement !== 'all')
+    (placement !== "capital" && placement !== "all")
   ) {
-    return null
+    return null;
   }
 
-  const level = Math.min(Math.max(carvingLevel, bandSetting > 0 ? 1 : 0), 4)
-  const bandHeight = Math.min(0.035, capitalHeight / 8)
-  const bandCount = Math.min(bandSetting > 0 ? bandSetting : level + 1, 16)
+  const level = Math.min(Math.max(carvingLevel, bandSetting > 0 ? 1 : 0), 4);
+  const bandHeight = Math.min(0.035, capitalHeight / 8);
+  const bandCount = Math.min(bandSetting > 0 ? bandSetting : level + 1, 16);
   const bands = Array.from({ length: bandCount }, (_, index) => {
-    const t = (index + 1) / (bandCount + 1)
-    return capitalY + capitalHeight * t - bandHeight / 2
-  })
+    const t = (index + 1) / (bandCount + 1);
+    return capitalY + capitalHeight * t - bandHeight / 2;
+  });
 
-  if (node.crossSection === 'square' || node.crossSection === 'rectangular') {
-    const dentilCount = Math.max(node.dentilCount ?? 0, level * 4, 4)
-    const dentilHeight = Math.min(0.08, capitalHeight * 0.28)
-    const dentilDepth = Math.min(0.08, Math.min(node.width, node.depth) * 0.16)
-    const dentilWidth = Math.max(0.025, node.width / (dentilCount * 1.75))
-    const halfWidth = node.width * 0.56
-    const halfDepth = node.depth * 0.56
-    const y = capitalY + capitalHeight * 0.28
+  if (node.crossSection === "square" || node.crossSection === "rectangular") {
+    const dentilCount = Math.max(node.dentilCount ?? 0, level * 4, 4);
+    const dentilHeight = Math.min(0.08, capitalHeight * 0.28);
+    const dentilDepth = Math.min(0.08, Math.min(node.width, node.depth) * 0.16);
+    const dentilWidth = Math.max(0.025, node.width / (dentilCount * 1.75));
+    const halfWidth = node.width * 0.56;
+    const halfDepth = node.depth * 0.56;
+    const y = capitalY + capitalHeight * 0.28;
     const xPositions = Array.from({ length: dentilCount }, (_, index) => {
-      const t = dentilCount === 1 ? 0.5 : index / (dentilCount - 1)
-      return -halfWidth + t * halfWidth * 2
-    })
+      const t = dentilCount === 1 ? 0.5 : index / (dentilCount - 1);
+      return -halfWidth + t * halfWidth * 2;
+    });
     const zPositions = Array.from({ length: dentilCount }, (_, index) => {
-      const t = dentilCount === 1 ? 0.5 : index / (dentilCount - 1)
-      return -halfDepth + t * halfDepth * 2
-    })
+      const t = dentilCount === 1 ? 0.5 : index / (dentilCount - 1);
+      return -halfDepth + t * halfDepth * 2;
+    });
 
     return (
       <group>
@@ -1128,31 +1948,41 @@ function CapitalCarvings({
           </group>
         ))}
       </group>
-    )
+    );
   }
 
-  const beadCount = Math.max(node.beadCount ?? 0, 8, level * 8)
-  const beadRadius = Math.max(0.012, Math.min(0.03, node.radius * 0.12))
-  const beadDistance = node.radius * 1.24
-  const beadY = capitalY + capitalHeight * 0.24
+  const beadCount = Math.max(node.beadCount ?? 0, 8, level * 8);
+  const beadRadius = Math.max(0.012, Math.min(0.03, node.radius * 0.12));
+  const beadDistance = node.radius * 1.24;
+  const beadY = capitalY + capitalHeight * 0.24;
 
   return (
     <group>
       {bands.map((bandY, index) => (
-        <ColumnBlock height={bandHeight} key={`band-${index}`} node={node} scale={1.24} y={bandY} />
+        <ColumnBlock
+          height={bandHeight}
+          key={`band-${index}`}
+          node={node}
+          scale={1.24}
+          y={bandY}
+        />
       ))}
       {Array.from({ length: beadCount }, (_, index) => {
-        const angle = (index / beadCount) * Math.PI * 2
+        const angle = (index / beadCount) * Math.PI * 2;
         return (
           <MappedSphere
             key={`bead-${index}`}
-            position={[Math.cos(angle) * beadDistance, beadY, Math.sin(angle) * beadDistance]}
+            position={[
+              Math.cos(angle) * beadDistance,
+              beadY,
+              Math.sin(angle) * beadDistance,
+            ]}
             radius={beadRadius}
           />
-        )
+        );
       })}
     </group>
-  )
+  );
 }
 
 function Volutes({
@@ -1160,18 +1990,22 @@ function Volutes({
   capitalY,
   capitalHeight,
 }: {
-  node: ColumnNode
-  capitalY: number
-  capitalHeight: number
+  node: ColumnNode;
+  capitalY: number;
+  capitalHeight: number;
 }) {
-  if (!['volute', 'ionic-volute'].includes(node.capitalStyle ?? 'simple') || capitalHeight <= 0)
-    return null
+  if (
+    !["volute", "ionic-volute"].includes(node.capitalStyle ?? "simple") ||
+    capitalHeight <= 0
+  )
+    return null;
 
-  const y = capitalY + capitalHeight * 0.62
-  const radius = node.voluteSize ?? Math.min(0.085, Math.max(0.04, node.width * 0.12))
-  const x = node.width * 0.46
-  const z = node.depth * 0.7
-  const maxVolutes = Math.max(0, Math.min(node.voluteCount ?? 4, 8))
+  const y = capitalY + capitalHeight * 0.62;
+  const radius =
+    node.voluteSize ?? Math.min(0.085, Math.max(0.04, node.width * 0.12));
+  const x = node.width * 0.46;
+  const z = node.depth * 0.7;
+  const maxVolutes = Math.max(0, Math.min(node.voluteCount ?? 4, 8));
   const volutes = [
     {
       position: [x, y, z] as [number, number, number],
@@ -1205,7 +2039,7 @@ function Volutes({
       position: [-z, y, -x] as [number, number, number],
       rotation: [0, -Math.PI / 2, 0] as [number, number, number],
     },
-  ].slice(0, maxVolutes)
+  ].slice(0, maxVolutes);
 
   return (
     <group>
@@ -1220,7 +2054,7 @@ function Volutes({
         />
       ))}
     </group>
-  )
+  );
 }
 
 function LeafCarvings({
@@ -1228,63 +2062,83 @@ function LeafCarvings({
   capitalY,
   capitalHeight,
 }: {
-  node: ColumnNode
-  capitalY: number
-  capitalHeight: number
+  node: ColumnNode;
+  capitalY: number;
+  capitalHeight: number;
 }) {
   if (
-    !['leaf-carved', 'corinthian-leaf'].includes(node.capitalStyle ?? 'simple') ||
+    !["leaf-carved", "corinthian-leaf"].includes(
+      node.capitalStyle ?? "simple",
+    ) ||
     capitalHeight <= 0
   ) {
-    return null
+    return null;
   }
 
-  const leafCount = node.leafCount ?? (node.crossSection === 'round' ? 18 : 12)
-  const distance = Math.max(node.radius * 1.05, Math.max(node.width, node.depth) * 0.48)
-  const rowCount = Math.max(0, Math.min(node.leafRows ?? 2, 4))
+  const leafCount = node.leafCount ?? (node.crossSection === "round" ? 18 : 12);
+  const distance = Math.max(
+    node.radius * 1.05,
+    Math.max(node.width, node.depth) * 0.48,
+  );
+  const rowCount = Math.max(0, Math.min(node.leafRows ?? 2, 4));
   const rows = Array.from({ length: rowCount }, (_, index) => ({
     y: capitalY + capitalHeight * (0.3 + index * 0.16),
     scale: 0.28 - index * 0.04,
     offset: index % 2 === 0 ? 0 : Math.PI / leafCount,
-  }))
+  }));
 
   return (
     <group>
       {rows.flatMap((row, rowIndex) =>
         Array.from({ length: leafCount }, (_, index) => {
-          const angle = (index / leafCount) * Math.PI * 2 + row.offset
+          const angle = (index / leafCount) * Math.PI * 2 + row.offset;
           return (
             <MappedCone
               height={capitalHeight * row.scale}
               key={`${rowIndex}-${index}`}
-              position={[Math.cos(angle) * distance, row.y, Math.sin(angle) * distance]}
+              position={[
+                Math.cos(angle) * distance,
+                row.y,
+                Math.sin(angle) * distance,
+              ]}
               radiusX={0.018}
               radiusZ={0.01}
               rotation={[0.48, -angle, 0]}
               segments={6}
             />
-          )
+          );
         }),
       )}
     </group>
-  )
+  );
 }
 
-function Capital({ node, y, height }: { node: ColumnNode; y: number; height: number }) {
-  if (height <= 0) return null
+function Capital({
+  node,
+  y,
+  height,
+}: {
+  node: ColumnNode;
+  y: number;
+  height: number;
+}) {
+  if (height <= 0) return null;
 
-  const capitalStyle = node.capitalStyle ?? 'simple'
-  if (capitalStyle === 'none') return null
+  const capitalStyle = node.capitalStyle ?? "simple";
+  if (capitalStyle === "none") return null;
 
-  if (capitalStyle === 'south-indian-bracket' || capitalStyle === 'wood-bracket') {
-    const tierCount = Math.max(1, node.bracketTierCount ?? 3)
-    const tierHeight = height / tierCount
-    const bracketDepth = node.bracketDepth ?? 0.35
+  if (
+    capitalStyle === "south-indian-bracket" ||
+    capitalStyle === "wood-bracket"
+  ) {
+    const tierCount = Math.max(1, node.bracketTierCount ?? 3);
+    const tierHeight = height / tierCount;
+    const bracketDepth = node.bracketDepth ?? 0.35;
     return (
       <group>
         {Array.from({ length: tierCount }, (_, index) => {
-          const t = index / Math.max(1, tierCount - 1)
-          const scale = (node.capitalWidthScale ?? 1.6) + t * 0.32
+          const t = index / Math.max(1, tierCount - 1);
+          const scale = (node.capitalWidthScale ?? 1.6) + t * 0.32;
           return (
             <SquareBlock
               depth={node.depth * scale + bracketDepth * t}
@@ -1293,30 +2147,35 @@ function Capital({ node, y, height }: { node: ColumnNode; y: number; height: num
               width={node.width * scale + bracketDepth * t}
               y={y + index * tierHeight}
             />
-          )
+          );
         })}
         {Array.from({ length: node.pendantCount ?? 0 }, (_, index) => {
-          const count = Math.max(1, node.pendantCount ?? 0)
-          const angle = (index / count) * Math.PI * 2
-          const distance = Math.max(node.width, node.depth) * 0.56
+          const count = Math.max(1, node.pendantCount ?? 0);
+          const angle = (index / count) * Math.PI * 2;
+          const distance = Math.max(node.width, node.depth) * 0.56;
           return (
             <MappedCone
               height={height * 0.28}
               key={index}
-              position={[Math.cos(angle) * distance, y - height * 0.1, Math.sin(angle) * distance]}
+              position={[
+                Math.cos(angle) * distance,
+                y - height * 0.1,
+                Math.sin(angle) * distance,
+              ]}
               radiusX={0.035}
               rotation={[0, 0, 0]}
               segments={6}
             />
-          )
+          );
         })}
       </group>
-    )
+    );
   }
 
-  if (capitalStyle === 'rounded' || capitalStyle === 'doric') {
-    const topWidth = node.width * (node.capitalWidthScale ?? 1.34)
-    const topDepth = node.depth * (node.capitalDepthScale ?? node.capitalWidthScale ?? 1.34)
+  if (capitalStyle === "rounded" || capitalStyle === "doric") {
+    const topWidth = node.width * (node.capitalWidthScale ?? 1.34);
+    const topDepth =
+      node.depth * (node.capitalDepthScale ?? node.capitalWidthScale ?? 1.34);
     return (
       <group>
         <OvalBlock
@@ -1340,22 +2199,22 @@ function Capital({ node, y, height }: { node: ColumnNode; y: number; height: num
           y={y + height * 0.56}
         />
       </group>
-    )
+    );
   }
 
-  if (capitalStyle === 'stepped') {
-    const widthScale = node.capitalWidthScale ?? 1.46
-    const depthScale = node.capitalDepthScale ?? widthScale
-    const tierCount = Math.max(3, node.capitalTierCount ?? 3)
-    const tierHeight = height / tierCount
-    const stepSpread = node.capitalStepSpread ?? 0.42
+  if (capitalStyle === "stepped") {
+    const widthScale = node.capitalWidthScale ?? 1.46;
+    const depthScale = node.capitalDepthScale ?? widthScale;
+    const tierCount = Math.max(3, node.capitalTierCount ?? 3);
+    const tierHeight = height / tierCount;
+    const stepSpread = node.capitalStepSpread ?? 0.42;
 
     return (
       <group>
         {Array.from({ length: tierCount }, (_, index) => {
-          const t = index / Math.max(1, tierCount - 1)
-          const widthScaleAt = Math.max(0.5, widthScale - (1 - t) * stepSpread)
-          const depthScaleAt = Math.max(0.5, depthScale - (1 - t) * stepSpread)
+          const t = index / Math.max(1, tierCount - 1);
+          const widthScaleAt = Math.max(0.5, widthScale - (1 - t) * stepSpread);
+          const depthScaleAt = Math.max(0.5, depthScale - (1 - t) * stepSpread);
           return (
             <SquareBlock
               depth={node.depth * depthScaleAt}
@@ -1364,25 +2223,31 @@ function Capital({ node, y, height }: { node: ColumnNode; y: number; height: num
               width={node.width * widthScaleAt}
               y={y + index * tierHeight}
             />
-          )
+          );
         })}
       </group>
-    )
+    );
   }
 
   if (
-    capitalStyle === 'volute' ||
-    capitalStyle === 'ionic-volute' ||
-    capitalStyle === 'leaf-carved' ||
-    capitalStyle === 'corinthian-leaf'
+    capitalStyle === "volute" ||
+    capitalStyle === "ionic-volute" ||
+    capitalStyle === "leaf-carved" ||
+    capitalStyle === "corinthian-leaf"
   ) {
-    const topWidth = node.width * (node.capitalWidthScale ?? 1.46)
-    const topDepth = node.depth * (node.capitalDepthScale ?? node.capitalWidthScale ?? 1.46)
+    const topWidth = node.width * (node.capitalWidthScale ?? 1.46);
+    const topDepth =
+      node.depth * (node.capitalDepthScale ?? node.capitalWidthScale ?? 1.46);
 
     return (
       <group>
         <ColumnBlock height={height * 0.24} node={node} scale={0.9} y={y} />
-        <ColumnBlock height={height * 0.2} node={node} scale={1.08} y={y + height * 0.24} />
+        <ColumnBlock
+          height={height * 0.2}
+          node={node}
+          scale={1.08}
+          y={y + height * 0.24}
+        />
         <SquareBlock
           depth={topDepth}
           height={height * 0.28}
@@ -1392,13 +2257,14 @@ function Capital({ node, y, height }: { node: ColumnNode; y: number; height: num
         <Volutes capitalHeight={height} capitalY={y} node={node} />
         <LeafCarvings capitalHeight={height} capitalY={y} node={node} />
       </group>
-    )
+    );
   }
 
-  const widthScale = node.capitalWidthScale ?? (capitalStyle === 'simple-slab' ? 1.28 : 1.18)
-  const depthScale = node.capitalDepthScale ?? widthScale
+  const widthScale =
+    node.capitalWidthScale ?? (capitalStyle === "simple-slab" ? 1.28 : 1.18);
+  const depthScale = node.capitalDepthScale ?? widthScale;
 
-  if (node.crossSection === 'square' || node.crossSection === 'rectangular') {
+  if (node.crossSection === "square" || node.crossSection === "rectangular") {
     return (
       <SquareBlock
         depth={node.depth * depthScale}
@@ -1406,7 +2272,7 @@ function Capital({ node, y, height }: { node: ColumnNode; y: number; height: num
         width={node.width * widthScale}
         y={y}
       />
-    )
+    );
   }
 
   return (
@@ -1416,15 +2282,19 @@ function Capital({ node, y, height }: { node: ColumnNode; y: number; height: num
       segments={getSegments(node)}
       y={y}
     />
-  )
+  );
 }
 
 export const ColumnRenderer = ({ node }: { node: ColumnNode }) => {
-  const ref = useRef<Group>(null!)
-  const handlers = useNodeEvents(node, 'column')
-  const liveTransform = useLiveTransforms((state) => state.get(node.id))
+  const ref = useRef<Group>(null!);
+  const handlers = useNodeEvents(node, "column");
+  const liveTransform = useLiveTransforms((state) => state.get(node.id));
   const material = useMemo(
-    () => createColumnMaterial({ material: node.material, materialPreset: node.materialPreset }),
+    () =>
+      createColumnMaterial({
+        material: node.material,
+        materialPreset: node.materialPreset,
+      }),
     [
       node.material,
       node.material?.preset,
@@ -1432,17 +2302,28 @@ export const ColumnRenderer = ({ node }: { node: ColumnNode }) => {
       node.material?.texture,
       node.materialPreset,
     ],
-  )
+  );
 
-  useRegistry(node.id, node.type, ref)
+  useRegistry(node.id, node.type, ref);
 
   const shaftLayout = useMemo(() => {
-    const baseHeight = node.baseStyle === 'none' ? 0 : Math.min(node.baseHeight, node.height * 0.4)
+    const baseHeight =
+      node.baseStyle === "none"
+        ? 0
+        : Math.min(node.baseHeight, node.height * 0.4);
     const capitalHeight =
-      node.capitalStyle === 'none' ? 0 : Math.min(node.capitalHeight, node.height * 0.4)
-    const shaftHeight = Math.max(0.1, node.height - baseHeight - capitalHeight)
-    return { baseHeight, capitalHeight, shaftY: baseHeight, shaftHeight }
-  }, [node.baseHeight, node.baseStyle, node.capitalHeight, node.capitalStyle, node.height])
+      node.capitalStyle === "none"
+        ? 0
+        : Math.min(node.capitalHeight, node.height * 0.4);
+    const shaftHeight = Math.max(0.1, node.height - baseHeight - capitalHeight);
+    return { baseHeight, capitalHeight, shaftY: baseHeight, shaftHeight };
+  }, [
+    node.baseHeight,
+    node.baseStyle,
+    node.capitalHeight,
+    node.capitalStyle,
+    node.height,
+  ]);
 
   return (
     <ColumnMaterialContext.Provider value={material}>
@@ -1454,43 +2335,79 @@ export const ColumnRenderer = ({ node }: { node: ColumnNode }) => {
           visible={node.visible}
           {...handlers}
         >
-          <Base height={shaftLayout.baseHeight} node={node} />
-          <BaseCarvings height={shaftLayout.baseHeight} node={node} />
-          <Shaft height={shaftLayout.shaftHeight} node={node} y={shaftLayout.shaftY} />
-          <Rings node={node} shaftHeight={shaftLayout.shaftHeight} shaftY={shaftLayout.shaftY} />
-          <LatheBands
-            node={node}
-            shaftHeight={shaftLayout.shaftHeight}
-            shaftY={shaftLayout.shaftY}
-          />
-          <Flutes node={node} shaftHeight={shaftLayout.shaftHeight} shaftY={shaftLayout.shaftY} />
-          <LowerCarvedBand
-            node={node}
-            shaftHeight={shaftLayout.shaftHeight}
-            shaftY={shaftLayout.shaftY}
-          />
-          <DravidianShaftPanels
-            node={node}
-            shaftHeight={shaftLayout.shaftHeight}
-            shaftY={shaftLayout.shaftY}
-          />
-          <SpiralRibs
-            node={node}
-            shaftHeight={shaftLayout.shaftHeight}
-            shaftY={shaftLayout.shaftY}
-          />
-          <Capital
-            height={shaftLayout.capitalHeight}
-            node={node}
-            y={shaftLayout.baseHeight + shaftLayout.shaftHeight}
-          />
-          <CapitalCarvings
-            capitalHeight={shaftLayout.capitalHeight}
-            capitalY={shaftLayout.baseHeight + shaftLayout.shaftHeight}
-            node={node}
-          />
+          {node.supportStyle === "a-frame" ? (
+            <AFrameSupport node={node} />
+          ) : node.supportStyle === "y-frame" ? (
+            <YFrameSupport node={node} />
+          ) : node.supportStyle === "v-frame" ? (
+            <VFrameSupport node={node} />
+          ) : node.supportStyle === "x-brace" ? (
+            <XBraceSupport node={node} />
+          ) : node.supportStyle === "k-brace" ? (
+            <KBraceSupport node={node} />
+          ) : node.supportStyle === "single-strut" ? (
+            <SingleStrutSupport node={node} />
+          ) : node.supportStyle === "tripod" ? (
+            <TripodSupport node={node} />
+          ) : node.supportStyle === "trestle" ? (
+            <TrestleSupport node={node} />
+          ) : node.supportStyle === "portal-frame" ? (
+            <PortalFrameSupport node={node} />
+          ) : node.supportStyle === "box-frame" ? (
+            <BoxFrameSupport node={node} />
+          ) : (
+            <>
+              <Base height={shaftLayout.baseHeight} node={node} />
+              <BaseCarvings height={shaftLayout.baseHeight} node={node} />
+              <Shaft
+                height={shaftLayout.shaftHeight}
+                node={node}
+                y={shaftLayout.shaftY}
+              />
+              <Rings
+                node={node}
+                shaftHeight={shaftLayout.shaftHeight}
+                shaftY={shaftLayout.shaftY}
+              />
+              <LatheBands
+                node={node}
+                shaftHeight={shaftLayout.shaftHeight}
+                shaftY={shaftLayout.shaftY}
+              />
+              <Flutes
+                node={node}
+                shaftHeight={shaftLayout.shaftHeight}
+                shaftY={shaftLayout.shaftY}
+              />
+              <LowerCarvedBand
+                node={node}
+                shaftHeight={shaftLayout.shaftHeight}
+                shaftY={shaftLayout.shaftY}
+              />
+              <DravidianShaftPanels
+                node={node}
+                shaftHeight={shaftLayout.shaftHeight}
+                shaftY={shaftLayout.shaftY}
+              />
+              <SpiralRibs
+                node={node}
+                shaftHeight={shaftLayout.shaftHeight}
+                shaftY={shaftLayout.shaftY}
+              />
+              <Capital
+                height={shaftLayout.capitalHeight}
+                node={node}
+                y={shaftLayout.baseHeight + shaftLayout.shaftHeight}
+              />
+              <CapitalCarvings
+                capitalHeight={shaftLayout.capitalHeight}
+                capitalY={shaftLayout.baseHeight + shaftLayout.shaftHeight}
+                node={node}
+              />
+            </>
+          )}
         </group>
       </ColumnEdgeSoftnessContext.Provider>
     </ColumnMaterialContext.Provider>
-  )
-}
+  );
+};
diff --git a/packages/viewer/src/systems/fence/fence-system.tsx b/packages/viewer/src/systems/fence/fence-system.tsx
index c0a2605c..42f7f0dc 100644
--- a/packages/viewer/src/systems/fence/fence-system.tsx
+++ b/packages/viewer/src/systems/fence/fence-system.tsx
@@ -1,4 +1,3 @@
-import { useFrame } from '@react-three/fiber'
 import {
   type AnyNodeId,
   type FenceNode,
@@ -7,6 +6,7 @@ import {
   sceneRegistry,
   useScene,
 } from '@pascal-app/core'
+import { useFrame } from '@react-three/fiber'
 import * as THREE from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 
@@ -69,7 +69,9 @@ function createFenceCurveSpanParts(
   const parts: FencePart[] = []
   const frameCount = Math.max(
     1,
-    Math.ceil((getWallCurveLength(fence) * Math.max(1e-4, endT - startT)) / MIN_CURVE_SEGMENT_LENGTH),
+    Math.ceil(
+      (getWallCurveLength(fence) * Math.max(1e-4, endT - startT)) / MIN_CURVE_SEGMENT_LENGTH,
+    ),
   )
 
   let previous = getFencePointAt(fence, startT)
@@ -164,6 +166,7 @@ function createFenceParts(fence: FenceNode): FencePart[] {
   const spacing = Math.max(fence.postSpacing * styleDefaults.spacingFactor, postWidth * 1.2)
   const edgeInset = Math.max(fence.edgeInset ?? 0.015, 0.005)
   const isFloating = fence.baseStyle === 'floating'
+  const showInfill = fence.showInfill ?? true
   const baseY = isFloating ? clearance : 0
   const effectiveBaseHeight = baseHeight
   const startInsetT = Math.min(0.499, edgeInset / length)
@@ -192,18 +195,18 @@ function createFenceParts(fence: FenceNode): FencePart[] {
     )
   }
 
-  const count = Math.max(2, Math.floor((length - edgeInset * 2) / spacing) + 1)
+  const count = showInfill ? Math.max(2, Math.floor((length - edgeInset * 2) / spacing) + 1) : 2
   const verticalY = baseY + effectiveBaseHeight + verticalHeight / 2
 
   for (let index = 0; index < count; index += 1) {
     const t = count === 1 ? 0.5 : startInsetT + (endInsetT - startInsetT) * (index / (count - 1))
     const frame = getFencePointAt(fence, t)
     const isEdgePost = index === 0 || index === count - 1
-    const postHeight =
-      isFloating && isEdgePost
-        ? effectiveBaseHeight + verticalHeight + topRailHeight + clearance
-        : verticalHeight
-    const postY = isFloating && isEdgePost ? postHeight / 2 : verticalY
+    const fullHeightPost = !showInfill || (isFloating && isEdgePost)
+    const postHeight = fullHeightPost
+      ? effectiveBaseHeight + verticalHeight + topRailHeight + clearance
+      : verticalHeight
+    const postY = fullHeightPost ? postHeight / 2 : verticalY
 
     parts.push({
       position: [frame.point.x, postY, frame.point.y],
@@ -244,7 +247,9 @@ function generateFenceGeometry(fence: FenceNode) {
   const geometries = parts.map(createFencePartGeometry)
 
   const merged = mergeGeometries(geometries, false) ?? new THREE.BufferGeometry()
-  geometries.forEach((geometry) => geometry.dispose())
+  geometries.forEach((geometry) => {
+    geometry.dispose()
+  })
   const mergedUv = merged.getAttribute('uv')
   if (mergedUv) {
     merged.setAttribute('uv2', new THREE.Float32BufferAttribute(Array.from(mergedUv.array), 2))