@workerdeck/ui 2.15.0 → 3.0.1

package/build/scoped.css

@@ -635,6 +635,9 @@
   .wd-root .min-h-\[200px\] {
     min-height: 200px;
   }
+  .wd-root .min-h-full {
+    min-height: 100%;
+  }
   .wd-root .w-0\.5 {
     width: calc(var(--spacing) * 0.5);
   }
@@ -653,6 +656,9 @@
   .wd-root .w-9 {
     width: calc(var(--spacing) * 9);
   }
+  .wd-root .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
   .wd-root .w-14 {
     width: calc(var(--spacing) * 14);
   }
@@ -686,6 +692,9 @@
   .wd-root .w-full {
     width: 100%;
   }
+  .wd-root .w-max {
+    width: max-content;
+  }
   .wd-root .w-px {
     width: 1px;
   }
@@ -716,6 +725,9 @@
   .wd-root .max-w-md {
     max-width: var(--container-md);
   }
+  .wd-root .max-w-none {
+    max-width: none;
+  }
   .wd-root .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -749,6 +761,9 @@
   .wd-root .min-w-\[var\(--anchor-width\)\] {
     min-width: var(--anchor-width);
   }
+  .wd-root .min-w-full {
+    min-width: 100%;
+  }
   .wd-root .flex-1 {
     flex: 1;
   }
@@ -802,6 +817,9 @@
   .wd-root .cursor-default {
     cursor: default;
   }
+  .wd-root .cursor-grab {
+    cursor: grab;
+  }
   .wd-root .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -811,6 +829,9 @@
   .wd-root .cursor-row-resize {
     cursor: row-resize;
   }
+  .wd-root .cursor-zoom-in {
+    cursor: zoom-in;
+  }
   .wd-root .touch-none {
     touch-action: none;
   }
@@ -1239,6 +1260,12 @@
   .wd-root .bg-surface-hover {
     background-color: var(--bg-surface-hover);
   }
+  .wd-root .bg-surface-hover\/40 {
+    background-color: var(--bg-surface-hover);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--bg-surface-hover) 40%, transparent);
+    }
+  }
   .wd-root .bg-transparent {
     background-color: transparent;
   }
@@ -1371,6 +1398,9 @@
   .wd-root .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .wd-root .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
   .wd-root .pr-0\.5 {
     padding-right: calc(var(--spacing) * 0.5);
   }
@@ -2046,6 +2076,9 @@
   .wd-root .focus-visible\:ring-inset:focus-visible {
     --tw-ring-inset: inset;
   }
+  .wd-root .active\:cursor-grabbing:active {
+    cursor: grabbing;
+  }
   .wd-root .disabled\:pointer-events-none:disabled {
     pointer-events: none;
   }
@@ -2443,40 +2476,135 @@
 .wd-root .term-hoverable {
   position: relative;
 }
-.wd-root [data-terminal] .term-actions {
+:is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) .term-actions {
   position: absolute;
-  top: 0;
-  right: 0;
-  height: var(--term-line);
+  z-index: 1;
   display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity var(--motion-fast, 120ms);
+}
+.wd-root [data-terminal] .term-actions {
+  height: var(--term-line);
   gap: 1ch;
+}
+.wd-root [data-cards] .term-actions {
+  height: 20px;
+  gap: 6px;
+}
+:is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) [data-placement='below']>.term-actions {
+  top: 100%;
+}
+.wd-root [data-terminal] [data-placement='below']>.term-actions {
+  left: var(--term-cell);
+}
+.wd-root [data-cards] [data-placement='below']>.term-actions {
+  left: 0;
+}
+:is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) [data-placement='inline']>.term-actions {
+  top: 0;
+  right: 0;
   padding-inline: 1ch;
   background: var(--bg, transparent);
-  opacity: 0;
-  transition: opacity var(--motion-fast, 120ms);
 }
-.wd-root [data-terminal] .term-hoverable:hover .term-actions, .wd-root [data-terminal] .term-hoverable:focus-within .term-actions {
+:is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) [data-placement='below']:is(:hover,:focus-within):not(:has([data-placement='below']:is(:hover,:focus-within)))>.term-actions, :is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) [data-placement='inline']:is(:hover,:focus-within)>.term-actions {
   opacity: 1;
 }
