@adia-ai/web-modules 0.3.4 → 0.3.6

package/editor/editor-statusbar/editor-statusbar.yaml

@@ -0,0 +1,57 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: EditorStatusbar
+tag: editor-statusbar
+component: EditorStatusbar
+category: layout
+version: 1
+description: |
+  Module-tier editor statusbar — bottom chrome bar inside
+  <editor-shell>. CSS-only, no behavior, no JS. Holds save/sync
+  state, zoom indicator, cursor position, and tertiary actions
+  via slot vocabulary.
+
+  Replaces the legacy <footer> with positional content per ADR-0023.
+
+props: {}
+
+events: {}
+
+slots:
+  default:
+    description: Default — ad-hoc inline content (legacy positional layout).
+  status:
+    description: Save/sync state indicator.
+  cursor:
+    description: Cursor position / selection indicator.
+  zoom:
+    description: Zoom level indicator.
+  action:
+    description: Trailing action cluster (e.g., toggle full-screen).
+
+states:
+  - name: idle
+    description: Default, the only state.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      editor-statusbar replaces legacy <footer> chrome bar inside
+      <editor-shell>. Use named slots for canonical clusters; ad-hoc
+      content goes in the default slot.
+
+keywords:
+  - editor-statusbar
+  - statusbar
+  - bottom-bar
+  - editor-footer
+
+synonyms:
+  editor-statusbar: [statusbar, footer-bar, bottom-bar]
+
+related:
+  - EditorShell
+  - EditorToolbar
+  - EditorCanvas

package/editor/editor-toolbar/editor-toolbar.a2ui.json

