npm - @adia-ai/web-components - Versions diffs - 0.8.6 → 0.8.8 - Mend

@adia-ai/web-components 0.8.6 → 0.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/patterns/diff-review/diff-review.html ADDED Viewed

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Diff &amp; Review (pattern) — AdiaUI</title>
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/code/code.css">
+  <link rel="stylesheet" href="../../components/description-list/description-list.css">
+  <link rel="stylesheet" href="../../components/grid/grid.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <!-- Component JS -->
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/code/code.js"></script>
+  <script type="module" src="../../components/description-list/description-list.js"></script>
+  <script type="module" src="../../components/grid/grid.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    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('./diff-review.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 diff-review.examples.html — ${err.message}</p>`;
+      console.error('[diff-review.html]', err);
+    }
+  </script>
+</body>
+</html>

package/patterns/editor-shell/editor-shell.examples.html ADDED Viewed

@@ -0,0 +1,139 @@
+<header>
+  <div>
+    <h1>Editor Shell — Composition Pattern</h1>
+    <div data-actions>
+      <tag-ui size="sm">editor-shell</tag-ui>
+      <tag-ui size="sm" variant="ghost">cluster-namespaced</tag-ui>
+    </div>
+  </div>
+  <p>
+    The canonical composition pattern for design-tool / code-editor /
+    canvas surfaces — a toolbar, a leading navigator pane, a center
+    canvas, an optional trailing inspector pane, and a statusbar. Built
+    from cluster-namespaced bespoke children. The legacy raw-HTML form
+    (raw <code>&lt;header&gt;</code> + <code>&lt;div data-editor-body&gt;</code>
+    + <code>&lt;pane-ui data-left|data-right&gt;</code> +
+    <code>&lt;div data-canvas&gt;</code> + raw <code>&lt;footer&gt;</code>)
+    was retired in v0.4.0 per
+    <a href="../../../../.brain/adrs/0024-legacy-shell-shapes-retired.md">ADR-0024</a>;
+    new code uses the bespoke shape exclusively per
+    <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>.
+  </p>
+</header>
+<section data-section data-property="canonical-hierarchy">
+  <h2 variant="section">Canonical hierarchy</h2>
+  <p data-note>
+    For the full live demo + state-as-attribute documentation, see
+    <a href="/site/components/editor-shell">/site/components/editor-shell</a>.
+    This page is the pattern hub.
+  </p>
+  <code-ui language="html">&lt;editor-shell&gt;
+  &lt;!-- Top toolbar — icon + heading + description + actions --&gt;
+  &lt;editor-toolbar&gt;
+    &lt;span slot="icon"&gt;&lt;icon-ui name="layers"&gt;&lt;/icon-ui&gt;&lt;/span&gt;
+    &lt;span slot="heading"&gt;Untitled.fig&lt;/span&gt;
+    &lt;span slot="description"&gt;1920 × 1080&lt;/span&gt;
+    &lt;span slot="action"&gt;
+      &lt;button-ui text="Share" variant="ghost"&gt;&lt;/button-ui&gt;
+      &lt;button-ui text="Run" variant="primary"&gt;&lt;/button-ui&gt;
+    &lt;/span&gt;
+  &lt;/editor-toolbar&gt;
+  &lt;!-- Leading sidebar — layer tree / outline / file browser --&gt;
+  &lt;editor-sidebar slot="leading" collapsible persist="structure"&gt;
+    &lt;pane-ui side="leading" resizable size="sm"&gt;
+      &lt;header&gt;Layers&lt;/header&gt;
+      &lt;section&gt;
+        &lt;tree-ui&gt;...&lt;/tree-ui&gt;
+      &lt;/section&gt;
+    &lt;/pane-ui&gt;
+  &lt;/editor-sidebar&gt;
+  &lt;!-- Center canvas — the editing surface --&gt;
+  &lt;editor-canvas&gt;
+    &lt;editor-canvas-toolbar&gt;
+      &lt;tabs-ui value="preview" variant="underline"&gt;
+        &lt;tab-ui value="preview" text="Preview"&gt;&lt;/tab-ui&gt;
+        &lt;tab-ui value="schema"  text="Schema"&gt;&lt;/tab-ui&gt;
+      &lt;/tabs-ui&gt;
+    &lt;/editor-canvas-toolbar&gt;
+    &lt;editor-canvas-empty&gt;
+      &lt;empty-state-ui icon="cursor"
+        heading="Open a file to begin"&gt;&lt;/empty-state-ui&gt;
+    &lt;/editor-canvas-empty&gt;
+    &lt;!-- canvas children: code editor, preview iframe, design surface, etc. --&gt;
+  &lt;/editor-canvas&gt;
+  &lt;!-- Trailing sidebar (optional) — inspector / properties panel --&gt;
+  &lt;editor-sidebar slot="trailing" collapsible persist="inspector"&gt;
+    &lt;pane-ui side="trailing" resizable size="sm"&gt;
+      &lt;header&gt;Inspector&lt;/header&gt;
+      &lt;section&gt;
+        &lt;field-ui label="Width"&gt;&lt;input-ui type="number"&gt;&lt;/input-ui&gt;&lt;/field-ui&gt;
+        &lt;field-ui label="Height"&gt;&lt;input-ui type="number"&gt;&lt;/input-ui&gt;&lt;/field-ui&gt;
+      &lt;/section&gt;
+    &lt;/pane-ui&gt;
+  &lt;/editor-sidebar&gt;
+  &lt;!-- Bottom statusbar — connection / sync / cursor position --&gt;
+  &lt;editor-statusbar&gt;
+    &lt;span&gt;Ready&lt;/span&gt;
+    &lt;span data-spacer&gt;&lt;/span&gt;
+    &lt;span&gt;Ln 42, Col 8&lt;/span&gt;
+  &lt;/editor-statusbar&gt;
+&lt;/editor-shell&gt;</code-ui>
+</section>
+<section data-section data-property="part-by-part-reference">
+  <h2 variant="section">Part-by-part reference</h2>
+  <table>
+    <thead>
+      <tr><th>Part</th><th>Role</th></tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="/site/components/editor-shell"><code>&lt;editor-shell&gt;</code></a></td>
+        <td>Behavior-only host. Coordinates the family and propagates <code>[focus-mode]</code> to children's <code>[full-screen]</code> / <code>[focused]</code>.</td>
+      </tr>
+      <tr>
+        <td><a href="/site/components/editor-toolbar"><code>&lt;editor-toolbar&gt;</code></a></td>
+        <td>Top band — slots: <code>icon</code>, <code>heading</code>, <code>description</code>, <code>action</code>.</td>
+      </tr>
+      <tr>
+        <td><a href="/site/components/editor-sidebar"><code>&lt;editor-sidebar&gt;</code></a></td>
+        <td>Leading (navigator) or trailing (inspector) pane. Holds <code>&lt;pane-ui&gt;</code>. Reflects <code>[collapsed]</code>; <code>persist=</code> wires localStorage.</td>
+      </tr>
+      <tr>
+        <td><a href="/site/components/editor-canvas"><code>&lt;editor-canvas&gt;</code></a></td>
+        <td>Center surface. Holds optional <code>&lt;editor-canvas-toolbar&gt;</code> + <code>&lt;editor-canvas-empty&gt;</code> + canvas children. Reflects <code>[empty]</code>.</td>
+      </tr>
+      <tr>
+        <td><a href="/site/components/editor-statusbar"><code>&lt;editor-statusbar&gt;</code></a></td>
+        <td>Bottom band — same slot vocabulary as toolbar; conventionally read-only.</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+<section data-section data-property="authoring-rules">
+  <h2 variant="section">Authoring rules</h2>
+  <ul>
+    <li><strong>Cluster-namespaced children only.</strong> Inside <code>&lt;editor-shell&gt;</code>: <code>&lt;editor-toolbar&gt;</code>, <code>&lt;editor-sidebar&gt;</code>, <code>&lt;editor-canvas&gt;</code>, <code>&lt;editor-statusbar&gt;</code>. Don't author raw <code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code>, <code>&lt;div data-editor-body&gt;</code>, <code>&lt;div data-canvas&gt;</code> — retired in v0.4.0.</li>
+    <li><strong>Each sidebar wraps a <code>&lt;pane-ui&gt;</code>.</strong> The pane owns resize; the sidebar owns slot positioning + collapse + persist. <code>&lt;pane-ui side="leading|trailing"&gt;</code> is required so the resize handle lands on the correct edge.</li>
+    <li><strong>Canvas reflects <code>[empty]</code>.</strong> Use <code>:has(editor-canvas[empty])</code> to style the shell differently when nothing's open.</li>
+    <li><strong>Focus mode is one attribute.</strong> Setting <code>focus-mode</code> on the shell propagates to <code>[full-screen]</code> on the canvas and <code>[focused]</code> on the active sidebar — no JS coordination needed.</li>
+  </ul>
+</section>
+<section data-section data-property="where-to-next">
+  <h2 variant="section">Where to next</h2>
+  <ul>
+    <li><a href="/site/components/editor-shell">editor-shell component reference</a> — full anatomy + live demo</li>
+    <li><a href="/site/components/pane">pane-ui</a> · <a href="/site/components/tree">tree-ui</a> · <a href="/site/components/tabs">tabs-ui</a></li>
+    <li><a href="/site/patterns/shells">Macro-shells overview</a></li>
+    <li><a href="/site/patterns/admin-shell">admin-shell pattern</a> · <a href="/site/patterns/chat-shell">chat-shell pattern</a></li>
+  </ul>
+</section>

