@kortix/ui 0.0.0-stage → 0.14.4

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.d.ts

@@ -0,0 +1,15 @@
+export interface EmojiSelection {
+    emoji: string;
+    label: string;
+}
+export declare function EmojiPicker({ onEmojiSelect, className, emojibaseUrl, }: {
+    onEmojiSelect: (emoji: EmojiSelection) => void;
+    className?: string;
+    /**
+     * Root-relative URL that serves `en/data.json` and `en/messages.json` from
+     * `emojibase-data`. apps/web copies them to `public/emojibase/`. A host that
+     * serves them elsewhere passes its own path; a host that serves nothing gets
+     * a picker that stays on its loading state (frimousse has no error slot).
+     */
+    emojibaseUrl?: string;
+}): import("react").JSX.Element;

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/emoji-tint.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The tint a project's emoji wears.
+ *
+ * In the picker (emoji-picker.tsx) a cell takes a pale fill and a stronger 1px
+ * inset ring while it is hovered or keyboard-active. That treatment is what a
+ * project's icon now wears AT REST everywhere it appears: the card tile in
+ * /projects, the switcher row in the sidebar, and the picker's own trigger
+ * button in the create/edit modals.
+ *
+ * WHERE THE HUE COMES FROM. The picker rotates its six hues by GRID POSITION —
+ * a cell's tint is a function of (column mod 6, row parity). A card tile and a
+ * trigger button have no position, so that source does not exist here. The hue
+ * is derived from the EMOJI instead, which also buys the property the feature
+ * needs: the same project shows the same colour on every surface, with no state
+ * to thread and nothing to store. 🌿 is green wherever it renders.
+ *
+ * TWO TIERS, deliberately lopsided:
+ *
+ *  1. An anchor table of ~106 emoji, below. It is not an attempt at coverage —
+ *     it is the set where a MISMATCH would read as a mistake, i.e. glyphs
+ *     dominated by one hue in every major vendor font (Apple, Noto, Segoe,
+ *     Twemoji). A blue ring on 🔥 looks broken; a blue ring on 📝 is just a
+ *     colour. Most emoji are the second kind, which is why the table stays this
+ *     small and why growing it is rarely the right fix.
+ *
+ *  2. A hash for everything else. Deterministic, so a project's colour survives
+ *     a reload and matches across surfaces, and spread across all six hues so
+ *     the grid does not settle on one.
+ *
+ * teal is thin on purpose. Almost no emoji is unambiguously teal across
+ * vendors, so rather than force marginal glyphs into it the table leaves teal
+ * almost entirely to the hash, which keeps it in rotation.
+ */
+export declare const EMOJI_HUES: readonly ["red", "amber", "green", "teal", "blue", "violet"];
+export type EmojiHue = (typeof EMOJI_HUES)[number];
+/** The hue an emoji wears — anchored if it is loud, hashed if it is not. */
+export declare function emojiHue(emoji: string): EmojiHue;
+/** The picker's active-cell treatment, at rest: fill + 1px inset ring. */
+export declare function emojiTint(emoji: string): string;
+/** Holds `emojiTint`'s fill through a host variant's own hover background. */
+export declare function emojiTintHover(emoji: string): string;

package/dist/primitives/emoji-tint.js

