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

package/dist/docs/blocks/data-table.yaml

@@ -0,0 +1,106 @@
+name: data-table
+type: block
+summary: Customer data table with search, status badges, and pagination footer.
+description: |
+  A panel with a searchable data table. Header has a title+count stack and a compact type="search" input (auto icon + clear) in a vertically centered row. The table uses aui-table with cols="2fr 1fr auto" for grid track sizing (Company with name+email stack, Plan, Status badge). Footer shows row count and pagination controls. Status badges use success/warning/danger intents for Active/Trial/Churned states.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-input
+  - aui-table
+  - aui-table-head
+  - aui-table-body
+  - aui-table-row
+  - aui-table-header
+  - aui-table-cell
+  - aui-badge
+  - aui-pagination
+kind: panel
+examples:
+  - description: Customer data table with search, status badges, and pagination footer.
+    html: |-
+      <aui-container kind="panel" bordered max-width="xl">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-stack gap="1" spacer>
+              <aui-heading size="lg">Customers</aui-heading>
+              <aui-text muted size="sm">248 total</aui-text>
+            </aui-stack>
+            <aui-input type="search" placeholder="Search…" size="sm"></aui-input>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-table cols="2fr 1fr auto">
+            <aui-table-head>
+              <aui-table-row>
+                <aui-table-header>Company</aui-table-header>
+                <aui-table-header>Plan</aui-table-header>
+                <aui-table-header>Status</aui-table-header>
+              </aui-table-row>
+            </aui-table-head>
+            <aui-table-body>
+              <aui-table-row>
+                <aui-table-cell>
+                  <aui-stack gap="0">
+                    <aui-heading size="sm">Acme Corp</aui-heading>
+                    <aui-text muted size="xs">contact@acme.com</aui-text>
+                  </aui-stack>
+                </aui-table-cell>
+                <aui-table-cell><aui-text size="sm">Enterprise</aui-text></aui-table-cell>
+                <aui-table-cell><aui-badge success>Active</aui-badge></aui-table-cell>
+              </aui-table-row>
+              <aui-table-row>
+                <aui-table-cell>
+                  <aui-stack gap="0">
+                    <aui-heading size="sm">Globex Inc</aui-heading>
+                    <aui-text muted size="xs">admin@globex.io</aui-text>
+                  </aui-stack>
+                </aui-table-cell>
+                <aui-table-cell><aui-text size="sm">Pro</aui-text></aui-table-cell>
+                <aui-table-cell><aui-badge success>Active</aui-badge></aui-table-cell>
+              </aui-table-row>
+              <aui-table-row>
+                <aui-table-cell>
+                  <aui-stack gap="0">
+                    <aui-heading size="sm">Initech</aui-heading>
+                    <aui-text muted size="xs">hello@initech.com</aui-text>
+                  </aui-stack>
+                </aui-table-cell>
+                <aui-table-cell><aui-text size="sm">Starter</aui-text></aui-table-cell>
+                <aui-table-cell><aui-badge warning>Trial</aui-badge></aui-table-cell>
+              </aui-table-row>
+              <aui-table-row>
+                <aui-table-cell>
+                  <aui-stack gap="0">
+                    <aui-heading size="sm">Umbrella Ltd</aui-heading>
+                    <aui-text muted size="xs">ops@umbrella.co</aui-text>
+                  </aui-stack>
+                </aui-table-cell>
+                <aui-table-cell><aui-text size="sm">Enterprise</aui-text></aui-table-cell>
+                <aui-table-cell><aui-badge success>Active</aui-badge></aui-table-cell>
+              </aui-table-row>
+              <aui-table-row>
+                <aui-table-cell>
+                  <aui-stack gap="0">
+                    <aui-heading size="sm">Stark Industries</aui-heading>
+                    <aui-text muted size="xs">tony@stark.dev</aui-text>
+                  </aui-stack>
+                </aui-table-cell>
+                <aui-table-cell><aui-text size="sm">Pro</aui-text></aui-table-cell>
+                <aui-table-cell><aui-badge danger>Churned</aui-badge></aui-table-cell>
+              </aui-table-row>
+            </aui-table-body>
+          </aui-table>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-text muted size="xs" spacer>Showing 1–5 of 248</aui-text>
+            <aui-pagination total="50" current="1" size="sm"></aui-pagination>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/data-timeline.yaml

