@teaflask/assistant 0.0.0 → 0.6.0

package/dist/components/model-picker-effort.d.ts

@@ -0,0 +1,4 @@
+import type { ServedThinkingEffort } from "../contract/assistant-config.js";
+export declare function nearestEffortIn(ladder: readonly ServedThinkingEffort[], effort: ServedThinkingEffort): ServedThinkingEffort | null;
+export declare function displayEffortOf(ladder: readonly ServedThinkingEffort[], effort: ServedThinkingEffort | null, servedDefault: ServedThinkingEffort | null): ServedThinkingEffort | null;
+export declare function effortLabelOf(effort: ServedThinkingEffort): string;

package/dist/components/model-picker-effort.js

@@ -0,0 +1,48 @@
+import { ThinkingEffort } from "../generated/models/index.js";
+export function nearestEffortIn(ladder, effort) {
+    const ranks = Object.values(ThinkingEffort);
+    const requested = ranks.indexOf(effort);
+    if (requested === -1) {
+        return null;
+    }
+    let best = null;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    let bestRank = Number.POSITIVE_INFINITY;
+    for (const level of ladder) {
+        const rank = ranks.indexOf(level);
+        if (rank === -1) {
+            continue;
+        }
+        const distance = Math.abs(rank - requested);
+        if (distance < bestDistance ||
+            (distance === bestDistance && rank < bestRank)) {
+            best = level;
+            bestDistance = distance;
+            bestRank = rank;
+        }
+    }
+    return best;
+}
+export function displayEffortOf(ladder, effort, servedDefault) {
+    if (effort === null || ladder.includes(effort)) {
+        return effort;
+    }
+    const nearest = nearestEffortIn(ladder, effort);
+    if (nearest !== null) {
+        return nearest;
+    }
+    if (servedDefault === null || ladder.includes(servedDefault)) {
+        return servedDefault;
+    }
+    return nearestEffortIn(ladder, servedDefault);
+}
+const EFFORT_LABELS = {
+    low: "Low",
+    medium: "Medium",
+    high: "High",
+    xhigh: "Extra high",
+    max: "Max",
+};
+export function effortLabelOf(effort) {
+    return (EFFORT_LABELS[effort] ?? effort.charAt(0).toUpperCase() + effort.slice(1));
+}

package/dist/components/model-picker-panels.d.ts

@@ -0,0 +1,22 @@
+import type { RefObject } from "react";
+import type { ServedModelChoice, ServedThinkingEffort } from "../contract/assistant-config.js";
+import type { ComposerContract } from "../core/conversation-contract.js";
+export type PickerPanel = "root" | "model" | "effort";
+interface PickerPanelFrame {
+    panelRef: RefObject<HTMLDivElement | null>;
+    panel: PickerPanel;
+    showPanel: (next: PickerPanel) => void;
+}
+export declare function ModelPickerRootPanel({ panelRef, panel, currentName, currentEffort, showPanel, }: PickerPanelFrame & {
+    currentName: string;
+    currentEffort: ServedThinkingEffort | null;
+}): import("react").JSX.Element;
+export declare function ModelPickerServedModelsPanel({ panelRef, panel, menu, currentModelId, modelPick, setModelPick, showPanel, }: PickerPanelFrame & Pick<ComposerContract, "modelPick" | "setModelPick"> & {
+    menu: ServedModelChoice;
+    currentModelId: string;
+}): import("react").JSX.Element;
+export declare function ModelPickerEffortPanel({ panelRef, panel, ladder, currentEffort, modelPick, setModelPick, showPanel, }: PickerPanelFrame & Pick<ComposerContract, "modelPick" | "setModelPick"> & {
+    ladder: readonly ServedThinkingEffort[];
+    currentEffort: ServedThinkingEffort | null;
+}): import("react").JSX.Element;
+export {};

package/dist/components/model-picker-panels.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon } from "./icons.js";
+import { effortLabelOf, nearestEffortIn } from "./model-picker-effort.js";
+import { TfButton } from "./primitives/button.js";
+export function ModelPickerRootPanel({ panelRef, panel, currentName, currentEffort, showPanel, }) {
+    return (_jsxs("div", { ref: panelRef, tabIndex: -1, hidden: panel !== "root", role: "group", "aria-label": "Model and effort", className: (panel === "root" ? "tf:flex " : "tf:hidden ") +
+            "tf:flex-col tf:gap-0.5 tf:outline-none", children: [_jsxs(TfButton, { variant: "row", className: "tf:gap-3", onClick: () => {
+                    showPanel("model");
+                }, children: [_jsx("span", { className: "tf:flex-1 tf:text-left", children: "Model" }), _jsx("span", { className: "tf:min-w-0 tf:truncate tf:text-tf-muted-foreground", children: currentName }), _jsx("span", { className: "tf:-rotate-90 tf:text-tf-muted-foreground", children: _jsx(ChevronDownIcon, {}) })] }), _jsxs(TfButton, { variant: "row", className: "tf:gap-3", onClick: () => {
+                    showPanel("effort");
+                }, children: [_jsx("span", { className: "tf:flex-1 tf:text-left", children: "Effort" }), _jsx("span", { className: "tf:min-w-0 tf:truncate tf:text-tf-muted-foreground", children: currentEffort === null ? "Default" : effortLabelOf(currentEffort) }), _jsx("span", { className: "tf:-rotate-90 tf:text-tf-muted-foreground", children: _jsx(ChevronDownIcon, {}) })] })] }));
+}
+export function ModelPickerServedModelsPanel({ panelRef, panel, menu, currentModelId, modelPick, setModelPick, showPanel, }) {
+    return (_jsxs("div", { ref: panelRef, tabIndex: -1, hidden: panel !== "model", role: "group", "aria-label": "Model", className: (panel === "model" ? "tf:flex " : "tf:hidden ") +
+            "tf:flex-col tf:gap-0.5 tf:outline-none", children: [_jsx(PickerPanelHeading, { label: "Model", onBack: () => {
+                    showPanel("root");
+                } }), menu.models.map((option) => (_jsxs(TfButton, { variant: "row", "aria-pressed": option.id === currentModelId, onClick: () => {
+                    const stored = modelPick?.effort ?? null;
+                    setModelPick({
+                        modelId: option.id === menu.default_model_id ? null : option.id,
+                        effort: stored === null || option.efforts.includes(stored)
+                            ? stored
+                            : (nearestEffortIn(option.efforts, stored) ?? stored),
+                    });
+                    showPanel("root");
+                }, children: [_jsx("span", { className: "tf:min-w-0 tf:flex-1 tf:truncate", children: option.display_name }), _jsx("span", { "aria-hidden": option.id !== currentModelId, className: "tf:w-4", children: option.id === currentModelId ? _jsx(CheckIcon, {}) : null })] }, option.id)))] }));
+}
+export function ModelPickerEffortPanel({ panelRef, panel, ladder, currentEffort, modelPick, setModelPick, showPanel, }) {
+    return (_jsxs("div", { ref: panelRef, tabIndex: -1, hidden: panel !== "effort", role: "group", "aria-label": "Reasoning effort", className: (panel === "effort" ? "tf:flex " : "tf:hidden ") +
+            "tf:flex-col tf:gap-0.5 tf:outline-none", children: [_jsx(PickerPanelHeading, { label: "Effort", onBack: () => {
+                    showPanel("root");
+                } }), ladder.map((effort) => (_jsxs(TfButton, { variant: "row", "aria-pressed": effort === currentEffort, onClick: () => {
+                    if (effort !== currentEffort) {
+                        setModelPick({
+                            modelId: modelPick?.modelId ?? null,
+                            effort,
+                        });
+                    }
+                    showPanel("root");
+                }, children: [_jsx("span", { className: "tf:min-w-0 tf:flex-1 tf:truncate", children: effortLabelOf(effort) }), _jsx("span", { "aria-hidden": effort !== currentEffort, className: "tf:w-4", children: effort === currentEffort ? _jsx(CheckIcon, {}) : null })] }, effort)))] }));
+}
+function PickerPanelHeading({ label, onBack, }) {
+    return (_jsxs("div", { className: "tf:mb-1 tf:flex tf:items-center tf:gap-1 tf:border-b tf:px-1 tf:pb-1", children: [_jsx(TfButton, { variant: "icon", "aria-label": "Back", onClick: onBack, children: _jsx("span", { className: "tf:rotate-90", children: _jsx(ChevronDownIcon, {}) }) }), _jsx("span", { className: "tf:text-tf-label tf:font-medium", children: label })] }));
+}

package/dist/components/notice-banner.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export declare function NoticeBanner({ children, hook, }: {
+    children: ReactNode;
+    hook?: string;
+}): import("react").JSX.Element;
+export declare function PendingDecisionGapNotice({ onRetry }: {
+    onRetry: () => void;
+}): import("react").JSX.Element;

