@adia-ai/web-modules 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -11,6 +11,21 @@ Built from `@adia-ai/web-components` primitives.
 
 _No pending changes._
 
+## [0.4.1] - 2026-05-10
+
+### Added
+
+- **simple cluster — 4th bespoke shell family** per ADR-0023. Minimal shell for marketing / landing / error pages:
+  - `<simple-shell>` (host) — behavior-only orchestrator. 2 reflected attributes: `[centered]` (vertical center), `[full-bleed]` (drops max-width).
+  - `<simple-content>` (CSS-only) — article body container with token-correct vertical rhythm.
+  - `<simple-hero>` (CSS-only) — optional top strip with 3 named slots (`heading`, `lede`, `actions`).
+- Subpath export: `@adia-ai/web-modules/simple`.
+- 10 unit tests for `<simple-shell>`.
+
+### Changed
+
+- Catalog count: 118 → 121 yamls (+3 from simple cluster children).
+
 ## [0.4.0] - 2026-05-10
 
 **⚠️ BREAKING** — first non-patch release in the 0.x line. Closes the ADR-0023 arc per [ADR-0024](../../.brain/adrs/0024-legacy-shell-shapes-retired.md). All 6 in-repo consumers migrated in v0.3.6; this release retires the legacy authoring shapes from the shell hosts.

package/README.md

@@ -5,6 +5,10 @@ Composite custom elements built from
 into clusters by use case; each cluster ships as a subpath export so
 consumers install only what they need.
 
+Each cluster carries a **shell host** (behavior-only orchestrator) plus
+a **family of bespoke shell-tier children** (cluster-namespaced custom
+elements with state-as-attribute semantics) per [ADR-0023](../../.brain/adrs/0023-bespoke-shell-tier-children.md). The bespoke vocabulary is the only recognized authoring shape since v0.4.0 ([ADR-0024](../../.brain/adrs/0024-legacy-shell-shapes-retired.md)).
+
 > The patterns directory lived inside `@adia-ai/web-components` as
 > `patterns/` until this package was extracted (see
 > [ADR-0012](../../.brain/adrs/0012-three-tier-architecture-modules.md)).
@@ -13,16 +17,17 @@ consumers install only what they need.
 
 ## Clusters
 
-| Cluster | Elements | What's inside |
-|---|---|---|
-| `shell` | `<admin-shell>` (nav primitives live in `web-components`: `<nav-ui>`, `<nav-group-ui>`, `<nav-item-ui>`) | Admin-shell composition: header, sidebars, command palette. |
-| `chat` | `<chat-shell>` | Conversational surface — messages, streaming, markdown, action bar. |
-| `editor` | `<editor-shell>` | A2UI live-editor surface — JSON ↔ rendered preview. |
-| `runtime` | `<gen-root>`, `<a2ui-root>` | Render roots that turn JSON or gen-UI intents into live DOM. |
+| Cluster | Host | Bespoke children | What's inside |
+|---|---|---|---|
+| `shell` | `<admin-shell>` | `<admin-sidebar>`, `<admin-command>` (JS-bearing); `<admin-content>`, `<admin-topbar>`, `<admin-statusbar>`, `<admin-scroll>`, `<admin-page>`, `<admin-page-header>`, `<admin-page-body>` (CSS-only); 9 children total | Admin-shell composition: sidebars, command palette, page chrome. Resize/collapse/persistence on `<admin-sidebar>`; Cmd+K palette on `<admin-command>`. |
+| `chat` | `<chat-shell>` | `<chat-thread>`, `<chat-composer>`, `<chat-sidebar>` (JS-bearing); `<chat-empty>`, `<chat-header>`, `<chat-status>` (CSS-only); 6 children total | Conversational surface — streaming messages, composer with `[disabled]` propagation, scroll-to-bottom thread, `[streaming]` reflected. |
+| `editor` | `<editor-shell>` | `<editor-toolbar>`, `<editor-canvas>`, `<editor-sidebar>` (JS-bearing); `<editor-statusbar>`, `<editor-canvas-empty>` (CSS-only); 5 children total | Design-tool surface — toolbar with `[full-screen]`, central canvas with `[focused]`/`[empty]`, sidebar wraps `<pane-ui resizable>` for delegation. |
+| `runtime` | `<gen-root>`, `<a2ui-root>` | — | Render roots that turn JSON or gen-UI intents into live DOM. |
 
 Future clusters on the strategic horizon: `data` (kanban, filters,
-table-toolbar), `agent` (agent-trace, reasoning panels), `admin`
-(RBAC matrix, approvals).
+table-toolbar), `agent` (agent-trace, reasoning panels).
+
+See [`bespoke-shell-children` skill](../../.agents/skills/bespoke-shell-children/SKILL.md) for the canonical decomposition recipe used by all three families.
 
 ## Quick start
 
