@workerdeck/ui 3.3.0 → 3.5.0

package/build/scoped.css

@@ -311,18 +311,27 @@
   .wd-root .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .wd-root .-bottom-1 {
+    bottom: calc(var(--spacing) * -1);
+  }
   .wd-root .bottom-0 {
     bottom: 0px;
   }
   .wd-root .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
+  .wd-root .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
   .wd-root .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
   .wd-root .bottom-full {
     bottom: 100%;
   }
+  .wd-root .-left-\[7px\] {
+    left: calc(7px * -1);
+  }
   .wd-root .left-0 {
     left: 0px;
   }
@@ -455,6 +464,12 @@
   .wd-root .ml-1 {
     margin-left: var(--spacing);
   }
+  .wd-root .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .wd-root .ml-3\.5 {
+    margin-left: calc(var(--spacing) * 3.5);
+  }
   .wd-root .ml-auto {
     margin-left: auto;
   }
@@ -501,6 +516,10 @@
     width: calc(var(--spacing) * 1.5);
     height: calc(var(--spacing) * 1.5);
   }
+  .wd-root .size-1\/2 {
+    width: calc(1 / 2 * 100%);
+    height: calc(1 / 2 * 100%);
+  }
   .wd-root .size-2 {
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
@@ -714,6 +733,9 @@
   .wd-root .max-w-12 {
     max-width: calc(var(--spacing) * 12);
   }
+  .wd-root .max-w-32 {
+    max-width: calc(var(--spacing) * 32);
+  }
   .wd-root .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
@@ -753,6 +775,9 @@
   .wd-root .min-w-36 {
     min-width: calc(var(--spacing) * 36);
   }
+  .wd-root .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
+  }
   .wd-root .min-w-44 {
     min-width: calc(var(--spacing) * 44);
   }
@@ -997,6 +1022,9 @@
   .wd-root .rounded {
     border-radius: 0.25rem;
   }
+  .wd-root .rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .wd-root .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -1058,6 +1086,12 @@
   .wd-root .border-\[var\(--wd-shell-accent\)\] {
     border-color: var(--wd-shell-accent);
   }
+  .wd-root .border-accent\/50 {
+    border-color: var(--accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    }
+  }
   .wd-root .border-border {
     border-color: var(--border);
   }
@@ -1133,6 +1167,12 @@
   .wd-root .bg-accent-bg {
     background-color: var(--accent-bg);
   }
+  .wd-root .bg-accent\/10 {
+    background-color: var(--accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--accent) 10%, transparent);
+    }
+  }
   .wd-root .bg-background {
     background-color: var(--background);
   }
@@ -1346,6 +1386,9 @@
   .wd-root .p-px {
     padding: 1px;
   }
+  .wd-root .px-0\.5 {
+    padding-inline: calc(var(--spacing) * 0.5);
+  }
   .wd-root .px-1 {
     padding-inline: var(--spacing);
   }
@@ -1469,6 +1512,9 @@
   .wd-root .pb-\[var\(--wd-composer-padding\)\] {
     padding-bottom: var(--wd-composer-padding);
   }
+  .wd-root .pl-1 {
+    padding-left: var(--spacing);
+  }
   .wd-root .pl-1\.5 {
     padding-left: calc(var(--spacing) * 1.5);
   }
@@ -1565,9 +1611,16 @@
   .wd-root .text-\[0\.75rem\] {
     font-size: 0.75rem;
   }
+  .wd-root .text-\[0\.625rem\] {
+    font-size: 0.625rem;
+  }
   .wd-root .text-\[9px\] {
     font-size: 9px;
   }
+  .wd-root .leading-3\.5 {
+    --tw-leading: calc(var(--spacing) * 3.5);
+    line-height: calc(var(--spacing) * 3.5);
+  }
   .wd-root .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
@@ -1784,6 +1837,10 @@
     --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .wd-root .shadow-\[inset_0_-2px_0_0_var\(--color-accent\)\] {
+    --tw-shadow: inset 0 -2px 0 0 var(--tw-shadow-color, var(--color-accent));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .wd-root .shadow-\[inset_0_2px_0_0_var\(--color-accent\)\] {
     --tw-shadow: inset 0 2px 0 0 var(--tw-shadow-color, var(--color-accent));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1804,10 +1861,23 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .wd-root .ring-1 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .wd-root .ring-2 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .wd-root .ring-accent {
+    --tw-ring-color: var(--accent);
+  }
+  .wd-root .ring-danger\/60 {
+    --tw-ring-color: var(--danger);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--danger) 60%, transparent);
+    }
+  }
   .wd-root .ring-ring\/30 {
     --tw-ring-color: var(--ring);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1822,6 +1892,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .wd-root .grayscale {
+    --tw-grayscale: grayscale(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .wd-root .backdrop-blur-\[1px\] {
     --tw-backdrop-blur: blur(1px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1900,6 +1974,9 @@
   .wd-root .\[counter-reset\:line\] {
     counter-reset: line;
   }
+  .wd-root .\[image-rendering\:pixelated\] {
+    image-rendering: pixelated;
+  }
   @media (hover: hover) {
     .wd-root .group-hover\:block:is(:where(.group):hover *) {
       display: block;
@@ -2558,9 +2635,12 @@
 :is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) [data-slot='transcript-rows'] [data-index]:not(.absolute) {
   position: relative;
 }
-:is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) [data-slot='transcript-rows'] [data-index]:is(:hover,:focus-within) {
+:is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) [data-slot='transcript-rows'] [data-index]:focus-within {
   z-index: 1;
 }
+:is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) [data-slot='transcript-rows'] [data-index]:hover {
+  z-index: 2;
+}
 @media (hover: none) {
   :is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) .term-actions {
     opacity: 1;
@@ -2756,9 +2836,11 @@
   color: var(--term-faint);
 }
 .wd-root [data-terminal] [data-slot='transcript-rows']>[data-sticky-lane] {
-  z-index: 3;
   pointer-events: none;
 }
+.wd-root [data-terminal] [data-slot='transcript-rows']>[data-sticky-lane]:has(>[data-sticky-headlane]>[data-stuck]) {
+  z-index: 3;
+}
 .wd-root [data-terminal] [data-sticky-lane]>[data-index] {
   pointer-events: auto;
 }
@@ -3413,6 +3495,23 @@
   opacity: 0;
   animation: wd-hold-appear 150ms ease-out 600ms forwards;
 }
+@keyframes wd-avatar-strip {
+  to {
+    background-position-x: var(--wd-strip-end);
+  }
+}
+.wd-root .wd-avatar-strip {
+  image-rendering: pixelated;
+  background-repeat: no-repeat;
+  animation-name: wd-avatar-strip;
+  animation-timing-function: steps(var(--wd-strip-steps));
+  animation-iteration-count: infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wd-root .wd-avatar-strip {
+    animation: none;
+  }
+}
 @keyframes prompt-area-chip-ripple {
   0% {
     transform: scale(0);
@@ -3470,9 +3569,11 @@
   }
 }
 .wd-root [data-slot='transcript-rows']>[data-sticky-lane='cards'] {
-  z-index: 3;
   pointer-events: none;
 }
+.wd-root [data-slot='transcript-rows']>[data-sticky-lane='cards']:has(>[data-sticky-headlane]>[data-stuck]) {
+  z-index: 3;
+}
 .wd-root [data-sticky-lane='cards']>[data-sticky-headlane] {
   position: absolute;
   inset: 0;