@agent-ui-kit/web-components 0.0.15 → 0.0.17

package/dist/docs/blocks/ml-pipeline.yaml

@@ -1,7 +1,166 @@
 name: ml-pipeline
 type: block
 summary: ML Training Pipeline — 12 nodes, 14 connections.
-description: >
-  Visual graph block rendered from the ML Training Pipeline dataset using
-  aui-graph components with port-selector noodle connections.
-components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]
+description: |
+  Visual graph block rendered from the ML Training Pipeline dataset using aui-graph components with port-selector noodle connections.
+components:
+  - aui-container
+  - aui-text
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
+examples:
+  - description: ML Training Pipeline — 12 nodes, 14 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 37.25rem; min-width: 84.625rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Data Lake → Feature Store -->
+          <aui-graph-noodle from="ml-lake:right" to="ml-features:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Schema Validator → Feature Store -->
+          <aui-graph-noodle from="ml-schema:right" to="ml-features:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Feature Store → Training Cluster GPU -->
+          <aui-graph-noodle from="ml-features:right" to="ml-train:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Feature Store → Hyperparameter Tuner -->
+          <aui-graph-noodle from="ml-features:right" to="ml-hyper:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Training Cluster GPU → Validation Split -->
+          <aui-graph-noodle from="ml-train:right" to="ml-validate:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Hyperparameter Tuner → Training Cluster GPU -->
+          <aui-graph-noodle from="ml-hyper:right" to="ml-train:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Validation Split → Model Registry -->
+          <aui-graph-noodle from="ml-validate:right" to="ml-registry:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Model Registry → A/B Test Gate -->
+          <aui-graph-noodle from="ml-registry:right" to="ml-abtest:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Model Registry → Canary Deploy -->
+          <aui-graph-noodle from="ml-registry:right" to="ml-canary:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- A/B Test Gate → Production Endpoint -->
+          <aui-graph-noodle from="ml-abtest:right" to="ml-prod:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Canary Deploy → Production Endpoint -->
+          <aui-graph-noodle from="ml-canary:right" to="ml-prod:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Production Endpoint → Drift Monitor -->
+          <aui-graph-noodle from="ml-prod:right" to="ml-drift:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Drift Monitor → Retraining Trigger -->
+          <aui-graph-noodle from="ml-drift:right" to="ml-retrain:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Retraining Trigger → Feature Store -->
+          <aui-graph-noodle from="ml-retrain:bottom" to="ml-features:bottom" color="warning" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Data Lake -->
+          <aui-graph-node x="24" y="116" node-id="ml-lake">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Data Lake</aui-text>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Schema Validator -->
+          <aui-graph-node x="24" y="256" node-id="ml-schema">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Schema Validator</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Feature Store -->
+          <aui-graph-node x="240" y="186" node-id="ml-features">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Feature Store</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Training Cluster GPU -->
+          <aui-graph-node x="456" y="116" node-id="ml-train">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Training Cluster GPU</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Hyperparameter Tuner -->
+          <aui-graph-node x="456" y="256" node-id="ml-hyper">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Hyperparameter Tuner</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Validation Split -->
+          <aui-graph-node x="672" y="116" node-id="ml-validate">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Validation Split</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Model Registry -->
+          <aui-graph-node x="672" y="256" node-id="ml-registry">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Model Registry</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- A/B Test Gate -->
+          <aui-graph-node x="888" y="116" node-id="ml-abtest">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">A/B Test Gate</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Canary Deploy -->
+          <aui-graph-node x="888" y="256" node-id="ml-canary">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Canary Deploy</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Production Endpoint -->
+          <aui-graph-node x="1104" y="116" node-id="ml-prod">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Production Endpoint</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Drift Monitor -->
+          <aui-graph-node x="1104" y="256" node-id="ml-drift">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Drift Monitor</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Retraining Trigger -->
+          <aui-graph-node x="1104" y="396" node-id="ml-retrain">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Retraining Trigger</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>

package/dist/docs/blocks/nav-card.yaml

@@ -1,21 +1,24 @@
 name: nav-card
 type: block
 summary: Compact clickable card for navigation menus.
-description: >
-  A widget-sized interactive card that navigates on click.
-  Shows an icon in a square avatar, a title, a description,
-  and a trailing chevron. Uses interactive and href for
-  click-to-navigate behavior.
-
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon]
+description: |
+  A widget-sized interactive card that navigates on click. Shows an icon in a square avatar, a title, a description, and a trailing chevron. Uses interactive and href for click-to-navigate behavior.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
 kind: widget
-
 examples:
-  - html: |
+  - description: Compact clickable card for navigation menus.
+    html: |-
       <aui-container kind="widget" bordered interactive href="#" max-width="sm">
         <aui-inset>
           <aui-stack direction="row" gap="2" align-items="center">
