@corbits/react-ui 0.1.0 → 0.2.0

package/dist/ui/approval-card.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../lib/utils.js";
@@ -17,100 +18,14 @@ const LONG_VALUE = 140;
  * Every argument the action will run with is shown. A card that hides them
  * behind "details" is asking for approval of something the user cannot see, so
  * long values clamp rather than disappear.
- */ export function ApprovalCard({ request, onApprove, onReject, onAllowAlways, state = "idle", error = null, className, children }) {
+ */
+export function ApprovalCard({ request, onApprove, onReject, onAllowAlways, state = "idle", error = null, className, children, }) {
     const busy = state !== "idle";
     const canAllowAlways = onAllowAlways !== undefined && request.actionKey !== undefined;
-    return /*#__PURE__*/ _jsxs("section", {
-        "aria-label": `Approval requested: ${request.headline}`,
-        className: cn("flex flex-col gap-3 rounded-lg border border-primary-emphasis bg-card p-4", className),
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-wrap items-center gap-2",
-                children: [
-                    /*#__PURE__*/ _jsx(Badge, {
-                        tone: "accent",
-                        children: "Needs your approval"
-                    }),
-                    /*#__PURE__*/ _jsxs("span", {
-                        className: "text-xs text-muted-foreground",
-                        children: [
-                            "Requested by ",
-                            request.requestedBy
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx("p", {
-                className: "text-sm font-semibold",
-                children: request.headline
-            }),
-            request.details === undefined || request.details.length === 0 ? null : /*#__PURE__*/ _jsx("dl", {
-                className: "flex flex-col gap-1.5 rounded-md bg-muted p-3 text-xs",
-                children: request.details.map((detail)=>/*#__PURE__*/ _jsx(ApprovalDetailRow, {
-                        detail: detail
-                    }, detail.label))
-            }),
-            children,
-            error === null ? null : /*#__PURE__*/ _jsx("p", {
-                role: "alert",
-                className: "text-sm text-destructive",
-                children: error
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-wrap items-center gap-2",
-                children: [
-                    /*#__PURE__*/ _jsx(Button, {
-                        size: "sm",
-                        onClick: onApprove,
-                        disabled: busy,
-                        children: state === "approving" ? "Approving…" : "Approve"
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        variant: "outline",
-                        size: "sm",
-                        onClick: onReject,
-                        disabled: busy,
-                        children: state === "rejecting" ? "Rejecting…" : "Reject"
-                    }),
-                    canAllowAlways ? /*#__PURE__*/ _jsx(Button, {
-                        variant: "ghost",
-                        size: "sm",
-                        onClick: ()=>onAllowAlways(request.actionKey),
-                        disabled: busy,
-                        className: "ml-auto",
-                        children: state === "allowing-always" ? "Saving…" : "Always allow this"
-                    }) : null
-                ]
-            })
-        ]
-    });
+    return (_jsxs("section", { "aria-label": `Approval requested: ${request.headline}`, className: cn("flex flex-col gap-3 rounded-lg border border-primary-emphasis bg-card p-4", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { tone: "accent", children: "Needs your approval" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["Requested by ", request.requestedBy] })] }), _jsx("p", { className: "text-sm font-semibold", children: request.headline }), request.details === undefined || request.details.length === 0 ? null : (_jsx("dl", { className: "flex flex-col gap-1.5 rounded-md bg-muted p-3 text-xs", children: request.details.map((detail) => (_jsx(ApprovalDetailRow, { detail: detail }, detail.label))) })), children, error === null ? null : (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: error })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { size: "sm", onClick: onApprove, disabled: busy, children: state === "approving" ? "Approving…" : "Approve" }), _jsx(Button, { variant: "outline", size: "sm", onClick: onReject, disabled: busy, children: state === "rejecting" ? "Rejecting…" : "Reject" }), canAllowAlways ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onAllowAlways(request.actionKey), disabled: busy, className: "ml-auto", children: state === "allowing-always" ? "Saving…" : "Always allow this" })) : null] })] }));
 }
 function ApprovalDetailRow({ detail }) {
     const [expanded, setExpanded] = useState(false);
     const long = detail.value.length > LONG_VALUE;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "grid grid-cols-[minmax(0,8rem)_1fr] gap-2",
-        children: [
-            /*#__PURE__*/ _jsx("dt", {
-                className: "truncate text-muted-foreground",
-                children: detail.label
-            }),
-            /*#__PURE__*/ _jsxs("dd", {
-                className: "min-w-0",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: cn("block break-words whitespace-pre-wrap", long && !expanded && "line-clamp-2"),
-                        children: detail.value
-                    }),
-                    long ? /*#__PURE__*/ _jsx("button", {
-                        type: "button",
-                        onClick: ()=>setExpanded((value)=>!value),
-                        "aria-expanded": expanded,
-                        className: "mt-0.5 text-primary-emphasis hover:underline",
-                        children: expanded ? "Show less" : "Show more"
-                    }) : null
-                ]
-            })
-        ]
-    });
+    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,8rem)_1fr] gap-2", children: [_jsx("dt", { className: "truncate text-muted-foreground", children: detail.label }), _jsxs("dd", { className: "min-w-0", children: [_jsx("span", { className: cn("block break-words whitespace-pre-wrap", long && !expanded && "line-clamp-2"), children: detail.value }), long ? (_jsx("button", { type: "button", onClick: () => setExpanded((value) => !value), "aria-expanded": expanded, className: "mt-0.5 text-primary-emphasis hover:underline", children: expanded ? "Show less" : "Show more" })) : null] })] }));
 }

package/dist/ui/artifact-body.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Download } from "lucide-react";
-import { artifactForm } from "../lib/artifact.js";
+import { artifactForm, } from "../lib/artifact.js";
 import { toSafeHref } from "../lib/url.js";
 import { cn } from "../lib/utils.js";
 import { ArtifactNotice } from "./artifact-notice.js";
@@ -22,133 +22,57 @@ import { ResearchBody, parseResearchArtifact } from "./research-body.js";
  * "empty" is a real state here — artifacts are frequently rendered while they
  * are still being written — and each form's own empty rendering (a table with
  * no rows, a frame with no src) reads as a fault rather than as progress.
- */ export function ArtifactBody({ artifact, form, className }) {
+ */
+export function ArtifactBody({ artifact, form, className }) {
     const resolved = form ?? artifactForm(artifact.kind);
     const content = artifact.content;
     const blank = content.trim() === "";
-    return /*#__PURE__*/ _jsx("div", {
-        className: cn("w-full", className),
-        children: body()
-    });
+    return _jsx("div", { className: cn("w-full", className), children: body() });
     function body() {
-        switch(resolved){
-            case "image":
-                {
-                    // The thumbnail URL, not the content: an image artifact's bytes live
-                    // behind a route, and `content` for one is either empty or a caption.
-                    const src = toSafeHref(artifact.thumbnailUrl ?? artifact.downloadUrl);
-                    if (src === undefined) return /*#__PURE__*/ _jsx(ArtifactNotice, {
-                        pending: artifact.pending
-                    });
-                    return /*#__PURE__*/ _jsxs("figure", {
-                        className: "flex flex-col gap-3",
-                        children: [
-                            /*#__PURE__*/ _jsx("img", {
-                                src: src,
-                                alt: artifact.title,
-                                className: "max-h-[480px] max-w-full rounded-lg border border-border"
-                            }),
-                            blank ? null : /*#__PURE__*/ _jsx("figcaption", {
-                                className: "text-xs text-muted-foreground",
-                                children: content
-                            })
-                        ]
-                    });
-                }
-            case "download":
-                {
-                    const downloadUrl = toSafeHref(artifact.downloadUrl);
-                    if (downloadUrl === undefined) {
-                        return /*#__PURE__*/ _jsx(ArtifactNotice, {
-                            message: "This file has no download location, so it cannot be retrieved."
-                        });
-                    }
-                    return /*#__PURE__*/ _jsxs("a", {
-                        href: downloadUrl,
-                        download: true,
-                        className: buttonVariants({
-                            variant: "outline",
-                            size: "sm"
-                        }),
-                        children: [
-                            /*#__PURE__*/ _jsx(Download, {
-                                "aria-hidden": true
-                            }),
-                            "Download ",
-                            artifact.title
-                        ]
-                    });
+        switch (resolved) {
+            case "image": {
+                // The thumbnail URL, not the content: an image artifact's bytes live
+                // behind a route, and `content` for one is either empty or a caption.
+                const src = toSafeHref(artifact.thumbnailUrl ?? artifact.downloadUrl);
+                if (src === undefined)
+                    return _jsx(ArtifactNotice, { pending: artifact.pending });
+                return (_jsxs("figure", { className: "flex flex-col gap-3", children: [_jsx("img", { src: src, alt: artifact.title, className: "max-h-[480px] max-w-full rounded-lg border border-border" }), blank ? null : (_jsx("figcaption", { className: "text-xs text-muted-foreground", children: content }))] }));
+            }
+            case "download": {
+                const downloadUrl = toSafeHref(artifact.downloadUrl);
+                if (downloadUrl === undefined) {
+                    return (_jsx(ArtifactNotice, { message: "This file has no download location, so it cannot be retrieved." }));
                 }
+                return (_jsxs("a", { href: downloadUrl, download: true, className: buttonVariants({ variant: "outline", size: "sm" }), children: [_jsx(Download, { "aria-hidden": true }), "Download ", artifact.title] }));
+            }
             case "embed":
-                return /*#__PURE__*/ _jsx(EmbedBody, {
-                    url: content.trim(),
-                    title: artifact.title,
-                    ...artifact.downloadUrl === undefined ? {} : {
-                        downloadUrl: artifact.downloadUrl
-                    }
-                });
-            case "table":
-                {
-                    if (blank) return /*#__PURE__*/ _jsx(ArtifactNotice, {
-                        pending: artifact.pending
-                    });
-                    const downloadUrl = toSafeHref(artifact.downloadUrl);
-                    return /*#__PURE__*/ _jsxs("div", {
-                        className: "flex flex-col gap-3",
-                        children: [
-                            downloadUrl === undefined ? null : /*#__PURE__*/ _jsxs("a", {
-                                href: downloadUrl,
-                                download: true,
-                                className: cn(buttonVariants({
-                                    variant: "outline",
-                                    size: "sm"
-                                }), "self-start"),
-                                children: [
-                                    /*#__PURE__*/ _jsx(Download, {
-                                        "aria-hidden": true
-                                    }),
-                                    "Download"
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(CsvTable, {
-                                text: content,
-                                caption: artifact.title
-                            })
-                        ]
-                    });
-                }
+                return (_jsx(EmbedBody, { url: content.trim(), title: artifact.title, ...(artifact.downloadUrl === undefined
+                        ? {}
+                        : { downloadUrl: artifact.downloadUrl }) }));
+            case "table": {
+                if (blank)
+                    return _jsx(ArtifactNotice, { pending: artifact.pending });
+                const downloadUrl = toSafeHref(artifact.downloadUrl);
+                return (_jsxs("div", { className: "flex flex-col gap-3", children: [downloadUrl === undefined ? null : (_jsxs("a", { href: downloadUrl, download: true, className: cn(buttonVariants({ variant: "outline", size: "sm" }), "self-start"), children: [_jsx(Download, { "aria-hidden": true }), "Download"] })), _jsx(CsvTable, { text: content, caption: artifact.title })] }));
+            }
             case "comparison":
-                return /*#__PURE__*/ _jsx(CompareBodyFromJson, {
-                    content: content,
-                    ...artifact.pending === undefined ? {} : {
-                        pending: artifact.pending
-                    }
-                });
-            case "research":
-                {
-                    if (blank) return /*#__PURE__*/ _jsx(ArtifactNotice, {
-                        pending: artifact.pending
-                    });
-                    const parsed = parseResearchArtifact(content);
-                    // Unparseable is not a failure worth an error card — the payload is
-                    // still the artifact, so fall through to prose and let it be read.
-                    if (parsed === null) return /*#__PURE__*/ _jsx(Prose, {
-                        text: content
-                    });
-                    return /*#__PURE__*/ _jsx(ResearchBody, {
-                        brief: parsed.brief,
-                        ...parsed.body === undefined ? {} : {
-                            body: parsed.body
-                        }
-                    });
-                }
+                return (_jsx(CompareBodyFromJson, { content: content, ...(artifact.pending === undefined
+                        ? {}
+                        : { pending: artifact.pending }) }));
+            case "research": {
+                if (blank)
+                    return _jsx(ArtifactNotice, { pending: artifact.pending });
+                const parsed = parseResearchArtifact(content);
+                // Unparseable is not a failure worth an error card — the payload is
+                // still the artifact, so fall through to prose and let it be read.
+                if (parsed === null)
+                    return _jsx(Prose, { text: content });
+                return (_jsx(ResearchBody, { brief: parsed.brief, ...(parsed.body === undefined ? {} : { body: parsed.body }) }));
+            }
             case "prose":
-                if (blank) return /*#__PURE__*/ _jsx(ArtifactNotice, {
-                    pending: artifact.pending
-                });
-                return /*#__PURE__*/ _jsx(Prose, {
-                    text: content
-                });
+                if (blank)
+                    return _jsx(ArtifactNotice, { pending: artifact.pending });
+                return _jsx(Prose, { text: content });
         }
     }
 }
@@ -162,9 +86,7 @@ import { ResearchBody, parseResearchArtifact } from "./research-body.js";
  *
  * `max-w-prose` caps the measure at roughly 65 characters. Full-bleed body text
  * on a wide screen is unreadable regardless of how good the type is.
- */ function Prose({ text }) {
-    return /*#__PURE__*/ _jsx("div", {
-        className: "max-w-prose text-sm leading-relaxed whitespace-pre-wrap",
-        children: text
-    });
+ */
+function Prose({ text }) {
+    return (_jsx("div", { className: "max-w-prose text-sm leading-relaxed whitespace-pre-wrap", children: text }));
 }

package/dist/ui/artifact-notice.d.ts

@@ -16,6 +16,6 @@ export declare function ArtifactNotice({
 pending, 
 /** Overrides the pending/empty wording — use for a specific failure. */
 message, }: {
-    readonly pending?: boolean;
+    readonly pending?: boolean | undefined;
     readonly message?: string;
 }): import("react").JSX.Element;

package/dist/ui/artifact-notice.js

@@ -13,24 +13,17 @@ import { EmptyState } from "./empty-state.js";
  * artifact means the producer has not finished writing; an empty payload on a
  * settled one means there is genuinely nothing. Same markup, opposite message,
  * and getting it backwards makes a working system look broken.
- */ export function ArtifactNotice({ /** The producer is still writing. Changes the message, not the layout. */ pending = false, /** Overrides the pending/empty wording — use for a specific failure. */ message }) {
+ */
+export function ArtifactNotice({ 
+/** The producer is still writing. Changes the message, not the layout. */
+pending = false, 
+/** Overrides the pending/empty wording — use for a specific failure. */
+message, }) {
     if (message !== undefined) {
-        return /*#__PURE__*/ _jsx(EmptyState, {
-            icon: /*#__PURE__*/ _jsx(FileWarning, {}),
-            title: "Nothing to preview",
-            description: message
-        });
+        return (_jsx(EmptyState, { icon: _jsx(FileWarning, {}), title: "Nothing to preview", description: message }));
     }
     if (pending) {
-        return /*#__PURE__*/ _jsx(EmptyState, {
-            icon: /*#__PURE__*/ _jsx(Loader2, {}),
-            title: "Still being produced",
-            description: "This artifact has no content yet — check back shortly."
-        });
+        return (_jsx(EmptyState, { icon: _jsx(Loader2, {}), title: "Still being produced", description: "This artifact has no content yet \u2014 check back shortly." }));
     }
-    return /*#__PURE__*/ _jsx(EmptyState, {
-        icon: /*#__PURE__*/ _jsx(FileWarning, {}),
-        title: "No content",
-        description: "This artifact is empty."
-    });
+    return (_jsx(EmptyState, { icon: _jsx(FileWarning, {}), title: "No content", description: "This artifact is empty." }));
 }

package/dist/ui/avatar.d.ts

@@ -33,5 +33,5 @@ export type AvatarStackProps = {
 /**
  * Overlapping avatar stack for thread participants and channel members.
  */
-export declare function AvatarStack({ items, max, size, className }: AvatarStackProps): import("react").JSX.Element;
+export declare function AvatarStack({ items, max, size, className, }: AvatarStackProps): import("react").JSX.Element;
 export type AvatarStackSlot = ReactNode;

package/dist/ui/avatar.js

@@ -3,71 +3,34 @@ import { cn } from "../lib/utils.js";
 const SIZE_CLASS = {
     sm: "size-6 text-[10px]",
     md: "size-8 text-xs",
-    lg: "size-10 text-sm"
+    lg: "size-10 text-sm",
 };
 const TONE_CLASS = {
     neutral: "bg-muted text-muted-foreground",
     agent: "bg-primary text-primary-foreground",
     agent2: "bg-accent text-accent-foreground",
-    agent3: "bg-success text-success-foreground"
+    agent3: "bg-success text-success-foreground",
 };
 const BADGE_SIZE = {
     sm: "size-3 text-[7px]",
     md: "size-3.5 text-[8px]",
-    lg: "size-4 text-[9px]"
+    lg: "size-4 text-[9px]",
 };
 /**
  * Initials avatar with optional tenant monogram badge. Images are
  * intentionally unsupported here: identity headers should not flash or
  * depend on third-party avatar hosts.
- */ export function Avatar({ initials, label, tone = "neutral", size = "md", tenantMonogram, className }) {
-    return /*#__PURE__*/ _jsxs("span", {
-        role: "img",
-        "aria-label": label,
-        className: cn("relative inline-flex shrink-0 items-center justify-center font-bold uppercase", SIZE_CLASS[size], TONE_CLASS[tone], className),
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                children: initials.slice(0, 2)
-            }),
-            tenantMonogram === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                className: cn("absolute -right-0.5 -bottom-0.5 inline-flex items-center justify-center border border-background bg-muted font-bold uppercase text-muted-foreground", BADGE_SIZE[size]),
-                children: tenantMonogram.slice(0, 1)
-            })
-        ]
-    });
+ */
+export function Avatar({ initials, label, tone = "neutral", size = "md", tenantMonogram, className, }) {
+    return (_jsxs("span", { role: "img", "aria-label": label, className: cn("relative inline-flex shrink-0 items-center justify-center font-bold uppercase", SIZE_CLASS[size], TONE_CLASS[tone], className), children: [_jsx("span", { "aria-hidden": true, children: initials.slice(0, 2) }), tenantMonogram === undefined ? null : (_jsx("span", { "aria-hidden": true, className: cn("absolute -right-0.5 -bottom-0.5 inline-flex items-center justify-center border border-background bg-muted font-bold uppercase text-muted-foreground", BADGE_SIZE[size]), children: tenantMonogram.slice(0, 1) }))] }));
 }
 /**
  * Overlapping avatar stack for thread participants and channel members.
- */ export function AvatarStack({ items, max = 4, size = "sm", className }) {
+ */
+export function AvatarStack({ items, max = 4, size = "sm", className, }) {
     const visible = items.slice(0, max);
     const overflow = items.length - visible.length;
-    return /*#__PURE__*/ _jsxs("span", {
-        className: cn("inline-flex items-center", className),
-        role: "group",
-        "aria-label": "Participants",
-        children: [
-            visible.map((item, index)=>/*#__PURE__*/ _jsx(Avatar, {
-                    initials: item.initials,
-                    label: item.label,
-                    ...item.tone === undefined ? {} : {
-                        tone: item.tone
-                    },
-                    ...item.tenantMonogram === undefined ? {} : {
-                        tenantMonogram: item.tenantMonogram
-                    },
-                    size: size,
-                    className: cn("ring-1 ring-background", index > 0 && "-ml-1.5")
-                }, item.id)),
-            overflow <= 0 ? null : /*#__PURE__*/ _jsxs("span", {
-                className: cn("inline-flex items-center justify-center bg-muted font-mono font-semibold text-muted-foreground ring-1 ring-background", SIZE_CLASS[size], visible.length > 0 && "-ml-1.5"),
-                "aria-label": `${overflow} more`,
-                children: [
-                    "+",
-                    overflow
-                ]
-            })
-        ]
-    });
+    return (_jsxs("span", { className: cn("inline-flex items-center", className), role: "group", "aria-label": "Participants", children: [visible.map((item, index) => (_jsx(Avatar, { initials: item.initials, label: item.label, ...(item.tone === undefined ? {} : { tone: item.tone }), ...(item.tenantMonogram === undefined
+                    ? {}
+                    : { tenantMonogram: item.tenantMonogram }), size: size, className: cn("ring-1 ring-background", index > 0 && "-ml-1.5") }, item.id))), overflow <= 0 ? null : (_jsxs("span", { className: cn("inline-flex items-center justify-center bg-muted font-mono font-semibold text-muted-foreground ring-1 ring-background", SIZE_CLASS[size], visible.length > 0 && "-ml-1.5"), "aria-label": `${overflow} more`, children: ["+", overflow] }))] }));
 }

package/dist/ui/badge.js

@@ -16,20 +16,12 @@ const badgeVariants = cva("inline-flex items-center gap-1 rounded-sm border px-1
             warning: "border-primary-emphasis/40 bg-primary/10 text-primary-emphasis",
             danger: "border-destructive bg-destructive text-destructive-foreground",
             shared: "border-accent bg-accent text-accent-foreground",
-            access: "border-primary-emphasis/40 bg-primary/10 text-primary-emphasis"
-        }
+            access: "border-primary-emphasis/40 bg-primary/10 text-primary-emphasis",
+        },
     },
-    defaultVariants: {
-        tone: "neutral"
-    }
+    defaultVariants: { tone: "neutral" },
 });
 export function Badge({ className, tone, ...props }) {
-    return /*#__PURE__*/ _jsx("span", {
-        "data-slot": "badge",
-        className: cn(badgeVariants({
-            tone
-        }), className),
-        ...props
-    });
+    return (_jsx("span", { "data-slot": "badge", className: cn(badgeVariants({ tone }), className), ...props }));
 }
 export { badgeVariants };

package/dist/ui/bar-chart.d.ts

@@ -35,4 +35,4 @@ export type BarChartProps = {
  * the exact values — which is what anyone reading non-visually wants — are in
  * the table, in order, with headers.
  */
-export declare function BarChart({ title, description, data, valueLabel, format, className }: BarChartProps): import("react").JSX.Element;
+export declare function BarChart({ title, description, data, valueLabel, format, className, }: BarChartProps): import("react").JSX.Element;

package/dist/ui/bar-chart.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatCompact, niceTicks, scaleLinear } from "../lib/chart-geometry.js";
+import { formatCompact, niceTicks, scaleLinear, } from "../lib/chart-geometry.js";
 import { seriesColor } from "../lib/chart-palette.js";
 import { cn } from "../lib/utils.js";
 import { ChartFrame } from "./chart-frame.js";
@@ -30,89 +30,37 @@ const RADIUS = 4;
  * numbers. An SVG full of `<rect>` elements announced individually is noise, and
  * the exact values — which is what anyone reading non-visually wants — are in
  * the table, in order, with headers.
- */ export function BarChart({ title, description, data, valueLabel = "Value", format = formatCompact, className }) {
-    const max = Math.max(0, ...data.map((datum)=>datum.value));
+ */
+export function BarChart({ title, description, data, valueLabel = "Value", format = formatCompact, className, }) {
+    const max = Math.max(0, ...data.map((datum) => datum.value));
     const ticks = niceTicks(max);
     const axisMax = ticks[ticks.length - 1] ?? 1;
     const plotWidth = 320;
     const height = data.length * ROW_HEIGHT;
     const width = LABEL_WIDTH + plotWidth + VALUE_WIDTH;
-    return /*#__PURE__*/ _jsxs(ChartFrame, {
-        title: title,
-        ...description === undefined ? {} : {
-            description
-        },
-        table: {
-            columns: [
-                "Category",
-                valueLabel
-            ],
-            rows: data.map((datum)=>[
-                    datum.label,
-                    format(datum.value)
-                ])
-        },
-        className: className,
-        children: [
-            /*#__PURE__*/ _jsxs("svg", {
-                viewBox: `0 0 ${width} ${height}`,
+    return (_jsxs(ChartFrame, { title: title, ...(description === undefined ? {} : { description }), table: {
+            columns: ["Category", valueLabel],
+            rows: data.map((datum) => [datum.label, format(datum.value)]),
+        }, className: className, children: [_jsxs("svg", { viewBox: `0 0 ${width} ${height}`, 
                 // Scales to the container's width; the row rhythm is what must stay
                 // fixed, and it is expressed in the viewBox.
-                className: "h-auto w-full",
-                "aria-hidden": true,
-                focusable: "false",
-                children: [
-                    ticks.map((tick)=>{
+                className: "h-auto w-full", "aria-hidden": true, focusable: "false", children: [ticks.map((tick) => {
                         const x = LABEL_WIDTH + scaleLinear(tick, axisMax, plotWidth);
-                        return(// Hairline, solid, one step off the surface: present enough to
+                        return (
+                        // Hairline, solid, one step off the surface: present enough to
                         // measure against, quiet enough that the bars stay the loud thing.
-                        /*#__PURE__*/ _jsx("line", {
-                            x1: x,
-                            y1: 0,
-                            x2: x,
-                            y2: height,
-                            stroke: "var(--border)",
-                            strokeWidth: 1
-                        }, tick));
-                    }),
-                    data.map((datum, index)=>{
+                        _jsx("line", { x1: x, y1: 0, x2: x, y2: height, stroke: "var(--border)", strokeWidth: 1 }, tick));
+                    }), data.map((datum, index) => {
                         const y = index * ROW_HEIGHT + (ROW_HEIGHT - BAR_HEIGHT) / 2;
                         const length = scaleLinear(datum.value, axisMax, plotWidth);
                         const radius = Math.min(RADIUS, length / 2);
-                        return /*#__PURE__*/ _jsxs("g", {
-                            children: [
-                                /*#__PURE__*/ _jsx("text", {
-                                    x: LABEL_WIDTH - 8,
-                                    y: index * ROW_HEIGHT + ROW_HEIGHT / 2,
-                                    textAnchor: "end",
-                                    dominantBaseline: "middle",
-                                    className: "fill-muted-foreground text-[11px]",
-                                    children: datum.label
-                                }),
-                                /*#__PURE__*/ _jsx("path", {
-                                    d: length <= 0 ? "" : `M${LABEL_WIDTH} ${y}` + `H${LABEL_WIDTH + length - radius}` + `a${radius} ${radius} 0 0 1 ${radius} ${radius}` + `V${y + BAR_HEIGHT - radius}` + `a${radius} ${radius} 0 0 1 ${-radius} ${radius}` + `H${LABEL_WIDTH}Z`,
-                                    fill: seriesColor(0)
-                                }),
-                                /*#__PURE__*/ _jsx("text", {
-                                    x: LABEL_WIDTH + length + 8,
-                                    y: index * ROW_HEIGHT + ROW_HEIGHT / 2,
-                                    dominantBaseline: "middle",
-                                    className: "fill-foreground text-[11px] tabular-nums",
-                                    children: format(datum.value)
-                                })
-                            ]
-                        }, datum.label);
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("p", {
-                className: cn("text-xs text-muted-foreground"),
-                children: [
-                    "Axis to ",
-                    format(axisMax),
-                    ", from zero."
-                ]
-            })
-        ]
-    });
+                        return (_jsxs("g", { children: [_jsx("text", { x: LABEL_WIDTH - 8, y: index * ROW_HEIGHT + ROW_HEIGHT / 2, textAnchor: "end", dominantBaseline: "middle", className: "fill-muted-foreground text-[11px]", children: datum.label }), _jsx("path", { d: length <= 0
+                                        ? ""
+                                        : `M${LABEL_WIDTH} ${y}` +
+                                            `H${LABEL_WIDTH + length - radius}` +
+                                            `a${radius} ${radius} 0 0 1 ${radius} ${radius}` +
+                                            `V${y + BAR_HEIGHT - radius}` +
+                                            `a${radius} ${radius} 0 0 1 ${-radius} ${radius}` +
+                                            `H${LABEL_WIDTH}Z`, fill: seriesColor(0) }), _jsx("text", { x: LABEL_WIDTH + length + 8, y: index * ROW_HEIGHT + ROW_HEIGHT / 2, dominantBaseline: "middle", className: "fill-foreground text-[11px] tabular-nums", children: format(datum.value) })] }, datum.label));
+                    })] }), _jsxs("p", { className: cn("text-xs text-muted-foreground"), children: ["Axis to ", format(axisMax), ", from zero."] })] }));
 }