@kortix/ui 0.14.3 → 0.14.5

package/dist/primitives/dropdown-menu.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { withPortalContainer } from '../lib/portal-container.js';
+import { cn } from '../lib/utils.js';
+import { floatingZ, useDialogDepth } from '../lib/z-stack.js';
+import { CheckIcon as Check, CaretRightIcon as ChevronRight } from '@phosphor-icons/react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { MENU_INDICATOR, MENU_INDICATOR_ICON, MENU_INSET, MENU_INSET_END, MENU_LABEL, MENU_PANEL_STATIC, MENU_SEPARATOR, MENU_SHORTCUT, menuRow, } from './menu-recipe.js';
+import { triggerVariants } from './trigger-variants.js';
+/**
+ * The row recipe, the panel and the label/separator/shortcut classes live in
+ * `./menu-recipe`, shared with `context-menu.tsx` — see that file for why the
+ * four row components here (Item, SubTrigger, CheckboxItem, RadioItem) are no
+ * longer allowed to style themselves.
+ *
+ * A dropdown is anchored to a trigger, so its panel is at least as wide as a
+ * typical trigger. A right-click menu has no trigger width to match and floors
+ * itself lower.
+ *
+ * No enter/exit animation on the root panel or the submenu. The root panel
+ * used to `animate-in` (fade + `zoom-in-95` + a 2-unit slide, ~150ms). Radix
+ * Presence also keeps the node mounted until `animate-out` fires
+ * `animationend`, so every open AND every close waited on the animation. People
+ * open these menus tens of times a day; the project sidebar's workspace
+ * switcher is the worst case. The motion read as the menu lagging behind the
+ * click, and it dropped frames under load. The panel now paints on the frame it
+ * mounts and unmounts on the frame it closes.
+ *
+ * The submenu lost its animation earlier for a second reason: it opens INTO the
+ * pointer's path, so the slide moved its rows away from the cursor.
+ */
+const DROPDOWN_PANEL = cn(MENU_PANEL_STATIC, 'min-w-[14rem] overflow-hidden');
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = React.forwardRef(({ className, variant, size, asChild, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Trigger, { ref: ref, asChild: asChild, 
+    // With `asChild` the child owns its styling — merging ours would double it.
+    className: asChild ? className : cn(triggerVariants({ variant, size }), className), ...props })));
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
+const DropdownMenuGroup = React.forwardRef(({ className, ...props }, ref) => (
+// No padding of its own: the panel's `p-1` is the only inset, so a grouped
+// row is exactly as wide as an ungrouped one.
+_jsx(DropdownMenuPrimitive.Group, { ref: ref, className: className, ...props })));
+DropdownMenuGroup.displayName = DropdownMenuPrimitive.Group.displayName;
+const DropdownMenuPortal = withPortalContainer(DropdownMenuPrimitive.Portal);
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+/**
+ * Takes the same `size` and `inset` props as `DropdownMenuItem`, 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 DropdownMenuSubTrigger = React.forwardRef(({ className, inset, size = 'sm', children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn('group', menuRow(size, 'default'), inset && MENU_INSET, className), ...props, children: [children, _jsx(ChevronRight, { className: "text-muted-foreground ml-auto size-3.5" })] })));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, side: _side, align: _align, sideOffset = 5, style, ...props }, ref) => {
+    const depth = useDialogDepth();
+    return (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, sideOffset: sideOffset, className: cn(DROPDOWN_PANEL, className), style: { zIndex: floatingZ(depth), ...style }, ...props }));
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, style, ...props }, ref) => {
+    const depth = useDialogDepth();
+    return (_jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn(DROPDOWN_PANEL, className), style: { zIndex: floatingZ(depth), ...style }, ...props }) }));
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, variant = 'default', size = 'sm', ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn(menuRow(size, variant), inset && MENU_INSET, className), ...props })));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, reverse, size = 'sm', ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, 
+    // The check sits in the row's leading slot (absolute, so an unchecked row
+    // keeps the same label x as a checked one) and the label starts at
+    // `MENU_INSET` — the same x as an `inset` item or an icon row's label.
+    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(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: MENU_INDICATOR_ICON }) }) }), children] })));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+/**
+ * The label column of a radio row.
+ *
+ * `flex-1` is what pushes the check to the row's far edge — but the span used
+ * to stop there, i.e. it was a BLOCK. Tailwind's Preflight sets
+ * `svg { display: block }`, so any radio row with a leading icon rendered the
+ * icon on its own line above the label. Every other row component
+ * (`Item`, `CheckboxItem`, `SubTrigger`) escapes this because `MENU_ROW_BASE`
+ * makes the row itself the flex container and their children are direct
+ * children of it; only `RadioItem` interposes this wrapper.
+ *
+ * Two consumers had already worked around it by hand-wrapping their children
+ * in exactly this class (`user-menu-shared.tsx`, `reasoning-effort-selector.tsx`)
+ * — the workaround is now the component's job. `gap-2` matches `MENU_ROW_BASE`
+ * so an icon+label pair is spaced identically whichever row type holds it.
+ */
+const RADIO_LABEL = 'flex min-w-0 flex-1 items-center gap-2';
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, size = 'sm', side = 'right', ...props }, ref) => {
+    /**
+     * A check, not a dot, and the same check `DropdownMenuCheckboxItem` uses.
+     *
+     * This was `<Circle className="h-2 w-2 fill-current" />`, which could not
+     * work: Phosphor's CircleIcon is a stroked outline, so `fill-current` painted
+     * nothing, and `MENU_ROW_BASE`'s `[&_svg]:size-4` — a descendant selector —
+     * outranked the `h-2 w-2` sitting on the icon itself. The mark rendered as a
+     * hollow ring. No consumer had ever rendered a RadioItem, so nobody saw it.
+     */
+    const indicator = (_jsx("span", { className: MENU_INDICATOR, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: MENU_INDICATOR_ICON }) }) }));
+    return (_jsx(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn(menuRow(size, 'default'), className), ...props, children: side === 'left' ? (_jsxs(_Fragment, { children: [indicator, _jsx("span", { className: RADIO_LABEL, children: children })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: RADIO_LABEL, children: children }), indicator] })) }));
+});
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn(MENU_LABEL, inset && MENU_INSET, className), ...props })));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn(MENU_SEPARATOR, className), ...props })));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({ className, ...props }) => {
+    return _jsx("span", { className: cn(MENU_SHORTCUT, className), ...props });
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };

package/dist/primitives/emoji-picker.js

@@ -0,0 +1,137 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MagnifyingGlassIcon } from '@phosphor-icons/react';
+import { EmojiPicker as Frimousse } from 'frimousse';
+import Hint from './hint.js';
+import { InputGroupSearch, InputGroupSearchIcon } from './input-group.js';
+import Loading from './loading.js';
+import { cn } from '../lib/utils.js';
+/**
+ * Emoji picker built on frimousse.
+ *
+ * The hovered/keyboard-active cell takes one of six tints, rotated by three on
+ * alternating rows so a tint never sits directly above itself. Rotation by
+ * three within a six-cycle guarantees that for ANY column count — frimousse
+ * defaults to 9 columns (its own JSDoc says 10, but the shipped default is
+ * `columns = 9`, and we pass no override), and the guarantee does not depend on
+ * that number. The repeating tile is 6 x 2 = 12 cells: the tint is a pure
+ * function of (nth-child mod 6, row parity).
+ *
+ * Colours come from two paired token families in globals.css: a pale
+ * `--color-emoji-fill-*` and a stronger `--color-emoji-ring-*` per hue. The
+ * active cell is the ONLY visible cue for which emoji is selected — frimousse
+ * gives every emoji button tabIndex={-1} and no focus ring — so the state
+ * indicator has to clear WCAG 1.4.11's 3:1 against --popover. A pale fill
+ * cannot reach that on white at any saturation, so the 1px inset ring carries
+ * the contrast (measured 3.03–3.19:1) and the fill stays quiet.
+ */
+/**
+ * Every variant is written out as a LITERAL string. Do not generate these with
+ * a template literal or a .map() — Tailwind v4 extracts class names by scanning
+ * source text, so an interpolated class name produces no CSS at all and the
+ * hover backgrounds silently never appear.
+ *
+ * There is no `dark:` set: every token is a light-dark() pair, and :root /
+ * .dark set color-scheme, so one class covers both themes.
+ *
+ * The ring GEOMETRY is declared once, as a single `data-[active]:inset-ring-1`
+ * — only the colour is slot-specific. Repeating the width on all twelve slots
+ * would be twelve chances for one to drift.
+ *
+ * VARIANT ORDER: `data-[active]` LAST, i.e.
+ * `group-data-[row=even]/row:nth-[6n+1]:data-[active]:bg-…`. Verified against
+ * tailwindcss 4.3.2, which compiles that to
+ * `:is(:where(.group\/row)[data-row="even"] *):nth-child(6n+1)[data-active]`.
+ * Leading with `data-[active]` also compiles to a working selector, so either
+ * order emits CSS — this one just reads in the order the cascade applies.
+ *
+ * `nth-[6n+k]` counts the emoji button among its row's children, which is
+ * exactly the column: frimousse renders nothing into a row but emoji buttons.
+ *
+ * WHY `data-row` AND NOT `group-odd/row:` / `group-even/row:` (the obvious
+ * CSS-only choice): frimousse virtualises the list, so a row's `:nth-child()`
+ * index counts only the rows currently mounted, offset by a hidden measurement
+ * <div> that is always the first child and by a spacer <div> inserted before
+ * every row that starts a category. `:nth-child(odd)` on a row therefore tracks
+ * neither the logical row nor any stable value — it flips as you scroll.
+ * `aria-rowindex`, which frimousse derives from the logical row index, is the
+ * one stable source, so `<Row>` reads it and stamps the parity as an attribute.
+ */
+const EMOJI_BUTTON = cn('flex size-8 items-center justify-center rounded-md text-lg leading-none', 'cursor-pointer select-none', 
+// `scale` not `transform`: Tailwind v4's scale-* utility sets the standalone
+// `scale` property, which `transition-property: transform` does not cover.
+// box-shadow is in the list because Tailwind draws inset-ring-* with it.
+'transition-[background-color,box-shadow,scale] duration-fast active:scale-[0.96]', 
+// Ring geometry, declared once. Only the colour varies per slot below.
+'data-[active]:inset-ring-1', 
+// Fill — even rows: 1→red, 2→amber, 3→green, 4→teal, 5→blue, 6→violet
+'group-data-[row=even]/row:nth-[6n+1]:data-[active]:bg-emoji-fill-red', 'group-data-[row=even]/row:nth-[6n+2]:data-[active]:bg-emoji-fill-amber', 'group-data-[row=even]/row:nth-[6n+3]:data-[active]:bg-emoji-fill-green', 'group-data-[row=even]/row:nth-[6n+4]:data-[active]:bg-emoji-fill-teal', 'group-data-[row=even]/row:nth-[6n+5]:data-[active]:bg-emoji-fill-blue', 'group-data-[row=even]/row:nth-[6n+6]:data-[active]:bg-emoji-fill-violet', 
+// Fill — odd rows: same six, rotated by three
+'group-data-[row=odd]/row:nth-[6n+1]:data-[active]:bg-emoji-fill-teal', 'group-data-[row=odd]/row:nth-[6n+2]:data-[active]:bg-emoji-fill-blue', 'group-data-[row=odd]/row:nth-[6n+3]:data-[active]:bg-emoji-fill-violet', 'group-data-[row=odd]/row:nth-[6n+4]:data-[active]:bg-emoji-fill-red', 'group-data-[row=odd]/row:nth-[6n+5]:data-[active]:bg-emoji-fill-amber', 'group-data-[row=odd]/row:nth-[6n+6]:data-[active]:bg-emoji-fill-green', 
+// Ring colour — same rotation, paired with the fill by hue
+'group-data-[row=even]/row:nth-[6n+1]:data-[active]:inset-ring-emoji-ring-red', 'group-data-[row=even]/row:nth-[6n+2]:data-[active]:inset-ring-emoji-ring-amber', 'group-data-[row=even]/row:nth-[6n+3]:data-[active]:inset-ring-emoji-ring-green', 'group-data-[row=even]/row:nth-[6n+4]:data-[active]:inset-ring-emoji-ring-teal', 'group-data-[row=even]/row:nth-[6n+5]:data-[active]:inset-ring-emoji-ring-blue', 'group-data-[row=even]/row:nth-[6n+6]:data-[active]:inset-ring-emoji-ring-violet', 'group-data-[row=odd]/row:nth-[6n+1]:data-[active]:inset-ring-emoji-ring-teal', 'group-data-[row=odd]/row:nth-[6n+2]:data-[active]:inset-ring-emoji-ring-blue', 'group-data-[row=odd]/row:nth-[6n+3]:data-[active]:inset-ring-emoji-ring-violet', 'group-data-[row=odd]/row:nth-[6n+4]:data-[active]:inset-ring-emoji-ring-red', 'group-data-[row=odd]/row:nth-[6n+5]:data-[active]:inset-ring-emoji-ring-amber', 'group-data-[row=odd]/row:nth-[6n+6]:data-[active]:inset-ring-emoji-ring-green');
+let warnedMissingRowIndex = false;
+/**
+ * Row parity, from frimousse's `aria-rowindex`.
+ *
+ * The fallback is deliberately noisy rather than silent: if frimousse ever
+ * stopped emitting `aria-rowindex`, every row would fall back to `even`, the
+ * rotation would collapse to a single set, and nothing would fail. The hidden
+ * measurement row legitimately has neither `role` nor `aria-rowindex`, so only
+ * a real row (`role="row"`) missing the index is a regression worth warning on.
+ *
+ * Note frimousse's `aria-rowindex` is 0-based, which is against ARIA's 1-based
+ * convention. This code is correct against what it ships today; if frimousse
+ * ever conforms, every parity flips and the rotation shifts by three.
+ */
+function rowParity(props) {
+    const rowIndex = props['aria-rowindex'];
+    if (typeof rowIndex !== 'number') {
+        if (process.env.NODE_ENV !== 'production' && props.role === 'row' && !warnedMissingRowIndex) {
+            warnedMissingRowIndex = true;
+            console.warn('[EmojiPicker] a frimousse row is missing aria-rowindex; the active-cell ' +
+                'tint rotation has collapsed to one set. Check the frimousse version.');
+        }
+        return 'even';
+    }
+    return rowIndex % 2 === 0 ? 'even' : 'odd';
+}
+export function EmojiPicker({ onEmojiSelect, className, emojibaseUrl = '/emojibase', }) {
+    return (_jsxs(Frimousse.Root, { onEmojiSelect: onEmojiSelect, 
+        // Self-hosted, not frimousse's default CDN. Left unset, frimousse fetches
+        // the emojibase dataset from `https://cdn.jsdelivr.net/npm/emojibase-data`
+        // in the user's browser the first time the picker opens — the only
+        // external runtime CDN this app would have. Kortix ships self-hosted, so
+        // that is wrong here regardless; what makes it a defect is that it fails
+        // INVISIBLY. frimousse exposes `Loading` and `Empty` and no error slot,
+        // and its cold-cache path is a bare `await` (only the etag-revalidation
+        // branch catches), so an unreachable CDN leaves the popover on `Loading`
+        // forever with no message. Air-gapped installs, restricted networks and
+        // any future `connect-src` CSP all land there.
+        //
+        // frimousse appends `${locale}/data.json` and `${locale}/messages.json`
+        // to this. Both are copied into `public/emojibase/en/` at dev/build time
+        // by scripts/emojibase-data.mjs — one locale, ~782 KB on disk / ~94 KB
+        // gzipped, fetched on first open and never part of the JS bundle.
+        //
+        // These two literals are the same values the copy script spells out, and
+        // nothing but apps/web/src/components/ui/emoji-picker-data.test.ts ties them
+        // together: a build script cannot import a client component's constants.
+        // `locale` is written out rather than left to frimousse's `en` default so
+        // the coupling is visible at the place someone would change it.
+        emojibaseUrl: emojibaseUrl, locale: "en", className: cn('isolate flex h-[368px] w-full flex-col', className), children: [_jsx("div", { className: "p-1", children: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(Frimousse.Search, { "aria-label": "Search emoji", placeholder: "Search emoji", className: cn('border-border bg-popover text-foreground placeholder:text-muted-foreground/60', 'h-9 w-full rounded-md border pr-3 pl-9 text-sm font-medium transition-[color] outline-none', 'focus:border-kortix-blue focus:border focus:outline-none', 
+                            // frimousse hardcodes type="search". Tailwind's preflight resets
+                            // ::-webkit-search-decoration but not ::-webkit-search-cancel-button,
+                            // so without this WebKit paints its native clear X inside the field.
+                            // Same reset input.tsx already carries for type="search".
+                            '[&::-webkit-search-cancel-button]:appearance-none') })] }) }), _jsxs(Frimousse.Viewport, { className: "relative flex-1 overflow-y-auto outline-none", children: [_jsx(Frimousse.Loading, { className: "text-muted-foreground absolute inset-0 flex items-center justify-center", children: _jsx(Loading, {}) }), _jsx(Frimousse.Empty, { className: "text-muted-foreground absolute inset-0 flex items-center justify-center px-6 text-center text-sm text-balance", children: ({ search }) => _jsxs(_Fragment, { children: ["No emoji for \u201C", search, "\u201D"] }) }), _jsx(Frimousse.List, { "aria-label": "Emoji", className: "pb-1.5 select-none", components: {
+                            // In each of these, `className` comes AFTER `{...props}` and merges
+                            // `props.className`. All three prop types extend ComponentProps, so
+                            // className is in the type; frimousse does not pass one today, but
+                            // if it ever did, a className before the spread would be replaced
+                            // outright and the whole tint system would go dead silently.
+                            CategoryHeader: ({ category, ...props }) => (_jsx("div", { ...props, className: cn('bg-popover text-muted-foreground px-2 pt-3 pb-1.5 text-xs font-medium', props.className), children: category.label })),
+                            Row: ({ children, ...props }) => (_jsx("div", { ...props, "data-row": rowParity(props), className: cn('group/row flex px-1.5', props.className), children: children })),
+                            Emoji: ({ emoji, ...props }) => (_jsx("button", { type: "button", ...props, className: cn(EMOJI_BUTTON, props.className), children: emoji.emoji })),
+                        } })] }), _jsxs("div", { className: "border-border/60 flex h-11 items-center gap-2 border-t px-2", children: [_jsx(Frimousse.ActiveEmoji, { children: ({ emoji }) => emoji ? (_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "text-lg leading-none", children: emoji.emoji }), _jsx("span", { className: "text-muted-foreground truncate text-xs", children: emoji.label })] })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: "Pick an emoji" })) }), _jsx(Hint, { label: "Change skin tone", side: "top", children: _jsx(Frimousse.SkinToneSelector, { className: "hover:bg-muted ml-auto flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-base transition-[background-color,scale] duration-fast active:scale-[0.96]" }) })] })] }));
+}

