@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/internal/message-scroller.d.ts

@@ -1,5 +1,5 @@
-export type MessageScrollerDefaultScrollPosition = "start" | "end" | "last-anchor";
-export type MessageScrollerScrollAlign = "start" | "center" | "end" | "nearest";
+export type MessageScrollerDefaultScrollPosition = 'start' | 'end' | 'last-anchor';
+export type MessageScrollerScrollAlign = 'start' | 'center' | 'end' | 'nearest';
 export interface MessageScrollerScrollOptions {
     align?: MessageScrollerScrollAlign | undefined;
     behavior?: ScrollBehavior | undefined;
@@ -64,7 +64,7 @@ export declare class MessageScrollerController {
     setContent: (element: HTMLElement | null) => void;
     setSpacer: (element: HTMLElement | null) => void;
     registerMessage: (messageId: string, element: HTMLElement | null, previous: HTMLElement | null) => void;
-    scrollToStart: ({ behavior, }?: MessageScrollerScrollOptions) => boolean;
+    scrollToStart: ({ behavior }?: MessageScrollerScrollOptions) => boolean;
     scrollToEnd: ({ behavior }?: MessageScrollerScrollOptions) => boolean;
     scrollToMessage: (messageId: string, options?: MessageScrollerScrollOptions) => boolean;
     userScrollIntent: () => void;

package/dist/internal/message-scroller.js

@@ -3,15 +3,7 @@
 // prepended, and reports which edges can still be scrolled to.
 const epsilon = 0.5;
 const autoscrollMs = 180;
-export const scrollIntentKeys = new Set([
-    "ArrowDown",
-    "ArrowUp",
-    "End",
-    "Home",
-    "PageDown",
-    "PageUp",
-    " ",
-]);
+export const scrollIntentKeys = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', ' ']);
 const noEdges = { start: false, end: false };
 const noVisibility = {
     currentAnchorId: null,
@@ -23,11 +15,11 @@ function createStore(initial, equal) {
     return {
         getSnapshot: () => value,
         hasListeners: () => listeners.size > 0,
-        setSnapshot: (next) => {
+        setSnapshot: next => {
             if (equal(value, next))
                 return;
             value = next;
-            listeners.forEach((listener) => listener());
+            listeners.forEach(listener => listener());
         },
         subscribe: (listener, onFirst, onLast) => {
             const first = listeners.size === 0;
@@ -47,7 +39,7 @@ const sameVisibility = (a, b) => a.currentAnchorId === b.currentAnchorId &&
     a.visibleMessageIds.length === b.visibleMessageIds.length &&
     a.visibleMessageIds.every((id, index) => id === b.visibleMessageIds[index]);
 const pixels = (value) => {
-    const number = Number.parseFloat(value ?? "");
+    const number = Number.parseFloat(value ?? '');
     return Number.isFinite(number) ? number : 0;
 };
 function blockPadding(element) {
@@ -63,15 +55,13 @@ function rowGap(element) {
     if (!element)
         return 0;
     const style = getComputedStyle(element);
-    return pixels(style.rowGap === "normal" ? style.gap : style.rowGap);
+    return pixels(style.rowGap === 'normal' ? style.gap : style.rowGap);
 }
-const isAnchor = (element) => element?.dataset.scrollAnchor === "true";
+const isAnchor = (element) => element?.dataset.scrollAnchor === 'true';
 function itemsOf(content, spacer) {
     return Array.from(content.children).filter((child) => child instanceof HTMLElement && child !== spacer);
 }
-const offsetIn = (element, viewport) => element.getBoundingClientRect().top -
-    viewport.getBoundingClientRect().top +
-    viewport.scrollTop;
+const offsetIn = (element, viewport) => element.getBoundingClientRect().top - viewport.getBoundingClientRect().top + viewport.scrollTop;
 const topIn = (element, viewport) => element.getBoundingClientRect().top - viewport.getBoundingClientRect().top;
 const maxScroll = (viewport) => Math.max(0, viewport.scrollHeight - viewport.clientHeight);
 function contentHeight(content, spacer, viewport) {
@@ -79,10 +69,7 @@ function contentHeight(content, spacer, viewport) {
     const viewportTop = viewport.getBoundingClientRect().top;
     let height = padding.start + padding.end;
     for (const item of itemsOf(content, spacer))
-        height = Math.max(height, item.getBoundingClientRect().bottom -
-            viewportTop +
-            viewport.scrollTop +
-            padding.end);
+        height = Math.max(height, item.getBoundingClientRect().bottom - viewportTop + viewport.scrollTop + padding.end);
     return height;
 }
 export class MessageScrollerController {
@@ -116,9 +103,8 @@ export class MessageScrollerController {
     pendingFrame = null;
     constructor(options) {
         this.options = options;
-        this.mode = options.autoScroll ? "following-bottom" : "free-scrolling";
-        this.pendingDefaultStore = createStore(options.defaultScrollPosition === "end" ||
-            options.defaultScrollPosition === "last-anchor", Object.is);
+        this.mode = options.autoScroll ? 'following-bottom' : 'free-scrolling';
+        this.pendingDefaultStore = createStore(options.defaultScrollPosition === 'end' || options.defaultScrollPosition === 'last-anchor', Object.is);
     }
     setOptions(next) {
         if (next.defaultScrollPosition !== this.options.defaultScrollPosition)
@@ -161,23 +147,23 @@ export class MessageScrollerController {
         }
     };
     // Public scrolling
-    scrollToStart = ({ behavior = "auto", } = {}) => {
+    scrollToStart = ({ behavior = 'auto' } = {}) => {
         if (!this.viewport)
             return false;
         this.setSpacerHeight(0);
         this.streamingTurn = null;
-        this.mode = "free-scrolling";
+        this.mode = 'free-scrolling';
         this.scrollViewportTo(0, { behavior });
         this.scheduleVisibility();
         return true;
     };
-    scrollToEnd = ({ behavior = "auto" } = {}) => {
+    scrollToEnd = ({ behavior = 'auto' } = {}) => {
         const viewport = this.viewport;
         if (!viewport)
             return false;
         this.setSpacerHeight(0);
         this.streamingTurn = null;
-        this.mode = this.options.autoScroll ? "following-bottom" : "free-scrolling";
+        this.mode = this.options.autoScroll ? 'following-bottom' : 'free-scrolling';
         this.scrollViewportTo(maxScroll(viewport), {
             autoscrolling: true,
             behavior,
@@ -189,9 +175,7 @@ export class MessageScrollerController {
         const element = this.messages.get(messageId);
         if (element) {
             this.markDefaultApplied();
-            this.pendingMessage = this.scrollToElement(element, options)
-                ? null
-                : { messageId, options };
+            this.pendingMessage = this.scrollToElement(element, options) ? null : { messageId, options };
             return true;
         }
         if (this.itemCount === 0) {
@@ -203,9 +187,9 @@ export class MessageScrollerController {
     };
     // Events from the parts
     userScrollIntent = () => {
-        if (this.mode !== "free-scrolling") {
+        if (this.mode !== 'free-scrolling') {
             this.streamingTurn = null;
-            this.mode = "free-scrolling";
+            this.mode = 'free-scrolling';
         }
     };
     syncAfterScroll = () => {
@@ -214,15 +198,13 @@ export class MessageScrollerController {
         this.captureFirstVisible();
     };
     handleResize = () => {
-        if (this.mode === "following-bottom" && this.options.autoScroll) {
+        if (this.mode === 'following-bottom' && this.options.autoScroll) {
             this.scrollToEnd();
             return;
         }
         const previousSpacer = this.spacerHeight;
         if (this.reanchor()) {
-            if (this.options.autoScroll &&
-                previousSpacer > 0 &&
-                this.spacerHeight === 0)
+            if (this.options.autoScroll && previousSpacer > 0 && this.spacerHeight === 0)
                 this.scrollToEnd();
             return;
         }
@@ -247,9 +229,7 @@ export class MessageScrollerController {
             this.pendingDefaultStore.setSnapshot(false);
     };
     followOnAutoScroll = () => {
-        if (this.options.autoScroll &&
-            this.mode === "following-bottom" &&
-            this.itemCount > 0) {
+        if (this.options.autoScroll && this.mode === 'following-bottom' && this.itemCount > 0) {
             this.scrollToEnd();
             return;
         }
@@ -258,13 +238,13 @@ export class MessageScrollerController {
     observeVisibility = () => {
         if (!this.viewport || !this.visibilityStore.hasListeners())
             return;
-        if (typeof IntersectionObserver === "undefined") {
+        if (typeof IntersectionObserver === 'undefined') {
             this.scheduleVisibility();
             return;
         }
         if (!this.observer) {
             const inset = this.options.scrollMargin + this.options.scrollPreviousItemPeek;
-            this.observer = new IntersectionObserver((entries) => {
+            this.observer = new IntersectionObserver(entries => {
                 for (const entry of entries) {
                     const id = entry.target.dataset.messageId;
                     if (!id)
@@ -281,7 +261,7 @@ export class MessageScrollerController {
                 threshold: [0, 0.01, 0.5, 1],
             });
         }
-        this.messages.forEach((element) => this.observer?.observe(element));
+        this.messages.forEach(element => this.observer?.observe(element));
         this.scheduleVisibility();
     };
     unobserveVisibility = () => {
@@ -294,11 +274,7 @@ export class MessageScrollerController {
         this.visibilityStore.setSnapshot(noVisibility);
     };
     dispose = () => {
-        for (const frame of [
-            this.stateFrame,
-            this.visibilityFrame,
-            this.pendingFrame,
-        ])
+        for (const frame of [this.stateFrame, this.visibilityFrame, this.pendingFrame])
             if (frame !== null)
                 cancelAnimationFrame(frame);
         this.stateFrame = this.visibilityFrame = this.pendingFrame = null;
@@ -317,8 +293,7 @@ export class MessageScrollerController {
         if (this.flushPendingMessage())
             return;
         if (previousCount === 0) {
-            if (this.applyDefault() ||
-                (items.length > 0 && this.options.autoScroll && this.scrollToEnd()))
+            if (this.applyDefault() || (items.length > 0 && this.options.autoScroll && this.scrollToEnd()))
                 return;
             this.commit();
             this.scheduleVisibility();
@@ -330,11 +305,10 @@ export class MessageScrollerController {
             return;
         }
         if (items.length > previousCount) {
-            const anchor = items.slice(previousCount).find((item) => isAnchor(item));
+            const anchor = items.slice(previousCount).find(item => isAnchor(item));
             if (anchor) {
-                const following = this.options.autoScroll && this.mode === "following-bottom";
-                if (following &&
-                    items.slice(previousCount).filter((item) => isAnchor(item)).length > 1) {
+                const following = this.options.autoScroll && this.mode === 'following-bottom';
+                if (following && items.slice(previousCount).filter(item => isAnchor(item)).length > 1) {
                     this.scrollToEnd();
                     return;
                 }
@@ -343,13 +317,13 @@ export class MessageScrollerController {
             }
         }
         if (items.length === previousCount) {
-            const anchor = items.find((item) => isAnchor(item) && !this.handledAnchors.has(item));
+            const anchor = items.find(item => isAnchor(item) && !this.handledAnchors.has(item));
             if (anchor) {
                 this.pinAnchor(anchor);
                 return;
             }
         }
-        if (this.mode === "following-bottom" && this.options.autoScroll)
+        if (this.mode === 'following-bottom' && this.options.autoScroll)
             this.scrollToEnd();
         else {
             this.commit();
@@ -357,7 +331,7 @@ export class MessageScrollerController {
         }
     }
     pinAnchor(anchor) {
-        this.scrollToElement(anchor, { align: "start" }, true);
+        this.scrollToElement(anchor, { align: 'start' }, true);
         this.handledAnchors.add(anchor);
     }
     applyDefault() {
@@ -365,23 +339,19 @@ export class MessageScrollerController {
         if (this.defaultApplied || this.itemCount === 0)
             return false;
         let done = false;
-        if (position === "last-anchor") {
+        if (position === 'last-anchor') {
             const content = this.content;
             const viewport = this.viewport;
-            const anchor = content && viewport
-                ? itemsOf(content, this.spacer).filter(isAnchor).pop()
-                : undefined;
+            const anchor = content && viewport ? itemsOf(content, this.spacer).filter(isAnchor).pop() : undefined;
             if (!content || !viewport || !anchor)
                 done = this.scrollToEnd();
             else
-                done = this.measuringFrom(anchor, () => contentHeight(content, this.spacer, viewport) -
-                    offsetIn(anchor, viewport) <=
-                    viewport.clientHeight
+                done = this.measuringFrom(anchor, () => contentHeight(content, this.spacer, viewport) - offsetIn(anchor, viewport) <= viewport.clientHeight
                     ? this.scrollToEnd()
-                    : this.scrollToElement(anchor, { align: "start" }, true));
+                    : this.scrollToElement(anchor, { align: 'start' }, true));
         }
         else
-            done = position === "end" ? this.scrollToEnd() : this.scrollToStart();
+            done = position === 'end' ? this.scrollToEnd() : this.scrollToStart();
         if (done)
             this.markDefaultApplied();
         return done;
@@ -391,15 +361,11 @@ export class MessageScrollerController {
         const viewport = this.viewport;
         if (!content || !viewport || !content.contains(element))
             return false;
-        const { align = "start", behavior = "auto", scrollMargin = this.options.scrollMargin, } = options;
-        const top = this.targetTop(element, align, keepPreviousPeek
-            ? scrollMargin + this.options.scrollPreviousItemPeek
-            : scrollMargin);
-        this.setSpacerHeight(top +
-            viewport.clientHeight -
-            this.measuringFrom(element, () => contentHeight(content, this.spacer, viewport)));
+        const { align = 'start', behavior = 'auto', scrollMargin = this.options.scrollMargin } = options;
+        const top = this.targetTop(element, align, keepPreviousPeek ? scrollMargin + this.options.scrollPreviousItemPeek : scrollMargin);
+        this.setSpacerHeight(top + viewport.clientHeight - this.measuringFrom(element, () => contentHeight(content, this.spacer, viewport)));
         this.prependRestore = { element, viewportTop: topIn(element, viewport) };
-        this.mode = keepPreviousPeek ? "anchored-to-message" : "settling-jump";
+        this.mode = keepPreviousPeek ? 'anchored-to-message' : 'settling-jump';
         this.streamingTurn = keepPreviousPeek ? element : null;
         this.scrollViewportTo(top, { behavior });
         this.scheduleVisibility();
@@ -409,14 +375,14 @@ export class MessageScrollerController {
     measuringFrom(from, measure) {
         const items = this.content ? itemsOf(this.content, this.spacer) : [];
         const later = items.slice(Math.max(0, items.indexOf(from)));
-        const previous = later.map((item) => item.style.contentVisibility);
+        const previous = later.map(item => item.style.contentVisibility);
         for (const item of later)
-            item.style.contentVisibility = "visible";
+            item.style.contentVisibility = 'visible';
         try {
             return measure();
         }
         finally {
-            later.forEach((item, index) => (item.style.contentVisibility = previous[index] ?? ""));
+            later.forEach((item, index) => (item.style.contentVisibility = previous[index] ?? ''));
         }
     }
     targetTop(element, align, margin) {
@@ -424,13 +390,13 @@ export class MessageScrollerController {
         const offset = offsetIn(element, viewport);
         const height = element.getBoundingClientRect().height;
         const padding = blockPadding(this.spacer?.parentElement);
-        if (align === "center") {
+        if (align === 'center') {
             const room = Math.max(0, viewport.clientHeight - padding.start - padding.end);
             return offset - padding.start - (room - height) / 2 - margin;
         }
-        if (align === "end")
+        if (align === 'end')
             return offset - viewport.clientHeight + height + padding.end + margin;
-        if (align === "nearest") {
+        if (align === 'nearest') {
             const top = viewport.scrollTop + padding.start;
             const bottom = viewport.scrollTop + viewport.clientHeight - padding.end;
             if (offset >= top && offset + height <= bottom)
@@ -443,9 +409,9 @@ export class MessageScrollerController {
     }
     reanchor() {
         const element = this.streamingTurn;
-        if (!element || !element.isConnected || this.mode !== "anchored-to-message")
+        if (!element || !element.isConnected || this.mode !== 'anchored-to-message')
             return false;
-        return this.scrollToElement(element, { align: "start" }, true);
+        return this.scrollToElement(element, { align: 'start' }, true);
     }
     flushPendingMessage() {
         const pending = this.pendingMessage;
@@ -477,7 +443,7 @@ export class MessageScrollerController {
         this.spacerHeight = height;
         spacer.hidden = height === 0;
         spacer.style.height = `${height}px`;
-        spacer.style.marginTop = height > 0 ? `${-this.spacerGap}px` : "";
+        spacer.style.marginTop = height > 0 ? `${-this.spacerGap}px` : '';
     }
     setAutoscrolling(on) {
         if (this.autoscrollTimer !== null)
@@ -494,7 +460,7 @@ export class MessageScrollerController {
                 this.commit();
             }, autoscrollMs);
     }
-    scrollViewportTo(value, { behavior = "auto", autoscrolling = false, } = {}) {
+    scrollViewportTo(value, { behavior = 'auto', autoscrolling = false } = {}) {
         const viewport = this.viewport;
         if (!viewport)
             return;
@@ -531,15 +497,13 @@ export class MessageScrollerController {
             return;
         }
         const bounds = viewport.getBoundingClientRect();
-        const first = itemsOf(content, this.spacer).find((item) => {
+        const first = itemsOf(content, this.spacer).find(item => {
             if (!item.dataset.messageId)
                 return false;
             const rect = item.getBoundingClientRect();
             return rect.bottom > bounds.top && rect.top < bounds.bottom;
         });
-        this.prependRestore = first
-            ? { element: first, viewportTop: topIn(first, viewport) }
-            : null;
+        this.prependRestore = first ? { element: first, viewportTop: topIn(first, viewport) } : null;
     }
     readEdges() {
         const { content, viewport } = this;
@@ -556,35 +520,27 @@ export class MessageScrollerController {
         const top = this.viewport?.scrollTop ?? 0;
         const scrolledUp = top < this.lastScrollTop - epsilon;
         this.lastScrollTop = top;
-        if (this.options.autoScroll &&
-            !edges.end &&
-            this.mode !== "settling-jump" &&
-            this.mode !== "anchored-to-message")
-            this.mode = "following-bottom";
-        else if (this.mode === "following-bottom" &&
-            edges.end &&
-            scrolledUp &&
-            !this.autoscrolling)
-            this.mode = "free-scrolling";
+        if (this.options.autoScroll && !edges.end && this.mode !== 'settling-jump' && this.mode !== 'anchored-to-message')
+            this.mode = 'following-bottom';
+        else if (this.mode === 'following-bottom' && edges.end && scrolledUp && !this.autoscrolling)
+            this.mode = 'free-scrolling';
     }
     applyAttributes(edges) {
-        const value = [edges.start && "start", edges.end && "end"]
-            .filter(Boolean)
-            .join(" ");
+        const value = [edges.start && 'start', edges.end && 'end'].filter(Boolean).join(' ');
         for (const element of [this.root, this.viewport]) {
             if (!element)
                 continue;
             if (value)
-                element.setAttribute("data-scrollable", value);
+                element.setAttribute('data-scrollable', value);
             else
-                element.removeAttribute("data-scrollable");
-            element.toggleAttribute("data-autoscrolling", this.autoscrolling);
+                element.removeAttribute('data-scrollable');
+            element.toggleAttribute('data-autoscrolling', this.autoscrolling);
         }
     }
     commit() {
         const edges = this.readEdges();
         this.updateMode(edges);
-        const shown = this.mode === "following-bottom" ? { ...edges, end: false } : edges;
+        const shown = this.mode === 'following-bottom' ? { ...edges, end: false } : edges;
         this.applyAttributes(shown);
         this.stateStore.setSnapshot(shown);
     }
@@ -610,10 +566,8 @@ export class MessageScrollerController {
         if (!content || !viewport)
             return noVisibility;
         const bounds = viewport.getBoundingClientRect();
-        const line = bounds.top +
-            this.options.scrollMargin +
-            this.options.scrollPreviousItemPeek;
-        const measure = typeof IntersectionObserver === "undefined";
+        const line = bounds.top + this.options.scrollMargin + this.options.scrollPreviousItemPeek;
+        const measure = typeof IntersectionObserver === 'undefined';
         const visibleMessageIds = [];
         let currentAnchorId = null;
         for (const item of itemsOf(content, this.spacer)) {
@@ -622,9 +576,7 @@ export class MessageScrollerController {
                 continue;
             const anchor = isAnchor(item);
             const rect = anchor || measure ? item.getBoundingClientRect() : null;
-            const visible = measure && rect
-                ? rect.bottom > line && rect.top < bounds.bottom
-                : this.visibleIds.has(id);
+            const visible = measure && rect ? rect.bottom > line && rect.top < bounds.bottom : this.visibleIds.has(id);
             if (visible)
                 visibleMessageIds.push(id);
             if (anchor && rect && rect.top <= line + epsilon)

package/dist/internal/pressable.d.ts

@@ -1,2 +1,2 @@
-import { Button } from "@base-ui/react/button";
+import { Button } from '@base-ui/react/button';
 export declare function Pressable({ nativeButton, render, ref, className, disabled, focusableWhenDisabled, onClick, ...props }: Button.Props): import("react").JSX.Element | null;

package/dist/internal/pressable.js

@@ -1,21 +1,21 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "@base-ui/react/button";
-import { useRender } from "@base-ui/react/use-render";
+import { Button } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
 // Base UI gives non-native renders role="button"; navigation needs real link semantics.
 export function Pressable({ nativeButton = true, render, ref, className, disabled = false, focusableWhenDisabled = false, onClick, ...props }) {
     const link = useRender({
         enabled: !nativeButton,
-        defaultTagName: "a",
+        defaultTagName: 'a',
         render,
         ref,
         state: { disabled },
         props: {
             ...props,
-            className: typeof className === "function" ? className({ disabled }) : className,
-            "aria-disabled": disabled || undefined,
+            className: typeof className === 'function' ? className({ disabled }) : className,
+            'aria-disabled': disabled || undefined,
             tabIndex: disabled && !focusableWhenDisabled ? -1 : props.tabIndex,
-            onClick: ((event) => {
+            onClick: (event => {
                 if (disabled) {
                     event.preventDefault();
                     event.stopPropagation();

package/dist/internal/state-panel.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentType, HTMLAttributes, ReactNode } from 'react';
+export declare const statePanelKindNames: readonly ["empty", "loading", "success", "unavailable", "error"];
+export type StatePanelKind = (typeof statePanelKindNames)[number];
+export type StatePanelHeading = 'h1' | 'h2' | 'h3' | 'h4';
+export type StatePanelIcon = ComponentType<{
+    size?: number;
+}>;
+interface StatePanelBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children' | 'role'> {
+    title: ReactNode;
+    description: ReactNode;
+    /** Heading element for `title`. Match the surrounding document outline. */
+    heading?: StatePanelHeading | undefined;
+    /**
+     * Icon for `empty` and `unavailable`. Pass `null` to show no icon.
+     * Other kinds use a fixed icon.
+     */
+    icon?: StatePanelIcon | null | undefined;
+    /** Actions or guidance shown below the description. */
+    children?: ReactNode;
+}
+export type StatePanelProps = StatePanelBaseProps & ({
+    kind: 'empty';
+    /** Decorative preview of the filled state. Switches to the split layout. */
+    sample?: ReactNode;
+} | {
+    kind: 'loading' | 'success' | 'unavailable';
+    sample?: never;
+} | {
+    kind: 'error';
+    /** Errors always offer a recovery action or guidance. */
+    children: ReactNode;
+    sample?: never;
+});
+export declare function StatePanel({ kind, title, description, heading: Heading, icon, children, sample, className, ...props }: StatePanelProps): import("react").JSX.Element;
+export {};

package/dist/internal/state-panel.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'reicon-react/icons/Check';
+import { Inbox } from 'reicon-react/icons/Inbox';
+import { Warning } from 'reicon-react/icons/Warning';
+import { cn } from './classes.js';
+import { Spinner } from '../components/spinner.js';
+export const statePanelKindNames = ['empty', 'loading', 'success', 'unavailable', 'error'];
+const roles = {
+    error: 'alert',
+    loading: 'status',
+    success: 'status',
+};
+function Media({ kind, Icon }) {
+    return (_jsx("div", { "data-slot": "state-panel-media", className: "sprout-state-panel-media", "aria-hidden": "true", children: kind === 'loading' ? (_jsx(Spinner, { "aria-hidden": "true" })) : kind === 'success' ? (_jsx(Check, { size: 20 })) : kind === 'error' ? (_jsx(Warning, { size: 20, className: "sprout-state-panel-danger" })) : (_jsx(Icon, { size: 20 })) }));
+}
+export function StatePanel({ kind, title, description, heading: Heading = 'h2', icon = Inbox, children, sample, className, ...props }) {
+    const media = icon === null && (kind === 'empty' || kind === 'unavailable') ? null : _jsx(Media, { kind: kind, Icon: icon ?? Inbox });
+    const hasActions = children !== undefined && children !== null && children !== false;
+    if (sample)
+        return (_jsx("section", { "data-slot": "state-panel", "data-kind": kind, "data-layout": "sample", ...props, className: cn('sprout-state-panel', className), children: _jsxs("div", { className: "sprout-state-panel-card", children: [_jsxs("div", { className: "sprout-state-panel-copy", children: [media, _jsxs("div", { className: "sprout-state-panel-text", children: [_jsx(Heading, { className: "sprout-state-panel-title", children: title }), _jsx("p", { className: "sprout-state-panel-description", children: description })] }), hasActions && (_jsx("div", { "data-slot": "state-panel-actions", className: "sprout-state-panel-actions", children: children }))] }), _jsx("div", { "data-slot": "state-panel-sample", className: "sprout-state-panel-sample", "aria-hidden": "true", inert: true, children: _jsx("div", { className: "sprout-state-panel-sample-window", children: sample }) })] }) }));
+    return (_jsxs("div", { "data-slot": "state-panel", "data-kind": kind, "data-layout": "centered", ...props, className: cn('sprout-state-panel', className), children: [media, _jsxs("div", { role: roles[kind], "aria-atomic": "true", className: "sprout-state-panel-text", children: [_jsx(Heading, { className: "sprout-state-panel-title", children: title }), _jsx("p", { className: "sprout-state-panel-description", children: description })] }), hasActions && (_jsx("div", { "data-slot": "state-panel-actions", className: "sprout-state-panel-actions", children: children }))] }));
+}

package/dist/internal/syntax.d.ts

@@ -1,5 +1,5 @@
-import type { ThemedToken } from "shiki/core";
-import { type CodeLanguage } from "./languages.js";
+import type { ThemedToken } from 'shiki/core';
+import { type CodeLanguage } from './languages.js';
 /** The Shiki language for a file name, from its whole name or its extension. */
 export declare function languageForFilename(name: string): CodeLanguage | null;
 /** Resolves a language name or alias, falling back to the file name. `null` means plain text. */