@kortix/ui 0.0.0-stage → 0.14.3

package/dist/components/ui/text-shimmer.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import React from 'react';
+/**
+ * The sweep, as native CSS `@keyframes` rather than a per-frame Motion
+ * (`motion/react`) animation.
+ *
+ * `backgroundPosition` is not compositor-animatable — every frame forces a
+ * style recalc and a `bg-clip-text` repaint either way, JS-driven or not.
+ * The cost this removes is the JS side of it: the old version drove the
+ * sweep with `animate={{ backgroundPosition }}` + `repeat: Infinity`, which
+ * is a `requestAnimationFrame` loop running Motion's interpolation and a
+ * React-visible style write on every single frame, for as long as the
+ * shimmer stays mounted. A running burst mounts several at once (the
+ * summary line, every running group row, every live "Thinking" row, the
+ * chat's own busy line) — that is several rAF loops competing with the
+ * turn's own SSE-driven re-renders for the same main-thread frame budget,
+ * forever, while nothing about the text is even changing.
+ *
+ * A CSS animation is scheduled by the browser's style/animation engine, not
+ * by application JS: no rAF callback, no Motion interpolation, no
+ * React-visible write, on every frame this component is visible. Steady
+ * state (nothing streaming, a burst just sitting open) goes from N
+ * `requestAnimationFrame` callbacks per shimmer per frame to zero JS.
+ *
+ * `kx-shimmer-sweep-hold` reproduces the old `repeatDelay: 0.5` pause
+ * between loops (infinite case) as an 80/20 split of the animation's own
+ * duration — the sweep finishes at the 80% mark, then holds until 100%.
+ * Driving `animation-duration` at `duration / 0.8` puts the sweep itself at
+ * exactly `duration` seconds (80% of `duration / 0.8` is `duration`), and
+ * the hold scales proportionally with it (`duration * 0.25`). For the
+ * default `duration={2}` every caller but two uses, that hold is 0.5s —
+ * an exact match. CSS keyframe percentages cannot express a duration-
+ * independent flat 0.5s without a separate stylesheet per `duration` value,
+ * and a hold that scales with sweep speed reads the same as a fixed one at
+ * the 1s/2.2s durations this component is actually called with.
+ * `kx-shimmer-sweep` (no hold) backs the finite-`repeat` case, matching the
+ * old transition's `repeatDelay: 0` there.
+ *
+ * These keyframes are scoped to this file via an inline `<style>` — the
+ * same technique `components/ui/chart.tsx` already uses for component-local
+ * CSS — because `globals.css` is out of scope for this change and this
+ * codebase has no CSS Modules precedent (`bun test` has no loader for
+ * `.css` imports, so a `.module.css` file would break every test that
+ * imports this component). The tag is a static string, so every instance
+ * renders the identical bytes; the DOM tolerates duplicate `<style>`
+ * content fine, and it costs a one-time parse per mount, not a per-frame
+ * cost — nothing like the loop it replaces.
+ */
+const SHIMMER_STYLE = `
+@keyframes kx-shimmer-sweep {
+  from { background-position: 100% center; }
+  to { background-position: 0% center; }
+}
+@keyframes kx-shimmer-sweep-hold {
+  0% { background-position: 100% center; }
+  80% { background-position: 0% center; }
+  100% { background-position: 0% center; }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-kx-text-shimmer] {
+    animation: none !important;
+    background-image: none !important;
+    color: var(--base-color) !important;
+    -webkit-text-fill-color: var(--base-color) !important;
+  }
+}
+`;
+function TextShimmerComponent({ children, as: Component = 'span', className, duration = 2, spread = 2, repeat = Infinity, }) {
+    const dynamicSpread = children.length * spread;
+    const infinite = repeat === Infinity;
+    // `React.ElementType` resolves too broadly for JSX to infer a concrete
+    // props type from (TS collapses `children`/`style` to `never`) — the old
+    // code sidestepped this by handing `Component` to `m.create`, which returns
+    // a properly-typed Motion component. There is no Motion component to ask
+    // for that anymore, so the tag itself is cast to accept the fixed, known
+    // set of props this file actually passes it.
+    const Tag = Component;
+    return (_jsxs(Tag, { "data-kx-text-shimmer": "", className: cn('relative inline-block bg-[length:250%_100%,auto] bg-clip-text', 'text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]', '[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]', 'text-sm dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]', className), style: {
+            '--spread': `${dynamicSpread}px`,
+            backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
+            backgroundPosition: '100% center',
+            animationName: infinite ? 'kx-shimmer-sweep-hold' : 'kx-shimmer-sweep',
+            animationDuration: `${infinite ? duration / 0.8 : duration}s`,
+            animationTimingFunction: 'linear',
+            animationIterationCount: infinite ? 'infinite' : repeat,
+            animationFillMode: infinite ? 'none' : 'forwards',
+        }, children: [children, _jsx("style", { children: SHIMMER_STYLE })] }));
+}
+export const TextShimmer = React.memo(TextShimmerComponent);

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+interface UseAutosizeTextAreaProps {
+    textAreaRef: React.MutableRefObject<HTMLTextAreaElement | null>;
+    minHeight?: number;
+    maxHeight?: number;
+    triggerAutoSize: string;
+}
+export declare const useAutosizeTextArea: ({ textAreaRef, triggerAutoSize, maxHeight, minHeight, }: UseAutosizeTextAreaProps) => void;
+export type AutosizeTextAreaRef = {
+    textArea: HTMLTextAreaElement;
+    maxHeight: number;
+    minHeight: number;
+    focus: () => void;
+};
+export type AutosizeTextAreaProps = {
+    maxHeight?: number;
+    minHeight?: number;
+    /**
+     * @deprecated Every textarea renders the same surface as `Input`. Kept so
+     * existing callers compile; the value is ignored.
+     */
+    variant?: 'default' | 'secondary' | 'outline' | 'accent';
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare const Textarea: React.ForwardRefExoticComponent<{
+    maxHeight?: number;
+    minHeight?: number;
+    /**
+     * @deprecated Every textarea renders the same surface as `Input`. Kept so
+     * existing callers compile; the value is ignored.
+     */
+    variant?: "default" | "secondary" | "outline" | "accent";
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<AutosizeTextAreaRef>>;
+export {};

package/dist/components/ui/textarea.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { inputFocusClasses, inputInvalidClasses, inputSurfaceClasses, inputTransitionClasses, } from './input.js';
+import { cn } from '../../lib/utils.js';
+import * as React from 'react';
+import { useImperativeHandle } from 'react';
+export const useAutosizeTextArea = ({ textAreaRef, triggerAutoSize, maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 0, }) => {
+    const [init, setInit] = React.useState(true);
+    const [currentHeight, setCurrentHeight] = React.useState(minHeight);
+    const previousContentRef = React.useRef(triggerAutoSize);
+    const resizeTimeoutRef = React.useRef(null);
+    React.useEffect(() => {
+        const offsetBorder = 6;
+        const textAreaElement = textAreaRef.current;
+        if (!textAreaElement)
+            return;
+        if (init) {
+            textAreaElement.style.minHeight = `${minHeight + offsetBorder}px`;
+            if (maxHeight > minHeight) {
+                textAreaElement.style.maxHeight = `${maxHeight}px`;
+            }
+            setInit(false);
+        }
+        if (resizeTimeoutRef.current) {
+            clearTimeout(resizeTimeoutRef.current);
+        }
+        resizeTimeoutRef.current = setTimeout(() => {
+            const contentLengthChanged = Math.abs(previousContentRef.current.length - triggerAutoSize.length) > 5;
+            const contentIsEmpty = triggerAutoSize.trim() === '';
+            if (!contentLengthChanged && !contentIsEmpty && !init) {
+                return;
+            }
+            const scrollTop = textAreaElement.scrollTop;
+            textAreaElement.style.height = `${minHeight + offsetBorder}px`;
+            const isEmpty = triggerAutoSize.trim() === '';
+            const scrollHeight = textAreaElement.scrollHeight;
+            let newHeight;
+            if (isEmpty) {
+                newHeight = minHeight + offsetBorder;
+            }
+            else if (scrollHeight > maxHeight) {
+                newHeight = maxHeight;
+            }
+            else {
+                newHeight = scrollHeight + offsetBorder;
+            }
+            if (Math.abs(newHeight - currentHeight) > 10) {
+                textAreaElement.style.height = `${newHeight}px`;
+                setCurrentHeight(newHeight);
+            }
+            else {
+                textAreaElement.style.height = `${currentHeight}px`;
+            }
+            textAreaElement.scrollTop = scrollTop;
+            previousContentRef.current = triggerAutoSize;
+        }, 100);
+        return () => {
+            if (resizeTimeoutRef.current) {
+                clearTimeout(resizeTimeoutRef.current);
+            }
+        };
+    }, [textAreaRef.current, triggerAutoSize, minHeight, maxHeight, currentHeight, init]);
+};
+export const Textarea = React.forwardRef(({ maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 52, className, onChange, value, variant: _variant, ...props }, ref) => {
+    const textAreaRef = React.useRef(null);
+    const [triggerAutoSize, setTriggerAutoSize] = React.useState('');
+    useAutosizeTextArea({
+        textAreaRef,
+        triggerAutoSize: triggerAutoSize,
+        maxHeight,
+        minHeight,
+    });
+    useImperativeHandle(ref, () => ({
+        textArea: textAreaRef.current,
+        focus: () => textAreaRef?.current?.focus(),
+        maxHeight,
+        minHeight,
+    }));
+    React.useEffect(() => {
+        setTriggerAutoSize(value || '');
+    }, [props?.defaultValue, value]);
+    return (_jsx("textarea", { ...props, value: value, ref: textAreaRef, className: cn(inputSurfaceClasses, inputFocusClasses, inputInvalidClasses, inputTransitionClasses, 'text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex w-full resize-none px-3 py-2 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50', className), onChange: (e) => {
+            setTriggerAutoSize(e.target.value);
+            onChange?.(e);
+        } }));
+});
+Textarea.displayName = 'Textarea';

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

@@ -0,0 +1,105 @@
+import * as React from 'react';
+/** The toast host. Mount it once at the app root; every toast below renders into it. */
+export { Toaster } from 'sonner';
+/** A text-link action under the toast body. A click dismisses the toast first. */
+export type ToastAction = {
+    label: string;
+    onClick: () => void;
+};
+type ToastOptions = {
+    description?: string;
+    duration?: number;
+    id?: string | number;
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'top-center' | 'bottom-center';
+    /** Text links under the body, joined by a dot. */
+    actions?: ToastAction[];
+    /**
+     * The thing the toast is about. Its name is the line under the title; its
+     * icon (a trigger's clock, say) becomes the leading tile, with the status
+     * glyph as a badge on its corner.
+     */
+    entity?: {
+        icon?: React.ReactNode;
+        label: string;
+    };
+    /** Muted text after the actions, on the same line. */
+    meta?: string;
+    /** One line, no close button, as wide as its text. For "Copied"-style confirmations. */
+    compact?: boolean;
+    /** Legacy: a free-form node under the body. Prefer `actions`. */
+    button?: React.ReactNode;
+};
+type LoadingToastOptions<T = unknown> = ToastOptions & {
+    success?: string | ((data: T) => string);
+    error?: string | ((error: unknown) => string);
+    showErrorToast?: boolean;
+};
+export type ToastVariant = 'success' | 'progress' | 'error' | 'info' | 'warning';
+/** The leading glyph of each variant. `loadingToast` uses `progress`. */
+export declare const toastIcon: (variant: ToastVariant) => React.ReactNode;
+/** The small muted × every dismissible toast carries. */
+export declare function ToastClose({ onDismiss, className }: {
+    onDismiss: () => void;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Where the badge's colour reaches on the icon. Paper board "04 · Badge glow",
+ * V1 rim reflection, pushed further on request: the colour holds solid to
+ * 7.2px from the badge's centre and fades out by 16px, so it climbs the
+ * clock's right side and runs along its bottom. Centred on the badge: an 11px badge at -right-0.75 /
+ * -bottom-0.75 sits on the icon's diagonal at 85% / 85%, the board's 18.5/24.
+ * The badge is 0.72x the clock's radius, as on the board, so it leaves the
+ * rim it lights visible.
+ */
+export declare const REFLECTION_MASK = "radial-gradient(circle 16px at 85% 85%, #000 45%, transparent 100%)";
+/**
+ * The toast card itself. `renderToast` mounts it through sonner; the session
+ * notifications mount it through `customToast`.
+ */
+export declare function ToastCard({ message, icon, variant, options, onDismiss, }: {
+    message: string;
+    icon: React.ReactNode;
+    /** The status, for the colour an entity icon reflects from its badge. */
+    variant?: ToastVariant;
+    options?: Pick<ToastOptions, 'description' | 'button' | 'actions' | 'entity' | 'meta' | 'compact'>;
+    onDismiss: () => void;
+}): React.JSX.Element;
+export declare const successToast: (message: string, options?: ToastOptions) => void;
+/** Show or update a loading toast; pass `id` to update an existing toast in place. */
+export declare const progressToast: (message: string, options?: ToastOptions) => string | number;
+export declare const loadingToast: <T>(message: string, promiseInput: Promise<T> | (() => Promise<T>), options?: LoadingToastOptions<T>) => Promise<T>;
+/**
+ * Sets the host's rule for error messages that `errorToast` drops without a
+ * toast (apps/web drops request-deadline noise). Default: none is dropped.
+ * Call it once at module load, before the first toast.
+ */
+export declare function setSilentErrorToastFilter(filter: (message: string) => boolean): void;
+export declare const errorToast: (message: string, options?: ToastOptions) => void;
+export declare const infoToast: (message: string, options?: ToastOptions) => void;
+export declare const warningToast: (message: string, options?: ToastOptions) => void;
+/**
+ * One-line toast with an Undo key. `undoLabel` is the caller's translated
+ * "Undo"; `icon` is an optional muted glyph naming what happened.
+ */
+export declare const undoToast: (message: string, options: Pick<ToastOptions, "id" | "position" | "duration"> & {
+    undoLabel: string;
+    onUndo: () => void;
+    icon?: React.ReactNode;
+}) => string | number;
+/**
+ * Mount a caller-drawn card through the same toast surface — for notifications
+ * whose shape is their own (the session cards). `render` gets the dismiss.
+ */
+export declare const customToast: (render: (dismiss: () => void) => React.ReactElement, options: Pick<ToastOptions, "id" | "position" | "duration"> & {
+    onClose?: () => void;
+}) => string | number;
+/**
+ * Dismiss a toast by the `id` it was created with.
+ *
+ * Exists so feature code can retract a PERSISTENT toast when the condition it
+ * reports goes away — a `duration: Infinity` notice with an action button has to
+ * be revocable, or it outlives the problem and offers to fix something already
+ * fixed. Wrapped here rather than importing sonner in a feature: this module is
+ * the toast surface.
+ */
+export declare const dismissToast: (id: string | number) => void;

package/dist/components/ui/toast.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from './button.js';
+import Loading from './loading.js';
+import { Close } from '../../icons/close.js';
+import { cn } from '../../lib/utils.js';
+import { WarningCircleIcon } from '@phosphor-icons/react';
+import * as React from 'react';
+import { toast } from 'sonner';
+/** The toast host. Mount it once at the app root; every toast below renders into it. */
+export { Toaster } from 'sonner';
+const getErrorMessage = (error) => {
+    if (error instanceof Error)
+        return error.message;
+    if (typeof error === 'string')
+        return error;
+    return 'An error occurred';
+};
+const DEFAULT_DURATION = 3000;
+const UNDO_DURATION = 5000;
+const DEFAULT_POSITION = 'bottom-right';
+/** The card every toast sits on: one shape, the smooth `ring-sm` shadow, no border. */
+const CARD = 'bg-background text-foreground smooth-shadow-ring-sm rounded-lg';
+/**
+ * Build the data object for `toast.custom`.
+ *
+ * sonner hands the generated id to our render callback (so the close button can
+ * call `toast.dismiss(id)`), but it then spreads `data` over that id. Passing
+ * `id: undefined` clobbers it and sonner mints a *different* real id, leaving the
+ * close button pointing at a toast that no longer matches — so it never dismisses.
+ * Only include `id` when it is actually defined.
+ */
+const toastData = (options, duration, isMobile) => ({
+    ...(options?.id != null ? { id: options.id } : {}),
+    duration,
+    position: isMobile ? 'top-center' : options?.position || DEFAULT_POSITION,
+});
+/** A 16px filled status disc. The mark inside is drawn in the card's own color. */
+function Disc({ className, children }) {
+    return (
+    // overflow-visible: the disc fills the box edge to edge, and size-4 is a
+    // fractional 14.72px, so a clipping svg shaves its antialiased rim.
+    _jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: cn('size-4 shrink-0 overflow-visible', className), children: [_jsx("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }), _jsx("g", { className: "text-background", stroke: "currentColor", fill: "currentColor", children: children })] }));
+}
+/** The leading glyph of each variant. `loadingToast` uses `progress`. */
+export const toastIcon = (variant) => {
+    switch (variant) {
+        case 'success':
+            return (_jsx(Disc, { className: "text-kortix-green", children: _jsx("path", { d: "M4.8 8.2l2.1 2.1 4.3-4.6", strokeWidth: "1.6", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+        case 'progress':
+            return _jsx(Loading, { variant: "spokes", className: "size-4 shrink-0 overflow-visible" });
+        case 'error':
+            return (_jsx(Disc, { className: "text-kortix-red", children: _jsx("path", { d: "M5.6 5.6l4.8 4.8M10.4 5.6l-4.8 4.8", strokeWidth: "1.6", strokeLinecap: "round" }) }));
+        case 'info':
+            return (_jsxs(Disc, { className: "text-foreground", children: [_jsx("circle", { cx: "8", cy: "4.9", r: "0.95", stroke: "none" }), _jsx("path", { d: "M8 7.4v4", strokeWidth: "1.6", strokeLinecap: "round" })] }));
+        case 'warning':
+            return (_jsx(WarningCircleIcon, { weight: "fill", "aria-hidden": "true", className: "text-kortix-orange size-4 shrink-0 overflow-visible" }));
+    }
+};
+/** The small muted × every dismissible toast carries. */
+export function ToastClose({ onDismiss, className }) {
+    return (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Close notification", className: cn('text-muted-foreground hover:text-foreground flex size-5 shrink-0 items-center justify-center rounded-sm transition-colors', className), children: _jsx(Close, { className: "size-3", "aria-hidden": "true" }) }));
+}
+/** Text links joined by a dot, then optional muted meta. */
+function ToastActions({ actions, meta, onDismiss, }) {
+    if (!actions?.length && !meta)
+        return null;
+    // xs ghost buttons, pulled left by their own padding so the first label
+    // lines up with the title.
+    return (_jsxs("div", { className: "-ml-2.5 flex items-center gap-0.5 text-xs leading-5", children: [(actions ?? []).map((action) => (_jsx(Button, { type: "button", variant: "blue-ghost", size: "xs", className: "hover:bg-kortix-blue/15 h-5.5 rounded-sm px-2 text-xs font-medium", onClick: () => {
+                    onDismiss();
+                    action.onClick();
+                }, children: action.label }, action.label))), meta && _jsx("span", { className: "text-muted-foreground px-2.5", children: meta })] }));
+}
+/** The status colour the badge reflects onto the subject icon. `progress` reflects nothing. */
+const REFLECTION_TONE = {
+    success: 'text-kortix-green',
+    error: 'text-kortix-red',
+    warning: 'text-kortix-orange',
+    info: 'text-foreground',
+};
+/**
+ * Where the badge's colour reaches on the icon. Paper board "04 · Badge glow",
+ * V1 rim reflection, pushed further on request: the colour holds solid to
+ * 7.2px from the badge's centre and fades out by 16px, so it climbs the
+ * clock's right side and runs along its bottom. Centred on the badge: an 11px badge at -right-0.75 /
+ * -bottom-0.75 sits on the icon's diagonal at 85% / 85%, the board's 18.5/24.
+ * The badge is 0.72x the clock's radius, as on the board, so it leaves the
+ * rim it lights visible.
+ */
+export const REFLECTION_MASK = 'radial-gradient(circle 16px at 85% 85%, #000 45%, transparent 100%)';
+/**
+ * The subject's icon, bare, with the status glyph badged on its bottom-right
+ * corner. The icon is drawn twice: muted, then in the status colour under a
+ * radial mask centred on the badge, so its rim picks up the badge's colour
+ * where they meet and fades back to grey (V1 rim reflection).
+ */
+function EntityTile({ icon, status, variant, }) {
+    const tone = variant ? REFLECTION_TONE[variant] : undefined;
+    return (_jsxs("div", { className: "relative mt-0.5 size-5 shrink-0", children: [_jsx("div", { className: "text-muted-foreground flex size-5 items-center justify-center [&_svg]:size-5", children: icon }), tone && (_jsx("div", { "aria-hidden": "true", className: cn('absolute inset-0 flex size-5 items-center justify-center [&_svg]:size-5', tone), style: { maskImage: REFLECTION_MASK, WebkitMaskImage: REFLECTION_MASK }, children: icon })), _jsx("span", { className: "bg-background absolute -right-0.75 -bottom-0.75 flex size-3 items-center justify-center rounded-full [&_svg]:size-2.5", children: status })] }));
+}
+/**
+ * The toast card itself. `renderToast` mounts it through sonner; the session
+ * notifications mount it through `customToast`.
+ */
+export function ToastCard({ message, icon, variant, options, onDismiss, }) {
+    if (options?.compact) {
+        return (_jsxs("div", { className: cn(CARD, 'flex w-fit items-center gap-2 px-3 py-2'), children: [icon, _jsx("span", { className: "text-xs leading-5 font-medium", children: message })] }));
+    }
+    return (_jsxs("div", { className: cn(CARD, 'flex w-full items-start gap-2.5 py-3 pr-2.5 pl-4 sm:w-[var(--width)]'), children: [options?.entity?.icon ? (_jsx(EntityTile, { icon: options.entity.icon, status: icon, variant: variant })) : (_jsx("div", { className: "flex h-5 w-4 shrink-0 items-center justify-center", children: icon })), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-1.5", children: [_jsx("p", { className: "text-xs leading-5 font-medium", children: message }), options?.entity && (_jsx("p", { className: "-mt-1 truncate text-xs leading-5", children: options.entity.label })), options?.description && (_jsx("p", { className: cn('text-muted-foreground text-xs leading-5', 
+                        // Without an entity line it reads as the title's second line.
+                        !options.entity && '-mt-1'), children: options.description })), _jsx(ToastActions, { actions: options?.actions, meta: options?.meta, onDismiss: onDismiss }), options?.button && _jsx("div", { className: "self-start", children: options.button })] }), _jsx(ToastClose, { onDismiss: onDismiss })] }));
+}
+const isEditable = (target) => target instanceof HTMLElement &&
+    (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));
+/**
+ * The one-line undo toast: icon, message, an Undo key and ×. While it is on
+ * screen, ⌘Z / Ctrl+Z outside a text field undoes too.
+ */
+function UndoToastCard({ message, icon, undoLabel, onUndo, onDismiss, }) {
+    const undo = () => {
+        onDismiss();
+        onUndo();
+    };
+    const undoRef = React.useRef(undo);
+    React.useEffect(() => {
+        undoRef.current = undo;
+    });
+    React.useEffect(() => {
+        const onKey = (event) => {
+            if (event.key.toLowerCase() !== 'z' || event.shiftKey)
+                return;
+            if (!(event.metaKey || event.ctrlKey) || isEditable(event.target))
+                return;
+            event.preventDefault();
+            undoRef.current();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, []);
+    // The same card and text-link action as every other toast ("Open session").
+    return (_jsx(ToastCard, { message: message, icon: icon ? _jsx("span", { className: "text-muted-foreground flex", children: icon }) : null, options: { actions: [{ label: undoLabel, onClick: onUndo }] }, onDismiss: onDismiss }));
+}
+/**
+ * Render one toast and return the id `toast.custom` minted.
+ *
+ * The six factories share this one DOM shape; only the leading icon and the
+ * resolved duration differ. `isMobile` is read here so every factory gets the
+ * same bottom-right-to-top-center switch. The duration arrives already
+ * resolved, so each factory keeps its own `||` / `??` rule.
+ */
+const renderToast = (message, variant, options, duration) => {
+    const isMobile = window.innerWidth <= 768;
+    return toast.custom((t) => (_jsx(ToastCard, { message: message, icon: toastIcon(variant), variant: variant, options: options, onDismiss: () => toast.dismiss(t) })), toastData(options, duration, isMobile));
+};
+export const successToast = (message, options) => {
+    renderToast(message, 'success', options, options?.duration || DEFAULT_DURATION);
+};
+/** Show or update a loading toast; pass `id` to update an existing toast in place. */
+export const progressToast = (message, options) => {
+    return renderToast(message, 'progress', options, options?.duration ?? Infinity);
+};
+export const loadingToast = (message, promiseInput, options) => {
+    const promise = typeof promiseInput === 'function' ? promiseInput() : promiseInput;
+    const toastId = renderToast(message, 'progress', options, Infinity);
+    return promise.then((data) => {
+        toast.dismiss(toastId);
+        const successMessage = typeof options?.success === 'function'
+            ? options.success(data)
+            : (options?.success ?? 'Completed');
+        successToast(successMessage, options);
+        return data;
+    }, (error) => {
+        toast.dismiss(toastId);
+        if (options?.showErrorToast) {
+            const errorMessage = typeof options?.error === 'function'
+                ? options.error(error)
+                : (options?.error ?? getErrorMessage(error));
+            errorToast(errorMessage, options);
+        }
+        throw error;
+    });
+};
+let isSilentErrorMessage = () => false;
+/**
+ * Sets the host's rule for error messages that `errorToast` drops without a
+ * toast (apps/web drops request-deadline noise). Default: none is dropped.
+ * Call it once at module load, before the first toast.
+ */
+export function setSilentErrorToastFilter(filter) {
+    isSilentErrorMessage = filter;
+}
+export const errorToast = (message, options) => {
+    if (isSilentErrorMessage(message))
+        return;
+    renderToast(message, 'error', options, options?.duration || DEFAULT_DURATION);
+};
+export const infoToast = (message, options) => {
+    renderToast(message, 'info', options, options?.duration || DEFAULT_DURATION);
+};
+export const warningToast = (message, options) => {
+    renderToast(message, 'warning', options, options?.duration || DEFAULT_DURATION);
+};
+/**
+ * One-line toast with an Undo key. `undoLabel` is the caller's translated
+ * "Undo"; `icon` is an optional muted glyph naming what happened.
+ */
+export const undoToast = (message, options) => {
+    const isMobile = window.innerWidth <= 768;
+    return toast.custom((t) => (_jsx(UndoToastCard, { message: message, icon: options.icon, undoLabel: options.undoLabel, onUndo: options.onUndo, onDismiss: () => toast.dismiss(t) })), toastData(options, options.duration ?? UNDO_DURATION, isMobile));
+};
+/**
+ * Mount a caller-drawn card through the same toast surface — for notifications
+ * whose shape is their own (the session cards). `render` gets the dismiss.
+ */
+export const customToast = (render, options) => {
+    const isMobile = window.innerWidth <= 768;
+    return toast.custom((t) => render(() => toast.dismiss(t)), {
+        ...toastData(options, options.duration ?? DEFAULT_DURATION, isMobile),
+        ...(options.onClose ? { onDismiss: options.onClose, onAutoClose: options.onClose } : {}),
+    });
+};
+/**
+ * Dismiss a toast by the `id` it was created with.
+ *
+ * Exists so feature code can retract a PERSISTENT toast when the condition it
+ * reports goes away — a `duration: Infinity` notice with an action button has to
+ * be revocable, or it outlives the problem and offers to fix something already
+ * fixed. Wrapped here rather than importing sonner in a feature: this module is
+ * the toast surface.
+ */
+export const dismissToast = (id) => {
+    toast.dismiss(id);
+};

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

@@ -0,0 +1,12 @@
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { Toggle, toggleVariants };

package/dist/components/ui/toggle.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+const toggleVariants = cva('inline-flex items-center justify-center gap-2 rounded-md bg-transparent text-sm font-medium text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground focus-visible:outline-none focus-visible:ring-kortix-base focus-visible:ring-[0.6px] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary/10 data-[state=on]:text-primary data-[state=on]:hover:bg-primary/[0.14] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: '',
+            outline: 'border border-border data-[state=on]:border-primary/25',
+            secondary: 'bg-foreground/[0.05] text-foreground/70 hover:bg-foreground/[0.08] hover:text-foreground',
+        },
+        size: {
+            default: 'h-9 px-3 ',
+            sm: 'h-8 px-3',
+            lg: 'h-10 px-2.5 min-w-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => (_jsx(TogglePrimitive.Root, { ref: ref, className: cn(toggleVariants({ variant, size, className })), ...props })));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+export { Toggle, toggleVariants };

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

@@ -0,0 +1,9 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+/** @deprecated In feature code use `Hint` (`@kortix/ui/hint`). `Tooltip` is the primitive `Hint` builds on. */
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** @deprecated In feature code use `Hint` (`@kortix/ui/hint`). */
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/ui/tooltip.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+const TooltipProvider = TooltipPrimitive.Provider;
+/** @deprecated In feature code use `Hint` (`@kortix/ui/hint`). `Tooltip` is the primitive `Hint` builds on. */
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+/** @deprecated In feature code use `Hint` (`@kortix/ui/hint`). */
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, "data-slot": "tooltip-content", sideOffset: sideOffset, 
+        // No enter/exit animation, the same as the dropdown, select and popover
+        // panels: the tooltip paints on the frame it mounts and unmounts on the
+        // frame it closes. The hover delay lives on `TooltipProvider`, not here.
+        className: cn('bg-foreground text-background ring-foreground/5 z-[9999] overflow-hidden rounded-sm p-1 px-2 text-[13px] ring-[1px]', className), ...props }) })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/ui/trigger-variants.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const triggerVariants: (props?: ({
+    variant?: "outline" | "secondary" | "transparent" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TriggerVariantProps = VariantProps<typeof triggerVariants>;
+/** Caret sizing per trigger size — matches the text step of each size. */
+export declare const TRIGGER_ICON_SIZE: {
+    readonly sm: "size-4";
+    readonly md: "size-4";
+    readonly lg: "size-4.5";
+};
+/** The caret classes: muted, shrink-proof, and flipped while the overlay is open. */
+export declare const TRIGGER_CARET_CLASS: string;