+: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) {
+  z-index: 1;
+}
 @media (hover: none) {
-  .wd-root [data-terminal] .term-actions {
+  :is(.wd-root, .wd-root *):is([data-terminal],[data-cards]) .term-actions {
     opacity: 1;
   }
 }
+.wd-root [data-cards] .term-action {
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  height: 18px;
+  min-width: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding-inline: 5px;
+  color: var(--fg-3);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.wd-root [data-cards] .term-action-icon {
+  width: 14px;
+  height: 14px;
+  stroke-width: 2.25;
+  flex: none;
+}
+.wd-root [data-cards] .term-action-word {
+  padding-right: 2px;
+}
+.wd-root [data-cards] .term-action:hover, .wd-root [data-cards] .term-action:focus-visible {
+  color: var(--fg-1);
+  background: var(--row-hover);
+}
+.wd-root [data-cards] .term-action[data-tone='magenta'] {
+  color: var(--wd-shell-accent);
+}
+.wd-root [data-cards] .term-action[data-tone='yellow'] {
+  color: var(--warning);
+}
+.wd-root [data-cards] .term-action[data-tone='danger']:hover {
+  color: var(--danger);
+}
 .wd-root [data-terminal] .term-action {
   font: inherit;
-  line-height: var(--term-line);
+  font-weight: 500;
+  line-height: 1;
+  height: calc(var(--term-line) - 2px);
+  min-width: 3ch;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6ch;
+  padding-inline: 0.6ch;
   color: var(--term-dim);
-  background: none;
-  border: 0;
-  padding: 0;
+  background: var(--term-band-bg);
+  border: 1px solid var(--term-faint);
+  @supports (color: color-mix(in lab, red, red)) {
+    border: 1px solid color-mix(in srgb, var(--term-faint) 55%, transparent);
+  }
+  border-radius: 3px;
+  white-space: pre;
   cursor: pointer;
 }
+.wd-root [data-terminal] .term-action-icon {
+  width: calc(var(--term-font-size) + 1px);
+  height: calc(var(--term-font-size) + 1px);
+  stroke-width: 2.25;
+  flex: none;
+}
+.wd-root [data-terminal] .term-action-word {
+  padding-right: 0.2ch;
+}
+.wd-root [data-terminal] .term-action:hover, .wd-root [data-terminal] .term-action:focus-visible {
+  color: var(--term-bright);
+  border-color: var(--term-dim);
+  background: var(--term-row-hover);
+}
 .wd-root [data-terminal] .term-action[data-tone='magenta'] {
   color: var(--term-magenta);
 }
-.wd-root [data-terminal] .term-action:hover {
-  color: var(--term-fg);
+.wd-root [data-terminal] .term-action[data-tone='yellow'] {
+  color: var(--term-yellow);
+}
+.wd-root [data-terminal] .term-action[data-tone='danger']:hover {
+  color: var(--term-red);
 }
 .wd-root [data-terminal] .term-user {
   background: var(--term-user-bg);
@@ -2592,7 +2720,7 @@
 .wd-root [data-terminal] [data-sticky-lane]>[data-sticky-headlane] {
   position: absolute;
   inset: 0;
-  z-index: 1;
+  z-index: 2;
   pointer-events: none;
 }
 .wd-root [data-terminal] [data-sticky-headlane]>[data-sticky-head] {
@@ -2929,7 +3057,16 @@
   display: block;
   overflow: hidden;
 }
-.wd-root .term-image>img {
+.wd-root .term-image>[data-slot='viewable-image'] {
+  display: block;
+  height: 100%;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+.wd-root .term-image img {
+  display: block;
   max-width: 100%;
   height: 100%;
   object-fit: contain;
@@ -3354,6 +3491,9 @@
   left: 0;
   width: 12px;
 }
+.wd-root .wd-shell-term .xterm .xterm-viewport {
+  background-color: transparent;
+}
 .wd-root .wd-scrubber .wd-scrub-mark[data-kind='user'] {
   background: var(--accent);
 }