@adia-ai/web-modules 0.3.5 → 0.4.0

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

@@ -0,0 +1,91 @@
+# 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
+  resizing:
+    description: |
+      Reflected — set during an active pointer-drag of the pane's
+      resize handle. Used to disable transitions and visual treatments
+      that would feel laggy during drag.
+    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.examples.html

@@ -0,0 +1,65 @@
+<header>
+    <div>
+      <h1>Editor Statusbar</h1>
+      <div data-actions>
+        <tag-ui size="sm">editor-statusbar</tag-ui>
+        <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
+      </div>
+    </div>
+    <p>Module-tier editor statusbar — bottom chrome bar. CSS-only.</p>
+  </header>
+
+<section data-section>
+  <h2 variant="section">Role</h2>
+  <p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the editor cluster's bespoke family — <code>&lt;editor-shell&gt;</code> (host), <code>&lt;editor-toolbar&gt;</code>, <code>&lt;editor-canvas&gt;</code>, <code>&lt;editor-sidebar&gt;</code> (JS-bearing) + <code>&lt;editor-statusbar&gt;</code>, <code>&lt;editor-canvas-empty&gt;</code> (CSS-only). Confirms the family pattern is canonical across 3 archetypes (admin/chat/editor).</p>
+</section>
+
+<section data-section>
+  <h2 variant="section">Composition</h2>
+  <p>Typical placement inside <code>&lt;editor-shell&gt;</code>:</p>
+  <code-ui language="html">&lt;editor-shell&gt;
+  &lt;editor-toolbar&gt;
+    &lt;span slot="title"&gt;Untitled.fig&lt;/span&gt;
+    &lt;button-ui slot="action" icon="gear"&gt;&lt;/button-ui&gt;
+  &lt;/editor-toolbar&gt;
+
+  &lt;editor-sidebar slot="leading" collapsible&gt;
+    &lt;pane-ui resizable&gt;
+      &lt;header&gt;Navigator&lt;/header&gt;
+      &lt;section&gt;…layers…&lt;/section&gt;
+    &lt;/pane-ui&gt;
+  &lt;/editor-sidebar&gt;
+
+  &lt;editor-canvas&gt;
+    &lt;editor-canvas-empty&gt;
+      &lt;empty-state-ui icon="square" heading="New document" description="Drop content to begin."&gt;&lt;/empty-state-ui&gt;
+    &lt;/editor-canvas-empty&gt;
+  &lt;/editor-canvas&gt;
+
+  &lt;editor-sidebar slot="trailing" collapsible&gt;
+    &lt;pane-ui resizable&gt;
+      &lt;header&gt;Inspector&lt;/header&gt;
+      &lt;section&gt;…properties…&lt;/section&gt;
+    &lt;/pane-ui&gt;
+  &lt;/editor-sidebar&gt;
+
+  &lt;editor-statusbar&gt;
+    &lt;span slot="status"&gt;Saved&lt;/span&gt;
+    &lt;span slot="zoom"&gt;100%&lt;/span&gt;
+  &lt;/editor-statusbar&gt;
+&lt;/editor-shell&gt;</code-ui>
+</section>
+
+<section data-section>
+  <h2 variant="section">State as attribute</h2>
+  <code-ui language="css">/* Hide all chrome in focus mode */
+editor-shell[focus-mode] :is(editor-toolbar, editor-statusbar, editor-sidebar) {
+  display: none;
+}
+
+/* Visual treatment for empty canvas */
+editor-canvas[empty] { /* placeholder UI */ }
+
+/* Highlight focused canvas */
+editor-canvas[focused] { outline: 2px solid var(--a-accent); }</code-ui>
+</section>

package/editor/editor-statusbar/editor-statusbar.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Editor Statusbar — AdiaUI</title>
+
+  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
+  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
+  <link rel="stylesheet" href="../editor-shell/editor-shell.css">
+  <link rel="stylesheet" href="../../../web-components/components/code/code.css">
+  <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
+
+  <script type="module" src="../editor-shell/editor-shell.js"></script>
+  <script type="module" src="../../../web-components/components/code/code.js"></script>
+  <script type="module" src="../../../web-components/components/tag/tag.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./editor-statusbar.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load editor-statusbar.examples.html — ${err.message}</p>`;
+      console.error('[editor-statusbar.html]', err);
+    }
+  </script>
+
+</body>
+</html>

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.examples.html