package/patterns/editor-shell/editor-shell.html ADDED Viewed

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Editor Shell (pattern) — AdiaUI</title>
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/code/code.css">
+  <link rel="stylesheet" href="../../components/field/field.css">
+  <link rel="stylesheet" href="../../components/input/input.css">
+  <link rel="stylesheet" href="../../components/pane/pane.css">
+  <link rel="stylesheet" href="../../components/range/range.css">
+  <link rel="stylesheet" href="../../components/segment/segment.css">
+  <link rel="stylesheet" href="../../components/segmented/segmented.css">
+  <link rel="stylesheet" href="../../components/select/select.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/tree/tree.css">
+  <!-- Component JS -->
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/code/code.js"></script>
+  <script type="module" src="../../components/field/field.js"></script>
+  <script type="module" src="../../components/input/input.js"></script>
+  <script type="module" src="../../components/pane/pane.js"></script>
+  <script type="module" src="../../components/range/range.js"></script>
+  <script type="module" src="../../components/segment/segment.js"></script>
+  <script type="module" src="../../components/segmented/segmented.js"></script>
+  <script type="module" src="../../components/select/select.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/tree/tree.js"></script>
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    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-shell.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-shell.examples.html — ${err.message}</p>`;
+      console.error('[editor-shell.html]', err);
+    }
+  </script>
+</body>
+</html>

package/patterns/export-flow/export-flow.examples.html ADDED Viewed

@@ -0,0 +1,152 @@
+<header>
+  <div>
+    <h1>Export flow</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">select-ui</tag-ui> <tag-ui size="sm">radio-ui</tag-ui> <tag-ui size="sm">check-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">alert-ui</tag-ui>
+    </div>
+  </div>
+  <p>Generic export-request form. User picks scope, format, and delivery (download or email), then submits. Distilled from the data-export-request flow in <a href="/site/patterns/admin-keys-and-export">admin-keys-and-export</a> — use this when an export form lives standalone (settings panel, admin shell, in-context "Export…" affordance).</p>
+</header>
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>Standalone export forms: dataset → file → delivery. Sync (download now) or async (email when ready). Distinct from <a href="/site/patterns/admin-keys-and-export">admin-keys-and-export</a> (compliance + workspace migration; always async) and from a single "Download CSV" button (no choices to make).</p>
+</section>
+<section data-section data-property="sync-download">
+  <h2 variant="section">Sync — download now</h2>
+  <p data-note>Small datasets (&lt; 10 k rows). User picks format, browser downloads on click. Submit button copy = the verb ("Download CSV"); format-picker change updates the button label.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="download now">
+      <card-ui data-chunk="export-flow-sync" style="max-width: 480px;">
+        <header>
+          <span slot="heading" variant="section">Export users</span>
+          <text-ui slot="description" color="subtle">428 rows · current filter applied</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="Format">
+              <select-ui id="export-sync-format" name="format">
+                <option value="csv" selected>CSV (Excel-compatible)</option>
+                <option value="json">JSON</option>
+                <option value="xlsx">XLSX (Excel native)</option>
+              </select-ui>
+            </field-ui>
+            <field-ui label="Columns">
+              <col-ui gap="1">
+                <radio-ui name="cols" value="all" label="All columns" checked></radio-ui>
+                <radio-ui name="cols" value="visible" label="Only visible columns (8)"></radio-ui>
+              </col-ui>
+            </field-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
+          <button-ui id="export-sync-submit" slot="action" text="Download CSV" variant="primary" icon-leading="download-simple"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="async-email">
+  <h2 variant="section">Async — email when ready</h2>
+  <p data-note>Large datasets (≥ 10 k rows / known-slow exports). Submit queues a job; the user gets an email with a download link when the archive is ready. The form acknowledges the latency up front in an info alert + uses the verb "Request" instead of "Download".</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="request email export">
+      <card-ui data-chunk="export-flow-async" style="max-width: 480px;">
+        <header>
+          <span slot="heading" variant="section">Export analytics</span>
+          <text-ui slot="description" color="subtle">~1.4M events · last 90 days</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="Date range">
+              <select-ui name="range">
+                <option value="7d">Last 7 days</option>
+                <option value="30d">Last 30 days</option>
+                <option value="90d" selected>Last 90 days</option>
+                <option value="custom">Custom range…</option>
+              </select-ui>
+            </field-ui>
+            <field-ui label="Format">
+              <select-ui id="export-async-format" name="format">
+                <option value="ndjson" selected>NDJSON (line-delimited)</option>
+                <option value="parquet">Parquet</option>
+                <option value="csv">CSV per day</option>
+              </select-ui>
+            </field-ui>
+            <field-ui label="Deliver to" required>
+              <input-ui name="email" type="email" value="kim@example.com"></input-ui>
+            </field-ui>
+            <alert-ui variant="info" icon="clock">
+              <col-ui slot="content" gap="0-5">
+                <text-ui strong>Exports complete within 1 hour.</text-ui>
+                <text-ui>You'll receive an email with a download link valid for 7 days.</text-ui>
+              </col-ui>
+            </alert-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
+          <button-ui slot="action" text="Request export" variant="primary"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="delivery-choice">
+  <h2 variant="section">Choice — download vs email</h2>
+  <p data-note>When both make sense (medium datasets, user preference matters). Radio choice up top toggles which submit verb fires; email field hides when "download" is selected.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="delivery picker">
+      <card-ui data-chunk="export-flow-delivery" style="max-width: 480px;">
+        <header>
+          <span slot="heading" variant="section">Export invoices</span>
+          <text-ui slot="description" color="subtle">2024 fiscal year · 1,247 invoices</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="Format">
+              <select-ui id="export-delivery-format" name="format">
+                <option value="pdf" selected>PDF bundle</option>
+                <option value="zip-pdf">ZIP of individual PDFs</option>
+                <option value="csv">CSV summary only</option>
+              </select-ui>
+            </field-ui>
+            <field-ui label="Delivery" required>
+              <col-ui gap="1">
+                <radio-ui id="export-delivery-radio-download" name="delivery" value="download" label="Download now" checked></radio-ui>
+                <radio-ui name="delivery" value="email" label="Email when ready (recommended for large bundles)"></radio-ui>
+              </col-ui>
+            </field-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
+          <button-ui id="export-delivery-submit" slot="action" text="Download PDF" variant="primary" icon-leading="download-simple"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Submit-button verb mirrors delivery</strong> — "Download CSV" for sync, "Request export" for async. Never "Submit" — the verb tells the user what happens next.</li>
+    <li><strong>Format picker drives submit label</strong> — change the format from CSV to JSON, the button copy updates to "Download JSON". Removes ambiguity ("what am I getting?").</li>
+    <li><strong>Async exports announce the latency</strong> — info alert with the expected wait + delivery channel. "Up to 24 hours" is fine; silent spinners are not.</li>
+    <li><strong>Show the dataset size up front</strong> — the description slot carries row count / data range / filter context so the user knows scope before submitting.</li>
+    <li><strong>Compose with</strong> — wrap in <code>&lt;modal-ui&gt;</code> for in-context "Export…" affordances, OR render inline in a settings panel. The form composes; the surface choice is yours.</li>
+  </ul>
+</section>
+<section data-section data-property="cross-references">
+  <h2 variant="section">Cross-references</h2>
+  <ul>
+    <li><a href="/site/patterns/admin-keys-and-export">admin-keys-and-export</a> — compliance / workspace-migration export (always async, GDPR / SOC-2 framing).</li>
+    <li><a href="/site/components/select">select-ui</a> · <a href="/site/components/radio">radio-ui</a> · <a href="/site/components/field">field-ui</a> — primitives composed here.</li>
+  </ul>
+</section>

package/patterns/export-flow/export-flow.examples.js ADDED Viewed

@@ -0,0 +1,37 @@
+/** Export-flow demo — wire the format select to the submit button label.
+ *
+ * The pattern's composition rule says the submit-button verb mirrors the
+ * format choice ("Download CSV" / "Download JSON" / "Download PDF"). The
+ * demo backs that rule by rebinding the button text on format change. */
+const FORMAT_LABELS = {
+  csv:      'CSV',
+  json:     'JSON',
+  xlsx:     'XLSX',
+  pdf:      'PDF',
+  'zip-pdf':'PDF (zip)',
+  ndjson:   'NDJSON',
+  parquet:  'Parquet',
+};
+function wire(root, { selectId, submitId, verb = 'Download' }) {
+  const select = root.querySelector('#' + selectId);
+  const submit = root.querySelector('#' + submitId);
+  if (!select || !submit) return;
+  const update = () => {
+    const fmt = (select.value || '').toLowerCase();
+    const label = FORMAT_LABELS[fmt] || fmt.toUpperCase();
+    submit.setAttribute('text', `${verb} ${label}`);
+  };
+  update();
+  select.addEventListener('change', update);
+}
+export default function setup(router) {
+  const root = router || document;
+  wire(root, { selectId: 'export-sync-format',     submitId: 'export-sync-submit' });
+  wire(root, { selectId: 'export-delivery-format', submitId: 'export-delivery-submit' });
+  // Async variant uses "Request export" — no format suffix per the rule
+  // ("Request" verb signals the async job; the user gets a download link
+  // by email, not an immediate file).
+}

package/patterns/export-flow/export-flow.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Export flow (pattern) — AdiaUI</title>
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+  <link rel="stylesheet" href="../../components/alert/alert.css">
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/check/check.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/field/field.css">
+  <link rel="stylesheet" href="../../components/icon/icon.css">
+  <link rel="stylesheet" href="../../components/input/input.css">
+  <link rel="stylesheet" href="../../components/list/list.css">
+  <link rel="stylesheet" href="../../components/radio/radio.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/select/select.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <script type="module" src="../../components/alert/alert.js"></script>
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/check/check.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/field/field.js"></script>
+  <script type="module" src="../../components/icon/icon.js"></script>
+  <script type="module" src="../../components/input/input.js"></script>
+  <script type="module" src="../../components/list/list.js"></script>
+  <script type="module" src="../../components/radio/radio.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/select/select.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    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('./export-flow.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 export-flow.examples.html — ${err.message}</p>`;
+      console.error('[export-flow.html]', err);
+    }
+  </script>
+</body>
+</html>

