@adia-ai/web-modules 0.5.19 → 0.5.20

package/CHANGELOG.md

@@ -10,6 +10,30 @@ Built from `@adia-ai/web-components` primitives.
 
 _No pending changes._
 
+## [0.5.20] - 2026-05-18
+
+### Added — §350 (v0.5.20) — NEW `<editor-canvas-toolbar>` module
+
+NEW `packages/web-modules/editor/editor-canvas-toolbar/` (yaml + a2ui.json + html + examples.html). CSS-only chrome strip that sits as the first child of `<editor-canvas>` — holds view-mode tabs (preview / schema / DOM), breadcrumbs, or canvas-scoped actions. Slot vocabulary mirrors `<editor-toolbar>`: `default` / `title` / `action` / `action-leading`. Sticky to the canvas scroll surface; `transform: none` cancels the inherited `editor-canvas > *` zoom transform so the toolbar stays at 1× while canvas content scales. Distinct from `<editor-toolbar>`: that one is app-scope (top of `<editor-shell>`, document-wide actions); this is canvas-scope (top of `<editor-canvas>`, view-mode affordances). Synonyms keep `canvas-header` as a discoverability alias (the component was briefly named `editor-canvas-header` during authoring before the rename to `editor-canvas-toolbar` for app-scope/canvas-scope symmetry).
+
+NEW tokens in `editor-shell.tokens.css`: `--editor-canvas-toolbar-bg` (defaults to `--editor-panel-bg`), `--editor-canvas-toolbar-px`, `--editor-canvas-toolbar-gap`.
+
+`editor-canvas.yaml` `related[]` adds `EditorCanvasToolbar`; a new a2ui rule disambiguates it from `<editor-toolbar>`.
+
+### Changed — §350 (v0.5.20) — Editor canvas-bg recession scheme
+
+`editor-shell.tokens.css` declares a three-tier surface system:
+
+- `--editor-bg: var(--a-canvas-0)` — shell base (the strip between bars)
+- `--editor-panel-bg: var(--a-canvas-2)` — shared by panes + top/bottom bars (NEW)
+- `--editor-canvas-bg: var(--a-canvas-1)` — center content surface (was `--a-bg`)
+
+`editor-shell pane-ui` now sets `--pane-bg: var(--editor-panel-bg)`, replacing pane.css's own default of `--a-bg` inside the editor cluster. Bars (`<editor-toolbar>`, `<editor-canvas-toolbar>`, `<editor-statusbar>`) all sit on `--editor-panel-bg`. Bar divider mechanism switched from `border-bottom` / `border-top` to `box-shadow: inset 0 ±1px 0 var(--a-border-subtle)` with explicit `box-sizing: border-box` — avoids border height-contribution + sticky-positioning quirks.
+
+### Removed — §350 (v0.5.20) — Phase-3 legacy CSS retirement
+
+`editor-shell.layout.css` lost 121 lines of dead legacy raw-shape rules: `editor-shell > header`, `editor-shell > footer`, `editor-shell > [data-body]`, plus their slot vocabulary (`[slot="icon"]` / `[slot="heading"]` / `[slot="description"]` / `[slot="action"]` / `[slot="action-leading"]`). The host (`editor-shell.js`) has been bespoke-only since v0.4.0 (ADR-0023 Phase 3); the residual CSS was inert for 7+ minor versions. Layout.css now carries only the shell base rule + the shared canvas / pane defaults the bespoke shape inherits. File shrank 186 → 65 lines. Legacy `--editor-bar-*` tokens remain declared (used only by the retired pre-bespoke `patterns/editor-shell/` docs page; cascade-leaf, harmless if not internally referenced).
+
 ## [0.5.19] - 2026-05-17
 
 _Lockstep ride-along (no source change in this package; companion to web-components v0.5.19 — see root CHANGELOG)._

package/editor/editor-canvas/editor-canvas.a2ui.json

