@kortix/ui 0.14.3 → 0.14.4

package/dist/primitives/command.js

@@ -0,0 +1,135 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from 'cmdk';
+import { useUiStrings } from '../providers/ui-provider.js';
+import * as React from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from './dialog.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { cn } from '../lib/utils.js';
+const CMDK_SHARED_CLASSES = [
+    '[&_[cmdk-group]]:px-1.5',
+    '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0',
+].join(' ');
+/**
+ * `data-nav` records which input moved the highlight last: `pointer` or
+ * `keyboard`. `CommandItem` reads it to pick ONE highlight source.
+ *
+ * cmdk 0.2.1 selects a row on every `pointermove` through its store, so
+ * `data-selected` moves only after React re-renders the whole list. In the ⌘K
+ * palette that re-render trails the cursor: the row you left stays lit until
+ * it lands, which reads as a hover transition. In pointer mode the row paints
+ * from CSS `:hover` alone — the same instant highlight the sidebar session
+ * rows use. Keyboard mode keeps `data-selected`, because arrow keys have no
+ * `:hover` to follow.
+ *
+ * Written straight to the DOM node, not React state: a state update here would
+ * re-render the list on every pointer move, which is the lag this removes.
+ * cmdk calls a caller's `onKeyDown` before its own handler and spreads
+ * `onPointerMove` onto the root, so both reach the same element.
+ */
+function Command({ className, onKeyDown, onPointerMove, ...props }) {
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', className), onKeyDown: (event) => {
+            event.currentTarget.dataset.nav = 'keyboard';
+            onKeyDown?.(event);
+        }, onPointerMove: (event) => {
+            if (event.pointerType === 'mouse' || event.pointerType === 'pen') {
+                event.currentTarget.dataset.nav = 'pointer';
+            }
+            onPointerMove?.(event);
+        }, ...props }));
+}
+function CommandDialog({ title, description, children, className, showCloseButton = true, ...props }) {
+    const strings = useUiStrings();
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title ?? strings.commandPaletteTitle }), _jsx(DialogDescription, { children: description ?? strings.commandPaletteDescription })] }), _jsx(DialogContent
+            // `data-[state=closed]:animate-none!` on the panel AND the overlay: the
+            // palette closes on the frame you dismiss it, with no exit animation.
+            // `DialogContent` and `DialogOverlay` both play a 200ms `animate-out`
+            // (fade, plus a zoom to 95% on the panel), and Radix Presence keeps the
+            // node mounted until `animationend` — so Escape, a selected command,
+            // or an outside click left the palette on screen for 200ms after it
+            // was done. With `animation-name: none`, Presence unmounts at once.
+            // `!` because tailwind-merge does not know `animate-out` (it comes from
+            // tw-animate-css) and keeps both classes; without it, the winner would
+            // be whichever utility Tailwind happens to emit last.
+            //
+            // `data-[state=open]:animate-none!` does the same for the way in. The
+            // stock 200ms fade + zoom from 95% made ⌘K — opened dozens of times a
+            // day, almost always from the keyboard — read as late and as growing
+            // out of the page. The palette now paints complete on the first frame.
+            , { 
+                // `data-[state=closed]:animate-none!` on the panel AND the overlay: the
+                // palette closes on the frame you dismiss it, with no exit animation.
+                // `DialogContent` and `DialogOverlay` both play a 200ms `animate-out`
+                // (fade, plus a zoom to 95% on the panel), and Radix Presence keeps the
+                // node mounted until `animationend` — so Escape, a selected command,
+                // or an outside click left the palette on screen for 200ms after it
+                // was done. With `animation-name: none`, Presence unmounts at once.
+                // `!` because tailwind-merge does not know `animate-out` (it comes from
+                // tw-animate-css) and keeps both classes; without it, the winner would
+                // be whichever utility Tailwind happens to emit last.
+                //
+                // `data-[state=open]:animate-none!` does the same for the way in. The
+                // stock 200ms fade + zoom from 95% made ⌘K — opened dozens of times a
+                // day, almost always from the keyboard — read as late and as growing
+                // out of the page. The palette now paints complete on the first frame.
+                className: cn('p-0 shadow-[0_0_50px_0] shadow-black/10 data-[state=open]:animate-none! data-[state=closed]:animate-none! border', className), hideCloseButton: !showCloseButton, overlayClassName: "bg-black/20 backdrop-blur-[1px] data-[state=open]:animate-none! data-[state=closed]:animate-none!", children: _jsx(Command, { loop: true, className: "[&_[cmdk-group-heading]]:text-muted-foreground bg-popover **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12", children: children }) })] }));
+}
+function CommandInput({ className, compact, leftElement, rightElement, ...props }) {
+    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: cn('border-border flex items-center border-b', compact ? 'h-11 gap-2.5 px-4' : 'h-10 gap-3 px-4'), children: [leftElement, _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', compact ? 'h-11' : 'h-10', className), ...props }), rightElement] }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className), ...props }));
+}
+function CommandEmpty({ ...props }) {
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: "py-6 text-center text-sm", ...props }));
+}
+function CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn('text-foreground [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[length:var(--text-xs,0.8125rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-normal', className), ...props }));
+}
+function CommandSeparator({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn('bg-border -mx-1 h-px', className), ...props }));
+}
+function CommandItem({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", 
+        // `hover:` mirrors the cmdk `data-[selected=true]` styling on purpose:
+        // cmdk paints its highlight from a JS pointermove -> select loop, and a
+        // page where anything swallows pointermove (observed on dev.kortix.com)
+        // renders NO hover feedback at all while clicks keep working. CSS :hover
+        // is driven by browser hit-testing, so the row under the cursor is
+        // always highlighted; when cmdk's pointer selection works the two states
+        // coincide on the same row.
+        //
+        // `data-[selected=true]` is scoped to NOT pointer mode (`data-nav` on the
+        // `Command` root — see there). With a mouse, `:hover` is the only
+        // highlight, so it follows the cursor on the frame it moves instead of
+        // waiting for cmdk's re-render. With the keyboard, `data-selected` is.
+        // A caller that restyles the selected row must write the same
+        // `[&:not([data-nav=pointer]_*)]:data-[selected=true]:` prefix, so
+        // tailwind-merge replaces this class instead of stacking a second one.
+        className: cn(
+        // `bg-hover`: the fill of a project sidebar session row on hover.
+        // That row paints `--card` on the canvas; in light mode `--hover`
+        // (ink @ 4.5%) over the white popover blends to the same #f3f3f3–
+        // #f4f4f4. `bg-card` itself cannot be used here: dark-theme `--card`
+        // and `--accent` ARE `--popover` (all surface-1), so it would paint
+        // invisibly on this panel. `--hover` is translucent ink, so it reads
+        // on any surface in both themes. It replaced `bg-primary/10`, which
+        // read too dark next to the sidebar rows.
+        'hover:bg-hover hover:text-foreground transition-none', '[&:not([data-nav=pointer]_*)]:data-[selected=true]:bg-hover [&:not([data-nav=pointer]_*)]:data-[selected=true]:text-foreground', "[&_svg:not([class*='text-'])]:text-muted-foreground relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className), ...props }));
+}
+function CommandFooter({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "command-footer", className: cn('text-muted-foreground flex items-center gap-4 border-t px-4 py-2 text-xs', className), ...props, children: children }));
+}
+function CommandPopover({ open, onOpenChange, children, modal = true, }) {
+    return (_jsx(Popover, { open: open, onOpenChange: onOpenChange, modal: modal, children: children }));
+}
+const CommandPopoverTrigger = React.forwardRef(function CommandPopoverTrigger({ children, ...props }, ref) {
+    return (_jsx(PopoverTrigger, { ref: ref, asChild: true, ...props, children: children }));
+});
+function CommandPopoverContent({ children, side = 'top', align = 'start', sideOffset = 8, className, shouldFilter = false, defaultValue, }) {
+    return (_jsx(PopoverContent, { side: side, align: align, sideOffset: sideOffset, className: cn('bg-sidebar text-sidebar-foreground hover:text-foreground relative w-[300px] overflow-hidden rounded-lg border p-0 shadow-xs ease-out', 'border-border', 'data-[state=closed]:duration-[140ms] data-[state=open]:duration-[180ms]', 'data-[state=open]:zoom-in-[0.97] data-[state=closed]:zoom-out-[0.97]', '[&_[data-slot=command-input-wrapper]]:h-9 [&_[data-slot=command-input-wrapper]]:gap-2 [&_[data-slot=command-input-wrapper]]:px-3', '[&_[data-slot=command-input]]:h-9 [&_[data-slot=command-input]]:text-sm', '[&_[data-slot=command-list]]:py-0', '[&_[data-slot=command-group]]:py-1', '[&_[cmdk-group-heading]]:!px-2 [&_[cmdk-group-heading]]:!pt-2 [&_[cmdk-group-heading]]:!pb-1 [&_[cmdk-group-heading]]:!text-xs [&_[cmdk-group-heading]]:!tracking-[0.12em]', className), children: _jsx(Command, { shouldFilter: shouldFilter, defaultValue: defaultValue, className: CMDK_SHARED_CLASSES, children: children }) }));
+}
+export { Command, CommandDialog, CommandEmpty, CommandFooter, CommandGroup, CommandInput, CommandItem, CommandList, CommandPopover, CommandPopoverContent, CommandPopoverTrigger, CommandSeparator, CommandShortcut, };

