harebear-ui 0.0.0-stage → 0.1.0

package/dist/components/admin/page-header.js

@@ -0,0 +1,41 @@
+"use client";
+import { Badge } from "../ui/badge.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/page-header.tsx
+/** Page title row with description and actions. Wraps on narrow screens. */
+function PageHeader({ title, description, count, actions, eyebrow, className, ...props }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "page-header",
+		className: cn("flex flex-wrap items-end justify-between gap-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1.5",
+			children: [
+				eyebrow && /* @__PURE__ */ jsx("p", {
+					className: "font-medium text-muted-foreground",
+					children: eyebrow
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-[28px] leading-tight font-semibold tracking-[-0.02em]",
+						children: title
+					}), count !== void 0 && /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "tabular-nums",
+						children: count
+					})]
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: description
+				})
+			]
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-2.5",
+			children: actions
+		})]
+	});
+}
+export { PageHeader };

package/dist/components/admin/search-input.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface SearchInputProps extends Omit<React.ComponentProps<"input">, "size"> {
+  /** Keyboard hint shown at the right, e.g. "⌘K" or "/". Display only. */
+  shortcut?: React.ReactNode;
+  /** "lg" is the tall, pill-shaped hero search. */
+  size?: "default" | "lg";
+  /** Classes for the wrapping label. */
+  wrapperClassName?: string;
+}
+/** Search field with leading icon and optional shortcut hint. */
+declare function SearchInput({ shortcut, size, className, wrapperClassName, "aria-label": ariaLabel, ...props }: SearchInputProps): React.JSX.Element;
+export { SearchInput };

package/dist/components/admin/search-input.js

@@ -0,0 +1,32 @@
+"use client";
+import { Input } from "../ui/input.js";
+import { Kbd } from "../ui/kbd.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+// src/components/admin/search-input.tsx
+/** Search field with leading icon and optional shortcut hint. */
+function SearchInput({ shortcut, size = "default", className, wrapperClassName, "aria-label": ariaLabel = "Search", ...props }) {
+	const lg = size === "lg";
+	return /* @__PURE__ */ jsxs("label", {
+		"data-slot": "search-input",
+		className: cn("relative block", wrapperClassName),
+		children: [
+			/* @__PURE__ */ jsx(SearchIcon, {
+				"aria-hidden": "true",
+				className: cn("pointer-events-none absolute top-1/2 size-[18px] -translate-y-1/2 text-muted-foreground", lg ? "left-5" : "left-3.5")
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				type: "search",
+				"aria-label": ariaLabel,
+				className: cn(lg ? "h-13.5 rounded-full border-border bg-card pl-13.5 text-[15px] shadow-card md:text-[15px]" : "pl-10.5", shortcut ? lg ? "pr-15" : "pr-13" : void 0, className),
+				...props
+			}),
+			shortcut && /* @__PURE__ */ jsx(Kbd, {
+				className: cn("absolute top-1/2 -translate-y-1/2", lg ? "right-4.5" : "right-2.5"),
+				children: shortcut
+			})
+		]
+	});
+}
+export { SearchInput };

package/dist/components/admin/stat-card.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface StatCardProps extends Omit<React.ComponentProps<"div">, "title"> {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  /** Change text, e.g. "12.4%" or "18 ms". */
+  delta?: React.ReactNode;
+  /** Arrow direction for the delta. */
+  trend?: "up" | "down";
+  /** Whether the change is good (green) or bad (red). Defaults to trend === "up". */
+  positive?: boolean;
+  /** Text after the delta, e.g. "vs last month". */
+  note?: React.ReactNode;
+  /** Icon element shown top-right in a tinted circle. */
+  icon?: React.ReactNode;
+  /** Optional sparkline series. */
+  data?: number[];
+}
+/** KPI tile: label, big number, delta badge, optional sparkline. */
+declare function StatCard({ label, value, delta, trend, positive, note, icon, data, className, ...props }: StatCardProps): React.JSX.Element;
+export { StatCard };

