@proteos/ui 0.54.1 → 0.56.0

package/dist/index.cjs

@@ -873,6 +873,7 @@ function Badge({
   hasDot,
   color,
   icon,
+  actions,
   className,
   style,
   children,
@@ -894,11 +895,249 @@ function Badge({
       ),
       children: [
         Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true, className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center shrink-0 -mr-1", children: actions })
+        ) : null
       ]
     }
   );
 }
+function BadgeAction({ label, onPress, isDisabled = false, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      disabled: isDisabled,
+      onClick: (event) => {
+        event.stopPropagation();
+        onPress();
+      },
+      className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("svg", { "aria-hidden": true, viewBox: "0 0 10 10", className: "size-2.5", fill: "none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactAriaComponents.TooltipTrigger, { delay, closeDelay, ...props });
+}
+function Tooltip({ className, offset = 6, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Tooltip,
+    {
+      ...props,
+      offset,
+      className: (renderProps) => chunkMWAXK66H_cjs.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 = tailwindVariants.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 = tailwindVariants.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 = react.Children.toArray(children);
+  const signature = items.map((item, index) => react.isValidElement(item) ? String(item.key ?? index) : String(item)).join("");
+  const rootRef = react.useRef(null);
+  const metricsRef = react.useRef(null);
+  const [layout, setLayout] = react.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;
+  react.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]);
+  react.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();
+  }, []);
+  react.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      ref: rootRef,
+      className: chunkMWAXK66H_cjs.cn(badgeGroupStyles({ isMeasuring: measuring }), className),
+      children: [
+        shown.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "inline-flex shrink-0",
+            children: item
+          },
+          (react.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__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(TooltipTrigger, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Button, { className: badgeGroupOverflowStyles(), children: [
+                "+",
+                hidden,
+                " more"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { className: "max-w-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-wrap items-center gap-1.5", children: items }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { placement: "bottom start", panelClassName: "max-w-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1.5 p-2.5", children: items }) })
+          ] }) })
+        ) : null
+      ]
+    }
+  );
+}
+var listboxCheckStyles = tailwindVariants.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: box(), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", className: tick(), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  react.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 } : {},
@@ -922,18 +1161,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] = react.useState(false);
   const triggerRef = react.useRef(null);
+  const chipsRef = react.useRef(null);
+  const popoverRef = react.useRef(null);
+  const closedByPointerRef = react.useRef(false);
   react.useEffect(() => {
     if (autoFocus) triggerRef.current?.focus();
+    if (defaultOpen && !isDisabled) setIsOpen(true);
   }, []);
+  const wasOpenRef = react.useRef(false);
+  react.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))
+  );
+  react.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);
@@ -945,6 +1217,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__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn("grid grid-cols-1 gap-1.5", className), children: [
@@ -954,6 +1232,7 @@ function BadgeMultiSelect({
       {
         ref: triggerRef,
         role: "combobox",
+        "aria-label": ariaLabel,
         "aria-expanded": isOpen,
         "aria-haspopup": "listbox",
         "aria-disabled": isDisabled || void 0,
@@ -965,34 +1244,53 @@ function BadgeMultiSelect({
         "data-disabled": isDisabled || void 0,
         className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("span", { className: chunkMWAXK66H_cjs.cn("text-ink-4 font-sans px-1", fieldTextStyles[size]), children: placeholder })
-          ) : selectedOptions.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
-            RemovableBadge,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              ...badgeChrome(o),
-              onRemove: () => remove(o.id),
-              isDisabled,
-              children: o.label
-            },
-            o.id
-          )),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pr-1", children: /* @__PURE__ */ jsxRuntime.jsx(FieldCaret, {}) })
+              ref: chipsRef,
+              className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("span", { className: chunkMWAXK66H_cjs.cn("text-ink-4 font-sans px-1", fieldTextStyles[size]), children: placeholder })
+              ) : selectedOptions.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+                Badge,
+                {
+                  ...badgeChrome(o),
+                  className: "shrink-0",
+                  actions: /* @__PURE__ */ jsxRuntime.jsx(
+                    BadgeAction,
+                    {
+                      label: "Remove",
+                      onPress: () => remove(o.id),
+                      isDisabled
+                    }
+                  ),
+                  children: o.label
+                },
+                o.id
+              ))
+            }
+          ),
+          isCell ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center pl-1.5 pr-1", children: /* @__PURE__ */ jsxRuntime.jsx(FieldCaret, {}) })
         ]
       }
     ),
     description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldHintStyles, children: description }) : null,
