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

package/dist/docs/blocks/gen-ai-pipeline.yaml

@@ -1,8 +1,235 @@
 name: gen-ai-pipeline
 type: block
 summary: ComfyUI-style generative AI pipeline with encoders, samplers, and post-processing nodes.
-description: >
-  A visual node graph representing a Stable Diffusion / ComfyUI-style image generation
-  pipeline. Includes prompt encoding, CLIP, VAE, UNet, KSampler, ControlNet, LoRA merging,
-  SDXL refinement, upscaling, and face restoration stages connected by typed noodles.
-components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]
+description: |
+  A visual node graph representing a Stable Diffusion / ComfyUI-style image generation pipeline. Includes prompt encoding, CLIP, VAE, UNet, KSampler, ControlNet, LoRA merging, SDXL refinement, upscaling, and face restoration stages connected by typed noodles.
+components:
+  - aui-container
+  - aui-text
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
+examples:
+  - description: ComfyUI-style generative AI pipeline with encoders, samplers, and post-processing nodes.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 39rem; min-width: 89rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Prompt Encoder → CLIP Text Encoder -->
+          <aui-graph-noodle from="ai-prompt:right" to="ai-clip:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Negative Prompt → CLIP Text Encoder -->
+          <aui-graph-noodle from="ai-neg-prompt:right" to="ai-clip:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Reference Image → VAE Encoder -->
+          <aui-graph-noodle from="ai-ref-image:right" to="ai-vae-enc:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Reference Image → IP-Adapter -->
+          <aui-graph-noodle from="ai-ref-image:right" to="ai-ipadapter:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Style Transfer LoRA → LoRA Stack Merge -->
+          <aui-graph-noodle from="ai-style:right" to="ai-lora-stack:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- CLIP Text Encoder → KSampler Scheduler -->
+          <aui-graph-noodle from="ai-clip:right" to="ai-scheduler:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- CLIP Text Encoder → UNet Backbone -->
+          <aui-graph-noodle from="ai-clip:right" to="ai-unet:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- VAE Encoder → ControlNet (Canny) -->
+          <aui-graph-noodle from="ai-vae-enc:right" to="ai-controlnet:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- IP-Adapter → UNet Backbone -->
+          <aui-graph-noodle from="ai-ipadapter:right" to="ai-unet:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- LoRA Stack Merge → UNet Backbone -->
+          <aui-graph-noodle from="ai-lora-stack:top" to="ai-unet:bottom" color="accent" weight="2"></aui-graph-noodle>
+          <!-- KSampler Scheduler → KSampler -->
+          <aui-graph-noodle from="ai-scheduler:right" to="ai-sampler:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- UNet Backbone → KSampler -->
+          <aui-graph-noodle from="ai-unet:right" to="ai-sampler:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- ControlNet (Canny) → KSampler -->
+          <aui-graph-noodle from="ai-controlnet:right" to="ai-sampler:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- KSampler → SDXL Refiner -->
+          <aui-graph-noodle from="ai-sampler:bottom" to="ai-refiner:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- KSampler → VAE Decoder -->
+          <aui-graph-noodle from="ai-sampler:right" to="ai-vae-dec:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- SDXL Refiner → VAE Decoder -->
+          <aui-graph-noodle from="ai-refiner:right" to="ai-vae-dec:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- VAE Decoder → Upscale -->
+          <aui-graph-noodle from="ai-vae-dec:bottom" to="ai-upscale:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- VAE Decoder → Save Image -->
+          <aui-graph-noodle from="ai-vae-dec:right" to="ai-output:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Upscale → Face Restore -->
+          <aui-graph-noodle from="ai-upscale:bottom" to="ai-face:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Upscale → Save Image -->
+          <aui-graph-noodle from="ai-upscale:right" to="ai-output:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Face Restore → Preview Node -->
+          <aui-graph-noodle from="ai-face:right" to="ai-preview:left" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Prompt Encoder -->
+          <aui-graph-node x="24" y="46" node-id="ai-prompt">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Prompt Encoder</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>
+          <!-- Negative Prompt -->
+          <aui-graph-node x="24" y="186" node-id="ai-neg-prompt">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Negative Prompt</aui-text>
+              <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>
+          <!-- Reference Image -->
+          <aui-graph-node x="24" y="326" node-id="ai-ref-image">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Reference Image</aui-text>
+              <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>
+          <!-- Style Transfer LoRA -->
+          <aui-graph-node x="24" y="466" node-id="ai-style">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Style Transfer LoRA</aui-text>
+              <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>
+          <!-- CLIP Text Encoder -->
+          <aui-graph-node x="260" y="116" node-id="ai-clip">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">CLIP Text Encoder</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>
+          <!-- VAE Encoder -->
+          <aui-graph-node x="260" y="256" node-id="ai-vae-enc">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">VAE Encoder</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>
+          <!-- IP-Adapter -->
+          <aui-graph-node x="260" y="396" node-id="ai-ipadapter">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">IP-Adapter</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>
+          <!-- KSampler Scheduler -->
+          <aui-graph-node x="500" y="46" node-id="ai-scheduler">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">KSampler Scheduler</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>
+          <!-- UNet Backbone -->
+          <aui-graph-node x="500" y="186" node-id="ai-unet">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">UNet Backbone</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>
+          <!-- ControlNet (Canny) -->
+          <aui-graph-node x="500" y="326" node-id="ai-controlnet">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">ControlNet (Canny)</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>
+          <!-- KSampler -->
+          <aui-graph-node x="740" y="116" node-id="ai-sampler">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">KSampler</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>
+          <!-- SDXL Refiner -->
+          <aui-graph-node x="740" y="256" node-id="ai-refiner">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">SDXL Refiner</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>
+          <!-- VAE Decoder -->
+          <aui-graph-node x="980" y="116" node-id="ai-vae-dec">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">VAE Decoder</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>
+          <!-- Upscale (4x ESRGAN) -->
+          <aui-graph-node x="980" y="256" node-id="ai-upscale">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Upscale (4x ESRGAN)</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>
+          <!-- Face Restore (GFPGAN) -->
+          <aui-graph-node x="980" y="396" node-id="ai-face">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Face Restore (GFPGAN)</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>
+          <!-- Save Image -->
+          <aui-graph-node x="1220" y="186" node-id="ai-output">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Save Image</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>
+          <!-- Preview Node -->
+          <aui-graph-node x="1220" y="396" node-id="ai-preview">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Preview Node</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-container>
+          </aui-graph-node>
+          <!-- LoRA Stack Merge -->
+          <aui-graph-node x="500" y="466" node-id="ai-lora-stack">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">LoRA Stack Merge</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>
+        </aui-graph-layer>
+      </aui-graph-ui>