package/dist/components/admin/stat-card.js

@@ -0,0 +1,53 @@
+"use client";
+import { Badge } from "../ui/badge.js";
+import { Card } from "../ui/card.js";
+import { Sparkline } from "../data/sparkline.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownRightIcon, ArrowUpRightIcon } from "lucide-react";
+// src/components/admin/stat-card.tsx
+/** KPI tile: label, big number, delta badge, optional sparkline. */
+function StatCard({ label, value, delta, trend = "up", positive, note, icon, data, className, ...props }) {
+	const good = positive ?? trend === "up";
+	const Arrow = trend === "up" ? ArrowUpRightIcon : ArrowDownRightIcon;
+	return /* @__PURE__ */ jsxs(Card, {
+		"data-slot": "stat-card",
+		className: cn("gap-3.5 px-5.5 pt-5.5 pb-4.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-muted-foreground",
+					children: label
+				}), icon && /* @__PURE__ */ jsx("span", {
+					className: "grid size-8.5 shrink-0 place-items-center rounded-full bg-primary-soft text-primary [&_svg]:size-4",
+					children: icon
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-[30px] leading-none font-semibold tracking-[-0.02em] tabular-nums",
+				children: value
+			}),
+			(delta || note) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-[13px]",
+				children: [delta && /* @__PURE__ */ jsxs(Badge, {
+					variant: "secondary",
+					className: "gap-1 px-2",
+					children: [/* @__PURE__ */ jsx(Arrow, {
+						className: cn(good ? "text-success" : "text-destructive"),
+						strokeWidth: 2.2
+					}), /* @__PURE__ */ jsx("span", {
+						className: "tabular-nums",
+						children: delta
+					})]
+				}), note && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: note
+				})]
+			}),
+			data && data.length > 1 && /* @__PURE__ */ jsx(Sparkline, { data })
+		]
+	});
+}
+export { StatCard };

package/dist/components/admin/status.d.ts

@@ -0,0 +1,12 @@
+import { Badge } from "../ui/badge.js";
+import * as React from "react";
+export type StatusTone = "success" | "warning" | "danger" | "info" | "neutral";
+/** Small colored dot. Use for status, legends, and project markers. */
+declare function StatusDot({ tone, className, ...props }: React.ComponentProps<"span"> & {
+  tone?: StatusTone;
+}): React.JSX.Element;
+/** Pill with a status dot and label, e.g. Paid / Pending / Refunded. */
+declare function StatusBadge({ tone, variant, children, className, ...props }: React.ComponentProps<typeof Badge> & {
+  tone?: StatusTone;
+}): React.JSX.Element;
+export { StatusBadge, StatusDot };

package/dist/components/admin/status.js

@@ -0,0 +1,32 @@
+"use client";
+import { Badge } from "../ui/badge.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/status.tsx
+const toneColor = {
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-destructive",
+	info: "bg-primary",
+	neutral: "bg-muted-foreground"
+};
+/** Small colored dot. Use for status, legends, and project markers. */
+function StatusDot({ tone = "neutral", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "status-dot",
+		"aria-hidden": "true",
+		className: cn("inline-block size-2 shrink-0 rounded-full", toneColor[tone], className),
+		...props
+	});
+}
+/** Pill with a status dot and label, e.g. Paid / Pending / Refunded. */
+function StatusBadge({ tone = "neutral", variant = "secondary", children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Badge, {
+		"data-slot": "status-badge",
+		variant,
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsx(StatusDot, { tone }), children]
+	});
+}
+export { StatusBadge, StatusDot };

package/dist/components/admin/timeline.d.ts

@@ -0,0 +1,13 @@
+import { StatusTone } from "./status.js";
+import * as React from "react";
+export interface TimelineItem {
+  id?: string;
+  title: React.ReactNode;
+  time: React.ReactNode;
+  tone?: StatusTone;
+}
+/** Vertical event list with connecting rail. */
+declare function Timeline({ items, className, ...props }: Omit<React.ComponentProps<"ol">, "children"> & {
+  items: TimelineItem[];
+}): React.JSX.Element;
+export { Timeline };