@@ -48,6 +48,7 @@
     "related": [
       "EditorShell",
       "EditorCanvasEmpty",
+      "EditorCanvasToolbar",
       "EditorToolbar",
       "EditorSidebar"
     ],

package/editor/editor-canvas/editor-canvas.yaml

@@ -70,6 +70,12 @@ a2ui:
       Place <editor-canvas-empty> as an optional first child for the
       empty state; the [empty] reflected attribute drives its visibility
       via CSS (no JS toggling).
+    - >-
+      Place <editor-canvas-toolbar> as the first child to mount
+      view-mode tabs (preview / schema / DOM, etc.), breadcrumbs, or
+      canvas-scoped actions above the content body. Replaces the
+      ad-hoc <div data-view-strip> pattern. Distinct from
+      <editor-toolbar> (app-scope) — this is canvas-scope.
 
 keywords:
   - editor-canvas
@@ -84,5 +90,6 @@ synonyms:
 related:
   - EditorShell
   - EditorCanvasEmpty
+  - EditorCanvasToolbar
   - EditorToolbar
   - EditorSidebar

package/editor/editor-canvas-toolbar/editor-canvas-toolbar.a2ui.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/EditorCanvasToolbar.json",
+  "title": "EditorCanvasToolbar",
+  "description": "Module-tier canvas toolbar — chrome bar that sits at the top of\n<editor-canvas>, above the content body. Holds view-mode tabs\n(preview / schema / DOM, etc.), breadcrumbs, or trailing actions\nscoped to the canvas region. CSS-only — no behavior, no JS.\n\nReplaces the ad-hoc <div data-view-strip> pattern used by editor\nconsumers. Sits flush against the inside top of <editor-canvas>\nand is sticky to the canvas scroll surface, so tabs stay visible\nwhile the canvas body scrolls.\n\nDistinct from <editor-toolbar>: that is app-scope (top of\n<editor-shell>, document-wide actions), while\n<editor-canvas-toolbar> is canvas-scope (top of <editor-canvas>,\nview-mode affordances).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "EditorCanvasToolbar"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "composes": [],
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "editor-canvas-toolbar",
+      "canvas-toolbar",
+      "canvas-header",
+      "view-strip",
+      "view-tabs",
+      "canvas-tabs",
+      "tab-strip"
+    ],
+    "name": "EditorCanvasToolbar",
+    "related": [
+      "EditorShell",
+      "EditorCanvas",
+      "EditorToolbar",
+      "EditorStatusbar",
+      "Tabs"
+    ],
+    "slots": {
+      "title": {
+        "description": "Optional leading title cluster."
+      },
+      "default": {
+        "description": "Default — ad-hoc inline content (typically a <tabs-ui> with view-mode tabs, or a breadcrumb / segmented control)."
+      },
+      "action": {
+        "description": "Trailing action cluster (view-mode toggles, overflow menu)."
+      },
+      "action-leading": {
+        "description": "Leading action cluster (back, view switcher, breadcrumb)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, the only state.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "editor-canvas-toolbar": [
+        "canvas-toolbar",
+        "canvas-header",
+        "view-strip",
+        "view-tabs",
+        "tab-strip"
+      ]
+    },
+    "tag": "editor-canvas-toolbar",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

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