@@ -0,0 +1,103 @@
+name: data-timeline
+type: block
+summary: Chronological event timeline with date groups, connector lines, and semantic icons.
+description: |
+  A vertical timeline panel showing events grouped by date. Header has a title and event count badge. Events use aui-stepper with aui-step children for connector lines between entries, with solid-color avatars per action type (deploy=success, comment=warning, update=accent, create=success, delete=danger) using solid for solid avatar backgrounds. Each event row has an aui-heading size="sm" with strong actor/entity names, optional monospace detail via inline font-family, and a timestamp. Date groups use aui-heading group for uppercase section labels and are separated by dividers.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stepper
+  - aui-step
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-divider
+kind: panel
+examples:
+  - description: Chronological event timeline with date groups, connector lines, and semantic icons.
+    html: |-
+      <aui-container kind="panel" bordered max-width="lg">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-heading size="lg" spacer>History</aui-heading>
+            <aui-badge>12 events</aui-badge>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+
+              <!-- Today -->
+              <aui-stack gap="3">
+                <aui-heading group>Today</aui-heading>
+
+                <aui-stepper>
+                  <aui-step state="done">
+                    <aui-avatar size="xs" success shrink="0" solid><aui-icon name="arrow-up" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Sarah Chen</strong> deployed <strong>v2.4.1</strong></aui-heading>
+                      <aui-text size="xs" muted style="font-family: var(--aui-font-mono);">commit a1b2c3d · 3 files changed</aui-text>
+                      <aui-text size="xs" muted>10:42 AM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+
+                  <aui-step state="done">
+                    <aui-avatar size="xs" warning shrink="0" solid><aui-icon name="chat-dots" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Alex Rivera</strong> commented on <strong>Auth flow redesign</strong></aui-heading>
+                      <aui-text size="xs" muted>9:15 AM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+
+                  <aui-step state="done">
+                    <aui-avatar size="xs" accent shrink="0" solid><aui-icon name="pencil" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Maria Santos</strong> updated <strong>API rate limits</strong></aui-heading>
+                      <aui-text size="xs" muted>8:30 AM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+                </aui-stepper>
+              </aui-stack>
+
+              <aui-divider></aui-divider>
+
+              <!-- Yesterday -->
+              <aui-stack gap="3">
+                <aui-heading group>Yesterday</aui-heading>
+
+                <aui-stepper>
+                  <aui-step state="done">
+                    <aui-avatar size="xs" success shrink="0" solid><aui-icon name="plus" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>James Wilson</strong> created <strong>Mobile app project</strong></aui-heading>
+                      <aui-text size="xs" muted>4:32 PM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+
+                  <aui-step state="done">
+                    <aui-avatar size="xs" danger shrink="0" solid><aui-icon name="trash" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Sarah Chen</strong> deleted <strong>Legacy endpoints</strong></aui-heading>
+                      <aui-text size="xs" muted>2:15 PM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+
+                  <aui-step>
+                    <aui-avatar size="xs" accent shrink="0" solid><aui-icon name="gear" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Liam Walker</strong> changed status to <aui-badge success>Resolved</aui-badge></aui-heading>
+                      <aui-text size="xs" muted>11:08 AM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+                </aui-stepper>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>

package/dist/docs/blocks/date-picker.yaml

@@ -1,17 +1,19 @@
 name: date-picker
 type: block
 summary: Calendar date picker inside a bordered card.
-description: >
-  A date selection card wrapping the aui-calendar component. Shows
-  the calendar with a card surface and border for visual containment.
-  Use as a standalone picker or compose inside dialogs, popovers,
-  or form layouts. Supports single selection and range mode.
-
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-calendar]
+description: |
+  A date selection card wrapping the aui-calendar component. Shows the calendar with a card surface and border for visual containment. Use as a standalone picker or compose inside dialogs, popovers, or form layouts. Supports single selection and range mode.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-calendar
 kind: card
-
 examples:
-  - html: |
+  - description: Calendar date picker inside a bordered card.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
           <span slot="leading">
@@ -27,4 +29,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Calendar picker inside a card with header context.

package/dist/docs/blocks/ddx-workflow.yaml

@@ -1,9 +1,205 @@
 name: ddx-workflow
 type: block
 summary: Clinical differential diagnosis workflow with Bayesian reasoning and feedback loops.
