@yuva-devlab/ui 2.2.0 → 3.0.0

package/README.md

@@ -12,7 +12,7 @@
 
 ## What's New in v2.0.0
 
-- **Pure Platform CSS Architecture**: Completely eliminated Tailwind CSS runtime and utility dependencies from components. Component styling is strictly governed by W3C Cascade Layers (`@layer dl-base, dl-tokens, dl-components, dl-utilities`), eliminating CSS specificity conflicts and removing build-step plugin overhead.
+- **Pure Platform CSS Architecture**: Completely authored in pure platform CSS without third-party utility runtime dependencies. Component styling is strictly governed by W3C Cascade Layers (`@layer dl-base, dl-tokens, dl-components, dl-utilities`), eliminating CSS specificity conflicts and removing build-step plugin overhead.
 - **First-Class Typography Primitives**: Added `<Heading>` and `<Text>` primitives with decoupled semantic HTML tags (`as="h1"`..`as="h6"`, `span`, `div`) and visual scales (`size="display" | "h1".."h6"` and `variant="body-lg" | "body" | "body-sm" | "caption" | "code" | "metric"`).
 - **64+ Accessible UI Primitives**: Expanded catalog with Radix UI accessibility compliance and multi-brand responsiveness.
 - **Upgraded Design Tokens Peer**: Upgraded to `@yuva-devlab/tokens@^2.0.0` with isolated brand extensions and native VS Code autocomplete.
@@ -21,7 +21,7 @@
 
 ## Features
 
-- 🎨 **Multi-Brand Theme Architecture** - Seamless brand isolation across OrchestrAI, VitalAI, FinAI, Logs, and Portal.
+- 🎨 **Multi-Brand Theme Architecture** - Seamless brand isolation across OrchestrAI, FinAI, Logs, Portal, and KnowledgeAI.
 - 📐 **Dynamic Theme-Driven Sizing** - Automatic adaptation across brand densities (compact telemetry logs, precision finance tables, athletic kinetic scaling).
 - ⚡ **Pure Platform CSS** - Scoped W3C Cascade Layers (`@layer dl-components, dl-layout, dl-utilities`) and semantic design tokens.
 - 🔤 **Typography Primitives** - First-class `<Heading>` and `<Text>` primitives with semantic decoupling.
