@burtson-labs/ui 0.9.1 → 0.10.0

package/README.md

@@ -58,7 +58,7 @@ npx shadcn@latest add https://ui.burtson.ai/r/button.json
 
 ## <picture><source media="(prefers-color-scheme: dark)" srcset="https://icons.burtson.ai/svg-white/panel-grid.svg"/><img src="https://icons.burtson.ai/svg-black/panel-grid.svg" align="center" alt=""/></picture> Components
 
-Accordion · Alert · Alert Dialog · App Shell · Avatar · Badge · Breadcrumb · Button · Card · Checkbox · Collapsible · Combobox · Command · Context Menu · Copy Button · Dialog · Dropdown Menu · Editor Tabs · Empty State · Field · Icon Button · Input · Kbd · Label · Menubar · Navigation Menu · Onboarding Checklist · Page Header · Pagination · Popover · Progress · Radio Group · Reasoning · Resizable · Scroll Area · Secret Input · Select · Separator · Sheet · Skeleton · Slider · Spinner · Stat Card · Status · Steps · Switch · Table · Tabs · Textarea · Toast · Toaster · Toolbar · Tooltip · Tour · Tree View
+Accordion · Alert · Alert Dialog · App Shell · Attachment · Avatar · Badge · Breadcrumb · Button · Card · Checkbox · Collapsible · Combobox · Command · Connection Status · Context Menu · Copy Button · Data Table · Dialog · Dropdown Menu · Editor Tabs · Empty State · Field · Icon Button · Input · Kbd · Label · Menubar · Mobile Nav · Navigation Menu · Onboarding Checklist · Page Header · Pagination · Popover · Progress · Radio Group · Reasoning · Resizable · Scroll Area · Secret Input · Select · Separator · Sheet · Skeleton · Slider · Source · Spinner · Stat Card · Status · Steps · Switch · Table · Tabs · Textarea · Toast · Toaster · Toolbar · Tooltip · Tour · Tree View
 
 Live previews and code for each one are at [ui.burtson.ai](https://ui.burtson.ai/docs/components/button).
 

package/dist/components/attachment.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+/**
+ * Where a file is on its way into a message. The app owns the upload and the
+ * parsing; these components only show the state it reports.
+ */
+export type AttachmentState = 'queued' | 'uploading' | 'parsing' | 'ready' | 'failed';
+/** 1536 → "1.5 KB". */
+export declare function formatBytes(bytes: number): string;
+export interface AttachmentItemProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    name: string;
+    /** Bytes. */
+    size?: number;
+    state?: AttachmentState;
+    /** 0–100 while uploading or reading. Leave out for an indeterminate bar. */
+    progress?: number;
+    /** Why it failed, in words the person can act on. */
+    error?: string;
+    /** A thumbnail URL for images. */
+    preview?: string;
+    /** Replaces the file icon. */
+    icon?: React.ReactNode;
+    onRemove?: () => void;
+    onRetry?: () => void;
+    /** `chip` sits in a composer; `row` fills an upload list. */
+    layout?: 'chip' | 'row';
+}
+/**
+ * One attached file: name, size, state, progress, and remove/retry. State
+ * changes are announced politely; a failure says why.
+ */
+declare function AttachmentItem({ name, size, state, progress, error, preview, icon, onRemove, onRetry, layout, className, ...props }: AttachmentItemProps): React.JSX.Element;
+export interface AttachmentTrayProps extends React.ComponentProps<'div'> {
+    /** Accessible name for the list. */
+    label?: string;
+}
+/** Attachments waiting to send, in a row that scrolls sideways when full. */
+declare function AttachmentTray({ label, className, children, ...props }: AttachmentTrayProps): React.JSX.Element;
+export interface UploadQueueFile {
+    id: string;
+    name: string;
+    size?: number;
+    state: AttachmentState;
+    progress?: number;
+    error?: string;
+}
+export interface UploadQueueProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+    files: UploadQueueFile[];
+    title?: React.ReactNode;
+    onRemove?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    /** Shown when there are no files. */
+    empty?: React.ReactNode;
+}
+/** A list of uploads with a summary: "2 of 4 ready, 1 failed". */
+declare function UploadQueue({ files, title, onRemove, onRetry, empty, className, ...props }: UploadQueueProps): React.JSX.Element;
+export { AttachmentItem, AttachmentTray, UploadQueue };

package/dist/components/attachment.js

