@pascal-app/editor 0.6.0 → 0.8.0

package/src/components/ui/panels/door-panel.tsx

@@ -5,17 +5,17 @@ import {
   type AnyNodeId,
   DoorNode,
   emitter,
-  type MaterialSchema,
+  useInteractive,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { BookMarked, Copy, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
-import { useCallback } from 'react'
+import { BookMarked, Copy, DoorOpen, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
+import { useCallback, useRef } from 'react'
 import { usePresetsAdapter } from '../../../contexts/presets-context'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
-import { MaterialPicker } from '../controls/material-picker'
 import { MetricControl } from '../controls/metric-control'
 import { PanelSection } from '../controls/panel-section'
 import { SegmentedControl } from '../controls/segmented-control'
@@ -24,12 +24,99 @@ import { ToggleControl } from '../controls/toggle-control'
 import { PanelWrapper } from './panel-wrapper'
 import { PresetsPopover } from './presets/presets-popover'
 
+const doorTypeOptions = [
+  { label: 'Hinged', value: 'hinged', available: true },
+  { label: 'Double', value: 'double', available: true },
+  { label: 'French', value: 'french', available: true },
+  { label: 'Folding', value: 'folding', available: true },
+  { label: 'Pocket', value: 'pocket', available: true },
+  { label: 'Barn', value: 'barn', available: true },
+  { label: 'Sliding', value: 'sliding', available: true },
+] satisfies {
+  label: string
+  value: DoorNode['doorType']
+  available: boolean
+}[]
+
+const garageDoorTypeOptions = [
+  { label: 'Sectional', value: 'garage-sectional', available: true },
+  { label: 'Roll-up', value: 'garage-rollup', available: true },
+  { label: 'Tilt-up', value: 'garage-tiltup', available: true },
+] satisfies {
+  label: string
+  value: DoorNode['doorType']
+  available: boolean
+}[]
+
+const frenchDoorSegments: DoorNode['segments'] = [
+  {
+    type: 'glass',
+    heightRatio: 0.76,
+    columnRatios: [1, 1],
+    dividerThickness: 0.025,
+    panelDepth: 0.01,
+    panelInset: 0.04,
+  },
+  {
+    type: 'panel',
+    heightRatio: 0.24,
+    columnRatios: [1],
+    dividerThickness: 0.03,
+    panelDepth: 0.012,
+    panelInset: 0.035,
+  },
+]
+
+const foldingDoorSegments: DoorNode['segments'] = [
+  {
+    type: 'panel',
+    heightRatio: 1,
+    columnRatios: [1],
+    dividerThickness: 0.02,
+    panelDepth: 0.008,
+    panelInset: 0.025,
+  },
+]
+
+const defaultDoorDimensions: Record<DoorNode['doorType'], { width: number; height: number }> = {
+  hinged: { width: 0.9, height: 2.1 },
+  double: { width: 1.5, height: 2.1 },
+  french: { width: 1.5, height: 2.1 },
+  folding: { width: 1.8, height: 2.1 },
+  pocket: { width: 0.9, height: 2.1 },
+  barn: { width: 1, height: 2.1 },
+  sliding: { width: 1.5, height: 2.1 },
+  'garage-sectional': { width: 2.7, height: 2.4 },
+  'garage-rollup': { width: 2.7, height: 2.4 },
+  'garage-tiltup': { width: 2.7, height: 2.4 },
+}
+
+function isSameDoorValue(current: unknown, next: unknown): boolean {
+  if (typeof current === 'number' && typeof next === 'number') {
+    return Math.abs(current - next) < 1e-6
+  }
+
+  if (Array.isArray(current) && Array.isArray(next)) {
+    return (
+      current.length === next.length &&
+      current.every((value, index) => isSameDoorValue(value, next[index]))
+    )
+  }
+
+  return Object.is(current, next)
+}
+
 export function DoorPanel() {
   const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
   const updateNode = useScene((s) => s.updateNode)
   const deleteNode = useScene((s) => s.deleteNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
+  const previewRef = useRef<{
+    id: AnyNodeId
+    key: keyof DoorNode
+    value: unknown
+  } | null>(null)
 
   const adapter = usePresetsAdapter()
 
@@ -39,18 +126,67 @@ export function DoorPanel() {
 
   const handleUpdate = useCallback(
     (updates: Partial<DoorNode>) => {
-      if (!selectedId) return
+      if (!(selectedId && node)) return
+      const hasChange = Object.entries(updates).some(([key, value]) => {
+        const currentValue = node[key as keyof DoorNode]
+        return !isSameDoorValue(currentValue, value)
+      })
+      if (!hasChange) return
+
+      if ('operationState' in updates || 'swingAngle' in updates || 'doorType' in updates) {
+        useInteractive.getState().removeDoorOpenState(selectedId as AnyNodeId)
+      }
       updateNode(selectedId as AnyNode['id'], updates)
       useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
     },
-    [selectedId, updateNode],
+    [selectedId, node, updateNode],
   )
 
-  const handleMaterialChange = useCallback(
-    (material: MaterialSchema) => {
-      handleUpdate({ material })
+  const previewDoorUpdate = useCallback(
+    <K extends keyof DoorNode>(key: K, value: DoorNode[K]) => {
+      if (!selectedId) return
+      const liveNode = useScene.getState().nodes[selectedId as AnyNodeId]
+      if (liveNode?.type !== 'door') return
+
+      if (
+        !(
+          previewRef.current &&
+          previewRef.current.id === selectedId &&
+          previewRef.current.key === key
+        )
+      ) {
+        previewRef.current = {
+          id: selectedId as AnyNodeId,
+          key,
+          value: liveNode[key],
+        }
+      }
+
+      if (isSameDoorValue(liveNode[key], value)) return
+
+      ;(liveNode as DoorNode)[key] = value
+      useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
     },
-    [handleUpdate],
+    [selectedId],
+  )
+
+  const commitDoorPreview = useCallback(
+    <K extends keyof DoorNode>(key: K, value: DoorNode[K]) => {
+      if (!selectedId) return
+
+      const scene = useScene.getState()
+      const liveNode = scene.nodes[selectedId as AnyNodeId]
+      const preview = previewRef.current
+      if (liveNode?.type === 'door' && preview?.id === selectedId && preview.key === key) {
+        ;(liveNode as DoorNode)[key] = preview.value as DoorNode[K]
+        scene.dirtyNodes.add(selectedId as AnyNodeId)
+      }
+      previewRef.current = null
+
+      updateNode(selectedId as AnyNode['id'], { [key]: value } as Partial<DoorNode>)
+      scene.dirtyNodes.add(selectedId as AnyNodeId)
+    },
+    [selectedId, updateNode],
   )
 
   const handleClose = useCallback(() => {
@@ -94,9 +230,10 @@ export function DoorPanel() {
   }, [node, setMovingNode, setSelection])
 
   const setSegmentHeightRatio = (segIdx: number, newVal: number) => {
-    const numSegs = node?.segments.length
-    const totalH = node?.segments.reduce((sum, s) => sum + s.heightRatio, 0)
-    const normH = node?.segments.map((s) => s.heightRatio / totalH)
+    if (!node) return
+    const numSegs = node.segments.length
+    const totalH = node.segments.reduce((sum, s) => sum + s.heightRatio, 0)
+    const normH = node.segments.map((s) => s.heightRatio / totalH)
     const clamped = Math.max(0.05, Math.min(0.95, newVal))
     const neighborIdx = segIdx < numSegs - 1 ? segIdx + 1 : segIdx - 1
     const delta = clamped - normH[segIdx]!
@@ -106,7 +243,7 @@ export function DoorPanel() {
       if (i === neighborIdx) return neighborVal
       return v
     })
-    const updated = node?.segments.map((s, idx) => ({ ...s, heightRatio: newRatios[idx]! }))
+    const updated = node.segments.map((s, idx) => ({ ...s, heightRatio: newRatios[idx]! }))
     handleUpdate({ segments: updated })
   }
 
@@ -136,10 +273,24 @@ export function DoorPanel() {
   const getDoorPresetData = useCallback(() => {
     if (!node) return null
     return {
+      doorCategory: node.doorCategory,
+      doorType: node.doorType,
+      leafCount: node.leafCount,
+      operationState: node.operationState,
+      slideDirection: node.slideDirection,
+      trackStyle: node.trackStyle,
+      garagePanelCount: node.garagePanelCount,
       width: node.width,
       height: node.height,
       frameThickness: node.frameThickness,
       frameDepth: node.frameDepth,
+      openingKind: node.openingKind,
+      openingShape: node.openingShape,
+      openingRadiusMode: node.openingRadiusMode ?? 'all',
+      openingTopRadii: node.openingTopRadii ?? [0.15, 0.15],
+      cornerRadius: node.cornerRadius,
+      archHeight: node.archHeight,
+      openingRevealRadius: node.openingRevealRadius,
       contentPadding: node.contentPadding,
       hingesSide: node.hingesSide,
       swingDirection: node.swingDirection,
@@ -186,6 +337,180 @@ export function DoorPanel() {
 
   const hSum = node.segments.reduce((s, seg) => s + seg.heightRatio, 0)
   const normHeights = node.segments.map((seg) => seg.heightRatio / hSum)
+  const isOpening = node.openingKind === 'opening'
+  const openingShape = node.openingShape ?? 'rectangle'
+  const doorShape =
+    openingShape === 'arch' || openingShape === 'rounded' ? openingShape : 'rectangle'
+  const openingRadiusMode = node.openingRadiusMode ?? 'all'
+  const openingTopRadii = node.openingTopRadii ?? [0.15, 0.15]
+  const cornerRadius = node.cornerRadius ?? 0.15
+  const archHeight = node.archHeight ?? 0.45
+  const openingRevealRadius = node.openingRevealRadius ?? 0.025
+  const maxRoundedRadius = Math.max(0.01, Math.min(node.width / 2, node.height))
+  const doorType = node.doorType ?? 'hinged'
+  const isSwingDoor = doorType === 'hinged' || doorType === 'double' || doorType === 'french'
+  const isSlidingDoor = doorType === 'pocket' || doorType === 'barn' || doorType === 'sliding'
+  const isGarageDoor = node.doorCategory === 'garage' || doorType.startsWith('garage-')
+  const isSectionalGarageDoor = doorType === 'garage-sectional'
+  const isRollupGarageDoor = doorType === 'garage-rollup'
+  const isTiltupGarageDoor = doorType === 'garage-tiltup'
+  const typeMode = isOpening ? 'opening' : isGarageDoor ? 'garage' : 'door'
+  const supportsHandleSide = isSwingDoor
+  const maxDoorWidth = isGarageDoor ? 6 : 3
+
+  const setOpeningTopRadius = (index: number, value: number, commit = false) => {
+    const next = [...openingTopRadii] as [number, number]
+    next[index] = value
+    if (commit) {
+      commitDoorPreview('openingTopRadii', next)
+    } else {
+      previewDoorUpdate('openingTopRadii', next)
+    }
+  }
+
+  const getDoorTypeUpdates = (nextDoorType: DoorNode['doorType']): Partial<DoorNode> => {
+    const dimensions = defaultDoorDimensions[nextDoorType]
+    const dimensionUpdates = {
+      width: dimensions.width,
+      height: dimensions.height,
+      position: [node.position[0], dimensions.height / 2, node.position[2]] as DoorNode['position'],
+    }
+
+    if (nextDoorType === 'double' || nextDoorType === 'french') {
+      return {
+        doorCategory: 'interior',
+        doorType: nextDoorType,
+        leafCount: 2,
+        ...dimensionUpdates,
+        handleSide: 'right',
+        ...(nextDoorType === 'french'
+          ? {
+              contentPadding: [0.045, 0.055],
+              segments: frenchDoorSegments,
+            }
+          : {}),
+      }
+    }
+
+    if (nextDoorType === 'folding') {
+      return {
+        doorCategory: 'interior',
+        doorType: nextDoorType,
+        leafCount: 4,
+        ...dimensionUpdates,
+        handle: true,
+        handleSide: 'right',
+        trackStyle: 'visible',
+        operationState: Math.max(node.operationState ?? 0, 0.65),
+        contentPadding: [0.03, 0.04],
+        segments: foldingDoorSegments,
+      }
+    }
+
+    if (nextDoorType === 'pocket') {
+      return {
+        doorCategory: 'interior',
+        doorType: nextDoorType,
+        leafCount: 1,
+        ...dimensionUpdates,
+        handle: true,
+        handleSide: 'right',
+        trackStyle: 'pocket',
+        slideDirection: node.slideDirection ?? 'left',
+        operationState: node.operationState ?? 0,
+        contentPadding: [0.035, 0.045],
+        segments: foldingDoorSegments,
+      }
+    }
+
+    if (nextDoorType === 'barn') {
+      return {
+        doorCategory: 'interior',
+        doorType: nextDoorType,
+        leafCount: 1,
+        ...dimensionUpdates,
+        handle: true,
+        handleSide: 'right',
+        trackStyle: 'visible',
+        slideDirection: node.slideDirection ?? 'left',
+        operationState: node.operationState ?? 0,
+        contentPadding: [0.035, 0.045],
+        segments: foldingDoorSegments,
+      }
+    }
+
+    if (nextDoorType === 'sliding') {
+      return {
+        doorCategory: 'interior',
+        doorType: nextDoorType,
+        leafCount: 2,
+        ...dimensionUpdates,
+        handle: true,
+        handleSide: 'right',
+        trackStyle: 'visible',
+        slideDirection: node.slideDirection ?? 'left',
+        operationState: node.operationState ?? 0,
+        contentPadding: [0.03, 0.04],
+        segments: frenchDoorSegments,
+      }
+    }
+
+    if (nextDoorType === 'garage-sectional') {
+      return {
+        doorCategory: 'garage',
+        doorType: nextDoorType,
+        leafCount: 1,
+        ...dimensionUpdates,
+        handle: false,
+        threshold: false,
+        trackStyle: 'overhead',
+        operationState: 0,
+        garagePanelCount: Math.max(3, Math.min(8, node.garagePanelCount ?? 4)),
+        contentPadding: [0.04, 0.04],
+        segments: foldingDoorSegments,
+      }
+    }
+
+    if (nextDoorType === 'garage-rollup') {
+      return {
+        doorCategory: 'garage',
+        doorType: nextDoorType,
+        leafCount: 1,
+        ...dimensionUpdates,
+        handle: false,
+        threshold: false,
+        trackStyle: 'overhead',
+        operationState: 0,
+        garagePanelCount: 4,
+        contentPadding: [0.04, 0.04],
+        segments: foldingDoorSegments,
+      }
+    }
+
+    if (nextDoorType === 'garage-tiltup') {
+      return {
+        doorCategory: 'garage',
+        doorType: nextDoorType,
+        leafCount: 1,
+        ...dimensionUpdates,
+        handle: false,
+        threshold: false,
+        trackStyle: 'overhead',
+        operationState: 0,
+        garagePanelCount: 4,
+        contentPadding: [0.04, 0.04],
+        segments: foldingDoorSegments,
+      }
+    }
+
+    return {
+      doorCategory: 'interior',
+      doorType: nextDoorType,
+      leafCount: 1,
+      ...dimensionUpdates,
+      threshold: true,
+    }
+  }
 
   return (
     <PanelWrapper
@@ -215,6 +540,68 @@ export function DoorPanel() {
         </PresetsPopover>
       </div>
 
+      <PanelSection title="Type">
+        <div className="flex flex-col gap-2 px-1 pb-1">
+          <SegmentedControl
+            onChange={(v) =>
+              handleUpdate(
+                v === 'opening'
+                  ? {
+                      openingKind: v,
+                      openingShape,
+                      openingRadiusMode,
+                      openingTopRadii,
+                      cornerRadius,
+                      archHeight,
+                      openingRevealRadius,
+                    }
+                  : v === 'garage'
+                    ? {
+                        openingKind: 'door',
+                        ...getDoorTypeUpdates(isGarageDoor ? doorType : 'garage-sectional'),
+                      }
+                    : {
+                        openingKind: 'door',
+                        ...(isGarageDoor ? getDoorTypeUpdates('hinged') : {}),
+                      },
+              )
+            }
+            options={[
+              { label: 'Door', value: 'door' },
+              { label: 'Opening', value: 'opening' },
+              { label: 'Garage', value: 'garage' },
+            ]}
+            value={typeMode}
+          />
+        </div>
+        {!isOpening && (
+          <div className="grid grid-cols-2 gap-1.5 px-1 pt-1">
+            {(isGarageDoor ? garageDoorTypeOptions : doorTypeOptions).map((option) => {
+              const isSelected = doorType === option.value
+              return (
+                <button
+                  className={cn(
+                    'flex min-h-12 items-center gap-2 rounded-lg border px-2.5 text-left text-xs transition-colors',
+                    isSelected
+                      ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
+                      : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                    !option.available &&
+                      'cursor-not-allowed opacity-45 hover:bg-[#2C2C2E] hover:text-muted-foreground',
+                  )}
+                  disabled={!option.available}
+                  key={option.value}
+                  onClick={() => handleUpdate(getDoorTypeUpdates(option.value))}
+                  type="button"
+                >
+                  <DoorOpen className="h-3.5 w-3.5 shrink-0" />
+                  <span className="truncate font-medium">{option.label}</span>
+                </button>
+              )
+            })}
+          </div>
+        )}
+      </PanelSection>
+
       <PanelSection title="Position">
         <SliderControl
           label={
@@ -230,23 +617,116 @@ export function DoorPanel() {
           unit="m"
           value={Math.round(node.position[0] * 100) / 100}
         />
-        <div className="px-1 pt-2 pb-1">
-          <ActionButton
-            className="w-full"
-            icon={<FlipHorizontal2 className="h-4 w-4" />}
-            label="Flip Side"
-            onClick={handleFlip}
-          />
-        </div>
+        {!isOpening && (
+          <div className="px-1 pt-2 pb-1">
+            <ActionButton
+              className="w-full"
+              icon={<FlipHorizontal2 className="h-4 w-4" />}
+              label="Flip Side"
+              onClick={handleFlip}
+            />
+          </div>
+        )}
       </PanelSection>
 
+      {doorType === 'folding' && !isOpening && (
+        <PanelSection title="Fold">
+          <div className="flex flex-col gap-2 px-1 pb-1">
+            <div className="space-y-1">
+              <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+                Panels
+              </span>
+              <SegmentedControl
+                onChange={(v) => handleUpdate({ leafCount: v === '2' ? 2 : 4 })}
+                options={[
+                  { label: '2', value: '2' },
+                  { label: '4', value: '4' },
+                ]}
+                value={node.leafCount === 2 ? '2' : '4'}
+              />
+            </div>
+          </div>
+          <SliderControl
+            label="Open"
+            max={100}
+            min={0}
+            onChange={(v) => handleUpdate({ operationState: v / 100 })}
+            precision={0}
+            restoreOnCommit={false}
+            step={5}
+            unit="%"
+            value={Math.round((node.operationState ?? 0) * 100)}
+          />
+        </PanelSection>
+      )}
+
+      {isSlidingDoor && !isOpening && (
+        <PanelSection title="Slide">
+          <div className="flex flex-col gap-2 px-1 pb-1">
+            <div className="space-y-1">
+              <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+                {doorType === 'pocket' ? 'Pocket' : doorType === 'barn' ? 'Rail' : 'Panel'}
+              </span>
+              <SegmentedControl
+                onChange={(v) => handleUpdate({ slideDirection: v })}
+                options={[
+                  { label: 'Left', value: 'left' },
+                  { label: 'Right', value: 'right' },
+                ]}
+                value={node.slideDirection ?? 'left'}
+              />
+            </div>
+          </div>
+          <SliderControl
+            label="Open"
+            max={100}
+            min={0}
+            onChange={(v) => handleUpdate({ operationState: v / 100 })}
+            precision={0}
+            restoreOnCommit={false}
+            step={5}
+            unit="%"
+            value={Math.round((node.operationState ?? 0) * 100)}
+          />
+        </PanelSection>
+      )}
+
+      {(isSectionalGarageDoor || isRollupGarageDoor || isTiltupGarageDoor) && !isOpening && (
+        <PanelSection title="Garage">
+          <SliderControl
+            label="Open"
+            max={100}
+            min={0}
+            onChange={(v) => handleUpdate({ operationState: v / 100 })}
+            precision={0}
+            restoreOnCommit={false}
+            step={5}
+            unit="%"
+            value={Math.round((node.operationState ?? 0) * 100)}
+          />
+          {isSectionalGarageDoor && (
+            <SliderControl
+              label="Panels"
+              max={8}
+              min={3}
+              onChange={(v) => handleUpdate({ garagePanelCount: Math.round(v) })}
+              precision={0}
+              restoreOnCommit={false}
+              step={1}
+              value={node.garagePanelCount ?? 4}
+            />
+          )}
+        </PanelSection>
+      )}
+
       <PanelSection title="Dimensions">
         <SliderControl
           label="Width"
-          max={3}
+          max={maxDoorWidth}
           min={0.5}
           onChange={(v) => handleUpdate({ width: v })}
           precision={2}
+          restoreOnCommit={false}
           step={0.05}
           unit="m"
           value={Math.round(node.width * 100) / 100}
@@ -259,322 +739,544 @@ export function DoorPanel() {
             handleUpdate({ height: v, position: [node.position[0], v / 2, node.position[2]] })
           }
           precision={2}
+          restoreOnCommit={false}
           step={0.05}
           unit="m"
           value={Math.round(node.height * 100) / 100}
         />
       </PanelSection>
 
-      <PanelSection title="Frame">
-        <SliderControl
-          label="Thickness"
-          max={0.2}
-          min={0.01}
-          onChange={(v) => handleUpdate({ frameThickness: v })}
-          precision={3}
-          step={0.01}
-          unit="m"
-          value={Math.round(node.frameThickness * 1000) / 1000}
-        />
-        <SliderControl
-          label="Depth"
-          max={0.3}
-          min={0.01}
-          onChange={(v) => handleUpdate({ frameDepth: v })}
-          precision={3}
-          step={0.01}
-          unit="m"
-          value={Math.round(node.frameDepth * 1000) / 1000}
-        />
-      </PanelSection>
-
-      <PanelSection title="Content Padding">
-        <SliderControl
-          label="Horizontal"
-          max={0.2}
-          min={0}
-          onChange={(v) => handleUpdate({ contentPadding: [v, node.contentPadding[1]] })}
-          precision={3}
-          step={0.005}
-          unit="m"
-          value={Math.round(node.contentPadding[0] * 1000) / 1000}
-        />
-        <SliderControl
-          label="Vertical"
-          max={0.2}
-          min={0}
-          onChange={(v) => handleUpdate({ contentPadding: [node.contentPadding[0], v] })}
-          precision={3}
-          step={0.005}
-          unit="m"
-          value={Math.round(node.contentPadding[1] * 1000) / 1000}
-        />
-      </PanelSection>
-
-      <PanelSection title="Swing">
-        <div className="flex flex-col gap-2 px-1 pb-1">
-          <div className="space-y-1">
-            <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
-              Hinges Side
-            </span>
+      {!isOpening && (
+        <PanelSection title="Top Shape">
+          <div className="flex flex-col gap-2 px-1 pb-1">
             <SegmentedControl
-              onChange={(v) => handleUpdate({ hingesSide: v })}
+              onChange={(v) =>
+                handleUpdate({
+                  openingShape: v as DoorNode['openingShape'],
+                  ...(v === 'rounded'
+                    ? {
+                        openingRadiusMode,
+                        openingTopRadii,
+                        cornerRadius: Math.min(cornerRadius, maxRoundedRadius),
+                        openingRevealRadius,
+                      }
+                    : {}),
+                  ...(v === 'arch' ? { archHeight } : {}),
+                })
+              }
               options={[
-                { label: 'Left', value: 'left' },
-                { label: 'Right', value: 'right' },
+                { label: 'Rect', value: 'rectangle' },
+                { label: 'Rounded', value: 'rounded' },
+                { label: 'Arch', value: 'arch' },
               ]}
-              value={node.hingesSide}
+              value={doorShape}
             />
           </div>
-          <div className="space-y-1">
-            <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
-              Direction
-            </span>
+          {doorShape === 'rounded' && (
+            <>
+              <div className="flex flex-col gap-2 px-1 pb-1">
+                <SegmentedControl
+                  onChange={(v) =>
+                    handleUpdate({ openingRadiusMode: v as DoorNode['openingRadiusMode'] })
+                  }
+                  options={[
+                    { label: 'All', value: 'all' },
+                    { label: 'Individual', value: 'individual' },
+                  ]}
+                  value={openingRadiusMode}
+                />
+              </div>
+              {openingRadiusMode === 'all' ? (
+                <SliderControl
+                  label="Corner Radius"
+                  max={maxRoundedRadius}
+                  min={0}
+                  onChange={(v) => previewDoorUpdate('cornerRadius', v)}
+                  onCommit={(v) => commitDoorPreview('cornerRadius', v)}
+                  precision={2}
+                  step={0.05}
+                  unit="m"
+                  value={Math.round(cornerRadius * 100) / 100}
+                />
+              ) : (
+                <>
+                  {[
+                    ['Top Left', 0],
+                    ['Top Right', 1],
+                  ].map(([label, index]) => (
+                    <SliderControl
+                      key={label}
+                      label={label}
+                      max={maxRoundedRadius}
+                      min={0}
+                      onChange={(v) => setOpeningTopRadius(index as number, v)}
+                      onCommit={(v) => setOpeningTopRadius(index as number, v, true)}
+                      precision={2}
+                      step={0.05}
+                      unit="m"
+                      value={Math.round((openingTopRadii[index as number] ?? 0) * 100) / 100}
+                    />
+                  ))}
+                </>
+              )}
+              <SliderControl
+                label="Reveal Radius"
+                max={0.08}
+                min={0}
+                onChange={(v) => previewDoorUpdate('openingRevealRadius', v)}
+                onCommit={(v) => commitDoorPreview('openingRevealRadius', v)}
+                precision={3}
+                step={0.005}
+                unit="m"
+                value={Math.round(openingRevealRadius * 1000) / 1000}
+              />
+            </>
+          )}
+          {doorShape === 'arch' && (
+            <SliderControl
+              label="Arch Height"
+              max={node.height}
+              min={0.05}
+              onChange={(v) => handleUpdate({ archHeight: v })}
+              precision={2}
+              restoreOnCommit={false}
+              step={0.05}
+              unit="m"
+              value={Math.round(archHeight * 100) / 100}
+            />
+          )}
+        </PanelSection>
+      )}
+
+      {isOpening && (
+        <PanelSection title="Opening Shape">
+          <div className="flex flex-col gap-2 px-1 pb-1">
             <SegmentedControl
-              onChange={(v) => handleUpdate({ swingDirection: v })}
+              onChange={(v) =>
+                handleUpdate({
+                  openingShape: v,
+                  ...(v === 'rounded'
+                    ? { openingRadiusMode, openingTopRadii, cornerRadius, openingRevealRadius }
+                    : {}),
+                  ...(v === 'arch' ? { archHeight } : {}),
+                })
+              }
               options={[
-                { label: 'Inward', value: 'inward' },
-                { label: 'Outward', value: 'outward' },
+                { label: 'Rect', value: 'rectangle' },
+                { label: 'Rounded', value: 'rounded' },
+                { label: 'Arch', value: 'arch' },
               ]}
-              value={node.swingDirection}
+              value={openingShape}
             />
           </div>
-        </div>
-      </PanelSection>
-
-      <PanelSection title="Threshold">
-        <ToggleControl
-          checked={node.threshold}
-          label="Enable Threshold"
-          onChange={(checked) => handleUpdate({ threshold: checked })}
-        />
-        {node.threshold && (
-          <div className="mt-1 flex flex-col gap-1">
+          {openingShape === 'rounded' && (
+            <>
+              <div className="flex flex-col gap-2 px-1 pb-1">
+                <SegmentedControl
+                  onChange={(v) =>
+                    handleUpdate({ openingRadiusMode: v as DoorNode['openingRadiusMode'] })
+                  }
+                  options={[
+                    { label: 'All', value: 'all' },
+                    { label: 'Individual', value: 'individual' },
+                  ]}
+                  value={openingRadiusMode}
+                />
+              </div>
+              {openingRadiusMode === 'all' ? (
+                <SliderControl
+                  label="Corner Radius"
+                  max={maxRoundedRadius}
+                  min={0}
+                  onChange={(v) => previewDoorUpdate('cornerRadius', v)}
+                  onCommit={(v) => commitDoorPreview('cornerRadius', v)}
+                  precision={2}
+                  step={0.05}
+                  unit="m"
+                  value={Math.round(cornerRadius * 100) / 100}
+                />
+              ) : (
+                <>
+                  {[
+                    ['Top Left', 0],
+                    ['Top Right', 1],
+                  ].map(([label, index]) => (
+                    <SliderControl
+                      key={label}
+                      label={label}
+                      max={maxRoundedRadius}
+                      min={0}
+                      onChange={(v) => setOpeningTopRadius(index as number, v)}
+                      onCommit={(v) => setOpeningTopRadius(index as number, v, true)}
+                      precision={2}
+                      step={0.05}
+                      unit="m"
+                      value={Math.round((openingTopRadii[index as number] ?? 0) * 100) / 100}
+                    />
+                  ))}
+                </>
+              )}
+              <SliderControl
+                label="Reveal Radius"
+                max={0.08}
+                min={0}
+                onChange={(v) => previewDoorUpdate('openingRevealRadius', v)}
+                onCommit={(v) => commitDoorPreview('openingRevealRadius', v)}
+                precision={3}
+                step={0.005}
+                unit="m"
+                value={Math.round(openingRevealRadius * 1000) / 1000}
+              />
+            </>
+          )}
+          {openingShape === 'arch' && (
             <SliderControl
-              label="Height"
-              max={0.1}
-              min={0.005}
-              onChange={(v) => handleUpdate({ thresholdHeight: v })}
-              precision={3}
-              step={0.005}
+              label="Arch Height"
+              max={node.height}
+              min={0.05}
+              onChange={(v) => handleUpdate({ archHeight: v })}
+              precision={2}
+              restoreOnCommit={false}
+              step={0.05}
               unit="m"
-              value={Math.round(node.thresholdHeight * 1000) / 1000}
+              value={Math.round(archHeight * 100) / 100}
             />
-          </div>
-        )}
-      </PanelSection>
+          )}
+        </PanelSection>
+      )}
 
-      <PanelSection title="Handle">
-        <ToggleControl
-          checked={node.handle}
-          label="Enable Handle"
-          onChange={(checked) => handleUpdate({ handle: checked })}
-        />
-        {node.handle && (
-          <div className="mt-1 flex flex-col gap-1">
+      {!isOpening && (
+        <>
+          <PanelSection title="Frame">
             <SliderControl
-              label="Height"
-              max={node.height - 0.1}
-              min={0.5}
-              onChange={(v) => handleUpdate({ handleHeight: v })}
-              precision={2}
-              step={0.05}
+              label="Thickness"
+              max={0.2}
+              min={0.01}
+              onChange={(v) => handleUpdate({ frameThickness: v })}
+              precision={3}
+              step={0.01}
               unit="m"
-              value={Math.round(node.handleHeight * 100) / 100}
+              value={Math.round(node.frameThickness * 1000) / 1000}
             />
-            <div className="space-y-1">
-              <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
-                Handle Side
-              </span>
-              <SegmentedControl
-                onChange={(v) => handleUpdate({ handleSide: v })}
-                options={[
-                  { label: 'Left', value: 'left' },
-                  { label: 'Right', value: 'right' },
-                ]}
-                value={node.handleSide}
-              />
-            </div>
-          </div>
-        )}
-      </PanelSection>
-
-      <PanelSection title="Hardware">
-        <ToggleControl
-          checked={node.doorCloser}
-          label="Door Closer"
-          onChange={(checked) => handleUpdate({ doorCloser: checked })}
-        />
-        <ToggleControl
-          checked={node.panicBar}
-          label="Panic Bar"
-          onChange={(checked) => handleUpdate({ panicBar: checked })}
-        />
-        {node.panicBar && (
-          <div className="mt-1 flex flex-col gap-1">
             <SliderControl
-              label="Bar Height"
-              max={node.height - 0.1}
-              min={0.5}
-              onChange={(v) => handleUpdate({ panicBarHeight: v })}
-              precision={2}
-              step={0.05}
+              label="Depth"
+              max={0.3}
+              min={0.01}
+              onChange={(v) => handleUpdate({ frameDepth: v })}
+              precision={3}
+              step={0.01}
               unit="m"
-              value={Math.round(node.panicBarHeight * 100) / 100}
+              value={Math.round(node.frameDepth * 1000) / 1000}
             />
-          </div>
-        )}
-      </PanelSection>
-
-      <PanelSection title="Segments">
-        {node.segments.map((seg, i) => {
-          const numCols = seg.columnRatios.length
-          const colSum = seg.columnRatios.reduce((a, b) => a + b, 0)
-          const normCols = seg.columnRatios.map((r) => r / colSum)
-          return (
-            <div className="mb-2 flex flex-col gap-1" key={i}>
-              <div className="flex items-center justify-between pb-1">
-                <span className="font-medium text-white/80 text-xs">Segment {i + 1}</span>
-              </div>
-
-              <SegmentedControl
-                onChange={(t) => {
-                  const updated = node.segments.map((s, idx) => (idx === i ? { ...s, type: t } : s))
-                  handleUpdate({ segments: updated })
-                }}
-                options={[
-                  { label: 'Panel', value: 'panel' },
-                  { label: 'Glass', value: 'glass' },
-                  { label: 'Empty', value: 'empty' },
-                ]}
-                value={seg.type}
-              />
+          </PanelSection>
 
+          {!isGarageDoor && (
+            <PanelSection title="Content Padding">
               <SliderControl
-                label="Height"
-                max={95}
-                min={5}
-                onChange={(v) => setSegmentHeightRatio(i, v / 100)}
-                precision={1}
-                step={1}
-                unit="%"
-                value={Math.round(normHeights[i]! * 100 * 10) / 10}
+                label="Horizontal"
+                max={0.2}
+                min={0}
+                onChange={(v) => handleUpdate({ contentPadding: [v, node.contentPadding[1]] })}
+                precision={3}
+                step={0.005}
+                unit="m"
+                value={Math.round(node.contentPadding[0] * 1000) / 1000}
               />
-
               <SliderControl
-                label="Columns"
-                max={8}
-                min={1}
-                onChange={(v) => {
-                  const n = Math.max(1, Math.min(8, Math.round(v)))
-                  const updated = node.segments.map((s, idx) =>
-                    idx === i ? { ...s, columnRatios: Array(n).fill(1 / n) } : s,
-                  )
-                  handleUpdate({ segments: updated })
-                }}
-                precision={0}
-                step={1}
-                value={numCols}
+                label="Vertical"
+                max={0.2}
+                min={0}
+                onChange={(v) => handleUpdate({ contentPadding: [node.contentPadding[0], v] })}
+                precision={3}
+                step={0.005}
+                unit="m"
+                value={Math.round(node.contentPadding[1] * 1000) / 1000}
               />
+            </PanelSection>
+          )}
 
-              {numCols > 1 && (
-                <div className="mt-1 border-border/50 border-t pt-1">
-                  {normCols.map((ratio, ci) => (
-                    <SliderControl
-                      key={`c-${ci}`}
-                      label={`C${ci + 1}`}
-                      max={95}
-                      min={5}
-                      onChange={(v) => setSegmentColumnRatio(i, ci, v / 100)}
-                      precision={1}
-                      step={1}
-                      unit="%"
-                      value={Math.round(ratio * 100 * 10) / 10}
-                    />
-                  ))}
+          {isSwingDoor && (
+            <PanelSection title="Swing">
+              <div className="flex flex-col gap-2 px-1 pb-1">
+                <div className="space-y-1">
+                  <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+                    Hinges Side
+                  </span>
+                  <SegmentedControl
+                    onChange={(v) => handleUpdate({ hingesSide: v })}
+                    options={[
+                      { label: 'Left', value: 'left' },
+                      { label: 'Right', value: 'right' },
+                    ]}
+                    value={node.hingesSide}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+                    Direction
+                  </span>
+                  <SegmentedControl
+                    onChange={(v) => handleUpdate({ swingDirection: v })}
+                    options={[
+                      { label: 'Inward', value: 'inward' },
+                      { label: 'Outward', value: 'outward' },
+                    ]}
+                    value={node.swingDirection}
+                  />
+                </div>
+              </div>
+            </PanelSection>
+          )}
+
+          {isSwingDoor && (
+            <PanelSection title="Threshold">
+              <ToggleControl
+                checked={node.threshold}
+                label="Enable Threshold"
+                onChange={(checked) => handleUpdate({ threshold: checked })}
+              />
+              {node.threshold && (
+                <div className="mt-1 flex flex-col gap-1">
                   <SliderControl
-                    label="Divider"
+                    label="Height"
                     max={0.1}
                     min={0.005}
-                    onChange={(v) => {
-                      const updated = node.segments.map((s, idx) =>
-                        idx === i ? { ...s, dividerThickness: v } : s,
-                      )
-                      handleUpdate({ segments: updated })
-                    }}
+                    onChange={(v) => handleUpdate({ thresholdHeight: v })}
                     precision={3}
                     step={0.005}
                     unit="m"
-                    value={Math.round(seg.dividerThickness * 1000) / 1000}
+                    value={Math.round(node.thresholdHeight * 1000) / 1000}
                   />
                 </div>
               )}
+            </PanelSection>
+          )}
 
-              {seg.type === 'panel' && (
-                <div className="mt-1 border-border/50 border-t pt-1">
+          {!isGarageDoor && (
+            <PanelSection title="Handle">
+              {isSwingDoor && (
+                <ToggleControl
+                  checked={node.handle}
+                  label="Enable Handle"
+                  onChange={(checked) => handleUpdate({ handle: checked })}
+                />
+              )}
+              {(node.handle || !isSwingDoor) && (
+                <div className="mt-1 flex flex-col gap-1">
                   <SliderControl
-                    label="Inset"
-                    max={0.1}
-                    min={0}
-                    onChange={(v) => {
-                      const updated = node.segments.map((s, idx) =>
-                        idx === i ? { ...s, panelInset: v } : s,
-                      )
-                      handleUpdate({ segments: updated })
-                    }}
-                    precision={3}
-                    step={0.005}
+                    label="Height"
+                    max={node.height - 0.1}
+                    min={0.5}
+                    onChange={(v) => handleUpdate({ handleHeight: v })}
+                    precision={2}
+                    step={0.05}
                     unit="m"
-                    value={Math.round(seg.panelInset * 1000) / 1000}
+                    value={Math.round(node.handleHeight * 100) / 100}
                   />
+                  {supportsHandleSide && (
+                    <div className="space-y-1">
+                      <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+                        Handle Side
+                      </span>
+                      <SegmentedControl
+                        onChange={(v) => handleUpdate({ handleSide: v })}
+                        options={[
+                          { label: 'Left', value: 'left' },
+                          { label: 'Right', value: 'right' },
+                        ]}
+                        value={node.handleSide}
+                      />
+                    </div>
+                  )}
+                </div>
+              )}
+            </PanelSection>
+          )}
+
+          {isSwingDoor && (
+            <PanelSection title="Hardware">
+              <ToggleControl
+                checked={node.doorCloser}
+                label="Door Closer"
+                onChange={(checked) => handleUpdate({ doorCloser: checked })}
+              />
+              <ToggleControl
+                checked={node.panicBar}
+                label="Panic Bar"
+                onChange={(checked) => handleUpdate({ panicBar: checked })}
+              />
+              {node.panicBar && (
+                <div className="mt-1 flex flex-col gap-1">
                   <SliderControl
-                    label="Depth"
-                    max={0.1}
-                    min={0}
-                    onChange={(v) => {
-                      const updated = node.segments.map((s, idx) =>
-                        idx === i ? { ...s, panelDepth: v } : s,
-                      )
-                      handleUpdate({ segments: updated })
-                    }}
-                    precision={3}
-                    step={0.005}
+                    label="Bar Height"
+                    max={node.height - 0.1}
+                    min={0.5}
+                    onChange={(v) => handleUpdate({ panicBarHeight: v })}
+                    precision={2}
+                    step={0.05}
                     unit="m"
-                    value={Math.round(seg.panelDepth * 1000) / 1000}
+                    value={Math.round(node.panicBarHeight * 100) / 100}
                   />
                 </div>
               )}
-            </div>
-          )
-        })}
+            </PanelSection>
+          )}
 
-        <div className="flex gap-1.5 px-1 pt-1">
-          <ActionButton
-            label="+ Add Segment"
-            onClick={() => {
-              const updated = [
-                ...node.segments,
-                {
-                  type: 'panel' as const,
-                  heightRatio: 1,
-                  columnRatios: [1],
-                  dividerThickness: 0.03,
-                  panelDepth: 0.01,
-                  panelInset: 0.04,
-                },
-              ]
-              handleUpdate({ segments: updated })
-            }}
-          />
-          {node.segments.length > 1 && (
-            <ActionButton
-              className="text-white/60 hover:text-white"
-              label="- Remove"
-              onClick={() => handleUpdate({ segments: node.segments.slice(0, -1) })}
-            />
+          {!isGarageDoor && (
+            <PanelSection title="Segments">
+              {node.segments.map((seg, i) => {
+                const numCols = seg.columnRatios.length
+                const colSum = seg.columnRatios.reduce((a, b) => a + b, 0)
+                const normCols = seg.columnRatios.map((r) => r / colSum)
+                return (
+                  <div className="mb-2 flex flex-col gap-1" key={i}>
+                    <div className="flex items-center justify-between pb-1">
+                      <span className="font-medium text-white/80 text-xs">Segment {i + 1}</span>
+                    </div>
+
+                    <SegmentedControl
+                      onChange={(t) => {
+                        const updated = node.segments.map((s, idx) =>
+                          idx === i ? { ...s, type: t } : s,
+                        )
+                        handleUpdate({ segments: updated })
+                      }}
+                      options={[
+                        { label: 'Panel', value: 'panel' },
+                        { label: 'Glass', value: 'glass' },
+                        { label: 'Empty', value: 'empty' },
+                      ]}
+                      value={seg.type}
+                    />
+
+                    <SliderControl
+                      label="Height"
+                      max={95}
+                      min={5}
+                      onChange={(v) => setSegmentHeightRatio(i, v / 100)}
+                      precision={1}
+                      step={1}
+                      unit="%"
+                      value={Math.round(normHeights[i]! * 100 * 10) / 10}
+                    />
+
+                    <SliderControl
+                      label="Columns"
+                      max={8}
+                      min={1}
+                      onChange={(v) => {
+                        const n = Math.max(1, Math.min(8, Math.round(v)))
+                        const updated = node.segments.map((s, idx) =>
+                          idx === i ? { ...s, columnRatios: Array(n).fill(1 / n) } : s,
+                        )
+                        handleUpdate({ segments: updated })
+                      }}
+                      precision={0}
+                      step={1}
+                      value={numCols}
+                    />
+
+                    {numCols > 1 && (
+                      <div className="mt-1 border-border/50 border-t pt-1">
+                        {normCols.map((ratio, ci) => (
+                          <SliderControl
+                            key={`c-${ci}`}
+                            label={`C${ci + 1}`}
+                            max={95}
+                            min={5}
+                            onChange={(v) => setSegmentColumnRatio(i, ci, v / 100)}
+                            precision={1}
+                            step={1}
+                            unit="%"
+                            value={Math.round(ratio * 100 * 10) / 10}
+                          />
+                        ))}
+                        <SliderControl
+                          label="Divider"
+                          max={0.1}
+                          min={0.005}
+                          onChange={(v) => {
+                            const updated = node.segments.map((s, idx) =>
+                              idx === i ? { ...s, dividerThickness: v } : s,
+                            )
+                            handleUpdate({ segments: updated })
+                          }}
+                          precision={3}
+                          step={0.005}
+                          unit="m"
+                          value={Math.round(seg.dividerThickness * 1000) / 1000}
+                        />
+                      </div>
+                    )}
+
+                    {seg.type === 'panel' && (
+                      <div className="mt-1 border-border/50 border-t pt-1">
+                        <SliderControl
+                          label="Inset"
+                          max={0.1}
+                          min={0}
+                          onChange={(v) => {
+                            const updated = node.segments.map((s, idx) =>
+                              idx === i ? { ...s, panelInset: v } : s,
+                            )
+                            handleUpdate({ segments: updated })
+                          }}
+                          precision={3}
+                          step={0.005}
+                          unit="m"
+                          value={Math.round(seg.panelInset * 1000) / 1000}
+                        />
+                        <SliderControl
+                          label="Depth"
+                          max={0.1}
+                          min={0}
+                          onChange={(v) => {
+                            const updated = node.segments.map((s, idx) =>
+                              idx === i ? { ...s, panelDepth: v } : s,
+                            )
+                            handleUpdate({ segments: updated })
+                          }}
+                          precision={3}
+                          step={0.005}
+                          unit="m"
+                          value={Math.round(seg.panelDepth * 1000) / 1000}
+                        />
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+
+              <div className="flex gap-1.5 px-1 pt-1">
+                <ActionButton
+                  label="+ Add Segment"
+                  onClick={() => {
+                    const updated = [
+                      ...node.segments,
+                      {
+                        type: 'panel' as const,
+                        heightRatio: 1,
+                        columnRatios: [1],
+                        dividerThickness: 0.03,
+                        panelDepth: 0.01,
+                        panelInset: 0.04,
+                      },
+                    ]
+                    handleUpdate({ segments: updated })
+                  }}
+                />
+                {node.segments.length > 1 && (
+                  <ActionButton
+                    className="text-white/60 hover:text-white"
+                    label="- Remove"
+                    onClick={() => handleUpdate({ segments: node.segments.slice(0, -1) })}
+                  />
+                )}
+              </div>
+            </PanelSection>
           )}
-        </div>
-      </PanelSection>
+        </>
+      )}
 
       <PanelSection title="Actions">
         <ActionGroup>
@@ -592,9 +1294,6 @@ export function DoorPanel() {
           />
         </ActionGroup>
       </PanelSection>
-      <PanelSection title="Material">
-        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
-      </PanelSection>
     </PanelWrapper>
   )
 }