@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

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

@@ -0,0 +1,23 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Separator } from './separator.js';
+declare function ItemGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare const itemVariants: (props?: ({
+    variant?: "default" | "outline" | "muted" | "warning" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+    variant?: "default" | "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, };

package/dist/components/ui/item.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { Separator } from './separator.js';
+import { cn } from '../../lib/utils.js';
+function ItemGroup({ className, ...props }) {
+    return (_jsx("div", { role: "list", "data-slot": "item-group", className: cn('group/item-group flex flex-col', className), ...props }));
+}
+function ItemSeparator({ className, ...props }) {
+    return (_jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn('my-0', className), ...props }));
+}
+const itemVariants = cva('group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border-border',
+            muted: 'bg-muted/50',
+            warning: 'border-kortix-orange bg-kortix-orange/20',
+        },
+        size: {
+            default: 'gap-4 p-4',
+            sm: 'gap-2.5 px-4 py-3',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function Item({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : 'div';
+    return (_jsx(Comp, { "data-slot": "item", "data-variant": variant, "data-size": size, className: cn(itemVariants({ variant, size, className })), ...props }));
+}
+const itemMediaVariants = cva('flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
+            image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function ItemMedia({ className, variant = 'default', ...props }) {
+    return (_jsx("div", { "data-slot": "item-media", "data-variant": variant, className: cn(itemMediaVariants({ variant, className })), ...props }));
+}
+function ItemContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-content", className: cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className), ...props }));
+}
+function ItemTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-title", className: cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className), ...props }));
+}
+function ItemDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "item-description", className: cn('text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
+}
+function ItemActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-actions", className: cn('flex items-center gap-2', className), ...props }));
+}
+function ItemHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-header", className: cn('flex basis-full items-center justify-between gap-2', className), ...props }));
+}
+function ItemFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-footer", className: cn('flex basis-full items-center justify-between gap-2', className), ...props }));
+}
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, };

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

@@ -0,0 +1,3 @@
+declare function Kbd({ className, ...props }: React.ComponentProps<'kbd'>): import("react").JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<'kbd'>): import("react").JSX.Element;
+export { Kbd, KbdGroup };

