@xemahq/ui-kernel 0.1.12 → 0.3.0

package/src/ui/primitives/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import * as React from "react";
+
+import { cn } from '../cn';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/ui/primitives/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/ui/primitives/dialog.tsx

@@ -0,0 +1,103 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from '../cn';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "modal-scrim fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { 'data-hide-close'?: boolean }
+>(({ className, children, 'data-hide-close': hideClose, 'aria-describedby': ariaDescribedBy, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      // Pulling `aria-describedby` out of props and re-passing it (even
+      // when undefined) silences Radix's "Missing Description or
+      // aria-describedby={undefined}" warning for dialogs that
+      // intentionally have no description. Dialogs that DO include a
+      // <DialogDescription> still set this through the spread.
+      aria-describedby={ariaDescribedBy}
+      className={cn(
+        "modal-surface fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg max-h-[calc(100dvh-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {!hideClose && (
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm text-ink-3 ring-offset-background transition-colors hover:text-ink focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-subtitle font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-body-1 text-ink-3", className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src/ui/primitives/dropdown-menu.tsx

@@ -0,0 +1,179 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+
+import { cn } from '../cn';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body-1 outline-none data-[state=open]:bg-accent focus:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body-1 outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-body-1 outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-body-1 outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-body-1 font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-body-1 tracking-widest opacity-60", className)} {...props} />;
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/ui/primitives/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from '../cn';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-body-1 file:font-medium file:text-foreground placeholder:text-ink-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-body-1",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/ui/primitives/label.tsx

@@ -0,0 +1,17 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from '../cn';
+
+const labelVariants = cva("text-body-1 font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/ui/primitives/overflow-tabs.tsx

@@ -0,0 +1,281 @@
+/**
+ * OverflowTabs — editorial tab strip that auto-collapses overflowing items
+ * into a "More…" dropdown instead of scrolling horizontally.
+ *
+ * Behavior:
+ *   1. All tabs render off-screen for measurement (visibility: hidden, but
+ *      still laid out so widths are real).
+ *   2. A ResizeObserver tracks the container width; once known we walk the
+ *      tab widths left-to-right and pick the cutoff where they still fit
+ *      alongside a fixed "More…" trigger.
+ *   3. Visible tabs render inline; overflow tabs go into a dropdown.
+ *
+ * The active tab is always pulled into the visible set, even if its index
+ * would be in the overflow bucket — users should never lose sight of "where
+ * am I." Same for tabs marked `pinned: true` (indicator dot is sticky).
+ */
+import { ChevronDown, X } from 'lucide-react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+import { cn } from '../cn';
+
+export interface OverflowTab {
+  readonly value: string;
+  readonly label: string;
+  /** Optional warning/indicator dot rendered next to the label. */
+  readonly indicator?: boolean;
+  /** Optional numeric badge. */
+  readonly count?: number;
+}
+
+interface OverflowTabsProps {
+  readonly tabs: readonly OverflowTab[];
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  /** Reserved px for the "More…" trigger when measuring. Default 88. */
+  readonly moreTriggerWidth?: number;
+  readonly className?: string;
+  /** Each tab's px gap from the next. Matches the visual rendering. Default 4. */
+  readonly gap?: number;
+  /**
+   * When provided, every tab renders a hover `×` that calls this with the
+   * tab value. Closable tabs (multi-thread surfaces, etc.) opt in by
+   * passing it; surfaces that just navigate omit it.
+   */
+  readonly onClose?: (value: string) => void;
+}
+
+export function OverflowTabs({
+  tabs,
+  value,
+  onChange,
+  moreTriggerWidth = 88,
+  className,
+  gap = 4,
+  onClose,
+}: OverflowTabsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [tabWidths, setTabWidths] = useState<readonly number[]>([]);
+
+  // Measure container width and react to resizes.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width ?? el.clientWidth;
+      setContainerWidth(w);
+    });
+    ro.observe(el);
+    setContainerWidth(el.clientWidth);
+    return () => ro.disconnect();
+  }, []);
+
+  // Measure each tab's natural width once after first render. We re-measure
+  // when the tab list itself changes (new tabs, label edits).
+  useLayoutEffect(() => {
+    const el = measureRef.current;
+    if (!el) return;
+    const children = Array.from(el.children) as HTMLElement[];
+    setTabWidths(children.map((c) => c.getBoundingClientRect().width));
+  }, [tabs]);
+
+  // Decide split point: walk left-to-right, summing widths + gaps, stopping
+  // when the next tab would exceed (container - moreTrigger). The active
+  // tab and any pinned tabs are always pulled into the visible set.
+  const { visible, overflow } = useMemo(() => {
+    if (tabWidths.length !== tabs.length || containerWidth === 0) {
+      return { visible: tabs, overflow: [] as readonly OverflowTab[] };
+    }
+    const totalNatural =
+      tabWidths.reduce((s, w) => s + w, 0) + gap * Math.max(0, tabs.length - 1);
+    if (totalNatural <= containerWidth) {
+      return { visible: tabs, overflow: [] as readonly OverflowTab[] };
+    }
+    const budget = containerWidth - moreTriggerWidth;
+    const vis: OverflowTab[] = [];
+    const over: OverflowTab[] = [];
+    let used = 0;
+    for (let i = 0; i < tabs.length; i++) {
+      const w = tabWidths[i] + (vis.length > 0 ? gap : 0);
+      if (used + w <= budget) {
+        vis.push(tabs[i]);
+        used += w;
+      } else {
+        over.push(tabs[i]);
+      }
+    }
+    // Force the active tab into the visible set if it ended up in overflow.
+    const activeIdx = tabs.findIndex((t) => t.value === value);
+    if (activeIdx !== -1) {
+      const activeTab = tabs[activeIdx];
+      const inVisible = vis.some((t) => t.value === activeTab.value);
+      if (!inVisible) {
+        // Swap the last visible for the active one to keep the budget OK.
+        const dropped = vis.pop();
+        if (dropped) over.unshift(dropped);
+        vis.push(activeTab);
+        const removeIdx = over.findIndex((t) => t.value === activeTab.value);
+        if (removeIdx !== -1) over.splice(removeIdx, 1);
+      }
+    }
+    return { visible: vis, overflow: over };
+  }, [tabs, tabWidths, containerWidth, gap, moreTriggerWidth, value]);
+
+  return (
+    <div className={cn('relative -mb-px flex items-end border-b border-rule', className)}>
+      {/* Off-screen measurement layer — renders ALL tabs so widths are real. */}
+      <div
+        ref={measureRef}
+        aria-hidden
+        className="pointer-events-none absolute left-0 top-0 flex items-center gap-1 opacity-0"
+        style={{ visibility: 'hidden' }}
+      >
+        {tabs.map((t) => (
+          <TabPill key={`measure-${t.value}`} tab={t} active={false} onClick={() => undefined} />
+        ))}
+      </div>
+
+      {/* Live visible row. */}
+      <div
+        ref={containerRef}
+        role="tablist"
+        className="flex flex-1 items-end gap-1 overflow-hidden"
+      >
+        {visible.map((t) => (
+          <TabPill
+            key={t.value}
+            tab={t}
+            active={t.value === value}
+            onClick={() => onChange(t.value)}
+            onClose={onClose ? () => onClose(t.value) : undefined}
+          />
+        ))}
+      </div>
+
+      {overflow.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="ml-1 -mb-px inline-flex shrink-0 items-center gap-1 whitespace-nowrap px-2 py-2 text-body-1 text-ink-3 transition-colors hover:text-ink"
+              aria-label="More tabs"
+            >
+              More
+              <span className="rounded bg-paper-elev px-1 font-mono text-[10px] leading-4 text-ink-4">
+                {overflow.length}
+              </span>
+              <ChevronDown className="h-3 w-3" strokeWidth={1.6} />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="min-w-[180px]">
+            {overflow.map((t) => (
+              <DropdownMenuItem
+                key={t.value}
+                onClick={() => onChange(t.value)}
+                className={cn(t.value === value && 'bg-accent/60 text-foreground')}
+              >
+                <span className="flex-1 truncate">{t.label}</span>
+                {t.count !== undefined && (
+                  <span className="ml-2 text-caption tabular-nums text-ink-4">{t.count}</span>
+                )}
+                {t.indicator && (
+                  <span
+                    aria-hidden
+                    className="ml-2 inline-block h-1.5 w-1.5 rounded-full bg-warning"
+                  />
+                )}
+                {onClose && (
+                  <button
+                    type="button"
+                    aria-label={`Close ${t.label}`}
+                    className="ml-2 rounded p-0.5 text-ink-4 hover:bg-paper-elev hover:text-ink"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onClose(t.value);
+                    }}
+                  >
+                    <X className="h-3 w-3" strokeWidth={1.8} />
+                  </button>
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  );
+}
+
+function TabPill({
+  tab,
+  active,
+  onClick,
+  onClose,
+}: Readonly<{
+  tab: OverflowTab;
+  active: boolean;
+  onClick: () => void;
+  onClose?: () => void;
+}>) {
+  return (
+    <div
+      className={cn(
+        'group relative -mb-px inline-flex items-center gap-1.5 whitespace-nowrap rounded-t-md border px-3 py-2 text-body-1 transition-colors',
+        active
+          ? 'border-rule border-b-transparent bg-paper-elev text-ink font-medium'
+          : 'border-transparent text-ink-3 hover:border-rule/40 hover:bg-paper-elev/60 hover:text-ink-2',
+      )}
+    >
+      <button
+        type="button"
+        role="tab"
+        aria-selected={active}
+        onClick={onClick}
+        className="inline-flex items-center gap-2 outline-none"
+      >
+        {tab.label}
+        {tab.count !== undefined && (
+          <span className="rounded bg-paper-elev px-1 font-mono text-[10px] tabular-nums leading-4 text-ink-4">
+            {tab.count}
+          </span>
+        )}
+        {tab.indicator && (
+          <span
+            aria-hidden
+            className="inline-block h-1.5 w-1.5 rounded-full bg-warning"
+          />
+        )}
+      </button>
+      {onClose && (
+        <button
+          type="button"
+          aria-label={`Close ${tab.label}`}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose();
+          }}
+          className={cn(
+            'rounded p-0.5 text-ink-4 transition-opacity hover:bg-paper hover:text-ink',
+            active ? 'opacity-70' : 'opacity-0 group-hover:opacity-70',
+          )}
+        >
+          <X className="h-3 w-3" strokeWidth={1.8} />
+        </button>
+      )}
+      {active && (
+        <span
+          aria-hidden
+          className="absolute inset-x-2 bottom-[-1px] h-[2px] rounded-full bg-primary"
+        />
+      )}
+    </div>
+  );
+}

package/src/ui/primitives/popover.tsx

@@ -0,0 +1,33 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from '../cn';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+  container?: HTMLElement | null;
+};
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(({ className, align = "center", sideOffset = 4, container, ...props }, ref) => (
+  <PopoverPrimitive.Portal container={container ?? undefined}>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };