@fx-/chat-shadcn 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,143 @@
+import { ClassValue } from "clsx";
+import { ActivityItem, ActivitySummaryProps, ChatClassNames, ChatComponents, CodeBlockProps, IconComponent, IconRegistry, JsonViewProps, MarkdownProps, MessageDetailsProps } from "@fx-/chat";
+import { ButtonHTMLAttributes, ComponentPropsWithoutRef, FC, ForwardRefExoticComponent, HTMLAttributes, JSX, RefAttributes } from "react";
+import { Drawer as Drawer$1, Portal } from "vaul";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { VariantProps } from "class-variance-authority";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { ClassProp } from "class-variance-authority/types";
+import { DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogOverlayProps, DialogTitleProps } from "@radix-ui/react-dialog";
+
+//#region src/class-names.d.ts
+/** Options for {@link createShadcnClassNames}. */
+interface ShadcnClassNamesOptions {
+    /**
+     * Touch-first sizing: disclosure rows are 40px tall with 14px text, the size
+     * of the answer text (the row header is the tap target), instead of 28px with 12px text. Pair it with
+     * `createShadcnComponents({ touch: true })`. Default false.
+     */
+    touch?: boolean;
+}
+/**
+* Build the shadcn `classNames` theme, tuned by `options`.
+*
+* Every disclosure row — static (the pending "Starting…"), collapsible
+* (reasoning, tool) and a group's summary — has the same header height, and a
+* static row reserves the caret's width, so a live row changing kind keeps its
+* label in place. Row bodies indent to the label.
+*/
+declare function createShadcnClassNames({ touch, }?: ShadcnClassNamesOptions): ChatClassNames;
+/** The desktop (pointer-first) theme. */
+declare const shadcnClassNames: ChatClassNames;
+
+//#endregion
+//#region src/cn.d.ts
+declare function cn(...inputs: ClassValue[]): string;
+
+//#endregion
+//#region src/code.d.ts
+declare function CodeBlock({ code, language, className }: CodeBlockProps): JSX.Element;
+declare function JsonView({ value, className }: JsonViewProps): JSX.Element;
+
+//#endregion
+//#region src/icons.d.ts
+/** The full lucide icon registry, one component per {@link IconName}. */
+declare const lucideIcons: IconRegistry;
+
+//#endregion
+//#region src/markdown.d.ts
+declare function MarkdownView({ content, streaming }: MarkdownProps): JSX.Element;
+
+//#endregion
+//#region src/activity-tiles.d.ts
+/** The small text inside a tile: a live rate, the time so far or taken, a plan's progress. */
+declare function tileText(item: ActivityItem, now: number): string | undefined;
+declare function createActivityTiles(toolIcons?: Record<string, IconComponent>): ({ items, live, onActivate }: ActivitySummaryProps) => JSX.Element;
+
+//#endregion
+//#region src/message-details.d.ts
+declare function MessageDetailsSheet({ open, onOpenChange, details, outcome, copyText, actions, activity, focusId, }: MessageDetailsProps): JSX.Element;
+
+//#endregion
+//#region src/registry.d.ts
+interface ShadcnComponentsOptions {
+    /** Tooltip open delay in ms. Default 150. */
+    tooltipDelay?: number;
+    /**
+     * How long the copy button shows its "copied" check, in ms. `0` keeps it
+     * until the button remounts. Default 1500.
+     */
+    copyResetMs?: number;
+    /**
+     * Touch-first tuning: disclosure triggers drop their hover tint (touch has
+     * no hover); row height comes from the classNames theme
+     * (`createShadcnClassNames({ touch: true })`); a compact footer's "…" opens
+     * the message's details and actions in a bottom sheet instead of revealing
+     * them inline, and activity shown as a summary renders as tiles. Icon-only
+     * buttons always get a 44×44 target. Default false.
+     */
+    touch?: boolean;
+    /** Icons for tool calls by tool name (activity tiles); others get the wrench. */
+    toolIcons?: Record<string, IconComponent>;
+}
+/** Build the shadcn registry, tuned by `options`. */
+declare function createShadcnComponents({ tooltipDelay, copyResetMs, touch, toolIcons, }?: ShadcnComponentsOptions): ChatComponents;
+/** The shadcn registry with default (pointer-first) tuning. */
+declare const shadcnComponents: ChatComponents;
+
+//#endregion
+//#region src/ui/avatar.d.ts
+declare const Avatar: ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & RefAttributes<HTMLSpanElement>, "ref"> & RefAttributes<HTMLSpanElement>>;
+declare const AvatarFallback: ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & RefAttributes<HTMLSpanElement>, "ref"> & RefAttributes<HTMLSpanElement>>;
+
+//#endregion
+//#region src/ui/badge.d.ts
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | null | undefined;
+} & ClassProp) | undefined) => string;
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): JSX.Element;
+
+//#endregion
+//#region src/ui/button.d.ts
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "ghost" | "outline" | null | undefined;
+    size?: "default" | "sm" | "icon" | "icon-sm" | null | undefined;
+} & ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+}
+declare function Button({ className, variant, size, type, ...props }: ButtonProps): JSX.Element;
+
+//#endregion
+//#region src/ui/collapsible.d.ts
+declare const Collapsible: ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & RefAttributes<HTMLDivElement>>;
+
+//#endregion
+//#region src/ui/drawer.d.ts
+declare const Drawer: ({ shouldScaleBackground, ...props }: ComponentPropsWithoutRef<typeof Drawer$1.Root>) => JSX.Element;
+declare const DrawerPortal: typeof Portal;
+declare const DrawerClose: ForwardRefExoticComponent<DialogCloseProps & RefAttributes<HTMLButtonElement>>;
+declare const DrawerOverlay: ForwardRefExoticComponent<Omit<Omit<DialogOverlayProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: ForwardRefExoticComponent<Omit<Omit<Omit<DialogContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>, "ref">, "ref"> & RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+declare const DrawerTitle: ForwardRefExoticComponent<Omit<DialogTitleProps & RefAttributes<HTMLHeadingElement>, "ref"> & RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: ForwardRefExoticComponent<Omit<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>, "ref"> & RefAttributes<HTMLParagraphElement>>;
+
+//#endregion
+//#region src/ui/scroll-area.d.ts
+declare const ScrollArea: ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+
+//#endregion
+//#region src/ui/tooltip.d.ts
+declare const TooltipProvider: FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: ForwardRefExoticComponent<Omit<Omit<TooltipPrimitive.TooltipContentProps & RefAttributes<HTMLDivElement>, "ref">, "ref"> & RefAttributes<HTMLDivElement>>;
+
+//#endregion
+export { Avatar, AvatarFallback, Badge, BadgeProps, Button, ButtonProps, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, JsonView, MarkdownView, MessageDetailsSheet, ScrollArea, ShadcnClassNamesOptions, ShadcnComponentsOptions, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createActivityTiles, createShadcnClassNames, createShadcnComponents, lucideIcons, shadcnClassNames, shadcnComponents, tileText };

package/dist/index.js

@@ -0,0 +1,741 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AudioLines, Brain, Check, ChevronDown, ChevronRight, Copy, Download, FileText, GitFork, ImageOff, Info, ListChecks, Loader2, Maximize2, MoreHorizontal, Paperclip, RefreshCw, RotateCcw, SendHorizontal, Settings, Square, Video, Wrench, X } from "lucide-react";
+import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { formatDuration, formatTokensPerSecond } from "@fx-/chat";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Drawer as Drawer$1 } from "vaul";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cva } from "class-variance-authority";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+//#region src/cn.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+//#region src/tile.ts
+/**
+* The one tile size on touch: activity tiles, the footer's activity facts and
+* its icon buttons are all 44px squares with a 16px icon and 10px text inside.
+*/
+const TILE = "inline-flex size-11 shrink-0 flex-col items-center justify-center gap-1 rounded-lg bg-muted text-[0.625rem] leading-none tabular-nums text-muted-foreground";
+/** A tile's icon. */
+const TILE_ICON = "size-4 shrink-0";
+
+//#endregion
+//#region src/class-names.ts
+/**
+* Build the shadcn `classNames` theme, tuned by `options`.
+*
+* Every disclosure row — static (the pending "Starting…"), collapsible
+* (reasoning, tool) and a group's summary — has the same header height, and a
+* static row reserves the caret's width, so a live row changing kind keeps its
+* label in place. Row bodies indent to the label.
+*/
+function createShadcnClassNames({ touch = false } = {}) {
+	const rowText = touch ? "text-sm" : "text-xs";
+	const metricText = touch ? "text-[0.8125rem]" : "text-xs";
+	return {
+		log: "flex flex-col gap-3 data-[minimal=true]:gap-[0.625rem] text-foreground",
+		message: "group/msg flex flex-col gap-1.5 data-[minimal=true]:gap-[3px] text-foreground",
+		messageBlocks: "flex flex-col gap-1.5 group-data-[minimal=true]/msg:gap-px",
+		gutterRow: "flex items-start gap-2",
+		gutterTime: "w-16 shrink-0 text-right text-xs leading-[1.4] text-muted-foreground tabular-nums select-none",
+		gutterContent: "min-w-0 flex-1",
+		row: cn(rowText, "font-medium text-muted-foreground [&>.chat-row-header]:pl-5"),
+		rowError: "border-destructive text-destructive",
+		rowHeader: cn("flex min-w-0 items-center gap-1.5 font-medium leading-[1.4] text-muted-foreground", rowText, touch ? "min-h-10" : "min-h-7"),
+		rowIcon: "size-[1em] shrink-0 [.chat-row-affordance+&]:hidden",
+		rowAffordance: "inline-flex size-[1em] items-center justify-center text-muted-foreground data-[affordance=success]:text-green-600",
+		rowLabel: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+		rowTimer: cn("shrink-0 text-muted-foreground tabular-nums", metricText),
+		rowTps: cn("shrink-0 text-muted-foreground tabular-nums", metricText),
+		group: "!p-0 !m-0",
+		groupBody: "ml-[6px] flex flex-col gap-0 border-l-2 border-border/60 pl-3",
+		groupSummary: "inline-flex min-w-0 items-center gap-1.5",
+		groupSummaryLabel: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+		groupMore: "shrink-0 text-xs text-muted-foreground tabular-nums",
+		text: "w-fit max-w-[85%] rounded-md px-[0.9375rem] py-[0.625rem]",
+		textUser: "bg-primary text-primary-foreground",
+		textAssistant: "bg-muted text-foreground",
+		textPlain: "text-sm leading-5 whitespace-pre-wrap [overflow-wrap:anywhere] [word-break:break-word]",
+		mention: "font-medium text-primary group-data-[role=user]/msg:text-primary-foreground",
+		toolBody: "flex flex-col gap-2 pl-5 pb-2",
+		toolSection: "flex flex-col gap-1",
+		toolSectionLabel: "text-xs text-muted-foreground uppercase tracking-wider",
+		toolMedia: "flex flex-wrap gap-1.5",
+		toolMediaImage: "max-w-full h-auto rounded-md",
+		reasoningBody: "pl-5 pb-2 text-sm text-muted-foreground",
+		systemBody: "pl-5 pb-2 text-sm text-muted-foreground",
+		plan: "m-0 flex list-none flex-col gap-1 pl-5 pb-2 text-sm",
+		rawJson: "text-xs",
+		inertBlock: "text-sm text-muted-foreground",
+		md: "text-sm leading-relaxed [&_p]:my-1 [&_pre]:my-2 [&_ul]:my-1 [&_ol]:my-1",
+		mdPre: "overflow-x-auto rounded-md bg-muted p-3 text-xs",
+		mdLink: "text-primary underline underline-offset-2",
+		mdCodeInline: "rounded bg-muted px-1 py-0.5 text-[0.85em]",
+		footer: cn("mt-1 flex flex-wrap items-center gap-1.5 min-w-0 text-muted-foreground", touch ? "text-xs" : "data-[compact=true]:gap-[3px] text-[0.625rem]"),
+		footerMetrics: cn("min-w-0 [overflow-wrap:anywhere]", touch && "basis-full"),
+		footerIcon: touch ? TILE_ICON : "size-2.5",
+		...touch ? {
+			footerReveal: TILE,
+			footerCopy: TILE,
+			footerRegenerate: TILE,
+			footerFork: TILE,
+			footerReset: TILE
+		} : {},
+		footerActivity: touch ? "contents" : "inline-flex items-center gap-1.5",
+		footerFact: touch ? "contents" : "inline-flex",
+		footerFactBody: touch ? cn(TILE, "[[data-failed]>&]:text-destructive", "[[data-expanded=true]_&]:bg-primary/15 [[data-expanded=true]_&]:text-foreground") : "inline-flex items-center gap-1 tabular-nums [[data-failed]>&]:text-destructive",
+		footerFactIcon: touch ? TILE_ICON : "size-3",
+		footerActivityItems: touch ? "contents [&>.chat-tiles]:contents" : "inline-flex",
+		detailsActivity: "flex flex-col gap-0.5",
+		detailsActivityItem: "rounded-lg px-2 -mx-2 transition-colors data-[focused=true]:bg-primary/10 data-[focused=true]:ring-1 data-[focused=true]:ring-primary/25",
+		attachments: "mt-2 flex flex-col gap-2",
+		attachmentGrid: "grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-2 list-none p-0 m-0",
+		attachmentGridItem: "m-0 min-w-0",
+		attachmentThumb: "relative block w-full aspect-square p-0 overflow-hidden rounded-md border border-border bg-muted text-foreground cursor-pointer",
+		attachmentThumbImage: "block w-full h-full object-cover",
+		attachmentThumbExpand: "absolute top-0.5 right-0.5 inline-flex items-center justify-center p-0.5 rounded bg-background/70 text-foreground",
+		attachmentChips: "flex flex-wrap gap-1.5 list-none p-0 m-0",
+		attachmentChip: "inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-md border border-border text-foreground text-[0.8125rem]",
+		attachmentChipIcon: "inline-flex items-center text-muted-foreground",
+		attachmentChipName: "min-w-0 max-w-[14rem] overflow-hidden text-ellipsis whitespace-nowrap",
+		attachmentChipDownload: "inline-flex items-center justify-center min-w-11 min-h-11 text-primary",
+		input: "flex flex-col gap-1.5",
+		inputAttachments: "flex flex-wrap gap-1.5 list-none p-0 m-0",
+		inputAttachment: "inline-flex items-center gap-1 rounded-md border border-border px-1.5 py-1 text-[0.8125rem]",
+		inputAttachmentName: "max-w-48 overflow-hidden text-ellipsis whitespace-nowrap",
+		inputTextarea: "rounded-md !border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-0",
+		inputMention: "rounded-sm bg-primary/20 text-primary",
+		inputActions: "flex items-center justify-end gap-1.5",
+		completionPopup: "min-w-48 max-w-96 rounded-md border border-border bg-background text-foreground shadow-md overflow-hidden",
+		completionList: "list-none m-0 p-1",
+		completionOption: "flex items-baseline gap-1.5 px-2 py-1 rounded cursor-pointer data-[active=true]:bg-primary/15",
+		completionDescription: "text-muted-foreground text-[0.8125rem]",
+		completionLoading: "flex items-center justify-center p-3 text-muted-foreground",
+		lightbox: "p-3 bg-black/70",
+		lightboxDialog: "rounded-md bg-background",
+		lightboxImage: "rounded-md",
+		lightboxClose: "inline-flex items-center justify-center min-w-11 min-h-11 p-1.5 rounded-md border border-border bg-background text-foreground cursor-pointer"
+	};
+}
+/** The desktop (pointer-first) theme. */
+const shadcnClassNames = createShadcnClassNames();
+
+//#endregion
+//#region src/code.tsx
+function CodeBlock({ code, language, className }) {
+	return /* @__PURE__ */ jsx("pre", {
+		className: cn("overflow-x-auto rounded-md bg-muted p-3 text-xs leading-relaxed", className),
+		...language ? { "data-language": language } : {},
+		children: /* @__PURE__ */ jsx("code", { children: code })
+	});
+}
+function JsonView({ value, className }) {
+	let text;
+	try {
+		text = JSON.stringify(value, null, 2) ?? String(value);
+	} catch {
+		text = String(value);
+	}
+	return /* @__PURE__ */ jsx(CodeBlock, {
+		code: text,
+		language: "json",
+		...className ? { className } : {}
+	});
+}
+
+//#endregion
+//#region src/icons.tsx
+/** Wrap a lucide component as a library {@link IconProps} icon. */
+function wrap(Icon) {
+	return function WrappedIcon({ className, size }) {
+		return /* @__PURE__ */ jsx(Icon, {
+			className,
+			size: size ?? 16,
+			"aria-hidden": true
+		});
+	};
+}
+const MAP = {
+	checklist: ListChecks,
+	info: Info,
+	spinner: Loader2,
+	check: Check,
+	caretRight: ChevronRight,
+	caretDown: ChevronDown,
+	copy: Copy,
+	wrench: Wrench,
+	brain: Brain,
+	gear: Settings,
+	dotsThree: MoreHorizontal,
+	regenerate: RefreshCw,
+	fork: GitFork,
+	reset: RotateCcw,
+	file: FileText,
+	audio: AudioLines,
+	video: Video,
+	send: SendHorizontal,
+	stop: Square,
+	paperclip: Paperclip,
+	close: X,
+	download: Download,
+	expand: Maximize2
+};
+/** The full lucide icon registry, one component per {@link IconName}. */
+const lucideIcons = Object.fromEntries(Object.keys(MAP).map((name) => [name, wrap(MAP[name])]));
+
+//#endregion
+//#region src/markdown.tsx
+/** Inline image data: drawn without any request. */
+const DATA_IMAGE = /^data:image\//i;
+/** Keep `data:` image sources; every other URL gets the default sanitising. */
+const urlTransform = (url, key) => key === "src" && DATA_IMAGE.test(url) ? url : defaultUrlTransform(url);
+/** The host a URL points at, or the URL itself when it does not parse. */
+function hostOf(src) {
+	try {
+		return new URL(src).host || src;
+	} catch {
+		return src;
+	}
+}
+function ExternalLink({ node: _node,...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		target: "_blank",
+		rel: "noopener noreferrer"
+	});
+}
+/**
+* Markdown image: a `data:` image is drawn; any other source becomes a
+* placeholder showing the alt text and source host, linking to the image so
+* the user can open it in the browser.
+*/
+function SafeImage({ node: _node, src, alt, title }) {
+	if (src && DATA_IMAGE.test(src)) return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		title
+	});
+	const label = alt || "image";
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(ImageOff, {
+			size: 14,
+			"aria-hidden": true
+		}),
+		/* @__PURE__ */ jsx("span", { children: label }),
+		src ? /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground",
+			children: [
+				"(",
+				hostOf(src),
+				")"
+			]
+		}) : null
+	] });
+	const className = "inline-flex items-center gap-1 rounded border border-border px-1.5 py-0.5 text-xs no-underline";
+	return src ? /* @__PURE__ */ jsx("a", {
+		href: src,
+		title,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className,
+		"data-image-placeholder": "",
+		children: body
+	}) : /* @__PURE__ */ jsx("span", {
+		title,
+		className,
+		"data-image-placeholder": "",
+		children: body
+	});
+}
+function MarkdownView({ content, streaming }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-sm leading-relaxed [&_p]:my-2 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5", "[&_a]:text-primary [&_a]:underline [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-xs", "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_table]:my-2 [&_table]:block [&_table]:overflow-x-auto [&_th]:border [&_th]:border-border [&_th]:px-2 [&_td]:border [&_td]:border-border [&_td]:px-2", "[&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre>code]:bg-transparent [&_pre>code]:p-0", "[&_img]:inline-block [&_img]:max-w-full"),
+		"data-streaming": streaming ? "true" : void 0,
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			remarkPlugins: [remarkGfm],
+			skipHtml: true,
+			urlTransform,
+			components: {
+				a: ExternalLink,
+				img: SafeImage
+			},
+			children: content
+		})
+	});
+}
+
+//#endregion
+//#region src/activity-tiles.tsx
+/** How often a live tile's time advances, in ms. */
+const TILE_TICK_MS = 250;
+const KIND_ICONS = {
+	reasoning: lucideIcons.brain,
+	plan: lucideIcons.checklist,
+	waiting: lucideIcons.spinner,
+	other: lucideIcons.gear
+};
+/** The small text inside a tile: a live rate, the time so far or taken, a plan's progress. */
+function tileText(item, now) {
+	if (item.detail) return item.detail;
+	const rate = formatTokensPerSecond(item.tokensPerSecond);
+	if (rate && item.status === "running") return rate.replace(" tok/s", "/s");
+	if (item.durationMs !== void 0) return formatDuration(item.durationMs);
+	if (item.status === "running" && item.startedAt !== void 0) return formatDuration(Math.max(0, now - item.startedAt));
+	return void 0;
+}
+const STATUS_WORDS = {
+	running: "running",
+	done: "done",
+	error: "failed",
+	awaiting: "waiting for approval"
+};
+/** A clock that ticks only while `active`. */
+function useNow(active) {
+	const [now, setNow] = useState(() => Date.now());
+	useEffect(() => {
+		if (!active) return;
+		setNow(Date.now());
+		const timer = setInterval(() => setNow(Date.now()), TILE_TICK_MS);
+		return () => clearInterval(timer);
+	}, [active]);
+	return now;
+}
+function Tile({ item, now, Icon, onActivate }) {
+	const text = tileText(item, now);
+	const spinning = item.status === "running" || item.status === "awaiting";
+	const label = [
+		item.label,
+		STATUS_WORDS[item.status],
+		text
+	].filter(Boolean).join(", ");
+	const className = cn("chat-tile relative", TILE, item.status === "done" && "text-foreground/80", item.status === "error" && "bg-destructive/10 text-destructive", item.status === "awaiting" && "text-amber-600", onActivate && "cursor-pointer transition-transform active:scale-95");
+	const body = [
+		spinning ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "chat-tile-ring"
+		}, "ring") : null,
+		/* @__PURE__ */ jsx(Icon, { className: cn(
+			TILE_ICON,
+			// The waiting kind's icon is a spinner: it turns while it waits.
+			item.kind === "waiting" && item.status === "running" && "motion-safe:animate-spin"
+) }, "icon"),
+		text ? /* @__PURE__ */ jsx("span", {
+			className: "max-w-full truncate px-1",
+			children: text
+		}, "text") : null
+	];
+	const data = {
+		"data-kind": item.kind,
+		"data-status": item.status,
+		"aria-label": label
+	};
+	return onActivate ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className,
+		...data,
+		onClick: () => onActivate(item.id),
+		children: body
+	}) : /* @__PURE__ */ jsx("span", {
+		role: "img",
+		className,
+		...data,
+		children: body
+	});
+}
+function createActivityTiles(toolIcons = {}) {
+	return function ActivityTiles({ items, live, onActivate }) {
+		const now = useNow(live && items.some((item) => item.status === "running"));
+		return /* @__PURE__ */ jsx("div", {
+			className: "chat-tiles flex flex-wrap gap-1.5",
+			"data-live": live ? "true" : void 0,
+			children: items.map((item) => /* @__PURE__ */ jsx(Tile, {
+				item,
+				now,
+				Icon: item.kind === "tool" ? (item.name !== void 0 ? toolIcons[item.name] : void 0) ?? lucideIcons.wrench : KIND_ICONS[item.kind],
+				onActivate
+			}, item.id))
+		});
+	};
+}
+
+//#endregion
+//#region src/ui/drawer.tsx
+const Drawer = ({ shouldScaleBackground = false,...props }) => /* @__PURE__ */ jsx(Drawer$1.Root, {
+	shouldScaleBackground,
+	...props
+});
+const DrawerPortal = Drawer$1.Portal;
+const DrawerClose = Drawer$1.Close;
+const DrawerOverlay = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
+	ref,
+	className: cn("fixed inset-0 z-50 bg-black/60", className),
+	...props
+}));
+DrawerOverlay.displayName = "DrawerOverlay";
+const DrawerContent = forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
+	ref,
+	className: cn("fixed inset-x-0 bottom-0 z-50 flex max-h-[85vh] flex-col rounded-t-xl border-t border-border bg-background text-foreground pb-[env(safe-area-inset-bottom)] outline-none", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: "mx-auto mt-3 mb-1 h-1.5 w-12 shrink-0 rounded-full bg-muted"
+	}), children]
+})] }));
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-1 px-4 pt-2 pb-3", className),
+	...props
+});
+const DrawerTitle = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
+	ref,
+	className: cn("text-base font-semibold leading-tight", className),
+	...props
+}));
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerDescription = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
+	ref,
+	className: cn("text-sm text-muted-foreground", className),
+	...props
+}));
+DrawerDescription.displayName = "DrawerDescription";
+
+//#endregion
+//#region src/message-details.tsx
+const CopyIcon$1 = lucideIcons.copy;
+const CheckIcon$1 = lucideIcons.check;
+/** How long the copy action shows its check before the sheet closes, in ms. */
+const COPIED_CLOSE_MS = 600;
+const ACTION = "flex h-12 w-full items-center gap-3 rounded-lg px-3 text-left text-[0.9375rem] font-medium text-foreground outline-none active:bg-muted focus-visible:bg-muted cursor-pointer";
+/** Scroll the activity item `id` within `area` into view, if both exist. */
+function scrollToItem(area, id) {
+	if (!area || id === void 0) return;
+	const items = area.querySelectorAll("[data-block-id]");
+	const target = [...items].find((item) => item.getAttribute("data-block-id") === id);
+	target?.scrollIntoView({ block: "nearest" });
+}
+function MessageDetailsSheet({ open, onOpenChange, details, outcome, copyText, actions, activity, focusId }) {
+	const [copied, setCopied] = useState(false);
+	const scroller = useRef(null);
+	const timer = useRef(void 0);
+	const isOpen = useRef(open);
+	isOpen.current = open;
+	useEffect(() => () => {
+		isOpen.current = false;
+		clearTimeout(timer.current);
+	}, []);
+	useEffect(() => {
+		if (open) return;
+		clearTimeout(timer.current);
+		setCopied(false);
+	}, [open]);
+	const focus = useRef(focusId);
+	focus.current = focusId;
+	const attach = useCallback((area) => {
+		scroller.current = area;
+		scrollToItem(area, focus.current);
+	}, []);
+	useEffect(() => {
+		if (open) scrollToItem(scroller.current, focusId);
+	}, [open, focusId]);
+	const model = details.find((d) => d.key === "model")?.value;
+	const facts = details.filter((d) => d.key !== "model");
+	const status = outcome?.kind === "error" ? `Failed: ${outcome.message}` : outcome?.kind === "stopped" ? "Stopped before it finished" : void 0;
+	const copy = () => {
+		const done = () => {
+			if (!isOpen.current) return;
+			setCopied(true);
+			clearTimeout(timer.current);
+			timer.current = setTimeout(() => onOpenChange(false), COPIED_CLOSE_MS);
+		};
+		const clip = navigator.clipboard;
+		if (clip?.writeText) clip.writeText(copyText).then(done, done);
+		else done();
+	};
+	return /* @__PURE__ */ jsx(Drawer, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DrawerContent, { children: [
+			/* @__PURE__ */ jsxs(DrawerHeader, { children: [/* @__PURE__ */ jsx(DrawerTitle, {
+				className: "truncate",
+				children: model ?? "Message"
+			}), /* @__PURE__ */ jsx(DrawerDescription, {
+				className: cn(!status && "sr-only", outcome?.kind === "error" && "text-destructive"),
+				children: status ?? "Details and actions for this message"
+			})] }),
+			/* @__PURE__ */ jsxs("div", {
+				ref: attach,
+				className: "min-h-0 flex-1 overflow-y-auto",
+				children: [facts.length > 0 ? /* @__PURE__ */ jsx("dl", {
+					className: "mx-4 mb-2 rounded-lg bg-muted/60 px-4 text-sm",
+					children: facts.map((d) => /* @__PURE__ */ jsxs("div", {
+						"data-detail": d.key,
+						className: "flex items-baseline justify-between gap-4 border-b border-border/60 py-2.5 last:border-0",
+						children: [/* @__PURE__ */ jsx("dt", {
+							className: "text-muted-foreground",
+							children: d.label
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "m-0 min-w-0 text-right tabular-nums [overflow-wrap:anywhere]",
+							children: d.value
+						})]
+					}, d.key))
+				}) : null, activity ? /* @__PURE__ */ jsxs("section", {
+					className: "chat-details-activity-section mx-4 mb-2",
+					"aria-label": "Activity",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "mt-2 mb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground",
+						children: "Activity"
+					}), activity]
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 flex-col border-t border-border/60 px-2 pt-1 pb-3 empty:hidden",
+				children: [copyText ? /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: ACTION,
+					onClick: copy,
+					children: [copied ? /* @__PURE__ */ jsx(CheckIcon$1, { size: 18 }) : /* @__PURE__ */ jsx(CopyIcon$1, { size: 18 }), copied ? "Copied" : "Copy text"]
+				}) : null, actions.map((action) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"data-action": action.id,
+					className: ACTION,
+					onClick: () => {
+						onOpenChange(false);
+						action.onSelect();
+					},
+					children: [/* @__PURE__ */ jsx(action.icon, { size: 18 }), action.label]
+				}, action.id))]
+			})
+		] })
+	});
+}
+
+//#endregion
+//#region src/ui/avatar.tsx
+const Avatar = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+	ref,
+	className: cn("relative flex h-7 w-7 shrink-0 overflow-hidden rounded-full", className),
+	...props
+}));
+Avatar.displayName = "Avatar";
+const AvatarFallback = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+	ref,
+	className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted text-xs font-medium", className),
+	...props
+}));
+AvatarFallback.displayName = "AvatarFallback";
+
+//#endregion
+//#region src/ui/badge.tsx
+const badgeVariants = cva("inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors", {
+	variants: { variant: {
+		default: "border-transparent bg-secondary text-secondary-foreground",
+		destructive: "border-transparent bg-destructive text-destructive-foreground",
+		success: "border-transparent bg-emerald-500/15 text-emerald-700 dark:text-emerald-400"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant,...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/ui/button.tsx
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+		},
+		size: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			icon: "h-9 w-9",
+			"icon-sm": "h-7 w-7"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Button({ className, variant, size, type,...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: type ?? "button",
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/ui/collapsible.tsx
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+//#endregion
+//#region src/ui/scroll-area.tsx
+const ScrollArea = forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+	ref,
+	className: cn("relative overflow-hidden", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+			className: "h-full w-full rounded-[inherit]",
+			children
+		}),
+		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
+			orientation: "vertical",
+			className: "flex touch-none select-none transition-colors w-2 p-0.5",
+			children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, { className: "relative flex-1 rounded-full bg-border" })
+		}),
+		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+	]
+}));
+ScrollArea.displayName = "ScrollArea";
+
+//#endregion
+//#region src/ui/tooltip.tsx
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+	ref,
+	sideOffset,
+	className: cn("z-50 overflow-hidden rounded-md border bg-popover px-2.5 py-1 text-xs text-popover-foreground shadow-md", className),
+	...props
+}) }));
+TooltipContent.displayName = "TooltipContent";
+
+//#endregion
+//#region src/registry.tsx
+function toneVariant(tone) {
+	if (tone === "error") return "destructive";
+	if (tone === "success") return "success";
+	return "default";
+}
+const Caret = lucideIcons.caretRight;
+const CaretDown = lucideIcons.caretDown;
+const CheckIcon = lucideIcons.check;
+const CopyIcon = lucideIcons.copy;
+/**
+* `icon-sm` is 28×28 — below the 44×44 minimum touch target. Icon-only
+* buttons get a 44×44 tappable area; the glyph stays small. The width is not
+* fixed: a button the package gives a label (a revealed footer action) grows
+* to fit it instead of spilling over its neighbours.
+*/
+const ICON_TOUCH = "min-h-11 min-w-11 w-auto px-2";
+/** Build the shadcn registry, tuned by `options`. */
+function createShadcnComponents({ tooltipDelay = 150, copyResetMs = 1500, touch = false, toolIcons } = {}) {
+	const triggerClass = cn("flex w-full cursor-pointer items-center gap-1.5 text-left text-sm", !touch && "hover:text-foreground/80");
+	return {
+		Button: ({ onClick, disabled, className, children, "aria-label": ariaLabel }) => /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-sm",
+			onClick,
+			disabled,
+			"aria-label": ariaLabel,
+			className: cn(ICON_TOUCH, className),
+			children
+		}),
+		Badge: ({ tone, className, children }) => /* @__PURE__ */ jsx(Badge, {
+			variant: toneVariant(tone),
+			className,
+			children
+		}),
+		Tooltip: ({ content, className, children }) => /* @__PURE__ */ jsx(TooltipProvider, {
+			delayDuration: tooltipDelay,
+			children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("span", {
+					className,
+					children
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: content })] })
+		}),
+		Collapsible: ({ open, defaultOpen, onOpenChange, header, className, children }) => {
+			const controlled = open !== void 0;
+			const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+			const isOpen = controlled ? open : internalOpen;
+			const ChevronIcon = isOpen ? CaretDown : Caret;
+			return /* @__PURE__ */ jsxs(Collapsible, {
+				open: isOpen,
+				onOpenChange: (next) => {
+					if (!controlled) setInternalOpen(next);
+					onOpenChange?.(next);
+				},
+				className,
+				children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+					className: triggerClass,
+					children: [/* @__PURE__ */ jsx(ChevronIcon, {
+						size: 14,
+						className: "shrink-0 text-muted-foreground"
+					}), header]
+				}), /* @__PURE__ */ jsx(CollapsibleContent, { children })]
+			});
+		},
+		CodeBlock,
+		JsonView,
+		ScrollArea: ({ className, children }) => /* @__PURE__ */ jsx(ScrollArea, {
+			className,
+			children
+		}),
+		Avatar: ({ role, className }) => /* @__PURE__ */ jsx(Avatar, {
+			className,
+			"aria-label": role,
+			children: /* @__PURE__ */ jsx(AvatarFallback, {
+				"data-role": role,
+				children: role.charAt(0).toUpperCase()
+			})
+		}),
+		CopyButton: ({ value, className, "aria-label": ariaLabel }) => {
+			const [copied, setCopied] = useState(false);
+			const reset = useRef(void 0);
+			useEffect(() => () => clearTimeout(reset.current), []);
+			return /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": ariaLabel ?? "Copy",
+				"data-copied": copied ? "true" : void 0,
+				className: cn(ICON_TOUCH, className),
+				onClick: () => {
+					const done = () => {
+						setCopied(true);
+						clearTimeout(reset.current);
+						if (copyResetMs > 0) reset.current = setTimeout(() => setCopied(false), copyResetMs);
+					};
+					const clip = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+					if (clip?.writeText) clip.writeText(value).then(done, done);
+					else done();
+				},
+				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 14 })
+			});
+		},
+		Markdown: MarkdownView,
+		...touch ? {
+			MessageDetails: MessageDetailsSheet,
+			ActivitySummary: createActivityTiles(toolIcons)
+		} : {},
+		icons: lucideIcons
+	};
+}
+/** The shadcn registry with default (pointer-first) tuning. */
+const shadcnComponents = createShadcnComponents();
+
+//#endregion
+export { Avatar, AvatarFallback, Badge, Button, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, JsonView, MarkdownView, MessageDetailsSheet, ScrollArea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createActivityTiles, createShadcnClassNames, createShadcnComponents, lucideIcons, shadcnClassNames, shadcnComponents, tileText };

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@fx-/chat-shadcn",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "A ready-made shadcn/ui look for @fx-/chat: component registry, classNames theme and Tailwind v4 design tokens.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src/theme.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme.css": "./src/theme.css"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --build"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-dialog": "1.2.0",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "lucide-react": "0.469.0",
+    "react-markdown": "9.0.3",
+    "remark-gfm": "4.0.0",
+    "tailwind-merge": "2.6.0",
+    "vaul": "1.1.2"
+  },
+  "peerDependencies": {
+    "@fx-/chat": "0.0.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@fx-/chat": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fx/chat.git",
+    "directory": "packages/shadcn"
+  },
+  "homepage": "https://github.com/fx/chat#readme",
+  "bugs": {
+    "url": "https://github.com/fx/chat/issues"
+  }
+}

