@pascal-app/editor 0.6.0 → 0.7.0

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

@@ -4,31 +4,102 @@ import {
   type AnyNode,
   type AnyNodeId,
   emitter,
-  type MaterialSchema,
+  useInteractive,
   useScene,
   WindowNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { BookMarked, Copy, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import { usePresetsAdapter } from '../../../contexts/presets-context'
+import { cn } from '../../../lib/utils'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 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'
 import { SliderControl } from '../controls/slider-control'
 import { ToggleControl } from '../controls/toggle-control'
 import { PanelWrapper } from './panel-wrapper'
 import { PresetsPopover } from './presets/presets-popover'
 
+function isSameWindowValue(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) => isSameWindowValue(value, next[index]))
+    )
+  }
+
+  return Object.is(current, next)
+}
+
+function getMaxSharedWindowRadius(width: number, height: number) {
+  return Math.max(0, Math.min(width / 2, height / 2))
+}
+
+function normalizeWindowCornerRadii(
+  radii: [number, number, number, number],
+  width: number,
+  height: number,
+): [number, number, number, number] {
+  const next = radii.map((radius) => Math.max(radius, 0)) as [number, number, number, number]
+  const scale = Math.min(
+    1,
+    Math.max(width, 0) / Math.max(next[0] + next[1], 1e-6),
+    Math.max(width, 0) / Math.max(next[3] + next[2], 1e-6),
+    Math.max(height, 0) / Math.max(next[0] + next[3], 1e-6),
+    Math.max(height, 0) / Math.max(next[1] + next[2], 1e-6),
+  )
+
+  if (scale >= 1) return next
+
+  return next.map((radius) => radius * scale) as [number, number, number, number]
+}
+
+function isSameRadiusTuple(
+  current: [number, number, number, number],
+  next: [number, number, number, number],
+) {
+  return current.every((value, index) => Math.abs(value - (next[index] ?? 0)) < 1e-6)
+}
+
+const windowTypeOptions: Array<{ label: string; value: WindowNode['windowType'] }> = [
+  { label: 'Fixed', value: 'fixed' },
+  { label: 'Sliding', value: 'sliding' },
+  { label: 'Casement', value: 'casement' },
+  { label: 'Awning', value: 'awning' },
+  { label: 'Single Hung', value: 'single-hung' },
+  { label: 'Double Hung', value: 'double-hung' },
+  { label: 'Bay', value: 'bay' },
+  { label: 'Bow', value: 'bow' },
+  { label: 'Louvered', value: 'louvered' },
+]
+
+const rectangleOnlyWindowTypes = new Set<WindowNode['windowType']>([
+  'sliding',
+  'single-hung',
+  'double-hung',
+  'bay',
+  'bow',
+])
+
 export function WindowPanel() {
   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 WindowNode
+    value: unknown
+  } | null>(null)
 
   const adapter = usePresetsAdapter()
 