-            <aui-avatar square><aui-icon name="gear"></aui-icon></aui-avatar>
+            <aui-avatar size="lg" square><aui-icon name="gear"></aui-icon></aui-avatar>
             <aui-stack gap="1" spacer>
               <aui-heading size="md" weight="medium">Preferences</aui-heading>
               <aui-text muted size="sm">Language, theme, and notifications</aui-text>
@@ -24,4 +27,3 @@ examples:
           </aui-stack>
         </aui-inset>
       </aui-container>
-    description: Clickable settings navigation card with icon and chevron.

package/dist/docs/blocks/nav-sidebar.yaml

@@ -0,0 +1,84 @@
+name: nav-sidebar
+type: block
+summary: App sidebar with workspace header, nav items, favorites section, and user footer.
+description: |
+  A fixed-width sidebar for application navigation without height constraint or aui-content wrapper — sections use aui-inset directly separated by aui-divider. Workspace header shows an accent avatar icon with solid background and org name. Main navigation section uses aui-nav-item elements with active state for the current page, and an activity item with a danger badge count. A Favorites section label uses aui-heading group for uppercase styling. Footer has a settings link and user row with avatar, name, and online status dot badge.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-divider
+  - aui-nav-item
+kind: card
+examples:
+  - description: App sidebar with workspace header, nav items, favorites section, and user footer.
+    html: |-
+      <aui-container kind="card" bordered style="width: 15rem;">
+
+        <!-- Workspace header -->
+        <aui-inset>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-avatar size="sm" accent solid><aui-icon name="globe-simple" size="xs"></aui-icon></aui-avatar>
+            <aui-heading size="sm">Acme Inc</aui-heading>
+          </aui-stack>
+        </aui-inset>
+
+        <aui-divider></aui-divider>
+
+        <!-- Main navigation -->
+        <aui-inset>
+          <aui-stack gap="1">
+            <aui-nav-item active>
+              <aui-icon name="house"></aui-icon>
+              Dashboard
+            </aui-nav-item>
+            <aui-nav-item muted>
+              <aui-icon name="star"></aui-icon>
+              Projects
+            </aui-nav-item>
+            <aui-nav-item muted>
+              <aui-icon name="clock"></aui-icon>
+              Activity
+              <aui-badge danger>3</aui-badge>
+            </aui-nav-item>
+            <aui-nav-item muted>
+              <aui-icon name="users-three"></aui-icon>
+              Team
+            </aui-nav-item>
+
+            <aui-heading group style="padding-top: 0.75rem;">Favorites</aui-heading>
+
+            <aui-nav-item muted>
+              <aui-icon name="file-text"></aui-icon>
+              Design System
+            </aui-nav-item>
+            <aui-nav-item muted>
+              <aui-icon name="file-text"></aui-icon>
+              API Docs
+            </aui-nav-item>
+          </aui-stack>
+        </aui-inset>
+
+        <aui-divider></aui-divider>
+
+        <!-- Footer -->
+        <aui-inset>
+          <aui-stack gap="2">
+            <aui-nav-item muted>
+              <aui-icon name="gear"></aui-icon>
+              Settings
+            </aui-nav-item>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-avatar size="xs">SC</aui-avatar>
+              <aui-text size="sm" spacer>Sarah Chen</aui-text>
+              <aui-badge success dot></aui-badge>
+            </aui-stack>
+          </aui-stack>
+        </aui-inset>
+
+      </aui-container>

package/dist/docs/blocks/notification-list.yaml

@@ -1,22 +1,28 @@
 name: notification-list
 type: block
 summary: Panel listing recent notifications with avatars and timestamps.
-description: >
-  A panel-style container for displaying a chronological list of
-  notifications. The header includes a title and a bulk action to
-  mark all items as read. Each notification row shows an avatar,
-  a title, a message excerpt, and a relative timestamp. Suitable
-  for notification drawers, activity feeds, or inbox-style sidebars.
-
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-button]
+description: |
+  A panel-style container for displaying a chronological list of notifications. The header includes a title and a bulk action to mark all items as read. Each notification row shows an avatar, a title, a message excerpt, and a relative timestamp. Suitable for notification drawers, activity feeds, or inbox-style sidebars.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-button
 kind: panel
-
 examples:
-  - html: |
+  - description: Panel listing recent notifications with avatars and timestamps.
+    html: |-
       <aui-container kind="panel" bordered max-width="lg">
         <aui-header>