@@ -0,0 +1,176 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Progress } from "./progress.js";
+import { Spinner } from "./spinner.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import AlertCircle from "@burtson-labs/icons/react/alert-circle";
+import FileText from "@burtson-labs/icons/react/file-text";
+import RotateCw from "@burtson-labs/icons/react/rotate-cw";
+import X from "@burtson-labs/icons/react/x";
+//#region src/components/attachment.tsx
+var stateText = {
+	queued: "Waiting",
+	uploading: "Uploading",
+	parsing: "Reading",
+	ready: "Ready",
+	failed: "Failed"
+};
+/** 1536 → "1.5 KB". */
+function formatBytes(bytes) {
+	if (!Number.isFinite(bytes) || bytes < 0) return "";
+	if (bytes < 1024) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let value = bytes / 1024;
+	let unit = 0;
+	while (value >= 1024 && unit < units.length - 1) {
+		value /= 1024;
+		unit++;
+	}
+	return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+var InTray = React.createContext(false);
+/**
+* One attached file: name, size, state, progress, and remove/retry. State
+* changes are announced politely; a failure says why.
+*/
+function AttachmentItem({ name, size, state = "ready", progress, error, preview, icon, onRemove, onRetry, layout = "chip", className, ...props }) {
+	const inTray = React.useContext(InTray);
+	const busy = state === "uploading" || state === "parsing";
+	const failed = state === "failed";
+	const meta = [size !== void 0 ? formatBytes(size) : null, stateText[state]].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "attachment-item",
+		"data-state": state,
+		"data-layout": layout,
+		role: inTray ? "listitem" : void 0,
+		"aria-busy": busy || void 0,
+		className: cn("group/attachment relative flex min-w-0 items-center gap-2.5 rounded-md border bg-surface text-sm", layout === "chip" ? "w-60 max-w-full shrink-0 p-1.5 pr-1" : "w-full p-2.5", failed && "border-destructive/40 bg-destructive/5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("grid shrink-0 place-items-center overflow-hidden rounded-sm bg-muted text-muted-foreground [&_svg]:size-4", layout === "chip" ? "size-9" : "size-10"),
+				children: preview ? /* @__PURE__ */ jsx("img", {
+					src: preview,
+					alt: "",
+					className: "size-full object-cover"
+				}) : failed ? /* @__PURE__ */ jsx(AlertCircle, {
+					className: "text-destructive",
+					"aria-hidden": true
+				}) : busy ? /* @__PURE__ */ jsx(Spinner, {
+					className: "size-4",
+					role: "presentation",
+					"aria-hidden": true
+				}) : icon ?? /* @__PURE__ */ jsx(FileText, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 flex-1 gap-1",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate font-medium text-foreground",
+						title: name,
+						children: name
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						"aria-live": "polite",
+						className: cn("truncate text-xs", failed ? "text-destructive" : "text-muted-foreground"),
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "sr-only",
+							children: [name, ": "]
+						}), failed && error ? error : meta]
+					}),
+					busy && /* @__PURE__ */ jsx(Progress, {
+						value: progress,
+						"aria-label": `${stateText[state]} ${name}`,
+						className: "h-1"
+					})
+				]
+			}),
+			failed && onRetry && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": `Retry ${name}`,
+				title: "Retry",
+				onClick: onRetry,
+				children: /* @__PURE__ */ jsx(RotateCw, {})
+			}),
+			onRemove && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": `Remove ${name}`,
+				title: "Remove",
+				onClick: onRemove,
+				children: /* @__PURE__ */ jsx(X, {})
+			})
+		]
+	});
+}
+/** Attachments waiting to send, in a row that scrolls sideways when full. */
+function AttachmentTray({ label = "Attachments", className, children, ...props }) {
+	return /* @__PURE__ */ jsx(InTray.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "attachment-tray",
+			role: "list",
+			"aria-label": label,
+			className: cn("flex max-w-full gap-1.5 overflow-x-auto pb-0.5", className),
+			...props,
+			children
+		})
+	});
+}
+/** A list of uploads with a summary: "2 of 4 ready, 1 failed". */
+function UploadQueue({ files, title = "Uploads", onRemove, onRetry, empty, className, ...props }) {
+	const headingId = React.useId();
+	const ready = files.filter((f) => f.state === "ready").length;
+	const failed = files.filter((f) => f.state === "failed").length;
+	const summary = files.length ? `${ready} of ${files.length} ready${failed ? `, ${failed} failed` : ""}` : "";
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "upload-queue",
+		"aria-labelledby": headingId,
+		className: cn("grid gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-3",
+			children: [/* @__PURE__ */ jsx("h3", {
+				id: headingId,
+				className: "text-sm font-semibold",
+				children: title
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted-foreground tabular-nums",
+				children: summary
+			})]
+		}), files.length === 0 ? empty ? /* @__PURE__ */ jsx("div", {
+			className: "text-sm text-muted-foreground",
+			children: empty
+		}) : null : /* @__PURE__ */ jsx(InTray.Provider, {
+			value: true,
+			children: /* @__PURE__ */ jsx("div", {
+				role: "list",
+				"aria-labelledby": headingId,
+				className: "grid gap-1.5",
+				children: files.map((f) => /* @__PURE__ */ jsx(AttachmentItem, {
+					layout: "row",
+					name: f.name,
+					size: f.size,
+					state: f.state,
+					progress: f.progress,
+					error: f.error,
+					onRemove: onRemove ? () => onRemove(f.id) : void 0,
+					onRetry: onRetry ? () => onRetry(f.id) : void 0
+				}, f.id))
+			})
+		})]
+	});
+}
+//#endregion
+export { AttachmentItem, AttachmentTray, UploadQueue, formatBytes };
+
+//# sourceMappingURL=attachment.js.map