package/dist/components/admin/timeline.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/timeline.tsx
+const dot = {
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-destructive",
+	info: "bg-primary",
+	neutral: "bg-muted-foreground"
+};
+/** Vertical event list with connecting rail. */
+function Timeline({ items, className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "timeline",
+		className: cn("flex flex-col", className),
+		...props,
+		children: items.map((t, i) => /* @__PURE__ */ jsxs("li", {
+			className: "flex gap-3.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex w-2.5 flex-col items-center pt-1.5",
+				children: [/* @__PURE__ */ jsx("span", { className: cn("size-2.5 shrink-0 rounded-full ring-3 ring-card", dot[t.tone ?? "info"]) }), i < items.length - 1 && /* @__PURE__ */ jsx("span", { className: "mt-1.5 mb-0.5 w-0.5 flex-1 rounded-full bg-chart-grid" })]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-px pb-4 text-[13px]",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: t.title
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: t.time
+				})]
+			})]
+		}, t.id ?? i))
+	});
+}
+export { Timeline };

package/dist/components/admin/usage-meter.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface UsageMeterProps extends Omit<React.ComponentProps<"div">, "children"> {
+  label: React.ReactNode;
+  /** 0-100. */
+  percent: number;
+  /** Bold value text at the right, e.g. "68%" or "34 GB". */
+  value?: React.ReactNode;
+  /** Muted text after the value, e.g. "of 50 GB". */
+  detail?: React.ReactNode;
+  /** Bar color (CSS color). Default primary. Use "var(--warning)" etc. for thresholds. */
+  color?: string;
+  /** Track color. Default muted. */
+  trackClassName?: string;
+}
+/** Label/value row over a rounded bar. For storage, quotas, traffic share, CPU. */
+declare function UsageMeter({ label, percent, value, detail, color, trackClassName, className, ...props }: UsageMeterProps): React.JSX.Element;
+export { UsageMeter };

package/dist/components/admin/usage-meter.js

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/usage-meter.tsx
+/** Label/value row over a rounded bar. For storage, quotas, traffic share, CPU. */
+function UsageMeter({ label, percent, value, detail, color, trackClassName, className, ...props }) {
+	const pct = Math.max(0, Math.min(100, percent));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "usage-meter",
+		className: cn("flex flex-col gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-3 text-[13px]",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: label
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "tabular-nums",
+				children: [value !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "font-semibold",
+					children: value
+				}), detail !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [" ", detail]
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "meter",
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": pct,
+			className: cn("h-2 overflow-hidden rounded-full bg-muted", trackClassName),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "block h-full rounded-full bg-primary transition-[width]",
+				style: {
+					width: `${pct}%`,
+					background: color
+				}
+			})
+		})]
+	});
+}
+export { UsageMeter };

package/dist/components/admin/user-chip.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+/** Up to two initials from a name: "Maya Chen" -> "MC". */
+export declare function initials(name: string): string;
+export interface UserChipProps extends React.ComponentProps<"div"> {
+  name: string;
+  subtitle?: React.ReactNode;
+  avatarUrl?: string;
+  /** Trailing control, e.g. a menu button. */
+  action?: React.ReactNode;
+  size?: "sm" | "default" | "lg";
+}
+/** Avatar + name + secondary line. */
+declare function UserChip({ name, subtitle, avatarUrl, action, size, className, ...props }: UserChipProps): React.JSX.Element;
+export { UserChip };

package/dist/components/admin/user-chip.js

@@ -0,0 +1,38 @@
+"use client";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/user-chip.tsx
+/** Up to two initials from a name: "Maya Chen" -> "MC". */
+function initials(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase()).join("");
+}
+/** Avatar + name + secondary line. */
+function UserChip({ name, subtitle, avatarUrl, action, size = "default", className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "user-chip",
+		className: cn("flex min-w-0 items-center gap-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(Avatar, {
+				size,
+				children: [avatarUrl && /* @__PURE__ */ jsx(AvatarImage, {
+					src: avatarUrl,
+					alt: ""
+				}), /* @__PURE__ */ jsx(AvatarFallback, { children: initials(name) })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1 leading-snug",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("truncate font-medium", size === "lg" && "text-lg font-semibold"),
+					children: name
+				}), subtitle && /* @__PURE__ */ jsx("div", {
+					className: "truncate text-xs font-medium text-muted-foreground",
+					children: subtitle
+				})]
+			}),
+			action
+		]
+	});
+}
+export { UserChip, initials };

package/dist/components/ai/chat.d.ts

@@ -0,0 +1,44 @@
+import { Badge } from "../ui/badge.js";
+import * as React from "react";
+export interface ChatThreadProps extends React.ComponentProps<"div"> {
+  /** Keep scrolled to the bottom as content grows, unless the user scrolled up. Default true. */
+  autoScroll?: boolean;
+  /** Classes for the centered inner column (max width 760px). */
+  contentClassName?: string;
+}
+/** Scrollable message column. Put ChatMessage children inside; give it a bounded height (flex-1 in a column). */
+declare function ChatThread({ autoScroll, className, contentClassName, children, ...props }: ChatThreadProps): React.JSX.Element;
+export interface ChatMessageProps extends React.ComponentProps<"div"> {
+  role: "user" | "assistant";
+  /** Assistant avatar. Defaults to a sparkle in a tinted circle. */
+  avatar?: React.ReactNode;
+  /** Rendered under assistant content, usually <MessageActions />. */
+  actions?: React.ReactNode;
+}
+/** One chat turn. User: right-aligned bubble. Assistant: avatar + free-flowing content. */
+declare function ChatMessage({ role, avatar, actions, className, children, ...props }: ChatMessageProps): React.JSX.Element;
+/** Tinted circle with an icon. Default assistant avatar. */
+declare function AssistantAvatar({ icon, className }: {
+  icon?: React.ReactNode;
+  className?: string;
+}): React.JSX.Element;
+export interface MessageActionsProps extends React.ComponentProps<"div"> {
+  /** Text copied by the copy button. Omit to hide it. */
+  copyText?: string;
+  onRegenerate?: () => void;
+  onFeedback?: (value: "up" | "down") => void;
+  /** Currently selected feedback, for a pressed state. */
+  feedback?: "up" | "down" | null;
+}
+/** Copy / regenerate / thumbs row under an assistant message. Add more buttons as children. */
+declare function MessageActions({ copyText, onRegenerate, onFeedback, feedback, className, children, ...props }: MessageActionsProps): React.JSX.Element;
+/** Three pulsing dots while the assistant is generating. */
+declare function TypingIndicator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export interface ToolCallProps extends React.ComponentProps<typeof Badge> {
+  /** "running" shows a spinner; "error" tints red. */
+  status?: "running" | "done" | "error";
+  icon?: React.ReactNode;
+}
+/** Outlined chip summarizing a tool call, e.g. "Read 2 notes from homelab/". */
+declare function ToolCall({ status, icon, className, children, ...props }: ToolCallProps): React.JSX.Element;
+export { AssistantAvatar, ChatMessage, ChatThread, MessageActions, ToolCall, TypingIndicator };

package/dist/components/ai/chat.js

@@ -0,0 +1,147 @@
+"use client";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { Spinner } from "../ui/spinner.js";
+import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon, RefreshCwIcon, SparklesIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
+// src/components/ai/chat.tsx
+/** Scrollable message column. Put ChatMessage children inside; give it a bounded height (flex-1 in a column). */
+function ChatThread({ autoScroll = true, className, contentClassName, children, ...props }) {
+	const ref = React.useRef(null);
+	const pinned = React.useRef(true);
+	React.useEffect(() => {
+		const el = ref.current;
+		if (!el || !autoScroll) return;
+		const inner = el.firstElementChild;
+		const stick = () => {
+			if (pinned.current) el.scrollTop = el.scrollHeight;
+		};
+		stick();
+		const ro = new ResizeObserver(stick);
+		if (inner) ro.observe(inner);
+		return () => ro.disconnect();
+	}, [autoScroll]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "chat-thread",
+		role: "log",
+		"aria-live": "polite",
+		onScroll: (e) => {
+			const el = e.currentTarget;
+			pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48;
+		},
+		className: cn("min-h-0 flex-1 overflow-y-auto px-6 pt-6 pb-2", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("mx-auto flex max-w-190 flex-col gap-9", contentClassName),
+			children
+		})
+	});
+}
+/** One chat turn. User: right-aligned bubble. Assistant: avatar + free-flowing content. */
+function ChatMessage({ role, avatar, actions, className, children, ...props }) {
+	if (role === "user") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-message",
+		"data-role": "user",
+		className: cn("flex justify-end", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "max-w-[80%] rounded-[calc(var(--radius-xl)*1.2)] rounded-br-sm bg-muted px-4.5 py-3 text-[15px] whitespace-pre-wrap",
+			children
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chat-message",
+		"data-role": "assistant",
+		className: cn("flex items-start gap-4", className),
+		...props,
+		children: [avatar ?? /* @__PURE__ */ jsx(AssistantAvatar, {}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-3.5",
+			children: [children, actions]
+		})]
+	});
+}
+/** Tinted circle with an icon. Default assistant avatar. */
+function AssistantAvatar({ icon = /* @__PURE__ */ jsx(SparklesIcon, {}), className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "assistant-avatar",
+		className: cn("grid size-8 shrink-0 place-items-center rounded-full bg-primary-soft text-primary [&_svg]:size-4", className),
+		children: icon
+	});
+}
+/** Copy / regenerate / thumbs row under an assistant message. Add more buttons as children. */
+function MessageActions({ copyText, onRegenerate, onFeedback, feedback, className, children, ...props }) {
+	const { copied, copy } = useCopyToClipboard();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-actions",
+		className: cn("-ml-2 flex gap-0.5", className),
+		...props,
+		children: [
+			copyText !== void 0 && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Copy response",
+				onClick: () => copy(copyText),
+				children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+			}),
+			onRegenerate && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Regenerate",
+				onClick: onRegenerate,
+				children: /* @__PURE__ */ jsx(RefreshCwIcon, {})
+			}),
+			onFeedback && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Good response",
+				"aria-pressed": feedback === "up",
+				className: "aria-pressed:text-primary",
+				onClick: () => onFeedback("up"),
+				children: /* @__PURE__ */ jsx(ThumbsUpIcon, {})
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Bad response",
+				"aria-pressed": feedback === "down",
+				className: "aria-pressed:text-primary",
+				onClick: () => onFeedback("down"),
+				children: /* @__PURE__ */ jsx(ThumbsDownIcon, {})
+			})] }),
+			children
+		]
+	});
+}
+/** Three pulsing dots while the assistant is generating. */
+function TypingIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "typing-indicator",
+		role: "status",
+		"aria-label": "Assistant is typing",
+		className: cn("flex gap-1.25 py-1", className),
+		...props,
+		children: [
+			0,
+			150,
+			300
+		].map((d) => /* @__PURE__ */ jsx("span", {
+			className: "inline-block size-1.5 animate-typing rounded-full bg-muted-foreground",
+			style: { animationDelay: `${d}ms` }
+		}, d))
+	});
+}
+/** Outlined chip summarizing a tool call, e.g. "Read 2 notes from homelab/". */
+function ToolCall({ status = "done", icon, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Badge, {
+		"data-slot": "tool-call",
+		"data-status": status,
+		variant: "outline",
+		className: cn("self-start bg-transparent text-muted-foreground", status === "error" && "border-destructive/40 text-destructive", className),
+		...props,
+		children: [status === "running" ? /* @__PURE__ */ jsx(Spinner, {}) : icon, children]
+	});
+}
+export { AssistantAvatar, ChatMessage, ChatThread, MessageActions, ToolCall, TypingIndicator };

