@calliopelabs/ui 0.7.0 → 0.11.0

package/dist/css/tokens.css

@@ -0,0 +1,491 @@
+/*
+ * @calliopelabs/ui CSS layer: tokens.
+ * Generated by `npm run theme` from src/theme/tokens.ts and the product
+ * brands. Do not edit by hand.
+ *
+ * The same values as the Tailwind preset (theme.css plus each product's brand
+ * tokens), for pages without React or Tailwind. Every axis is an attribute,
+ * on <html> or on any subtree:
+ *   data-product  the brand: its sidebar and its own accent
+ *   data-mode     dark | light (follows the ground)
+ *   data-ground   the surface ramp
+ *   data-accent   a family accent or the product's own; "custom" with an inline --brand-primary
+ *   data-density  compact | cards
+ *   data-corners  0 | 2 | 4 | 10 (appearance.js sets --radius inline instead)
+ * appearance.js stamps all of them before first paint, or a server that
+ * keeps the preference renders them itself.
+ */
+
+/* Mode-independent tokens */
+:root {
+  --radius: 2px;
+  --motion-fast: 120ms;
+  --motion-base: 200ms;
+  --motion-slow: 320ms;
+}
+
+/* Dark: black ground, green accent */
+:root,
+[data-mode="dark"] {
+  color-scheme: dark;
+  --background: #000000;
+  --card: #0a0a0a;
+  --popover: #141414;
+  --secondary: #161616;
+  --muted: #111111;
+  --accent: #1b1b1b;
+  --muted-foreground: #848b88;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #0a0a0a);
+  --sidebar-foreground: var(--brand-sidebar-foreground, #f0f2f1);
+  --sidebar-primary: var(--brand-sidebar-primary, var(--brand-primary));
+  --sidebar-muted-foreground: var(--brand-sidebar-muted-foreground, #848b88);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --foreground: #f0f2f1;
+  --card-foreground: #f0f2f1;
+  --popover-foreground: #f0f2f1;
+  --secondary-foreground: #f0f2f1;
+  --accent-foreground: #f0f2f1;
+  --brand-primary: #2f9e52;
+  --brand-on-primary: #04241b;
+  --primary: var(--brand-primary);
+  --primary-foreground: var(--brand-on-primary);
+  --destructive: #ff6b6b;
+  --ring: var(--brand-primary);
+  --chart-1: var(--brand-primary);
+  --chart-2: #8fd82a;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar-primary-foreground: var(--brand-on-primary);
+  --sidebar-accent-foreground: #f0f2f1;
+  --sidebar-ring: var(--brand-primary);
+  --surface-0: var(--background);
+  --surface-1: var(--card);
+  --surface-2: var(--popover);
+  --success: #8fd82a;
+  --success-fg: #a6e34d;
+  --success-bg: rgba(143, 216, 42, 0.1);
+  --success-border: rgba(143, 216, 42, 0.35);
+  --warning: #f0c34e;
+  --warning-fg: #f0c34e;
+  --warning-bg: rgba(240, 195, 78, 0.1);
+  --warning-border: rgba(240, 195, 78, 0.35);
+  --info: #2f9e52;
+  --info-fg: #5cbb79;
+  --info-bg: rgba(47, 158, 82, 0.14);
+  --info-border: rgba(47, 158, 82, 0.4);
+  --danger: #ff6b6b;
+  --danger-fg: #ff8a8a;
+  --danger-bg: rgba(255, 107, 107, 0.1);
+  --danger-border: rgba(255, 107, 107, 0.35);
+}
+
+/* Light: neutral ground, green accent */
+[data-mode="light"] {
+  color-scheme: light;
+  --background: #fafaf9;
+  --card: #ffffff;
+  --popover: #ffffff;
+  --secondary: #f1f1f0;
+  --muted: #f1f1f0;
+  --accent: #f3ebe5;
+  --muted-foreground: #5c5b58;
+  --border: #dfdedc;
+  --input: #dfdedc;
+  --sidebar: var(--brand-sidebar-light, #f4f3f1);
+  --sidebar-foreground: var(--brand-sidebar-foreground, #1e1d1b);
+  --sidebar-primary: var(--brand-sidebar-primary, var(--brand-primary));
+  --sidebar-muted-foreground: var(--brand-sidebar-muted-foreground, #5c5b58);
+  --sidebar-accent: var(--brand-sidebar-accent, #f3ebe5);
+  --sidebar-border: var(--brand-sidebar-border, #dfdedc);
+  --foreground: #1e1d1b;
+  --card-foreground: #1e1d1b;
+  --popover-foreground: #1e1d1b;
+  --secondary-foreground: #1e1d1b;
+  --accent-foreground: #1e1d1b;
+  --brand-primary: #26803f;
+  --brand-on-primary: #f3fbf7;
+  --primary: var(--brand-primary);
+  --primary-foreground: var(--brand-on-primary);
+  --destructive: #d40c1a;
+  --ring: var(--brand-primary);
+  --chart-1: var(--brand-primary);
+  --chart-2: #5c9c1a;
+  --chart-3: #8a7a5c;
+  --chart-4: #b8860b;
+  --chart-5: #26803f;
+  --sidebar-primary-foreground: var(--brand-on-primary);
+  --sidebar-accent-foreground: #1e1d1b;
+  --sidebar-ring: var(--brand-primary);
+  --surface-0: var(--background);
+  --surface-1: var(--card);
+  --surface-2: var(--popover);
+  --success: #508d23;
+  --success-fg: #305a12;
+  --success-bg: #e3f5da;
+  --success-border: #b4d7a2;
+  --warning: #cb7a00;
+  --warning-fg: #824c12;
+  --warning-bg: #fef0d4;
+  --warning-border: #e8c184;
+  --info: #2f8543;
+  --info-fg: #1b622d;
+  --info-bg: #e2f4e3;
+  --info-border: #acd8b1;
+  --danger: #df2225;
+  --danger-fg: #bb0916;
+  --danger-bg: #ffeae9;
+  --danger-border: #ffb1aa;
+}
+
+/* Ground: Black (dark) */
+[data-mode="dark"][data-ground="black"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --popover: #141414;
+  --secondary: #161616;
+  --muted: #111111;
+  --accent: #1b1b1b;
+  --muted-foreground: #848b88;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #0a0a0a);
+  --sidebar-foreground: var(--brand-sidebar-foreground, #f0f2f1);
+  --sidebar-primary: var(--brand-sidebar-primary, var(--brand-primary));
+  --sidebar-muted-foreground: var(--brand-sidebar-muted-foreground, #848b88);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+}
+
+/* Ground: Charcoal (dark) */
+[data-mode="dark"][data-ground="charcoal"] {
+  --background: #0e0f10;
+  --card: #161819;
+  --popover: #1e2022;
+  --secondary: #202325;
+  --muted: #191b1c;
+  --accent: #232628;
+  --muted-foreground: #8b9194;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #161819);
+  --sidebar-foreground: var(--brand-sidebar-foreground, #f0f2f1);
+  --sidebar-primary: var(--brand-sidebar-primary, var(--brand-primary));
+  --sidebar-muted-foreground: var(--brand-sidebar-muted-foreground, #8b9194);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+}
+
+/* Ground: Graphite (dark) */
+[data-mode="dark"][data-ground="graphite"] {
+  --background: #111214;
+  --card: #18191b;
+  --popover: #202124;
+  --secondary: #222326;
+  --muted: #1b1c1e;
+  --accent: #26272a;
+  --muted-foreground: #8e9296;
+  --border: rgba(255, 255, 255, 0.09);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: #161719;
+  --sidebar-foreground: #f0f2f1;
+  --sidebar-primary: var(--brand-primary);
+  --sidebar-muted-foreground: #8e9296;
+  --sidebar-accent: color-mix(in oklab, var(--primary) 14%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.07);
+}
+
+/* Ground: Emerald (dark) */
+[data-mode="dark"][data-ground="emerald"] {
+  --background: #050b08;
+  --card: #0a1310;
+  --popover: #0d1814;
+  --secondary: #121d18;
+  --muted: #101a15;
+  --accent: #16261f;
+  --muted-foreground: #8ba199;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #0a1310);
+  --sidebar-foreground: var(--brand-sidebar-foreground, #f0f2f1);
+  --sidebar-primary: var(--brand-sidebar-primary, var(--brand-primary));
+  --sidebar-muted-foreground: var(--brand-sidebar-muted-foreground, #8ba199);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+}
+
+/* Ground: Navy (dark) */
+[data-mode="dark"][data-ground="navy"] {
+  --background: #0b1120;
+  --card: #152141;
+  --popover: #1a284a;
+  --secondary: #1d2b50;
+  --muted: #182545;
+  --accent: #213157;
+  --muted-foreground: #97a6c2;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #152141);
+  --sidebar-foreground: var(--brand-sidebar-foreground, #f0f2f1);
+  --sidebar-primary: var(--brand-sidebar-primary, var(--brand-primary));
+  --sidebar-muted-foreground: var(--brand-sidebar-muted-foreground, #97a6c2);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+}
+
+/* Ground: Paper (light) */
+[data-mode="light"][data-ground="paper"] {
+  --background: #faf6ee;
+  --card: #fffdf9;
+  --popover: #fffdf9;
+  --secondary: #f3eee4;
+  --muted: #f3eee4;
+  --accent: #f0e6da;
+  --muted-foreground: #5c5b58;
+  --border: #dedad2;
+  --input: #dedad2;
+  --sidebar: var(--brand-sidebar-light, #f5f0e4);
+  --sidebar-foreground: var(--brand-sidebar-foreground, #1e1d1b);
+  --sidebar-primary: var(--brand-sidebar-primary, var(--brand-primary));
+  --sidebar-muted-foreground: var(--brand-sidebar-muted-foreground, #5c5b58);
+  --sidebar-accent: var(--brand-sidebar-accent, #f0e6da);
+  --sidebar-border: var(--brand-sidebar-border, #dedad2);
+}
+
+/* Ground: Mist (light) */
+[data-mode="light"][data-ground="mist"] {
+  --background: #f2f7f9;
+  --card: #ffffff;
+  --popover: #ffffff;
+  --secondary: #e9eff2;
+  --muted: #e9eff2;
+  --accent: #dfeaf0;
+  --muted-foreground: #5c5b58;
+  --border: #d6dcdf;
+  --input: #d6dcdf;
+  --sidebar: var(--brand-sidebar-light, #e9f1f5);
+  --sidebar-foreground: var(--brand-sidebar-foreground, #1e1d1b);
+  --sidebar-primary: var(--brand-sidebar-primary, var(--brand-primary));
+  --sidebar-muted-foreground: var(--brand-sidebar-muted-foreground, #5c5b58);
+  --sidebar-accent: var(--brand-sidebar-accent, #dfeaf0);
+  --sidebar-border: var(--brand-sidebar-border, #d6dcdf);
+}
+
+/* Accent: Green (dark) */
+[data-mode="dark"][data-accent="green"] {
+  --brand-primary: #2f9e52;
+  --brand-on-primary: #04241b;
+}
+
+/* Accent: Green (light) */
+[data-mode="light"][data-accent="green"] {
+  --brand-primary: #26803f;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Accent: Copper (dark) */
+[data-mode="dark"][data-accent="copper"] {
+  --brand-primary: #c97b4a;
+  --brand-on-primary: #140a04;
+  --chart-3: #d9c7a3;
+  --chart-5: #2f9e52;
+}
+
+/* Accent: Copper (light) */
+[data-mode="light"][data-accent="copper"] {
+  --brand-primary: #9c5730;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Accent: Ice (dark) */
+[data-mode="dark"][data-accent="ice"] {
+  --brand-primary: #6e9fc4;
+  --brand-on-primary: #06131c;
+  --chart-3: #b9d4e4;
+  --chart-5: #2f9e52;
+}
+
+/* Accent: Ice (light) */
+[data-mode="light"][data-accent="ice"] {
+  --brand-primary: #3d6f95;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Accent: Periwinkle (dark) */
+[data-mode="dark"][data-accent="periwinkle"] {
+  --brand-primary: #8b8fd9;
+  --brand-on-primary: #0b0c1a;
+  --chart-3: #c3c5ec;
+  --chart-5: #2f9e52;
+}
+
+/* Accent: Periwinkle (light) */
+[data-mode="light"][data-accent="periwinkle"] {
+  --brand-primary: #5a5fae;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Accent: Amber (dark) */
+[data-mode="dark"][data-accent="amber"] {
+  --brand-primary: #e0b34a;
+  --brand-on-primary: #1a1204;
+  --chart-4: #c97b4a;
+}
+
+/* Accent: Amber (light) */
+[data-mode="light"][data-accent="amber"] {
+  --brand-primary: #8a6410;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Density: Compact, dense rows with hairline dividers */
+:root,
+[data-density="compact"] {
+  --row-pad-y: 0.5rem;
+  --row-pad-x: 0.75rem;
+  --stack-gap: 0.75rem;
+  --panel-pad: 1rem;
+  --list-columns: minmax(0, 1fr);
+  --list-gap: 0px;
+  --list-frame-border: 1px;
+  --list-frame-radius: var(--radius);
+  --list-item-border: 0px;
+  --list-item-radius: 0px;
+  --list-item-bg: transparent;
+  --list-item-pad: var(--row-pad-y) var(--row-pad-x);
+  --list-item-direction: row;
+  --list-item-align: center;
+  --list-item-trail: auto;
+}
+
+/* Density: Cards, boxed items that flow into columns */
+[data-density="cards"] {
+  --row-pad-y: 0.9rem;
+  --row-pad-x: 1rem;
+  --stack-gap: 1rem;
+  --panel-pad: 1.25rem;
+  --list-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  --list-gap: var(--stack-gap);
+  --list-frame-border: 0px;
+  --list-frame-radius: 0px;
+  --list-item-border: 1px;
+  --list-item-radius: var(--radius);
+  --list-item-bg: var(--card);
+  --list-item-pad: var(--panel-pad);
+  --list-item-direction: column;
+  --list-item-align: stretch;
+  --list-item-trail: 0px;
+}
+
+/* Corners: 0px */
+[data-corners="0"] {
+  --radius: 0px;
+}
+
+/* Corners: 2px */
+[data-corners="2"] {
+  --radius: 2px;
+}
+
+/* Corners: 4px */
+[data-corners="4"] {
+  --radius: 4px;
+}
+
+/* Corners: 10px */
+[data-corners="10"] {
+  --radius: 10px;
+}
+
+/* Product: Astrolift AI */
+[data-product="astrolift"] {
+  --brand-sidebar: #04231a;
+}
+
+/* Product: Zentinelle AI */
+[data-product="zentinelle"] {
+  --brand-sidebar: #0b0b19;
+}
+
+/* Accent: Teal (Zentinelle AI, dark) */
+[data-mode="dark"][data-accent="teal"] {
+  --brand-primary: #37efed;
+  --brand-on-primary: #0b0b19;
+}
+
+/* Accent: Teal (Zentinelle AI, light) */
+[data-mode="light"][data-accent="teal"] {
+  --brand-primary: #0d7470;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Product: Calliope AI Workbench */
+[data-product="workbench"] {
+  --brand-sidebar: #0e1730;
+}
+
+/* Accent: Workbench blue (Calliope AI Workbench, dark) */
+[data-mode="dark"][data-accent="workbench-blue"] {
+  --brand-primary: #8fb8e8;
+  --brand-on-primary: #0b1120;
+}
+
+/* Accent: Workbench blue (Calliope AI Workbench, light) */
+[data-mode="light"][data-accent="workbench-blue"] {
+  --brand-primary: #2f5d94;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Product: Calliope AI Chat Studio */
+[data-product="chat-studio"] {
+  --brand-sidebar: #080808;
+}
+
+/* Accent: Studio blue (Calliope AI Chat Studio, dark) */
+[data-mode="dark"][data-accent="studio-blue"] {
+  --brand-primary: #8ab4f8;
+  --brand-on-primary: #0c0c0c;
+}
+
+/* Accent: Studio blue (Calliope AI Chat Studio, light) */
+[data-mode="light"][data-accent="studio-blue"] {
+  --brand-primary: #1d4ed8;
+  --brand-on-primary: #ffffff;
+}
+
+/* Product: Calliope AI Loadr */
+[data-product="loadr"] {
+  --brand-sidebar: #181825;
+}
+
+/* Accent: Loadr blue (Calliope AI Loadr, dark) */
+[data-mode="dark"][data-accent="loadr-blue"] {
+  --brand-primary: #89b4fa;
+  --brand-on-primary: #11111b;
+}
+
+/* Accent: Loadr blue (Calliope AI Loadr, light) */
+[data-mode="light"][data-accent="loadr-blue"] {
+  --brand-primary: #1e66f5;
+  --brand-on-primary: #ffffff;
+}
+
+/* Product: Cykick */
+[data-product="cykick"] {
+  --brand-sidebar: #07090e;
+}
+
+/* Accent: Cykick cyan (Cykick, dark) */
+[data-mode="dark"][data-accent="cykick-cyan"] {
+  --brand-primary: #22d3ee;
+  --brand-on-primary: #07090e;
+}
+
+/* Accent: Cykick cyan (Cykick, light) */
+[data-mode="light"][data-accent="cykick-cyan"] {
+  --brand-primary: #0e7490;
+  --brand-on-primary: #ffffff;
+}

package/dist/data/DefinitionList.d.ts

@@ -0,0 +1,16 @@
+import type * as React from "react";
+export interface Definition {
+    term: React.ReactNode;
+    /** Stable identity when `term` is not a string. */
+    key?: string;
+    /** `null` or `undefined` draws "Not set", so an empty field reads as empty. */
+    description: React.ReactNode | null | undefined;
+}
+export interface DefinitionListProps {
+    items: readonly Definition[];
+    /** Two columns of pairs on a wide page. */
+    columns?: 1 | 2;
+    className?: string;
+}
+/** The facts of a thing as term and value pairs, in hairline rows. */
+export declare function DefinitionList({ items, columns, className }: DefinitionListProps): React.JSX.Element;

package/dist/data/DefinitionList.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+/** The facts of a thing as term and value pairs, in hairline rows. */
+export function DefinitionList({ items, columns = 1, className }) {
+    const { messages } = useUI();
+    return (_jsx("dl", { "data-slot": "definition-list", className: cn("grid min-w-0 gap-x-8 text-sm", columns === 2 && "md:grid-cols-2", className), children: items.map((item, i) => (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5 border-b py-2 sm:flex-row sm:gap-4", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground sm:w-40", children: item.term }), _jsx("dd", { className: "min-w-0 [overflow-wrap:anywhere]", children: item.description ?? (_jsx("span", { className: "text-muted-foreground", children: messages.data.notSet })) })] }, item.key ?? (typeof item.term === "string" ? item.term : i)))) }));
+}

package/dist/data/Stat.d.ts

@@ -0,0 +1,25 @@
+import type * as React from "react";
+import type { StatusTone } from "../status/tones.js";
+export interface StatProps {
+    label: React.ReactNode;
+    /** The figure. `null` or `undefined` draws a dash: the server did not say. */
+    value: React.ReactNode | null | undefined;
+    /** One line under the figure: a unit, a comparison, a scope, a trend. */
+    hint?: React.ReactNode;
+    /** A status beside the label. Colour is never the only carrier, so the hint says why. */
+    tone?: StatusTone;
+    /** The list the figure counts. The whole tile is the link's target. */
+    href?: string;
+    loading?: boolean;
+    className?: string;
+}
+/**
+ * One figure with its label: the top row of an overview. Figures come from
+ * the server's aggregates, never from counting a fetched page.
+ */
+export declare function Stat({ label, value, hint, tone, href, loading, className }: StatProps): React.JSX.Element;
+/** Stats in a row that wraps: four across on a wide page, two on a narrow one. */
+export declare function StatGrid({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/data/Stat.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Skeleton } from "../primitives/Skeleton.js";
+import { useUI } from "../provider/UIProvider.js";
+import { StatusDot } from "../status/StatusDot.js";
+/**
+ * One figure with its label: the top row of an overview. Figures come from
+ * the server's aggregates, never from counting a fetched page.
+ */
+export function Stat({ label, value, hint, tone, href, loading = false, className }) {
+    const { Link, messages } = useUI();
+    const missing = value === null || value === undefined;
+    return (_jsxs("div", { "data-slot": "stat", "aria-busy": loading || undefined, className: cn("relative flex min-w-0 flex-col gap-1 rounded-lg border bg-card p-(--panel-pad) text-card-foreground", href && "transition-colors hover:border-ring", className), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2 text-sm text-muted-foreground", children: [tone && _jsx(StatusDot, { tone: tone }), href ? (_jsx(Link, { href: href, className: "truncate outline-none after:absolute after:inset-0 after:rounded-lg focus-visible:after:ring-2 focus-visible:after:ring-ring", children: label })) : (_jsx("span", { className: "truncate", children: label }))] }), loading ? (_jsx(Skeleton, { className: "h-7 w-16" })) : (_jsx("span", { className: "font-mono text-2xl font-semibold [overflow-wrap:anywhere] tabular-nums", children: missing ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "-" }), _jsx("span", { className: "sr-only", children: messages.data.noValue })] })) : (value) })), hint && !loading && (_jsx("span", { className: "text-xs [overflow-wrap:anywhere] text-muted-foreground", children: hint }))] }));
+}
+/** Stats in a row that wraps: four across on a wide page, two on a narrow one. */
+export function StatGrid({ children, className, }) {
+    return (_jsx("div", { className: cn("grid grid-cols-2 gap-(--stack-gap) lg:grid-cols-4", className), children: children }));
+}

package/dist/data/Tag.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+export interface TagProps {
+    children: React.ReactNode;
+    /** Shows a remove button. */
+    onRemove?: () => void;
+    /** The tag's name for the remove button, when `children` is not plain text. */
+    label?: string;
+    className?: string;
+}
+/**
+ * A neutral label on a thing: a topic, an owner, an environment. Not a
+ * status (StatusBadge is), so it never takes a status colour.
+ */
+export declare function Tag({ children, onRemove, label, className }: TagProps): React.JSX.Element;
+/** Tags in a row that wraps, as a list. */
+export declare function TagList({ children, label, className, }: {
+    children: React.ReactNode;
+    /** Names the list ("Topics"), when nothing beside it does. */
+    label?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/data/Tag.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * A neutral label on a thing: a topic, an owner, an environment. Not a
+ * status (StatusBadge is), so it never takes a status colour.
+ */
+export function Tag({ children, onRemove, label, className }) {
+    const { messages } = useUI();
+    const name = label ?? (typeof children === "string" ? children : "");
+    return (_jsxs("span", { "data-slot": "tag", className: cn("inline-flex h-5 max-w-full min-w-0 items-center gap-1 rounded-md border bg-secondary px-1.5 text-xs text-secondary-foreground", onRemove && "pr-0.5", className), children: [_jsx("span", { className: "truncate", children: children }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, "aria-label": messages.data.removeTag(name), className: "flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-foreground/10 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: _jsx(XIcon, { className: "size-3", "aria-hidden": true }) }))] }));
+}
+/** Tags in a row that wraps, as a list. */
+export function TagList({ children, label, className, }) {
+    return (_jsx("ul", { "aria-label": label, className: cn("flex min-w-0 flex-wrap gap-1", className), children: (Array.isArray(children) ? children : [children]).map((child, i) => child ? (_jsx("li", { className: "flex min-w-0", children: child }, i)) : null) }));
+}

package/dist/data/types.d.ts

@@ -28,8 +28,9 @@ export interface Column<TRow> {
     cellClassName?: string;
     /**
      * The server's sort key. Present, the header is a sort control; absent, a
-     * plain header. There is no client sort: reordering one page while the rest
-     * of the result set sits on the server is wrong at every page boundary.
+     * plain header. There is no client sort of a page: reordering one page while
+     * the rest of the result set sits on the server is wrong at every page
+     * boundary. Rows wholly in memory sort through `useLocalTable`'s `sortBy`.
      */
     sortKey?: string;
 }

package/dist/data/use-local-table.d.ts

@@ -0,0 +1,36 @@
+import { type SortState, type TableController } from "./types.js";
+/** A value a column sorts by. `null` and `undefined` sort last, whichever the direction. */
+export type SortValue = string | number | boolean | Date | null | undefined;
+export interface LocalTableOptions<TRow> {
+    /** How each `Column.sortKey` reads a row. A key with no accessor is not sortable. */
+    sortBy?: Readonly<Record<string, (row: TRow) => SortValue>>;
+    /** The sort before anyone chooses: one key, or the ordered keys of a multi-key sort. */
+    initialSort?: SortState | readonly SortState[];
+    /** The text the search box matches, case-insensitively. Absent, there is no search box. */
+    searchText?: (row: TRow) => string;
+    /**
+     * The app's own filters (a status chip, a toggle), already applied by the
+     * predicate. Present, the list counts as filtered: an empty result reads as
+     * "nothing matches", and "clear filters" calls `onClearFilters`.
+     */
+    filter?: (row: TRow) => boolean;
+    onClearFilters?: () => void;
+    /** Defaults to 25. */
+    pageSize?: number;
+    /** Defaults to 10, 25, 50 and 100. */
+    pageSizes?: readonly number[];
+    /** The rows are still arriving: the table shows its loading state. */
+    loading?: boolean;
+    /** The rows could not be had: the table shows its error state, with `retry`. */
+    error?: {
+        message: string;
+    } | null;
+    retry?: () => void;
+}
+/**
+ * A TableController over rows already in memory, for DataTable: search,
+ * the app's filters, sort and paging, all over the whole set, so a page
+ * boundary is never wrong. For a list the server pages, implement the
+ * controller over the server (Astrolift's `useCursorTable`) instead.
+ */
+export declare function useLocalTable<TRow>(rows: readonly TRow[], options?: LocalTableOptions<TRow>): TableController<TRow>;