package/dist/components/attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.js","names":[],"sources":["../../src/components/attachment.tsx"],"sourcesContent":["import AlertCircle from '@burtson-labs/icons/react/alert-circle';\nimport FileText from '@burtson-labs/icons/react/file-text';\nimport RotateCw from '@burtson-labs/icons/react/rotate-cw';\nimport X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { Progress } from './progress';\nimport { Spinner } from './spinner';\n\n/**\n * Where a file is on its way into a message. The app owns the upload and the\n * parsing; these components only show the state it reports.\n */\nexport type AttachmentState = 'queued' | 'uploading' | 'parsing' | 'ready' | 'failed';\n\nconst stateText: Record<AttachmentState, string> = {\n  queued: 'Waiting',\n  uploading: 'Uploading',\n  parsing: 'Reading',\n  ready: 'Ready',\n  failed: 'Failed',\n};\n\n/** 1536 → \"1.5 KB\". */\nexport function formatBytes(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0) return '';\n  if (bytes < 1024) return `${bytes} B`;\n  const units = ['KB', 'MB', 'GB', 'TB'];\n  let value = bytes / 1024;\n  let unit = 0;\n  while (value >= 1024 && unit < units.length - 1) {\n    value /= 1024;\n    unit++;\n  }\n  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;\n}\n\nconst InTray = React.createContext(false);\n\nexport interface AttachmentItemProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  name: string;\n  /** Bytes. */\n  size?: number;\n  state?: AttachmentState;\n  /** 0–100 while uploading or reading. Leave out for an indeterminate bar. */\n  progress?: number;\n  /** Why it failed, in words the person can act on. */\n  error?: string;\n  /** A thumbnail URL for images. */\n  preview?: string;\n  /** Replaces the file icon. */\n  icon?: React.ReactNode;\n  onRemove?: () => void;\n  onRetry?: () => void;\n  /** `chip` sits in a composer; `row` fills an upload list. */\n  layout?: 'chip' | 'row';\n}\n\n/**\n * One attached file: name, size, state, progress, and remove/retry. State\n * changes are announced politely; a failure says why.\n */\nfunction AttachmentItem({\n  name,\n  size,\n  state = 'ready',\n  progress,\n  error,\n  preview,\n  icon,\n  onRemove,\n  onRetry,\n  layout = 'chip',\n  className,\n  ...props\n}: AttachmentItemProps) {\n  const inTray = React.useContext(InTray);\n  const busy = state === 'uploading' || state === 'parsing';\n  const failed = state === 'failed';\n  const meta = [size !== undefined ? formatBytes(size) : null, stateText[state]]\n    .filter(Boolean)\n    .join(' · ');\n  return (\n    <div\n      data-slot=\"attachment-item\"\n      data-state={state}\n      data-layout={layout}\n      role={inTray ? 'listitem' : undefined}\n      aria-busy={busy || undefined}\n      className={cn(\n        'group/attachment relative flex min-w-0 items-center gap-2.5 rounded-md border bg-surface text-sm',\n        layout === 'chip' ? 'w-60 max-w-full shrink-0 p-1.5 pr-1' : 'w-full p-2.5',\n        failed && 'border-destructive/40 bg-destructive/5',\n        className,\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          'grid shrink-0 place-items-center overflow-hidden rounded-sm bg-muted text-muted-foreground [&_svg]:size-4',\n          layout === 'chip' ? 'size-9' : 'size-10',\n        )}\n      >\n        {preview ? (\n          <img src={preview} alt=\"\" className=\"size-full object-cover\" />\n        ) : failed ? (\n          <AlertCircle className=\"text-destructive\" aria-hidden />\n        ) : busy ? (\n          <Spinner className=\"size-4\" role=\"presentation\" aria-hidden />\n        ) : (\n          (icon ?? <FileText aria-hidden />)\n        )}\n      </div>\n      <div className=\"grid min-w-0 flex-1 gap-1\">\n        <span className=\"truncate font-medium text-foreground\" title={name}>\n          {name}\n        </span>\n        <span\n          aria-live=\"polite\"\n          className={cn('truncate text-xs', failed ? 'text-destructive' : 'text-muted-foreground')}\n        >\n          <span className=\"sr-only\">{name}: </span>\n          {failed && error ? error : meta}\n        </span>\n        {busy && (\n          <Progress value={progress} aria-label={`${stateText[state]} ${name}`} className=\"h-1\" />\n        )}\n      </div>\n      {failed && onRetry && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label={`Retry ${name}`}\n          title=\"Retry\"\n          onClick={onRetry}\n        >\n          <RotateCw />\n        </Button>\n      )}\n      {onRemove && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label={`Remove ${name}`}\n          title=\"Remove\"\n          onClick={onRemove}\n        >\n          <X />\n        </Button>\n      )}\n    </div>\n  );\n}\n\nexport interface AttachmentTrayProps extends React.ComponentProps<'div'> {\n  /** Accessible name for the list. */\n  label?: string;\n}\n\n/** Attachments waiting to send, in a row that scrolls sideways when full. */\nfunction AttachmentTray({\n  label = 'Attachments',\n  className,\n  children,\n  ...props\n}: AttachmentTrayProps) {\n  return (\n    <InTray.Provider value={true}>\n      <div\n        data-slot=\"attachment-tray\"\n        role=\"list\"\n        aria-label={label}\n        className={cn('flex max-w-full gap-1.5 overflow-x-auto pb-0.5', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </InTray.Provider>\n  );\n}\n\nexport interface UploadQueueFile {\n  id: string;\n  name: string;\n  size?: number;\n  state: AttachmentState;\n  progress?: number;\n  error?: string;\n}\n\nexport interface UploadQueueProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n  files: UploadQueueFile[];\n  title?: React.ReactNode;\n  onRemove?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  /** Shown when there are no files. */\n  empty?: React.ReactNode;\n}\n\n/** A list of uploads with a summary: \"2 of 4 ready, 1 failed\". */\nfunction UploadQueue({\n  files,\n  title = 'Uploads',\n  onRemove,\n  onRetry,\n  empty,\n  className,\n  ...props\n}: UploadQueueProps) {\n  const headingId = React.useId();\n  const ready = files.filter((f) => f.state === 'ready').length;\n  const failed = files.filter((f) => f.state === 'failed').length;\n  const summary = files.length\n    ? `${ready} of ${files.length} ready${failed ? `, ${failed} failed` : ''}`\n    : '';\n  return (\n    <section\n      data-slot=\"upload-queue\"\n      aria-labelledby={headingId}\n      className={cn('grid gap-2', className)}\n      {...props}\n    >\n      <div className=\"flex items-baseline justify-between gap-3\">\n        <h3 id={headingId} className=\"text-sm font-semibold\">\n          {title}\n        </h3>\n        <span className=\"text-xs text-muted-foreground tabular-nums\">{summary}</span>\n      </div>\n      {files.length === 0 ? (\n        empty ? (\n          <div className=\"text-sm text-muted-foreground\">{empty}</div>\n        ) : null\n      ) : (\n        <InTray.Provider value={true}>\n          <div role=\"list\" aria-labelledby={headingId} className=\"grid gap-1.5\">\n            {files.map((f) => (\n              <AttachmentItem\n                key={f.id}\n                layout=\"row\"\n                name={f.name}\n                size={f.size}\n                state={f.state}\n                progress={f.progress}\n                error={f.error}\n                onRemove={onRemove ? () => onRemove(f.id) : undefined}\n                onRetry={onRetry ? () => onRetry(f.id) : undefined}\n              />\n            ))}\n          </div>\n        </InTray.Provider>\n      )}\n    </section>\n  );\n}\n\nexport { AttachmentItem, AttachmentTray, UploadQueue };\n"],"mappings":";;;;;;;;;;;AAkBA,IAAM,YAA6C;CACjD,QAAQ;CACR,WAAW;CACX,SAAS;CACT,OAAO;CACP,QAAQ;AACV;;AAGA,SAAgB,YAAY,OAAuB;CACjD,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,QAAQ,GAAG,OAAO;CACjD,IAAI,QAAQ,MAAM,OAAO,GAAG,MAAM;CAClC,MAAM,QAAQ;EAAC;EAAM;EAAM;EAAM;CAAI;CACrC,IAAI,QAAQ,QAAQ;CACpB,IAAI,OAAO;CACX,OAAO,SAAS,QAAQ,OAAO,MAAM,SAAS,GAAG;EAC/C,SAAS;EACT;CACF;CACA,OAAO,GAAG,QAAQ,KAAK,MAAM,QAAQ,CAAC,IAAI,KAAK,MAAM,KAAK,EAAE,GAAG,MAAM;AACvE;AAEA,IAAM,SAAS,MAAM,cAAc,KAAK;;;;;AAyBxC,SAAS,eAAe,EACtB,MACA,MACA,QAAQ,SACR,UACA,OACA,SACA,MACA,UACA,SACA,SAAS,QACT,WACA,GAAG,SACmB;CACtB,MAAM,SAAS,MAAM,WAAW,MAAM;CACtC,MAAM,OAAO,UAAU,eAAe,UAAU;CAChD,MAAM,SAAS,UAAU;CACzB,MAAM,OAAO,CAAC,SAAS,KAAA,IAAY,YAAY,IAAI,IAAI,MAAM,UAAU,MAAM,CAAC,CAC3E,OAAO,OAAO,CAAC,CACf,KAAK,KAAK;CACb,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,eAAa;EACb,MAAM,SAAS,aAAa,KAAA;EAC5B,aAAW,QAAQ,KAAA;EACnB,WAAW,GACT,oGACA,WAAW,SAAS,wCAAwC,gBAC5D,UAAU,0CACV,SACF;EACA,GAAI;EAZN,UAAA;GAcE,oBAAC,OAAD;IACE,WAAW,GACT,6GACA,WAAW,SAAS,WAAW,SACjC;IAEC,UAAA,UACC,oBAAC,OAAD;KAAK,KAAK;KAAS,KAAI;KAAG,WAAU;IAA0B,CAAA,IAC5D,SACF,oBAAC,aAAD;KAAa,WAAU;KAAmB,eAAA;IAAa,CAAA,IACrD,OACF,oBAAC,SAAD;KAAS,WAAU;KAAS,MAAK;KAAe,eAAA;IAAa,CAAA,IAE5D,QAAQ,oBAAC,UAAD,EAAU,eAAA,KAAa,CAAA;GAE/B,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MAAuC,OAAO;MAC3D,UAAA;KACG,CAAA;KACN,qBAAC,QAAD;MACE,aAAU;MACV,WAAW,GAAG,oBAAoB,SAAS,qBAAqB,uBAAuB;MAFzF,UAAA,CAIE,qBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CAA2B,MAAK,IAAQ;MACvC,CAAA,GAAA,UAAU,QAAQ,QAAQ,IACvB;;KACL,QACC,oBAAC,UAAD;MAAU,OAAO;MAAU,cAAY,GAAG,UAAU,OAAO,GAAG;MAAQ,WAAU;KAAO,CAAA;IAEtF;;GACJ,UAAU,WACT,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,cAAY,SAAS;IACrB,OAAM;IACN,SAAS;IAET,UAAA,oBAAC,UAAD,CAAW,CAAA;GACL,CAAA;GAET,YACC,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,cAAY,UAAU;IACtB,OAAM;IACN,SAAS;IAET,UAAA,oBAAC,GAAD,CAAI,CAAA;GACE,CAAA;EAEP;;AAET;;AAQA,SAAS,eAAe,EACtB,QAAQ,eACR,WACA,UACA,GAAG,SACmB;CACtB,OACE,oBAAC,OAAO,UAAR;EAAiB,OAAO;EACtB,UAAA,oBAAC,OAAD;GACE,aAAU;GACV,MAAK;GACL,cAAY;GACZ,WAAW,GAAG,kDAAkD,SAAS;GACzE,GAAI;GAEH;EACE,CAAA;CACU,CAAA;AAErB;;AAqBA,SAAS,YAAY,EACnB,OACA,QAAQ,WACR,UACA,SACA,OACA,WACA,GAAG,SACgB;CACnB,MAAM,YAAY,MAAM,MAAM;CAC9B,MAAM,QAAQ,MAAM,QAAQ,MAAM,EAAE,UAAU,OAAO,CAAC,CAAC;CACvD,MAAM,SAAS,MAAM,QAAQ,MAAM,EAAE,UAAU,QAAQ,CAAC,CAAC;CACzD,MAAM,UAAU,MAAM,SAClB,GAAG,MAAM,MAAM,MAAM,OAAO,QAAQ,SAAS,KAAK,OAAO,WAAW,OACpE;CACJ,OACE,qBAAC,WAAD;EACE,aAAU;EACV,mBAAiB;EACjB,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;EAJN,UAAA,CAME,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,MAAD;IAAI,IAAI;IAAW,WAAU;IAC1B,UAAA;GACC,CAAA,GACJ,oBAAC,QAAD;IAAM,WAAU;IAA8C,UAAA;GAAc,CAAA,CACzE;EACJ,CAAA,GAAA,MAAM,WAAW,IAChB,QACE,oBAAC,OAAD;GAAK,WAAU;GAAiC,UAAA;EAAW,CAAA,IACzD,OAEJ,oBAAC,OAAO,UAAR;GAAiB,OAAO;GACtB,UAAA,oBAAC,OAAD;IAAK,MAAK;IAAO,mBAAiB;IAAW,WAAU;IACpD,UAAA,MAAM,KAAK,MACV,oBAAC,gBAAD;KAEE,QAAO;KACP,MAAM,EAAE;KACR,MAAM,EAAE;KACR,OAAO,EAAE;KACT,UAAU,EAAE;KACZ,OAAO,EAAE;KACT,UAAU,iBAAiB,SAAS,EAAE,EAAE,IAAI,KAAA;KAC5C,SAAS,gBAAgB,QAAQ,EAAE,EAAE,IAAI,KAAA;IAC1C,GATM,EAAE,EASR,CACF;GACE,CAAA;EACU,CAAA,CAEZ;;AAEb"}

