@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/skeleton.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+export declare const skeletonShapeNames: readonly ["line", "title", "avatar", "panel", "checkbox", "action"];
+export type SkeletonShape = (typeof skeletonShapeNames)[number];
+export interface SkeletonProps extends ComponentProps<"div"> {
+    /**
+     * The placeholder footprint. `"line"` is a 16px text row, `"title"` a 24px
+     * heading at two thirds width, `"avatar"` a 32px circle, `"panel"` a 128px
+     * block, `"checkbox"` a 16px box, and `"action"` a 28px icon button.
+     */
+    shape?: SkeletonShape;
+}
+/** A pulsing placeholder that holds the space of content still loading. */
+export declare function Skeleton({ shape, className, ...props }: SkeletonProps): import("react").JSX.Element;
+export declare const skeletonGroupGapNames: readonly ["sm", "md", "lg"];
+export type SkeletonGroupGap = (typeof skeletonGroupGapNames)[number];
+export interface SkeletonGroupState extends Record<string, unknown> {
+    slot: "skeleton-group";
+    gap: SkeletonGroupGap;
+}
+export interface SkeletonGroupProps extends useRender.ComponentProps<"div", SkeletonGroupState> {
+    /**
+     * Names the loading region, such as `"Loading projects"`. It becomes the
+     * accessible name and is also read as visually hidden text.
+     */
+    label?: string;
+    /** Space between placeholders: `"sm"` 8px, `"md"` 12px, `"lg"` 16px. */
+    gap?: SkeletonGroupGap;
+}
+/** A `status` region that stacks skeletons and names what is loading. */
+export declare function SkeletonGroup({ label, gap, className, children, render, ref, ...props }: SkeletonGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/skeleton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../internal/classes.js";
+export const skeletonShapeNames = [
+    "line",
+    "title",
+    "avatar",
+    "panel",
+    "checkbox",
+    "action",
+];
+/** A pulsing placeholder that holds the space of content still loading. */
+export function Skeleton({ shape = "line", className, ...props }) {
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "skeleton", "data-shape": shape, className: cn("sprout-skeleton", className), ...props }));
+}
+export const skeletonGroupGapNames = ["sm", "md", "lg"];
+/** A `status` region that stacks skeletons and names what is loading. */
+export function SkeletonGroup({ label, gap = "md", className, children, render, ref, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        ref,
+        render,
+        props: mergeProps({
+            role: "status",
+            "aria-label": label,
+            className: cn("sprout-skeleton-group", className),
+            children: (_jsxs(_Fragment, { children: [children, label ? (_jsx("span", { className: "sprout-skeleton-group-label", children: `${label}…` })) : null] })),
+        }, props),
+        state: { slot: "skeleton-group", gap },
+    });
+}

package/dist/components/slider.d.ts