package/dist/primitives/empty-state.d.ts

@@ -0,0 +1,14 @@
+import { type Icon as IconMynauiType, type Icon as IconType, type Icon as LucideIcon } from '@phosphor-icons/react';
+import type { ReactNode } from 'react';
+export interface EmptyStateProps {
+    icon?: LucideIcon | IconMynauiType | IconType;
+    /** Custom artwork in place of `icon`. */
+    media?: ReactNode;
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+    secondaryAction?: ReactNode;
+    className?: string;
+    size?: 'sm' | 'default';
+}
+export declare function EmptyState({ icon: IconComponent, media, title, description, action, secondaryAction, size, className, }: EmptyStateProps): import("react").JSX.Element;

package/dist/primitives/empty-state.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Kortix <EmptyState> — centered empty view.
+ *
+ * Minimal. An icon, a one-line headline, an optional body, and up to two
+ * actions (primary + secondary). A calm teaching moment rather than a
+ * brick wall.
+ *
+ *   <EmptyState
+ *     icon={IconInbox}
+ *     title="No issues yet"
+ *     description="Create your first issue with C, or press N in any tab."
+ *     action={<Button>New issue</Button>}
+ *   />
+ */
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from './empty.js';
+import { cn } from '../lib/utils.js';
+export function EmptyState({ icon: IconComponent, media, title, description, action, secondaryAction, size = 'default', className, }) {
+    const iconSize = size === 'sm' ? 'h-8 w-8' : 'h-10 w-10';
+    const maxW = size === 'sm' ? 'max-w-[240px]' : 'max-w-[320px]';
+    return (_jsxs(Empty, { className: cn('', className), children: [_jsxs(EmptyHeader, { className: maxW, children: [media ? (_jsx(EmptyMedia, { className: "mb-5", children: media })) : (IconComponent && (_jsx(EmptyMedia, { className: "mb-4", children: _jsx(IconComponent, { className: cn(iconSize, 'text-muted-foreground') }) }))), _jsx(EmptyTitle, { className: "text-foreground text-sm font-semibold tracking-tight", children: title }), description && (_jsx(EmptyDescription, { className: "text-muted-foreground/80 mt-1.5", children: description }))] }), (action || secondaryAction) && (_jsxs(EmptyContent, { className: "flex-row justify-center gap-2", children: [action, secondaryAction] }))] }));
+}