@@ -0,0 +1,131 @@
+/**
+ * The tint a project's emoji wears.
+ *
+ * In the picker (emoji-picker.tsx) a cell takes a pale fill and a stronger 1px
+ * inset ring while it is hovered or keyboard-active. That treatment is what a
+ * project's icon now wears AT REST everywhere it appears: the card tile in
+ * /projects, the switcher row in the sidebar, and the picker's own trigger
+ * button in the create/edit modals.
+ *
+ * WHERE THE HUE COMES FROM. The picker rotates its six hues by GRID POSITION —
+ * a cell's tint is a function of (column mod 6, row parity). A card tile and a
+ * trigger button have no position, so that source does not exist here. The hue
+ * is derived from the EMOJI instead, which also buys the property the feature
+ * needs: the same project shows the same colour on every surface, with no state
+ * to thread and nothing to store. 🌿 is green wherever it renders.
+ *
+ * TWO TIERS, deliberately lopsided:
+ *
+ *  1. An anchor table of ~106 emoji, below. It is not an attempt at coverage —
+ *     it is the set where a MISMATCH would read as a mistake, i.e. glyphs
+ *     dominated by one hue in every major vendor font (Apple, Noto, Segoe,
+ *     Twemoji). A blue ring on 🔥 looks broken; a blue ring on 📝 is just a
+ *     colour. Most emoji are the second kind, which is why the table stays this
+ *     small and why growing it is rarely the right fix.
+ *
+ *  2. A hash for everything else. Deterministic, so a project's colour survives
+ *     a reload and matches across surfaces, and spread across all six hues so
+ *     the grid does not settle on one.
+ *
+ * teal is thin on purpose. Almost no emoji is unambiguously teal across
+ * vendors, so rather than force marginal glyphs into it the table leaves teal
+ * almost entirely to the hash, which keeps it in rotation.
+ */
+export const EMOJI_HUES = ['red', 'amber', 'green', 'teal', 'blue', 'violet'];
+/**
+ * Variation selectors (U+FE0E text, U+FE0F emoji) and the five Fitzpatrick skin
+ * tone modifiers.
+ *
+ * Both have to go before anything is looked up or hashed. The same icon reaches
+ * this module in more than one encoding — frimousse's `onEmojiSelect`, a row
+ * loaded from the API, a value written by an older client — and '❤️' and '❤'
+ * must not be two different colours. Skin tone is the same argument five times
+ * over: without the strip, one gesture picks five unrelated hashes.
+ */
+const MODIFIERS = /[\u{FE0E}\u{FE0F}\u{1F3FB}-\u{1F3FF}]/gu;
+function baseOf(emoji) {
+    return emoji.replace(MODIFIERS, '');
+}
+/**
+ * Emoji whose glyph is one hue in every major vendor font.
+ *
+ * Read with `[...string]`, which iterates CODE POINTS — so every entry here has
+ * to be a single code point plus an optional variation selector. No ZWJ
+ * sequences, no flags, no keycaps: those would register their halves as
+ * separate anchors. emoji-tint.test.ts enforces that, and that no glyph appears
+ * under two hues.
+ *
+ * Brown has no token of its own, so 🟤 🟫 🤎 📦 🪵 sit under amber — the
+ * nearest of the six, and much nearer than a hash would land them.
+ */
+const DOMINANT = {
+    red: '🔴🟥❤️🩷💔🍎🍓🍒🍅🌹🌶️🩸💋🔻🚨🚒🧨🎈🐞🦞',
+    amber: '🟠🟧🟡🟨🧡💛🟤🟫🤎🔥⚡⭐🌟✨☀️💡🍊🍋🍌🌽🧀🍯🏆🥇🌻🎃🦁🐯🐝🔶📦🪵',
+    green: '🟢🟩💚🌿🍀🌱🌳🌲🍃🥬🥦🥑🥒🍐🍏🫑🐸🐢🐍🦖♻️✅',
+    teal: '🩵🧊🫧🦚',
+    blue: '🔵🟦💙🔷🔹💧🌊🌐🌍🌎🌏🐳🐋🫐🥶🌀❄️💎🦋🩻',
+    violet: '🟣🟪💜🔮🍇🍆👾🪻',
+};
+const HUE_BY_EMOJI = new Map(EMOJI_HUES.flatMap((hue) => [...baseOf(DOMINANT[hue])].map((glyph) => [glyph, hue])));
+/**
+ * FNV-1a-ish, over CODE POINTS rather than UTF-16 units — the same shape
+ * `chalkColors` in @kortix/shared uses for entity tiles, kept local because
+ * that package exports the colours and not the hash.
+ */
+function hash(seed) {
+    let value = 0;
+    for (const char of seed)
+        value = (value * 31 + (char.codePointAt(0) ?? 0)) | 0;
+    return Math.abs(value);
+}
+/** The hue an emoji wears — anchored if it is loud, hashed if it is not. */
+export function emojiHue(emoji) {
+    const base = baseOf(emoji);
+    return HUE_BY_EMOJI.get(base) ?? EMOJI_HUES[hash(base) % EMOJI_HUES.length];
+}
+/**
+ * Every class below is a LITERAL string. Do not build one with a template
+ * literal or a .map(): Tailwind v4 extracts class names by scanning source
+ * TEXT, so an interpolated name emits no CSS at all and the tints silently
+ * never paint. That has already happened once on this feature.
+ *
+ * There is no `dark:` set — each token is a light-dark() pair and :root / .dark
+ * set color-scheme, so one class covers both themes.
+ *
+ * `border-0` is part of the tint, not the host's business: both hosts bring a
+ * 1px border of their own (EntityAvatar's base class list, Button's `outline`
+ * variant) and it would sit outside the inset ring as a grey second edge. The
+ * picker cell has no border at all, and matching it is the point.
+ */
+const TINT = {
+    red: 'border-0 bg-emoji-fill-red inset-ring-1 inset-ring-emoji-ring-red',
+    amber: 'border-0 bg-emoji-fill-amber inset-ring-1 inset-ring-emoji-ring-amber',
+    green: 'border-0 bg-emoji-fill-green inset-ring-1 inset-ring-emoji-ring-green',
+    teal: 'border-0 bg-emoji-fill-teal inset-ring-1 inset-ring-emoji-ring-teal',
+    blue: 'border-0 bg-emoji-fill-blue inset-ring-1 inset-ring-emoji-ring-blue',
+    violet: 'border-0 bg-emoji-fill-violet inset-ring-1 inset-ring-emoji-ring-violet',
+};
+/**
+ * The resting fill again, under `hover:`.
+ *
+ * Only an INTERACTIVE host needs it. Button's `outline` variant carries
+ * `hover:bg-foreground/5`, and a `:hover` rule outranks the resting
+ * `bg-emoji-fill-*` on specificity, so hovering the trigger would wipe the tint
+ * to a neutral wash. Restating the fill at the same modifier is what holds it.
+ */
+const TINT_HOVER = {
+    red: 'hover:bg-emoji-fill-red',
+    amber: 'hover:bg-emoji-fill-amber',
+    green: 'hover:bg-emoji-fill-green',
+    teal: 'hover:bg-emoji-fill-teal',
+    blue: 'hover:bg-emoji-fill-blue',
+    violet: 'hover:bg-emoji-fill-violet',
+};
+/** The picker's active-cell treatment, at rest: fill + 1px inset ring. */
+export function emojiTint(emoji) {
+    return TINT[emojiHue(emoji)];
+}
+/** Holds `emojiTint`'s fill through a host variant's own hover background. */
+export function emojiTintHover(emoji) {
+    return TINT_HOVER[emojiHue(emoji)];
+}

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.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+declare function Empty({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>): import("react").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

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.d.ts

@@ -0,0 +1,84 @@
+import type { Icon } from './kortix-icons.js';
+import { type Icon as IconType } from '@phosphor-icons/react';
+/**
+ * `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.
+ */
+declare const SIZE_MAP: {
+    readonly xs: {
+        readonly box: "size-5 rounded-sm text-xs";
+        readonly icon: "size-3";
+        readonly emoji: "text-xs";
+    };
+    readonly sm: {
+        readonly box: "size-6 rounded-sm text-xs";
+        readonly icon: "size-3.5";
+        readonly emoji: "text-sm";
+    };
+    readonly md: {
+        readonly box: "size-8 rounded-md text-xs";
+        readonly icon: "size-4";
+        readonly emoji: "text-base";
+    };
+    readonly lg: {
+        readonly box: "size-10 rounded-md text-sm";
+        readonly icon: "size-5";
+        readonly emoji: "text-xl";
+    };
+    readonly xl: {
+        readonly box: "size-14 rounded-md text-base";
+        readonly icon: "size-7";
+        readonly emoji: "text-3xl";
+    };
+};
+export type EntityAvatarSize = keyof typeof SIZE_MAP;
+export interface EntityAvatarProps {
+    label?: string;
+    /**
+     * A named glyph + colour — a project's alternative to `emoji`. Takes
+     * precedence over `emoji`, `icon`, and the label's initial: the field that
+     * produces this value is a union (a project has an emoji XOR a glyph,
+     * never both), so whichever was chosen last is what should paint.
+     *
+     * An unknown `name` resolves through `glyphFace()` to `null` and
+     * falls through to the rest of the precedence chain rather than painting
+     * an empty tile — the server rejects unknown names, but a client
+     * rendering STALE cached data (an old snapshot in the query cache, a
+     * catalogue that shrank) must not break.
+     */
+    glyph?: {
+        name: string;
+        color: string;
+    } | null;
+    /**
+     * A single emoji grapheme standing in for the entity — today, a project's
+     * own icon. Beaten by `glyph`; takes precedence over `icon` and over the
+     * label's initial.
+     *
+     * Typed `| null` so it takes `KortixProject.icon` (server-validated to one
+     * emoji, or null) with no coercion at the call site. Anything falsy — null,
+     * undefined, '' — is "no emoji" and falls through to the existing behaviour,
+     * which is what keeps all ~30 emoji-less call sites byte-identical.
+     */
+    emoji?: string | null;
+    icon?: Icon | IconType;
+    size?: EntityAvatarSize;
+    className?: string;
+}
+export declare function EntityAvatar({ label, glyph, emoji, icon: IconComponent, size, className, }: EntityAvatarProps): import("react").JSX.Element;
+export {};