@yuva-devlab/ui 2.2.0 → 2.2.1

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.
@@ -241,6 +241,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/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;