@decantr/content 3.8.0

package/shells/sidebar-main.json

@@ -0,0 +1,175 @@
+{
+  "id": "sidebar-main",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Sidebar + Main",
+  "description": "Responsive sidebar shell with a desktop split layout, a compact sticky header, and an overlay drawer below the md breakpoint. Used by dashboards, account workspaces, and admin operations surfaces.",
+  "layout": "grid",
+  "atoms": "_grid _h[100vh]",
+  "config": {
+    "regions": [
+      "header",
+      "nav",
+      "body"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "nav",
+          "header"
+        ],
+        [
+          "nav",
+          "body"
+        ]
+      ]
+    },
+    "nav": {
+      "position": "left",
+      "width": "240px",
+      "collapseTo": "64px",
+      "collapseBelow": "md"
+    },
+    "header": {
+      "height": "52px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": true
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": [
+        "left",
+        "right",
+        "top"
+      ],
+      "modes": [
+        "full",
+        "rail",
+        "hidden"
+      ]
+    },
+    "header": {
+      "toggleable": true,
+      "positions": [
+        "viewport",
+        "body"
+      ]
+    },
+    "footer": {
+      "toggleable": true
+    },
+    "aside": {
+      "toggleable": true
+    },
+    "sizing": {
+      "sidebarWidth": {
+        "min": 48,
+        "max": 400,
+        "default": 240
+      },
+      "headerHeight": {
+        "min": 36,
+        "max": 80,
+        "default": 52
+      },
+      "asideWidth": {
+        "min": 200,
+        "max": 480,
+        "default": 280
+      }
+    }
+  },
+  "guidance": {
+    "hotkeys": "Navigation hotkeys defined in the essence are keyboard shortcuts. Implement as useEffect keydown event listeners \u2014 do NOT render hotkey text in the sidebar UI.",
+    "collapse": "Sidebar collapse toggle should be integrated into the sidebar header area (next to the brand/logo), not floating at the bottom of the sidebar.",
+    "collapsed_brand": "When the sidebar collapses to a rail, the header should behave like a compact rail control state, not like a cramped mini brand lockup. Prefer centering the collapse/expand control and omitting extra brand copy or stray decorative marks if they do not fit cleanly.",
+    "mobile_drawer": "Below the md breakpoint, the sidebar leaves the permanent split layout and becomes an overlay drawer. Use a scrim, Escape handling, and a header toggle. The closed drawer must not consume layout width.",
+    "workspace_state": "Authenticated shells should derive identity, tier, entitlements, active organization, and admin capability from one shared workspace state. Do not let sidebar navigation, footer identity, billing state, and page-level access drift through separate fetches or local fallbacks.",
+    "nav_visibility": "Sidebar navigation visibility should reflect actual capabilities, not generic route presence. Team, governance, private-registry, and admin groups appear only when the active workspace state says the user can reach them.",
+    "shell_spacing": "Header, body, sidebar, and footer all share one inset rhythm. Use a tighter shell inset on mobile and the full comfortable inset on tablet/desktop instead of page-local padding overrides.",
+    "viewport_lock": "The authenticated shell should stay locked to the viewport height. The main body region owns page scrolling, while the sidebar keeps its footer and account controls pinned within the shell instead of letting them drift to the bottom of the full document.",
+    "breadcrumbs": "For nested routes (e.g., /resource/:id), show a breadcrumb trail above the page heading inside the main content area. On narrow widths, truncate gracefully rather than wrapping into a second shell row.",
+    "section_labels": "Dashboard section labels use d-label[data-anchor] for accent-bordered headers with density-responsive spacing.",
+    "section_label_treatment": "d-label[data-anchor]",
+    "section_density": "compact",
+    "empty_states": "When a section has zero data, show a centered empty state: 48px muted icon + descriptive message + optional CTA button.",
+    "page_transitions": "Apply the entrance-fade class (if generated) to the main content area for smooth page transitions."
+  },
+  "internal_layout": {
+    "root": {
+      "display": "flex",
+      "direction": "row",
+      "height": "100vh",
+      "atoms": "_flex _h[100vh] _overhidden"
+    },
+    "sidebar": {
+      "width": "240px",
+      "collapsed_width": "64px",
+      "collapse_breakpoint": "md",
+      "mobile_behavior": "Overlay drawer below md. Closed state occupies no layout width. Open state uses a fixed panel + scrim.",
+      "position": "left",
+      "direction": "column",
+      "border": "right",
+      "background": "var(--d-surface)",
+      "atoms": "_flex _col _br[1px_solid_var(--d-border)] _minh0",
+      "brand": {
+        "height": "52px",
+        "display": "flex",
+        "align": "center",
+        "padding": "0 1rem",
+        "border": "bottom",
+        "content": "Logo/brand + collapse toggle. Collapsed rail: center the toggle and omit extra brand copy if it no longer fits cleanly."
+      },
+      "nav": {
+        "flex": "1",
+        "overflow_y": "auto",
+        "padding": "0.5rem",
+        "group_gap": "0.5rem",
+        "group_header_treatment": "d-label",
+        "item_treatment": "d-interactive[ghost]",
+        "item_padding": "0.375rem 0.75rem",
+        "item_gap": "2px",
+        "item_content": "icon (16px) + label text. Collapsed: icon only, text hidden.",
+        "note": "This is the sidebar's only scroll region. The footer remains pinned below it."
+      },
+      "footer": {
+        "border": "top",
+        "padding": "0.5rem",
+        "position_within": "bottom (mt-auto)",
+        "content": "Workspace identity summary + sign-out control. The label should reuse the shared workspace identity and tier presentation rather than recomputing a separate fallback string inside the sidebar."
+      }
+    },
+    "main_wrapper": {
+      "flex": "1",
+      "direction": "column",
+      "overflow": "hidden",
+      "atoms": "_flex _col _flex1 _minh0 _overhidden"
+    },
+    "header": {
+      "height": "52px",
+      "display": "flex",
+      "align": "center",
+      "justify": "space-between",
+      "padding": "0 clamp(1rem, 2vw, 1.5rem)",
+      "border": "bottom",
+      "left_content": "Breadcrumb \u2014 omit segment when it equals page title",
+      "right_content": "Theme toggle (sun/moon icon) + Search/command trigger + mobile navigation toggle when the sidebar is in drawer mode. Theme toggle toggles light/dark class on html element.",
+      "button_sizing": "Buttons in the header use compact sizing: py-1.5 px-3 text-sm (~32px tall). The header is a tight 52px bar \u2014 default d-interactive padding is too large here."
+    },
+    "body": {
+      "flex": "1",
+      "overflow_y": "auto",
+      "padding": "clamp(1rem, 2vw, 1.5rem)",
+      "atoms": "_flex1 _minh0 _overauto _p6",
+      "note": "Sole scroll container. Page content renders directly here. No wrapper div around outlet. Inner sections should inherit the shell rhythm rather than redefining page padding."
+    }
+  },
+  "code": {
+    "imports": "Target-specific imports vary. Translate the internal_layout contract into your framework's sidebar state, compact header controls, drawer behavior, and sole-scroll body region.",
+    "example": "SidebarMainShell(root) -> Sidebar(brand, nav groups, footer, collapse or drawer state) + Header(breadcrumbs, compact actions, mobile toggle) + Body(route outlet as sole scroll container)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}

package/shells/sidebar-right.json

@@ -0,0 +1,128 @@
+{
+  "id": "sidebar-right",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Right Sidebar",
+  "description": "Main content with a right-side navigation panel. Useful for settings, documentation sidebars, or inspector layouts.",
+  "layout": "grid",
+  "atoms": "_grid _h[100vh]",
+  "config": {
+    "regions": [
+      "header",
+      "nav",
+      "body"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "header",
+          "nav"
+        ],
+        [
+          "body",
+          "nav"
+        ]
+      ]
+    },
+    "nav": {
+      "position": "right",
+      "width": "240px",
+      "collapseTo": "64px",
+      "collapseBelow": "md"
+    },
+    "header": {
+      "height": "52px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": true
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": [
+        "left",
+        "right",
+        "top"
+      ],
+      "modes": [
+        "full",
+        "rail",
+        "hidden"
+      ]
+    },
+    "header": {
+      "toggleable": true
+    },
+    "footer": {
+      "toggleable": true
+    },
+    "sizing": {
+      "sidebarWidth": {
+        "min": 48,
+        "max": 400,
+        "default": 240
+      },
+      "headerHeight": {
+        "min": 36,
+        "max": 80,
+        "default": 52
+      }
+    }
+  },
+  "internal_layout": {
+    "root": {
+      "display": "grid",
+      "height": "100vh",
+      "grid_template": "columns: 1fr sidebar; rows: 52px 1fr",
+      "atoms": "_grid _h[100vh]"
+    },
+    "header": {
+      "height": "52px",
+      "display": "flex",
+      "align": "center",
+      "justify": "space-between",
+      "padding": "0 1.5rem",
+      "border": "bottom",
+      "left_content": "Brand / page title",
+      "right_content": "Actions / search",
+      "button_sizing": "Buttons in the header use compact sizing: py-1.5 px-3 text-sm (~32px tall). The header is a tight 52px bar \u2014 default d-interactive padding is too large here."
+    },
+    "body": {
+      "flex": "1",
+      "overflow_y": "auto",
+      "padding": "1.5rem",
+      "note": "Main scroll container. Content area is on the left side."
+    },
+    "sidebar": {
+      "width": "240px",
+      "collapsed_width": "64px",
+      "collapse_breakpoint": "md",
+      "position": "right",
+      "direction": "column",
+      "border": "left",
+      "background": "var(--d-surface)",
+      "grid_span": "row 1/3",
+      "atoms": "_flex _col _borderL",
+      "nav": {
+        "flex": "1",
+        "overflow_y": "auto",
+        "padding": "0.5rem",
+        "item_treatment": "d-interactive[ghost]",
+        "item_padding": "0.375rem 0.75rem",
+        "item_gap": "2px",
+        "item_content": "icon + label text. Collapsed: icon only."
+      },
+      "note": "Right-positioned navigation panel. Useful for settings nav, docs sidebar, or inspector."
+    }
+  },
+  "guidance": {
+    "section_label_treatment": "d-label[data-anchor]",
+    "section_density": "compact"
+  },
+  "code": {
+    "imports": "import { Shell } from 'decantr/components';",
+    "example": "Shell({ config: 'sidebar-right' },\n  Shell.Header({}, headerContent),\n  Shell.Nav({}, navContent),\n  Shell.Body({}, mainContent)\n)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}

package/shells/terminal-split.json

@@ -0,0 +1,95 @@
+{
+  "id": "terminal-split",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Terminal Split",
+  "description": "Terminal-style layout with status bar, resizable split panes, and hotkey bar. Optimized for CLI tool interfaces with monospace typography and ASCII borders.",
+  "layout": "grid",
+  "atoms": "_grid _h[100vh] _mono _bgblack",
+  "config": {
+    "regions": [
+      "status-bar",
+      "body",
+      "hotkey-bar"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "status-bar"
+        ],
+        [
+          "body"
+        ],
+        [
+          "hotkey-bar"
+        ]
+      ]
+    },
+    "status-bar": {
+      "height": "24px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": false,
+      "splitPanes": true,
+      "resizable": true
+    },
+    "hotkey-bar": {
+      "height": "28px",
+      "sticky": true
+    }
+  },
+  "configurable": {
+    "body": {
+      "layouts": [
+        "horizontal",
+        "vertical",
+        "quad"
+      ],
+      "minPaneSize": 100
+    },
+    "status-bar": {
+      "toggleable": true,
+      "positions": [
+        "top",
+        "bottom"
+      ]
+    },
+    "hotkey-bar": {
+      "toggleable": true
+    },
+    "sizing": {
+      "statusBarHeight": {
+        "min": 20,
+        "max": 32,
+        "default": 24
+      },
+      "hotkeyBarHeight": {
+        "min": 24,
+        "max": 40,
+        "default": 28
+      }
+    }
+  },
+  "internal_layout": {
+    "root": { "display": "grid", "height": "100vh", "grid_template": "rows: 24px 1fr 28px", "font": "monospace", "background": "var(--d-black)", "color": "var(--d-green)", "atoms": "_grid _h[100vh] _mono _bgblack _fggreen" },
+    "status_bar": { "height": "24px", "display": "flex", "align": "center", "justify": "space-between", "padding": "0 0.5rem", "background": "var(--d-green)", "color": "var(--d-black)", "font_size": "sm", "sticky": true, "left_content": "App name + version", "right_content": "Status indicator" },
+    "body": { "display": "flex", "overflow": "hidden", "padding": "0.5rem",
+      "pane_left": { "flex": "1", "overflow_y": "auto", "padding": "0.5rem", "note": "Left split pane. Resizable width via drag handle." },
+      "divider": { "width": "4px", "cursor": "col-resize", "background": "var(--d-border)", "note": "Drag handle between panes." },
+      "pane_right": { "flex": "1", "overflow_y": "auto", "padding": "0.5rem", "note": "Right split pane. Resizable width via drag handle." },
+      "note": "Split pane body. Supports horizontal, vertical, and quad layouts. Min pane size 100px."
+    },
+    "hotkey_bar": { "height": "28px", "display": "flex", "align": "center", "gap": "1rem", "padding": "0 0.5rem", "background": "var(--d-surface)", "font_size": "sm", "sticky": true, "atoms": "_flex _aic _gap4 _px2 _bgmuted _textsm", "note": "Keyboard shortcut hints. Each item: kbd badge + label." }
+  },
+  "guidance": {
+    "section_label_treatment": "d-label",
+    "section_density": "compact",
+    "shell_spacing": "Terminal-split owns the status bar, split pane rhythm, resize dividers, and hotkey footer. Route content should live directly inside the panes with minimal internal guttering rather than introducing card chrome or extra scroll containers that fight the shell."
+  },
+  "code": {
+    "imports": "Target-specific imports vary. Translate the internal_layout contract into your framework's status bar, resizable split panes, and hotkey footer display.",
+    "example": "TerminalSplitShell(root) -> StatusBar(app name, version, status) + SplitBody(resizable panes) + HotkeyFooter(bound controls and shortcuts)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}

package/shells/three-column-browser.json

@@ -0,0 +1,215 @@
+{
+  "id": "three-column-browser",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Three-Column Browser",
+  "description": "Three-column browse layout with navigation tree, item list, and detail preview. Classic mail/file-browser pattern. Used for email clients, file managers, documentation browsers, and any master-detail-detail interface.",
+  "layout": "grid",
+  "atoms": "_grid _h[100vh]",
+  "config": {
+    "regions": [
+      "header",
+      "nav",
+      "list",
+      "detail"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "header",
+          "header",
+          "header"
+        ],
+        [
+          "nav",
+          "list",
+          "detail"
+        ]
+      ]
+    },
+    "header": {
+      "height": "52px",
+      "sticky": true
+    },
+    "nav": {
+      "position": "left",
+      "width": "220px",
+      "collapseTo": "56px",
+      "collapseBelow": "lg"
+    },
+    "list": {
+      "width": "320px",
+      "scroll": true
+    },
+    "detail": {
+      "scroll": true
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": [
+        "left"
+      ],
+      "modes": [
+        "full",
+        "rail",
+        "hidden"
+      ]
+    },
+    "header": {
+      "toggleable": true
+    },
+    "sizing": {
+      "navWidth": {
+        "min": 180,
+        "max": 300,
+        "default": 220
+      },
+      "listWidth": {
+        "min": 240,
+        "max": 400,
+        "default": 320
+      },
+      "headerHeight": {
+        "min": 44,
+        "max": 64,
+        "default": 52
+      }
+    }
+  },
+  "internal_layout": {
+    "root": {
+      "display": "grid",
+      "height": "100vh",
+      "grid_template": "columns: nav list 1fr; rows: 52px 1fr",
+      "atoms": "_grid _h[100vh]"
+    },
+    "header": {
+      "height": "52px",
+      "display": "flex",
+      "align": "center",
+      "justify": "space-between",
+      "padding": "0 1rem",
+      "border": "bottom",
+      "background": "var(--d-bg)",
+      "grid_span": "column 1/4",
+      "left_content": "App logo/title + search bar",
+      "right_content": "Filter controls + settings + user avatar"
+    },
+    "nav": {
+      "width": "220px",
+      "min_width": "180px",
+      "collapsed_width": "56px",
+      "collapse_breakpoint": "lg",
+      "direction": "column",
+      "border": "right",
+      "background": "var(--d-surface)",
+      "overflow_y": "auto",
+      "padding": "0.5rem",
+      "atoms": "_flex _col _borderR _bgmuted _overflow[auto] _p2",
+      "header": {
+        "display": "flex",
+        "align": "center",
+        "justify": "space-between",
+        "padding": "0.75rem",
+        "border": "bottom",
+        "content": "Folders heading + collapse toggle"
+      },
+      "tree": {
+        "flex": "1",
+        "overflow_y": "auto",
+        "padding": "0.5rem",
+        "item_gap": "2px",
+        "item_padding": "0.375rem 0.75rem",
+        "item_content": "Folder/category icon + label. Supports nested tree with expand/collapse chevrons. Collapsed nav: icon only.",
+        "item_treatment": "d-interactive[ghost]"
+      },
+      "footer": {
+        "border": "top",
+        "padding": "0.5rem",
+        "content": "Add folder/category button"
+      },
+      "note": "Left navigation tree. Holds folder/category structure. Selecting an item populates the list column. Collapses to icon rail on tablet."
+    },
+    "list": {
+      "width": "320px",
+      "min_width": "240px",
+      "direction": "column",
+      "border": "right",
+      "overflow_y": "auto",
+      "atoms": "_flex _col _borderR _overflow[auto]",
+      "header": {
+        "display": "flex",
+        "align": "center",
+        "justify": "space-between",
+        "padding": "0.75rem 1rem",
+        "border": "bottom",
+        "content": "Selected folder name + item count + sort control"
+      },
+      "items": {
+        "flex": "1",
+        "overflow_y": "auto",
+        "item_gap": "0",
+        "item_padding": "0.75rem 1rem",
+        "item_border": "bottom",
+        "item_content": "Item title (bold) + subtitle/preview (truncated, muted) + metadata (date, badge). Selected item has active background.",
+        "item_treatment": "d-interactive[ghost] with active state highlight"
+      },
+      "note": "Middle item list. Shows items for the selected nav folder. Selecting an item populates the detail column. Items highlight on selection."
+    },
+    "detail": {
+      "flex": "1",
+      "direction": "column",
+      "overflow_y": "auto",
+      "padding": "1.5rem",
+      "background": "var(--d-bg)",
+      "atoms": "_flex _col _flex1 _overflow[auto] _p6",
+      "header": {
+        "display": "flex",
+        "align": "center",
+        "justify": "space-between",
+        "padding": "0 0 1.5rem 0",
+        "border": "bottom",
+        "content": "Item title + action buttons (reply, archive, delete, etc.)"
+      },
+      "body": {
+        "flex": "1",
+        "overflow_y": "auto",
+        "padding": "1.5rem 0",
+        "note": "Full content of the selected item."
+      },
+      "empty_state": {
+        "display": "flex",
+        "align": "center",
+        "justify": "center",
+        "content": "Placeholder illustration + 'Select an item to view' message",
+        "note": "Shown when no item is selected in the list."
+      },
+      "note": "Right detail preview. Shows full content of the selected list item. Scrolls independently."
+    },
+    "responsive": {
+      "desktop": "Three columns visible simultaneously, all scroll independently",
+      "tablet": "Nav collapses to icon rail (56px), list and detail remain visible",
+      "mobile": "Single column with back navigation. Nav as overlay drawer, list as primary view, detail as pushed view with back button"
+    }
+  },
+  "guidance": {
+    "nav_purpose": "Holds tree/folder structure for top-level navigation categories",
+    "list_purpose": "Shows items belonging to the selected nav folder, acts as a scannable index",
+    "detail_purpose": "Shows full content of the selected list item with actions",
+    "selection_flow": "Nav folder -> List populates -> List item -> Detail populates",
+    "independent_scroll": "All three columns scroll independently to maintain context across panels",
+    "list_highlight": "Selected list item should have a visually distinct active/selected state",
+    "empty_detail": "When no list item is selected, detail shows a centered empty-state placeholder",
+    "keyboard_nav": "Arrow keys navigate list items, Enter opens in detail, Escape goes back to list on mobile",
+    "mobile_pattern": "On mobile, columns become stacked views with back-navigation between them",
+    "shell_spacing": "The shell owns panel sizing and inter-column rhythm. Route content should fill the declared columns rather than wrapping itself in additional max-width containers.",
+    "section_label_treatment": "d-label[data-anchor]",
+    "section_density": "compact"
+  },
+  "code": {
+    "imports": "Target-specific imports vary. Translate the internal_layout contract into your framework's left tree nav, middle item list, right detail panel, and shared browser header.",
+    "example": "ThreeColumnBrowserShell(root) -> Header(search, sort, user actions) + TreeNav(folder hierarchy) + ItemList(selected collection) + DetailPane(selected document or API entry)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}