-description: >
-  A visual node graph representing a clinical DDx decision process. Starts with
-  patient intake, branches into symptom collection and medical history, then flows
-  through hypothesis generation, Bayesian evidence updates, targeted testing, and
-  pruning with feedback loops for continuous monitoring and specialist consultation.
-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 clinical DDx decision process. Starts with patient intake, branches into symptom collection and medical history, then flows through hypothesis generation, Bayesian evidence updates, targeted testing, and pruning with feedback loops for continuous monitoring and specialist consultation.
+components:
+  - aui-container
+  - aui-text
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
+examples:
+  - description: Clinical differential diagnosis workflow with Bayesian reasoning and feedback loops.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 35rem; min-width: 89rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Patient Intake → Symptom Collection -->
+          <aui-graph-noodle from="dx-intake:right" to="dx-symptoms:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Patient Intake → Medical History Review -->
+          <aui-graph-noodle from="dx-intake:right" to="dx-history:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Symptom Collection → Hypothesis Generator -->
+          <aui-graph-noodle from="dx-symptoms:right" to="dx-hypothesis:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Medical History Review → Hypothesis Generator -->
+          <aui-graph-noodle from="dx-history:right" to="dx-hypothesis:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Hypothesis Generator → Bayesian Evidence Update -->
+          <aui-graph-noodle from="dx-hypothesis:right" to="dx-bayesian:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Hypothesis Generator → Diagnostic Gap Analysis -->
+          <aui-graph-noodle from="dx-hypothesis:right" to="dx-gap:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Bayesian Evidence Update → Targeted Testing -->
+          <aui-graph-noodle from="dx-bayesian:right" to="dx-test:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Diagnostic Gap Analysis → Targeted Testing -->
+          <aui-graph-noodle from="dx-gap:right" to="dx-test:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Targeted Testing → Hypothesis Pruning -->
+          <aui-graph-noodle from="dx-test:right" to="dx-prune:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Hypothesis Pruning → Diagnostic Confirmation -->
+          <aui-graph-noodle from="dx-prune:right" to="dx-confirm:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Hypothesis Pruning → Bayesian Evidence Update (feedback loop) -->
+          <aui-graph-noodle from="dx-prune:top" to="dx-bayesian:bottom" color="warning" weight="2"></aui-graph-noodle>
+          <!-- Diagnostic Confirmation → Treatment Pathway -->
+          <aui-graph-noodle from="dx-confirm:bottom" to="dx-treatment:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Treatment Pathway → Continuous Monitoring -->
+          <aui-graph-noodle from="dx-treatment:right" to="dx-monitor:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Continuous Monitoring → Hypothesis Generator (feedback loop) -->
+          <aui-graph-noodle from="dx-monitor:bottom" to="dx-hypothesis:bottom" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Hypothesis Generator → Lab Results Engine -->
+          <aui-graph-noodle from="dx-hypothesis:bottom" to="dx-lab:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Lab Results Engine → Imaging Analysis -->
+          <aui-graph-noodle from="dx-lab:right" to="dx-imaging:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Imaging Analysis → Specialist Consult -->
+          <aui-graph-noodle from="dx-imaging:right" to="dx-specialist:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Specialist Consult → Hypothesis Pruning -->
+          <aui-graph-noodle from="dx-specialist:top" to="dx-prune:bottom" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Treatment Pathway → Pharmacy Reconciliation -->
+          <aui-graph-noodle from="dx-treatment:bottom" to="dx-pharmacy:left" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Patient Intake -->
+          <aui-graph-node x="24" y="186" node-id="dx-intake">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Patient Intake</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>
+          <!-- Symptom Collection -->
+          <aui-graph-node x="224" y="116" node-id="dx-symptoms">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Symptom Collection</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>
+          <!-- Medical History Review -->
+          <aui-graph-node x="224" y="256" node-id="dx-history">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Medical History Review</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>
+          <!-- Hypothesis Generator -->
+          <aui-graph-node x="424" y="186" node-id="dx-hypothesis">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Hypothesis Generator</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>
+          <!-- Bayesian Evidence Update -->
+          <aui-graph-node x="624" y="116" node-id="dx-bayesian">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Bayesian Evidence Update</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>
+          <!-- Diagnostic Gap Analysis -->
+          <aui-graph-node x="624" y="256" node-id="dx-gap">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Diagnostic Gap Analysis</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>
+          <!-- Targeted Testing -->
+          <aui-graph-node x="824" y="116" node-id="dx-test">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Targeted Testing</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>
+          <!-- Hypothesis Pruning -->
+          <aui-graph-node x="824" y="256" node-id="dx-prune">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Hypothesis Pruning</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>
+          <!-- Diagnostic Confirmation -->
+          <aui-graph-node x="1024" y="116" node-id="dx-confirm">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Diagnostic Confirmation</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>
+          <!-- Treatment Pathway -->
+          <aui-graph-node x="1024" y="256" node-id="dx-treatment">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Treatment Pathway</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>
+          <!-- Continuous Monitoring -->
+          <aui-graph-node x="1224" y="186" node-id="dx-monitor">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Continuous Monitoring</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>
+          <!-- Lab Results Engine -->
+          <aui-graph-node x="424" y="396" node-id="dx-lab">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Lab Results Engine</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>
+          <!-- Imaging Analysis -->
+          <aui-graph-node x="624" y="396" node-id="dx-imaging">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Imaging Analysis</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>
+          <!-- Specialist Consult -->
+          <aui-graph-node x="824" y="396" node-id="dx-specialist">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Specialist Consult</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>
+          <!-- Pharmacy Reconciliation -->
+          <aui-graph-node x="1224" y="396" node-id="dx-pharmacy">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Pharmacy Reconciliation</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>
+        </aui-graph-layer>
+      </aui-graph-ui>

