@decantr/content 3.8.0

package/shells/centered.json

@@ -0,0 +1,49 @@
+{
+  "id": "centered",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Centered",
+  "description": "Centered card on a background. Used for auth flows (login, register, forgot password) across all archetypes.",
+  "layout": "center",
+  "atoms": "_flex _aic _jcc _h[100vh] _bgmuted",
+  "config": {
+    "regions": [
+      "body"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "body"
+        ]
+      ]
+    },
+    "nav": {
+      "position": "left",
+      "defaultState": "hidden"
+    },
+    "body": {
+      "scroll": false
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": [],
+      "modes": []
+    },
+    "sizing": {}
+  },
+  "guidance": {
+    "max_width": "Centered content should be constrained to max-width: 28rem (448px) for auth forms, 36rem (576px) for wider content.",
+    "vertical_centering": "Center the content card vertically using min-height: 100dvh with flexbox centering.",
+    "shell_spacing": "Centered shell owns viewport centering, outer padding, and maximum-width rhythm. Route components should render the card contents only and must not add nested full-height centering wrappers."
+  },
+  "internal_layout": {
+    "root": { "display": "flex", "align": "center", "justify": "center", "min_height": "100vh", "background": "var(--d-bg)", "atoms": "_flex _aic _jcc _minh[100vh]" },
+    "body": { "width": "100%", "max_width_auth": "28rem", "max_width_wide": "36rem", "padding": "1.5rem", "treatment": "d-surface", "border_radius": "var(--d-radius-lg)", "note": "Single centered card. No sidebar, no header. Auth forms use 28rem, wider content 36rem." }
+  },
+  "code": {
+    "imports": "Target-specific imports vary. Translate the internal_layout contract into your framework's shell wrapper, centered card surface, and route outlet.",
+    "example": "CenteredShell(root) -> Viewport(min-height full, centered content) + CardSurface(max-width auth or wide variant) + RouteContent"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}

package/shells/chat-portal.json