package/dist/primitives/confirm-dialog.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Reusable confirmation dialog — used for delete, destructive actions, etc.
+ *
+ * <ConfirmDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   title="Delete task"
+ *   description="This will permanently delete the task and all comments."
+ *   confirmLabel="Delete"
+ *   onConfirm={() => deleteMutation.mutate(id)}
+ *   isPending={deleteMutation.isPending}
+ *   destructive
+ * />
+ */
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from './alert-dialog.js';
+import { buttonVariants } from './button.js';
+import { useUiStrings } from '../providers/ui-provider.js';
+import { cn } from '../lib/utils.js';
+export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, isPending, confirmVariant = 'default', confirmIcon, confirmDisabled, }) {
+    // The defaults are the viewer's language: an English literal here put
+    // "Cancel" under every translated dialog that passed no label (KRTX-2326).
+    const strings = useUiStrings();
+    const confirmText = confirmLabel ?? strings.confirm;
+    return (_jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(AlertDialogContent, { className: "sm:max-w-md", overlayClassName: "bg-black/25 backdrop-blur-sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { asChild: true, children: _jsx("div", { children: description }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isPending, children: cancelLabel ?? strings.cancel }), _jsxs(AlertDialogAction, { onClick: (e) => {
+                                e.preventDefault();
+                                onConfirm();
+                            }, disabled: isPending || confirmDisabled, className: cn(buttonVariants({ variant: confirmVariant, size: 'sm' }), 'gap-1.5'), children: [confirmIcon, isPending ? `${confirmText}…` : confirmText] })] })] }) }));
+}

