@adia-ai/web-modules 0.0.4

package/chat/chat-shell/css/chat-shell.tokens.css

@@ -0,0 +1,95 @@
+/* ═══════════════════════════════════════════════════════════════
+   chat-shell — Design tokens
+   ═══════════════════════════════════════════════════════════════ */
+
+:where(chat-shell) {
+  /* Layout */
+  --chat-bg:                    var(--a-canvas-0);
+  --chat-border:                unset;
+  --chat-radius:                unset;
+
+  /* Header */
+  --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);
+
+  /* Messages area */
+  --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%;
+
+  /* User bubble */
+  --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);
+
+  /* Assistant bubble */
+  --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);
+
+  /* Avatar */
+  --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);
+
+  /* Streaming cursor */
+  --chat-cursor-width:          2px;
+  --chat-cursor-color:          currentColor;
+  --chat-cursor-speed:          0.8s;
+
+  /* Footer / input area */
+  --chat-footer-px:             var(--a-space-3);
+  --chat-footer-py:             var(--a-space-3);
+
+  /* Message actions */
+  --chat-actions-gap:           var(--a-space-1);
+
+  /* Code blocks inside messages */
+  --chat-code-bg:               var(--a-canvas-2);
+  --chat-code-radius:           var(--a-radius-md);
+
+  /* Typography */
+  --chat-font-size:             var(--a-ui-size);
+  --chat-line-height:           var(--a-leading-normal);
+  --chat-weight-semibold:       var(--a-weight-semibold);
+
+  /* Header typography */
+  --chat-header-name-font:      var(--a-ui-lg);
+  --chat-header-status-font:    var(--a-ui-md);
+  --chat-header-status-fg:      var(--a-fg-muted);
+
+  /* Error */
+  --chat-error-gap:             var(--a-space-2);
+  --chat-error-fg:              var(--a-danger-strong);
+  --chat-error-font:            var(--a-ui-sm);
+
+  /* Message actions */
+  --chat-actions-duration:      var(--a-duration-fast);
+  --chat-actions-easing:        var(--a-easing);
+
+  /* Avatar */
+  --chat-avatar-radius:         var(--a-radius-full);
+
+  /* Streaming — thinking */
+  --chat-thinking-fg:           var(--a-fg-muted);
+
+  /* Markdown — inline code */
+  --chat-code-inline-radius:    var(--a-radius-sm);
+  --chat-code-inline-family:    var(--a-font-family-code);
+
+  /* Markdown — pre blocks */
+  --chat-code-block-px:         var(--a-space-3);
+  --chat-code-block-my:         var(--a-space-2);
+  --chat-code-block-font:       var(--a-ui-sm);
+}

package/chat/index.js

@@ -0,0 +1 @@
+export { ChatShell } from './chat-shell/chat-shell.js';

package/editor/editor-shell/css/editor-shell.layout.css

