@adia-ai/web-modules 0.3.5 → 0.3.6

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

@@ -0,0 +1,172 @@
+/* ═══════════════════════════════════════════════════════════════
+   editor-shell — Bespoke shell-tier children (Phase 2 of ADR-0023)
+
+   The editor-* CSS-only structural children are styled by SHARING
+   the same CSS rules as their legacy raw-HTML counterparts. This
+   file maps the new bespoke tags to the existing layout.css patterns
+   without modifying the layered files themselves.
+
+   Mirrors admin-shell.bespoke.css and chat-shell.bespoke.css. Keeps
+   the editor cluster's CSS modifications isolated in one bridge so
+   Phase 3 (legacy shape removal) is a single-file delete.
+
+   Editor cluster decomposition note:
+   - <editor-toolbar> — replaces <header> chrome bar (CSS-only? no,
+     it's JS-bearing for [data-toolbar-action] click bubble + slot
+     routing, but visually it's just a chrome bar like admin-topbar)
+   - <editor-canvas> — replaces <div data-canvas> central content
+     (JS-bearing — owns [empty] + [focused] reflected, zoom API)
+   - <editor-sidebar> — wraps <pane-ui resizable> (JS-bearing — owns
+     [collapsed] + persistence, delegates drag to <pane-ui>)
+   - <editor-statusbar> — replaces <footer> chrome bar (CSS-only)
+   - <editor-canvas-empty> — empty-state slot for <editor-canvas>
+     (CSS-only, visibility via parent [empty])
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── editor-toolbar — top chrome bar ── */
+editor-shell > editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-toolbar-gap, var(--a-space-2));
+  padding: 0 var(--editor-toolbar-px, var(--a-space-3));
+  height: var(--editor-toolbar-height, var(--a-size-lg));
+  font-size: var(--editor-toolbar-font, var(--a-ui-size));
+  border-bottom: var(--editor-border, 1px solid var(--a-border-subtle));
+  background: var(--editor-bg, var(--a-bg));
+  flex-shrink: 0;
+  grid-area: toolbar;
+}
+
+/* Slot vocabulary inside editor-toolbar */
+editor-toolbar > [slot="title"] {
+  font-weight: var(--a-weight-medium, 500);
+  color: var(--a-fg);
+}
+
+editor-toolbar > [slot="action-leading"] {
+  margin-inline-end: var(--a-space-2);
+}
+
+editor-toolbar > [slot="status"] {
+  margin-inline-start: var(--a-space-2);
+  color: var(--a-fg-muted);
+}
+
+editor-toolbar > [slot="action"]:first-of-type {
+  margin-inline-start: auto;
+}
+
+/* Full-screen mode — toolbar can be hidden by host CSS */
+editor-toolbar[full-screen] {
+  /* Optional: visual treatment in full-screen mode. Default: no change.
+     Authors can override via:
+       editor-shell:has(editor-toolbar[full-screen]) editor-toolbar { display: none; }
+   */
+}
+
+/* ── editor-canvas — central content surface ── */
+editor-shell > editor-canvas {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: auto;
+  background: var(--editor-canvas-bg, var(--a-bg-subtle));
+  grid-area: canvas;
+
+  /* Apply zoom transform if the JS sets --editor-canvas-zoom */
+  /* Children inherit; the canvas itself is the scroll surface */
+}
+
+editor-canvas[focused] {
+  /* Optional: visual focus treatment. Default: no visual change. */
+}
+
+editor-canvas > * {
+  transform: scale(var(--editor-canvas-zoom, 1));
+  transform-origin: top left;
+}
+
+/* ── editor-canvas-empty — visibility via parent's [empty] ── */
+editor-canvas:not([empty]) > editor-canvas-empty {
+  display: none;
+}
+
+editor-canvas[empty] > editor-canvas-empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: var(--a-space-6);
+}
+
+/* ── editor-sidebar — wraps <pane-ui resizable> ── */
+:is(editor-sidebar[slot="leading"], editor-sidebar[slot="trailing"]) {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-height: 0;
+  position: relative;
+}
+
+editor-sidebar[slot="leading"] {
+  grid-area: leading;
+  border-right: var(--editor-border, 1px solid var(--a-border-subtle));
+}
+
+editor-sidebar[slot="trailing"] {
+  grid-area: trailing;
+  border-left: var(--editor-border, 1px solid var(--a-border-subtle));
+}
+
+/* The inner <pane-ui> takes all available space */
+editor-sidebar > pane-ui {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* When sidebar is collapsed, hide pane content but keep the rail */
+editor-sidebar[collapsed] > pane-ui > :not(header) {
+  display: none;
+}
+
+/* ── editor-statusbar — bottom chrome bar ── */
+editor-shell > editor-statusbar {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-statusbar-gap, var(--a-space-2));
+  padding: 0 var(--editor-statusbar-px, var(--a-space-3));
+  height: var(--editor-statusbar-height, var(--a-size-md));
+  font-size: var(--editor-statusbar-font, var(--a-ui-sm));
+  border-top: var(--editor-border, 1px solid var(--a-border-subtle));
+  background: var(--editor-bg, var(--a-bg));
+  color: var(--a-fg-muted);
+  flex-shrink: 0;
+  grid-area: statusbar;
+}
+
+editor-statusbar > [slot="cursor"],
+editor-statusbar > [slot="zoom"] {
+  font-family: var(--a-font-mono, monospace);
+  margin-inline-start: var(--a-space-2);
+}
+
+editor-statusbar > [slot="action"]:first-of-type {
+  margin-inline-start: auto;
+}
+
+/* ── editor-shell layout — when bespoke children are used ── */
+editor-shell:has(> editor-canvas) {
+  display: grid;
+  grid-template-areas:
+    "toolbar toolbar toolbar"
+    "leading canvas trailing"
+    "statusbar statusbar statusbar";
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
+  height: 100%;
+}

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

@@ -4,3 +4,4 @@
 
 @import "./css/editor-shell.tokens.css";
 @import "./css/editor-shell.layout.css";
+@import "./css/editor-shell.bespoke.css";

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

@@ -1,47 +1,102 @@
 import { UIElement } from '../../../web-components/core/element.js';
 
 /**
- * <editor-shell> — Editor layout pattern.
+ * <editor-shell focus-mode?>
+ *   <editor-toolbar>...</editor-toolbar>           (or legacy <header>)
+ *   <editor-sidebar slot="leading">                 (or legacy <pane-ui data-left>)
+ *     <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>)
+ *     <pane-ui resizable>...</pane-ui>
+ *   </editor-sidebar>
+ *   <editor-statusbar>...</editor-statusbar>        (or legacy <footer>)
+ * </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>
+ * 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.
+ *
+ * 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
+    // 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]');
+
+    // Wire select options (legacy concern, kept for backwards compat)
     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,88 @@
+{
+  "$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"
+    }
+  },
+  "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.js

@@ -0,0 +1,173 @@
+/**
+ * <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 },
+  };
+
+  static template = () => null;
+
+  #pane = null;
+  #ro = null;
+  #storageKey = 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);
+
+    // Persist on resize-end (via pointerup on the document)
+    this._onPointerUp = () => this.#persistWidth();
+    document.addEventListener('pointerup', this._onPointerUp);
+  }
+
+  disconnected() {
+    this.#ro?.disconnect();
+    this.#ro = 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 };