@decantr/content 3.8.0

package/shells/top-nav-footer.json

@@ -0,0 +1,114 @@
+{
+  "id": "top-nav-footer",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Top Nav + Footer",
+  "description": "Horizontal nav with main content and a persistent footer. Used for marketing sites, documentation with ToC footer.",
+  "layout": "stack",
+  "atoms": "_flex _col _h[100vh]",
+  "config": {
+    "regions": [
+      "header",
+      "body",
+      "footer"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "header"
+        ],
+        [
+          "body"
+        ],
+        [
+          "footer"
+        ]
+      ]
+    },
+    "nav": {
+      "position": "top"
+    },
+    "header": {
+      "height": "52px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": true
+    },
+    "footer": {
+      "height": "auto",
+      "sticky": false
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": [
+        "top",
+        "left"
+      ],
+      "modes": [
+        "full"
+      ]
+    },
+    "header": {
+      "toggleable": true
+    },
+    "footer": {
+      "toggleable": true
+    },
+    "sizing": {
+      "headerHeight": {
+        "min": 36,
+        "max": 80,
+        "default": 52
+      }
+    }
+  },
+  "guidance": {
+    "section_spacing": "Marketing sections use spacious density. Each d-section uses full --d-section-py padding.",
+    "section_labels": "Section overline labels use d-label for uppercase, accent-colored headers with density-responsive spacing.",
+    "section_label_treatment": "d-label",
+    "section_density": "comfortable",
+    "cta_sections": "CTA sections at the bottom of marketing pages should stand out visually \u2014 subtle background gradient or glass effect, not just a plain card.",
+    "shell_spacing": "Header, body sections, and footer should feel like one coherent public shell. Let the shell own horizontal inset rhythm and footer spacing instead of layering extra page-local wrappers."
+  },
+  "internal_layout": {
+    "root": {
+      "display": "flex",
+      "direction": "column",
+      "min_height": "100vh",
+      "atoms": "_flex _col _minh[100vh]"
+    },
+    "header": {
+      "height": "52px",
+      "display": "flex",
+      "align": "center",
+      "justify": "space-between",
+      "padding": "0 1.5rem",
+      "border": "bottom",
+      "sticky": true,
+      "z_index": "10",
+      "background": "var(--d-bg)",
+      "left_content": "Brand/logo",
+      "center_content": "Nav links \u2014 flex with gap 1.5rem. Hidden below md, visible above.",
+      "right_content": "CTA button + mobile hamburger. Hamburger ONLY below md breakpoint.",
+      "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",
+      "padding": "none",
+      "note": "Full-width sections stack vertically. Each section uses d-section with --d-section-py. Body has NO padding \u2014 sections own their spacing. Natural document scroll."
+    },
+    "footer": {
+      "border": "top",
+      "padding": "2rem 1.5rem",
+      "position_within": "bottom (mt-auto for short pages)",
+      "note": "Multi-column footer with link groups and legal."
+    }
+  },
+  "code": {
+    "imports": "import { Shell } from 'decantr/components';",
+    "example": "Shell({ config: 'top-nav-footer' },\n  Shell.Header({}, headerContent),\n  Shell.Nav({}, navItems),\n  Shell.Body({}, mainContent),\n  Shell.Footer({}, footerContent)\n)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}

package/shells/top-nav-main.json

@@ -0,0 +1,103 @@
+{
+  "id": "top-nav-main",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Top Nav + Main",
+  "description": "Horizontal navigation shell with a compact sticky header, shared content insets, and a curated page-width rhythm. Used by public browsing, editorial catalog pages, and marketing-style registry surfaces.",
+  "layout": "stack",
+  "atoms": "_flex _col _h[100vh]",
+  "config": {
+    "regions": [
+      "header",
+      "body"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "header"
+        ],
+        [
+          "body"
+        ]
+      ]
+    },
+    "nav": {
+      "position": "top"
+    },
+    "header": {
+      "height": "52px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": true
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": [
+        "top",
+        "left"
+      ],
+      "modes": [
+        "full"
+      ]
+    },
+    "header": {
+      "toggleable": true
+    },
+    "footer": {
+      "toggleable": true
+    },
+    "sizing": {
+      "headerHeight": {
+        "min": 36,
+        "max": 80,
+        "default": 52
+      }
+    }
+  },
+  "internal_layout": {
+    "root": {
+      "display": "flex",
+      "direction": "column",
+      "height": "100vh",
+      "atoms": "_flex _col _h[100vh]"
+    },
+    "header": {
+      "height": "52px",
+      "display": "flex",
+      "align": "center",
+      "justify": "space-between",
+      "padding": "0 clamp(1rem, 2vw, 1.5rem)",
+      "border": "bottom",
+      "background": "var(--d-bg)",
+      "sticky": true,
+      "left_content": "Brand/logo link",
+      "center_content": "Nav links \u2014 flex with gap 1.5rem on tablet/desktop and gracefully reduced clutter on narrow widths",
+      "right_content": "Theme toggle (sun/moon icon, toggles light/dark class on html element) + Search trigger + CTA button or user avatar. Theme toggle uses a simple icon button \u2014 no dropdown.",
+      "button_sizing": "Buttons and CTAs in the header must use compact sizing: py-1.5 px-4 text-sm (not the default d-interactive padding). The header is 52px \u2014 buttons should be ~32px tall, not 40px+.",
+      "nav_links": "Nav links use text-sm font-medium with no background. Hover: text color transitions to primary. Active: font-semibold or underline-offset-4. Keep the visible label to the route name itself — if hotkeys are declared in the essence, treat them as keyboard bindings or command-palette hints, not inline nav text."
+    },
+    "body": {
+      "flex": "1",
+      "direction": "column",
+      "gap": "1rem",
+      "overflow_y": "auto",
+      "padding": "clamp(1rem, 2vw, 1.5rem)",
+      "atoms": "_flex _col _gap4 _p6 _overflow[auto] _flex1",
+      "note": "Scrollable content area below the nav bar. Public registry pages should use a consistent page max-width rhythm inside this region instead of page-local guesses. When multiple editorial sections are stacked in the public registry shell, the shell owns inter-section spacing; do not stack shell gap on top of full default d-section padding."
+    }
+  },
+  "guidance": {
+    "section_label_treatment": "d-label",
+    "section_density": "comfortable",
+    "shell_spacing": "Header, body, and footer share the same horizontal inset rhythm. Public pages should feel like one shell system, not separate handcrafted blocks. Editorial registry surfaces should use a compact shell-owned section rhythm rather than layering shell gap, d-section padding, and sibling section margins all at once.",
+    "mobile_nav": "Below md, preserve brand + essential actions first and collapse or hide secondary links rather than squeezing the whole nav row.",
+    "hotkeys": "When navigation hotkeys are declared in the essence, implement them as keyboard shortcuts or command-palette affordances. Do not append hotkey text to the persistent top navigation unless the route contract explicitly asks for visible shortcut hints."
+  },
+  "code": {
+    "imports": "Target-specific imports vary. Translate the internal_layout contract into your framework's sticky top navigation, compact action cluster, and shared body inset rhythm.",
+    "example": "TopNavMainShell(root) -> Header(brand, nav links, compact actions) + Body(shared insets, sole scroll container, route content)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}

package/shells/top-nav-sidebar.json

@@ -0,0 +1,130 @@
+{
+  "id": "top-nav-sidebar",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Top Nav + Sidebar",
+  "description": "Full-width header spanning both columns, with left sidebar navigation below. Combines top branding with sidebar navigation depth.",
+  "layout": "grid",
+  "atoms": "_grid _h[100vh]",
+  "config": {
+    "regions": [
+      "header",
+      "nav",
+      "body"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "header",
+          "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"
+      ],
+      "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: sidebar 1fr; rows: 52px 1fr",
+      "atoms": "_grid _h[100vh]"
+    },
+    "header": {
+      "height": "52px",
+      "display": "flex",
+      "align": "center",
+      "justify": "space-between",
+      "padding": "0 1.5rem",
+      "border": "bottom",
+      "background": "var(--d-bg)",
+      "sticky": true,
+      "grid_span": "column 1/3",
+      "left_content": "Brand/logo",
+      "right_content": "Search + user actions",
+      "note": "Full-width header spanning both sidebar and body columns.",
+      "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."
+    },
+    "sidebar": {
+      "width": "240px",
+      "collapsed_width": "64px",
+      "collapse_breakpoint": "md",
+      "position": "left",
+      "direction": "column",
+      "border": "right",
+      "background": "var(--d-surface)",
+      "atoms": "_flex _col _borderR",
+      "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"
+      },
+      "note": "Sidebar sits below the full-width header. Contains navigation depth."
+    },
+    "body": {
+      "flex": "1",
+      "overflow_y": "auto",
+      "padding": "1.5rem",
+      "note": "Main scroll container for primary content."
+    }
+  },
+  "guidance": {
+    "section_label_treatment": "d-label[data-anchor]",
+    "section_density": "compact"
+  },
+  "code": {
+    "imports": "import { Shell } from 'decantr/components';",
+    "example": "Shell({ config: 'top-nav-sidebar' },\n  Shell.Header({}, headerContent),\n  Shell.Nav({}, sidebarContent),\n  Shell.Body({}, mainContent)\n)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}

package/shells/workspace-aside.json

@@ -0,0 +1,181 @@
+{
+  "id": "workspace-aside",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Workspace Aside",
+  "description": "Three-column layout for collaborative editing with page tree navigation, document editor body, and comment/activity sidebar. Used by document-editor archetype for real-time collaboration.",
+  "layout": "grid",
+  "atoms": "_grid _h[100vh]",
+  "config": {
+    "regions": [
+      "header",
+      "nav",
+      "body",
+      "aside"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "nav",
+          "header",
+          "header"
+        ],
+        [
+          "nav",
+          "body",
+          "aside"
+        ]
+      ]
+    },
+    "nav": {
+      "position": "left",
+      "width": "240px",
+      "collapseTo": "48px",
+      "collapseBelow": "lg"
+    },
+    "header": {
+      "height": "52px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": true,
+      "editorMode": true
+    },
+    "aside": {
+      "width": "280px",
+      "collapsible": true,
+      "collapseBelow": "xl"
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": [
+        "left"
+      ],
+      "modes": [
+        "full",
+        "rail",
+        "hidden"
+      ]
+    },
+    "header": {
+      "toggleable": true
+    },
+    "aside": {
+      "toggleable": true
+    },
+    "sizing": {
+      "sidebarWidth": {
+        "min": 48,
+        "max": 320,
+        "default": 240
+      },
+      "headerHeight": {
+        "min": 44,
+        "max": 64,
+        "default": 52
+      },
+      "asideWidth": {
+        "min": 240,
+        "max": 400,
+        "default": 280
+      }
+    }
+  },
+  "internal_layout": {
+    "root": {
+      "display": "grid",
+      "height": "100vh",
+      "grid_template": "columns: sidebar 1fr aside; rows: 52px 1fr",
+      "atoms": "_grid _h[100vh]"
+    },
+    "sidebar": {
+      "width": "240px",
+      "collapsed_width": "48px",
+      "collapse_breakpoint": "lg",
+      "position": "left",
+      "direction": "column",
+      "border": "right",
+      "background": "var(--d-surface)",
+      "grid_span": "row 1/3",
+      "atoms": "_flex _col _bgmuted _borderR",
+      "brand": {
+        "height": "52px",
+        "display": "flex",
+        "align": "center",
+        "justify": "space-between",
+        "padding": "0.75rem",
+        "border": "bottom",
+        "content": "Pages heading + collapse toggle"
+      },
+      "nav": {
+        "flex": "1",
+        "overflow_y": "auto",
+        "padding": "0.5rem",
+        "item_gap": "0.25rem",
+        "item_padding": "0.5rem",
+        "item_content": "Page icon (emoji) + page title (truncated). Collapsed: icon only."
+      },
+      "footer": {
+        "border": "top",
+        "padding": "0.5rem",
+        "content": "New Page button (full-width outline)"
+      }
+    },
+    "header": {
+      "height": "52px",
+      "display": "flex",
+      "align": "center",
+      "justify": "space-between",
+      "padding": "0 1.5rem",
+      "border": "bottom",
+      "background": "var(--d-bg)",
+      "grid_span": "column 2/4",
+      "left_content": "Document title",
+      "right_content": "Share button + collaborator avatars (stacked, max 4 + overflow count) + notifications + user avatar",
+      "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",
+      "direction": "column",
+      "overflow_y": "auto",
+      "padding": "2rem",
+      "atoms": "_flex _col _overflow[auto] _p8",
+      "note": "Document editor area. Scrollable. Editor mode enabled."
+    },
+    "aside": {
+      "width": "280px",
+      "collapsible": true,
+      "collapse_breakpoint": "xl",
+      "direction": "column",
+      "border": "left",
+      "background": "var(--d-bg)",
+      "atoms": "_flex _col _borderL _bgbg _overflow[auto]",
+      "header": {
+        "display": "flex",
+        "align": "center",
+        "justify": "space-between",
+        "padding": "1rem",
+        "border": "bottom",
+        "content": "Comments label + close button"
+      },
+      "body": {
+        "flex": "1",
+        "overflow_y": "auto",
+        "padding": "1rem",
+        "note": "Comment/activity thread."
+      },
+      "note": "Right comment/activity sidebar. Toggleable. When collapsed, shows a floating message-square icon button to reopen."
+    }
+  },
+  "guidance": {
+    "section_label_treatment": "d-label[data-anchor]",
+    "section_density": "compact",
+    "shell_spacing": "Workspace-aside owns the page-tree navigation width, the shared editor header, the main editor canvas spacing, and the right collaboration rail. Route content should not add extra full-page wrappers or duplicate shell padding; let the document body and collaboration aside stay distinct but coordinated."
+  },
+  "code": {
+    "imports": "Target-specific imports vary. Translate the internal_layout contract into your framework's page tree nav, shared editor header, primary work region, and optional collaboration aside.",
+    "example": "WorkspaceAsideShell(root) -> NavTree(collapse or rail state) + Header(document title, share controls, collaborator stack) + Body(primary workspace) + Aside(comments or activity, collapsible)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}