@kortix/ui 0.0.0-stage → 0.14.3

package/dist/components/ui/trigger-variants.js

@@ -0,0 +1,67 @@
+import { cva } from 'class-variance-authority';
+/**
+ * The shared look for every disclosure trigger in the system — Select, Dropdown,
+ * Popover, Sheet, Modal, Dialog. One definition so a bare trigger renders the
+ * same box regardless of which overlay it opens.
+ *
+ * `secondary` (default) and `outline` draw the input field surface; `transparent`
+ * keeps `border-transparent` from the base, so the box metrics stay identical
+ * and a row of mixed variants aligns to the same baseline.
+ *
+ * Triggers rendered with `asChild` opt out entirely — the child owns its styling.
+ */
+/** Literal classes, not composed from input.tsx, so Tailwind can see every prefixed one. */
+const fieldTriggerClasses = [
+    'bg-popover border-border',
+    'focus-visible:border-ring focus-visible:ring-ring/15 focus-visible:ring-3',
+    'data-[state=open]:border-ring data-[state=open]:ring-ring/15 data-[state=open]:ring-3',
+].join(' ');
+export const triggerVariants = cva([
+    'group/ui-trigger flex w-fit shrink-0 cursor-pointer items-center justify-between gap-2 rounded-md border border-transparent font-normal outline-none',
+    'text-foreground data-placeholder:text-muted-foreground',
+    // Never `transition-all`: only the properties that actually change on hover/press.
+    'transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out',
+    'focus-visible:ring-kortix-base focus-visible:ring-[0.6px] focus-visible:outline-none data-[state=open]:ring-0',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    // One line, ellipsised. `truncate`, not `line-clamp-1`: line-clamp sets
+    // `display: -webkit-box` on every direct <span>, which out-ranks a child's
+    // own `flex` — an icon + label wrapper then stacked the icon ABOVE the
+    // label and lost its gap. `truncate` changes overflow only, not display.
+    '[&>span]:min-w-0 [&>span]:truncate [&>span]:text-left',
+], {
+    variants: {
+        variant: {
+            // `secondary` and `outline` are form-field triggers: they draw the exact
+            // surface `Input` draws (`inputSurfaceClasses` in input.tsx), and an OPEN
+            // trigger shows the same border + 3px halo as a focused input, so a
+            // Select beside a text field reads as one form.
+            secondary: fieldTriggerClasses,
+            outline: fieldTriggerClasses,
+            // Only the borderless toolbar trigger takes a press scale. A form field
+            // does not shrink under the pointer — an input never does, and a
+            // Select beside it should behave the same.
+            transparent: 'bg-transparent hover:bg-foreground/5 motion-safe:active:scale-[0.98]',
+        },
+        size: {
+            sm: 'h-8 px-2.5 text-sm',
+            md: 'h-10 px-3.5 text-sm',
+            lg: 'h-11 px-4 text-base',
+        },
+    },
+    defaultVariants: {
+        variant: 'secondary',
+        size: 'sm',
+    },
+});
+/** Caret sizing per trigger size — matches the text step of each size. */
+export const TRIGGER_ICON_SIZE = {
+    sm: 'size-4',
+    md: 'size-4',
+    lg: 'size-4.5',
+};
+/** The caret classes: muted, shrink-proof, and flipped while the overlay is open. */
+export const TRIGGER_CARET_CLASS = [
+    'text-muted-foreground shrink-0',
+    'motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-out',
+    'group-data-[state=open]/ui-trigger:rotate-180',
+].join(' ');

package/dist/components/ui/type-to-confirm-dialog.d.ts

@@ -0,0 +1,88 @@
+/**
+ * A destructive confirmation that only arms once the user has TYPED an exact
+ * phrase — the workspace name, the account name, whatever uniquely identifies
+ * the thing being destroyed.
+ *
+ * **When to use this instead of `ConfirmDialog`.** `ConfirmDialog`
+ * (`confirm-dialog.tsx`) stays the default for every destructive mutation:
+ * revoke a key, delete a secret, disconnect a channel. Reach for THIS one only
+ * when the action is both irreversible AND ambiguous — i.e. the user could
+ * plausibly be looking at the wrong entity. A single click, even a confirmed
+ * one, does not distinguish "delete this workspace" from "delete the workspace
+ * I meant". Typing the name does.
+ *
+ * **Why `Modal` and not `AlertDialog`.** The moment a confirmation grows an
+ * input it is a form, and `ConfirmDialog`'s `AlertDialog` shell has no room for
+ * one. `profile-tab.tsx`'s Delete-account flow already made this call (it
+ * hand-rolls a `Modal` with a "type delete to confirm" field); this component
+ * is that same pattern promoted to a primitive so the next destructive flow
+ * composes it instead of copying it. Profile's own dialog is deliberately left
+ * alone here — it carries an extra grace-period radio group, so adopting this
+ * is its own change, not a drive-by.
+ *
+ * **Why the phrase is the entity's name, not a fixed word.** A fixed word
+ * ("delete", "DELETE") proves the user read a prompt. The entity's name proves
+ * the user knows WHICH entity they are destroying. The expensive mistake in
+ * practice is not clicking too fast — it is clicking correctly on the wrong
+ * workspace.
+ *
+ * The matcher is `confirmationPhraseMatches` below, exported and tested
+ * separately: this dialog renders through a Radix portal, which emits nothing
+ * under `renderToStaticMarkup`, so a test that reached for the button's
+ * `disabled` attribute in rendered output would silently be unable to fail.
+ * See `type-to-confirm-dialog.test.ts`.
+ */
+import { type ReactNode } from 'react';
+/**
+ * Does what the user typed authorize the destructive action?
+ *
+ * Three deliberate rules, each guarding a specific failure:
+ *
+ * 1. **An empty/blank `phrase` NEVER arms.** This is the important one. The
+ *    phrase is usually a name read out of a query (`project?.name`), which is
+ *    `undefined` while that query is still loading. A naive
+ *    `typed === phrase` would then compare `'' === ''` and arm the destroy
+ *    button on an untouched dialog — the precise opposite of this component's
+ *    reason to exist.
+ * 2. **Both sides are trimmed.** Names get copied out of the surrounding UI and
+ *    arrive with a trailing space. Leading/trailing whitespace is a paste
+ *    artifact, never intent, and rejecting it only teaches users to distrust
+ *    the field.
+ * 3. **The comparison is case-insensitive.** Case adds friction without adding
+ *    safety: the guarantee being bought is "the user knows which entity this
+ *    is", and typing `acme prod` for `Acme Prod` demonstrates that fully. A
+ *    case-sensitive match would reject it and buy nothing.
+ */
+export declare function confirmationPhraseMatches(typed: string, phrase: string): boolean;
+export interface TypeToConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Stable across entities — "Delete workspace?", not "Delete Acme?". The
+     *  entity's name belongs in `description`, where it does not make the
+     *  heading jump around between openings. */
+    title: string;
+    /** One or two sentences naming the entity and the irreversibility. */
+    description: ReactNode;
+    /** What the action destroys or stops, one item per line. Rendered as a
+     *  bulleted list inside a bordered panel. Static per call site, so index
+     *  keys are safe. */
+    consequences?: readonly ReactNode[];
+    /** Heading above `consequences`. */
+    consequencesTitle?: string;
+    /** What SURVIVES the action. Optional, but include it whenever something
+     *  meaningful does — a user who has just been told "this is permanent"
+     *  reads an unqualified warning as "my code is gone too". */
+    reassurance?: ReactNode;
+    /** The exact string the user must type. While this is blank the confirm
+     *  button never arms — see `confirmationPhraseMatches`. */
+    confirmPhrase: string;
+    /** Verb phrase for the armed button, e.g. "Delete workspace". */
+    confirmLabel: string;
+    /** Non-destructive dismissal. Phrase it as the safe outcome ("Keep
+     *  workspace"), not as a neutral "Cancel" — at the moment of decision the
+     *  escape hatch should read as a choice, not an abort. */
+    cancelLabel?: string;
+    onConfirm: () => void;
+    isPending?: boolean;
+}
+export declare function TypeToConfirmDialog({ open, onOpenChange, ...content }: TypeToConfirmDialogProps): import("react").JSX.Element;