@@ -0,0 +1,96 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/EditorToolbar.json",
+  "title": "EditorToolbar",
+  "description": "Module-tier editor toolbar — replaces legacy <header> chrome bar\ninside <editor-shell> per ADR-0023. Owns the [full-screen] reflected\nattribute (set when host enters focus mode), click-bubble for\n[data-toolbar-action] buttons, and slot vocabulary routing.\n\nSits at the top of <editor-shell>. Authors compose actions + status\nvia slot vocabulary. The host (<editor-shell>) reads either\n<editor-toolbar> or <header> via :is() selector for backwards compat.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "EditorToolbar"
+    },
+    "fullScreen": {
+      "description": "Reflected — set when editor is in distraction-free / focus mode.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {
+      "toolbar-action": {
+        "description": "Bubbles when a child element with [data-toolbar-action] is clicked. Detail carries the action name from the clicked element's attribute.",
+        "detail": {
+          "name": "string"
+        }
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "editor-toolbar",
+      "editor-titlebar",
+      "editor-chrome",
+      "app-header",
+      "editor-actions"
+    ],
+    "name": "EditorToolbar",
+    "related": [
+      "EditorShell",
+      "EditorCanvas",
+      "EditorSidebar",
+      "EditorStatusbar"
+    ],
+    "slots": {
+      "title": {
+        "description": "Editor / document title cluster."
+      },
+      "default": {
+        "description": "Default — ad-hoc inline content (legacy positional layout)."
+      },
+      "action": {
+        "description": "Trailing action cluster (settings, share, more)."
+      },
+      "action-leading": {
+        "description": "Leading action cluster (back, switcher, undo/redo)."
+      },
+      "status": {
+        "description": "Status indicator (saving, dirty, synced, etc.)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default editor mode.",
+        "name": "idle"
+      },
+      {
+        "description": "Distraction-free / focus mode active.",
+        "attribute": "full-screen",
+        "name": "full-screen"
+      }
+    ],
+    "synonyms": {
+      "editor-toolbar": [
+        "editor-header",
+        "app-header",
+        "navbar",
+        "titlebar"
+      ]
+    },
+    "tag": "editor-toolbar",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/editor/editor-toolbar/editor-toolbar.js

@@ -0,0 +1,58 @@
+/**
+ * <editor-toolbar full-screen?>
+ *   <span slot="title">Editor</span>
+ *   <button-ui slot="action" icon="gear"></button-ui>
+ * </editor-toolbar>
+ *
+ * Module-tier editor toolbar — replaces legacy <header> with [data-title]
+ * + [data-spacer] + ad-hoc action children inside <editor-shell>. Owns:
+ *
+ *   - [full-screen] reflected attribute (set when host enters focus mode)
+ *   - Slot vocabulary routing (title / status / action / action-leading)
+ *   - Click-bubble for [data-toolbar-action="<name>"] buttons → fires
+ *     'toolbar-action' event with the action name
+ *
+ * Reflected attributes:
+ *   [full-screen]  — true when editor is in distraction-free / focus mode
+ *
+ * Events:
+ *   toolbar-action  — bubbles. detail: { name } from clicked button's
+ *                     [data-toolbar-action] attribute
+ *
+ * The host (<editor-shell>) reads either <editor-toolbar> or <header>
+ * via :is() selector for backwards compat. Default-slot children fall
+ * back to legacy positional layout if no named slots are used.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+class EditorToolbar extends UIElement {
+  static properties = {
+    fullScreen: { type: Boolean, default: false, reflect: true, attribute: 'full-screen' },
+  };
+
+  static template = () => null;
+
+  #onClick = null;
+
+  connected() {
+    this.#onClick = (e) => {
+      const btn = e.target.closest('[data-toolbar-action]');
+      if (!btn || !this.contains(btn)) return;
+      const name = btn.getAttribute('data-toolbar-action');
+      this.dispatchEvent(new CustomEvent('toolbar-action', {
+        bubbles: true,
+        detail: { name },
+      }));
+    };
+    this.addEventListener('click', this.#onClick);
+  }
+
+  disconnected() {
+    if (this.#onClick) this.removeEventListener('click', this.#onClick);
+    this.#onClick = null;
+  }
+}
+
+customElements.define('editor-toolbar', EditorToolbar);
+export { EditorToolbar };

package/editor/editor-toolbar/editor-toolbar.test.js

@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import '../../../web-components/core/element.js';
+import './editor-toolbar.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('editor-toolbar', () => {
+  it('registers editor-toolbar as a custom element', () => {
+    expect(customElements.get('editor-toolbar')).toBeDefined();
+  });
+
+  it('defaults to fullScreen=false', () => {
+    const t = mount('<editor-toolbar></editor-toolbar>');
+    expect(t.fullScreen).toBe(false);
+  });
+
+  it('reflects [full-screen] via property assignment', async () => {
+    const t = mount('<editor-toolbar></editor-toolbar>');
+    t.fullScreen = true;
+    await tick();
+    expect(t.hasAttribute('full-screen')).toBe(true);
+  });
+
+  it('honors initial [full-screen] attribute on connect', () => {
+    const t = mount('<editor-toolbar full-screen></editor-toolbar>');
+    expect(t.fullScreen).toBe(true);
+  });
+
+  it('bubbles toolbar-action event from [data-toolbar-action] children', async () => {
+    const wrap = document.createElement('div');
+    wrap.innerHTML = `<editor-toolbar>
+      <button data-toolbar-action="save">Save</button>
+      <button data-toolbar-action="undo">Undo</button>
+    </editor-toolbar>`;
+    document.body.appendChild(wrap);
+    const toolbar = wrap.firstElementChild;
+    const saveBtn = toolbar.querySelector('[data-toolbar-action="save"]');
+
+    const onAction = vi.fn();
+    toolbar.addEventListener('toolbar-action', onAction);
+
+    saveBtn.click();
+    await tick();
+
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(onAction.mock.calls[0][0].detail).toEqual({ name: 'save' });
+  });
+
+  it('does not fire toolbar-action for clicks outside [data-toolbar-action]', async () => {
+    const wrap = document.createElement('div');
+    wrap.innerHTML = `<editor-toolbar>
+      <span>Title</span>
+      <button>Plain button</button>
+    </editor-toolbar>`;
+    document.body.appendChild(wrap);
+    const toolbar = wrap.firstElementChild;
+    const plainBtn = toolbar.querySelector('button');
+
+    const onAction = vi.fn();
+    toolbar.addEventListener('toolbar-action', onAction);
+
+    plainBtn.click();
+    await tick();
+
+    expect(onAction).not.toHaveBeenCalled();
+  });
+
+  it('cleanup on disconnect — removes click listener', () => {
+    const t = mount('<editor-toolbar></editor-toolbar>');
+    const removeSpy = vi.spyOn(t, 'removeEventListener');
+    t.remove();
+    const removedTypes = removeSpy.mock.calls.map((args) => args[0]);
+    expect(removedTypes).toContain('click');
+  });
+
+  it('event bubbles up beyond the toolbar', async () => {
+    const outer = document.createElement('div');
+    document.body.appendChild(outer);
+    outer.innerHTML = `<editor-toolbar>
+      <button data-toolbar-action="settings"></button>
+    </editor-toolbar>`;
+    const onOuterAction = vi.fn();
+    outer.addEventListener('toolbar-action', onOuterAction);
+    outer.querySelector('button').click();
+    await tick();
+    expect(onOuterAction).toHaveBeenCalled();
+  });
+});

package/editor/editor-toolbar/editor-toolbar.yaml

@@ -0,0 +1,81 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: EditorToolbar
+tag: editor-toolbar
+component: EditorToolbar
+category: layout
+version: 1
+description: |
+  Module-tier editor toolbar — replaces legacy <header> chrome bar
+  inside <editor-shell> per ADR-0023. Owns the [full-screen] reflected
+  attribute (set when host enters focus mode), click-bubble for
+  [data-toolbar-action] buttons, and slot vocabulary routing.
+
+  Sits at the top of <editor-shell>. Authors compose actions + status
+  via slot vocabulary. The host (<editor-shell>) reads either
+  <editor-toolbar> or <header> via :is() selector for backwards compat.
+
+props:
+  fullScreen:
+    description: Reflected — set when editor is in distraction-free / focus mode.
+    type: boolean
+    default: false
+    reflect: true
+    attribute: full-screen
+
+events:
+  toolbar-action:
+    description: >-
+      Bubbles when a child element with [data-toolbar-action] is clicked.
+      Detail carries the action name from the clicked element's attribute.
+    detail:
+      name: string
+
+slots:
+  default:
+    description: Default — ad-hoc inline content (legacy positional layout).
+  title:
+    description: Editor / document title cluster.
+  status:
+    description: Status indicator (saving, dirty, synced, etc.).
+  action:
+    description: Trailing action cluster (settings, share, more).
+  action-leading:
+    description: Leading action cluster (back, switcher, undo/redo).
+
+states:
+  - name: idle
+    description: Default editor mode.
+  - name: full-screen
+    attribute: full-screen
+    description: Distraction-free / focus mode active.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      editor-toolbar replaces legacy <header> chrome bar inside
+      <editor-shell>. Use named slots (title / status / action /
+      action-leading) for canonical clusters; ad-hoc inline content
+      goes in the default slot.
+    - >-
+      Buttons that should trigger named actions get
+      [data-toolbar-action="<name>"]. The toolbar bubbles a single
+      'toolbar-action' event up to the host with the name in detail.
+
+keywords:
+  - editor-toolbar
+  - editor-titlebar
+  - editor-chrome
+  - app-header
+  - editor-actions
+
+synonyms:
+  editor-toolbar: [editor-header, app-header, navbar, titlebar]
+
+related:
+  - EditorShell
+  - EditorCanvas
+  - EditorSidebar
+  - EditorStatusbar

package/editor/index.js

@@ -1 +1,4 @@
 export { EditorShell } from './editor-shell/editor-shell.js';
+export { EditorToolbar } from './editor-toolbar/editor-toolbar.js';
+export { EditorCanvas } from './editor-canvas/editor-canvas.js';
+export { EditorSidebar } from './editor-sidebar/editor-sidebar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "AdiaUI composite custom elements \u2014 shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {