@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/chat-message.js

@@ -1,22 +1,42 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { useChatMessage } from "./hooks/use-chat-message.js";
-import { createContext, useContext } from "react";
+import { ChatMessageStateProvider, chatAuthorLabels, chatMessageStatusLabels, chatMessageTransition, useChatMessage, useChatMessageContext, useChatThreadAnnounce } from "./hooks/use-chat-message.js";
+import { ChatMessageReaction, ChatMessageReactions, ChatMessageReplies, ChatMessageReplySummary, ChatTypingIndicator } from "./chat-message/social.js";
+import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat-message.tsx
-const ChatMessageContext = createContext(null);
-function useChatMessageContext() {
-	const context = useContext(ChatMessageContext);
-	if (!context) throw new Error("ChatMessage compound components must be rendered inside <ChatMessage>.");
-	return context;
-}
-function ChatMessage({ from, state = "idle", density = "comfortable", className, children, ...props }) {
+function ChatMessage({ from, state = "idle", density = "comfortable", layout = "bubble", continuation = false, authorLabel = chatAuthorLabels[from], statusLabels, className, children, ...props }) {
 	const message = useChatMessage({
 		from,
 		state,
-		density
+		density,
+		layout,
+		continuation
 	});
-	return /* @__PURE__ */ jsx(ChatMessageContext.Provider, {
+	const announce = useChatThreadAnnounce();
+	const previousState = useRef(state);
+	const pendingLabel = statusLabels?.pending ?? chatMessageStatusLabels.pending;
+	const repliedLabel = statusLabels?.replied ?? chatMessageStatusLabels.replied;
+	const errorLabel = statusLabels?.error ?? chatMessageStatusLabels.error;
+	useEffect(() => {
+		const previous = previousState.current;
+		previousState.current = state;
+		if (from === "user" || from === "participant") return;
+		const announcement = chatMessageTransition(previous, state, {
+			pending: pendingLabel,
+			replied: repliedLabel,
+			error: errorLabel
+		});
+		if (announcement !== null) announce(announcement);
+	}, [
+		announce,
+		from,
+		state,
+		pendingLabel,
+		repliedLabel,
+		errorLabel
+	]);
+	return /* @__PURE__ */ jsx(ChatMessageStateProvider, {
 		value: message,
 		children: /* @__PURE__ */ jsx("article", {
 			"data-control-ui": "chat-message",
@@ -25,6 +45,9 @@ function ChatMessage({ from, state = "idle", density = "comfortable", className,
 			"data-role": from,
 			"data-state": state,
 			"data-density": density,
+			"data-layout": layout,
+			"data-continuation": continuation ? "" : void 0,
+			"aria-label": authorLabel,
 			className: cn("w-full", className),
 			...props,
 			children
@@ -37,36 +60,68 @@ function ChatMessageRow({ className, children, ...props }) {
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "row",
-		className: cn("flex w-full", message.isUser ? "justify-end" : "justify-start", className),
+		"data-layout": message.layout,
+		"data-density": message.density,
+		"data-continuation": message.continuation ? "" : void 0,
+		className: cn("relative flex w-full", message.isEndAligned ? "justify-end" : "justify-start", className),
 		...props,
 		children
 	});
 }
 function ChatMessageAvatar({ className, ...props }) {
+	const message = useChatMessageContext();
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "avatar",
+		"data-layout": message.layout,
+		"data-continuation": message.continuation ? "" : void 0,
 		className: cn("flex shrink-0 items-center justify-center", className),
 		...props
 	});
 }
 function ChatMessageBody({ className, ...props }) {
-	useChatMessageContext();
+	const message = useChatMessageContext();
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "body",
-		className: cn("min-w-0", className),
+		"data-layout": message.layout,
+		"data-role": message.from,
+		className: cn("flex min-w-0 flex-col", className),
 		...props
 	});
 }
 function ChatMessageHeader({ className, ...props }) {
+	const message = useChatMessageContext();
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "header",
-		className: cn("flex items-center", className),
+		"data-layout": message.layout,
+		"data-role": message.from,
+		"data-state": message.state,
+		className: cn("flex min-w-0 flex-wrap items-baseline", className),
+		...props
+	});
+}
+function ChatMessageAuthor({ className, ...props }) {
+	const message = useChatMessageContext();
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "author",
+		"data-layout": message.layout,
+		className: cn("truncate", className),
+		...props
+	});
+}
+function ChatMessageTime({ className, ...props }) {
+	return /* @__PURE__ */ jsx("time", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "time",
+		className: cn("whitespace-nowrap tabular-nums", className),
 		...props
 	});
 }
