@arbidocs/react 0.3.185 → 0.4.0

package/dist/{chunk-YJAYST7S.js → chunk-3CLGHHME.js}

@@ -1,12 +1,11 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { cn, getCollisionPadding, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator } from './chunk-6ALMBER7.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React2 from 'react';
-import React2__default, { createContext, forwardRef, memo, useMemo, useContext, useState, useRef, useEffect, useCallback, useId } from 'react';
+import React2__default, { createContext, forwardRef, memo, useMemo, useContext, useState, useRef, useEffect, useCallback, useId, Fragment as Fragment$1 } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
-import { Circle, Check, X, ChevronRight, ChevronDown, ChevronUp, Search, MessageCircleMore, Loader2, Square, Mic, MoreVertical, Copy, MessageSquareLock, Info, FileQuestion, BookOpen, Upload, LogOut, LayoutGrid, Bell, MessageSquare, CircleUserRound, Wrench, CreditCard, ClipboardList, UserPlus, UserStar, Settings2, Users, User, NotebookPen, NotebookText, StickyNote, FolderPlus, Hash, EyeOff, Eye, CaptionsOff, FolderOpen, MessageSquareMore, MessageSquarePlus, MessageSquareText, MessageSquareOff, MessagesSquare, Columns3Cog, SquarePlus, SquareM, ChevronsDown, Bot, Calendar, Folder, List, SquareCheckBig, Minus, Plus } from 'lucide-react';
+import { Circle, Check, X, ChevronDown, ChevronUp, Search, MessageCircleMore, Loader2, Square, Mic, MoreVertical, Copy, MessageSquareLock, Info, FileQuestion, BookOpen, Upload, LogOut, LayoutGrid, Bell, MessageSquare, CircleUserRound, Wrench, CreditCard, ClipboardList, UserPlus, UserStar, Settings2, Users, User, NotebookPen, NotebookText, StickyNote, FolderPlus, Hash, EyeOff, Eye, CaptionsOff, FolderOpen, MessageSquareMore, MessageSquarePlus, MessageSquareText, MessageSquareOff, MessagesSquare, Columns3Cog, SquarePlus, SquareM, ChevronsDown, Bot, Calendar, Folder, List, SquareCheckBig, ChevronsUpDown, Minus, Plus, AlertTriangle, FileX, SkipForward, XCircle, CheckCircle } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cva } from 'class-variance-authority';
@@ -15,7 +14,6 @@ import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -25,14 +23,9 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Command as Command$1 } from 'cmdk';
 
-// src/lib/utils.ts
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var markdownBaseComponents = {
   h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold", "data-testid": "markdown-heading-1", ...props, children }),
   h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "font-semibold text-base", "data-testid": "markdown-heading-2", ...props, children }),
@@ -266,39 +259,74 @@ function Tooltip({ children, delayDuration }) {
       timer.current = null;
     }
   };
+  const suppressed = React2.useRef(false);
   const show = React2.useCallback(() => {
     clearTimer();
+    if (suppressed.current) return;
     timer.current = setTimeout(() => setOpen(true), delay);
   }, [delay]);
   const hide = React2.useCallback(() => {
     clearTimer();
     setOpen(false);
   }, []);
+  const suppress = React2.useCallback(() => {
+    suppressed.current = true;
+    clearTimer();
+    setOpen(false);
+  }, []);
+  const release = React2.useCallback(() => {
+    suppressed.current = false;
+  }, []);
   const setTrigger = React2.useCallback((el) => {
     triggerRef.current = el;
   }, []);
   React2.useEffect(() => () => clearTimer(), []);
   const value = React2.useMemo(
-    () => ({ open, show, hide, setTrigger, triggerRef, contentId }),
-    [open, show, hide, setTrigger, contentId]
+    () => ({ open, show, hide, suppress, release, setTrigger, triggerRef, contentId }),
+    [open, show, hide, suppress, release, setTrigger, contentId]
   );
   return /* @__PURE__ */ jsx(TooltipContext.Provider, { value, children });
 }
