@adia-ai/web-components 0.0.27 → 0.0.29

package/patterns/adia-chat/css/adia-chat.tokens.css

@@ -1,95 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   adia-chat-ui — Design tokens
-   ═══════════════════════════════════════════════════════════════ */
-
-:where(adia-chat-ui) {
-  /* 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/patterns/adia-editor/adia-editor.a2ui.json

@@ -1,73 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/Editor.json",
-  "title": "Editor",
-  "description": "Behavior-only editor shell for design-tool layouts. Author provides the\nstructural DOM — header (topbar), [data-editor-body] with pane-ui children\n([data-left], [data-right]), [data-canvas] for the central surface, and\na footer (statusbar). adia-editor wires select-ui[data-options] for\nJSON-parsed option lists.\n",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "component": {
-      "const": "Editor"
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "anti_patterns": [],
-    "category": "container",
-    "events": {},
-    "examples": [],
-    "keywords": [
-      "adia-editor",
-      "editor",
-      "design-tool",
-      "canvas-shell"
-    ],
-    "name": "AdiaEditorElement",
-    "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": "adia-editor-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 1
-  }
-}

package/patterns/adia-editor/adia-editor.css

@@ -1,6 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   adia-editor — Pattern component CSS
-   ═══════════════════════════════════════════════════════════════ */
-
-@import "./css/adia-editor.tokens.css";
-@import "./css/adia-editor.layout.css";

package/patterns/adia-editor/adia-editor.js

@@ -1,56 +0,0 @@
-import { AdiaElement } from '../../core/element.js';
-
-/**
- * <adia-editor-ui> — Editor layout pattern.
- *
- * Behavior-only orchestrator for design tool UIs:
- * topbar, navigator pane, center canvas, inspector pane, bottombar.
- *
- * Structure:
- *   <adia-editor-ui>
- *     <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>
- *   </adia-editor-ui>
- */
-class AdiaEditorElement extends AdiaElement {
-  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('adia-editor-ui', AdiaEditorElement);
-export { AdiaEditorElement };

package/patterns/adia-editor/adia-editor.yaml

@@ -1,59 +0,0 @@
-$schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaEditorElement
-tag: adia-editor-ui
-component: Editor
-category: container
-version: 1
-description: |
-  Behavior-only editor shell 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). adia-editor 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:
-    - adia-editor is a layout skeleton. Children must follow the documented
-      structural DOM; the element wires behavior, not content.
-
-keywords: [adia-editor, editor, design-tool, canvas-shell]
-related: [Pane, Select, Toolbar]

package/patterns/adia-editor/css/adia-editor.layout.css

@@ -1,171 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   adia-editor-ui — Layout
-
-   Structure:
-     adia-editor-ui
-       header                — topbar
-       [data-editor-body]    — flex row: pane | canvas | pane
-         pane-ui              — left navigator
-         [data-canvas]       — center canvas
-         pane-ui              — right inspector
-       footer                — bottombar
-   ═══════════════════════════════════════════════════════════════ */
-
-adia-editor-ui {
-  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. */
-adia-editor-ui > 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;
-}
-
-adia-editor-ui > header [data-title],
-adia-editor-ui > header > [slot="heading"] {
-  font-weight: var(--editor-title-weight);
-  color: var(--editor-bar-fg-strong);
-}
-
-adia-editor-ui > header > [slot="icon"] {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--editor-bar-fg);
-}
-
-adia-editor-ui > header > [slot="description"] {
-  color: var(--editor-bar-fg);
-  font-size: var(--a-ui-sm);
-}
-
-adia-editor-ui > header > [slot="action"] {
-  display: flex;
-  align-items: center;
-  gap: var(--editor-bar-gap);
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-
-adia-editor-ui > header > [slot="action"] ~ [slot="action"] {
-  margin-inline-start: 0;
-}
-
-/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
-adia-editor-ui > 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 ── */
-adia-editor-ui > [data-editor-body] {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
-
-/* ── Canvas ── */
-adia-editor-ui [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 ── */
-adia-editor-ui pane-ui {
-  --pane-radius: 0;
-  height: 100%;
-  flex-shrink: 0;
-}
-
-adia-editor-ui pane-ui[data-left] {
-  width: var(--editor-pane-width-left);
-}
-
-adia-editor-ui 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. */
-adia-editor-ui > 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;
-}
-
-adia-editor-ui > footer > [slot="heading"] {
-  font-weight: var(--editor-title-weight);
-  color: var(--editor-bar-fg-strong);
-}
-
-adia-editor-ui > footer > [slot="icon"] {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--editor-bar-fg);
-}
-
-adia-editor-ui > footer > [slot="description"] {
-  color: var(--editor-bar-fg);
-  font-size: var(--a-ui-sm);
-}
-
-adia-editor-ui > footer > [slot="action"] {
-  display: flex;
-  align-items: center;
-  gap: var(--editor-bar-gap);
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-
-adia-editor-ui > footer > [slot="action"] ~ [slot="action"] {
-  margin-inline-start: 0;
-}
-
-/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
-adia-editor-ui > footer > [slot="action-leading"] {
-  display: flex;
-  align-items: center;
-  gap: var(--editor-bar-gap);
-  flex-shrink: 0;
-  margin-inline-end: auto;
-}

package/patterns/adia-editor/css/adia-editor.tokens.css

@@ -1,28 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   adia-editor-ui — Design tokens
-   ═══════════════════════════════════════════════════════════════ */
-
-:where(adia-editor-ui) {
-  /* 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/patterns/app-nav/app-nav.a2ui.json

@@ -1,89 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/AppNav.json",
-  "title": "AppNav",
-  "description": "Collapsible navigation sidebar. Manages selection state across\napp-nav-item-ui children and opens popover menus for app-nav-group-ui\nchildren when collapsed.\n",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "collapsed": {
-      "description": "When true, labels and badges hide; only icons show. Groups use popovers instead of inline expansion.",
-      "type": "boolean",
-      "default": false
-    },
-    "component": {
-      "const": "AppNav"
-    },
-    "divider": {
-      "description": "Render auto-dividers between groups.",
-      "type": "boolean",
-      "default": false
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "anti_patterns": [],
-    "category": "nav",
-    "events": {
-      "nav-select": {
-        "description": "Fired when a child app-nav-item-ui is selected (via click or the .select() method).",
-        "detail": {
-          "item": "HTMLElement",
-          "text": "string",
-          "value": "string"
-        }
-      }
-    },
-    "examples": [],
-    "keywords": [
-      "app-nav",
-      "sidebar",
-      "navigation",
-      "nav",
-      "menu"
-    ],
-    "name": "AdiaAppNav",
-    "related": [
-      "AppShell",
-      "AppNavGroup",
-      "AppNavItem"
-    ],
-    "slots": {
-      "default": {
-        "description": "app-nav-group-ui and app-nav-item-ui children."
-      }
-    },
-    "states": [
-      {
-        "description": "Default, interactive.",
-        "name": "idle"
-      },
-      {
-        "description": "Narrow-width mode; groups open popovers instead of expanding.",
-        "attribute": "collapsed",
-        "name": "collapsed"
-      }
-    ],
-    "synonyms": {
-      "sidebar": [
-        "app-nav",
-        "nav",
-        "navigation"
-      ]
-    },
-    "tag": "app-nav-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 1
-  }
-}

package/patterns/app-nav/app-nav.css

@@ -1,92 +0,0 @@
-/* ═══════════════════════════════════════════
-   NAV-UI — root container
-   ═══════════════════════════════════════════ */
-
-@scope (app-nav-ui) {
-  :where(:scope) {
-    --nav-width:          auto;
-    --nav-width-collapsed: 48px;
-    --nav-bg:             transparent;
-    --nav-border:         var(--a-border-subtle);
-    --nav-font-size:      var(--a-ui-size);
-    --nav-gap:            var(--a-space-1);
-    --nav-px:             var(--a-space-2);
-    --nav-py:             var(--a-space-2);
-  }
-
-  :scope {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: var(--nav-gap);
-    width: var(--nav-width);
-    padding: var(--nav-py) var(--nav-px);
-    background: var(--nav-bg);
-    font-size: var(--nav-font-size);
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-width: none;
-    transition: width var(--nav-duration) var(--nav-easing);
-  }
-
-  :scope::-webkit-scrollbar { display: none; }
-
-  :scope[collapsed] {
-    width: var(--nav-width-collapsed);
-    --nav-px: var(--a-space-1);
-  }
-
-  @container sidebar (max-width: 96px) {
-    :scope {
-      --nav-px: var(--a-space-1);
-    }
-  }
-
-  /* Group headings */
-  [data-nav-label] {
-    display: block;
-    padding: var(--nav-label-py) var(--nav-label-px);
-    font-size: var(--nav-label-font-size);
-    font-weight: var(--nav-label-weight);
-    color: var(--nav-label-fg);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  /* Dividers */
-  [data-nav-divider] {
-    border: none;
-    height: 1px;
-    background: var(--nav-divider-bg);
-    margin: var(--nav-divider-my) 0;
-  }
-
-  /* Auto-dividers between groups when <app-nav-ui divider>. Keeps explicit
-     <hr data-nav-divider> working for hand-placed dividers. */
-  :scope[divider] > app-nav-group-ui + app-nav-group-ui,
-  :scope[divider] > app-nav-item-ui + app-nav-group-ui,
-  :scope[divider] > app-nav-group-ui + app-nav-item-ui {
-    border-top: 1px solid var(--nav-divider-bg);
-    margin-top: var(--nav-divider-my);
-    padding-top: var(--nav-divider-my);
-  }
-
-  /* Spacer — pushes items below to bottom */
-  [data-nav-spacer] {
-    flex: 1;
-  }
-
-  /* Collapsed: hide labels, dividers, spacer keeps working */
-  :scope[collapsed] [data-nav-label],
-  :scope[collapsed] [data-nav-divider] {
-    display: none;
-  }
-
-  @container sidebar (max-width: 96px) {
-    [data-nav-label], [data-nav-divider] {
-      display: none;
-    }
-  }
-}