@kortix/ui 0.14.3 → 0.14.4

package/dist/components/ui/toast.js

@@ -1,233 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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.js

@@ -1,16 +0,0 @@
-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.js

@@ -1,67 +0,0 @@
-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.js

@@ -1,101 +0,0 @@
-'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.js

@@ -1,66 +0,0 @@
-'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));
-}