@adia-ai/web-components 0.6.6 → 0.6.7

package/components/agent-reasoning/agent-reasoning.examples.md

@@ -0,0 +1,28 @@
+# agent-reasoning — Examples
+
+## streaming pipeline
+
+```html
+<div data-demo-host="streaming"></div>
+<div style="display:flex; gap:var(--a-space-2); margin-top:var(--a-space-3);">
+  <button-ui data-replay="streaming" icon="arrow-clockwise" text="Replay" variant="outline" size="sm"></button-ui>
+</div>
+```
+
+## plan + thoughts
+
+```html
+<div data-demo-host="plan"></div>
+<div style="display:flex; gap:var(--a-space-2); margin-top:var(--a-space-3);">
+  <button-ui data-replay="plan" icon="arrow-clockwise" text="Replay" variant="outline" size="sm"></button-ui>
+</div>
+```
+
+## iterations
+
+```html
+<div data-demo-host="iter"></div>
+<div style="display:flex; gap:var(--a-space-2); margin-top:var(--a-space-3);">
+  <button-ui data-replay="iter" icon="arrow-clockwise" text="Replay" variant="outline" size="sm"></button-ui>
+</div>
+```

package/components/agent-suggestions/agent-suggestions.examples.md

@@ -0,0 +1,19 @@
+# agent-suggestions — Examples
+
+## basic
+
+```html
+<agent-suggestions-ui id="demo-basic"></agent-suggestions-ui>
+```
+
+## with icons
+
+```html
+<agent-suggestions-ui id="demo-icons"></agent-suggestions-ui>
+```
+
+## variant="ghost"
+
+```html
+<agent-suggestions-ui id="demo-ghost" variant="ghost"></agent-suggestions-ui>
+```

package/components/agent-trace/agent-trace.examples.md

@@ -0,0 +1,19 @@
+# agent-trace — Examples
+
+## pills
+
+```html
+<agent-trace-ui id="demo-pills"></agent-trace-ui>
+```
+
+## pills + metrics
+
+```html
+<agent-trace-ui id="demo-metrics"></agent-trace-ui>
+```
+
+## training feedback
+
+```html
+<agent-trace-ui id="demo-feedback"></agent-trace-ui>
+```

package/components/alert/alert.examples.md

@@ -0,0 +1,19 @@
+# alert — Examples
+
+## variant
+
+```html
+<alert-ui text="Default alert message"></alert-ui>
+```
+
+## closable
+
+```html
+<alert-ui text="This can be dismissed" closable></alert-ui>
+```
+
+## icon
+
+```html
+<alert-ui text="Helpful tip" icon="info"></alert-ui>
+```

package/components/aside/aside.examples.md

@@ -0,0 +1,38 @@
+# aside — Examples
+
+## Basic usage
+
+```html
+<admin-shell>
+  <aside-ui slot="leading" collapsible width="panel">
+    <list-ui>
+      <list-item-ui icon="house" text="Dashboard"></list-item-ui>
+      <list-item-ui icon="cube" text="Projects"></list-item-ui>
+      <list-item-ui icon="gear" text="Settings"></list-item-ui>
+    </list-ui>
+  </aside-ui>
+  <section-ui>
+    <!-- main content -->
+  </section-ui>
+</admin-shell>
+```
+
+## Slot positions inside <admin-shell>
+
+```html
+<admin-shell>
+  <aside-ui slot="leading" collapsible width="rail">…</aside-ui>
+  <section-ui>…main content…</section-ui>
+  <aside-ui slot="trailing" width="panel">…</aside-ui>
+</admin-shell>
+```
+
+## Composing with <pane-ui>
+
+```html
+<aside-ui slot="leading" collapsible width="panel">
+  <pane-ui resizable>
+    <list-ui>…</list-ui>
+  </pane-ui>
+</aside-ui>
+```

package/components/avatar/avatar.examples.md

@@ -0,0 +1,19 @@
+# avatar — Examples
+
+## src
+
+```html
+<avatar-ui src="https://i.pravatar.cc/80?u=alice" text="Alice Smith"></avatar-ui>
+```
+
+## size
+
+```html
+<avatar-ui text="XS" size="xs"></avatar-ui>
+```
+
+## shape
+
+```html
+<avatar-ui text="Circle" shape="circle"></avatar-ui>
+```

package/components/badge/badge.examples.md

@@ -0,0 +1,19 @@
+# badge — Examples
+
+## variant
+
+```html
+<badge-ui text="Default"></badge-ui>
+```
+
+## size
+
+```html
+<badge-ui text="Small" size="sm"></badge-ui>
+```
+
+## text
+
+```html
+<badge-ui text="New"></badge-ui>
+```

package/components/block/block.examples.md