+function isKeyboardFocus(target) {
+  try {
+    return target.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+function showsOwnText(el) {
+  if (!el) return false;
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  let visible = "";
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (node.parentElement?.closest(".sr-only")) continue;
+    visible += node.textContent ?? "";
+  }
+  return /\p{L}{2,}/u.test(visible);
+}
 function TooltipTrigger({ asChild, children, ...props }) {
   const ctx = React2.useContext(TooltipContext);
   if (!ctx) return /* @__PURE__ */ jsx(Fragment, { children });
   const triggerHandlers = {
     onPointerEnter: (e) => {
       props.onPointerEnter?.(e);
+      if (e.pointerType === "touch") return;
+      if (showsOwnText(e.currentTarget)) return;
       ctx.show();
     },
     onPointerLeave: (e) => {
       props.onPointerLeave?.(e);
+      ctx.release();
       ctx.hide();
     },
+    onPointerDown: (e) => {
+      props.onPointerDown?.(e);
+      (asChild && React2.isValidElement(children) ? children.props.onPointerDown : void 0)?.(e);
+      ctx.suppress();
+    },
     onFocus: (e) => {
       props.onFocus?.(e);
-      ctx.show();
+      if (isKeyboardFocus(e.target) && !showsOwnText(e.currentTarget)) ctx.show();
     },
     onBlur: (e) => {
       props.onBlur?.(e);
@@ -333,7 +361,7 @@ var TRANSFORM_BY_SIDE = {
   right: "translate(0, -50%)"
 };
 var TooltipContent = React2.forwardRef(
-  ({ className, side = "top", sideOffset = 4, style, ...props }, ref) => {
+  ({ className, side = "top", sideOffset = 4, collisionPadding = 8, style, ...props }, ref) => {
     const ctx = React2.useContext(TooltipContext);
     const innerRef = React2.useRef(null);
     const [coords, setCoords] = React2.useState(null);
@@ -353,12 +381,16 @@ var TooltipContent = React2.forwardRef(
       else if (s === "bottom" && r.bottom + sideOffset + ch > vh) s = "top";
       else if (s === "left" && r.left - sideOffset - cw < 0) s = "right";
       else if (s === "right" && r.right + sideOffset + cw > vw) s = "left";
+      const PAD = collisionPadding;
+      const clamp = (value, half, max) => Math.min(Math.max(value, PAD + half), Math.max(PAD + half, max - PAD - half));
+      const rawTop = s === "top" ? r.top - sideOffset : s === "bottom" ? r.bottom + sideOffset : r.top + r.height / 2;
+      const rawLeft = s === "left" ? r.left - sideOffset : s === "right" ? r.right + sideOffset : r.left + r.width / 2;
       setCoords({
-        top: s === "top" ? r.top - sideOffset : s === "bottom" ? r.bottom + sideOffset : r.top + r.height / 2,
-        left: s === "left" ? r.left - sideOffset : s === "right" ? r.right + sideOffset : r.left + r.width / 2,
+        top: s === "left" || s === "right" ? clamp(rawTop, ch / 2, vh) : rawTop,
+        left: s === "top" || s === "bottom" ? clamp(rawLeft, cw / 2, vw) : rawLeft,
         transform: TRANSFORM_BY_SIDE[s]
       });
-    }, [ctx?.open, side, sideOffset, ctx?.triggerRef]);
+    }, [ctx?.open, side, sideOffset, collisionPadding, ctx?.triggerRef]);
     if (!ctx?.open) return null;
     const setRefs = (node) => {
       innerRef.current = node;
@@ -378,7 +410,7 @@ var TooltipContent = React2.forwardRef(
             // The `tooltip-content` hook is kept last-but-one so a host stylesheet
             // can still restyle every tooltip in one place (the ARBI app does, with
             // `!important` rules that win over these defaults).
-            "pointer-events-none max-w-[300px] break-words rounded-md border border-border bg-popover px-3 py-2 text-sm font-normal text-popover-foreground shadow-lg",
+            "pointer-events-none w-max max-w-[300px] break-words rounded-md border border-border bg-popover px-3 py-2 text-sm font-normal text-popover-foreground shadow-lg",
             "tooltip-content",
             className
           ),
@@ -433,6 +465,7 @@ function IconToggle({
       "aria-pressed": isMixed ? "mixed" : isActive,
       className: `
           group/toggle relative inline-flex items-center h-4 w-8 rounded-full
+          pointer-coarse:after:absolute pointer-coarse:after:left-1/2 pointer-coarse:after:top-1/2 pointer-coarse:after:size-11 pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']
           transition-colors cursor-pointer
           disabled:opacity-50 disabled:cursor-not-allowed
           ${isActive ? bgColorClass : isMixed ? "bg-gray-400" : "bg-muted"}
@@ -530,23 +563,28 @@ function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
+      // One filled primary per view; everything else is tonal, hairline or ghost. No
+      // static shadows: separation is tone, and shadows are reserved for floating layers.
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        accent: "bg-ai-accent text-ai-accent-foreground shadow hover:bg-ai-accent/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        accent: "bg-ai-accent text-ai-accent-foreground hover:bg-ai-accent/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-border bg-background hover:bg-muted",
+        secondary: "bg-muted text-foreground hover:bg-muted/70",
+        ghost: "hover:bg-muted",
         link: "text-primary underline-offset-4 hover:underline"
       },
+      // Touch screens get a 44px target (coarse pointers only), mouse keeps the compact 36px.
+      // `!` so the floor also wins over a caller's compact `h-7` or a container's
+      // `[&_button]:h-7` rule: a compact toolbar on a phone must still be tappable.
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
+        default: "h-9 px-4 py-2 pointer-coarse:h-11!",
+        sm: "h-8 rounded-md px-3 pointer-coarse:h-11! pointer-coarse:min-w-11",
+        lg: "h-10 rounded-md px-8 pointer-coarse:h-12!",
+        icon: "h-9 w-9 pointer-coarse:h-11! pointer-coarse:w-11!"
       }
     },
     defaultVariants: {
@@ -570,8 +608,9 @@ var HoverCardContent = React2.forwardRef(({ className, align = "center", sideOff
     ref,
     align,
     sideOffset,
+    collisionPadding: getCollisionPadding(),
     className: cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+      "z-50 w-64 max-w-[calc(100vw-1rem)] rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
       className
     ),
     ...props
@@ -992,7 +1031,7 @@ var Input = React2.forwardRef(
         type,
         "data-slot": "input",
         className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:border-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 pointer-coarse:h-11 w-full rounded-md border border-input bg-background px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:border-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           showDictate && "pr-9",
           className
         ),
@@ -1132,36 +1171,6 @@ var Progress = React2.forwardRef(({ className, value, ...props }, ref) => /* @__
   }
 ));
 Progress.displayName = ProgressPrimitive.Root.displayName;
-var ScrollArea = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("relative overflow-hidden", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-      /* @__PURE__ */ jsx(ScrollBar, {}),
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-    ]
-  }
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React2.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 var RadioGroup = React2.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref });
 });
@@ -1172,7 +1181,7 @@ var RadioGroupItem = React2.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "relative aspect-square h-4 w-4 rounded-full border border-primary text-primary after:absolute after:left-1/2 after:top-1/2 after:hidden after:size-11 after:-translate-x-1/2 after:-translate-y-1/2 after:content-[''] pointer-coarse:after:block focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
@@ -1186,7 +1195,7 @@ var Checkbox = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer relative h-4 w-4 shrink-0 rounded-sm border border-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground after:absolute after:left-1/2 after:top-1/2 after:hidden after:size-11 after:-translate-x-1/2 after:-translate-y-1/2 after:content-[''] pointer-coarse:after:block",
       className
     ),
     ...props,
@@ -1198,7 +1207,7 @@ var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   SwitchPrimitives.Root,
   {
     className: cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-muted-foreground/45 after:absolute after:left-1/2 after:top-1/2 after:hidden after:size-11 after:-translate-x-1/2 after:-translate-y-1/2 after:content-[''] pointer-coarse:after:block",
       className
     ),
     ...props,
@@ -1220,7 +1229,7 @@ var TabsList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      "inline-flex h-9 pointer-coarse:h-auto items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
       className
     ),
     ...props
@@ -1232,7 +1241,7 @@ var TabsTrigger = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm pointer-coarse:min-h-11 font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
       className
     ),
     ...props
@@ -1336,9 +1345,9 @@ var toggleVariants = cva(
         outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
       },
       size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10"
+        default: "h-9 px-2 min-w-9 pointer-coarse:h-11 pointer-coarse:min-w-11",
+        sm: "h-8 px-1.5 min-w-8 pointer-coarse:h-11 pointer-coarse:min-w-11",
+        lg: "h-10 px-2.5 min-w-10 pointer-coarse:h-11 pointer-coarse:min-w-11"
       }
     },
     defaultVariants: {
@@ -1412,45 +1421,61 @@ var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React2.forwardRef(({ className, children, hideCloseButton, onInteractOutside, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    DialogPrimitive.Content,
-    {
-      ref,
-      onInteractOutside: (event) => {
-        if (isToastInteraction(event)) event.preventDefault();
-        onInteractOutside?.(event);
-      },
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg max-h-[90vh] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-md",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        !hideCloseButton && /* @__PURE__ */ jsxs(
-          DialogPrimitive.Close,
-          {
-            className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-            "data-testid": "dialog-close-button",
-            children: [
-              /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close dialog" })
-            ]
-          }
-        )
-      ]
-    }
-  )
-] }));
+var PHONE_PRESENTATION = {
+  center: "",
+  sheet: "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:w-full max-sm:max-w-full max-sm:border-x-0 max-sm:border-b-0 max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none max-sm:rounded-t-xl max-sm:pb-[max(1.5rem,env(safe-area-inset-bottom))] max-sm:max-h-[calc(100dvh-env(safe-area-inset-top,0px)-2.5rem)] max-sm:data-[state=open]:slide-in-from-bottom-10 max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:zoom-out-100",
+  full: "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:border-x-0 max-sm:border-b-0 max-sm:h-[calc(100dvh-env(safe-area-inset-top,0px)-1rem)] max-sm:w-full max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none max-sm:rounded-t-xl max-sm:pb-[max(1.5rem,env(safe-area-inset-bottom))] max-sm:max-h-none max-sm:data-[state=open]:slide-in-from-bottom-10 max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:zoom-out-100"
+};
+var DialogContent = React2.forwardRef(
+  ({ className, children, hideCloseButton, presentation = "center", onInteractOutside, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        "data-slot": "dialog-content",
+        "data-presentation": presentation,
+        onInteractOutside: (event) => {
+          if (isToastInteraction(event)) event.preventDefault();
+          onInteractOutside?.(event);
+        },
+        className: cn(
+          // Always inside the viewport: width and height are capped by the DYNAMIC viewport (mobile
+          // browser chrome) and the notch / home-indicator insets; the content scrolls inside.
+          "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem-env(safe-area-inset-left,0px)-env(safe-area-inset-right,0px))] max-w-lg max-h-[calc(min(100dvh,100svh,100vh)-2rem-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px))] translate-x-[-50%] translate-y-[-50%] will-change-transform grid-cols-[minmax(0,1fr)] gap-4 overflow-x-hidden overflow-y-auto overscroll-contain border bg-background p-6 shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-md",
+          PHONE_PRESENTATION[presentation],
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          !hideCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              className: "fixed right-4 top-4 z-20 inline-flex items-center justify-center rounded-sm pointer-coarse:right-2 pointer-coarse:top-2 pointer-coarse:size-11 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+              "data-testid": "dialog-close-button",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close dialog" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] })
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-col space-y-1.5 pr-8 text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    className: cn(
+      // Sticks to the bottom of a scrolling dialog so the actions stay reachable.
+      "sticky bottom-0 z-10 -mx-6 -mb-6 flex flex-col-reverse gap-2 bg-background px-6 pb-6 pt-3 sm:flex-row sm:justify-end",
+      className
+    ),
     ...props
   }
 );
@@ -1459,7 +1484,7 @@ var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   DialogPrimitive.Title,
   {
     ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    className: cn("break-words text-lg font-semibold leading-tight tracking-tight", className),
     ...props
   }
 ));
@@ -1482,131 +1507,273 @@ var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffse
     ref,
     align,
     sideOffset,
+    collisionPadding: getCollisionPadding(),
     className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+      "z-50 w-72 max-w-[calc(100vw-1rem)] max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
       className
     ),
     ...props
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var DropdownMenu = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuGroup = DropdownMenuPrimitive.Group;
-var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-var DropdownMenuSub = DropdownMenuPrimitive.Sub;
-var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React2.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.SubTrigger,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.SubContent,
-  {
-    ref,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
-      className
-    ),
-    ...props
-  }
-) }));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center rounded border border-border bg-popover", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-primary" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.RadioItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
-    ...props
+var FINE_OPEN_DELAY = 350;
+var FINE_CLOSE_DELAY = 180;
+function isFocusVisible(el) {
+  try {
+    return el.matches(":focus-visible");
+  } catch {
+    return true;
   }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-sm tracking-widest opacity-60", className), ...props });
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+}
+function isCoarse(pointerType) {
+  if (pointerType === "touch" || pointerType === "pen") return true;
+  if (pointerType === "mouse") return false;
+  return typeof window !== "undefined" && !!window.matchMedia?.("(pointer: coarse)").matches;
+}
+function MarkMenu({
+  as = "span",
+  href,
+  items,
+  preview,
+  menuLabel,
+  shouldClickRunPrimary = true,
+  openDelay = FINE_OPEN_DELAY,
+  closeDelay = FINE_CLOSE_DELAY,
+  testId,
+  menuTestId,
+  triggerRef: externalRef,
+  className,
+  children,
+  onPointerDown,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  ...rest
+}) {
+  const [open, setOpen] = useState(false);
+  const [side, setSide] = useState("bottom");
+  const menuId = useId();
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  const timer = useRef(null);
+  const mode = useRef("hover");
+  const lastPointer = useRef("mouse");
+  const focusFirstOnOpen = useRef(false);
+  const isEmpty = items.length === 0 && !preview;
+  const ordered = [...items].sort((a, b) => Number(!!b.primary) - Number(!!a.primary));
+  const primary = ordered[0];
+  const clearTimer = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  useEffect(() => clearTimer, []);
+  const rows = () => Array.from(contentRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+  const firstItem = () => rows()[0];
+  const openWith = (next, focusFirst = false) => {
+    clearTimer();
+    mode.current = next;
+    focusFirstOnOpen.current = focusFirst;
+    setSide(next === "press" && isCoarse(lastPointer.current) ? "top" : "bottom");
+    setOpen(true);
+    if (focusFirst) {
+      requestAnimationFrame(() => firstItem()?.focus());
+    }
+  };
+  const close = (returnFocus = false) => {
+    clearTimer();
+    setOpen(false);
+    if (returnFocus) triggerRef.current?.focus({ preventScroll: true });
+  };
+  const schedule = (action, delay) => {
+    clearTimer();
+    timer.current = setTimeout(action, delay);
+  };
+  const handlePointerDown = (e) => {
+    lastPointer.current = e.pointerType;
+    onPointerDown?.(e);
+  };
+  const handlePointerEnter = (e) => {
+    onPointerEnter?.(e);
+    if (isCoarse(e.pointerType) || isEmpty) return;
+    lastPointer.current = e.pointerType;
+    schedule(() => openWith("hover"), openDelay);
+  };
+  const handlePointerLeave = (e) => {
+    onPointerLeave?.(e);
+    if (isCoarse(e.pointerType)) return;
+    if (!open) return clearTimer();
+    if (mode.current === "hover") schedule(() => close(), closeDelay);
+  };
+  const handleFocus = (e) => {
+    onFocus?.(e);
+    if (isEmpty) return;
+    if (isFocusVisible(e.currentTarget)) schedule(() => openWith("focus"), openDelay);
+  };
+  const handleBlur = (e) => {
+    onBlur?.(e);
+    const next = e.relatedTarget;
+    if (next && contentRef.current?.contains(next)) return;
+    if (mode.current === "focus" || mode.current === "key") schedule(() => close(), closeDelay);
+    else clearTimer();
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    lastPointer.current = "keyboard";
+    if (e.defaultPrevented || isEmpty) return;
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      e.preventDefault();
+      openWith("key", true);
+    } else if (e.key === "Escape" && open) {
+      e.preventDefault();
+      e.stopPropagation();
+      close(true);
+    }
+  };
+  const handleClick = (e) => {
+    if (isEmpty) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    if (e.detail === 0 && lastPointer.current === "keyboard") {
+      e.preventDefault();
+      return;
+    }
+    if (isCoarse(lastPointer.current)) {
+      e.preventDefault();
+      if (open) close();
+      else openWith("press");
+      return;
+    }
+    if (shouldClickRunPrimary && primary?.onSelect) {
+      e.preventDefault();
+      close();
+      primary.onSelect();
+    }
+  };
+  const handleMenuKeyDown = (e) => {
+    const list = rows();
+    const index = list.indexOf(document.activeElement);
+    let target;
+    if (e.key === "ArrowDown") target = list[(index + 1) % list.length];
+    else if (e.key === "ArrowUp") target = list[(index - 1 + list.length) % list.length];
+    else if (e.key === "Home") target = list[0];
+    else if (e.key === "End") target = list[list.length - 1];
+    else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      close(true);
+      return;
+    } else if (e.key === "Tab") {
+      close();
+      return;
+    }
+    if (target) {
+      e.preventDefault();
+      target.focus();
+    }
+  };
+  const choose = (item) => {
+    const wasKey = mode.current === "key";
+    close(wasKey);
+    item.onSelect?.();
+  };
+  const setTriggerRef = useCallback(
+    (el) => {
+      triggerRef.current = el;
+      if (typeof externalRef === "function") externalRef(el);
+      else if (externalRef) externalRef.current = el;
+    },
+    [externalRef]
+  );
+  const triggerProps = {
+    ref: setTriggerRef,
+    className,
+    "data-testid": testId,
+    "data-slot": "mark",
+    "aria-haspopup": "true",
+    "aria-expanded": open,
+    "aria-controls": open ? menuId : void 0,
+    onPointerDown: handlePointerDown,
+    onPointerEnter: handlePointerEnter,
+    onPointerLeave: handlePointerLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    ...rest
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open: open && !isEmpty, children: [
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: as === "a" ? /* @__PURE__ */ jsx("a", { href, ...triggerProps, children }) : /* @__PURE__ */ jsx("span", { role: "button", tabIndex: 0, ...triggerProps, children }) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        ref: contentRef,
+        id: menuId,
+        side,
+        align: "start",
+        sideOffset: 6,
+        collisionPadding: 8,
+        role: "group",
+        "data-testid": menuTestId,
+        "data-slot": "mark-menu",
+        className: "w-auto min-w-[12rem] max-w-[min(22rem,calc(100vw-1rem))] p-1",
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+          if (focusFirstOnOpen.current) firstItem()?.focus();
+        },
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        onEscapeKeyDown: (e) => {
+          e.preventDefault();
+          close(true);
+        },
+        onInteractOutside: (e) => {
+          if (triggerRef.current?.contains(e.target)) e.preventDefault();
+        },
+        onPointerDownOutside: () => close(),
+        onPointerEnter: clearTimer,
+        onPointerLeave: (e) => {
+          if (!isCoarse(e.pointerType) && mode.current === "hover")
+            schedule(() => close(), closeDelay);
+        },
+        children: [
+          preview && /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-sm", children: preview }),
+          ordered.length > 0 && /* @__PURE__ */ jsx("div", { role: "menu", "aria-label": menuLabel, onKeyDown: handleMenuKeyDown, children: ordered.map((item) => {
+            const rowClass = cn(
+              "flex w-full cursor-pointer items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent focus-visible:bg-accent pointer-coarse:min-h-11 pointer-coarse:px-3",
+              item.primary && "font-medium pointer-coarse:text-base",
+              item.destructive && "text-destructive"
+            );
+            return item.href && !item.onSelect ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                role: "menuitem",
+                tabIndex: -1,
+                href: item.href,
+                className: rowClass,
+                "data-testid": item.testId,
+                onClick: () => close(),
+                children: item.label
+              },
+              item.id
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                tabIndex: -1,
+                className: rowClass,
+                "data-testid": item.testId,
+                onClick: () => choose(item),
+                children: item.label
+              },
+              item.id
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
@@ -1615,7 +1782,7 @@ var SelectTrigger = React2.forwardRef(({ className, children, ...props }, ref) =
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground/60 focus:outline-none focus-visible:border-ring/50 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 pointer-coarse:min-h-11 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground/60 focus:outline-none focus-visible:border-ring/50 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -1651,11 +1818,12 @@ var SelectContent = React2.forwardRef(({ className, children, position = "popper
   {
     ref,
     className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "relative z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[8rem] max-w-[calc(100vw-1rem)] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
     position,
+    collisionPadding: getCollisionPadding(),
     ...props,
     children: [
       /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
@@ -1688,7 +1856,7 @@ var SelectItem = React2.forwardRef(({ className, children, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 pointer-coarse:min-h-11 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -1730,7 +1898,7 @@ var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PUR
     {
       ref,
       className: cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 pointer-coarse:h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props
@@ -1742,7 +1910,7 @@ var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   Command$1.List,
   {
     ref,
-    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    className: cn("max-h-[min(300px,50dvh)] overflow-y-auto overflow-x-hidden", className),
     ...props
   }
 ));
@@ -1775,7 +1943,7 @@ var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     className: cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 pointer-coarse:min-h-11 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     ),
     ...props
@@ -1858,7 +2026,7 @@ var EntityPill = forwardRef(function EntityPill2({
     "transition-all",
     className
   );
-  const interactiveClasses = "cursor-pointer hover:bg-muted/80";
+  const interactiveClasses = "relative cursor-pointer hover:bg-muted/80 pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:-inset-y-3 pointer-coarse:after:content-['']";
   const disabledClasses = "cursor-default opacity-60";
   const highlightClasses = "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground";
   const mainContent = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1902,6 +2070,10 @@ var EntityPill = forwardRef(function EntityPill2({
     /* @__PURE__ */ jsx(TooltipContent, { side, className: "p-2", children: tip })
   ] });
   const mainAreaClass = cn("inline-flex items-center gap-1", fullWidth && "min-w-0 flex-1");
+  const mainAreaTouchClass = cn(
+    mainAreaClass,
+    (onClick || href) && !disabled && "relative pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:-inset-y-3 pointer-coarse:after:content-['']"
+  );
   if (onMoreClick || moreContent) {
     let mainArea;
     if (tooltipContent) {
@@ -1909,7 +2081,7 @@ var EntityPill = forwardRef(function EntityPill2({
         mainContent,
         tooltipContent,
         tooltipSide,
-        cn(mainAreaClass, disabled && "opacity-60"),
+        cn(mainAreaTouchClass, disabled && "opacity-60"),
         {
           type: "button",
           onClick: href ? onClick : disabled ? void 0 : onClick,
@@ -1923,7 +2095,7 @@ var EntityPill = forwardRef(function EntityPill2({
           href,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: mainAreaClass,
+          className: mainAreaTouchClass,
           onClick,
           children: mainContent
         }
@@ -1935,12 +2107,15 @@ var EntityPill = forwardRef(function EntityPill2({
           type: "button",
           onClick: disabled ? void 0 : onClick,
           disabled,
-          className: cn("inline-flex items-center gap-1", disabled && "opacity-60"),
+          className: cn(
+            "relative inline-flex items-center gap-1 pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:-inset-y-3 pointer-coarse:after:content-['']",
+            disabled && "opacity-60"
+          ),
           children: mainContent
         }
       );
     } else {
-      mainArea = /* @__PURE__ */ jsx("span", { className: mainAreaClass, children: mainContent });
+      mainArea = /* @__PURE__ */ jsx("span", { className: mainAreaTouchClass, children: mainContent });
     }
     const moreArea = moreContent ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 leading-none", children: moreContent }) : tooltipWrap(
       /* @__PURE__ */ jsx(MoreVertical, { className: "w-3.5 h-3.5" }),
@@ -1961,7 +2136,7 @@ var EntityPill = forwardRef(function EntityPill2({
         ref,
         className: cn(
           baseClasses,
-          (onClick || href) && !disabled && interactiveClasses,
+          (onClick || href) && !disabled && "cursor-pointer hover:bg-muted/80",
           highlight && highlightClasses
         ),
         "data-testid": testId,
@@ -2168,6 +2343,79 @@ function TagEntity({
     }
   );
 }
+var TIERS = [
+  { min: 0.7, tone: "bg-emerald-500", label: "High relevance" },
+  { min: 0.4, tone: "bg-amber-500", label: "Medium relevance" },
+  { min: -Infinity, tone: "bg-muted-foreground/40", label: "Low relevance" }
+];
+function RelevanceDot({ score }) {
+  if (score == null) return null;
+  const tier = TIERS.find((t) => score >= t.min) ?? TIERS[TIERS.length - 1];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "img",
+      "aria-label": tier.label,
+      title: `${tier.label} (${score.toFixed(2)})`,
+      className: cn("size-1.5 shrink-0 rounded-full", tier.tone),
+      "data-testid": "passage-relevance"
+    }
+  );
+}
+function PassageCard({
+  header,
+  score,
+  headerRight,
+  active,
+  onClick,
+  footer,
+  className,
+  children,
+  "data-testid": testId
+}) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [
+      header,
+      (score != null || headerRight) && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(RelevanceDot, { score }),
+        headerRight
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "[&_mark]:rounded-sm [&_mark]:bg-ai-accent/20 [&_mark]:px-0.5 [&_mark]:font-medium [&_mark]:text-foreground", children })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group rounded-lg border border-border bg-card p-3 text-left transition-colors",
+        onClick && "hover:border-ai-accent/40 focus-within:ring-2 focus-within:ring-ai-accent/40",
+        active && "border-ai-accent/60 ring-1 ring-ai-accent/30",
+        className
+      ),
+      children: [
+        onClick ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick(e);
+              }
+            },
+            "aria-current": active || void 0,
+            "data-testid": testId,
+            className: "cursor-pointer focus:outline-none",
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("div", { "aria-current": active || void 0, "data-testid": testId, children: body }),
+        footer
+      ]
+    }
+  );
+}
 
 // src/icons/colors.ts
 var NEUTRAL_GRAY = "#64748b";
@@ -2522,7 +2770,8 @@ function DocumentEntity({
   tooltipContent,
   className,
   fullWidth,
-  noClamp
+  noClamp,
+  "data-testid": testId
 }) {
   const title = getDocumentTitle(doc);
   const ext = doc.file_name?.split(".").pop()?.toLowerCase();
@@ -2563,6 +2812,7 @@ function DocumentEntity({
       moreContent: actions,
       className,
       highlight: viewing,
+      "data-testid": testId,
       tooltipContent: tooltipContent ?? defaultTooltip
     }
   );
@@ -2776,7 +3026,7 @@ var UserEntity = memo(function UserEntity2({
     ] });
     const rowClass = "group/pill inline-flex min-w-0 items-center gap-2";
     const clickable = interactive && !!onClick;
-    const clickableClass = "cursor-pointer rounded-md px-1 py-0.5 -mx-1 transition-colors hover:bg-muted/60";
+    const clickableClass = "relative cursor-pointer rounded-md px-1 py-0.5 -mx-1 transition-colors hover:bg-muted/60 pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:-inset-y-3 pointer-coarse:after:content-['']";
     if (resolvedTooltip) {
       return /* @__PURE__ */ jsxs(Tooltip, { children: [
         /* @__PURE__ */ jsx(
@@ -2809,7 +3059,14 @@ var UserEntity = memo(function UserEntity2({
   }
   if (showTooltip) {
     return /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { onFocusCapture: (e) => e.stopPropagation(), className: "inline-flex", children: avatarElement }),
+      /* @__PURE__ */ jsx(
+        TooltipTrigger,
+        {
+          onFocusCapture: (e) => e.stopPropagation(),
+          className: "touch-hit inline-flex",
+          children: avatarElement
+        }
+      ),
       /* @__PURE__ */ jsx(TooltipContent, { className: "p-2", children: tooltipContent })
     ] });
   }
@@ -2822,7 +3079,7 @@ function AgentBadge({ className }) {
       "data-testid": "agent-badge",
       className: cn(
         "inline-flex shrink-0 items-center gap-1 rounded-full border border-ai-accent/50",
-        "bg-ai-accent-soft px-2 py-0.5 text-[11px] font-bold uppercase tracking-wider text-ai-accent",
+        "bg-ai-accent-soft px-2 py-0.5 text-xs font-bold uppercase tracking-wider text-ai-accent",
         className
       ),
       children: [
@@ -3236,7 +3493,390 @@ var getWorkspaceColor = (workspaceId, useWorkspaceColors) => {
   if (!isValidId) return "hsl(var(--primary))";
   return getEntityColor2(workspaceId, "medium");
 };
+function nameInitials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (!parts.length) return "?";
+  return parts.slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("");
+}
+var STATUS_DOT = {
+  online: "bg-emerald-500",
+  busy: "bg-amber-500",
+  offline: "bg-destructive"
+};
+function UserMenu({
+  user,
+  status,
+  items = [],
+  onLogout,
+  logoutLabel = "Sign out",
+  align = "end",
+  side = "bottom",
+  variant = "avatar",
+  showChevron = true,
+  classNames,
+  testId = "user-menu",
+  logoutTestId
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex items-center gap-2 rounded-md transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          variant === "account" ? "w-full min-w-0 p-1 text-left pointer-coarse:min-h-11" : "px-1.5 py-1 pointer-coarse:min-h-11 pointer-coarse:min-w-11 pointer-coarse:justify-center",
+          classNames?.trigger
+        ),
+        "data-testid": testId,
+        "data-variant": variant,
+        "aria-label": variant === "avatar" ? "Account menu" : void 0,
+        title: variant === "avatar" ? user.name : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(Avatar, { className: "size-8", children: [
+              user.picture ? /* @__PURE__ */ jsx(AvatarImage, { src: user.picture, alt: user.name }) : null,
+              /* @__PURE__ */ jsx(
+                AvatarFallback,
+                {
+                  className: cn("bg-primary text-primary-foreground", classNames?.fallback),
+                  children: nameInitials(user.name)
+                }
+              )
+            ] }),
+            status && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-2 border-background",
+                  STATUS_DOT[status.tone]
+                ),
+                title: status.detail ? `${status.label} \xB7 ${status.detail}` : status.label,
+                "data-testid": status.testId ? `${status.testId}-dot` : void 0
+              }
+            )
+          ] }),
+          variant === "account" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: user.name }),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "mr-1 size-4 shrink-0 text-muted-foreground" })
+          ] }) : showChevron && /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align,
+        side,
+        sideOffset: 8,
+        collisionPadding: 12,
+        className: "w-60 rounded-lg border-border/60 shadow-lg",
+        "data-testid": "user-menu-panel",
+        "data-topbar-popover": "",
+        children: [
+          /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "relative pr-8 pointer-coarse:pr-12", children: [
+            /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                className: "absolute right-1 top-1 flex size-6 items-center justify-center rounded-md p-0 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:bg-accent pointer-coarse:right-0 pointer-coarse:top-0 pointer-coarse:size-11",
+                "aria-label": "Close account menu",
+                "data-testid": "user-menu-close",
+                children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "truncate font-medium text-foreground", title: user.name, children: user.name }),
+            user.email && /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-normal text-muted-foreground", title: user.email, children: user.email }),
+            status && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "mt-1 text-xs font-normal text-muted-foreground",
+                "data-testid": status.testId,
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: cn("size-2 shrink-0 rounded-full", STATUS_DOT[status.tone]) }),
+                    status.label
+                  ] }),
+                  status.detail && /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate pl-3.5 text-xs leading-tight text-muted-foreground/70", children: status.detail })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          items.map((item) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: item.onSelect,
+                "data-testid": item.testId,
+                className: "pointer-coarse:min-h-11",
+                ...item.checked !== void 0 ? { role: "menuitemcheckbox", "aria-checked": item.checked } : {},
+                children: [
+                  item.icon && /* @__PURE__ */ jsxs("span", { className: "relative flex shrink-0", children: [
+                    /* @__PURE__ */ jsx(item.icon, { className: "size-4" }),
+                    item.dot && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-primary ring-2 ring-popover",
+                        "aria-hidden": true
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+                  item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-1.5 text-xs font-medium tabular-nums text-muted-foreground", children: item.badge }),
+                  item.checked !== void 0 && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "flex h-4 w-7 shrink-0 items-center rounded-full p-0.5 transition-colors",
+                        item.checked ? "bg-primary" : "bg-border"
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "size-3 rounded-full bg-background transition-transform",
+                            item.checked && "translate-x-3"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ] }, item.label)),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: onLogout,
+              "data-testid": logoutTestId ?? `${testId}-logout`,
+              className: "pointer-coarse:min-h-11",
+              children: [
+                /* @__PURE__ */ jsx(LogOut, { className: "size-4" }),
+                logoutLabel
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var ACTIVE_STATUSES = /* @__PURE__ */ new Set([
+  "queued",
+  "processing",
+  "parsing",
+  "encrypting",
+  "indexing",
+  "analysing"
+]);
+var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["completed", "failed", "skipped", "empty", "low-content"]);
+var STATUS_LABEL = {
+  queued: "Queued",
+  processing: "Processing",
+  parsing: "Parsing",
+  encrypting: "Encrypting",
+  indexing: "Indexing",
+  analysing: "Analysing"
+};
+var IMAGE_EXTENSIONS2 = /* @__PURE__ */ new Set(["jpg", "jpeg", "png", "gif", "bmp", "tiff", "tif", "webp"]);
+var VIDEO_EXTENSIONS2 = /* @__PURE__ */ new Set(["mp4", "mpeg", "mpg", "webm", "mov", "avi", "mkv"]);
+var AUDIO_EXTENSIONS2 = /* @__PURE__ */ new Set(["mp3", "wav", "m4a", "aac", "ogg", "flac"]);
+var EMAIL_EXTENSIONS2 = /* @__PURE__ */ new Set(["eml", "msg"]);
+function fileIcon(fileName, size) {
+  const ext = fileName?.split(".").pop()?.toLowerCase();
+  if (ext && VIDEO_EXTENSIONS2.has(ext)) return /* @__PURE__ */ jsx(VidIcon, { size });
+  if (ext && AUDIO_EXTENSIONS2.has(ext)) return /* @__PURE__ */ jsx(AudIcon, { size });
+  if (ext && IMAGE_EXTENSIONS2.has(ext)) return /* @__PURE__ */ jsx(ImgIcon, { size });
+  if (ext && EMAIL_EXTENSIONS2.has(ext)) return /* @__PURE__ */ jsx(EmlIcon, { size });
+  return /* @__PURE__ */ jsx(PdfIcon, { size });
+}
+function RenameField({
+  seed,
+  onCommit,
+  onCancel,
+  testId
+}) {
+  const done = React2__default.useRef(false);
+  const commit = (value) => {
+    if (done.current) return;
+    done.current = true;
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== seed) onCommit(trimmed);
+    else onCancel();
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      autoFocus: true,
+      defaultValue: seed,
+      "data-testid": testId,
+      onFocus: (e) => e.currentTarget.select(),
+      onClick: (e) => e.stopPropagation(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit(e.currentTarget.value);
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          done.current = true;
+          onCancel();
+        }
+      },
+      onBlur: (e) => commit(e.currentTarget.value),
+      className: "w-full rounded border border-primary bg-background px-1 py-0.5 text-xs text-foreground outline-none"
+    }
+  );
+}
+function StatusMarker({ status, testId }) {
+  let icon = null;
+  let title = "";
+  switch (status) {
+    case "completed":
+      icon = /* @__PURE__ */ jsx(CheckCircle, { className: "size-4 text-success", strokeWidth: 2.75 });
+      title = "Ready";
+      break;
+    case "failed":
+      icon = /* @__PURE__ */ jsx(XCircle, { className: "size-4 text-destructive", strokeWidth: 2.75 });
+      title = "Failed";
+      break;
+    case "skipped":
+      icon = /* @__PURE__ */ jsx(SkipForward, { className: "size-4 text-muted-foreground", strokeWidth: 2.75 });
+      title = "Skipped";
+      break;
+    case "empty":
+      icon = /* @__PURE__ */ jsx(FileX, { className: "size-4 text-warning", strokeWidth: 2.75 });
+      title = "Empty \u2014 no extractable content";
+      break;
+    case "low-content":
+      icon = /* @__PURE__ */ jsx(AlertTriangle, { className: "size-4 text-warning", strokeWidth: 2.75 });
+      title = "Low content \u2014 minimal extractable content";
+      break;
+    default:
+      return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      title,
+      "data-testid": testId,
+      className: "flex size-6 items-center justify-center rounded-full bg-background shadow-sm",
+      children: icon
+    }
+  );
+}
+function DocumentCard({
+  doc,
+  thumbnailUrl,
+  status,
+  selected = false,
+  onToggleSelect,
+  viewing = false,
+  onOpen,
+  actions,
+  renaming = false,
+  onCommitRename,
+  onCancelRename,
+  tooltipContent,
+  marker,
+  testId = "document-card",
+  className
+}) {
+  const normalised = (status ?? "").toLowerCase();
+  const isProcessing = ACTIVE_STATUSES.has(normalised);
+  const showStatusMarker = !isProcessing && TERMINAL_STATUSES.has(normalised);
+  const [thumbFailed, setThumbFailed] = React2__default.useState(false);
+  const [thumbLandscape, setThumbLandscape] = React2__default.useState(false);
+  const showThumbnail = !!thumbnailUrl && !thumbFailed && !isProcessing;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": testId,
+      className: cn(
+        // Square corners and a portrait-page aspect (height = 1.3 × width), so a
+        // cover-page thumbnail reads edge-to-edge.
+        "group relative aspect-[10/13] select-none overflow-hidden border bg-muted/20 transition",
+        selected ? "border-primary bg-primary/10" : "border-border shadow-sm hover:border-border/80 hover:bg-muted/50",
+        className
+      ),
+      children: [
+        showThumbnail ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: thumbnailUrl,
+            alt: "",
+            loading: "lazy",
+            draggable: false,
+            onError: () => setThumbFailed(true),
+            onLoad: (e) => setThumbLandscape(e.currentTarget.naturalWidth > e.currentTarget.naturalHeight),
+            className: cn(
+              "absolute inset-0 size-full bg-white",
+              thumbLandscape ? "object-contain" : "object-cover object-top"
+            )
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-muted-foreground", children: fileIcon(doc.file_name, 44) }),
+        isProcessing && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": `${testId}-processing`,
+            className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-1.5 bg-background/80 px-3",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-sm bg-muted", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 animate-pulse rounded-sm bg-primary" }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-primary", children: STATUS_LABEL[normalised] ?? normalised })
+            ]
+          }
+        ),
+        onToggleSelect && /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: selected,
+            onCheckedChange: () => onToggleSelect(),
+            onClick: (e) => e.stopPropagation(),
+            "aria-label": selected ? "Deselect" : "Select",
+            "data-testid": `${testId}-select`,
+            className: cn(
+              "absolute left-1.5 top-1.5 z-20 size-6 rounded-none border-muted-foreground/60 bg-background shadow-sm transition",
+              selected ? "opacity-100" : "opacity-40 group-hover:opacity-100"
+            )
+          }
+        ),
+        actions && /* @__PURE__ */ jsx("div", { className: "absolute right-1.5 top-1.5 z-20", children: actions }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-1.5 bottom-1.5 z-20 flex flex-col gap-1", children: [
+          (marker || showStatusMarker) && /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            marker,
+            showStatusMarker && /* @__PURE__ */ jsx("div", { className: "ml-auto flex", children: /* @__PURE__ */ jsx(StatusMarker, { status: normalised, testId: `${testId}-status` }) })
+          ] }),
+          renaming ? /* @__PURE__ */ jsx(
+            RenameField,
+            {
+              seed: doc.doc_metadata?.title || doc.file_name || "",
+              onCommit: (name) => onCommitRename?.(name),
+              onCancel: () => onCancelRename?.(),
+              testId: `${testId}-rename-input`
+            }
+          ) : /* @__PURE__ */ jsx(
+            DocumentEntity,
+            {
+              doc,
+              fullWidth: true,
+              viewing,
+              tooltipContent,
+              labelClassName: "font-semibold",
+              className: "w-full min-w-0 max-w-full bg-background/90 backdrop-blur-sm",
+              onClick: (e) => {
+                e.stopPropagation();
+                onOpen?.();
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 
-export { AgentBadge, AiMarkdown, ArbiBotHeadIcon, AudIcon, Avatar, AvatarFallback, AvatarImage, BASE_COLORS2 as BASE_COLORS, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DictateProvider, DocumentEntity, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ENTITY_MAPPINGS, EmlIcon, EntityIcon, EntityPill, FILE_TYPE_COLORS, HoverCard, HoverCardContent, HoverCardTrigger, IconToggle, ImgIcon, InlineMicButton, Input, Label, MarkdownRenderer, MarkdownStreamingContext, MicRecordingOverlay, MicWaveformIndicator, NEUTRAL_GRAY2 as NEUTRAL_GRAY, PLACEHOLDER_COLOR, PdfIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PresenceLabel, Progress, ProjectEntity, RadioGroup, RadioGroupItem, RagDot, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, StatusPill, Switch, TAG_TYPE_ICONS, TAG_TYPE_LABELS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagEntity, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserEntity, VISIBILITY_ICONS, VidIcon, VisibilityIcon, badgeVariants, buttonVariants, cardVariants, classifyMediaError, cn, configureEntityRegistry, configureRagLabels, configureStatusRegistry, formatElapsed, getDocIcon, getEntityColor2 as getEntityColor, getEntityColorStyles, getEntityIcon, getEntityLabel, getStatusVariant, getTagTypeIcon, getTagTypeLabel, getWorkspaceColor, markdownBaseComponents, splitMarkdownBlocks, toggleVariants, useAudioRecorder };
-//# sourceMappingURL=chunk-YJAYST7S.js.map
-//# sourceMappingURL=chunk-YJAYST7S.js.map
+export { AgentBadge, AiMarkdown, ArbiBotHeadIcon, AudIcon, Avatar, AvatarFallback, AvatarImage, BASE_COLORS2 as BASE_COLORS, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DictateProvider, DocumentCard, DocumentEntity, ENTITY_MAPPINGS, EmlIcon, EntityIcon, EntityPill, FILE_TYPE_COLORS, HoverCard, HoverCardContent, HoverCardTrigger, IconToggle, ImgIcon, InlineMicButton, Input, Label, MarkMenu, MarkdownRenderer, MarkdownStreamingContext, MicRecordingOverlay, MicWaveformIndicator, NEUTRAL_GRAY2 as NEUTRAL_GRAY, PLACEHOLDER_COLOR, PassageCard, PdfIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PresenceLabel, Progress, ProjectEntity, RadioGroup, RadioGroupItem, RagDot, RelevanceDot, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, StatusPill, Switch, TAG_TYPE_ICONS, TAG_TYPE_LABELS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagEntity, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserEntity, UserMenu, VISIBILITY_ICONS, VidIcon, VisibilityIcon, badgeVariants, buttonVariants, cardVariants, classifyMediaError, configureEntityRegistry, configureRagLabels, configureStatusRegistry, formatElapsed, getDocIcon, getEntityColor2 as getEntityColor, getEntityColorStyles, getEntityIcon, getEntityLabel, getStatusVariant, getTagTypeIcon, getTagTypeLabel, getWorkspaceColor, markdownBaseComponents, splitMarkdownBlocks, toggleVariants, useAudioRecorder };
+//# sourceMappingURL=chunk-3CLGHHME.js.map
+//# sourceMappingURL=chunk-3CLGHHME.js.map