@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/resizable.js

@@ -1,8 +1,8 @@
-"use client";
+'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"];
+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);
@@ -10,12 +10,12 @@ function useGroup(part) {
         throw new Error(`${part} must be used inside ResizablePanelGroup.`);
     return context;
 }
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+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")
+    if (typeof size !== 'string')
         return undefined;
     const value = size.trim();
     if (/^-?[\d.]+%?$/.test(value))
@@ -31,22 +31,22 @@ function toPercent(size, available, element) {
     if (available <= 0)
         return undefined;
     let pixels;
-    if (typeof size === "number")
+    if (typeof size === 'number')
         pixels = size;
     else {
         const value = Number.parseFloat(size);
-        const unit = size.trim().replace(/^-?[\d.]+/, "");
+        const unit = size.trim().replace(/^-?[\d.]+/, '');
         const view = element.ownerDocument.defaultView;
-        const font = (node) => Number.parseFloat(view?.getComputedStyle(node).fontSize ?? "") || 16;
-        if (unit === "px")
+        const font = (node) => Number.parseFloat(view?.getComputedStyle(node).fontSize ?? '') || 16;
+        if (unit === 'px')
             pixels = value;
-        else if (unit === "rem")
+        else if (unit === 'rem')
             pixels = value * font(element.ownerDocument.documentElement);
-        else if (unit === "em")
+        else if (unit === 'em')
             pixels = value * font(element);
-        else if (unit === "vw")
+        else if (unit === 'vw')
             pixels = (value * (view?.innerWidth ?? 0)) / 100;
-        else if (unit === "vh")
+        else if (unit === 'vh')
             pixels = (value * (view?.innerHeight ?? 0)) / 100;
         else
             return undefined;
@@ -62,18 +62,14 @@ function validate(sizes, bounds) {
         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]
-            : []);
+        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);
+    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
@@ -91,7 +87,7 @@ function resize(base, bounds, pivot, delta) {
             .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)));
+    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) {
@@ -105,11 +101,10 @@ function resize(base, bounds, pivot, delta) {
 }
 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));
+    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) => {
+    Children.forEach(children, child => {
         if (!isValidElement(child))
             return;
         if (child.type === ResizablePanel)
@@ -120,13 +115,13 @@ function collectPanelProps(children, found = []) {
     return found;
 }
 function assignRef(ref, value) {
-    if (typeof ref === "function")
+    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 }) {
+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());
@@ -142,17 +137,14 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
     const interacted = useRef(false);
     const callbacks = useRef({ onLayoutChange, onLayoutChanged });
     callbacks.current = { onLayoutChange, onLayoutChanged };
-    const horizontal = orientation === "horizontal";
+    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 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 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)
@@ -164,7 +156,7 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
     }, [horizontal]);
     const measureBounds = useCallback((entries) => {
         const space = available();
-        return entries.map((entry) => {
+        return entries.map(entry => {
             const min = toPercent(entry.minSize, space, entry.element) ?? 0;
             const max = toPercent(entry.maxSize, space, entry.element) ?? 100;
             return {
@@ -185,11 +177,11 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
         if (settled)
             callbacks.current.onLayoutChanged?.(next, settled);
     }, []);
-    const defaultLayoutKey = defaultLayout ? JSON.stringify(defaultLayout) : "";
+    const defaultLayoutKey = defaultLayout ? JSON.stringify(defaultLayout) : '';
     useIsomorphicLayoutEffect(() => {
         const entries = ordered();
-        const ids = entries.map((entry) => entry.id);
-        const key = ids.join("\u0000");
+        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;
@@ -197,24 +189,22 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
             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])
+            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);
+                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);
+            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]]));
@@ -226,16 +216,13 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
         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);
+        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)
+                if (separator.compareDocumentPosition(entry.element) & Node.DOCUMENT_POSITION_PRECEDING)
                     previous = entry;
                 else {
                     following = entry;
@@ -245,21 +232,11 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
             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,
-    ]);
+        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")
+        if (!root || typeof ResizeObserver === 'undefined')
             return;
         const observer = new ResizeObserver(() => setExtent(Math.round(available())));
         observer.observe(root);