@@ -0,0 +1,29 @@
+# block — Examples
+
+## padding
+
+```html
+<block-ui padding="none" style="border:1px dashed var(--a-border);">
+  <p>padding: none</p>
+</block-ui>
+```
+
+## margin
+
+```html
+<div style="background:var(--a-accent-10-tint); display:inline-block;">
+  <block-ui margin="none" padding="sm" style="border:1px dashed var(--a-border); background:var(--a-canvas-bg);">
+    <p>margin: none</p>
+  </block-ui>
+</div>
+```
+
+## Combinations
+
+```html
+<div style="background:var(--a-accent-10-tint); display:inline-block;">
+  <block-ui padding="lg" margin="md" style="border:1px dashed var(--a-border); background:var(--a-canvas-bg);">
+    <p>padding: lg + margin: md</p>
+  </block-ui>
+</div>
+```

package/components/breadcrumb/breadcrumb.examples.md

@@ -0,0 +1,32 @@
+# breadcrumb — Examples
+
+## basic
+
+```html
+<breadcrumb-ui>
+  <span>Home</span>
+  <span>Components</span>
+  <span>Breadcrumb</span>
+</breadcrumb-ui>
+```
+
+## custom separator
+
+```html
+<breadcrumb-ui separator="&gt;">
+  <span>Home</span>
+  <span>Settings</span>
+  <span>General</span>
+</breadcrumb-ui>
+```
+
+## with links
+
+```html
+<breadcrumb-ui>
+  <a href="#">Home</a>
+  <a href="#">Products</a>
+  <a href="#">Category</a>
+  <span>Item Detail</span>
+</breadcrumb-ui>
+```

package/components/button/button.examples.md

@@ -0,0 +1,19 @@
+# button — Examples
+
+## variant
+
+```html
+<button-ui text="Default"></button-ui>
+```
+
+## size
+
+```html
+<button-ui text="Small" size="sm"></button-ui>
+```
+
+## icon-only
+
+```html
+<button-ui icon="plus" size="sm"></button-ui>
+```

package/components/calendar-picker/calendar-picker.examples.md

@@ -0,0 +1,23 @@
+# calendar-picker — Examples
+
+## Default
+
+```html
+<calendar-picker-ui></calendar-picker-ui>
+```
+
+## label
+
+```html
+<field-ui label="Start Date">
+  <calendar-picker-ui></calendar-picker-ui>
+</field-ui>
+```
+
+## Pre-selected
+
+```html
+<field-ui label="Birthday">
+  <calendar-picker-ui value="1990-06-15"></calendar-picker-ui>
+</field-ui>
+```

package/components/canvas/canvas.examples.md

@@ -0,0 +1,49 @@
+# canvas — Examples
+
+## basic
+
+```html
+<card-ui variant="outlined">
+  <section>
+    <col-ui gap="3">
+      <text-ui strong>How it works</text-ui>
+      <text-ui color="subtle">
+        The canvas creates an internal
+        <code>&lt;a2ui-root&gt;</code>
+        element. Feed it A2UI protocol messages via
+        <code>.process()</code>
+        or
+        <code>.processAll()</code>
+        , and the root renders them into live AdiaUI components. User interactions (clicks, input changes) bubble up as
+        <code>canvas-interaction</code>
+        events.
+      </text-ui>
+    </col-ui>
+  </section>
+</card-ui>
+```
+
+## theme
+
+```html
+<card-ui variant="outlined">
+  <section>
+    <col-ui gap="2">
+      <text-ui strong>Default</text-ui>
+      <text-ui color="subtle">Inherits the page theme.</text-ui>
+    </col-ui>
+  </section>
+</card-ui>
+```
+
+## Version History
+
+```html
+<card-ui variant="outlined">
+  <section>
+    <col-ui gap="3">
+      <text-ui strong>Undo / Redo pattern</text-ui>
+    </col-ui>
+  </section>
+</card-ui>
+```

package/components/card/card.examples.md

@@ -0,0 +1,25 @@
+# card — Examples
+
+## variant
+
+```html
+<card-ui variant="default">
+  <section>Default card content</section>
+</card-ui>
+```
+
+## size
+
+```html
+<card-ui size="sm">
+  <section>Small card</section>
+</card-ui>
+```
+
+## elevation
+
+```html
+<card-ui elevation="0">
+  <section>No shadow</section>
+</card-ui>
+```

package/components/chart/chart.examples.md

@@ -0,0 +1,19 @@
+# chart — Examples
+
+## Axis family
+
+```html
+<chart-ui id="chart-bar" type="bar" x="month" y="value"></chart-ui>
+```
+
+## Categorical family
+
+```html
+<chart-ui id="chart-pie" type="pie" x="category" y="value"></chart-ui>
+```
+
+## Radial family
+
+```html
+<chart-ui id="chart-radar" type="radar" x="skill" y="value"></chart-ui>
+```