@@ -74,7 +74,7 @@ In your application's root stylesheet (e.g. `globals.css` or `app.css`), establi
 @import "@yuva-devlab/ui/styles.css";
 ```
 
-> **Tip:** You can import any theme preset from `@yuva-devlab/tokens/themes/*` (`finai`, `vitalai`, `logs`, `orchestrai`, `portal`).
+> **Tip:** You can import any theme preset from `@yuva-devlab/tokens/themes/*` (`finai`, `logs`, `orchestrai`, `portal`).
 
 ### 2. Render Components & Typography Primitives
 
@@ -172,7 +172,6 @@ DevLab UI supports multi-brand switching at runtime using `data-brand` and `data
 | Brand Key    | Theme Name        | Primary Aesthetic         | Token Import                                |
 | :----------- | :---------------- | :------------------------ | :------------------------------------------ |
 | `finai`      | **FinAI**         | High-Finance Emerald      | `@yuva-devlab/tokens/themes/finai.css`      |
-| `vitalai`    | **VitalAI**       | Athletic Volt Kinetic     | `@yuva-devlab/tokens/themes/vitalai.css`    |
 | `logs`       | **DevLab Logs**   | High-Density Matrix Amber | `@yuva-devlab/tokens/themes/logs.css`       |
 | `orchestrai` | **OrchestrAI**    | Midnight Neon Violet      | `@yuva-devlab/tokens/themes/orchestrai.css` |
 | `portal`     | **DevLab Portal** | Enterprise Modern Indigo  | `@yuva-devlab/tokens/themes/portal.css`     |
@@ -241,6 +240,7 @@ Explore the interactive component playground, live documentation, and API refere
 
 ---
 
-## License
+## Author & Attribution
 
-MIT © [Yuva DevLab](https://github.com/yuvadevlab)
+- **Author**: Yuva DevLab (`yuva.devlab@gmail.com`)
+- **License**: MIT

package/dist/components/checkpoint/checkpoint.css

@@ -33,6 +33,12 @@
   box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
 }
 
+.dl-checkpoint__icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--muted-foreground);
+}
+
 .dl-checkpoint__restore-btn {
   display: inline-flex;
   align-items: center;

package/dist/components/code-block/code-block.css

@@ -23,6 +23,18 @@
   color: var(--muted-foreground);
 }
 
+.dl-code-block__header-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dl-code-block__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
 .dl-code-block__filename {
   font-weight: 500;
   color: var(--foreground);

package/dist/components/file-tree/file-tree.css

@@ -56,3 +56,42 @@
   padding-left: 0.5rem;
   border-left: 1px solid var(--border);
 }
+
+.dl-file-tree__item {
+  display: flex;
+  flex-direction: column;
+}
+
+.dl-file-tree__chevron {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--muted-foreground);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+.dl-file-tree__chevron--open {
+  transform: rotate(90deg);
+}
+
+.dl-file-tree__glyph {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.dl-file-tree__glyph--muted {
+  color: var(--muted-foreground);
+}
+
+.dl-file-tree__glyph--warning {
+  color: var(--warning, #eab308);
+}
+
+.dl-file-tree__glyph--info {
+  color: var(--info, #3b82f6);
+}
+
+.dl-file-tree__glyph--primary {
+  color: var(--primary);
+}

package/dist/components/model-selector/model-selector.css

@@ -22,6 +22,55 @@
   font-family: inherit;
 }
 
+.dl-model-selector__trigger-label {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.dl-model-selector__chevron {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--muted-foreground);
+  transition: transform 0.2s ease;
+}
+
+.dl-model-selector__chevron--open {
+  transform: rotate(180deg);
+}
+
+.dl-model-selector__search-wrapper {
+  position: relative;
+}
+
+.dl-model-selector__search-icon {
+  position: absolute;
+  left: 0.5rem;
+  top: 0.625rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+.dl-model-selector__empty {
+  padding: 0.75rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+.dl-model-selector__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.dl-model-selector__provider {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  font-weight: 400;
+}
+
 .dl-model-selector__trigger:hover:not(:disabled) {
   background-color: var(--accent);
   color: var(--accent-foreground);

package/dist/components/multi-select/multi-select.css

@@ -81,6 +81,18 @@
   color: var(--foreground);
 }
 
+.dl-multi-select-chevron {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+}
+
+.dl-multi-select-chip__icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .dl-multi-select-content {
   width: var(--radix-popover-trigger-width);
   min-width: 14rem;

package/dist/components/plan/plan.css

@@ -104,3 +104,50 @@
   gap: 0.375rem;
   padding: 0.125rem 0;
 }
+
+.dl-plan__status-chip {
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dl-plan__status-chip--completed {
+  background-color: color-mix(in oklch, var(--success) 15%, transparent);
+  color: var(--success);
+}
+
+.dl-plan__status-chip--in-progress {
+  background-color: color-mix(in oklch, var(--primary) 15%, transparent);
+  color: var(--primary);
+}
+
+.dl-plan__status-chip--failed {
+  background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
+  color: var(--destructive);
+}
+
+.dl-plan__status-chip--pending {
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+}
+
+.dl-plan__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--muted-foreground);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.dl-plan__chevron--expanded {
+  transform: rotate(90deg);
+}
+
+.dl-plan__desc-block {
+  margin-bottom: 0.5rem;
+  line-height: 1.625;
+}

package/dist/components/prompt-input/prompt-input.css

@@ -62,6 +62,13 @@
   color: var(--foreground);
 }
 
+.dl-prompt-input__chip-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--muted-foreground);
+  flex-shrink: 0;
+}
+
 .dl-prompt-input__textarea {
   width: 100%;
   min-height: 3.5rem;

package/dist/components/queue/queue.css

@@ -74,3 +74,64 @@
   gap: 0.5rem;
   shrink: 0;
 }
+
+.dl-queue-item__priority {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dl-queue-item__priority--high {
+  background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
+  color: var(--destructive);
+}
+
+.dl-queue-item__priority--normal {
+  background-color: color-mix(in oklch, var(--primary) 15%, transparent);
+  color: var(--primary);
+}
+
+.dl-queue-item__priority--low {
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+}
+
+.dl-queue-item__duration {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  font-family: var(--font-mono, monospace);
+}
+
+.dl-queue-item__remove-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted-foreground);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.125rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  transition: color 0.15s ease;
+}
+
+.dl-queue-item__remove-btn:hover {
+  color: var(--foreground);
+}
+
+.dl-queue__header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.dl-queue__header-count {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  font-weight: 400;
+}

package/dist/components/search-input/search-input.css

@@ -19,3 +19,15 @@
   outline-offset: 2px;
   border-radius: var(--radius-sm, 0.25rem);
 }
+
+.dl-search-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.dl-search-spinner {
+  width: 1rem;
+  height: 1rem;
+  animation: dl-spin 1s linear infinite;
+  color: var(--muted-foreground);
+}

package/dist/components/sources/sources.css

@@ -93,6 +93,22 @@
   white-space: nowrap;
 }
 
+.dl-source-card__icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--muted-foreground);
+  flex-shrink: 0;
+}
+
+.dl-source-card__external {
+  width: 0.625rem;
+  height: 0.625rem;
+  margin-left: auto;
+  color: var(--muted-foreground);
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
 .dl-source-card__title {
   margin-top: 0.25rem;
   font-size: 0.75rem;

package/dist/components/stack-trace/stack-trace.css

@@ -80,6 +80,25 @@
   user-select: none;
 }
 
+.dl-stack-frame__fn-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.dl-stack-frame__chevron {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--muted-foreground);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+.dl-stack-frame__chevron--expanded {
+  transform: rotate(90deg);
+}
+
 .dl-stack-frame__fn {
   font-weight: 600;
   color: var(--primary);

package/dist/components/subagent/subagent.css

@@ -61,6 +61,53 @@
   gap: 0.375rem;
 }
 
+.dl-subagent__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.dl-subagent__status--running {
+  color: var(--primary);
+}
+
+.dl-subagent__status--completed {
+  color: var(--success);
+}
+
+.dl-subagent__status--failed {
+  color: var(--destructive);
+}
+
+.dl-subagent__status--idle {
+  color: var(--muted-foreground);
+}
+
+.dl-subagent__chip {
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm, 0.25rem);
+  font-size: 0.625rem;
+  font-family: var(--font-mono, monospace);
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+  border: 1px solid var(--border);
+}
+
+.dl-subagent__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--muted-foreground);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+}
+
+.dl-subagent__chevron--open {
+  transform: rotate(90deg);
+}
+
 .dl-subagent__content {
   padding: 0.75rem;
   background-color: var(--background);

package/dist/components/table/table.css

@@ -1,32 +1,52 @@
 .dl-table-wrapper {
   position: relative;
   width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .dl-table {
   width: 100%;
   caption-side: bottom;
-  font-size: 0.875rem;
+  font-size: var(--text-body, 0.875rem);
   border-collapse: collapse;
 }
+
 .dl-table__head tr {
   border-bottom: 1px solid var(--border);
 }
+
 .dl-table__body tr:last-child {
   border-bottom: none;
 }
-.dl-table__body tr:hover {
-  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
-}
+
 .dl-table__foot {
   border-top: 1px solid var(--border);
   font-weight: 500;
 }
+
 .dl-table__row {
   border-bottom: 1px solid var(--border);
-  transition: background-color 0.1s;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+/* Base subtle row hover */
+.dl-table__body tr:hover {
+  background-color: color-mix(in oklch, var(--muted) 40%, transparent);
+}
+
+/* Theme-Aware Enhanced Row Hover Highlighting */
+.dl-table--hoverable .dl-table__body tr:hover,
+.dl-table--hoverable .dl-table__row:hover,
+.dl-table__row--hoverable:hover {
+  background-color: var(
+    --table-row-hover,
+    color-mix(in oklch, var(--primary) 8%, transparent)
+  );
 }