@@ -0,0 +1,17 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+export type SliderValue = number | readonly number[];
+export interface SliderProps<Value extends SliderValue = SliderValue> extends BaseSlider.Root.Props<Value> {
+    /**
+     * Names each thumb. Defaults to the root `aria-label`, with "minimum" and
+     * "maximum" added to the two thumbs of a range.
+     */
+    getAriaLabel?: ((index: number) => string) | undefined;
+    /** Text a screen reader reads for each thumb's value. */
+    getAriaValueText?: ((formattedValue: string, value: number, index: number) => string) | undefined;
+}
+/**
+ * A track with one thumb for a number, or one thumb per entry for a range.
+ * Pass a number or an array to `value` or `defaultValue`. Name it with
+ * `aria-label`, `aria-labelledby`, or `getAriaLabel`.
+ */
+export declare function Slider<Value extends SliderValue = SliderValue>({ className, defaultValue, value, min, max, getAriaLabel, getAriaValueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: SliderProps<Value>): import("react").JSX.Element;

package/dist/components/slider.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { stateClassName } from "../internal/classes.js";
+function thumbLabel(label, count) {
+    if (!label)
+        return undefined;
+    if (count === 1)
+        return () => label;
+    if (count === 2)
+        return (index) => `${label} ${index === 0 ? "minimum" : "maximum"}`;
+    return (index) => `${label} ${index + 1}`;
+}
+/**
+ * A track with one thumb for a number, or one thumb per entry for a range.
+ * Pass a number or an array to `value` or `defaultValue`. Name it with
+ * `aria-label`, `aria-labelledby`, or `getAriaLabel`.
+ */
+export function Slider({ className, defaultValue, value, min = 0, max = 100, getAriaLabel, getAriaValueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+    const shape = value ?? defaultValue;
+    const count = Array.isArray(shape) ? shape.length : 1;
+    const label = getAriaLabel ?? (ariaLabelledBy ? undefined : thumbLabel(ariaLabel, count));
+    return (_jsx(BaseSlider.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, thumbAlignment: "edge", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props, className: stateClassName("sprout-slider", className), children: _jsxs(BaseSlider.Control, { "data-slot": "slider-control", className: "sprout-slider-control", children: [_jsx(BaseSlider.Track, { "data-slot": "slider-track", className: "sprout-slider-track", children: _jsx(BaseSlider.Indicator, { "data-slot": "slider-range", className: "sprout-slider-range" }) }), Array.from({ length: count }, (_, index) => (_jsx(BaseSlider.Thumb, { index: index, "data-slot": "slider-thumb", className: "sprout-slider-thumb", getAriaLabel: label, getAriaValueText: getAriaValueText }, index)))] }) }));
+}

package/dist/components/spinner.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentProps } from "react";
+export declare const spinnerSizeNames: readonly ["sm", "default", "lg"];
+export type SpinnerSize = (typeof spinnerSizeNames)[number];
+export declare const thinkingSpinnerSizeNames: readonly ["lg", "xl"];
+export type ThinkingSpinnerSize = (typeof thinkingSpinnerSizeNames)[number];
+export declare const spinnerActivityNames: readonly ["working", "searching", "solving", "listening", "connecting", "weaving", "composing", "breathing", "shaping"];
+export type SpinnerActivity = (typeof spinnerActivityNames)[number];
+export interface LoaderSpinnerProps extends Omit<ComponentProps<"svg">, "children" | "color"> {
+    variant?: "default" | undefined;
+    /**
+     * `"sm"` is 12px, `"default"` 16px, and `"lg"` 20px. The size holds inside
+     * buttons; badges shrink it to their 12px icon size.
+     */
+    size?: SpinnerSize | undefined;
+    activity?: never;
+}
+export interface ThinkingSpinnerProps extends Omit<ComponentProps<"span">, "children" | "color"> {
+    /** A dotted thought orb for AI and agent work, in place of the spinning loader. */
+    variant: "thinking";
+    /**
+     * `"lg"` is 20px, for inline text. `"xl"` is 64px, for avatar-scale status.
+     * Each is a separately tuned design, so no other sizes exist.
+     */
+    size?: ThinkingSpinnerSize | undefined;
+    /** What the agent is doing. Each activity is a distinct animation. */
+    activity?: SpinnerActivity | undefined;
+}
+export type SpinnerProps = LoaderSpinnerProps | ThinkingSpinnerProps;
+/**
+ * A loading indicator. By default it is a spinning loader that takes the
+ * current text color; `variant="thinking"` shows a monochrome thought orb
+ * that follows the light or dark theme. It is a `status` named “Loading”,
+ * or “Thinking” for the orb. Set `aria-label` to name it, or
+ * `aria-hidden="true"` when visible text beside it already says what is
+ * happening.
+ */
+export declare function Spinner(props: SpinnerProps): import("react").JSX.Element;