package/dist/primitives/context-menu.d.ts

@@ -0,0 +1,48 @@
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as React from 'react';
+import { type MenuRowSize } from './menu-recipe.js';
+declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuPortal: {
+    (props: ContextMenuPrimitive.ContextMenuPortalProps): React.JSX.Element;
+    displayName: string;
+};
+declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Takes the same `size` and `inset` props as `ContextMenuItem`, because a
+ * submenu trigger is a row like any other and has to line up with its siblings.
+ *
+ * The caret is `size-3.5` against the leading icon's `size-4`: it is an
+ * affordance, not content, and matching the icon's weight makes it compete with
+ * the label. `text-muted-foreground` for the same reason.
+ */
+declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+    size?: MenuRowSize;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+    size?: MenuRowSize;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    reverse?: boolean;
+    size?: MenuRowSize;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: MenuRowSize;
+    side?: "left" | "right";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, };

package/dist/primitives/context-menu.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CheckIcon as Check, CaretRightIcon as ChevronRight } from '@phosphor-icons/react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as React from 'react';
+import { withPortalContainer } from '../lib/portal-container.js';
+import { cn } from '../lib/utils.js';
+import { floatingZ, useDialogDepth } from '../lib/z-stack.js';
+import { MENU_INDICATOR, MENU_INDICATOR_ICON, MENU_INSET, MENU_INSET_END, MENU_LABEL, MENU_PANEL, MENU_SEPARATOR, MENU_SHORTCUT, menuRow, } from './menu-recipe.js';
+/**
+ * A right-click menu is the same menu as a click menu. It shares the row
+ * recipe, panel, label, separator and shortcut in `./menu-recipe` with
+ * `dropdown-menu.tsx`, so a `Rename` row looks identical whichever way the
+ * user reached it. Before this, the two menus disagreed on radius (sm vs md),
+ * horizontal padding (2 vs 2.5), highlight colour (`accent` vs `primary/10`)
+ * and resting text colour — and the file browser shows both.
+ *
+ * Three things stay local, because they are genuinely different:
+ *
+ * 1. **Width floor** — a dropdown matches its trigger, so it floors at 14rem.
+ *    A context menu opens at the pointer with nothing to match, and every call
+ *    site here passes its own width (`w-40`, `w-48`, `w-64`). A 14rem floor
+ *    would override `w-40`, so this menu floors at 8rem.
+ *
+ * 2. **Transform origin** — the panel scales out of the point that was
+ *    right-clicked (`--radix-context-menu-content-transform-origin`) rather
+ *    than its own centre. The menu appearing to grow from the cursor is the
+ *    whole spatial story of a context menu.
+ *
+ * 3. **Scroll** — `Content` caps at the available viewport height and scrolls,
+ *    while `SubContent` clips like a dropdown. A context menu opened near the
+ *    bottom edge of the window has no room to grow downward; clipping it would
+ *    hide the last rows with no way to reach them.
+ *
+ * No trigger styling. `DropdownMenuTrigger` applies `triggerVariants` because
+ * a dropdown trigger is a button; a context-menu trigger is the region you
+ * right-click and must stay visually untouched.
+ */
+const CONTEXT_PANEL = cn(MENU_PANEL, 'min-w-[8rem] origin-(--radix-context-menu-content-transform-origin)');
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuPortal = withPortalContainer(ContextMenuPrimitive.Portal);
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+/**
+ * Takes the same `size` and `inset` props as `ContextMenuItem`, because a
+ * submenu trigger is a row like any other and has to line up with its siblings.
+ *
+ * The caret is `size-3.5` against the leading icon's `size-4`: it is an
+ * affordance, not content, and matching the icon's weight makes it compete with
+ * the label. `text-muted-foreground` for the same reason.
+ */
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, size = 'sm', children, ...props }, ref) => (_jsxs(ContextMenuPrimitive.SubTrigger, { ref: ref, "data-slot": "context-menu-sub-trigger", className: cn(menuRow(size, 'default'), inset && MENU_INSET, className), ...props, children: [children, _jsx(ChevronRight, { className: "text-muted-foreground ml-auto size-3.5" })] })));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+const ContextMenuSubContent = React.forwardRef(({ className, sideOffset = 4, style, ...props }, ref) => {
+    const depth = useDialogDepth();
+    return (_jsx(ContextMenuPrimitive.SubContent, { ref: ref, sideOffset: sideOffset, "data-slot": "context-menu-sub-content", className: cn(CONTEXT_PANEL, 'overflow-hidden', className), style: { zIndex: floatingZ(depth), ...style }, ...props }));
+});
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+const ContextMenuContent = React.forwardRef(({ className, style, ...props }, ref) => {
+    const depth = useDialogDepth();
+    return (_jsx(ContextMenuPortal, { children: _jsx(ContextMenuPrimitive.Content, { ref: ref, "data-slot": "context-menu-content", className: cn(CONTEXT_PANEL, 'max-h-(--radix-context-menu-content-available-height) overflow-x-hidden overflow-y-auto', className), style: { zIndex: floatingZ(depth), ...style }, ...props }) }));
+});
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+const ContextMenuItem = React.forwardRef(({ className, inset, variant = 'default', size = 'sm', ...props }, ref) => (_jsx(ContextMenuPrimitive.Item, { ref: ref, "data-slot": "context-menu-item", className: cn(menuRow(size, variant), inset && MENU_INSET, className), ...props })));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, reverse, size = 'sm', ...props }, ref) => (_jsxs(ContextMenuPrimitive.CheckboxItem, { ref: ref, "data-slot": "context-menu-checkbox-item", 
+    // Same geometry as `DropdownMenuCheckboxItem` — see there.
+    className: cn(menuRow(size, 'default'), reverse ? MENU_INSET_END : MENU_INSET, className), checked: checked, ...props, children: [_jsx("span", { className: cn(MENU_INDICATOR, 'absolute', reverse ? 'right-2' : 'left-2'), children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: MENU_INDICATOR_ICON }) }) }), children] })));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+const ContextMenuRadioItem = React.forwardRef(({ className, children, size = 'sm', side = 'right', ...props }, ref) => {
+    /**
+     * A check, not a dot, and the same check `ContextMenuCheckboxItem` uses.
+     *
+     * This was `<CircleIcon className="size-2 fill-current" />`, which could not
+     * work: Phosphor's CircleIcon is a stroked outline, so `fill-current` painted
+     * nothing, and the row recipe's `[&_svg]:size-4` — a descendant selector —
+     * outranked the `size-2` sitting on the icon itself. The mark rendered as a
+     * hollow ring. No consumer renders a RadioItem, so nobody saw it.
+     */
+    const indicator = (_jsx("span", { className: MENU_INDICATOR, children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: MENU_INDICATOR_ICON }) }) }));
+    return (_jsx(ContextMenuPrimitive.RadioItem, { ref: ref, "data-slot": "context-menu-radio-item", className: cn(menuRow(size, 'default'), className), ...props, children: side === 'left' ? (_jsxs(_Fragment, { children: [indicator, _jsx("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: children })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: children }), indicator] })) }));
+});
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(ContextMenuPrimitive.Label, { ref: ref, "data-slot": "context-menu-label", className: cn(MENU_LABEL, inset && MENU_INSET, className), ...props })));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(ContextMenuPrimitive.Separator, { ref: ref, "data-slot": "context-menu-separator", className: cn(MENU_SEPARATOR, className), ...props })));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+const ContextMenuShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn(MENU_SHORTCUT, className), ...props }));
+};
+ContextMenuShortcut.displayName = 'ContextMenuShortcut';
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, };