package/dist/components/ui/type-to-confirm-dialog.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A destructive confirmation that only arms once the user has TYPED an exact
+ * phrase — the workspace name, the account name, whatever uniquely identifies
+ * the thing being destroyed.
+ *
+ * **When to use this instead of `ConfirmDialog`.** `ConfirmDialog`
+ * (`confirm-dialog.tsx`) stays the default for every destructive mutation:
+ * revoke a key, delete a secret, disconnect a channel. Reach for THIS one only
+ * when the action is both irreversible AND ambiguous — i.e. the user could
+ * plausibly be looking at the wrong entity. A single click, even a confirmed
+ * one, does not distinguish "delete this workspace" from "delete the workspace
+ * I meant". Typing the name does.
+ *
+ * **Why `Modal` and not `AlertDialog`.** The moment a confirmation grows an
+ * input it is a form, and `ConfirmDialog`'s `AlertDialog` shell has no room for
+ * one. `profile-tab.tsx`'s Delete-account flow already made this call (it
+ * hand-rolls a `Modal` with a "type delete to confirm" field); this component
+ * is that same pattern promoted to a primitive so the next destructive flow
+ * composes it instead of copying it. Profile's own dialog is deliberately left
+ * alone here — it carries an extra grace-period radio group, so adopting this
+ * is its own change, not a drive-by.
+ *
+ * **Why the phrase is the entity's name, not a fixed word.** A fixed word
+ * ("delete", "DELETE") proves the user read a prompt. The entity's name proves
+ * the user knows WHICH entity they are destroying. The expensive mistake in
+ * practice is not clicking too fast — it is clicking correctly on the wrong
+ * workspace.
+ *
+ * The matcher is `confirmationPhraseMatches` below, exported and tested
+ * separately: this dialog renders through a Radix portal, which emits nothing
+ * under `renderToStaticMarkup`, so a test that reached for the button's
+ * `disabled` attribute in rendered output would silently be unable to fail.
+ * See `type-to-confirm-dialog.test.ts`.
+ */
+import { useId, useState } from 'react';
+import { useUiStrings } from '../../providers/ui-provider.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Label } from './label.js';
+import Loading from './loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from './modal.js';
+/**
+ * Does what the user typed authorize the destructive action?
+ *
+ * Three deliberate rules, each guarding a specific failure:
+ *
+ * 1. **An empty/blank `phrase` NEVER arms.** This is the important one. The
+ *    phrase is usually a name read out of a query (`project?.name`), which is
+ *    `undefined` while that query is still loading. A naive
+ *    `typed === phrase` would then compare `'' === ''` and arm the destroy
+ *    button on an untouched dialog — the precise opposite of this component's
+ *    reason to exist.
+ * 2. **Both sides are trimmed.** Names get copied out of the surrounding UI and
+ *    arrive with a trailing space. Leading/trailing whitespace is a paste
+ *    artifact, never intent, and rejecting it only teaches users to distrust
+ *    the field.
+ * 3. **The comparison is case-insensitive.** Case adds friction without adding
+ *    safety: the guarantee being bought is "the user knows which entity this
+ *    is", and typing `acme prod` for `Acme Prod` demonstrates that fully. A
+ *    case-sensitive match would reject it and buy nothing.
+ */
+export function confirmationPhraseMatches(typed, phrase) {
+    const target = phrase.trim();
+    if (!target)
+        return false;
+    return typed.trim().toLowerCase() === target.toLowerCase();
+}
+export function TypeToConfirmDialog({ open, onOpenChange, ...content }) {
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "lg:max-w-md", children: _jsx(TypeToConfirmBody, { onOpenChange: onOpenChange, ...content }) }) }));
+}
+function TypeToConfirmBody({ onOpenChange, title, description, consequences, consequencesTitle = 'This removes:', reassurance, confirmPhrase, confirmLabel, cancelLabel, onConfirm, isPending = false, }) {
+    const strings = useUiStrings();
+    const [typed, setTyped] = useState('');
+    const inputId = useId();
+    // Derived, never stored: if `confirmPhrase` changes while the dialog is open
+    // (the entity is renamed in another tab), the button disarms on the next
+    // render instead of holding a stale "armed" flag.
+    const armed = confirmationPhraseMatches(typed, confirmPhrase);
+    const canSubmit = armed && !isPending;
+    return (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "space-y-1.5", children: [_jsx(ModalTitle, { children: title }), _jsx(ModalDescription, { className: "text-pretty", children: description })] }), _jsxs("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    // Guarded, not just visually disabled: Enter in the text field
+                    // submits the form, and a disabled button does not stop that.
+                    if (canSubmit)
+                        onConfirm();
+                }, children: [_jsxs(ModalBody, { children: [consequences?.length ? (_jsxs("div", { className: "bg-popover space-y-2 rounded-md border px-4 py-3", children: [_jsx("p", { className: "text-sm font-medium", children: consequencesTitle }), _jsx("ul", { className: "text-muted-foreground list-disc space-y-1.5 pl-5 text-sm text-pretty", children: (() => {
+                                            // Callers pass static string lists — key by content, with an
+                                            // occurrence counter for repeats and non-text nodes.
+                                            const seen = new Map();
+                                            return consequences.map((item) => {
+                                                const base = typeof item === 'string' || typeof item === 'number' ? String(item) : 'node';
+                                                const n = seen.get(base) ?? 0;
+                                                seen.set(base, n + 1);
+                                                return _jsx("li", { children: item }, n === 0 ? base : `${base}#${n}`);
+                                            });
+                                        })() })] })) : null, reassurance ? (_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: reassurance })) : null, _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: inputId, className: "text-sm font-normal", children: ["Type", ' ', _jsx("span", { className: "text-foreground font-medium break-all", children: confirmPhrase }), " to confirm"] }), _jsx(Input, { id: inputId, value: typed, onChange: (e) => setTyped(e.target.value), disabled: isPending, autoComplete: "off", autoCorrect: "off", autoCapitalize: "none", spellCheck: false, "aria-describedby": `${inputId}-hint` }), _jsx("p", { id: `${inputId}-hint`, className: "sr-only", "aria-live": "polite", children: armed
+                                            ? `Confirmed. ${confirmLabel} is now enabled.`
+                                            : `Type the exact name to enable ${confirmLabel}.` })] })] }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { type: "button", variant: "outline-ghost", onClick: () => onOpenChange(false), disabled: isPending, className: "w-full sm:w-auto", children: cancelLabel ?? strings.cancel }), _jsxs(Button, { type: "submit", variant: "destructive", disabled: !canSubmit, className: "w-full gap-1.5 sm:w-auto", children: [isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, confirmLabel] })] })] })] }));
+}

