@kortix/ui 0.0.0-stage → 0.14.3

package/dist/chat/streaming-markdown.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Pure helpers that keep half-streamed markdown readable. Ported from
+ * apps/web `features/session/turn/throttled-markdown.tsx`. The chat renderer
+ * has no generative UI fences, so `closeUnterminatedCodeFence` always closes.
+ */
+/**
+ * A fence opener still being written (`` ```openu ``) would render as an empty
+ * code card labelled with half a language. While streaming, hold back a last
+ * line that opens a fence until its newline arrives. A closing fence is never held.
+ */
+export declare function holdBackFenceOpener(text: string): string;
+/** Closes an unterminated code fence so the rest of the stream renders as markdown. */
+export declare function closeUnterminatedCodeFence(text: string): string;
+/**
+ * A table is plain text until its separator row (`|---|`) arrives. While
+ * streaming, a trailing header row (and a half-written separator) is held back
+ * until the separator is complete, so the table appears as a table.
+ */
+export declare function holdBackTableHeader(text: string): string;
+/** All three, in the order apps/web applies them to a streaming segment. */
+export declare function streamingMarkdown(text: string): string;

package/dist/chat/streaming-markdown.js

@@ -0,0 +1,59 @@
+/**
+ * Pure helpers that keep half-streamed markdown readable. Ported from
+ * apps/web `features/session/turn/throttled-markdown.tsx`. The chat renderer
+ * has no generative UI fences, so `closeUnterminatedCodeFence` always closes.
+ */
+/**
+ * A fence opener still being written (`` ```openu ``) would render as an empty
+ * code card labelled with half a language. While streaming, hold back a last
+ * line that opens a fence until its newline arrives. A closing fence is never held.
+ */
+export function holdBackFenceOpener(text) {
+    const start = text.lastIndexOf('\n') + 1;
+    if (!text.slice(start).trimStart().startsWith('```'))
+        return text;
+    const fencesBefore = text
+        .slice(0, start)
+        .split('\n')
+        .filter((line) => line.trimStart().startsWith('```')).length;
+    return fencesBefore % 2 === 0 ? text.slice(0, start) : text;
+}
+/** Closes an unterminated code fence so the rest of the stream renders as markdown. */
+export function closeUnterminatedCodeFence(text) {
+    if (!text)
+        return text;
+    const fences = text.split('\n').filter((line) => line.trimStart().startsWith('```')).length;
+    return fences % 2 === 0 ? text : `${text}\n\n\`\`\``;
+}
+/**
+ * A table is plain text until its separator row (`|---|`) arrives. While
+ * streaming, a trailing header row (and a half-written separator) is held back
+ * until the separator is complete, so the table appears as a table.
+ */
+export function holdBackTableHeader(text) {
+    if (!text.includes('|'))
+        return text;
+    const lines = text.split('\n');
+    let end = lines.length;
+    if (lines[end - 1]?.trim() === '')
+        end--;
+    const isRow = (line) => line?.trimStart().startsWith('|') ?? false;
+    const last = lines[end - 1];
+    if (!isRow(last))
+        return text;
+    // `| a | b |` with no table line above it: a header still waiting for its separator.
+    if (!isRow(lines[end - 2]))
+        return lines.slice(0, end - 1).join('\n');
+    // A separator still being written under a header that starts the table.
+    const cells = (line) => line.trim().replace(/^\||\|$/g, '').split('|').length;
+    const header = lines[end - 2];
+    const separatorDone = last.trim().endsWith('|') && cells(last) >= cells(header);
+    if (/^\s*\|[\s|:-]*$/.test(last) && !isRow(lines[end - 3]) && !separatorDone) {
+        return lines.slice(0, end - 2).join('\n');
+    }
+    return text;
+}
+/** All three, in the order apps/web applies them to a streaming segment. */
+export function streamingMarkdown(text) {
+    return closeUnterminatedCodeFence(holdBackFenceOpener(holdBackTableHeader(text)));
+}

package/dist/chat/tool-call.d.ts

@@ -0,0 +1,4 @@
+import { type ToolView } from '@kortix/sdk';
+export declare function ToolCall({ tool }: {
+    tool: ToolView;
+}): import("react").JSX.Element;

package/dist/chat/tool-call.js

