@adia-ai/web-modules 0.3.5 → 0.3.6

package/editor/editor-sidebar/editor-sidebar.test.js

@@ -0,0 +1,126 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import '../../../web-components/core/element.js';
+import './editor-sidebar.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;
+}
+
+let originalRect;
+beforeEach(() => {
+  document.body.innerHTML = '';
+  try { localStorage.clear(); } catch {}
+  globalThis.ResizeObserver = class {
+    observe() {} unobserve() {} disconnect() {}
+  };
+  // happy-dom: stub getBoundingClientRect to derive from style.width
+  originalRect = HTMLElement.prototype.getBoundingClientRect;
+  HTMLElement.prototype.getBoundingClientRect = function () {
+    const inline = this.style?.width || '';
+    const w = parseFloat(inline) || 240;
+    return { width: w, height: 600, top: 0, left: 0, right: w, bottom: 600, x: 0, y: 0 };
+  };
+});
+
+afterEach(() => {
+  if (originalRect) HTMLElement.prototype.getBoundingClientRect = originalRect;
+});
+
+describe('editor-sidebar', () => {
+  it('registers editor-sidebar as a custom element', () => {
+    expect(customElements.get('editor-sidebar')).toBeDefined();
+  });
+
+  it('defaults to collapsed=false on connect', () => {
+    const sb = mount('<editor-sidebar slot="leading"><pane-ui></pane-ui></editor-sidebar>');
+    expect(sb.collapsed).toBe(false);
+  });
+
+  it('reflects [collapsed] via property assignment', async () => {
+    const sb = mount('<editor-sidebar slot="leading"><pane-ui></pane-ui></editor-sidebar>');
+    sb.collapsed = true;
+    await tick();
+    expect(sb.hasAttribute('collapsed')).toBe(true);
+  });
+
+  it('exposes .toggle() / .collapse() / .expand() public methods', () => {
+    const sb = mount('<editor-sidebar slot="leading" collapsible><pane-ui></pane-ui></editor-sidebar>');
+    expect(typeof sb.toggle).toBe('function');
+    expect(typeof sb.collapse).toBe('function');
+    expect(typeof sb.expand).toBe('function');
+  });
+
+  it('persists pane width to editor-namespaced localStorage key (cluster-distinct)', () => {
+    const sb = mount('<editor-sidebar slot="leading" collapsible><pane-ui></pane-ui></editor-sidebar>');
+    const pane = sb.querySelector('pane-ui');
+    pane.style.width = '240px';
+    sb.collapse();
+    expect(sb.collapsed).toBe(true);
+    // editor-namespaced key
+    expect(localStorage.getItem('adia-editor-sidebar-leading')).not.toBeNull();
+    // Should NOT collide with admin or chat namespaces
+    expect(localStorage.getItem('adia-sidebar-leading')).toBeNull();
+    expect(localStorage.getItem('adia-chat-sidebar-leading')).toBeNull();
+  });
+
+  it('uses [name] override for the localStorage key', () => {
+    const sb = mount('<editor-sidebar slot="leading" name="navigator" collapsible><pane-ui></pane-ui></editor-sidebar>');
+    const pane = sb.querySelector('pane-ui');
+    pane.style.width = '200px';
+    sb.collapse();
+    expect(localStorage.getItem('adia-editor-sidebar-navigator')).not.toBeNull();
+    expect(localStorage.getItem('adia-editor-sidebar-leading')).toBeNull();
+  });
+
+  it('toggle() returns the new collapsed value', () => {
+    const sb = mount('<editor-sidebar slot="leading" collapsible><pane-ui></pane-ui></editor-sidebar>');
+    const pane = sb.querySelector('pane-ui');
+    pane.style.width = '200px';
+    const result = sb.toggle();
+    expect(result).toBe(sb.collapsed);
+  });
+
+  it('dispatches sidebar-toggle event on toggle()', () => {
+    const sb = mount('<editor-sidebar slot="leading" collapsible><pane-ui></pane-ui></editor-sidebar>');
+    const pane = sb.querySelector('pane-ui');
+    pane.style.width = '200px';
+    const onToggle = vi.fn();
+    sb.addEventListener('sidebar-toggle', onToggle);
+    sb.toggle();
+    expect(onToggle).toHaveBeenCalledTimes(1);
+    expect(onToggle.mock.calls[0][0].detail).toEqual(
+      expect.objectContaining({ name: expect.any(String), expanded: expect.any(Boolean) })
+    );
+  });
+
+  it('expand() restores from stored width or defaults to 240', () => {
+    // Pre-populate stored width
+    localStorage.setItem('adia-editor-sidebar-leading', '320');
+    const sb = mount('<editor-sidebar slot="leading" collapsible><pane-ui></pane-ui></editor-sidebar>');
+    sb.collapse();
+    sb.expand();
+    const pane = sb.querySelector('pane-ui');
+    expect(pane.style.width).toBe('320px');
+  });
+
+  it('cleanup on disconnect — removes pointerup listener', () => {
+    const sb = mount('<editor-sidebar slot="leading" collapsible><pane-ui></pane-ui></editor-sidebar>');
+    const removeSpy = vi.spyOn(document, 'removeEventListener');
+    sb.remove();
+    const removedTypes = removeSpy.mock.calls.map((args) => args[0]);
+    expect(removedTypes).toContain('pointerup');
+  });
+
+  it('handles missing inner <pane-ui> gracefully (no crash)', () => {
+    const sb = mount('<editor-sidebar slot="leading"></editor-sidebar>');
+    // Should not throw
+    expect(() => sb.toggle()).not.toThrow();
+    expect(() => sb.collapse()).not.toThrow();
+    expect(() => sb.expand()).not.toThrow();
+  });
+});

