Add center-only bottom panel layout toggle

app/page.tsx

@@ -134,6 +134,20 @@ const mockMenuItems: MenuItem[] = [
       },
     ],
   },
+  {
+    id: "layout",
+    label: "Layout",
+    icon: <PanelBottom className="h-4 w-4" />,
+    isExpanded: true,
+    children: [
+      {
+        id: "center-only-bottom",
+        label: "Bottom panel under center only",
+        isChecked: false,
+        onClick: () => console.log("Center-only bottom panel toggled"),
+      },
+    ],
+  },
   {
     id: "hidden-item",
     label: "This should be hidden",
@@ -247,6 +261,7 @@ export default function VisualNovelEditor() {
   const [leftPanelWidth, setLeftPanelWidth] = useState(300)
   const [rightPanelWidth, setRightPanelWidth] = useState(300)
   const [bottomPanelHeight, setBottomPanelHeight] = useState(200)
+  const [centerOnlyBottomPanel, setCenterOnlyBottomPanel] = useState(false)
 
   // Track when panels are transitioning to enable/disable transitions
   const [leftPanelTransitioning, setLeftPanelTransitioning] = useState(false)
@@ -297,6 +312,22 @@ export default function VisualNovelEditor() {
   }
 
   const handleMenuItemClick = (item: MenuItem) => {
+    if (item.id === "center-only-bottom") {
+      setCenterOnlyBottomPanel((current) => !current)
+      setMenuItems((items) =>
+        items.map((menuItem) =>
+          menuItem.id === "layout"
+            ? {
+                ...menuItem,
+                children: menuItem.children?.map((child) =>
+                  child.id === "center-only-bottom" ? { ...child, isChecked: !centerOnlyBottomPanel } : child,
+                ),
+              }
+            : menuItem,
+        ),
+      )
+      return
+    }
     console.log("Menu item clicked:", item.label)
   }
 
@@ -345,16 +376,22 @@ export default function VisualNovelEditor() {
       <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
         {/* Top Section - Left, Main, Right Panels */}
         <div
-          className="flex flex-1 min-h-0 overflow-hidden"
+          className="flex-1 min-h-0 overflow-hidden"
           style={{
-            height: bottomPanelVisible ? `calc(100% - ${bottomPanelHeight}px)` : "100%",
+            display: "grid",
-            transition: bottomPanelTransitioning ? `height ${PANEL_TRANSITION_DURATION} ease-in-out` : "none",
+            gridTemplateColumns: `${leftPanelVisible ? `${leftPanelWidth}px` : "0px"} minmax(0, 1fr) ${rightPanelVisible ? `${rightPanelWidth}px` : "0px"}`,
+            gridTemplateRows: centerOnlyBottomPanel
+              ? `minmax(0, 1fr) ${bottomPanelVisible ? `${bottomPanelHeight}px` : "0px"}`
+              : "minmax(0, 1fr)",
+            transition: bottomPanelTransitioning ? `grid-template-rows ${PANEL_TRANSITION_DURATION} ease-in-out` : "none",
           }}
         >
           {/* Left Panel - Node Tree */}
           <div
-            className="bg-muted/30 border-r overflow-hidden flex-shrink-0"
+            className="bg-muted/30 border-r overflow-hidden min-w-0"
             style={{
+              gridColumn: 1,
+              gridRow: centerOnlyBottomPanel ? "1 / 3" : "1",
               width: leftPanelVisible ? `${leftPanelWidth}px` : "0px",
               transition: leftPanelTransitioning ? `width ${PANEL_TRANSITION_DURATION} ease-in-out` : "none",
             }}
@@ -392,7 +429,10 @@ export default function VisualNovelEditor() {
           </div>
 
           {/* Main Panel */}
-          <div className="flex-1 flex flex-col relative min-w-0 overflow-hidden">
+          <div
+            className="flex min-w-0 flex-col relative overflow-hidden"
+            style={{ gridColumn: 2, gridRow: 1 }}
+          >
             <div className="h-full flex flex-col p-4">
               {/* Action Buttons */}
               {selectedNode && selectedNode.actions.length > 0 && (
@@ -436,8 +476,10 @@ export default function VisualNovelEditor() {
 
           {/* Right Panel - Info */}
           <div
-            className="bg-muted/30 border-l overflow-hidden flex-shrink-0"
+            className="bg-muted/30 border-l overflow-hidden min-w-0"
             style={{
+              gridColumn: 3,
+              gridRow: centerOnlyBottomPanel ? "1 / 3" : "1",
               width: rightPanelVisible ? `${rightPanelWidth}px` : "0px",
               transition: rightPanelTransitioning ? `width ${PANEL_TRANSITION_DURATION} ease-in-out` : "none",
             }}
@@ -479,12 +521,13 @@ export default function VisualNovelEditor() {
               </ResizablePanel>
             </div>
           </div>
-        </div>
 
-        {/* Bottom Panel - Object Properties (Full Width) */}
+        {/* Bottom Panel - Object Properties */}
         <div
-          className="bg-muted/30 border-t overflow-hidden flex-shrink-0"
+          className="bg-muted/30 border-t overflow-hidden min-h-0"
           style={{
+            gridColumn: centerOnlyBottomPanel ? 2 : "1 / -1",
+            gridRow: centerOnlyBottomPanel ? 2 : 2,
             height: bottomPanelVisible ? `${bottomPanelHeight}px` : "0px",
             transition: bottomPanelTransitioning ? `height ${PANEL_TRANSITION_DURATION} ease-in-out` : "none",
           }}
@@ -522,6 +565,7 @@ export default function VisualNovelEditor() {
             </ResizablePanel>
           </div>
         </div>
+        </div>
       </div>
     </div>
   )