@@ -35,17 +40,26 @@ table-toolbar), `agent` (agent-trace, reasoning panels), `admin`
 
 <script type="module">
   import '@adia-ai/web-components';        // primitives + nav family
-  import '@adia-ai/web-modules/shell';     // admin-shell
-  import '@adia-ai/web-modules/chat';      // adia-chat
-  import '@adia-ai/web-modules/runtime';   // gen-ui, a2ui-root
+  import '@adia-ai/web-modules/shell';     // admin-shell + bespoke children
+  import '@adia-ai/web-modules/chat';      // chat-shell + bespoke children
+  import '@adia-ai/web-modules/editor';    // editor-shell + bespoke children
+  import '@adia-ai/web-modules/runtime';   // gen-root, a2ui-root
 </script>
 
+<!-- Bespoke shape (canonical since v0.4.0): -->
 <admin-shell mode="rounded">
-  <aside-ui slot="leading">
-    <header-ui>…</header-ui>
-    <section-ui><nav-ui>…</nav-ui></section-ui>
-  </aside-ui>
+  <admin-sidebar slot="leading" resizable collapsible>
+    <header-ui>
+      <span slot="heading">App</span>
+    </header-ui>
+    <section-ui>
+      <nav-ui>…</nav-ui>
+    </section-ui>
+  </admin-sidebar>
   <main>…</main>
+  <admin-command>
+    <command-ui placeholder="Search..."></command-ui>
+  </admin-command>
 </admin-shell>
 ```
 

package/index.js

@@ -11,4 +11,5 @@
 export * from './shell/index.js';
 export * from './chat/index.js';
 export * from './editor/index.js';
+export * from './simple/index.js';
 export * from './runtime/index.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.4.0",
-  "description": "AdiaUI composite custom elements \u2014 shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
+  "version": "0.4.1",
+  "description": "AdiaUI composite custom elements — shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {
     ".": "./index.js",
@@ -11,6 +11,8 @@
     "./chat/*": "./chat/*/*.js",
     "./editor": "./editor/index.js",
     "./editor/*": "./editor/*/*.js",
+    "./simple": "./simple/index.js",
+    "./simple/*": "./simple/*/*.js",
     "./runtime": "./runtime/index.js",
     "./runtime/*": "./runtime/*/*.js",
     "./package.json": "./package.json"
@@ -19,6 +21,7 @@
     "shell/",
     "chat/",
     "editor/",
+    "simple/",
     "runtime/",
     "index.js",
     "README.md",

package/simple/index.js

@@ -0,0 +1,2 @@
+export { SimpleShell } from './simple-shell/simple-shell.js';
+// simple-content and simple-hero are CSS-only — no JS export needed.

package/simple/simple-content/simple-content.a2ui.json

@@ -0,0 +1,67 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/SimpleContent.json",
+  "title": "SimpleContent",
+  "description": "Module-tier article-body container. CSS-only — no JS, no state.\nSits inside <simple-shell> as the main content surface with\ntoken-correct vertical rhythm and prose-friendly max-width.\n\nCompanion to <simple-hero> (optional top strip) per ADR-0023\nbespoke shell-tier children.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "SimpleContent"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "shells",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "simple-content",
+      "article",
+      "body",
+      "prose",
+      "main-content",
+      "landing-body",
+      "marketing-body"
+    ],
+    "name": "SimpleContent",
+    "related": [
+      "SimpleShell",
+      "SimpleHero"
+    ],
+    "slots": {
+      "default": {
+        "description": "Article body content — prose, code blocks, illustrations. Authors compose freely; <simple-content> provides only the container with sensible defaults (vertical rhythm, max-width, typography token application)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, visible.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "simple-content": [
+        "page-content",
+        "article-body",
+        "prose-container",
+        "main-body"
+      ]
+    },
+    "tag": "simple-content",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/simple/simple-content/simple-content.css

@@ -0,0 +1,29 @@
+/* ═══════════════════════════════════════════════════════════════
+   simple-content — Article body container
+
+   CSS-only structural child of <simple-shell>. Provides token-correct
+   vertical rhythm + prose-friendly max-width for article body content.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (simple-content) {
+  :scope {
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-density-4, 1.5rem);
+    width: 100%;
+    color: var(--a-text);
+  }
+
+  /* Typographic rhythm for prose children */
+  :scope > h1,
+  :scope > h2,
+  :scope > h3 {
+    margin: 0;
+    color: var(--a-text-heading, var(--a-text));
+  }
+
+  :scope > p {
+    margin: 0;
+    line-height: var(--a-line-height-prose, 1.6);
+  }
+}

package/simple/simple-content/simple-content.examples.html

@@ -0,0 +1,13 @@
+<h1>simple-content — article body container</h1>
+
+<p>CSS-only structural child of <code>&lt;simple-shell&gt;</code>. Provides vertical rhythm and prose-friendly max-width.</p>
+
+<simple-shell style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 50dvh;">
+  <simple-content>
+    <h1>Article body</h1>
+    <p>simple-content is the main article surface. It applies token-correct vertical rhythm (the gap between children uses <code>--a-density-4</code>) and uses prose typography for paragraphs and headings.</p>
+    <h2>Section heading</h2>
+    <p>Headings cascade naturally. h1 / h2 / h3 receive heading colors via <code>--a-text-heading</code>.</p>
+    <p>Body paragraphs use a prose line-height (<code>--a-line-height-prose</code>) for comfortable reading.</p>
+  </simple-content>
+</simple-shell>

package/simple/simple-content/simple-content.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Simple Content — AdiaUI</title>
+
+  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
+  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
+  <link rel="stylesheet" href="../simple-shell/simple-shell.css">
+  <link rel="stylesheet" href="../simple-content/simple-content.css">
+  <link rel="stylesheet" href="../simple-hero/simple-hero.css">
+  <link rel="stylesheet" href="../../../web-components/components/button/button.css">
+
+  <script type="module" src="../simple-shell/simple-shell.js"></script>
+  <script type="module" src="../../../web-components/components/button/button.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./simple-content.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load simple-content.examples.html — ${err.message}</p>`;
+      console.error('[simple-content.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/simple/simple-content/simple-content.yaml

@@ -0,0 +1,54 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: SimpleContent
+tag: simple-content
+component: SimpleContent
+category: shells
+version: 1
+description: |
+  Module-tier article-body container. CSS-only — no JS, no state.
+  Sits inside <simple-shell> as the main content surface with
+  token-correct vertical rhythm and prose-friendly max-width.
+
+  Companion to <simple-hero> (optional top strip) per ADR-0023
+  bespoke shell-tier children.
+
+props: {}
+
+events: {}
+
+slots:
+  default:
+    description: >-
+      Article body content — prose, code blocks, illustrations.
+      Authors compose freely; <simple-content> provides only the
+      container with sensible defaults (vertical rhythm, max-width,
+      typography token application).
+
+states:
+  - name: idle
+    description: Default, visible.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      simple-content is the article surface inside simple-shell. Use
+      for primary page body. Sibling to <simple-hero> (optional).
+
+keywords:
+  - simple-content
+  - article
+  - body
+  - prose
+  - main-content
+  - landing-body
+  - marketing-body
+
+synonyms:
+  simple-content: [page-content, article-body, prose-container, main-body]
+
+related:
+  - SimpleShell
+  - SimpleHero

package/simple/simple-hero/simple-hero.a2ui.json

@@ -0,0 +1,76 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/SimpleHero.json",
+  "title": "SimpleHero",
+  "description": "Module-tier hero strip for the top of marketing / landing / error\npages. CSS-only — no JS, no state. Three named slots (heading, lede,\nactions) carry the canonical hero composition.\n\nSits inside <simple-shell> above <simple-content>. Companion to\n<simple-content> per ADR-0023 bespoke shell-tier children.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "SimpleHero"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "shells",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "simple-hero",
+      "hero",
+      "splash",
+      "landing-hero",
+      "marketing-hero",
+      "intro",
+      "page-title"
+    ],
+    "name": "SimpleHero",
+    "related": [
+      "SimpleShell",
+      "SimpleContent"
+    ],
+    "slots": {
+      "default": {
+        "description": "Optional inline content if the named slots are insufficient."
+      },
+      "actions": {
+        "description": "Action row (button-ui, link-ui) for primary CTAs."
+      },
+      "heading": {
+        "description": "Large display heading (h1) — the page title."
+      },
+      "lede": {
+        "description": "Lead paragraph below heading — short summary or CTA tagline."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, visible.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "simple-hero": [
+        "page-hero",
+        "splash-hero",
+        "landing-hero",
+        "intro-strip"
+      ]
+    },
+    "tag": "simple-hero",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/simple/simple-hero/simple-hero.css

@@ -0,0 +1,45 @@
+/* ═══════════════════════════════════════════════════════════════
+   simple-hero — Optional top strip for landing / error / splash pages
+
+   CSS-only. Three named slots (heading, lede, actions) compose the
+   canonical hero layout. Authors can omit any slot.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (simple-hero) {
+  :scope {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--a-density-3, 1rem);
+    width: 100%;
+    padding-block: var(--a-density-6, 3rem);
+  }
+
+  /* Heading slot — large display size */
+  :scope [slot="heading"] {
+    margin: 0;
+    font-size: var(--a-font-size-display, 2.5rem);
+    line-height: var(--a-line-height-tight, 1.2);
+    color: var(--a-text-heading, var(--a-text));
+    font-weight: var(--a-font-weight-bold, 600);
+  }
+
+  /* Lede slot — muted, larger than body */
+  :scope [slot="lede"] {
+    margin: 0;
+    font-size: var(--a-font-size-lede, 1.25rem);
+    line-height: var(--a-line-height-prose, 1.5);
+    color: var(--a-text-muted);
+    max-width: 42rem;
+  }
+
+  /* Actions slot — flex row */
+  :scope [slot="actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--a-density-2, 0.75rem);
+    justify-content: center;
+    margin-top: var(--a-density-2, 0.75rem);
+  }
+}

