@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/button-group.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type SeparatorLineProps } from "./separator.js";
+export declare const buttonGroupOrientationNames: readonly ["horizontal", "vertical"];
+export type ButtonGroupOrientation = (typeof buttonGroupOrientationNames)[number];
+export interface ButtonGroupVariantOptions {
+    orientation?: ButtonGroupOrientation | null;
+    className?: string;
+}
+export declare function buttonGroupVariants({ orientation, className, }?: ButtonGroupVariantOptions): string;
+export interface ButtonGroupProps extends ComponentProps<"div"> {
+    /** `"vertical"` stacks the controls and joins them top to bottom. */
+    orientation?: ButtonGroupOrientation | null;
+}
+/**
+ * Joins buttons, text, and separators into one control. Give it an
+ * `aria-label` that names what the buttons act on.
+ */
+export declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): import("react").JSX.Element;
+export type ButtonGroupTextProps = useRender.ComponentProps<"div">;
+/** A muted, non-interactive cell for a label or value inside a group. */
+export declare function ButtonGroupText({ className, render, ref, ...props }: ButtonGroupTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ButtonGroupSeparatorProps = SeparatorLineProps;
+/**
+ * A line between grouped controls. It runs across the group, so it is
+ * `"vertical"` (the default) in a row and `"horizontal"` in a column.
+ */
+export declare function ButtonGroupSeparator({ className, orientation, tone, ...props }: ButtonGroupSeparatorProps): import("react").JSX.Element;

package/dist/components/button-group.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../internal/classes.js";
+import { Separator } from "./separator.js";
+export const buttonGroupOrientationNames = ["horizontal", "vertical"];
+export function buttonGroupVariants({ orientation, className, } = {}) {
+    return cn("sprout-button-group", `sprout-button-group-${orientation ?? "horizontal"}`, className);
+}
+/**
+ * Joins buttons, text, and separators into one control. Give it an
+ * `aria-label` that names what the buttons act on.
+ */
+export function ButtonGroup({ className, orientation, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation ?? "horizontal", className: buttonGroupVariants({ orientation, className }), ...props }));
+}
+/** A muted, non-interactive cell for a label or value inside a group. */
+export function ButtonGroupText({ className, render, ref, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        ref,
+        render,
+        props: mergeProps({
+            "data-slot": "button-group-text",
+            className: cn("sprout-button-group-text", className),
+        }, props),
+    });
+}
+/**
+ * A line between grouped controls. It runs across the group, so it is
+ * `"vertical"` (the default) in a row and `"horizontal"` in a column.
+ */
+export function ButtonGroupSeparator({ className, orientation = "vertical", tone = "input", ...props }) {
+    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, tone: tone, className: (state) => cn("sprout-button-group-separator", typeof className === "function" ? className(state) : className), ...props }));
+}

package/dist/components/button.d.ts

@@ -0,0 +1,79 @@
+import type { Button as BaseButton } from "@base-ui/react/button";
+import { type ReactElement } from "react";
+export declare const buttonVariantNames: readonly ["default", "outline", "secondary", "ghost", "destructive", "link", "scope"];
+export declare const buttonSizeNames: readonly ["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg", "back", "onboarding", "bud", "bud-labeled", "chat-row", "task-link", "card-title", "result-card", "calendar-title", "calendar", "calendar-icon", "nav", "column-header", "column-header-end", "table-link", "badge"];
+export type ButtonVariant = (typeof buttonVariantNames)[number];
+export type ButtonSize = (typeof buttonSizeNames)[number];
+export interface ButtonVariantOptions {
+    variant?: ButtonVariant | null;
+    size?: ButtonSize | null;
+    className?: string;
+}
+export declare function buttonVariants({ variant, size, className, }?: ButtonVariantOptions): string;
+export type ButtonBlockerFix = 
+/** An element id on this page; scrolled into view and focused (or, when it has no tabindex, its first focusable descendant). */
+{
+    kind: "jump";
+    label: string;
+    target: string;
+}
+/** A link element, such as a router `<Link>`, rendered through Button `render`. */
+ | {
+    kind: "link";
+    label: string;
+    link: ReactElement;
+} | {
+    kind: "action";
+    label: string;
+    onClick: () => void;
+};
+export type ButtonState = {
+    kind: "ready";
+} | {
+    kind: "busy";
+} | {
+    kind: "blocked";
+    reason: string;
+    fix?: ButtonBlockerFix | undefined;
+};
+export interface ButtonProps extends BaseButton.Props {
+    variant?: ButtonVariant | null;
+    size?: ButtonSize | null;
+    /**
+     * Wraps the button in `data-slot="button-action"`, which also holds the
+     * blocked reason; `className` then styles that wrapper. Busy and blocked
+     * stay focusable. Keep passing a state (even `ready`) for the button's
+     * lifetime so changing kinds never remounts it.
+     */
+    state?: ButtonState | undefined;
+    /** Replaces the label, with a spinner, while `state` is busy. */
+    pendingLabel?: string | undefined;
+}
+export declare function Button({ state, pendingLabel, ...props }: ButtonProps): import("react").JSX.Element;
+export interface ActionGroupItem {
+    label: string;
+    onClick: () => void;
+    variant?: ButtonVariant | undefined;
+}
+export interface ActionGroupProps {
+    /** One state for every action, with one shared reason under the row. */
+    state: ButtonState;
+    actions: readonly ActionGroupItem[];
+    className?: string | undefined;
+}
+/** A row of actions that share one busy or blocked state and one reason. */
+export declare function ActionGroup({ state, actions, className }: ActionGroupProps): import("react").JSX.Element;
+export declare function jumpTo(target: string | Element): void;
+/**
+ * Busy and blocked actions stay focusable so the reason is reachable.
+ * Absent ARIA keys are left out so spreading `button` keeps a caller's own.
+ */
+export declare function useActionControl(state: ButtonState): {
+    button: {
+        "aria-describedby"?: string | undefined;
+        "aria-busy"?: true | undefined;
+        disabled: boolean;
+        focusableWhenDisabled: boolean;
+    };
+    reason: import("react").JSX.Element | null;
+};

package/dist/components/button.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn, stateClassName } from "../internal/classes.js";
+import { Pressable } from "../internal/pressable.js";
+import { Spinner } from "./spinner.js";
+export const buttonVariantNames = [
+    "default",
+    "outline",
+    "secondary",
+    "ghost",
+    "destructive",
+    "link",
+    "scope",
+];
+export const buttonSizeNames = [
+    "default",
+    "xs",
+    "sm",
+    "lg",
+    "icon",
+    "icon-xs",
+    "icon-sm",
+    "icon-lg",
+    "back",
+    "onboarding",
+    "bud",
+    "bud-labeled",
+    "chat-row",
+    "task-link",
+    "card-title",
+    "result-card",
+    "calendar-title",
+    "calendar",
+    "calendar-icon",
+    "nav",
+    "column-header",
+    "column-header-end",
+    "table-link",
+    "badge",
+];
+export function buttonVariants({ variant, size, className, } = {}) {
+    return cn("sprout-button", `sprout-button-variant-${variant ?? "default"}`, `sprout-button-size-${size ?? "default"}`, className);
+}
+export function Button({ state, pendingLabel, ...props }) {
+    return state ? (_jsx(StatefulButton, { state: state, pendingLabel: pendingLabel, ...props })) : (_jsx(ButtonElement, { ...props }));
+}
+function ButtonElement({ variant, size, className, ...props }) {
+    return (_jsx(Pressable, { "data-slot": "button", "data-variant": variant ?? "default", "data-size": size ?? "default", ...props, className: stateClassName(buttonVariants({ variant, size }), className) }));
+}
+function StatefulButton({ state, pendingLabel, className, children, ...props }) {
+    const action = useActionControl(state);
+    const pending = state.kind === "busy" && pendingLabel;
+    return (_jsxs("div", { "data-slot": "button-action", "data-state": state.kind, className: cn("sprout-button-action", className), children: [_jsx(ButtonElement, { ...props, ...action.button, disabled: action.button.disabled || props.disabled, children: pending ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true" }), pendingLabel] })) : (children) }), action.reason] }));
+}
+/** A row of actions that share one busy or blocked state and one reason. */
+export function ActionGroup({ state, actions, className }) {
+    const action = useActionControl(state);
+    return (_jsxs("div", { "data-slot": "action-group", "data-state": state.kind, className: cn("sprout-action-group", className), children: [_jsx("div", { className: "sprout-action-group-row", children: actions.map((item) => (_jsx(Button, { variant: item.variant, onClick: item.onClick, ...action.button, children: item.label }, item.label))) }), action.reason] }));
+}
+const focusable = ':is(a[href], button, input, select, textarea, [tabindex]):not([disabled], [tabindex="-1"], [type="hidden"])';
+export function jumpTo(target) {
+    const element = typeof target === "string" ? document.getElementById(target) : target;
+    if (!element)
+        return;
+    const control = element.matches(focusable) || element.hasAttribute("tabindex")
+        ? element
+        : element.querySelector(focusable);
+    (control ?? element).scrollIntoView({ block: "center" });
+    if (control instanceof HTMLElement)
+        control.focus({ preventScroll: true });
+}
+/**
+ * Busy and blocked actions stay focusable so the reason is reachable.
+ * Absent ARIA keys are left out so spreading `button` keeps a caller's own.
+ */
+export function useActionControl(state) {
+    const reasonId = useId();
+    return {
+        button: {
+            disabled: state.kind !== "ready",
+            focusableWhenDisabled: true,
+            ...(state.kind === "busy" && { "aria-busy": true }),
+            ...(state.kind === "blocked" && { "aria-describedby": reasonId }),
+        },
+        reason: state.kind === "blocked" ? (_jsxs("p", { "data-slot": "action-reason", className: "sprout-action-reason", children: [_jsx("span", { id: reasonId, children: state.reason }), state.fix && _jsx(FixButton, { fix: state.fix })] })) : null,
+    };
+}
+function FixButton({ fix }) {
+    if (fix.kind === "link")
+        return (_jsx(Button, { variant: "link", size: "xs", nativeButton: false, render: fix.link, children: fix.label }));
+    return (_jsx(Button, { variant: "link", size: "xs", onClick: fix.kind === "jump" ? () => jumpTo(fix.target) : fix.onClick, children: fix.label }));
+}

package/dist/components/calendar.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentProps } from "react";
+import { DayPicker, type DayButtonProps } from "react-day-picker";
+import { type ButtonVariant } from "./button.js";
+export type { DateRange, Matcher } from "react-day-picker";
+export declare const calendarCaptionLayoutNames: readonly ["label", "dropdown", "dropdown-months", "dropdown-years"];
+export type CalendarCaptionLayout = (typeof calendarCaptionLayoutNames)[number];
+export type CalendarProps = ComponentProps<typeof DayPicker> & {
+    /** The Button variant for the previous and next month buttons. Defaults to `ghost`. */
+    buttonVariant?: ButtonVariant;
+};
+type DayPickerLocale = ComponentProps<typeof DayPicker>["locale"];
+/**
+ * A month grid for picking one date, several dates, or a range. It takes every
+ * React DayPicker prop, including `mode`, `selected`, `onSelect`,
+ * `defaultMonth`, `disabled`, `weekStartsOn`, `showWeekNumber`, and
+ * `numberOfMonths`.
+ */
+export declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: CalendarProps): import("react").JSX.Element;
+export type CalendarDayButtonProps = DayButtonProps & {
+    locale?: DayPickerLocale;
+};
+/**
+ * The button inside each day cell. Use it in `components.DayButton` to add
+ * content under the date, such as an event count in a `span`. `locale`
+ * defaults to the calendar's locale.
+ */
+export declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: CalendarDayButtonProps): import("react").JSX.Element;

package/dist/components/calendar.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, } from "react";
+import { DayPicker, getDefaultClassNames, useDayPicker, } from "react-day-picker";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { cn } from "../internal/classes.js";
+import { Button, buttonVariants } from "./button.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./select.js";
+export const calendarCaptionLayoutNames = [
+    "label",
+    "dropdown",
+    "dropdown-months",
+    "dropdown-years",
+];
+function CalendarRoot({ className, rootRef, ...props }) {
+    return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: className, ...props }));
+}
+function CalendarChevron({ className, orientation, size: _size, disabled: _disabled, ...props }) {
+    const Icon = orientation === "left"
+        ? ChevronLeft
+        : orientation === "right"
+            ? ChevronRight
+            : ChevronDown;
+    return (_jsx(Icon, { "aria-hidden": "true", className: cn("sprout-calendar-chevron", className), ...props }));
+}
+function CalendarWeekNumber({ children, week: _week, ...props }) {
+    return (_jsx("th", { ...props, children: _jsx("div", { className: "sprout-calendar-week-number-cell", children: children }) }));
+}
+/** Month and year pickers use a Base UI select, never a native `<select>`. */
+function CalendarDropdown({ options = [], value, onChange, disabled, className, style, "aria-label": label, }) {
+    const items = options.map((option) => ({
+        value: option.value,
+        label: option.label,
+    }));
+    return (_jsxs(Select, { items: items, value: Number(value), disabled: disabled, onValueChange: (next) => {
+            if (next === null)
+                return;
+            onChange?.({
+                target: { value: String(next) },
+            });
+        }, children: [_jsx(SelectTrigger, { size: "sm", "aria-label": label, style: style, className: cn("sprout-calendar-dropdown", className), children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { className: "sprout-calendar-dropdown-content", children: options.map((option) => (_jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))) })] }));
+}
+/**
+ * A month grid for picking one date, several dates, or a range. It takes every
+ * React DayPicker prop, including `mode`, `selected`, `onSelect`,
+ * `defaultMonth`, `disabled`, `weekStartsOn`, `showWeekNumber`, and
+ * `numberOfMonths`.
+ */
+export function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
+    const defaults = getDefaultClassNames();
+    const navButton = cn(buttonVariants({ variant: buttonVariant, size: "icon-sm" }), "sprout-calendar-nav-button");
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("sprout-calendar", className), "data-button-variant": buttonVariant, "data-caption-layout": captionLayout, captionLayout: captionLayout, locale: locale, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+            ...formatters,
+        }, classNames: {
+            root: cn("sprout-calendar-root", defaults.root),
+            months: cn("sprout-calendar-months", defaults.months),
+            month: cn("sprout-calendar-month", defaults.month),
+            nav: cn("sprout-calendar-nav", defaults.nav),
+            button_previous: cn(navButton, defaults.button_previous),
+            button_next: cn(navButton, defaults.button_next),
+            month_caption: cn("sprout-calendar-caption", defaults.month_caption),
+            dropdowns: cn("sprout-calendar-dropdowns", defaults.dropdowns),
+            dropdown_root: cn("sprout-calendar-dropdown-root", defaults.dropdown_root),
+            dropdown: cn(defaults.dropdown),
+            caption_label: cn("sprout-calendar-caption-label", defaults.caption_label),
+            month_grid: cn("sprout-calendar-grid", defaults.month_grid),
+            weekdays: cn("sprout-calendar-weekdays", defaults.weekdays),
+            weekday: cn("sprout-calendar-weekday", defaults.weekday),
+            week: cn("sprout-calendar-week", defaults.week),
+            week_number_header: cn("sprout-calendar-week-number-header", defaults.week_number_header),
+            week_number: cn("sprout-calendar-week-number", defaults.week_number),
+            day: cn("sprout-calendar-day", defaults.day),
+            range_start: cn("sprout-calendar-range-start", defaults.range_start),
+            range_middle: cn("sprout-calendar-range-middle", defaults.range_middle),
+            range_end: cn("sprout-calendar-range-end", defaults.range_end),
+            today: cn("sprout-calendar-today", defaults.today),
+            outside: cn("sprout-calendar-outside", defaults.outside),
+            disabled: cn("sprout-calendar-disabled", defaults.disabled),
+            hidden: cn("sprout-calendar-hidden", defaults.hidden),
+            ...classNames,
+        }, components: {
+            Root: CalendarRoot,
+            Chevron: CalendarChevron,
+            Dropdown: CalendarDropdown,
+            DayButton: CalendarDayButton,
+            WeekNumber: CalendarWeekNumber,
+            ...components,
+        }, ...props }));
+}
+/**
+ * The button inside each day cell. Use it in `components.DayButton` to add
+ * content under the date, such as an event count in a `span`. `locale`
+ * defaults to the calendar's locale.
+ */
+export function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+    const calendarLocale = useDayPicker().dayPickerProps.locale;
+    const ref = useRef(null);
+    useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    const range = modifiers.range_start || modifiers.range_end || modifiers.range_middle;
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-slot": "calendar-day-button", "data-day": day.date.toLocaleDateString((locale ?? calendarLocale)?.code), "data-selected-single": Boolean(modifiers.selected && !range), "data-range-start": Boolean(modifiers.range_start), "data-range-end": Boolean(modifiers.range_end), "data-range-middle": Boolean(modifiers.range_middle), className: cn("sprout-calendar-day-button", getDefaultClassNames().day_button, className), ...props }));
+}

package/dist/components/canvas.d.ts

@@ -0,0 +1,78 @@
+import { type ComponentType, type ReactNode } from "react";
+/** Below this split width (px), the canvas opens as a full-screen sheet. */
+export declare const canvasSplitMinWidth = 720;
+export interface CanvasTab {
+    id: string;
+    title: string;
+    icon?: ComponentType<{
+        size?: number;
+    }> | undefined;
+    /** The result is still loading. Shows a spinner and reads “loading”. */
+    busy?: boolean | undefined;
+}
+export interface ChatSplitProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    chat: ReactNode;
+    canvas: ReactNode;
+    /** Saves the person's split sizes under this key. Use one per screen. */
+    layoutId?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * Chat beside a resizable canvas. Under 768px viewports, or when the split is
+ * narrower than `canvasSplitMinWidth`, the canvas opens as a full-screen
+ * sheet. The canvas moves between both without remounting, so drafts,
+ * reviews, and scroll survive.
+ */
+export declare function ChatSplit({ open, onOpenChange, chat, canvas, layoutId, className, }: ChatSplitProps): import("react").JSX.Element;
+export interface CanvasPanelProps {
+    /** Open results. With none, the header reads “Canvas”. */
+    tabs: readonly CanvasTab[];
+    activeId: string | null;
+    onSelect: (id: string) => void;
+    onCloseTab: (id: string) => void;
+    /** Hides the canvas. Called by Escape, the close button, and “Back to chat”. */
+    onClose: () => void;
+    children: ReactNode;
+    /** A strip under the tabs, such as “A Google action needs your review”. */
+    activity?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * The canvas surface: a tab per open result, a close button, and the active
+ * result below. Arrow keys, Home, and End move between tabs; Delete closes
+ * the focused tab; Escape closes the canvas.
+ */
+export declare function CanvasPanel({ tabs, activeId, onSelect, onCloseTab, onClose, children, activity, className, }: CanvasPanelProps): import("react").JSX.Element;
+export interface CanvasToggleProps {
+    open: boolean;
+    /** Open results. Shown as a badge when above zero. */
+    count: number;
+    onToggle: () => void;
+    className?: string | undefined;
+}
+/** A header button that shows or hides the canvas. */
+export declare function CanvasToggle({ open, count, onToggle, className, }: CanvasToggleProps): import("react").JSX.Element;
+export interface CanvasSectionProps {
+    title?: string | undefined;
+    /** A short line under the title, such as a row count, source, or URL. */
+    meta?: string | undefined;
+    /** Buttons beside the title. They wrap below it when space runs out. */
+    actions?: ReactNode;
+    children: ReactNode;
+    className?: string | undefined;
+}
+/** Padded content for one result, with an optional title, meta, and actions. */
+export declare function CanvasSection({ title, meta, actions, children, className, }: CanvasSectionProps): import("react").JSX.Element;
+export interface CanvasFrameProps {
+    src: string;
+    /** Names the frame for assistive tech, such as the page title. */
+    title: string;
+    className?: string | undefined;
+}
+/**
+ * A sandboxed page preview. Scripts and popups run; same-origin access,
+ * forms, and top navigation are blocked, and no referrer is sent.
+ */
+export declare function CanvasFrame({ src, title, className }: CanvasFrameProps): import("react").JSX.Element;

package/dist/components/canvas.js

@@ -0,0 +1,180 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { createPortal } from "react-dom";
+import { ArrowLeft } from "reicon-react/icons/ArrowLeft";
+import { SidebarRight } from "reicon-react/icons/SidebarRight";
+import { X } from "reicon-react/icons/X";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup, useResizableLayout, } from "./resizable.js";
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "./sheet.js";
+/** Below this split width (px), the canvas opens as a full-screen sheet. */
+export const canvasSplitMinWidth = 720;
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const mobileQuery = "(max-width: 767px)";
+function subscribeMobile(callback) {
+    const media = window.matchMedia(mobileQuery);
+    media.addEventListener("change", callback);
+    return () => media.removeEventListener("change", callback);
+}
+function useViewportMobile() {
+    return useSyncExternalStore(subscribeMobile, () => window.matchMedia(mobileQuery).matches, () => false);
+}
+const CanvasNarrowContext = createContext(null);
+/**
+ * Chat beside a resizable canvas. Under 768px viewports, or when the split is
+ * narrower than `canvasSplitMinWidth`, the canvas opens as a full-screen
+ * sheet. The canvas moves between both without remounting, so drafts,
+ * reviews, and scroll survive.
+ */
+export function ChatSplit({ open, onOpenChange, chat, canvas, layoutId = "chat-canvas", className, }) {
+    const viewportMobile = useViewportMobile();
+    const container = useRef(null);
+    const [availableWidth, setAvailableWidth] = useState(null);
+    const mobile = viewportMobile ||
+        (availableWidth !== null && availableWidth < canvasSplitMinWidth);
+    const split = open && !mobile;
+    useIsomorphicLayoutEffect(() => {
+        const element = container.current;
+        if (!element)
+            return;
+        const measure = () => setAvailableWidth(element.clientWidth);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const layout = useResizableLayout({
+        id: layoutId,
+        panelIds: split ? ["chat", "canvas"] : ["chat"],
+        onlySaveAfterUserInteractions: true,
+    });
+    const [desktopHost, setDesktopHost] = useState(null);
+    const [mobileHost, setMobileHost] = useState(null);
+    const [target, setTarget] = useState(null);
+    useIsomorphicLayoutEffect(() => {
+        const element = document.createElement("div");
+        element.className = "sprout-canvas-host";
+        setTarget(element);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        if (!target || !open)
+            return;
+        (mobile ? mobileHost : desktopHost)?.append(target);
+        return () => target.remove();
+    }, [mobile, open, target, mobileHost, desktopHost]);
+    return (_jsx(CanvasNarrowContext, { value: mobile, children: _jsxs("div", { ref: container, "data-slot": "chat-split", "data-layout": mobile ? "sheet" : "split", "data-open": open ? "" : undefined, className: cn("sprout-chat-split", className), children: [target && createPortal(canvas, target), _jsxs(ResizablePanelGroup, { orientation: "horizontal", defaultLayout: layout.defaultLayout, onLayoutChanged: layout.onLayoutChanged, children: [_jsx(ResizablePanel, { id: "chat", minSize: "40%", defaultSize: split ? "55%" : "100%", children: _jsx("div", { className: "sprout-chat-split-pane", children: chat }) }), split && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true, "aria-label": "Resize canvas" }), _jsx(ResizablePanel, { id: "canvas", minSize: "320px", defaultSize: "45%", children: _jsx("div", { ref: setDesktopHost, className: "sprout-chat-split-pane" }) })] }))] }), _jsx(Sheet, { open: open && mobile, onOpenChange: (next) => onOpenChange(next), children: _jsxs(SheetContent, { side: "right", size: "full", showCloseButton: false, keepMounted: true, finalFocus: !open, className: "sprout-canvas-sheet", children: [_jsxs("div", { className: "sprout-canvas-sr-only", children: [_jsx(SheetTitle, { children: "Canvas" }), _jsx(SheetDescription, { children: "Detailed result. Return to chat to continue the conversation." })] }), _jsx("div", { ref: setMobileHost, className: "sprout-chat-split-pane" })] }) })] }) }));
+}
+/**
+ * The canvas surface: a tab per open result, a close button, and the active
+ * result below. Arrow keys, Home, and End move between tabs; Delete closes
+ * the focused tab; Escape closes the canvas.
+ */
+export function CanvasPanel({ tabs, activeId, onSelect, onCloseTab, onClose, children, activity, className, }) {
+    const viewportMobile = useViewportMobile();
+    const narrow = useContext(CanvasNarrowContext);
+    const mobile = narrow ?? viewportMobile;
+    const base = useId();
+    const list = useRef(null);
+    const tabButtons = useRef(new Map());
+    const closeButton = useRef(null);
+    const heading = useRef(null);
+    const refocus = useRef(null);
+    const [hovered, setHovered] = useState(null);
+    const activeIndex = tabs.findIndex((tab) => tab.id === activeId);
+    const tabId = (index) => `${base}-tab-${index}`;
+    const bodyId = `${base}-body`;
+    useEffect(() => {
+        const scroller = list.current;
+        const tab = activeId ? tabButtons.current.get(activeId) : null;
+        if (!scroller || !tab)
+            return;
+        const start = tab.offsetLeft;
+        const end = start + tab.offsetWidth + 28;
+        if (start < scroller.scrollLeft)
+            scroller.scrollLeft = start;
+        else if (end > scroller.scrollLeft + scroller.clientWidth)
+            scroller.scrollLeft = end - scroller.clientWidth;
+    }, [activeId, tabs.length]);
+    useEffect(() => {
+        const index = refocus.current;
+        if (index === null)
+            return;
+        refocus.current = null;
+        const next = tabs[Math.min(index, tabs.length - 1)];
+        const target = (next && tabButtons.current.get(next.id)) ??
+            closeButton.current ??
+            heading.current;
+        target?.focus();
+    }, [tabs]);
+    const closeTab = (index) => {
+        const tab = tabs[index];
+        if (!tab)
+            return;
+        refocus.current = index;
+        onCloseTab(tab.id);
+    };
+    const onTabKeyDown = (event, index) => {
+        if (event.key === "Delete") {
+            event.preventDefault();
+            closeTab(index);
+            return;
+        }
+        const next = event.key === "ArrowRight"
+            ? index + 1
+            : event.key === "ArrowLeft"
+                ? index - 1
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? tabs.length - 1
+                        : null;
+        if (next === null || tabs.length === 0)
+            return;
+        event.preventDefault();
+        const target = tabs[(next + tabs.length) % tabs.length];
+        if (!target)
+            return;
+        onSelect(target.id);
+        tabButtons.current.get(target.id)?.focus();
+    };
+    return (_jsxs("section", { "data-slot": "canvas", "data-layout": mobile ? "sheet" : "split", "aria-label": "Canvas", className: cn("sprout-canvas", className), onKeyDown: (event) => {
+            if (event.key === "Escape" && !event.defaultPrevented) {
+                event.preventDefault();
+                onClose();
+            }
+        }, children: [mobile && (_jsx("div", { className: "sprout-canvas-back", children: _jsxs(Button, { variant: "ghost", size: "sm", onClick: onClose, children: [_jsx(ArrowLeft, { size: 16, "aria-hidden": "true" }), "Back to chat"] }) })), _jsxs("header", { className: "sprout-canvas-header", children: [tabs.length === 0 ? (_jsx("h2", { ref: heading, tabIndex: -1, className: "sprout-canvas-heading", children: "Canvas" })) : (_jsxs("div", { ref: list, className: "sprout-canvas-tabs", children: [_jsx("div", { role: "tablist", "aria-label": "Open in canvas", className: "sprout-canvas-tablist", children: tabs.map((tab, index) => {
+                                    const active = index === activeIndex;
+                                    const Icon = tab.icon;
+                                    return (_jsxs("button", { type: "button", role: "tab", id: tabId(index), ref: (node) => {
+                                            if (node)
+                                                tabButtons.current.set(tab.id, node);
+                                            else
+                                                tabButtons.current.delete(tab.id);
+                                        }, "data-slot": "canvas-tab", "data-active": active ? "" : undefined, "data-busy": tab.busy ? "" : undefined, "data-hover": hovered === tab.id ? "" : undefined, "aria-label": tab.busy ? `${tab.title}, loading` : undefined, "aria-selected": active, "aria-controls": bodyId, tabIndex: active || (activeIndex === -1 && index === 0) ? 0 : -1, style: { order: index * 2 }, onClick: () => onSelect(tab.id), onKeyDown: (event) => onTabKeyDown(event, index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab", children: [tab.busy ? (_jsx(Spinner, { size: "sm", "aria-hidden": "true" })) : (Icon && (_jsx("span", { "aria-hidden": "true", className: "sprout-canvas-tab-icon", children: _jsx(Icon, { size: 14 }) }))), _jsx("span", { className: "sprout-canvas-tab-title", children: tab.title })] }, tab.id));
+                                }) }), tabs.map((tab, index) => {
+                                const active = index === activeIndex;
+                                return (_jsx("button", { type: "button", "aria-label": `Close ${tab.title}`, "data-active": active ? "" : undefined, "data-hover": hovered === tab.id ? "" : undefined, tabIndex: active ? 0 : -1, style: { order: index * 2 + 1 }, onClick: () => closeTab(index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab-close", children: _jsx(X, { size: 12, "aria-hidden": "true" }) }, tab.id));
+                            })] })), !mobile && (_jsx(Button, { ref: closeButton, variant: "ghost", size: "icon-sm", "aria-label": "Close canvas", title: "Close canvas (Esc)", onClick: onClose, children: _jsx(X, { size: 16, "aria-hidden": "true" }) }))] }), activity, _jsx("div", { id: bodyId, role: tabs.length ? "tabpanel" : undefined, "aria-labelledby": activeIndex === -1 ? undefined : tabId(activeIndex), tabIndex: tabs.length ? 0 : undefined, className: "sprout-canvas-body", children: children })] }));
+}
+/** A header button that shows or hides the canvas. */
+export function CanvasToggle({ open, count, onToggle, className, }) {
+    return (_jsxs(Button, { variant: "ghost", size: "sm", "data-slot": "canvas-toggle", "aria-pressed": open, "aria-label": open
+            ? "Hide canvas"
+            : count
+                ? `Show canvas, ${count} open`
+                : "Show canvas", title: "Open detailed results without leaving your chat", onClick: onToggle, className: cn("sprout-canvas-toggle", className), children: [_jsx(SidebarRight, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sprout-canvas-toggle-label", children: open ? "Hide results" : "View results" }), count > 0 && (_jsx("span", { "aria-hidden": "true", className: "sprout-canvas-toggle-count", children: count }))] }));
+}
+/** Padded content for one result, with an optional title, meta, and actions. */
+export function CanvasSection({ title, meta, actions, children, className, }) {
+    return (_jsxs("div", { "data-slot": "canvas-section", className: cn("sprout-canvas-section", className), children: [(title || actions) && (_jsxs("div", { className: "sprout-canvas-section-header", children: [_jsxs("div", { className: "sprout-canvas-section-text", children: [title && _jsx("h3", { className: "sprout-canvas-section-title", children: title }), meta && _jsx("p", { className: "sprout-canvas-section-meta", children: meta })] }), actions && (_jsx("div", { className: "sprout-canvas-section-actions", children: actions }))] })), children] }));
+}
+/**
+ * A sandboxed page preview. Scripts and popups run; same-origin access,
+ * forms, and top navigation are blocked, and no referrer is sent.
+ */
+export function CanvasFrame({ src, title, className }) {
+    return (_jsx("div", { "data-slot": "canvas-frame", className: cn("sprout-canvas-frame", className), children: _jsx("iframe", { src: src, title: title, sandbox: "allow-scripts allow-popups", referrerPolicy: "no-referrer", loading: "lazy" }) }));
+}