package/dist/components/ai/code-block.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface CodeBlockProps extends Omit<React.ComponentProps<"div">, "children"> {
+  code: string;
+  /** Label shown top-left, e.g. "bash". */
+  language?: string;
+  /** Pre-highlighted content (e.g. from shiki). Falls back to plain `code`. */
+  children?: React.ReactNode;
+  /** Hide the copy button. */
+  hideCopy?: boolean;
+}
+/** Code panel with language label and copy button. No highlighter bundled; pass highlighted children if you have one. */
+declare function CodeBlock({ code, language, children, hideCopy, className, ...props }: CodeBlockProps): React.JSX.Element;
+/** Inline monospace span for commands and identifiers. */
+declare function InlineCode({ className, ...props }: React.ComponentProps<"code">): React.JSX.Element;
+/**
+ * Typography for long-form and model output. Styles plain HTML children
+ * (p, ul, ol, li, strong, a, code, pre, h1-h4, blockquote, table), so it works
+ * with react-markdown or any HTML renderer.
+ */
+declare function Prose({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { CodeBlock, InlineCode, Prose };

package/dist/components/ai/code-block.js

@@ -0,0 +1,53 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+// src/components/ai/code-block.tsx
+/** Code panel with language label and copy button. No highlighter bundled; pass highlighted children if you have one. */
+function CodeBlock({ code, language, children, hideCopy, className, ...props }) {
+	const { copied, copy } = useCopyToClipboard();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "code-block",
+		className: cn("overflow-hidden rounded-lg bg-muted", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-10 items-center justify-between pt-2 pr-2 pl-4.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-mono text-xs font-medium text-muted-foreground",
+				children: language
+			}), !hideCopy && /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => copy(code),
+				"aria-label": "Copy code",
+				children: [copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}), copied ? "Copied" : "Copy"]
+			})]
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "m-0 overflow-x-auto px-4.5 pt-1 pb-4.5 font-mono text-[13px] leading-[1.7]",
+			children: /* @__PURE__ */ jsx("code", { children: children ?? code })
+		})]
+	});
+}
+/** Inline monospace span for commands and identifiers. */
+function InlineCode({ className, ...props }) {
+	return /* @__PURE__ */ jsx("code", {
+		"data-slot": "inline-code",
+		className: cn("rounded-[6px] bg-muted px-1.5 py-0.5 font-mono text-[12.5px]", className),
+		...props
+	});
+}
+/**
+* Typography for long-form and model output. Styles plain HTML children
+* (p, ul, ol, li, strong, a, code, pre, h1-h4, blockquote, table), so it works
+* with react-markdown or any HTML renderer.
+*/
+function Prose({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "prose",
+		className: cn("flex flex-col gap-3.5 text-[15px] leading-[1.65] text-foreground", "[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-2 [&_ol]:pl-5.5", "[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-2 [&_ul]:pl-5.5", "[&_strong]:font-semibold [&_a]:text-primary [&_a]:underline-offset-4 hover:[&_a]:underline", "[&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold", "[&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground", "[&_:not(pre)>code]:rounded-[6px] [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[12.5px]", "[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-4.5 [&_pre]:font-mono [&_pre]:text-[13px]", "[&_table]:w-full [&_table]:text-sm [&_td]:border-b [&_td]:py-2 [&_th]:border-b [&_th]:py-2 [&_th]:text-left [&_th]:font-medium", className),
+		...props
+	});
+}
+export { CodeBlock, InlineCode, Prose };