package/dist/components/ui/typed-title-logic.d.ts

@@ -0,0 +1,22 @@
+/**
+ * When a title should type itself in.
+ *
+ * Pure, and separate from the component, because this is the whole decision —
+ * the rendering is a detail. A session title types when its VALUE CHANGES, not
+ * when it renders. That distinction is what keeps the effect off the frequency
+ * cliff: a page load, a scroll back up, a re-sort of the list and a re-render
+ * from unrelated state all paint titles instantly, because none of them change
+ * a title. Twenty rows typing at once on load would be noise; this cannot
+ * produce it.
+ */
+/** How long between characters. A fast, confident typist — slow enough to read
+ *  as typing, quick enough that a 40-character title lands in ~1.4s. Shared by
+ *  every surface so the effect is one thing, not per-list guesswork. */
+export declare const TYPE_SPEED_MS = 36;
+export declare function shouldTypeOnChange({ previous, next, reduceMotion, }: {
+    /** What this row last displayed. `null` means it has never displayed
+     *  anything — the very first render. */
+    previous: string | null;
+    next: string;
+    reduceMotion: boolean;
+}): boolean;

package/dist/components/ui/typed-title-logic.js

@@ -0,0 +1,33 @@
+/**
+ * When a title should type itself in.
+ *
+ * Pure, and separate from the component, because this is the whole decision —
+ * the rendering is a detail. A session title types when its VALUE CHANGES, not
+ * when it renders. That distinction is what keeps the effect off the frequency
+ * cliff: a page load, a scroll back up, a re-sort of the list and a re-render
+ * from unrelated state all paint titles instantly, because none of them change
+ * a title. Twenty rows typing at once on load would be noise; this cannot
+ * produce it.
+ */
+/** How long between characters. A fast, confident typist — slow enough to read
+ *  as typing, quick enough that a 40-character title lands in ~1.4s. Shared by
+ *  every surface so the effect is one thing, not per-list guesswork. */
+export const TYPE_SPEED_MS = 36;
+export function shouldTypeOnChange({ previous, next, reduceMotion, }) {
+    // First render is never an animation. The row is appearing with whatever the
+    // title already is; there was no change to show, and animating here is what
+    // would make a cold page load type twenty titles at once.
+    if (previous === null)
+        return false;
+    if (previous === next)
+        return false;
+    // Reduced motion still gets the new title — instantly. Typing is decoration
+    // over a value that is already correct, so removing it costs nothing; a fade
+    // would be the compromise if the motion carried meaning, and it does not.
+    if (reduceMotion)
+        return false;
+    // An empty title has nothing to type. Guarded because the animation would
+    // otherwise complete on an empty string and leave the cursor blinking on a
+    // row with no text.
+    return next.length > 0;
+}