@@ -0,0 +1,171 @@
+/* ═══════════════════════════════════════════════════════════════
+   editor-shell — Layout
+
+   Structure:
+     editor-shell
+       header                — topbar
+       [data-editor-body]    — flex row: pane | canvas | pane
+         pane-ui              — left navigator
+         [data-canvas]       — center canvas
+         pane-ui              — right inspector
+       footer                — bottombar
+   ═══════════════════════════════════════════════════════════════ */
+
+editor-shell {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: var(--editor-bg);
+}
+
+/* ── Top bar ──
+   Slot contract (shared with > footer below):
+     [slot="icon"]        leading glyph (status dot, app icon, etc.)
+     [slot="heading"]     primary label; strong-weight token
+     [slot="description"] secondary metadata; muted
+     [slot="action"]      trailing control cluster; first pushes to end
+   Authors may also place raw inline content (spans, buttons) directly
+   — those flow in source order. `[data-title]` / `<span data-spacer>`
+   are kept working for one release as deprecated hooks; migrate to
+   slots. */
+editor-shell > header {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  min-height: var(--editor-bar-height);
+  padding: 0 var(--editor-bar-px);
+  border-bottom: var(--editor-border);
+  font-size: var(--editor-bar-font);
+  color: var(--editor-bar-fg);
+  flex-shrink: 0;
+}
+
+editor-shell > header [data-title],
+editor-shell > header > [slot="heading"] {
+  font-weight: var(--editor-title-weight);
+  color: var(--editor-bar-fg-strong);
+}
+
+editor-shell > header > [slot="icon"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--editor-bar-fg);
+}
+
+editor-shell > header > [slot="description"] {
+  color: var(--editor-bar-fg);
+  font-size: var(--a-ui-sm);
+}
+
+editor-shell > header > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+
+editor-shell > header > [slot="action"] ~ [slot="action"] {
+  margin-inline-start: 0;
+}
+
+/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
+editor-shell > header > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  flex-shrink: 0;
+  margin-inline-end: auto;
+}
+
+/* ── Body: pane | canvas | pane ── */
+editor-shell > [data-editor-body] {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* ── Canvas ── */
+editor-shell [data-canvas] {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--editor-canvas-bg);
+  color: var(--editor-canvas-fg);
+}
+
+/* ── Panes ── */
+editor-shell pane-ui {
+  --pane-radius: 0;
+  height: 100%;
+  flex-shrink: 0;
+}
+
+editor-shell pane-ui[data-left] {
+  width: var(--editor-pane-width-left);
+}
+
+editor-shell pane-ui[data-right] {
+  width: var(--editor-pane-width-right);
+}
+
+/* ── Bottom bar ──
+   Same slot contract as > header above (icon / heading / description
+   / action). Statusbar is structurally identical to the topbar —
+   both are 36px-min chrome bands with left-aligned label content and
+   a trailing action cluster. */
+editor-shell > footer {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  min-height: var(--editor-bar-height);
+  padding: 0 var(--editor-bar-px);
+  border-top: var(--editor-border);
+  font-size: var(--editor-bar-font);
+  color: var(--editor-bar-fg);
+  flex-shrink: 0;
+}
+
+editor-shell > footer > [slot="heading"] {
+  font-weight: var(--editor-title-weight);
+  color: var(--editor-bar-fg-strong);
+}
+
+editor-shell > footer > [slot="icon"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--editor-bar-fg);
+}
+
+editor-shell > footer > [slot="description"] {
+  color: var(--editor-bar-fg);
+  font-size: var(--a-ui-sm);
+}
+
+editor-shell > footer > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+
+editor-shell > footer > [slot="action"] ~ [slot="action"] {
+  margin-inline-start: 0;
+}
+
+/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
+editor-shell > footer > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  flex-shrink: 0;
+  margin-inline-end: auto;
+}

package/editor/editor-shell/css/editor-shell.tokens.css

@@ -0,0 +1,28 @@
+/* ═══════════════════════════════════════════════════════════════
+   editor-shell — Design tokens
+   ═══════════════════════════════════════════════════════════════ */
+
+:where(editor-shell) {
+  /* Shell */
+  --editor-bg:              var(--a-canvas-0);
+  --editor-border:          1px solid var(--a-border-subtle);
+
+  /* Top/bottom bars */
+  --editor-bar-height:      var(--a-chrome-pane-header-height);
+  --editor-bar-px:          var(--a-space-3);
+  --editor-bar-gap:         var(--a-space-2);
+  --editor-bar-font:        var(--a-ui-size);
+  --editor-bar-fg:          var(--a-fg-subtle);
+  --editor-bar-fg-strong:   var(--a-fg);
+
+  /* Canvas */
+  --editor-canvas-bg:       var(--a-bg);
+  --editor-canvas-fg:       var(--a-fg-muted);
+
+  /* Typography */
+  --editor-title-weight:     var(--a-weight-medium);
+
+  /* Panes */
+  --editor-pane-width-left:  240px;
+  --editor-pane-width-right: 280px;
+}

package/editor/editor-shell/editor-shell.a2ui.json