package/components/chart-legend/chart-legend.examples.md

@@ -0,0 +1,22 @@
+# chart-legend — Examples
+
+## shape
+
+```html
+<chart-legend-ui id="legend-dot" shape="dot" items='[{"key":"revenue","label":"Revenue","slot":0},{"key":"users","label":"Users","slot":1},{"key":"churn","label":"Churn","slot":2}]'></chart-legend-ui>
+```
+
+## position
+
+```html
+<chart-legend-ui id="legend-bottom" shape="dot" position="bottom" items='[{"key":"a","label":"Series A","slot":0},{"key":"b","label":"Series B","slot":1},{"key":"c","label":"Series C","slot":2}]'></chart-legend-ui>
+```
+
+## for — mirror a chart's legendData
+
+```html
+<div style="display:flex; flex-direction:column; gap:var(--a-space-2);">
+  <chart-ui id="demo-chart" type="multi-line" x="month" y="revenue,users,churn"></chart-ui>
+  <chart-legend-ui id="legend-for" for="demo-chart" shape="line"></chart-legend-ui>
+</div>
+```

package/components/chat-thread/chat-thread.examples.md

@@ -0,0 +1,35 @@
+# chat-thread — Examples
+
+## basic
+
+```html
+<chat-thread-ui>
+  <div role="user">What's the capital of France?</div>
+  <div role="assistant">The capital of France is Paris.</div>
+</chat-thread-ui>
+```
+
+## streaming
+
+```html
+<chat-thread-ui>
+  <div role="user">Explain black holes briefly.</div>
+  <div role="assistant" streaming>A black hole is a region of spacetime where gravity is so strong that</div>
+</chat-thread-ui>
+```
+
+## with input
+
+```html
+<chat-thread-ui>
+  <div role="user">Give me a short haiku about the ocean.</div>
+  <div role="assistant">
+    Waves whisper secrets —
+    <br>
+    the tide retreats then returns,
+    <br>
+    carrying the moon.
+  </div>
+</chat-thread-ui>
+<chat-input-ui placeholder="Type a message..."></chat-input-ui>
+```

package/components/check/check.examples.md

@@ -0,0 +1,19 @@
+# check — Examples
+
+## checked
+
+```html
+<check-ui label="Unchecked"></check-ui>
+```
+
+## indeterminate
+
+```html
+<check-ui label="Select All" indeterminate></check-ui>
+```
+
+## disabled
+
+```html
+<check-ui label="Disabled Unchecked" disabled></check-ui>
+```

package/components/code/code.examples.md

@@ -0,0 +1,31 @@
+# code — Examples
+
+## inline
+
+```html
+<p>Use  to declare a variable, or call  to convert iterables.</p>
+```
+
+## block with language
+
+```html
+<div class="container">
+  <field-ui label="Email">
+    <input-ui placeholder="you@example.com"></input-ui>
+  </field-ui>
+  <button-ui text="Submit" variant="primary"></button-ui>
+</div>
+```
+
+## escape-free authoring via <template>
+
+```html
+<template>
+  <div class="container">
+    <field-ui label="Email">
+      <input-ui placeholder="you@example.com"></input-ui>
+    </field-ui>
+    <button-ui text="Submit" variant="primary"></button-ui>
+  </div>
+</template>
+```

package/components/col/col.examples.md

@@ -0,0 +1,11 @@
+# col — Examples
+
+## Basic usage
+
+```html
+<col-ui gap="md">
+  <text-ui variant="title">Welcome back</text-ui>
+  <text-ui>Sign in to continue.</text-ui>
+  <button-ui text="Sign in" variant="solid" stretch></button-ui>
+</col-ui>
+```

package/components/color-input/color-input.examples.md

@@ -0,0 +1,19 @@
+# color-input — Examples
+
+## Default
+
+```html
+<color-input-ui name="brand"></color-input-ui>
+```
+
+## Initial values
+
+```html
+<color-input-ui name="brand-blue" value="#3b82f6"></color-input-ui>
+```
+
+## Format — hex vs oklch
+
+```html
+<color-input-ui name="hex-out" format="hex" value="#3b82f6"></color-input-ui>
+```

package/components/color-picker/color-picker.examples.md

@@ -0,0 +1,19 @@
+# color-picker — Examples
+
+## Default
+
+```html
+<color-picker-ui></color-picker-ui>
+```
+
+## Pre-set Colors
+
+```html
+<color-picker-ui value="#3b82f6"></color-picker-ui>
+```
+
+## disabled
+
+```html
+<color-picker-ui value="#3b82f6" disabled></color-picker-ui>
+```

package/components/command/command.examples.md

