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

package/dist/docs/blocks/flow-editor.yaml

@@ -1,17 +1,22 @@
 name: flow-editor
 type: block
 summary: Data-driven pipeline diagram rendered from a JSON dataset.
-description: >
-  A visual flow editor that renders pipeline nodes and connections from
-  a standard JSON structure. Each node has an id, label, description,
-  intent, and x/y position. Connections define from/to relationships
-  between nodes. The same JSON schema powers the static CSS preview
-  shown here and the interactive aui-noodles version with draggable
-  bezier connections. Adapters can transform external formats (Airflow
-  DAGs, dbt lineage, CI/CD pipelines) into this standard structure.
-
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-editor, aui-editor-layer, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]
-
+description: |
+  A visual flow editor that renders pipeline nodes and connections from a standard JSON structure. Each node has an id, label, description, intent, and x/y position. Connections define from/to relationships between nodes. The same JSON schema powers the static CSS preview shown here and the interactive aui-noodles version with draggable bezier connections. Adapters can transform external formats (Airflow DAGs, dbt lineage, CI/CD pipelines) into this standard structure.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
+  - aui-editor
+  - aui-editor-layer
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
 schema:
   nodes:
     - id: string
@@ -25,7 +30,6 @@ schema:
   connections:
     - from: string (node id)
       to: string (node id)
-
 dataset: |
   {
     "nodes": [
@@ -41,18 +45,23 @@ dataset: |
       { "from": "validate",  "to": "warehouse" }
     ]
   }
-
 examples:
-  - html: |
+  - description: Data-driven pipeline diagram rendered from a JSON dataset.
+    html: |-
       <aui-stack gap="2">
-        <aui-graph-ui style="width: 100%; height: 22rem; min-width: 44rem;" zoom="1">
+        <aui-graph-ui connectable style="width: 100%; height: 22rem" min-width="44" zoom="1">
           <aui-graph-layer name="wires" type="svg">
+            <!-- Data Ingest → Transform -->
             <aui-graph-noodle from="data-ingest:out" to="transform:in" color="accent" weight="2"></aui-graph-noodle>
+            <!-- Data Ingest → Validate -->
             <aui-graph-noodle from="data-ingest:out" to="validate:in" color="accent" weight="2"></aui-graph-noodle>
+            <!-- Transform → Data Warehouse -->
             <aui-graph-noodle from="transform:out" to="data-warehouse:in" color="success" weight="2"></aui-graph-noodle>
+            <!-- Validate → Data Warehouse -->
             <aui-graph-noodle from="validate:out" to="data-warehouse:in" color="warning" weight="2"></aui-graph-noodle>
           </aui-graph-layer>
           <aui-graph-layer name="content">
+            <!-- Source node -->
             <aui-graph-node x="30" y="45" node-id="data-ingest">
               <aui-container kind="widget" bordered accent>
                 <aui-inset>
@@ -65,6 +74,7 @@ examples:
                 <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
               </aui-container>
             </aui-graph-node>
+            <!-- Transform node -->
             <aui-graph-node x="270" y="10" node-id="transform">
               <aui-container kind="widget" bordered info>
                 <aui-inset>
@@ -78,6 +88,7 @@ examples:
                 <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
               </aui-container>
             </aui-graph-node>
+            <!-- Validate node -->
             <aui-graph-node x="270" y="140" node-id="validate">
               <aui-container kind="widget" bordered warning>
                 <aui-inset>
@@ -91,6 +102,7 @@ examples:
                 <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
               </aui-container>
             </aui-graph-node>
+            <!-- Sink node -->
             <aui-graph-node x="510" y="75" node-id="data-warehouse">
               <aui-container kind="widget" bordered success>
                 <aui-inset>
@@ -108,6 +120,3 @@ examples:
 
         <aui-text muted size="xs" align-items="center">Rendered from a standard JSON dataset. The same schema powers the interactive aui-graph version. Adapters can transform Airflow DAGs, dbt lineage, or CI/CD pipelines into this format.</aui-text>
       </aui-stack>
-    description: >
-      Data pipeline with 4 nodes (Source → Process → QA → Sink) using
-      aui-graph components with draggable nodes and bezier noodle connections.

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-button
+  - aui-icon
 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/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.

package/dist/docs/blocks/login-email-only.yaml

@@ -1,26 +1,28 @@
 name: login-email-only
 type: block
 summary: Minimal centered login with email field and optional social buttons.
-description: >
-  A card-less, centered authentication layout built for magic-link or
-  passwordless flows. A brand icon and heading anchor the top, followed
-  by a single email field and login button. Social alternatives sit
-  below a subtle "Or" separator. Best for apps that prioritize
-  passwordless auth while keeping social login as a secondary path.
-
-components: [aui-stack, aui-heading, aui-text, aui-icon, aui-field, aui-input, aui-button]
+description: |
+  A card-less, centered authentication layout built for magic-link or passwordless flows. A brand icon and heading anchor the top, followed by a single email field and login button. Social alternatives sit below a subtle "Or" separator. Best for apps that prioritize passwordless auth while keeping social login as a secondary path.
+components:
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-field
+  - aui-input
+  - aui-button
 kind: panel
-
 examples:
-  - html: |
+  - description: Minimal centered login with email field and optional social buttons.
+    html: |-
       <aui-stack gap="4" align-items="center" text="center" max-width="md">
-        <img src="/icon.svg" alt="Acme Inc" style="width: 2.5rem; height: 2.5rem; border-radius: 0.375rem;">
+        <img src="/icon.svg" alt="Acme Inc" style="width: 2.5rem; height: 2.5rem; border-radius: var(--aui-radius);">
         <aui-stack gap="1" align-items="center">
           <aui-heading size="xl">Welcome to Acme Inc.</aui-heading>
           <aui-text muted size="sm">Don't have an account? <a href="#">Sign up</a></aui-text>
         </aui-stack>
 
-        <aui-stack gap="6" width="full" text="left">
+        <aui-stack width="full" text="left">
           <aui-field label="Email" width="full" hide-label>
             <aui-input type="email" placeholder="m@example.com" width="full"></aui-input>
           </aui-field>
@@ -36,4 +38,3 @@ examples:
 
         <aui-text muted size="xs">By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</aui-text>
       </aui-stack>
-    description: Minimal email-only login with social alternatives and terms notice.