package/dist/primitives/count-badge.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from './badge.js';
+import { cn } from '../lib/utils.js';
+/**
+ * THE count beside a label: a sidebar row, a tab, a menu item, a button. The
+ * project sidebar's Review count is the reference: a tabular pill in the
+ * row's own text colour on a 15% tint, clamped at 99+ so it never pushes the
+ * label into an ellipsis. The tint carries the meaning, never decoration:
+ *
+ * - `waiting`: something waits on the person (Review, changes to review).
+ * - `reminder`: active reminders.
+ * - `conflict`: conflicts to resolve.
+ * - `neutral`: a plain tally (members, child sessions, a group's size).
+ *
+ * An overlay badge on an icon button's corner is a different pattern and does
+ * not use this.
+ */
+const TONE = {
+    neutral: 'bg-foreground/6',
+    waiting: 'bg-kortix-yellow/15',
+    reminder: 'bg-kortix-purple/15',
+    conflict: 'bg-kortix-orange/15',
+};
+export function CountBadge({ count, tone = 'neutral', className, ...props }) {
+    return (_jsx(Badge, { variant: "transparent", size: "tabular", className: cn(TONE[tone], 'shrink-0 text-current', className), ...props, children: count > 99 ? '99+' : count }));
+}

package/dist/primitives/data-grid.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import { AllCommunityModule, colorSchemeDarkBlue, colorSchemeLight, ModuleRegistry, themeQuartz, } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import { useIsDark } from '../hooks/use-is-dark.js';
+import { useCallback, useMemo, useRef } from 'react';
+// Register all community modules once
+ModuleRegistry.registerModules([AllCommunityModule]);
+// ── Theme ────────────────────────────────────────────────────────────────
+const gridTheme = themeQuartz.withParams({
+    spacing: 6,
+    headerFontSize: 12,
+    fontSize: 12,
+    rowHeight: 36,
+    headerHeight: 38,
+    wrapperBorderRadius: 0,
+    borderRadius: 0,
+    cellHorizontalPaddingScale: 1,
+});
+// ── Component ────────────────────────────────────────────────────────────
+export function DataGrid({ columnDefs: columnDefsProp, rowData, quickFilterText, hiddenColumns, readOnly = true, className, onGridReady, autoSizeColumns = true, suppressContextMenu = false, }) {
+    const gridRef = useRef(null);
+    const isDark = useIsDark();
+    // ── Column defs ──────────────────────────────────────────────────────
+    const columnDefs = useMemo(() => {
+        if (columnDefsProp)
+            return columnDefsProp;
+        // Auto-generate from first row keys
+        if (!rowData || rowData.length === 0)
+            return [];
+        const keys = Object.keys(rowData[0]);
+        return keys.map((key) => ({
+            field: key,
+            headerName: key,
+            hide: hiddenColumns?.has(key) ?? false,
+        }));
+    }, [columnDefsProp, rowData, hiddenColumns]);
+    // ── Default col def — Excel-like defaults ────────────────────────────
+    const defaultColDef = useMemo(() => ({
+        sortable: true,
+        filter: true,
+        resizable: true,
+        editable: !readOnly,
+        minWidth: 80,
+        flex: columnDefs.length <= 8 ? 1 : undefined,
+        width: columnDefs.length > 8 ? 150 : undefined,
+        suppressHeaderMenuButton: false,
+        // Cell value formatting
+        valueFormatter: (params) => {
+            const v = params.value;
+            if (v == null || v === '')
+                return '';
+            if (typeof v === 'number')
+                return v.toLocaleString();
+            if (typeof v === 'boolean')
+                return v ? 'Yes' : 'No';
+            return String(v);
+        },
+        cellClass: (params) => {
+            if (typeof params.value === 'number')
+                return 'ag-right-aligned-cell';
+            return '';
+        },
+    }), [readOnly, columnDefs.length]);
+    // ── Auto-size columns on first data render ───────────────────────────
+    const handleFirstDataRendered = useCallback((event) => {
+        if (!autoSizeColumns)
+            return;
+        try {
+            // If few columns, let flex handle it. Otherwise auto-size.
+            if (columnDefs.length > 8) {
+                event.api.autoSizeAllColumns();
+            }
+        }
+        catch {
+            // Silently fail — auto-size can throw if columns aren't ready
+        }
+    }, [autoSizeColumns, columnDefs.length]);
+    const handleGridReady = useCallback((event) => {
+        onGridReady?.(event);
+    }, [onGridReady]);
+    // ── Theme resolved ───────────────────────────────────────────────────
+    const theme = useMemo(() => {
+        const colorScheme = isDark ? colorSchemeDarkBlue : colorSchemeLight;
+        return gridTheme.withPart(colorScheme);
+    }, [isDark]);
+    // ── No data ──────────────────────────────────────────────────────────
+    if (!rowData || rowData.length === 0) {
+        return (_jsx("div", { className: cn('text-muted-foreground flex h-full w-full items-center justify-center text-sm', className), children: "No data" }));
+    }
+    return (_jsx("div", { className: cn('h-full w-full', className), children: _jsx(AgGridReact, { ref: gridRef, theme: theme, rowData: rowData, columnDefs: columnDefs, defaultColDef: defaultColDef, 
+            // Virtual scrolling — no DOM bloat
+            rowBuffer: 20, 
+            // Quick filter
+            quickFilterText: quickFilterText, cacheQuickFilter: true, 
+            // Selection & clipboard
+            enableCellTextSelection: true, ensureDomOrder: true, 
+            // Misc
+            animateRows: false, suppressContextMenu: suppressContextMenu, suppressMovableColumns: false, suppressColumnVirtualisation: columnDefs.length <= 20, 
+            // Tooltips
+            tooltipShowDelay: 500, 
+            // Events
+            onGridReady: handleGridReady, onFirstDataRendered: handleFirstDataRendered, 
+            // No rows overlay
+            overlayNoRowsTemplate: '<span class="text-muted-foreground text-sm">No matching rows</span>' }) }));
+}

