@ctrl-ui/react 0.8.4 → 0.8.5

package/dist/audio-visualizer.js

@@ -35,7 +35,7 @@ function AudioVisualizer({ levels, points, active = true, className, style, ...p
 				const visibleLevel = MIN_VISIBLE_LEVEL + perceptualLevel * .88;
 				const levelStyle = {
 					"--_audio-visualizer-level-opacity": `${.48 + perceptualLevel * .52}`,
-					clipPath: `inset(${(1 - visibleLevel) * 50}% 0 round var(--radius-control))`
+					clipPath: `inset(${(1 - visibleLevel) * 50}% 0 round var(--cui-audio-visualizer-bar-radius))`
 				};
 				return /* @__PURE__ */ jsx("span", {
 					"data-control-ui": "audio-visualizer",

package/dist/chat-composer-editor/extensions/mention.js

@@ -68,6 +68,10 @@ const mentionNode = {
 			["img", {
 				src: icon,
 				alt: "",
+				width: "16",
+				height: "16",
+				loading: "lazy",
+				decoding: "async",
 				class: "shrink-0",
 				"data-control-ui": "chat-composer",
 				"data-control-family": "chat-composer",

package/dist/chat-layout.d.ts

@@ -1,3 +1,4 @@
+import { Button } from "./ui/button.js";
 import { ChatLayoutKnobStyle } from "./knob-contracts/chat-layout-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/chat-layout.d.ts
@@ -11,6 +12,10 @@ export type ChatThreadProps = ComponentProps<"div"> & {
   composer?: ReactNode;
 };
 export declare function ChatThread({ children, composer, className, ...props }: ChatThreadProps): import("react").JSX.Element;
+export type ChatThreadScrollButtonProps = Omit<ComponentProps<typeof Button>, "children"> & {
+  label?: string;
+};
+export declare function ChatThreadScrollButton({ label, className, onClick, ...props }: ChatThreadScrollButtonProps): import("react").JSX.Element;
 export type ChatTurnProps = ComponentProps<"section"> & {
   from: "user" | "assistant";
 };

package/dist/chat-layout.js

@@ -1,6 +1,11 @@
+"use client";
 import { cn } from "./lib/cn.js";
 import { SkinAdornment } from "./skin-provider.js";
+import { Button } from "./ui/button.js";
+import { useChatThreadScroll } from "./hooks/use-chat-thread-scroll.js";
+import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown } from "lucide-react";
 //#region src/chat-layout.tsx
 function ChatLayout({ children, chrome = "panel", className, ...props }) {
 	return /* @__PURE__ */ jsxs("section", {
@@ -18,29 +23,65 @@ function ChatLayout({ children, chrome = "panel", className, ...props }) {
 		}) : null, children]
 	});
 }
+const ChatThreadScrollContext = createContext(null);
 function ChatThread({ children, composer, className, ...props }) {
+	const { viewportRef, contentRef, atBottom, scrollToBottom } = useChatThreadScroll();
+	return /* @__PURE__ */ jsx(ChatThreadScrollContext.Provider, {
+		value: {
+			atBottom,
+			scrollToBottom
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref: viewportRef,
+			"data-control-ui": "chat-thread",
+			"data-control-family": "chat-layout",
+			"data-chat-layout-kind": "thread",
+			"data-slot": "root",
+			"data-at-bottom": atBottom ? "" : void 0,
+			className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", className),
+			...props,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: contentRef,
+				className: "relative flex min-h-full min-w-0 flex-col",
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-control-ui": "chat-thread",
+					"data-control-family": "chat-layout",
+					"data-slot": "thread-content",
+					className: "flex min-w-0 flex-1 flex-col",
+					children
+				}), composer ? /* @__PURE__ */ jsx("div", {
+					"data-control-ui": "chat-thread",
+					"data-control-family": "chat-layout",
+					"data-slot": "dock",
+					className: "sticky bottom-0 z-10 shrink-0",
+					children: composer
+				}) : null]
+			})
+		})
+	});
+}
+function ChatThreadScrollButton({ label = "Scroll to latest", className, onClick, ...props }) {
+	const scroll = useContext(ChatThreadScrollContext);
+	if (!scroll) throw new Error("<ChatThreadScrollButton> must be rendered inside <ChatThread>.");
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) scroll?.scrollToBottom();
+	}
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-thread",
 		"data-control-family": "chat-layout",