@@ -0,0 +1,56 @@
+<header>
+    <div>
+      <h1>Editor Canvas Toolbar</h1>
+      <div data-actions>
+        <tag-ui size="sm">editor-canvas-toolbar</tag-ui>
+        <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
+      </div>
+    </div>
+    <p>Module-tier canvas toolbar — chrome bar inside <code>&lt;editor-canvas&gt;</code> that holds view-mode tabs, breadcrumbs, or canvas-scoped actions.</p>
+  </header>
+
+<section data-section>
+  <h2 variant="section">Role</h2>
+  <p>Replaces the ad-hoc <code>&lt;div data-view-strip&gt;</code> pattern. Sits as the first child of <code>&lt;editor-canvas&gt;</code>; the canvas's flex-column layout positions it above the content body automatically. Sticky to the canvas scroll surface so tabs stay visible during scroll.</p>
+  <p>Distinct from <code>&lt;editor-toolbar&gt;</code> — that one is app-scope (top of <code>&lt;editor-shell&gt;</code>, holds document-wide actions); this one is canvas-scope (top of <code>&lt;editor-canvas&gt;</code>, holds view-mode affordances).</p>
+</section>
+
+<section data-section>
+  <h2 variant="section">Composition</h2>
+  <p>Typical view-tabs usage inside <code>&lt;editor-canvas&gt;</code>:</p>
+  <code-ui language="html">&lt;editor-canvas&gt;
+  &lt;editor-canvas-toolbar&gt;
+    &lt;tabs-ui value="preview" variant="underline"&gt;
+      &lt;tab-ui value="preview" text="Preview" icon="eye"&gt;&lt;/tab-ui&gt;
+      &lt;tab-ui value="schema" text="Schema" icon="brackets-curly"&gt;&lt;/tab-ui&gt;
+      &lt;tab-ui value="dom" text="DOM" icon="code"&gt;&lt;/tab-ui&gt;
+    &lt;/tabs-ui&gt;
+  &lt;/editor-canvas-toolbar&gt;
+
+  &lt;div data-view-body&gt;
+    &lt;!-- one of [data-view] visible at a time --&gt;
+  &lt;/div&gt;
+&lt;/editor-canvas&gt;</code-ui>
+</section>
+
+<section data-section>
+  <h2 variant="section">Slot vocabulary</h2>
+  <p>Mirrors the <code>&lt;editor-toolbar&gt;</code> / <code>&lt;editor-statusbar&gt;</code> slot conventions:</p>
+  <code-ui language="html">&lt;editor-canvas-toolbar&gt;
+  &lt;span slot="action-leading"&gt;
+    &lt;button-ui icon="arrow-left" variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
+  &lt;/span&gt;
+  &lt;span slot="title"&gt;Untitled.fig&lt;/span&gt;
+  &lt;span slot="action"&gt;
+    &lt;button-ui icon="gear" variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
+  &lt;/span&gt;
+&lt;/editor-canvas-toolbar&gt;</code-ui>
+</section>
+
+<section data-section>
+  <h2 variant="section">Tokens</h2>
+  <code-ui language="css">/* Defaults — override on editor-shell or editor-canvas-toolbar */
+--editor-canvas-toolbar-bg:     var(--editor-panel-bg);
+--editor-canvas-toolbar-px:     var(--a-space-3);
+--editor-canvas-toolbar-gap:    var(--a-space-2);</code-ui>
+</section>

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

package/editor/editor-canvas-toolbar/editor-canvas-toolbar.yaml

