@kortix/ui 0.0.0-stage → 0.14.3

package/dist/components/ui/dot-matrix/session-dot-matrix.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dotm3x3_10 } from './dotm-3x3-10.js';
+import { Dotm3x3_12 } from './dotm-3x3-12.js';
+import { Dotm3x3_13 } from './dotm-3x3-13.js';
+import { Dotm3x3_15 } from './dotm-3x3-15.js';
+import { Dotm3x3_16 } from './dotm-3x3-16.js';
+import { Dotm3x3_18 } from './dotm-3x3-18.js';
+import { Dotm3x3_19 } from './dotm-3x3-19.js';
+import { Dotm3x3_2 } from './dotm-3x3-2.js';
+import { Dotm3x3_20 } from './dotm-3x3-20.js';
+import { Dotm3x3_21 } from './dotm-3x3-21.js';
+import { Dotm3x3_3 } from './dotm-3x3-3.js';
+import { Dotm3x3_4 } from './dotm-3x3-4.js';
+import { Dotm3x3_5 } from './dotm-3x3-5.js';
+import { Dotm3x3_6 } from './dotm-3x3-6.js';
+import { Dotm3x3_7 } from './dotm-3x3-7.js';
+import { Dotm3x3_8 } from './dotm-3x3-8.js';
+import { Dotm3x3_9 } from './dotm-3x3-9.js';
+import { DotmCircular1 } from './dotm-circular-1.js';
+import { DotmCircular10 } from './dotm-circular-10.js';
+import { DotmCircular11 } from './dotm-circular-11.js';
+import { DotmCircular12 } from './dotm-circular-12.js';
+import { DotmCircular14 } from './dotm-circular-14.js';
+import { DotmCircular15 } from './dotm-circular-15.js';
+import { DotmCircular17 } from './dotm-circular-17.js';
+import { DotmCircular2 } from './dotm-circular-2.js';
+import { DotmCircular3 } from './dotm-circular-3.js';
+import { DotmCircular4 } from './dotm-circular-4.js';
+import { DotmCircular5 } from './dotm-circular-5.js';
+import { DotmCircular6 } from './dotm-circular-6.js';
+import { DotmCircular7 } from './dotm-circular-7.js';
+import { DotmCircular8 } from './dotm-circular-8.js';
+import { DotmCircular9 } from './dotm-circular-9.js';
+import { DotmSquare1 } from './dotm-square-1.js';
+import { DotmSquare10 } from './dotm-square-10.js';
+import { DotmSquare11 } from './dotm-square-11.js';
+import { DotmSquare12 } from './dotm-square-12.js';
+import { DotmSquare13 } from './dotm-square-13.js';
+import { DotmSquare14 } from './dotm-square-14.js';
+import { DotmSquare15 } from './dotm-square-15.js';
+import { DotmSquare16 } from './dotm-square-16.js';
+import { DotmSquare17 } from './dotm-square-17.js';
+import { DotmSquare18 } from './dotm-square-18.js';
+import { DotmSquare19 } from './dotm-square-19.js';
+import { DotmSquare2 } from './dotm-square-2.js';
+import { DotmSquare20 } from './dotm-square-20.js';
+import { DotmSquare3 } from './dotm-square-3.js';
+import { DotmSquare4 } from './dotm-square-4.js';
+import { DotmSquare5 } from './dotm-square-5.js';
+import { DotmSquare6 } from './dotm-square-6.js';
+import { DotmSquare7 } from './dotm-square-7.js';
+import { DotmSquare8 } from './dotm-square-8.js';
+import { DotmSquare9 } from './dotm-square-9.js';
+export const DOT_MATRIX_CATALOG = [
+    { name: 'dotm-3x3-2', family: '3x3', Component: Dotm3x3_2 },
+    { name: 'dotm-3x3-3', family: '3x3', Component: Dotm3x3_3 },
+    { name: 'dotm-3x3-4', family: '3x3', Component: Dotm3x3_4 },
+    { name: 'dotm-3x3-5', family: '3x3', Component: Dotm3x3_5 },
+    { name: 'dotm-3x3-6', family: '3x3', Component: Dotm3x3_6 },
+    { name: 'dotm-3x3-7', family: '3x3', Component: Dotm3x3_7 },
+    { name: 'dotm-3x3-8', family: '3x3', Component: Dotm3x3_8 },
+    { name: 'dotm-3x3-9', family: '3x3', Component: Dotm3x3_9 },
+    { name: 'dotm-3x3-10', family: '3x3', Component: Dotm3x3_10 },
+    { name: 'dotm-3x3-12', family: '3x3', Component: Dotm3x3_12 },
+    { name: 'dotm-3x3-13', family: '3x3', Component: Dotm3x3_13 },
+    { name: 'dotm-3x3-15', family: '3x3', Component: Dotm3x3_15 },
+    { name: 'dotm-3x3-16', family: '3x3', Component: Dotm3x3_16 },
+    { name: 'dotm-3x3-18', family: '3x3', Component: Dotm3x3_18 },
+    { name: 'dotm-3x3-19', family: '3x3', Component: Dotm3x3_19 },
+    { name: 'dotm-3x3-20', family: '3x3', Component: Dotm3x3_20 },
+    { name: 'dotm-3x3-21', family: '3x3', Component: Dotm3x3_21 },
+    { name: 'dotm-circular-1', family: 'circular', Component: DotmCircular1 },
+    { name: 'dotm-circular-2', family: 'circular', Component: DotmCircular2 },
+    { name: 'dotm-circular-3', family: 'circular', Component: DotmCircular3 },
+    { name: 'dotm-circular-4', family: 'circular', Component: DotmCircular4 },
+    { name: 'dotm-circular-5', family: 'circular', Component: DotmCircular5 },
+    { name: 'dotm-circular-6', family: 'circular', Component: DotmCircular6 },
+    { name: 'dotm-circular-7', family: 'circular', Component: DotmCircular7 },
+    { name: 'dotm-circular-8', family: 'circular', Component: DotmCircular8 },
+    { name: 'dotm-circular-9', family: 'circular', Component: DotmCircular9 },
+    { name: 'dotm-circular-10', family: 'circular', Component: DotmCircular10 },
+    { name: 'dotm-circular-11', family: 'circular', Component: DotmCircular11 },
+    { name: 'dotm-circular-12', family: 'circular', Component: DotmCircular12 },
+    { name: 'dotm-circular-14', family: 'circular', Component: DotmCircular14 },
+    { name: 'dotm-circular-15', family: 'circular', Component: DotmCircular15 },
+    { name: 'dotm-circular-17', family: 'circular', Component: DotmCircular17 },
+    { name: 'dotm-square-1', family: 'square', Component: DotmSquare1 },
+    { name: 'dotm-square-2', family: 'square', Component: DotmSquare2 },
+    { name: 'dotm-square-3', family: 'square', Component: DotmSquare3 },
+    { name: 'dotm-square-4', family: 'square', Component: DotmSquare4 },
+    { name: 'dotm-square-5', family: 'square', Component: DotmSquare5 },
+    { name: 'dotm-square-6', family: 'square', Component: DotmSquare6 },
+    { name: 'dotm-square-7', family: 'square', Component: DotmSquare7 },
+    { name: 'dotm-square-8', family: 'square', Component: DotmSquare8 },
+    { name: 'dotm-square-9', family: 'square', Component: DotmSquare9 },
+    { name: 'dotm-square-10', family: 'square', Component: DotmSquare10 },
+    { name: 'dotm-square-11', family: 'square', Component: DotmSquare11 },
+    { name: 'dotm-square-12', family: 'square', Component: DotmSquare12 },
+    { name: 'dotm-square-13', family: 'square', Component: DotmSquare13 },
+    { name: 'dotm-square-14', family: 'square', Component: DotmSquare14 },
+    { name: 'dotm-square-15', family: 'square', Component: DotmSquare15 },
+    { name: 'dotm-square-16', family: 'square', Component: DotmSquare16 },
+    { name: 'dotm-square-17', family: 'square', Component: DotmSquare17 },
+    { name: 'dotm-square-18', family: 'square', Component: DotmSquare18 },
+    { name: 'dotm-square-19', family: 'square', Component: DotmSquare19 },
+    { name: 'dotm-square-20', family: 'square', Component: DotmSquare20 },
+];
+export const SESSION_DOT_MATRIX_FAMILIES = new Set([
+    '3x3',
+    'circular',
+    'square',
+]);
+export const SESSION_DOT_MATRIX_POOL = DOT_MATRIX_CATALOG.filter((entry) => SESSION_DOT_MATRIX_FAMILIES.has(entry.family));
+export const SESSION_DOT_MATRIX_VARIANTS = SESSION_DOT_MATRIX_POOL.map((entry) => entry.Component);
+/**
+ * FNV-1a over the session id, reduced onto the registry. Deterministic and
+ * dependency-free; `Math.imul` keeps the multiply in 32-bit space and
+ * `>>> 0` makes the result unsigned before the modulo.
+ */
+export function sessionDotMatrixIndex(sessionId) {
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < sessionId.length; i += 1) {
+        hash ^= sessionId.charCodeAt(i);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return (hash >>> 0) % SESSION_DOT_MATRIX_VARIANTS.length;
+}
+/**
+ * The 5x5 families (circular, square) default `dotSize` to 5 for their 36px
+ * design size. At the 14px busy-indicator size that leaves 5px dots whose
+ * grid overflows the box — far too heavy. When the caller sets `size`
+ * without `dotSize`, derive the dot from the same 36:5 ratio the variants
+ * were designed at (14 → 2, matching `DotmSquare14`'s hand-tuned values).
+ * 3x3 variants size themselves from `dotSize` + `cellPadding` and never
+ * overflow, so they pass through untouched.
+ */
+const FIVE_BY_FIVE_FAMILIES = new Set(['circular', 'square']);
+const FIVE_BY_FIVE_BASE_SIZE = 36;
+const FIVE_BY_FIVE_BASE_DOT_SIZE = 5;
+export function fiveByFiveDotSizeFor(size) {
+    return Math.max(1, Math.round((size * FIVE_BY_FIVE_BASE_DOT_SIZE) / FIVE_BY_FIVE_BASE_SIZE));
+}
+export function SessionDotMatrix({ sessionId, ...props }) {
+    if (!sessionId) {
+        return _jsx(DotmSquare14, { ...props });
+    }
+    const { family, Component } = SESSION_DOT_MATRIX_POOL[sessionDotMatrixIndex(sessionId)];
+    const dotSize = props.dotSize == null && props.size != null && FIVE_BY_FIVE_FAMILIES.has(family)
+        ? fiveByFiveDotSizeFor(props.size)
+        : props.dotSize;
+    return _jsx(Component, { ...props, dotSize: dotSize });
+}

