@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/page-header.js

@@ -1,23 +1,23 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, } from "react";
-import { createPortal } from "react-dom";
-import { useRender } from "@base-ui/react/use-render";
-import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
-import { ChevronRight } from "reicon-react/icons/ChevronRight";
-import { cn } from "../internal/classes.js";
-import { Button } from "./button.js";
+import { createContext, useContext, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useRender } from '@base-ui/react/use-render';
+import { ChevronLeft } from 'reicon-react/icons/ChevronLeft';
+import { ChevronRight } from 'reicon-react/icons/ChevronRight';
+import { cn } from '../internal/classes.js';
+import { Button } from './button.js';
 export const PageChromeContext = createContext({
     title: null,
     actions: null,
 });
 function ParentLink({ link, label }) {
     return useRender({
-        defaultTagName: "a",
+        defaultTagName: 'a',
         render: link,
         props: {
-            "data-slot": "page-breadcrumb-link",
-            className: "sprout-page-header-breadcrumb-link",
+            'data-slot': 'page-breadcrumb-link',
+            className: 'sprout-page-header-breadcrumb-link',
             children: label,
         },
     });
@@ -25,7 +25,7 @@ function ParentLink({ link, label }) {
 export function PageHeader({ title, description, actions, back, parent, titleId, titleRef, focusable, className, }) {
     const chrome = useContext(PageChromeContext);
     const format = chrome.documentTitle;
-    const text = typeof title === "string" ? title : null;
+    const text = typeof title === 'string' ? title : null;
     useEffect(() => {
         if (!text || !format)
             return;
@@ -36,18 +36,18 @@ export function PageHeader({ title, description, actions, back, parent, titleId,
         };
     }, [text, format]);
     const inChrome = !!(chrome.title && chrome.actions);
-    const placement = inChrome ? "chrome" : "page";
+    const placement = inChrome ? 'chrome' : 'page';
     const heading = (_jsx("h1", { id: titleId, ref: titleRef, tabIndex: focusable ? -1 : undefined, "data-slot": "page-title", "data-placement": placement, className: "sprout-page-header-title", children: title }));
     const trail = parent && (_jsx("nav", { "aria-label": "Breadcrumb", "data-slot": "page-breadcrumb", "data-placement": placement, className: "sprout-page-header-breadcrumb", children: _jsxs("ol", { className: "sprout-page-header-breadcrumb-list", children: [_jsx("li", { className: "sprout-page-header-breadcrumb-item", children: _jsx(ParentLink, { ...parent }) }), _jsx("li", { role: "presentation", "aria-hidden": "true", className: "sprout-page-header-breadcrumb-separator", children: _jsx(ChevronRight, { size: 14 }) }), _jsx("li", { "aria-current": "page", className: "sprout-page-header-breadcrumb-item sprout-page-header-breadcrumb-current", children: heading })] }) }));
     const backButton = back && (_jsxs(Button, { variant: "ghost", size: "back", nativeButton: false, render: back.link, "data-slot": "page-back", className: "sprout-page-header-back", children: [_jsx(ChevronLeft, { "data-icon": "inline-start", "aria-hidden": "true" }), _jsx("span", { className: "sprout-page-header-back-label", children: back.label })] }));
     if (inChrome) {
         return (_jsxs(_Fragment, { children: [createPortal(_jsxs(_Fragment, { children: [backButton, trail ?? heading] }), chrome.title), actions &&
-                    createPortal(_jsx("div", { "data-slot": "page-actions", "data-placement": "chrome", className: "sprout-page-header-actions", children: actions }), chrome.actions), description && (_jsx("p", { "data-slot": "page-description", className: cn("sprout-page-header-description", className), children: description }))] }));
+                    createPortal(_jsx("div", { "data-slot": "page-actions", "data-placement": "chrome", className: "sprout-page-header-actions", children: actions }), chrome.actions), description && (_jsx("p", { "data-slot": "page-description", className: cn('sprout-page-header-description', className), children: description }))] }));
     }
-    return (_jsxs("header", { "data-slot": "page-header", className: cn("sprout-page-header", className), children: [backButton, _jsxs("div", { className: "sprout-page-header-row", children: [_jsxs("div", { className: "sprout-page-header-text", children: [trail ?? heading, description && (_jsx("p", { "data-slot": "page-description", className: "sprout-page-header-description", children: description }))] }), actions && (_jsx("div", { "data-slot": "page-actions", "data-placement": "page", className: "sprout-page-header-actions", children: actions }))] })] }));
+    return (_jsxs("header", { "data-slot": "page-header", className: cn('sprout-page-header', className), children: [backButton, _jsxs("div", { className: "sprout-page-header-row", children: [_jsxs("div", { className: "sprout-page-header-text", children: [trail ?? heading, description && (_jsx("p", { "data-slot": "page-description", className: "sprout-page-header-description", children: description }))] }), actions && (_jsx("div", { "data-slot": "page-actions", "data-placement": "page", className: "sprout-page-header-actions", children: actions }))] })] }));
 }
 /** Page-level actions without a header: moved into the app header when one is provided. */
 export function PageActions({ children, className }) {
     const { actions } = useContext(PageChromeContext);
-    return actions ? (createPortal(_jsx("div", { "data-slot": "page-actions", "data-placement": "chrome", className: cn("sprout-page-header-actions", className), children: children }), actions)) : (_jsx("div", { "data-slot": "page-actions", "data-placement": "inline", className: cn("sprout-page-header-actions", className), children: children }));
+    return actions ? (createPortal(_jsx("div", { "data-slot": "page-actions", "data-placement": "chrome", className: cn('sprout-page-header-actions', className), children: children }), actions)) : (_jsx("div", { "data-slot": "page-actions", "data-placement": "inline", className: cn('sprout-page-header-actions', className), children: children }));
 }

