@adia-ai/web-modules 0.3.5 → 0.4.0

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

@@ -0,0 +1,88 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: EditorCanvas
+tag: editor-canvas
+component: EditorCanvas
+category: container
+version: 1
+description: |
+  Module-tier editor canvas surface — replaces legacy <div data-canvas>
+  inside <editor-shell> per ADR-0023. Owns scroll/zoom container
+  semantics, [empty] and [focused] reflected attributes, and a stable
+  target for the host's content rendering pipeline.
+
+  Sits as the central content region inside <editor-shell>, between
+  the optional <editor-sidebar slot="leading"> and <editor-sidebar
+  slot="trailing">. Authors compose <editor-canvas-empty> as an
+  optional first child for the empty state; canvas content children
+  (artboards, document body, etc.) are appended either statically or
+  dynamically by the host.
+
+  Backwards compat — <editor-shell> still recognizes the legacy
+  <div data-canvas> shape via :is() selector. New code should prefer
+  <editor-canvas>.
+
+props:
+  empty:
+    description: |
+      Reflected — set when zero non-<editor-canvas-empty> children.
+      Drives the <editor-canvas-empty> visibility via parent CSS —
+      no JS toggling needed.
+    type: boolean
+    default: true
+    reflect: true
+  focused:
+    description: |
+      Reflected — set when canvas claims focus ownership (programmatic
+      .focus() call or toolbar full-screen toggle).
+    type: boolean
+    default: false
+    reflect: true
+
+events: {}
+
+slots:
+  default:
+    description: >-
+      Default — canvas content (artboards, document body, blocks, etc.)
+      plus an optional first <editor-canvas-empty> sibling for the
+      empty state.
+
+states:
+  - name: idle
+    description: Default canvas mode.
+  - name: empty
+    attribute: empty
+    description: Zero content children — empty state visible.
+  - name: focused
+    attribute: focused
+    description: Canvas is the focus surface.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      editor-canvas is the bespoke replacement for legacy
+      <div data-canvas> inside <editor-shell>. Use it as the central
+      content region for editor work surfaces.
+    - >-
+      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).
+
+keywords:
+  - editor-canvas
+  - canvas
+  - workspace
+  - artboard
+  - editor-surface
+
+synonyms:
+  editor-canvas: [canvas, workspace, artboard, design-surface]
+
+related:
+  - EditorShell
+  - EditorCanvasEmpty
+  - EditorToolbar
+  - EditorSidebar

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

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/EditorCanvasEmpty.json",
+  "title": "EditorCanvasEmpty",
+  "description": "Module-tier editor canvas empty state. CSS-only — no behavior, no\nJS. Sits as the first child of <editor-canvas> as the empty state\nplaceholder. Visibility is driven by <editor-canvas>'s [empty]\nreflected attribute via CSS (no JS toggling) — when content arrives,\nthe parent canvas loses [empty] and CSS hides this stub.\n\nReplaces ad-hoc empty-state placement inside the legacy\n<div data-canvas> per ADR-0023.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "EditorCanvasEmpty"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "feedback",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "editor-canvas-empty",
+      "empty-state",
+      "placeholder",
+      "no-content",
+      "canvas-empty"
+    ],
+    "name": "EditorCanvasEmpty",
+    "related": [
+      "EditorShell",
+      "EditorCanvas",
+      "EmptyState"
+    ],
+    "slots": {
+      "default": {
+        "description": "Empty state content — typically <empty-state-ui> with a \"Create new...\" prompt or onboarding affordance."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, visible.",
+        "name": "idle"
+      },
+      {
+        "description": "Hidden via parent <editor-canvas>:not([empty]) selector.",
+        "name": "hidden"
+      }
+    ],
+    "synonyms": {
+      "editor-canvas-empty": [
+        "empty-state",
+        "placeholder",
+        "no-document"
+      ]
+    },
+    "tag": "editor-canvas-empty",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

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

