@hachej/boring-workspace 0.1.33 → 0.1.35

package/dist/testing.js

@@ -1,7 +1,7 @@
 import { jsx as Ba } from "react/jsx-runtime";
 import * as Pa from "react";
 import { createElement as is, useMemo as wn, useLayoutEffect as us, isValidElement as ss, cloneElement as ds, useSyncExternalStore as Gi } from "react";
-import { h as cs, q as fs, o as ps } from "./WorkspaceProvider-CuIZx1ua.js";
+import { h as cs, q as fs, o as ps } from "./WorkspaceProvider-BhRPFy5R.js";
 import { d as ms } from "./panel-DnvDNQac.js";
 import * as bs from "react-dom/test-utils";
 import ka from "react-dom";

package/dist/workspace.css

@@ -1589,15 +1589,15 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
-  }
   .mt-px {
     margin-top: 1px;
   }
   .mr-auto {
     margin-right: auto;
   }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
   .mb-1\.5 {
     margin-bottom: calc(var(--spacing) * 1.5);
   }
@@ -1763,6 +1763,9 @@
   .w-7 {
     width: calc(var(--spacing) * 7);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
   .w-9 {
     width: calc(var(--spacing) * 9);
   }
@@ -1814,14 +1817,17 @@
   .min-w-\[10rem\] {
     min-width: 10rem;
   }
+  .min-w-\[350px\] {
+    min-width: 350px;
+  }
   .flex-1 {
     flex: 1;
   }
   .flex-\[0_0_0px\] {
     flex: 0 0 0px;
   }
-  .flex-none {
-    flex: none;
+  .flex-\[1_0_350px\] {
+    flex: 1 0 350px;
   }
   .shrink-0 {
     flex-shrink: 0;
@@ -1852,6 +1858,9 @@
   .cursor-col-resize {
     cursor: col-resize;
   }
+  .cursor-grab {
+    cursor: grab;
+  }
   .cursor-nwse-resize {
     cursor: nwse-resize;
   }
@@ -1951,6 +1960,9 @@
   .self-center {
     align-self: center;
   }
+  .self-stretch {
+    align-self: stretch;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1968,12 +1980,18 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
+  .rounded-\[5px\] {
+    border-radius: 5px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1992,6 +2010,10 @@
   .rounded-xl {
     border-radius: var(--boring-radius-xl);
   }
+  .rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -2076,6 +2098,12 @@
   .bg-\[color\:oklch\(from_var\(--background\)_calc\(l-0\.01\)_c_h\)\] {
     background-color: oklch(from var(--background) calc(l - 0.01) c h);
   }
+  .bg-\[color\:oklch\(from_var\(--border\)_l_c_h\/0\.7\)\] {
+    background-color: oklch(from var(--border) l c h/0.7);
+  }
+  .bg-\[color\:oklch\(from_var\(--foreground\)_l_c_h\/0\.035\)\] {
+    background-color: oklch(from var(--foreground) l c h/0.035);
+  }
   .bg-\[color\:var\(--accent\)\] {
     background-color: var(--accent);
   }
@@ -2112,6 +2140,15 @@
       background-color: color-mix(in oklab, var(--boring-card) 60%, transparent);
     }
   }
+  .bg-destructive {
+    background-color: var(--boring-destructive);
+  }
+  .bg-destructive\/12 {
+    background-color: var(--boring-destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--boring-destructive) 12%, transparent);
+    }
+  }
   .bg-foreground {
     background-color: var(--boring-foreground);
   }
@@ -2121,18 +2158,42 @@
       background-color: color-mix(in oklab, var(--boring-foreground) 5%, transparent);
     }
   }
+  .bg-foreground\/10 {
+    background-color: var(--boring-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--boring-foreground) 10%, transparent);
+    }
+  }
+  .bg-foreground\/30 {
+    background-color: var(--boring-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--boring-foreground) 30%, transparent);
+    }
+  }
   .bg-foreground\/35 {
     background-color: var(--boring-foreground);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--boring-foreground) 35%, transparent);
     }
   }
+  .bg-foreground\/70 {
+    background-color: var(--boring-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--boring-foreground) 70%, transparent);
+    }
+  }
   .bg-foreground\/\[0\.06\] {
     background-color: var(--boring-foreground);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--boring-foreground) 6%, transparent);
     }
   }
+  .bg-foreground\/\[0\.07\] {
+    background-color: var(--boring-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--boring-foreground) 7.000000000000001%, transparent);
+    }
+  }
   .bg-muted {
     background-color: var(--boring-muted);
   }
@@ -2142,6 +2203,12 @@
       background-color: color-mix(in oklab, var(--boring-muted) 30%, transparent);
     }
   }
