@proteos/ui 0.54.1 → 0.55.0

package/dist/index.js

@@ -2,9 +2,9 @@ import { cn, Button, Skeleton } from './chunk-IKAX76MB.js';
 export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-IKAX76MB.js';
 import { icons, Contact, Paperclip, BookText, Banknote, UsersRound, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, Shapes, Search, Phone, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, Pipette, Pencil, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, ChevronRight as ChevronRight$1, CircleCheck, CircleAlert, Info } from 'lucide-react';
 import { tv } from 'tailwind-variants';
-import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Label, Input as Input$1, ListBox, ListBoxItem, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Button as Button$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, SelectValue, ModalOverlay, Modal as Modal$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, UNSTABLE_Toast, UNSTABLE_ToastContent, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Calendar as Calendar$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DatePickerStateContext } from 'react-aria-components';
+import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Label, Input as Input$1, ListBox, ListBoxItem, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Button as Button$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, SelectValue, ModalOverlay, Modal as Modal$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, UNSTABLE_Toast, UNSTABLE_ToastContent, Calendar as Calendar$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DatePickerStateContext } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { lazy, createContext, useState, useRef, useMemo, useEffect, useContext, useSyncExternalStore, useCallback, useLayoutEffect, Suspense, useId, Fragment as Fragment$1 } from 'react';
+import { lazy, createContext, useState, useRef, useMemo, Children, isValidElement, useLayoutEffect, useEffect, useContext, useSyncExternalStore, useCallback, Suspense, useId, Fragment as Fragment$1 } from 'react';
 import { formatAmount, parseAmount } from '@proteos/sdk';
 import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractClosestEdge, attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
@@ -872,6 +872,7 @@ function Badge({
   hasDot,
   color,
   icon,
+  actions,
   className,
   style,
   children,
@@ -893,11 +894,249 @@ function Badge({
       ),
       children: [
         Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: cn("size-3 shrink-0", ICON_TONE[register2]) }) : null,
-        children
+        children,
+        actions ? (
+          // Pulled flush with the trailing edge so the chip still reads
+          // symmetric around its leading dot / icon.
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center shrink-0 -mr-1", children: actions })
+        ) : null
       ]
     }
   );
 }