package/dist/primitives/empty.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/utils.js';
+function Empty({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty", className: cn('flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12', className), ...props }));
+}
+function EmptyHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-header", className: cn('flex max-w-sm flex-col items-center gap-2 text-center', className), ...props }));
+}
+const emptyMediaVariants = cva('mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function EmptyMedia({ className, variant = 'default', ...props }) {
+    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn(emptyMediaVariants({ variant, className })), ...props }));
+}
+function EmptyTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-title", className: cn('text-lg font-medium tracking-tight', className), ...props }));
+}
+function EmptyDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-description", className: cn('text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
+}
+function EmptyContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-content", className: cn('flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance', className), ...props }));
+}
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/primitives/entity-avatar.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { emojiTint } from './emoji-tint.js';
+import { glyphFace } from './glyph-face.js';
+import { glyphForeground, glyphTint } from './glyph-tint.js';
+import { cn } from '../lib/utils.js';
+import { chalkColors } from '../_vendor/kortix-shared.js';
+/**
+ * `emoji` is its own step, not the initial's `text-*`: an emoji is the tile's
+ * content, not a letter set in the tile's type scale. Inheriting `box`'s size
+ * puts a 14px emoji in the 36.8px `lg` card tile — legible, but visibly a
+ * letter-sized thing in an icon-sized hole.
+ *
+ * The values are measured, not derived. A colour-emoji face is a bitmap strike,
+ * so `measureText` over-reports it and the glyph paints WIDER than its
+ * font-size. Rasterised through Chromium on this font stack, painted extent vs.
+ * the tile it sits in:
+ *
+ *   xs  13px → 16×14 in 18.40  (0.87)      md  16px → 20×17 in 29.44  (0.68)
+ *   sm  14px → 18×16 in 22.08  (0.82)      lg  20px → 22×17 in 36.80  (0.60)
+ *                                          xl  30px → 30×25 in 51.52  (0.58)
+ *
+ * Nothing overflows its tile. The two small tiles run proportionally fuller
+ * because `text-xs` (13px) is the floor of this app's type scale — and below
+ * that an emoji stops being readable in an 18px square anyway.
+ */
+const SIZE_MAP = {
+    xs: { box: 'size-5 rounded-sm text-xs', icon: 'size-3', emoji: 'text-xs' },
+    sm: { box: 'size-6 rounded-sm text-xs', icon: 'size-3.5', emoji: 'text-sm' },
+    md: { box: 'size-8 rounded-md text-xs', icon: 'size-4', emoji: 'text-base' },
+    lg: { box: 'size-10 rounded-md text-sm', icon: 'size-5', emoji: 'text-xl' },
+    xl: { box: 'size-14 rounded-md text-base', icon: 'size-7', emoji: 'text-3xl' },
+};
+/**
+ * Resolves a `glyph` prop to the component that actually draws it, or `null`
+ * if the name isn't in the registry.
+ *
+ * Its own function rather than an inline `glyph ? glyphFace(…) : null`
+ * at each use site, because EVERY use site (the inline style, the tile's
+ * class list, the rendered face) has to agree on whether there IS a
+ * renderable glyph, and a name that fails to resolve has to fall through to
+ * the rest of the precedence chain identically everywhere. Two independent
+ * `glyphFace()` calls computing the same answer is how they drift.
+ */
+function resolveGlyph(glyph) {
+    if (!glyph)
+        return null;
+    const GlyphComponent = glyphFace(glyph.name);
+    return GlyphComponent ? { GlyphComponent, color: glyph.color } : null;
+}
+export function EntityAvatar({ label, glyph, emoji, icon: IconComponent, size = 'md', className, }) {
+    const sizes = SIZE_MAP[size];
+    const initial = (label?.trim()?.charAt(0) || '?').toUpperCase();
+    const chalk = chalkColors(`${label?.trim()}` || initial);
+    const resolvedGlyph = resolveGlyph(glyph);
+    return (_jsx("span", { "data-slot": "entity-avatar", 
+        // chalkColors() is an inline style, so it beats any class a caller
+        // passes. A glyph or an emoji is already the colour — sitting either on
+        // a saturated hash-derived pastel reads as noise, and in dark mode that
+        // pastel is a bright square in an otherwise dark grid. So a glyph or
+        // emoji tile drops the style entirely and rebuilds itself from its own
+        // tint tokens. See the class list.
+        style: resolvedGlyph || emoji
+            ? undefined
+            : {
+                backgroundColor: chalk.background,
+                color: chalk.foreground,
+                borderColor: chalk.border,
+            }, className: cn('inline-flex shrink-0 items-center justify-center border font-semibold', sizes.box, 
+        // After `sizes.box`, so tailwind-merge resolves `sizes.emoji` over the
+        // initial's text size — and so `border-0` resolves over the base
+        // `border`, which is what stops a neutral hairline being drawn OUTSIDE
+        // the coloured inset ring.
+        //
+        // `emojiTint()` is the picker's hovered-cell treatment (a pale
+        // `--color-emoji-fill-*` under a 1px `--color-emoji-ring-*` inset ring)
+        // made this tile's RESTING look, with the hue derived from the emoji
+        // rather than from a grid position the tile does not have. See
+        // emoji-tint.ts for the mapping. Both the ring and the fill are
+        // light-dark() pairs, so there is no `dark:` variant here.
+        //
+        // It replaces `bg-muted border-foreground/25 shadow-2xs`, which existed
+        // to fix a different tile: a NEUTRAL fill measured 1.07:1 against the
+        // card in dark, so it had to borrow an edge from `--foreground` and a
+        // lift from a shadow to read as a tile at all. The tinted fill and its
+        // ring carry that on their own — measured against all three surfaces in
+        // both themes, the ring runs 2.30–3.55:1 and the fill 1.19–1.55:1
+        // (.superpowers/sdd/2026-07-31-project-emoji-icons/tint-report.md).
+        //
+        // STILL LAST-WINS: a caller className that sets a background silently
+        // beats `bg-emoji-fill-*` / `bg-glyph-fill-*` and leaves the tile
+        // ringed but untinted. That is why the project card no longer passes
+        // `bg-background`.
+        resolvedGlyph ? glyphTint(resolvedGlyph.color) : emoji && [emojiTint(emoji), sizes.emoji], className), children: resolvedGlyph ? (
+        // Same reasoning as the emoji span below: the tile always sits
+        // beside the name it belongs to, so the glyph itself is decorative.
+        // `sizes.icon`, not `sizes.emoji` — a glyph is a drawn Phosphor icon,
+        // sized like the plain `icon` prop below, not like a text-rendered
+        // emoji grapheme.
+        _jsx(resolvedGlyph.GlyphComponent, { className: cn(sizes.icon, glyphForeground(resolvedGlyph.color)) })) : emoji ? (
+        // The tile always sits beside the name it belongs to, so the glyph is
+        // decorative: announced, it reads the emoji's CLDR name immediately
+        // before the label that says the same thing. Same treatment as the
+        // picker trigger in packages/ui/src/workspace/projects/modal/project-icon-field.tsx.
+        _jsx("span", { "aria-hidden": true, className: "leading-none", children: emoji })) : IconComponent ? (_jsx(IconComponent, { className: sizes.icon })) : (initial) }));
+}