@@ -0,0 +1,73 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/EditorShell.json",
+  "title": "EditorShell",
+  "description": "Behavior-only editor shell module for design-tool layouts. Author\nprovides the structural DOM — header (topbar), [data-editor-body] with\npane-ui children ([data-left], [data-right]), [data-canvas] for the\ncentral surface, and a footer (statusbar). editor-shell wires\nselect-ui[data-options] for JSON-parsed option lists.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "EditorShell"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "editor-shell",
+      "editor",
+      "design-tool",
+      "canvas-shell"
+    ],
+    "name": "EditorShell",
+    "related": [
+      "Pane",
+      "Select",
+      "Toolbar"
+    ],
+    "slots": {
+      "description": {
+        "description": "Secondary metadata inside <header> or <footer> — document name, artboard size, zoom level, etc. Muted color, --a-ui-sm size."
+      },
+      "default": {
+        "description": "Author provides header, [data-editor-body] wrapping pane-ui[data-left], [data-canvas], pane-ui[data-right], and an optional footer."
+      },
+      "action": {
+        "description": "Trailing control cluster inside <header> or <footer>. The first [slot=\"action\"] child pushes itself (and siblings) to the end of the bar; subsequent [slot=\"action\"] siblings flow with gap."
+      },
+      "action-leading": {
+        "description": "Leading (inline-start) control cluster inside <header> or <footer>. Pairs with [slot=\"action\"] to produce a dual-cluster bar with space-between alignment (e.g. Back ↔ Cancel/Next, Discard ↔ Publish). Replaces the legacy <span data-spacer> hack."
+      },
+      "heading": {
+        "description": "Primary label inside <header> or <footer>. Rendered with --editor-title-weight + the strong foreground token."
+      },
+      "icon": {
+        "description": "Leading glyph inside <header> or <footer> — status dot, app icon, zoom badge, etc. Muted color, size-aware."
+      }
+    },
+    "states": [
+      {
+        "description": "Default.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "editor-shell",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/editor/editor-shell/editor-shell.css

@@ -0,0 +1,6 @@
+/* ═══════════════════════════════════════════════════════════════
+   editor-shell — Module CSS (editor layout shell)
+   ═══════════════════════════════════════════════════════════════ */
+
+@import "./css/editor-shell.tokens.css";
+@import "./css/editor-shell.layout.css";

package/editor/editor-shell/editor-shell.js

@@ -0,0 +1,56 @@
+import { UIElement } from '../../../web-components/core/element.js';
+
+/**
+ * <editor-shell> — Editor layout pattern.
+ *
+ * Behavior-only orchestrator for design tool UIs:
+ * topbar, navigator pane, center canvas, inspector pane, bottombar.
+ *
+ * Structure:
+ *   <editor-shell>
+ *     <header>
+ *       <span data-title>Editor</span>
+ *       <span data-spacer></span>
+ *       <button-ui icon="gear" variant="ghost" size="sm"></button-ui>
+ *     </header>
+ *     <div data-editor-body>
+ *       <pane-ui data-left resizable>
+ *         <header>Navigator</header>
+ *         <section>...tree, layers...</section>
+ *       </pane-ui>
+ *       <div data-canvas>
+ *         ...canvas content...
+ *       </div>
+ *       <pane-ui data-right resizable>
+ *         <header>Inspector</header>
+ *         <section>...form fields...</section>
+ *         <footer>...actions...</footer>
+ *       </pane-ui>
+ *     </div>
+ *     <footer>
+ *       <span>Ready</span>
+ *       <span data-spacer></span>
+ *       <span>100%</span>
+ *     </footer>
+ *   </editor-shell>
+ */
+class EditorShell extends UIElement {
+  static template = () => null;
+
+  connected() {
+    // Wire select options if present
+    this.#wireSelects();
+  }
+
+  #wireSelects() {
+    for (const sel of this.querySelectorAll('select-ui[data-options]')) {
+      try {
+        const opts = JSON.parse(sel.getAttribute('data-options'));
+        sel.options = opts;
+      } catch { /* skip invalid */ }
+    }
+  }
+}
+
+customElements.define('editor-shell', EditorShell);
+export { EditorShell };

package/editor/editor-shell/editor-shell.yaml

@@ -0,0 +1,59 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: EditorShell
+tag: editor-shell
+component: EditorShell
+category: container
+version: 1
+description: |
+  Behavior-only editor shell module for design-tool layouts. Author
+  provides the structural DOM — header (topbar), [data-editor-body] with
+  pane-ui children ([data-left], [data-right]), [data-canvas] for the
+  central surface, and a footer (statusbar). editor-shell wires
+  select-ui[data-options] for JSON-parsed option lists.
+
+props: {}   # Pure wrapper — no own props.
+
+events: {}   # Child interactions bubble through.
+
+slots:
+  default:
+    description: >-
+      Author provides header, [data-editor-body] wrapping pane-ui[data-left],
+      [data-canvas], pane-ui[data-right], and an optional footer.
+  icon:
+    description: >-
+      Leading glyph inside <header> or <footer> — status dot, app icon,
+      zoom badge, etc. Muted color, size-aware.
+  heading:
+    description: >-
+      Primary label inside <header> or <footer>. Rendered with
+      --editor-title-weight + the strong foreground token.
+  description:
+    description: >-
+      Secondary metadata inside <header> or <footer> — document name,
+      artboard size, zoom level, etc. Muted color, --a-ui-sm size.
+  action:
+    description: >-
+      Trailing control cluster inside <header> or <footer>. The first
+      [slot="action"] child pushes itself (and siblings) to the end of
+      the bar; subsequent [slot="action"] siblings flow with gap.
+  action-leading:
+    description: >-
+      Leading (inline-start) control cluster inside <header> or <footer>.
+      Pairs with [slot="action"] to produce a dual-cluster bar with
+      space-between alignment (e.g. Back ↔ Cancel/Next, Discard ↔
+      Publish). Replaces the legacy <span data-spacer> hack.
+
+states:
+  - name: idle
+    description: Default.
+
+traits: []
+
+a2ui:
+  rules:
+    - editor-shell is a layout skeleton. Children must follow the documented
+      structural DOM; the element wires behavior, not content.
+
+keywords: [editor-shell, editor, design-tool, canvas-shell]
+related: [Pane, Select, Toolbar]

package/editor/index.js

@@ -0,0 +1 @@
+export { EditorShell } from './editor-shell/editor-shell.js';

package/index.js

@@ -0,0 +1,14 @@
+// Barrel re-export — `import '@adia-ai/web-modules'` registers every
+// cluster's elements. Consumers wanting a single cluster should
+// import the cluster subpath instead, e.g.:
+//
+//   import '@adia-ai/web-modules/shell';
+//   import '@adia-ai/web-modules/chat';
+//
+// Cluster organization is captured in
+// /.brain/adrs/0012-three-tier-architecture-modules.md.
+
+export * from './shell/index.js';
+export * from './chat/index.js';
+export * from './editor/index.js';
+export * from './runtime/index.js';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@adia-ai/web-modules",
+  "version": "0.0.4",
+  "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",
+    "./shell":        "./shell/index.js",
+    "./shell/*":      "./shell/*/*.js",
+    "./chat":         "./chat/index.js",
+    "./chat/*":       "./chat/*/*.js",
+    "./editor":       "./editor/index.js",
+    "./editor/*":     "./editor/*/*.js",
+    "./runtime":      "./runtime/index.js",
+    "./runtime/*":    "./runtime/*/*.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "shell/",
+    "chat/",
+    "editor/",
+    "runtime/",
+    "index.js",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "*.css",
+    "./index.js",
+    "./shell/**/*.js",
+    "./chat/**/*.js",
+    "./editor/**/*.js",
+    "./runtime/**/*.js"
+  ],
+  "peerDependencies": {
+    "@adia-ai/web-components": ">=0.0.33",
+    "@adia-ai/a2ui-utils": "^0.0.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/adiahealth/gen-ui-kit.git",
+    "directory": "packages/web-modules"
+  }
+}