package/editor/editor-sidebar/editor-sidebar.yaml

@@ -0,0 +1,83 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: EditorSidebar
+tag: editor-sidebar
+component: EditorSidebar
+category: layout
+version: 1
+description: |
+  Module-tier editor-cluster sidebar — wraps <pane-ui resizable>
+  (the primitive that owns drag) and adds [collapsed] reflected
+  state, localStorage persistence (adia-editor-sidebar-{name}),
+  and .toggle() / .collapse() / .expand() public API.
+
+  Sits inside <editor-shell> as slot="leading" (navigator pane) or
+  slot="trailing" (inspector pane). Mirrors the cluster-namespace
+  shape from <admin-sidebar> and <chat-sidebar>, but DELEGATES to
+  <pane-ui> for resize rather than reimplementing it (per
+  bespoke-shell-children skill §When NOT to promote — pane primitive
+  already owns this concern).
+
+  This is the FIRST bespoke shell child that delegates rather than
+  duplicates a primitive's behavior. Pattern is: cluster-namespace +
+  state-as-attribute + persistence at the bespoke tier; physical
+  drag at the primitive tier.
+
+props:
+  collapsed:
+    description: Reflected — set when inner <pane-ui> width is at or below 96px snap threshold.
+    type: boolean
+    default: false
+    reflect: true
+
+events:
+  sidebar-toggle:
+    description: Bubbles when .toggle() / .collapse() / .expand() is called.
+    detail:
+      name: string
+      expanded: boolean
+
+slots:
+  default:
+    description: >-
+      Default — the inner <pane-ui resizable> wrapper. Authors compose
+      header / section / footer inside the pane as usual.
+
+states:
+  - name: idle
+    description: Default expanded state.
+  - name: collapsed
+    attribute: collapsed
+    description: Inner pane is at or below the snap threshold.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      editor-sidebar wraps <pane-ui resizable> rather than implementing
+      drag itself. Place a <pane-ui resizable> as the only structural
+      child; fill the pane with header / section / footer slots.
+    - >-
+      The cluster-distinct localStorage prefix (adia-editor-sidebar-*)
+      keeps editor sidebars from colliding with admin (adia-sidebar-*)
+      and chat (adia-chat-sidebar-*) sidebars on the same domain.
+
+keywords:
+  - editor-sidebar
+  - navigator-pane
+  - inspector-pane
+  - editor-rail
+  - sidebar
+  - leading
+  - trailing
+
+synonyms:
+  editor-sidebar: [navigator, inspector, editor-rail, side-panel]
+
+related:
+  - EditorShell
+  - EditorCanvas
+  - Pane
+  - AdminSidebar
+  - ChatSidebar

package/editor/editor-statusbar/editor-statusbar.a2ui.json

@@ -0,0 +1,76 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/EditorStatusbar.json",
+  "title": "EditorStatusbar",
+  "description": "Module-tier editor statusbar — bottom chrome bar inside\n<editor-shell>. CSS-only, no behavior, no JS. Holds save/sync\nstate, zoom indicator, cursor position, and tertiary actions\nvia slot vocabulary.\n\nReplaces the legacy <footer> with positional content per ADR-0023.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "EditorStatusbar"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "editor-statusbar",
+      "statusbar",
+      "bottom-bar",
+      "editor-footer"
+    ],
+    "name": "EditorStatusbar",
+    "related": [
+      "EditorShell",
+      "EditorToolbar",
+      "EditorCanvas"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default — ad-hoc inline content (legacy positional layout)."
+      },
+      "action": {
+        "description": "Trailing action cluster (e.g., toggle full-screen)."
+      },
+      "cursor": {
+        "description": "Cursor position / selection indicator."
+      },
+      "status": {
+        "description": "Save/sync state indicator."
+      },
+      "zoom": {
+        "description": "Zoom level indicator."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, the only state.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "editor-statusbar": [
+        "statusbar",
+        "footer-bar",
+        "bottom-bar"
+      ]
+    },
+    "tag": "editor-statusbar",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

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';