package/dist/primitives/error-boundary.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export type ErrorBoundaryFallback = (props: {
+    error: Error;
+    reset: () => void;
+}) => React.ReactNode;
+interface State {
+    error: Error | null;
+}
+/**
+ * Contains a render crash to its subtree and renders `fallback` instead.
+ * Reports the error through `captureException` (`@kortix/ui/lib/telemetry`)
+ * with the component stack as `extra.componentStack`.
+ */
+export declare class ErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+    fallback: ErrorBoundaryFallback;
+}, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    reset: () => void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/primitives/error-boundary.js

@@ -0,0 +1,25 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { captureException } from '../lib/telemetry.js';
+/**
+ * Contains a render crash to its subtree and renders `fallback` instead.
+ * Reports the error through `captureException` (`@kortix/ui/lib/telemetry`)
+ * with the component stack as `extra.componentStack`.
+ */
+export class ErrorBoundary extends React.Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        captureException(error, { extra: { componentStack: info.componentStack } });
+    }
+    reset = () => this.setState({ error: null });
+    render() {
+        const { error } = this.state;
+        if (error)
+            return _jsx(_Fragment, { children: this.props.fallback({ error, reset: this.reset }) });
+        return _jsx(_Fragment, { children: this.props.children });
+    }
+}

package/dist/primitives/error-state.d.ts