package/simple/simple-hero/simple-hero.examples.html

@@ -0,0 +1,33 @@
+<h1>simple-hero — hero strip for landing / error / splash pages</h1>
+
+<p>CSS-only. Three named slots: heading, lede, actions. Authors can omit any slot.</p>
+
+<h2>All three slots</h2>
+
+<simple-shell style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 50dvh;">
+  <simple-hero>
+    <h1 slot="heading">Build with AdiaUI</h1>
+    <p slot="lede">Zero dependencies. Production-ready primitives. LLM-native generative UI.</p>
+    <div slot="actions">
+      <button-ui variant="solid" color="accent">Get started</button-ui>
+      <button-ui variant="outline">Read the docs</button-ui>
+    </div>
+  </simple-hero>
+</simple-shell>
+
+<h2>Heading + lede only</h2>
+
+<simple-shell style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 40dvh;">
+  <simple-hero>
+    <h1 slot="heading">Thank you</h1>
+    <p slot="lede">Your message has been received. We'll get back to you within 24 hours.</p>
+  </simple-hero>
+</simple-shell>
+
+<h2>Heading only — minimal error page</h2>
+
+<simple-shell centered style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 30dvh;">
+  <simple-hero>
+    <h1 slot="heading">Maintenance in progress</h1>
+  </simple-hero>
+</simple-shell>

package/simple/simple-hero/simple-hero.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Simple Hero — AdiaUI</title>
+
+  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
+  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
+  <link rel="stylesheet" href="../simple-shell/simple-shell.css">
+  <link rel="stylesheet" href="../simple-content/simple-content.css">
+  <link rel="stylesheet" href="../simple-hero/simple-hero.css">
+  <link rel="stylesheet" href="../../../web-components/components/button/button.css">
+
+  <script type="module" src="../simple-shell/simple-shell.js"></script>
+  <script type="module" src="../../../web-components/components/button/button.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./simple-hero.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load simple-hero.examples.html — ${err.message}</p>`;
+      console.error('[simple-hero.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/simple/simple-hero/simple-hero.yaml

@@ -0,0 +1,57 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: SimpleHero
+tag: simple-hero
+component: SimpleHero
+category: shells
+version: 1
+description: |
+  Module-tier hero strip for the top of marketing / landing / error
+  pages. CSS-only — no JS, no state. Three named slots (heading, lede,
+  actions) carry the canonical hero composition.
+
+  Sits inside <simple-shell> above <simple-content>. Companion to
+  <simple-content> per ADR-0023 bespoke shell-tier children.
+
+props: {}
+
+events: {}
+
+slots:
+  heading:
+    description: Large display heading (h1) — the page title.
+  lede:
+    description: Lead paragraph below heading — short summary or CTA tagline.
+  actions:
+    description: Action row (button-ui, link-ui) for primary CTAs.
+  default:
+    description: Optional inline content if the named slots are insufficient.
+
+states:
+  - name: idle
+    description: Default, visible.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      simple-hero is the optional top strip inside simple-shell. Use
+      for marketing splashes, error-page reassurance text, or single-
+      flow page intros. Always followed by <simple-content> for body.
+
+keywords:
+  - simple-hero
+  - hero
+  - splash
+  - landing-hero
+  - marketing-hero
+  - intro
+  - page-title
+
+synonyms:
+  simple-hero: [page-hero, splash-hero, landing-hero, intro-strip]
+
+related:
+  - SimpleShell
+  - SimpleContent

package/simple/simple-shell/simple-shell.a2ui.json

@@ -0,0 +1,87 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/SimpleShell.json",
+  "title": "SimpleShell",
+  "description": "Module-tier minimal shell for marketing / landing / error pages.\nBehavior-only orchestrator with two reflected attributes — [centered]\nfor vertical centering, [full-bleed] for dropping the max-width\nconstraint.\n\nThe 4th cluster in the bespoke shell family per ADR-0023, designed\ndeliberately small (1 host + 2 CSS-only children) to demonstrate\nthe pattern works without ceremony for thin clusters.\n\nUse cases: marketing splashes, error pages (404 / 500 / maintenance),\nthank-you pages, single-card flows (sign-in, password reset).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "centered": {
+      "description": "Reflected — vertically centers content in viewport.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "SimpleShell"
+    },
+    "full-bleed": {
+      "description": "Reflected — drops the default max-width so content fills full viewport.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "shells",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "simple-shell",
+      "landing",
+      "marketing",
+      "error-page",
+      "splash",
+      "confirmation",
+      "minimal-shell"
+    ],
+    "name": "SimpleShell",
+    "related": [
+      "SimpleHero",
+      "SimpleContent",
+      "AdminShell"
+    ],
+    "slots": {
+      "default": {
+        "description": "Bespoke children (<simple-hero>, <simple-content>) compose here. The author owns layout order."
+      }
+    },
+    "states": [
+      {
+        "description": "Default layout — top-aligned, max-width container.",
+        "name": "idle"
+      },
+      {
+        "description": "When [centered] is set — vertically centers the content stack.",
+        "name": "centered"
+      },
+      {
+        "description": "When [full-bleed] is set — drops max-width so content fills the viewport.",
+        "name": "full-bleed"
+      }
+    ],
+    "synonyms": {
+      "simple-shell": [
+        "marketing-shell",
+        "landing-shell",
+        "minimal-shell",
+        "splash-shell",
+        "error-shell"
+      ]
+    },
+    "tag": "simple-shell",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/simple/simple-shell/simple-shell.css