+  .bg-muted\/35 {
+    background-color: var(--boring-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--boring-muted) 35%, transparent);
+    }
+  }
   .bg-muted\/40 {
     background-color: var(--boring-muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2166,6 +2233,9 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .fill-current {
+    fill: currentcolor;
+  }
   .object-contain {
     object-fit: contain;
   }
@@ -2220,6 +2290,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -2289,6 +2362,9 @@
   .text-left {
     text-align: left;
   }
+  .text-right {
+    text-align: right;
+  }
   .align-baseline {
     vertical-align: baseline;
   }
@@ -2325,6 +2401,9 @@
   .text-\[13px\] {
     font-size: 13px;
   }
+  .text-\[14px\] {
+    font-size: 14px;
+  }
   .text-\[15px\] {
     font-size: 15px;
   }
@@ -2417,6 +2496,12 @@
   .text-foreground {
     color: var(--boring-foreground);
   }
+  .text-foreground\/40 {
+    color: var(--boring-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--boring-foreground) 40%, transparent);
+    }
+  }
   .text-foreground\/65 {
     color: var(--boring-foreground);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2429,6 +2514,12 @@
       color: color-mix(in oklab, var(--boring-foreground) 70%, transparent);
     }
   }
+  .text-foreground\/80 {
+    color: var(--boring-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--boring-foreground) 80%, transparent);
+    }
+  }
   .text-foreground\/90 {
     color: var(--boring-foreground);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2502,6 +2593,9 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-60 {
+    opacity: 60%;
+  }
   .opacity-70 {
     opacity: 70%;
   }
@@ -2527,6 +2621,10 @@
     --tw-shadow: 0 1px 2px -1px var(--tw-shadow-color, oklch(0 0 0/0.08)), 0 12px 32px -22px var(--tw-shadow-color, oklch(0 0 0/0.28));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[inset_0_0_0_2px_oklch\(from_var\(--foreground\)_l_c_h\/0\.55\)\] {
+    --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, oklch(from var(--foreground) l c h/0.55));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2590,6 +2688,16 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[background-color\,box-shadow\] {
+    transition-property: background-color,box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[flex-grow\,flex-basis\,min-width\] {
+    transition-property: flex-grow,flex-basis,min-width;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[flex-grow\,flex-basis\,width\,min-width\,max-width\] {
     transition-property: flex-grow,flex-basis,width,min-width,max-width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2632,6 +2740,10 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-\[240ms\] {
+    --tw-duration: 240ms;
+    transition-duration: 240ms;
+  }
   .duration-\[280ms\] {
     --tw-duration: 280ms;
     transition-duration: 280ms;
@@ -2652,8 +2764,12 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .\[scrollbar-width\:none\] {
-    scrollbar-width: none;
+  .group-hover\:text-muted-foreground {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--boring-muted-foreground);
+      }
+    }
   }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
@@ -2680,6 +2796,45 @@
       }
     }
   }
+  .before\:absolute {
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .before\:top-0 {
+    &::before {
+      content: var(--tw-content);
+      top: calc(var(--spacing) * 0);
+    }
+  }
+  .before\:-right-1\.5 {
+    &::before {
+      content: var(--tw-content);
+      right: calc(var(--spacing) * -1.5);
+    }
+  }
+  .before\:h-full {
+    &::before {
+      content: var(--tw-content);
+      height: 100%;
+    }
+  }
+  .before\:w-1\.5 {
+    &::before {
+      content: var(--tw-content);
+      width: calc(var(--spacing) * 1.5);
+    }
+  }
+  .before\:bg-muted\/35 {
+    &::before {
+      content: var(--tw-content);
+      background-color: var(--boring-muted);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--boring-muted) 35%, transparent);
+      }
+    }
+  }
   .hover\:-translate-y-0\.5 {
     &:hover {
       @media (hover: hover) {
@@ -2723,6 +2878,16 @@
       }
     }
   }
+  .hover\:bg-background\/70 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--boring-background);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--boring-background) 70%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-border\/70 {
     &:hover {
       @media (hover: hover) {
@@ -2760,6 +2925,16 @@
       }
     }
   }
+  .hover\:bg-muted\/35 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--boring-muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--boring-muted) 35%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-muted\/60 {
     &:hover {
       @media (hover: hover) {
@@ -2818,6 +2993,16 @@
       }
     }
   }
+  .hover\:text-foreground\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--boring-foreground);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--boring-foreground) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:shadow-\[0_2px_4px_-1px_oklch\(0_0_0\/0\.08\)\,0_4px_12px_-4px_oklch\(0_0_0\/0\.10\)\,inset_0_0_0_1px_oklch\(from_var\(--border\)_l_c_h\/0\.9\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2899,6 +3084,11 @@
       outline-style: none;
     }
   }
+  .active\:cursor-grabbing {
+    &:active {
+      cursor: grabbing;
+    }
+  }
   .active\:bg-muted-foreground\/30 {
     &:active {
       background-color: var(--boring-muted-foreground);
@@ -2932,24 +3122,6 @@
       color: var(--boring-foreground);
     }
   }
-  .data-\[state\=active\]\:text-\[color\:var\(--accent\)\] {
-    &[data-state="active"] {
-      color: var(--accent);
-    }
-  }
-  .data-\[state\=active\]\:text-foreground {
-    &[data-state="active"] {
-      color: var(--boring-foreground);
-    }
-  }
-  .data-\[state\=active\]\:after\:bg-\[color\:var\(--accent\)\] {
-    &[data-state="active"] {
-      &::after {
-        content: var(--tw-content);
-        background-color: var(--accent);
-      }
-    }
-  }
   .dark\:bg-transparent {
     &:is(.dark *) {
       background-color: transparent;
@@ -2960,11 +3132,6 @@
       text-indent: calc(var(--spacing) * 0) !important;
     }
   }