package/dist/components/combobox.js

@@ -1,8 +1,8 @@
 import { cn } from "../lib/utils.js";
+import { Spinner } from "./spinner.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { fieldClasses } from "./input.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
-import { Spinner } from "./spinner.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Check from "@burtson-labs/icons/react/check";

package/dist/components/connection-status.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+/**
+ * The host reports the state; these components only present it. `unknown`
+ * means nobody has checked yet and never reads as connected.
+ */
+export type ConnectionState = 'connected' | 'connecting' | 'reconnecting' | 'offline' | 'error' | 'unknown';
+export type SyncState = 'synced' | 'syncing' | 'pending' | 'offline' | 'error' | 'unknown';
+export interface ConnectionStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    state: ConnectionState;
+    /** Overrides the default text, e.g. "Connected to Ollama". */
+    label?: React.ReactNode;
+    /** More detail in a tooltip, e.g. the endpoint or last error. */
+    detail?: React.ReactNode;
+    /** Offered when offline or failed. */
+    onRetry?: () => void;
+}
+/** A dot and a word for a live connection: model provider, gateway, socket. */
+declare function ConnectionStatus({ state, label, detail, onRetry, ...props }: ConnectionStatusProps): React.JSX.Element;
+export interface SyncStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    state: SyncState;
+    /** When the last successful sync finished. */
+    lastSynced?: Date;
+    /** Changes waiting to go up. */
+    pendingCount?: number;
+    detail?: React.ReactNode;
+    /** Offered when sync failed. */
+    onRetry?: () => void;
+    /** Formats `lastSynced`; the default is the local time. */
+    formatTime?: (date: Date) => string;
+}
+/** Whether local changes have reached the server. */
+declare function SyncStatus({ state, lastSynced, pendingCount, detail, onRetry, formatTime, ...props }: SyncStatusProps): React.JSX.Element;
+export interface ConnectionBannerProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    state: ConnectionState;
+    /** What still works, e.g. "Messages you send will go out when you reconnect." */
+    description?: React.ReactNode;
+    onRetry?: () => void;
+}
+/**
+ * A full-width notice for connection trouble. It renders nothing while
+ * connected, connecting or unknown, so it can stay mounted.
+ */
+declare function ConnectionBanner({ state, description, onRetry, className, ...props }: ConnectionBannerProps): React.JSX.Element | null;
+export { ConnectionBanner, ConnectionStatus, SyncStatus };

