@adia-ai/web-modules 0.3.6 → 0.4.0

package/CHANGELOG.md

@@ -11,6 +11,35 @@ Built from `@adia-ai/web-components` primitives.
 
 _No pending changes._
 
+## [0.4.0] - 2026-05-10
+
+**⚠️ BREAKING** — first non-patch release in the 0.x line. Closes the ADR-0023 arc per [ADR-0024](../../.brain/adrs/0024-legacy-shell-shapes-retired.md). All 6 in-repo consumers migrated in v0.3.6; this release retires the legacy authoring shapes from the shell hosts.
+
+### Removed (BREAKING)
+
+- **`<admin-shell>`** no longer reads `<aside-ui slot="leading|trailing">`, `<aside data-sidebar>`, `<dialog data-command>`, or `[data-resize]` external handle children. Use `<admin-sidebar slot resizable collapsible>` + `<admin-command>` instead.
+- **`<chat-shell>`** no longer reads `<section data-chat-messages>`, `<chat-input-ui data-chat-input>`, `<empty-state-ui data-chat-empty>`, `<header>` with `[data-chat-name]` / `[data-chat-status]`. Use `<chat-thread>` + `<chat-composer>` + `<chat-empty>` + `<chat-header>` + `<chat-status>` instead.
+- **`<editor-shell>`** no longer reads `<header>` toolbar, `<div data-editor-body>` wrapper, `<pane-ui data-left|data-right>`, `<div data-canvas>`, `<footer>` statusbar. Use `<editor-toolbar>` + `<editor-canvas>` + `<editor-sidebar slot>` + `<editor-statusbar>` + `<editor-canvas-empty>` instead.
+
+### Changed
+
+- **`admin-shell.js` host** — 305 → 87 LOC (-71%). The host now does only `[mode]` reflection + 2 attribute-forwarding handlers. All resize / collapse / persistence / dialog wiring is owned by `<admin-sidebar>` and `<admin-command>` per ADR-0023.
+- **`chat-shell.js` host** — `connected()` simplified; only `composer-submit` event recognized (no longer falls back to `submit`).
+- **`editor-shell.js` host** — `connected()` drops dual-shape fallbacks.
+- **CSS layered files** — all `:is(legacy, bespoke)` lifts collapsed to bespoke-only in `admin-shell.sidebar.css`, `admin-shell.shell.css`, `admin-shell.main.css`, `chat-shell.empty.css`, `chat-shell.layout.css`, `editor-shell.layout.css`.
+- **CSS bridge files** — `admin-shell.bespoke.css` / `chat-shell.bespoke.css` / `editor-shell.bespoke.css` updated to canonical-styling commentary (no longer "bridge to existing selectors").
+
+### Verification
+
+- Bespoke children unit tests: **78/78** pass (admin 19 + chat 27 + editor 32)
+- `npm run smoke:consumers` Playwright probe: **6/6** pass
+- `npm run build:site`: clean
+- `check-links --all`: 0 broken
+
+### Migration
+
+See root [CHANGELOG.md `## [0.4.0]`](../../CHANGELOG.md) for the full diff-style migration recipe. The 6 in-repo consumers (`apps/app-shell/`, `site/index.html`, `apps/chat/`, `apps/genui/gen-ui/`, `apps/construct-canvas/`, `apps/genui/a2ui-editor/`) were all migrated in v0.3.6 — see commit `c477d371`.
+
 ## [0.3.6] - 2026-05-10
 
 ### Added

package/chat/chat-shell/chat-shell.js

@@ -15,20 +15,22 @@ let msgId = 0;
  * Behavior-only orchestrator: stamps no HTML of its own.
  * The author writes the structure; chat-shell wires the behaviors.
  *
- * Structure:
+ * Structure (bespoke vocabulary per ADR-0023; **bespoke-only since v0.4.0**):
  *   <chat-shell proxy-url="/api/chat" model="claude-sonnet-4-20250514">
- *     <header>
- *       <span data-chat-name>Claude</span>
- *       <span data-chat-status></span>
- *     </header>
- *     <section data-chat-messages>
- *       <empty-state-ui data-chat-empty icon="chat-circle"
- *         heading="Hello!" description="Ask me anything.">
- *       </empty-state-ui>
- *     </section>
- *     <footer>
- *       <chat-input-ui data-chat-input placeholder="Message..."></chat-input-ui>
- *     </footer>
+ *     <chat-header>
+ *       <span slot="name">Claude</span>
+ *       <chat-status slot="status"></chat-status>
+ *     </chat-header>
+ *     <chat-thread>
+ *       <chat-empty>
+ *         <empty-state-ui icon="chat-circle"
+ *           heading="Hello!" description="Ask me anything.">
+ *         </empty-state-ui>
+ *       </chat-empty>
+ *     </chat-thread>
+ *     <chat-composer>
+ *       <chat-input-ui placeholder="Message..."></chat-input-ui>
+ *     </chat-composer>
  *   </chat-shell>
  *
  * Two modes:
@@ -79,36 +81,22 @@ class ChatShell extends UIElement {
   // ── Lifecycle ──
 
   connected() {
-    // Per ADR-0023 — read BOTH legacy (data-* / raw HTML) AND bespoke
-    // (chat-thread / chat-composer / chat-empty / chat-status) shapes.
-    // The :is() selectors let consumers mix shapes without breakage.
-    this.#messagesEl = this.querySelector('chat-thread')
-      || this.querySelector('[data-chat-messages]')
-      || this.querySelector('section');
-    this.#inputEl = this.querySelector('chat-composer')
-      || this.querySelector('[data-chat-input]')
-      || this.querySelector('chat-input-ui');
-    this.#emptyEl = this.querySelector('chat-empty')
-      || this.querySelector('[data-chat-empty]');
-    this.#statusEl = this.querySelector('chat-status')
-      || this.querySelector('[data-chat-status]');
-
-    // Bespoke <chat-composer> emits 'composer-submit' instead of 'submit'
-    // (so the legacy 'submit' event from inside <chat-input-ui> doesn't
-    // double-fire). Listen for both depending on which shape is present.
-    if (this.#inputEl?.tagName?.toLowerCase() === 'chat-composer') {
-      this.#inputEl.addEventListener('composer-submit', this.#onSubmit);
-    } else {
-      this.#inputEl?.addEventListener('submit', this.#onSubmit);
-    }
+    // **Bespoke-only since v0.4.0** (ADR-0023 Phase 3). The legacy
+    // shapes (<section data-chat-messages>, <chat-input-ui data-chat-input>,
+    // <empty-state-ui data-chat-empty>, [data-chat-status>, [data-chat-name>)
+    // are no longer recognized. Consumers MUST use the bespoke vocabulary.
+    this.#messagesEl = this.querySelector('chat-thread');
+    this.#inputEl = this.querySelector('chat-composer');
+    this.#emptyEl = this.querySelector('chat-empty');
+    this.#statusEl = this.querySelector('chat-status');
+
+    // <chat-composer> forwards inner <chat-input-ui> submit as
+    // composer-submit (bespoke event name prevents double-fire).
+    this.#inputEl?.addEventListener('composer-submit', this.#onSubmit);
   }
 
   disconnected() {
-    if (this.#inputEl?.tagName?.toLowerCase() === 'chat-composer') {
-      this.#inputEl.removeEventListener('composer-submit', this.#onSubmit);
-    } else {
-      this.#inputEl?.removeEventListener('submit', this.#onSubmit);
-    }
+    this.#inputEl?.removeEventListener('composer-submit', this.#onSubmit);
     this.abort();
   }
 

package/chat/chat-shell/css/chat-shell.empty.css

@@ -2,11 +2,11 @@
    chat-shell — Empty state
    ═══════════════════════════════════════════════════════════════ */
 
-chat-shell [data-chat-empty] {
+chat-shell chat-empty {
   margin: auto;
 }
 
-chat-shell[streaming] [data-chat-empty],
-chat-shell:has([data-role]) [data-chat-empty] {
+chat-shell[streaming] chat-empty,
+chat-shell:has([data-role]) chat-empty {
   display: none;
 }

package/chat/chat-shell/css/chat-shell.layout.css

@@ -29,14 +29,14 @@ chat-shell > header [data-chat-name] {
   font-size: var(--chat-header-name-font);
 }
 
-chat-shell > header [data-chat-status] {
+chat-shell > header chat-status {
   font-size: var(--chat-header-status-font);
   color: var(--chat-header-status-fg);
   margin-inline-start: auto;
 }
 
 /* Messages scroll container */
-chat-shell > [data-chat-messages],
+chat-shell > chat-thread,
 chat-shell > section {
   flex: 1;
   overflow-y: auto;

package/editor/editor-canvas/editor-canvas.examples.html

@@ -0,0 +1,65 @@
+<header>
+    <div>
+      <h1>Editor Canvas</h1>
+      <div data-actions>
+        <tag-ui size="sm">editor-canvas</tag-ui>
+        <tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
+      </div>
+    </div>
+    <p>Module-tier editor canvas surface — replaces legacy <div data-canvas>. Owns scroll/zoom container, [empty] + [focused] reflected.</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-canvas/editor-canvas.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 Canvas — 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-canvas.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-canvas.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-canvas.examples.html — ${err.message}</p>`;
+      console.error('[editor-canvas.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/editor/editor-canvas-empty/editor-canvas-empty.examples.html

@@ -0,0 +1,65 @@
+<header>
+    <div>
+      <h1>Editor Canvas Empty</h1>
+      <div data-actions>
+        <tag-ui size="sm">editor-canvas-empty</tag-ui>
+        <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
+      </div>
+    </div>
+    <p>Module-tier editor canvas empty state. CSS-only. Visibility driven by parent <editor-canvas>[empty].</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-canvas-empty/editor-canvas-empty.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 Canvas Empty — 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-canvas-empty.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-canvas-empty.examples.html — ${err.message}</p>`;
+      console.error('[editor-canvas-empty.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/editor/editor-shell/css/editor-shell.bespoke.css

@@ -129,11 +129,76 @@ editor-sidebar > pane-ui {
   flex-direction: column;
 }
 
-/* When sidebar is collapsed, hide pane content but keep the rail */
-editor-sidebar[collapsed] > pane-ui > :not(header) {
+/* ── editor-sidebar collapsed-mode polish ──
+   When collapsed: pane shrinks to icon-rail width (48px); section
+   content hides; header narrows to icon-only with horizontal-center;
+   smooth width transition on uncollapse. Mirrors the rail-pattern
+   established by admin-sidebar's collapsed state.
+   ═══════════════════════════════════════════════════════════════ */
+
+editor-sidebar {
+  transition: width var(--editor-sidebar-duration, var(--a-duration, 180ms))
+              var(--editor-sidebar-easing, var(--a-easing, ease));
+  container-type: inline-size;
+  container-name: editor-sidebar;
+}
+
+/* Inner pane animates the visible width */
+editor-sidebar > pane-ui {
+  transition: width var(--editor-sidebar-duration, var(--a-duration, 180ms))
+              var(--editor-sidebar-easing, var(--a-easing, ease));
+}
+
+/* Collapsed state — hide section/footer content; preserve header icons */
+editor-sidebar[collapsed] > pane-ui {
+  width: var(--editor-sidebar-collapsed-width, 48px) !important;
+  min-width: var(--editor-sidebar-collapsed-width, 48px);
+  overflow: hidden;
+}
+
+editor-sidebar[collapsed] > pane-ui > section,
+editor-sidebar[collapsed] > pane-ui > footer {
+  display: none;
+}
+
+/* Collapsed header — center icons horizontally; hide text labels */
+editor-sidebar[collapsed] > pane-ui > header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--a-space-1);
+  padding: var(--a-space-2) 0;
+  /* Hide direct text nodes via opacity-0 + descendant text containers */
+}
+
+/* Collapsed header — hide text labels next to icons */
+editor-sidebar[collapsed] > pane-ui > header :is(
+  span:not([data-icon]):not([slot]),
+  label,
+  h1, h2, h3
+) {
   display: none;
 }
 
+/* Provide a visual rail affordance */
+editor-sidebar[collapsed] {
+  background: var(--editor-sidebar-rail-bg, var(--a-bg-subtle, var(--a-bg)));
+}
+
+/* Container query — child elements can adapt to narrow mode */
+@container editor-sidebar (max-width: 96px) {
+  /* Children can hide labels / shrink icons via [data-narrow] */
+}
+
+/* When resizing — disable transitions to feel responsive */
+editor-sidebar[resizing] {
+  transition: none;
+}
+editor-sidebar[resizing] > pane-ui {
+  transition: none;
+}
+
 /* ── editor-statusbar — bottom chrome bar ── */
 editor-shell > editor-statusbar {
   display: flex;

package/editor/editor-shell/css/editor-shell.layout.css

@@ -4,9 +4,9 @@
    Structure:
      editor-shell
        header                — topbar
-       [data-editor-body]    — flex row: pane | canvas | pane
+           — flex row: pane | canvas | pane
          pane-ui              — left navigator
-         [data-canvas]       — center canvas
+         editor-canvas       — center canvas
          pane-ui              — right inspector
        footer                — bottombar
    ═══════════════════════════════════════════════════════════════ */
@@ -82,7 +82,7 @@ editor-shell > header > [slot="action-leading"] {
 }
 
 /* ── Body: pane | canvas | pane ── */
-editor-shell > [data-editor-body] {
+editor-shell >  {
   display: flex;
   flex: 1;
   min-width: 0;
@@ -90,7 +90,7 @@ editor-shell > [data-editor-body] {
 }
 
 /* ── Canvas ── */
-editor-shell [data-canvas] {
+editor-shell editor-canvas {
   flex: 1;
   min-width: 0;
   display: flex;
@@ -107,11 +107,11 @@ editor-shell pane-ui {
   flex-shrink: 0;
 }
 
-editor-shell pane-ui[data-left] {
+editor-shell editor-sidebar[slot="leading"] > pane-ui {
   width: var(--editor-pane-width-left);
 }
 
-editor-shell pane-ui[data-right] {
+editor-shell editor-sidebar[slot="trailing"] > pane-ui {
   width: var(--editor-pane-width-right);
 }
 

package/editor/editor-shell/editor-shell.js

@@ -2,26 +2,27 @@ import { UIElement } from '../../../web-components/core/element.js';
 
 /**
  * <editor-shell focus-mode?>
- *   <editor-toolbar>...</editor-toolbar>           (or legacy <header>)
- *   <editor-sidebar slot="leading">                 (or legacy <pane-ui data-left>)
+ *   <editor-toolbar>...</editor-toolbar>
+ *   <editor-sidebar slot="leading">
  *     <pane-ui resizable>...</pane-ui>
  *   </editor-sidebar>
- *   <editor-canvas>...</editor-canvas>              (or legacy <div data-canvas>)
- *   <editor-sidebar slot="trailing">                (or legacy <pane-ui data-right>)
+ *   <editor-canvas>...</editor-canvas>
+ *   <editor-sidebar slot="trailing">
  *     <pane-ui resizable>...</pane-ui>
  *   </editor-sidebar>
- *   <editor-statusbar>...</editor-statusbar>        (or legacy <footer>)
+ *   <editor-statusbar>...</editor-statusbar>
  * </editor-shell>
  *
  * Behavior-only orchestrator for design-tool UIs:
  * topbar, navigator pane, center canvas, inspector pane, bottombar.
  *
- * Per ADR-0023, the bespoke shape uses cluster-namespaced custom
- * elements. Both legacy and bespoke shapes coexist via :is() reads
- * in the host. Editor cluster has the smallest bespoke family of
- * the three (admin, chat, editor) — only 3 JS-bearing children +
- * 2 CSS-only structural stubs — because <pane-ui> already owns
- * resize and the editor doesn't need a command palette.
+ * **Bespoke-only since v0.4.0** (ADR-0023 Phase 3). The legacy shapes
+ * (<header>, <div data-editor-body>, <pane-ui data-left|data-right>,
+ * <div data-canvas>, <footer>) are no longer recognized. The editor
+ * cluster has the smallest bespoke family of the three (admin / chat /
+ * editor) — only 3 JS-bearing children + 2 CSS-only structural stubs —
+ * because <pane-ui> already owns resize and the editor doesn't need
+ * a command palette.
  *
  * Reflected attributes:
  *   [focus-mode]  — distraction-free / canvas-focus mode; consumers
@@ -48,13 +49,14 @@ class EditorShell extends UIElement {
   #onToolbarAction = null;
 
   connected() {
-    // Per ADR-0023 — read BOTH legacy + bespoke shapes
-    this.#toolbarEl = this.querySelector('editor-toolbar')
-      || this.querySelector('header');
-    this.#canvasEl = this.querySelector('editor-canvas')
-      || this.querySelector('[data-canvas]');
+    // **Bespoke-only since v0.4.0** (ADR-0023 Phase 3). The legacy
+    // shapes (<header>, <div data-canvas>, <div data-editor-body>,
+    // <pane-ui data-left|data-right>, <footer>) are no longer
+    // recognized. Consumers MUST use the bespoke vocabulary.
+    this.#toolbarEl = this.querySelector('editor-toolbar');
+    this.#canvasEl = this.querySelector('editor-canvas');
 
-    // Wire select options (legacy concern, kept for backwards compat)
+    // Wire select options inside the toolbar / sidebars
     this.#wireSelects();
 
     // Listen for toolbar-action bubbling from <editor-toolbar>

package/editor/editor-sidebar/editor-sidebar.a2ui.json

@@ -20,6 +20,11 @@
     },
     "component": {
       "const": "EditorSidebar"
+    },
+    "resizing": {
+      "description": "Reflected — set during an active pointer-drag of the pane's\nresize handle. Used to disable transitions and visual treatments\nthat would feel laggy during drag.\n",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": [

package/editor/editor-sidebar/editor-sidebar.examples.html

@@ -0,0 +1,65 @@
+<header>
+    <div>
+      <h1>Editor Sidebar</h1>
+      <div data-actions>
+        <tag-ui size="sm">editor-sidebar</tag-ui>
+        <tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
+      </div>
+    </div>
+    <p>Module-tier editor-cluster sidebar — wraps <pane-ui resizable> rather than reimplementing drag. Cluster-distinct localStorage prefix.</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>