package/runtime/a2ui-root/a2ui-root.a2ui.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/A2UIRoot.json",
+  "title": "A2UIRoot",
+  "description": "A2UI protocol surface. Connects to a stream source (SSE, WebSocket, JSONL, MCP) and renders A2UI messages as AdiaUI components via the `@adia-ai/a2ui-utils` renderer.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "active": {
+      "description": "True while the stream is connected and receiving messages.",
+      "type": "boolean",
+      "default": false
+    },
+    "batch": {
+      "description": "Batch renderer updates via requestAnimationFrame for large fan-in.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "A2UIRoot"
+    },
+    "doc": {
+      "description": "Author-driven mode — set to an array of A2UI messages and the renderer resets + replays them. No network/transport involvement. Setting to a new array triggers a full re-render. Use this for editors, previews, tests, and any static-doc authoring loop. When both `src` and `doc` are set, `doc` wins (the stream is not opened). Pass as a JS property; not reflected to an attribute.",
+      "type": "array"
+    },
+    "loading": {
+      "description": "True while the stream is connecting.",
+      "type": "boolean",
+      "default": false
+    },
+    "src": {
+      "description": "Stream source URL (endpoint for SSE/WebSocket, file path for JSONL, tool-call target for MCP).",
+      "type": "string",
+      "default": ""
+    },
+    "transport": {
+      "description": "Stream transport to use.",
+      "type": "string",
+      "enum": [
+        "sse",
+        "ws",
+        "websocket",
+        "jsonl",
+        "mcp"
+      ],
+      "default": "sse"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "a2ui-action": {
+        "description": "Fired when a child element with [data-action] is clicked. detail: { name, sourceComponentId, context }"
+      },
+      "a2ui-closed": {
+        "description": "Fired when the stream ends."
+      },
+      "a2ui-connected": {
+        "description": "Fired when the stream is established."
+      },
+      "a2ui-error": {
+        "description": "Fired when the stream errors. detail: { error }"
+      },
+      "a2ui-message": {
+        "description": "Fired for each A2UI message received. detail: { message }"
+      },
+      "doc-replaced": {
+        "description": "Fired after a full doc reset + replay in author-driven mode. detail: { count }"
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "a2ui",
+      "protocol",
+      "renderer",
+      "stream",
+      "surface",
+      "sse",
+      "websocket",
+      "jsonl",
+      "mcp"
+    ],
+    "name": "A2UIRoot",
+    "related": [
+      "canvas",
+      "inspector"
+    ],
+    "slots": {
+      "default": {
+        "description": "The rendered surface. Children are stamped by the A2UI renderer."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready to connect.",
+        "name": "idle"
+      },
+      {
+        "description": "Stream is connecting.",
+        "name": "loading"
+      },
+      {
+        "description": "Stream is connected and receiving messages.",
+        "name": "active"
+      }
+    ],
+    "synonyms": {},
+    "tag": "a2ui-root",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}