@adia-ai/web-modules 0.3.4 → 0.3.6

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

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

@@ -0,0 +1,126 @@
+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();
+  });
+});

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

@@ -0,0 +1,83 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: EditorSidebar
+tag: editor-sidebar
+component: EditorSidebar
+category: layout
+version: 1
+description: |
+  Module-tier editor-cluster sidebar — wraps <pane-ui resizable>
+  (the primitive that owns drag) and adds [collapsed] reflected
+  state, localStorage persistence (adia-editor-sidebar-{name}),
+  and .toggle() / .collapse() / .expand() public API.
+
+  Sits inside <editor-shell> as slot="leading" (navigator pane) or
+  slot="trailing" (inspector pane). Mirrors the cluster-namespace
+  shape from <admin-sidebar> and <chat-sidebar>, but DELEGATES to
+  <pane-ui> for resize rather than reimplementing it (per
+  bespoke-shell-children skill §When NOT to promote — pane primitive
+  already owns this concern).
+
+  This is the FIRST bespoke shell child that delegates rather than
+  duplicates a primitive's behavior. Pattern is: cluster-namespace +
+  state-as-attribute + persistence at the bespoke tier; physical
+  drag at the primitive tier.
+
+props:
+  collapsed:
+    description: Reflected — set when inner <pane-ui> width is at or below 96px snap threshold.
+    type: boolean
+    default: false
+    reflect: true
+
+events:
+  sidebar-toggle:
+    description: Bubbles when .toggle() / .collapse() / .expand() is called.
+    detail:
+      name: string
+      expanded: boolean
+
+slots:
+  default:
+    description: >-
+      Default — the inner <pane-ui resizable> wrapper. Authors compose
+      header / section / footer inside the pane as usual.
+
+states:
+  - name: idle
+    description: Default expanded state.
+  - name: collapsed
+    attribute: collapsed
+    description: Inner pane is at or below the snap threshold.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      editor-sidebar wraps <pane-ui resizable> rather than implementing
+      drag itself. Place a <pane-ui resizable> as the only structural
+      child; fill the pane with header / section / footer slots.
+    - >-
+      The cluster-distinct localStorage prefix (adia-editor-sidebar-*)
+      keeps editor sidebars from colliding with admin (adia-sidebar-*)
+      and chat (adia-chat-sidebar-*) sidebars on the same domain.
+
+keywords:
+  - editor-sidebar
+  - navigator-pane
+  - inspector-pane
+  - editor-rail
+  - sidebar
+  - leading
+  - trailing
+
+synonyms:
+  editor-sidebar: [navigator, inspector, editor-rail, side-panel]
+
+related:
+  - EditorShell
+  - EditorCanvas
+  - Pane
+  - AdminSidebar
+  - ChatSidebar

package/editor/editor-statusbar/editor-statusbar.a2ui.json

@@ -0,0 +1,76 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/EditorStatusbar.json",
+  "title": "EditorStatusbar",
+  "description": "Module-tier editor statusbar — bottom chrome bar inside\n<editor-shell>. CSS-only, no behavior, no JS. Holds save/sync\nstate, zoom indicator, cursor position, and tertiary actions\nvia slot vocabulary.\n\nReplaces the legacy <footer> with positional content per ADR-0023.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "EditorStatusbar"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "editor-statusbar",
+      "statusbar",
+      "bottom-bar",
+      "editor-footer"
+    ],
+    "name": "EditorStatusbar",
+    "related": [
+      "EditorShell",
+      "EditorToolbar",
+      "EditorCanvas"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default — ad-hoc inline content (legacy positional layout)."
+      },
+      "action": {
+        "description": "Trailing action cluster (e.g., toggle full-screen)."
+      },
+      "cursor": {
+        "description": "Cursor position / selection indicator."
+      },
+      "status": {
+        "description": "Save/sync state indicator."
+      },
+      "zoom": {
+        "description": "Zoom level indicator."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, the only state.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "editor-statusbar": [
+        "statusbar",
+        "footer-bar",
+        "bottom-bar"
+      ]
+    },
+    "tag": "editor-statusbar",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}