@@ -0,0 +1,40 @@
+/* ═══════════════════════════════════════════════════════════════
+   simple-shell — Module CSS (minimal shell for marketing / landing / error pages)
+
+   Single-file CSS — simple-shell is deliberately minimal so all rules
+   live here rather than fanning out into layered files. If complexity
+   grows, split into css/simple-shell.{tokens,layout,bespoke}.css per
+   admin/chat/editor convention.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (simple-shell) {
+  :scope {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 100dvh;
+    width: 100%;
+    padding-inline: var(--a-density-4, 1.5rem);
+    padding-block: var(--a-density-6, 3rem);
+    gap: var(--a-density-4, 1.5rem);
+    background: var(--a-canvas-1);
+    color: var(--a-text);
+  }
+
+  /* Vertically center when [centered] */
+  :scope[centered] {
+    justify-content: center;
+  }
+
+  /* Children width: bounded by content max-width by default */
+  :scope > * {
+    width: 100%;
+    max-width: var(--a-content-max-width, 56rem);
+  }
+
+  /* Full-bleed drops the max-width on children */
+  :scope[full-bleed] > * {
+    max-width: none;
+  }
+}

package/simple/simple-shell/simple-shell.examples.html

@@ -0,0 +1,42 @@
+<h1>simple-shell — minimal shell for marketing / landing / error pages</h1>
+
+<p>The 4th cluster in the bespoke shell family per ADR-0023. Designed deliberately small (1 host + 2 CSS-only children) to demonstrate the pattern works for thin clusters without ceremony.</p>
+
+<h2>Default — top-aligned with hero + content</h2>
+
+<simple-shell style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 60dvh; padding-block: var(--a-density-4);">
+  <simple-hero>
+    <h1 slot="heading">Welcome to AdiaUI</h1>
+    <p slot="lede">A zero-dependency vanilla JS web component library for modern interfaces.</p>
+    <div slot="actions">
+      <button-ui variant="solid" color="accent">Get started</button-ui>
+      <button-ui variant="ghost">View on GitHub</button-ui>
+    </div>
+  </simple-hero>
+  <simple-content>
+    <h2>Quick example</h2>
+    <p>Drop primitives into any HTML page — no build tools needed.</p>
+    <p>Components are framework-agnostic. Use them in vanilla HTML, React, Vue, Svelte, or anywhere else.</p>
+  </simple-content>
+</simple-shell>
+
+<h2>[centered] — vertically centered content</h2>
+
+<simple-shell centered style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 60dvh;">
+  <simple-hero>
+    <h1 slot="heading">404 — Page Not Found</h1>
+    <p slot="lede">The page you're looking for doesn't exist or has been moved.</p>
+    <div slot="actions">
+      <button-ui variant="solid" color="accent">Back to home</button-ui>
+    </div>
+  </simple-hero>
+</simple-shell>
+
+<h2>[full-bleed] — drops the max-width constraint</h2>
+
+<simple-shell full-bleed style="border: 1px solid var(--a-border); border-radius: var(--a-radius-3); min-height: 40dvh; background: var(--a-canvas-0);">
+  <simple-content>
+    <h2>Full-bleed content</h2>
+    <p>When [full-bleed] is set, children stretch to the viewport width instead of being bounded by the default max-width (~56rem). Use for hero sections that want edge-to-edge background, or marketing pages with full-width imagery.</p>
+  </simple-content>
+</simple-shell>