@@ -0,0 +1,65 @@
+<header>
+    <div>
+      <h1>Editor Toolbar</h1>
+      <div data-actions>
+        <tag-ui size="sm">editor-toolbar</tag-ui>
+        <tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
+      </div>
+    </div>
+    <p>Module-tier editor toolbar — replaces legacy <header> chrome bar. Click-bubble for [data-toolbar-action] buttons + [full-screen] reflected attribute.</p>
+  </header>
+
+<section data-section>
+  <h2 variant="section">Role</h2>
+  <p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the editor cluster's bespoke family — <code>&lt;editor-shell&gt;</code> (host), <code>&lt;editor-toolbar&gt;</code>, <code>&lt;editor-canvas&gt;</code>, <code>&lt;editor-sidebar&gt;</code> (JS-bearing) + <code>&lt;editor-statusbar&gt;</code>, <code>&lt;editor-canvas-empty&gt;</code> (CSS-only). Confirms the family pattern is canonical across 3 archetypes (admin/chat/editor).</p>
+</section>
+
+<section data-section>
+  <h2 variant="section">Composition</h2>
+  <p>Typical placement inside <code>&lt;editor-shell&gt;</code>:</p>
+  <code-ui language="html">&lt;editor-shell&gt;
+  &lt;editor-toolbar&gt;
+    &lt;span slot="title"&gt;Untitled.fig&lt;/span&gt;
+    &lt;button-ui slot="action" icon="gear"&gt;&lt;/button-ui&gt;
+  &lt;/editor-toolbar&gt;
+
+  &lt;editor-sidebar slot="leading" collapsible&gt;
+    &lt;pane-ui resizable&gt;
+      &lt;header&gt;Navigator&lt;/header&gt;
+      &lt;section&gt;…layers…&lt;/section&gt;
+    &lt;/pane-ui&gt;
+  &lt;/editor-sidebar&gt;
+
+  &lt;editor-canvas&gt;
+    &lt;editor-canvas-empty&gt;
+      &lt;empty-state-ui icon="square" heading="New document" description="Drop content to begin."&gt;&lt;/empty-state-ui&gt;
+    &lt;/editor-canvas-empty&gt;
+  &lt;/editor-canvas&gt;
+
+  &lt;editor-sidebar slot="trailing" collapsible&gt;
+    &lt;pane-ui resizable&gt;
+      &lt;header&gt;Inspector&lt;/header&gt;
+      &lt;section&gt;…properties…&lt;/section&gt;
+    &lt;/pane-ui&gt;
+  &lt;/editor-sidebar&gt;
+
+  &lt;editor-statusbar&gt;
+    &lt;span slot="status"&gt;Saved&lt;/span&gt;
+    &lt;span slot="zoom"&gt;100%&lt;/span&gt;
+  &lt;/editor-statusbar&gt;
+&lt;/editor-shell&gt;</code-ui>
+</section>
+
+<section data-section>
+  <h2 variant="section">State as attribute</h2>
+  <code-ui language="css">/* Hide all chrome in focus mode */
+editor-shell[focus-mode] :is(editor-toolbar, editor-statusbar, editor-sidebar) {
+  display: none;
+}
+
+/* Visual treatment for empty canvas */
+editor-canvas[empty] { /* placeholder UI */ }
+
+/* Highlight focused canvas */
+editor-canvas[focused] { outline: 2px solid var(--a-accent); }</code-ui>
+</section>

package/editor/editor-toolbar/editor-toolbar.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Editor Toolbar — AdiaUI</title>
+
+  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
+  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
+  <link rel="stylesheet" href="../editor-shell/editor-shell.css">
+  <link rel="stylesheet" href="../../../web-components/components/code/code.css">
+  <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
+
+  <script type="module" src="../editor-shell/editor-shell.js"></script>
+  <script type="module" src="./editor-toolbar.js"></script>
+  <script type="module" src="../../../web-components/components/code/code.js"></script>
+  <script type="module" src="../../../web-components/components/tag/tag.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./editor-toolbar.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load editor-toolbar.examples.html — ${err.message}</p>`;
+      console.error('[editor-toolbar.html]', err);
+    }
+  </script>
+
+</body>
+</html>

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