@adia-ai/web-modules 0.6.28 → 0.6.30

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog — @adia-ai/web-modules
 
+## [0.6.30] — 2026-05-23
+
+### Added — JS bundles + `./everything` kitchen-sink export (CDN / CodePen)
+
+- **Five new JS bundles** under `dist/`: `dist/everything.min.js` (kitchen-sink — primitives + a2ui-runtime + all 4 shells, 734 KB raw / ~250 KB gzipped — **the CodePen-target bundle**), plus four per-shell variants (`dist/shell/admin-shell.min.js`, `dist/chat/chat-shell.min.js`, `dist/editor/editor-shell.min.js`, `dist/simple/simple-shell.min.js`).
+- **Five new exports**: `./everything` → kitchen-sink path; `./shell/admin-shell/js-bundled`, `./chat/chat-shell/js-bundled`, `./editor/editor-shell/js-bundled`, `./simple/simple-shell/js-bundled` → per-shell paths. Existing cluster exports (`./shell`, `./chat`, etc.) unchanged.
+- Per-shell JS bundles assume `@adia-ai/web-components` JS is loaded first (small surface, ~6KB each except chat-shell which inlines chat-thread + composer ~230 KB). Kitchen-sink `everything.min.js` is self-contained.
+- **Pick ONE JS bundle path per page** — mixing causes `customElements.define` to throw "name already defined". The kitchen-sink path is the CodePen choice.
+
+### Documentation — README CDN section + AI-agent discoverability
+
+- **README.md** grows two new sections: "CDN (no bundler)" with the bundle URLs + size table + choice tree, and "Using with AI agents" pointing at the `adia-ui-kit` skill.
+- New site doc: [`/site/getting-started/cdn-usage`](https://ui-kit.exe.xyz/site/getting-started/cdn-usage) — full CodePen template + worked examples.
+- New `examples/codepen.html` — working CDN template in the repo (drop-in copy-paste for demos).
+
+## [0.6.29] — 2026-05-23
+
+### Added — `dist/<cluster>/<shell>.min.css` rolled-up CDN-ready bundles (4 shells)
+
+- **Four per-shell LightningCSS bundles** ship as part of the tarball: `dist/shell/admin-shell.min.css` (17.6 KB), `dist/chat/chat-shell.min.css` (10.0 KB), `dist/editor/editor-shell.min.css` (5.8 KB), `dist/simple/simple-shell.min.css` (431 B). Each is a single minified file flattening every `@import` from the shell's root CSS through its sub-CSS modules — replaces the `@import` waterfall for HTML-first consumers and enables one-line CDN usage: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-modules@0.6.29/dist/shell/admin-shell.min.css">`.
+- **Four new `<cluster>/<shell>/bundled` exports** added to package.json `exports` map (`./shell/admin-shell/bundled`, `./chat/chat-shell/bundled`, `./editor/editor-shell/bundled`, `./simple/simple-shell/bundled`). Existing per-shell exports (the `@import` barrels) are unchanged — bundler consumers continue using them.
+- Generation discipline matches `@adia-ai/web-components`: `npm run build:bundle-css` produces both packages' bundles in one pass; `check:css-bundles-fresh` is now a pre-flight gate.
+
 ## [0.6.28] — 2026-05-23
 
 ### Fixed — `editor-sidebar` rAF debounce for wide→narrow display-flip transient (§FB-50)

package/README.md

@@ -11,6 +11,53 @@ consumers install only what they need.
 npm install @adia-ai/web-modules @adia-ai/web-components
 ```
 
+## CDN — no bundler (CodePen, marketing pages, static HTML)
+
+Since **v0.6.30**, both this package and `@adia-ai/web-components` ship pre-flattened + minified bundles under `dist/` that work via jsdelivr/unpkg with zero build tooling.
+
+**Kitchen-sink one-tag setup (CodePen / demos / drop-into-any-HTML):**
+
+```html
+<!-- CSS: all primitives + the shell tier you use -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.6.30/dist/web-components.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-modules@0.6.30/dist/shell/admin-shell.min.css">
+
+<!-- JS: everything in one bundle (primitives + all 4 shells + a2ui-runtime; ~190 KB gzipped) -->
+<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-modules@0.6.30/dist/everything.min.js"></script>
+
+<admin-shell mode="rounded borderless">
+  <admin-sidebar><!-- nav --></admin-sidebar>
+  <admin-content>
+    <button-ui variant="primary" text="Click me"></button-ui>
+  </admin-content>
+</admin-shell>
+```
+
+**Per-shell setup (advanced — only one shell tier loaded):**
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.6.30/dist/web-components.min.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-modules@0.6.30/dist/shell/admin-shell.min.js"></script>
+```
+
+| Bundle | Path | Gzipped | Contents | When to use |
+|---|---|---|---|---|
+| **Everything** | `/dist/everything.min.js` | **~250 KB** | All primitives + a2ui-runtime + all 4 shells | **CodePen / one-tag demos** |
+| Admin shell | `/dist/shell/admin-shell.min.js` | ~6 KB | Shell registration; needs `web-components.min.js` first | Admin app, no chat/editor |
+| Chat shell | `/dist/chat/chat-shell.min.js` | ~230 KB | Includes chat-thread/composer | Chat surface |
+| Editor shell | `/dist/editor/editor-shell.min.js` | ~6 KB | Shell registration; needs primitives first | Editor surface |
+| Simple shell | `/dist/simple/simple-shell.min.js` | ~5.6 KB | Shell registration; needs primitives first | Settings / forms |
+
+**Pick ONE bundle path.** Mixing `everything.min.js` with a separate `web-components.min.js` causes `customElements.define` to throw "name already defined". For CodePen the kitchen-sink path is correct.
+
+**npm-installed consumers stay on the existing cluster exports** (`./shell`, `./chat`, etc.). The new `*/bundled` (CSS) and `*/js-bundled` + `./everything` (JS) exports are additive — only consumers without a bundler need them.
+
+See the [CDN usage guide](https://ui-kit.exe.xyz/site/cdn-usage) for a full CodePen template + worked examples.
+
+### Using with AI agents
+
+When composing UI with an AI coding agent (Claude Code / Cursor / Windsurf / Claude Desktop), load the **`adia-ui-kit` skill** in the harness — it encodes the 95-primitive catalog, composition patterns for all shells (admin / chat / editor / simple), and the Plan-Execute-Verify discipline that renders the composed surface in a real demo to verify intent. Skill lives at [`.agents/skills/adia-ui-kit/`](https://github.com/adiahealth/gen-ui-kit/tree/main/.agents/skills/adia-ui-kit) in the repo.
+
 `@adia-ai/web-components` is **always required** (modules compose primitives at runtime). Two additional peer dependencies are declared but **only needed for specific clusters**:
 
 | Peer dependency | Required when you use |
@@ -120,7 +167,7 @@ hunt for it:
 Future clusters on the strategic horizon: `data` (kanban, filters,
 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.
+See [`adia-ui-authoring` skill, `references/shell-patterns.md`](../../.agents/skills/adia-ui-authoring/references/shell-patterns.md) (absorbed `bespoke-shell-children`) for the canonical decomposition recipe used by all three families.
 
 ## Quick start
 
@@ -244,7 +291,7 @@ All `<*-shell>` hosts are **behavior-only orchestrators** — they reflect state
 - **JS-bearing children** carry `connected()`/`disconnected()` lifecycle for interactive behavior (`admin-sidebar` resize, `admin-command` palette, `chat-thread` streaming scroll, `editor-canvas` zoom, etc.).
 - **CSS-only children** (no `.js` file — only `.yaml` + `.css` + `.a2ui.json`) declare slot intent for the host's styling system to attach against. Don't author a `.js` for these; the host handles their behavior via attribute selectors.
 
-The decomposition recipe (when to JS-bearing vs CSS-only, how to namespace state attributes, slot vocabulary conventions) is captured in the [`bespoke-shell-children` skill](../../.agents/skills/bespoke-shell-children/SKILL.md).
+The decomposition recipe (when to JS-bearing vs CSS-only, how to namespace state attributes, slot vocabulary conventions) is captured in the [`adia-ui-authoring` skill, `references/shell-patterns.md`](../../.agents/skills/adia-ui-authoring/references/shell-patterns.md) (absorbed `bespoke-shell-children`).
 
 ## License
 

package/dist/chat/chat-shell.min.css

@@ -0,0 +1 @@
+:where(chat-shell){--chat-bg:var(--a-canvas-0);--chat-border:unset;--chat-radius:unset;--chat-header-height:var(--a-chrome-app-header-height);--chat-header-px:var(--a-space-4);--chat-header-gap:var(--a-space-2);--chat-header-border:1px solid var(--a-border-subtle);--chat-messages-px:var(--a-space-4);--chat-messages-py:var(--a-space-4);--chat-messages-gap:var(--a-space-3);--chat-message-max-width:85%;--chat-user-bg:var(--a-primary);--chat-user-fg:var(--a-primary-fg);--chat-user-radius:var(--a-radius-md);--chat-user-tail-radius:var(--a-radius-sm);--chat-user-px:var(--a-space-3);--chat-user-py:var(--a-space-1);--chat-assistant-bg:var(--a-canvas-2);--chat-assistant-fg:var(--a-fg);--chat-assistant-radius:var(--a-radius-lg);--chat-assistant-tail-radius:var(--a-radius-sm);--chat-assistant-px:var(--a-space-3);--chat-assistant-py:var(--a-space-1);--chat-avatar-size:1.75rem;--chat-avatar-bg:var(--chat-assistant-bg);--chat-avatar-fg:var(--chat-assistant-fg);--chat-avatar-font:var(--a-ui-sm);--chat-avatar-weight:var(--a-weight-semibold);--chat-cursor-width:2px;--chat-cursor-color:currentColor;--chat-cursor-speed:.8s;--chat-footer-px:var(--a-space-3);--chat-footer-py:var(--a-space-3);--chat-actions-gap:var(--a-space-1);--chat-code-bg:var(--a-canvas-2);--chat-code-radius:var(--a-radius-md);--chat-font-size:var(--a-ui-size);--chat-line-height:var(--a-leading-normal);--chat-weight-semibold:var(--a-weight-semibold);--chat-header-name-font:var(--a-ui-lg);--chat-header-status-font:var(--a-ui-md);--chat-header-status-fg:var(--a-fg-muted);--chat-error-gap:var(--a-space-2);--chat-error-fg:var(--a-danger-strong);--chat-error-font:var(--a-ui-sm);--chat-actions-duration:var(--a-duration-fast);--chat-actions-easing:var(--a-easing);--chat-avatar-radius:var(--a-radius-full);--chat-thinking-fg:var(--a-fg-muted);--chat-code-inline-radius:var(--a-radius-sm);--chat-code-inline-family:var(--a-font-family-code);--chat-code-block-px:var(--a-space-3);--chat-code-block-my:var(--a-space-2);--chat-code-block-font:var(--a-ui-sm)}chat-shell{box-sizing:border-box;border:var(--chat-border);border-radius:var(--chat-radius);background:var(--chat-bg);flex-direction:column;height:100%;display:flex;overflow:hidden}chat-shell>header{align-items:center;gap:var(--chat-header-gap);min-height:var(--chat-header-height);padding:0 var(--chat-header-px);border-bottom:var(--chat-header-border);flex-shrink:0;display:flex}chat-shell>header [data-chat-name]{font-weight:var(--chat-weight-semibold);font-size:var(--chat-header-name-font)}chat-shell>header chat-status{font-size:var(--chat-header-status-font);color:var(--chat-header-status-fg);margin-inline-start:auto}chat-shell>chat-thread,chat-shell>section{padding:var(--chat-messages-py) var(--chat-messages-px);gap:var(--chat-messages-gap);flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}chat-shell>footer{padding:var(--chat-footer-py) var(--chat-footer-px);flex-shrink:0;align-items:center;display:flex}chat-shell>footer chat-input-ui{flex:1}chat-shell [data-role]{gap:var(--chat-header-gap);max-width:var(--chat-message-max-width);align-items:flex-end;display:flex}chat-shell [data-role=user]{flex-direction:row-reverse;align-self:flex-end}chat-shell [data-role=assistant]{align-self:flex-start}chat-shell [data-role] [data-avatar]{width:var(--chat-avatar-size);height:var(--chat-avatar-size);border-radius:var(--chat-avatar-radius);background:var(--chat-avatar-bg);color:var(--chat-avatar-fg);font-size:var(--chat-avatar-font);font-weight:var(--chat-avatar-weight);flex-shrink:0;justify-content:center;align-items:center;display:flex}chat-shell [data-role] [data-bubble]{padding:var(--chat-assistant-py) var(--chat-assistant-px);border-radius:var(--chat-assistant-radius);font-size:var(--chat-font-size);line-height:var(--chat-line-height);white-space:pre-wrap;word-break:break-word}chat-shell [data-role] [data-bubble]>:first-child{margin-block-start:0}chat-shell [data-role] [data-bubble]>:last-child{margin-block-end:0}chat-shell [data-role=user] [data-bubble]{background:var(--chat-user-bg);color:var(--chat-user-fg);padding:var(--chat-user-py) var(--chat-user-px);border-radius:var(--chat-user-radius);border-bottom-right-radius:var(--chat-user-tail-radius)}chat-shell [data-role=assistant] [data-bubble]{background:var(--chat-assistant-bg);color:var(--chat-assistant-fg);border-bottom-left-radius:var(--chat-assistant-tail-radius)}chat-shell [data-role=error]{align-self:center;align-items:center;gap:var(--chat-error-gap);max-width:none;color:var(--chat-error-fg);font-size:var(--chat-error-font);display:flex}chat-shell [data-role] [data-actions]{gap:var(--chat-actions-gap);opacity:0;transition:opacity var(--chat-actions-duration) var(--chat-actions-easing);display:flex}chat-shell [data-role]:hover [data-actions]{opacity:1}chat-shell [data-cursor]{width:var(--chat-cursor-width);background:var(--chat-cursor-color);vertical-align:text-bottom;height:1em;animation:chat-shell-blink var(--chat-cursor-speed) step-end infinite;margin-inline-start:1px;display:inline-block}@keyframes chat-shell-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){chat-shell [data-cursor]{opacity:.7;animation:none}}chat-shell [data-role=assistant][data-thinking] [data-bubble]{color:var(--chat-thinking-fg)}chat-shell [data-bubble] [data-content]{white-space:normal}chat-shell [data-bubble] [data-content] p{margin:0 0 .5em}chat-shell [data-bubble] [data-content] p:last-child{margin-bottom:0}chat-shell [data-bubble] [data-content] strong{font-weight:var(--chat-weight-semibold)}chat-shell [data-bubble] [data-content] code{background:var(--chat-code-bg);border-radius:var(--chat-code-inline-radius);font-family:var(--chat-code-inline-family);padding:.1em .15em;font-size:.875em}chat-shell [data-bubble] [data-content] pre{background:var(--chat-code-bg);border-radius:var(--chat-code-radius);padding:var(--chat-code-block-px);margin:var(--chat-code-block-my) 0;font-size:var(--chat-code-block-font);line-height:1.5;overflow-x:auto}chat-shell [data-bubble] [data-content] pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}chat-shell [data-bubble] [data-content] ul,chat-shell [data-bubble] [data-content] ol{margin:.25em 0;padding-inline-start:1.25em}chat-shell [data-bubble] [data-content] li{margin-bottom:.15em}chat-shell [data-bubble] [data-content] a{color:inherit;text-underline-offset:2px;text-decoration:underline}chat-shell [data-bubble] [data-content] h1,chat-shell [data-bubble] [data-content] h2,chat-shell [data-bubble] [data-content] h3,chat-shell [data-bubble] [data-content] h4{font-weight:var(--chat-weight-semibold);margin:.75em 0 .25em}chat-shell [data-bubble] [data-content] h1:first-child,chat-shell [data-bubble] [data-content] h2:first-child,chat-shell [data-bubble] [data-content] h3:first-child{margin-top:0}chat-shell chat-empty{margin:auto}chat-shell[streaming] chat-empty,chat-shell:has([data-role]) chat-empty{display:none}chat-shell>chat-header,chat-sidebar>chat-header[slot=header],chat-sidebar>chat-header:first-child{align-items:center;gap:var(--chat-header-gap,var(--a-space-2));padding:0 var(--chat-header-px,var(--a-space-3));height:var(--chat-header-height,var(--a-size-lg));font-size:var(--chat-header-font,var(--a-ui-size));border-bottom:var(--chat-border,1px solid var(--a-border-subtle));background:var(--chat-bg,var(--a-bg));flex-shrink:0;display:flex}chat-header>[slot=name]{font-weight:var(--a-weight-medium,500);color:var(--a-fg)}chat-header>[slot=status]{margin-inline-start:var(--a-space-2)}chat-header>[slot=action]:first-of-type{margin-inline-start:auto}chat-header>[slot=action-leading]{margin-inline-end:var(--a-space-2)}chat-status{align-items:center;gap:var(--a-space-1);font-size:var(--a-ui-sm);color:var(--a-fg-muted);display:inline-flex}chat-shell>chat-thread{overscroll-behavior:contain;gap:var(--chat-message-gap,var(--a-space-3));min-height:0;padding:var(--chat-thread-py,var(--a-space-4)) var(--chat-thread-px,var(--a-space-4));background:var(--chat-thread-bg,var(--a-bg));flex-direction:column;flex:1;display:flex;overflow-y:auto}chat-thread:not([empty])>chat-empty{display:none}chat-thread[empty]>chat-empty{padding:var(--a-space-6);flex:1;justify-content:center;align-items:center;display:flex}chat-shell>chat-composer{align-items:stretch;gap:var(--a-space-2);padding:var(--chat-composer-py,var(--a-space-3)) var(--chat-composer-px,var(--a-space-3));border-top:var(--chat-border,1px solid var(--a-border-subtle));background:var(--chat-bg,var(--a-bg));flex-shrink:0;display:flex}chat-composer>[slot=leading],chat-composer>[slot=attach],chat-composer>[slot=trailing]{align-items:center;gap:var(--a-space-1);flex-shrink:0;display:inline-flex}chat-composer>:is(chat-input-ui,input-ui,textarea-ui){flex:1;min-width:0}chat-composer[disabled]{opacity:.6;pointer-events:none}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing]){min-width:var(--chat-sidebar-min-width,48px);max-width:var(--chat-sidebar-max-width,480px);min-height:0;font-size:var(--chat-sidebar-font,var(--a-ui-size));transition:width var(--chat-duration,var(--a-duration,.2s)) var(--chat-easing,var(--a-easing,ease));background:var(--chat-bg,var(--a-bg));flex-direction:column;flex-shrink:0;display:flex;position:relative;container:sidebar/inline-size}chat-sidebar[slot=leading]{width:var(--chat-sidebar-width-leading,240px);border-right:var(--chat-border,1px solid var(--a-border-subtle))}chat-sidebar[slot=trailing]{width:var(--chat-sidebar-width-trailing,320px);border-left:var(--chat-border,1px solid var(--a-border-subtle))}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing])>[data-resize]{cursor:col-resize;z-index:1;-webkit-user-select:none;user-select:none;width:6px;position:absolute;top:0;bottom:0}chat-sidebar[slot=leading]>[data-resize]{right:-3px}chat-sidebar[slot=trailing]>[data-resize]{left:-3px}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing])>[data-resize]:hover{background:var(--a-accent);opacity:.5}chat-sidebar[resizing]{transition:none}chat-sidebar[resizing]>[data-resize]{background:var(--a-accent);opacity:.8}chat-shell:has(>chat-sidebar){flex-direction:row;display:flex}chat-shell:has(>chat-sidebar)>:not(chat-sidebar){display:contents}