npm - @adia-ai/web-modules - Versions diffs - 0.3.6 → 0.4.1 - Mend

@adia-ai/web-modules 0.3.6 → 0.4.1

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

Files changed (47) hide show

package/CHANGELOG.md +44 -0
package/README.md +29 -15
package/chat/chat-shell/chat-shell.js +28 -40
package/chat/chat-shell/css/chat-shell.empty.css +3 -3
package/chat/chat-shell/css/chat-shell.layout.css +2 -2
package/editor/editor-canvas/editor-canvas.examples.html +65 -0
package/editor/editor-canvas/editor-canvas.html +43 -0
package/editor/editor-canvas-empty/editor-canvas-empty.examples.html +65 -0
package/editor/editor-canvas-empty/editor-canvas-empty.html +42 -0
package/editor/editor-shell/css/editor-shell.bespoke.css +67 -2
package/editor/editor-shell/css/editor-shell.layout.css +6 -6
package/editor/editor-shell/editor-shell.js +19 -17
package/editor/editor-sidebar/editor-sidebar.a2ui.json +5 -0
package/editor/editor-sidebar/editor-sidebar.examples.html +65 -0
package/editor/editor-sidebar/editor-sidebar.html +43 -0
package/editor/editor-sidebar/editor-sidebar.js +30 -6
package/editor/editor-sidebar/editor-sidebar.test.js +19 -0
package/editor/editor-sidebar/editor-sidebar.yaml +8 -0
package/editor/editor-statusbar/editor-statusbar.examples.html +65 -0
package/editor/editor-statusbar/editor-statusbar.html +42 -0
package/editor/editor-toolbar/editor-toolbar.examples.html +65 -0
package/editor/editor-toolbar/editor-toolbar.html +43 -0
package/index.js +1 -0
package/package.json +8 -5
package/shell/admin-shell/admin-shell.js +27 -243
package/shell/admin-shell/css/admin-shell.bespoke.css +22 -26
package/shell/admin-shell/css/admin-shell.main.css +2 -2
package/shell/admin-shell/css/admin-shell.shell.css +2 -2
package/shell/admin-shell/css/admin-shell.sidebar.css +35 -33
package/simple/index.js +2 -0
package/simple/simple-content/simple-content.a2ui.json +67 -0
package/simple/simple-content/simple-content.css +29 -0
package/simple/simple-content/simple-content.examples.html +13 -0
package/simple/simple-content/simple-content.html +42 -0
package/simple/simple-content/simple-content.yaml +54 -0
package/simple/simple-hero/simple-hero.a2ui.json +76 -0
package/simple/simple-hero/simple-hero.css +45 -0
package/simple/simple-hero/simple-hero.examples.html +33 -0
package/simple/simple-hero/simple-hero.html +42 -0
package/simple/simple-hero/simple-hero.yaml +57 -0
package/simple/simple-shell/simple-shell.a2ui.json +87 -0
package/simple/simple-shell/simple-shell.css +40 -0
package/simple/simple-shell/simple-shell.examples.html +42 -0
package/simple/simple-shell/simple-shell.html +42 -0
package/simple/simple-shell/simple-shell.js +47 -0
package/simple/simple-shell/simple-shell.test.js +83 -0
package/simple/simple-shell/simple-shell.yaml +78 -0

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>