package/dist/components/spinner.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy, Suspense } from "react";
+import { Loader } from "reicon-react/icons/Loader";
+import { cn } from "../internal/classes.js";
+export const spinnerSizeNames = ["sm", "default", "lg"];
+export const thinkingSpinnerSizeNames = ["lg", "xl"];
+export const spinnerActivityNames = [
+    "working",
+    "searching",
+    "solving",
+    "listening",
+    "connecting",
+    "weaving",
+    "composing",
+    "breathing",
+    "shaping",
+];
+const orbPixels = { lg: 20, xl: 64 };
+// Loaded on first thinking render, so apps showing only the loader never download the orb.
+const ThinkingOrb = lazy(() => import("thinking-orbs").then(({ ThinkingOrb }) => ({ default: ThinkingOrb })));
+/**
+ * A loading indicator. By default it is a spinning loader that takes the
+ * current text color; `variant="thinking"` shows a monochrome thought orb
+ * that follows the light or dark theme. It is a `status` named “Loading”,
+ * or “Thinking” for the orb. Set `aria-label` to name it, or
+ * `aria-hidden="true"` when visible text beside it already says what is
+ * happening.
+ */
+export function Spinner(props) {
+    if (props.variant === "thinking")
+        return _jsx(ThinkingSpinner, { ...props });
+    const { variant: _variant, size = "default", className, role = "status", "aria-label": label = "Loading", "aria-hidden": hidden, ...rest } = props;
+    const decorative = hidden === true || hidden === "true";
+    return (_jsx(Loader, { "data-slot": "spinner", "data-variant": "default", "data-size": size, ...(decorative
+            ? { "aria-hidden": "true" }
+            : { role, "aria-label": label }), focusable: "false", className: cn("sprout-spinner", `sprout-spinner-size-${size}`, className), ...rest }));
+}
+function ThinkingSpinner({ variant, size = "lg", activity = "working", className, role = "status", "aria-label": label = "Thinking", "aria-hidden": hidden, ...rest }) {
+    const decorative = hidden === true || hidden === "true";
+    return (_jsx("span", { "data-slot": "spinner", "data-variant": variant, "data-size": size, "data-activity": activity, ...(decorative
+            ? { "aria-hidden": "true" }
+            : { role, "aria-label": label }), className: cn("sprout-spinner", `sprout-spinner-size-${size}`, className), ...rest, children: _jsx(Suspense, { fallback: null, children: _jsx(ThinkingOrb, { state: activity, size: orbPixels[size], theme: "auto", role: "presentation", "aria-hidden": "true" }) }) }));
+}

package/dist/components/state-panel-samples.d.ts

@@ -0,0 +1,25 @@
+import { type SampleWindowProps } from "./state-sample.js";
+/** Pass-through props for the outer sample window. */
+export type StatePanelSampleProps = Omit<SampleWindowProps, "icon" | "trail" | "tabs" | "children">;
+export declare function ChatsSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function FilesSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function AgentsSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function ProjectsSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function AgentTasksSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function SkillsSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function WorkflowsSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function TablesSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export interface RecordsSampleProps extends StatePanelSampleProps {
+    /** Table name, shown as the current crumb. */
+    table: string;
+    /** Field labels. The first three become columns; none falls back to “Row”. */
+    fields: readonly string[];
+}
+export declare function RecordsSample({ table, fields, ...props }: RecordsSampleProps): import("react").JSX.Element;
+export declare function CreateInChatSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function IntegrationsSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function ModelsSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function MembersSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function TeamsSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function InvitationsSample(props: StatePanelSampleProps): import("react").JSX.Element;
+export declare function GrantsSample(props: StatePanelSampleProps): import("react").JSX.Element;

package/dist/components/state-panel-samples.js

@@ -0,0 +1,423 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BookOpen } from "reicon-react/icons/BookOpen";
+import { BranchDown } from "reicon-react/icons/BranchDown";
+import { ChatRound } from "reicon-react/icons/ChatRound";
+import { Checklist } from "reicon-react/icons/Checklist";
+import { Cpu } from "reicon-react/icons/Cpu";
+import { Database } from "reicon-react/icons/Database";
+import { Envelope } from "reicon-react/icons/Envelope";
+import { Files } from "reicon-react/icons/Files";
+import { Folder } from "reicon-react/icons/Folder";
+import { People } from "reicon-react/icons/People";
+import { Plug } from "reicon-react/icons/Plug";
+import { ShieldUser } from "reicon-react/icons/ShieldUser";
+import { User } from "reicon-react/icons/User";
+import { Users } from "reicon-react/icons/Users";
+import { FileTypeIcon } from "./attachment.js";
+import { AgentAvatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { BrandIcon } from "./brand-icon.js";
+import { SampleBar, SampleIconTile, SampleList, SampleMark, SampleTable, SampleText, SampleWindow, } from "./state-sample.js";
+const muted = (text) => _jsx(SampleText, { tone: "muted", children: text });
+const strong = (text) => _jsx(SampleText, { tone: "strong", children: text });
+const named = (tone, text) => (_jsxs(_Fragment, { children: [_jsx(SampleMark, { tone: tone }), strong(text)] }));
+const agent = (id, name) => (_jsx(AgentAvatar, { agentId: id, name: name, size: "sm" }));
+const badge = (variant, text) => _jsx(Badge, { variant: variant, children: text });
+export function ChatsSample(props) {
+    const chat = _jsx(SampleIconTile, { icon: ChatRound });
+    return (_jsx(SampleWindow, { ...props, icon: ChatRound, trail: ["Chats"], tabs: ["Active", "Archived"], children: _jsx(SampleList, { items: [
+                {
+                    leading: chat,
+                    title: "Which invoices are overdue this week?",
+                    detail: "Found 7 invoices across 4 customers",
+                    trailing: muted("2m ago"),
+                },
+                {
+                    leading: chat,
+                    title: "Draft a follow-up for Northwind",
+                    detail: "Draft ready for your review",
+                    trailing: muted("1h ago"),
+                },
+                {
+                    leading: chat,
+                    title: "Add a Suppliers table",
+                    detail: "Name, contact, payment terms, region",
+                    trailing: muted("Yesterday"),
+                },
+                {
+                    leading: chat,
+                    title: "Summarize last month’s orders",
+                    detail: "312 orders, up 18% on September",
+                    trailing: muted("Sep 30"),
+                },
+                {
+                    leading: chat,
+                    title: "Who owns the Acme renewal?",
+                    detail: "Assigned to the Sales team",
+                    trailing: muted("Sep 28"),
+                },
+            ] }) }));
+}
+const file = (name, mediaType) => (_jsx(FileTypeIcon, { name: name, mediaType: mediaType }));
+export function FilesSample(props) {
+    const folder = _jsx(SampleIconTile, { icon: Folder });
+    return (_jsx(SampleWindow, { ...props, icon: Files, trail: ["Files", "My files"], children: _jsx(SampleList, { items: [
+                {
+                    leading: folder,
+                    title: "Supplier contracts",
+                    detail: "Folder · Shared with Purchasing",
+                    trailing: muted("You"),
+                },
+                {
+                    leading: folder,
+                    title: "Month-end close",
+                    detail: "Folder",
+                    trailing: muted("You"),
+                },
+                {
+                    leading: file("Price list 2026.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"),
+                    title: "Price list 2026.xlsx",
+                    detail: "Spreadsheet · 48 KB",
+                    trailing: muted("You"),
+                },
+                {
+                    leading: file("Returns policy.pdf", "application/pdf"),
+                    title: "Returns policy.pdf",
+                    detail: "PDF · 212 KB",
+                    trailing: muted("You"),
+                },
+                {
+                    leading: file("Onboarding checklist.docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"),
+                    title: "Onboarding checklist.docx",
+                    detail: "Document · 31 KB",
+                    trailing: muted("You"),
+                },
+            ] }) }));
+}
+export function AgentsSample(props) {
+    return (_jsx(SampleWindow, { ...props, icon: Users, trail: ["Agents"], children: _jsx(SampleList, { items: [
+                {
+                    leading: agent("sample-collections", "Collections assistant"),
+                    title: "Collections assistant",
+                    detail: "Follows up on overdue invoices",
+                    trailing: badge("success", "Active"),
+                },
+                {
+                    leading: agent("sample-onboarding", "Onboarding guide"),
+                    title: "Onboarding guide",
+                    detail: "Welcomes new customers and books kickoffs",
+                    trailing: badge("success", "Active"),
+                },
+                {
+                    leading: agent("sample-inventory", "Inventory watcher"),
+                    title: "Inventory watcher",
+                    detail: "Flags products below reorder level",
+                    trailing: badge("secondary", "Draft"),
+                },
+                {
+                    leading: agent("sample-support", "Support triage"),
+                    title: "Support triage",
+                    detail: "Routes new tickets to the right team",
+                    trailing: badge("success", "Active"),
+                },
+                {
+                    leading: agent("sample-reports", "Weekly reporter"),
+                    title: "Weekly reporter",
+                    detail: "Posts pipeline numbers every Monday",
+                    trailing: badge("secondary", "Draft"),
+                },
+            ] }) }));
+}
+export function ProjectsSample(props) {
+    return (_jsxs(SampleWindow, { ...props, icon: Folder, trail: ["Projects"], children: [_jsx("p", { className: "sprout-state-panel-samples-group", children: "Active projects" }), _jsx(SampleList, { items: [
+                    {
+                        title: "Spring launch",
+                        detail: "Use the launch brief for dates and messaging.",
+                    },
+                    {
+                        title: "Customer onboarding",
+                        detail: "Keep kickoff notes and customer setup guides here.",
+                    },
+                    {
+                        title: "Supplier review",
+                        detail: "Compare quotes against our purchasing guidelines.",
+                    },
+                ] }), _jsx("p", { className: "sprout-state-panel-samples-group", children: "Archived projects" }), _jsx(SampleList, { items: [
+                    {
+                        title: "Summer catalogue",
+                        detail: "Use the approved product descriptions.",
+                        trailing: badge("secondary", "Archived"),
+                    },
+                ] })] }));
+}
+export function AgentTasksSample(props) {
+    return (_jsx(SampleWindow, { ...props, icon: Checklist, trail: ["My agent tasks"], children: _jsx(SampleList, { items: [
+                {
+                    leading: agent("sample-collections", "Collections assistant"),
+                    title: "Send reminders for invoices past 30 days",
+                    detail: "Collections assistant · Started 4m ago",
+                    trailing: badge("warning", "Needs review"),
+                },
+                {
+                    leading: agent("sample-onboarding", "Onboarding guide"),
+                    title: "Book a kickoff with Contoso",
+                    detail: "Onboarding guide · Started 1h ago",
+                    trailing: badge("success", "Completed"),
+                },
+                {
+                    leading: agent("sample-inventory", "Inventory watcher"),
+                    title: "List products below reorder level",
+                    detail: "Inventory watcher · Started today",
+                    trailing: badge("success", "Completed"),
+                },
+                {
+                    leading: agent("sample-support", "Support triage"),
+                    title: "Tag this week’s billing tickets",
+                    detail: "Support triage · Started yesterday",
+                    trailing: badge("secondary", "Pending"),
+                },
+            ] }) }));
+}
+export function SkillsSample(props) {
+    const skill = _jsx(SampleIconTile, { icon: BookOpen });
+    return (_jsx(SampleWindow, { ...props, icon: BookOpen, trail: ["Skills"], tabs: ["Workspace", "Built-in"], children: _jsx(SampleList, { items: [
+                {
+                    leading: skill,
+                    title: "Qualify an inbound lead",
+                    detail: "Check budget, timeline, and decision maker",
+                    trailing: badge("success", "Approved"),
+                },
+                {
+                    leading: skill,
+                    title: "Prepare a quarterly review",
+                    detail: "Pull revenue, churn, and open risks",
+                    trailing: badge("success", "Approved"),
+                },
+                {
+                    leading: skill,
+                    title: "Handle a refund request",
+                    detail: "Verify the order, then propose a refund",
+                    trailing: badge("warning", "In review"),
+                },
+                {
+                    leading: skill,
+                    title: "Write a supplier follow-up",
+                    detail: "Friendly tone, confirm delivery dates",
+                    trailing: badge("secondary", "Draft"),
+                },
+            ] }) }));
+}
+export function WorkflowsSample(props) {
+    const active = badge("success", "Active");
+    const draft = badge("secondary", "Draft");
+    return (_jsx(SampleWindow, { ...props, icon: BranchDown, trail: ["Workflows"], children: _jsx(SampleTable, { columns: [
+                { label: "Workflow", size: "wide" },
+                { label: "Trigger" },
+                { label: "Status", size: "narrow" },
+            ], rows: [
+                [
+                    named("green", "Approve large discounts"),
+                    muted("New quote"),
+                    active,
+                ],
+                [named("blue", "Onboard a new customer"), muted("Deal won"), active],
+                [named("orange", "Reorder low stock"), muted("Daily, 8:00"), draft],
+                [
+                    named("violet", "Escalate urgent tickets"),
+                    muted("New ticket"),
+                    active,
+                ],
+                [
+                    named("red", "Chase unsigned contracts"),
+                    muted("Weekly, Mon"),
+                    draft,
+                ],
+            ] }) }));
+}
+export function TablesSample(props) {
+    const rows = [
+        ["blue", "Customers", "12", "1,248"],
+        ["green", "Invoices", "9", "3,902"],
+        ["orange", "Orders", "14", "8,417"],
+        ["violet", "Products", "8", "326"],
+        ["red", "Suppliers", "7", "58"],
+        ["teal", "Support tickets", "10", "2,031"],
+    ];
+    return (_jsx(SampleWindow, { ...props, icon: Database, trail: ["Tables"], children: _jsx(SampleTable, { columns: [
+                { label: "Table", size: "wide" },
+                { label: "Fields", size: "narrow" },
+                { label: "Rows", size: "narrow" },
+            ], rows: rows.map(([tone, name, fields, count]) => [
+                named(tone, name),
+                _jsx(SampleText, { children: fields }),
+                _jsx(SampleText, { children: count }),
+            ]) }) }));
+}
+const recordRows = [
+    ["blue", "lg", "md"],
+    ["green", "md", "sm"],
+    ["orange", "sm", "lg"],
+    ["violet", "md", "md"],
+    ["red", "lg", "sm"],
+    ["teal", "sm", "md"],
+];
+export function RecordsSample({ table, fields, ...props }) {
+    const shown = fields.slice(0, 3);
+    const columns = shown.length
+        ? shown.map((label, index) => ({
+            label,
+            size: index === 0 ? "wide" : "default",
+        }))
+        : [{ label: "Row", size: "wide" }];
+    return (_jsx(SampleWindow, { ...props, icon: Database, trail: ["Tables", table], children: _jsx(SampleTable, { columns: columns, rows: recordRows.map(([tone, first, rest]) => columns.map((_, column) => column === 0 ? (_jsxs(_Fragment, { children: [_jsx(SampleMark, { tone: tone }), _jsx(SampleBar, { width: first })] })) : (_jsx(SampleBar, { width: column % 2 ? rest : first })))) }) }));
+}
+export function CreateInChatSample(props) {
+    return (_jsx(SampleWindow, { ...props, icon: ChatRound, trail: ["New chat"], children: _jsxs("div", { className: "sprout-state-panel-samples-chat", children: [_jsx("p", { className: "sprout-state-panel-samples-bubble", children: "Track our suppliers with a name, contact email, payment terms, and region." }), _jsxs("p", { className: "sprout-state-panel-samples-reply", children: ["I\u2019ll create a ", _jsx("strong", { children: "Suppliers" }), " table with these fields. Review the schema before approving."] }), _jsx("div", { className: "sprout-state-panel-samples-schema", children: _jsx(SampleTable, { columns: [{ label: "Field", size: "wide" }, { label: "Type" }], rows: [
+                            [strong("Name"), muted("Text")],
+                            [strong("Contact email"), muted("Email")],
+                            [strong("Payment terms"), muted("Choice")],
+                            [strong("Region"), muted("Choice")],
+                        ] }) })] }) }));
+}
+export function IntegrationsSample(props) {
+    const connected = badge("success", "Connected");
+    return (_jsx(SampleWindow, { ...props, icon: Plug, trail: ["Integrations"], tabs: ["Connected", "All"], children: _jsx(SampleList, { items: [
+                {
+                    leading: _jsx(BrandIcon, { brand: "slack", size: "sm" }),
+                    title: "Slack",
+                    detail: "Agents reply in #sales and #support",
+                    trailing: connected,
+                },
+                {
+                    leading: _jsx(BrandIcon, { brand: "gmail", size: "sm" }),
+                    title: "Gmail",
+                    detail: "Reads new mail for heartbeat answers",
+                    trailing: connected,
+                },
+                {
+                    leading: _jsx(BrandIcon, { brand: "google-calendar", size: "sm" }),
+                    title: "Google Calendar",
+                    detail: "Books meetings after your approval",
+                    trailing: connected,
+                },
+                {
+                    leading: _jsx(BrandIcon, { brand: "github", size: "sm" }),
+                    title: "GitHub",
+                    detail: "Files issues for the product team",
+                    trailing: connected,
+                },
+                {
+                    leading: _jsx(BrandIcon, { brand: "jira", size: "sm" }),
+                    title: "Jira",
+                    detail: "Searches the Support board",
+                    trailing: badge("warning", "Needs attention"),
+                },
+            ] }) }));
+}
+export function ModelsSample(props) {
+    return (_jsx(SampleWindow, { ...props, icon: Cpu, trail: ["Settings", "Models"], children: _jsx(SampleList, { items: [
+                {
+                    leading: _jsx(BrandIcon, { brand: "claude", size: "sm" }),
+                    title: "Claude",
+                    detail: "Default for chat and agents",
+                    trailing: badge("success", "Enabled"),
+                },
+                {
+                    leading: _jsx(BrandIcon, { brand: "openai", size: "sm" }),
+                    title: "GPT",
+                    detail: "Available to the Analytics team",
+                    trailing: badge("success", "Enabled"),
+                },
+                {
+                    leading: _jsx(BrandIcon, { brand: "deepseek", size: "sm" }),
+                    title: "DeepSeek",
+                    detail: "Not available to any team",
+                    trailing: badge("secondary", "Off"),
+                },
+                {
+                    leading: _jsx(BrandIcon, { brand: "kimi", size: "sm" }),
+                    title: "Kimi",
+                    detail: "Not available to any team",
+                    trailing: badge("secondary", "Off"),
+                },
+            ] }) }));
+}
+export function MembersSample(props) {
+    const admin = badge("info", "Admin");
+    const member = badge("secondary", "Member");
+    return (_jsx(SampleWindow, { ...props, icon: User, trail: ["Settings", "Members"], children: _jsx(SampleTable, { columns: [
+                { label: "Member", size: "wide" },
+                { label: "Role", size: "narrow" },
+                { label: "Teams" },
+            ], rows: [
+                [named("violet", "Maya Chen"), admin, muted("Operations")],
+                [named("orange", "Leo Martins"), member, muted("Sales, Support")],
+                [named("green", "Priya Nair"), member, muted("Finance")],
+                [named("blue", "Sam Okafor"), member, muted("Support")],
+                [named("red", "Ines Duarte"), admin, muted("Operations")],
+            ] }) }));
+}
+export function TeamsSample(props) {
+    return (_jsx(SampleWindow, { ...props, icon: People, trail: ["Settings", "Teams"], children: _jsx(SampleList, { items: [
+                {
+                    leading: _jsx(SampleMark, { tone: "blue", size: "md" }),
+                    title: "Sales",
+                    detail: "Pipeline, quotes, and renewals · 8 members",
+                },
+                {
+                    leading: _jsx(SampleMark, { tone: "green", size: "md" }),
+                    title: "Finance",
+                    detail: "Invoices and collections · 3 members",
+                },
+                {
+                    leading: _jsx(SampleMark, { tone: "orange", size: "md" }),
+                    title: "Support",
+                    detail: "Tickets and refunds · 6 members",
+                },
+                {
+                    leading: _jsx(SampleMark, { tone: "violet", size: "md" }),
+                    title: "Operations",
+                    detail: "Inventory and suppliers · 4 members",
+                },
+            ] }) }));
+}
+export function InvitationsSample(props) {
+    const link = (email) => _jsx(SampleText, { tone: "link", children: email });
+    return (_jsx(SampleWindow, { ...props, icon: Envelope, trail: ["Settings", "Members", "Invitations"], children: _jsx(SampleTable, { columns: [
+                { label: "Email", size: "wide" },
+                { label: "Status", size: "narrow" },
+                { label: "Email delivery" },
+            ], rows: [
+                [
+                    link("maya@northwind.co"),
+                    badge("info", "active"),
+                    muted("Delivered"),
+                ],
+                [
+                    link("leo@northwind.co"),
+                    badge("secondary", "Accepted"),
+                    muted("Delivered"),
+                ],
+                [link("priya@northwind.co"), badge("info", "active"), muted("Sent")],
+                [
+                    link("sam@northwind.co"),
+                    badge("secondary", "expired"),
+                    muted("Delivered"),
+                ],
+            ] }) }));
+}
+export function GrantsSample(props) {
+    const granted = badge("success", "Granted");
+    const none = muted("None");
+    return (_jsx(SampleWindow, { ...props, icon: ShieldUser, trail: ["Settings", "Table access"], tabs: ["Sales", "Finance", "Support"], children: _jsx(SampleTable, { columns: [
+                { label: "Table", size: "wide" },
+                { label: "Read", size: "narrow" },
+                { label: "Edit", size: "narrow" },
+            ], rows: [
+                [named("blue", "Customers"), granted, granted],
+                [named("green", "Invoices"), granted, none],
+                [named("orange", "Orders"), granted, granted],
+                [named("violet", "Products"), granted, none],
+                [named("red", "Suppliers"), none, none],
+            ] }) }));
+}