package/dist/components/ui/kbd.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+function Kbd({ className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn('text-muted-foreground pointer-events-none inline-flex size-4 items-center justify-center gap-1 rounded px-1 font-sans text-xs font-medium select-none', "[&_svg:not([class*='size-'])]:size-3", 
+        // A tooltip is an INVERTED surface (`bg-foreground text-background`), so
+        // the default light `bg-muted` chip lands on it as a bright white blob.
+        // Tint from the tooltip's own text color instead: one rule that reads
+        // as a recessed key in both themes. This is the ONLY place the
+        // in-tooltip look is defined — `tooltip-content` must not restyle keys
+        // with a descendant `[&_kbd]` rule, or it also hits `KbdGroup`.
+        // '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background',
+        '[[data-slot=tooltip-content]_&]:text-background', className), ...props }));
+}
+// Renders a `<kbd>` on purpose: nested `<kbd>` is the HTML idiom for one key
+// COMBINATION made of individual keys. It carries no chrome of its own — it is
+// spacing only, so ancestors must never style it as if it were a key.
+function KbdGroup({ className, ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd-group", className: cn('inline-flex items-center gap-0', className), ...props }));
+}
+export { Kbd, KbdGroup };

package/dist/components/ui/kortix-asterisk.d.ts

@@ -0,0 +1,6 @@
+export declare const KORTIX_BULLET_GRADIENT = "linear-gradient(to bottom, var(--kortix-red), var(--kortix-green), var(--kortix-blue), var(--kortix-yellow), var(--kortix-purple), var(--kortix-red))";
+export declare function KortixAsterisk({ index, parentClass, variant, }: {
+    index: number;
+    parentClass?: string;
+    variant?: 'gradient' | 'solid';
+}): import("react").JSX.Element;

package/dist/components/ui/kortix-asterisk.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+export const KORTIX_BULLET_GRADIENT = 'linear-gradient(to bottom, var(--kortix-red), var(--kortix-green), var(--kortix-blue), var(--kortix-yellow), var(--kortix-purple), var(--kortix-red))';
+const ASTERISK_ARMS = [
+    { className: 'z-10' },
+    { className: 'z-20 rotate-90' },
+    { className: 'z-30 rotate-45' },
+    { className: 'z-40 -rotate-45' },
+];
+export function KortixAsterisk({ index, parentClass, variant = 'gradient', }) {
+    return (_jsx("div", { className: cn('relative mt-1 flex size-6 shrink-0 items-center justify-center', parentClass), children: ASTERISK_ARMS.map(({ className }, armIndex) => (_jsx("div", { className: cn('absolute h-3.5 w-px shrink-0 rounded-full', variant === 'gradient' && 'animate-kortix-bullet-flow bg-[length:100%_300%]', className), style: variant === 'gradient'
+                ? {
+                    backgroundImage: KORTIX_BULLET_GRADIENT,
+                    animationDelay: `${index * 0.4 + armIndex * 0.08}s`,
+                }
+                : { backgroundColor: 'var(--foreground)' } }, armIndex))) }));
+}

package/dist/components/ui/kortix-icons.d.ts

@@ -0,0 +1,2 @@
+export { PlusIcon as IconAdd, CpuIcon as IconAgent, WarningCircleIcon as IconAlert, AppWindowIcon as IconApp, ArrowUpRightIcon as IconArrowUpRight, ArrowLeftIcon as IconBack, CircleDashedIcon as IconBacklog, RobotIcon as IconBot, CalendarIcon as IconCalendar, XCircleIcon as IconCancelled, CheckIcon as IconCheck, CaretDownIcon as IconChevronDown, CaretLeftIcon as IconChevronLeft, CaretRightIcon as IconChevronRight, CaretUpIcon as IconChevronUp, CaretUpDownIcon as IconChevronsUpDown, ClockIcon as IconClock, XIcon as IconClose, CodeSimpleIcon as IconCode, ChatCircleIcon as IconComment, CopyIcon as IconCopy, TrashIcon as IconDelete, RocketIcon as IconDeploy, CheckCircleIcon as IconDone, PencilIcon as IconEdit, ArrowSquareOutIcon as IconExternal, WarningOctagonIcon as IconFailed, FileIcon as IconFile, FileTextIcon as IconFileText, FunnelIcon as IconFilter, FolderIcon as IconFolder, FolderOpenIcon as IconFolderOpen, ArrowRightIcon as IconForward, SquaresFourIcon as IconGrid, HashIcon as IconHash, RadioButtonIcon as IconInProgress, CircleDashedIcon as IconInReview, TrayIcon as IconInbox, InfoIcon as IconInfo, QuestionIcon as IconInfoNeeded, UserPlusIcon as IconInvite, LinkSimpleIcon as IconLink, ListIcon as IconList, EnvelopeIcon as IconMail, ListIcon as IconMenu, ChatIcon as IconMessage, MicrophoneIcon as IconMic, MicrophoneSlashIcon as IconMicOff, DotsThreeIcon as IconMore, DotsThreeVerticalIcon as IconMoreVertical, BellIcon as IconNotification, PauseIcon as IconPause, PhoneDisconnectIcon as IconPhoneOff, PlayIcon as IconPlay, GitBranchIcon as IconProject, ArrowClockwiseIcon as IconRefresh, MinusIcon as IconRemove, MagnifyingGlassIcon as IconSearch, PaperPlaneTiltIcon as IconSend, GearSixIcon as IconSettings, ArrowsDownUpIcon as IconSort, StarIcon as IconStar, SquareIcon as IconStop, TagIcon as IconTag, TerminalIcon as IconTerminal, CircleIcon as IconTodo, LightningIcon as IconTrigger, StarIcon as IconUnstar, UploadIcon as IconUpload, UserIcon as IconUser, UsersIcon as IconUsers, SpeakerHighIcon as IconVolume, WarningIcon as IconWarning, } from '@phosphor-icons/react';
+export type { Icon } from '@phosphor-icons/react';

package/dist/components/ui/kortix-icons.js

@@ -0,0 +1,17 @@
+export { 
+// ── CRUD & actions ──────────────────────────────────────────
+PlusIcon as IconAdd, CpuIcon as IconAgent, WarningCircleIcon as IconAlert, AppWindowIcon as IconApp, ArrowUpRightIcon as IconArrowUpRight, 
+// ── Navigation & layout ─────────────────────────────────────
+ArrowLeftIcon as IconBack, 
+// ── Status / lifecycle ──────────────────────────────────────
+CircleDashedIcon as IconBacklog, RobotIcon as IconBot, CalendarIcon as IconCalendar, XCircleIcon as IconCancelled, CheckIcon as IconCheck, CaretDownIcon as IconChevronDown, CaretLeftIcon as IconChevronLeft, CaretRightIcon as IconChevronRight, CaretUpIcon as IconChevronUp, CaretUpDownIcon as IconChevronsUpDown, 
+// ── Time & data ─────────────────────────────────────────────
+ClockIcon as IconClock, XIcon as IconClose, CodeSimpleIcon as IconCode, ChatCircleIcon as IconComment, CopyIcon as IconCopy, TrashIcon as IconDelete, RocketIcon as IconDeploy, CheckCircleIcon as IconDone, PencilIcon as IconEdit, ArrowSquareOutIcon as IconExternal, WarningOctagonIcon as IconFailed, FileIcon as IconFile, FileTextIcon as IconFileText, FunnelIcon as IconFilter, FolderIcon as IconFolder, FolderOpenIcon as IconFolderOpen, ArrowRightIcon as IconForward, SquaresFourIcon as IconGrid, HashIcon as IconHash, RadioButtonIcon as IconInProgress, CircleDashedIcon as IconInReview, TrayIcon as IconInbox, InfoIcon as IconInfo, QuestionIcon as IconInfoNeeded, UserPlusIcon as IconInvite, LinkSimpleIcon as IconLink, ListIcon as IconList, EnvelopeIcon as IconMail, ListIcon as IconMenu, ChatIcon as IconMessage, 
+// ── Voice / call ────────────────────────────────────────────
+MicrophoneIcon as IconMic, MicrophoneSlashIcon as IconMicOff, DotsThreeIcon as IconMore, DotsThreeVerticalIcon as IconMoreVertical, BellIcon as IconNotification, PauseIcon as IconPause, PhoneDisconnectIcon as IconPhoneOff, PlayIcon as IconPlay, 
+// ── Files & folders ─────────────────────────────────────────
+GitBranchIcon as IconProject, ArrowClockwiseIcon as IconRefresh, MinusIcon as IconRemove, MagnifyingGlassIcon as IconSearch, PaperPlaneTiltIcon as IconSend, GearSixIcon as IconSettings, ArrowsDownUpIcon as IconSort, StarIcon as IconStar, SquareIcon as IconStop, TagIcon as IconTag, TerminalIcon as IconTerminal, CircleIcon as IconTodo, LightningIcon as IconTrigger, 
+// phosphor has no star-slash glyph; IconUnstar (currently unused) reuses Star
+StarIcon as IconUnstar, UploadIcon as IconUpload, 
+// ── People & comms ──────────────────────────────────────────
+UserIcon as IconUser, UsersIcon as IconUsers, SpeakerHighIcon as IconVolume, WarningIcon as IconWarning, } from '@phosphor-icons/react';

package/dist/components/ui/kortix-loader.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+interface KortixLoaderProps {
+    /**
+     * Size preset for the loader
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Animation speed multiplier (affects spin duration)
+     * @default 1.2
+     */
+    speed?: number;
+    /**
+     * Custom size in pixels (overrides size preset)
+     */
+    customSize?: number;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Additional style for the container
+     */
+    style?: React.CSSProperties;
+    /**
+     * Whether the animation should autoPlay
+     * @default true
+     */
+    autoPlay?: boolean;
+    /**
+     * Whether the animation should loop
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Force a specific loader variant (overrides auto-detection)
+     * - 'white': White loader (for dark backgrounds)
+     * - 'black': Black loader (for light backgrounds)
+     * - 'auto': Auto-detect based on theme (default)
+     */
+    variant?: 'white' | 'black' | 'auto';
+    /**
+     * @deprecated Use 'variant' instead
+     */
+    forceTheme?: 'light' | 'dark';
+}
+/**
+ * KortixLoader - A unified circular loading animation component
+ *
+ * Uses a CSS-based circular spinner that adapts to light/dark themes.
+ *
+ * **Automatic Behavior:**
+ * - Light mode → Black loader (for white backgrounds)
+ * - Dark mode → White loader (for dark backgrounds)
+ *
+ * **Manual Override (for special cases):**
+ * Use the `variant` prop when the background doesn't match the theme.
+ * For example, a dark button in light mode needs `variant="white"`.
+ *
+ * @example
+ * ```tsx
+ * // Auto-themed (default)
+ * <KortixLoader />
+ *
+ * // Always white (for dark backgrounds in any theme)
+ * <KortixLoader variant="white" />
+ *
+ * // Always black (for light backgrounds in any theme)
+ * <KortixLoader variant="black" />
+ *
+ * // Custom size
+ * <KortixLoader size="large" />
+ * ```
+ */
+export declare function KortixLoader({ size, speed, customSize, className, style, autoPlay, loop, variant, forceTheme, }: KortixLoaderProps): React.JSX.Element;
+export {};

package/dist/components/ui/kortix-loader.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+const SIZE_MAP = {
+    small: 20,
+    medium: 24,
+    large: 32,
+    xlarge: 40,
+};
+/**
+ * KortixLoader - A unified circular loading animation component
+ *
+ * Uses a CSS-based circular spinner that adapts to light/dark themes.
+ *
+ * **Automatic Behavior:**
+ * - Light mode → Black loader (for white backgrounds)
+ * - Dark mode → White loader (for dark backgrounds)
+ *
+ * **Manual Override (for special cases):**
+ * Use the `variant` prop when the background doesn't match the theme.
+ * For example, a dark button in light mode needs `variant="white"`.
+ *
+ * @example
+ * ```tsx
+ * // Auto-themed (default)
+ * <KortixLoader />
+ *
+ * // Always white (for dark backgrounds in any theme)
+ * <KortixLoader variant="white" />
+ *
+ * // Always black (for light backgrounds in any theme)
+ * <KortixLoader variant="black" />
+ *
+ * // Custom size
+ * <KortixLoader size="large" />
+ * ```
+ */
+export function KortixLoader({ size = 'medium', speed = 1.2, customSize, className, style, autoPlay = true, loop = true, variant = 'auto', forceTheme, // deprecated, but kept for backwards compatibility
+ }) {
+    const loaderSize = customSize || SIZE_MAP[size];
+    // Explicit variant (or the deprecated forceTheme) pins the colors; otherwise
+    // the theme decides — via the `.dark` CSS class next-themes sets before first
+    // paint, so the loader renders on the server and hydrates without the old
+    // mounted-gate flicker (SSR used to paint an empty box for one frame).
+    let forcedVariant = null;
+    if (variant !== 'auto') {
+        forcedVariant = variant;
+    }
+    else if (forceTheme) {
+        forcedVariant = forceTheme === 'dark' ? 'white' : 'black';
+    }
+    // Calculate border width based on size (roughly 1/16 of the size, min 2px)
+    const borderWidth = Math.max(2, Math.round(loaderSize / 16));
+    // Calculate animation duration based on speed (lower = faster)
+    const animationDuration = 0.8 / speed;
+    return (_jsx("div", { className: cn('flex items-center justify-center', className), style: style, children: _jsx("div", { className: forcedVariant === null
+                ? 'border-[rgba(0,0,0,0.1)] border-t-[#000000] dark:border-[rgba(255,255,255,0.15)] dark:border-t-[#ffffff]'
+                : undefined, style: {
+                width: loaderSize,
+                height: loaderSize,
+                borderStyle: 'solid',
+                borderWidth,
+                ...(forcedVariant !== null && {
+                    borderColor: forcedVariant === 'white' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)',
+                    borderTopColor: forcedVariant === 'white' ? '#ffffff' : '#000000',
+                }),
+                borderRadius: '50%',
+                animation: autoPlay && loop
+                    ? `kortix-spin ${animationDuration}s linear infinite`
+                    : autoPlay
+                        ? `kortix-spin ${animationDuration}s linear`
+                        : 'none',
+            } }) }));
+}

