@adia-ai/web-modules 0.3.5 → 0.4.0

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

@@ -1,47 +1,104 @@
 import { UIElement } from '../../../web-components/core/element.js';
 
 /**
- * <editor-shell> — Editor layout pattern.
+ * <editor-shell focus-mode?>
+ *   <editor-toolbar>...</editor-toolbar>
+ *   <editor-sidebar slot="leading">
+ *     <pane-ui resizable>...</pane-ui>
+ *   </editor-sidebar>
+ *   <editor-canvas>...</editor-canvas>
+ *   <editor-sidebar slot="trailing">
+ *     <pane-ui resizable>...</pane-ui>
+ *   </editor-sidebar>
+ *   <editor-statusbar>...</editor-statusbar>
+ * </editor-shell>
  *
- * Behavior-only orchestrator for design tool UIs:
+ * Behavior-only orchestrator for design-tool UIs:
  * topbar, navigator pane, center canvas, inspector pane, bottombar.
  *
- * Structure:
- *   <editor-shell>
- *     <header>
- *       <span data-title>Editor</span>
- *       <span data-spacer></span>
- *       <button-ui icon="gear" variant="ghost" size="sm"></button-ui>
- *     </header>
- *     <div data-editor-body>
- *       <pane-ui data-left resizable>
- *         <header>Navigator</header>
- *         <section>...tree, layers...</section>
- *       </pane-ui>
- *       <div data-canvas>
- *         ...canvas content...
- *       </div>
- *       <pane-ui data-right resizable>
- *         <header>Inspector</header>
- *         <section>...form fields...</section>
- *         <footer>...actions...</footer>
- *       </pane-ui>
- *     </div>
- *     <footer>
- *       <span>Ready</span>
- *       <span data-spacer></span>
- *       <span>100%</span>
- *     </footer>
- *   </editor-shell>
+ * **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
+ *                   can hide toolbar/sidebars/statusbar via CSS:
+ *                     editor-shell[focus-mode] editor-toolbar { display: none; }
+ *
+ * Events:
+ *   editor-mode-change  — fires when [focus-mode] is toggled
+ *
+ * Public methods:
+ *   .toggleFocusMode()  — flip [focus-mode]; also propagates to
+ *                         child <editor-toolbar>'s [full-screen]
+ *                         and <editor-canvas>'s [focused] attributes
  */
 class EditorShell extends UIElement {
+  static properties = {
+    focusMode: { type: Boolean, default: false, reflect: true, attribute: 'focus-mode' },
+  };
+
   static template = () => null;
 
+  #toolbarEl = null;
+  #canvasEl = null;
+  #onToolbarAction = null;
+
   connected() {
-    // Wire select options if present
+    // **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 inside the toolbar / sidebars
     this.#wireSelects();
+
+    // Listen for toolbar-action bubbling from <editor-toolbar>
+    this.#onToolbarAction = (e) => {
+      const name = e?.detail?.name;
+      if (!name) return;
+      if (name === 'toggle-focus' || name === 'full-screen') {
+        this.toggleFocusMode();
+      }
+    };
+    this.addEventListener('toolbar-action', this.#onToolbarAction);
+  }
+
+  disconnected() {
+    if (this.#onToolbarAction) {
+      this.removeEventListener('toolbar-action', this.#onToolbarAction);
+    }
+    this.#onToolbarAction = null;
   }
 
+  // ── Public API ──
+
+  toggleFocusMode() {
+    this.focusMode = !this.focusMode;
+
+    // Propagate to bespoke children if present
+    if (this.#toolbarEl?.tagName?.toLowerCase() === 'editor-toolbar') {
+      this.#toolbarEl.fullScreen = this.focusMode;
+    }
+    if (this.#canvasEl?.tagName?.toLowerCase() === 'editor-canvas') {
+      if (this.focusMode) this.#canvasEl.focus?.();
+      else this.#canvasEl.blur?.();
+    }
+
+    this.dispatchEvent(new CustomEvent('editor-mode-change', {
+      bubbles: true,
+      detail: { focusMode: this.focusMode },
+    }));
+  }
+
+  // ── Internal ──
+
   #wireSelects() {
     for (const sel of this.querySelectorAll('select-ui[data-options]')) {
       try {

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

@@ -0,0 +1,93 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/EditorSidebar.json",
+  "title": "EditorSidebar",
+  "description": "Module-tier editor-cluster sidebar — wraps <pane-ui resizable>\n(the primitive that owns drag) and adds [collapsed] reflected\nstate, localStorage persistence (adia-editor-sidebar-{name}),\nand .toggle() / .collapse() / .expand() public API.\n\nSits inside <editor-shell> as slot=\"leading\" (navigator pane) or\nslot=\"trailing\" (inspector pane). Mirrors the cluster-namespace\nshape from <admin-sidebar> and <chat-sidebar>, but DELEGATES to\n<pane-ui> for resize rather than reimplementing it (per\nbespoke-shell-children skill §When NOT to promote — pane primitive\nalready owns this concern).\n\nThis is the FIRST bespoke shell child that delegates rather than\nduplicates a primitive's behavior. Pattern is: cluster-namespace +\nstate-as-attribute + persistence at the bespoke tier; physical\ndrag at the primitive tier.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "collapsed": {
+      "description": "Reflected — set when inner <pane-ui> width is at or below 96px snap threshold.",
+      "type": "boolean",
+      "default": false
+    },
+    "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": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {
+      "sidebar-toggle": {
+        "description": "Bubbles when .toggle() / .collapse() / .expand() is called.",
+        "detail": {
+          "expanded": "boolean",
+          "name": "string"
+        }
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "editor-sidebar",
+      "navigator-pane",
+      "inspector-pane",
+      "editor-rail",
+      "sidebar",
+      "leading",
+      "trailing"
+    ],
+    "name": "EditorSidebar",
+    "related": [
+      "EditorShell",
+      "EditorCanvas",
+      "Pane",
+      "AdminSidebar",
+      "ChatSidebar"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default — the inner <pane-ui resizable> wrapper. Authors compose header / section / footer inside the pane as usual."
+      }
+    },
+    "states": [
+      {
+        "description": "Default expanded state.",
+        "name": "idle"
+      },
+      {
+        "description": "Inner pane is at or below the snap threshold.",
+        "attribute": "collapsed",
+        "name": "collapsed"
+      }
+    ],
+    "synonyms": {
+      "editor-sidebar": [
+        "navigator",
+        "inspector",
+        "editor-rail",
+        "side-panel"
+      ]
+    },
+    "tag": "editor-sidebar",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

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>

package/editor/editor-sidebar/editor-sidebar.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 Sidebar — 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-sidebar.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-sidebar.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-sidebar.examples.html — ${err.message}</p>`;
+      console.error('[editor-sidebar.html]', err);
+    }
+  </script>
+
+</body>
+</html>

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

@@ -0,0 +1,197 @@
+/**
+ * <editor-sidebar slot="leading|trailing" collapsible>
+ *   <pane-ui resizable>
+ *     <header>Navigator</header>
+ *     <section>...content...</section>
+ *     <footer>...actions...</footer>
+ *   </pane-ui>
+ * </editor-sidebar>
+ *
+ * Module-tier editor-cluster sidebar — wraps <pane-ui resizable>
+ * (the primitive that owns drag) and adds:
+ *
+ *   - [collapsed] reflected attribute (read from inner <pane-ui>
+ *     width via ResizeObserver; threshold = SNAP_THRESHOLD = 96px)
+ *   - localStorage persistence (adia-editor-sidebar-{name}) — preserves
+ *     pane width across reloads, distinct from admin's adia-sidebar-*
+ *     and chat's adia-chat-sidebar-* prefixes per cluster-namespace
+ *     convention
+ *   - .toggle() / .collapse() / .expand() public API (delegates to
+ *     inner <pane-ui> by setting its style.width)
+ *   - Slot routing — pass-through; whatever the author puts inside
+ *     the inner <pane-ui> is preserved
+ *
+ * Author-supplied attributes (read once at connect):
+ *   [slot="leading"|"trailing"]  — required, drives localStorage
+ *                                  namespacing
+ *   [collapsible]                — opts in to programmatic collapse
+ *   [name="<id>"]                — optional override for the
+ *                                  localStorage key (defaults to slot)
+ *
+ * Reflected attributes:
+ *   [collapsed]  — set when inner pane width ≤ SNAP_THRESHOLD
+ *
+ * Events:
+ *   sidebar-toggle  — bubbles. detail: { name, expanded }
+ *
+ * The host (<editor-shell>) reads either <editor-sidebar> or
+ * <pane-ui data-left|data-right> via :is() selector for backwards compat.
+ *
+ * Note — this is the FIRST bespoke shell child that DELEGATES rather
+ * than DUPLICATES a primitive's behavior. Per skill principle 4, since
+ * <pane-ui resizable> already owns drag, we compose it rather than
+ * reimplement. The cluster-namespace + state-as-attribute + persistence
+ * concerns still get owned at this tier (because they're cluster-
+ * specific, not primitive-specific). See bespoke-shell-children skill
+ * §When NOT to promote for the rationale.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+const SNAP_THRESHOLD = 96;  // px — below this, sidebar is "collapsed"
+const STORAGE_PREFIX = 'adia-editor-sidebar-';
+
+class EditorSidebar extends UIElement {
+  static properties = {
+    collapsed: { type: Boolean, default: false, reflect: true },
+    resizing: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #pane = null;
+  #ro = null;
+  #storageKey = null;
+  #onPointerDown = null;
+  #onPointerUp = null;
+
+  connected() {
+    this.#pane = this.querySelector('pane-ui');
+    if (!this.#pane) return;
+
+    // Resolve storage key
+    const slot = this.getAttribute('slot') || 'leading';
+    const name = this.getAttribute('name') || slot;
+    this.#storageKey = `${STORAGE_PREFIX}${name}`;
+
+    // Restore persisted width
+    this.#restoreWidth();
+
+    // Observe inner pane width to maintain [collapsed] reflected
+    this.#ro = new ResizeObserver(() => this.#syncCollapsed());
+    this.#ro.observe(this.#pane);
+
+    // Track resize via pointerdown on resize-handle children of the pane
+    // (pane-ui's drag-handle is internal; we listen on the pane and let
+    // pointerup on document terminate)
+    this.#onPointerDown = (e) => {
+      // Heuristic — pointerdown inside pane that targets a drag-handle
+      // (covers pane-ui's internal handle classes + [data-resize])
+      const target = e.target;
+      if (target?.matches?.('[data-resize], [class*="resize"], [class*="handle"]')) {
+        this.resizing = true;
+      }
+    };
+    this.#pane.addEventListener('pointerdown', this.#onPointerDown);
+
+    this.#onPointerUp = () => {
+      if (this.resizing) {
+        this.resizing = false;
+      }
+      this.#persistWidth();
+    };
+    document.addEventListener('pointerup', this.#onPointerUp);
+  }
+
+  disconnected() {
+    this.#ro?.disconnect();
+    this.#ro = null;
+    if (this.#onPointerDown && this.#pane) {
+      this.#pane.removeEventListener('pointerdown', this.#onPointerDown);
+      this.#onPointerDown = null;
+    }
+    if (this.#onPointerUp) {
+      document.removeEventListener('pointerup', this.#onPointerUp);
+      this.#onPointerUp = null;
+    }
+  }
+
+  // ── Public API ──
+
+  toggle() {
+    if (this.collapsed) this.expand();
+    else this.collapse();
+    return this.collapsed;
+  }
+
+  collapse() {
+    if (!this.#pane) return;
+    // Preserve current expanded width before snapping so expand() can restore
+    if (!this.collapsed) {
+      this.#persistWidth();
+    }
+    this.#pane.style.width = `${SNAP_THRESHOLD}px`;
+    this.collapsed = true;
+    this.#emitToggle();
+  }
+
+  expand() {
+    if (!this.#pane) return;
+    // Restore from storage, falling back to a usable default
+    const stored = this.#readStoredWidth();
+    const restored = stored && stored > SNAP_THRESHOLD ? stored : 240;
+    this.#pane.style.width = `${restored}px`;
+    this.collapsed = false;
+    this.#persistWidth();
+    this.#emitToggle();
+  }
+
+  // ── Internal ──
+
+  #syncCollapsed() {
+    if (!this.#pane) return;
+    const rect = this.#pane.getBoundingClientRect();
+    this.collapsed = rect.width <= SNAP_THRESHOLD;
+  }
+
+  #emitToggle() {
+    const slot = this.getAttribute('slot') || 'leading';
+    const name = this.getAttribute('name') || slot;
+    this.dispatchEvent(new CustomEvent('sidebar-toggle', {
+      bubbles: true,
+      detail: { name, expanded: !this.collapsed },
+    }));
+  }
+
+  #persistWidth() {
+    if (!this.#pane || !this.#storageKey) return;
+    try {
+      const w = this.#pane.style.width || '';
+      if (w) localStorage.setItem(this.#storageKey, w);
+    } catch { /* private mode etc. */ }
+  }
+
+  #readStoredWidth() {
+    if (!this.#storageKey) return null;
+    try {
+      const raw = localStorage.getItem(this.#storageKey);
+      if (!raw) return null;
+      const n = parseFloat(raw);
+      return isFinite(n) ? n : null;
+    } catch {
+      return null;
+    }
+  }
+
+  #restoreWidth() {
+    if (!this.#pane) return;
+    const stored = this.#readStoredWidth();
+    if (stored && stored > 0) {
+      this.#pane.style.width = `${stored}px`;
+      this.collapsed = stored <= SNAP_THRESHOLD;
+    }
+  }
+}
+
+customElements.define('editor-sidebar', EditorSidebar);
+export { EditorSidebar };

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

@@ -0,0 +1,145 @@
+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();
+  });
+
+  it('reflects [resizing] via property assignment', async () => {
+    const sb = mount('<editor-sidebar slot="leading"><pane-ui></pane-ui></editor-sidebar>');
+    sb.resizing = true;
+    await tick();
+    expect(sb.hasAttribute('resizing')).toBe(true);
+    sb.resizing = false;
+    await tick();
+    expect(sb.hasAttribute('resizing')).toBe(false);
+  });
+
+  it('clears [resizing] on document pointerup', async () => {
+    const sb = mount('<editor-sidebar slot="leading"><pane-ui></pane-ui></editor-sidebar>');
+    sb.resizing = true;
+    await tick();
+    document.dispatchEvent(new Event('pointerup'));
+    await tick();
+    expect(sb.resizing).toBe(false);
+  });
+});