@@ -0,0 +1,80 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: EditorCanvasToolbar
+tag: editor-canvas-toolbar
+component: EditorCanvasToolbar
+category: layout
+version: 1
+description: |
+  Module-tier canvas toolbar — chrome bar that sits at the top of
+  <editor-canvas>, above the content body. Holds view-mode tabs
+  (preview / schema / DOM, etc.), breadcrumbs, or trailing actions
+  scoped to the canvas region. CSS-only — no behavior, no JS.
+
+  Replaces the ad-hoc <div data-view-strip> pattern used by editor
+  consumers. Sits flush against the inside top of <editor-canvas>
+  and is sticky to the canvas scroll surface, so tabs stay visible
+  while the canvas body scrolls.
+
+  Distinct from <editor-toolbar>: that is app-scope (top of
+  <editor-shell>, document-wide actions), while
+  <editor-canvas-toolbar> is canvas-scope (top of <editor-canvas>,
+  view-mode affordances).
+
+props: {}
+
+events: {}
+
+slots:
+  default:
+    description: >-
+      Default — ad-hoc inline content (typically a <tabs-ui> with
+      view-mode tabs, or a breadcrumb / segmented control).
+  title:
+    description: Optional leading title cluster.
+  action:
+    description: Trailing action cluster (view-mode toggles, overflow menu).
+  action-leading:
+    description: Leading action cluster (back, view switcher, breadcrumb).
+
+states:
+  - name: idle
+    description: Default, the only state.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      editor-canvas-toolbar is the bespoke chrome strip for the
+      <editor-canvas> top edge. Use it to hold view-mode tabs
+      (preview / schema / DOM) or breadcrumb-style navigation
+      scoped to the canvas region.
+    - >-
+      Place as the first child of <editor-canvas>; the canvas's
+      flex-column layout positions the toolbar above the content
+      body automatically, and the toolbar is sticky to keep tabs
+      visible during canvas scroll.
+    - >-
+      Distinct from <editor-toolbar> (app-scope, top of
+      <editor-shell>) — this is canvas-scope, holding view-mode
+      affordances rather than document-wide actions.
+
+keywords:
+  - editor-canvas-toolbar
+  - canvas-toolbar
+  - canvas-header
+  - view-strip
+  - view-tabs
+  - canvas-tabs
+  - tab-strip
+
+synonyms:
+  editor-canvas-toolbar: [canvas-toolbar, canvas-header, view-strip, view-tabs, tab-strip]
+
+related:
+  - EditorShell
+  - EditorCanvas
+  - EditorToolbar
+  - EditorStatusbar
+  - Tabs

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

@@ -25,14 +25,15 @@
 
 /* ── editor-toolbar — top chrome bar ── */
 editor-shell > editor-toolbar {
+  box-sizing: border-box;
   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));
+  box-shadow: inset 0 -1px 0 var(--a-border-subtle);
+  background: var(--editor-panel-bg, var(--a-bg));
   flex-shrink: 0;
   grid-area: toolbar;
 }
@@ -106,6 +107,54 @@ editor-canvas > * {
   transform-origin: top left;
 }
 