package/patterns/filter-bar/filter-bar.examples.html ADDED Viewed

@@ -0,0 +1,116 @@
+<header>
+  <div>
+    <h1>Filter Bar</h1>
+    <div data-actions>
+      <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">popover-ui</tag-ui> <tag-ui size="sm">action-list-ui</tag-ui>
+    </div>
+  </div>
+  <p>Row of active filters above a table or list. Each filter is a removable chip; a trailing "Add filter" button opens a popover of available facets. Distinct from full-text search, which stays in the toolbar.</p>
+</header>
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    Use a filter bar when users apply multiple faceted filters to the same view
+    — status + owner + date range is the typical shape. A single dropdown is enough
+    for one facet; a drawer is better for 5+ complex facets. The bar is the
+    middle ground.
+  </p>
+</section>
+<section data-section data-property="active-filters" data-chunk="filter-bar-active-filters">
+  <h2 variant="section">Active filters + Add filter</h2>
+  <p data-note>Chips show each active filter. The trailing button opens a popover of available facets.</p>
+  <card-ui>
+    <section>
+      <row-ui gap="2" align="center" wrap>
+        <text-ui color="subtle" weight="semibold">Filters:</text-ui>
+        <tag-ui text="Status: Active" removable></tag-ui>
+        <tag-ui text="Owner: Alex Chen" removable></tag-ui>
+        <tag-ui text="Updated: last 7 days" removable></tag-ui>
+        <button-ui text="+ Add filter" variant="ghost" size="sm" popovertarget="pat-filter-menu"></button-ui>
+        <span data-spacer></span>
+        <button-ui text="Clear all" variant="ghost" size="sm"></button-ui>
+      </row-ui>
+      <popover-ui id="pat-filter-menu" anchor="previous">
+        <action-list-ui>
+          <action-item-ui icon="flag" text="Status" value="status"></action-item-ui>
+          <action-item-ui icon="user" text="Owner" value="owner"></action-item-ui>
+          <action-item-ui icon="tag" text="Label" value="label"></action-item-ui>
+          <action-item-ui icon="calendar" text="Date range" value="date"></action-item-ui>
+          <action-item-ui icon="folder" text="Project" value="project"></action-item-ui>
+        </action-list-ui>
+      </popover-ui>
+    </section>
+  </card-ui>
+</section>
+<section data-section data-property="filter-bar-with-table" data-chunk="filter-bar-filter-bar-with-table">
+  <h2 variant="section">Filter bar + table</h2>
+  <p data-note>The common composition: filters sit above the table inside one card surface so they read as modifying the same data.</p>
+  <card-ui>
+    <section bleed>
+      <toolbar-ui overflow="none" style="padding: var(--a-space-2) var(--a-space-3); border-block-end: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: 0;">
+        <row-ui gap="2" align="center" grow>
+          <tag-ui text="Status: Active" removable></tag-ui>
+          <tag-ui text="Owner: Alex" removable></tag-ui>
+          <button-ui text="+ Add filter" variant="ghost" size="sm"></button-ui>
+        </row-ui>
+        <search-ui placeholder="Search…" size="sm"></search-ui>
+      </toolbar-ui>
+      <table-ui id="pat-filter-table" sortable striped></table-ui>
+    </section>
+  </card-ui>
+</section>
+<section data-section data-property="saved-views" data-chunk="filter-bar-saved-views">
+  <h2 variant="section">Saved views</h2>
+  <p data-note>Named combinations of filters. Segmented control replaces the active-filter chips while a view is applied.</p>
+  <card-ui>
+    <section>
+      <row-ui align="center" gap="3" wrap>
+        <segmented-ui value="my-open">
+          <segment-ui value="all" text="All"></segment-ui>
+          <segment-ui value="my-open" text="My open"></segment-ui>
+          <segment-ui value="team" text="Team"></segment-ui>
+          <segment-ui value="archived" text="Archived"></segment-ui>
+        </segmented-ui>
+        <span data-spacer></span>
+        <button-ui text="Save view" icon="bookmark" variant="ghost"></button-ui>
+      </row-ui>
+    </section>
+  </card-ui>
+</section>
+<section data-section data-property="anatomy">
+  <h2 variant="section">Anatomy</h2>
+  <code-ui language="html">&lt;row-ui gap="2" align="center" wrap&gt;
+  &lt;text-ui color="subtle" weight="semibold"&gt;Filters:&lt;/text-ui&gt;
+  &lt;!-- one removable chip per active filter --&gt;
+  &lt;tag-ui text="Status: Active" removable&gt;&lt;/tag-ui&gt;
+  &lt;tag-ui text="Owner: Alex Chen" removable&gt;&lt;/tag-ui&gt;
+  &lt;!-- popover-anchored menu of facets --&gt;
+  &lt;button-ui text="+ Add filter" variant="ghost"
+           popovertarget="filter-menu"&gt;&lt;/button-ui&gt;
+  &lt;span data-spacer&gt;&lt;/span&gt;
+  &lt;button-ui text="Clear all" variant="ghost"&gt;&lt;/button-ui&gt;
+&lt;/row-ui&gt;
+&lt;popover-ui id="filter-menu" anchor="previous"&gt;
+  &lt;action-list-ui&gt;...facets...&lt;/action-list-ui&gt;
+&lt;/popover-ui&gt;</code-ui>
+</section>
+<section data-section data-property="rules">
+  <h2 variant="section">Rules</h2>
+  <ul>
+    <li>One chip per active filter. If a filter has multiple values (e.g., Status in [Active, Draft]), collapse to <code>"Status: 2"</code> with the chip showing the count.</li>
+    <li>Filters modify the dataset. Search modifies the <em>match within</em> the dataset. Keep them visually distinct — filters left, search right.</li>
+    <li>Clear-all only appears when ≥1 filter is active.</li>
+    <li>Saved views and free-form chip filters are mutually exclusive. Pick one per surface — mixing both confuses "what state am I in?".</li>
+    <li>When filters come from a drawer instead (5+ facets, complex forms), use a <code>button-ui icon="funnel"</code> that opens a filter drawer. The chip bar below still shows what's active.</li>
+  </ul>
+</section>