-  .\[\&\:\:-webkit-scrollbar\]\:hidden {
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
   .\[\&\>\[data-slot\=command-input-wrapper\]\]\:h-auto {
     &>[data-slot=command-input-wrapper] {
       height: auto;
@@ -6110,6 +6277,49 @@
   padding: 0 2px;
   border-radius: 2px;
 }
+.boring-scrollbar-discreet {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(from var(--foreground) l c h / 0.14) transparent;
+}
+.boring-scrollbar-discreet::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.boring-scrollbar-discreet::-webkit-scrollbar-track {
+  background: transparent;
+}
+.boring-scrollbar-discreet::-webkit-scrollbar-thumb {
+  background-color: oklch(from var(--foreground) l c h / 0.12);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+.boring-scrollbar-discreet:hover::-webkit-scrollbar-thumb {
+  background-color: oklch(from var(--foreground) l c h / 0.22);
+}
+.boring-scrollbar-discreet::-webkit-scrollbar-thumb:hover {
+  background-color: oklch(from var(--foreground) l c h / 0.34);
+}
+[data-boring-workspace] {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(from var(--foreground) l c h / 0.14) transparent;
+}
+[data-boring-workspace] ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+[data-boring-workspace] ::-webkit-scrollbar-track {
+  background: transparent;
+}
+[data-boring-workspace] ::-webkit-scrollbar-thumb {
+  background-color: oklch(from var(--foreground) l c h / 0.12);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+[data-boring-workspace] ::-webkit-scrollbar-thumb:hover {
+  background-color: oklch(from var(--foreground) l c h / 0.3);
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -6654,3 +6864,91 @@
   border-radius: calc(var(--radius) - 2px);
   box-shadow: 0 4px 12px oklch(0 0 0 / 0.15);
 }
+
+
+/* @hachej/boring-workspace chat pane stage */
+
+/* Chat pane stage — compact dockview chrome scoped under .dv-chat-stage.
+   Inherits the token mapping from dockview-overrides.css (.dv-shell). */
+
+.dv-chat-stage {
+  --dv-tabs-and-actions-container-height: 32px;
+  --dv-tabs-and-actions-container-font-size: 0.75rem;
+
+  /* Panes, not tabs: no pill — the header shares the pane background and
+     blends seamlessly into the content (no separating border). */
+  --dv-activegroup-visiblepanel-tab-background-color: transparent;
+  --dv-activegroup-hiddenpanel-tab-background-color: transparent;
+  --dv-inactivegroup-visiblepanel-tab-background-color: transparent;
+  --dv-inactivegroup-hiddenpanel-tab-background-color: transparent;
+}
+
+/* Neutralize the workbench pill-tab chrome (.dv-shell .dv-tab in
+   dockview-overrides.css): no rounded corners, no active-tab border or
+   accent, no header underline, no tab sizing caps. The double class on
+   the stage root (.dv-shell.dv-chat-stage) out-specifies the workbench
+   rules; the header must read as part of the pane, not a tab strip. */
+.dv-shell.dv-chat-stage .dv-tabs-and-actions-container {
+  border-bottom: none;
+  padding: 0;
+  gap: 0;
+  align-items: stretch;
+}
+
+/* dockview's fullwidth single-tab rules stop at the scroll wrapper; carry
+   the full width down to the tab itself. */
+.dv-shell.dv-chat-stage .dv-tabs-and-actions-container.dv-single-tab .dv-tabs-container {
+  width: 100%;
+}
+
+.dv-shell.dv-chat-stage .dv-tab,
+.dv-shell.dv-chat-stage .dv-tab.dv-active-tab {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  max-width: none;
+  flex: 1 1 auto;
+  align-self: stretch;
+  margin-bottom: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background-color: transparent !important;
+}
+
+.dv-shell.dv-chat-stage .dv-tab.dv-active-tab::before {
+  content: none;
+}
+
+/* The chat stage hides dockview's built-in tab close icon entirely — the
+   custom header renders its own close control with pane semantics. */
+.dv-chat-stage .dv-default-tab-action {
+  display: none;
+}
+
+/* Active-pane focus ring drawn at the GROUP level so it wraps the whole
+   pane — header included. Always present but transparent, so activation
+   fades instead of popping. Only meaningful with 2+ panes; the stage
+   wrapper gates it via data-multi-pane. */
+.dv-chat-stage .dv-groupview {
+  position: relative;
+}
+
+.dv-chat-stage .dv-groupview::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  pointer-events: none;
+  background: transparent;
+  transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* The selected chat stays white; the others recede behind a faint grey
+   wash. No border on the active pane — the background contrast alone marks
+   the selection. */
+[data-boring-workspace-part="chat-pane-stage"][data-multi-pane="true"]
+  .dv-groupview:not(.dv-active-group)::after {
+  background: oklch(from var(--foreground) l c h / 0.035);
+}