+/* ── editor-canvas-toolbar — top chrome strip inside <editor-canvas> ──
+   Holds view-mode tabs (preview / schema / DOM), breadcrumbs, or
+   canvas-scoped actions. Sticky to the canvas scroll surface so the
+   strip stays visible while the canvas body scrolls. Cancels the zoom
+   transform inherited from `editor-canvas > *` so the toolbar stays
+   at 1x while canvas content scales. Distinct from <editor-toolbar>
+   (app-scope, top of <editor-shell>) — this is canvas-scope. */
+editor-canvas-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-canvas-toolbar-gap, var(--a-space-2));
+  padding: 0 var(--editor-canvas-toolbar-px, var(--a-space-3));
+  box-shadow: inset 0 -1px 0 var(--a-border-subtle);
+  background: var(--editor-canvas-toolbar-bg, var(--editor-panel-bg, var(--a-bg)));
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  transform: none;
+}
+
+editor-canvas-toolbar > [slot="title"] {
+  font-weight: var(--a-weight-medium, 500);
+  color: var(--a-fg);
+}
+
+editor-canvas-toolbar > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-canvas-toolbar-gap, var(--a-space-2));
+  flex-shrink: 0;
+  margin-inline-end: var(--a-space-2);
+}
+
+/* First [slot="action"] pushes to the trailing edge; subsequent
+   action-slot siblings stack with uniform spacing. Mirrors the
+   §196 (v0.5.6) auto-margin fix in editor-toolbar. */
+editor-canvas-toolbar > [slot="action"] {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-canvas-toolbar-gap, var(--a-space-2));
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+editor-canvas-toolbar > [slot="action"] ~ [slot="action"] {
+  margin-inline-start: var(--editor-canvas-toolbar-gap, var(--a-space-2));
+}
+
 /* ── editor-canvas-empty — visibility via parent's [empty] ── */
 editor-canvas:not([empty]) > editor-canvas-empty {
   display: none;
@@ -224,14 +273,15 @@ editor-sidebar:is([resizing], :has(pane-ui[data-resizing])) > pane-ui {
 
 /* ── editor-statusbar — bottom chrome bar ── */
 editor-shell > editor-statusbar {
+  box-sizing: border-box;
   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));
+  box-shadow: inset 0 1px 0 var(--a-border-subtle);
+  background: var(--editor-panel-bg, var(--a-bg));
   color: var(--a-fg-muted);
   flex-shrink: 0;
   grid-area: statusbar;

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

@@ -1,14 +1,27 @@
 /* ═══════════════════════════════════════════════════════════════
    editor-shell — Layout
 
-   Structure:
-     editor-shell
-       header                — topbar
-           — flex row: pane | canvas | pane
-         pane-ui              — left navigator
-         editor-canvas       — center canvas
-         pane-ui              — right inspector
-       footer                — bottombar
+   Phase-3 (ADR-0023) cleanup: the legacy raw shapes
+   (<header>, <footer>, <div data-body>, <div data-canvas>,
+   <pane-ui data-left|data-right>) were retired in v0.4.0; the
+   editor-shell.js host has been bespoke-only ever since. As of
+   v0.5.20 (§350) the residual CSS for those legacy shapes has
+   been removed from this file. Bar/canvas-toolbar layout is
+   owned by bespoke.css; this file now carries only the shell
+   base rule + the shared canvas/pane defaults that the bespoke
+   shape inherits.
+
+   Bespoke structure (owned by bespoke.css):
+     editor-shell                 — grid container
+       editor-toolbar             — top chrome bar          (app-scope)
+       editor-sidebar[leading]    — left pane wrapper
+         pane-ui                  — left navigator
+       editor-canvas              — center content surface
+         editor-canvas-toolbar    — top chrome strip       (canvas-scope)
+         editor-canvas-empty      — empty-state placeholder
+       editor-sidebar[trailing]   — right pane wrapper
+         pane-ui                  — right inspector
+       editor-statusbar           — bottom chrome bar
    ═══════════════════════════════════════════════════════════════ */
 
 editor-shell {
@@ -20,80 +33,6 @@ editor-shell {
   background: var(--editor-bg);
 }
 
-/* ── Top bar ──
-   Slot contract (shared with > footer below):
-     [slot="icon"]        leading glyph (status dot, app icon, etc.)
-     [slot="heading"]     primary label; strong-weight token
-     [slot="description"] secondary metadata; muted
-     [slot="action"]      trailing control cluster; first pushes to end
-   Authors may also place raw inline content (spans, buttons) directly
-   — those flow in source order. `[data-title]` / `<span data-spacer>`
-   are kept working for one release as deprecated hooks; migrate to
-   slots. */
-editor-shell > header {
-  display: flex;
-  align-items: center;
-  gap: var(--editor-bar-gap);
-  min-height: var(--editor-bar-height);
-  padding: 0 var(--editor-bar-px);
-  border-bottom: var(--editor-border);
-  font-size: var(--editor-bar-font);
-  color: var(--editor-bar-fg);
-  flex-shrink: 0;
-}
-
-editor-shell > header [data-title],
-editor-shell > header > [slot="heading"] {
-  font-weight: var(--editor-title-weight);
-  color: var(--editor-bar-fg-strong);
-}
-
-editor-shell > header > [slot="icon"] {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--editor-bar-fg);
-}
-
-editor-shell > header > [slot="description"] {
-  color: var(--editor-bar-fg);
-  font-size: var(--a-ui-sm);
-}
-
-editor-shell > header > [slot="action"] {
-  display: flex;
-  align-items: center;
-  gap: var(--editor-bar-gap);
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-
-editor-shell > header > [slot="action"] ~ [slot="action"] {
-  margin-inline-start: 0;
-}
-
-/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
-editor-shell > header > [slot="action-leading"] {
-  display: flex;
-  align-items: center;
-  gap: var(--editor-bar-gap);
-  flex-shrink: 0;
-  margin-inline-end: auto;
-}
-
-/* ── Body: pane | canvas | pane ──
-   Legacy raw-children body wrapper (pre-bespoke, when editor-shell was a
-   single flex column with a [data-body] wrapper around the pane/canvas
-   row). With <editor-canvas> + <editor-sidebar> bespoke children, the
-   grid layout in bespoke.css owns the body shape. This rule is kept
-   for any non-bespoke consumer still passing raw inner content. */
-editor-shell > [data-body] {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
-
 /* ── Canvas ── */
 editor-shell editor-canvas {
   flex: 1;
@@ -114,6 +53,7 @@ editor-shell editor-canvas {
 /* ── Panes ── */
 editor-shell pane-ui {
   --pane-radius: 0;
+  --pane-bg: var(--editor-panel-bg);
   height: 100%;
   flex-shrink: 0;
 }
@@ -125,58 +65,3 @@ editor-shell editor-sidebar[slot="leading"] > pane-ui {
 editor-shell editor-sidebar[slot="trailing"] > pane-ui {
   width: var(--editor-pane-width-right);
 }
-
-/* ── Bottom bar ──
-   Same slot contract as > header above (icon / heading / description
-   / action). Statusbar is structurally identical to the topbar —
-   both are 36px-min chrome bands with left-aligned label content and
-   a trailing action cluster. */
-editor-shell > footer {
-  display: flex;
-  align-items: center;
-  gap: var(--editor-bar-gap);
-  min-height: var(--editor-bar-height);
-  padding: 0 var(--editor-bar-px);
-  border-top: var(--editor-border);
-  font-size: var(--editor-bar-font);
-  color: var(--editor-bar-fg);
-  flex-shrink: 0;
-}
-
-editor-shell > footer > [slot="heading"] {
-  font-weight: var(--editor-title-weight);
-  color: var(--editor-bar-fg-strong);
-}
-
-editor-shell > footer > [slot="icon"] {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--editor-bar-fg);
-}
-
-editor-shell > footer > [slot="description"] {
-  color: var(--editor-bar-fg);
-  font-size: var(--a-ui-sm);
-}
-
-editor-shell > footer > [slot="action"] {
-  display: flex;
-  align-items: center;
-  gap: var(--editor-bar-gap);
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-
-editor-shell > footer > [slot="action"] ~ [slot="action"] {
-  margin-inline-start: 0;
-}
-
-/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
-editor-shell > footer > [slot="action-leading"] {
-  display: flex;
-  align-items: center;
-  gap: var(--editor-bar-gap);
-  flex-shrink: 0;
-  margin-inline-end: auto;
-}

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

@@ -7,6 +7,9 @@
   --editor-bg:              var(--a-canvas-0);
   --editor-border:          1px solid var(--a-border-subtle);
 
+  /* Panel surface — shared by panes, top/bottom bars */
+  --editor-panel-bg:        var(--a-canvas-2);
+
   /* Top/bottom bars */
   --editor-bar-height:      var(--a-chrome-pane-header-height);
   --editor-bar-px:          var(--a-space-3);
@@ -16,9 +19,14 @@
   --editor-bar-fg-strong:   var(--a-fg);
 
   /* Canvas */
-  --editor-canvas-bg:       var(--a-bg);
+  --editor-canvas-bg:       var(--a-canvas-1);
   --editor-canvas-fg:       var(--a-fg-muted);
 
+  /* Canvas toolbar — chrome strip inside <editor-canvas> (view tabs, etc.) */
+  --editor-canvas-toolbar-bg:  var(--editor-panel-bg);
+  --editor-canvas-toolbar-px:  var(--a-space-3);
+  --editor-canvas-toolbar-gap: var(--a-space-2);
+
   /* Typography */
   --editor-title-weight:     var(--a-weight-medium);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "description": "AdiaUI composite custom elements — shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {