@workerdeck/ui 0.21.0 → 0.22.0

package/src/components/terminal/PermissionPrompt.tsx

@@ -27,12 +27,14 @@ export interface TerminalPermissionPromptProps {
   /** `message` is fed back to the agent, which can then try something else;
    * `interrupt` also stops the turn. */
   onDeny: (requestId: string, message?: string, interrupt?: boolean) => void
+  className?: string
 }
 
 export function TerminalPermissionPrompt({
   request,
   onApprove,
   onDeny,
+  className,
 }: TerminalPermissionPromptProps) {
   const [focused, setFocused] = useState(0)
   const [denying, setDenying] = useState(false)
@@ -75,6 +77,7 @@ export function TerminalPermissionPrompt({
   return (
     <div
       data-slot='permission-prompt'
+      className={className}
       onKeyDown={(event) => {
         if (event.key === 'Escape') {
           event.preventDefault()

package/src/components/terminal/QuestionPrompt.tsx

@@ -40,12 +40,14 @@ export interface TerminalQuestionPromptProps {
   onAnswer: (requestId: string, updatedInput: Record<string, unknown>) => void
   /** Deny the tool — the model proceeds without an answer. */
   onDismiss: (requestId: string, message?: string) => void
+  className?: string
 }
 
 export function TerminalQuestionPrompt({
   request,
   onAnswer,
   onDismiss,
+  className,
 }: TerminalQuestionPromptProps) {
   const questions = parseUserQuestions(request.input)
   const [selections, setSelections] = useState<Selection[]>(() => questions.map(() => EMPTY))
@@ -97,6 +99,7 @@ export function TerminalQuestionPrompt({
   return (
     <div
       data-slot='question-prompt'
+      className={className}
       onKeyDown={(event) => {
         if (event.key === 'Escape') {
           event.preventDefault()

package/src/components/terminal/StatusLine.tsx

@@ -38,6 +38,7 @@ const SEVERITY_TONE: Record<StatusSeverity, Tone> = {
 }
 
 export interface TerminalStatusLineProps {
+  className?: string
   state: TranscriptState
   /** Plan windows to read from, when they should not be the session's own — the
    * gateway's per-profile state merged over this transcript's. See
@@ -75,6 +76,7 @@ function Reading({
 }
 
 export function TerminalStatusLine({
+  className,
   state,
   rateLimits,
   connection,
@@ -147,7 +149,7 @@ export function TerminalStatusLine({
   }
 
   return (
-    <Row data-slot='status-line' tone='dim'>
+    <Row data-slot='status-line' tone='dim' className={className}>
       {parts.map((part, index) => (
         <span key={index}>
           {index > 0 ? <Ink tone='faint'> · </Ink> : null}

package/src/components/ui/AlertDialog.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent } from 'react'
 import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'
 import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
 
 export const AlertDialog = AlertDialogPrimitive.Root
 export const AlertDialogTrigger = AlertDialogPrimitive.Trigger
@@ -12,26 +13,28 @@ export const AlertDialogContent: FunctionComponent<AlertDialogPrimitive.Popup.Pr
   ...props
 }) => (
   <AlertDialogPrimitive.Portal>
-    <AlertDialogPrimitive.Backdrop
-      className={cn(
-        'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',
-        'transition-opacity duration-(--motion-base)',
-        'data-starting-style:opacity-0 data-ending-style:opacity-0',
-      )}
-    />
-    <AlertDialogPrimitive.Popup
-      data-slot='alert-dialog-content'
-      className={cn(
-        'fixed top-1/2 left-1/2 z-70 w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2',
-        'rounded-lg border border-border bg-surface p-5 shadow-(--shadow-lg) outline-none',
-        'transition-[opacity,transform] duration-(--motion-base)',
-        'data-starting-style:scale-95 data-starting-style:opacity-0',
-        'data-ending-style:scale-95 data-ending-style:opacity-0',
-        className,
-      )}
-      {...props}>
-      {children}
-    </AlertDialogPrimitive.Popup>
+    <PortalScope>
+      <AlertDialogPrimitive.Backdrop
+        className={cn(
+          'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',
+          'transition-opacity duration-(--motion-base)',
+          'data-starting-style:opacity-0 data-ending-style:opacity-0',
+        )}
+      />
+      <AlertDialogPrimitive.Popup
+        data-slot='alert-dialog-content'
+        className={cn(
+          'fixed top-1/2 left-1/2 z-70 w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2',
+          'rounded-lg border border-border bg-surface p-5 shadow-(--shadow-lg) outline-none',
+          'transition-[opacity,transform] duration-(--motion-base)',
+          'data-starting-style:scale-95 data-starting-style:opacity-0',
+          'data-ending-style:scale-95 data-ending-style:opacity-0',
+          className,
+        )}
+        {...props}>
+        {children}
+      </AlertDialogPrimitive.Popup>
+    </PortalScope>
   </AlertDialogPrimitive.Portal>
 )
 

package/src/components/ui/Dialog.tsx

@@ -2,6 +2,7 @@ import { type FunctionComponent } from 'react'
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
 import { X } from 'lucide-react'
 import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
 
 export const Dialog = DialogPrimitive.Root
 export const DialogTrigger = DialogPrimitive.Trigger
@@ -18,29 +19,31 @@ export const DialogContent: FunctionComponent<
   DialogPrimitive.Popup.Props & { size?: 'sm' | 'md' | 'lg' }
 > = ({ className, children, size = 'md', ...props }) => (
   <DialogPrimitive.Portal>
-    <DialogPrimitive.Backdrop
-      className={cn(
-        'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',
-        'transition-opacity duration-(--motion-base)',
-        'data-starting-style:opacity-0 data-ending-style:opacity-0',
-      )}
-    />
-    <DialogPrimitive.Popup
-      data-slot='dialog-content'
-      className={cn(
-        'fixed top-1/2 left-1/2 z-70 flex max-h-[min(42rem,calc(100dvh-3rem))] -translate-x-1/2 -translate-y-1/2 flex-col',
-        size === 'sm' && 'w-[min(24rem,calc(100vw-2rem))]',
-        size === 'md' && 'w-[min(32rem,calc(100vw-2rem))]',
-        size === 'lg' && 'w-[min(46rem,calc(100vw-2rem))]',
-        'rounded-lg border border-border bg-surface shadow-(--shadow-lg) outline-none',
-        'transition-[opacity,transform] duration-(--motion-base)',
-        'data-starting-style:scale-95 data-starting-style:opacity-0',
-        'data-ending-style:scale-95 data-ending-style:opacity-0',
-        className,
-      )}
-      {...props}>
-      {children}
-    </DialogPrimitive.Popup>
+    <PortalScope>
+      <DialogPrimitive.Backdrop
+        className={cn(
+          'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',
+          'transition-opacity duration-(--motion-base)',
+          'data-starting-style:opacity-0 data-ending-style:opacity-0',
+        )}
+      />
+      <DialogPrimitive.Popup
+        data-slot='dialog-content'
+        className={cn(
+          'fixed top-1/2 left-1/2 z-70 flex max-h-[min(42rem,calc(100dvh-3rem))] -translate-x-1/2 -translate-y-1/2 flex-col',
+          size === 'sm' && 'w-[min(24rem,calc(100vw-2rem))]',
+          size === 'md' && 'w-[min(32rem,calc(100vw-2rem))]',
+          size === 'lg' && 'w-[min(46rem,calc(100vw-2rem))]',
+          'rounded-lg border border-border bg-surface shadow-(--shadow-lg) outline-none',
+          'transition-[opacity,transform] duration-(--motion-base)',
+          'data-starting-style:scale-95 data-starting-style:opacity-0',
+          'data-ending-style:scale-95 data-ending-style:opacity-0',
+          className,
+        )}
+        {...props}>
+        {children}
+      </DialogPrimitive.Popup>
+    </PortalScope>
   </DialogPrimitive.Portal>
 )
 

package/src/components/ui/Menu.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent } from 'react'
 import { Menu as MenuPrimitive } from '@base-ui/react/menu'
 import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
 
 export const Menu = MenuPrimitive.Root
 export const MenuTrigger = MenuPrimitive.Trigger
@@ -10,23 +11,25 @@ export const MenuContent: FunctionComponent<
     Pick<MenuPrimitive.Positioner.Props, 'align' | 'side' | 'sideOffset'>
 > = ({ className, align = 'end', side = 'bottom', sideOffset = 6, ...props }) => (
   <MenuPrimitive.Portal>
-    <MenuPrimitive.Positioner
-      align={align}
-      side={side}
-      sideOffset={sideOffset}
-      className='isolate z-80 outline-none'>
-      <MenuPrimitive.Popup
-        data-slot='menu-content'
-        className={cn(
-          'min-w-48 rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none',
-          'transition-[opacity,transform] duration-(--motion-base)',
-          'data-starting-style:scale-95 data-starting-style:opacity-0',
-          'data-ending-style:scale-95 data-ending-style:opacity-0',
-          className,
-        )}
-        {...props}
-      />
-    </MenuPrimitive.Positioner>
+    <PortalScope>
+      <MenuPrimitive.Positioner
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        className='isolate z-80 outline-none'>
+        <MenuPrimitive.Popup
+          data-slot='menu-content'
+          className={cn(
+            'min-w-48 rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none',
+            'transition-[opacity,transform] duration-(--motion-base)',
+            'data-starting-style:scale-95 data-starting-style:opacity-0',
+            'data-ending-style:scale-95 data-ending-style:opacity-0',
+            className,
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </PortalScope>
   </MenuPrimitive.Portal>
 )
 

package/src/components/ui/PortalScope.tsx

@@ -0,0 +1,27 @@
+import { type FunctionComponent, type ReactNode } from 'react'
+
+/**
+ * Re-establishes the `.wd-root` styling scope inside a portal.
+ *
+ * The scoped stylesheet (`@workerdeck/ui/scoped.css`) rewrites every rule to
+ * live under `.wd-root`, so an embedder's page keeps its own design system and
+ * the panel keeps this one. Base UI popups (Menu, Dialog, AlertDialog, Select,
+ * Tooltip) portal to `document.body` — OUTSIDE the embedder's wrapper — so
+ * without this they would render unstyled, or worse, styled by the host.
+ *
+ * `display: contents` (inline, so no stylesheet needs to load for it) makes the
+ * element generate no box: positioning, hit-testing and the popup's own layout
+ * are untouched. It still carries the class, which is all the scope needs —
+ * design tokens declared on `.wd-root` inherit through it, and every
+ * `.wd-root <x>` rule matches below it. Theme keeps working because the dark
+ * token block matches `[data-theme='dark']` on ANY ancestor, and `document.body`
+ * sits under the host's themed `<html>` just like the panel does.
+ *
+ * Under the classic `theme.css` integration the class matches no rule and the
+ * element is inert, so the wrapper is unconditional.
+ */
+export const PortalScope: FunctionComponent<{ children?: ReactNode }> = ({ children }) => (
+  <div className='wd-root' style={{ display: 'contents' }}>
+    {children}
+  </div>
+)

package/src/components/ui/Select.tsx

@@ -2,6 +2,7 @@ import { type FunctionComponent } from 'react'
 import { Select as SelectPrimitive } from '@base-ui/react/select'
 import { Check, ChevronsUpDown } from 'lucide-react'
 import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
 
 export const Select = SelectPrimitive.Root
 export const SelectValue = SelectPrimitive.Value
@@ -40,22 +41,24 @@ export const SelectContent: FunctionComponent<
   ...props
 }) => (
   <SelectPrimitive.Portal>
-    <SelectPrimitive.Positioner
-      align={align}
-      alignItemWithTrigger={alignItemWithTrigger}
-      side={side}
-      sideOffset={sideOffset}
-      className='isolate z-80 outline-none'>
-      <SelectPrimitive.Popup
-        data-slot='select-content'
-        className={cn(
-          'max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto',
-          'rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none',
-          className,
-        )}
-        {...props}
-      />
-    </SelectPrimitive.Positioner>
+    <PortalScope>
+      <SelectPrimitive.Positioner
+        align={align}
+        alignItemWithTrigger={alignItemWithTrigger}
+        side={side}
+        sideOffset={sideOffset}
+        className='isolate z-80 outline-none'>
+        <SelectPrimitive.Popup
+          data-slot='select-content'
+          className={cn(
+            'max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto',
+            'rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none',
+            className,
+          )}
+          {...props}
+        />
+      </SelectPrimitive.Positioner>
+    </PortalScope>
   </SelectPrimitive.Portal>
 )
 

package/src/components/ui/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent, type ReactElement, type ReactNode } from 'react'
 import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
 import { cn } from '../../lib/utils.ts'
+import { PortalScope } from './PortalScope.tsx'
 
 export const TooltipProvider = TooltipPrimitive.Provider
 
@@ -8,16 +9,18 @@ export const TooltipContent: FunctionComponent<
   TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'side' | 'sideOffset'>
 > = ({ className, side = 'top', sideOffset = 6, ...props }) => (
   <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset} className='isolate z-90'>
-      <TooltipPrimitive.Popup
-        data-slot='tooltip-content'
-        className={cn(
-          'rounded-md border border-border bg-surface px-2 py-1 text-label text-fg-2 shadow-(--shadow-md) outline-none',
-          className,
-        )}
-        {...props}
-      />
-    </TooltipPrimitive.Positioner>
+    <PortalScope>
+      <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset} className='isolate z-90'>
+        <TooltipPrimitive.Popup
+          data-slot='tooltip-content'
+          className={cn(
+            'rounded-md border border-border bg-surface px-2 py-1 text-label text-fg-2 shadow-(--shadow-md) outline-none',
+            className,
+          )}
+          {...props}
+        />
+      </TooltipPrimitive.Positioner>
+    </PortalScope>
   </TooltipPrimitive.Portal>
 )
 

package/src/styles/scoped.entry.css

@@ -0,0 +1,16 @@
+/*
+ * Build entry for the SCOPED stylesheet (`@workerdeck/ui/scoped.css`) — see
+ * `scripts/build-scoped-css.mjs`, which compiles this with the Tailwind CLI and
+ * then rewrites every selector under `.wd-root`. Not shipped as-is and not an
+ * export: embedders import the compiled `scoped.css` artifact.
+ *
+ * `source(none)` + explicit `@source`: the utilities compiled here are exactly
+ * the ones this package's own components (and streamdown, whose markdown
+ * renderer ships Tailwind-classed markup) use — hermetic, independent of any
+ * host app's Tailwind build.
+ */
+@import 'tailwindcss' source(none);
+@source '../components';
+@source '../lib';
+@source '../../node_modules/streamdown/dist';
+@import './theme.css';

package/src/styles/terminal.css

@@ -595,7 +595,7 @@
 [data-terminal] .term-composer-body {
   margin-inline: auto;
   width: 100%;
-  max-width: var(--wd-content-max-w, 48rem);
+  max-width: var(--wd-transcript-max-width);
   padding-inline: var(--term-bleed, 0px);
   /* Air on each side of the prompt, and a plain pixel value rather than a
      fraction of `--term-line`: this is chrome between two rules, not a

package/src/styles/theme.css

@@ -151,6 +151,10 @@
   --shine: #dcdcdc;
   --frame-shadow: var(--shadow-xs);
 
+  /* The overview rail's bookmark magenta — the app palette has no magenta,
+     and every other colour on the rail is already spoken for. */
+  --wd-scrub-bookmark: #8b3a8b;
+
   /* ---------- aliases (bridge for the @theme utilities) ---------- */
   --surface: var(--bg-surface);
   --sidebar: #f4f4f4;
@@ -234,6 +238,9 @@
     0 4px 24px rgba(0, 0, 0, 0.55),
     0 2px 6px rgba(0, 0, 0, 0.45);
 
+  /* See the light block — lifted for the dark ground. */
+  --wd-scrub-bookmark: #c586c0;
+
   /* ---------- aliases ---------- */
   --surface: var(--bg-surface);
   --sidebar: #131313;
@@ -267,6 +274,12 @@
   --motion-base: 150ms;
   --motion-slow: 220ms;
 
+  /* ---------- Geometry (embedder-overridable layout knobs) ---------- */
+  --wd-status-bar-height: 38px;
+  --wd-composer-padding: 12px;
+  --wd-transcript-row-gap: 0px;
+  --wd-transcript-max-width: 48rem;
+
   /* Stock-name bridge → raw custom properties (shadcn idiom compatibility). */
   --primary: var(--accent);
   --primary-foreground: var(--accent-fg);
@@ -611,3 +624,150 @@
     transition: none !important;
   }
 }
+
+/* ── Sticky prompt (cards variant) ─────────────────────────────────────────
+ *
+ * The same lane/head/sentinel mechanism as the terminal theme's pinned prompt
+ * (terminal.css scopes its rules under `[data-terminal]`; these key on the
+ * lane's own `data-sticky-lane='cards'` value) — but the head's CONTENT is
+ * different in kind, and that is the whole design. The terminal head is the
+ * row rendered again, clipped to one line — exact, because that theme is a
+ * monospace grid. A proportional message card clipped by height is a sliced
+ * bubble, so the cards head never renders the Message component at all:
+ * `StickyPromptLane` (Transcript.tsx) hands it the prompt as one run of plain
+ * text, and these rules only draw a bar. Nothing to flatten, nothing to
+ * un-style, nothing to `!important` over.
+ *
+ * Alignment is by construction, not restatement: the lane sits inside
+ * ConversationContent's centred, padded column (`max-w` + `mx-auto` + `px-4`)
+ * and spans it edge to edge, so the bar's text starts on the same left edge
+ * as the response paragraphs and the ellipsis lands on the column's right
+ * edge — no max-width or inline padding repeated here. The bar carries no
+ * gap class either (the measured row keeps it): it is not an overlay of the
+ * row's first line, so it has no in-flow y to match, and the 1st prompt (no
+ * gap) and every later one (pt-4/pt-2) share these rules unchanged. */
+[data-slot='transcript-rows'] > [data-sticky-lane='cards'] {
+  z-index: 3;
+  pointer-events: none;
+}
+
+/* The head's own strip: the full lane, out of flow — see terminal.css for why
+   sticky confinement wants the border box, not a cancelled margin box. */
+[data-sticky-lane='cards'] > [data-sticky-headlane] {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* The bar: ~28px, one line centred by its own line-height, truncated at the
+   column's right edge, on a frosted ground so the rows passing beneath read
+   as beneath. Hidden until actually stuck (`data-stuck`, set by the lane's
+   sentinel observer): unstuck it sits at the lane's top, over the real
+   bubble. */
+[data-sticky-lane='cards'] > [data-sticky-headlane] > [data-sticky-head] {
+  position: sticky;
+  top: 0;
+  height: 1.75rem;
+  line-height: 1.75rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--text-body-sm);
+  color: var(--fg-2);
+  background: color-mix(in srgb, var(--bg) 88%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+  user-select: none;
+  visibility: hidden;
+}
+
+[data-sticky-lane='cards'] > [data-sticky-headlane] > [data-sticky-head][data-stuck] {
+  visibility: visible;
+}
+
+/* ── Overview scrubber (cards variant) ──────────────────────────────────────
+ *
+ * The proportional rail (`components/agent/Scrubber.tsx`): same geometry as the
+ * terminal rail — 12px, two 6px lanes plus full width — and the same palette
+ * mapped onto the app tokens. It is an annotation rail, never a scrollbar: the
+ * container takes no pointer events, so the native scrollbar keeps working
+ * straight through the paint. */
+.wd-scrubber {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 12px;
+  z-index: 10;
+  pointer-events: none;
+}
+.wd-scrubber .wd-scrub-mark {
+  position: absolute;
+  min-height: 2px;
+}
+.wd-scrubber[data-interactive] .wd-scrub-mark {
+  pointer-events: auto;
+  cursor: pointer;
+}
+.wd-scrubber[data-interactive] .wd-scrub-mark:hover {
+  outline: 1px solid color-mix(in srgb, var(--fg-1) 40%, transparent);
+}
+.wd-scrubber .wd-scrub-mark[data-lane='l'] { left: 0; width: 6px; }
+.wd-scrubber .wd-scrub-mark[data-lane='r'] { left: 6px; width: 6px; }
+.wd-scrubber .wd-scrub-mark[data-lane='f'] { left: 0; width: 12px; }
+.wd-scrubber .wd-scrub-mark[data-kind='user'] { background: var(--accent); }
+.wd-scrubber .wd-scrub-mark[data-kind='subagent'] { background: var(--success); }
+.wd-scrubber .wd-scrub-mark[data-kind='turn'] { background: var(--fg-3); }
+.wd-scrubber .wd-scrub-mark[data-kind='turnFailed'] { background: var(--danger); }
+.wd-scrubber .wd-scrub-mark[data-kind='error'] { background: var(--danger); }
+.wd-scrubber .wd-scrub-mark[data-kind='toolFailed'] {
+  background: color-mix(in srgb, var(--danger) 55%, transparent);
+}
+.wd-scrubber .wd-scrub-mark[data-kind='bookmark'] { background: var(--wd-scrub-bookmark); }
+.wd-scrubber .wd-scrub-mark[data-kind='approval'] {
+  background: var(--warning);
+  animation: wd-scrub-pulse 1.2s infinite;
+}
+.wd-scrubber .wd-scrub-mark[data-kind='recap'] {
+  background: repeating-linear-gradient(to right, var(--fg-4) 0 3px, transparent 3px 6px)
+    left center / 100% 1px no-repeat;
+}
+@keyframes wd-scrub-pulse {
+  50% { opacity: 0.3; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wd-scrubber .wd-scrub-mark[data-kind='approval'] {
+    animation: none;
+  }
+}
+
+.wd-scrubber .wd-scrub-peek {
+  position: absolute;
+  right: calc(100% + 6px);
+  width: 320px;
+  max-width: 60vw;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md, 6px);
+  background: var(--bg);
+  box-shadow: var(--shadow-md);
+  font-family: var(--cw-font-sans);
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--fg-1);
+  pointer-events: none;
+  z-index: 11;
+}
+.wd-scrubber .wd-scrub-peek [data-tone='muted'] { color: var(--fg-3); }
+.wd-scrubber .wd-scrub-peek [data-tone='danger'] { color: var(--danger); }
+.wd-scrubber .wd-scrub-ex {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}