package/dist/components/ui/kortix-logo.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type KortixLogoVariant = 'icon' | 'brandmark';
+interface KortixLogoProps extends Omit<ComponentPropsWithoutRef<'svg'>, 'width' | 'height' | 'viewBox'> {
+    /** Pixel height. The brandmark scales its width to match; the icon is square. */
+    size?: number;
+    /** `icon` = the Kortix symbol alone; `brandmark` = symbol + wordmark lockup. */
+    variant?: KortixLogoVariant;
+    className?: string;
+}
+/**
+ * The canonical Kortix logo. Renders in `currentColor` so it follows the
+ * surrounding text color (`text-foreground` in app surfaces).
+ *
+ * Organization branding: when the active account carries its own marks
+ * (`useUiBrand()`, which apps/web feeds from `useBranding()` — Enterprise
+ * `branding` entitlement), the matching slot
+ * renders that image instead: `brandmark` → `logo_url` (falling back to
+ * `icon_url` so a square-only brand still replaces the wordmark), `icon` →
+ * `icon_url`. Same box, same `size` semantics, so no call site changes.
+ * A dark-scheme variant (`*_dark_url`), when set, is rendered as a second
+ * `<img>` toggled by the theme class (`dark:` — the app theme is class-based,
+ * `next-themes attribute="class"`), so the swap is hydration-safe and needs
+ * no JS. Outside the provider — and for every unbranded account — this is
+ * Kortix, which renders in `currentColor` and needs no variant.
+ *
+ * `@/components/sidebar/kortix-logo` re-exports this under its legacy
+ * `symbol`/`logomark` variant names — new code should import from here.
+ */
+export declare function KortixLogo({ size, variant, className, style, ...props }: KortixLogoProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/kortix-logo.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { useUiBrand } from '../../providers/ui-provider.js';
+/**
+ * The canonical Kortix logo. Renders in `currentColor` so it follows the
+ * surrounding text color (`text-foreground` in app surfaces).
+ *
+ * Organization branding: when the active account carries its own marks
+ * (`useUiBrand()`, which apps/web feeds from `useBranding()` — Enterprise
+ * `branding` entitlement), the matching slot
+ * renders that image instead: `brandmark` → `logo_url` (falling back to
+ * `icon_url` so a square-only brand still replaces the wordmark), `icon` →
+ * `icon_url`. Same box, same `size` semantics, so no call site changes.
+ * A dark-scheme variant (`*_dark_url`), when set, is rendered as a second
+ * `<img>` toggled by the theme class (`dark:` — the app theme is class-based,
+ * `next-themes attribute="class"`), so the swap is hydration-safe and needs
+ * no JS. Outside the provider — and for every unbranded account — this is
+ * Kortix, which renders in `currentColor` and needs no variant.
+ *
+ * `@/components/sidebar/kortix-logo` re-exports this under its legacy
+ * `symbol`/`logomark` variant names — new code should import from here.
+ */
+export function KortixLogo({ size = 24, variant = 'brandmark', className, style, ...props }) {
+    const branding = useUiBrand();
+    // Light is the base; dark is an optional override. A square-only brand
+    // stands in for the wordmark, per scheme: a dark icon is a better dark
+    // brandmark than a light logo.
+    const lightSrc = variant === 'icon' ? branding?.icon_url : (branding?.logo_url ?? branding?.icon_url);
+    const darkSrc = variant === 'icon'
+        ? branding?.icon_dark_url
+        : (branding?.logo_dark_url ?? branding?.icon_dark_url);
+    if (lightSrc) {
+        const alt = branding?.app_name ?? 'Home';
+        const imgStyle = variant === 'icon'
+            ? { width: `${size}px`, height: `${size}px`, ...style }
+            : { height: `${size}px`, width: 'auto', maxWidth: `${size * 8}px`, ...style };
+        const imgProps = props;
+        return (_jsxs(_Fragment, { children: [_jsx("img", { src: lightSrc, alt: alt, draggable: false, className: cn('shrink-0 object-contain select-none', darkSrc && 'dark:hidden', className), style: imgStyle, ...imgProps }), darkSrc ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                _jsx("img", { src: darkSrc, alt: alt, draggable: false, className: cn('hidden shrink-0 object-contain select-none dark:block', className), style: imgStyle, ...imgProps })) : null] }));
+    }
+    if (variant === 'icon') {
+        return (_jsx("svg", { width: "30", height: "25", viewBox: "0 0 30 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn('shrink-0', className), style: { width: `${size}px`, height: `${size}px`, ...style }, ...props, children: _jsx("path", { d: "M25.56 24.916H29.83C29.83 19.63 26.94 15 22.62 12.46C26.94 9.91 29.83 5.29 29.83 0H25.56C25.56 5 21.89 9.19 17.07 10.17V0H12.8V10.17C7.95 9.2 4.3 5.02 4.3 0H0.04C0.04 5.29 2.93 9.91 7.25 12.46C2.93 15 0.04 19.63 0.04 24.916H4.3C4.3 19.9 7.95 15.71 12.8 14.75V24.92H17.07V14.75C21.91 15.71 25.56 19.9 25.56 24.916Z", fill: "currentColor" }) }));
+    }
+    return (_jsxs("svg", { width: "708", height: "142", viewBox: "0 0 708 142", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn('shrink-0', className), style: { height: `${size}px`, width: 'auto', ...style }, ...props, children: [_jsx("path", { d: "M139.522 139.53H162.84C162.84 109.932 147.046 84.02 123.427 69.77C147.046 55.52 162.839 29.61 162.839 0.01H139.522C139.522 28.02 119.455 51.45 93.08 56.94V0.01H69.76V56.94C43.26 51.54 23.32 28.1 23.32 0.01H0C0 29.61 15.79 55.52 39.41 69.77C15.79 84.02 0 109.932 0 139.53H23.32C23.32 111.434 43.26 87.996 69.76 82.6V139.556H93.08V82.598C119.579 88 139.522 111.434 139.522 139.53Z", fill: "currentColor" }), _jsx("path", { d: "M379.024 141.074C348.339 141.074 326.422 119.156 326.422 89.27C326.422 59.38 348.339 37.46 379.024 37.46C409.509 37.46 431.426 59.38 431.426 89.27C431.426 119.156 409.509 141.074 379.024 141.074ZM379.024 119.953C395.561 119.953 406.719 107.4 406.719 89.27C406.719 71.14 395.561 58.58 379.024 58.58C362.287 58.58 351.129 71.14 351.129 89.27C351.129 107.4 362.287 119.953 379.024 119.953Z", fill: "currentColor" }), _jsx("path", { d: "M500.433 59.58V39.06H492.199C475.462 39.06 441.988 49.1 441.988 89.27V139.48H466.496L467.243 89.27C467.243 70.14 472.673 59.58 488.214 59.58H500.433Z", fill: "currentColor" }), _jsx("path", { d: "M255.933 0H231.24V139.452H255.933V82.59C282.273 88.1 302.057 111.452 302.057 139.426H325.358C325.358 109.848 309.576 83.96 285.972 69.713C309.575 55.47 325.358 29.58 325.358 0H302.056C302.056 27.89 282.15 51.23 255.933 56.832V0Z", fill: "currentColor" }), _jsx("path", { d: "M509.742 8.77H534.25V39.06H568.298V59.58H534.25V103.415C534.25 113.577 539.629 118.758 548.795 118.758H568.298V139.48H546.006C524.088 139.48 509.742 126.728 509.742 104.412V8.77Z", fill: "currentColor" }), _jsx("path", { d: "M578.743 13.12C578.762 5.87 584.644 0 591.893 0C599.17 0 605.063 5.91 605.044 13.19L605.042 13.72C605.023 20.97 599.141 26.84 591.892 26.84C584.615 26.84 578.722 20.93 578.741 13.654L578.743 13.12ZM579.774 139.48V39.06H604.282V139.48H579.774Z", fill: "currentColor" }), _jsx("path", { d: "M638.582 139.42H616.248C616.248 118.788 626.473 100.544 642.133 89.479C626.474 78.41 616.249 60.17 616.249 39.54H638.583C638.583 55.39 648.093 69.02 661.718 75.03C675.342 69.02 684.852 55.39 684.852 39.54H707.187C707.187 60.17 696.961 78.41 681.302 89.479C696.962 100.544 707.188 118.788 707.188 139.42H684.853C684.853 123.571 675.343 109.943 661.718 103.93C648.092 109.943 638.582 123.571 638.582 139.42Z", fill: "currentColor" })] }));
+}

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

@@ -0,0 +1,4 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as React from 'react';
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+export { Label };

package/dist/components/ui/label.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../../lib/utils.js';
+function Label({ className, ...props }) {
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn('text-muted-foreground flex cursor-pointer items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-default peer-disabled:opacity-50', // cursor-default: disabled keeps the default cursor (AGENTS.md → States)
+        className), ...props }));
+}
+export { Label };

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/** @deprecated Use `<ul className="space-y-2">` rows inside a `Card`. */
+export declare function List({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
+export interface ListRowProps {
+    leading?: React.ReactNode;
+    title: React.ReactNode;
+    badges?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    trailing?: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+    compact?: boolean;
+}
+/** @deprecated Use `<ul className="space-y-2">` rows inside a `Card`. */
+export declare function ListRow({ leading, title, badges, subtitle, trailing, onClick, className, compact, }: ListRowProps): React.JSX.Element;

package/dist/components/ui/list.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/** @deprecated Use `<ul className="space-y-2">` rows inside a `Card`. */
+export function List({ className, ...props }) {
+    return _jsx("ul", { "data-slot": "list", className: cn('divide-border divide-y', className), ...props });
+}
+/** @deprecated Use `<ul className="space-y-2">` rows inside a `Card`. */
+export function ListRow({ leading, title, badges, subtitle, trailing, onClick, className, compact, }) {
+    const interactive = !!onClick;
+    return (_jsx("li", { children: _jsxs("div", { ...(interactive
+                ? {
+                    role: 'button',
+                    tabIndex: 0,
+                    onClick,
+                    onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            onClick?.();
+                        }
+                    },
+                }
+                : {}), className: cn('group flex items-center gap-3 px-6 py-3', interactive &&
+                'hover:bg-muted/40 focus-visible:bg-muted/40 cursor-pointer transition-colors focus-visible:outline-none', className), children: [leading ? _jsx("div", { className: "shrink-0", children: leading }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn('text-foreground truncate text-sm font-medium', compact && 'leading-none'), children: title }), badges] }), subtitle ? (_jsx("div", { className: cn(compact ? 'text-xs leading-none' : 'mt-0.5'), children: subtitle })) : null] }), trailing ? _jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: trailing }) : null] }) }));
+}

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