@@ -0,0 +1,153 @@
+{
+  "id": "chat-portal",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Chat Portal",
+  "description": "AI chatbot layout with collapsible conversation sidebar and anchored input. Used by ai-chatbot archetype for chat-first applications.",
+  "layout": "grid",
+  "atoms": "_grid _h[100vh]",
+  "config": {
+    "regions": [
+      "header",
+      "nav",
+      "body"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "nav",
+          "header"
+        ],
+        [
+          "nav",
+          "body"
+        ]
+      ]
+    },
+    "nav": {
+      "position": "left",
+      "width": "280px",
+      "collapseTo": "64px",
+      "collapseBelow": "md"
+    },
+    "header": {
+      "height": "52px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": true,
+      "inputAnchored": true
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": [
+        "left"
+      ],
+      "modes": [
+        "full",
+        "rail",
+        "hidden"
+      ]
+    },
+    "header": {
+      "toggleable": true
+    },
+    "footer": {
+      "toggleable": false
+    },
+    "sizing": {
+      "sidebarWidth": {
+        "min": 64,
+        "max": 320,
+        "default": 280
+      },
+      "headerHeight": {
+        "min": 44,
+        "max": 64,
+        "default": 52
+      }
+    }
+  },
+  "internal_layout": {
+    "root": {
+      "display": "grid",
+      "height": "100vh",
+      "grid_template": "columns: sidebar 1fr; rows: 52px 1fr",
+      "atoms": "_grid _h[100vh]"
+    },
+    "sidebar": {
+      "width": "280px",
+      "collapsed_width": "64px",
+      "collapse_breakpoint": "md",
+      "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": "Conversations heading + collapse toggle"
+      },
+      "nav": {
+        "flex": "1",
+        "overflow_y": "auto",
+        "padding": "0.5rem",
+        "item_gap": "0.25rem",
+        "item_padding": "0.5rem",
+        "item_content": "Avatar (sm) + conversation title (truncated). Collapsed: avatar only."
+      },
+      "footer": {
+        "border": "top",
+        "padding": "0.5rem",
+        "content": "New Chat button (full-width outline)"
+      }
+    },
+    "header": {
+      "height": "52px",
+      "display": "flex",
+      "align": "center",
+      "justify": "space-between",
+      "padding": "0 1.5rem",
+      "border": "bottom",
+      "background": "var(--d-bg)",
+      "left_content": "Chat title",
+      "right_content": "Notifications bell + 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": "hidden",
+      "atoms": "_flex _col _overflow[hidden]",
+      "messages": {
+        "flex": "1",
+        "overflow_y": "auto",
+        "padding": "1.5rem",
+        "note": "Scrollable message list. Messages stack vertically."
+      },
+      "input": {
+        "position": "anchored_bottom",
+        "padding": "1rem 1.5rem",
+        "border": "top",
+        "note": "Chat input anchored to bottom of body. Always visible."
+      }
+    }
+  },
+  "guidance": {
+    "shell_spacing": "Chat portal owns the conversation sidebar width, header inset rhythm, message stream padding, and anchored composer spacing. Route components should not re-solve those frame decisions.",
+    "section_label_treatment": "d-label",
+    "section_density": "compact"
+  },
+  "code": {
+    "imports": "Target-specific imports vary. Translate the internal_layout contract into your framework's conversation list state, compact header, message stream, and anchored chat input.",
+    "example": "ChatPortalShell(root) -> ConversationSidebar(list, collapse or drawer state) + Header(chat title, compact actions) + MessageStream(sole scroll region) + AnchoredInput(always visible at bottom)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}

package/shells/copilot-overlay.json

@@ -0,0 +1,156 @@
+{
+  "id": "copilot-overlay",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Copilot Overlay",
+  "description": "Main content area with a collapsible AI copilot side panel. Right-side drawer overlays or pushes body content. When collapsed, a floating pill button ('Ask AI') remains visible. Used for AI-assisted workflows where copilot can reference body content.",
+  "layout": "grid",
+  "atoms": "_grid _h[100vh]",
+  "config": {
+    "regions": [
+      "header",
+      "body",
+      "copilot"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "header",
+          "header"
+        ],
+        [
+          "body",
+          "copilot"
+        ]
+      ]
+    },
+    "header": {
+      "height": "56px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": true
+    },
+    "copilot": {
+      "width": "360px",
+      "collapseTo": "0px",
+      "position": "right",
+      "mode": "overlay",
+      "trigger": "Cmd+K"
+    }
+  },
+  "configurable": {
+    "copilot": {
+      "modes": [
+        "overlay",
+        "push",
+        "hidden"
+      ]
+    },
+    "header": {
+      "toggleable": true
+    },
+    "sizing": {
+      "copilotWidth": {
+        "min": 280,
+        "max": 480,
+        "default": 360
+      },
+      "headerHeight": {
+        "min": 44,
+        "max": 72,
+        "default": 56
+      }
+    }
+  },
+  "internal_layout": {
+    "root": {
+      "display": "grid",
+      "height": "100vh",
+      "grid_template": "columns: 1fr auto; rows: 56px 1fr",
+      "atoms": "_grid _h[100vh]"
+    },
+    "header": {
+      "height": "56px",
+      "display": "flex",
+      "align": "center",
+      "justify": "space-between",
+      "padding": "0 1rem",
+      "border": "bottom",
+      "background": "var(--d-bg)",
+      "grid_span": "column 1/3",
+      "left_content": "Page title / breadcrumb",
+      "right_content": "Copilot toggle button (Cmd+K) + actions + user avatar"
+    },
+    "body": {
+      "flex": "1",
+      "overflow_y": "auto",
+      "padding": "1.5rem",
+      "atoms": "_flex1 _overflow[auto] _p6",
+      "note": "Main application content area. Scrollable. When copilot mode is 'push', body width shrinks to accommodate panel."
+    },
+    "copilot": {
+      "width": "360px",
+      "collapsed_width": "0px",
+      "height": "100vh",
+      "position": "fixed",
+      "position_anchor": "right",
+      "direction": "column",
+      "border": "left",
+      "background": "var(--d-surface-raised)",
+      "overflow_y": "auto",
+      "padding": "1rem",
+      "atoms": "_flex _col _borderL _bgraised _overflow[auto] _p4",
+      "header": {
+        "display": "flex",
+        "align": "center",
+        "justify": "space-between",
+        "padding": "0.75rem 1rem",
+        "border": "bottom",
+        "content": "Copilot title + close button"
+      },
+      "body": {
+        "flex": "1",
+        "overflow_y": "auto",
+        "padding": "1rem",
+        "note": "AI chat message thread. Messages stack vertically with alternating alignment."
+      },
+      "input": {
+        "position": "anchored_bottom",
+        "padding": "0.75rem 1rem",
+        "border": "top",
+        "note": "Chat input anchored to bottom of copilot panel. Always visible when panel is open."
+      },
+      "collapsed_trigger": {
+        "type": "pill",
+        "label": "Ask AI",
+        "position": "fixed",
+        "position_anchor": "bottom-right",
+        "offset": "1.5rem",
+        "note": "Floating pill button visible when copilot is collapsed. Click or Cmd+K to open."
+      },
+      "note": "Right-side AI copilot drawer. Overlay mode: floats over body. Push mode: shrinks body width. Can reference body content for context-aware assistance."
+    },
+    "responsive": {
+      "desktop": "Side panel overlay on right, body unaffected in overlay mode",
+      "mobile": "Full-screen bottom sheet with drag-to-dismiss handle"
+    }
+  },
+  "guidance": {
+    "copilot_purpose": "Contains AI chat interface for context-aware assistance",
+    "body_purpose": "Contains main application content that copilot can reference",
+    "context_passing": "Copilot can read and reference body content for contextual responses",
+    "toggle_shortcut": "Cmd+K opens/closes copilot panel from anywhere",
+    "collapsed_state": "When closed, only a floating 'Ask AI' pill button is visible at bottom-right",
+    "overlay_vs_push": "Overlay: panel floats over body content. Push: body shrinks to make room for panel",
+    "mobile_behavior": "On mobile, copilot opens as a full-screen bottom sheet instead of a side panel",
+    "shell_spacing": "Copilot-overlay owns the right-panel width, body inset rhythm, and trigger placement. Route content should not add extra wrappers just to compensate for the copilot column.",
+    "section_label_treatment": "d-label",
+    "section_density": "compact"
+  },
+  "code": {
+    "imports": "Target-specific imports vary. Translate the internal_layout contract into your framework's overlay state, keyboard shortcut handling, and docked or floating copilot panel primitives.",
+    "example": "CopilotOverlayShell(root) -> Header(primary app chrome) + Body(route content) + CopilotPanel(open as overlay or push column) + FloatingTrigger(command-palette shortcut enabled)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}

package/shells/full-bleed.json

@@ -0,0 +1,100 @@
+{
+  "id": "full-bleed",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Full Bleed",
+  "description": "No persistent navigation. Scroll-driven hero-first layout. Used by portfolio landing pages.",
+  "layout": "stack",
+  "atoms": "_flex _col",
+  "config": {
+    "regions": [
+      "header",
+      "body"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "header"
+        ],
+        [
+          "body"
+        ]
+      ]
+    },
+    "nav": {
+      "position": "top",
+      "defaultState": "hidden"
+    },
+    "header": {
+      "height": "52px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": true
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": [
+        "top"
+      ],
+      "modes": [
+        "full",
+        "hidden"
+      ]
+    },
+    "header": {
+      "toggleable": true
+    },
+    "sizing": {
+      "headerHeight": {
+        "min": 36,
+        "max": 80,
+        "default": 52
+      }
+    }
+  },
+  "internal_layout": {
+    "root": {
+      "display": "flex",
+      "direction": "column",
+      "atoms": "_flex _col"
+    },
+    "header": {
+      "height": "52px",
+      "position": "fixed",
+      "top": "0",
+      "left": "0",
+      "width": "100%",
+      "display": "flex",
+      "align": "center",
+      "justify": "space-between",
+      "padding": "0 2rem",
+      "z_index": "40",
+      "background": "transparent",
+      "atoms": "_fixed _top0 _left0 _wfull _flex _aic _jcsb _px8 _py4 _z[40]",
+      "left_content": "Brand/logo link",
+      "right_content": "Nav links \u2014 flex with gap 1.5rem",
+      "nav_links": "If navigation links are surfaced in the floating header, keep the visible label to the route name itself. Treat any declared hotkeys as keyboard bindings or command-palette hints rather than inline nav text.",
+      "note": "Floating nav overlays hero. No border, transparent background.",
+      "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",
+      "atoms": "_flex _col",
+      "note": "Full-width sections stack vertically. Each section is full viewport height or auto. Sections own their own padding. Natural document scroll, no scroll container."
+    }
+  },
+  "guidance": {
+    "section_label_treatment": "d-label",
+    "section_density": "spacious",
+    "shell_spacing": "Full-bleed shell owns floating header offsets and section stack rhythm. Pages should not add extra shell-width wrappers unless a route contract explicitly calls for a local reading measure or content column.",
+    "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 floating header 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 floating header, route outlet, and full-bleed section stack.",
+    "example": "FullBleedShell(root) -> FloatingHeader(brand, nav links, compact actions) + SectionStack(full-width sections with natural document scroll)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}

package/shells/immersive-stage.json

@@ -0,0 +1,89 @@
+{
+  "$schema": "https://decantr.ai/schemas/shell.v1.json",
+  "id": "immersive-stage",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Immersive Stage",
+  "description": "Full-bleed public shell for cinematic launch, game, venue, and live-event homepages where the first viewport is a designed stage rather than a standard stacked marketing page.",
+  "layout": "stack",
+  "atoms": "_relative _flex _col _minh[100vh] _overflow-x-hidden",
+  "config": {
+    "regions": ["header", "body"],
+    "grid": {
+      "areas": [["header"], ["body"]]
+    },
+    "nav": {
+      "position": "top"
+    },
+    "header": {
+      "height": "64px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": true
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": ["top"],
+      "modes": ["full", "compact"]
+    },
+    "header": {
+      "toggleable": true
+    },
+    "sizing": {
+      "headerHeight": {
+        "min": 56,
+        "max": 72,
+        "default": 64
+      }
+    }
+  },
+  "guidance": {
+    "header_treatment": "Header sits flush to the top edge and spans the full viewport width. Keep content constrained inside the header, but let the bottom accent line span edge-to-edge.",
+    "accent_line": "Use a one-pixel border-gradient from cyan on the left through transparent middle into red or brand-hot accent on the right. The line belongs to the viewport, not the content container.",
+    "body_spacing": "The page body owns its first-viewport composition. Do not apply default marketing shell section padding to the hero stage.",
+    "navigation": "Use compact brand, two or three nav links, and one aggressive CTA. Avoid utility clutter in the public hero shell.",
+    "footer": "No persistent footer is required for a staged homepage. If legal links are needed, place them after the cinematic content rather than inside the first viewport."
+  },
+  "internal_layout": {
+    "root": {
+      "display": "flex",
+      "direction": "column",
+      "min_height": "100vh",
+      "overflow_x": "hidden",
+      "background": "var(--d-bg)",
+      "atoms": "_relative _flex _col _minh[100vh] _overflow-x-hidden"
+    },
+    "header": {
+      "height": "64px",
+      "position": "fixed",
+      "top": "0",
+      "left": "0",
+      "right": "0",
+      "z_index": "50",
+      "display": "grid",
+      "grid_template": "auto 1fr auto",
+      "align": "center",
+      "padding": "0.625rem max(1rem, calc((100vw - 1240px) / 2))",
+      "background": "linear-gradient(180deg, color-mix(in srgb, var(--d-bg) 94%, black), transparent)",
+      "border_bottom": "1px solid color-mix(in srgb, var(--d-text) 12%, transparent)",
+      "accent_line": "absolute bottom edge, left:0, right:0, height:1px, linear-gradient(90deg, cyan, transparent 34%, rgba(255,255,255,.16), transparent 72%, hot accent)",
+      "left_content": "Compact brand mark and name",
+      "center_content": "Two or three nav anchors only",
+      "right_content": "Primary sign-in or live action CTA",
+      "button_sizing": "Header CTAs are compact, slanted or clipped when the theme supports it, and about 40px tall."
+    },
+    "body": {
+      "flex": "1",
+      "overflow_y": "auto",
+      "padding": "0",
+      "atoms": "_flex1 _overflow-y-auto _px0 _py0",
+      "note": "Route components render full-bleed sections directly. Do not wrap the body in a centered card or default d-section container."
+    }
+  },
+  "code": {
+    "imports": "Use the target router outlet and compact nav/link primitives available in the app.",
+    "example": "ImmersiveStageShell -> FixedHeader(edge-to-edge accent line) + MainOutlet(full-bleed body)"
+  }
+}

package/shells/minimal-header.json

@@ -0,0 +1,103 @@
+{
+  "id": "minimal-header",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Minimal Header",
+  "description": "Slim header with centered content below. Used for checkout flows, focused task pages.",
+  "layout": "stack",
+  "atoms": "_flex _col _h[100vh]",
+  "config": {
+    "regions": [
+      "header",
+      "body"
+    ],
+    "grid": {
+      "areas": [
+        [
+          "header"
+        ],
+        [
+          "body"
+        ]
+      ]
+    },
+    "nav": {
+      "position": "top",
+      "defaultState": "hidden"
+    },
+    "header": {
+      "height": "44px",
+      "sticky": true
+    },
+    "body": {
+      "scroll": true
+    }
+  },
+  "configurable": {
+    "nav": {
+      "positions": [
+        "top"
+      ],
+      "modes": [
+        "hidden"
+      ]
+    },
+    "header": {
+      "toggleable": true
+    },
+    "sizing": {
+      "headerHeight": {
+        "min": 36,
+        "max": 80,
+        "default": 44
+      }
+    }
+  },
+  "internal_layout": {
+    "root": {
+      "display": "flex",
+      "direction": "column",
+      "height": "100vh",
+      "atoms": "_flex _col _h[100vh]"
+    },
+    "header": {
+      "height": "44px",
+      "display": "flex",
+      "align": "center",
+      "justify": "center",
+      "padding": "0.75rem 0",
+      "border": "bottom",
+      "sticky": true,
+      "content": "Back arrow icon + brand link, centered",
+      "note": "Slim header with centered brand. Minimal \u2014 no nav links.",
+      "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",
+      "align": "center",
+      "overflow_y": "auto",
+      "padding": "2rem 0",
+      "atoms": "_flex _col _aic _overflow[auto] _flex1 _py8",
+      "content_wrapper": {
+        "width": "720px",
+        "max_width": "100%",
+        "padding": "0 1rem",
+        "direction": "column",
+        "gap": "1.5rem",
+        "atoms": "_w[720px] _mw[100%] _px4 _flex _col _gap6",
+        "note": "Centered column for focused content. Checkout forms, task pages."
+      }
+    }
+  },
+  "guidance": {
+    "section_label_treatment": "d-label",
+    "section_density": "comfortable",
+    "shell_spacing": "Minimal-header owns the narrow work-column rhythm and the body inset. Route content should fill the provided centered column rather than layering an extra max-width wrapper on top."
+  },
+  "code": {
+    "imports": "Target-specific imports vary. Translate the internal_layout contract into your framework's compact header bar and single scrollable body region.",
+    "example": "MinimalHeaderShell(root) -> Header(title, minimal actions) + Body(shared insets, sole scroll container)"
+  },
+  "$schema": "https://decantr.ai/schemas/shell.v1.json"
+}