package/dist/components/connection-status.js

@@ -0,0 +1,167 @@
+import { cn } from "../lib/utils.js";
+import { Alert, AlertDescription, AlertTitle } from "./alert.js";
+import { Button } from "./button.js";
+import { Status } from "./status.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import CloudOff from "@burtson-labs/icons/react/cloud-off";
+import WifiOff from "@burtson-labs/icons/react/wifi-off";
+//#region src/components/connection-status.tsx
+var connection = {
+	connected: {
+		text: "Connected",
+		tone: "success"
+	},
+	connecting: {
+		text: "Connecting",
+		tone: "info",
+		pulse: true
+	},
+	reconnecting: {
+		text: "Reconnecting",
+		tone: "warning",
+		pulse: true
+	},
+	offline: {
+		text: "Offline",
+		tone: "neutral"
+	},
+	error: {
+		text: "Connection failed",
+		tone: "danger"
+	},
+	unknown: {
+		text: "Status unknown",
+		tone: "neutral"
+	}
+};
+var sync = {
+	synced: {
+		text: "Synced",
+		tone: "success"
+	},
+	syncing: {
+		text: "Syncing",
+		tone: "info",
+		pulse: true
+	},
+	pending: {
+		text: "Changes not synced yet",
+		tone: "warning"
+	},
+	offline: {
+		text: "Offline, saved on this device",
+		tone: "neutral"
+	},
+	error: {
+		text: "Sync failed",
+		tone: "danger"
+	},
+	unknown: {
+		text: "Sync status unknown",
+		tone: "neutral"
+	}
+};
+function WithDetail({ detail, children }) {
+	if (!detail) return children;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: detail })] });
+}
+function StatusLine({ slot, state, text, tone, pulse, detail, onRetry, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": slot,
+		"data-state": state,
+		role: "status",
+		className: cn("inline-flex items-center gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(WithDetail, {
+			detail,
+			children: /* @__PURE__ */ jsxs(Status, {
+				status: tone,
+				pulse,
+				tabIndex: detail ? 0 : void 0,
+				className: "rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
+				children: [text, detail && typeof detail === "string" && /* @__PURE__ */ jsxs("span", {
+					className: "sr-only",
+					children: [". ", detail]
+				})]
+			})
+		}), onRetry && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "link",
+			size: "xs",
+			className: "h-auto px-0",
+			onClick: onRetry,
+			children: "Retry"
+		})]
+	});
+}
+/** A dot and a word for a live connection: model provider, gateway, socket. */
+function ConnectionStatus({ state, label, detail, onRetry, ...props }) {
+	const c = connection[state];
+	return /* @__PURE__ */ jsx(StatusLine, {
+		slot: "connection-status",
+		state,
+		text: label ?? c.text,
+		tone: c.tone,
+		pulse: c.pulse,
+		detail,
+		onRetry: state === "offline" || state === "error" ? onRetry : void 0,
+		...props
+	});
+}
+/** Whether local changes have reached the server. */
+function SyncStatus({ state, lastSynced, pendingCount, detail, onRetry, formatTime = (d) => d.toLocaleTimeString([], {
+	hour: "numeric",
+	minute: "2-digit"
+}), ...props }) {
+	const s = sync[state];
+	let text = s.text;
+	if (state === "synced" && lastSynced) text = `Synced ${formatTime(lastSynced)}`;
+	if (state === "pending" && pendingCount) text = `${pendingCount} ${pendingCount === 1 ? "change" : "changes"} not synced yet`;
+	return /* @__PURE__ */ jsx(StatusLine, {
+		slot: "sync-status",
+		state,
+		text,
+		tone: s.tone,
+		pulse: s.pulse,
+		detail,
+		onRetry: state === "error" ? onRetry : void 0,
+		...props
+	});
+}
+/**
+* A full-width notice for connection trouble. It renders nothing while
+* connected, connecting or unknown, so it can stay mounted.
+*/
+function ConnectionBanner({ state, description, onRetry, className, ...props }) {
+	if (state !== "offline" && state !== "error" && state !== "reconnecting") return null;
+	const title = state === "offline" ? "You are offline" : state === "reconnecting" ? "Reconnecting…" : "Could not connect";
+	return /* @__PURE__ */ jsxs(Alert, {
+		"data-slot": "connection-banner",
+		"data-state": state,
+		variant: state === "error" ? "destructive" : "warning",
+		className: cn("items-center", className),
+		...props,
+		children: [state === "offline" ? /* @__PURE__ */ jsx(WifiOff, { "aria-hidden": true }) : /* @__PURE__ */ jsx(CloudOff, { "aria-hidden": true }), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx(AlertTitle, { children: title }), description && /* @__PURE__ */ jsx(AlertDescription, { children: description })]
+			}), onRetry && state !== "reconnecting" && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				variant: "outline",
+				onClick: onRetry,
+				children: "Retry"
+			})]
+		})]
+	});
+}
+//#endregion
+export { ConnectionBanner, ConnectionStatus, SyncStatus };
+
+//# sourceMappingURL=connection-status.js.map