+function BadgeAction({ label, onPress, isDisabled = false, children }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      disabled: isDisabled,
+      onClick: (event) => {
+        event.stopPropagation();
+        onPress();
+      },
+      className: cn(
+        "inline-flex items-center justify-center shrink-0",
+        "size-3.5 rounded-full",
+        "text-current/70 hover:text-current hover:bg-current/10",
+        "outline-none cursor-pointer",
+        "focus-visible:shadow-[var(--shadow-focus)]",
+        "disabled:opacity-45 disabled:cursor-not-allowed"
+      ),
+      children: children ?? /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 10 10", className: "size-2.5", fill: "none", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M2 2l6 6M8 2l-6 6",
+          stroke: "currentColor",
+          strokeWidth: "1.4",
+          strokeLinecap: "round"
+        }
+      ) })
+    }
+  );
+}
+function TooltipTrigger({
+  delay = 500,
+  closeDelay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipTrigger$1, { delay, closeDelay, ...props });
+}
+function Tooltip({ className, offset = 6, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1,
+    {
+      ...props,
+      offset,
+      className: (renderProps) => cn(
+        "z-50 max-w-xs",
+        "rounded-md border border-rule bg-surface shadow-[var(--shadow-raised)]",
+        "px-2.5 py-1.5",
+        "font-mono text-[11.5px] text-ink-2",
+        "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1 entering:duration-150",
+        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
+        typeof className === "function" ? className(renderProps) : className
+      )
+    }
+  );
+}
+var badgeGroupStyles = tv({
+  base: "flex flex-nowrap items-center gap-1.5 w-full min-w-0",
+  variants: {
+    // The measuring pass renders every chip plus the overflow chip so their
+    // widths can be read; it is hidden so that pass never paints.
+    isMeasuring: { true: "invisible", false: "" }
+  },
+  defaultVariants: { isMeasuring: false }
+});
+function fitBadgeCount(metrics, available) {
+  const { itemWidths, overflowWidth, gap } = metrics;
+  const total = itemWidths.length;
+  if (available <= 0) return total;
+  let fullWidth = 0;
+  for (let index = 0; index < total; index += 1) {
+    fullWidth += (itemWidths[index] ?? 0) + (index > 0 ? gap : 0);
+  }
+  if (fullWidth <= available) return total;
+  let used = 0;
+  let count = 0;
+  for (let index = 0; index < total; index += 1) {
+    const next = used + (itemWidths[index] ?? 0) + gap;
+    if (next + overflowWidth > available) break;
+    used = next;
+    count = index + 1;
+  }
+  return count;
+}
+var badgeGroupOverflowStyles = tv({
+  base: [
+    badgeStyles({ variant: "neutral", shape: "rounded", hasDot: false }),
+    // badgeStyles' register still materializes an empty ::before — hide it,
+    // as Badge itself does when no dot should show.
+    "before:hidden shrink-0 cursor-pointer whitespace-nowrap",
+    "hover:bg-surface-2 hover:text-ink",
+    "outline-none focus-visible:shadow-[var(--shadow-focus)]"
+  ]
+});
+function BadgeGroup({ children, className, ...props }) {
+  const items = Children.toArray(children);
+  const signature = items.map((item, index) => isValidElement(item) ? String(item.key ?? index) : String(item)).join("");
+  const rootRef = useRef(null);
+  const metricsRef = useRef(null);
+  const [layout, setLayout] = useState({ signature, visibleCount: null });
+  if (layout.signature !== signature) {
+    metricsRef.current = null;
+    setLayout({ signature, visibleCount: null });
+  }
+  const measuring = layout.signature !== signature || layout.visibleCount === null;
+  const visibleCount = measuring ? items.length : layout.visibleCount ?? items.length;
+  const shown = items.slice(0, visibleCount);
+  const hidden = measuring ? items.length : items.length - visibleCount;
+  useLayoutEffect(() => {
+    if (!measuring) return;
+    const root = rootRef.current;
+    if (!root) return;
+    const nodes = Array.from(root.children);
+    const metrics = {
+      itemWidths: nodes.slice(0, items.length).map((node) => node.getBoundingClientRect().width),
+      overflowWidth: nodes[items.length]?.getBoundingClientRect().width ?? 0,
+      gap: Number.parseFloat(getComputedStyle(root).columnGap) || 0
+    };
+    metricsRef.current = metrics;
+    setLayout({ signature, visibleCount: fitBadgeCount(metrics, root.clientWidth) });
+  }, [measuring, signature, items.length]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      const metrics = metricsRef.current;
+      if (!metrics) return;
+      const next = fitBadgeCount(metrics, root.clientWidth);
+      setLayout((prev) => prev.visibleCount === next ? prev : { ...prev, visibleCount: next });
+    });
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+    if (!fonts || fonts.status === "loaded") return;
+    let cancelled = false;
+    void fonts.ready.then(() => {
+      if (cancelled) return;
+      metricsRef.current = null;
+      setLayout((prev) => ({ ...prev, visibleCount: null }));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref: rootRef,
+      className: cn(badgeGroupStyles({ isMeasuring: measuring }), className),
+      children: [
+        shown.map((item, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-flex shrink-0",
+            children: item
+          },
+          (isValidElement(item) ? item.key : null) ?? index
+        )),
+        hidden > 0 ? (
+          // The span swallows the click before it reaches a clickable host row
+          // (React propagation), so opening the overflow never opens the record.
+          // biome-ignore lint/a11y/noStaticElementInteractions: click fence only — the button inside is the interactive element
+          // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard handling lives on the button inside
+          /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+              /* @__PURE__ */ jsxs(Button$1, { className: badgeGroupOverflowStyles(), children: [
+                "+",
+                hidden,
+                " more"
+              ] }),
+              /* @__PURE__ */ jsx(Tooltip, { className: "max-w-sm", children: /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-1.5", children: items }) })
+            ] }),
+            /* @__PURE__ */ jsx(PopoverContent, { placement: "bottom start", panelClassName: "max-w-sm", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5 p-2.5", children: items }) })
+          ] }) })
+        ) : null
+      ]
+    }
+  );
+}
+var listboxCheckStyles = tv({
+  slots: {
+    box: [
+      "relative inline-flex items-center justify-center shrink-0",
+      "size-[16px] rounded-[3px] border border-ink-4 bg-surface",
+      "transition-[background-color,border-color] duration-150",
+      "group-data-[selected]:bg-ink group-data-[selected]:border-ink"
+    ],
+    tick: [
+      "size-3 text-surface transition-opacity duration-150",
+      "opacity-0 group-data-[selected]:opacity-100"
+    ]
+  }
+});
+function ListboxCheck() {
+  const { box, tick } = listboxCheckStyles();
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: box(), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", className: tick(), "aria-hidden": true, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2.5 6.25 5 8.75 9.5 3.75",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none"
+    }
+  ) }) });
+}
+function useChipRowWrap(ref, isEnabled, signature) {
+  const [hasWrapped, setHasWrapped] = useState(false);
+  useLayoutEffect(() => {
+    if (!isEnabled) return;
+    const element = ref.current;
+    if (!element) return;
+    const measure = () => {
+      const children = Array.from(element.children);
+      const first = children[0]?.getBoundingClientRect();
+      if (!first || first.height === 0) {
+        setHasWrapped(false);
+        return;
+      }
+      setHasWrapped(children.some((child) => child.getBoundingClientRect().top >= first.bottom - 1));
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref, isEnabled, signature]);
+  return hasWrapped;
+}
 function badgeChrome(option) {
   return {
     ...option.variant ? { variant: option.variant } : {},
@@ -921,18 +1160,51 @@ function BadgeMultiSelect({
   size = "md",
   appearance,
   autoFocus = false,
+  defaultOpen = false,
+  "aria-label": ariaLabel,
   className
 }) {
+  const isCell = appearance === "cell";
   const styles4 = fieldControlStyles({ size, invalid: isInvalid, appearance });
-  const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
-  const minHeight = appearance === "cell" ? "min-h-[29px]" : fieldMinHeight[size];
+  const focusWithin = isCell ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
   const [isOpen, setIsOpen] = useState(false);
   const triggerRef = useRef(null);
+  const chipsRef = useRef(null);
+  const popoverRef = useRef(null);
+  const closedByPointerRef = useRef(false);
   useEffect(() => {
     if (autoFocus) triggerRef.current?.focus();
+    if (defaultOpen && !isDisabled) setIsOpen(true);
   }, []);
+  const wasOpenRef = useRef(false);
+  useEffect(() => {
+    if (wasOpenRef.current && !isOpen && !closedByPointerRef.current) {
+      const active = document.activeElement;
+      const strandedInList = !active || active === document.body || !!active.closest('[data-rac][role="listbox"]');
+      if (strandedInList) triggerRef.current?.focus();
+    }
+    wasOpenRef.current = isOpen;
+    closedByPointerRef.current = false;
+  }, [isOpen]);
   const selectedSet = new Set(selectedKeys);
   const selectedOptions = options.filter((o) => selectedSet.has(o.id));
+  const hasWrapped = useChipRowWrap(
+    chipsRef,
+    isCell,
+    JSON.stringify(selectedOptions.map((o) => o.id))
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (triggerRef.current?.contains(target) || popoverRef.current?.contains(target)) return;
+      closedByPointerRef.current = true;
+      setIsOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [isOpen]);
   const listboxOptions = hideSelectedOptions ? options.filter((o) => !selectedSet.has(o.id)) : options;
   const remove = (id) => {
     const next = new Set(selectedSet);
@@ -944,6 +1216,12 @@ function BadgeMultiSelect({
     if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
       e.preventDefault();
       setIsOpen(true);
+      return;
+    }
+    if (e.key === "Escape" && isOpen) {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsOpen(false);
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-1.5", className), children: [
@@ -953,6 +1231,7 @@ function BadgeMultiSelect({
       {
         ref: triggerRef,
         role: "combobox",
+        "aria-label": ariaLabel,
         "aria-expanded": isOpen,
         "aria-haspopup": "listbox",
         "aria-disabled": isDisabled || void 0,
@@ -964,34 +1243,53 @@ function BadgeMultiSelect({
         "data-disabled": isDisabled || void 0,
         className: cn(
           styles4.box(),
-          "flex flex-wrap items-center gap-1.5 cursor-pointer",
-          minHeight,
-          fieldChipPadding[size],
-          "pr-2",
+          "flex items-stretch cursor-pointer",
+          // Cell editor: one table row (29px under a 32px row) while the chips
+          // fit on a line; two rows (64px), popping out of the row, once they
+          // wrap — the chips then scroll inside. Field mode grows with its
+          // content like every other chip field.
+          isCell ? hasWrapped ? "h-[64px] p-1" : "h-[29px] px-1 py-0" : [fieldChipPadding[size], fieldMinHeight[size]],
           focusWithin
         ),
         children: [
-          selectedOptions.length === 0 ? (
-            // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
-            // overall height so it matches the Input/Select trigger at the same
-            // size.
-            /* @__PURE__ */ jsx("span", { className: cn("text-ink-4 font-sans px-1", fieldTextStyles[size]), children: placeholder })
-          ) : selectedOptions.map((o) => /* @__PURE__ */ jsx(
-            RemovableBadge,
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              ...badgeChrome(o),
-              onRemove: () => remove(o.id),
-              isDisabled,
-              children: o.label
-            },
-            o.id
-          )),
-          /* @__PURE__ */ jsx("span", { className: "ml-auto pr-1", children: /* @__PURE__ */ jsx(FieldCaret, {}) })
+              ref: chipsRef,
+              className: cn(
+                "flex flex-1 flex-wrap items-center gap-1.5 min-w-0",
+                isCell && (hasWrapped ? "content-start overflow-y-auto" : "content-center overflow-hidden")
+              ),
+              children: selectedOptions.length === 0 ? (
+                // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
+                // overall height so it matches the Input/Select trigger at the same
+                // size.
+                /* @__PURE__ */ jsx("span", { className: cn("text-ink-4 font-sans px-1", fieldTextStyles[size]), children: placeholder })
+              ) : selectedOptions.map((o) => /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  ...badgeChrome(o),
+                  className: "shrink-0",
+                  actions: /* @__PURE__ */ jsx(
+                    BadgeAction,
+                    {
+                      label: "Remove",
+                      onPress: () => remove(o.id),
+                      isDisabled
+                    }
+                  ),
+                  children: o.label
+                },
+                o.id
+              ))
+            }
+          ),
+          isCell ? null : /* @__PURE__ */ jsx("span", { className: "flex items-center pl-1.5 pr-1", children: /* @__PURE__ */ jsx(FieldCaret, {}) })
         ]
       }
     ),
     description ? /* @__PURE__ */ jsx("p", { className: fieldHintStyles, children: description }) : null,
-    errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsx("p", { className: fieldErrorStyles, children: errorMessage }) : null,
+    errorMessage && !isCell ? /* @__PURE__ */ jsx("p", { className: fieldErrorStyles, children: errorMessage }) : null,
     /* @__PURE__ */ jsx(
       Popover$1,
       {
@@ -1000,18 +1298,27 @@ function BadgeMultiSelect({
         triggerRef,
         offset: 6,
         placement: "bottom start",
+        isNonModal: true,
+        shouldCloseOnInteractOutside: (element) => !triggerRef.current?.contains(element),
         className: cn(
-          "w-[var(--trigger-width)]",
-          "rounded-md border border-rule bg-surface p-1",
+          // At least as wide as the trigger, wider when a badge needs it —
+          // a narrow table column must not clip its own options.
+          "min-w-[var(--trigger-width)] w-max max-w-[min(28rem,calc(100vw-2rem))]",
+          // Float above modals + full-screen editors, matching Select.
+          "z-[1300]",
+          // The popover element itself takes focus when opened programmatically
+          // (defaultOpen) — no browser outline around the whole panel.
+          "outline-none rounded-md border border-rule bg-surface p-1",
           "shadow-[var(--shadow-raised)]",
           "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
           "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1"
         ),
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx("div", { ref: popoverRef, children: /* @__PURE__ */ jsx(
           ListBox,
           {
-            "aria-label": typeof label === "string" ? label : "Options",
+            "aria-label": typeof label === "string" ? label : ariaLabel ?? "Options",
             selectionMode: "multiple",
+            escapeKeyBehavior: "none",
             selectedKeys: selectedSet,
             onSelectionChange: (keys) => {
               if (keys === "all") {
@@ -1020,70 +1327,32 @@ function BadgeMultiSelect({
               }
               onSelectionChange(keys);
             },
+            autoFocus: "first",
             className: "outline-none max-h-72 overflow-auto",
             renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: cn("px-3 py-2", fieldHintStyles), children: "All options selected" }),
-            children: listboxOptions.map((option) => /* @__PURE__ */ jsx(
+            children: listboxOptions.map((option) => /* @__PURE__ */ jsxs(
               ListBoxItem,
               {
                 id: option.id,
                 textValue: option.label,
                 ...option.isDisabled ? { isDisabled: true } : {},
                 className: cn(
-                  "group flex items-center",
-                  "rounded-[6px] px-3 py-2",
+                  "group flex items-center gap-2.5",
+                  "rounded-[6px] px-2.5 py-1.5",
                   "cursor-pointer outline-none select-none",
+                  // Selection is carried by the check box, not a row fill.
                   "data-[hovered]:bg-surface-2",
                   "data-[focused]:bg-surface-2",
-                  "data-[selected]:bg-surface-3",
                   "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed"
                 ),
-                children: /* @__PURE__ */ jsx(Badge, { ...badgeChrome(option), children: option.label })
+                children: [
+                  /* @__PURE__ */ jsx(ListboxCheck, {}),
+                  /* @__PURE__ */ jsx(Badge, { ...badgeChrome(option), children: option.label })
+                ]
               },
               option.id
             ))
           }
-        )
-      }
-    )
-  ] });
-}
-function RemovableBadge({
-  children,
-  onRemove,
-  isDisabled,
-  ...chrome
-}) {
-  return /* @__PURE__ */ jsxs(Badge, { ...badgeChrome(chrome), children: [
-    /* @__PURE__ */ jsx("span", { children }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Remove",
-        disabled: isDisabled,
-        onClick: (e) => {
-          e.stopPropagation();
-          onRemove();
-        },
-        className: cn(
-          "inline-flex items-center justify-center shrink-0",
-          "size-3.5 rounded-full",
-          "text-current/70 hover:text-current hover:bg-current/10",
-          "outline-none cursor-pointer",
-          "focus-visible:shadow-[var(--shadow-focus)]",
-          "disabled:opacity-45 disabled:cursor-not-allowed",
-          // Pull the button flush with the right edge so the pill still feels
-          // symmetric around the leading dot.
-          "-mr-1"
-        ),
-        children: /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 10 10", className: "size-2.5", fill: "none", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M2 2l6 6M8 2l-6 6",
-            stroke: "currentColor",
-            strokeWidth: "1.4",
-            strokeLinecap: "round"
-          }
         ) })
       }
     )
@@ -2687,7 +2956,9 @@ var tableHeaderStyles = tv({
     "border-b border-rule"
   ],
   variants: {
-    sticky: { true: "sticky top-0 z-[2]", false: "" }
+    // z-[4]: above an editing row (z-[3]) — sticky chrome stays on top of
+    // rows scrolling underneath, popped-out editors included.
+    sticky: { true: "sticky top-0 z-[4]", false: "" }
   },
   defaultVariants: { sticky: false }
 });
@@ -2752,11 +3023,57 @@ function TableHeaderCell({
   onRemove,
   ariaLabel,
   sticky = false,
+  onResize,
+  minWidth = 64,
   ...rest
 }) {
   const cellRef = useRef(null);
   const handleRef = useRef(null);
   const [dragState, setDragState] = useState({ kind: "idle" });
+  const [isResizing, setIsResizing] = useState(false);
+  const startResize = (event) => {
+    if (!onResize || event.button !== 0) return;
+    const cell = cellRef.current;
+    if (!cell) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const handle = event.currentTarget;
+    const startX = event.clientX;
+    const startWidth = cell.getBoundingClientRect().width;
+    if (typeof handle.setPointerCapture === "function") handle.setPointerCapture(event.pointerId);
+    setIsResizing(true);
+    document.body.style.cursor = "col-resize";
+    let frame = 0;
+    const report = (clientX) => {
+      const next = Math.max(minWidth, Math.round(startWidth + clientX - startX));
+      if (typeof requestAnimationFrame !== "function") {
+        onResize(next);
+        return;
+      }
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => onResize(next));
+    };
+    const onMove = (move) => report(move.clientX);
+    const onEnd = () => {
+      handle.removeEventListener("pointermove", onMove);
+      handle.removeEventListener("pointerup", onEnd);
+      handle.removeEventListener("pointercancel", onEnd);
+      document.body.style.cursor = "";
+      setIsResizing(false);
+    };
+    handle.addEventListener("pointermove", onMove);
+    handle.addEventListener("pointerup", onEnd);
+    handle.addEventListener("pointercancel", onEnd);
+  };
+  const resizeByKey = (event) => {
+    if (!onResize) return;
+    const step = event.key === "ArrowRight" ? 8 : event.key === "ArrowLeft" ? -8 : 0;
+    if (step === 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const current = cellRef.current?.getBoundingClientRect().width ?? minWidth;
+    onResize(Math.max(minWidth, Math.round(current + step)));
+  };
   useEffect(() => {
     if (!isDraggable || !columnId) return;
     const cell = cellRef.current;
@@ -2774,10 +3091,7 @@ function TableHeaderCell({
       dropTargetForElements({
         element: cell,
         canDrop: ({ source }) => isColumnDragData(source.data) && source.data.columnId !== columnId,
-        getData: ({ input, element }) => attachClosestEdge(
-          { ...data },
-          { input, element, allowedEdges: ["left", "right"] }
-        ),
+        getData: ({ input, element }) => attachClosestEdge({ ...data }, { input, element, allowedEdges: ["left", "right"] }),
         getIsSticky: () => true,
         onDragEnter: ({ self }) => {
           const edge = extractClosestEdge(self.data);
@@ -2804,6 +3118,7 @@ function TableHeaderCell({
     const target = e.target;
     if (target.closest('[data-dnd-handle="true"]')) return;
     if (target.closest('[data-column-remove="true"]')) return;
+    if (target.closest('[data-column-resize="true"]')) return;
     onSortToggle?.();
   };
   const handleKeyDown = (e) => {
@@ -2887,6 +3202,42 @@ function TableHeaderCell({
               dragState.edge === "left" ? "-left-px" : "-right-px"
             )
           }
+        ) : null,
+        onResize ? (
+          // Sits astride the trailing separator: an 8px grab zone with a 2px
+          // bar that lights up on hover, focus and while dragging. A focusable
+          // separator is the ARIA pattern for a resizer (no semantic element
+          // exists for it); its value is the column width when one is known.
+          // biome-ignore lint/a11y/useSemanticElements: interactive vertical resizer — <hr> cannot be one
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "separator",
+              "aria-orientation": "vertical",
+              "aria-label": `Resize column ${ariaLabel ?? "column"}`,
+              "aria-valuemin": minWidth,
+              "aria-valuenow": typeof width === "number" ? width : void 0,
+              tabIndex: 0,
+              "data-column-resize": "true",
+              onPointerDown: startResize,
+              onKeyDown: resizeByKey,
+              onClick: (e) => e.stopPropagation(),
+              className: cn(
+                "group/resize absolute inset-y-0 -right-1 z-10 w-2 cursor-col-resize outline-none",
+                "flex justify-center"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "h-full w-0.5 transition-colors",
+                    isResizing ? "bg-accent" : "bg-transparent group-hover/resize:bg-accent group-focus-visible/resize:bg-accent"
+                  )
+                }
+              )
+            }
+          )
         ) : null
       ]
     }
@@ -2940,12 +3291,27 @@ var tableScrollerStyles = tv({
   base: ["relative flex-1 min-h-0 overflow-auto", ...scrollbarChrome]
 });
 function TableScroller({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx("div", { role: "presentation", ref, ...props, className: cn(tableScrollerStyles(), className) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "presentation",
+      ref,
+      ...props,
+      className: cn(tableScrollerStyles(), className)
+    }
+  );
 }
 var rowStripeBg = "bg-[color-mix(in_oklab,var(--color-ink)_var(--row-stripe),var(--color-bg))]";
 var rowHoverBg = "hover:bg-[color-mix(in_oklab,var(--color-ink)_var(--row-hover),var(--color-bg))]";
+var cellEditingRow = "has-[[data-cell-editing]]:z-[3]";
+var cellEditingCell = "has-[[data-cell-editing]]:z-[3] has-[[data-cell-editing]]:overflow-visible";
 var tableRowStyles = tv({
-  base: ["flex items-stretch", "border-b border-rule-2 last:border-b-0", "bg-bg"],
+  base: [
+    "relative flex items-stretch",
+    "border-b border-rule-2 last:border-b-0",
+    "bg-bg",
+    cellEditingRow
+  ],
   variants: {
     alt: {
       true: rowStripeBg,
@@ -2956,7 +3322,9 @@ var tableRowStyles = tv({
       false: rowHoverBg
     },
     absolute: {
-      true: "absolute left-0 right-0",
+      // `top-0` pins the static position: a virtualized row must never
+      // inherit a flow offset from a sibling that is in normal flow.
+      true: "absolute top-0 left-0 right-0",
       false: ""
     }
   },
@@ -2987,11 +3355,12 @@ function TableRow({
 }
 var tableCellStyles = tv({
   base: [
-    "flex items-center shrink-0 min-w-0",
+    "relative flex items-center shrink-0 min-w-0",
     "px-[14px]",
     "whitespace-nowrap overflow-hidden text-ellipsis",
     "font-sans text-[13px] tracking-[-0.005em]",
-    "text-ink-2"
+    "text-ink-2",
+    cellEditingCell
   ],
   variants: {
     align: {
@@ -3152,6 +3521,8 @@ function DataTable({
   enableColumnRemoval = false,
   onReorderColumn,
   onRemoveColumn,
+  enableColumnResizing = false,
+  onResizeColumn,
   variant = "panel",
   rowWrapper,
   extraRows,
@@ -3365,7 +3736,6 @@ function DataTable({
   const showEmpty = !query.isLoading && !query.error && tableRowCount === 0 && !query.isFetchingNextPage;
   const showInitialLoading = query.isLoading && tableRowCount === 0;
   const showError = !!query.error && tableRowCount === 0;
-  const showEndMarker = !query.isLoading && !query.isFetchingNextPage && !query.hasNextPage && tableRowCount > 0;
   const totalSize = virtualizer.getTotalSize();
   const virtualItems = virtualizer.getVirtualItems();
   const headerGroups = table.getHeaderGroups();
@@ -3376,84 +3746,108 @@ function DataTable({
       ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
       variant,
       className: cn("flex-1 min-h-0", className),
-      children: /* @__PURE__ */ jsx(TableScroller, { ref: scrollerRef, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { minWidth: minPanelWidth }, children: [
-        headerGroups.map((group) => /* @__PURE__ */ jsxs(TableHeader, { sticky: true, children: [
-          group.headers.map((header) => {
-            const meta = header.column.columnDef.meta;
-            const align = meta?.align ?? "left";
-            const sticky = meta?.sticky ?? false;
-            const headerSize = header.getSize() || void 0;
-            const headerNode = header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext());
-            const sorted = header.column.getIsSorted();
-            const direction = sorted === false ? null : sorted;
-            const canSort = header.column.getCanSort();
-            const handleSort = header.column.getToggleSortingHandler();
-            const ariaLabel2 = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id;
-            return /* @__PURE__ */ jsx(
-              TableHeaderCell,
-              {
-                align,
-                ariaLabel: ariaLabel2,
-                draggable: enableColumnReordering && !!header.column.id,
-                ...header.column.id ? { columnId: header.column.id } : {},
-                ...headerSize !== void 0 ? { width: headerSize } : {},
-                ...sticky !== false ? { sticky } : {},
-                ...meta?.cellClassName ? { className: meta.cellClassName } : {},
-                ...canSort ? {
-                  sortDirection: direction,
-                  onSortToggle: () => handleSort?.({})
-                } : {},
-                ...enableColumnRemoval && onRemoveColumn && header.column.id ? { onRemove: () => onRemoveColumn(header.column.id) } : {},
-                children: headerNode
-              },
-              header.id
-            );
-          }),
-          /* @__PURE__ */ jsx(TableHeaderSpacer, {})
-        ] }, group.id)),
-        bodyBefore,
-        showInitialLoading ? loadingState ?? /* @__PURE__ */ jsx(DataTableSkeleton, { rowHeight }) : showError ? /* @__PURE__ */ jsx("div", { role: "rowgroup", children: errorState ?? (query.error ? /* @__PURE__ */ jsx(DataTableError, { error: query.error }) : null) }) : /* @__PURE__ */ jsxs("div", { role: "rowgroup", children: [
-          showEmpty ? emptyState ?? /* @__PURE__ */ jsx(DataTableEmpty, {}) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: listRef,
-              role: "presentation",
-              style: { height: totalSize, position: "relative", width: "100%" },
-              children: virtualItems.map((vRow) => {
-                const item = listItems[vRow.index];
-                if (!item) return null;
-                const rowStyle = {
-                  // Items' `start` includes the virtualizer's scrollMargin
-                  // (the list's offset below the sticky header); subtract
-                  // it to position relative to the list container.
-                  transform: `translateY(${vRow.start - listOffset}px)`,
-                  height: vRow.size
-                };
-                if (item.kind === "group") {
-                  return /* @__PURE__ */ jsx(GroupHeaderRow, { style: rowStyle, children: item.label }, `group:${item.id}`);
-                }
+      children: /* @__PURE__ */ jsx(
+        TableScroller,
+        {
+          ref: scrollerRef,
+          className: cn("scroll-pt-[36px]", bodyAfter ? "scroll-pb-8" : void 0),
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { minWidth: minPanelWidth }, children: [
+            headerGroups.map((group) => /* @__PURE__ */ jsxs(TableHeader, { sticky: true, children: [
+              group.headers.map((header) => {
+                const meta = header.column.columnDef.meta;
+                const align = meta?.align ?? "left";
+                const sticky = meta?.sticky ?? false;
+                const headerSize = header.getSize() || void 0;
+                const headerNode = header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext());
+                const sorted = header.column.getIsSorted();
+                const direction = sorted === false ? null : sorted;
+                const canSort = header.column.getCanSort();
+                const handleSort = header.column.getToggleSortingHandler();
+                const ariaLabel2 = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id;
                 return /* @__PURE__ */ jsx(
-                  DataRow,
+                  TableHeaderCell,
                   {
-                    row: item.row,
-                    index: item.dataIndex,
-                    zebra,
-                    onRowClick,
-                    style: rowStyle,
-                    columnBorders,
-                    ...rowWrapper ? { rowWrapper } : {}
+                    align,
+                    ariaLabel: ariaLabel2,
+                    draggable: enableColumnReordering && !!header.column.id,
+                    ...header.column.id ? { columnId: header.column.id } : {},
+                    ...headerSize !== void 0 ? { width: headerSize } : {},
+                    ...sticky !== false ? { sticky } : {},
+                    ...meta?.cellClassName ? { className: meta.cellClassName } : {},
+                    ...canSort ? {
+                      sortDirection: direction,
+                      onSortToggle: () => handleSort?.({})
+                    } : {},
+                    ...enableColumnRemoval && onRemoveColumn && header.column.id ? { onRemove: () => onRemoveColumn(header.column.id) } : {},
+                    ...enableColumnResizing && onResizeColumn && header.column.id ? {
+                      onResize: (width) => onResizeColumn({ id: header.column.id, width })
+                    } : {},
+                    children: headerNode
                   },
-                  item.row.id
+                  header.id
                 );
-              })
-            }
-          ),
-          !showEmpty && /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": "true", style: { height: 1, width: "100%" } }),
-          query.isFetchingNextPage ? /* @__PURE__ */ jsx(LoaderRow, {}) : null,
-          showEndMarker ? /* @__PURE__ */ jsx(EndMarker, { count: tableRowCount }) : null
-        ] }),
-        bodyAfter
-      ] }) })
+              }),
+              /* @__PURE__ */ jsx(TableHeaderSpacer, {})
+            ] }, group.id)),
+            bodyBefore,
+            showInitialLoading ? loadingState ?? /* @__PURE__ */ jsx(DataTableSkeleton, { rowHeight }) : showError ? /* @__PURE__ */ jsx("div", { role: "rowgroup", children: errorState ?? (query.error ? /* @__PURE__ */ jsx(DataTableError, { error: query.error }) : null) }) : /* @__PURE__ */ jsxs("div", { role: "rowgroup", children: [
+              showEmpty ? emptyState ?? /* @__PURE__ */ jsx(DataTableEmpty, {}) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: listRef,
+                  role: "presentation",
+                  style: { height: totalSize, position: "relative", width: "100%" },
+                  children: virtualItems.map((vRow) => {
+                    const item = listItems[vRow.index];
+                    if (!item) return null;
+                    const rowStyle = {
+                      // Items' `start` includes the virtualizer's scrollMargin
+                      // (the list's offset below the sticky header); subtract
+                      // it to position relative to the list container.
+                      transform: `translateY(${vRow.start - listOffset}px)`,
+                      height: vRow.size
+                    };
+                    if (item.kind === "group") {
+                      return /* @__PURE__ */ jsx(GroupHeaderRow, { style: rowStyle, children: item.label }, `group:${item.id}`);
+                    }
+                    return /* @__PURE__ */ jsx(
+                      DataRow,
+                      {
+                        row: item.row,
+                        index: item.dataIndex,
+                        zebra,
+                        onRowClick,
+                        style: rowStyle,
+                        columnBorders,
+                        ...rowWrapper ? { rowWrapper } : {}
+                      },
+                      item.row.id
+                    );
+                  })
+                }
+              ),
+              !showEmpty && /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": "true", style: { height: 1, width: "100%" } }),
+              query.isFetchingNextPage ? /* @__PURE__ */ jsx(LoaderRow, {}) : null
+            ] }),
+            bodyAfter ? (
+              // Sticky to the scroller's bottom edge; `bg-bg` covers the rows
+              // sliding underneath. z-[4] — like the sticky header — stays above an
+              // editing row (z-[3]), so an editor scrolled under the strip is
+              // covered rather than drawn over it.
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "sticky bottom-0 z-[4] flex items-center h-8 px-0.5",
+                    "border-t border-rule-2 bg-bg"
+                  ),
+                  children: bodyAfter
+                }
+              )
+            ) : null
+          ] })
+        }
+      )
     }
   );
 }
@@ -3553,23 +3947,6 @@ function LoaderRow() {
     }
   );
 }
-function EndMarker({ count }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center justify-center",
-        "h-8 font-mono text-[10.5px] uppercase tracking-[0.08em]",
-        "text-ink-4"
-      ),
-      children: [
-        "end \xB7 ",
-        count.toLocaleString(),
-        " rows"
-      ]
-    }
-  );
-}
 
 // src/components/data-table/make-actions-column.ts
 function makeActionsColumn({
@@ -4157,7 +4534,9 @@ function MultiSelect({
         placement: "bottom start",
         className: cn(
           "w-[var(--trigger-width)]",
-          "rounded-md border border-rule bg-surface p-1",
+          // The popover element itself takes focus when opened programmatically
+          // (defaultOpen) — no browser outline around the whole panel.
+          "outline-none rounded-md border border-rule bg-surface p-1",
           "shadow-[var(--shadow-raised)]",
           "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
           "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1"
@@ -4182,6 +4561,7 @@ function MultiSelect({
             {
               "aria-label": typeof label === "string" ? label : "Options",
               selectionMode: "multiple",
+              escapeKeyBehavior: "none",
               selectedKeys: selectedSet,
               onSelectionChange: (keys) => {
                 if (keys === "all") {
@@ -4204,11 +4584,10 @@ function MultiSelect({
                     "cursor-pointer outline-none select-none",
                     "data-[hovered]:bg-surface-2 data-[hovered]:text-ink",
                     "data-[focused]:bg-surface-2 data-[focused]:text-ink",
-                    "data-[selected]:bg-surface-3 data-[selected]:text-ink",
                     "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx(Checkmark, {}),
+                    /* @__PURE__ */ jsx(ListboxCheck, {}),
                     /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.content ?? option.label })
                   ]
                 },
@@ -4269,42 +4648,6 @@ function Chip({
     }
   );
 }
-function Checkmark() {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": true,
-      className: cn(
-        "relative inline-flex items-center justify-center shrink-0",
-        "size-[16px] rounded-[3px] border border-ink-4 bg-surface",
-        "transition-[background-color,border-color] duration-150",
-        "group-data-[selected]:bg-ink group-data-[selected]:border-ink"
-      ),
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          viewBox: "0 0 12 12",
-          className: cn(
-            "size-3 text-surface transition-opacity duration-150",
-            "opacity-0 group-data-[selected]:opacity-100"
-          ),
-          "aria-hidden": true,
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M2.5 6.25 5 8.75 9.5 3.75",
-              stroke: "currentColor",
-              strokeWidth: "1.6",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              fill: "none"
-            }
-          )
-        }
-      )
-    }
-  );
-}
 var SEARCH_DEBOUNCE_MS = 250;
 function RecipientSelect({
   connectionId,
@@ -6159,13 +6502,21 @@ function TagInput({
 }) {
   const styles4 = fieldControlStyles({ size, invalid: isInvalid, appearance });
   const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
-  const minHeight = appearance === "cell" ? "min-h-[29px]" : fieldMinHeight[size];
+  const isCell = appearance === "cell";
   const inputRef = useRef(null);
+  const chipsRef = useRef(null);
+  const hasWrapped = useChipRowWrap(chipsRef, isCell, JSON.stringify(value));
   useEffect(() => {
     if (autoFocus) inputRef.current?.focus();
   }, []);
   const inputId = useId();
   const [draft, setDraft] = useState("");
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!isCell || !input || document.activeElement !== input) return;
+    if (typeof input.scrollIntoView !== "function") return;
+    input.scrollIntoView({ block: "nearest" });
+  }, [isCell, value]);
   const commit = () => {
     const v = draft.trim();
     if (!v) return;
@@ -6182,7 +6533,10 @@ function TagInput({
   const onKeyDown2 = (e) => {
     if (e.key === "Enter" || e.key === ",") {
       e.preventDefault();
-      commit();
+      if (draft.trim()) {
+        e.stopPropagation();
+        commit();
+      }
       return;
     }
     if (e.key === "Backspace" && !draft && value.length > 0) {
@@ -6192,85 +6546,78 @@ function TagInput({
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-1.5", className), children: [
     label ? /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: fieldLabelStyles, children: label }) : null,
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: cn(
           styles4.box(),
-          "flex flex-wrap items-center gap-1",
-          minHeight,
-          fieldChipPadding[size],
+          "flex",
+          // Cell editor: one table row (29px under a 32px row) while the chips
+          // fit on a line; two rows (64px), popping out of the row, once they
+          // wrap — the chips then scroll inside. Field mode grows with its
+          // content.
+          isCell ? hasWrapped ? "h-[64px] p-1" : "h-[29px] px-1 py-0" : [fieldChipPadding[size], fieldMinHeight[size]],
           focusWithin
         ),
-        children: [
-          value.map((tag, idx) => (
-            // tags are kept unique on commit, so the value alone is a stable key
-            /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: cn(
-                  "inline-flex items-center gap-1",
-                  "px-1.5 py-0.5 rounded-sm bg-surface-3",
-                  "font-mono text-[12px] text-ink-2"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "max-w-[10rem] truncate", children: tag }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": `Remove ${tag}`,
-                      disabled: isDisabled,
-                      onClick: () => remove(idx),
-                      className: cn(
-                        "inline-flex items-center justify-center",
-                        "size-3.5 rounded-full text-ink-3 hover:text-ink hover:bg-surface-2",
-                        "cursor-pointer outline-none",
-                        "focus-visible:shadow-[var(--shadow-focus)]",
-                        "disabled:opacity-45 disabled:cursor-not-allowed"
-                      ),
-                      children: /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 10 10", className: "size-2", fill: "none", children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M2 2l6 6M8 2l-6 6",
-                          stroke: "currentColor",
-                          strokeWidth: "1.4",
-                          strokeLinecap: "round"
-                        }
-                      ) })
-                    }
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: chipsRef,
+            className: cn(
+              "flex flex-1 flex-wrap items-center gap-1.5 min-w-0",
+              isCell && (hasWrapped ? "content-start overflow-y-auto" : "content-center overflow-hidden")
+            ),
+            children: [
+              value.map((tag, idx) => (
+                // tags are kept unique on commit, so the value alone is a stable key
+                /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    variant: "active",
+                    shape: "rounded",
+                    hasDot: false,
+                    className: "shrink-0",
+                    actions: /* @__PURE__ */ jsx(
+                      BadgeAction,
+                      {
+                        label: `Remove ${tag}`,
+                        onPress: () => remove(idx),
+                        isDisabled
+                      }
+                    ),
+                    children: /* @__PURE__ */ jsx("span", { className: "max-w-[10rem] truncate", children: tag })
+                  },
+                  tag
+                )
+              )),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  id: inputId,
+                  type: inputType,
+                  value: draft,
+                  onChange: (e) => setDraft(e.target.value),
+                  onKeyDown: onKeyDown2,
+                  onBlur: commit,
+                  disabled: isDisabled,
+                  placeholder: value.length === 0 ? placeholder : "",
+                  className: cn(
+                    "flex-1 min-w-[6rem] bg-transparent outline-none",
+                    "font-sans text-ink placeholder:text-ink-4",
+                    fieldTextStyles[size],
+                    // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
+                    // overall height so it matches Input/Select at the same size.
+                    "px-1.5",
+                    "disabled:cursor-not-allowed disabled:opacity-45"
                   )
-                ]
-              },
-              tag
-            )
-          )),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              id: inputId,
-              type: inputType,
-              value: draft,
-              onChange: (e) => setDraft(e.target.value),
-              onKeyDown: onKeyDown2,
-              onBlur: commit,
-              disabled: isDisabled,
-              placeholder: value.length === 0 ? placeholder : "",
-              className: cn(
-                "flex-1 min-w-[6rem] bg-transparent outline-none",
-                "font-sans text-ink placeholder:text-ink-4",
-                fieldTextStyles[size],
-                // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
-                // overall height so it matches Input/Select at the same size.
-                "px-1.5",
-                "disabled:cursor-not-allowed disabled:opacity-45"
+                }
               )
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     ),
     description ? /* @__PURE__ */ jsx("p", { className: fieldHintStyles, children: description }) : null,
@@ -8170,32 +8517,7 @@ function ToastRegion({ queue, className }) {
     }
   );
 }
-function TooltipTrigger({
-  delay = 500,
-  closeDelay = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(TooltipTrigger$1, { delay, closeDelay, ...props });
-}
-function Tooltip({ className, offset = 6, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Tooltip$1,
-    {
-      ...props,
-      offset,
-      className: (renderProps) => cn(
-        "z-50 max-w-xs",
-        "rounded-md border border-rule bg-surface shadow-[var(--shadow-raised)]",
-        "px-2.5 py-1.5",
-        "font-mono text-[11.5px] text-ink-2",
-        "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1 entering:duration-150",
-        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
-        typeof className === "function" ? className(renderProps) : className
-      )
-    }
-  );
-}
 
-export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, Avatar, AvatarGroup, Badge, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, CONVERSATION_BRIEF_OUTCOME_LABEL, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, ColorInput, Combobox, Command, CommandHint, ConversationBriefCard, ConversationBriefPreview, ConversationBriefReview, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, EmptyState, ErrorAnimation, FIELD_LABEL_SEPARATOR, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, IconPicker, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, MAX_COMPOSER_ATTACHMENT_BYTES, Menu, MenuItem, MenuPopover, MenuTrigger, MessageComposer, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, Orb, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RenderChipItemProvider, RenderValueInputProvider, SELECTION_COLUMN_ID, SegmentedControl, Select, Separator, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, Textarea, TimeField, ToastRegion, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, avatarGroupStyles, avatarStyles, badgeStyles, cardStyles2 as cardStyles, channelIcon, contactPhoneNumbers, conversationBriefCardStyles, conversationBriefOutcomeFor, countLeaves, createConversationBriefClient, createDraftMessageClient, createToastQueue, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, formatFileSize, formatValue, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDialableConversationBrief, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, joinFieldLabel, makeActionsColumn, messageComposerStyles, namesOf, navItemStyles, normalizeHexColor, operatorById, operatorsForType, parseCombo, progressBarStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, resolveLucideIcon, resolveLucideIconName, segmentedControlStyles, setJoiner, subscribeDraftMessageOutcome, summaryFor, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, toastStyles, updateLeaf, updateSubgroup, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
+export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, Avatar, AvatarGroup, Badge, BadgeAction, BadgeGroup, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, CONVERSATION_BRIEF_OUTCOME_LABEL, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, ColorInput, Combobox, Command, CommandHint, ConversationBriefCard, ConversationBriefPreview, ConversationBriefReview, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, EmptyState, ErrorAnimation, FIELD_LABEL_SEPARATOR, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, IconPicker, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, MAX_COMPOSER_ATTACHMENT_BYTES, Menu, MenuItem, MenuPopover, MenuTrigger, MessageComposer, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, Orb, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RenderChipItemProvider, RenderValueInputProvider, SELECTION_COLUMN_ID, SegmentedControl, Select, Separator, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, Textarea, TimeField, ToastRegion, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, avatarGroupStyles, avatarStyles, badgeGroupOverflowStyles, badgeGroupStyles, badgeStyles, cardStyles2 as cardStyles, channelIcon, contactPhoneNumbers, conversationBriefCardStyles, conversationBriefOutcomeFor, countLeaves, createConversationBriefClient, createDraftMessageClient, createToastQueue, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, fitBadgeCount, formatFileSize, formatValue, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDialableConversationBrief, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, joinFieldLabel, makeActionsColumn, messageComposerStyles, namesOf, navItemStyles, normalizeHexColor, operatorById, operatorsForType, parseCombo, progressBarStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, resolveLucideIcon, resolveLucideIconName, segmentedControlStyles, setJoiner, subscribeDraftMessageOutcome, summaryFor, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, toastStyles, updateLeaf, updateSubgroup, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map