-    errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldErrorStyles, children: errorMessage }) : null,
+    errorMessage && !isCell ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldErrorStyles, children: errorMessage }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Popover,
       {
@@ -1001,18 +1299,27 @@ function BadgeMultiSelect({
         triggerRef,
         offset: 6,
         placement: "bottom start",
+        isNonModal: true,
+        shouldCloseOnInteractOutside: (element) => !triggerRef.current?.contains(element),
         className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: popoverRef, children: /* @__PURE__ */ jsxRuntime.jsx(
           reactAriaComponents.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") {
@@ -1021,70 +1328,32 @@ function BadgeMultiSelect({
               }
               onSelectionChange(keys);
             },
+            autoFocus: "first",
             className: "outline-none max-h-72 overflow-auto",
             renderEmptyState: () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn("px-3 py-2", fieldHintStyles), children: "All options selected" }),
-            children: listboxOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+            children: listboxOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
               reactAriaComponents.ListBoxItem,
               {
                 id: option.id,
                 textValue: option.label,
                 ...option.isDisabled ? { isDisabled: true } : {},
                 className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(Badge, { ...badgeChrome(option), children: option.label })
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ListboxCheck, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...badgeChrome(option), children: option.label })
+                ]
               },
               option.id
             ))
           }
-        )
-      }
-    )
-  ] });
-}
-function RemovableBadge({
-  children,
-  onRemove,
-  isDisabled,
-  ...chrome
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { ...badgeChrome(chrome), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Remove",
-        disabled: isDisabled,
-        onClick: (e) => {
-          e.stopPropagation();
-          onRemove();
-        },
-        className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("svg", { "aria-hidden": true, viewBox: "0 0 10 10", className: "size-2.5", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M2 2l6 6M8 2l-6 6",
-            stroke: "currentColor",
-            strokeWidth: "1.4",
-            strokeLinecap: "round"
-          }
         ) })
       }
     )
@@ -2688,7 +2957,9 @@ var tableHeaderStyles = tailwindVariants.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 }
 });
@@ -2753,11 +3024,57 @@ function TableHeaderCell({
   onRemove,
   ariaLabel,
   sticky = false,
+  onResize,
+  minWidth = 64,
   ...rest
 }) {
   const cellRef = react.useRef(null);
   const handleRef = react.useRef(null);
   const [dragState, setDragState] = react.useState({ kind: "idle" });
+  const [isResizing, setIsResizing] = react.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)));
+  };
   react.useEffect(() => {
     if (!isDraggable || !columnId) return;
     const cell = cellRef.current;
@@ -2775,10 +3092,7 @@ function TableHeaderCell({
       adapter.dropTargetForElements({
         element: cell,
         canDrop: ({ source }) => isColumnDragData(source.data) && source.data.columnId !== columnId,
-        getData: ({ input, element }) => closestEdge.attachClosestEdge(
-          { ...data },
-          { input, element, allowedEdges: ["left", "right"] }
-        ),
+        getData: ({ input, element }) => closestEdge.attachClosestEdge({ ...data }, { input, element, allowedEdges: ["left", "right"] }),
         getIsSticky: () => true,
         onDragEnter: ({ self }) => {
           const edge = closestEdge.extractClosestEdge(self.data);
@@ -2805,6 +3119,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) => {
@@ -2888,6 +3203,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__ */ jsxRuntime.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: chunkMWAXK66H_cjs.cn(
+                "group/resize absolute inset-y-0 -right-1 z-10 w-2 cursor-col-resize outline-none",
+                "flex justify-center"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: chunkMWAXK66H_cjs.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
       ]
     }
@@ -2941,12 +3292,27 @@ var tableScrollerStyles = tailwindVariants.tv({
   base: ["relative flex-1 min-h-0 overflow-auto", ...scrollbarChrome]
 });
 function TableScroller({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", ref, ...props, className: chunkMWAXK66H_cjs.cn(tableScrollerStyles(), className) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "presentation",
+      ref,
+      ...props,
+      className: chunkMWAXK66H_cjs.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 = tailwindVariants.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,
@@ -2957,7 +3323,9 @@ var tableRowStyles = tailwindVariants.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: ""
     }
   },
@@ -2988,11 +3356,12 @@ function TableRow({
 }
 var tableCellStyles = tailwindVariants.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: {
@@ -3153,6 +3522,8 @@ function DataTable({
   enableColumnRemoval = false,
   onReorderColumn,
   onRemoveColumn,
+  enableColumnResizing = false,
+  onResizeColumn,
   variant = "panel",
   rowWrapper,
   extraRows,
@@ -3366,7 +3737,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();
@@ -3377,84 +3747,108 @@ function DataTable({
       ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
       variant,
       className: chunkMWAXK66H_cjs.cn("flex-1 min-h-0", className),
-      children: /* @__PURE__ */ jsxRuntime.jsx(TableScroller, { ref: scrollerRef, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { minWidth: minPanelWidth }, children: [
-        headerGroups.map((group) => /* @__PURE__ */ jsxRuntime.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 : reactTable.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TableHeaderSpacer, {})
-        ] }, group.id)),
-        bodyBefore,
-        showInitialLoading ? loadingState ?? /* @__PURE__ */ jsxRuntime.jsx(DataTableSkeleton, { rowHeight }) : showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "rowgroup", children: errorState ?? (query.error ? /* @__PURE__ */ jsxRuntime.jsx(DataTableError, { error: query.error }) : null) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "rowgroup", children: [
-          showEmpty ? emptyState ?? /* @__PURE__ */ jsxRuntime.jsx(DataTableEmpty, {}) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GroupHeaderRow, { style: rowStyle, children: item.label }, `group:${item.id}`);
-                }
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        TableScroller,
+        {
+          ref: scrollerRef,
+          className: chunkMWAXK66H_cjs.cn("scroll-pt-[36px]", bodyAfter ? "scroll-pb-8" : void 0),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { minWidth: minPanelWidth }, children: [
+            headerGroups.map((group) => /* @__PURE__ */ jsxRuntime.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 : reactTable.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: sentinelRef, "aria-hidden": "true", style: { height: 1, width: "100%" } }),
-          query.isFetchingNextPage ? /* @__PURE__ */ jsxRuntime.jsx(LoaderRow, {}) : null,
-          showEndMarker ? /* @__PURE__ */ jsxRuntime.jsx(EndMarker, { count: tableRowCount }) : null
-        ] }),
-        bodyAfter
-      ] }) })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableHeaderSpacer, {})
+            ] }, group.id)),
+            bodyBefore,
+            showInitialLoading ? loadingState ?? /* @__PURE__ */ jsxRuntime.jsx(DataTableSkeleton, { rowHeight }) : showError ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "rowgroup", children: errorState ?? (query.error ? /* @__PURE__ */ jsxRuntime.jsx(DataTableError, { error: query.error }) : null) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "rowgroup", children: [
+              showEmpty ? emptyState ?? /* @__PURE__ */ jsxRuntime.jsx(DataTableEmpty, {}) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GroupHeaderRow, { style: rowStyle, children: item.label }, `group:${item.id}`);
+                    }
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      DataRow,
+                      {
+                        row: item.row,
+                        index: item.dataIndex,
+                        zebra,
+                        onRowClick,
+                        style: rowStyle,
+                        columnBorders,
+                        ...rowWrapper ? { rowWrapper } : {}
+                      },
+                      item.row.id
+                    );
+                  })
+                }
+              ),
+              !showEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: sentinelRef, "aria-hidden": "true", style: { height: 1, width: "100%" } }),
+              query.isFetchingNextPage ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: chunkMWAXK66H_cjs.cn(
+                    "sticky bottom-0 z-[4] flex items-center h-8 px-0.5",
+                    "border-t border-rule-2 bg-bg"
+                  ),
+                  children: bodyAfter
+                }
+              )
+            ) : null
+          ] })
+        }
+      )
     }
   );
 }
@@ -3554,23 +3948,6 @@ function LoaderRow() {
     }
   );
 }