@@ -0,0 +1,12 @@
+import { type Icon as IconMynauiType, type Icon as IconType, type Icon as LucideIcon } from '@phosphor-icons/react';
+import type { ReactNode } from 'react';
+export interface ErrorStateProps {
+    icon?: LucideIcon | IconMynauiType | IconType;
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+    secondaryAction?: ReactNode;
+    className?: string;
+    size?: 'sm' | 'default';
+}
+export declare function ErrorState({ icon: IconComponent, title, description, action, secondaryAction, size, className, }: ErrorStateProps): import("react").JSX.Element;

package/dist/primitives/error-state.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Kortix <ErrorState> — centered error view.
+ *
+ * Minimal. An icon, a one-line headline, an optional body, and up to two
+ * actions (primary + secondary). A calm failure moment — not an alarm bell.
+ *
+ *   <ErrorState
+ *     title="Failed to load"
+ *     description={error.message}
+ *     action={<Button variant="outline" size="sm" onClick={refetch}>Retry</Button>}
+ *   />
+ */
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from './empty.js';
+import { cn } from '../lib/utils.js';
+import { WarningIcon as DangerTriangleSolid, } from '@phosphor-icons/react';
+export function ErrorState({ icon: IconComponent = DangerTriangleSolid, title, description, action, secondaryAction, size = 'default', className, }) {
+    const maxW = size === 'sm' ? 'max-w-[240px]' : 'max-w-[320px]';
+    return (_jsxs(Empty, { className: cn('border-none', className), children: [_jsxs(EmptyHeader, { className: maxW, children: [_jsx(EmptyMedia, { className: "mb-4", children: _jsx("div", { className: cn('inline-flex size-10 shrink-0 items-center justify-center rounded-sm border', 'bg-kortix-red/10 text-kortix-red'), children: _jsx(IconComponent, { className: "size-6 shrink-0", weight: "fill" }) }) }), _jsx(EmptyTitle, { className: "text-base font-semibold", children: title }), description && _jsx(EmptyDescription, { className: "mt-1.5", children: description })] }), (action || secondaryAction) && (_jsxs(EmptyContent, { className: "flex-row justify-center gap-2", children: [action, secondaryAction] }))] }));
+}