package/dist/docs/blocks/issue-assign.yaml

@@ -1,26 +1,38 @@
 name: issue-assign
 type: block
 summary: Issue assignment card with user search and selected token chips.
-description: >
-  A compact card for assigning users to an issue. Header shows the task title
-  with an add button. Content area shows selected users as removable aui-chip
-  elements with avatar and name. Use for project management, code review
-  assignment, or task delegation.
-
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-chip, aui-button, aui-icon]
+description: |
+  A compact card for assigning users to an issue. Header shows the task title with an add button. Content area shows selected users as removable aui-chip elements with avatar and name. Use for project management, code review assignment, or task delegation.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-chip
+  - aui-dropdown-menu
+  - aui-option
 kind: card
-
 examples:
-  - html: |
+  - description: Issue assignment card with user search and selected token chips.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
-          <span slot="leading">
-            <aui-stack gap="1">
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-stack gap="1" spacer>
               <aui-heading size="lg">Assign Issue</aui-heading>
               <aui-text muted size="sm">Select users to assign to this issue.</aui-text>
             </aui-stack>
-          </span>
-          <span slot="trailing"><aui-button ghost size="sm"><aui-icon name="plus"></aui-icon></aui-button></span>
+            <aui-dropdown-menu label="Add assignee" ghost hide-label size="sm" icon-leading="plus">
+              <aui-option value="sarah">Sarah Chen</aui-option>
+              <aui-option value="marcus">Marcus Rivera</aui-option>
+              <aui-option value="priya">Priya Santos</aui-option>
+              <aui-option value="james">James Wilson</aui-option>
+            </aui-dropdown-menu>
+          </aui-stack>
         </aui-header>
         <aui-content>
           <aui-inset>
@@ -31,4 +43,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Issue assignment with selected user token and add action.

package/dist/docs/blocks/keyboard-shortcuts.yaml