-function EndMarker({ count }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: chunkMWAXK66H_cjs.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({
@@ -4158,7 +4535,9 @@ function MultiSelect({
         placement: "bottom start",
         className: chunkMWAXK66H_cjs.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"
@@ -4183,6 +4562,7 @@ function MultiSelect({
             {
               "aria-label": typeof label === "string" ? label : "Options",
               selectionMode: "multiple",
+              escapeKeyBehavior: "none",
               selectedKeys: selectedSet,
               onSelectionChange: (keys) => {
                 if (keys === "all") {
@@ -4205,11 +4585,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__ */ jsxRuntime.jsx(Checkmark, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx(ListboxCheck, {}),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.content ?? option.label })
                   ]
                 },
@@ -4270,42 +4649,6 @@ function Chip({
     }
   );
 }
-function Checkmark() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      "aria-hidden": true,
-      className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          viewBox: "0 0 12 12",
-          className: chunkMWAXK66H_cjs.cn(
-            "size-3 text-surface transition-opacity duration-150",
-            "opacity-0 group-data-[selected]:opacity-100"
-          ),
-          "aria-hidden": true,
-          children: /* @__PURE__ */ jsxRuntime.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,
@@ -5875,7 +6218,8 @@ var OPERATORS = [
       "relation",
       "user",
       "principal",
-      "contact-address"
+      "contact-address",
+      "array"
     ]
   },
   {
@@ -5891,10 +6235,19 @@ var OPERATORS = [
       "relation",
       "user",
       "principal",
-      "contact-address"
+      "contact-address",
+      "array"
     ]
   },
   { id: "contains", label: "contains", arity: 1, types: ["string", "array", "contact-address"] },
+  {
+    id: "not_contains",
+    label: "does not contain",
+    arity: 1,
+    types: ["string", "array", "contact-address"]
+  },
+  // Array-only: "has every one of these". On a scalar the backend rejects it.
+  { id: "contains_all", label: "has all of", arity: "n", types: ["array"] },
   { id: "starts_with", label: "starts with", arity: 1, types: ["string", "contact-address"] },
   { id: "ends_with", label: "ends with", arity: 1, types: ["string", "contact-address"] },
   {
@@ -5957,14 +6310,33 @@ var OP_LABEL_OVERRIDES = {
   integer: { gt: "is greater than", lt: "is less than", eq: "equals", ne: "does not equal" },
   currency: { gt: "is greater than", lt: "is less than", eq: "equals", ne: "does not equal" },
   datetime: { eq: "is on", ne: "is not on", gt: "is after", lt: "is before" },
-  array: { contains: "contains", empty: "is empty", not_empty: "is not empty" },
+  // Arrays filter by set membership, in the words every CRM uses for it.
+  array: {
+    contains: "has",
+    not_contains: "does not have",
+    in: "has any of",
+    not_in: "has none of",
+    contains_all: "has all of",
+    empty: "is empty",
+    not_empty: "is not empty"
+  },
   boolean: { eq: "is", ne: "is not" }
 };
+var OP_ORDER_OVERRIDES = {
+  array: ["contains", "not_contains", "in", "contains_all", "not_in", "empty", "not_empty"]
+};
 function operatorsForType(type) {
-  return OPERATORS.filter((op) => op.types.includes(type)).map((op) => {
+  const ops = OPERATORS.filter((op) => op.types.includes(type)).map((op) => {
     const override = OP_LABEL_OVERRIDES[type]?.[op.id];
     return override ? { ...op, label: override } : op;
   });
+  const order = OP_ORDER_OVERRIDES[type];
+  if (!order) return ops;
+  return [...ops].sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id));
+}
+function isEnumLike(field) {
+  if (field.type === "enum") return true;
+  return field.type === "array" && (field.options?.length ?? 0) > 0;
 }
 function operatorById(id) {
   return OPERATORS.find((o) => o.id === id);
@@ -6036,7 +6408,7 @@ function ChipItem({
     const custom = effectiveRenderer({ field, operator, value });
     if (custom !== void 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: custom });
   }
-  if (field.type === "enum") {
+  if (isEnumLike(field)) {
     const option = findEnumOption(field, value);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Badge,
@@ -6064,7 +6436,7 @@ function formatValue(field, operator, value) {
   if (arity === "n") {
     const arr = Array.isArray(value) ? value : typeof value === "string" && value.length > 0 ? value.split(",") : [];
     if (arr.length === 0) return "\u2014";
-    if (field.type === "enum") {
+    if (isEnumLike(field)) {
       const labels = arr.map((v) => findEnumOption(field, v)?.label ?? v);
       return labels.length <= 2 ? labels.join(", ") : `${labels[0]}, ${labels[1]} +${labels.length - 2}`;
     }
@@ -6072,7 +6444,7 @@ function formatValue(field, operator, value) {
   }
   if (field.type === "boolean") return value === true || value === "true" ? "true" : "false";
   if (value === "" || value == null) return "\u2014";
-  if (field.type === "enum") {
+  if (isEnumLike(field)) {
     return findEnumOption(field, String(value))?.label ?? String(value);
   }
   if (field.type === "number" || field.type === "integer") {
@@ -6160,13 +6532,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 = react.useRef(null);
+  const chipsRef = react.useRef(null);
+  const hasWrapped = useChipRowWrap(chipsRef, isCell, JSON.stringify(value));
   react.useEffect(() => {
     if (autoFocus) inputRef.current?.focus();
   }, []);
   const inputId = react.useId();
   const [draft, setDraft] = react.useState("");
+  react.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;
@@ -6183,7 +6563,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) {
@@ -6193,85 +6576,78 @@ function TagInput({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn("grid grid-cols-1 gap-1.5", className), children: [
     label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: fieldLabelStyles, children: label }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         "data-invalid": isInvalid || void 0,
         "data-disabled": isDisabled || void 0,
         className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("span", { className: "max-w-[10rem] truncate", children: tag }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": `Remove ${tag}`,
-                      disabled: isDisabled,
-                      onClick: () => remove(idx),
-                      className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("svg", { "aria-hidden": true, viewBox: "0 0 10 10", className: "size-2", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          d: "M2 2l6 6M8 2l-6 6",
-                          stroke: "currentColor",
-                          strokeWidth: "1.4",
-                          strokeLinecap: "round"
-                        }
-                      ) })
-                    }
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: chipsRef,
+            className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(
+                  Badge,
+                  {
+                    variant: "active",
+                    shape: "rounded",
+                    hasDot: false,
+                    className: "shrink-0",
+                    actions: /* @__PURE__ */ jsxRuntime.jsx(
+                      BadgeAction,
+                      {
+                        label: `Remove ${tag}`,
+                        onPress: () => remove(idx),
+                        isDisabled
+                      }
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[10rem] truncate", children: tag })
+                  },
+                  tag
+                )
+              )),
+              /* @__PURE__ */ jsxRuntime.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: chunkMWAXK66H_cjs.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__ */ jsxRuntime.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: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx("p", { className: fieldHintStyles, children: description }) : null,
@@ -6316,7 +6692,7 @@ function FilterValueInput({
   }
   const leaf = (() => {
     if (arity === "n") {
-      if (field.type === "enum") {
+      if (isEnumLike(field)) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           EnumMultiValue,
           {
@@ -6343,7 +6719,7 @@ function FilterValueInput({
         }
       );
     }
-    if (field.type === "enum") {
+    if (isEnumLike(field)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         EnumSingleValue,
         {
@@ -6504,7 +6880,9 @@ function placeholderFor(field, operator) {
   if (field.type === "number" || field.type === "integer" || field.type === "currency") return "0";
   if (operator === "starts_with") return "starts with\u2026";
   if (operator === "ends_with") return "ends with\u2026";
-  if (operator === "contains") return "contains\u2026";
+  if (operator === "contains") return field.type === "array" ? "has\u2026" : "contains\u2026";
+  if (operator === "not_contains")
+    return field.type === "array" ? "does not have\u2026" : "does not contain\u2026";
   return "value";
 }
 function OperatorPicker({
@@ -8171,31 +8549,6 @@ function ToastRegion({ queue, className }) {
     }
   );
 }
-function TooltipTrigger({
-  delay = 500,
-  closeDelay = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.TooltipTrigger, { delay, closeDelay, ...props });
-}
-function Tooltip({ className, offset = 6, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.Tooltip,
-    {
-      ...props,
-      offset,
-      className: (renderProps) => chunkMWAXK66H_cjs.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
-      )
-    }
-  );
-}
 
 Object.defineProperty(exports, "Button", {
   enumerable: true,
@@ -8226,6 +8579,8 @@ exports.AttributeTypeIcon = AttributeTypeIcon;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
+exports.BadgeAction = BadgeAction;
+exports.BadgeGroup = BadgeGroup;
 exports.BadgeMultiSelect = BadgeMultiSelect;
 exports.BooleanCell = BooleanCell;
 exports.Breadcrumbs = Breadcrumbs;
@@ -8347,6 +8702,8 @@ exports.arityOf = arityOf;
 exports.attachmentChipStyles = attachmentChipStyles;
 exports.avatarGroupStyles = avatarGroupStyles;
 exports.avatarStyles = avatarStyles;
+exports.badgeGroupOverflowStyles = badgeGroupOverflowStyles;
+exports.badgeGroupStyles = badgeGroupStyles;
 exports.badgeStyles = badgeStyles;
 exports.cardStyles = cardStyles2;
 exports.channelIcon = channelIcon;
@@ -8368,6 +8725,7 @@ exports.fieldHintStyles = fieldHintStyles;
 exports.fieldLabelStyles = fieldLabelStyles;
 exports.fileViewerFallbackCardStyles = fileViewerFallbackCardStyles;
 exports.fileViewerStyles = fileViewerStyles;
+exports.fitBadgeCount = fitBadgeCount;
 exports.formatFileSize = formatFileSize;
 exports.formatValue = formatValue;
 exports.iconForContentType = iconForContentType;