package/dist/components/pagination.d.ts

@@ -1,12 +1,12 @@
-import type { ComponentProps } from "react";
-import { type ButtonProps, type ButtonSize } from "./button.js";
-export type PaginationProps = ComponentProps<"nav">;
-export declare function Pagination({ className, "aria-label": label, ...props }: PaginationProps): import("react").JSX.Element;
-export type PaginationContentProps = ComponentProps<"ul">;
+import type { ComponentProps } from 'react';
+import { type ButtonProps, type ButtonSize } from './button.js';
+export type PaginationProps = ComponentProps<'nav'>;
+export declare function Pagination({ className, 'aria-label': label, ...props }: PaginationProps): import("react").JSX.Element;
+export type PaginationContentProps = ComponentProps<'ul'>;
 export declare function PaginationContent({ className, ...props }: PaginationContentProps): import("react").JSX.Element;
-export type PaginationItemProps = ComponentProps<"li">;
+export type PaginationItemProps = ComponentProps<'li'>;
 export declare function PaginationItem({ className, ...props }: PaginationItemProps): import("react").JSX.Element;
-export interface PaginationLinkProps extends Omit<ComponentProps<"a">, "className"> {
+export interface PaginationLinkProps extends Omit<ComponentProps<'a'>, 'className'> {
     className?: string;
     /** Marks the current page: outline style and `aria-current="page"`. */
     isActive?: boolean;
@@ -15,7 +15,7 @@ export interface PaginationLinkProps extends Omit<ComponentProps<"a">, "classNam
     /** Sets `aria-disabled`, removes the link from the tab order, and blocks clicks. */
     disabled?: boolean;
     /** Swap the `a` for a router link, as with Base UI `render`. */
-    render?: ButtonProps["render"];
+    render?: ButtonProps['render'];
 }
 export declare function PaginationLink({ className, isActive, size, render, ...props }: PaginationLinkProps): import("react").JSX.Element;
 export interface PaginationDirectionProps extends PaginationLinkProps {
@@ -24,6 +24,6 @@ export interface PaginationDirectionProps extends PaginationLinkProps {
 }
 export declare function PaginationPrevious({ className, text, ...props }: PaginationDirectionProps): import("react").JSX.Element;
 export declare function PaginationNext({ className, text, ...props }: PaginationDirectionProps): import("react").JSX.Element;
-export type PaginationEllipsisProps = ComponentProps<"span">;
+export type PaginationEllipsisProps = ComponentProps<'span'>;
 /** Marks skipped pages. It is hidden from screen readers. */
 export declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react").JSX.Element;

package/dist/components/pagination.js

@@ -1,29 +1,29 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
-import { ChevronRight } from "reicon-react/icons/ChevronRight";
-import { MoreH } from "reicon-react/icons/MoreH";
-import { cn } from "../internal/classes.js";
-import { Button } from "./button.js";
-export function Pagination({ className, "aria-label": label = "pagination", ...props }) {
-    return (_jsx("nav", { role: "navigation", "aria-label": label, "data-slot": "pagination", className: cn("sprout-pagination", className), ...props }));
+import { ChevronLeft } from 'reicon-react/icons/ChevronLeft';
+import { ChevronRight } from 'reicon-react/icons/ChevronRight';
+import { MoreH } from 'reicon-react/icons/MoreH';
+import { cn } from '../internal/classes.js';
+import { Button } from './button.js';
+export function Pagination({ className, 'aria-label': label = 'pagination', ...props }) {
+    return (_jsx("nav", { role: "navigation", "aria-label": label, "data-slot": "pagination", className: cn('sprout-pagination', className), ...props }));
 }
 export function PaginationContent({ className, ...props }) {
-    return (_jsx("ul", { "data-slot": "pagination-content", className: cn("sprout-pagination-content", className), ...props }));
+    return _jsx("ul", { "data-slot": "pagination-content", className: cn('sprout-pagination-content', className), ...props });
 }
 export function PaginationItem({ className, ...props }) {
-    return (_jsx("li", { "data-slot": "pagination-item", className: cn("sprout-pagination-item", className), ...props }));
+    return _jsx("li", { "data-slot": "pagination-item", className: cn('sprout-pagination-item', className), ...props });
 }
-export function PaginationLink({ className, isActive, size = "icon", render, ...props }) {
-    return (_jsx(Button, { variant: isActive ? "outline" : "ghost", size: size, nativeButton: false, render: render, ...props, "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive ? "true" : undefined, className: cn("sprout-pagination-link", className) }));
+export function PaginationLink({ className, isActive, size = 'icon', render, ...props }) {
+    return (_jsx(Button, { variant: isActive ? 'outline' : 'ghost', size: size, nativeButton: false, render: render, ...props, "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive ? 'true' : undefined, className: cn('sprout-pagination-link', className) }));
 }
-export function PaginationPrevious({ className, text = "Previous", ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("sprout-pagination-previous", className), ...props, children: [_jsx(ChevronLeft, { "data-icon": "inline-start", "aria-hidden": "true" }), _jsx("span", { className: "sprout-pagination-label", children: text })] }));
+export function PaginationPrevious({ className, text = 'Previous', ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn('sprout-pagination-previous', className), ...props, children: [_jsx(ChevronLeft, { "data-icon": "inline-start", "aria-hidden": "true" }), _jsx("span", { className: "sprout-pagination-label", children: text })] }));
 }
-export function PaginationNext({ className, text = "Next", ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("sprout-pagination-next", className), ...props, children: [_jsx("span", { className: "sprout-pagination-label", children: text }), _jsx(ChevronRight, { "data-icon": "inline-end", "aria-hidden": "true" })] }));
+export function PaginationNext({ className, text = 'Next', ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn('sprout-pagination-next', className), ...props, children: [_jsx("span", { className: "sprout-pagination-label", children: text }), _jsx(ChevronRight, { "data-icon": "inline-end", "aria-hidden": "true" })] }));
 }
 /** Marks skipped pages. It is hidden from screen readers. */
 export function PaginationEllipsis({ className, ...props }) {
-    return (_jsxs("span", { "aria-hidden": "true", "data-slot": "pagination-ellipsis", className: cn("sprout-pagination-ellipsis", className), ...props, children: [_jsx(MoreH, {}), _jsx("span", { className: "sprout-pagination-sr-only", children: "More pages" })] }));
+    return (_jsxs("span", { "aria-hidden": "true", "data-slot": "pagination-ellipsis", className: cn('sprout-pagination-ellipsis', className), ...props, children: [_jsx(MoreH, {}), _jsx("span", { className: "sprout-pagination-sr-only", children: "More pages" })] }));
 }

package/dist/components/plan-outline.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from 'react';
 export declare const planOutlineMarkNames: readonly ["pending", "running", "attention", "blocked", "done", "failed", "cancelled"];
 /** How a task row is marked. Every mark is paired with a text label; color is never the only signal. */
 export type PlanOutlineMark = (typeof planOutlineMarkNames)[number];
@@ -33,7 +33,7 @@ export type PlanOutlineTask = {
     /** Makes the row a group. Groups start open and list these tasks. */
     children?: readonly PlanOutlineTask[] | undefined;
 };
-export interface PlanOutlineProps extends Omit<ComponentProps<"section">, "title" | "children"> {
+export interface PlanOutlineProps extends Omit<ComponentProps<'section'>, 'title' | 'children'> {
     /** The plan name. It names the section and shows as an `h3`. */
     title: string;
     /** One paragraph under the title. */

package/dist/components/plan-outline.js

@@ -1,34 +1,28 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Collapsible } from "@base-ui/react/collapsible";
-import { createContext, useContext, useId, } from "react";
-import { Ban } from "reicon-react/icons/Ban";
-import { Check } from "reicon-react/icons/Check";
-import { ChevronRight } from "reicon-react/icons/ChevronRight";
-import { Clock } from "reicon-react/icons/Clock";
-import { HelpCircle } from "reicon-react/icons/HelpCircle";
-import { Lock } from "reicon-react/icons/Lock";
-import { User } from "reicon-react/icons/User";
-import { Warning } from "reicon-react/icons/Warning";
-import { cn } from "../internal/classes.js";
-import { Badge } from "./badge.js";
-import { Spinner } from "./spinner.js";
+import { Collapsible } from '@base-ui/react/collapsible';
+import { createContext, useContext, useId } from 'react';
+import { Ban } from 'reicon-react/icons/Ban';
+import { Check } from 'reicon-react/icons/Check';
+import { ChevronRight } from 'reicon-react/icons/ChevronRight';
+import { Clock } from 'reicon-react/icons/Clock';
+import { HelpCircle } from 'reicon-react/icons/HelpCircle';
+import { Lock } from 'reicon-react/icons/Lock';
+import { User } from 'reicon-react/icons/User';
+import { Warning } from 'reicon-react/icons/Warning';
+import { cn } from '../internal/classes.js';
+import { Badge } from './badge.js';
+import { Spinner } from './spinner.js';
 export const planOutlineMarkNames = [
-    "pending",
-    "running",
-    "attention",
-    "blocked",
-    "done",
-    "failed",
-    "cancelled",
-];
-export const planOutlineToneNames = [
-    "active",
-    "attention",
-    "done",
-    "failed",
-    "neutral",
+    'pending',
+    'running',
+    'attention',
+    'blocked',
+    'done',
+    'failed',
+    'cancelled',
 ];
+export const planOutlineToneNames = ['active', 'attention', 'done', 'failed', 'neutral'];
 const markIcons = {
     pending: _jsx(Clock, { size: 14 }),
     attention: _jsx(HelpCircle, { size: 14 }),
@@ -38,20 +32,16 @@ const markIcons = {
     cancelled: _jsx(Ban, { size: 14 }),
 };
 const toneBadges = {
-    active: "info",
-    attention: "warning",
-    done: "success",
-    failed: "destructive",
-    neutral: "secondary",
+    active: 'info',
+    attention: 'warning',
+    done: 'success',
+    failed: 'destructive',
+    neutral: 'secondary',
 };
 function leaves(tasks) {
-    return tasks.flatMap((task) => task.children
-        ? leaves(task.children)
-        : task.mark === "cancelled"
-            ? []
-            : [task]);
+    return tasks.flatMap(task => (task.children ? leaves(task.children) : task.mark === 'cancelled' ? [] : [task]));
 }
-const Scope = createContext("plan");
+const Scope = createContext('plan');
 function useTaskId() {
     const scope = useContext(Scope);
     return (id) => `${scope}-task-${id}`;
@@ -63,40 +53,33 @@ function useTaskId() {
  * dependencies, reason, and actions on demand.
  */
 export function PlanOutline({ title, brief, status, tone, progress, notice, tasks, stale, className, ...props }) {
-    const scope = `plan-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const scope = `plan-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;
     const work = leaves(tasks);
-    return (_jsx(Scope, { value: scope, children: _jsxs("section", { "data-slot": "plan-outline", "aria-label": title, ...props, className: cn("sprout-plan-outline", className), children: [_jsxs("header", { className: "sprout-plan-outline-header", children: [_jsxs("div", { className: "sprout-plan-outline-heading", children: [_jsx("h3", { className: "sprout-plan-outline-title", children: title }), _jsx(Badge, { variant: toneBadges[tone], "data-tone": tone, className: "sprout-plan-outline-status", children: status })] }), brief && _jsx("p", { className: "sprout-plan-outline-brief", children: brief }), _jsxs("div", { className: "sprout-plan-outline-progress", children: [work.length > 0 && (_jsx("div", { "aria-hidden": "true", "data-slot": "plan-outline-rail", className: "sprout-plan-outline-rail", children: work.map((task) => (_jsx("span", { "data-mark": task.mark, className: "sprout-plan-outline-segment" }, task.id))) })), _jsx("p", { className: "sprout-plan-outline-progress-text", children: progress })] }), notice, stale] }), tasks.length === 0 ? (_jsx("p", { className: "sprout-plan-outline-empty", children: "No tasks have been added yet." })) : (_jsx(TaskList, { tasks: tasks, label: "Tasks", level: 0 }))] }) }));
+    return (_jsx(Scope, { value: scope, children: _jsxs("section", { "data-slot": "plan-outline", "aria-label": title, ...props, className: cn('sprout-plan-outline', className), children: [_jsxs("header", { className: "sprout-plan-outline-header", children: [_jsxs("div", { className: "sprout-plan-outline-heading", children: [_jsx("h3", { className: "sprout-plan-outline-title", children: title }), _jsx(Badge, { variant: toneBadges[tone], "data-tone": tone, className: "sprout-plan-outline-status", children: status })] }), brief && _jsx("p", { className: "sprout-plan-outline-brief", children: brief }), _jsxs("div", { className: "sprout-plan-outline-progress", children: [work.length > 0 && (_jsx("div", { "aria-hidden": "true", "data-slot": "plan-outline-rail", className: "sprout-plan-outline-rail", children: work.map(task => (_jsx("span", { "data-mark": task.mark, className: "sprout-plan-outline-segment" }, task.id))) })), _jsx("p", { className: "sprout-plan-outline-progress-text", children: progress })] }), notice, stale] }), tasks.length === 0 ? (_jsx("p", { className: "sprout-plan-outline-empty", children: "No tasks have been added yet." })) : (_jsx(TaskList, { tasks: tasks, label: "Tasks", level: 0 }))] }) }));
 }
-function TaskList({ tasks, label, level, }) {
-    return (_jsx("ol", { "aria-label": label, "data-level": level, className: level === 0
-            ? "sprout-plan-outline-list"
-            : "sprout-plan-outline-list sprout-plan-outline-sublist", children: tasks.map((task) => (_jsx(TaskRow, { task: task, level: level }, task.id))) }));
+function TaskList({ tasks, label, level }) {
+    return (_jsx("ol", { "aria-label": label, "data-level": level, className: level === 0 ? 'sprout-plan-outline-list' : 'sprout-plan-outline-list sprout-plan-outline-sublist', children: tasks.map(task => (_jsx(TaskRow, { task: task, level: level }, task.id))) }));
 }
 function Mark({ mark }) {
-    return (_jsx("span", { "aria-hidden": "true", className: "sprout-plan-outline-mark", children: mark === "running" ? _jsx(Spinner, { "aria-hidden": "true" }) : markIcons[mark] }));
+    return (_jsx("span", { "aria-hidden": "true", className: "sprout-plan-outline-mark", children: mark === 'running' ? _jsx(Spinner, { "aria-hidden": "true" }) : markIcons[mark] }));
 }
 function TaskRow({ task, level }) {
     const taskId = useTaskId();
     const group = !!task.children;
-    const hasDetail = group ||
-        !!(task.brief ||
-            task.criteria?.length ||
-            task.dependencies?.length ||
-            task.reason ||
-            task.action);
-    const head = (_jsxs(_Fragment, { children: [_jsx(Mark, { mark: task.mark }), _jsxs("span", { className: "sprout-plan-outline-text", children: [_jsx("span", { className: "sprout-plan-outline-task-title", children: task.title }), task.assignee && (_jsxs("span", { className: "sprout-plan-outline-assignee", children: [_jsx(User, { size: 12, "aria-hidden": "true" }), _jsx("span", { children: task.assignee })] }))] }), _jsx("span", { className: "sprout-plan-outline-label", children: task.label }), hasDetail && (_jsx(ChevronRight, { size: 14, "aria-hidden": "true", className: "sprout-plan-outline-chevron" }))] }));
+    const hasDetail = group || !!(task.brief || task.criteria?.length || task.dependencies?.length || task.reason || task.action);
+    const head = (_jsxs(_Fragment, { children: [_jsx(Mark, { mark: task.mark }), _jsxs("span", { className: "sprout-plan-outline-text", children: [_jsx("span", { className: "sprout-plan-outline-task-title", children: task.title }), task.assignee && (_jsxs("span", { className: "sprout-plan-outline-assignee", children: [_jsx(User, { size: 12, "aria-hidden": "true" }), _jsx("span", { children: task.assignee })] }))] }), _jsx("span", { className: "sprout-plan-outline-label", children: task.label }), hasDetail && _jsx(ChevronRight, { size: 14, "aria-hidden": "true", className: "sprout-plan-outline-chevron" })] }));
     const rowProps = {
         id: taskId(task.id),
         tabIndex: -1,
-        "data-slot": "plan-outline-task",
-        "data-kind": group ? "group" : "task",
-        "data-mark": task.mark,
-        "data-level": level,
-        className: "sprout-plan-outline-task",
+        'data-slot': 'plan-outline-task',
+        'data-kind': group ? 'group' : 'task',
+        'data-mark': task.mark,
+        'data-level': level,
+        className: 'sprout-plan-outline-task',
     };
     if (!hasDetail)
         return (_jsx("li", { ...rowProps, children: _jsx("div", { className: "sprout-plan-outline-row", children: head }) }));
-    return (_jsxs(Collapsible.Root, { defaultOpen: group, render: _jsx("li", { ...rowProps }), children: [_jsx(Collapsible.Trigger, { className: "sprout-plan-outline-row sprout-plan-outline-trigger", children: head }), _jsx(Collapsible.Panel, { hiddenUntilFound: group, "data-slot": "plan-outline-panel", className: "sprout-plan-outline-panel", children: group ? (_jsxs(_Fragment, { children: [task.brief && (_jsx("p", { className: "sprout-plan-outline-group-brief", children: task.brief })), task.children.length ? (_jsx(TaskList, { tasks: task.children, label: `${task.title} tasks`, level: level + 1 })) : (_jsx("p", { className: "sprout-plan-outline-group-empty", children: "This group has no tasks yet." }))] })) : (_jsx(TaskDetail, { task: task })) })] }));
+    return (_jsxs(Collapsible.Root, { defaultOpen: group, render: _jsx("li", { ...rowProps }), children: [_jsx(Collapsible.Trigger, { className: "sprout-plan-outline-row sprout-plan-outline-trigger", children: head }), _jsx(Collapsible.Panel, { hiddenUntilFound: group, "data-slot": "plan-outline-panel", className: "sprout-plan-outline-panel", children: group ? (_jsxs(_Fragment, { children: [task.brief && _jsx("p", { className: "sprout-plan-outline-group-brief", children: task.brief }), task.children.length ? (_jsx(TaskList, { tasks: task.children, label: `${task.title} tasks`, level: level + 1 })) : (_jsx("p", { className: "sprout-plan-outline-group-empty", children: "This group has no tasks yet." }))] })) : (_jsx(TaskDetail, { task: task })) })] }));
 }
 // The browser follows the link, which also opens a closed group; then focus moves to the row.
 function followDependency(target) {
@@ -104,5 +87,5 @@ function followDependency(target) {
 }
 function TaskDetail({ task }) {
     const taskId = useTaskId();
-    return (_jsxs("div", { "data-slot": "plan-outline-detail", className: "sprout-plan-outline-detail", children: [task.reason && (_jsx("p", { className: "sprout-plan-outline-reason", children: task.reason })), task.brief && (_jsx("p", { className: "sprout-plan-outline-task-brief", children: task.brief })), !!task.criteria?.length && (_jsxs("div", { className: "sprout-plan-outline-field", children: [_jsx("p", { className: "sprout-plan-outline-field-title", children: "Done when" }), _jsx("ul", { className: "sprout-plan-outline-criteria", children: task.criteria.map((item, index) => (_jsx("li", { children: item }, index))) })] })), !!task.dependencies?.length && (_jsxs("div", { className: "sprout-plan-outline-field", children: [_jsx("p", { className: "sprout-plan-outline-field-title", children: "Starts after" }), _jsx("ul", { className: "sprout-plan-outline-dependencies", children: task.dependencies.map((dependency) => (_jsxs("li", { children: [_jsx("a", { href: `#${taskId(dependency.id)}`, onClick: () => followDependency(taskId(dependency.id)), className: "sprout-plan-outline-link", children: dependency.title }), _jsx("span", { className: "sprout-plan-outline-dependency-label", children: dependency.label })] }, dependency.id))) })] })), task.action && (_jsx("div", { className: "sprout-plan-outline-action", children: task.action }))] }));
+    return (_jsxs("div", { "data-slot": "plan-outline-detail", className: "sprout-plan-outline-detail", children: [task.reason && _jsx("p", { className: "sprout-plan-outline-reason", children: task.reason }), task.brief && _jsx("p", { className: "sprout-plan-outline-task-brief", children: task.brief }), !!task.criteria?.length && (_jsxs("div", { className: "sprout-plan-outline-field", children: [_jsx("p", { className: "sprout-plan-outline-field-title", children: "Done when" }), _jsx("ul", { className: "sprout-plan-outline-criteria", children: task.criteria.map((item, index) => (_jsx("li", { children: item }, index))) })] })), !!task.dependencies?.length && (_jsxs("div", { className: "sprout-plan-outline-field", children: [_jsx("p", { className: "sprout-plan-outline-field-title", children: "Starts after" }), _jsx("ul", { className: "sprout-plan-outline-dependencies", children: task.dependencies.map(dependency => (_jsxs("li", { children: [_jsx("a", { href: `#${taskId(dependency.id)}`, onClick: () => followDependency(taskId(dependency.id)), className: "sprout-plan-outline-link", children: dependency.title }), _jsx("span", { className: "sprout-plan-outline-dependency-label", children: dependency.label })] }, dependency.id))) })] })), task.action && _jsx("div", { className: "sprout-plan-outline-action", children: task.action })] }));
 }

package/dist/components/popover.d.ts

@@ -1,12 +1,12 @@
-import type { ComponentProps } from "react";
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import type { ComponentProps } from 'react';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 export declare const popoverContentSizeNames: readonly ["default", "menu", "picker", "panel", "work-list", "app-actions", "bud"];
 export type PopoverContentSize = (typeof popoverContentSizeNames)[number];
 export type PopoverProps = PopoverPrimitive.Root.Props;
 export declare function Popover(props: PopoverProps): import("react").JSX.Element;
 export type PopoverTriggerProps = PopoverPrimitive.Trigger.Props;
 export declare function PopoverTrigger(props: PopoverTriggerProps): import("react").JSX.Element;
-type PositionerProps = Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "anchor" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+type PositionerProps = Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor' | 'collisionPadding' | 'collisionAvoidance' | 'sticky' | 'positionMethod'>;
 export interface PopoverContentProps extends PopoverPrimitive.Popup.Props, PositionerProps {
     /**
      * `default` is an 18rem padded panel for text. `menu`, `picker`, and `panel`
@@ -16,16 +16,16 @@ export interface PopoverContentProps extends PopoverPrimitive.Popup.Props, Posit
      */
     size?: PopoverContentSize;
     /** Keep the content in the DOM while closed, for example to preserve chat state. */
-    keepMounted?: PopoverPrimitive.Portal.Props["keepMounted"];
+    keepMounted?: PopoverPrimitive.Portal.Props['keepMounted'];
     /** Where the portal renders. Defaults to `document.body`. */
-    container?: PopoverPrimitive.Portal.Props["container"];
+    container?: PopoverPrimitive.Portal.Props['container'];
 }
 /**
  * The floating panel. It renders its own portal and positioner, so place it
  * directly inside `Popover`.
  */
 export declare function PopoverContent({ align, alignOffset, side, sideOffset, collisionPadding, collisionAvoidance, sticky, positionMethod, anchor, size, keepMounted, container, className, ...props }: PopoverContentProps): import("react").JSX.Element;
-export type PopoverHeaderProps = ComponentProps<"div">;
+export type PopoverHeaderProps = ComponentProps<'div'>;
 export declare function PopoverHeader({ className, ...props }: PopoverHeaderProps): import("react").JSX.Element;
 export type PopoverTitleProps = PopoverPrimitive.Title.Props;
 export declare function PopoverTitle({ className, ...props }: PopoverTitleProps): import("react").JSX.Element;

package/dist/components/popover.js

@@ -1,15 +1,15 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { cn, stateClassName } from "../internal/classes.js";
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { cn, stateClassName } from '../internal/classes.js';
 export const popoverContentSizeNames = [
-    "default",
-    "menu",
-    "picker",
-    "panel",
-    "work-list",
-    "app-actions",
-    "bud",
+    'default',
+    'menu',
+    'picker',
+    'panel',
+    'work-list',
+    'app-actions',
+    'bud',
 ];
 export function Popover(props) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
@@ -21,15 +21,15 @@ export function PopoverTrigger(props) {
  * The floating panel. It renders its own portal and positioner, so place it
  * directly inside `Popover`.
  */
-export function PopoverContent({ align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, anchor, size = "default", keepMounted = false, container, className, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { keepMounted: keepMounted, container: container, children: _jsx(PopoverPrimitive.Positioner, { className: "sprout-popover-positioner", anchor: anchor, align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", "data-size": size, ...props, className: stateClassName(cn("sprout-popover-content", `sprout-popover-${size}`), className) }) }) }));
+export function PopoverContent({ align = 'center', alignOffset = 0, side = 'bottom', sideOffset = 4, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, anchor, size = 'default', keepMounted = false, container, className, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { keepMounted: keepMounted, container: container, children: _jsx(PopoverPrimitive.Positioner, { className: "sprout-popover-positioner", anchor: anchor, align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", "data-size": size, ...props, className: stateClassName(cn('sprout-popover-content', `sprout-popover-${size}`), className) }) }) }));
 }
 export function PopoverHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "popover-header", ...props, className: cn("sprout-popover-header", className) }));
+    return _jsx("div", { "data-slot": "popover-header", ...props, className: cn('sprout-popover-header', className) });
 }
 export function PopoverTitle({ className, ...props }) {
-    return (_jsx(PopoverPrimitive.Title, { "data-slot": "popover-title", ...props, className: stateClassName("sprout-popover-title", className) }));
+    return (_jsx(PopoverPrimitive.Title, { "data-slot": "popover-title", ...props, className: stateClassName('sprout-popover-title', className) }));
 }
 export function PopoverDescription({ className, ...props }) {
-    return (_jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", ...props, className: stateClassName("sprout-popover-description", className) }));
+    return (_jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", ...props, className: stateClassName('sprout-popover-description', className) }));
 }

package/dist/components/presence-cursor.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, ReactNode } from "react";
-export interface PresenceCursorProps extends Omit<ComponentProps<"div">, "children" | "color"> {
+import type { ComponentProps, ReactNode } from 'react';
+export interface PresenceCursorProps extends Omit<ComponentProps<'div'>, 'children' | 'color'> {
     /** The person's name or email. Shown in the tag, or read out with an avatar. */
     name: string;
     /** Left offset of the arrow tip in px, from the positioned parent. */

package/dist/components/presence-cursor.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../internal/classes.js";
+import { cn } from '../internal/classes.js';
 /**
  * Another person's pointer on a shared surface, with a name tag or an avatar.
  * Put it in a parent with `position: relative`. It ignores pointer events and
  * glides between positions unless reduced motion is requested.
  */
 export function PresenceCursor({ name, x, y, color, avatar, className, style, ...props }) {
-    return (_jsxs("div", { "data-slot": "presence-cursor", role: "img", "aria-label": name, className: cn("sprout-presence-cursor", className), style: {
-            "--sprout-presence-color": color,
+    return (_jsxs("div", { "data-slot": "presence-cursor", role: "img", "aria-label": name, className: cn('sprout-presence-cursor', className), style: {
+            '--sprout-presence-color': color,
             transform: `translate(${x}px, ${y}px)`,
             ...style,
         }, ...props, children: [_jsx("svg", { className: "sprout-presence-cursor-arrow", viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "M1.5 1.5 14.5 6.6 8.4 8.4 6.6 14.5Z" }) }), avatar != null ? (_jsx("span", { "data-slot": "presence-cursor-avatar", className: "sprout-presence-cursor-avatar", "aria-hidden": "true", children: avatar })) : (_jsx("span", { "data-slot": "presence-cursor-label", className: "sprout-presence-cursor-label", "aria-hidden": "true", children: name }))] }));

package/dist/components/progress.d.ts

@@ -1,4 +1,4 @@
-import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { Progress as BaseProgress } from '@base-ui/react/progress';
 export type ProgressProps = BaseProgress.Root.Props;
 /**
  * A bar that shows how far a task has come. Pass a number to `value`, or

package/dist/components/progress.js

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Progress as BaseProgress } from "@base-ui/react/progress";
-import { stateClassName } from "../internal/classes.js";
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { stateClassName } from '../internal/classes.js';
 /**
  * A bar that shows how far a task has come. Pass a number to `value`, or
  * `null` while the amount is unknown. Children, such as `ProgressLabel` and
@@ -9,27 +9,27 @@ import { stateClassName } from "../internal/classes.js";
  * `ProgressLabel` or `aria-label`.
  */
 export function Progress({ className, children, ...props }) {
-    return (_jsxs(BaseProgress.Root, { "data-slot": "progress", ...props, className: stateClassName("sprout-progress", className), children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }));
+    return (_jsxs(BaseProgress.Root, { "data-slot": "progress", ...props, className: stateClassName('sprout-progress', className), children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }));
 }
 /** The 4px rail behind the indicator. `Progress` renders one for you. */
 export function ProgressTrack({ className, ...props }) {
-    return (_jsx(BaseProgress.Track, { "data-slot": "progress-track", ...props, className: stateClassName("sprout-progress-track", className) }));
+    return (_jsx(BaseProgress.Track, { "data-slot": "progress-track", ...props, className: stateClassName('sprout-progress-track', className) }));
 }
 /**
  * The filled part of the track. Its width follows the value; with a `null`
  * value it slides across the track instead.
  */
 export function ProgressIndicator({ className, ...props }) {
-    return (_jsx(BaseProgress.Indicator, { "data-slot": "progress-indicator", ...props, className: stateClassName("sprout-progress-indicator", className) }));
+    return (_jsx(BaseProgress.Indicator, { "data-slot": "progress-indicator", ...props, className: stateClassName('sprout-progress-indicator', className) }));
 }
 /** A visible name for the bar. It labels the `progressbar` for you. */
 export function ProgressLabel({ className, ...props }) {
-    return (_jsx(BaseProgress.Label, { "data-slot": "progress-label", ...props, className: stateClassName("sprout-progress-label", className) }));
+    return (_jsx(BaseProgress.Label, { "data-slot": "progress-label", ...props, className: stateClassName('sprout-progress-label', className) }));
 }
 /**
  * The formatted value, such as “40%”, at the end of the label row. It is
  * empty while the value is `null`. Pass a function child to show other text.
  */
 export function ProgressValue({ className, ...props }) {
-    return (_jsx(BaseProgress.Value, { "data-slot": "progress-value", ...props, className: stateClassName("sprout-progress-value", className) }));
+    return (_jsx(BaseProgress.Value, { "data-slot": "progress-value", ...props, className: stateClassName('sprout-progress-value', className) }));
 }

package/dist/components/prompt-list.d.ts

@@ -1,5 +1,5 @@
-import { type ComponentProps, type ReactNode } from "react";
-import { type BrandStackItem } from "./brand-icon.js";
+import { type ComponentProps, type ReactNode } from 'react';
+import { type BrandStackItem } from './brand-icon.js';
 export interface PromptListItem {
     id: string;
     /** One line. Long labels are cut with an ellipsis and shown in full on hover. */
@@ -9,7 +9,7 @@ export interface PromptListItem {
     /** Apps the prompt uses, shown as overlapping tiles with tooltips. */
     brands?: readonly BrandStackItem[] | undefined;
 }
-export interface PromptListProps extends Omit<ComponentProps<"section">, "title" | "children" | "onSelect"> {
+export interface PromptListProps extends Omit<ComponentProps<'section'>, 'title' | 'children' | 'onSelect'> {
     /** Names the list. Shown as a small heading unless `showTitle` is false. */
     title: string;
     /** Hide the heading but keep `title` as the list's accessible name. */

package/dist/components/prompt-list.js

@@ -1,11 +1,11 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, } from "react";
-import { ArrowRight } from "reicon-react/icons/ArrowRight";
-import { cn } from "../internal/classes.js";
-import { BrandStack } from "./brand-icon.js";
+import { useId } from 'react';
+import { ArrowRight } from 'reicon-react/icons/ArrowRight';
+import { cn } from '../internal/classes.js';
+import { BrandStack } from './brand-icon.js';
 /** A titled list of one-line prompts. Choosing a row calls `onSelect` with its id. */
 export function PromptList({ title, showTitle = true, items, onSelect, disabled = false, className, ...props }) {
     const heading = useId();
-    return (_jsxs("section", { "data-slot": "prompt-list", "data-disabled": disabled || undefined, ...props, "aria-labelledby": showTitle ? heading : undefined, "aria-label": showTitle ? undefined : title, className: cn("sprout-prompt-list", className), children: [showTitle && (_jsx("h3", { id: heading, className: "sprout-prompt-list-title", children: title })), _jsx("ul", { className: "sprout-prompt-list-items", children: items.map((item, index) => (_jsxs("li", { "data-slot": "prompt-list-item", className: "sprout-prompt-list-item", style: { "--sprout-prompt-index": index }, children: [_jsx("span", { "aria-hidden": "true", className: "sprout-prompt-list-icon", children: item.icon }), _jsx("button", { type: "button", disabled: disabled, title: item.label, onClick: () => onSelect(item.id), className: "sprout-prompt-list-button", children: item.label }), !!item.brands?.length && (_jsx(BrandStack, { brands: item.brands, className: "sprout-prompt-list-brands" })), _jsx(ArrowRight, { "aria-hidden": "true", className: "sprout-prompt-list-arrow" })] }, item.id))) })] }));
+    return (_jsxs("section", { "data-slot": "prompt-list", "data-disabled": disabled || undefined, ...props, "aria-labelledby": showTitle ? heading : undefined, "aria-label": showTitle ? undefined : title, className: cn('sprout-prompt-list', className), children: [showTitle && (_jsx("h3", { id: heading, className: "sprout-prompt-list-title", children: title })), _jsx("ul", { className: "sprout-prompt-list-items", children: items.map((item, index) => (_jsxs("li", { "data-slot": "prompt-list-item", className: "sprout-prompt-list-item", style: { '--sprout-prompt-index': index }, children: [_jsx("span", { "aria-hidden": "true", className: "sprout-prompt-list-icon", children: item.icon }), _jsx("button", { type: "button", disabled: disabled, title: item.label, onClick: () => onSelect(item.id), className: "sprout-prompt-list-button", children: item.label }), !!item.brands?.length && _jsx(BrandStack, { brands: item.brands, className: "sprout-prompt-list-brands" }), _jsx(ArrowRight, { "aria-hidden": "true", className: "sprout-prompt-list-arrow" })] }, item.id))) })] }));
 }