@adia-ai/web-components 0.0.1

package/patterns/gen-ui/gen-ui.a2ui.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/GenUI.json",
+  "title": "GenUI",
+  "description": "Composition shell for chat + canvas generative UI. Manages layout modes\n(chat-only / split / canvas-only) and delegates a unified API across\nchild chat-ui, canvas-ui, and inspector-ui elements.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "GenUI"
+    },
+    "inspector": {
+      "description": "Show the inspector pane (for debugging generated A2UI).",
+      "type": "boolean",
+      "default": false
+    },
+    "mode": {
+      "description": "Layout mode — chat-only, 50/50 split, or canvas-only.",
+      "type": "string",
+      "enum": [
+        "chat",
+        "split",
+        "canvas"
+      ],
+      "default": "chat"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "gen-ui",
+      "generative-ui",
+      "chat-canvas",
+      "agent-shell"
+    ],
+    "name": "AdiaGenUI",
+    "related": [
+      "AppShell",
+      "Chat"
+    ],
+    "slots": {
+      "default": {
+        "description": "Author supplies chat-ui, canvas-ui, and optional inspector-ui children."
+      }
+    },
+    "states": [
+      {
+        "description": "Default mode=chat.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "gen-ui-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/patterns/gen-ui/gen-ui.css

@@ -0,0 +1,83 @@
+@scope (gen-ui-ui) {
+
+  /* ═══════════════════════════════════════════════════════
+     SHELL HOST — full bleed, no card chrome
+     ═══════════════════════════════════════════════════════ */
+
+  :scope {
+    box-sizing:          border-box;
+    display:             grid;
+    height:              100%;
+    min-height:          0;
+    background:          var(--chat-bg, var(--a-canvas-0));
+    font-family:         var(--a-font-family);
+    overflow:            hidden;
+
+    /* Default: chat mode — single column */
+    grid-template-columns: 1fr;
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     MODE: CHAT (initial screen — thread only, full width)
+     ═══════════════════════════════════════════════════════ */
+
+  :scope[mode="chat"] {
+    grid-template-columns: 1fr;
+  }
+
+  :scope[mode="chat"] > canvas-ui {
+    display:             none;
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     MODE: SPLIT (dialog left + canvas right)
+     ═══════════════════════════════════════════════════════ */
+
+  :scope[mode="split"] {
+    grid-template-columns: minmax(320px, 1fr) 1.5fr;
+  }
+
+  :scope[mode="split"] > thread-n {
+    border-right:        var(--a-border-thin) solid var(--a-canvas-border-subtle);
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     MODE: CANVAS (canvas only)
+     ═══════════════════════════════════════════════════════ */
+
+  :scope[mode="canvas"] {
+    grid-template-columns: 1fr;
+  }
+
+  :scope[mode="canvas"] > thread-n {
+    display:             none;
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     INSPECTOR
+     ═══════════════════════════════════════════════════════ */
+
+  :scope > inspector-ui {
+    display:             none;
+  }
+
+  :scope[inspector] > inspector-ui {
+    display:             flex;
+    border-left:         var(--a-border-thin) solid var(--a-canvas-border-subtle);
+  }
+
+  :scope[mode="split"][inspector] {
+    grid-template-columns: minmax(320px, 1fr) 1.5fr 1fr;
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     CHILDREN — fill grid cells
+     ═══════════════════════════════════════════════════════ */
+
+  :scope > thread-n,
+  :scope > canvas-ui,
+  :scope > inspector-ui {
+    min-height:          0;
+    min-width:           0;
+  }
+}

package/patterns/gen-ui/gen-ui.js

@@ -0,0 +1,136 @@
+import { AdiaElement } from '@core/element.js';
+import '../../components/chat/chat.js';
+import '../../components/canvas/canvas.js';
+import '../../components/inspector/inspector.js';
+
+/**
+ * <gen-ui-ui> — Composition shell for chat + canvas generative UI.
+ *
+ * Modes:
+ *   chat   — thread only, full width
+ *   split  — thread left + canvas right (50/50)
+ *   canvas — canvas only, thread hidden
+ *
+ * Consumer-owns-LLM: forwards all events from children, never calls fetch.
+ *
+ * Events (forwarded):
+ *   chat-submit          — from thread
+ *   suggestion-select    — from thread
+ *   canvas-interaction   — from canvas
+ */
+export class AdiaGenUI extends AdiaElement {
+  static properties = {
+    mode: { type: String, default: 'chat', reflect: true },
+    inspector: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #bound = false;
+  #threadEl = null;
+  #canvasEl = null;
+  #inspectorEl = null;
+
+  connected() {
+    // Forward events from children — they bubble, so just re-dispatch isn't needed.
+    // Events already bubble from thread/canvas through this host.
+  }
+
+  render() {
+    if (this.#bound) return;
+    this.#bound = true;
+
+    this.#threadEl = document.createElement('chat-ui');
+    this.#canvasEl = document.createElement('canvas-ui');
+
+    this.appendChild(this.#threadEl);
+    this.appendChild(this.#canvasEl);
+
+    if (this.inspector) {
+      this.#inspectorEl = document.createElement('inspector-ui');
+      this.appendChild(this.#inspectorEl);
+    }
+  }
+
+  // ── Public API ──
+
+  /**
+   * Append a chat message. Delegates to thread.
+   * @param {{ role: string, content: string, avatar?: string }} msg
+   */
+  appendMessage(msg) {
+    this.#threadEl?.appendMessage(msg);
+  }
+
+  /**
+   * Append chain-of-thought. Delegates to thread.
+   * @param {{ text: string }} msg
+   */
+  appendCoT(msg) {
+    this.#threadEl?.appendCoT(msg);
+  }
+
+  /**
+   * Push an artifact to the canvas. Auto-switches to split mode if in chat mode.
+   * @param {object[]} messages — A2UI messages
+   */
+  pushArtifact(messages) {
+    if (this.mode === 'chat') {
+      this.mode = 'split';
+    }
+    this.#canvasEl?.processAll(messages);
+  }
+
+  /**
+   * Set suggestion buttons. Delegates to thread.
+   * @param {{ label: string, prompt: string }[]} items
+   */
+  setSuggestions(items) {
+    this.#threadEl?.setSuggestions(items);
+  }
+
+  /** Append a result message with action buttons. Delegates to thread. */
+  appendResultMessage(opts) { this.#threadEl?.appendResultMessage(opts); }
+
+  /** Show save-pattern bar. Delegates to thread. */
+  showSavePatternBar(opts) { this.#threadEl?.showSavePatternBar(opts); }
+
+  /** Show feedback widget. Delegates to thread. */
+  showFeedbackWidget(opts) { this.#threadEl?.showFeedbackWidget(opts); }
+
+  /** Show typing indicator. Delegates to thread. */
+  showTyping() { this.#threadEl?.showTyping(); }
+
+  /** Hide typing indicator. Delegates to thread. */
+  hideTyping() { this.#threadEl?.hideTyping(); }
+
+  /** Append an error message. Delegates to thread. */
+  appendError(content) { this.#threadEl?.appendError(content); }
+
+  /** Start a pipeline status indicator. Delegates to thread. */
+  startPipelineStatus() { return this.#threadEl?.startPipelineStatus(); }
+
+  /** Update the active pipeline status. Delegates to thread. */
+  updatePipelineStatus(opts) { this.#threadEl?.updatePipelineStatus(opts); }
+
+  /** Mark the active pipeline status as complete. Delegates to thread. */
+  completePipelineStatus() { this.#threadEl?.completePipelineStatus(); }
+
+  /** Reset both thread and canvas. */
+  reset() {
+    this.#threadEl?.clear();
+    this.#canvasEl?.reset();
+    this.mode = 'chat';
+  }
+
+  /** Access the thread element. */
+  get thread() { return this.#threadEl; }
+
+  /** Access the canvas element. */
+  get canvas() { return this.#canvasEl; }
+
+  /** Access the inspector element (null if inspector not enabled). */
+  get inspect() { return this.#inspectorEl; }
+}
+
+customElements.define('gen-ui-ui', AdiaGenUI);

package/patterns/gen-ui/gen-ui.yaml

@@ -0,0 +1,43 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaGenUI
+tag: gen-ui-ui
+component: GenUI
+category: layout
+version: 1
+description: |
+  Composition shell for chat + canvas generative UI. Manages layout modes
+  (chat-only / split / canvas-only) and delegates a unified API across
+  child chat-ui, canvas-ui, and inspector-ui elements.
+
+props:
+  mode:
+    type: string
+    default: chat
+    enum: [chat, split, canvas]
+    reflect: true
+    description: Layout mode — chat-only, 50/50 split, or canvas-only.
+
+  inspector:
+    type: boolean
+    default: false
+    reflect: true
+    description: Show the inspector pane (for debugging generated A2UI).
+
+events: {}
+
+slots:
+  default:
+    description: Author supplies chat-ui, canvas-ui, and optional inspector-ui children.
+
+states:
+  - name: idle
+    description: Default mode=chat.
+
+traits: []
+
+a2ui:
+  rules:
+    - gen-ui-ui is an integration shell. Prefer app-shell-ui for admin UIs; use gen-ui-ui only for chat+canvas tooling.
+
+keywords: [gen-ui, generative-ui, chat-canvas, agent-shell]
+related: [AppShell, Chat]

package/patterns/index.js

@@ -0,0 +1,10 @@
+export { AdiaAppShell }       from './app-shell/app-shell.js';
+export { AdiaAppNav }         from './app-nav/app-nav.js';
+export { AdiaAppNavGroup }    from './app-nav-group/app-nav-group.js';
+export { AdiaAppNavItem }     from './app-nav-item/app-nav-item.js';
+export { AdiaSectionNav }     from './section-nav/section-nav.js';
+export { AdiaSectionNavGroup } from './section-nav-group/section-nav-group.js';
+export { AdiaSectionNavItem } from './section-nav-item/section-nav-item.js';
+export { AdiaGenUI }          from './gen-ui/gen-ui.js';
+export { AdiaChatElement }    from './adia-chat/adia-chat.js';
+export { AdiaEditorElement }  from './adia-editor/adia-editor.js';

package/patterns/section-nav/section-nav.a2ui.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/SectionNav.json",
+  "title": "SectionNav",
+  "description": "Sub-navigation rail container. Sits beside an article when a page lives\ninside an app-shell section that has its own child pages. Can optionally\nrender a heading label above the rail.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "SectionNav"
+    },
+    "divider": {
+      "description": "Render auto-dividers between groups.",
+      "type": "boolean",
+      "default": false
+    },
+    "heading": {
+      "description": "Optional section label (also sets aria-label).",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "nav",
+    "events": {
+      "group-toggle": {
+        "description": "Bubbles from a child section-nav-group-ui[collapsible] on header click.",
+        "detail": {
+          "open": "boolean",
+          "text": "string"
+        }
+      },
+      "nav-select": {
+        "description": "Bubbles from a child section-nav-item-ui on selection.",
+        "detail": {
+          "item": "HTMLElement",
+          "text": "string",
+          "value": "string"
+        }
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "section-nav",
+      "sub-nav",
+      "rail",
+      "side-nav",
+      "docs-nav"
+    ],
+    "name": "AdiaSectionNav",
+    "related": [
+      "AppShell",
+      "SectionNavGroup",
+      "SectionNavItem"
+    ],
+    "slots": {
+      "default": {
+        "description": "section-nav-group-ui and section-nav-item-ui children."
+      }
+    },
+    "states": [
+      {
+        "description": "Default.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "rail": [
+        "section-nav",
+        "sub-nav",
+        "side-nav"
+      ]
+    },
+    "tag": "section-nav-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/patterns/section-nav/section-nav.css

@@ -0,0 +1,59 @@
+/* ═══════════════════════════════════════════
+   SECTION-NAV — container
+   Mirrors app-nav's rhythm: tight gaps, ui-size font,
+   --a-size row heights, --a-ui-px horizontal padding.
+   ═══════════════════════════════════════════ */
+
+@scope (section-nav-ui) {
+  :where(:scope) {
+    --section-nav-gap:       var(--a-space-1);
+    --section-nav-px:        0;
+    --section-nav-py:        0;
+    --section-nav-font-size: var(--a-ui-size);
+
+    --section-nav-heading-fg:     var(--a-fg-muted);
+    --section-nav-heading-size:   var(--a-ui-tiny);
+    --section-nav-heading-weight: var(--a-weight-medium);
+    --section-nav-heading-pad-x:  var(--a-space-2);
+    --section-nav-heading-pad-y:  0;
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-nav-gap);
+    padding: var(--section-nav-py) var(--section-nav-px);
+    font-size: var(--section-nav-font-size);
+    min-width: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: none;
+  }
+
+  :scope::-webkit-scrollbar { display: none; }
+
+  /* Auto-dividers between groups when <section-nav-ui divider>. */
+  :scope[divider] > section-nav-group-ui + section-nav-group-ui,
+  :scope[divider] > section-nav-item-ui  + section-nav-group-ui,
+  :scope[divider] > section-nav-group-ui + section-nav-item-ui {
+    border-top: 1px solid var(--a-border-subtle);
+    margin-top: var(--a-space-1);
+    padding-top: var(--a-space-1);
+  }
+
+  /* Heading rendered from [heading] attribute.
+     No block margin — the flex container's gap handles separation. */
+  :scope[heading]:not([heading=""])::before {
+    content: attr(heading);
+    display: block;
+    padding: var(--section-nav-heading-pad-y) var(--section-nav-heading-pad-x);
+    font-size: var(--section-nav-heading-size);
+    font-weight: var(--section-nav-heading-weight);
+    color: var(--section-nav-heading-fg);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}

package/patterns/section-nav/section-nav.js

@@ -0,0 +1,42 @@
+/**
+ * <section-nav-ui> — Container for a section's sub-navigation rail.
+ * Used beside the main article when a page lives inside an app-shell
+ * section that has its own child pages.
+ *
+ * Children: section-nav-group-ui and section-nav-item-ui.
+ * Event: nav-select (bubbles from items). detail: { item, text, value }
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaSectionNav extends AdiaElement {
+  static properties = {
+    heading: { type: String, default: '', reflect: true },
+    divider: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'navigation');
+    if (this.heading) this.setAttribute('aria-label', this.heading);
+  }
+
+  render() {
+    if (this.heading) this.setAttribute('aria-label', this.heading);
+    else this.removeAttribute('aria-label');
+  }
+
+  get selectedItem() {
+    return this.querySelector('section-nav-item-ui[selected]');
+  }
+
+  select(item) {
+    const prev = this.selectedItem;
+    if (prev && prev !== item) prev.removeAttribute('selected');
+    if (item) item.setAttribute('selected', '');
+  }
+}
+customElements.define('section-nav-ui', AdiaSectionNav);
+
+export { AdiaSectionNav };

package/patterns/section-nav/section-nav.yaml

@@ -0,0 +1,58 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaSectionNav
+tag: section-nav-ui
+component: SectionNav
+category: nav
+version: 1
+description: |
+  Sub-navigation rail container. Sits beside an article when a page lives
+  inside an app-shell section that has its own child pages. Can optionally
+  render a heading label above the rail.
+
+props:
+  heading:
+    type: string
+    default: ""
+    reflect: true
+    description: Optional section label (also sets aria-label).
+
+  divider:
+    type: boolean
+    default: false
+    reflect: true
+    description: Render auto-dividers between groups.
+
+events:
+  nav-select:
+    description: Bubbles from a child section-nav-item-ui on selection.
+    detail:
+      item: HTMLElement
+      text: string
+      value: string
+
+  group-toggle:
+    description: Bubbles from a child section-nav-group-ui[collapsible] on header click.
+    detail:
+      text: string
+      open: boolean
+
+slots:
+  default:
+    description: section-nav-group-ui and section-nav-item-ui children.
+
+states:
+  - name: idle
+    description: Default.
+
+traits: []
+
+a2ui:
+  rules:
+    - section-nav-ui is the only valid parent of section-nav-group-ui.
+    - section-nav-item-ui may be a direct child of section-nav-ui OR nested inside section-nav-group-ui.
+    - Use section-nav-ui beside an article inside an app-shell section; don't nest app-nav inside it.
+
+keywords: [section-nav, sub-nav, rail, side-nav, docs-nav]
+synonyms:
+  rail: [section-nav, sub-nav, side-nav]
+related: [AppShell, SectionNavGroup, SectionNavItem]

package/patterns/section-nav-group/section-nav-group.a2ui.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/SectionNavGroup.json",
+  "title": "SectionNavGroup",
+  "description": "Optional labeled group inside section-nav-ui. Auto-generates a header row\nwith label and optional leading icon. When [collapsible], the header row\nis a keyboard-activatable toggle that emits `group-toggle`.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "collapsible": {
+      "description": "When true, the header becomes a click/keyboard toggle that expands and collapses the group.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "SectionNavGroup"
+    },
+    "icon": {
+      "description": "Optional Phosphor icon name (leading).",
+      "type": "string",
+      "default": ""
+    },
+    "open": {
+      "description": "Expanded state. Only meaningful when collapsible=true.",
+      "type": "boolean",
+      "default": false
+    },
+    "text": {
+      "description": "Group label rendered in the header row.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "nav",
+    "events": {
+      "group-toggle": {
+        "description": "Fired when the group is toggled via header click or keyboard (Enter/Space).",
+        "detail": {
+          "open": "boolean",
+          "text": "string"
+        }
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "section-nav-group",
+      "sub-nav-group",
+      "nav-section",
+      "rail-group"
+    ],
+    "name": "AdiaSectionNavGroup",
+    "related": [
+      "SectionNav",
+      "SectionNavItem"
+    ],
+    "slots": {
+      "default": {
+        "description": "section-nav-item-ui children rendered under the header."
+      }
+    },
+    "states": [
+      {
+        "description": "Default.",
+        "name": "idle"
+      },
+      {
+        "description": "Header is interactive.",
+        "attribute": "collapsible",
+        "name": "collapsible"
+      },
+      {
+        "description": "Children visible.",
+        "attribute": "open",
+        "name": "open"
+      }
+    ],
+    "synonyms": {},
+    "tag": "section-nav-group-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}