@@ -38,18 +109,60 @@ export function WindowPanel() {
 
   const handleUpdate = useCallback(
     (updates: Partial<WindowNode>) => {
-      if (!selectedId) return
+      if (!(selectedId && node)) return
+      const hasChange = Object.entries(updates).some(([key, value]) => {
+        const currentValue = node[key as keyof WindowNode]
+        return !isSameWindowValue(currentValue, value)
+      })
+      if (!hasChange) return
+
       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 previewWindowUpdate = useCallback(
+    <K extends keyof WindowNode>(key: K, value: WindowNode[K]) => {
+      if (!selectedId) return
+      const liveNode = useScene.getState().nodes[selectedId as AnyNodeId]
+      if (liveNode?.type !== 'window') return
+
+      if (
+        !(previewRef.current && previewRef.current.id === selectedId && previewRef.current.key === key)
+      ) {
+        previewRef.current = {
+          id: selectedId as AnyNodeId,
+          key,
+          value: liveNode[key],
+        }
+      }
+
+      if (isSameWindowValue(liveNode[key], value)) return
+
+      ;(liveNode as WindowNode)[key] = value
+      useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
     },
-    [handleUpdate],
+    [selectedId],
+  )
+
+  const commitWindowPreview = useCallback(
+    <K extends keyof WindowNode>(key: K, value: WindowNode[K]) => {
+      if (!selectedId) return
+
+      const scene = useScene.getState()
+      const liveNode = scene.nodes[selectedId as AnyNodeId]
+      const preview = previewRef.current
+      if (liveNode?.type === 'window' && preview?.id === selectedId && preview.key === key) {
+        ;(liveNode as WindowNode)[key] = preview.value as WindowNode[K]
+        scene.dirtyNodes.add(selectedId as AnyNodeId)
+      }
+      previewRef.current = null
+
+      updateNode(selectedId as AnyNode['id'], { [key]: value } as Partial<WindowNode>)
+      scene.dirtyNodes.add(selectedId as AnyNodeId)
+    },
+    [selectedId, updateNode],
   )
 
   const handleClose = useCallback(() => {
@@ -91,8 +204,20 @@ export function WindowPanel() {
       parentId: node.parentId,
       width: node.width,
       height: node.height,
+      windowType: node.windowType,
+      operationState: node.operationState,
+      awningDirection: node.awningDirection,
+      casementStyle: node.casementStyle,
+      hingesSide: node.hingesSide,
       frameThickness: node.frameThickness,
       frameDepth: node.frameDepth,
+      openingKind: node.openingKind,
+      openingShape: node.openingShape,
+      openingRadiusMode: node.openingRadiusMode ?? 'all',
+      openingCornerRadii: [...(node.openingCornerRadii ?? [0.15, 0.15, 0.15, 0.15])],
+      cornerRadius: node.cornerRadius,
+      archHeight: node.archHeight,
+      openingRevealRadius: node.openingRevealRadius,
       columnRatios: [...node.columnRatios],
       rowRatios: [...node.rowRatios],
       columnDividerThickness: node.columnDividerThickness,
@@ -112,8 +237,20 @@ export function WindowPanel() {
     return {
       width: node.width,
       height: node.height,
+      windowType: node.windowType,
+      operationState: node.operationState,
+      awningDirection: node.awningDirection,
+      casementStyle: node.casementStyle,
+      hingesSide: node.hingesSide,
       frameThickness: node.frameThickness,
       frameDepth: node.frameDepth,
+      openingKind: node.openingKind,
+      openingShape: node.openingShape,
+      openingRadiusMode: node.openingRadiusMode ?? 'all',
+      openingCornerRadii: node.openingCornerRadii ?? [0.15, 0.15, 0.15, 0.15],
+      cornerRadius: node.cornerRadius,
+      archHeight: node.archHeight,
+      openingRevealRadius: node.openingRevealRadius,
       columnRatios: node.columnRatios,
       rowRatios: node.rowRatios,
       columnDividerThickness: node.columnDividerThickness,
@@ -160,6 +297,75 @@ export function WindowPanel() {
   const rowSum = node.rowRatios.reduce((a, b) => a + b, 0)
   const normCols = node.columnRatios.map((r) => r / colSum)
   const normRows = node.rowRatios.map((r) => r / rowSum)
+  const isOpening = node.openingKind === 'opening'
+  const openingShape = node.openingShape ?? 'rectangle'
+  const windowShape = openingShape === 'arch' || openingShape === 'rounded' ? openingShape : 'rectangle'
+  const openingRadiusMode = node.openingRadiusMode ?? 'all'
+  const openingCornerRadii = node.openingCornerRadii ?? [0.15, 0.15, 0.15, 0.15]
+  const cornerRadius = node.cornerRadius ?? 0.15
+  const archHeight = node.archHeight ?? 0.35
+  const openingRevealRadius = node.openingRevealRadius ?? 0.025
+  const maxRoundedRadius = Math.max(0.01, getMaxSharedWindowRadius(node.width, node.height))
+  const displayedWindowType = node.windowType === 'hopper' ? 'awning' : (node.windowType ?? 'fixed')
+  const awningDirection = node.windowType === 'hopper' ? 'down' : (node.awningDirection ?? 'up')
+  const isOperableWindow =
+    node.windowType === 'sliding' ||
+    node.windowType === 'casement' ||
+    node.windowType === 'awning' ||
+    node.windowType === 'hopper' ||
+    node.windowType === 'single-hung' ||
+    node.windowType === 'double-hung' ||
+    node.windowType === 'louvered'
+
+  const setOperationState = (value: number) => {
+    useInteractive.getState().cancelWindowAnimation(node.id)
+    useInteractive.getState().removeWindowOpenState(node.id)
+    handleUpdate({ operationState: Math.max(0, Math.min(1, value)) })
+  }
+
+  const getDimensionUpdates = (updates: Partial<Pick<WindowNode, 'width' | 'height'>>) => {
+    const nextWidth = updates.width ?? node.width
+    const nextHeight = updates.height ?? node.height
+    const nextUpdates: Partial<WindowNode> = { ...updates }
+
+    if (openingShape === 'rounded') {
+      if (openingRadiusMode === 'individual') {
+        const currentRadii = openingCornerRadii as [number, number, number, number]
+        const nextRadii = normalizeWindowCornerRadii(
+          openingCornerRadii as [number, number, number, number],
+          nextWidth,
+          nextHeight,
+        )
+        if (!isSameRadiusTuple(currentRadii, nextRadii)) {
+          nextUpdates.openingCornerRadii = nextRadii
+        }
+      } else {
+        const nextRadius = Math.min(Math.max(cornerRadius, 0), getMaxSharedWindowRadius(nextWidth, nextHeight))
+        if (Math.abs(nextRadius - cornerRadius) > 1e-6) {
+          nextUpdates.cornerRadius = nextRadius
+        }
+      }
+    }
+
+    if (openingShape === 'arch') {
+      const nextArchHeight = Math.min(Math.max(archHeight, 0.05), Math.max(nextHeight, 0.05))
+      if (Math.abs(nextArchHeight - archHeight) > 1e-6) {
+        nextUpdates.archHeight = nextArchHeight
+      }
+    }
+
+    return nextUpdates
+  }
+
+  const setOpeningCornerRadius = (index: number, value: number, commit = false) => {
+    const next = [...openingCornerRadii] as [number, number, number, number]
+    next[index] = value
+    if (commit) {
+      commitWindowPreview('openingCornerRadii', next)
+    } else {
+      previewWindowUpdate('openingCornerRadii', next)
+    }
+  }
 
   const setColumnRatio = (index: number, newVal: number) => {
     const clamped = Math.max(0.05, Math.min(0.95, newVal))
@@ -215,6 +421,122 @@ export function WindowPanel() {
         </PresetsPopover>
       </div>
 
+      <PanelSection title="Type">
+        <SegmentedControl
+          onChange={(value) =>
+            handleUpdate({
+              openingKind: value as WindowNode['openingKind'],
+              ...(value === 'opening'
+                ? {
+                    openingShape,
+                    openingRadiusMode,
+                    openingCornerRadii,
+                    cornerRadius,
+                    archHeight,
+                    openingRevealRadius,
+                  }
+                : {}),
+            })
+          }
+          options={[
+            { value: 'window', label: 'Window' },
+            { value: 'opening', label: 'Opening' },
+          ]}
+          value={node.openingKind ?? 'window'}
+        />
+      </PanelSection>
+
+      {!isOpening && (
+        <PanelSection title="Window Type">
+          <div className="grid grid-cols-2 gap-1.5 px-1 pt-1">
+            {windowTypeOptions.map((option) => {
+              const isSelected = displayedWindowType === option.value
+              return (
+                <button
+                  className={cn(
+                    'flex min-h-12 items-center 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',
+                  )}
+                  key={option.value}
+                  onClick={() =>
+                    handleUpdate({
+                      windowType: option.value,
+                      ...(option.value === 'awning' ? { awningDirection } : {}),
+                      ...(rectangleOnlyWindowTypes.has(option.value)
+                        ? { openingShape: 'rectangle' }
+                        : {}),
+                      ...(option.value === 'bay' || option.value === 'bow' ? { sill: false } : {}),
+                    })
+                  }
+                  type="button"
+                >
+                  <span className="truncate font-medium">{option.label}</span>
+                </button>
+              )
+            })}
+          </div>
+          {displayedWindowType === 'awning' && (
+            <div className="mt-2">
+              <SegmentedControl
+                onChange={(value) =>
+                  handleUpdate({
+                    windowType: 'awning',
+                    awningDirection: value as WindowNode['awningDirection'],
+                  })
+                }
+                options={[
+                  { value: 'up', label: 'Up' },
+                  { value: 'down', label: 'Down' },
+                ]}
+                value={awningDirection}
+              />
+            </div>
+          )}
+          {node.windowType === 'casement' && (
+            <div className="mt-2 space-y-2">
+              <SegmentedControl
+                onChange={(value) =>
+                  handleUpdate({ casementStyle: value as WindowNode['casementStyle'] })
+                }
+                options={[
+                  { value: 'single', label: 'Single' },
+                  { value: 'french', label: 'French' },
+                ]}
+                value={node.casementStyle ?? 'single'}
+              />
+              {(node.casementStyle ?? 'single') === 'single' && (
+                <SegmentedControl
+                  onChange={(value) =>
+                    handleUpdate({ hingesSide: value as WindowNode['hingesSide'] })
+                  }
+                  options={[
+                    { value: 'left', label: 'Left' },
+                    { value: 'right', label: 'Right' },
+                  ]}
+                  value={node.hingesSide ?? 'left'}
+                />
+              )}
+            </div>
+          )}
+          {isOperableWindow && (
+            <div className="mt-2">
+              <SliderControl
+                label="Open"
+                max={1}
+                min={0}
+                onChange={setOperationState}
+                precision={2}
+                restoreOnCommit={false}
+                step={0.05}
+                value={Math.round((node.operationState ?? 0) * 100) / 100}
+              />
+            </div>
+          )}
+        </PanelSection>
+      )}
+
       <PanelSection title="Position">
         <SliderControl
           label={
@@ -240,22 +562,25 @@ export function WindowPanel() {
           unit="m"
           value={Math.round(node.position[1] * 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>
 
       <PanelSection title="Dimensions">
         <SliderControl
           label="Width"
           min={0}
-          onChange={(v) => handleUpdate({ width: v })}
+          onChange={(v) => handleUpdate(getDimensionUpdates({ width: v }))}
           precision={2}
+          restoreOnCommit={false}
           step={0.1}
           unit="m"
           value={Math.round(node.width * 100) / 100}
@@ -263,157 +588,356 @@ export function WindowPanel() {
         <SliderControl
           label="Height"
           min={0}
-          onChange={(v) => handleUpdate({ height: v })}
+          onChange={(v) => handleUpdate(getDimensionUpdates({ height: v }))}
           precision={2}
+          restoreOnCommit={false}
           step={0.1}
           unit="m"
           value={Math.round(node.height * 100) / 100}
         />
       </PanelSection>
 
-      <PanelSection title="Frame">
-        <SliderControl
-          label="Thickness"
-          min={0}
-          onChange={(v) => handleUpdate({ frameThickness: v })}
-          precision={3}
-          step={0.01}
-          unit="m"
-          value={Math.round(node.frameThickness * 1000) / 1000}
-        />
-        <SliderControl
-          label="Depth"
-          min={0}
-          onChange={(v) => handleUpdate({ frameDepth: v })}
-          precision={3}
-          step={0.01}
-          unit="m"
-          value={Math.round(node.frameDepth * 1000) / 1000}
-        />
-      </PanelSection>
-
-      <PanelSection title="Grid">
-        <SliderControl
-          label="Columns"
-          max={8}
-          min={1}
-          onChange={(v) => {
-            const n = Math.max(1, Math.min(8, Math.round(v)))
-            handleUpdate({ columnRatios: Array(n).fill(1 / n) })
-          }}
-          precision={0}
-          step={1}
-          value={numCols}
-        />
-        <SliderControl
-          label="Rows"
-          max={8}
-          min={1}
-          onChange={(v) => {
-            const n = Math.max(1, Math.min(8, Math.round(v)))
-            handleUpdate({ rowRatios: Array(n).fill(1 / n) })
-          }}
-          precision={0}
-          step={1}
-          value={numRows}
-        />
-
-        {numCols > 1 && (
-          <div className="mt-2 flex flex-col gap-1">
-            <div className="mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
-              Col Widths
-            </div>
-            {normCols.map((ratio, i) => (
-              <SliderControl
-                key={`c-${i}`}
-                label={`C${i + 1}`}
-                max={95}
-                min={5}
-                onChange={(v) => setColumnRatio(i, v / 100)}
-                precision={1}
-                step={1}
-                unit="%"
-                value={Math.round(ratio * 100 * 10) / 10}
+      {!isOpening && !rectangleOnlyWindowTypes.has(node.windowType) && (
+        <PanelSection title="Corner Shape">
+          <SegmentedControl
+            onChange={(value) =>
+              handleUpdate({
+                openingShape: value as WindowNode['openingShape'],
+                ...(value === 'rounded'
+                  ? {
+                      openingRadiusMode,
+                      openingCornerRadii,
+                      cornerRadius: Math.min(cornerRadius, maxRoundedRadius),
+                      openingRevealRadius,
+                      sill: false,
+                    }
+                  : {}),
+                ...(value === 'arch' ? { archHeight } : {}),
+              })
+            }
+            options={[
+              { value: 'rectangle', label: 'Rect' },
+              { value: 'rounded', label: 'Rounded' },
+              { value: 'arch', label: 'Arch' },
+            ]}
+            value={windowShape}
+          />
+          {windowShape === 'rounded' && (
+            <div className="mt-2 flex flex-col gap-1">
+              <SegmentedControl
+                onChange={(value) =>
+                  handleUpdate({ openingRadiusMode: value as WindowNode['openingRadiusMode'] })
+                }
+                options={[
+                  { value: 'all', label: 'All' },
+                  { value: 'individual', label: 'Individual' },
+                ]}
+                value={openingRadiusMode}
               />
-            ))}
-            <div className="mt-1 border-border/50 border-t pt-1">
+              {openingRadiusMode === 'all' ? (
+                <SliderControl
+                  label="Corner Radius"
+                  max={maxRoundedRadius}
+                  min={0}
+                  onChange={(value) => previewWindowUpdate('cornerRadius', value)}
+                  onCommit={(value) => commitWindowPreview('cornerRadius', value)}
+                  precision={2}
+                  step={0.05}
+                  unit="m"
+                  value={Math.round(cornerRadius * 100) / 100}
+                />
+              ) : (
+                <>
+                  {[
+                    ['Top Left', 0],
+                    ['Top Right', 1],
+                    ['Bottom Right', 2],
+                    ['Bottom Left', 3],
+                  ].map(([label, index]) => (
+                    <SliderControl
+                      key={label}
+                      label={label}
+                      max={maxRoundedRadius}
+                      min={0}
+                      onChange={(value) => setOpeningCornerRadius(index as number, value)}
+                      onCommit={(value) => setOpeningCornerRadius(index as number, value, true)}
+                      precision={2}
+                      step={0.05}
+                      unit="m"
+                      value={Math.round((openingCornerRadii[index as number] ?? 0) * 100) / 100}
+                    />
+                  ))}
+                </>
+              )}
               <SliderControl
-                label="Divider"
-                max={0.1}
-                min={0.005}
-                onChange={(v) => handleUpdate({ columnDividerThickness: v })}
+                label="Reveal Radius"
+                max={0.08}
+                min={0}
+                onChange={(value) => previewWindowUpdate('openingRevealRadius', value)}
+                onCommit={(value) => commitWindowPreview('openingRevealRadius', value)}
                 precision={3}
-                step={0.01}
+                step={0.005}
                 unit="m"
-                value={Math.round((node.columnDividerThickness ?? 0.03) * 1000) / 1000}
+                value={Math.round(openingRevealRadius * 1000) / 1000}
               />
             </div>
-          </div>
-        )}
-
-        {numRows > 1 && (
-          <div className="mt-2 flex flex-col gap-1">
-            <div className="mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
-              Row Heights
-            </div>
-            {normRows.map((ratio, i) => (
+          )}
+          {windowShape === 'arch' && (
+            <div className="mt-2 flex flex-col gap-1">
               <SliderControl
-                key={`r-${i}`}
-                label={`R${i + 1}`}
-                max={95}
-                min={5}
-                onChange={(v) => setRowRatio(i, v / 100)}
-                precision={1}
-                step={1}
-                unit="%"
-                value={Math.round(ratio * 100 * 10) / 10}
+                label="Arch Height"
+                max={Math.max(0.05, node.height)}
+                min={0.05}
+                onChange={(value) => handleUpdate({ archHeight: value })}
+                precision={2}
+                restoreOnCommit={false}
+                step={0.05}
+                unit="m"
+                value={Math.round(archHeight * 100) / 100}
               />
-            ))}
-            <div className="mt-1 border-border/50 border-t pt-1">
+            </div>
+          )}
+        </PanelSection>
+      )}
+
+      {isOpening && (
+        <PanelSection title="Opening Shape">
+          <SegmentedControl
+            onChange={(value) =>
+              handleUpdate({ openingShape: value as WindowNode['openingShape'] })
+            }
+            options={[
+              { value: 'rectangle', label: 'Rect' },
+              { value: 'rounded', label: 'Rounded' },
+              { value: 'arch', label: 'Arch' },
+            ]}
+            value={openingShape}
+          />
+          {openingShape === 'rounded' && (
+            <div className="mt-2 flex flex-col gap-1">
+              <SegmentedControl
+                onChange={(value) =>
+                  handleUpdate({ openingRadiusMode: value as WindowNode['openingRadiusMode'] })
+                }
+                options={[
+                  { value: 'all', label: 'All' },
+                  { value: 'individual', label: 'Individual' },
+                ]}
+                value={openingRadiusMode}
+              />
+              {openingRadiusMode === 'all' ? (
+                <SliderControl
+                  label="Corner Radius"
+                  max={maxRoundedRadius}
+                  min={0}
+                  onChange={(value) => previewWindowUpdate('cornerRadius', value)}
+                  onCommit={(value) => commitWindowPreview('cornerRadius', value)}
+                  precision={2}
+                  step={0.05}
+                  unit="m"
+                  value={Math.round(cornerRadius * 100) / 100}
+                />
+              ) : (
+                <>
+                  {[
+                    ['Top Left', 0],
+                    ['Top Right', 1],
+                    ['Bottom Right', 2],
+                    ['Bottom Left', 3],
+                  ].map(([label, index]) => (
+                    <SliderControl
+                      key={label}
+                      label={label}
+                      max={maxRoundedRadius}
+                      min={0}
+                      onChange={(value) => setOpeningCornerRadius(index as number, value)}
+                      onCommit={(value) => setOpeningCornerRadius(index as number, value, true)}
+                      precision={2}
+                      step={0.05}
+                      unit="m"
+                      value={Math.round((openingCornerRadii[index as number] ?? 0) * 100) / 100}
+                    />
+                  ))}
+                </>
+              )}
               <SliderControl
-                label="Divider"
-                max={0.1}
-                min={0.005}
-                onChange={(v) => handleUpdate({ rowDividerThickness: v })}
+                label="Reveal Radius"
+                max={0.08}
+                min={0}
+                onChange={(value) => previewWindowUpdate('openingRevealRadius', value)}
+                onCommit={(value) => commitWindowPreview('openingRevealRadius', value)}
                 precision={3}
-                step={0.01}
+                step={0.005}
                 unit="m"
-                value={Math.round((node.rowDividerThickness ?? 0.03) * 1000) / 1000}
+                value={Math.round(openingRevealRadius * 1000) / 1000}
               />
             </div>
-          </div>
-        )}
-      </PanelSection>
+          )}
+          {openingShape === 'arch' && (
+            <div className="mt-2 flex flex-col gap-1">
+              <SliderControl
+                label="Arch Height"
+                max={Math.max(0.05, node.height)}
+                min={0.05}
+                onChange={(value) => handleUpdate({ archHeight: value })}
+                precision={2}
+                restoreOnCommit={false}
+                step={0.05}
+                unit="m"
+                value={Math.round(archHeight * 100) / 100}
+              />
+            </div>
+          )}
+        </PanelSection>
+      )}
 
-      <PanelSection title="Sill">
-        <ToggleControl
-          checked={node.sill}
-          label="Enable Sill"
-          onChange={(checked) => handleUpdate({ sill: checked })}
-        />
-        {node.sill && (
-          <div className="mt-1 flex flex-col gap-1">
+      {!isOpening && (
+        <>
+          <PanelSection title="Frame">
             <SliderControl
-              label="Depth"
+              label="Thickness"
               min={0}
-              onChange={(v) => handleUpdate({ sillDepth: v })}
+              onChange={(v) => handleUpdate({ frameThickness: v })}
               precision={3}
               step={0.01}
               unit="m"
-              value={Math.round(node.sillDepth * 1000) / 1000}
+              value={Math.round(node.frameThickness * 1000) / 1000}
             />
             <SliderControl
-              label="Thickness"
+              label="Depth"
               min={0}
-              onChange={(v) => handleUpdate({ sillThickness: v })}
+              onChange={(v) => handleUpdate({ frameDepth: v })}
               precision={3}
               step={0.01}
               unit="m"
-              value={Math.round(node.sillThickness * 1000) / 1000}
+              value={Math.round(node.frameDepth * 1000) / 1000}
             />
-          </div>
-        )}
-      </PanelSection>
+          </PanelSection>
+
+          <PanelSection title="Grid">
+            <SliderControl
+              label="Columns"
+              max={8}
+              min={1}
+              onChange={(v) => {
+                const n = Math.max(1, Math.min(8, Math.round(v)))
+                handleUpdate({ columnRatios: Array(n).fill(1 / n) })
+              }}
+              precision={0}
+              step={1}
+              value={numCols}
+            />
+            <SliderControl
+              label="Rows"
+              max={8}
+              min={1}
+              onChange={(v) => {
+                const n = Math.max(1, Math.min(8, Math.round(v)))
+                handleUpdate({ rowRatios: Array(n).fill(1 / n) })
+              }}
+              precision={0}
+              step={1}
+              value={numRows}
+            />
+
+            {numCols > 1 && (
+              <div className="mt-2 flex flex-col gap-1">
+                <div className="mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+                  Col Widths
+                </div>
+                {normCols.map((ratio, i) => (
+                  <SliderControl
+                    key={`c-${i}`}
+                    label={`C${i + 1}`}
+                    max={95}
+                    min={5}
+                    onChange={(v) => setColumnRatio(i, v / 100)}
+                    precision={1}
+                    step={1}
+                    unit="%"
+                    value={Math.round(ratio * 100 * 10) / 10}
+                  />
+                ))}
+                <div className="mt-1 border-border/50 border-t pt-1">
+                  <SliderControl
+                    label="Divider"
+                    max={0.1}
+                    min={0.005}
+                    onChange={(v) => handleUpdate({ columnDividerThickness: v })}
+                    precision={3}
+                    step={0.01}
+                    unit="m"
+                    value={Math.round((node.columnDividerThickness ?? 0.03) * 1000) / 1000}
+                  />
+                </div>
+              </div>
+            )}
+
+            {numRows > 1 && (
+              <div className="mt-2 flex flex-col gap-1">
+                <div className="mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+                  Row Heights
+                </div>
+                {normRows.map((ratio, i) => (
+                  <SliderControl
+                    key={`r-${i}`}
+                    label={`R${i + 1}`}
+                    max={95}
+                    min={5}
+                    onChange={(v) => setRowRatio(i, v / 100)}
+                    precision={1}
+                    step={1}
+                    unit="%"
+                    value={Math.round(ratio * 100 * 10) / 10}
+                  />
+                ))}
+                <div className="mt-1 border-border/50 border-t pt-1">
+                  <SliderControl
+                    label="Divider"
+                    max={0.1}
+                    min={0.005}
+                    onChange={(v) => handleUpdate({ rowDividerThickness: v })}
+                    precision={3}
+                    step={0.01}
+                    unit="m"
+                    value={Math.round((node.rowDividerThickness ?? 0.03) * 1000) / 1000}
+                  />
+                </div>
+              </div>
+            )}
+          </PanelSection>
+
+          <PanelSection title="Sill">
+            <ToggleControl
+              checked={node.sill}
+              label="Enable Sill"
+              onChange={(checked) => handleUpdate({ sill: checked })}
+            />
+            {node.sill && (
+              <div className="mt-1 flex flex-col gap-1">
+                <SliderControl
+                  label="Depth"
+                  min={0}
+                  onChange={(v) => handleUpdate({ sillDepth: v })}
+                  precision={3}
+                  step={0.01}
+                  unit="m"
+                  value={Math.round(node.sillDepth * 1000) / 1000}
+                />
+                <SliderControl
+                  label="Thickness"
+                  min={0}
+                  onChange={(v) => handleUpdate({ sillThickness: v })}
+                  precision={3}
+                  step={0.01}
+                  unit="m"
+                  value={Math.round(node.sillThickness * 1000) / 1000}
+                />
+              </div>
+            )}
+          </PanelSection>
+        </>
+      )}
 
       <PanelSection title="Actions">
         <ActionGroup>
@@ -431,9 +955,6 @@ export function WindowPanel() {
           />
         </ActionGroup>
       </PanelSection>
-      <PanelSection title="Material">
-        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
-      </PanelSection>
     </PanelWrapper>
   )
 }