@zvk/composite 0.1.1 → 0.1.2

package/dist/styles.css

@@ -1,13 +1,160 @@
 /* src/styles.css */
 @layer zvk-composite-components;
 
+/* src/activity/activity-feed.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-activity-feed) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-activity-feed__header),
+  :where(.zvk-composite-activity-feed__entry .zvk-composite-activity-feed__header) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-activity-feed__title),
+  :where(.zvk-composite-activity-feed__group-label),
+  :where(.zvk-composite-activity-feed__entry .zvk-composite-activity-feed__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-activity-feed__title) {
+    font-size: var(--zvk-ui-font-size-lg);
+  }
+
+  :where(.zvk-composite-activity-feed__group-label),
+  :where(.zvk-composite-activity-feed__entry .zvk-composite-activity-feed__title) {
+    font-size: var(--zvk-ui-font-size-sm);
+  }
+
+  :where(.zvk-composite-activity-feed__description),
+  :where(.zvk-composite-activity-feed__body),
+  :where(.zvk-composite-activity-feed__meta),
+  :where(.zvk-composite-activity-feed__footer),
+  :where(.zvk-composite-activity-feed__state) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-activity-feed__groups),
+  :where(.zvk-composite-activity-feed__group),
+  :where(.zvk-composite-activity-feed__content),
+  :where(.zvk-composite-activity-feed__copy) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-activity-feed__list) {
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(.zvk-composite-activity-feed__item) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-activity-feed__entry) {
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    display: grid;
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-activity-feed__shell) {
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: auto minmax(0, 1fr);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-activity-feed__entry[data-tone="info"]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-info) 34%, var(--zvk-ui-color-border));
+  }
+
+  :where(.zvk-composite-activity-feed__entry[data-tone="success"]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-success) 34%, var(--zvk-ui-color-border));
+  }
+
+  :where(.zvk-composite-activity-feed__entry[data-tone="warning"]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-warning) 36%, var(--zvk-ui-color-border));
+  }
+
+  :where(.zvk-composite-activity-feed__entry[data-tone="danger"]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-destructive) 34%, var(--zvk-ui-color-border));
+  }
+
+  :where(.zvk-composite-activity-feed__icon) {
+    align-items: center;
+    background: var(--zvk-ui-color-muted);
+    border-radius: var(--zvk-ui-radius-full);
+    color: var(--zvk-ui-color-muted-foreground);
+    display: inline-flex;
+    block-size: 2rem;
+    inline-size: 2rem;
+    justify-content: center;
+  }
+
+  :where(.zvk-composite-activity-feed__actions) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-activity-feed__footer) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-activity-feed__state) {
+    border: 1px dashed var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    padding: var(--zvk-ui-space-4);
+    text-align: center;
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-composite-activity-feed__header),
+    :where(.zvk-composite-activity-feed__entry .zvk-composite-activity-feed__header),
+    :where(.zvk-composite-activity-feed__shell) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-activity-feed__icon) {
+      justify-self: start;
+    }
+  }
+}
+
+
 /* src/layout/page-scaffold.css */
 @layer zvk-composite-components {
   :where(.zvk-composite-page-scaffold) {
     --zvk-composite-page-scaffold-max-width: 80rem;
     color: var(--zvk-ui-color-foreground);
     display: grid;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     gap: var(--zvk-ui-space-5);
     inline-size: min(100%, var(--zvk-composite-page-scaffold-max-width));
     margin-inline: auto;
@@ -104,6 +251,26 @@
 }
 
 
+/* src/layout/feature-shell.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-feature-shell) {
+    container-type: inline-size;
+    min-inline-size: 0;
+    width: 100%;
+  }
+
+  @container (max-width: 36rem) {
+    :where(.zvk-composite-feature-shell .zvk-composite-workspace-header) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    :where(.zvk-composite-feature-shell .zvk-composite-workspace-header__controls) {
+      justify-content: start;
+    }
+  }
+}
+
+
 /* src/navigation/app-workspace-shell.css */
 @layer zvk-composite-components {
   :where(.zvk-composite-app-workspace-shell) {
@@ -114,7 +281,8 @@
     border-radius: var(--zvk-ui-radius-lg);
     box-shadow: var(--zvk-ui-shadow-sm);
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    container: zvk-composite-app-workspace-shell / inline-size;
+    font-family: var(--zvk-ui-font-family-primary);
     gap: var(--zvk-ui-space-5);
     min-block-size: 100%;
     overflow: clip;
@@ -134,6 +302,7 @@
     border-block-end: 1px solid var(--zvk-ui-color-border);
     color: var(--zvk-ui-color-foreground);
     display: flex;
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-lg);
     font-weight: 700;
     gap: var(--zvk-ui-space-2);
@@ -203,6 +372,7 @@
   :where(.zvk-composite-app-workspace-shell__mobile-nav-summary) {
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 700;
     list-style: none;
@@ -230,7 +400,35 @@
     gap: var(--zvk-ui-space-2);
   }
 
-  @media (max-width: 48rem) {
+  @container zvk-composite-app-workspace-shell (max-width: 72rem) {
+    :where(.zvk-composite-app-workspace-shell__sidebar) {
+      display: none;
+    }
+
+    :where(.zvk-composite-app-workspace-shell__mobile-nav) {
+      display: block;
+    }
+
+    :where(.zvk-composite-app-workspace-shell__main) {
+      grid-column: 1 / -1;
+      padding: var(--zvk-ui-space-3);
+    }
+
+    :where(.zvk-composite-app-workspace-shell__header) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-app-workspace-shell__account-menu) {
+      justify-self: start;
+    }
+  }
+
+  @media (max-width: 72rem) {
+    :where(.zvk-composite-app-workspace-shell),
+    :where(.zvk-composite-app-workspace-shell[data-side="right"]) {
+      grid-template-columns: 1fr;
+    }
+
     :where(.zvk-composite-app-workspace-shell__sidebar) {
       display: none;
     }
@@ -254,149 +452,417 @@
 }
 
 
-/* src/navigation/sectioned-workspace-shell.css */
+/* src/navigation/command-palette-shell.css */
 @layer zvk-composite-components {
-  :where(.zvk-composite-sectioned-workspace-shell) {
+  :where(.zvk-composite-command-palette-shell) {
     color: var(--zvk-ui-color-foreground);
-    display: grid;
-    font-family: var(--zvk-ui-font-family-sans);
-    gap: var(--zvk-ui-space-5);
-    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
-    min-block-size: 100%;
-    min-inline-size: 0;
+    font-family: var(--zvk-ui-font-family-primary);
   }
 
-  :where(.zvk-composite-sectioned-workspace-shell__sidebar) {
-    background:
-      linear-gradient(180deg, color-mix(in srgb, var(--zvk-ui-color-primary) 5%, transparent), transparent 12rem),
-      var(--zvk-ui-color-surface);
-    border: 1px solid var(--zvk-ui-color-border);
-    border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-xs);
-    min-inline-size: 0;
-    padding: var(--zvk-ui-space-3);
+  :where(.zvk-composite-command-palette-shell__content) {
+    gap: 0;
+    max-inline-size: min(38rem, calc(100vw - 2rem));
+    overflow: hidden;
+    padding: 0;
   }
 
-  :where(.zvk-composite-sectioned-workspace-shell__body) {
-    display: grid;
-    gap: var(--zvk-ui-space-5);
-    grid-template-rows: auto minmax(0, 1fr) auto;
-    min-block-size: 0;
-    min-inline-size: 0;
+  :where(.zvk-composite-command-palette-shell__title) {
+    border-block-end: 1px solid var(--zvk-ui-color-border);
+    font-family: var(--zvk-ui-font-family-secondary);
+    padding: var(--zvk-ui-space-4);
   }
 
-  :where(.zvk-composite-sectioned-workspace-shell__header) {
+  :where(.zvk-composite-command-palette-shell__command) {
+    border: 0;
+    box-shadow: none;
+  }
+
+  :where(.zvk-composite-command-palette-shell__search) {
     border-block-end: 1px solid var(--zvk-ui-color-border);
-    padding-block-end: var(--zvk-ui-space-4);
   }
 
-  :where(.zvk-composite-sectioned-workspace-shell__content) {
+  :where(.zvk-composite-command-palette-shell__list) {
+    max-block-size: min(28rem, calc(100vh - 14rem));
+    overflow: auto;
+  }
+
+  :where(.zvk-composite-command-palette-shell__item) {
+    align-items: center;
     display: grid;
-    gap: var(--zvk-ui-space-4);
-    min-block-size: 0;
-    min-inline-size: 0;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: auto minmax(0, 1fr) auto;
   }
 
-  :where(.zvk-composite-sectioned-workspace-shell__footer) {
-    border-block-start: 1px solid var(--zvk-ui-color-border);
+  :where(.zvk-composite-command-palette-shell__item-icon) {
     color: var(--zvk-ui-color-muted-foreground);
-    font-size: var(--zvk-ui-font-size-sm);
-    padding-block-start: var(--zvk-ui-space-4);
+    display: inline-grid;
+    flex: 0 0 auto;
+    place-items: center;
   }
 
-  :where(.zvk-composite-sectioned-workspace-shell__nav-item-content) {
+  :where(.zvk-composite-command-palette-shell__item-content) {
     display: grid;
-    gap: var(--zvk-ui-space-1);
+    gap: 0.125rem;
     min-inline-size: 0;
   }
 
-  :where(.zvk-composite-sectioned-workspace-shell__nav-item-label),
-  :where(.zvk-composite-sectioned-workspace-shell__nav-item-description) {
+  :where(.zvk-composite-command-palette-shell__item-label),
+  :where(.zvk-composite-command-palette-shell__item-description) {
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  :where(.zvk-composite-sectioned-workspace-shell__nav-item-description) {
+  :where(.zvk-composite-command-palette-shell__item-label) {
+    font-family: var(--zvk-ui-font-family-secondary);
+  }
+
+  :where(.zvk-composite-command-palette-shell__item-description) {
     color: var(--zvk-ui-color-muted-foreground);
     font-size: var(--zvk-ui-font-size-xs);
     line-height: var(--zvk-ui-line-height-tight);
   }
 
-  @media (max-width: 56rem) {
-    :where(.zvk-composite-sectioned-workspace-shell) {
-      grid-template-columns: 1fr;
-    }
+  :where(.zvk-composite-command-palette-shell__shortcut) {
+    justify-self: end;
+  }
 
-    :where(.zvk-composite-sectioned-workspace-shell__body) {
-      order: 1;
-    }
+  :where(.zvk-composite-command-palette-shell__state) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding: var(--zvk-ui-space-5);
+    text-align: center;
+  }
 
-    :where(.zvk-composite-sectioned-workspace-shell__sidebar) {
-      order: 2;
-    }
+  :where(.zvk-composite-command-palette-shell__footer) {
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    padding: var(--zvk-ui-space-3) var(--zvk-ui-space-4);
   }
 }
 
 
-/* src/navigation/workspace-header.css */
+/* src/navigation/entity-switcher-menu.css */
 @layer zvk-composite-components {
-  :where(.zvk-composite-workspace-header) {
-    align-items: start;
-    display: grid;
-    gap: var(--zvk-ui-space-4);
-    grid-template-columns: minmax(0, 1fr) auto;
-    inline-size: 100%;
+  :where(.zvk-composite-entity-switcher-menu) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-primary);
     min-inline-size: 0;
   }
 
-  :where(.zvk-composite-workspace-header[data-align="center"]) {
-    align-items: center;
+  :where(.zvk-composite-entity-switcher-menu__trigger) {
+    justify-content: space-between;
+    min-inline-size: 13rem;
+    text-align: start;
   }
 
-  :where(.zvk-composite-workspace-header__content) {
+  :where(.zvk-composite-entity-switcher-menu[data-size="sm"] .zvk-composite-entity-switcher-menu__trigger) {
+    min-inline-size: 11rem;
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__trigger-content),
+  :where(.zvk-composite-entity-switcher-menu__current),
+  :where(.zvk-composite-entity-switcher-menu__current-text),
+  :where(.zvk-composite-entity-switcher-menu__item-content) {
     display: grid;
-    gap: var(--zvk-ui-space-2);
     min-inline-size: 0;
   }
 
-  :where(.zvk-composite-workspace-header__kicker) {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--zvk-ui-space-2);
-    min-inline-size: 0;
+  :where(.zvk-composite-entity-switcher-menu__trigger-content) {
+    gap: 0.125rem;
   }
 
-  :where(.zvk-composite-workspace-header__eyebrow) {
+  :where(.zvk-composite-entity-switcher-menu__label) {
     color: var(--zvk-ui-color-muted-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-xs);
-    font-weight: 700;
-    letter-spacing: 0;
     line-height: var(--zvk-ui-line-height-tight);
-    text-transform: uppercase;
   }
 
-  :where(.zvk-composite-workspace-header__status) {
+  :where(.zvk-composite-entity-switcher-menu__current) {
     align-items: center;
-    background: color-mix(in srgb, var(--zvk-ui-color-primary) 10%, var(--zvk-ui-color-surface));
-    border: 1px solid color-mix(in srgb, var(--zvk-ui-color-primary) 26%, var(--zvk-ui-color-border));
-    border-radius: var(--zvk-ui-radius-full);
-    color: var(--zvk-ui-color-foreground);
-    display: inline-flex;
-    font-size: var(--zvk-ui-font-size-xs);
-    font-weight: 600;
-    line-height: var(--zvk-ui-line-height-tight);
-    min-block-size: 1.5rem;
-    padding-inline: var(--zvk-ui-space-2);
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: auto minmax(0, 1fr);
   }
 
-  :where(.zvk-composite-workspace-header__title) {
-    color: var(--zvk-ui-color-foreground);
-    font-size: clamp(var(--zvk-ui-font-size-xl), 2vw, var(--zvk-ui-font-size-2xl));
-    font-weight: 800;
-    letter-spacing: 0;
+  :where(.zvk-composite-entity-switcher-menu__current-icon),
+  :where(.zvk-composite-entity-switcher-menu__item-icon) {
+    color: var(--zvk-ui-color-muted-foreground);
+    display: inline-grid;
+    flex: 0 0 auto;
+    place-items: center;
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__current-label),
+  :where(.zvk-composite-entity-switcher-menu__current-description),
+  :where(.zvk-composite-entity-switcher-menu__item-label),
+  :where(.zvk-composite-entity-switcher-menu__item-description),
+  :where(.zvk-composite-entity-switcher-menu__item-meta) {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__current-label),
+  :where(.zvk-composite-entity-switcher-menu__item-label) {
+    font-family: var(--zvk-ui-font-family-secondary);
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__current-description),
+  :where(.zvk-composite-entity-switcher-menu__item-description),
+  :where(.zvk-composite-entity-switcher-menu__item-meta) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-tight);
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__chevron) {
+    color: var(--zvk-ui-color-muted-foreground);
+    flex: 0 0 auto;
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: 1;
+    margin-inline-start: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__content) {
+    min-inline-size: min(22rem, calc(100vw - 2rem));
+    padding: 0;
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__command) {
+    border: 0;
+    box-shadow: none;
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__search) {
+    border-block-end: 1px solid var(--zvk-ui-color-border);
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__list) {
+    max-block-size: min(24rem, calc(100vh - 12rem));
+    overflow: auto;
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__item) {
+    align-items: center;
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__item[data-current="true"]) {
+    background: color-mix(in srgb, var(--zvk-ui-color-primary) 10%, transparent);
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__item-badge) {
+    background: var(--zvk-ui-color-muted);
+    border-radius: var(--zvk-ui-radius-full);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-tight);
+    padding: 0.125rem var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__state) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding: var(--zvk-ui-space-4);
+    text-align: center;
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__actions) {
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    padding: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-entity-switcher-menu__action) {
+    min-inline-size: 0;
+  }
+}
+
+
+/* src/navigation/sectioned-workspace-shell.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-sectioned-workspace-shell) {
+    color: var(--zvk-ui-color-foreground);
+    container: zvk-composite-sectioned-workspace-shell / inline-size;
+    display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
+    gap: var(--zvk-ui-space-5);
+    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
+    min-block-size: 100%;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__sidebar) {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--zvk-ui-color-primary) 5%, transparent), transparent 12rem),
+      var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    align-content: start;
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__body) {
+    display: grid;
+    gap: var(--zvk-ui-space-5);
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__header) {
+    border-block-end: 1px solid var(--zvk-ui-color-border);
+    padding-block-end: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__content) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__footer) {
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding-block-start: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__sidebar-footer) {
+    border-block-start: 1px solid var(--zvk-ui-color-border-subtle);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-normal);
+    min-inline-size: 0;
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__nav-item-content) {
+    display: grid;
+    gap: 0.125rem;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__nav .zvk-ui-sectioned-sidebar-nav__item-control) {
+    align-items: start;
+    padding-block: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__nav-item-label),
+  :where(.zvk-composite-sectioned-workspace-shell__nav-item-description) {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__nav-item-label) {
+    font-family: var(--zvk-ui-font-family-secondary);
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__nav-item-description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-tight);
+  }
+
+  @container zvk-composite-sectioned-workspace-shell (max-width: 64rem) {
+    :where(.zvk-composite-sectioned-workspace-shell__body) {
+      grid-column: 1 / -1;
+      order: 1;
+    }
+
+    :where(.zvk-composite-sectioned-workspace-shell__sidebar) {
+      grid-column: 1 / -1;
+      order: 2;
+    }
+  }
+
+  @media (max-width: 64rem) {
+    :where(.zvk-composite-sectioned-workspace-shell) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-sectioned-workspace-shell__body) {
+      order: 1;
+    }
+
+    :where(.zvk-composite-sectioned-workspace-shell__sidebar) {
+      order: 2;
+    }
+  }
+}
+
+
+/* src/navigation/workspace-header.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-workspace-header) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    grid-template-columns: minmax(0, 1fr) auto;
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workspace-header[data-align="center"]) {
+    align-items: center;
+  }
+
+  :where(.zvk-composite-workspace-header__content) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workspace-header__kicker) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workspace-header__eyebrow) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: var(--zvk-ui-line-height-tight);
+    text-transform: uppercase;
+  }
+
+  :where(.zvk-composite-workspace-header__status) {
+    align-items: center;
+    background: color-mix(in srgb, var(--zvk-ui-color-primary) 10%, var(--zvk-ui-color-surface));
+    border: 1px solid color-mix(in srgb, var(--zvk-ui-color-primary) 26%, var(--zvk-ui-color-border));
+    border-radius: var(--zvk-ui-radius-full);
+    color: var(--zvk-ui-color-foreground);
+    display: inline-flex;
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 600;
+    line-height: var(--zvk-ui-line-height-tight);
+    min-block-size: 1.5rem;
+    padding-inline: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-workspace-header__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: clamp(var(--zvk-ui-font-size-xl), 2vw, var(--zvk-ui-font-size-2xl));
+    font-weight: 800;
+    letter-spacing: 0;
     line-height: var(--zvk-ui-line-height-tight);
     margin: 0;
     overflow-wrap: anywhere;
@@ -411,7 +877,7 @@
   :where(.zvk-composite-workspace-header__description) {
     color: var(--zvk-ui-color-muted-foreground);
     font-size: var(--zvk-ui-font-size-sm);
-    line-height: var(--zvk-ui-line-height-relaxed);
+    line-height: var(--zvk-ui-line-height-normal);
     margin: 0;
   }
 
@@ -457,6 +923,24 @@
 }
 
 
+/* src/navigation/link-action.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-link-action) {
+    text-decoration: none;
+  }
+
+  :where(.zvk-composite-link-action__icon) {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  :where(.zvk-composite-link-action__content) {
+    min-width: 0;
+  }
+}
+
+
 /* src/state/state-surface.css */
 @layer zvk-composite-components {
   :where(.zvk-composite-state-surface) {
@@ -538,17 +1022,37 @@
 }
 
 
-/* src/lists/entity-card.css */
+/* src/state/route-state-frame.css */
 @layer zvk-composite-components {
-  :where(.zvk-composite-entity-card) {
-    align-items: start;
-    background:
-      linear-gradient(90deg, color-mix(in srgb, var(--zvk-ui-color-primary) 0%, transparent), transparent),
-      var(--zvk-ui-color-surface);
-    border: 1px solid var(--zvk-ui-card-border);
-    border-radius: var(--zvk-ui-radius-lg);
-    box-shadow: var(--zvk-ui-shadow-xs);
-    color: var(--zvk-ui-color-foreground);
+  :where(.zvk-composite-route-state-frame) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-route-state-frame[data-status]) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-route-state-frame__surface) {
+    margin-inline: auto;
+    max-inline-size: 44rem;
+    width: min(100%, 44rem);
+  }
+}
+
+
+/* src/lists/entity-card.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-entity-card) {
+    align-items: start;
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--zvk-ui-color-primary) 0%, transparent), transparent),
+      var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
     display: grid;
     gap: var(--zvk-ui-space-3);
     grid-template-columns: auto minmax(0, 1fr) auto auto;
@@ -587,6 +1091,7 @@
       linear-gradient(90deg, color-mix(in srgb, var(--zvk-ui-color-primary) 13%, transparent), transparent 70%),
       var(--zvk-ui-color-primary-soft);
     border-color: var(--zvk-ui-color-primary-border);
+    padding-inline-start: var(--zvk-ui-space-6);
   }
 
   :where(.zvk-composite-entity-card[data-selected])::before {
@@ -1097,6 +1602,1540 @@
 }
 
 
+/* src/integrations/integration-status-card.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-integration-status-card) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-integration-status-card[data-selected]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-primary) 48%, var(--zvk-ui-card-border));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--zvk-ui-color-primary) 32%, transparent), var(--zvk-ui-shadow-xs);
+  }
+
+  :where(.zvk-composite-integration-status-card[data-disabled]) {
+    opacity: 0.62;
+  }
+
+  :where(.zvk-composite-integration-status-card__main) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: auto minmax(0, 1fr);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-integration-status-card__icon) {
+    align-items: center;
+    background: var(--zvk-ui-color-muted);
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-muted-foreground);
+    display: inline-flex;
+    block-size: 2.5rem;
+    inline-size: 2.5rem;
+    justify-content: center;
+  }
+
+  :where(.zvk-composite-integration-status-card__body) {
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-integration-status-card__header) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-integration-status-card__copy) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-integration-status-card__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: var(--zvk-ui-font-size-base);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-integration-status-card__description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-integration-status-card__aside),
+  :where(.zvk-composite-integration-status-card__actions),
+  :where(.zvk-composite-integration-status-card__badges),
+  :where(.zvk-composite-integration-status-card__metadata),
+  :where(.zvk-composite-integration-status-card__metrics) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-integration-status-card__aside) {
+    justify-content: end;
+  }
+
+  :where(.zvk-composite-integration-status-card__metadata) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+  }
+
+  :where(.zvk-composite-integration-status-card__metrics) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-integration-status-card__error) {
+    background: color-mix(in srgb, var(--zvk-ui-color-destructive) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--zvk-ui-color-destructive) 24%, var(--zvk-ui-color-border));
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-destructive);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-integration-status-card__footer) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-composite-integration-status-card__main),
+    :where(.zvk-composite-integration-status-card__header) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-integration-status-card__aside) {
+      justify-content: start;
+    }
+  }
+}
+
+
+/* src/workflows/workflow-status-card.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-workflow-status-card) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-workflow-status-card[data-tone="running"]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-primary) 34%, var(--zvk-ui-card-border));
+  }
+
+  :where(.zvk-composite-workflow-status-card[data-tone="success"]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-success) 34%, var(--zvk-ui-card-border));
+  }
+
+  :where(.zvk-composite-workflow-status-card[data-tone="warning"]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-warning) 36%, var(--zvk-ui-card-border));
+  }
+
+  :where(.zvk-composite-workflow-status-card[data-tone="danger"]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-destructive) 34%, var(--zvk-ui-card-border));
+  }
+
+  :where(.zvk-composite-workflow-status-card__header) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workflow-status-card__copy) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workflow-status-card__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: var(--zvk-ui-font-size-base);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-workflow-status-card__description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-workflow-status-card__aside),
+  :where(.zvk-composite-workflow-status-card__actions),
+  :where(.zvk-composite-workflow-status-card__metadata),
+  :where(.zvk-composite-workflow-status-card__progress-header) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workflow-status-card__aside) {
+    justify-content: end;
+  }
+
+  :where(.zvk-composite-workflow-status-card__metadata),
+  :where(.zvk-composite-workflow-status-card__details),
+  :where(.zvk-composite-workflow-status-card__footer) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+  }
+
+  :where(.zvk-composite-workflow-status-card__metadata) {
+    font-size: var(--zvk-ui-font-size-xs);
+  }
+
+  :where(.zvk-composite-workflow-status-card__progress-group) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-workflow-status-card__progress-header) {
+    justify-content: space-between;
+  }
+
+  :where(.zvk-composite-workflow-status-card__step) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 600;
+  }
+
+  :where(.zvk-composite-workflow-status-card__progress-label) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+  }
+
+  :where(.zvk-composite-workflow-status-card__progress) {
+    inline-size: 100%;
+  }
+
+  :where(.zvk-composite-workflow-status-card__progress-track) {
+    background: var(--zvk-ui-color-muted);
+    border-radius: var(--zvk-ui-radius-full);
+    display: block;
+    block-size: 0.5rem;
+    inline-size: 100%;
+    overflow: hidden;
+  }
+
+  :where(.zvk-composite-workflow-status-card__progress-indicator) {
+    background: var(--zvk-ui-color-primary);
+    border-radius: inherit;
+    display: block;
+    block-size: 100%;
+    inline-size: var(--zvk-composite-workflow-status-card-progress, 100%);
+    transition: inline-size 160ms ease;
+  }
+
+  :where(.zvk-composite-workflow-status-card[data-tone="success"] .zvk-composite-workflow-status-card__progress-indicator) {
+    background: var(--zvk-ui-color-success);
+  }
+
+  :where(.zvk-composite-workflow-status-card[data-tone="warning"] .zvk-composite-workflow-status-card__progress-indicator) {
+    background: var(--zvk-ui-color-warning);
+  }
+
+  :where(.zvk-composite-workflow-status-card[data-tone="danger"] .zvk-composite-workflow-status-card__progress-indicator) {
+    background: var(--zvk-ui-color-destructive);
+  }
+
+  :where(.zvk-composite-workflow-status-card__progress[data-indeterminate] .zvk-composite-workflow-status-card__progress-indicator) {
+    inline-size: 42%;
+  }
+
+  :where(.zvk-composite-workflow-status-card__details) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-workflow-status-card__error) {
+    background: color-mix(in srgb, var(--zvk-ui-color-destructive) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--zvk-ui-color-destructive) 24%, var(--zvk-ui-color-border));
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-destructive);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-workflow-status-card__footer) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-composite-workflow-status-card__header) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-workflow-status-card__aside),
+    :where(.zvk-composite-workflow-status-card__progress-header) {
+      justify-content: start;
+    }
+  }
+}
+
+
+/* src/workflows/process-list-panel.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-process-list-panel) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-process-list-panel__header) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-process-list-panel__copy) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-process-list-panel__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-size: var(--zvk-ui-font-size-base);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-process-list-panel__description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-process-list-panel__actions) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: end;
+  }
+
+  :where(.zvk-composite-process-list-panel__body),
+  :where(.zvk-composite-process-list-panel__list) {
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-process-list-panel__list) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(.zvk-composite-process-list-panel__item) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-process-list-panel__state) {
+    align-items: center;
+    background: var(--zvk-ui-color-muted);
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-muted-foreground);
+    display: flex;
+    gap: var(--zvk-ui-space-2);
+    justify-content: center;
+    min-block-size: 5rem;
+    padding: var(--zvk-ui-space-4);
+    text-align: center;
+  }
+
+  :where(.zvk-composite-process-list-panel__footer) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-composite-process-list-panel__header) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-process-list-panel__actions) {
+      justify-content: start;
+    }
+  }
+}
+
+
+/* src/settings/parameter-editor.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-parameter-editor) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-parameter-editor[data-density="compact"]) {
+    gap: var(--zvk-ui-space-3);
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-parameter-editor__toolbar) {
+    display: flex;
+    justify-content: end;
+  }
+
+  :where(.zvk-composite-parameter-editor__groups) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-parameter-editor[data-density="compact"] .zvk-composite-parameter-editor__groups) {
+    gap: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-parameter-editor__group) {
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    display: grid;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  :where(.zvk-composite-parameter-editor__group-header) {
+    background: var(--zvk-ui-color-muted);
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-parameter-editor__group-title) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-size: var(--zvk-ui-font-size-base);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-parameter-editor__group-description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-parameter-editor__rows) {
+    display: grid;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-parameter-editor__row) {
+    align-items: center;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto minmax(12rem, 0.9fr) auto;
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-parameter-editor[data-density="compact"] .zvk-composite-parameter-editor__row) {
+    gap: var(--zvk-ui-space-2);
+    padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-parameter-editor__row + .zvk-composite-parameter-editor__row) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+  }
+
+  :where(.zvk-composite-parameter-editor__row[data-changed]) {
+    background: color-mix(in srgb, var(--zvk-ui-color-primary) 6%, transparent);
+  }
+
+  :where(.zvk-composite-parameter-editor__row[data-invalid]) {
+    background: color-mix(in srgb, var(--zvk-ui-color-destructive) 6%, transparent);
+  }
+
+  :where(.zvk-composite-parameter-editor__row[data-disabled]) {
+    opacity: 0.62;
+  }
+
+  :where(.zvk-composite-parameter-editor__row-copy) {
+    display: grid;
+    gap: 0.125rem;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-parameter-editor__row-label) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+  }
+
+  :where(.zvk-composite-parameter-editor__row-description),
+  :where(.zvk-composite-parameter-editor__row-value),
+  :where(.zvk-composite-parameter-editor__footer) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+  }
+
+  :where(.zvk-composite-parameter-editor__row-description) {
+    margin: 0;
+  }
+
+  :where(.zvk-composite-parameter-editor__row-value) {
+    font-family: var(--zvk-ui-font-family-tertiary);
+    white-space: nowrap;
+  }
+
+  :where(.zvk-composite-parameter-editor__row-control) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-parameter-editor__row-actions) {
+    align-items: center;
+    display: flex;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-parameter-editor__footer) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  @media (max-width: 52rem) {
+    :where(.zvk-composite-parameter-editor__row) {
+      align-items: start;
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-parameter-editor__toolbar) {
+      justify-content: start;
+    }
+  }
+}
+
+
+/* src/settings/settings-section-stack.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-settings-section-stack) {
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-settings-section-stack__header) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-settings-section-stack__title),
+  :where(.zvk-composite-settings-section-stack__section-title) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-settings-section-stack__title) {
+    font-size: var(--zvk-ui-font-size-xl);
+  }
+
+  :where(.zvk-composite-settings-section-stack__section-title) {
+    font-size: var(--zvk-ui-font-size-base);
+  }
+
+  :where(.zvk-composite-settings-section-stack__description),
+  :where(.zvk-composite-settings-section-stack__section-description),
+  :where(.zvk-composite-settings-section-stack__footer) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-settings-section-stack__sections) {
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-settings-section-stack__section) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-settings-section-stack__section[data-disabled]) {
+    opacity: 0.64;
+  }
+
+  :where(.zvk-composite-settings-section-stack__section-header) {
+    align-items: start;
+    display: flex;
+    gap: var(--zvk-ui-space-3);
+    justify-content: space-between;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-settings-section-stack__section-copy) {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-settings-section-stack__section-actions),
+  :where(.zvk-composite-settings-section-stack__save-bar) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-settings-section-stack__section-alert) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-settings-section-stack__section-content) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-settings-section-stack__save-bar) {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--zvk-ui-color-primary) 6%, transparent), transparent),
+      var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    justify-content: flex-end;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-settings-section-stack__save-bar[data-dirty]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-warning) 32%, var(--zvk-ui-card-border));
+  }
+
+  :where(.zvk-composite-settings-section-stack__footer) {
+    border-block-start: 1px solid var(--zvk-ui-color-border-subtle);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  @media (max-width: 42rem) {
+    :where(.zvk-composite-settings-section-stack__section-header),
+    :where(.zvk-composite-settings-section-stack__save-bar) {
+      display: grid;
+      justify-content: stretch;
+    }
+  }
+}
+
+
+/* src/ai/provider-model-selector.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-provider-model-selector) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-provider-model-selector__header) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__search),
+  :where(.zvk-composite-provider-model-selector__summary) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__summary) {
+    justify-self: end;
+  }
+
+  :where(.zvk-composite-provider-model-selector__columns) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    grid-template-columns: minmax(16rem, 0.95fr) minmax(18rem, 1.15fr);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__panel) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: 0 1px 0 color-mix(in srgb, var(--zvk-ui-color-foreground) 3%, transparent);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-provider-model-selector__panel[data-unavailable]) {
+    background: color-mix(in srgb, var(--zvk-ui-color-muted) 42%, var(--zvk-ui-color-surface));
+  }
+
+  :where(.zvk-composite-provider-model-selector__panel-header) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__panel-copy) {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__panel-title) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-size: var(--zvk-ui-font-size-base);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__panel-description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__panel-description-separator) {
+    color: var(--zvk-ui-color-border);
+  }
+
+  :where(.zvk-composite-provider-model-selector__list) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    list-style: none;
+    margin: 0;
+    min-inline-size: 0;
+    padding: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__list-item) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice) {
+    appearance: none;
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    color: inherit;
+    cursor: pointer;
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+    text-align: start;
+    transition:
+      border-color 120ms ease,
+      box-shadow 120ms ease,
+      background-color 120ms ease,
+      color 120ms ease;
+    width: 100%;
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice:hover:not(:disabled)) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-primary) 22%, var(--zvk-ui-color-border-subtle));
+    background: color-mix(in srgb, var(--zvk-ui-color-primary) 4%, var(--zvk-ui-color-surface));
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice:focus-visible) {
+    outline: 2px solid var(--zvk-ui-color-primary);
+    outline-offset: 2px;
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice[data-selected]) {
+    background: color-mix(in srgb, var(--zvk-ui-color-primary) 10%, var(--zvk-ui-color-surface));
+    border-color: color-mix(in srgb, var(--zvk-ui-color-primary) 34%, var(--zvk-ui-color-border-subtle));
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zvk-ui-color-primary) 16%, transparent);
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice[data-disabled]) {
+    cursor: not-allowed;
+    opacity: 0.64;
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice-copy) {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice-heading) {
+    align-items: center;
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice-label),
+  :where(.zvk-composite-provider-model-selector__choice-description),
+  :where(.zvk-composite-provider-model-selector__choice-metadata) {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice-label) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice-description),
+  :where(.zvk-composite-provider-model-selector__choice-metadata) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-tight);
+  }
+
+  :where(.zvk-composite-provider-model-selector__choice-badge) {
+    background: var(--zvk-ui-color-muted);
+    border-radius: var(--zvk-ui-radius-full);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-tight);
+    padding: 0.125rem var(--zvk-ui-space-2);
+    white-space: nowrap;
+  }
+
+  :where(.zvk-composite-provider-model-selector__state) {
+    align-items: center;
+    background: var(--zvk-ui-color-muted);
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-muted-foreground);
+    display: flex;
+    gap: var(--zvk-ui-space-2);
+    justify-content: center;
+    min-block-size: 5.5rem;
+    padding: var(--zvk-ui-space-4);
+    text-align: center;
+  }
+
+  :where(.zvk-composite-provider-model-selector__advanced-settings) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  @media (max-width: 52rem) {
+    :where(.zvk-composite-provider-model-selector__header),
+    :where(.zvk-composite-provider-model-selector__columns) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-provider-model-selector__summary) {
+      justify-self: start;
+    }
+  }
+}
+
+
+/* src/ai/conversation-directory.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-conversation-directory) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-conversation-directory[data-loading]) {
+    opacity: 0.86;
+  }
+
+  :where(.zvk-composite-conversation-directory__header) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-conversation-directory__header-copy),
+  :where(.zvk-composite-conversation-directory__groups),
+  :where(.zvk-composite-conversation-directory__group),
+  :where(.zvk-composite-conversation-directory__item-content) {
+    display: grid;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-conversation-directory__header-copy),
+  :where(.zvk-composite-conversation-directory__item-content) {
+    gap: 0.25rem;
+  }
+
+  :where(.zvk-composite-conversation-directory__groups) {
+    gap: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-conversation-directory__group) {
+    gap: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-conversation-directory__title),
+  :where(.zvk-composite-conversation-directory__group-title) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-conversation-directory__title) {
+    font-size: var(--zvk-ui-font-size-lg);
+    overflow-wrap: anywhere;
+  }
+
+  :where(.zvk-composite-conversation-directory__group-title) {
+    font-size: var(--zvk-ui-font-size-sm);
+    text-transform: none;
+  }
+
+  :where(.zvk-composite-conversation-directory__item-description),
+  :where(.zvk-composite-conversation-directory__item-meta),
+  :where(.zvk-composite-conversation-directory__footer) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    line-height: var(--zvk-ui-line-height-normal);
+  }
+
+  :where(.zvk-composite-conversation-directory__header-actions),
+  :where(.zvk-composite-conversation-directory__actions) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: end;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-conversation-directory__search) {
+    min-inline-size: min(18rem, 100%);
+  }
+
+  :where(.zvk-composite-conversation-directory__item-badge) {
+    background: var(--zvk-ui-color-muted);
+    border-radius: var(--zvk-ui-radius-full);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-tight);
+    padding: 0.125rem var(--zvk-ui-space-2);
+    white-space: nowrap;
+  }
+
+  :where(.zvk-composite-conversation-directory__list) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    list-style: none;
+    margin: 0;
+    min-inline-size: 0;
+    padding: 0;
+  }
+
+  :where(.zvk-composite-conversation-directory__list-item) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-conversation-directory__item) {
+    appearance: none;
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    color: inherit;
+    cursor: pointer;
+    display: grid;
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+    position: relative;
+    text-align: start;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease,
+      box-shadow 120ms ease,
+      color 120ms ease,
+      transform 120ms ease;
+    width: 100%;
+  }
+
+  :where(.zvk-composite-conversation-directory__item:hover:not(:disabled)) {
+    background: color-mix(in srgb, var(--zvk-ui-color-primary) 4%, var(--zvk-ui-color-surface));
+    border-color: color-mix(in srgb, var(--zvk-ui-color-primary) 22%, var(--zvk-ui-color-border-subtle));
+    box-shadow: var(--zvk-ui-shadow-xs);
+    transform: translateY(-1px);
+  }
+
+  :where(.zvk-composite-conversation-directory__item:focus-visible) {
+    outline: 2px solid var(--zvk-ui-color-ring);
+    outline-offset: 2px;
+  }
+
+  :where(.zvk-composite-conversation-directory__item[data-selected]) {
+    background: color-mix(in srgb, var(--zvk-ui-color-primary) 10%, var(--zvk-ui-color-surface));
+    border-color: var(--zvk-ui-color-primary-border);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zvk-ui-color-primary) 16%, transparent);
+    padding-inline-start: var(--zvk-ui-space-6);
+  }
+
+  :where(.zvk-composite-conversation-directory__item[data-selected])::before {
+    background: var(--zvk-ui-color-primary);
+    border-radius: var(--zvk-ui-radius-full);
+    block-size: calc(100% - var(--zvk-ui-space-4));
+    content: "";
+    inline-size: 0.1875rem;
+    inset-block: var(--zvk-ui-space-2);
+    inset-inline-start: var(--zvk-ui-space-2);
+    position: absolute;
+  }
+
+  :where(.zvk-composite-conversation-directory__item[data-unread] .zvk-composite-conversation-directory__item-title) {
+    font-weight: 800;
+  }
+
+  :where(.zvk-composite-conversation-directory__item[data-pinned]) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-primary) 18%, var(--zvk-ui-color-border-subtle));
+  }
+
+  :where(.zvk-composite-conversation-directory__item[data-archived]) {
+    background: color-mix(in srgb, var(--zvk-ui-color-muted) 48%, var(--zvk-ui-color-surface));
+    border-style: dashed;
+  }
+
+  :where(.zvk-composite-conversation-directory__item[data-disabled]) {
+    cursor: not-allowed;
+    opacity: 0.64;
+  }
+
+  :where(.zvk-composite-conversation-directory__item-heading) {
+    align-items: center;
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-conversation-directory__item-title),
+  :where(.zvk-composite-conversation-directory__item-description),
+  :where(.zvk-composite-conversation-directory__item-meta) {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.zvk-composite-conversation-directory__item-title) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+  }
+
+  :where(.zvk-composite-conversation-directory__item-description) {
+    color: var(--zvk-ui-color-muted-foreground);
+  }
+
+  :where(.zvk-composite-conversation-directory__item-meta-row) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-conversation-directory__item-meta) {
+    font-size: var(--zvk-ui-font-size-xs);
+  }
+
+  :where(.zvk-composite-conversation-directory__item-states) {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-1);
+  }
+
+  :where(.zvk-composite-conversation-directory__item-state) {
+    align-items: center;
+    border-radius: var(--zvk-ui-radius-full);
+    display: inline-flex;
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 600;
+    line-height: var(--zvk-ui-line-height-tight);
+    padding: 0.125rem var(--zvk-ui-space-2);
+    white-space: nowrap;
+  }
+
+  :where(.zvk-composite-conversation-directory__item-state[data-kind="pinned"]) {
+    background: var(--zvk-ui-color-muted);
+    color: var(--zvk-ui-color-muted-foreground);
+  }
+
+  :where(.zvk-composite-conversation-directory__item-state[data-kind="unread"]) {
+    background: color-mix(in srgb, var(--zvk-ui-color-primary) 10%, var(--zvk-ui-color-primary-soft));
+    color: var(--zvk-ui-color-primary);
+  }
+
+  :where(.zvk-composite-conversation-directory__item-state[data-kind="archived"]) {
+    background: color-mix(in srgb, var(--zvk-ui-color-muted) 70%, var(--zvk-ui-color-surface));
+    color: var(--zvk-ui-color-muted-foreground);
+  }
+
+  :where(.zvk-composite-conversation-directory__state) {
+    align-items: center;
+    background: var(--zvk-ui-color-muted);
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-muted-foreground);
+    display: flex;
+    gap: var(--zvk-ui-space-2);
+    justify-content: center;
+    min-block-size: 7rem;
+    padding: var(--zvk-ui-space-4);
+    text-align: center;
+  }
+
+  :where(.zvk-composite-conversation-directory__footer) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  @media (max-width: 42rem) {
+    :where(.zvk-composite-conversation-directory) {
+      padding: var(--zvk-ui-space-3);
+    }
+
+    :where(.zvk-composite-conversation-directory__header) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-conversation-directory__header-actions) {
+      justify-content: start;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-composite-conversation-directory__item) {
+      transition: none;
+    }
+
+    :where(.zvk-composite-conversation-directory__item:hover:not(:disabled)) {
+      transform: none;
+    }
+  }
+}
+
+
+/* src/ai/sticky-composer.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-sticky-composer) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+    position: sticky;
+    inset-block-end: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-sticky-composer[data-disabled]) {
+    opacity: 0.76;
+  }
+
+  :where(.zvk-composite-sticky-composer__body) {
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sticky-composer__input) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sticky-composer__toolbar) {
+    align-items: center;
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sticky-composer__tools),
+  :where(.zvk-composite-sticky-composer__submit) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sticky-composer__tools[data-slot="trailing"]) {
+    justify-content: flex-end;
+  }
+
+  :where(.zvk-composite-sticky-composer__submit) {
+    justify-content: flex-end;
+  }
+
+  :where(.zvk-composite-sticky-composer__meta) {
+    align-items: center;
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sticky-composer__status),
+  :where(.zvk-composite-sticky-composer__error),
+  :where(.zvk-composite-sticky-composer__footer) {
+    font-size: var(--zvk-ui-font-size-sm);
+    line-height: var(--zvk-ui-line-height-normal);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sticky-composer__status),
+  :where(.zvk-composite-sticky-composer__footer) {
+    color: var(--zvk-ui-color-muted-foreground);
+  }
+
+  :where(.zvk-composite-sticky-composer__error) {
+    color: var(--zvk-ui-color-destructive);
+    justify-self: end;
+  }
+
+  :where(.zvk-composite-sticky-composer__footer) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  @media (max-width: 42rem) {
+    :where(.zvk-composite-sticky-composer__toolbar),
+    :where(.zvk-composite-sticky-composer__meta) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-sticky-composer__tools[data-slot="trailing"]),
+    :where(.zvk-composite-sticky-composer__submit),
+    :where(.zvk-composite-sticky-composer__error) {
+      justify-content: flex-start;
+      justify-self: start;
+    }
+  }
+}
+
+
+/* src/detail/detail-inspector-panel.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-detail-inspector-panel) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-detail-inspector-panel[data-loading]) {
+    opacity: 0.82;
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__header),
+  :where(.zvk-composite-detail-inspector-panel__meta-row),
+  :where(.zvk-composite-detail-inspector-panel__section-header) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__copy),
+  :where(.zvk-composite-detail-inspector-panel__section-copy),
+  :where(.zvk-composite-detail-inspector-panel__body),
+  :where(.zvk-composite-detail-inspector-panel__sections),
+  :where(.zvk-composite-detail-inspector-panel__section) {
+    display: grid;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__copy),
+  :where(.zvk-composite-detail-inspector-panel__section-copy) {
+    gap: var(--zvk-ui-space-1);
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__body),
+  :where(.zvk-composite-detail-inspector-panel__sections) {
+    gap: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__title),
+  :where(.zvk-composite-detail-inspector-panel__section-title) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__title) {
+    font-size: var(--zvk-ui-font-size-lg);
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__section-title) {
+    font-size: var(--zvk-ui-font-size-base);
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__description),
+  :where(.zvk-composite-detail-inspector-panel__section-description),
+  :where(.zvk-composite-detail-inspector-panel__metadata),
+  :where(.zvk-composite-detail-inspector-panel__footer) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    line-height: var(--zvk-ui-line-height-normal);
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__description),
+  :where(.zvk-composite-detail-inspector-panel__section-description) {
+    margin: 0;
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__status),
+  :where(.zvk-composite-detail-inspector-panel__actions),
+  :where(.zvk-composite-detail-inspector-panel__section-actions) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: end;
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__metadata) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__section) {
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    gap: var(--zvk-ui-space-3);
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__section-content) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__state) {
+    align-items: center;
+    background: var(--zvk-ui-color-muted);
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-muted-foreground);
+    display: flex;
+    justify-content: center;
+    min-block-size: 6rem;
+    padding: var(--zvk-ui-space-4);
+    text-align: center;
+  }
+
+  :where(.zvk-composite-detail-inspector-panel__footer) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-composite-detail-inspector-panel__header),
+    :where(.zvk-composite-detail-inspector-panel__meta-row),
+    :where(.zvk-composite-detail-inspector-panel__section-header) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-detail-inspector-panel__status),
+    :where(.zvk-composite-detail-inspector-panel__actions),
+    :where(.zvk-composite-detail-inspector-panel__section-actions) {
+      justify-content: start;
+    }
+  }
+}
+
+
+/* src/data/data-table-control-bar.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-data-table-control-bar) {
+    background: color-mix(in srgb, var(--zvk-ui-color-muted) 60%, var(--zvk-ui-color-surface));
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-data-table-control-bar__primary) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-data-table-control-bar__search) {
+    flex: 1 1 16rem;
+    min-inline-size: 0;
+  }
+
+  :where(
+    .zvk-composite-data-table-control-bar__filters,
+    .zvk-composite-data-table-control-bar__saved-view,
+    .zvk-composite-data-table-control-bar__density-control,
+    .zvk-composite-data-table-control-bar__column-control
+  ) {
+    flex: 0 0 auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-data-table-control-bar__secondary) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-data-table-control-bar__selection-summary) {
+    align-items: center;
+    color: var(--zvk-ui-color-muted-foreground);
+    display: flex;
+    flex: 1 1 12rem;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-data-table-control-bar__actions) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: end;
+    margin-inline-start: auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-data-table-control-bar__bulk-actions),
+  :where(.zvk-composite-data-table-control-bar__actions-slot) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  @media (max-width: 44rem) {
+    :where(.zvk-composite-data-table-control-bar__selection-summary),
+    :where(.zvk-composite-data-table-control-bar__actions) {
+      justify-content: flex-start;
+    }
+
+    :where(.zvk-composite-data-table-control-bar__actions) {
+      margin-inline-start: 0;
+    }
+  }
+}
+
+
 /* src/data/data-table-page-frame.css */
 @layer zvk-composite-components {
   :where(.zvk-composite-data-table-page-frame) {