package/dist/components/ui/drawer.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): React.JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): React.JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): React.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): React.JSX.Element;
+declare function DrawerContent({ className, children, bar, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+    bar?: boolean;
+}): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): React.JSX.Element;
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };

package/dist/components/ui/drawer.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from '../../lib/utils.js';
+function Drawer({ ...props }) {
+    return _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+    return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+    return _jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+    return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), ...props }));
+}
+function DrawerContent({ className, children, bar = true, ...props }) {
+    return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn('group/drawer-content bg-background fixed z-50 flex h-auto flex-col', 'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b', 'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t', 'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm', 'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm', className), ...props, children: [bar && (_jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" })), children] })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn('flex flex-col gap-1.5 p-4', className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn('mt-auto flex flex-col gap-2 p-4', className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn('text-foreground font-semibold', className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,49 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { type MenuRowSize } from './menu-recipe.js';
+import { type TriggerVariantProps } from './trigger-variants.js';
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & TriggerVariantProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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.
+ */
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+    size?: MenuRowSize;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref">, "align"> & {
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+    size?: "sm" | "md" | "lg";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    reverse?: boolean;
+    size?: MenuRowSize;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: MenuRowSize;
+    side?: "left" | "right";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,113 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 = 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(DropdownMenuPrimitive.Portal, { 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/components/ui/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/components/ui/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-100 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-100 active:scale-[0.96]" }) })] })] }));
+}

package/dist/components/ui/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;