@@ -1,16 +1,22 @@
 name: keyboard-shortcuts
 type: block
 summary: Panel listing keyboard shortcuts with command names and key combinations.
-description: >
-  A bordered card listing action names paired with their keyboard shortcuts
-  using aui-kbd elements. Separated by thin dividers. Use for help panels,
-  settings overlays, or onboarding checklists.
-
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-divider, aui-kbd]
+description: |
+  A bordered card listing action names paired with their keyboard shortcuts using aui-kbd elements. Separated by thin dividers. Use for help panels, settings overlays, or onboarding checklists.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-divider
+  - aui-kbd
 kind: card
-
 examples:
-  - html: |
+  - description: Panel listing keyboard shortcuts with command names and key combinations.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
           <span slot="content"><aui-heading size="lg">Shortcuts</aui-heading></span>
@@ -46,4 +52,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Keyboard shortcuts reference panel.

package/dist/docs/blocks/list-kanban-board.yaml

@@ -0,0 +1,158 @@
+name: list-kanban-board
+type: block
+summary: Roadmap kanban board with segmented control view toggle, vote counts, descriptions, and avatar-groups.
+description: |
+  A product roadmap kanban board with header containing title heading with spacer, a Board/List segmented control, and a primary accent "New" button with plus icon. Content is an inset with horizontally scrolling row of columns using aui-stack with min-width="14" and a .aui-kanban-column CSS class for control background, border-radius, and padding. Each column has a header row with a colored dot badge (plain=Planned, accent=In Progress, success=Complete), column heading with spacer, and muted xs item count. Cards are plain divs with .aui-kanban-card class containing a heading, muted xs description text, and a footer row with a category badge (Feature, Enhancement, Refactor, QA, Done), spacer, and either upvote button + vote count, avatar-group assignees, or a completion date. Vote rows use ghost hide-label caret-up buttons with xs muted count text.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-avatar-group
+  - aui-badge
+  - aui-button
+  - aui-segmented-control
+  - aui-segment
+kind: card
+examples:
+  - description: Roadmap kanban board with segmented control view toggle, vote counts, descriptions, and avatar-groups.
+    html: |-
+      <aui-container kind="card" bordered>
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-heading size="lg" spacer>Roadmap</aui-heading>
+            <aui-segmented-control value="board" size="sm">
+              <aui-segment value="board" selected>Board</aui-segment>
+              <aui-segment value="list">List</aui-segment>
+            </aui-segmented-control>
+            <aui-button primary accent size="sm" icon-leading="plus">New</aui-button>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack direction="row" gap="3" style="overflow-x: auto; align-items: start;">
+
+              <!-- Planned column -->
+              <aui-stack gap="3" min-width="14" class="aui-kanban-column">
+                <aui-stack direction="row" gap="2" align-items="center">
+                  <aui-badge dot></aui-badge>
+                  <aui-heading size="sm" spacer>Planned</aui-heading>
+                  <aui-text muted size="xs">4</aui-text>
+                </aui-stack>
+                <aui-stack gap="2">
+                  <div class="aui-kanban-card">
+                    <aui-stack gap="2">
+                      <aui-heading size="sm">Keyboard shortcuts panel</aui-heading>
+                      <aui-text muted size="xs">Global shortcut viewer with search and customization support.</aui-text>
+                      <aui-stack direction="row" gap="1" align-items="center">
+                        <aui-badge>Feature</aui-badge>
+                        <aui-text spacer></aui-text>
+                        <aui-button ghost hide-label label="Upvote" icon-leading="caret-up" size="sm"></aui-button>
+                        <aui-text size="xs" muted>24</aui-text>
+                      </aui-stack>
+                    </aui-stack>
+                  </div>
+                  <div class="aui-kanban-card">
+                    <aui-stack gap="2">
+                      <aui-heading size="sm">Color picker OKLCH rework</aui-heading>
+                      <aui-text muted size="xs">Native OKLCH color model with L/C/H/A sliders.</aui-text>
+                      <aui-stack direction="row" gap="1" align-items="center">
+                        <aui-badge accent>Enhancement</aui-badge>
+                        <aui-text spacer></aui-text>
+                        <aui-button ghost hide-label label="Upvote" icon-leading="caret-up" size="sm"></aui-button>
+                        <aui-text size="xs" muted>18</aui-text>
+                      </aui-stack>
+                    </aui-stack>
+                  </div>
+                  <div class="aui-kanban-card">
+                    <aui-stack gap="2">
+                      <aui-heading size="sm">Notification center rebuild</aui-heading>
+                      <aui-text muted size="xs">Use aui-select popover pattern instead of custom panel.</aui-text>
+                      <aui-stack direction="row" gap="1" align-items="center">
+                        <aui-badge warning>Refactor</aui-badge>
+                        <aui-text spacer></aui-text>
+                        <aui-button ghost hide-label label="Upvote" icon-leading="caret-up" size="sm"></aui-button>
+                        <aui-text size="xs" muted>12</aui-text>
+                      </aui-stack>
+                    </aui-stack>
+                  </div>
+                </aui-stack>
+              </aui-stack>
+
+              <!-- In Progress column -->
+              <aui-stack gap="3" min-width="14" class="aui-kanban-column">
+                <aui-stack direction="row" gap="2" align-items="center">
+                  <aui-badge accent dot></aui-badge>
+                  <aui-heading size="sm" spacer>In Progress</aui-heading>
+                  <aui-text muted size="xs">2</aui-text>
+                </aui-stack>
+                <aui-stack gap="2">
+                  <div class="aui-kanban-card">
+                    <aui-stack gap="2">
+                      <aui-heading size="sm">Token pipeline v2</aui-heading>
+                      <aui-text muted size="xs">Build-time transforms for CSS, Swift, and Android outputs.</aui-text>
+                      <aui-stack direction="row" gap="1" align-items="center">
+                        <aui-badge accent>Enhancement</aui-badge>
+                        <aui-text spacer></aui-text>
+                        <aui-avatar-group>
+                          <aui-avatar size="xs">SC</aui-avatar>
+                          <aui-avatar size="xs">JW</aui-avatar>
+                        </aui-avatar-group>
+                      </aui-stack>
+                    </aui-stack>
+                  </div>
+                  <div class="aui-kanban-card">
+                    <aui-stack gap="2">
+                      <aui-heading size="sm">Dark mode QA</aui-heading>
+                      <aui-text muted size="xs">Verify all components render correctly in dark theme.</aui-text>
+                      <aui-stack direction="row" gap="1" align-items="center">
+                        <aui-badge>QA</aui-badge>
+                        <aui-text spacer></aui-text>
+                        <aui-avatar size="xs">MR</aui-avatar>
+                      </aui-stack>
+                    </aui-stack>
+                  </div>
+                </aui-stack>
+              </aui-stack>
+
+              <!-- Complete column -->
+              <aui-stack gap="3" min-width="14" class="aui-kanban-column">
+                <aui-stack direction="row" gap="2" align-items="center">
+                  <aui-badge success dot></aui-badge>
+                  <aui-heading size="sm" spacer>Complete</aui-heading>
+                  <aui-text muted size="xs">3</aui-text>
+                </aui-stack>
+                <aui-stack gap="2">
+                  <div class="aui-kanban-card">
+                    <aui-stack gap="2">
+                      <aui-heading size="sm">40 blocks ported</aui-heading>
+                      <aui-text muted size="xs">All training source blocks converted to agent-ui patterns.</aui-text>
+                      <aui-stack direction="row" gap="1" align-items="center">
+                        <aui-badge success>Done</aui-badge>
+                        <aui-text spacer></aui-text>
+                        <aui-text size="xs" muted>Mar 21</aui-text>
+                      </aui-stack>
+                    </aui-stack>
+                  </div>
+                  <div class="aui-kanban-card">
+                    <aui-stack gap="2">
+                      <aui-heading size="sm">Component token audit</aui-heading>
+                      <aui-text muted size="xs">8 tokens added, toast/tabs/select cleaned up.</aui-text>
+                      <aui-stack direction="row" gap="1" align-items="center">
+                        <aui-badge success>Done</aui-badge>
+                        <aui-text spacer></aui-text>
+                        <aui-text size="xs" muted>Mar 21</aui-text>
+                      </aui-stack>
+                    </aui-stack>
+                  </div>
+                </aui-stack>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>