@@ -0,0 +1,150 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One agent tool call as a collapsible card: a category icon, the tool title,
+ * a one-line summary, a live status glyph and, expanded, a body built from
+ * `toolViewModel` (web search, shell, file read/write/edit, grep/glob, task,
+ * todo, question, and a pretty-JSON `generic` fallback).
+ *
+ * Takes the normalized `ToolView` from `@kortix/sdk`: status is already
+ * 'pending' | 'running' | 'done' | 'error' (a router tool that reports
+ * `completed` around a failure body is `error`), and the icon comes from the
+ * `toolInfo` registry, not from sniffing the tool name.
+ */
+import { CaretRightIcon, CheckIcon, CheckSquareIcon, FileTextIcon, GlobeIcon, MagnifyingGlassIcon, PencilSimpleIcon, RobotIcon, TerminalWindowIcon, WarningCircleIcon, WrenchIcon, } from '@phosphor-icons/react';
+import { toolInfo, toolViewModel } from '@kortix/sdk';
+import { Badge } from '../components/ui/badge.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/ui/collapsible.js';
+import Loading from '../components/ui/loading.js';
+import { cn } from '../lib/utils.js';
+import { useUiStrings } from '../providers/ui-provider.js';
+const CATEGORY_ICON = {
+    shell: TerminalWindowIcon,
+    files: FileTextIcon,
+    edit: PencilSimpleIcon,
+    search: MagnifyingGlassIcon,
+    web: GlobeIcon,
+    task: RobotIcon,
+    other: WrenchIcon,
+};
+const PRE = 'bg-muted scrollbar-thin overflow-auto rounded-md p-2 font-mono text-xs leading-relaxed';
+function StatusGlyph({ status }) {
+    if (status === 'running' || status === 'pending')
+        return _jsx(Loading, { variant: "ring", className: "text-muted-foreground size-3.5 shrink-0" });
+    if (status === 'error')
+        return _jsx(WarningCircleIcon, { weight: "fill", className: "text-destructive size-3.5 shrink-0" });
+    return _jsx(CheckIcon, { className: "text-kortix-green size-3.5 shrink-0" });
+}
+/** One-line summary next to the title while collapsed. */
+function summaryFor(vm, t) {
+    switch (vm.kind) {
+        case 'web-search':
+            return vm.query;
+        case 'shell':
+            return vm.command;
+        case 'file-read':
+        case 'file-write':
+        case 'file-edit':
+            return vm.path;
+        case 'search':
+            return vm.pattern;
+        case 'task':
+            return vm.description;
+        case 'todo':
+            return vm.items.length > 0 ? t.todoItems(vm.items.length) : '';
+        case 'question':
+            return vm.questions[0]?.question ?? '';
+        case 'generic':
+            return '';
+    }
+}
+function OutputBlock({ text }) {
+    return _jsx("pre", { className: cn(PRE, 'text-foreground max-h-72'), children: text.slice(0, 6000) });
+}
+function PathLine({ path }) {
+    return path ? _jsx("div", { className: "text-muted-foreground truncate font-mono text-xs", children: path }) : null;
+}
+function WebSearchBody({ vm }) {
+    const t = useUiStrings().chat;
+    if (vm.error) {
+        return (_jsxs("div", { className: "bg-destructive/10 text-foreground flex items-start gap-2 rounded-md p-2 text-xs", children: [_jsx(WarningCircleIcon, { weight: "fill", className: "text-destructive mt-0.5 size-3.5 shrink-0" }), _jsx("span", { children: t.webSearchFailed(vm.error) })] }));
+    }
+    if (!vm.results || vm.results.length === 0) {
+        return _jsx("p", { className: "text-muted-foreground text-xs", children: t.noResults });
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [vm.answer && _jsx("p", { className: "text-foreground text-xs", children: vm.answer }), _jsx("ul", { className: "space-y-1.5", children: vm.results.map((r, i) => (_jsxs("li", { className: "min-w-0", children: [_jsx("a", { href: r.url, target: "_blank", rel: "noreferrer noopener", className: "text-foreground block truncate text-xs font-medium hover:underline", children: r.title || r.url }), _jsx("div", { className: "text-muted-foreground truncate text-xs", children: r.url }), r.snippet && _jsx("p", { className: "text-muted-foreground mt-0.5 line-clamp-2 text-xs", children: r.snippet })] }, `${r.url}-${i}`))) })] }));
+}
+function ShellBody({ vm }) {
+    return (_jsxs("div", { className: "space-y-2", children: [vm.command && _jsxs("pre", { className: cn(PRE, 'text-foreground'), children: ["$ ", vm.command] }), typeof vm.exitCode === 'number' && vm.exitCode !== 0 && (_jsxs(Badge, { variant: "destructive", children: ["exit ", vm.exitCode] })), vm.stdout && _jsx(OutputBlock, { text: vm.stdout })] }));
+}
+function FilePreviewBody({ path, preview }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(PathLine, { path: path }), preview && _jsx(OutputBlock, { text: preview })] }));
+}
+function FileEditBody({ vm }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(PathLine, { path: vm.path }), vm.diff && vm.diff.length > 0 ? (_jsx("pre", { className: cn(PRE, 'max-h-72'), children: vm.diff.slice(0, 400).map((line, i) => (_jsxs("div", { className: cn('whitespace-pre-wrap', line.type === 'added' && 'bg-kortix-green/15 text-foreground', line.type === 'removed' && 'bg-destructive/10 text-foreground', line.type === 'unchanged' && 'text-muted-foreground'), children: [line.type === 'added' ? '+ ' : line.type === 'removed' ? '- ' : '  ', line.text] }, i))) })) : null] }));
+}
+function SearchBody({ vm }) {
+    const t = useUiStrings().chat;
+    if (!vm.matches || vm.matches.length === 0) {
+        return _jsx("p", { className: "text-muted-foreground text-xs", children: t.noMatches });
+    }
+    return (_jsx("ul", { className: "text-foreground scrollbar-thin max-h-72 space-y-1 overflow-auto font-mono text-xs", children: vm.matches.map((m, i) => (_jsxs("li", { className: "truncate", children: [_jsx("span", { className: "text-muted-foreground", children: m.path }), typeof m.line === 'number' && _jsxs("span", { className: "text-muted-foreground", children: [":", m.line] }), m.content && _jsx("span", { className: "ml-1.5", children: m.content })] }, i))) }));
+}
+function TaskBody({ vm }) {
+    return (_jsxs("div", { className: "text-foreground flex flex-wrap items-center gap-1.5 text-xs", children: [_jsx("span", { children: vm.description }), vm.agent && _jsx(Badge, { variant: "secondary", children: vm.agent })] }));
+}
+function TodoBody({ vm }) {
+    if (vm.items.length === 0)
+        return null;
+    return (_jsx("ul", { className: "space-y-1", children: vm.items.map((item, i) => {
+            const done = item.status === 'completed';
+            return (_jsxs("li", { className: "flex items-start gap-2 text-xs", children: [_jsx(CheckSquareIcon, { weight: done ? 'fill' : undefined, className: cn('mt-0.5 size-3.5 shrink-0', done ? 'text-kortix-green' : 'text-muted-foreground') }), _jsx("span", { className: done ? 'text-muted-foreground line-through' : 'text-foreground', children: item.content })] }, i));
+        }) }));
+}
+function QuestionBody({ vm }) {
+    if (vm.questions.length === 0)
+        return null;
+    return (_jsx("div", { className: "space-y-2", children: vm.questions.map((q, i) => (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-foreground text-xs font-medium", children: q.question }), q.options.length > 0 && (_jsx("ul", { className: "text-muted-foreground list-disc space-y-0.5 pl-4 text-xs", children: q.options.map((o, oi) => (_jsx("li", { children: o.label }, oi))) }))] }, i))) }));
+}
+function GenericBody({ vm }) {
+    return (_jsxs("div", { className: "space-y-2", children: [vm.inputPretty && _jsx("pre", { className: cn(PRE, 'text-muted-foreground max-h-48'), children: vm.inputPretty }), vm.outputPretty && _jsx(OutputBlock, { text: vm.outputPretty })] }));
+}
+/** The expanded body, one branch per kind: a new kind fails typecheck here. */
+function ToolBody({ vm }) {
+    switch (vm.kind) {
+        case 'web-search':
+            return _jsx(WebSearchBody, { vm: vm });
+        case 'shell':
+            return _jsx(ShellBody, { vm: vm });
+        case 'file-read':
+        case 'file-write':
+            return _jsx(FilePreviewBody, { path: vm.path, preview: vm.preview });
+        case 'file-edit':
+            return _jsx(FileEditBody, { vm: vm });
+        case 'search':
+            return _jsx(SearchBody, { vm: vm });
+        case 'task':
+            return _jsx(TaskBody, { vm: vm });
+        case 'todo':
+            return _jsx(TodoBody, { vm: vm });
+        case 'question':
+            return _jsx(QuestionBody, { vm: vm });
+        case 'generic':
+            return _jsx(GenericBody, { vm: vm });
+        default: {
+            const exhaustive = vm;
+            return exhaustive;
+        }
+    }
+}
+export function ToolCall({ tool }) {
+    const Glyph = CATEGORY_ICON[toolInfo(tool.name).category] ?? WrenchIcon;
+    const t = useUiStrings().chat;
+    const vm = toolViewModel(tool);
+    const raw = summaryFor(vm, t);
+    // A title that already is the summary (a shell call titled by its command) prints once.
+    const summary = raw.trim() === tool.title.trim() ? '' : raw;
+    const isError = tool.status === 'error';
+    const hasDetail = vm.kind !== 'generic' || !!vm.inputPretty || !!vm.outputPretty || !!summary;
+    return (_jsxs(Collapsible, { "data-slot": "tool-call", "data-tool-status": tool.status, className: cn('rounded-md border', isError ? 'border-destructive/30 bg-destructive/5' : 'border-border bg-card'), children: [_jsxs(CollapsibleTrigger, { disabled: !hasDetail, className: "group flex w-full items-center gap-2 px-2.5 py-2 text-left disabled:cursor-default", children: [_jsx(Glyph, { className: cn('size-3.5 shrink-0', isError ? 'text-destructive' : 'text-muted-foreground') }), _jsx("span", { className: "text-foreground min-w-0 truncate text-xs font-medium", children: tool.title }), summary && _jsx("span", { className: "text-muted-foreground min-w-0 flex-1 truncate font-mono text-xs", children: summary }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [_jsx(StatusGlyph, { status: tool.status }), hasDetail && (_jsx(CaretRightIcon, { className: "text-muted-foreground size-3.5 transition-transform group-data-[state=open]:rotate-90 motion-reduce:transition-none" }))] })] }), hasDetail && (_jsx(CollapsibleContent, { children: _jsx("div", { className: "border-border border-t px-2.5 py-2", children: _jsx(ToolBody, { vm: vm }) }) }))] }));
+}

package/dist/chat/user-message-parts.d.ts

@@ -0,0 +1,6 @@
+import type { ClassifiedPart } from '@kortix/sdk';
+/** Keep user text plain; render every other part with the transcript renderers. */
+export declare function userMessageParts(parts: readonly ClassifiedPart[]): {
+    text: string;
+    parts: (import("@kortix/sdk").ClassifiedReasoningPart | import("@kortix/sdk").ClassifiedToolPart | import("@kortix/sdk").ClassifiedFilePart | import("@kortix/sdk").ClassifiedSubtaskPart | import("@kortix/sdk").ClassifiedPatchPart | import("@kortix/sdk").ClassifiedSnapshotPart | import("@kortix/sdk").ClassifiedAgentPart | import("@kortix/sdk").ClassifiedRetryPart | import("@kortix/sdk").ClassifiedCompactionPart | import("@kortix/sdk").ClassifiedStepPart | import("@kortix/sdk").ClassifiedUnknownPart)[];
+};

package/dist/chat/user-message-parts.js

@@ -0,0 +1,11 @@
+/** Keep user text plain; render every other part with the transcript renderers. */
+export function userMessageParts(parts) {
+    return {
+        text: parts
+            .filter((part) => part.kind === 'text')
+            .map((part) => part.text)
+            .join('\n')
+            .trim(),
+        parts: parts.filter((part) => part.kind !== 'text'),
+    };
+}

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

@@ -0,0 +1,7 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/ui/accordion.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretDownIcon as ChevronDownIcon } from '@phosphor-icons/react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { cn } from '../../lib/utils.js';
+function Accordion({ ...props }) {
+    return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+    return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn('border-b last:border-b-0', className), ...props }));
+}
+function AccordionTrigger({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-2xl py-4 text-left text-sm font-medium transition-colors outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })] }) }));
+}
+function AccordionContent({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn('pt-0 pb-4', className), children: children }) }));
+}
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,19 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+import { ButtonProps } from './button.js';
+declare function AlertDialog({ children, open, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, style, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+declare function AlertDialogContent({ className, style, overlayClassName, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+    overlayClassName?: string;
+}): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & {
+    variant?: ButtonProps['variant'];
+}): React.JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { buttonVariants } from './button.js';
+import { cn } from '../../lib/utils.js';
+import { DialogDepthProvider, dialogContentZ, dialogOverlayZ, useDialogDepth, useDialogRootLayer, } from '../../lib/z-stack.js';
+// Depth follows the runtime layer stack, so an alert stacks above whatever is
+// open even when it is rendered as a sibling. Still prefer rendering an alert
+// that confirms for a dialog INSIDE that dialog's React tree: React events from
+// the alert then bubble through the dialog, so the dialog's own outside-click
+// and focus handlers never see the alert as "outside".
+function AlertDialog({ children, open, defaultOpen, onOpenChange, ...props }) {
+    const layer = useDialogRootLayer({ open, defaultOpen, onOpenChange });
+    return (_jsx(DialogDepthProvider, { depth: layer.depth, children: _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props, open: layer.open, onOpenChange: layer.onOpenChange, children: children }) }));
+}
+function AlertDialogTrigger({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({ className, style, ...props }) {
+    const depth = useDialogDepth();
+    return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-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 bg-black/65 backdrop-blur-xs', className), style: { zIndex: dialogOverlayZ(depth), ...style }, ...props }));
+}
+function AlertDialogContent({ className, style, overlayClassName, ...props }) {
+    const depth = useDialogDepth();
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, { className: overlayClassName }), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn('bg-sidebar border-muted/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 space-y-5 rounded-xl border p-5 shadow-lg duration-200 sm:max-w-md', className), style: { zIndex: dialogContentZ(depth), ...style }, ...props })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn('text-lg font-medium', className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn('text-muted-foreground text-[0.9rem] leading-snug', className), ...props }));
+}
+function AlertDialogAction({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Action, { className: cn(buttonVariants({ size: 'sm', variant: props.variant }), className), ...props }));
+}
+function AlertDialogCancel({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Cancel, { className: cn(buttonVariants({ variant: 'outline-ghost', size: 'sm' }), className), ...props }));
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

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