package/dist/components/notice-banner.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TfButton } from "./primitives/button.js";
+export function NoticeBanner({ children, hook, }) {
+    return (_jsx("div", { role: "alert", className: "tf:border-b", ...(hook ? { [hook]: "" } : {}), children: _jsx("div", { className: "tf:mx-auto tf:flex tf:w-full tf:max-w-3xl tf:items-center tf:gap-2 tf:px-4 tf:py-2 tf:text-tf-label tf:text-tf-destructive", children: children }) }));
+}
+export function PendingDecisionGapNotice({ onRetry }) {
+    return (_jsxs(NoticeBanner, { hook: "data-tf-pending-decision-gap", children: ["The assistant is waiting on a request that couldn't be shown.", _jsx(TfButton, { variant: "ghost", onClick: onRetry, children: "Retry" })] }));
+}

package/dist/components/operation-icons.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { ToolCallState } from "../core/tool-call-display.js";
+import type { ToolCallIcon } from "../core/tool-call-presentation.js";
+export declare function OperationMarkFrame({ status, children, }: {
+    status: ToolCallState;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function OperationMark({ icon, status, }: {
+    icon: ToolCallIcon;
+    status: ToolCallState;
+}): import("react").JSX.Element;
+export declare function OperationGlyph({ icon, className, }: {
+    icon: ToolCallIcon;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function StatePill({ children, destructive, }: {
+    children: string;
+    destructive?: boolean;
+}): import("react").JSX.Element;

package/dist/components/operation-icons.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BrainIcon, CalendarClockIcon, CompassIcon, FileTextIcon, ListTodoIcon, MessageCircleQuestionIcon, SearchIcon, SquareTerminalIcon, UsersIcon, WrenchIcon, } from "lucide-react";
+import { cx } from "./primitives/cx.js";
+const OPERATION_GLYPHS = {
+    search: SearchIcon,
+    file: FileTextIcon,
+    terminal: SquareTerminalIcon,
+    question: MessageCircleQuestionIcon,
+    memory: BrainIcon,
+    delegation: UsersIcon,
+    routine: CalendarClockIcon,
+    todo: ListTodoIcon,
+    navigation: CompassIcon,
+    generic: WrenchIcon,
+};
+const STATE_WORDS = {
+    "input-streaming": "Queued",
+    "input-available": "Running",
+    "output-available": "Completed",
+    "output-error": "Failed",
+    denied: "Not approved",
+    cancelled: "Interrupted",
+    refused: "Declined",
+    superseded: "Interrupted",
+};
+export function OperationMarkFrame({ status, children, }) {
+    return (_jsxs("span", { "data-tf-op-mark": "", "data-tf-op-state": status, className: cx("tf:grid tf:size-4 tf:shrink-0 tf:place-items-center", status === "input-streaming" && "tf:opacity-45", status === "output-error" && "tf:text-tf-destructive"), children: [children, _jsx("span", { className: "tf:sr-only", children: STATE_WORDS[status] })] }));
+}
+export function OperationMark({ icon, status, }) {
+    const Glyph = OPERATION_GLYPHS[icon];
+    return (_jsx(OperationMarkFrame, { status: status, children: _jsx(Glyph, { "aria-hidden": true, className: "tf:size-4" }) }));
+}
+export function OperationGlyph({ icon, className, }) {
+    const Glyph = OPERATION_GLYPHS[icon];
+    return _jsx(Glyph, { "aria-hidden": true, className: cx("tf:size-4", className) });
+}
+export function StatePill({ children, destructive = false, }) {
+    return (_jsx("span", { "data-tf-state-pill": "", className: cx("tf:shrink-0 tf:rounded-full tf:border tf:border-tf-border tf:px-1.5 tf:py-px tf:text-xs tf:leading-4 tf:whitespace-nowrap", destructive && "tf:text-tf-destructive"), children: children }));
+}

package/dist/components/pretty-print.d.ts

@@ -0,0 +1 @@
+export declare function prettyPrintParameters(parameters: unknown): string;

package/dist/components/pretty-print.js

@@ -0,0 +1,9 @@
+export function prettyPrintParameters(parameters) {
+    if (parameters === undefined || parameters === null) {
+        return "";
+    }
+    if (typeof parameters === "string") {
+        return parameters;
+    }
+    return JSON.stringify(parameters, null, 2);
+}

package/dist/components/primitives/autofocus.d.ts

@@ -0,0 +1 @@
+export declare function focusAutofocusTarget(surface: HTMLElement, stillShowing: () => boolean): void;

package/dist/components/primitives/autofocus.js

@@ -0,0 +1,12 @@
+export function focusAutofocusTarget(surface, stillShowing) {
+    const target = surface.querySelector("[data-tf-autofocus]");
+    if (target !== null) {
+        target.focus();
+        return;
+    }
+    requestAnimationFrame(() => {
+        if (stillShowing()) {
+            surface.querySelector("[data-tf-autofocus]")?.focus();
+        }
+    });
+}

package/dist/components/primitives/button.d.ts

@@ -0,0 +1,10 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+export type TfButtonVariant = "primary" | "ghost" | "send" | "stop" | "icon" | "iconFloating" | "row" | "rowAction" | "rowTouch" | "rowActionTouch" | "prompt" | "bare" | "chip" | "chipQuiet" | "outline" | "answerRow";
+interface TfButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: TfButtonVariant;
+}
+export declare const TfButton: import("react").ForwardRefExoticComponent<TfButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function TfLinkButton({ variant, className, children, ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & {
+    variant?: TfButtonVariant;
+}): import("react").JSX.Element;
+export {};

package/dist/components/primitives/button.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+const VARIANT_CLASSES = {
+    primary: "tf:justify-center tf:rounded-full tf:border-0 tf:px-3 tf:py-1.5 tf:text-tf-label tf:font-medium " +
+        "tf:bg-tf-primary tf:text-tf-primary-foreground tf:shadow-tf-control " +
+        "tf:hover:opacity-90 tf:disabled:opacity-50",
+    ghost: "tf:justify-center tf:rounded-tf tf:border-0 tf:px-3 tf:py-1.5 tf:text-tf-label tf:font-medium " +
+        "tf:bg-tf-transparent tf:text-tf-foreground tf:hover:bg-tf-accent tf:disabled:opacity-50",
+    send: "tf:size-8 tf:shrink-0 tf:justify-center tf:rounded-full tf:border-0 " +
+        "tf:bg-tf-primary tf:text-tf-primary-foreground tf:shadow-tf-control " +
+        "tf:hover:opacity-90 tf:disabled:bg-tf-muted tf:disabled:text-tf-muted-foreground " +
+        "tf:disabled:opacity-100 tf:disabled:shadow-none",
+    stop: "tf:size-8 tf:shrink-0 tf:justify-center tf:rounded-full tf:border-0 " +
+        "tf:bg-tf-primary tf:text-tf-primary-foreground tf:shadow-tf-control " +
+        "tf:hover:opacity-90 tf:aria-disabled:cursor-not-allowed tf:aria-disabled:opacity-70",
+    icon: "tf:size-7 tf:justify-center tf:rounded-tf tf:border-0 tf:bg-tf-transparent tf:text-tf-muted-foreground " +
+        "tf:hover:bg-tf-accent tf:hover:text-tf-foreground tf:disabled:opacity-50",
+    iconFloating: "tf:justify-center tf:rounded-full tf:border tf:bg-tf-background " +
+        "tf:text-tf-muted-foreground tf:shadow-tf-control " +
+        "tf:hover:bg-tf-accent tf:hover:text-tf-foreground tf:disabled:opacity-50",
+    row: "tf:h-8 tf:w-full tf:justify-start tf:rounded-tf tf:border-0 tf:px-2.5 tf:text-left tf:text-sm tf:font-medium " +
+        "tf:bg-tf-transparent tf:text-tf-muted-foreground tf:hover:bg-tf-accent " +
+        "tf:hover:text-tf-foreground tf:aria-[current=true]:bg-tf-accent " +
+        "tf:aria-[current=true]:text-tf-foreground tf:disabled:opacity-50",
+    rowAction: "tf:h-9 tf:w-full tf:justify-start tf:gap-2 tf:rounded-tf tf:border-0 tf:px-2.5 tf:text-left tf:text-sm " +
+        "tf:font-medium tf:bg-tf-transparent tf:text-tf-foreground tf:hover:bg-tf-accent " +
+        "tf:disabled:opacity-50",
+    rowTouch: "tf:h-11 tf:w-full tf:justify-start tf:gap-2 tf:rounded-tf tf:border-0 tf:px-3 tf:text-left " +
+        "tf:text-tf-body tf:font-medium tf:bg-tf-transparent tf:text-tf-muted-foreground " +
+        "tf:hover:bg-tf-accent tf:hover:text-tf-foreground " +
+        "tf:aria-[current=true]:bg-tf-accent tf:aria-[current=true]:text-tf-foreground " +
+        "tf:disabled:opacity-50",
+    rowActionTouch: "tf:h-11 tf:w-full tf:justify-start tf:gap-2 tf:rounded-tf tf:border-0 tf:px-3 tf:text-left " +
+        "tf:text-tf-body tf:font-medium tf:bg-tf-transparent tf:text-tf-foreground " +
+        "tf:hover:bg-tf-accent tf:disabled:opacity-50",
+    prompt: "tf:min-h-11 tf:w-full tf:justify-start tf:gap-2.5 tf:rounded-tf tf:border-0 tf:px-4 tf:py-2 " +
+        "tf:text-left tf:text-tf-label tf:bg-tf-transparent tf:text-tf-foreground " +
+        "tf:hover:bg-tf-accent tf:disabled:opacity-50 " +
+        "tf:[&_[data-tf-prompt-mark]]:text-tf-muted-foreground " +
+        "tf:[&_[data-tf-prompt-go]]:opacity-0 tf:[&_[data-tf-prompt-go]]:transition-opacity " +
+        "tf:hover:[&_[data-tf-prompt-go]]:opacity-100 " +
+        "tf:focus-visible:[&_[data-tf-prompt-go]]:opacity-100 " +
+        "tf:pointer-coarse:[&_[data-tf-prompt-go]]:opacity-100",
+    bare: "tf:rounded-tf tf:border-0 tf:bg-tf-transparent tf:p-0 tf:text-inherit tf:disabled:opacity-50",
+    chip: "tf:rounded-full tf:border-0 tf:px-2 tf:py-1 tf:text-tf-label tf:font-medium " +
+        "tf:bg-tf-transparent tf:text-tf-foreground tf:hover:bg-tf-accent " +
+        "tf:disabled:opacity-50",
+    chipQuiet: "tf:rounded-full tf:border-0 tf:px-2 tf:py-1 tf:text-tf-label tf:font-medium " +
+        "tf:bg-tf-transparent tf:text-tf-muted-foreground tf:hover:bg-tf-accent " +
+        "tf:hover:text-tf-foreground tf:disabled:opacity-50",
+    outline: "tf:justify-center tf:rounded-full tf:border tf:px-2.5 tf:py-[5px] tf:text-tf-label tf:font-medium " +
+        "tf:bg-tf-background tf:text-tf-foreground tf:shadow-tf-control " +
+        "tf:hover:bg-tf-accent tf:disabled:opacity-50",
+    answerRow: "tf:min-h-11 tf:w-full tf:items-start tf:justify-start tf:gap-3 tf:rounded-tf tf:border-0 " +
+        "tf:bg-tf-transparent tf:px-3 tf:py-2.5 tf:text-left tf:text-tf-label tf:text-tf-foreground " +
+        "tf:wrap-anywhere tf:hover:bg-tf-accent tf:disabled:opacity-50 " +
+        "tf:aria-checked:bg-tf-emphasis",
+};
+export const TfButton = forwardRef(function TfButton({ variant = "primary", className, type, ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: type ?? "button", className: cx("tf:appearance-none", "tf:inline-flex tf:items-center tf:gap-1.5 tf:transition-colors", "tf:focus-visible:outline-2 tf:focus-visible:outline-offset-2 tf:focus-visible:outline-tf-ring", "tf:disabled:cursor-not-allowed", VARIANT_CLASSES[variant], className), ...props }));
+});
+export function TfLinkButton({ variant = "primary", className, children, ...props }) {
+    return (_jsx("a", { className: cx("tf:appearance-none tf:no-underline", "tf:inline-flex tf:items-center tf:gap-1.5 tf:transition-colors", "tf:focus-visible:outline-2 tf:focus-visible:outline-offset-2 tf:focus-visible:outline-tf-ring", VARIANT_CLASSES[variant], className), ...props, children: children }));
+}

package/dist/components/primitives/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...parts: (string | false | null | undefined)[]): string;

