npm - @donotdev/cli - Versions diffs - 0.0.20 → 0.0.21 - Mend

@donotdev/cli 0.0.20 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/cli",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Command-line interface for DoNotDev Framework",
   "type": "module",
   "private": false,

package/templates/app-demo/.env.example ADDED Viewed

	@@ -0,0 +1 @@
1	+ VITE_AUTH_PARTNERS=password, google, github, apple, discord, facebook, linkedin, reddit, twitch, twitter, microsoft, spotify, yahoo

package/templates/{root-consumer → app-demo}/entities/ExampleEntity.ts.example RENAMED Viewed

@@ -32,13 +32,16 @@ export const productEntity = defineEntity({
   listCardFields: ['images', 'name', 'price', 'category'],
   // ==========================================================================
-  // ACCESS RULES - Who can do what
+  // ACCESS RULES - Who can do what (maps to Supabase RLS policies)
   // ==========================================================================
   //
   // 'guest'   → Anyone (including not logged in)
   // 'user'    → Any logged-in user
-  // 'owner'   → Only the document owner (createdById matches)
   // 'admin'   → Only admin role
+  // 'super'   → Only super admin
+  //
+  // NOTE: These are DB-level roles. For owner-based logic, use field-level
+  // 'editable' / 'visibility' settings (see FIELD DEFINITIONS below).
   //
   access: {
     create: 'admin',   // Only admins can create products
@@ -67,16 +70,19 @@ export const productEntity = defineEntity({
   // 'images'    → Image upload (multiple)
   // 'reference' → Link to another entity
   //
-  // VISIBILITY:
-  // 'guest'  → Everyone can see this field
-  // 'user'   → Only logged-in users
-  // 'owner'  → Only document owner
-  // 'admin'  → Only admins
+  // VISIBILITY (field-level, UI only):
+  // 'guest'   → Everyone can see this field
+  // 'user'    → Only logged-in users
+  // 'admin'   → Only admins
+  // 'super'   → Only super admins
+  // 'hidden'  → Never sent to client (server-only)
   //
-  // EDITABLE:
+  // EDITABLE (field-level, UI only):
   // 'admin'       → Only admins can edit
-  // 'owner'       → Only owner can edit
+  // 'owner'       → Only document creator can edit
+  // 'user'        → Any authenticated user can edit
   // 'create-only' → Set on creation, read-only after
+  // false         → Never editable (read-only)
   //
   fields: {
     // ==========================================================================

package/templates/app-demo/index.html.example CHANGED Viewed

@@ -20,7 +20,7 @@
       box-sizing: border-box;
     }
     body {
-      font-family: 'Inter', var(--font-family, ui-sans-serif, system-ui, -apple-system, sans-serif);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;

package/templates/app-dndev/index.html.example ADDED Viewed

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <!-- ✅ CORE: Performance-critical meta tags first -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="color-scheme" content="light dark" />
+  <!-- ✅ DnDev: Framework will inject FaviconHead here -->
+  <!-- All favicon links will be added by FaviconHead component -->
+  <!-- ✅ DnDev: Asset manifest injection point -->
+  <!-- window.__DNDEV_ASSETS__ and __DNDEV_ASSET_MANIFEST__ injected here -->
+  <!-- ✅ PWA: Manifest link (if exists) -->
+  <link rel="manifest" href="/manifest.json" />
+  <!-- Fonts: Inter, Space Grotesk, Playfair, Roboto loaded via @donotdev/ui/dndev.css (bundled). -->
+  <!-- DNDEV_FONT_PRELOADS -->
+  <!-- ✅ PERFORMANCE: Preconnect to external domains (OAuth providers) -->
+  <!-- GitHub OAuth -->
+  <link rel="preconnect" href="https://github.com">
+  <link rel="preconnect" href="https://api.github.com">
+  <!-- Google OAuth (remove if not using) -->
+  <link rel="preconnect" href="https://accounts.google.com">
+  <link rel="preconnect" href="https://oauth2.googleapis.com">
+  <link rel="preconnect" href="https://apis.google.com">
+  <link rel="preconnect" href="https://www.googleapis.com">
+  <!-- ✅ SEO: Basic meta tags (AutoMetaTags will override these) -->
+  <title>Loading...</title>
+  <meta name="description" content="Modern web application powered by DoNotDev" />
+  <!-- ✅ PERFORMANCE: Critical CSS inlined here by build -->
+  <style>
+    /* Critical above-the-fold styles */
+    html, body {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      background: #ffffff;
+      color: #000000;
+    }
+    @media (prefers-color-scheme: dark) {
+      body {
+        background: #000000;
+        color: #ffffff;
+      }
+    }
+    /* Critical shell loader styles - pure CSS, instant render */
+    #shell-loader {
+      position: fixed;
+      inset: 0;
+      background: #000000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      opacity: 1;
+      transition: opacity 0.3s ease-out;
+      will-change: opacity;
+      /* Isolate from framework CSS */
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    #shell-loader.shell-loader--fading {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .shell-loader__content {
+      text-align: center;
+      color: white;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+      width: 100%;
+      max-width: 500px;
+      /* Prevent layout shifts from framework CSS */
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      line-height: 1.2;
+    }
+    .shell-loader__brand {
+      display: block;
+      font-size: clamp(3rem, 10vw, 5rem);
+      font-weight: 800;
+      letter-spacing: -0.05em;
+      margin: 0 0 1rem 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    /* ECG Waveform Animation - stroke-dasharray (performant, cross-browser, standard SVG technique) */
+    .shell-loader__dots {
+      display: block;
+      width: 300px;
+      height: 60px;
+      margin: 0 auto;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    .shell-loader__dots svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    .shell-loader__dots path {
+      stroke: #667eea;
+      stroke-width: 3;
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-dasharray: 400;
+      stroke-dashoffset: 400;
+      animation: ecg-draw 2s linear infinite;
+    }
+    @keyframes ecg-draw {
+      0% {
+        stroke-dashoffset: 400;
+        opacity: 0;
+      }
+      10% {
+        opacity: 1;
+      }
+      70% {
+        stroke-dashoffset: 0;
+        opacity: 1;
+      }
+      90%, 100% {
+        stroke-dashoffset: 0;
+        opacity: 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- ✅ SHELL LOADER: Branded loading experience before React loads -->
+  <div id="shell-loader">
+    <div class="shell-loader__content">
+      <span class="shell-loader__brand">DoNotDev</span>
+      <span class="shell-loader__dots">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60" preserveAspectRatio="xMidYMid meet">
+          <path d="M0,30 L100,30 L110,20 L120,30 L130,30 L140,5 L150,55 L160,30 L175,30 L190,20 L205,30 L300,30" />
+        </svg>
+      </span>
+    </div>
+  </div>
+  <!-- ✅ APP: React app container -->
+  <div id="root"></div>
+  <!-- ✅ PERFORMANCE: Module script with proper attributes -->
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/app-dndev/public/logo.svg.example ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:v="https://vecta.io/nano"><path d="M11.995 68.133c-.747.14-2.114 1.276-2.986 2.409l-1.557 2.199-.062 104.273.684 251.717c.935 2.835 3.423 4.749 6.347 4.89 2.366.142 3.61-.566 10.767-5.599l42.311-30.054L112.3 366.14l16.366-11.768c3.234-2.268 6.098-4.749 6.346-5.599 1.369-3.828 9.271-32.679 9.023-32.891-.124-.213-1.743.78-3.547 2.198-1.803 1.347-8.773 6.309-15.432 10.916L87.1 355.862l-24.891 17.65-23.831 16.729c-5.413 3.898-10.143 7.017-10.454 7.017-.685 0-.809-291.837-.063-292.334.249-.141 1.619.497 3.049 1.559l51.521 37.711 18.668 13.61 20.222 14.674 13.69 9.996 9.333 6.734 12.756 9.215c10.455 7.798 15.992 11.767 16.553 11.908.374.073 1.99-4.889 3.609-11.058l3.048-11.202-5.537-4.038-10.641-7.799c-2.863-1.984-10.391-7.584-16.8-12.405l-23.21-17.154-20.721-15.24L89.4 121.157c-2.613-1.986-7.653-5.671-11.2-8.223L23.506 73.096c-6.471-4.679-8.774-5.671-11.512-4.962l.001-.001zm235.829 4.466c-1.057.708-2.302 2.055-2.737 2.977-.622 1.276-.809 14.673-.746 62.733l.062 61.104 4.915 8.01 10.206 16.871 5.225 8.861.187-62.308 1.057-61.812c.56.212 6.098 4.111 12.321 8.648l43.806 31.97c1.307.991 1.431.708 5.973-9.641l4.667-10.705-1.618-1.346-14.747-10.845-20.844-15.313-36.65-26.864c-5.788-4.182-7.841-4.608-11.077-2.34zm-34.784 196.85l-7.279 15.807-11.511 25.166c.123.141 5.351-3.474 11.697-7.939l18.356-13.042 8.027-5.813c1.057-.922.685-1.701-6.347-13.469l-7.466-12.546-5.477 11.838v-.002z" fill="var(--primary,#dc143c)"/><path d="M376.752 57.145l-4.977 11.2c-1.432 2.907-4.792 10.066-7.468 15.95l-9.955 21.619-25.388 54.583-11.2 24.101-20.658 43.949-11.7 24.81-7.84 16.304c-.809 1.347-.621 1.631-15.679-23.747l-26.072-43.949-22.213-37.71c-8.587-14.815-10.267-16.73-12.322-14.319-.435.566-2.676 8.009-4.978 16.586l-22.711 82.228-13.378 47.494-8.153 29.064-18.232 64.86-12.133 43.382-4.355 16.162c.186 0 3.671-7.443 14.871-31.898l10.578-22.684 8.088-17.013 8.774-18.43 9.771-20.556 7.901-16.659 9.333-19.848 9.957-21.267 10.765-23.038c6.844-14.957 9.397-20.061 10.08-20.273.374-.142 3.485 4.606 6.968 10.562l24.828 41.255 31.981 52.809c5.289 8.932 6.846 11.06 8.153 11.2.87.142 1.929-.212 2.302-.779.685-.851 19.6-65.499 44.054-150.421l25.823-88.889 17.798-62.168c-.125-.141-1.308 2.34-2.615 5.53h.002z" fill="var(--accent,#ffd700)"/><path d="M359.081 153.904l-3.111 11.555c-1.369 4.89-2.302 9.074-2.053 9.287s5.041 3.757 10.703 7.869l33.289 24.314 37.645 27.505 19.601 14.318 6.409 4.536c2.489 1.49 5.538-.991-32.542 26.369l-38.269 27.432-31.236 22.402-33.913 24.456-28.187 20.273-12.134 8.648c-10.019 7.16-19.413 13.681-19.848 13.681-.188 0-.374-14.248-.374-31.757v-31.686l-4.419-7.088-10.019-16.518c-3.111-5.102-5.849-9.356-6.098-9.356s-.375 11.909-.249 26.37l.249 64.223v37.711l2.054 2.623c1.866 2.268 2.489 2.553 4.914 2.553 3.237 0 4.169-.568 18.855-11.202l76.535-55.291 21.78-15.807 120.403-86.411c3.67-2.552 5.102-4.748 5.475-8.434.188-2.409 0-3.971-.746-5.599-1.244-2.623-2.677-3.686-48.908-37.711l-51.023-37.642-14.624-10.774-12.88-9.427c-2.986-2.199-5.724-4.041-6.035-4.041-.374 0-.934 1.206-1.245 2.622l.001-.003z" fill="var(--primary,#dc143c)"/></svg>

package/templates/app-dndev/public/manifest.json.example ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "name": "DoNotDev App",
+  "short_name": "DoNotDev",
+  "description": "Built with DoNotDev Framework ©",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": []
+}

package/templates/app-dndev/src/App.tsx.example ADDED Viewed

@@ -0,0 +1,35 @@
+/**
+ * @fileoverview Main application component
+ *
+ * Admin preset with cockpit layout wrapper.
+ * Single unified store (DoNotDashStore) for all app state.
+ * Terminal embedded inside CockpitLayout (route-aware split panes).
+ * Ctrl+K navigation uses framework GoToWrapper (rendered by DnDevLayout).
+ */
+import { ViteAppProviders } from '@donotdev/ui/vite';
+import { CockpitLayout } from './components/CockpitLayout';
+import './components/TerminalPanel.css';
+import './components/CockpitLayout.css';
+import './components/Kanban.css';
+import './components/markdown-prose.css';
+import './config/providers';
+import { appConfig } from './config/app';
+import { useDoNotDashStore } from './stores/dndevStore';
+export function App() {
+  return (
+    <ViteAppProviders
+      config={appConfig}
+      layout={{
+        breadcrumbs: 'smart',
+        footer: () => null,
+        wrapper: ({ children }) => <CockpitLayout>{children}</CockpitLayout>,
+      }}
+      customStores={[
+        { name: 'donotdash', type: 'regular', store: useDoNotDashStore },
+      ]}
+    />
+  );
+}

package/templates/app-dndev/src/components/CockpitLayout.css.example ADDED Viewed

@@ -0,0 +1,181 @@
+/* ===========================
+   COCKPIT LAYOUT
+   Route-aware split panes via react-resizable-panels
+   =========================== */
+.dndev-cockpit {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--header-height, 56px));
+  min-height: 0;
+  overflow: hidden;
+}
+/* Panel groups fill cockpit */
+.dndev-cockpit > [data-panel-group] {
+  flex: 1;
+  min-height: 0;
+}
+/* Panels must shrink below content intrinsic width */
+.dndev-cockpit [data-panel] {
+  min-width: 0;
+  min-height: 0;
+}
+/* Kill breakthrough CSS inside cockpit panels.
+   Sections use width: calc(100dvw - var(--sidebar-width)) to break out of PageContainer,
+   but inside react-resizable-panels the panel IS the boundary, not the viewport.
+   Without this, Sections render at 100dvw and bleed under the terminal panel. */
+.dndev-cockpit .dndev-container > .dndev-section-full-width {
+  width: 100%;
+  max-width: 100%;
+  margin-inline: 0;
+}
+/* ===========================
+   PANES
+   =========================== */
+.dndev-cockpit-pane {
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.dndev-cockpit-pane--content {
+  overflow: hidden;
+}
+/* Scrollable area for page content — below the toolbar */
+.dndev-cockpit-scroll {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+/* ===========================
+   COCKPIT TOOLBAR — real header row above content
+   =========================== */
+.dndev-cockpit-toolbar {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 8px;
+  gap: 8px;
+  border-bottom: 1px solid var(--border);
+  background: var(--card);
+}
+.dndev-cockpit-toolbar-start,
+.dndev-cockpit-toolbar-end {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+/* OverlaySlotTarget center area — pages inject controls here */
+.dndev-cockpit-overlays-center {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+/* GoTo search — constrain width so it doesn't stretch to fill flex space */
+.dndev-cockpit-goto {
+  max-width: 320px;
+}
+.dndev-cockpit-pane--terminal {
+  background: #0a0a0a;
+}
+.dndev-cockpit-pane--left-stack {
+  border-inline-end: none;
+}
+.dndev-cockpit-pane--explorer {
+  overflow-y: auto;
+  background: var(--card);
+}
+/* ===========================
+   RESIZE HANDLES
+   =========================== */
+.dndev-cockpit-handle {
+  flex-shrink: 0;
+  transition: background var(--dur-fast, 100ms);
+}
+.dndev-cockpit-handle:hover,
+.dndev-cockpit-handle:focus-visible,
+.dndev-cockpit-handle[data-resize-handle-active] {
+  background: var(--primary);
+  outline: none;
+}
+/* Vertical handle (between left/right panes) */
+.dndev-cockpit-handle--vertical {
+  width: 4px;
+  cursor: col-resize;
+  background: var(--border);
+}
+/* Horizontal handle (between top/bottom panes) */
+.dndev-cockpit-handle--horizontal {
+  height: 4px;
+  cursor: row-resize;
+  background: var(--border);
+}
+@media (hover: none) {
+  .dndev-cockpit-handle--vertical { width: 8px; }
+  .dndev-cockpit-handle--horizontal { height: 8px; }
+}
+/* ===========================
+   FULLSCREEN — CSS-only, no React tree change
+   Terminal breaks out via position:fixed, content hidden
+   =========================== */
+.dndev-cockpit[data-fullscreen] .dndev-cockpit-pane--content,
+.dndev-cockpit[data-fullscreen] .dndev-cockpit-pane--explorer,
+.dndev-cockpit[data-fullscreen] .dndev-cockpit-handle {
+  display: none !important;
+}
+/* Terminal in Panel (horizontal/left-stack) */
+.dndev-cockpit[data-fullscreen] .dndev-cockpit-pane--terminal {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  height: 100vh !important;
+  max-height: none !important;
+}
+/* Terminal direct child (bottom-bar) */
+.dndev-cockpit[data-fullscreen] > .dndev-terminal-panel {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  height: 100vh !important;
+  max-height: none !important;
+  min-height: 0 !important;
+}
+/* ===========================
+   REMOVE FRAMEWORK COMPENSATION
+   The terminal is no longer fixed — it's inside the layout.
+   =========================== */
+.dndev-layout {
+  padding-bottom: 0 !important;
+}

package/templates/app-dndev/src/components/CockpitLayout.tsx.example ADDED Viewed

@@ -0,0 +1,209 @@
+/**
+ * @fileoverview Cockpit layout wrapper — route-aware split panes via react-resizable-panels v4
+ *
+ * Reads current route, maps to a LayoutPreset, and renders the appropriate
+ * split arrangement with terminal as a contextual slot.
+ *
+ * Two presets:
+ * - bottom-bar: content on top, terminal at bottom (observer pages)
+ * - horizontal: content left, terminal right (operator pages)
+ *
+ * Terminal is rendered ONCE per layout — never conditionally swapped.
+ * Fullscreen is CSS-only (data-fullscreen attribute), no React tree change.
+ */
+import { useCallback, useEffect, useRef } from 'react';
+import { Group, Panel, Separator, usePanelRef } from 'react-resizable-panels';
+import { LanguageSelector } from '@donotdev/core';
+import { GoTo, ThemeToggle, useLocation } from '@donotdev/ui';
+import { useDoNotDashStore } from '../stores/dndevStore';
+import { ModeToggle } from './ModeToggle';
+import { OverlaySlotProvider, OverlaySlotTarget } from './OverlaySlot';
+import { TerminalPanel } from './TerminalPanel';
+import type { ReactNode } from 'react';
+import type { Layout } from 'react-resizable-panels';
+// ============================================================================
+// CONTENT PANE — scrollable children + fixed overlays (GoTo, ModeToggle)
+// ============================================================================
+function ContentPane({ children }: { children: ReactNode }): ReactNode {
+  const { pathname } = useLocation();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  // Reset scroll position on route change
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = 0;
+  }, [pathname]);
+  return (
+    <div className="dndev-cockpit-pane dndev-cockpit-pane--content">
+      <div className="dndev-cockpit-toolbar">
+        <div className="dndev-cockpit-toolbar-start">
+          <ThemeToggle display="compact" />
+          <LanguageSelector display="compact" />
+          <GoTo className="dndev-cockpit-goto" />
+        </div>
+        <OverlaySlotTarget />
+        <div className="dndev-cockpit-toolbar-end">
+          <ModeToggle />
+        </div>
+      </div>
+      <div ref={scrollRef} className="dndev-cockpit-scroll">
+        {children}
+      </div>
+    </div>
+  );
+}
+// ============================================================================
+// LAYOUT PRESETS
+// ============================================================================
+type LayoutPreset = 'bottom-bar' | 'horizontal';
+const LAYOUT_MAP: Record<string, LayoutPreset> = {
+  '/': 'bottom-bar',
+  '/phases': 'horizontal',
+  '/board': 'bottom-bar',
+  '/grill': 'horizontal',
+  '/settings': 'bottom-bar',
+};
+function getPreset(pathname: string): LayoutPreset {
+  if (LAYOUT_MAP[pathname]) return LAYOUT_MAP[pathname];
+  const base = '/' + pathname.split('/').filter(Boolean)[0];
+  return LAYOUT_MAP[base] ?? 'bottom-bar';
+}
+// ============================================================================
+// RESIZE HANDLE
+// ============================================================================
+function ResizeHandle({ direction }: { direction: 'horizontal' | 'vertical' }) {
+  return (
+    <Separator
+      className={`dndev-cockpit-handle dndev-cockpit-handle--${direction}`}
+    />
+  );
+}
+// ============================================================================
+// COMPONENT
+// ============================================================================
+interface CockpitLayoutProps {
+  children: ReactNode;
+}
+export function CockpitLayout({ children }: CockpitLayoutProps): ReactNode {
+  const { pathname } = useLocation();
+  const preset = getPreset(pathname);
+  const isFullscreen = useDoNotDashStore((s) => s.isFullscreen);
+  const isExpanded = useDoNotDashStore((s) => s.isExpanded);
+  const terminalPanelRef = usePanelRef();
+  // Sync store isExpanded ↔ panel collapse/expand (bidirectional, loop-safe)
+  useEffect(() => {
+    const panel = terminalPanelRef.current;
+    if (!panel) return;
+    const panelCollapsed = panel.isCollapsed();
+    if (isExpanded && panelCollapsed) panel.expand();
+    else if (!isExpanded && !panelCollapsed) panel.collapse();
+  }, [isExpanded, terminalPanelRef]);
+  // Sync panel collapse/expand → store (handles manual drag past minSize)
+  const syncCollapseToStore = useCallback(() => {
+    const panel = terminalPanelRef.current;
+    if (!panel) return;
+    const collapsed = panel.isCollapsed();
+    const storeExpanded = useDoNotDashStore.getState().isExpanded;
+    if (collapsed && storeExpanded) useDoNotDashStore.getState().setExpanded(false);
+    else if (!collapsed && !storeExpanded) useDoNotDashStore.getState().setExpanded(true);
+  }, [terminalPanelRef]);
+  // GOTCHA: onLayoutChanged fires on initial render. Without debounce:
+  // saveSizes → writes .dndev/dashboard.json → file watcher HMR event → re-render → loop.
+  // 500ms debounce breaks the cycle — initial render fires are swallowed.
+  const saveTimer = useRef<ReturnType<typeof setTimeout>>(null);
+  const saveSizes = useCallback((layout: Layout) => {
+    if (saveTimer.current) clearTimeout(saveTimer.current);
+    saveTimer.current = setTimeout(() => {
+      const sizes = Object.values(layout);
+      useDoNotDashStore.getState().setPanelSizes(pathname, sizes);
+    }, 500);
+  }, [pathname]);
+  // Clean up debounce timer on unmount or pathname change
+  useEffect(() => {
+    return () => {
+      if (saveTimer.current) clearTimeout(saveTimer.current);
+    };
+  }, [pathname]);
+  const direction = preset === 'horizontal' ? 'horizontal' : 'vertical';
+  if (preset === 'horizontal') {
+    return (
+      <OverlaySlotProvider>
+        <div className="dndev-cockpit" data-preset="horizontal" data-fullscreen={isFullscreen || undefined}>
+          <Group
+            orientation="horizontal"
+            onLayoutChanged={saveSizes}
+            id={`cockpit-${pathname}`}
+          >
+            <Panel defaultSize="65%" minSize="30%">
+              <ContentPane>{children}</ContentPane>
+            </Panel>
+            <ResizeHandle direction="vertical" />
+            <Panel
+              defaultSize="35%"
+              minSize="20%"
+              collapsible
+              collapsedSize="34px"
+              panelRef={terminalPanelRef}
+              onResize={syncCollapseToStore}
+            >
+              <div className="dndev-cockpit-pane dndev-cockpit-pane--terminal">
+                <TerminalPanel embedded direction={direction} />
+              </div>
+            </Panel>
+          </Group>
+        </div>
+      </OverlaySlotProvider>
+    );
+  }
+  // bottom-bar (default) — content on top, terminal at bottom, resizable
+  return (
+    <OverlaySlotProvider>
+      <div className="dndev-cockpit" data-preset="bottom-bar" data-fullscreen={isFullscreen || undefined}>
+        <Group
+          orientation="vertical"
+          onLayoutChanged={saveSizes}
+          id={`cockpit-${pathname}`}
+        >
+          <Panel defaultSize="75%" minSize="20%">
+            <ContentPane>{children}</ContentPane>
+          </Panel>
+          <ResizeHandle direction="horizontal" />
+          <Panel
+            defaultSize="25%"
+            minSize="80px"
+            collapsible
+            collapsedSize="34px"
+            panelRef={terminalPanelRef}
+            onResize={syncCollapseToStore}
+          >
+            <div className="dndev-cockpit-pane dndev-cockpit-pane--terminal">
+              <TerminalPanel embedded direction={direction} />
+            </div>
+          </Panel>
+        </Group>
+      </div>
+    </OverlaySlotProvider>
+  );
+}