@@ -0,0 +1,19 @@
+/**
+ * How the spinner is drawn.
+ * - `orbit`  — the default: a track with a single arc that orbits and breathes.
+ * - `spokes` — the ticking radial spinner. Eight spokes on a fading ramp, the
+ *              whole wheel advancing one spoke at a time rather than sweeping
+ *              continuously. It holds up better than `orbit` at small sizes and
+ *              beside text, because there is no thin arc head to lose track of.
+ * - `ring`   — `orbit`'s motion on the shared status geometry (`STATUS_RING`): the
+ *              SAME circle the `pending` status icon draws, so a todo starting
+ *              work does not swap to a fatter, larger disc. Reach for it
+ *              wherever a spinner sits in a column beside static status glyphs;
+ *              `orbit` stays the default everywhere else.
+ */
+type LoadingVariant = 'orbit' | 'spokes' | 'ring';
+declare const Loading: ({ className, variant, }: {
+    className?: string;
+    variant?: LoadingVariant;
+}) => import("react").JSX.Element;
+export default Loading;

package/dist/components/ui/loading.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { STATUS_RING } from './status-ring.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * `spinner-dash` is written against the `orbit` circle: its keyframes step
+ * `stroke-dashoffset` through 58 → 14 → 58 against a hard-coded
+ * `stroke-dasharray: 62.83`, which is 2πr for orbit's r=10.
+ *
+ * `pathLength` is what lets a DIFFERENT circle reuse those numbers verbatim.
+ * It re-scales a path's own length to the value given, so declaring 62.83 on
+ * the r=6.3 ring (real circumference 39.58) makes every dash number in the CSS
+ * mean the same FRACTION of the ring it meant on orbit. Same breathing arc,
+ * same cadence, a third of the stroke weight — and no second keyframe block to
+ * keep in sync.
+ */
+const RING_PATH_LENGTH = 62.83;
+const SPOKE_COUNT = 8;
+/** Leading spoke is opaque, each one behind it a step fainter — that ramp IS
+ *  the direction cue. A uniform wheel would tick without appearing to turn. */
+const SPOKE_FADE_STEP = 0.1;
+const Loading = ({ className, variant = 'orbit', }) => {
+    const base = 'text-foreground in-[button]:text-background in-data-[slot=button]:text-background in-[button.bg-transparent]:text-foreground in-[[data-slot=button].bg-transparent]:text-foreground in-[button.bg-secondary]:text-foreground! in-[[data-slot=button].bg-secondary]:text-foreground! size-4';
+    if (variant === 'ring') {
+        return (_jsxs("svg", { className: cn(base, 'animate-spinner-orbit', className), viewBox: `0 0 ${STATUS_RING.BOX} ${STATUS_RING.BOX}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { className: "opacity-25", cx: STATUS_RING.CENTER, cy: STATUS_RING.CENTER, r: STATUS_RING.RADIUS, stroke: "currentColor", strokeWidth: STATUS_RING.STROKE, pathLength: RING_PATH_LENGTH }), _jsx("circle", { className: "animate-spinner-dash", cx: STATUS_RING.CENTER, cy: STATUS_RING.CENTER, r: STATUS_RING.RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STATUS_RING.STROKE, strokeLinecap: "round", pathLength: RING_PATH_LENGTH })] }));
+    }
+    if (variant === 'spokes') {
+        return (_jsx("svg", { className: cn(base, 'animate-spinner-spokes', className), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: Array.from({ length: SPOKE_COUNT }, (_, i) => (_jsx("line", { x1: "12", y1: "2.5", x2: "12", y2: "7.5", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: 1 - i * SPOKE_FADE_STEP, transform: `rotate(${(i * 360) / SPOKE_COUNT} 12 12)` }, i))) }));
+    }
+    return (_jsxs("svg", { className: cn(base, 'animate-spinner-orbit', className), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("circle", { className: "animate-spinner-dash", cx: "12", cy: "12", r: "10", fill: "none", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" })] }));
+};
+export default Loading;

package/dist/components/ui/local-time.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Formats an instant in an explicit, fixed timezone so the output is
+ * deterministic regardless of the runtime's default timezone. Used for the
+ * server-rendered fallback (we always render in UTC on the server).
+ *
+ * Exported for tests: this is the invariant that prevents React hydration
+ * mismatch #418 — the server-rendered text must not depend on `process.env.TZ`.
+ */
+export declare function formatInTimeZone(date: Date, options: Intl.DateTimeFormatOptions, timeZone: string): string;
+export interface LocalTimeProps {
+    /** The instant to render — an ISO string, epoch ms, or Date. */
+    value: string | number | Date;
+    /** Intl formatting options (weekday/month/day/hour/minute/…). */
+    options?: Intl.DateTimeFormatOptions;
+    /** Rendered (verbatim) when `value` can't be parsed into a valid date. */
+    fallback?: string;
+    className?: string;
+}
+/**
+ * Renders a date/time that is safe to server-render.
+ *
+ * `toLocaleString`/`toLocaleDateString` format using the runtime's *default*
+ * timezone. During SSR that's the server (UTC); in the browser it's the user's
+ * timezone — so the two produce different text for the same instant and React
+ * throws a hydration mismatch (minified error #418, e.g. for a release dated
+ * near midnight UTC, or any time-of-day on the maintenance page).
+ *
+ * This component sidesteps that the same way `SessionTimeLabel` does: it renders
+ * a **timezone-stable UTC string on the server**, and only switches to the
+ * viewer's local timezone *after mount* (in `useEffect`, which never runs on the
+ * server). `suppressHydrationWarning` covers the one intentional, post-hydration
+ * text swap on this single element.
+ */
+export declare function LocalTime({ value, options, fallback, className }: LocalTimeProps): import("react").JSX.Element | null;

package/dist/components/ui/local-time.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+/**
+ * Formats an instant in an explicit, fixed timezone so the output is
+ * deterministic regardless of the runtime's default timezone. Used for the
+ * server-rendered fallback (we always render in UTC on the server).
+ *
+ * Exported for tests: this is the invariant that prevents React hydration
+ * mismatch #418 — the server-rendered text must not depend on `process.env.TZ`.
+ */
+export function formatInTimeZone(date, options, timeZone) {
+    return new Intl.DateTimeFormat('en-US', { ...options, timeZone }).format(date);
+}
+const localFormatterCache = new Map();
+/**
+ * Renders a date/time that is safe to server-render.
+ *
+ * `toLocaleString`/`toLocaleDateString` format using the runtime's *default*
+ * timezone. During SSR that's the server (UTC); in the browser it's the user's
+ * timezone — so the two produce different text for the same instant and React
+ * throws a hydration mismatch (minified error #418, e.g. for a release dated
+ * near midnight UTC, or any time-of-day on the maintenance page).
+ *
+ * This component sidesteps that the same way `SessionTimeLabel` does: it renders
+ * a **timezone-stable UTC string on the server**, and only switches to the
+ * viewer's local timezone *after mount* (in `useEffect`, which never runs on the
+ * server). `suppressHydrationWarning` covers the one intentional, post-hydration
+ * text swap on this single element.
+ */
+export function LocalTime({ value, options, fallback, className }) {
+    const date = value instanceof Date ? value : new Date(value);
+    const isValid = !Number.isNaN(date.getTime());
+    const fmtOptions = options ?? {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    };
+    // Server + first client render: a stable UTC string (identical in both).
+    const serverText = isValid ? formatInTimeZone(date, fmtOptions, 'UTC') : '';
+    const [text, setText] = useState(serverText);
+    useEffect(() => {
+        if (!isValid)
+            return;
+        // After hydration, re-render in the viewer's own timezone/locale.
+        const cacheKey = JSON.stringify(fmtOptions);
+        let formatter = localFormatterCache.get(cacheKey);
+        if (!formatter) {
+            formatter = new Intl.DateTimeFormat('en-US', fmtOptions);
+            localFormatterCache.set(cacheKey, formatter);
+        }
+        setText(formatter.format(date));
+        // date / options are derived from props; stringify options for a stable dep.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [date.getTime(), JSON.stringify(fmtOptions), isValid]);
+    if (!isValid) {
+        return fallback !== undefined ? _jsx("span", { className: className, children: fallback }) : null;
+    }
+    return (_jsx("span", { className: className, suppressHydrationWarning: true, children: text }));
+}