package/dist/components/primitives/cx.js

@@ -0,0 +1,3 @@
+export function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}

package/dist/components/primitives/dialog.d.ts

@@ -0,0 +1,7 @@
+import { type DialogHTMLAttributes } from "react";
+interface TfDialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "open"> {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function TfDialog({ open, onOpenChange, className, children, onPointerDown: onHostPointerDown, ...props }: TfDialogProps): import("react").JSX.Element;
+export {};

package/dist/components/primitives/dialog.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, } from "react";
+import { focusAutofocusTarget } from "./autofocus.js";
+import { cx } from "./cx.js";
+export function TfDialog({ open, onOpenChange, className, children, onPointerDown: onHostPointerDown, ...props }) {
+    const dialogRef = useRef(null);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (dialog === null) {
+            return;
+        }
+        if (open && !dialog.open) {
+            dialog.showModal();
+            focusAutofocusTarget(dialog, () => dialog.open);
+        }
+        else if (!open && dialog.open) {
+            dialog.close();
+        }
+    }, [open]);
+    const closeFromCancel = useCallback((event) => {
+        event.preventDefault();
+        onOpenChange(false);
+    }, [onOpenChange]);
+    const closeFromNativeClose = useCallback(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
+    const pressBeganOnBackdropRef = useRef(false);
+    const trackPressOrigin = useCallback((event) => {
+        pressBeganOnBackdropRef.current = event.target === event.currentTarget;
+        onHostPointerDown?.(event);
+    }, [onHostPointerDown]);
+    const closeFromBackdropClick = useCallback((event) => {
+        if (event.target === event.currentTarget &&
+            pressBeganOnBackdropRef.current) {
+            onOpenChange(false);
+        }
+    }, [onOpenChange]);
+    return (_jsx("dialog", { ref: dialogRef, className: cx("tf:hidden tf:p-0 tf:open:flex!", className), onCancel: closeFromCancel, onClose: closeFromNativeClose, onPointerDown: trackPressOrigin, onClick: closeFromBackdropClick, ...props, children: children }));
+}

package/dist/components/primitives/disclosure.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+type DisclosureVariant = "framed" | "bare";
+interface DisclosureProps {
+    summary: ReactNode;
+    children: ReactNode;
+    variant?: DisclosureVariant;
+    open?: boolean;
+    className?: string;
+    summaryClassName?: string;
+    bodyClassName?: string;
+    rootDataAttributes?: Record<`data-${string}`, string>;
+}
+interface DisclosureVisualState {
+    open: boolean;
+    summaryActive: boolean;
+}
+export declare function useDisclosureVisualState(): DisclosureVisualState | null;
+export declare function Disclosure({ summary, children, variant, open, className, summaryClassName, bodyClassName, rootDataAttributes, }: DisclosureProps): import("react").JSX.Element;
+export declare function DisclosureChevron({ revealOnInteraction, }?: {
+    revealOnInteraction?: boolean;
+}): import("react").JSX.Element;
+export {};

package/dist/components/primitives/disclosure.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+import { cx } from "./cx.js";
+const DisclosureVisualStateContext = createContext(null);
+export function useDisclosureVisualState() {
+    return useContext(DisclosureVisualStateContext);
+}
+export function Disclosure({ summary, children, variant = "framed", open, className, summaryClassName, bodyClassName, rootDataAttributes, }) {
+    const [nativeOpen, setNativeOpen] = useState(open === true);
+    const [summaryActive, setSummaryActive] = useState(false);
+    return (_jsxs("details", { ...rootDataAttributes, open: open, onToggle: (event) => {
+            setNativeOpen(event.currentTarget.open);
+        }, className: cx(variant === "framed" && "tf:rounded-tf tf:border", className), children: [_jsx("summary", { onMouseEnter: () => {
+                    setSummaryActive(true);
+                }, onMouseLeave: () => {
+                    setSummaryActive(false);
+                }, onFocus: () => {
+                    setSummaryActive(true);
+                }, onBlur: () => {
+                    setSummaryActive(false);
+                }, className: cx("tf:cursor-pointer tf:list-none tf:select-none tf:[&::-webkit-details-marker]:hidden", "tf:focus-visible:outline-2 tf:focus-visible:outline-offset-2 tf:focus-visible:outline-tf-ring", variant === "framed" &&
+                    "tf:flex tf:items-center tf:gap-2 tf:px-3 tf:py-1.5 tf:text-tf-label", summaryClassName), children: _jsx(DisclosureVisualStateContext.Provider, { value: { open: nativeOpen, summaryActive }, children: summary }) }), _jsx("div", { className: cx(variant === "framed" && "tf:border-t tf:px-3 tf:py-2", bodyClassName), children: children })] }));
+}
+export function DisclosureChevron({ revealOnInteraction = false, } = {}) {
+    const visualState = useContext(DisclosureVisualStateContext);
+    const isOpen = visualState?.open === true;
+    const visible = !revealOnInteraction || isOpen || visualState?.summaryActive === true;
+    return (_jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", "data-tf-disclosure-chevron": "", "data-tf-disclosure-chevron-visible": visible ? "" : undefined, "data-tf-disclosure-chevron-open": isOpen ? "" : undefined, opacity: revealOnInteraction ? (visible ? 1 : 0) : 1, className: cx("tf:size-3.5 tf:shrink-0 tf:text-tf-muted-foreground", isOpen ? "tf:rotate-90" : "tf:rotate-0", revealOnInteraction
+            ? "tf:transition-[opacity,transform]"
+            : "tf:transition-transform"), children: _jsx("path", { d: "M6 4l4 4-4 4", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/components/primitives/file-input.d.ts

@@ -0,0 +1,5 @@
+export declare const TfFileInput: import("react").ForwardRefExoticComponent<{
+    accept?: string;
+    multiple?: boolean;
+    onPickFiles: (files: FileList | null) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/primitives/file-input.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+export const TfFileInput = forwardRef(function TfFileInput({ accept, multiple = false, onPickFiles }, ref) {
+    return (_jsx("input", { ref: ref, type: "file", accept: accept, multiple: multiple, className: "tf:sr-only", tabIndex: -1, "aria-hidden": "true", onChange: (event) => {
+            onPickFiles(event.target.files);
+            event.target.value = "";
+        } }));
+});

package/dist/components/primitives/floating-panel.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+type FloatingPanelCorner = "bottom-right" | "bottom-left";
+type FloatingPanelDock = "floating" | "sidebar";
+interface TfFloatingPanelProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    corner?: FloatingPanelCorner;
+    dock?: FloatingPanelDock;
+    "aria-label": string;
+    focusOnOpen: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare function TfFloatingPanel({ open, onOpenChange, corner, dock, focusOnOpen, className, children, ...props }: TfFloatingPanelProps): import("react").JSX.Element;
+export {};

package/dist/components/primitives/floating-panel.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, } from "react";
+import { useLatestRef } from "../use-latest-ref.js";
+import { focusAutofocusTarget } from "./autofocus.js";
+import { cx } from "./cx.js";
+import { useDockReflow } from "./use-dock-reflow.js";
+import { useSwipeDismiss } from "./use-swipe-dismiss.js";
+function _activeElementNear(panel) {
+    const root = panel.getRootNode();
+    return root instanceof Document || root instanceof ShadowRoot
+        ? root.activeElement
+        : null;
+}
+function _returnFocusToOpener(panel, opener) {
+    if (!panel.contains(_activeElementNear(panel))) {
+        return;
+    }
+    if (opener instanceof HTMLElement && opener.isConnected) {
+        opener.focus();
+    }
+}
+export function TfFloatingPanel({ open, onOpenChange, corner = "bottom-right", dock = "floating", focusOnOpen, className, children, ...props }) {
+    const panelRef = useRef(null);
+    const parkOnForcedHide = usePopoverPresence(panelRef, open, focusOnOpen);
+    const closeFromEscape = useCallback((event) => {
+        if (event.key !== "Escape" || event.defaultPrevented) {
+            return;
+        }
+        event.stopPropagation();
+        onOpenChange(false);
+    }, [onOpenChange]);
+    const dismiss = useCallback(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
+    const swipe = useSwipeDismiss({
+        axis: "y",
+        direction: 1,
+        open,
+        enabled: dock === "floating",
+        onDismiss: dismiss,
+        handleSelector: "[data-tf-swipe-handle]",
+    });
+    useDockReflow(panelRef, dock);
+    return (_jsx("div", { ref: panelRef, popover: "manual", role: "dialog", "data-tf-assistant": "", "data-tf-floating-panel": corner, "data-tf-panel-dock": dock, "data-tf-glass": dock === "floating" ? "" : undefined, onToggle: parkOnForcedHide, onKeyDown: closeFromEscape, onPointerDown: swipe.onPointerDown, onPointerMove: swipe.onPointerMove, onPointerUp: swipe.onPointerUp, onPointerCancel: swipe.onPointerCancel, onClickCapture: swipe.onClickCapture, className: cx("tf:m-0 tf:hidden tf:p-0 tf:open:flex!", "tf:flex-col tf:overflow-hidden tf:text-tf-foreground", dock === "sidebar"
+            ?
+                "tf:inset-y-0 tf:right-0 tf:left-auto tf:h-dvh tf:w-104 tf:max-w-[calc(100vw-2rem)] tf:rounded-none tf:bg-tf-background tf:shadow-none"
+            : cx("tf:inset-auto tf:bottom-4 tf:w-[clamp(24rem,44vw,46rem)] tf:max-w-[calc(100vw-2rem)]", "tf:h-[min(68dvh,52rem,calc(100dvh-6rem))]", "tf:rounded-3xl tf:border", corner === "bottom-left" ? "tf:left-4" : "tf:right-4"), className), ...props, children: children }));
+}
+function usePopoverPresence(panelRef, open, focusOnOpen) {
+    const openerRef = useRef(null);
+    const focusOnOpenRef = useLatestRef(focusOnOpen);
+    const yieldedRef = useRef(false);
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (panel === null) {
+            return;
+        }
+        if (open) {
+            panel.removeAttribute("inert");
+        }
+        if (typeof panel.showPopover === "function") {
+            const showing = panel.matches(":popover-open");
+            if (open && !showing && !yieldedRef.current) {
+                openerRef.current = _activeElementNear(panel);
+                panel.showPopover();
+                if (focusOnOpenRef.current) {
+                    focusAutofocusTarget(panel, () => panel.matches(":popover-open"));
+                }
+            }
+            else if (!open) {
+                if (showing) {
+                    _returnFocusToOpener(panel, openerRef.current);
+                    panel.hidePopover();
+                }
+                yieldedRef.current = false;
+            }
+        }
+        if (!open) {
+            panel.setAttribute("inert", "");
+        }
+    }, [panelRef, open, focusOnOpenRef]);
+    const parkOnForcedHide = useCallback((event) => {
+        if (event.newState === "closed" && open) {
+            yieldedRef.current = true;
+        }
+    }, [open]);
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (!open || panel === null || typeof panel.showPopover !== "function") {
+            return;
+        }
+        const doc = panel.ownerDocument;
+        const restoreWhenClear = () => {
+            if (!yieldedRef.current ||
+                doc.querySelector("dialog:modal") !== null ||
+                doc.fullscreenElement !== null) {
+                return;
+            }
+            if (!panel.matches(":popover-open")) {
+                panel.showPopover();
+            }
+            yieldedRef.current = false;
+        };
+        doc.addEventListener("close", restoreWhenClear, true);
+        doc.addEventListener("fullscreenchange", restoreWhenClear);
+        return () => {
+            doc.removeEventListener("close", restoreWhenClear, true);
+            doc.removeEventListener("fullscreenchange", restoreWhenClear);
+        };
+    }, [panelRef, open]);
+    return parkOnForcedHide;
+}

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

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithoutRef } from "react";
+export declare function Kbd({ className, ...props }: ComponentPropsWithoutRef<"kbd">): import("react").JSX.Element;

package/dist/components/primitives/kbd.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+export function Kbd({ className, ...props }) {
+    return (_jsx("kbd", { className: cx("tf:inline-flex tf:h-5 tf:min-w-5 tf:items-center tf:justify-center tf:gap-0.5 tf:rounded-tf", "tf:border tf:border-tf-input tf:bg-tf-transparent tf:px-1 tf:font-tf-sans tf:text-xs", "tf:leading-none tf:whitespace-nowrap tf:text-tf-muted-foreground", className), ...props }));
+}

package/dist/components/primitives/sheet.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+interface TfSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    side: "left" | "right";
+    "aria-label": string;
+    className?: string;
+    children: ReactNode;
+}
+export declare function TfSheet({ open, onOpenChange, side, className, children, ...props }: TfSheetProps): import("react").JSX.Element;
+export {};

package/dist/components/primitives/sheet.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { cx } from "./cx.js";
+import { TfDialog } from "./dialog.js";
+import { useSwipeDismiss } from "./use-swipe-dismiss.js";
+export function TfSheet({ open, onOpenChange, side, className, children, ...props }) {
+    const dismiss = useCallback(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
+    const swipe = useSwipeDismiss({
+        axis: "x",
+        direction: side === "left" ? -1 : 1,
+        open,
+        onDismiss: dismiss,
+    });
+    return (_jsx(TfDialog, { open: open, onOpenChange: onOpenChange, "data-tf-sheet": side, "data-tf-glass": "", onPointerDown: swipe.onPointerDown, onPointerMove: swipe.onPointerMove, onPointerUp: swipe.onPointerUp, onPointerCancel: swipe.onPointerCancel, onClickCapture: swipe.onClickCapture, className: cx("tf:m-0 tf:h-dvh tf:max-h-dvh tf:w-80 tf:max-w-[calc(100vw-3rem)] tf:flex-col", "tf:overflow-hidden tf:text-tf-foreground", side === "left" ? "tf:mr-auto" : "tf:ml-auto", className), ...props, children: children }));
+}