+
 .dl-table__head-cell {
   height: var(--control-height-md, 2.5rem);
   padding: var(--table-row-padding-y, 0.5rem)
@@ -36,13 +56,15 @@
   color: var(--muted-foreground);
   white-space: nowrap;
 }
+
 .dl-table__cell {
   padding: var(--table-row-padding-y, 0.75rem)
     var(--table-row-padding-x, 0.75rem);
   vertical-align: middle;
 }
+
 .dl-table__caption {
   margin-top: 1rem;
-  font-size: 0.875rem;
+  font-size: var(--text-body-sm, 0.875rem);
   color: var(--muted-foreground);
 }

package/dist/components/terminal/terminal.css

@@ -21,6 +21,23 @@
   font-size: 0.75rem;
 }
 
+.dl-terminal__header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dl-terminal__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.dl-terminal__icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
 .dl-terminal__dots {
   display: flex;
   align-items: center;

package/dist/components/test-results/test-results.css

@@ -18,6 +18,23 @@
   border-bottom: 1px solid var(--border);
 }
 
+.dl-test-results__header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dl-test-results__title {
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+.dl-test-results__duration {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  font-family: var(--font-mono, monospace);
+}
+
 .dl-test-results__summary {
   display: flex;
   align-items: center;
@@ -70,6 +87,23 @@
   gap: 0.5rem;
 }
 
+.dl-test-case__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dl-test-case__chevron {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--muted-foreground);
+  transition: transform 0.15s ease;
+}
+
+.dl-test-case__chevron--expanded {
+  transform: rotate(90deg);
+}
+
 .dl-test-case__info {
   display: flex;
   align-items: center;