package/dist/docs/blocks/login-branded.yaml

@@ -1,46 +1,73 @@
 name: login-branded
 type: block
 summary: Two-column login with branded sidebar panel and image placeholder.
-description: >
-  A split-screen login that dedicates the left column to brand identity
-  and the authentication form, while the right column acts as an image
-  or illustration placeholder. The left panel carries the brand logo at
-  the top and vertically centers the form fields, giving the page a
-  polished, marketing-ready feel. Suited for SaaS products that want
-  every touchpoint to reinforce brand recognition.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-field, aui-input, aui-button, aui-divider]
+description: |
+  A split-screen login that dedicates the left column to brand identity and the authentication form, while the right column acts as an image or illustration placeholder. The left panel carries the brand logo at the top and vertically centers the form fields, giving the page a polished, marketing-ready feel. Suited for SaaS products that want every touchpoint to reinforce brand recognition.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-field
+  - aui-input
+  - aui-button
+  - aui-divider
 kind: panel
-
 examples:
-  - html: |
+  - description: Two-column login with branded sidebar panel and image placeholder.
+    html: |-
       <aui-container padding="4" gap="0" transparent>
-        <aui-stack direction="row" gap="8" style="min-width: 44rem; min-height: 32rem">
+        <aui-stack
+          direction="row"
+          gap="8"
+          min-width="44" style="min-height: 32rem"
+        >
           <!-- Left: brand + form -->
           <aui-container kind="panel" elevation="2" gap="0" spacer>
             <aui-header>
               <span slot="leading">
                 <aui-stack direction="row" gap="2" align-items="center">