@@ -0,0 +1,65 @@
+<header>
+    <div>
+      <h1>Editor Canvas Empty</h1>
+      <div data-actions>
+        <tag-ui size="sm">editor-canvas-empty</tag-ui>
+        <tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
+      </div>
+    </div>
+    <p>Module-tier editor canvas empty state. CSS-only. Visibility driven by parent <editor-canvas>[empty].</p>
+  </header>
+
+<section data-section>
+  <h2 variant="section">Role</h2>
+  <p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the editor cluster's bespoke family — <code>&lt;editor-shell&gt;</code> (host), <code>&lt;editor-toolbar&gt;</code>, <code>&lt;editor-canvas&gt;</code>, <code>&lt;editor-sidebar&gt;</code> (JS-bearing) + <code>&lt;editor-statusbar&gt;</code>, <code>&lt;editor-canvas-empty&gt;</code> (CSS-only). Confirms the family pattern is canonical across 3 archetypes (admin/chat/editor).</p>
+</section>
+
+<section data-section>
+  <h2 variant="section">Composition</h2>
+  <p>Typical placement inside <code>&lt;editor-shell&gt;</code>:</p>
+  <code-ui language="html">&lt;editor-shell&gt;
+  &lt;editor-toolbar&gt;
+    &lt;span slot="title"&gt;Untitled.fig&lt;/span&gt;
+    &lt;button-ui slot="action" icon="gear"&gt;&lt;/button-ui&gt;
+  &lt;/editor-toolbar&gt;
+
+  &lt;editor-sidebar slot="leading" collapsible&gt;
+    &lt;pane-ui resizable&gt;
+      &lt;header&gt;Navigator&lt;/header&gt;
+      &lt;section&gt;…layers…&lt;/section&gt;
+    &lt;/pane-ui&gt;
+  &lt;/editor-sidebar&gt;
+
+  &lt;editor-canvas&gt;
+    &lt;editor-canvas-empty&gt;
+      &lt;empty-state-ui icon="square" heading="New document" description="Drop content to begin."&gt;&lt;/empty-state-ui&gt;
+    &lt;/editor-canvas-empty&gt;
+  &lt;/editor-canvas&gt;
+
+  &lt;editor-sidebar slot="trailing" collapsible&gt;
+    &lt;pane-ui resizable&gt;
+      &lt;header&gt;Inspector&lt;/header&gt;
+      &lt;section&gt;…properties…&lt;/section&gt;
+    &lt;/pane-ui&gt;
+  &lt;/editor-sidebar&gt;
+
+  &lt;editor-statusbar&gt;
+    &lt;span slot="status"&gt;Saved&lt;/span&gt;
+    &lt;span slot="zoom"&gt;100%&lt;/span&gt;
+  &lt;/editor-statusbar&gt;
+&lt;/editor-shell&gt;</code-ui>
+</section>
+
+<section data-section>
+  <h2 variant="section">State as attribute</h2>
+  <code-ui language="css">/* Hide all chrome in focus mode */
+editor-shell[focus-mode] :is(editor-toolbar, editor-statusbar, editor-sidebar) {
+  display: none;
+}
+
+/* Visual treatment for empty canvas */
+editor-canvas[empty] { /* placeholder UI */ }
+
+/* Highlight focused canvas */
+editor-canvas[focused] { outline: 2px solid var(--a-accent); }</code-ui>
+</section>

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

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Editor Canvas Empty — AdiaUI</title>
+
+  <link rel="stylesheet" href="../../../web-components/styles/resets.css">
+  <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
+  <link rel="stylesheet" href="../editor-shell/editor-shell.css">
+  <link rel="stylesheet" href="../../../web-components/components/code/code.css">
+  <link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
+
+  <script type="module" src="../editor-shell/editor-shell.js"></script>
+  <script type="module" src="../../../web-components/components/code/code.js"></script>
+  <script type="module" src="../../../web-components/components/tag/tag.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./editor-canvas-empty.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load editor-canvas-empty.examples.html — ${err.message}</p>`;
+      console.error('[editor-canvas-empty.html]', err);
+    }
+  </script>
+
+</body>
+</html>

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

@@ -0,0 +1,56 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: EditorCanvasEmpty
+tag: editor-canvas-empty
+component: EditorCanvasEmpty
+category: feedback
+version: 1
+description: |
+  Module-tier editor canvas empty state. CSS-only — no behavior, no
+  JS. Sits as the first child of <editor-canvas> as the empty state
+  placeholder. Visibility is driven by <editor-canvas>'s [empty]
+  reflected attribute via CSS (no JS toggling) — when content arrives,
+  the parent canvas loses [empty] and CSS hides this stub.
+
+  Replaces ad-hoc empty-state placement inside the legacy
+  <div data-canvas> per ADR-0023.
+
+props: {}
+
+events: {}
+
+slots:
+  default:
+    description: >-
+      Empty state content — typically <empty-state-ui> with a
+      "Create new..." prompt or onboarding affordance.
+
+states:
+  - name: idle
+    description: Default, visible.
+  - name: hidden
+    description: Hidden via parent <editor-canvas>:not([empty]) selector.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      editor-canvas-empty is the bespoke empty-state slot for
+      <editor-canvas>. Place as the first child of <editor-canvas>;
+      visibility is automatic via the [empty] reflected attribute.
+
+keywords:
+  - editor-canvas-empty
+  - empty-state
+  - placeholder
+  - no-content
+  - canvas-empty
+
+synonyms:
+  editor-canvas-empty: [empty-state, placeholder, no-document]
+
+related:
+  - EditorShell
+  - EditorCanvas
+  - EmptyState

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

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

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

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

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