-		"data-chat-layout-kind": "thread",
-		"data-slot": "root",
-		className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", className),
-		...props,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative flex min-h-full min-w-0 flex-col",
-			children: [/* @__PURE__ */ jsx("div", {
-				"data-control-ui": "chat-thread",
-				"data-control-family": "chat-layout",
-				"data-slot": "thread-content",
-				className: "flex min-w-0 flex-1 flex-col",
-				children
-			}), composer ? /* @__PURE__ */ jsx("div", {
-				"data-control-ui": "chat-thread",
-				"data-control-family": "chat-layout",
-				"data-slot": "dock",
-				className: "sticky bottom-0 z-10 shrink-0",
-				children: composer
-			}) : null]
+		"data-slot": "scroll-anchor",
+		"data-hidden": scroll.atBottom ? "" : void 0,
+		children: /* @__PURE__ */ jsx(Button, {
+			...props,
+			type: "button",
+			variant: "surface",
+			size: "sm",
+			iconOnly: true,
+			"aria-label": label,
+			onClick: handleClick,
+			className: cn("rounded-full", className),
+			children: /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true" })
 		})
 	});
 }
@@ -56,4 +97,4 @@ function ChatTurn({ from, children, className, ...props }) {
 	});
 }
 //#endregion
-export { ChatLayout, ChatThread, ChatTurn };
+export { ChatLayout, ChatThread, ChatThreadScrollButton, ChatTurn };

package/dist/chat-message.d.ts

@@ -23,6 +23,11 @@ export type ChatMessageContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatMessageKnobStyle;
 };
 export declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): import("react").JSX.Element;
+export type ChatMessagePendingProps = Omit<ComponentProps<"div">, "style" | "children"> & {
+  label?: string;
+  style?: CSSProperties & ChatMessageKnobStyle;
+};
+export declare function ChatMessagePending({ label, className, ...props }: ChatMessagePendingProps): import("react").JSX.Element | null;
 export type ChatMessageActionsProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ChatMessageKnobStyle;
 };

package/dist/chat-message.js

@@ -2,7 +2,7 @@
 import { cn } from "./lib/cn.js";
 import { useChatMessage } from "./hooks/use-chat-message.js";
 import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat-message.tsx
 const ChatMessageContext = createContext(null);
 function useChatMessageContext() {
@@ -82,6 +82,23 @@ function ChatMessageContent({ className, ...props }) {
 		...props
 	});
 }
+function ChatMessagePending({ label = "Assistant is replying", className, ...props }) {
+	if (!useChatMessageContext().isPending) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-label": label,
+		"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" })
+		]
+	});
+}
 function ChatMessageActions({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "chat-message",
@@ -92,4 +109,4 @@ function ChatMessageActions({ className, ...props }) {
 	});
 }
 //#endregion
-export { ChatMessage, ChatMessageActions, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageHeader, ChatMessageRow };
+export { ChatMessage, ChatMessageActions, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageHeader, ChatMessagePending, ChatMessageRow };

package/dist/context.js

@@ -56,7 +56,6 @@ function ContextTrigger({ "aria-label": ariaLabel, variant = "surface", size = "
 		"data-status": model.status,
 		className: "relative inline-flex",
 		children: /* @__PURE__ */ jsx(Button, {
-			"data-context-trigger-button": "true",
 			...props,
 			render: /* @__PURE__ */ jsx(PopoverTrigger, {}),
 			variant,
@@ -97,7 +96,6 @@ function ContextTrigger({ "aria-label": ariaLabel, variant = "surface", size = "
 				"data-control-ui": "context",
 				"data-control-family": "context",
 				"data-slot": "trigger-label",
-				className: "overflow-hidden",
 				children: shortLabel
 			})] })
 		})

package/dist/email/email-brand.d.ts

