@teaflask/assistant 0.0.0 → 0.6.0

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

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef } from "react";
+type TfTextareaVariant = "framed" | "bare";
+interface TfTextareaProps extends ComponentPropsWithoutRef<"textarea"> {
+    variant?: TfTextareaVariant;
+}
+export declare const TfTextarea: import("react").ForwardRefExoticComponent<TfTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/components/primitives/textarea.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "./cx.js";
+const VARIANT_CLASSES = {
+    framed: "tf:rounded-tf tf:border tf:border-tf-input tf:bg-tf-background tf:px-3 tf:py-2 " +
+        "tf:text-tf-label " +
+        "tf:focus-visible:outline-2 tf:focus-visible:outline-offset-1 tf:focus-visible:outline-tf-ring",
+    bare: "tf:border-0 tf:bg-transparent tf:px-2 tf:py-1.5 tf:text-tf-body tf:focus-visible:outline-none",
+};
+export const TfTextarea = forwardRef(function TfTextarea({ variant = "framed", className, ...props }, ref) {
+    return (_jsx("textarea", { ref: ref, className: cx("tf:w-full tf:resize-none tf:text-tf-foreground", "tf:placeholder:text-tf-muted-foreground", "tf:disabled:cursor-not-allowed tf:disabled:opacity-50", VARIANT_CLASSES[variant], className), ...props }));
+});

package/dist/components/primitives/use-dock-reflow.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from "react";
+export declare function useDockReflow(panelRef: RefObject<HTMLDivElement | null>, dock: "floating" | "sidebar"): void;

package/dist/components/primitives/use-dock-reflow.js

@@ -0,0 +1,30 @@
+"use client";
+import { useEffect } from "react";
+import { dockReflowFor } from "../../core/dock-reflow.js";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+export function useDockReflow(panelRef, dock) {
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (dock !== "sidebar" ||
+            panel === null ||
+            typeof panel.showPopover !== "function") {
+            return;
+        }
+        const controller = dockReflowFor(panel.ownerDocument.documentElement);
+        const reduceMotion = () => (panel.ownerDocument.defaultView ?? window).matchMedia(REDUCED_MOTION_QUERY).matches || panel.closest('[data-reduce-motion="true"]') !== null;
+        const syncPushToVisibility = () => {
+            if (panel.matches(":popover-open")) {
+                controller.push(panel.offsetWidth, reduceMotion());
+            }
+            else {
+                controller.release();
+            }
+        };
+        panel.addEventListener("toggle", syncPushToVisibility);
+        syncPushToVisibility();
+        return () => {
+            panel.removeEventListener("toggle", syncPushToVisibility);
+            controller.release();
+        };
+    }, [panelRef, dock]);
+}

package/dist/components/primitives/use-swipe-dismiss.d.ts

@@ -0,0 +1,17 @@
+import { type MouseEvent, type PointerEvent } from "react";
+export interface SwipeDismissOptions {
+    axis: "x" | "y";
+    direction: 1 | -1;
+    open: boolean;
+    enabled?: boolean;
+    onDismiss: () => void;
+    handleSelector?: string;
+}
+export interface SwipeDismissHandlers {
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+    onPointerUp: (event: PointerEvent<HTMLElement>) => void;
+    onPointerCancel: (event: PointerEvent<HTMLElement>) => void;
+    onClickCapture: (event: MouseEvent<HTMLElement>) => void;
+}
+export declare function useSwipeDismiss({ axis, direction, open, enabled, onDismiss, handleSelector, }: SwipeDismissOptions): SwipeDismissHandlers;

package/dist/components/primitives/use-swipe-dismiss.js

@@ -0,0 +1,152 @@
+"use client";
+import { useCallback, useEffect, useRef, } from "react";
+const DISMISS_TRAVEL_FRACTION = 0.25;
+const DISMISS_VELOCITY_PX_PER_MS = 0.5;
+const FLICK_GOES_STALE_AFTER_MS = 100;
+const DRAG_SLOP_PX = 8;
+function _releasePanel(panel, pointerId) {
+    delete panel.dataset.tfSwipeDragging;
+    panel.style.removeProperty("--_tf-swipe-drag");
+    if (panel.hasPointerCapture(pointerId)) {
+        panel.releasePointerCapture(pointerId);
+    }
+}
+export function useSwipeDismiss({ axis, direction, open, enabled = true, onDismiss, handleSelector, }) {
+    const drag = useRef(null);
+    const swipedRatherThanTapped = useRef(false);
+    const panelRef = useRef(null);
+    useEffect(() => {
+        if (open) {
+            swipedRatherThanTapped.current = false;
+        }
+        const inFlight = drag.current;
+        if (inFlight !== null && panelRef.current !== null) {
+            drag.current = null;
+            _releasePanel(panelRef.current, inFlight.pointerId);
+        }
+    }, [open, enabled]);
+    const beginDrag = useCallback((event) => {
+        swipedRatherThanTapped.current = false;
+        panelRef.current = event.currentTarget;
+        if (!enabled || !_pressBeginsDrag(event, handleSelector)) {
+            return;
+        }
+        if (drag.current !== null) {
+            return;
+        }
+        drag.current = _beginDragStateOf(_sampleOf(event, axis));
+    }, [axis, enabled, handleSelector]);
+    const trackDrag = useCallback((event) => {
+        const state = drag.current;
+        if (event.pointerId !== state?.pointerId) {
+            return;
+        }
+        drag.current = _trackedDragOf(state, _sampleOf(event, axis), event.currentTarget, direction);
+    }, [axis, direction]);
+    const endDrag = useCallback((event) => {
+        const state = drag.current;
+        if (event.pointerId !== state?.pointerId) {
+            return;
+        }
+        drag.current = null;
+        const panel = event.currentTarget;
+        _releasePanel(panel, event.pointerId);
+        if (!state.committed) {
+            return;
+        }
+        swipedRatherThanTapped.current = true;
+        if (_dragDismisses(state, _sampleOf(event, axis), panel, axis, direction)) {
+            onDismiss();
+        }
+    }, [axis, direction, onDismiss]);
+    const cancelDrag = useCallback((event) => {
+        const state = drag.current;
+        if (event.pointerId !== state?.pointerId) {
+            return;
+        }
+        drag.current = null;
+        _releasePanel(event.currentTarget, event.pointerId);
+    }, []);
+    const swallowTheClickAfterASwipe = useCallback((event) => {
+        if (!swipedRatherThanTapped.current) {
+            return;
+        }
+        swipedRatherThanTapped.current = false;
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
+    return {
+        onPointerDown: beginDrag,
+        onPointerMove: trackDrag,
+        onPointerUp: endDrag,
+        onPointerCancel: cancelDrag,
+        onClickCapture: swallowTheClickAfterASwipe,
+    };
+}
+function _sampleOf(event, axis) {
+    return {
+        pointerId: event.pointerId,
+        main: axis === "x" ? event.clientX : event.clientY,
+        cross: axis === "x" ? event.clientY : event.clientX,
+        timeStamp: event.timeStamp,
+    };
+}
+function _pressBeginsDrag(event, handleSelector) {
+    if (event.pointerType !== "touch" || event.target === event.currentTarget) {
+        return false;
+    }
+    if (handleSelector !== undefined &&
+        !(event.target instanceof Element &&
+            event.target.closest(handleSelector) !== null)) {
+        return false;
+    }
+    return true;
+}
+function _beginDragStateOf(sample) {
+    return {
+        pointerId: sample.pointerId,
+        startMain: sample.main,
+        startCross: sample.cross,
+        lastMain: sample.main,
+        lastT: sample.timeStamp,
+        velocity: 0,
+        committed: false,
+    };
+}
+function _trackedDragOf(state, sample, panel, direction) {
+    const dMain = sample.main - state.startMain;
+    const dCross = sample.cross - state.startCross;
+    const closing = direction * dMain;
+    if (!state.committed) {
+        if (Math.abs(dCross) >= DRAG_SLOP_PX &&
+            Math.abs(dCross) >= Math.abs(dMain)) {
+            return null;
+        }
+        if (closing < DRAG_SLOP_PX) {
+            return state;
+        }
+        state.committed = true;
+        panel.dataset.tfSwipeDragging = "";
+        try {
+            panel.setPointerCapture(sample.pointerId);
+        }
+        catch {
+        }
+    }
+    const elapsed = sample.timeStamp - state.lastT;
+    if (elapsed > 0) {
+        state.velocity = (sample.main - state.lastMain) / elapsed;
+        state.lastMain = sample.main;
+        state.lastT = sample.timeStamp;
+    }
+    const offset = Math.max(0, closing);
+    panel.style.setProperty("--_tf-swipe-drag", `${String(direction * offset)}px`);
+    return state;
+}
+function _dragDismisses(state, sample, panel, axis, direction) {
+    const travelled = Math.max(0, direction * (sample.main - state.startMain));
+    const stillMoving = sample.timeStamp - state.lastT <= FLICK_GOES_STALE_AFTER_MS;
+    const flicked = stillMoving && direction * state.velocity > DISMISS_VELOCITY_PX_PER_MS;
+    const extent = axis === "x" ? panel.offsetWidth : panel.offsetHeight;
+    return flicked || travelled > extent * DISMISS_TRAVEL_FRACTION;
+}

package/dist/components/provider-chip.d.ts

@@ -0,0 +1,8 @@
+import type { SubscriptionStatus } from "../contract/subscriptions.js";
+export declare function ProviderChipShelf(): import("react").JSX.Element | null;
+export declare function ProviderChip({ statuses, open, onOpenChange, fundingNote, }: {
+    statuses: SubscriptionStatus[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    fundingNote?: string;
+}): import("react").JSX.Element;

package/dist/components/provider-chip.js

@@ -0,0 +1,135 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDownIcon, OpenAiMarkIcon } from "./icons.js";
+import { TfButton } from "./primitives/button.js";
+import { ProviderConnectSection, providerNameOf, } from "./subscription-connect-flow.js";
+import { useRefreshStandingAndGate } from "./subscription-recheck.js";
+import { useAssistantSession, useOptionalAssistantSession, } from "./teaflask-assistant-provider.js";
+import { useCell } from "./use-store-cell.js";
+export function ProviderChipShelf() {
+    const session = useOptionalAssistantSession();
+    if (session === null) {
+        return null;
+    }
+    return _jsx(MountedProviderChipShelf, {});
+}
+function MountedProviderChipShelf() {
+    const session = useAssistantSession();
+    const statuses = useCell(session.subscriptions);
+    const [open, setOpen] = useState(false);
+    const identified = session.tier === "identified";
+    useEffect(() => {
+        if (identified) {
+            session.ensureSubscriptions();
+        }
+    }, [identified, session]);
+    const connectable = (statuses ?? []).filter((status) => status.offered || status.connected);
+    const chipShown = identified && connectable.length > 0;
+    const openRequested = useCell(session.connectOpenRequested);
+    if (openRequested && chipShown && !open) {
+        setOpen(true);
+    }
+    if (!chipShown && open) {
+        setOpen(false);
+    }
+    useEffect(() => {
+        if (openRequested && open && chipShown) {
+            session.acknowledgeSubscriptionConnect();
+        }
+    }, [openRequested, open, chipShown, session]);
+    if (!chipShown) {
+        return null;
+    }
+    return (_jsx("div", { className: "tf:relative tf:mt-1.5 tf:flex tf:items-center tf:justify-end tf:px-1", children: _jsx(ProviderChip, { statuses: connectable, open: open, onOpenChange: setOpen }) }));
+}
+export function ProviderChip({ statuses, open, onOpenChange, fundingNote, }) {
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        const menu = menuRef.current;
+        if (!open || menu === null) {
+            return;
+        }
+        const closeUnlessInside = (event) => {
+            const path = event.composedPath();
+            if (path.includes(menu)) {
+                return;
+            }
+            const trigger = triggerRef.current;
+            if (trigger !== null && path.includes(trigger)) {
+                return;
+            }
+            onOpenChange(false);
+        };
+        const doc = menu.ownerDocument;
+        doc.addEventListener("pointerdown", closeUnlessInside);
+        return () => {
+            doc.removeEventListener("pointerdown", closeUnlessInside);
+        };
+    }, [open, onOpenChange]);
+    const session = useAssistantSession();
+    const identified = session.tier === "identified";
+    useEffect(() => {
+        if (open && identified) {
+            session.refreshSubscriptions();
+        }
+    }, [open, identified, session]);
+    const headline = _chipHeadlineOf(statuses);
+    return (_jsxs(_Fragment, { children: [_jsxs(TfButton, { ref: triggerRef, variant: headline.connected ? "chipQuiet" : "chip", "aria-expanded": open, "aria-controls": "tf-provider-chip-menu", "aria-label": headline.accessibleName, onClick: () => {
+                    onOpenChange(!open);
+                }, onKeyDown: (event) => {
+                    if (!open || event.key !== "Escape") {
+                        return;
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onOpenChange(false);
+                }, children: [_jsx(OpenAiMarkIcon, {}), _jsx("span", { className: "tf:whitespace-nowrap", children: headline.label }), _jsx(ChevronDownIcon, {})] }), open ? (_jsxs("div", { ref: menuRef, id: "tf-provider-chip-menu", role: "dialog", "aria-label": headline.accessibleName, "data-tf-glass": "", className: "tf:absolute tf:right-0 tf:bottom-full tf:mb-2 tf:flex tf:w-80 tf:max-w-[calc(100vw-2rem)] tf:flex-col tf:gap-3 tf:overflow-y-auto tf:rounded-2xl tf:border tf:p-3", onKeyDown: (event) => {
+                    if (event.key !== "Escape") {
+                        return;
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onOpenChange(false);
+                    triggerRef.current?.focus();
+                }, children: [fundingNote !== undefined ? (_jsx("p", { className: "tf:text-xs tf:text-tf-muted-foreground", children: fundingNote })) : null, _jsx(ProviderMenuSections, { statuses: statuses })] })) : null] }));
+}
+function ProviderMenuSections({ statuses, }) {
+    const session = useAssistantSession();
+    const refreshStandingAndGate = useRefreshStandingAndGate();
+    return (_jsx(_Fragment, { children: statuses.map((status) => (_jsx(ProviderConnectSection, { status: status, session: session.session, refreshSubscriptions: session.refreshSubscriptions, refreshStandingAndGate: refreshStandingAndGate, onSignedIn: () => {
+                session.notePlanSignedIn(status.provider);
+            } }, status.provider))) }));
+}
+function _chipHeadlineOf(statuses) {
+    const holding = statuses.find((status) => status.connected) ?? statuses[0];
+    const name = providerNameOf(holding.provider);
+    if (!holding.connected) {
+        return {
+            label: `Sign in with ${name}`,
+            accessibleName: `Sign in with ${name}`,
+            connected: false,
+        };
+    }
+    if (holding.state === "verifying") {
+        return {
+            label: `${name} · verifying…`,
+            accessibleName: `${name} plan — verifying`,
+            connected: true,
+        };
+    }
+    if (holding.state === "bounced") {
+        const remedy = holding.bounce_cause === "quota" ? "limit reached" : "reconnect";
+        return {
+            label: `${name} · ${remedy}`,
+            accessibleName: `${name} plan — ${remedy}`,
+            connected: true,
+        };
+    }
+    return {
+        label: `Using ${name} plan`,
+        accessibleName: `Using ${name} plan`,
+        connected: true,
+    };
+}

package/dist/components/question-panel-answers.d.ts

@@ -0,0 +1,29 @@
+import type { KeyboardEvent, RefObject } from "react";
+import type { QuestionModel } from "../core/elicitation-pickers.js";
+import type { QuestionAnswerDraft } from "../core/question-drafts.js";
+export interface QuestionPanelIds {
+    hint: string;
+    prompt: string;
+    descriptionBase: string;
+    custom: string;
+}
+export declare function QuestionPanelAnswers({ question, active, customText, disabled, ids, openDescription, onToggleDescription, overLimitSentence, answersRef, foldBelow, onScroll, rowsRef, customRef, selectOption, activateCustomIfDrafted, setCustomText, optionKeys, customKeys, }: {
+    question: QuestionModel;
+    active: QuestionAnswerDraft["active"];
+    customText: string;
+    disabled: boolean;
+    ids: QuestionPanelIds;
+    openDescription: string | null;
+    onToggleDescription: (open: string | null) => void;
+    overLimitSentence: string | null;
+    answersRef: RefObject<HTMLDivElement | null>;
+    foldBelow: boolean;
+    onScroll: () => void;
+    rowsRef: RefObject<HTMLDivElement | null>;
+    customRef: RefObject<HTMLTextAreaElement | null>;
+    selectOption: (text: string) => void;
+    activateCustomIfDrafted: () => void;
+    setCustomText: (text: string) => void;
+    optionKeys: (index: number) => (event: KeyboardEvent<HTMLElement>) => void;
+    customKeys: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+}): import("react").JSX.Element;

package/dist/components/question-panel-answers.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon, CornerDownLeftIcon, InfoIcon, } from "lucide-react";
+import { Kbd } from "./primitives/kbd.js";
+import { TfButton } from "./primitives/button.js";
+import { TfTextarea } from "./primitives/textarea.js";
+const CUSTOM_ANSWER_PLACEHOLDER = "Custom answer";
+export function QuestionPanelAnswers({ question, active, customText, disabled, ids, openDescription, onToggleDescription, overLimitSentence, answersRef, foldBelow, onScroll, rowsRef, customRef, selectOption, activateCustomIfDrafted, setCustomText, optionKeys, customKeys, }) {
+    const tabStopIndex = tabStopIndexOf(question, active);
+    const customActive = active?.kind === "custom";
+    const reserveInfoColumn = reserveInfoColumnOf(question);
+    return (_jsxs("div", { ref: answersRef, className: "tf:mt-3 tf:flex tf:flex-col tf:gap-1", "data-tf-question-answers": "", "data-tf-has-options": question.options.length > 0 ? "" : undefined, "data-tf-fold-below": foldBelow ? "" : undefined, onScroll: onScroll, children: [_jsx("div", { ref: rowsRef, role: "radiogroup", "aria-labelledby": ids.prompt, "aria-describedby": ids.hint, className: "tf:flex tf:flex-col tf:gap-0.5", children: question.options.map((option, index) => (_jsx(AnswerOptionRow, { option: option, index: index, checked: active?.kind === "option" && active.text === option.text, tabStop: index === tabStopIndex, disabled: disabled, reserveInfoColumn: reserveInfoColumn, descriptionId: `${ids.descriptionBase}-${String(index)}`, descriptionOpen: openDescription === option.text, onToggleDescription: onToggleDescription, onSelect: selectOption, onKeyDown: optionKeys(index) }, option.text))) }), _jsx(CustomAnswerRow, { optionCount: question.options.length, customText: customText, customActive: customActive, disabled: disabled, ids: ids, reserveInfoColumn: reserveInfoColumn, customRef: customRef, onTextChange: setCustomText, onPointerDown: activateCustomIfDrafted, onKeyDown: customKeys }), overLimitSentence !== null ? (_jsx("p", { className: "tf:px-3 tf:text-tf-label tf:text-tf-destructive", "data-tf-question-over-limit": "", children: overLimitSentence })) : null] }));
+}
+function tabStopIndexOf(question, active) {
+    return active?.kind === "option"
+        ? Math.max(question.options.findIndex((option) => option.text === active.text), 0)
+        : 0;
+}
+function reserveInfoColumnOf(question) {
+    return question.options.some((option) => option.description !== null);
+}
+function AnswerOptionRow({ option, index, checked, tabStop, disabled, reserveInfoColumn, descriptionId, descriptionOpen, onToggleDescription, onSelect, onKeyDown, }) {
+    return (_jsxs("div", { className: "tf:flex tf:flex-col", children: [_jsxs("div", { className: "tf:flex tf:items-start tf:gap-1", children: [_jsxs(TfButton, { variant: "answerRow", role: "radio", "aria-checked": checked, "data-tf-answer-row": "", "data-tf-answer-index": index, tabIndex: tabStop ? 0 : -1, disabled: disabled, onClick: () => {
+                            onSelect(option.text);
+                        }, onKeyDown: onKeyDown, children: [_jsx("span", { "aria-hidden": true, className: "tf:w-5 tf:shrink-0 tf:tabular-nums tf:text-tf-muted-foreground", children: `${String(index + 1)}.` }), _jsx("span", { className: "tf:min-w-0 tf:flex-1", children: option.text }), checked ? _jsx(KeyHints, { hints: ["up", "down", "enter"] }) : null] }), option.description !== null ? (_jsx(TfButton, { variant: "icon", className: "tf:mt-2", "aria-label": `About "${option.text}"`, "aria-expanded": descriptionOpen, "aria-controls": descriptionOpen ? descriptionId : undefined, onClick: () => {
+                            onToggleDescription(descriptionOpen ? null : option.text);
+                        }, children: _jsx(InfoIcon, { "aria-hidden": true, className: "tf:size-4" }) })) : reserveInfoColumn ? (_jsx("span", { "aria-hidden": true, className: "tf:mt-2 tf:size-7 tf:shrink-0" })) : null] }), option.description !== null && descriptionOpen ? (_jsx("p", { id: descriptionId, "data-tf-answer-description": "", className: "tf:ps-11 tf:pe-3 tf:pb-2 tf:text-tf-label tf:text-tf-muted-foreground", children: option.description })) : null] }));
+}
+function CustomAnswerRow({ optionCount, customText, customActive, disabled, ids, reserveInfoColumn, customRef, onTextChange, onPointerDown, onKeyDown, }) {
+    return (_jsxs("div", { "data-tf-custom-answer-row": "", "data-tf-answer-active": customActive ? "" : undefined, className: "tf:flex tf:min-h-11 tf:items-start tf:gap-3 tf:rounded-tf tf:px-3 tf:py-1 " +
+            "tf:focus-within:outline-2 tf:focus-within:-outline-offset-2 tf:focus-within:outline-tf-ring " +
+            (customActive ? "tf:bg-tf-emphasis" : ""), children: [optionCount > 0 ? (_jsx("label", { htmlFor: ids.custom, "aria-hidden": true, className: "tf:w-5 tf:shrink-0 tf:cursor-text tf:pt-1.5 tf:text-tf-label tf:tabular-nums tf:text-tf-muted-foreground", children: `${String(optionCount + 1)}.` })) : null, _jsx(TfTextarea, { id: ids.custom, ref: customRef, variant: "bare", rows: 1, className: "tf:min-w-0 tf:flex-1 tf:px-0 tf:py-1.5 tf:text-tf-label", "aria-label": CUSTOM_ANSWER_PLACEHOLDER, "aria-describedby": ids.hint, placeholder: CUSTOM_ANSWER_PLACEHOLDER, value: customText, disabled: disabled, onChange: (event) => {
+                    onTextChange(event.target.value);
+                }, onPointerDown: onPointerDown, onKeyDown: onKeyDown }), customActive ? (_jsx(KeyHints, { className: "tf:pt-1.5", hints: ["up", "down", "modifier"] })) : null, reserveInfoColumn ? (_jsx("span", { "aria-hidden": true, className: "tf:mt-1 tf:size-7 tf:shrink-0" })) : null] }));
+}
+function KeyHints({ hints, className, }) {
+    return (_jsx("span", { "aria-hidden": true, "data-tf-key-hints": "", className: "tf:flex tf:shrink-0 tf:items-center tf:gap-1 " + (className ?? ""), children: hints.map((hint) => (_jsx(Kbd, { children: hint === "up" ? (_jsx(ArrowUpIcon, { className: "tf:size-3" })) : hint === "down" ? (_jsx(ArrowDownIcon, { className: "tf:size-3" })) : hint === "enter" ? (_jsx(CornerDownLeftIcon, { className: "tf:size-3" })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: modifierLabel() }), _jsx(CornerDownLeftIcon, { className: "tf:size-3" })] })) }, hint))) }));
+}
+function modifierLabel() {
+    const agent = typeof navigator === "undefined" ? "" : navigator.userAgent;
+    return /Mac|iPhone|iPad|iPod/.test(agent) ? "⌘" : "Ctrl";
+}

package/dist/components/question-panel-footer.d.ts

@@ -0,0 +1,9 @@
+import type { QuestionSetCardModel } from "../core/elicitation-cards.js";
+export declare function QuestionPanelFooter({ card, cursor, gateReason, disabled, submitGated, onProceed, }: {
+    card: QuestionSetCardModel;
+    cursor: number;
+    gateReason: string | null;
+    disabled: boolean;
+    submitGated: boolean;
+    onProceed: () => void;
+}): import("react").JSX.Element;

package/dist/components/question-panel-footer.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useContext, useEffect, useRef, useState, } from "react";
+import { ElicitationsContext } from "./elicitation-context.js";
+import { TfButton } from "./primitives/button.js";
+import { Spinner } from "./streaming-states.js";
+export function QuestionPanelFooter({ card, cursor, gateReason, disabled, submitGated, onProceed, }) {
+    const total = card.questions.length;
+    const isLast = cursor === total - 1;
+    const { confirming, cancelRef, keepEditingRef, requestCancel, keepEditing, discard, } = useCancelConfirm(card);
+    return (_jsx("div", { "data-tf-question-footer": "", className: "tf:mt-3 tf:flex tf:flex-wrap tf:items-center tf:justify-end tf:gap-2", children: card.status === "submitting" ? (_jsx("p", { className: "tf:flex tf:items-center tf:gap-2 tf:text-tf-label tf:text-tf-muted-foreground", children: _jsx(Spinner, { label: "Sending\u2026" }) })) : confirming ? (_jsxs(Fragment, { children: [_jsx("span", { className: "tf:text-tf-label tf:text-tf-muted-foreground", children: "Discard answers?" }), _jsx(TfButton, { ref: keepEditingRef, variant: "ghost", onClick: keepEditing, children: "Keep editing" }), _jsx(TfButton, { variant: "outline", onClick: discard, children: "Discard" })] }, "confirm")) : (_jsxs(Fragment, { children: [gateReason !== null ? (_jsx("span", { "data-tf-question-gate": "", className: "tf:me-auto tf:text-tf-label tf:text-tf-muted-foreground", children: gateReason })) : null, _jsx(TfButton, { ref: cancelRef, variant: "ghost", disabled: disabled, onClick: requestCancel, children: "Cancel" }), _jsx(TfButton, { variant: "primary", disabled: disabled || submitGated, onClick: onProceed, children: isLast
+                        ? total === 1
+                            ? "Submit answer"
+                            : "Submit answers"
+                        : "Next question" })] }, "actions")) }));
+}
+function useCancelConfirm(card) {
+    const { drafts, cancelQuestionSet } = useContext(ElicitationsContext);
+    const [confirming, setConfirming] = useState(false);
+    const cancelRef = useRef(null);
+    const keepEditingRef = useRef(null);
+    const wasConfirmingRef = useRef(false);
+    useEffect(() => {
+        if (confirming) {
+            keepEditingRef.current?.focus();
+        }
+        else if (wasConfirmingRef.current) {
+            cancelRef.current?.focus();
+        }
+        wasConfirmingRef.current = confirming;
+    }, [confirming]);
+    return {
+        confirming,
+        cancelRef,
+        keepEditingRef,
+        requestCancel: () => {
+            if (drafts.hasContent(card.interruptId)) {
+                setConfirming(true);
+                return;
+            }
+            void cancelQuestionSet(card);
+        },
+        keepEditing: () => {
+            setConfirming(false);
+        },
+        discard: () => {
+            setConfirming(false);
+            void cancelQuestionSet(card);
+        },
+    };
+}

