@adia-ai/web-components 0.0.28 → 0.0.33

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

@@ -1,136 +0,0 @@
-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):
- *   submit               — from thread (chat input)
- *   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

@@ -1,43 +0,0 @@
-$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

@@ -1,11 +0,0 @@
-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';
-export { AdiaA2UIRoot }       from './a2ui-root/a2ui-root.js';

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

@@ -1,91 +0,0 @@
-{
-  "$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

@@ -1,60 +0,0 @@
-/* ═══════════════════════════════════════════
-   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-kicker-sm);
-    --section-nav-heading-weight: var(--a-weight-medium);
-    --section-nav-heading-pad-x:  var(--a-space-2);
-    --section-nav-heading-pad-y:  var(--a-space-3) var(--a-space-1);
-  }
-
-  :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-inline: var(--section-nav-heading-pad-x);
-    padding-block: var(--section-nav-heading-pad-y);
-    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

@@ -1,42 +0,0 @@
-/**
- * <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

@@ -1,58 +0,0 @@
-$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

@@ -1,95 +0,0 @@
-{
-  "$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
-  }
-}

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

@@ -1,74 +0,0 @@
-@scope (section-nav-group-ui) {
-  :where(:scope) {
-    --section-nav-group-gap:          var(--a-space-0-5);
-    --section-nav-group-row-height:   var(--a-size);
-    --section-nav-group-row-px:       var(--a-ui-px);
-    --section-nav-group-row-gap:      var(--a-space-1);
-    --section-nav-group-row-radius:   var(--a-radius-md);
-
-    --section-nav-group-label-fg:     var(--a-fg-muted);
-    --section-nav-group-label-size:   var(--a-ui-tiny);
-    --section-nav-group-label-weight: var(--a-weight-medium);
-    --section-nav-group-bg-hover:     var(--a-bg-muted);
-    --section-nav-group-duration:     var(--a-duration-fast);
-    --section-nav-group-easing:       var(--a-easing);
-  }
-
-  :scope {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: var(--section-nav-group-gap);
-  }
-
-  :scope > [data-section-nav-group-header] {
-    display: flex;
-    align-items: center;
-    gap: var(--section-nav-group-row-gap);
-    padding: 0 var(--section-nav-group-row-px);
-    height: var(--section-nav-group-row-height);
-    border-radius: var(--section-nav-group-row-radius);
-    color: var(--section-nav-group-label-fg);
-    font-size: var(--section-nav-group-label-size);
-    font-weight: var(--section-nav-group-label-weight);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    white-space: nowrap;
-    overflow: hidden;
-    user-select: none;
-  }
-
-  :scope > [data-section-nav-group-header] > [data-section-nav-group-label] {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  /* Collapsible */
-  :scope[collapsible] > [data-section-nav-group-header] {
-    cursor: pointer;
-    transition:
-      background var(--section-nav-group-duration) var(--section-nav-group-easing),
-      color      var(--section-nav-group-duration) var(--section-nav-group-easing);
-  }
-  :scope[collapsible] > [data-section-nav-group-header]:hover,
-  :scope[collapsible] > [data-section-nav-group-header]:focus-visible {
-    background: var(--section-nav-group-bg-hover);
-    outline: none;
-  }
-
-  :scope[collapsible] > [data-section-nav-group-header] [data-section-nav-group-caret] {
-    --a-icon-size: 0.5rem;
-    transition: transform var(--section-nav-group-duration) var(--section-nav-group-easing);
-    flex-shrink: 0;
-  }
-  :scope[collapsible][open] > [data-section-nav-group-header] [data-section-nav-group-caret] {
-    transform: rotate(90deg);
-  }
-
-  /* Collapsed state hides all children except the header */
-  :scope[collapsible]:not([open]) > :not([data-section-nav-group-header]) {
-    display: none;
-  }
-}