@@ -0,0 +1,58 @@
+# command — Examples
+
+## inline (not in dialog)
+
+```html
+<command-ui placeholder="Search commands..." style="width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);">
+  <optgroup label="Pages">
+    <option value="home" data-icon="house">Home</option>
+    <option value="dashboard" data-icon="chart-bar">Dashboard</option>
+    <option value="settings" data-icon="gear">Settings</option>
+  </optgroup>
+  <optgroup label="Actions">
+    <option value="new" data-icon="plus">Create New</option>
+    <option value="search" data-icon="magnifying-glass">Search</option>
+  </optgroup>
+</command-ui>
+```
+
+## grouped options with icons
+
+```html
+<command-ui placeholder="Type a command..." style="width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);">
+  <optgroup label="Navigation">
+    <option value="home" data-icon="house">Go to Home</option>
+    <option value="projects" data-icon="folder">Go to Projects</option>
+    <option value="settings" data-icon="gear">Go to Settings</option>
+    <option value="profile" data-icon="user">Go to Profile</option>
+  </optgroup>
+  <optgroup label="Team">
+    <option value="members" data-icon="users">View Members</option>
+    <option value="roles" data-icon="shield">Manage Roles</option>
+    <option value="invites" data-icon="envelope">Send Invites</option>
+  </optgroup>
+  <optgroup label="Account">
+    <option value="billing" data-icon="credit-card">Billing</option>
+    <option value="logout" data-icon="sign-out">Log Out</option>
+  </optgroup>
+</command-ui>
+```
+
+## with shortcuts
+
+```html
+<command-ui placeholder="Search..." style="width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);">
+  <optgroup label="Actions">
+    <option value="new-file" data-icon="file-plus" data-shortcut="&#8984;N">New File</option>
+    <option value="open" data-icon="folder-open" data-shortcut="&#8984;O">Open File</option>
+    <option value="save" data-icon="floppy-disk" data-shortcut="&#8984;S">Save</option>
+    <option value="find" data-icon="magnifying-glass" data-shortcut="&#8984;F">Find</option>
+    <option value="replace" data-icon="swap" data-shortcut="&#8984;H">Find &amp; Replace</option>
+  </optgroup>
+  <optgroup label="View">
+    <option value="toggle-sidebar" data-icon="sidebar" data-shortcut="&#8984;B">Toggle Sidebar</option>
+    <option value="toggle-theme" data-icon="moon" data-shortcut="&#8984;D">Toggle Theme</option>
+    <option value="zen-mode" data-icon="arrows-out" data-shortcut="&#8984;K Z">Zen Mode</option>
+  </optgroup>
+</command-ui>
+```

package/components/demo-toggle/demo-toggle.examples.md

@@ -0,0 +1,19 @@
+# demo-toggle — Examples
+
+## initial
+
+```html
+<demo-toggle-ui label-on="With trait" label-off="Without trait" initial="off">
+  <div slot="off" style="padding:var(--a-space-4);text-align:center;color:var(--a-fg-muted);">Bare surface — no trait attached.</div>
+  <div slot="on" style="padding:var(--a-space-4);text-align:center;color:var(--a-fg);">Same surface, with trait attached.</div>
+</demo-toggle-ui>
+```
+
+## labelOn / labelOff
+
+```html
+<demo-toggle-ui label-on="With shimmer-loading" label-off="Without shimmer-loading">
+  <div slot="off" style="padding:var(--a-space-4);">Placeholder content (no trait)</div>
+  <div slot="on" style="padding:var(--a-space-4);">Placeholder content (shimmer active)</div>
+</demo-toggle-ui>
+```

package/components/description-list/description-list.examples.md

@@ -0,0 +1,37 @@
+# description-list — Examples
+
+## Stacked (default)
+
+```html
+<description-list-ui>
+  <dt>Status</dt>
+  <dd>Active</dd>
+  <dt>Plan</dt>
+  <dd>Pro</dd>
+  <dt>Renewal</dt>
+  <dd>April 14, 2027</dd>
+</description-list-ui>
+```
+
+## Inline
+
+```html
+<description-list-ui layout="inline" align="between">
+  <dt>Weight</dt>
+  <dd>2.8 lbs</dd>
+  <dt>Dimensions</dt>
+  <dd>12 × 8 × 1 in</dd>
+  <dt>Material</dt>
+  <dd>Aluminum</dd>
+  <dt>Color</dt>
+  <dd>Space gray</dd>
+  <dt>Warranty</dt>
+  <dd>1 year</dd>
+</description-list-ui>
+```
+
+## Programmatic
+
+```html
+<description-list-ui layout="inline" align="between" items='[{"term":"CPU","description":"Apple M4"},{"term":"RAM","description":"16 GB"},{"term":"Storage","description":"512 GB SSD"}]'></description-list-ui>
+```