package/dist/components/question-panel.d.ts

@@ -0,0 +1,4 @@
+import type { QuestionSetCardModel } from "../core/elicitation-cards.js";
+export declare function QuestionPanel({ card }: {
+    card: QuestionSetCardModel;
+}): import("react").JSX.Element;

package/dist/components/question-panel.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { useContext, useId, useState, useSyncExternalStore } from "react";
+import { answersOf, firstUnansweredIndexOf, MAX_ANSWER_TEXT_CHARS, overLimitOf, } from "../core/question-drafts.js";
+import { ElicitationsContext } from "./elicitation-context.js";
+import { settledQuestionsReceiptOfCard } from "../core/question-receipt.js";
+import { QuestionSetReceiptRow } from "./elicitation-receipt-row.js";
+import { TfButton } from "./primitives/button.js";
+import { QuestionPanelAnswers, } from "./question-panel-answers.js";
+import { QuestionPanelFooter } from "./question-panel-footer.js";
+import { useAnswerListFold } from "./use-answer-list-fold.js";
+import { useQuestionPanelKeys } from "./use-question-panel-keys.js";
+const STALE_NOTE = "These questions were already answered or expired.";
+const CANCELLED_NOTE = "The assistant's questions were dismissed.";
+export function QuestionPanel({ card }) {
+    if (card.status === "answered" || card.status === "stale") {
+        return _jsx(SettledQuestionPanel, { card: card });
+    }
+    return _jsx(PendingQuestionPanel, { card: card });
+}
+function SettledQuestionPanel({ card }) {
+    if (card.status === "answered") {
+        const receipt = settledQuestionsReceiptOfCard(card.questions, card.answered);
+        if (receipt !== null) {
+            return _jsx(QuestionSetReceiptRow, { receipt: receipt });
+        }
+    }
+    return (_jsxs("div", { "data-tf-elicitation-card": "", "data-tf-question-panel": "", "data-tf-question-panel-settled": card.status === "stale" ? "stale" : "cancelled", role: "group", "aria-label": "The assistant asked questions", className: "tf:my-1 tf:rounded-xl tf:border tf:p-4", children: [_jsx("p", { className: "tf:min-w-0 tf:truncate tf:text-tf-label tf:text-tf-muted-foreground", "data-tf-question-heading": "", children: card.questions[0].heading }), _jsx("p", { className: "tf:mt-2 tf:text-tf-label tf:text-tf-muted-foreground", children: card.status === "stale" ? STALE_NOTE : CANCELLED_NOTE })] }));
+}
+function PendingQuestionPanel({ card }) {
+    const { drafts, submitQuestionAnswers } = useContext(ElicitationsContext);
+    const draft = useSyncExternalStore(drafts.subscribe, () => drafts.get(card.interruptId), () => drafts.get(card.interruptId));
+    const total = card.questions.length;
+    const cursor = Math.min(Math.max(draft.cursor, 0), total - 1);
+    const question = card.questions[cursor];
+    const answerDraft = draft.answers.get(question.id);
+    const active = answerDraft?.active ?? null;
+    const customText = answerDraft?.customText ?? "";
+    const answerable = card.status === "actionable";
+    const ids = {
+        hint: useId(),
+        prompt: useId(),
+        descriptionBase: useId(),
+        custom: useId(),
+    };
+    const [openDescription, setOpenDescription] = useState(null);
+    const { rowsRef, customRef, goTo, proceed, selectOption, activateCustomIfDrafted, setCustomText, optionKeys, customKeys, } = useQuestionPanelKeys({
+        card,
+        drafts,
+        submitQuestionAnswers,
+        cursor,
+        question,
+        active,
+        customText,
+        answerable,
+        closeDescription: () => {
+            setOpenDescription(null);
+        },
+    });
+    const { answersRef, foldBelow, declareFold } = useAnswerListFold(cursor, openDescription, customText);
+    const gate = submitGateOf(card.questions, draft, cursor, customText);
+    const statusSentence = gate.overLimitSentence ?? gate.gateReason ?? "";
+    return (_jsxs("div", { "data-tf-elicitation-card": "", "data-tf-question-panel": "", role: "group", "aria-label": "The assistant asked questions", className: "tf:my-1 tf:rounded-xl tf:border tf:p-4", children: [_jsx(QuestionPanelHeader, { card: card, cursor: cursor, goTo: goTo }), _jsx(QuestionPanelPrompt, { card: card, question: question, ids: ids }), _jsx("span", { role: "status", className: "tf:sr-only", "data-tf-question-status": "", children: statusSentence }), _jsx(QuestionPanelAnswers, { question: question, active: active, customText: customText, disabled: !answerable, ids: ids, openDescription: openDescription, onToggleDescription: setOpenDescription, overLimitSentence: gate.overLimitSentence, answersRef: answersRef, foldBelow: foldBelow, onScroll: declareFold, rowsRef: rowsRef, customRef: customRef, selectOption: selectOption, activateCustomIfDrafted: activateCustomIfDrafted, setCustomText: setCustomText, optionKeys: optionKeys, customKeys: customKeys }), _jsx(QuestionPanelFooter, { card: card, cursor: cursor, gateReason: gate.gateReason, disabled: !answerable, submitGated: gate.submitGated, onProceed: proceed })] }));
+}
+function QuestionPanelHeader({ card, cursor, goTo, }) {
+    const total = card.questions.length;
+    return (_jsxs("div", { className: "tf:flex tf:items-center tf:justify-between tf:gap-3", children: [_jsx("p", { className: "tf:min-w-0 tf:truncate tf:text-tf-label tf:text-tf-muted-foreground", "data-tf-question-heading": "", children: card.questions[cursor].heading }), total > 1 ? (_jsxs("div", { className: "tf:flex tf:shrink-0 tf:items-center tf:gap-1", "data-tf-question-pager": "", children: [_jsx(TfButton, { variant: "icon", "aria-label": "Previous question", disabled: cursor === 0, onClick: () => {
+                            goTo(cursor - 1);
+                        }, children: _jsx(ChevronLeftIcon, { "aria-hidden": true, className: "tf:size-4" }) }), _jsx("span", { className: "tf:text-tf-label tf:tabular-nums tf:text-tf-muted-foreground", children: `${String(cursor + 1)}/${String(total)}` }), _jsx(TfButton, { variant: "icon", "aria-label": "Next question", disabled: cursor === total - 1, onClick: () => {
+                            goTo(cursor + 1);
+                        }, children: _jsx(ChevronRightIcon, { "aria-hidden": true, className: "tf:size-4" }) })] })) : null] }));
+}
+function QuestionPanelPrompt({ card, question, ids, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("p", { id: ids.prompt, className: "tf:mt-1 tf:text-tf-heading tf:font-medium tf:text-tf-foreground", "data-tf-question-prompt": "", children: question.prompt }), card.errorSentence !== null ? (_jsx("p", { role: "alert", className: "tf:mt-2 tf:text-tf-label tf:text-tf-destructive", children: card.errorSentence })) : null, _jsx("p", { id: ids.hint, className: "tf:sr-only", children: "Use the up and down arrow keys to choose a suggested answer and Enter to continue. In the custom answer, Enter adds a line and Command or Control with Enter continues." })] }));
+}
+function submitGateOf(questions, draft, cursor, customText) {
+    const answers = answersOf(questions, draft);
+    const firstUnanswered = firstUnansweredIndexOf(questions, draft);
+    const overLimit = overLimitOf(questions, draft, MAX_ANSWER_TEXT_CHARS);
+    const isLast = cursor === questions.length - 1;
+    const currentOverLimit = overLimit.includes(questions[cursor].id);
+    const submitGated = isLast && (answers === null || overLimit.length > 0);
+    const firstOverLimit = overLimit.length > 0
+        ? questions.findIndex((entry) => entry.id === overLimit[0])
+        : -1;
+    const gateReason = !isLast
+        ? null
+        : firstOverLimit >= 0
+            ? `Question ${String(firstOverLimit + 1)}'s custom answer is over ${MAX_ANSWER_TEXT_CHARS.toLocaleString("en-US")} characters`
+            : answers === null && firstUnanswered >= 0
+                ? `Question ${String(firstUnanswered + 1)} needs an answer`
+                : null;
+    const overLimitSentence = currentOverLimit
+        ? `Custom answers are limited to ${MAX_ANSWER_TEXT_CHARS.toLocaleString("en-US")} characters (this one is ${customText.length.toLocaleString("en-US")}).`
+        : null;
+    return { submitGated, gateReason, overLimitSentence };
+}

package/dist/components/react-tool-view.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentType } from "react";
+import type { ToolViewAdapter, ToolViewProps } from "../core/tool-view.js";
+export declare function reactToolView<TArgs = Record<string, unknown>, TResult = unknown>(component: ComponentType<ToolViewProps<TArgs, TResult>>): ToolViewAdapter<TArgs, TResult>;
+export declare const TOOL_VIEW_LATE_FAILURE_EVENT = "teaflask-tool-view-late-failure";