package/dist/primitives/faded-scroll-area.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import * as React from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+export const FadedScrollArea = React.forwardRef(function FadedScrollArea({ children, className, fadeColor = 'from-sidebar', orientation = 'vertical', rootClassName, fadeSize = '10', style, ...props }, ref) {
+    const scrollRef = useRef(null);
+    const [showStartFade, setShowStartFade] = useState(false);
+    const [showEndFade, setShowEndFade] = useState(false);
+    const isHorizontal = orientation === 'horizontal';
+    const fadeSizeValue = /^\d+(\.\d+)?$/.test(fadeSize.trim())
+        ? `calc(var(--spacing) * ${fadeSize.trim()})`
+        : fadeSize.trim();
+    const setScrollRef = useCallback((node) => {
+        scrollRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const updateScrollFades = useCallback(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        if (isHorizontal) {
+            const { scrollLeft, scrollWidth, clientWidth } = el;
+            const maxScroll = scrollWidth - clientWidth;
+            const canScroll = maxScroll > 1;
+            if (!canScroll) {
+                setShowStartFade(false);
+                setShowEndFade(false);
+                return;
+            }
+            setShowStartFade(scrollLeft > 1);
+            setShowEndFade(scrollLeft < maxScroll - 1);
+            return;
+        }
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        const maxScroll = scrollHeight - clientHeight;
+        const canScroll = maxScroll > 1;
+        if (!canScroll) {
+            setShowStartFade(false);
+            setShowEndFade(false);
+            return;
+        }
+        setShowStartFade(scrollTop > 1);
+        setShowEndFade(scrollTop < maxScroll - 1);
+    }, [isHorizontal]);
+    useLayoutEffect(() => {
+        updateScrollFades();
+    }, [updateScrollFades]);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(updateScrollFades);
+        ro.observe(el);
+        el.addEventListener('scroll', updateScrollFades, { passive: true });
+        window.addEventListener('resize', updateScrollFades);
+        // Keep wheel/touch scroll working inside Radix scroll-lock layers (Dialog/Modal).
+        const stopScrollLockCapture = (e) => e.stopPropagation();
+        el.addEventListener('wheel', stopScrollLockCapture, { passive: false });
+        el.addEventListener('touchmove', stopScrollLockCapture, { passive: false });
+        return () => {
+            ro.disconnect();
+            el.removeEventListener('scroll', updateScrollFades);
+            window.removeEventListener('resize', updateScrollFades);
+            el.removeEventListener('wheel', stopScrollLockCapture);
+            el.removeEventListener('touchmove', stopScrollLockCapture);
+        };
+    }, [updateScrollFades]);
+    return (_jsxs("div", { className: cn('relative flex min-h-0 min-w-0', isHorizontal ? 'w-full min-w-0 flex-1 self-center' : 'h-full flex-col', rootClassName), style: { '--fade-size': fadeSizeValue, ...style }, children: [_jsx("div", { className: cn('pointer-events-none absolute z-10 transition-opacity', fadeColor, isHorizontal
+                    ? 'inset-y-0 left-0 w-(--fade-size) bg-gradient-to-r to-transparent'
+                    : 'inset-x-0 top-0 h-(--fade-size) bg-gradient-to-b to-transparent', showStartFade ? 'opacity-100' : 'opacity-0'), "aria-hidden": true }), _jsx("div", { className: cn('pointer-events-none absolute z-10 transition-opacity', fadeColor, isHorizontal
+                    ? 'inset-y-0 right-0 w-(--fade-size) bg-gradient-to-l to-transparent'
+                    : 'inset-x-0 bottom-0 h-(--fade-size) bg-gradient-to-t to-transparent', showEndFade ? 'opacity-100' : 'opacity-0'), "aria-hidden": true }), _jsx("div", { ref: setScrollRef, className: cn('scrollbar-hide min-h-0 min-w-0 flex-1 pb-0', isHorizontal ? 'touch-pan-x overflow-x-auto overflow-y-hidden' : 'overflow-y-auto', className), ...props, children: children })] }));
+});
+FadedScrollArea.displayName = 'FadedScrollArea';

package/dist/primitives/favicon-avatar.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
+import { faviconUrlForValue } from '../lib/favicon.js';
+import { cn } from '../lib/utils.js';
+import { GlobeIcon as Globe } from '@phosphor-icons/react';
+const SIZE_MAP = {
+    '2xs': { avatar: 'size-4', icon: 'size-2.5' },
+    xs: { avatar: 'size-5', icon: 'size-3' },
+    sm: { avatar: 'size-6', icon: 'size-3.5' },
+    md: { avatar: 'size-8', icon: 'size-4' },
+    lg: { avatar: 'size-10', icon: 'size-5' },
+};
+export function FaviconAvatar({ value, size = 'xs', className, alt = '' }) {
+    const sizes = SIZE_MAP[size];
+    const src = faviconUrlForValue(value);
+    return (_jsxs(Avatar, { "data-slot": "favicon-avatar", className: cn('bg-muted/60 rounded', sizes.avatar, className), children: [src ? (_jsx(AvatarImage, { src: src, alt: alt, className: "outline outline-black/10 dark:outline-white/10" })) : null, _jsx(AvatarFallback, { delayMs: 0, className: "bg-muted/60", children: _jsx(Globe, { className: cn('text-muted-foreground/50', sizes.icon) }) })] }));
+}