-                  <img src="/icon.svg" alt="Acme Inc" style="width: 1.25rem; height: 1.25rem; border-radius: 0.25rem;">
+                  <img
+                    src="/icon.svg"
+                    alt="Acme Inc"
+                    style="width: 1.25rem; height: 1.25rem; border-radius: var(--aui-radius)"
+                  />
                   <aui-heading size="md" weight="medium">Acme Inc.</aui-heading>
                 </aui-stack>
               </span>
             </aui-header>
             <aui-content>
               <aui-inset>
-                <aui-stack gap="6">
+                <aui-stack>
                   <aui-stack gap="1">
                     <aui-heading size="xl">Welcome back</aui-heading>
-                    <aui-text muted size="sm">Enter your credentials to access your account</aui-text>
+                    <aui-text muted size="sm"
+                      >Enter your credentials to access your account</aui-text
+                    >
                   </aui-stack>
 
                   <aui-field label="Email" width="full">
-                    <aui-input type="email" placeholder="m@example.com" width="full"></aui-input>
+                    <aui-input
+                      type="email"
+                      placeholder="m@example.com"
+                      width="full"
+                    ></aui-input>
                   </aui-field>
 
                   <aui-field label="Password" width="full">
-                    <aui-input type="password" placeholder="Enter your password" width="full"></aui-input>
-                    <aui-text muted size="xs" slot="trailing" text="right"><a href="#">Forgot your password?</a></aui-text>
+                    <aui-input
+                      type="password"
+                      placeholder="Enter your password"
+                      width="full"
+                    ></aui-input>
+                    <aui-text muted size="xs" slot="trailing" text="right"
+                      ><a href="#">Forgot your password?</a></aui-text
+                    >
                   </aui-field>
 
                   <aui-button primary accent width="full">Login</aui-button>
@@ -63,19 +90,31 @@ examples:
               </aui-inset>
             </aui-content>
             <aui-footer>
-              <span slot="content"><aui-text muted size="sm">Don't have an account? <a href="#">Sign up</a></aui-text></span>
+              <span slot="content"
+                ><aui-text muted size="sm"
+                  >Don't have an account? <a href="#">Sign up</a></aui-text
+                ></span
+              >
             </aui-footer>
           </aui-container>
 
           <!-- Right: image placeholder -->
-          <aui-container elevation="3" spacer justify-content="center" transparent>
+          <aui-container
+            elevation="3"
+            spacer
+            justify-content="center"
+            transparent
+          >
             <aui-inset>
-              <aui-stack gap="1" align-items="center" text="center">
-                <aui-icon name="image" size="xl" muted></aui-icon>
+              <aui-stack
+                gap="1"
+                align-items="center"
+                text="center"
+              >
+                <aui-icon name="image" size="3xl" muted></aui-icon>
                 <aui-text muted size="sm">Brand illustration</aui-text>
               </aui-stack>
             </aui-inset>
           </aui-container>
         </aui-stack>
       </aui-container>
-    description: Branded two-column login with form on the left panel and image placeholder on the right.