package/dist/components/connection-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-status.js","names":[],"sources":["../../src/components/connection-status.tsx"],"sourcesContent":["import CloudOff from '@burtson-labs/icons/react/cloud-off';\nimport WifiOff from '@burtson-labs/icons/react/wifi-off';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Alert, AlertDescription, AlertTitle } from './alert';\nimport { Button } from './button';\nimport { Status } from './status';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\ntype Tone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * The host reports the state; these components only present it. `unknown`\n * means nobody has checked yet and never reads as connected.\n */\nexport type ConnectionState =\n  'connected' | 'connecting' | 'reconnecting' | 'offline' | 'error' | 'unknown';\n\nconst connection: Record<ConnectionState, { text: string; tone: Tone; pulse?: boolean }> = {\n  connected: { text: 'Connected', tone: 'success' },\n  connecting: { text: 'Connecting', tone: 'info', pulse: true },\n  reconnecting: { text: 'Reconnecting', tone: 'warning', pulse: true },\n  offline: { text: 'Offline', tone: 'neutral' },\n  error: { text: 'Connection failed', tone: 'danger' },\n  unknown: { text: 'Status unknown', tone: 'neutral' },\n};\n\nexport type SyncState = 'synced' | 'syncing' | 'pending' | 'offline' | 'error' | 'unknown';\n\nconst sync: Record<SyncState, { text: string; tone: Tone; pulse?: boolean }> = {\n  synced: { text: 'Synced', tone: 'success' },\n  syncing: { text: 'Syncing', tone: 'info', pulse: true },\n  pending: { text: 'Changes not synced yet', tone: 'warning' },\n  offline: { text: 'Offline, saved on this device', tone: 'neutral' },\n  error: { text: 'Sync failed', tone: 'danger' },\n  unknown: { text: 'Sync status unknown', tone: 'neutral' },\n};\n\nfunction WithDetail({\n  detail,\n  children,\n}: {\n  detail?: React.ReactNode;\n  children: React.ReactElement;\n}) {\n  if (!detail) return children;\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent>{detail}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nfunction StatusLine({\n  slot,\n  state,\n  text,\n  tone,\n  pulse,\n  detail,\n  onRetry,\n  className,\n  ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n  slot: string;\n  state: string;\n  text: React.ReactNode;\n  tone: Tone;\n  pulse?: boolean;\n  detail?: React.ReactNode;\n  onRetry?: () => void;\n}) {\n  return (\n    <div\n      data-slot={slot}\n      data-state={state}\n      role=\"status\"\n      className={cn('inline-flex items-center gap-2', className)}\n      {...props}\n    >\n      <WithDetail detail={detail}>\n        <Status\n          status={tone}\n          pulse={pulse}\n          tabIndex={detail ? 0 : undefined}\n          className=\"rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n        >\n          {text}\n          {detail && typeof detail === 'string' && <span className=\"sr-only\">. {detail}</span>}\n        </Status>\n      </WithDetail>\n      {onRetry && (\n        <Button type=\"button\" variant=\"link\" size=\"xs\" className=\"h-auto px-0\" onClick={onRetry}>\n          Retry\n        </Button>\n      )}\n    </div>\n  );\n}\n\nexport interface ConnectionStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: ConnectionState;\n  /** Overrides the default text, e.g. \"Connected to Ollama\". */\n  label?: React.ReactNode;\n  /** More detail in a tooltip, e.g. the endpoint or last error. */\n  detail?: React.ReactNode;\n  /** Offered when offline or failed. */\n  onRetry?: () => void;\n}\n\n/** A dot and a word for a live connection: model provider, gateway, socket. */\nfunction ConnectionStatus({ state, label, detail, onRetry, ...props }: ConnectionStatusProps) {\n  const c = connection[state];\n  return (\n    <StatusLine\n      slot=\"connection-status\"\n      state={state}\n      text={label ?? c.text}\n      tone={c.tone}\n      pulse={c.pulse}\n      detail={detail}\n      onRetry={state === 'offline' || state === 'error' ? onRetry : undefined}\n      {...props}\n    />\n  );\n}\n\nexport interface SyncStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: SyncState;\n  /** When the last successful sync finished. */\n  lastSynced?: Date;\n  /** Changes waiting to go up. */\n  pendingCount?: number;\n  detail?: React.ReactNode;\n  /** Offered when sync failed. */\n  onRetry?: () => void;\n  /** Formats `lastSynced`; the default is the local time. */\n  formatTime?: (date: Date) => string;\n}\n\n/** Whether local changes have reached the server. */\nfunction SyncStatus({\n  state,\n  lastSynced,\n  pendingCount,\n  detail,\n  onRetry,\n  formatTime = (d) => d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }),\n  ...props\n}: SyncStatusProps) {\n  const s = sync[state];\n  let text = s.text;\n  if (state === 'synced' && lastSynced) text = `Synced ${formatTime(lastSynced)}`;\n  if (state === 'pending' && pendingCount)\n    text = `${pendingCount} ${pendingCount === 1 ? 'change' : 'changes'} not synced yet`;\n  return (\n    <StatusLine\n      slot=\"sync-status\"\n      state={state}\n      text={text}\n      tone={s.tone}\n      pulse={s.pulse}\n      detail={detail}\n      onRetry={state === 'error' ? onRetry : undefined}\n      {...props}\n    />\n  );\n}\n\nexport interface ConnectionBannerProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: ConnectionState;\n  /** What still works, e.g. \"Messages you send will go out when you reconnect.\" */\n  description?: React.ReactNode;\n  onRetry?: () => void;\n}\n\n/**\n * A full-width notice for connection trouble. It renders nothing while\n * connected, connecting or unknown, so it can stay mounted.\n */\nfunction ConnectionBanner({\n  state,\n  description,\n  onRetry,\n  className,\n  ...props\n}: ConnectionBannerProps) {\n  if (state !== 'offline' && state !== 'error' && state !== 'reconnecting') return null;\n  const title =\n    state === 'offline'\n      ? 'You are offline'\n      : state === 'reconnecting'\n        ? 'Reconnecting…'\n        : 'Could not connect';\n  return (\n    <Alert\n      data-slot=\"connection-banner\"\n      data-state={state}\n      variant={state === 'error' ? 'destructive' : 'warning'}\n      className={cn('items-center', className)}\n      {...props}\n    >\n      {state === 'offline' ? <WifiOff aria-hidden /> : <CloudOff aria-hidden />}\n      <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2\">\n        <div className=\"min-w-0\">\n          <AlertTitle>{title}</AlertTitle>\n          {description && <AlertDescription>{description}</AlertDescription>}\n        </div>\n        {onRetry && state !== 'reconnecting' && (\n          <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={onRetry}>\n            Retry\n          </Button>\n        )}\n      </div>\n    </Alert>\n  );\n}\n\nexport { ConnectionBanner, ConnectionStatus, SyncStatus };\n"],"mappings":"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"}

package/dist/components/data-table.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+export interface DataTableColumn<T> {
+    id: string;
+    header: React.ReactNode;
+    cell: (row: T) => React.ReactNode;
+    sortable?: boolean;
+    /** Right-aligned tabular figures. */
+    numeric?: boolean;
+    className?: string;
+}
+export type SortDirection = 'asc' | 'desc';
+export interface DataTableSort {
+    columnId: string;
+    direction: SortDirection;
+}
+export interface DataTableProps<T> extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** Required: what the table lists, e.g. "Workspace members". */
+    'aria-label': string;
+    columns: DataTableColumn<T>[];
+    /** The rows to show now: already sorted, filtered and paged by the app or server. */
+    rows: T[];
+    getRowId: (row: T) => string;
+    /** Names a row for screen readers ("Select Ada Lovelace"). Defaults to its id. */
+    getRowLabel?: (row: T) => string;
+    /** Controlled sort. A sortable header cycles ascending, descending, none. */
+    sort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    /** Controlled filter text; a search box appears when onFilterChange is set. */
+    filter?: string;
+    onFilterChange?: (value: string) => void;
+    filterPlaceholder?: string;
+    /** Controlled selection by row id; checkboxes appear when onSelectedChange is set. */
+    selected?: string[];
+    onSelectedChange?: (ids: string[]) => void;
+    /** Enter or a click on the row, e.g. open the record. */
+    onRowAction?: (row: T) => void;
+    /** Per-row controls in a trailing column, e.g. a DropdownMenu. */
+    rowActions?: (row: T) => React.ReactNode;
+    /** 1-based; Pagination appears when onPageChange is set. */
+    page?: number;
+    pageCount?: number;
+    onPageChange?: (page: number) => void;
+    /** e.g. "1–25 of 312". */
+    pageSummary?: React.ReactNode;
+    loading?: boolean;
+    /** A message shown in place of the rows. */
+    error?: React.ReactNode;
+    onRetry?: () => void;
+    /** Shown when there are no rows and nothing failed. */
+    empty?: React.ReactNode;
+    /** Extra controls beside the search box, e.g. filters or a bulk action. */
+    toolbar?: React.ReactNode;
+    density?: 'compact' | 'default';
+    stickyHeader?: boolean;
+}
+/**
+ * A table recipe for records: sort, search, select, page, and row actions,
+ * with loading, empty and error states. Fully controlled, so the data can
+ * come from a server; the table never reorders rows itself.
+ */
+declare function DataTable<T>({ 'aria-label': ariaLabel, columns, rows, getRowId, getRowLabel, sort, onSortChange, filter, onFilterChange, filterPlaceholder, selected, onSelectedChange, onRowAction, rowActions, page, pageCount, onPageChange, pageSummary, loading, error, onRetry, empty, toolbar, density, stickyHeader, className, ...props }: DataTableProps<T>): React.JSX.Element;
+export { DataTable };