-          <span slot="leading"><aui-heading size="xl">Notifications</aui-heading></span>
-          <span slot="trailing"><aui-button scrim>Mark all read</aui-button></span>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-heading size="xl" spacer>Notifications</aui-heading>
+            <aui-button scrim>Mark all read</aui-button>
+          </aui-stack>
         </aui-header>
         <aui-content>
           <aui-inset>
@@ -55,4 +61,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Notification list with three items showing comments, builds, and team activity.

package/dist/docs/blocks/onboard-stepper.yaml

@@ -0,0 +1,111 @@
+name: onboard-stepper
+type: block
+summary: Vertical onboarding wizard with progress bar, step timeline, inline form, and navigation.
+description: |
+  An onboarding card with a header (title + subtitle), a progress bar (--aui-accent-500 fill on --aui-control track) showing completion, and aui-stepper with aui-step children for a vertical step timeline. Steps have state-driven avatars with solid backgrounds (done=success check, running=accent number, pending=--aui-neutral-highest with --aui-ink-muted text). The active step expands to show inline form fields wrapped in a bordered widget container. The Workspace URL field uses aui-input-group with a "yourteam.app/" prefix for connected border treatment. Footer has scrim Back and primary accent Continue buttons in an aui-button-group with equal sizing via grow="1" basis="0". Connector lines between steps are handled by the aui-stepper/aui-step elements.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stepper
+  - aui-step
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-field
+  - aui-input
+  - aui-input-group
+  - aui-button
+  - aui-button-group
+kind: card
+examples:
+  - description: Vertical onboarding wizard with progress bar, step timeline, inline form, and navigation.
+    html: |-
+      <aui-container kind="card" bordered max-width="lg">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Set up your workspace</aui-heading>
+              <aui-text muted size="sm">Complete these steps to get your team up and running.</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+
+              <!-- Progress bar -->
+              <aui-stack gap="2">
+                <aui-stack direction="row" gap="2" align-items="center">
+                  <aui-text size="xs" spacer>Setup progress</aui-text>
+                  <aui-text size="xs" muted>2 of 4 complete</aui-text>
+                </aui-stack>
+                <div style="height: 4px; border-radius: var(--aui-radius); background: var(--aui-control);">
+                  <div style="width: 50%; height: 100%; border-radius: var(--aui-radius); background: var(--aui-accent-500);"></div>
+                </div>
+              </aui-stack>
+
+              <!-- Steps -->
+              <aui-stepper>
+
+                <!-- Step 1: Done -->
+                <aui-step state="done">
+                  <aui-avatar size="xs" success shrink="0" solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                  <aui-stack gap="1" spacer>
+                    <aui-heading size="sm">Create account</aui-heading>
+                    <aui-text size="xs" muted>Email verified and profile created</aui-text>
+                  </aui-stack>
+                </aui-step>
+
+                <!-- Step 2: Active -->
+                <aui-step state="running">
+                  <aui-avatar size="xs" accent shrink="0" solid>2</aui-avatar>
+                  <aui-stack gap="3" spacer min-width="0">
+                    <aui-heading size="sm">Name your workspace</aui-heading>
+                    <aui-container kind="widget" bordered>
+                      <aui-inset>
+                        <aui-stack>
+                          <aui-field label="Workspace name" width="full">
+                            <aui-input placeholder="Acme Engineering" width="full"></aui-input>
+                          </aui-field>
+                          <aui-field label="Workspace URL" width="full">
+                            <aui-input placeholder="acme-eng" prefix="yourteam.app/" width="full"></aui-input>
+                          </aui-field>
+                        </aui-stack>
+                      </aui-inset>
+                    </aui-container>
+                  </aui-stack>
+                </aui-step>
+
+                <!-- Step 3: Pending -->
+                <aui-step>
+                  <aui-avatar size="xs" shrink="0" style="background: var(--aui-neutral-highest); color: var(--aui-ink-muted);">3</aui-avatar>
+                  <aui-stack gap="1">
+                    <aui-text size="sm" muted>Invite your team</aui-text>
+                  </aui-stack>
+                </aui-step>
+
+                <!-- Step 4: Pending -->
+                <aui-step>
+                  <aui-avatar size="xs" shrink="0" style="background: var(--aui-neutral-highest); color: var(--aui-ink-muted);">4</aui-avatar>
+                  <aui-stack gap="1">
+                    <aui-text size="sm" muted>Review and launch</aui-text>
+                  </aui-stack>
+                </aui-step>
+
+              </aui-stepper>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+
+        <aui-footer>
+          <aui-button-group>
+            <aui-button scrim grow="1" basis="0">Back</aui-button>
+            <aui-button primary accent icon-trailing="caret-right" grow="1" basis="0">Continue</aui-button>
+          </aui-button-group>
+        </aui-footer>
+      </aui-container>