package/dist/primitives/date-range-picker.js

@@ -0,0 +1,190 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from './button.js';
+import { Calendar } from './calendar.js';
+import { IconCalendar, IconChevronDown } from './kortix-icons.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { cn } from '../lib/utils.js';
+const PRESET_ORDER = ['24h', '7d', '30d', '90d'];
+const PRESET_DAYS = {
+    '24h': 1,
+    '7d': 7,
+    '30d': 30,
+    '90d': 90,
+};
+const PRESET_LABELS = {
+    '24h': 'Last 24 hours',
+    '7d': 'Last 7 days',
+    '30d': 'Last 30 days',
+    '90d': 'Last 90 days',
+};
+/**
+ * Resolve a preset to concrete UTC ISO bounds, anchored to `now`. Presets are
+ * a UI affordance only — every cost endpoint takes just `from`/`to`, so this
+ * is where a preset turns into the wire values.
+ */
+export function resolvePreset(preset, now) {
+    const to = now.toISOString();
+    const from = new Date(now.getTime() - PRESET_DAYS[preset] * 86_400_000).toISOString();
+    return { preset, from, to };
+}
+/**
+ * Turn a calendar day selection into a half-open UTC window: `from` is the
+ * start of `startDay`, `to` is the start of the day *after* `endDay`, so the
+ * end day the user clicked is fully covered under `[from, to)`.
+ *
+ * `startDay`/`endDay` are the `Date` objects `react-day-picker` hands back —
+ * local midnight on the clicked calendar day. Reading their *local* calendar
+ * parts (`getFullYear`/`getMonth`/`getDate`) and rebuilding the instant with
+ * `Date.UTC` is what makes the result independent of the host's timezone;
+ * calling `.toISOString()` on the picked `Date` directly would instead bake
+ * in the host's UTC offset (see the test file for a worked example).
+ */
+export function toUtcDayRange(startDay, endDay) {
+    const from = new Date(Date.UTC(startDay.getFullYear(), startDay.getMonth(), startDay.getDate())).toISOString();
+    const to = new Date(Date.UTC(endDay.getFullYear(), endDay.getMonth(), endDay.getDate() + 1)).toISOString();
+    return { preset: 'custom', from, to };
+}
+/**
+ * The inverse of `toUtcDayRange`, for feeding a stored `CostRange` back into
+ * `<Calendar mode="range">` on reopen. The stored bounds are UTC-midnight
+ * instants; `react-day-picker` highlights by *local* calendar day. Shifting
+ * the instant by milliseconds (an earlier version of this function did
+ * `getTime() - 86_400_000`) only relocates the instant — it does nothing to
+ * account for how a *different* host timezone reads that instant's local
+ * calendar day, so it "corrects" the display for positive-UTC-offset viewers
+ * by coincidence and is wrong in the opposite direction for negative-offset
+ * viewers (e.g. the Americas): both bounds land a day early there.
+ *
+ * The fix mirrors `toUtcDayRange` with its two steps reversed: read the
+ * *UTC* calendar parts off the stored instant (`getUTCFullYear`/
+ * `getUTCMonth`/`getUTCDate` — always host-independent), then rebuild via
+ * the *local* `Date` constructor, so the viewer's own host offset decides
+ * how the resulting `Date` reads back — the same offset `react-day-picker`
+ * itself will later use to highlight it. `new Date(y, m, d)` normalizes an
+ * out-of-range day (`d - 1` below zero, `d + 1` past the month's end), so
+ * month/year rollover needs no special-casing.
+ */
+export function toCalendarSelection(value) {
+    const utcPartsToLocalDay = (iso, dayDelta = 0) => {
+        const instant = new Date(iso);
+        return new Date(instant.getUTCFullYear(), instant.getUTCMonth(), instant.getUTCDate() + dayDelta);
+    };
+    // A preset's from/to are real instants (e.g. `now` minus N days), not day
+    // boundaries — pass them through unadjusted. Only a custom range's bounds
+    // are calendar days that need this local/UTC reconciliation; its `to` is
+    // also the exclusive day-after boundary, so the last inclusive calendar
+    // day the user clicked is one day earlier.
+    if (value.preset !== 'custom') {
+        return { from: new Date(value.from), to: new Date(value.to) };
+    }
+    return { from: utcPartsToLocalDay(value.from), to: utcPartsToLocalDay(value.to, -1) };
+}
+/**
+ * The widest label `formatRangeLabel` can ever emit, used to reserve the
+ * trigger's width so the control does not resize when the range changes.
+ *
+ * The shape is fixed: `MMM D – MMM D, YYYY`. Every `en-US` short month name is
+ * three characters, the year is always four digits, and the widest day number
+ * is two digits — so a two-digit/two-digit pair is the maximum at 21
+ * characters. Digits are rendered `tabular-nums` on the trigger, so any
+ * two-digit day is exactly as wide as `28` and this string is not merely the
+ * longest, it is the widest for its digit positions.
+ *
+ * NOT `Dec 28, 2026 – Jan 3, 2027`: `formatRangeLabel` prints the year once,
+ * after the second day, so a range spanning a year boundary is *shorter* than
+ * this (`Dec 28 – Jan 3, 2027`), not longer. Sizing to the two-year shape
+ * would reserve ~5 characters of permanent dead space.
+ *
+ * The four preset labels are all shorter (`Last 24 hours`, 13 characters), so
+ * this one string governs the trigger width in every state.
+ */
+export const WIDEST_RANGE_LABEL = 'Dec 28 – Dec 30, 2026';
+/** Human label for the trigger button: the preset name, or both dates for a custom range. */
+export function formatRangeLabel(range) {
+    if (range.preset !== 'custom')
+        return PRESET_LABELS[range.preset];
+    const from = new Date(range.from);
+    // `to` is the exclusive day-after boundary (half-open [from, to)) — the
+    // last inclusive calendar day the user clicked is one day earlier.
+    const to = new Date(new Date(range.to).getTime() - 86_400_000);
+    const day = (value) => value.toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC' });
+    return `${day(from)} – ${day(to)}, ${to.getUTCFullYear()}`;
+}
+/**
+ * What a click on `day` does, given the half-made range currently on screen.
+ *
+ * This deliberately ignores the range `react-day-picker` hands to `onSelect`,
+ * because that value is the bug. Its `addToRange` folds the clicked day into
+ * whatever is currently `selected`, and `selected` is always a *complete*
+ * range here — a preset resolves to real bounds, so `from` and `to` are both
+ * set before the user ever opens the calendar. Feeding a complete range in
+ * takes the `from && to` branch, which returns another complete range from a
+ * single click:
+ *
+ *   addToRange(Jul 10, { from: Jul 1, to: Jul 31 })  ->  { from: Jul 1, to: Jul 10 }
+ *
+ * So the first click looked finished, the picker committed and closed, and a
+ * second date could never be chosen. Worse, the committed range was one the
+ * user never asked for: their click became the *end* of the previous range
+ * instead of the start of a new one.
+ *
+ * Deriving from the clicked day instead makes the two clicks explicit — the
+ * first opens a range, the second closes it, in whichever order they are
+ * clicked. Clicking the same day twice is a legitimate single-day range and
+ * completes normally.
+ */
+export function nextRangeDraft(draft, day) {
+    // Nothing pending — this click opens a new range rather than editing the
+    // committed one.
+    if (!draft?.from || draft.to) {
+        return { kind: 'pending', draft: { from: day, to: undefined } };
+    }
+    const start = draft.from;
+    return day.getTime() < start.getTime()
+        ? { kind: 'complete', from: day, to: start }
+        : { kind: 'complete', from: start, to: day };
+}
+/**
+ * The main control for all three levels of the cost explorer (project,
+ * sessions, session). A Popover holding a vertical preset rail beside a range
+ * Calendar; both paths resolve to concrete UTC ISO bounds before calling
+ * `onChange`.
+ */
+export function DateRangePicker({ value, onChange }) {
+    const [open, setOpen] = useState(false);
+    // The range being picked, if the user is mid-selection. While this is set it
+    // is what the calendar shows, so the first click reads as "start here"
+    // instead of silently editing the committed range.
+    const [draft, setDraft] = useState(undefined);
+    const selected = draft ?? toCalendarSelection(value);
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        // Closing with only a start day chosen abandons it. Keeping it would mean
+        // the next open silently treats an old click as the range's start.
+        if (!next)
+            setDraft(undefined);
+    };
+    const handlePresetSelect = (preset) => {
+        setDraft(undefined);
+        onChange(resolvePreset(preset, new Date()));
+        setOpen(false);
+    };
+    // `range` is ignored on purpose — see `nextRangeDraft`. The clicked day is
+    // the only trustworthy input react-day-picker gives us here.
+    const handleCalendarSelect = (_range, day) => {
+        const step = nextRangeDraft(draft, day);
+        if (step.kind === 'pending') {
+            setDraft(step.draft);
+            return;
+        }
+        setDraft(undefined);
+        onChange(toUtcDayRange(step.from, step.to));
+        setOpen(false);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "gap-1.5 font-normal", children: [_jsx(IconCalendar, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "grid text-left tabular-nums", children: [_jsx("span", { "aria-hidden": "true", className: "invisible col-start-1 row-start-1", children: WIDEST_RANGE_LABEL }), _jsx("span", { className: "col-start-1 row-start-1", children: formatRangeLabel(value) })] }), _jsx(IconChevronDown, { className: cn('size-3 shrink-0 opacity-50 transition-transform duration-moderate ease-out', open && 'rotate-180') })] }) }), _jsx(PopoverContent, { align: "start", sideOffset: 8, className: "w-auto p-0 shadow-md", children: _jsxs("div", { className: "flex flex-col sm:flex-row", children: [_jsx("div", { className: "grid grid-cols-2 gap-1 border-b p-2 sm:w-[136px] sm:grid-cols-1 sm:content-start sm:border-r sm:border-b-0", children: PRESET_ORDER.map((preset) => {
+                                const active = value.preset === preset;
+                                return (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-pressed": active, className: cn('h-7 w-full justify-start px-2.5 text-xs font-normal', active ? 'bg-primary/[0.06] text-foreground' : 'text-muted-foreground'), onClick: () => handlePresetSelect(preset), children: PRESET_LABELS[preset] }, preset));
+                            }) }), _jsx(Calendar, { mode: "range", selected: selected, onSelect: handleCalendarSelect, defaultMonth: selected.from })] }) })] }));
+}