package/dist/docs/blocks/empty-state.yaml

@@ -1,21 +1,18 @@
 name: empty-state
 type: block
 summary: Centered placeholder for empty content areas with a call-to-action.
-description: >
-  A card shown when a section has no data to display. Centered layout
-  with a large muted icon, heading, descriptive text, and a primary
-  action button to guide the user toward their first step. Use this
-  to replace blank space in lists, tables, or dashboards so users
-  always have a clear path forward.
-
-components: [aui-container, aui-empty-state, aui-button]
+description: |
+  A card shown when a section has no data to display. Centered layout with a large muted icon, heading, descriptive text, and a primary action button to guide the user toward their first step. Use this to replace blank space in lists, tables, or dashboards so users always have a clear path forward.
+components:
+  - aui-container
+  - aui-empty-state
+  - aui-button
 kind: card
-
 examples:
-  - html: |
+  - description: Centered placeholder for empty content areas with a call-to-action.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-empty-state icon="star" heading="No projects yet" description="Create your first project to get started. Projects help you organize your work and collaborate with your team.">
           <aui-button accent>Create project</aui-button>
         </aui-empty-state>
       </aui-container>
-    description: Empty state prompting the user to create their first project.

package/dist/docs/blocks/env-variables.yaml

@@ -1,16 +1,24 @@
 name: env-variables
 type: block
 summary: Environment variables panel with masked secrets and deploy action.
-description: >
-  A panel listing environment variable key-value pairs. Keys use monospace
-  font. Secret values are masked with dots; public values show their content.
-  Footer uses aui-button-group for edit and deploy actions.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-input, aui-button, aui-button-group]
+description: |
+  A panel listing environment variable key-value pairs. Keys use monospace font. Secret values are masked with dots; public values show their content. Footer uses aui-button-group for edit and deploy actions.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-input
+  - aui-button
+  - aui-button-group
 kind: card
-
 examples:
-  - html: |
+  - description: Environment variables panel with masked secrets and deploy action.
+    html: |-
       <aui-container kind="card" bordered max-width="md">
         <aui-header>
           <span slot="leading">
@@ -23,24 +31,25 @@ examples:
         <aui-content>
           <aui-inset>
             <aui-stack gap="2">
-              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
-                <aui-text size="sm" weight="medium" spacer style="font-family: var(--aui-font-family-mono);">DATABASE_URL</aui-text>
-                <aui-text muted size="sm" style="font-family: var(--aui-font-family-mono); letter-spacing: 0.1em;">········</aui-text>
+              <aui-stack direction="row" gap="2" align-items="center" class="aui-env-variables-row">
+                <aui-text size="sm" weight="medium" font="mono" style="white-space: nowrap;">DATABASE_URL</aui-text>
+                <aui-text muted size="sm" spacer font="mono" style="letter-spacing: 0.1em; text-align: end;">········</aui-text>
               </aui-stack>
-              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
-                <aui-text size="sm" weight="medium" spacer style="font-family: var(--aui-font-family-mono);">NEXT_PUBLIC_API</aui-text>
-                <aui-text muted size="sm" style="font-family: var(--aui-font-family-mono);">https://api.example.com</aui-text>
+              <aui-stack direction="row" gap="2" align-items="center" class="aui-env-variables-row">
+                <aui-text size="sm" weight="medium" font="mono" style="white-space: nowrap;">NEXT_PUBLIC_API</aui-text>
+                <aui-text muted size="sm" spacer font="mono" truncate style="text-align: end;">https://api.example.com</aui-text>
               </aui-stack>
-              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
-                <aui-text size="sm" weight="medium" spacer style="font-family: var(--aui-font-family-mono);">STRIPE_SECRET</aui-text>
-                <aui-text muted size="sm" style="font-family: var(--aui-font-family-mono); letter-spacing: 0.1em;">········</aui-text>
+              <aui-stack direction="row" gap="2" align-items="center" class="aui-env-variables-row">
+                <aui-text size="sm" weight="medium" font="mono" style="white-space: nowrap;">STRIPE_SECRET</aui-text>
+                <aui-text muted size="sm" spacer font="mono" style="letter-spacing: 0.1em; text-align: end;">········</aui-text>
               </aui-stack>
             </aui-stack>
           </aui-inset>
         </aui-content>
         <aui-footer>
-          <span slot="leading"><aui-button outline size="sm">Edit</aui-button></span>
-          <span slot="trailing"><aui-button primary accent size="sm">Deploy</aui-button></span>
+          <aui-button-group>
+            <aui-button primary grow="1" basis="0">Deploy</aui-button>
+            <aui-button scrim grow="1" basis="0">Edit</aui-button>
+          </aui-button-group>
         </aui-footer>
       </aui-container>
-    description: Environment variables panel with masked secrets and deploy action.

package/dist/docs/blocks/feature-upgrade.yaml

@@ -1,17 +1,25 @@
 name: feature-upgrade
 type: block
 summary: Feature upgrade card with checklist, note, and call-to-action.
-description: >
-  A persuasion card for upsells and feature announcements. Heading and
-  description at top, a checklist of feature benefits with check icons,
-  an inset note box with supporting detail, and a footer with cancel and
-  primary enable actions in an aui-button-group.
-
-components: [aui-container, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-badge, aui-button, aui-button-group]
+description: |
+  A persuasion card for upsells and feature announcements. Heading and description at top, a checklist of feature benefits with check icons, an inset note box with supporting detail, and a footer with cancel and primary enable actions in an aui-button-group.
+components:
+  - aui-container
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-button
+  - aui-button-group
 kind: card
-
 examples:
-  - html: |
+  - description: Feature upgrade card with checklist, note, and call-to-action.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-content>
           <aui-inset>
@@ -22,16 +30,16 @@ examples:
               </aui-stack>
               <aui-stack gap="3">
                 <aui-stack direction="row" gap="2">
-                  <aui-avatar square size="sm"><aui-icon name="check"></aui-icon></aui-avatar>
-                  <aui-text size="sm"><strong>Code reviews</strong> with full codebase context to catch <strong>hard-to-find</strong> bugs.</aui-text>
+                  <aui-avatar square size="sm" success solid><aui-icon name="check"></aui-icon></aui-avatar>
+                  <aui-heading size="sm"><strong>Code reviews</strong> with full codebase context to catch <strong>hard-to-find</strong> bugs.</aui-heading>
                 </aui-stack>
                 <aui-stack direction="row" gap="2">
-                  <aui-avatar square size="sm"><aui-icon name="check"></aui-icon></aui-avatar>
-                  <aui-text size="sm"><strong>Code suggestions</strong> validated in sandboxes before you merge.</aui-text>
+                  <aui-avatar square size="sm" success solid><aui-icon name="check"></aui-icon></aui-avatar>
+                  <aui-heading size="sm"><strong>Code suggestions</strong> validated in sandboxes before you merge.</aui-heading>
                 </aui-stack>
                 <aui-stack direction="row" gap="2">
-                  <aui-avatar square size="sm"><aui-icon name="check"></aui-icon></aui-avatar>
-                  <aui-text size="sm"><strong>Root-cause analysis</strong> for production issues with deployment context. <aui-badge accent>Requires Plus</aui-badge></aui-text>
+                  <aui-avatar square size="sm" success solid><aui-icon name="check"></aui-icon></aui-avatar>
+                  <aui-heading size="sm"><strong>Root-cause analysis</strong> for production issues with deployment context. <aui-badge accent>Requires Plus</aui-badge></aui-heading>
                 </aui-stack>
               </aui-stack>
               <aui-container kind="widget" elevation="3">
@@ -44,9 +52,8 @@ examples:
         </aui-content>
         <aui-footer>
           <aui-button-group>
-            <aui-button scrim grow="1">Cancel</aui-button>
-            <aui-button primary grow="1">Enable with $100 credits</aui-button>
+            <aui-button primary grow="1" basis="0">Enable with $100 credits</aui-button>
+            <aui-button scrim grow="1" basis="0">Cancel</aui-button>
           </aui-button-group>
         </aui-footer>
       </aui-container>
-    description: Feature upgrade card with benefits checklist and trial credit offer.