package/src/theme.css

@@ -0,0 +1,190 @@
+/**
+ * `@fx-/chat-shadcn/theme.css` — the shadcn design tokens and the Tailwind v4
+ * wiring for `@fx-/chat-shadcn`.
+ *
+ * Import it after Tailwind, alongside `@fx-/chat`'s structural CSS:
+ *
+ *   @import "tailwindcss";
+ *   @import "@fx-/chat-shadcn/theme.css";
+ *
+ * Dark mode follows the system by default. A `.dark` or `.light` class on any
+ * element forces that scheme for its subtree (so a page can offer a toggle or
+ * show both side by side). Tokens are HSL channel triplets, surfaced to
+ * Tailwind via `@theme inline` so `bg-primary`, `text-muted-foreground`, …
+ * resolve; override any `--token` to re-skin.
+ */
+
+/*
+ * Tailwind v4 does not scan `node_modules`; generate this package's utilities
+ * from its built bundle (the path resolves relative to this file).
+ */
+@source "../dist";
+
+@custom-variant dark {
+  &:where(.dark, .dark *) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where(:not(.light, .light *)) {
+      @slot;
+    }
+  }
+}
+
+:root,
+.light {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 42%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 72% 45%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 5.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 70%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 50%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+}
+
+/* The same dark values, applied to the page when the system asks for dark. */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 5.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 70%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 50%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --radius-md: var(--radius);
+}
+
+/*
+ * Activity tiles (`ActivitySummary`): a live tile's ring is a 2px outline
+ * (a mask following the tile's rounded corners) through which a conic
+ * gradient sweeps. The sweep turns by `transform`, so the compositor animates
+ * it without per-frame style work. Reduced motion gets a still ring.
+ */
+@keyframes chat-tile-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes chat-tile-in {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+}
+
+.chat-tile {
+  animation: chat-tile-in 0.18s ease-out;
+}
+
+.chat-tile-ring {
+  --chat-tile-ring: var(--primary);
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  padding: 2px;
+  pointer-events: none;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+
+.chat-tile-ring::before {
+  content: "";
+  position: absolute;
+  inset: -50%;
+  background: conic-gradient(transparent 0deg 200deg, hsl(var(--chat-tile-ring)) 360deg);
+  animation: chat-tile-spin 1.1s linear infinite;
+  will-change: transform;
+}
+
+.chat-tile[data-status="awaiting"] .chat-tile-ring {
+  --chat-tile-ring: 38 92% 50%;
+}
+
+.chat-tile[data-status="awaiting"] .chat-tile-ring::before {
+  animation-duration: 2.4s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-tile {
+    animation: none;
+  }
+  .chat-tile-ring::before {
+    animation: none;
+    background: hsl(var(--chat-tile-ring) / 0.6);
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.