@@ -0,0 +1,60 @@
+import { EmailColorScheme } from "./theme.js";
+import { EmailFooterPlacement } from "./email.js";
+import { EmailFooterAlign, EmailNavLink, EmailSocialLink } from "./email-footer.js";
+import { ReactNode } from "react";
+//#region src/email/email-brand.d.ts
+export type EmailBrand = {
+  name: string;
+  homeUrl: string;
+  logoUrl?: string;
+  logoDarkUrl?: string;
+  logoWidth?: number;
+  logoHeight?: number;
+};
+export type EmailFooterContent = {
+  tagline: string;
+  socialLinks: EmailSocialLink[];
+  socialIconBaseUrl?: string;
+  helpLinks: EmailNavLink[];
+  sender: {
+    company: string;
+    addressLines: string[];
+  };
+  reason: string;
+  legal: string;
+  align?: EmailFooterAlign;
+  placement?: EmailFooterPlacement;
+} & ({
+  mailing: "transactional";
+} | {
+  mailing: "marketing";
+  unsubscribeUrl: string;
+  preferencesUrl?: string;
+});
+export declare function EmailLogo({ name, src, width, height, href }: {
+  name: string;
+  src?: string;
+  width?: number;
+  height?: number;
+  href?: string;
+}): import("react").JSX.Element;
+export declare function EmailBrowserLink({ href, children }: {
+  href: string;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+export type EmailHeaderAlign = "split" | "center";
+export declare function EmailHeader({ children, aside, align }: {
+  children: ReactNode;
+  aside?: ReactNode;
+  align?: EmailHeaderAlign;
+}): import("react").JSX.Element;
+export declare function EmailBrandHeader({ brand, browserUrl, colorScheme, align }: {
+  brand: EmailBrand;
+  browserUrl?: string;
+  colorScheme?: EmailColorScheme;
+  align?: EmailHeaderAlign;
+}): import("react").JSX.Element;
+export declare function EmailBrandFooter({ footer }: {
+  footer: EmailFooterContent;
+}): import("react").JSX.Element;
+//#endregion

package/dist/email/email-brand.js

@@ -0,0 +1,101 @@
+import { EmailCaption, EmailMutedLink, EmailSection } from "./email.js";
+import { EmailAddress, EmailFooter, EmailFooterLegal, EmailFooterLinks, EmailSocialLinks, EmailUnsubscribe } from "./email-footer.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Column, Img, Link, Row } from "react-email";
+//#region src/email/email-brand.tsx
+function EmailLogo({ name, src, width = 120, height = 32, href }) {
+	const mark = src ? /* @__PURE__ */ jsx(Img, {
+		src,
+		alt: name,
+		width,
+		height,
+		className: "inline-block"
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "font-display text-heading-4 font-semibold text-card-foreground",
+		children: name
+	});
+	return href ? /* @__PURE__ */ jsx(Link, {
+		href,
+		className: "text-card-foreground no-underline",
+		children: mark
+	}) : mark;
+}
+function EmailBrowserLink({ href, children = "View in browser" }) {
+	return /* @__PURE__ */ jsx(EmailMutedLink, {
+		href,
+		children
+	});
+}
+function EmailHeader({ children, aside, align = "split" }) {
+	if (align === "center") return /* @__PURE__ */ jsxs(EmailSection, {
+		align: "center",
+		className: "mb-8",
+		children: [children, aside ? /* @__PURE__ */ jsx(EmailSection, {
+			align: "center",
+			className: "mt-3",
+			children: aside
+		}) : null]
+	});
+	return /* @__PURE__ */ jsxs(Row, {
+		className: "mb-8",
+		children: [/* @__PURE__ */ jsx(Column, {
+			className: "align-middle",
+			children
+		}), aside ? /* @__PURE__ */ jsx(Column, {
+			align: "right",
+			className: "align-middle",
+			children: aside
+		}) : null]
+	});
+}
+function EmailBrandHeader({ brand, browserUrl, colorScheme = "light", align = "split" }) {
+	const logoUrl = colorScheme === "dark" ? brand.logoDarkUrl ?? brand.logoUrl : brand.logoUrl;
+	return /* @__PURE__ */ jsx(EmailHeader, {
+		align,
+		aside: browserUrl ? /* @__PURE__ */ jsx(EmailBrowserLink, { href: browserUrl }) : null,
+		children: /* @__PURE__ */ jsx(EmailLogo, {
+			name: brand.name,
+			src: logoUrl,
+			width: brand.logoWidth,
+			height: brand.logoHeight,
+			href: brand.homeUrl
+		})
+	});
+}
+function EmailBrandFooter({ footer }) {
+	return /* @__PURE__ */ jsxs(EmailFooter, {
+		align: footer.align,
+		placement: footer.placement,
+		children: [
+			/* @__PURE__ */ jsx(EmailSocialLinks, {
+				links: footer.socialLinks,
+				iconBaseUrl: footer.socialIconBaseUrl
+			}),
+			/* @__PURE__ */ jsx(EmailFooterLinks, { links: footer.helpLinks }),
+			/* @__PURE__ */ jsx(EmailCaption, {
+				className: "mb-0",
+				children: footer.tagline
+			}),
+			/* @__PURE__ */ jsxs(EmailFooterLegal, { children: [
+				/* @__PURE__ */ jsx(EmailAddress, {
+					company: footer.sender.company,
+					lines: footer.sender.addressLines
+				}),
+				/* @__PURE__ */ jsx(EmailCaption, {
+					className: "mb-2",
+					children: footer.reason
+				}),
+				footer.mailing === "marketing" ? /* @__PURE__ */ jsx(EmailUnsubscribe, {
+					unsubscribeUrl: footer.unsubscribeUrl,
+					preferencesUrl: footer.preferencesUrl
+				}) : null,
+				/* @__PURE__ */ jsx(EmailCaption, {
+					className: "mb-0",
+					children: footer.legal
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { EmailBrandFooter, EmailBrandHeader, EmailBrowserLink, EmailHeader, EmailLogo };

package/dist/email/email-code.d.ts

@@ -0,0 +1,18 @@
+import { EmailTheme } from "./theme.js";
+import { EmailVariant } from "./email.js";
+import { CodeInlineProps, PrismLanguage } from "react-email";
+//#region src/email/email-code.d.ts
+export declare function EmailInlineCode({ className, ...props }: CodeInlineProps): import("react").JSX.Element;
+export declare function EmailCodeBlock({ theme, code, language, lineNumbers, className }: {
+  theme: EmailTheme;
+  code: string;
+  language: PrismLanguage;
+  lineNumbers?: boolean;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function EmailMarkdown({ theme, variant, children }: {
+  theme: EmailTheme;
+  variant?: EmailVariant;
+  children: string;
+}): import("react").JSX.Element;
+//#endregion

package/dist/email/email-code.js

@@ -0,0 +1,172 @@
+import { surfaceColors } from "./email.js";
+import { jsx } from "react/jsx-runtime";
+import { CodeBlock, CodeInline, Markdown, Section } from "react-email";
+//#region src/email/email-code.tsx
+function EmailInlineCode({ className = "", ...props }) {
+	return /* @__PURE__ */ jsx(CodeInline, {
+		...props,
+		className: `rounded-control bg-muted px-1 font-mono text-card-foreground ${className}`
+	});
+}
+function prismTheme(theme) {
+	const { code } = theme;
+	return {
+		base: {
+			margin: "0",
+			padding: "16px",
+			background: theme.colors.muted,
+			color: code.foreground,
+			borderRadius: theme.radii.panel,
+			fontFamily: theme.fonts.mono,
+			fontSize: theme.text.caption.fontSize,
+			lineHeight: "1.6",
+			whiteSpace: "pre-wrap",
+			wordBreak: "break-word"
+		},
+		comment: { color: code.comment },
+		prolog: { color: code.comment },
+		doctype: { color: code.comment },
+		cdata: { color: code.comment },
+		punctuation: { color: code.punctuation },
+		operator: { color: code.punctuation },
+		keyword: { color: code.keyword },
+		atrule: { color: code.keyword },
+		"attr-value": { color: code.string },
+		string: { color: code.string },
+		char: { color: code.string },
+		inserted: { color: code.string },
+		regex: { color: code.string },
+		"attr-name": { color: code.parameter },
+		property: { color: code.parameter },
+		variable: { color: code.parameter },
+		function: { color: code.function },
+		"class-name": { color: code.function },
+		tag: { color: code.function },
+		boolean: { color: code.constant },
+		number: { color: code.constant },
+		constant: { color: code.constant },
+		symbol: { color: code.constant },
+		deleted: { color: code.constant },
+		builtin: { color: code.constant }
+	};
+}
+function EmailCodeBlock({ theme, code, language, lineNumbers = false, className = "" }) {
+	return /* @__PURE__ */ jsx(Section, {
+		className: `mb-6 ${className}`,
+		children: /* @__PURE__ */ jsx(CodeBlock, {
+			code,
+			language,
+			lineNumbers,
+			fontFamily: theme.fonts.mono,
+			theme: prismTheme(theme)
+		})
+	});
+}
+function markdownStyles(theme, variant) {
+	const colors = surfaceColors(theme, variant);
+	const body = {
+		margin: "0 0 16px",
+		fontFamily: theme.fonts.body,
+		fontSize: theme.text.body.fontSize,
+		lineHeight: theme.text.body.lineHeight,
+		color: colors["card-foreground"]
+	};
+	function headingStyle(size) {
+		const style = theme.text[size];
+		return {
+			margin: "0 0 16px",
+			fontFamily: theme.fonts.display,
+			fontSize: style.fontSize,
+			lineHeight: style.lineHeight,
+			fontWeight: style.fontWeight,
+			letterSpacing: style.letterSpacing,
+			color: colors["card-foreground"]
+		};
+	}
+	const monospace = {
+		fontFamily: theme.fonts.mono,
+		fontSize: theme.text.caption.fontSize,
+		background: theme.colors.muted,
+		color: theme.code.foreground,
+		borderRadius: theme.radii.control
+	};
+	return {
+		p: body,
+		li: {
+			...body,
+			margin: "0 0 4px"
+		},
+		ul: {
+			...body,
+			paddingLeft: "20px"
+		},
+		ol: {
+			...body,
+			paddingLeft: "20px"
+		},
+		h1: headingStyle("heading-1"),
+		h2: headingStyle("heading-2"),
+		h3: headingStyle("heading-3"),
+		h4: headingStyle("heading-4"),
+		h5: headingStyle("heading-4"),
+		h6: headingStyle("heading-4"),
+		bold: { fontWeight: 600 },
+		italic: { fontStyle: "italic" },
+		link: {
+			color: colors["primary-text"],
+			textDecoration: "underline"
+		},
+		codeInline: {
+			...monospace,
+			padding: "2px 4px"
+		},
+		codeBlock: {
+			...monospace,
+			display: "block",
+			padding: "16px",
+			borderRadius: theme.radii.panel,
+			whiteSpace: "pre-wrap"
+		},
+		blockQuote: {
+			...body,
+			borderLeft: `3px solid ${theme.colors.border}`,
+			paddingLeft: "16px",
+			color: colors["muted-foreground"]
+		},
+		hr: {
+			border: "none",
+			borderTop: `1px solid ${theme.colors.border}`,
+			margin: "24px 0"
+		},
+		image: {
+			maxWidth: "100%",
+			borderRadius: theme.radii.scene
+		},
+		table: {
+			width: "100%",
+			borderCollapse: "collapse",
+			marginBottom: "16px"
+		},
+		th: {
+			...body,
+			margin: "0",
+			textAlign: "left",
+			padding: "8px 0",
+			borderBottom: `1px solid ${theme.colors.border}`
+		},
+		td: {
+			...body,
+			margin: "0",
+			padding: "8px 0",
+			borderBottom: `1px solid ${theme.colors.border}`
+		}
+	};
+}
+function EmailMarkdown({ theme, variant = "contained", children }) {
+	return /* @__PURE__ */ jsx(Markdown, {
+		markdownCustomStyles: markdownStyles(theme, variant),
+		children
+	});
+}
+//#endregion
+export { EmailCodeBlock, EmailInlineCode, EmailMarkdown };

package/dist/email/email-footer.d.ts

@@ -0,0 +1,63 @@
+import { EmailFooterPlacement } from "./email.js";
+import { ReactNode } from "react";
+//#region src/email/email-footer.d.ts
+export type EmailNavLink = {
+  label: string;
+  href: string;
+};
+export declare const emailSocialPlatformNames: {
+  readonly x: "X";
+  readonly bluesky: "Bluesky";
+  readonly threads: "Threads";
+  readonly instagram: "Instagram";
+  readonly facebook: "Facebook";
+  readonly linkedin: "LinkedIn";
+  readonly youtube: "YouTube";
+  readonly tiktok: "TikTok";
+  readonly github: "GitHub";
+  readonly discord: "Discord";
+  readonly slack: "Slack";
+  readonly mastodon: "Mastodon";
+};
+export type EmailSocialPlatform = keyof typeof emailSocialPlatformNames;
+export type EmailSocialLink = {
+  href: string;
+  iconAlt?: string;
+} & ({
+  platform: EmailSocialPlatform;
+  label?: string;
+  iconUrl?: string;
+} | {
+  platform?: undefined;
+  label: string;
+  iconUrl?: string;
+});
+export type EmailFooterAlign = "start" | "center";
+export declare function EmailFooter({ children, align, placement }: {
+  children: ReactNode;
+  align?: EmailFooterAlign;
+  placement?: EmailFooterPlacement;
+}): import("react").JSX.Element;
+export declare function EmailFooterLegal({ children, className }: {
+  children: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function EmailSocialLinks({ links, iconBaseUrl, iconSize }: {
+  links: EmailSocialLink[];
+  iconBaseUrl?: string;
+  iconSize?: number;
+}): import("react").JSX.Element | null;
+export declare function EmailFooterLinks({ links }: {
+  links: EmailNavLink[];
+}): import("react").JSX.Element | null;
+export declare function EmailAddress({ company, lines }: {
+  company: string;
+  lines: string[];
+}): import("react").JSX.Element;
+export declare function EmailUnsubscribe({ unsubscribeUrl, preferencesUrl, unsubscribeLabel, preferencesLabel }: {
+  unsubscribeUrl: string;
+  preferencesUrl?: string;
+  unsubscribeLabel?: string;
+  preferencesLabel?: string;
+}): import("react").JSX.Element;
+//#endregion