package/simple/simple-shell/simple-shell.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Simple Shell — AdiaUI</title>
+
+  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
+  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
+  <link rel="stylesheet" href="../simple-shell/simple-shell.css">
+  <link rel="stylesheet" href="../simple-content/simple-content.css">
+  <link rel="stylesheet" href="../simple-hero/simple-hero.css">
+  <link rel="stylesheet" href="../../../web-components/components/button/button.css">
+
+  <script type="module" src="../simple-shell/simple-shell.js"></script>
+  <script type="module" src="../../../web-components/components/button/button.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./simple-shell.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load simple-shell.examples.html — ${err.message}</p>`;
+      console.error('[simple-shell.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/simple/simple-shell/simple-shell.js

@@ -0,0 +1,47 @@
+import { UIElement } from '../../../web-components/core/element.js';
+
+/**
+ * <simple-shell> — Minimal shell for marketing / landing / error pages.
+ *
+ * Behavior-only orchestrator. Reflects `[centered]` (vertical center)
+ * and `[full-bleed]` (drops max-width). No sidebars, no chrome bars,
+ * no command palette — deliberately minimal.
+ *
+ * Structure (bespoke shape, canonical since v0.4.1):
+ *
+ *   <simple-shell centered>
+ *     <simple-hero>
+ *       <h1 slot="heading">Welcome</h1>
+ *       <p slot="lede">Get started in seconds.</p>
+ *       <div slot="actions"><button-ui>Sign up</button-ui></div>
+ *     </simple-hero>
+ *     <simple-content>
+ *       <p>Body content goes here.</p>
+ *     </simple-content>
+ *   </simple-shell>
+ *
+ * Use cases:
+ *  - Marketing splash pages
+ *  - Error pages (404, 500, maintenance)
+ *  - "Thank you" / confirmation pages
+ *  - Single-card flows (sign-in, password reset)
+ *
+ * Per ADR-0023 + ADR-0024, simple-shell is the 4th cluster in the
+ * bespoke-shell-children family (after admin/chat/editor). Designed
+ * deliberately small to prove the pattern works for thin clusters
+ * without ceremony.
+ */
+class SimpleShell extends UIElement {
+  static properties = {
+    centered: { type: Boolean, default: false, reflect: true },
+    'full-bleed': { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+}
+
+if (!customElements.get('simple-shell')) {
+  customElements.define('simple-shell', SimpleShell);
+}
+
+export { SimpleShell };

package/simple/simple-shell/simple-shell.test.js

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../../web-components/core/element.js';
+import './simple-shell.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('simple-shell', () => {
+  it('registers simple-shell as a custom element', () => {
+    expect(customElements.get('simple-shell')).toBeDefined();
+  });
+
+  it('defaults to centered=false and full-bleed=false', () => {
+    const el = mount('<simple-shell></simple-shell>');
+    expect(el.hasAttribute('centered')).toBe(false);
+    expect(el.hasAttribute('full-bleed')).toBe(false);
+  });
+
+  it('honors initial [centered] attribute on connect', () => {
+    const el = mount('<simple-shell centered></simple-shell>');
+    expect(el.centered).toBe(true);
+  });
+
+  it('honors initial [full-bleed] attribute on connect', () => {
+    const el = mount('<simple-shell full-bleed></simple-shell>');
+    expect(el['full-bleed']).toBe(true);
+  });
+
+  it('reflects [centered] via property assignment', async () => {
+    const el = mount('<simple-shell></simple-shell>');
+    el.centered = true;
+    await tick();
+    expect(el.hasAttribute('centered')).toBe(true);
+  });
+
+  it('reflects [full-bleed] via property assignment', async () => {
+    const el = mount('<simple-shell></simple-shell>');
+    el['full-bleed'] = true;
+    await tick();
+    expect(el.hasAttribute('full-bleed')).toBe(true);
+  });
+
+  it('removes [centered] when set to false', async () => {
+    const el = mount('<simple-shell centered></simple-shell>');
+    el.centered = false;
+    await tick();
+    expect(el.hasAttribute('centered')).toBe(false);
+  });
+
+  it('stamps no HTML (behavior-only orchestrator)', () => {
+    const el = mount('<simple-shell></simple-shell>');
+    // Empty content + nothing stamped by the host
+    expect(el.children.length).toBe(0);
+  });
+
+  it('preserves authored slotted children', () => {
+    const el = mount(`
+      <simple-shell>
+        <simple-hero><h1 slot="heading">Hello</h1></simple-hero>
+        <simple-content><p>Body</p></simple-content>
+      </simple-shell>
+    `);
+    expect(el.querySelector('simple-hero')).toBeTruthy();
+    expect(el.querySelector('simple-content')).toBeTruthy();
+    expect(el.querySelector('[slot="heading"]')).toBeTruthy();
+  });
+
+  it('supports both [centered] and [full-bleed] simultaneously', () => {
+    const el = mount('<simple-shell centered full-bleed></simple-shell>');
+    expect(el.centered).toBe(true);
+    expect(el['full-bleed']).toBe(true);
+  });
+});

package/simple/simple-shell/simple-shell.yaml

@@ -0,0 +1,78 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: SimpleShell
+tag: simple-shell
+component: SimpleShell
+category: shells
+version: 1
+description: |
+  Module-tier minimal shell for marketing / landing / error pages.
+  Behavior-only orchestrator with two reflected attributes — [centered]
+  for vertical centering, [full-bleed] for dropping the max-width
+  constraint.
+
+  The 4th cluster in the bespoke shell family per ADR-0023, designed
+  deliberately small (1 host + 2 CSS-only children) to demonstrate
+  the pattern works without ceremony for thin clusters.
+
+  Use cases: marketing splashes, error pages (404 / 500 / maintenance),
+  thank-you pages, single-card flows (sign-in, password reset).
+
+props:
+  centered:
+    description: Reflected — vertically centers content in viewport.
+    type: boolean
+    default: false
+    reflect: true
+  full-bleed:
+    description: Reflected — drops the default max-width so content fills full viewport.
+    type: boolean
+    default: false
+    reflect: true
+
+events: {}
+
+slots:
+  default:
+    description: >-
+      Bespoke children (<simple-hero>, <simple-content>) compose here.
+      The author owns layout order.
+
+states:
+  - name: idle
+    description: Default layout — top-aligned, max-width container.
+  - name: centered
+    description: When [centered] is set — vertically centers the content stack.
+  - name: full-bleed
+    description: When [full-bleed] is set — drops max-width so content fills the viewport.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      simple-shell is the bespoke shell for thin / minimal page surfaces.
+      Use when the page has no nav rail, no chrome bars, no command
+      palette. For full app surfaces use admin-shell; for chat surfaces
+      use chat-shell; for design tools use editor-shell.
+    - >-
+      Compose with <simple-hero> (optional top hero strip) and
+      <simple-content> (main article body). Both are CSS-only structural
+      children — no JS, no state.
+
+keywords:
+  - simple-shell
+  - landing
+  - marketing
+  - error-page
+  - splash
+  - confirmation
+  - minimal-shell
+
+synonyms:
+  simple-shell: [marketing-shell, landing-shell, minimal-shell, splash-shell, error-shell]
+
+related:
+  - SimpleHero
+  - SimpleContent
+  - AdminShell