@adia-ai/web-components 0.0.2 → 0.0.4

package/patterns/adia-editor/adia-editor.a2ui.json

@@ -39,8 +39,20 @@
       "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."
+      },
+      "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": [

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

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 /**
  * <adia-editor-ui> — Editor layout pattern.

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

@@ -20,6 +20,23 @@ slots:
     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.
 
 states:
   - name: idle

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

@@ -20,7 +20,16 @@ adia-editor-ui {
   background: var(--editor-bg);
 }
 
-/* ── Top bar ── */
+/* ── 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;
@@ -33,11 +42,36 @@ adia-editor-ui > header {
   flex-shrink: 0;
 }
 
-adia-editor-ui > header [data-title] {
+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;
+}
+
 /* ── Body: pane | canvas | pane ── */
 adia-editor-ui > [data-editor-body] {
   display: flex;
@@ -72,7 +106,11 @@ adia-editor-ui pane-ui[data-right] {
   width: var(--editor-pane-width-right);
 }
 
-/* ── Bottom bar ── */
+/* ── 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;
@@ -84,3 +122,32 @@ adia-editor-ui > footer {
   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;
+}

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

@@ -8,7 +8,7 @@
   --editor-border:          1px solid var(--a-border-subtle);
 
   /* Top/bottom bars */
-  --editor-bar-height:      36px;
+  --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);

package/patterns/app-nav/app-nav.js

@@ -15,7 +15,7 @@
  * Event: nav-select (detail: { item, text, value })
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaAppNav extends AdiaElement {
   static properties = {

package/patterns/app-nav-group/app-nav-group.js

@@ -6,8 +6,8 @@
  * popover with its children instead of toggling inline expansion.
  */
 
-import { AdiaElement } from '@core/element.js';
-import { anchorPopover } from '@core/anchor.js';
+import { AdiaElement } from '../../core/element.js';
+import { anchorPopover } from '../../core/anchor.js';
 
 class AdiaAppNavGroup extends AdiaElement {
   static properties = {

package/patterns/app-nav-item/app-nav-item.js

@@ -6,7 +6,7 @@
  * a side-effect of calling nav.select(item) or user click.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaAppNavItem extends AdiaElement {
   static properties = {

package/patterns/app-shell/app-shell.js

@@ -19,7 +19,7 @@
  * sticky headers, scroll containment, mode composition.
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 const SNAP_THRESHOLD = 96;
 const SNAP_MIN_USABLE = 160;

package/patterns/app-shell/css/app-shell.tokens.css

@@ -19,7 +19,7 @@
   --page-main-border:       var(--page-border);      /* main inline borders (separate so modes can override) */
 
   /* Header / footer bars — shared by topbar + bottombar */
-  --page-header-height:     48px;
+  --page-header-height:     var(--a-chrome-app-header-height);
   --page-header-px:         var(--a-space-3);
   --page-header-gap:        var(--a-space-3);
   --page-header-font:       var(--a-ui-size);

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

@@ -1,4 +1,4 @@
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 import '../../components/chat/chat.js';
 import '../../components/canvas/canvas.js';
 import '../../components/inspector/inspector.js';

package/patterns/index.js

@@ -8,3 +8,4 @@ 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.js

@@ -7,7 +7,7 @@
  * Event: nav-select (bubbles from items). detail: { item, text, value }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSectionNav extends AdiaElement {
   static properties = {

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

@@ -4,7 +4,7 @@
  * that emits `group-toggle` (detail: { text, open }).
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSectionNavGroup extends AdiaElement {
   static properties = {

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

@@ -5,7 +5,7 @@
  * Event: nav-select. detail: { item, text, value }
  */
 
-import { AdiaElement } from '@core/element.js';
+import { AdiaElement } from '../../core/element.js';
 
 class AdiaSectionNavItem extends AdiaElement {
   static properties = {

package/styles/tokens.css

@@ -102,6 +102,18 @@
   --a-size-lg: calc(var(--a-density) * 2.25rem); /* 36px at d=1 */
   --a-size: var(--a-size-md);
 
+  /* ── Chrome heights — global app/feature UI ──
+     App-level chrome (top-level headers, footers, toolbars) is 48px;
+     pane-level chrome (pane headers, footers, toolbars) is 36px.
+     Fixed values — these are structural measurements, not typographic,
+     so they don't scale with --a-density. */
+  --a-chrome-app-header-height:   48px;
+  --a-chrome-app-footer-height:   48px;
+  --a-chrome-app-toolbar-height:  48px;
+  --a-chrome-pane-header-height:  36px;
+  --a-chrome-pane-footer-height:  36px;
+  --a-chrome-pane-toolbar-height: 36px;
+
   /* ── Toggle-control size (check, radio, switch) ──
      Tighter additive scale than --a-size: 16 / 20 / 24 px at d=1. */
   --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-1)); /* 20px at d=1 — md default */

package/traits/define.js

@@ -4,7 +4,7 @@
  * A trait is a reusable behavior package: event listeners, attribute management,
  * and cleanup — defined once, attached to any element.
  *
- *   import { defineTrait } from '@traits/define.js';
+ *   import { defineTrait } from './define.js';
  *
  *   export const pressable = defineTrait({
  *     name: 'pressable',

package/a2ui/dockables/action.js

@@ -1,152 +0,0 @@
-/**
- * ActionDock — Binds a AdiaEvent on a component to a handler.
- *
- * The AdiaEvent is a typed object: { event, target?, debounce?, throttle?, condition? }
- * When the DOM event fires, the handler runs with the surface context.
- * onSuccess/onError chains run follow-up handlers based on the outcome.
- */
-import { Dockable } from './base.js';
-
-/**
- * AdiaEvent type → DOM event name.
- * AdiaUI components emit semantic events; these map to the actual DOM event to listen on.
- */
-const NANO_TO_DOM = {
-  press:    'click',
-  submit:   'submit',
-  input:    'input',
-  change:   'change',
-  select:   'select',
-  toggle:   'change',
-  dismiss:  'close',
-  navigate: 'click',
-  mount:    'connectedCallback',
-  unmount:  'disconnectedCallback',
-  focus:    'focusin',
-  blur:     'focusout',
-  drag:     'dragstart',
-  drop:     'drop',
-};
-
-export { NANO_TO_DOM };
-
-export class ActionDock extends Dockable {
-  kind = 'action';
-
-  /** @type {string} */
-  id;
-
-  /** @type {{ event: string, target?: string, debounce?: number, throttle?: number, condition?: object }} */
-  event;
-
-  /** @type {string} handler name */
-  handler;
-
-  /** @type {object} handler config */
-  config;
-
-  /** @type {Array|null} follow-up actions on success */
-  onSuccess;
-
-  /** @type {Array|null} follow-up actions on error */
-  onError;
-
-  /** @type {Function} (handlerName) => handlerFn */
-  #resolveHandler;
-
-  /**
-   * @param {object} decl — { event, handler, config?, onSuccess?, onError? }
-   * @param {Function} resolveHandler — (name) => async (config, ctx) => result
-   */
-  constructor(decl, resolveHandler) {
-    super();
-    this.event = decl.event;
-    this.handler = decl.handler;
-    this.config = decl.config || {};
-    this.onSuccess = decl.onSuccess || null;
-    this.onError = decl.onError || null;
-    this.#resolveHandler = resolveHandler;
-
-    // Auto-generate id from event + target
-    this.id = `action:${this.event.event}:${this.event.target || 'root'}:${this.handler}`;
-  }
-
-  dock(ctx) {
-    const target = this.event.target
-      ? ctx.getElement(this.event.target)
-      : ctx.getRootElement();
-
-    if (!target) {
-      console.warn(`ActionDock: target "${this.event.target}" not found`);
-      return;
-    }
-
-    const domEventName = NANO_TO_DOM[this.event.event] || this.event.event;
-    const handlerFn = this.#resolveHandler(this.handler);
-
-    if (!handlerFn) {
-      console.warn(`ActionDock: unknown handler "${this.handler}"`);
-      return;
-    }
-
-    let listener = async (domEvent) => {
-      // Condition guard
-      if (this.event.condition) {
-        const val = ctx.getModel(this.event.condition.path);
-        if ('equals' in this.event.condition && val !== this.event.condition.equals) return;
-        if ('notEquals' in this.event.condition && val === this.event.condition.notEquals) return;
-        if ('exists' in this.event.condition && this.event.condition.exists && val == null) return;
-      }
-
-      try {
-        const result = await handlerFn(this.config, ctx, domEvent);
-
-        // Run onSuccess chain
-        if (this.onSuccess) {
-          for (const follow of this.onSuccess) {
-            const followFn = this.#resolveHandler(follow.handler);
-            if (followFn) await followFn(follow.config || {}, ctx, result);
-          }
-        }
-      } catch (err) {
-        // Run onError chain
-        if (this.onError) {
-          for (const follow of this.onError) {
-            const followFn = this.#resolveHandler(follow.handler);
-            if (followFn) await followFn(follow.config || {}, ctx, err);
-          }
-        } else {
-          console.error(`ActionDock: handler "${this.handler}" failed`, err);
-        }
-      }
-    };
-
-    // Debounce
-    if (this.event.debounce > 0) {
-      const origListener = listener;
-      let timer;
-      listener = (...args) => {
-        clearTimeout(timer);
-        timer = setTimeout(() => origListener(...args), this.event.debounce);
-      };
-    }
-
-    // Throttle
-    if (this.event.throttle > 0) {
-      const origListener = listener;
-      let last = 0;
-      listener = (...args) => {
-        const now = Date.now();
-        if (now - last >= this.event.throttle) {
-          last = now;
-          origListener(...args);
-        }
-      };
-    }
-
-    target.addEventListener(domEventName, listener);
-    return () => target.removeEventListener(domEventName, listener);
-  }
-
-  undock() {}
-}

package/a2ui/dockables/base.js

@@ -1,30 +0,0 @@
-/**
- * Dockable — Base class for objects that attach to a Surface.
- *
- * Every dockable has:
- *   kind — which port type it uses (controller, source, action, provider, lifecycle)
- *   id   — unique identity within the surface
- *   dock(context)  — attach and return cleanup function
- *   undock()       — teardown
- */
-export class Dockable {
-  /** @type {'controller'|'source'|'action'|'provider'|'lifecycle'} */
-  get kind() { throw new Error('Dockable subclass must define kind'); }
-
-  /** @type {string} */
-  get id() { throw new Error('Dockable subclass must define id'); }
-
-  /**
-   * Attach to a surface. Receives the surface context.
-   * Return a cleanup function, or void.
-   * @param {import('../surface.js').SurfaceContext} ctx
-   * @returns {(() => void)|void}
-   */
-  dock(ctx) { throw new Error('Dockable subclass must implement dock()'); }
-
-  /**
-   * Detach from the surface. Cleanup fn from dock() is called
-   * automatically before this.
-   */
-  undock() {}
-}

package/a2ui/dockables/controller.js

@@ -1,97 +0,0 @@
-/**
- * ControllerDock — Wraps a AdiaUI controller as a dockable.
- *
- * Instantiates the controller, connects it to its host element,
- * and sets up two-way binding between controller state and model paths.
- */
-import { Dockable } from './base.js';
-
-export class ControllerDock extends Dockable {
-  kind = 'controller';
-
-  /** @type {string} */
-  id;
-
-  /** @type {string} controller type name, e.g., 'FormController' */
-  type;
-
-  /** @type {string} component id to attach to */
-  hostId;
-
-  /** @type {object} controller config */
-  config;
-
-  /** @type {object|null} model path bindings { stateKey: '/model/path' } */
-  bind;
-
-  /** @type {import('../../controllers/base.js').BaseController|null} */
-  controller = null;
-
-  /** @type {Function|null} resolve controller class */
-  #resolveClass;
-
-  /**
-   * @param {object} decl — { id, type, host, config?, bind? }
-   * @param {Function} resolveClass — async (type) => ControllerClass
-   */
-  constructor(decl, resolveClass) {
-    super();
-    this.id = decl.id;
-    this.type = decl.type;
-    this.hostId = decl.host;
-    this.config = decl.config || {};
-    this.bind = decl.bind || null;
-    this.#resolveClass = resolveClass;
-  }
-
-  async dock(ctx) {
-    const host = ctx.getElement(this.hostId);
-    if (!host) {
-      console.warn(`ControllerDock: host element "${this.hostId}" not found`);
-      return;
-    }
-
-    const ControllerClass = await this.#resolveClass(this.type);
-    if (!ControllerClass) {
-      console.warn(`ControllerDock: unknown controller type "${this.type}"`);
-      return;
-    }
-
-    this.controller = new ControllerClass(this.config);
-    this.controller.connect(host);
-
-    // Two-way bind: controller state ↔ model paths
-    const unbinders = [];
-    if (this.bind) {
-      for (const [stateKey, modelPath] of Object.entries(this.bind)) {
-        // Controller → model
-        if (this.controller.subscribe) {
-          const unsub = this.controller.subscribe(stateKey, (value) => {
-            ctx.setModel(modelPath, value);
-          });
-          if (unsub) unbinders.push(unsub);
-        }
-
-        // Model → controller (initial sync)
-        const initial = ctx.getModel(modelPath);
-        if (initial !== undefined && this.controller.setState) {
-          this.controller.setState(stateKey, initial);
-        }
-      }
-    }
-
-    host.controller = this.controller;
-
-    return () => {
-      host.controller = null;
-      unbinders.forEach(u => u());
-    };
-  }
-
-  undock() {
-    if (this.controller) {
-      this.controller.disconnect?.();
-      this.controller = null;
-    }
-  }
-}

package/a2ui/dockables/data-source.js

@@ -1,103 +0,0 @@
-/**
- * DataSourceDock — Fetches data and pushes it into the surface model.
- *
- * Supports refresh strategies: once, on-focus, interval:{ms}, stream.
- * Re-fetch on demand via refetch() (used by refresh-source handler).
- */
-import { Dockable } from './base.js';
-
-export class DataSourceDock extends Dockable {
-  kind = 'source';
-
-  /** @type {string} */
-  id;
-
-  /** @type {string} URI template, e.g., "resource://users/{userId}" */
-  uri;
-
-  /** @type {string} model path to write to */
-  path;
-
-  /** @type {string} refresh strategy */
-  refresh;
-
-  /** @type {Function} (uri, params) => data */
-  #resolveData;
-
-  /** @type {import('../surface.js').SurfaceContext|null} */
-  #ctx = null;
-
-  /**
-   * @param {object} decl — { id, uri, path, refresh? }
-   * @param {Function} resolveData — async (uri, params) => data
-   */
-  constructor(decl, resolveData) {
-    super();
-    this.id = decl.id;
-    this.uri = decl.uri;
-    this.path = decl.path;
-    this.refresh = decl.refresh || 'once';
-    this.#resolveData = resolveData;
-  }
-
-  dock(ctx) {
-    this.#ctx = ctx;
-
-    // Initial fetch
-    this.#fetch(ctx);
-
-    // Refresh strategy
-    if (this.refresh === 'on-focus') {
-      const handler = () => this.#fetch(ctx);
-      window.addEventListener('focus', handler);
-      return () => window.removeEventListener('focus', handler);
-    }
-
-    if (this.refresh.startsWith('interval:')) {
-      const ms = parseInt(this.refresh.split(':')[1], 10);
-      if (ms > 0) {
-        const id = setInterval(() => this.#fetch(ctx), ms);
-        return () => clearInterval(id);
-      }
-    }
-
-    if (this.refresh === 'stream') {
-      const resolvedUri = this.#resolveUri(ctx);
-      try {
-        const source = new EventSource(resolvedUri);
-        source.onmessage = (e) => {
-          try { ctx.setModel(this.path, JSON.parse(e.data)); }
-          catch { /* malformed data */ }
-        };
-        return () => source.close();
-      } catch {
-        console.warn(`DataSourceDock: stream failed for ${resolvedUri}`);
-      }
-    }
-  }
-
-  undock() {
-    this.#ctx = null;
-  }
-
-  /** Re-fetch on demand (called by refresh-source handler). */
-  refetch() {
-    if (this.#ctx) this.#fetch(this.#ctx);
-  }
-
-  async #fetch(ctx) {
-    const resolvedUri = this.#resolveUri(ctx);
-    try {
-      const data = await this.#resolveData(resolvedUri, ctx);
-      if (data !== undefined) ctx.setModel(this.path, data);
-    } catch (err) {
-      console.warn(`DataSourceDock: fetch failed for ${resolvedUri}`, err);
-    }
-  }
-
-  #resolveUri(ctx) {
-    return this.uri.replace(/\{(\w+)\}/g, (_, key) => {
-      return ctx.getParam(key) ?? ctx.getModel('/' + key) ?? '';
-    });
-  }
-}

package/a2ui/dockables/index.js

@@ -1,6 +0,0 @@
-export { Dockable } from './base.js';
-export { ControllerDock } from './controller.js';
-export { DataSourceDock } from './data-source.js';
-export { ActionDock, NANO_TO_DOM } from './action.js';
-export { ProviderDock } from './provider.js';
-export { LifecycleDock } from './lifecycle.js';