@burtson-labs/ui 0.9.0 → 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":"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"}

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/composer.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 export interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {
-    /** Clears after success. Reject a returned promise to retain the draft. */
+    /**
+     * Clears after success. Reject a returned promise to retain the draft. The
+     * text can be empty when `attachmentCount` allows an attachment-only send.
+     */
     onSubmit: (text: string) => void | Promise<void>;
     onSubmitError?: (error: unknown) => void;
     submitErrorText?: string;
@@ -14,6 +17,13 @@ export interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSub
     placeholder?: string;
     /** Attachment chips or a file button, shown under the text. */
     attachments?: React.ReactNode;
+    /** Attachments ready to send. Above zero, an empty message can be sent. */
+    attachmentCount?: number;
+    /**
+     * Extra gate on sending, e.g. false while an attachment is still parsing.
+     * Unlike `disabled`, the person can keep typing.
+     */
+    canSubmit?: boolean;
     /** Extra controls left of the send button (model picker, tools). */
     actions?: React.ReactNode;
     label?: string;
@@ -22,7 +32,7 @@ export interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSub
  * The message box: grows with its text, Enter sends, Shift+Enter adds a
  * line, and it never sends mid-composition (IME input).
  */
-declare function Composer({ onSubmit, onSubmitError, submitErrorText, value: controlled, onValueChange, streaming, onStop, disabled, placeholder, attachments, actions, label, className, ...props }: ComposerProps): React.JSX.Element;
+declare function Composer({ onSubmit, onSubmitError, submitErrorText, value: controlled, onValueChange, streaming, onStop, disabled, placeholder, attachments, attachmentCount, canSubmit, actions, label, className, ...props }: ComposerProps): React.JSX.Element;
 export interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {
     items: string[];
     onSelect: (item: string) => void;

package/dist/components/composer.js

@@ -9,7 +9,7 @@ import Square from "@burtson-labs/icons/react/square";
 * The message box: grows with its text, Enter sends, Shift+Enter adds a
 * line, and it never sends mid-composition (IME input).
 */
-function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could not be sent. Your draft is saved here. Try again.", value: controlled, onValueChange, streaming = false, onStop, disabled = false, placeholder = "Ask anything…", attachments, actions, label = "Message", className, ...props }) {
+function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could not be sent. Your draft is saved here. Try again.", value: controlled, onValueChange, streaming = false, onStop, disabled = false, placeholder = "Ask anything…", attachments, attachmentCount = 0, canSubmit = true, actions, label = "Message", className, ...props }) {
 	const [own, setOwn] = React.useState("");
 	const value = controlled ?? own;
 	const [pending, setPending] = React.useState(false);
@@ -31,7 +31,7 @@ function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could no
 		if (controlled === void 0) setOwn(v);
 		onValueChange?.(v);
 	};
-	const canSend = !disabled && !streaming && !pending && value.trim().length > 0;
+	const canSend = canSubmit && !disabled && !streaming && !pending && (value.trim().length > 0 || attachmentCount > 0);
 	const send = async () => {
 		if (!canSend || sending.current) return;
 		const draft = value;

package/dist/components/composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"composer.js","names":[],"sources":["../../src/components/composer.tsx"],"sourcesContent":["import ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport Square from '@burtson-labs/icons/react/square';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\n\nexport interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {\n  /** Clears after success. Reject a returned promise to retain the draft. */\n  onSubmit: (text: string) => void | Promise<void>;\n  onSubmitError?: (error: unknown) => void;\n  submitErrorText?: string;\n  /** Controlled value; leave out to let the composer keep its own. */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  /** While a reply streams, the send button becomes Stop. */\n  streaming?: boolean;\n  onStop?: () => void;\n  disabled?: boolean;\n  placeholder?: string;\n  /** Attachment chips or a file button, shown under the text. */\n  attachments?: React.ReactNode;\n  /** Extra controls left of the send button (model picker, tools). */\n  actions?: React.ReactNode;\n  label?: string;\n}\n\n/**\n * The message box: grows with its text, Enter sends, Shift+Enter adds a\n * line, and it never sends mid-composition (IME input).\n */\nfunction Composer({\n  onSubmit,\n  onSubmitError,\n  submitErrorText = 'Message could not be sent. Your draft is saved here. Try again.',\n  value: controlled,\n  onValueChange,\n  streaming = false,\n  onStop,\n  disabled = false,\n  placeholder = 'Ask anything…',\n  attachments,\n  actions,\n  label = 'Message',\n  className,\n  ...props\n}: ComposerProps) {\n  const [own, setOwn] = React.useState('');\n  const value = controlled ?? own;\n  const [pending, setPending] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const sending = React.useRef(false);\n  const latest = React.useRef(value);\n  const mounted = React.useRef(true);\n  const errorId = React.useId();\n  React.useEffect(() => {\n    latest.current = value;\n  }, [value]);\n  React.useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const setValue = (v: string) => {\n    if (controlled === undefined) setOwn(v);\n    onValueChange?.(v);\n  };\n  const canSend = !disabled && !streaming && !pending && value.trim().length > 0;\n  const send = async () => {\n    if (!canSend || sending.current) return;\n    const draft = value;\n    sending.current = true;\n    setFailed(false);\n    setPending(true);\n    try {\n      await onSubmit(draft.trim());\n      if (mounted.current && latest.current === draft) setValue('');\n    } catch (error) {\n      if (mounted.current) setFailed(true);\n      onSubmitError?.(error);\n    } finally {\n      sending.current = false;\n      if (mounted.current) setPending(false);\n    }\n  };\n\n  return (\n    <form\n      data-slot=\"composer\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        void send();\n      }}\n      className={cn(\n        'grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] focus-within:border-brand focus-within:ring-[3px] focus-within:ring-ring/15 dark:bg-surface-raised',\n        disabled && 'opacity-60',\n        className,\n      )}\n      {...props}\n    >\n      <textarea\n        aria-label={label}\n        rows={1}\n        value={value}\n        disabled={disabled || pending}\n        aria-describedby={failed ? errorId : undefined}\n        aria-invalid={failed || undefined}\n        placeholder={placeholder}\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={(e) => {\n          if (\n            e.key === 'Enter' &&\n            !e.shiftKey &&\n            !e.nativeEvent.isComposing &&\n            e.nativeEvent.keyCode !== 229\n          ) {\n            e.preventDefault();\n            void send();\n          }\n        }}\n        className=\"field-sizing-content max-h-48 min-h-9 w-full resize-none bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n      />\n      {failed && (\n        <p id={errorId} role=\"alert\" className=\"px-2 text-sm text-destructive\">\n          {submitErrorText}\n        </p>\n      )}\n      {attachments && <div className=\"flex flex-wrap gap-1.5 px-1\">{attachments}</div>}\n      <div className=\"flex items-center gap-1\">\n        {actions}\n        <div className=\"ml-auto\">\n          {streaming ? (\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"secondary\"\n              aria-label=\"Stop\"\n              onClick={onStop}\n              disabled={!onStop || disabled}\n            >\n              <Square className=\"fill-current\" />\n            </Button>\n          ) : (\n            <Button\n              type=\"submit\"\n              size=\"icon-sm\"\n              aria-label=\"Send\"\n              loading={pending}\n              disabled={!canSend}\n            >\n              <ArrowUp />\n            </Button>\n          )}\n        </div>\n      </div>\n    </form>\n  );\n}\n\nexport interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {\n  items: string[];\n  onSelect: (item: string) => void;\n}\n\n/** Starter prompts as chips. */\nfunction Suggestions({ items, onSelect, className, ...props }: SuggestionsProps) {\n  return (\n    <div\n      data-slot=\"suggestions\"\n      role=\"group\"\n      aria-label=\"Suggestions\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {items.map((item) => (\n        <button\n          key={item}\n          type=\"button\"\n          onClick={() => onSelect(item)}\n          className=\"animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground outline-none transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n        >\n          {item}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport { Composer, Suggestions };\n"],"mappings":"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"}
+{"version":3,"file":"composer.js","names":[],"sources":["../../src/components/composer.tsx"],"sourcesContent":["import ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport Square from '@burtson-labs/icons/react/square';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\n\nexport interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {\n  /**\n   * Clears after success. Reject a returned promise to retain the draft. The\n   * text can be empty when `attachmentCount` allows an attachment-only send.\n   */\n  onSubmit: (text: string) => void | Promise<void>;\n  onSubmitError?: (error: unknown) => void;\n  submitErrorText?: string;\n  /** Controlled value; leave out to let the composer keep its own. */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  /** While a reply streams, the send button becomes Stop. */\n  streaming?: boolean;\n  onStop?: () => void;\n  disabled?: boolean;\n  placeholder?: string;\n  /** Attachment chips or a file button, shown under the text. */\n  attachments?: React.ReactNode;\n  /** Attachments ready to send. Above zero, an empty message can be sent. */\n  attachmentCount?: number;\n  /**\n   * Extra gate on sending, e.g. false while an attachment is still parsing.\n   * Unlike `disabled`, the person can keep typing.\n   */\n  canSubmit?: boolean;\n  /** Extra controls left of the send button (model picker, tools). */\n  actions?: React.ReactNode;\n  label?: string;\n}\n\n/**\n * The message box: grows with its text, Enter sends, Shift+Enter adds a\n * line, and it never sends mid-composition (IME input).\n */\nfunction Composer({\n  onSubmit,\n  onSubmitError,\n  submitErrorText = 'Message could not be sent. Your draft is saved here. Try again.',\n  value: controlled,\n  onValueChange,\n  streaming = false,\n  onStop,\n  disabled = false,\n  placeholder = 'Ask anything…',\n  attachments,\n  attachmentCount = 0,\n  canSubmit = true,\n  actions,\n  label = 'Message',\n  className,\n  ...props\n}: ComposerProps) {\n  const [own, setOwn] = React.useState('');\n  const value = controlled ?? own;\n  const [pending, setPending] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const sending = React.useRef(false);\n  const latest = React.useRef(value);\n  const mounted = React.useRef(true);\n  const errorId = React.useId();\n  React.useEffect(() => {\n    latest.current = value;\n  }, [value]);\n  React.useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const setValue = (v: string) => {\n    if (controlled === undefined) setOwn(v);\n    onValueChange?.(v);\n  };\n  const canSend =\n    canSubmit &&\n    !disabled &&\n    !streaming &&\n    !pending &&\n    (value.trim().length > 0 || attachmentCount > 0);\n  const send = async () => {\n    if (!canSend || sending.current) return;\n    const draft = value;\n    sending.current = true;\n    setFailed(false);\n    setPending(true);\n    try {\n      await onSubmit(draft.trim());\n      if (mounted.current && latest.current === draft) setValue('');\n    } catch (error) {\n      if (mounted.current) setFailed(true);\n      onSubmitError?.(error);\n    } finally {\n      sending.current = false;\n      if (mounted.current) setPending(false);\n    }\n  };\n\n  return (\n    <form\n      data-slot=\"composer\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        void send();\n      }}\n      className={cn(\n        'grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] focus-within:border-brand focus-within:ring-[3px] focus-within:ring-ring/15 dark:bg-surface-raised',\n        disabled && 'opacity-60',\n        className,\n      )}\n      {...props}\n    >\n      <textarea\n        aria-label={label}\n        rows={1}\n        value={value}\n        disabled={disabled || pending}\n        aria-describedby={failed ? errorId : undefined}\n        aria-invalid={failed || undefined}\n        placeholder={placeholder}\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={(e) => {\n          if (\n            e.key === 'Enter' &&\n            !e.shiftKey &&\n            !e.nativeEvent.isComposing &&\n            e.nativeEvent.keyCode !== 229\n          ) {\n            e.preventDefault();\n            void send();\n          }\n        }}\n        className=\"field-sizing-content max-h-48 min-h-9 w-full resize-none bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n      />\n      {failed && (\n        <p id={errorId} role=\"alert\" className=\"px-2 text-sm text-destructive\">\n          {submitErrorText}\n        </p>\n      )}\n      {attachments && <div className=\"flex flex-wrap gap-1.5 px-1\">{attachments}</div>}\n      <div className=\"flex items-center gap-1\">\n        {actions}\n        <div className=\"ml-auto\">\n          {streaming ? (\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"secondary\"\n              aria-label=\"Stop\"\n              onClick={onStop}\n              disabled={!onStop || disabled}\n            >\n              <Square className=\"fill-current\" />\n            </Button>\n          ) : (\n            <Button\n              type=\"submit\"\n              size=\"icon-sm\"\n              aria-label=\"Send\"\n              loading={pending}\n              disabled={!canSend}\n            >\n              <ArrowUp />\n            </Button>\n          )}\n        </div>\n      </div>\n    </form>\n  );\n}\n\nexport interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {\n  items: string[];\n  onSelect: (item: string) => void;\n}\n\n/** Starter prompts as chips. */\nfunction Suggestions({ items, onSelect, className, ...props }: SuggestionsProps) {\n  return (\n    <div\n      data-slot=\"suggestions\"\n      role=\"group\"\n      aria-label=\"Suggestions\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {items.map((item) => (\n        <button\n          key={item}\n          type=\"button\"\n          onClick={() => onSelect(item)}\n          className=\"animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground outline-none transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n        >\n          {item}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport { Composer, Suggestions };\n"],"mappings":"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"}

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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"}