@@ -0,0 +1,13 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Replaces the variant's glyph. Only for a state the glyph cannot say (a spinner while loading). */
+declare function AlertMedia({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertActions({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function Alert({ className, variant, children, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): React.JSX.Element;
+export { Alert, AlertActions, AlertContent, AlertDescription, AlertMedia, AlertTitle };

package/dist/components/ui/alert.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon, InfoIcon, WarningCircleIcon, WarningIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+// The genui Callout, exactly (features/genui/components/inline.tsx, Paper Callout 14): the tone is the
+// /15 fill and the solid 16px glyph; title and body stay ink. Tone type on a tone fill read ~2:1
+// (Marko, 2026-09-03), so text never takes the hue.
+const alertVariants = cva('flex w-full gap-2.5 rounded-lg px-3.5 py-2.5', {
+    variants: {
+        variant: {
+            default: 'bg-kortix-blue/15',
+            success: 'bg-kortix-green/15',
+            warning: 'bg-kortix-orange/15',
+            destructive: 'bg-kortix-red/15',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+const ALERT_GLYPH = {
+    default: { icon: InfoIcon, className: 'text-kortix-blue' },
+    success: { icon: CheckCircleIcon, className: 'text-kortix-green' },
+    warning: { icon: WarningIcon, className: 'text-kortix-orange' },
+    destructive: { icon: WarningCircleIcon, className: 'text-kortix-red' },
+};
+/** Replaces the variant's glyph. Only for a state the glyph cannot say (a spinner while loading). */
+function AlertMedia({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-media", className: cn(
+        // mt-0.5 centers a 16px glyph on the first 20px line, of the title or of the body.
+        'mt-0.5 flex shrink-0 self-start [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', className), ...props }));
+}
+function AlertContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-content", className: cn('flex min-w-0 flex-1 flex-col text-sm', className), ...props }));
+}
+function AlertTitle({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "alert-title", className: cn('text-foreground font-[550]', className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "item-description", className: cn('text-foreground text-pretty', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
+}
+function AlertActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-actions", className: cn('flex shrink-0 items-center gap-2 self-center', className), ...props }));
+}
+function partitionAlertChildren(children) {
+    const mediaChildren = [];
+    const contentChildren = [];
+    const actionChildren = [];
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.type === AlertMedia)
+            mediaChildren.push(child);
+        else if (React.isValidElement(child) && child.type === AlertActions)
+            actionChildren.push(child);
+        else if (child != null)
+            contentChildren.push(child);
+    });
+    const hasContentWrapper = contentChildren.some((child) => React.isValidElement(child) && child.type === AlertContent);
+    return { mediaChildren, contentChildren, actionChildren, hasContentWrapper };
+}
+function Alert({ className, variant, children, ...props }) {
+    const { mediaChildren, contentChildren, actionChildren, hasContentWrapper } = partitionAlertChildren(children);
+    const glyph = ALERT_GLYPH[variant ?? 'default'];
+    return (_jsxs("div", { role: "alert", "data-slot": "alert", className: cn(alertVariants({ variant }), className), ...props, children: [mediaChildren.length > 0 ? (mediaChildren) : (_jsx(glyph.icon, { "data-slot": "alert-glyph", className: cn('mt-0.5 size-4 shrink-0', glyph.className), weight: "fill", "aria-hidden": true })), contentChildren.length > 0 &&
+                (hasContentWrapper ? contentChildren : _jsx(AlertContent, { children: contentChildren })), actionChildren] }));
+}
+export { Alert, AlertActions, AlertContent, AlertDescription, AlertMedia, AlertTitle };

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

@@ -0,0 +1,11 @@
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: 'default' | 'sm' | 'lg';
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/components/ui/avatar.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+import { cn } from '../../lib/utils.js';
+function Avatar({ className, size = 'default', ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn('group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-sm select-none data-[size=lg]:size-10 data-[size=sm]:size-6', className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full', className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('bg-muted text-muted-foreground flex size-full items-center justify-center rounded-sm text-sm group-data-[size=sm]/avatar:text-xs', className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn('bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none', 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden', 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2', 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2', className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn('group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2', className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn('bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-sm text-sm font-medium ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3', className), ...props }));
+}
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/components/ui/back-pill.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The top-left way out of a full-screen surface (settings, account hub, /new):
+ * a rounded-full ghost pill with a chevron and a label; it fills with
+ * `bg-secondary` on hover. Below `sm` it is the chevron
+ * alone in a round 28px button; the label stays as its accessible name.
+ *
+ * Use on `<Button variant="ghost" size="xs" className={backPillClass()}>`
+ * with `<BackPillBody label=… />` as its content (or inside its `asChild` link).
+ */
+export declare function backPillClass(className?: string): string;
+export declare function BackPillBody({ label }: {
+    label: string;
+}): import("react").JSX.Element;

package/dist/components/ui/back-pill.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretLeftIcon } from '@phosphor-icons/react';
+import { cn } from '../../lib/utils.js';
+/**
+ * The top-left way out of a full-screen surface (settings, account hub, /new):
+ * a rounded-full ghost pill with a chevron and a label; it fills with
+ * `bg-secondary` on hover. Below `sm` it is the chevron
+ * alone in a round 28px button; the label stays as its accessible name.
+ *
+ * Use on `<Button variant="ghost" size="xs" className={backPillClass()}>`
+ * with `<BackPillBody label=… />` as its content (or inside its `asChild` link).
+ */
+export function backPillClass(className) {
+    return cn('hover:bg-secondary shrink-0 gap-1 rounded-full has-[>svg]:pr-3 has-[>svg]:pl-2', 'max-sm:size-7 max-sm:justify-center max-sm:has-[>svg]:px-0', className);
+}
+export function BackPillBody({ label }) {
+    return (_jsxs(_Fragment, { children: [_jsx(CaretLeftIcon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), _jsx("span", { className: "max-sm:sr-only", children: label })] }));
+}

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

@@ -0,0 +1,10 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "accent" | "muted" | "transparent" | "success" | "info" | "warning" | "solid" | "badgeSuccess" | "update" | "kortix" | "new" | "beta" | "highlight" | null | undefined;
+    size?: "default" | "xs" | "sm" | "tabular" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, size, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+const badgeVariants = cva('inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-[5px] px-1.5 py-[0.1rem] font-mono text-[0.8rem] font-medium tracking-tight [overflow-wrap:anywhere] has-[>svg]:gap-0.5 has-[>[data-slot=status-dot]]:gap-1 [&>svg]:block [&>svg]:!size-[0.75em] [&>svg]:shrink-0 [&>svg]:pointer-events-none [&>[data-slot=status-dot]]:shrink-0 [&>[data-slot=status-dot]]:!size-[0.45em] uppercase', {
+    variants: {
+        variant: {
+            solid: 'bg-foreground/15 text-foreground ring-1 ring-inset ring-foreground/15',
+            default: 'bg-foreground/10 text-foreground ring-1 ring-inset ring-foreground/10',
+            secondary: 'bg-secondary/80 text-secondary-foreground ring-1 ring-inset ring-border/60 normal-case',
+            accent: 'bg-foreground/5 text-foreground ring-1 ring-inset ring-foreground/5',
+            destructive: 'bg-destructive/10 text-destructive ring-1 ring-inset ring-destructive/10',
+            success: 'bg-kortix-green/15 text-foreground ring-1 ring-inset ring-kortix-green/15 [&>svg]:text-kortix-green',
+            badgeSuccess: 'bg-kortix-green/15 text-foreground ring-1 ring-inset ring-kortix-green/15 [&>svg]:text-kortix-green',
+            update: 'bg-kortix-orange/15 text-foreground ring-1 ring-inset ring-kortix-orange/15 [&>svg]:text-kortix-orange',
+            kortix: 'bg-foreground/10 text-foreground ring-1 ring-inset ring-foreground/10',
+            warning: 'bg-kortix-orange/15 text-foreground ring-1 ring-inset ring-kortix-orange/15 [&>svg]:text-kortix-orange',
+            outline: 'bg-transparent text-foreground ring-1 ring-inset ring-border normal-case',
+            new: 'bg-primary/10 text-primary ring-1 ring-inset ring-primary/10',
+            beta: 'bg-primary/10 text-primary ring-1 ring-inset ring-primary/10',
+            highlight: 'bg-primary/10 text-primary ring-1 ring-inset ring-primary/10',
+            info: 'bg-kortix-blue/15 text-foreground ring-1 ring-inset ring-kortix-blue/15 normal-case [&>svg]:text-kortix-blue',
+            muted: 'bg-muted/50 text-muted-foreground ring-1 ring-inset ring-muted/50 normal-case',
+            transparent: 'bg-transparent text-foreground ring-0 normal-case',
+        },
+        size: {
+            default: 'px-1.5',
+            sm: '',
+            xs: '',
+            tabular: 'min-w-5 gap-0 px-1 tabular-nums tracking-normal',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'xs',
+    },
+});
+function Badge({ className, variant = 'solid', size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'span';
+    return (_jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant, size }), className), ...props }));
+}
+export { Badge, badgeVariants };

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+declare function Breadcrumb({ ...props }: React.ComponentProps<'nav'>): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };

package/dist/components/ui/breadcrumb.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DotsThreeIcon as MoreHorizontal } from '@phosphor-icons/react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../../lib/utils.js';
+import { LineVerticalIcon as HiOutlineSlash } from '@phosphor-icons/react';
+function Breadcrumb({ ...props }) {
+    return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5', className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn('inline-flex items-center gap-1.5', className), ...props }));
+}
+function BreadcrumbLink({ asChild, className, ...props }) {
+    const Comp = asChild ? Slot : 'a';
+    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn('hover:text-foreground cursor-pointer transition-colors', className), ...props }));
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('text-foreground font-normal', className), ...props }));
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn('[&>svg]:size-3.5', className), ...props, children: children ?? _jsx(HiOutlineSlash, {}) }));
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn('flex size-9 items-center justify-center', className), ...props, children: [_jsx(MoreHorizontal, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+}
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };