@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/resizable.js

@@ -0,0 +1,536 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, Fragment, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { cn } from "../internal/classes.js";
+export const resizableOrientationNames = ["horizontal", "vertical"];
+const GroupContext = createContext(null);
+function useGroup(part) {
+    const context = useContext(GroupContext);
+    if (!context)
+        throw new Error(`${part} must be used inside ResizablePanelGroup.`);
+    return context;
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const KEYBOARD_STEP = 5;
+const EPSILON = 0.001;
+/** Percent value of a size that can be resolved without measuring, or undefined. */
+function staticPercent(size) {
+    if (typeof size !== "string")
+        return undefined;
+    const value = size.trim();
+    if (/^-?[\d.]+%?$/.test(value))
+        return Number.parseFloat(value);
+    return undefined;
+}
+function toPercent(size, available, element) {
+    if (size === undefined)
+        return undefined;
+    const percent = staticPercent(size);
+    if (percent !== undefined)
+        return percent;
+    if (available <= 0)
+        return undefined;
+    let pixels;
+    if (typeof size === "number")
+        pixels = size;
+    else {
+        const value = Number.parseFloat(size);
+        const unit = size.trim().replace(/^-?[\d.]+/, "");
+        const view = element.ownerDocument.defaultView;
+        const font = (node) => Number.parseFloat(view?.getComputedStyle(node).fontSize ?? "") || 16;
+        if (unit === "px")
+            pixels = value;
+        else if (unit === "rem")
+            pixels = value * font(element.ownerDocument.documentElement);
+        else if (unit === "em")
+            pixels = value * font(element);
+        else if (unit === "vw")
+            pixels = (value * (view?.innerWidth ?? 0)) / 100;
+        else if (unit === "vh")
+            pixels = (value * (view?.innerHeight ?? 0)) / 100;
+        else
+            return undefined;
+    }
+    return (pixels / available) * 100;
+}
+const clamp = (value, { min, max }) => Math.min(Math.max(value, min), max);
+const total = (sizes) => sizes.reduce((sum, size) => sum + size, 0);
+/** Clamp each size to its bounds, then spread any remainder over panels with room. */
+function validate(sizes, bounds) {
+    const next = sizes.map((size, index) => clamp(size, bounds[index]));
+    for (let pass = 0; pass < 8; pass += 1) {
+        const diff = 100 - total(next);
+        if (Math.abs(diff) < EPSILON)
+            break;
+        const open = next.flatMap((size, index) => (diff > 0 ? size < bounds[index].max : size > bounds[index].min)
+            ? [index]
+            : []);
+        if (!open.length)
+            break;
+        for (const index of open)
+            next[index] = clamp(next[index] + diff / open.length, bounds[index]);
+    }
+    const sum = total(next);
+    return Math.abs(sum - 100) < EPSILON || sum <= 0
+        ? next
+        : next.map((size) => (size / sum) * 100);
+}
+/**
+ * Move the boundary after panel `pivot` by `delta` percent. The adjacent panel
+ * on the growing side takes the space; panels on the shrinking side give it up
+ * nearest first, each down to its minimum.
+ */
+function resize(base, bounds, pivot, delta) {
+    const next = [...base];
+    if (Math.abs(delta) < EPSILON)
+        return next;
+    const grow = delta > 0 ? pivot : pivot + 1;
+    const shrink = delta > 0
+        ? next.map((_, index) => index).slice(pivot + 1)
+        : next
+            .map((_, index) => index)
+            .slice(0, pivot + 1)
+            .reverse();
+    const room = Math.min(bounds[grow].max - next[grow], total(shrink.map((index) => next[index] - bounds[index].min)));
+    let remaining = Math.max(0, Math.min(Math.abs(delta), room));
+    next[grow] = next[grow] + remaining;
+    for (const index of shrink) {
+        const take = Math.min(remaining, next[index] - bounds[index].min);
+        next[index] = next[index] - take;
+        remaining -= take;
+        if (remaining < EPSILON)
+            break;
+    }
+    return next;
+}
+function sameLayout(a, b) {
+    const keys = Object.keys(a);
+    return (keys.length === Object.keys(b).length &&
+        keys.every((key) => key in b && Math.abs(a[key] - b[key]) < EPSILON));
+}
+function collectPanelProps(children, found = []) {
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child))
+            return;
+        if (child.type === ResizablePanel)
+            found.push(child.props);
+        else if (child.type === Fragment)
+            collectPanelProps(child.props.children, found);
+    });
+    return found;
+}
+function assignRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+/** A row or column of resizable panels separated by `ResizableHandle`s. */
+export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout, onLayoutChange, onLayoutChanged, className, children, ref, ...props }) {
+    const element = useRef(null);
+    const panels = useRef(new Map());
+    const separators = useRef(new Map());
+    const [version, setVersion] = useState(0);
+    const [extent, setExtent] = useState(0);
+    const [layout, setLayout] = useState({});
+    const [bounds, setBounds] = useState({});
+    const [links, setLinks] = useState({});
+    const [dragging, setDragging] = useState(null);
+    const layoutRef = useRef(layout);
+    const panelKey = useRef(null);
+    const defaultsKey = useRef(null);
+    const interacted = useRef(false);
+    const callbacks = useRef({ onLayoutChange, onLayoutChanged });
+    callbacks.current = { onLayoutChange, onLayoutChanged };
+    const horizontal = orientation === "horizontal";
+    const autoSize = useMemo(() => {
+        const declared = collectPanelProps(children).map((panel) => staticPercent(panel.defaultSize));
+        const unknown = declared.filter((size) => size === undefined).length;
+        const known = total(declared.filter((size) => size !== undefined));
+        return unknown ? Math.max(0, 100 - known) / unknown : 0;
+    }, [children]);
+    const ordered = useCallback(() => [...panels.current.values()].sort((a, b) => a.element.compareDocumentPosition(b.element) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+        ? -1
+        : 1), []);
+    const available = useCallback(() => {
+        const root = element.current;
+        if (!root)
+            return 0;
+        let size = horizontal ? root.clientWidth : root.clientHeight;
+        for (const separator of separators.current.values())
+            size -= horizontal ? separator.offsetWidth : separator.offsetHeight;
+        return Math.max(0, size);
+    }, [horizontal]);
+    const measureBounds = useCallback((entries) => {
+        const space = available();
+        return entries.map((entry) => {
+            const min = toPercent(entry.minSize, space, entry.element) ?? 0;
+            const max = toPercent(entry.maxSize, space, entry.element) ?? 100;
+            return {
+                min: Math.min(Math.max(min, 0), 100),
+                max: Math.max(Math.min(max, 100), Math.min(Math.max(min, 0), 100)),
+            };
+        });
+    }, [available]);
+    const commit = useCallback((ids, sizes, settled) => {
+        const next = Object.fromEntries(ids.map((id, index) => [id, sizes[index]]));
+        if (!sameLayout(next, layoutRef.current)) {
+            layoutRef.current = next;
+            setLayout(next);
+            callbacks.current.onLayoutChange?.(next);
+        }
+        else if (!settled)
+            return;
+        if (settled)
+            callbacks.current.onLayoutChanged?.(next, settled);
+    }, []);
+    const defaultLayoutKey = defaultLayout ? JSON.stringify(defaultLayout) : "";
+    useIsomorphicLayoutEffect(() => {
+        const entries = ordered();
+        const ids = entries.map((entry) => entry.id);
+        const key = ids.join("\u0000");
+        const limits = measureBounds(entries);
+        const changedPanels = key !== panelKey.current;
+        const changedDefaults = defaultLayoutKey !== defaultsKey.current;
+        if (changedPanels)
+            interacted.current = false;
+        let sizes;
+        if (changedPanels || (changedDefaults && !interacted.current)) {
+            const saved = defaultLayout &&
+                ids.length &&
+                ids.every((id) => typeof defaultLayout[id] === "number")
+                ? ids.map((id) => defaultLayout[id])
+                : null;
+            if (saved)
+                sizes = saved;
+            else {
+                const space = available();
+                const declared = entries.map((entry) => toPercent(entry.defaultSize, space, entry.element));
+                const unknown = declared.filter((size) => size === undefined).length;
+                const rest = Math.max(0, 100 -
+                    total(declared.filter((size) => size !== undefined))) / Math.max(unknown, 1);
+                sizes = declared.map((size) => size ?? rest);
+            }
+        }
+        else
+            sizes = ids.map((id) => layoutRef.current[id] ?? 0);
+        const before = layoutRef.current;
+        const next = validate(sizes, limits);
+        const nextLayout = Object.fromEntries(ids.map((id, index) => [id, next[index]]));
+        commit(ids, next, null);
+        if (changedPanels || !sameLayout(before, nextLayout))
+            callbacks.current.onLayoutChanged?.(nextLayout, {
+                isUserInteraction: false,
+            });
+        panelKey.current = key;
+        defaultsKey.current = defaultLayoutKey;
+        const nextBounds = Object.fromEntries(ids.map((id, index) => [id, limits[index]]));
+        setBounds((current) => JSON.stringify(current) === JSON.stringify(nextBounds)
+            ? current
+            : nextBounds);
+        const nextLinks = {};
+        for (const [separatorId, separator] of separators.current) {
+            let previous;
+            let following;
+            for (const entry of entries) {
+                if (separator.compareDocumentPosition(entry.element) &
+                    Node.DOCUMENT_POSITION_PRECEDING)
+                    previous = entry;
+                else {
+                    following = entry;
+                    break;
+                }
+            }
+            if (previous && following)
+                nextLinks[separatorId] = { before: previous.id, after: following.id };
+        }
+        setLinks((current) => JSON.stringify(current) === JSON.stringify(nextLinks)
+            ? current
+            : nextLinks);
+    }, [
+        version,
+        extent,
+        defaultLayoutKey,
+        ordered,
+        measureBounds,
+        available,
+        commit,
+    ]);
+    useEffect(() => {
+        const root = element.current;
+        if (!root || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => setExtent(Math.round(available())));
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, [available]);
+    const registerPanel = useCallback((entry) => {
+        panels.current.set(entry.id, entry);
+        setVersion((value) => value + 1);
+        return () => {
+            if (panels.current.get(entry.id) === entry)
+                panels.current.delete(entry.id);
+            setVersion((value) => value + 1);
+        };
+    }, []);
+    const registerSeparator = useCallback((id, node) => {
+        separators.current.set(id, node);
+        setVersion((value) => value + 1);
+        return () => {
+            separators.current.delete(id);
+            setVersion((value) => value + 1);
+        };
+    }, []);
+    const pivotFor = useCallback((separatorId) => {
+        const separator = separators.current.get(separatorId);
+        if (!separator)
+            return null;
+        const entries = ordered();
+        let pivot = -1;
+        entries.forEach((entry, index) => {
+            if (separator.compareDocumentPosition(entry.element) &
+                Node.DOCUMENT_POSITION_PRECEDING)
+                pivot = index;
+        });
+        if (pivot < 0 || pivot >= entries.length - 1)
+            return null;
+        const ids = entries.map((entry) => entry.id);
+        return {
+            ids,
+            pivot,
+            base: ids.map((id) => layoutRef.current[id] ?? 0),
+            limits: measureBounds(entries),
+        };
+    }, [ordered, measureBounds]);
+    const reversed = useCallback(() => horizontal &&
+        !!element.current &&
+        getComputedStyle(element.current).direction === "rtl", [horizontal]);
+    const startDrag = useCallback((separatorId, event) => {
+        const target = pivotFor(separatorId);
+        if (!target)
+            return;
+        event.preventDefault();
+        const handle = event.currentTarget;
+        const pointerId = event.pointerId;
+        const origin = horizontal ? event.clientX : event.clientY;
+        const space = available();
+        const direction = reversed() ? -1 : 1;
+        const ownerDocument = handle.ownerDocument;
+        const root = ownerDocument.documentElement;
+        const previousCursor = root.style.cursor;
+        const previousSelect = root.style.userSelect;
+        root.style.cursor = horizontal ? "col-resize" : "row-resize";
+        root.style.userSelect = "none";
+        handle.setPointerCapture?.(pointerId);
+        handle.focus({ preventScroll: true });
+        setDragging(separatorId);
+        let latest = target.base;
+        const move = (moveEvent) => {
+            if (moveEvent.pointerId !== pointerId || space <= 0)
+                return;
+            const position = horizontal ? moveEvent.clientX : moveEvent.clientY;
+            const delta = (((position - origin) * direction) / space) * 100;
+            latest = resize(target.base, target.limits, target.pivot, delta);
+            commit(target.ids, latest, null);
+        };
+        const end = (endEvent) => {
+            if (endEvent.pointerId !== pointerId)
+                return;
+            handle.removeEventListener("pointermove", move);
+            handle.removeEventListener("pointerup", end);
+            handle.removeEventListener("pointercancel", end);
+            handle.releasePointerCapture?.(pointerId);
+            root.style.cursor = previousCursor;
+            root.style.userSelect = previousSelect;
+            setDragging(null);
+            interacted.current = true;
+            commit(target.ids, latest, { isUserInteraction: true });
+        };
+        handle.addEventListener("pointermove", move);
+        handle.addEventListener("pointerup", end);
+        handle.addEventListener("pointercancel", end);
+    }, [pivotFor, horizontal, available, reversed, commit]);
+    const resizeWithKey = useCallback((separatorId, key) => {
+        const target = pivotFor(separatorId);
+        if (!target)
+            return false;
+        const { base, limits, pivot } = target;
+        const forward = reversed() ? -KEYBOARD_STEP : KEYBOARD_STEP;
+        let delta;
+        if (key === (horizontal ? "ArrowRight" : "ArrowDown"))
+            delta = forward;
+        else if (key === (horizontal ? "ArrowLeft" : "ArrowUp"))
+            delta = -forward;
+        else if (key === "Home")
+            delta = limits[pivot].min - base[pivot];
+        else if (key === "End")
+            delta = limits[pivot].max - base[pivot];
+        else
+            return false;
+        interacted.current = true;
+        commit(target.ids, resize(base, limits, pivot, delta), {
+            isUserInteraction: true,
+        });
+        return true;
+    }, [pivotFor, horizontal, reversed, commit]);
+    const context = useMemo(() => ({
+        orientation,
+        layout,
+        autoSize,
+        bounds,
+        links,
+        dragging,
+        registerPanel,
+        registerSeparator,
+        startDrag,
+        resizeWithKey,
+    }), [
+        orientation,
+        layout,
+        autoSize,
+        bounds,
+        links,
+        dragging,
+        registerPanel,
+        registerSeparator,
+        startDrag,
+        resizeWithKey,
+    ]);
+    return (_jsx(GroupContext, { value: context, children: _jsx("div", { "data-slot": "resizable-panel-group", "data-orientation": orientation, "data-dragging": dragging ? "" : undefined, className: cn("sprout-resizable-group", className), ref: (node) => {
+                element.current = node;
+                assignRef(ref, node);
+            }, ...props, children: children }) }));
+}
+/** One resizable region. It must be a direct child of `ResizablePanelGroup`. */
+export function ResizablePanel({ id: idProp, defaultSize, minSize, maxSize, className, style, ref, ...props }) {
+    const group = useGroup("ResizablePanel");
+    const generated = useId();
+    const id = idProp ?? generated;
+    const element = useRef(null);
+    const { registerPanel } = group;
+    useIsomorphicLayoutEffect(() => {
+        if (!element.current)
+            return;
+        return registerPanel({
+            id,
+            element: element.current,
+            defaultSize,
+            minSize,
+            maxSize,
+        });
+    }, [registerPanel, id, defaultSize, minSize, maxSize]);
+    const size = group.layout[id] ?? staticPercent(defaultSize) ?? group.autoSize;
+    const flex = { flexGrow: size, flexShrink: 1, flexBasis: 0 };
+    return (_jsx("div", { "data-slot": "resizable-panel", "data-panel-id": id, id: id, className: cn("sprout-resizable-panel", className), ref: (node) => {
+            element.current = node;
+            assignRef(ref, node);
+        }, ...props, style: { ...style, ...flex } }));
+}
+/**
+ * The divider between two panels. Drag it, or focus it and use the arrow keys.
+ * Home and End move it to the first panel's minimum and maximum size.
+ */
+export function ResizableHandle({ withHandle = false, className, children, onPointerDown, onKeyDown, ref, ...props }) {
+    const group = useGroup("ResizableHandle");
+    const id = useId();
+    const element = useRef(null);
+    const { registerSeparator } = group;
+    useIsomorphicLayoutEffect(() => {
+        if (!element.current)
+            return;
+        return registerSeparator(id, element.current);
+    }, [registerSeparator, id]);
+    const link = group.links[id];
+    const value = link ? group.layout[link.before] : undefined;
+    let limits;
+    if (link && group.bounds[link.before]) {
+        const own = group.bounds[link.before];
+        const others = Object.entries(group.bounds).filter(([key]) => key !== link.before);
+        limits = {
+            min: Math.max(own.min, 100 - total(others.map(([, bound]) => bound.max))),
+            max: Math.min(own.max, 100 - total(others.map(([, bound]) => bound.min))),
+        };
+    }
+    const lineOrientation = group.orientation === "horizontal" ? "vertical" : "horizontal";
+    return (_jsxs("div", { role: "separator", tabIndex: 0, "aria-orientation": lineOrientation, "aria-controls": link?.before, "aria-valuenow": value === undefined ? undefined : Math.round(value), "aria-valuemin": limits ? Math.round(limits.min) : 0, "aria-valuemax": limits ? Math.round(limits.max) : 100, "data-slot": "resizable-handle", "data-orientation": lineOrientation, "data-with-handle": withHandle ? "" : undefined, "data-dragging": group.dragging === id ? "" : undefined, className: cn("sprout-resizable-handle", className), ref: (node) => {
+            element.current = node;
+            assignRef(ref, node);
+        }, onPointerDown: (event) => {
+            onPointerDown?.(event);
+            if (event.defaultPrevented || event.button !== 0)
+                return;
+            group.startDrag(id, event);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            if (group.resizeWithKey(id, event.key))
+                event.preventDefault();
+        }, ...props, children: [withHandle && (_jsx("span", { "aria-hidden": "true", "data-slot": "resizable-handle-grip", className: "sprout-resizable-grip" })), children] }));
+}
+const storageListeners = new Set();
+function browserStorage() {
+    try {
+        return typeof window === "undefined" ? undefined : window.localStorage;
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * Remembers a group's layout between visits. Spread the result onto
+ * `ResizablePanelGroup` as `defaultLayout` and `onLayoutChanged`.
+ */
+export function useResizableLayout({ id, panelIds, onlySaveAfterUserInteractions = false, storage, }) {
+    const key = `sprout-resizable:${id}${panelIds ? `:${panelIds.join(",")}` : ""}`;
+    const subscribe = useCallback((listener) => {
+        storageListeners.add(listener);
+        window.addEventListener("storage", listener);
+        return () => {
+            storageListeners.delete(listener);
+            window.removeEventListener("storage", listener);
+        };
+    }, []);
+    const raw = useSyncExternalStore(subscribe, () => {
+        try {
+            return (storage ?? browserStorage())?.getItem(key) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }, () => null);
+    const defaultLayout = useMemo(() => {
+        if (!raw)
+            return undefined;
+        try {
+            const parsed = JSON.parse(raw);
+            if (!parsed || typeof parsed !== "object" || Array.isArray(parsed))
+                return undefined;
+            const entries = Object.entries(parsed);
+            return entries.every(([, size]) => typeof size === "number" && Number.isFinite(size))
+                ? Object.fromEntries(entries)
+                : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, [raw]);
+    const onLayoutChanged = useCallback((layout, details) => {
+        if (onlySaveAfterUserInteractions && !details.isUserInteraction)
+            return;
+        const value = JSON.stringify(layout);
+        try {
+            const target = storage ?? browserStorage();
+            if (!target || target.getItem(key) === value)
+                return;
+            target.setItem(key, value);
+        }
+        catch {
+            return;
+        }
+        for (const listener of storageListeners)
+            listener();
+    }, [key, onlySaveAfterUserInteractions, storage]);
+    return { defaultLayout, onLayoutChanged };
+}

package/dist/components/result-card.d.ts

@@ -0,0 +1,58 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type Brand } from "./brand-icon.js";
+export declare const resultCardKindNames: readonly ["File", "Plan", "Workflow", "Action", "Calendar", "Table", "Activity", "Agent", "Skill"];
+export declare const resultCardStateNames: readonly ["default", "loading", "running", "disabled", "error", "success"];
+export declare const resultAppActionStateNames: readonly ["completed", "pending", "running", "failed", "unknown", "blocked", "cancelled", "skipped"];
+export type ResultCardKind = (typeof resultCardKindNames)[number];
+export type ResultCardState = (typeof resultCardStateNames)[number];
+export type ResultAppActionState = (typeof resultAppActionStateNames)[number];
+export type ResultAppAction = {
+    label: string;
+    state: ResultAppActionState;
+};
+/** One app that took part in a result. `brand: null` shows a generic plug. */
+export type ResultApp = {
+    brand: Brand | null;
+    name: string;
+    actions: readonly ResultAppAction[];
+};
+export type ResultCardAction = {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean | undefined;
+};
+export interface ResultCardProps extends Omit<ComponentProps<"section">, "title" | "children"> {
+    title: string;
+    kind: ResultCardKind;
+    /** Apps used. Repeated brands merge; two tiles show, the rest fold into “+N”. */
+    apps: readonly ResultApp[];
+    status: string;
+    /**
+     * `loading` and `running` show a spinner and set `aria-busy`; `loading`
+     * also disables the action. `disabled` disables the action and app tiles.
+     * `success` and `error` tint the status and add a check or warning icon.
+     */
+    state?: ResultCardState | undefined;
+    /** One outline button, beside the text from 28rem wide and below it under. */
+    action?: ResultCardAction | undefined;
+    /** Shown in a tile when no app is listed. */
+    icon?: ReactNode;
+    /** Extra content below the header, such as progress or controls. */
+    children?: ReactNode;
+}
+/**
+ * A compact card for something an agent made or did: a file, plan, workflow,
+ * action, calendar read, or table result. It names the apps used, shows a
+ * live status, and offers one action such as “Open in Canvas”.
+ */
+export declare function ResultCard({ title, kind, apps, status, state, action, icon, children, className, ...props }: ResultCardProps): import("react").JSX.Element;
+export interface ResultAppActionsProps extends Omit<ComponentProps<"div">, "children"> {
+    apps: readonly ResultApp[];
+    /** Show each app’s icon and name above its actions. Defaults to `true`. */
+    showAppNames?: boolean | undefined;
+}
+/**
+ * The actions each app took, grouped by app. A check marks completed
+ * actions; every other state is spelled out, such as “Unconfirmed:”.
+ */
+export declare function ResultAppActions({ apps, showAppNames, className, ...props }: ResultAppActionsProps): import("react").JSX.Element;

package/dist/components/result-card.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "reicon-react/icons/Check";
+import { Danger } from "reicon-react/icons/Danger";
+import { Plug } from "reicon-react/icons/Plug";
+import { cn } from "../internal/classes.js";
+import { BrandIcon, BrandTile } from "./brand-icon.js";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger, } from "./popover.js";
+import { Spinner } from "./spinner.js";
+export const resultCardKindNames = [
+    "File",
+    "Plan",
+    "Workflow",
+    "Action",
+    "Calendar",
+    "Table",
+    "Activity",
+    "Agent",
+    "Skill",
+];
+export const resultCardStateNames = [
+    "default",
+    "loading",
+    "running",
+    "disabled",
+    "error",
+    "success",
+];
+export const resultAppActionStateNames = [
+    "completed",
+    "pending",
+    "running",
+    "failed",
+    "unknown",
+    "blocked",
+    "cancelled",
+    "skipped",
+];
+const actionPrefixes = {
+    failed: "Failed:",
+    unknown: "Unconfirmed:",
+    pending: "Pending:",
+    running: "In progress:",
+    blocked: "Blocked:",
+    cancelled: "Cancelled:",
+    skipped: "Skipped:",
+};
+function mergeApps(apps) {
+    const byKey = new Map();
+    for (const app of apps) {
+        const key = app.brand ?? app.name;
+        const existing = byKey.get(key);
+        byKey.set(key, existing
+            ? { ...existing, actions: [...existing.actions, ...app.actions] }
+            : app);
+    }
+    return [...byKey.values()];
+}
+/**
+ * A compact card for something an agent made or did: a file, plan, workflow,
+ * action, calendar read, or table result. It names the apps used, shows a
+ * live status, and offers one action such as “Open in Canvas”.
+ */
+export function ResultCard({ title, kind, apps, status, state = "default", action, icon, children, className, ...props }) {
+    const unique = mergeApps(apps);
+    const visible = unique.slice(0, 2);
+    const hidden = unique.slice(2);
+    const busy = state === "loading" || state === "running";
+    const disabled = state === "disabled";
+    return (_jsxs("section", { "data-slot": "result-card", "data-state": state, "data-kind": kind, "aria-label": `${kind}: ${title}`, "aria-busy": busy, ...props, className: cn("sprout-result-card", className), children: [_jsxs("div", { className: "sprout-result-card-header", children: [visible.length > 0 ? (_jsxs("div", { role: "group", "aria-label": "Apps used", className: "sprout-result-card-apps", children: [visible.map((app) => (_jsx("span", { "data-result-app": app.brand ?? "connected-app", className: "sprout-result-card-app", children: _jsx(AppActionsPopover, { apps: [app], disabled: disabled }) }, app.brand ?? app.name))), hidden.length > 0 && (_jsx("span", { "data-result-overflow": hidden.length, className: "sprout-result-card-app", children: _jsx(AppActionsPopover, { apps: hidden, overflow: true, disabled: disabled }) }))] })) : (icon && (_jsx(BrandTile, { "aria-hidden": "true", className: "sprout-result-card-icon", children: icon }))), _jsxs("div", { className: "sprout-result-card-main", children: [_jsxs("div", { className: "sprout-result-card-text", children: [_jsx("h3", { className: "sprout-result-card-title", children: title }), _jsxs("div", { className: "sprout-result-card-meta", children: [_jsx("span", { children: kind }), _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsxs("span", { role: "status", "data-tone": state === "success" || state === "error" ? state : undefined, className: "sprout-result-card-status", children: [busy ? (_jsx(Spinner, { "aria-hidden": "true" })) : state === "success" ? (_jsx(Check, { size: 14, "aria-hidden": "true" })) : state === "error" ? (_jsx(Danger, { size: 14, "aria-hidden": "true" })) : null, status] })] })] }), action && (_jsx("div", { className: "sprout-result-card-action", children: _jsx(Button, { variant: "outline", size: "result-card", disabled: state === "loading" || disabled || action.disabled === true, onClick: action.onClick, children: action.label }) }))] })] }), children && _jsx("div", { className: "sprout-result-card-body", children: children })] }));
+}
+function AppActionsPopover({ apps, overflow = false, disabled, }) {
+    const first = apps[0];
+    if (!first)
+        return null;
+    const title = overflow
+        ? `${apps.length} more ${apps.length === 1 ? "app" : "apps"}`
+        : `${first.name} actions`;
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { openOnHover: true, delay: 800, closeDelay: 200, render: _jsx(BrandTile, { size: "action", render: _jsx(Button, { variant: "ghost", size: "icon", disabled: disabled }) }), "aria-label": title, children: overflow ? (_jsxs("span", { className: "sprout-result-card-overflow", children: ["+", apps.length] })) : first.brand ? (_jsx(BrandIcon, { brand: first.brand, size: "fill" })) : (_jsx(Plug, { size: 18, "aria-hidden": "true" })) }), _jsxs(PopoverContent, { size: "app-actions", align: "start", sideOffset: 8, initialFocus: (interaction) => interaction !== "mouse", children: [_jsx(PopoverTitle, { children: title }), _jsx(ResultAppActions, { apps: apps, showAppNames: overflow })] })] }));
+}
+/**
+ * The actions each app took, grouped by app. A check marks completed
+ * actions; every other state is spelled out, such as “Unconfirmed:”.
+ */
+export function ResultAppActions({ apps, showAppNames = true, className, ...props }) {
+    return (_jsx("div", { "data-slot": "result-app-actions", ...props, className: cn("sprout-result-app-actions", className), children: apps.map((app) => (_jsxs("section", { "aria-label": app.name, className: "sprout-result-app", children: [showAppNames && (_jsxs("div", { className: "sprout-result-app-name", children: [app.brand ? (_jsx(BrandIcon, { brand: app.brand, size: "glyph" })) : (_jsx(Plug, { size: 20, "aria-hidden": "true" })), _jsx("h4", { children: app.name })] })), app.actions.length === 0 ? (_jsx("p", { className: "sprout-result-app-empty", children: "No action details were recorded." })) : (_jsx("ul", { className: "sprout-result-app-list", children: app.actions.map((action, index) => (_jsxs("li", { "data-state": action.state, className: "sprout-result-app-action", children: [action.state === "completed" ? (_jsxs("span", { className: "sprout-result-app-check", children: [_jsx(Check, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sprout-result-sr-only", children: "Completed:" })] })) : (_jsx("span", { className: "sprout-result-app-prefix", children: actionPrefixes[action.state] })), _jsx("span", { className: "sprout-result-app-label", children: action.label })] }, `${action.label}:${index}`))) }))] }, app.brand ?? app.name))) }));
+}