@@ -78,35 +133,61 @@ function ChatMessageContent({ className, ...props }) {
 		"data-slot": "content",
 		"data-role": message.from,
 		"data-streaming": message.isStreaming ? "" : void 0,
-		className: cn(message.isUser && "px-[var(--padding-x)] py-[var(--padding-y)]", className),
+		className: cn(message.isBubble && "px-[var(--padding-x)] py-[var(--padding-y)]", className),
 		...props
 	});
 }
-function ChatMessagePending({ label = "Assistant is replying", className, ...props }) {
+/** Visual only: the pending transition is announced by `ChatMessage` through the thread's status region. */
+function ChatMessagePending({ className, ...props }) {
 	if (!useChatMessageContext().isPending) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		role: "status",
-		"aria-label": label,
+		"aria-hidden": "true",
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "pending",
 		className: cn("inline-flex items-center", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
-			/* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
-			/* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+			/* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsx("span", {})
 		]
 	});
 }
-function ChatMessageActions({ className, ...props }) {
+function ChatMessageFooter({ className, ...props }) {
+	const message = useChatMessageContext();
 	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "footer",
+		"data-layout": message.layout,
+		"data-role": message.from,
+		"data-state": message.state,
+		className: cn("flex flex-wrap items-center", className),
+		...props
+	});
+}
+function ChatMessageActions({ className, children, ...props }) {
+	const { layout } = useChatMessageContext();
+	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "chat-message",
 		"data-control-family": "chat-message",
 		"data-slot": "actions",
+		"data-layout": layout,
 		className: cn("flex items-center", className),
-		...props
+		...props,
+		children: [layout === "flat" ? /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			"data-control-ui": "chat-message",
+			"data-control-family": "popup",
+			"data-popup-kind": "toolbar",
+			"data-popup-part": "surface",
+			"data-popup-static": "",
+			"data-surface": "floating",
+			"data-slot": "actions-surface",
+			className: "pointer-events-none absolute inset-0 -z-1"
+		}) : null, children]
 	});
 }
 //#endregion
-export { ChatMessage, ChatMessageActions, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageHeader, ChatMessagePending, ChatMessageRow };
+export { ChatMessage, ChatMessageActions, ChatMessageAuthor, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessagePending, ChatMessageReaction, ChatMessageReactions, ChatMessageReplies, ChatMessageReplySummary, ChatMessageRow, ChatMessageTime, ChatTypingIndicator };

package/dist/context.d.ts

@@ -24,7 +24,7 @@ type ContextStyleProps<Props, Style> = Omit<Props, "style"> & {
 };
 export declare function Context({ segments, maxTokens, model: modelName, locale, open, defaultOpen, onOpenChange, className, children, ...props }: ContextProps): import("react").JSX.Element;
 export type ContextTriggerProps = ContextStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & ContextKnobStyle>;
-export declare function ContextTrigger({ "aria-label": ariaLabel, variant, size, className, children, ...props }: ContextTriggerProps): import("react").JSX.Element;
+export declare function ContextTrigger({ "aria-describedby": describedBy, variant, size, className, children, ...props }: ContextTriggerProps): import("react").JSX.Element;
 export type ContextContentProps = ContextStyleProps<ComponentProps<typeof PopoverContent>, PopupKnobStyle & ContextKnobStyle>;
 export declare function ContextContent({ "aria-label": ariaLabel, side, align, sideOffset, collisionPadding, padding, className, children, ...props }: ContextContentProps): import("react").JSX.Element;
 export type ContextHeaderProps = ComponentProps<"div"> & {
@@ -38,7 +38,7 @@ export declare function ContextDescription({ className, children, ...props }: Co
 export type ContextSummaryProps = ContextStyleProps<ComponentProps<"div">, ContextKnobStyle>;
 export declare function ContextSummary({ className, children, ...props }: ContextSummaryProps): import("react").JSX.Element;
 export type ContextGraphProps = ContextStyleProps<Omit<ComponentProps<"svg">, "children">, ContextKnobStyle>;
-export declare function ContextGraph({ className, ...props }: ContextGraphProps): import("react").JSX.Element;
+export declare function ContextGraph({ "aria-label": ariaLabel, className, ...props }: ContextGraphProps): import("react").JSX.Element;
 export type ContextLegendProps = ContextStyleProps<ComponentProps<"ul">, ContextKnobStyle>;
 export declare function ContextLegend({ className, children, ...props }: ContextLegendProps): import("react").JSX.Element;
 export type ContextCloseProps = ComponentProps<typeof Button>;

package/dist/context.js

@@ -4,7 +4,7 @@ import { Button } from "./ui/button.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { deriveContextModel } from "./context-model.js";
 import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 //#region src/context.tsx
@@ -16,14 +16,20 @@ function useContextValue() {
 }
 function Context({ segments, maxTokens, model: modelName, locale, open, defaultOpen, onOpenChange, className, children, ...props }) {
 	const model = deriveContextModel(segments, maxTokens);
+	const numberFormatter = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+	const percentageFormatter = useMemo(() => new Intl.NumberFormat(locale, {
+		style: "percent",
+		maximumFractionDigits: 1
+	}), [locale]);
+	const percentage = model.ratio === null ? null : percentageFormatter.format(model.ratio);
+	const usedTokens = numberFormatter.format(model.usedTokens);
 	const context = {
 		model,
 		modelName,
-		numberFormatter: new Intl.NumberFormat(locale),
-		percentageFormatter: new Intl.NumberFormat(locale, {
-			style: "percent",
-			maximumFractionDigits: 1
-		})
+		numberFormatter,
+		percentageFormatter,
+		percentage,
+		usage: model.maxTokens === null ? `${usedTokens} tokens used; limit unavailable` : `${usedTokens} of ${numberFormatter.format(model.maxTokens)} tokens used (${percentage})${model.overageTokens > 0 ? `; ${numberFormatter.format(model.overageTokens)} tokens over limit` : ""}`
 	};
 	return /* @__PURE__ */ jsx(ContextValueContext.Provider, {
 		value: context,
@@ -43,24 +49,22 @@ function Context({ segments, maxTokens, model: modelName, locale, open, defaultO
 		})
 	});
 }
-function ContextTrigger({ "aria-label": ariaLabel, variant = "surface", size = "sm", className, children, ...props }) {
-	const { model, numberFormatter, percentageFormatter } = useContextValue();
-	const percentage = model.ratio === null ? null : percentageFormatter.format(model.ratio);
+function ContextTrigger({ "aria-describedby": describedBy, variant = "surface", size = "sm", className, children, ...props }) {
+	const { model, percentage, usage } = useContextValue();
+	const usageId = useId();
 	const visualPercentage = Math.min(100, Math.max(0, (model.ratio ?? 0) * 100));
-	const shortLabel = percentage === null ? "Context unavailable" : `${percentage} context`;
-	const accessibleLabel = model.maxTokens === null ? `Context window: ${numberFormatter.format(model.usedTokens)} tokens used; limit unavailable` : `Context window: ${numberFormatter.format(model.usedTokens)} of ${numberFormatter.format(model.maxTokens)} tokens used (${percentage})${model.overageTokens > 0 ? `; ${numberFormatter.format(model.overageTokens)} tokens over limit` : ""}`;
-	return /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs("span", {
 		"data-control-ui": "context",
 		"data-control-family": "context",
 		"data-slot": "trigger",
 		"data-status": model.status,
 		className: "relative inline-flex",
-		children: /* @__PURE__ */ jsx(Button, {
+		children: [/* @__PURE__ */ jsx(Button, {
 			...props,
 			render: /* @__PURE__ */ jsx(PopoverTrigger, {}),
 			variant,
 			size,
-			"aria-label": ariaLabel ?? accessibleLabel,
+			"aria-describedby": describedBy ? `${usageId} ${describedBy}` : usageId,
 			className: cn("group/context after:absolute after:-inset-1.5 after:content-['']", className),
 			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("svg", {
 				"data-control-ui": "context",
@@ -96,9 +100,13 @@ function ContextTrigger({ "aria-label": ariaLabel, variant = "surface", size = "
 				"data-control-ui": "context",
 				"data-control-family": "context",
 				"data-slot": "trigger-label",
-				children: shortLabel
+				children: percentage === null ? "Context unavailable" : `${percentage} context`
 			})] })
-		})
+		}), /* @__PURE__ */ jsx("span", {
+			id: usageId,
+			className: "sr-only",
+			children: usage
+		})]
 	});
 }
 function ContextContent({ "aria-label": ariaLabel, side = "top", align = "end", sideOffset = 8, collisionPadding = 16, padding = "none", className, children, ...props }) {
@@ -170,8 +178,7 @@ function ContextDescription({ className, children, ...props }) {
 	});
 }
 function ContextSummary({ className, children, ...props }) {
-	const { model, numberFormatter, percentageFormatter } = useContextValue();
-	const percentage = model.ratio === null ? null : percentageFormatter.format(model.ratio);
+	const { model, numberFormatter, percentage } = useContextValue();
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		"data-control-ui": "context",
@@ -183,21 +190,29 @@ function ContextSummary({ className, children, ...props }) {
 			"data-control-ui": "context",
 			"data-control-family": "context",
 			"data-slot": "summary-value",
-			children: model.maxTokens === null ? "Limit unavailable" : `${numberFormatter.format(model.usedTokens)} / ${numberFormatter.format(model.maxTokens)} tokens`
+			children: model.maxTokens === null ? "Limit unavailable" : `${numberFormatter.format(model.usedTokens)} of ${numberFormatter.format(model.maxTokens)} tokens`
 		})] })
 	});
 }
-function ContextGraph({ className, ...props }) {
-	const { model } = useContextValue();
+function ContextGraph({ "aria-label": ariaLabel = "Context usage", className, ...props }) {
+	const { model, usage } = useContextValue();
+	const meterProps = model.maxTokens === null ? { "aria-hidden": true } : {
+		role: "meter",
+		"aria-label": ariaLabel,
+		"aria-valuemin": 0,
+		"aria-valuemax": model.maxTokens,
+		"aria-valuenow": Math.min(model.usedTokens, model.maxTokens),
+		"aria-valuetext": usage
+	};
 	return /* @__PURE__ */ jsxs("svg", {
 		...props,
+		...meterProps,
 		"data-control-ui": "context",
 		"data-control-family": "context",
 		"data-slot": "graph",
 		"data-status": model.status,
 		viewBox: "0 0 100 10",
 		preserveAspectRatio: "none",
-		"aria-hidden": "true",
 		className: cn("w-full overflow-hidden", className),
 		children: [
 			/* @__PURE__ */ jsx("rect", {
@@ -322,7 +337,7 @@ function ContextClose({ variant = "ghost", size = "xs", iconOnly = true, "aria-l
 		size,
 		iconOnly,
 		"aria-label": ariaLabel,
-		className: cn("ml-auto", className),
+		className: cn("ms-auto", className),
 		children: children ?? /* @__PURE__ */ jsx(X, {
 			"aria-hidden": "true",
 			className: "size-4"

package/dist/dynamic-notification-canvas-loop.d.ts

@@ -0,0 +1,24 @@
+//#region src/dynamic-notification-canvas-loop.d.ts
+export type NotificationCanvasFrame = {
+  reduced: boolean;
+  now: number;
+  deltaMs: number;
+};
+export type NotificationCanvasLoop = {
+  invalidate: () => void;
+  cancel: () => void;
+  destroy: () => void;
+};
+export type NotificationMotionValues = {
+  radius: number;
+  aurora: number;
+  reveal: number;
+  settle: number;
+  lift: number;
+};
+export declare function createNotificationMotion(initialState: string | undefined): {
+  values: NotificationMotionValues;
+  advance: (state: string | undefined, radius: number, reduced: boolean, deltaMs: number) => boolean;
+};
+export declare function createNotificationCanvasLoop(canvas: HTMLCanvasElement, render: (frame: NotificationCanvasFrame) => boolean): NotificationCanvasLoop;
+//#endregion

package/dist/dynamic-notification-canvas-loop.js

@@ -0,0 +1,113 @@
+import { prefersReducedMotion } from "./lib/motion.js";
+//#region src/dynamic-notification-canvas-loop.ts
+const FRAME_MS_AT_60HZ = 1e3 / 60;
+const MAX_FRAME_DELTA_MS = 100;
+function approachAt60Hz(current, target, response, deltaMs) {
+	const frameScale = Math.max(0, deltaMs) / FRAME_MS_AT_60HZ;
+	return current + (target - current) * (1 - (1 - response) ** frameScale);
+}
+function motionTargets(state, radius) {
+	const thinking = state === "thinking";
+	return {
+		radius,
+		aurora: thinking ? 1 : 0,
+		reveal: state === "collapsed" ? 0 : 1,
+		settle: state === "expanded" ? 1 : 0,
+		lift: thinking ? 0 : 1
+	};
+}
+function createNotificationMotion(initialState) {
+	const values = motionTargets(initialState, 0);
+	function advance(state, radius, reduced, deltaMs) {
+		const targets = motionTargets(state, radius);
+		if (reduced) {
+			Object.assign(values, targets);
+			return false;
+		}
+		values.radius = approachAt60Hz(values.radius, targets.radius, .25, deltaMs);
+		values.aurora = approachAt60Hz(values.aurora, targets.aurora, .06, deltaMs);
+		values.reveal = approachAt60Hz(values.reveal, targets.reveal, .07, deltaMs);
+		values.settle = approachAt60Hz(values.settle, targets.settle, .07, deltaMs);
+		values.lift = targets.lift === 1 ? Math.min(1, values.lift + deltaMs * .00216) : approachAt60Hz(values.lift, 0, .28, deltaMs);
+		return state === "thinking" || Math.abs(values.radius - targets.radius) > .05 || Math.abs(values.aurora - targets.aurora) > .002 || Math.abs(values.reveal - targets.reveal) > .002 || Math.abs(values.settle - targets.settle) > .002 || Math.abs(values.lift - targets.lift) > .002;
+	}
+	return {
+		values,
+		advance
+	};
+}
+function createNotificationCanvasLoop(canvas, render) {
+	let destroyed = false;
+	let intersecting = true;
+	let pageVisible = !document.hidden;
+	let rafId = 0;
+	let staticFrameDrawn = false;
+	let previousFrameAt = performance.now();
+	const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+	function tick() {
+		rafId = 0;
+		if (destroyed || !intersecting || !pageVisible) return;
+		const now = performance.now();
+		const deltaMs = Math.min(MAX_FRAME_DELTA_MS, now - previousFrameAt);
+		previousFrameAt = now;
+		const reduced = prefersReducedMotion(canvas);
+		const keepAnimating = render({
+			reduced,
+			now,
+			deltaMs
+		}) && !reduced;
+		staticFrameDrawn = !keepAnimating;
+		if (keepAnimating) rafId = requestAnimationFrame(tick);
+	}
+	function invalidate() {
+		staticFrameDrawn = false;
+		if (destroyed || !intersecting || !pageVisible || rafId !== 0) return;
+		previousFrameAt = performance.now();
+		rafId = requestAnimationFrame(tick);
+	}
+	function cancel() {
+		if (rafId !== 0) cancelAnimationFrame(rafId);
+		rafId = 0;
+	}
+	function handleVisibility() {
+		pageVisible = !document.hidden;
+		invalidate();
+	}
+	const resizeObserver = new ResizeObserver(invalidate);
+	resizeObserver.observe(canvas);
+	const intersectionObserver = new IntersectionObserver((entries) => {
+		for (const entry of entries) intersecting = entry.isIntersecting;
+		invalidate();
+	}, { rootMargin: "64px" });
+	intersectionObserver.observe(canvas);
+	const motionObserver = new MutationObserver(() => {
+		if (!staticFrameDrawn || !prefersReducedMotion(canvas)) invalidate();
+	});
+	motionObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["data-motion"]
+	});
+	const stateObserver = new MutationObserver(invalidate);
+	if (canvas.parentElement) stateObserver.observe(canvas.parentElement, {
+		attributes: true,
+		attributeFilter: ["data-state"]
+	});
+	document.addEventListener("visibilitychange", handleVisibility);
+	reducedMotionQuery.addEventListener("change", invalidate);
+	return {
+		invalidate,
+		cancel,
+		destroy() {
+			destroyed = true;
+			cancel();
+			resizeObserver.disconnect();
+			intersectionObserver.disconnect();
+			motionObserver.disconnect();
+			stateObserver.disconnect();
+			document.removeEventListener("visibilitychange", handleVisibility);
+			reducedMotionQuery.removeEventListener("change", invalidate);
+		}
+	};
+}
+//#endregion
+export { createNotificationCanvasLoop, createNotificationMotion };