@@ -267,19 +244,19 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
     }, [available]);
     const registerPanel = useCallback((entry) => {
         panels.current.set(entry.id, entry);
-        setVersion((value) => value + 1);
+        setVersion(value => value + 1);
         return () => {
             if (panels.current.get(entry.id) === entry)
                 panels.current.delete(entry.id);
-            setVersion((value) => value + 1);
+            setVersion(value => value + 1);
         };
     }, []);
     const registerSeparator = useCallback((id, node) => {
         separators.current.set(id, node);
-        setVersion((value) => value + 1);
+        setVersion(value => value + 1);
         return () => {
             separators.current.delete(id);
-            setVersion((value) => value + 1);
+            setVersion(value => value + 1);
         };
     }, []);
     const pivotFor = useCallback((separatorId) => {
@@ -289,23 +266,20 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
         const entries = ordered();
         let pivot = -1;
         entries.forEach((entry, index) => {
-            if (separator.compareDocumentPosition(entry.element) &
-                Node.DOCUMENT_POSITION_PRECEDING)
+            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);
+        const ids = entries.map(entry => entry.id);
         return {
             ids,
             pivot,
-            base: ids.map((id) => layoutRef.current[id] ?? 0),
+            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 reversed = useCallback(() => horizontal && !!element.current && getComputedStyle(element.current).direction === 'rtl', [horizontal]);
     const startDrag = useCallback((separatorId, event) => {
         const target = pivotFor(separatorId);
         if (!target)
@@ -320,8 +294,8 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
         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";
+        root.style.cursor = horizontal ? 'col-resize' : 'row-resize';
+        root.style.userSelect = 'none';
         handle.setPointerCapture?.(pointerId);
         handle.focus({ preventScroll: true });
         setDragging(separatorId);
@@ -337,9 +311,9 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
         const end = (endEvent) => {
             if (endEvent.pointerId !== pointerId)
                 return;
-            handle.removeEventListener("pointermove", move);
-            handle.removeEventListener("pointerup", end);
-            handle.removeEventListener("pointercancel", end);
+            handle.removeEventListener('pointermove', move);
+            handle.removeEventListener('pointerup', end);
+            handle.removeEventListener('pointercancel', end);
             handle.releasePointerCapture?.(pointerId);
             root.style.cursor = previousCursor;
             root.style.userSelect = previousSelect;
@@ -347,9 +321,9 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
             interacted.current = true;
             commit(target.ids, latest, { isUserInteraction: true });
         };
-        handle.addEventListener("pointermove", move);
-        handle.addEventListener("pointerup", end);
-        handle.addEventListener("pointercancel", end);
+        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);
@@ -358,13 +332,13 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
         const { base, limits, pivot } = target;
         const forward = reversed() ? -KEYBOARD_STEP : KEYBOARD_STEP;
         let delta;
-        if (key === (horizontal ? "ArrowRight" : "ArrowDown"))
+        if (key === (horizontal ? 'ArrowRight' : 'ArrowDown'))
             delta = forward;
-        else if (key === (horizontal ? "ArrowLeft" : "ArrowUp"))
+        else if (key === (horizontal ? 'ArrowLeft' : 'ArrowUp'))
             delta = -forward;
-        else if (key === "Home")
+        else if (key === 'Home')
             delta = limits[pivot].min - base[pivot];
-        else if (key === "End")
+        else if (key === 'End')
             delta = limits[pivot].max - base[pivot];
         else
             return false;
@@ -397,14 +371,14 @@ export function ResizablePanelGroup({ orientation = "horizontal", defaultLayout,
         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) => {
+    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 group = useGroup('ResizablePanel');
     const generated = useId();
     const id = idProp ?? generated;
     const element = useRef(null);
@@ -422,7 +396,7 @@ export function ResizablePanel({ id: idProp, defaultSize, minSize, maxSize, clas
     }, [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) => {
+    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 } }));
@@ -432,7 +406,7 @@ export function ResizablePanel({ id: idProp, defaultSize, minSize, maxSize, clas
  * 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 group = useGroup('ResizableHandle');
     const id = useId();
     const element = useRef(null);
     const { registerSeparator } = group;
@@ -452,11 +426,11 @@ export function ResizableHandle({ withHandle = false, className, children, onPoi
             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) => {
+    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 => {
             onPointerDown?.(event);
             if (event.defaultPrevented || event.button !== 0)
                 return;
@@ -467,12 +441,12 @@ export function ResizableHandle({ withHandle = false, className, children, onPoi
                 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] }));
+        }, ...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;
+        return typeof window === 'undefined' ? undefined : window.localStorage;
     }
     catch {
         return undefined;
@@ -483,13 +457,13 @@ function browserStorage() {
  * `ResizablePanelGroup` as `defaultLayout` and `onLayoutChanged`.
  */
 export function useResizableLayout({ id, panelIds, onlySaveAfterUserInteractions = false, storage, }) {
-    const key = `sprout-resizable:${id}${panelIds ? `:${panelIds.join(",")}` : ""}`;
+    const key = `sprout-resizable:${id}${panelIds ? `:${panelIds.join(',')}` : ''}`;
     const subscribe = useCallback((listener) => {
         storageListeners.add(listener);
-        window.addEventListener("storage", listener);
+        window.addEventListener('storage', listener);
         return () => {
             storageListeners.delete(listener);
-            window.removeEventListener("storage", listener);
+            window.removeEventListener('storage', listener);
         };
     }, []);
     const raw = useSyncExternalStore(subscribe, () => {
@@ -505,10 +479,10 @@ export function useResizableLayout({ id, panelIds, onlySaveAfterUserInteractions
             return undefined;
         try {
             const parsed = JSON.parse(raw);
-            if (!parsed || typeof parsed !== "object" || Array.isArray(parsed))
+            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))
+            return entries.every(([, size]) => typeof size === 'number' && Number.isFinite(size))
                 ? Object.fromEntries(entries)
                 : undefined;
         }

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

@@ -1,5 +1,5 @@
-import type { ComponentProps, ReactNode } from "react";
-import { type Brand } from "./brand-icon.js";
+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"];
@@ -10,10 +10,15 @@ export type ResultAppAction = {
     label: string;
     state: ResultAppActionState;
 };
-/** One app that took part in a result. `brand: null` shows a generic plug. */
+/**
+ * One app that took part in a result. `brand: null` shows `icon`, or a
+ * generic plug when no icon is given.
+ */
 export type ResultApp = {
     brand: Brand | null;
     name: string;
+    /** Shown when `brand` is null, such as a table icon for your own data. */
+    icon?: ReactNode;
     actions: readonly ResultAppAction[];
 };
 export type ResultCardAction = {
@@ -21,7 +26,7 @@ export type ResultCardAction = {
     onClick: () => void;
     disabled?: boolean | undefined;
 };
-export interface ResultCardProps extends Omit<ComponentProps<"section">, "title" | "children"> {
+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”. */
@@ -46,7 +51,7 @@ export interface ResultCardProps extends Omit<ComponentProps<"section">, "title"
  * 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"> {
+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;

package/dist/components/result-card.js

@@ -1,59 +1,50 @@
-"use client";
+'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";
+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",
+    '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",
+    '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:",
+    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);
+        byKey.set(key, existing ? { ...existing, actions: [...existing.actions, ...app.actions] } : app);
     }
     return [...byKey.values()];
 }
@@ -62,27 +53,25 @@ function mergeApps(apps) {
  * 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 }) {
+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 })] }));
+    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 })] })] }));
+    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" })) : first.icon ? (_jsx("span", { "aria-hidden": "true", className: "sprout-result-app-icon", children: first.icon })) : (_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))) }));
+    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" })) : app.icon ? (_jsx("span", { "aria-hidden": "true", className: "sprout-result-app-icon", children: app.icon })) : (_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))) }));
 }