package/dist/components/ui/typed-title.d.ts

@@ -0,0 +1,38 @@
+/**
+ * A title that types itself in when it changes.
+ *
+ * The sessions list shows "New session" the moment a session is created, then
+ * swaps it for the real name seconds later when the agent has one. That swap
+ * used to be an instant text replacement — the row simply said something
+ * different on the next frame, with nothing to say a value had been written.
+ * Typing it says so.
+ *
+ * TWO PIECES on purpose. `useTypeOnChange` is the trigger and is shared, so
+ * every list agrees on WHEN a title types. `TypedTitle` is one rendering of it,
+ * for rows that show a title as plain inline text. The sidebar renders its own
+ * (it wraps the title in a hover-scrolling marquee) and takes only the hook —
+ * shared decision, surface-specific presentation.
+ */
+import { TYPE_SPEED_MS } from './typed-title-logic.js';
+export { TYPE_SPEED_MS };
+export declare function useTypeOnChange(text: string): {
+    isTyping: boolean;
+    /** Remount key for the typing element. A run must restart from character
+     *  zero when the title changes again mid-type — without a changing key the
+     *  animation keeps its old progress and types the tail of a string nobody
+     *  asked for. */
+    runId: number;
+    /** Hand to the animation's `onComplete`. */
+    stop: () => void;
+};
+/**
+ * Inline typed title for a list row.
+ *
+ * Renders as plain text at rest — no wrapper, no extra element — so a row that
+ * is not animating costs exactly what it did before, and the parent's
+ * `truncate` keeps ellipsising long titles as it always has.
+ */
+export declare function TypedTitle({ text, className }: {
+    text: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/ui/typed-title.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A title that types itself in when it changes.
+ *
+ * The sessions list shows "New session" the moment a session is created, then
+ * swaps it for the real name seconds later when the agent has one. That swap
+ * used to be an instant text replacement — the row simply said something
+ * different on the next frame, with nothing to say a value had been written.
+ * Typing it says so.
+ *
+ * TWO PIECES on purpose. `useTypeOnChange` is the trigger and is shared, so
+ * every list agrees on WHEN a title types. `TypedTitle` is one rendering of it,
+ * for rows that show a title as plain inline text. The sidebar renders its own
+ * (it wraps the title in a hover-scrolling marquee) and takes only the hook —
+ * shared decision, surface-specific presentation.
+ */
+import { shouldTypeOnChange, TYPE_SPEED_MS } from './typed-title-logic.js';
+import { TypingAnimation } from './typing-animation.js';
+import { cn } from '../../lib/utils.js';
+import { useReducedMotion } from 'motion/react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+export { TYPE_SPEED_MS };
+export function useTypeOnChange(text) {
+    // The last value this row DISPLAYED, in a ref rather than state: it must not
+    // itself cause a render, and it has to update in the same pass that decides
+    // to animate, or a second change arriving mid-type compares against a stale
+    // value and is missed.
+    const previousRef = useRef(null);
+    const [isTyping, setIsTyping] = useState(false);
+    const [runId, setRunId] = useState(0);
+    const reduceMotion = !!useReducedMotion();
+    useEffect(() => {
+        const previous = previousRef.current;
+        previousRef.current = text;
+        if (!shouldTypeOnChange({ previous, next: text, reduceMotion }))
+            return;
+        setIsTyping(true);
+        setRunId((id) => id + 1);
+    }, [text, reduceMotion]);
+    const stop = useCallback(() => setIsTyping(false), []);
+    return { isTyping, runId, stop };
+}
+/**
+ * Inline typed title for a list row.
+ *
+ * Renders as plain text at rest — no wrapper, no extra element — so a row that
+ * is not animating costs exactly what it did before, and the parent's
+ * `truncate` keeps ellipsising long titles as it always has.
+ */
+export function TypedTitle({ text, className }) {
+    const { isTyping, runId, stop } = useTypeOnChange(text);
+    if (!isTyping)
+        return _jsx("span", { className: className, children: text });
+    return (_jsx(TypingAnimation, { 
+        // The row is already on screen and the title has already changed —
+        // waiting for an intersection observer would mean a visible row types
+        // late, or a row scrolled past types nothing at all.
+        startOnView: false, showCursor: true, blinkCursor: true, cursorStyle: "line", typeSpeed: TYPE_SPEED_MS, onComplete: stop, 
+        // The component ships marketing-hero defaults (`leading-20`, negative
+        // tracking) that belong to a headline, not a 13px list row. Reset both
+        // so the typed text sits on the same baseline and rhythm as the plain
+        // text it replaces — any drift here reads as the row twitching when the
+        // animation starts and again when it ends.
+        className: cn('leading-none tracking-normal', className), children: text }, runId));
+}

package/dist/components/ui/typing-animation.d.ts

@@ -0,0 +1,36 @@
+import { type DOMMotionComponents, type HTMLMotionProps, type MotionProps } from 'motion/react';
+declare const motionElements: {
+    readonly article: import("motion/react").ForwardRefComponent<HTMLElement, HTMLMotionProps<"article">>;
+    readonly div: import("motion/react").ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>;
+    readonly h1: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h1">>;
+    readonly h2: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h2">>;
+    readonly h3: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h3">>;
+    readonly h4: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h4">>;
+    readonly h5: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h5">>;
+    readonly h6: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h6">>;
+    readonly li: import("motion/react").ForwardRefComponent<HTMLLIElement, HTMLMotionProps<"li">>;
+    readonly p: import("motion/react").ForwardRefComponent<HTMLParagraphElement, HTMLMotionProps<"p">>;
+    readonly section: import("motion/react").ForwardRefComponent<HTMLElement, HTMLMotionProps<"section">>;
+    readonly span: import("motion/react").ForwardRefComponent<HTMLSpanElement, HTMLMotionProps<"span">>;
+};
+type MotionElementType = Extract<keyof DOMMotionComponents, keyof typeof motionElements>;
+interface TypingAnimationProps extends Omit<MotionProps, 'children'> {
+    children?: string;
+    words?: string[];
+    className?: string;
+    duration?: number;
+    typeSpeed?: number;
+    deleteSpeed?: number;
+    delay?: number;
+    pauseDelay?: number;
+    loop?: boolean;
+    as?: MotionElementType;
+    startOnView?: boolean;
+    showCursor?: boolean;
+    blinkCursor?: boolean;
+    cursorStyle?: 'line' | 'block' | 'underscore';
+    /** Fires once when a non-looping animation finishes typing the last word. */
+    onComplete?: () => void;
+}
+export declare function TypingAnimation({ children, words, className, duration, typeSpeed, deleteSpeed, delay, pauseDelay, loop, as: Component, startOnView, showCursor, blinkCursor, cursorStyle, onComplete, ...props }: TypingAnimationProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/typing-animation.js

@@ -0,0 +1,141 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { m, useInView, } from 'motion/react';
+import { useEffect, useMemo, useRef, useState, } from 'react';
+import { cn } from '../../lib/utils.js';
+const motionElements = {
+    article: m.article,
+    div: m.div,
+    h1: m.h1,
+    h2: m.h2,
+    h3: m.h3,
+    h4: m.h4,
+    h5: m.h5,
+    h6: m.h6,
+    li: m.li,
+    p: m.p,
+    section: m.section,
+    span: m.span,
+};
+export function TypingAnimation({ children, words, className, duration = 100, typeSpeed, deleteSpeed, delay = 0, pauseDelay = 1000, loop = false, as: Component = 'span', startOnView = true, showCursor = true, blinkCursor = true, cursorStyle = 'line', onComplete, ...props }) {
+    const MotionComponent = motionElements[Component];
+    const [displayedText, setDisplayedText] = useState('');
+    const [currentWordIndex, setCurrentWordIndex] = useState(0);
+    const [currentCharIndex, setCurrentCharIndex] = useState(0);
+    const [phase, setPhase] = useState('typing');
+    const elementRef = useRef(null);
+    const isInView = useInView(elementRef, {
+        amount: 0.3,
+        once: true,
+    });
+    const wordsToAnimate = useMemo(() => words ?? (children ? [children] : []), [words, children]);
+    const hasMultipleWords = wordsToAnimate.length > 1;
+    const typingSpeed = typeSpeed ?? duration;
+    const deletingSpeed = deleteSpeed ?? typingSpeed / 2;
+    const shouldStart = startOnView ? isInView : true;
+    const animationSourceKey = useMemo(() => (words ? words.join('\u0000') : (children ?? '')), [words, children]);
+    useEffect(() => {
+        setDisplayedText('');
+        setCurrentWordIndex(0);
+        setCurrentCharIndex(0);
+        setPhase('typing');
+    }, [animationSourceKey]);
+    useEffect(() => {
+        let timeout = null;
+        if (shouldStart && wordsToAnimate.length > 0) {
+            const timeoutDelay = delay > 0 && displayedText === ''
+                ? delay
+                : phase === 'typing'
+                    ? typingSpeed
+                    : phase === 'deleting'
+                        ? deletingSpeed
+                        : pauseDelay;
+            timeout = setTimeout(() => {
+                const currentWord = wordsToAnimate[currentWordIndex] || '';
+                const graphemes = Array.from(currentWord);
+                switch (phase) {
+                    case 'typing':
+                        if (currentCharIndex < graphemes.length) {
+                            setDisplayedText(graphemes.slice(0, currentCharIndex + 1).join(''));
+                            setCurrentCharIndex((prev) => prev + 1);
+                        }
+                        else {
+                            if (hasMultipleWords || loop) {
+                                const isLastWord = currentWordIndex === wordsToAnimate.length - 1;
+                                if (!isLastWord || loop) {
+                                    setPhase('pause');
+                                }
+                            }
+                        }
+                        break;
+                    case 'pause':
+                        setPhase('deleting');
+                        break;
+                    case 'deleting':
+                        if (currentCharIndex > 0) {
+                            setDisplayedText(graphemes.slice(0, currentCharIndex - 1).join(''));
+                            setCurrentCharIndex((prev) => prev - 1);
+                        }
+                        else {
+                            const nextIndex = (currentWordIndex + 1) % wordsToAnimate.length;
+                            setCurrentWordIndex(nextIndex);
+                            setPhase('typing');
+                        }
+                        break;
+                }
+            }, timeoutDelay);
+        }
+        return () => {
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [
+        shouldStart,
+        phase,
+        currentCharIndex,
+        currentWordIndex,
+        displayedText,
+        wordsToAnimate,
+        hasMultipleWords,
+        loop,
+        typingSpeed,
+        deletingSpeed,
+        pauseDelay,
+        delay,
+    ]);
+    const currentWordGraphemes = Array.from(wordsToAnimate[currentWordIndex] || '');
+    const isComplete = !loop &&
+        currentWordIndex === wordsToAnimate.length - 1 &&
+        currentCharIndex >= currentWordGraphemes.length &&
+        phase !== 'deleting';
+    const onCompleteRef = useRef(onComplete);
+    useEffect(() => {
+        onCompleteRef.current = onComplete;
+    }, [onComplete]);
+    const didFireCompleteRef = useRef(false);
+    useEffect(() => {
+        didFireCompleteRef.current = false;
+    }, [animationSourceKey]);
+    useEffect(() => {
+        if (!isComplete || didFireCompleteRef.current)
+            return;
+        didFireCompleteRef.current = true;
+        onCompleteRef.current?.();
+    }, [isComplete]);
+    const shouldShowCursor = showCursor &&
+        !isComplete &&
+        (hasMultipleWords || loop || currentCharIndex < currentWordGraphemes.length);
+    const getCursorChar = () => {
+        switch (cursorStyle) {
+            case 'block':
+                return '▌';
+            case 'underscore':
+                return '_';
+            case 'line':
+            default:
+                return '|';
+        }
+    };
+    return (_jsxs(MotionComponent, { ref: elementRef, className: cn('leading-20 tracking-[-0.02em]', Component === 'span' && 'inline-block', className), ...props, children: [displayedText, shouldShowCursor && (_jsx("span", { className: cn('inline-block', blinkCursor && 'animate-blink-cursor'), children: getCursorChar() }))] }));
+}

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+/**
+ * `text` goes on the fallback itself: the primitive's fallback sets its own
+ * `text-sm`, which beat a size class on the root. Two initials at 14px
+ * semibold filled the 22px `sm` tile edge to edge and overflowed an 18px one.
+ * `xs` and `sm` hold ONE initial, as EntityAvatar does: `text-xs` (13px) is
+ * the floor of the type scale, and two letters at 13px still fill an 18px tile.
+ */
+declare const SIZE_MAP: {
+    readonly xs: {
+        readonly box: "size-5";
+        readonly text: "text-xs";
+        readonly initials: 1;
+    };
+    readonly sm: {
+        readonly box: "size-6";
+        readonly text: "text-xs";
+        readonly initials: 1;
+    };
+    readonly md: {
+        readonly box: "size-8";
+        readonly text: "text-xs";
+        readonly initials: 2;
+    };
+    readonly lg: {
+        readonly box: "size-10";
+        readonly text: "text-sm";
+        readonly initials: 2;
+    };
+    readonly xl: {
+        readonly box: "size-14";
+        readonly text: "text-base";
+        readonly initials: 2;
+    };
+};
+export type UserAvatarSize = keyof typeof SIZE_MAP;
+export interface UserAvatarProps {
+    email: string;
+    name?: string | null;
+    avatarUrl?: string | null;
+    size?: UserAvatarSize;
+    className?: string;
+    ring?: boolean;
+    variant?: 'default' | 'primary';
+}
+export declare function UserAvatar({ email, name, avatarUrl, size, variant, className, ring, }: UserAvatarProps): React.JSX.Element;
+export {};