Organize door panel controls by door family

packages/nodes/src/door/panel.tsx

@@ -390,21 +390,37 @@ export default function DoorPanel() {
   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 isSwingDoor = doorType === 'hinged' || doorType === 'double' || doorType === 'french'
+  const isSlideFoldDoor =
+    doorType === 'folding' ||
+    doorType === 'pocket' ||
+    doorType === 'barn' ||
+    doorType === 'sliding'
+  const isSlidingDoor = doorType === 'pocket' || doorType === 'barn' || doorType === 'sliding'
+  const isFoldingDoor = doorType === 'folding'
   const isSectionalGarageDoor = doorType === 'garage-sectional'
   const isRollupGarageDoor = doorType === 'garage-rollup'
   const isTiltupGarageDoor = doorType === 'garage-tiltup'
-  const typeMode = isOpening ? 'opening' : isGarageDoor ? 'garage' : 'door'
+  const isCutoutOnly = isOpening
+  const typeMode = isCutoutOnly ? 'opening' : isGarageDoor ? 'garage' : 'door'
   const supportsHingeSide = doorType === 'hinged'
   const supportsHandleSide = doorType === 'hinged'
-  const supportsTopShape =
+  const supportsTopShape = isSwingDoor
-    !isGarageDoor &&
+  const showFlipSide = !isCutoutOnly
-    doorType !== 'folding' &&
+  const showFoldSection = isFoldingDoor && !isCutoutOnly
-    doorType !== 'pocket' &&
+  const showSlideSection = isSlidingDoor && !isCutoutOnly
-    doorType !== 'barn' &&
+  const showGarageSection =
-    doorType !== 'sliding'
+    (isSectionalGarageDoor || isRollupGarageDoor || isTiltupGarageDoor) && !isCutoutOnly
+  const showOpeningShapeSection = isCutoutOnly
+  const showDoorShapeSection = !isCutoutOnly && supportsTopShape
+  const showFrameSection = !isCutoutOnly
+  const showContentPaddingSection = !isCutoutOnly && !isGarageDoor
+  const showSwingSection = isSwingDoor
+  const showThresholdSection = isSwingDoor
+  const showHandleSection = isSwingDoor
+  const showHardwareSection = isSwingDoor
+  const showSegmentsSection = !isCutoutOnly && !isGarageDoor
   const maxDoorWidth = isGarageDoor ? 6 : 3
 
   const setOpeningTopRadius = (index: number, value: number, commit = false) => {
@@ -679,7 +695,7 @@ export default function DoorPanel() {
           unit="m"
           value={Math.round(node.position[0] * 100) / 100}
         />
-        {!isOpening && (
+        {showFlipSide && (
           <div className="px-1 pt-2 pb-1">
             <ActionButton
               className="w-full"
@@ -691,7 +707,7 @@ export default function DoorPanel() {
         )}
       </PanelSection>
 
-      {doorType === 'folding' && !isOpening && (
+      {showFoldSection && (
         <PanelSection title="Fold">
           <div className="flex flex-col gap-2 px-1 pb-1">
             <div className="space-y-1">
@@ -722,7 +738,7 @@ export default function DoorPanel() {
         </PanelSection>
       )}
 
-      {isSlidingDoor && !isOpening && (
+      {showSlideSection && (
         <PanelSection title="Slide">
           <div className="flex flex-col gap-2 px-1 pb-1">
             <div className="space-y-1">
@@ -753,7 +769,7 @@ export default function DoorPanel() {
         </PanelSection>
       )}
 
-      {(isSectionalGarageDoor || isRollupGarageDoor || isTiltupGarageDoor) && !isOpening && (
+      {showGarageSection && (
         <PanelSection title="Garage">
           <SliderControl
             label="Open"
@@ -808,7 +824,7 @@ export default function DoorPanel() {
         />
       </PanelSection>
 
-      {!isOpening && supportsTopShape && (
+      {showDoorShapeSection && (
         <PanelSection title="Top Shape">
           <div className="flex flex-col gap-2 px-1 pb-1">
             <SegmentedControl
@@ -910,7 +926,7 @@ export default function DoorPanel() {
         </PanelSection>
       )}
 
-      {isOpening && (
+      {showOpeningShapeSection && (
         <PanelSection title="Opening Shape">
           <div className="flex flex-col gap-2 px-1 pb-1">
             <SegmentedControl
@@ -1007,8 +1023,9 @@ export default function DoorPanel() {
         </PanelSection>
       )}
 
-      {!isOpening && (
+      {!isCutoutOnly && (
         <>
+          {showFrameSection && (
             <PanelSection title="Frame">
             <SliderControl
               label="Thickness"
@@ -1031,8 +1048,9 @@ export default function DoorPanel() {
               value={Math.round(node.frameDepth * 1000) / 1000}
             />
             </PanelSection>
+          )}
 
-          {!isGarageDoor && (
+          {showContentPaddingSection && (
             <PanelSection title="Content Padding">
               <SliderControl
                 label="Horizontal"
@@ -1057,7 +1075,7 @@ export default function DoorPanel() {
             </PanelSection>
           )}
 
-          {isSwingDoor && (
+          {showSwingSection && (
             <PanelSection title="Swing">
               <div className="flex flex-col gap-2 px-1 pb-1">
                 {supportsHingeSide && (
@@ -1092,7 +1110,7 @@ export default function DoorPanel() {
             </PanelSection>
           )}
 
-          {isSwingDoor && (
+          {showThresholdSection && (
             <PanelSection title="Threshold">
               <ToggleControl
                 checked={node.threshold}
@@ -1116,7 +1134,7 @@ export default function DoorPanel() {
             </PanelSection>
           )}
 
-          {!isGarageDoor && (
+          {showHandleSection && (
             <PanelSection title="Handle">
               {isSwingDoor && (
                 <ToggleControl
@@ -1157,7 +1175,7 @@ export default function DoorPanel() {
             </PanelSection>
           )}
 
-          {isSwingDoor && (
+          {showHardwareSection && (
             <PanelSection title="Hardware">
               <ToggleControl
                 checked={node.doorCloser}
@@ -1186,7 +1204,7 @@ export default function DoorPanel() {
             </PanelSection>
           )}
 
-          {!isGarageDoor && (
+          {showSegmentsSection && (
             <PanelSection title="Segments">
               {node.segments.map((seg, i) => {
                 const numCols = seg.columnRatios.length