@ctrl-ui/react 0.8.4 → 0.8.6

package/dist/hooks/use-chat-thread-scroll.js

@@ -0,0 +1,66 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/hooks/use-chat-thread-scroll.ts
+const BOTTOM_THRESHOLD = 24;
+const SETTLE_TIMEOUT = 700;
+function useChatThreadScroll() {
+	const viewportRef = useRef(null);
+	const contentRef = useRef(null);
+	const pinnedRef = useRef(true);
+	const [atBottom, setAtBottom] = useState(true);
+	const settlingRef = useRef(void 0);
+	function scrollToBottom(behavior = "smooth") {
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		pinnedRef.current = true;
+		setAtBottom(true);
+		clearTimeout(settlingRef.current);
+		settlingRef.current = setTimeout(() => {
+			settlingRef.current = void 0;
+		}, SETTLE_TIMEOUT);
+		viewport.scrollTo({
+			top: viewport.scrollHeight,
+			behavior
+		});
+	}
+	useEffect(() => {
+		const viewport = viewportRef.current;
+		const content = contentRef.current;
+		if (!viewport || !content) return;
+		function settle() {
+			clearTimeout(settlingRef.current);
+			settlingRef.current = void 0;
+			readPosition();
+		}
+		function readPosition() {
+			if (!viewport || settlingRef.current) return;
+			const distance = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+			pinnedRef.current = distance <= BOTTOM_THRESHOLD;
+			setAtBottom(pinnedRef.current);
+		}
+		const observer = new ResizeObserver(() => {
+			if (!viewport) return;
+			if (pinnedRef.current) viewport.scrollTop = viewport.scrollHeight;
+			else readPosition();
+		});
+		observer.observe(content);
+		observer.observe(viewport);
+		viewport.addEventListener("scroll", readPosition, { passive: true });
+		viewport.addEventListener("scrollend", settle);
+		viewport.scrollTop = viewport.scrollHeight;
+		readPosition();
+		return () => {
+			observer.disconnect();
+			clearTimeout(settlingRef.current);
+			viewport.removeEventListener("scroll", readPosition);
+			viewport.removeEventListener("scrollend", settle);
+		};
+	}, []);
+	return {
+		viewportRef,
+		contentRef,
+		atBottom,
+		scrollToBottom
+	};
+}
+//#endregion
+export { useChatThreadScroll };

package/dist/hooks/use-user-ask.d.ts

@@ -1,7 +1,7 @@
 import { UserAskKnobStyle } from "../knob-contracts/user-ask-knobs.js";
 import { CSSProperties, ComponentProps, KeyboardEvent, ReactNode } from "react";
 //#region src/hooks/use-user-ask.d.ts
-export type UserAskAnswers = Record<string, string>;
+export type UserAskAnswers = Record<string, string | string[]>;
 export type UserAskProps = Omit<ComponentProps<"section">, "style"> & {
   children?: ReactNode;
   onComplete?: (answers: UserAskAnswers) => void;
@@ -12,7 +12,8 @@ export type UserAskQuestionEntry = {
   key: string;
   id: string;
   title: string;
-  defaultValue?: string;
+  multiple?: boolean;
+  defaultValues?: string[];
 };
 export type UserAskOptionEntry = {
   key: string;
@@ -32,12 +33,13 @@ export declare function useUserAsk({ onComplete, onDismiss }: Pick<UserAskProps,
   registerOption: (questionId: string, entry: UserAskOptionEntry) => void;
   unregisterOption: (questionId: string, key: string) => void;
   optionsFor: (questionId: string) => UserAskOptionEntry[];
-  selectionFor: (questionId: string) => string | undefined;
+  allowsMultiple: (questionId: string) => boolean;
+  selectionFor: (questionId: string) => string;
   isSelected: (questionId: string, optionKey: string) => boolean;
   select: (questionId: string, optionKey: string) => void;
   freeformTextFor: (questionId: string) => string;
   setFreeformText: (questionId: string, text: string) => void;
-  answerFor: (questionId: string) => string | undefined;
+  answerFor: (questionId: string) => string | string[] | undefined;
   resolveAnswers: () => UserAskAnswers;
   goTo: (index: number) => void;
   advance: () => void;

package/dist/hooks/use-user-ask.js

@@ -3,6 +3,7 @@ import { useState } from "react";
 function upsert(entries, entry) {
 	const index = entries.findIndex((existing) => existing.key === entry.key);
 	if (index === -1) return [...entries, entry];
+	if (JSON.stringify(entries[index]) === JSON.stringify(entry)) return entries;
 	const next = [...entries];
 	next[index] = entry;
 	return next;
@@ -36,21 +37,39 @@ function useUserAsk({ onComplete, onDismiss }) {
 	function optionsFor(questionId) {
 		return optionsByQuestion[questionId] ?? [];
 	}
-	function selectionFor(questionId) {
+	function allowsMultiple(questionId) {
+		return questions.find((question) => question.id === questionId)?.multiple === true;
+	}
+	function selectedKeysFor(questionId) {
 		const explicit = selections[questionId];
 		if (explicit) return explicit;
-		const defaultValue = questions.find((question) => question.id === questionId)?.defaultValue;
-		if (defaultValue === void 0) return void 0;
-		return optionsFor(questionId).find((option) => !option.freeform && option.value === defaultValue)?.key;
+		const defaults = questions.find((question) => question.id === questionId)?.defaultValues;
+		if (defaults === void 0) return [];
+		return optionsFor(questionId).filter((option) => !option.freeform && defaults.includes(option.value)).map((option) => option.key);
+	}
+	function selectionFor(questionId) {
+		return selectedKeysFor(questionId)[0];
 	}
 	function isSelected(questionId, optionKey) {
-		return selectionFor(questionId) === optionKey;
+		return selectedKeysFor(questionId).includes(optionKey);
 	}
 	function select(questionId, optionKey) {
-		setSelections((previous) => ({
-			...previous,
-			[questionId]: optionKey
-		}));
+		if (!allowsMultiple(questionId)) {
+			setSelections((previous) => ({
+				...previous,
+				[questionId]: [optionKey]
+			}));
+			return;
+		}
+		const derived = selectedKeysFor(questionId);
+		setSelections((previous) => {
+			const current = previous[questionId] ?? derived;
+			const next = current.includes(optionKey) ? current.filter((entry) => entry !== optionKey) : [...current, optionKey];
+			return {
+				...previous,
+				[questionId]: next
+			};
+		});
 	}
 	function freeformTextFor(questionId) {
 		return freeformTexts[questionId] ?? "";
@@ -62,12 +81,17 @@ function useUserAsk({ onComplete, onDismiss }) {
 		}));
 	}
 	function answerFor(questionId) {
-		const selectedKey = selectionFor(questionId);
-		const option = optionsFor(questionId).find((entry) => entry.key === selectedKey);
-		if (!option) return void 0;
-		if (!option.freeform) return option.value;
-		const text = freeformTextFor(questionId).trim();
-		return text.length > 0 ? text : void 0;
+		const options = optionsFor(questionId);
+		const resolve = (optionKey) => {
+			const option = options.find((entry) => entry.key === optionKey);
+			if (!option) return void 0;
+			if (!option.freeform) return option.value;
+			const text = freeformTextFor(questionId).trim();
+			return text.length > 0 ? text : void 0;
+		};
+		const values = selectedKeysFor(questionId).map(resolve).filter((value) => value !== void 0);
+		if (!allowsMultiple(questionId)) return values[0];
+		return values.length > 0 ? values : void 0;
 	}
 	const canContinue = activeQuestion !== void 0 && answerFor(activeQuestion.id) !== void 0;
 	const isLastQuestion = activeIndex === questions.length - 1;
@@ -111,6 +135,20 @@ function useUserAsk({ onComplete, onDismiss }) {
 		const option = optionsFor(activeQuestion.id)[digit - 1];
 		if (option && !option.disabled) select(activeQuestion.id, option.key);
 	}
+	function moveActiveOption(event, delta) {
+		if (!activeQuestion) return;
+		if (!allowsMultiple(activeQuestion.id)) {
+			moveSelection(delta);
+			return;
+		}
+		const rows = [...event.currentTarget.querySelector("[data-slot=\"question\"][data-active]")?.querySelectorAll("[data-slot=\"option\"]:not([disabled])") ?? []];
+		if (rows.length === 0) return;
+		const focused = rows.findIndex((candidate) => candidate.contains(document.activeElement));
+		let start = focused;
+		if (focused === -1) start = delta > 0 ? -1 : 0;
+		const row = rows[(start + delta + rows.length) % rows.length];
+		(row?.matches("button, input") ? row : row?.querySelector("input, button"))?.focus();
+	}
 	function handleKeyDown(event) {
 		if (event.defaultPrevented) return;
 		if (event.key === "Escape") {
@@ -126,12 +164,12 @@ function useUserAsk({ onComplete, onDismiss }) {
 		if (event.target instanceof HTMLElement && event.target.closest("input, textarea, [contenteditable]")) return;
 		if (event.key === "ArrowDown") {
 			event.preventDefault();
-			moveSelection(1);
+			moveActiveOption(event, 1);
 			return;
 		}
 		if (event.key === "ArrowUp") {
 			event.preventDefault();
-			moveSelection(-1);
+			moveActiveOption(event, -1);
 			return;
 		}
 		if (/^[1-9]$/.test(event.key)) {
@@ -150,6 +188,7 @@ function useUserAsk({ onComplete, onDismiss }) {
 		registerOption,
 		unregisterOption,
 		optionsFor,
+		allowsMultiple,
 		selectionFor,
 		isSelected,
 		select,

package/dist/inline-attachment.js

@@ -146,7 +146,7 @@ function InlineAttachmentContent({ className, ...props }) {
 		"data-control-ui": "inline-attachment",
 		"data-control-family": "inline-attachment",
 		"data-slot": "content",
-		className: cn("absolute inset-x-3 bottom-3", className),
+		className: cn("absolute", className),
 		...props
 	});
 }

package/dist/knob-contracts/action-bar-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/action-bar-knobs.d.ts
-export declare const actionBarKnobs: readonly [];
+export declare const actionBarKnobs: readonly ["--cui-action-bar-hidden-opacity", "--cui-action-bar-visible-opacity"];
 export type ActionBarKnobStyle = Partial<Record<(typeof actionBarKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/action-bar-knobs.js

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/action-bar-knobs.ts
-const actionBarKnobs = [];
+const actionBarKnobs = ["--cui-action-bar-hidden-opacity", "--cui-action-bar-visible-opacity"];
 //#endregion
 export { actionBarKnobs };

package/dist/knob-contracts/activity-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/activity-knobs.d.ts
-export declare const activityKnobs: readonly ["--cui-activity-row-foreground", "--cui-activity-trigger-radius", "--cui-activity-trigger-hover-background", "--cui-activity-code-background"];
+export declare const activityKnobs: readonly ["--cui-activity-row-foreground", "--cui-activity-trigger-radius", "--cui-activity-trigger-hover-background", "--cui-activity-code-background", "--cui-activity-code-radius"];
 export type ActivityKnobStyle = Partial<Record<(typeof activityKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/activity-knobs.js

@@ -3,7 +3,8 @@ const activityKnobs = [
 	"--cui-activity-row-foreground",
 	"--cui-activity-trigger-radius",
 	"--cui-activity-trigger-hover-background",
-	"--cui-activity-code-background"
+	"--cui-activity-code-background",
+	"--cui-activity-code-radius"
 ];
 //#endregion
 export { activityKnobs };

package/dist/knob-contracts/audio-visualizer-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/audio-visualizer-knobs.d.ts
-export declare const audioVisualizerKnobs: readonly ["--cui-audio-visualizer-radius", "--cui-audio-visualizer-bar-background", "--cui-audio-visualizer-line-fill", "--cui-audio-visualizer-line-stroke"];
+export declare const audioVisualizerKnobs: readonly ["--cui-audio-visualizer-radius", "--cui-audio-visualizer-bar-radius", "--cui-audio-visualizer-bar-background", "--cui-audio-visualizer-line-fill", "--cui-audio-visualizer-line-stroke"];
 export type AudioVisualizerKnobStyle = Partial<Record<(typeof audioVisualizerKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/audio-visualizer-knobs.js

@@ -1,6 +1,7 @@
 //#region src/knob-contracts/audio-visualizer-knobs.ts
 const audioVisualizerKnobs = [
 	"--cui-audio-visualizer-radius",
+	"--cui-audio-visualizer-bar-radius",
 	"--cui-audio-visualizer-bar-background",
 	"--cui-audio-visualizer-line-fill",
 	"--cui-audio-visualizer-line-stroke"

package/dist/knob-contracts/chat-composer-attachment-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/chat-composer-attachment-knobs.d.ts
-export declare const chatComposerAttachmentKnobs: readonly ["--cui-chat-composer-attachment-radius", "--cui-chat-composer-attachment-background", "--cui-chat-composer-attachment-border-color", "--cui-chat-composer-attachment-shadow", "--cui-chat-composer-attachment-backdrop-filter", "--cui-chat-composer-attachment-progress-background", "--cui-chat-composer-attachment-progress-foreground", "--cui-chat-composer-attachment-image-outline-color"];
+export declare const chatComposerAttachmentKnobs: readonly ["--cui-chat-composer-attachment-radius", "--cui-chat-composer-attachment-height", "--cui-chat-composer-attachment-list-padding", "--cui-chat-composer-attachment-background", "--cui-chat-composer-attachment-border-color", "--cui-chat-composer-attachment-shadow", "--cui-chat-composer-attachment-backdrop-filter", "--cui-chat-composer-attachment-progress-background", "--cui-chat-composer-attachment-progress-foreground", "--cui-chat-composer-attachment-image-outline-color"];
 export type ChatComposerAttachmentKnobStyle = Partial<Record<(typeof chatComposerAttachmentKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/chat-composer-attachment-knobs.js

@@ -1,6 +1,8 @@
 //#region src/knob-contracts/chat-composer-attachment-knobs.ts
 const chatComposerAttachmentKnobs = [
 	"--cui-chat-composer-attachment-radius",
+	"--cui-chat-composer-attachment-height",
+	"--cui-chat-composer-attachment-list-padding",
 	"--cui-chat-composer-attachment-background",
 	"--cui-chat-composer-attachment-border-color",
 	"--cui-chat-composer-attachment-shadow",

package/dist/knob-contracts/chat-composer-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/chat-composer-knobs.d.ts
-export declare const chatComposerKnobs: readonly ["--cui-chat-composer-root-background", "--cui-chat-composer-shell-radius", "--cui-chat-composer-shell-background", "--cui-chat-composer-shell-background-image", "--cui-chat-composer-shell-backdrop-filter", "--cui-chat-composer-shell-border-color", "--cui-chat-composer-shell-border-width", "--cui-chat-composer-shell-shadow", "--cui-chat-composer-input-foreground", "--cui-chat-composer-input-placeholder-foreground", "--cui-chat-composer-mention-background", "--cui-chat-composer-mention-radius", "--cui-chat-composer-mention-border-color", "--cui-chat-composer-mention-border-width"];
+export declare const chatComposerKnobs: readonly ["--cui-chat-composer-root-background", "--cui-chat-composer-shell-radius", "--cui-chat-composer-shell-background", "--cui-chat-composer-shell-background-image", "--cui-chat-composer-shell-backdrop-filter", "--cui-chat-composer-shell-border-color", "--cui-chat-composer-shell-border-width", "--cui-chat-composer-shell-shadow", "--cui-chat-composer-input-foreground", "--cui-chat-composer-input-placeholder-foreground", "--cui-chat-composer-mention-background", "--cui-chat-composer-mention-radius", "--cui-chat-composer-mention-icon-radius", "--cui-chat-composer-mention-border-color", "--cui-chat-composer-mention-border-width"];
 export type ChatComposerKnobStyle = Partial<Record<(typeof chatComposerKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/chat-composer-knobs.js

@@ -12,6 +12,7 @@ const chatComposerKnobs = [
 	"--cui-chat-composer-input-placeholder-foreground",
 	"--cui-chat-composer-mention-background",
 	"--cui-chat-composer-mention-radius",
+	"--cui-chat-composer-mention-icon-radius",
 	"--cui-chat-composer-mention-border-color",
 	"--cui-chat-composer-mention-border-width"
 ];

package/dist/knob-contracts/chat-layout-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/chat-layout-knobs.d.ts
-export declare const chatLayoutKnobs: readonly ["--cui-chat-layout-radius", "--cui-chat-layout-background", "--cui-chat-layout-border-color", "--cui-chat-layout-border-width", "--cui-chat-layout-shadow"];
+export declare const chatLayoutKnobs: readonly ["--cui-chat-layout-radius", "--cui-chat-layout-background", "--cui-chat-layout-border-color", "--cui-chat-layout-border-width", "--cui-chat-layout-shadow", "--cui-chat-layout-scroll-button-gap"];
 export type ChatLayoutKnobStyle = Partial<Record<(typeof chatLayoutKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/chat-layout-knobs.js

@@ -4,7 +4,8 @@ const chatLayoutKnobs = [
 	"--cui-chat-layout-background",
 	"--cui-chat-layout-border-color",
 	"--cui-chat-layout-border-width",
-	"--cui-chat-layout-shadow"
+	"--cui-chat-layout-shadow",
+	"--cui-chat-layout-scroll-button-gap"
 ];
 //#endregion
 export { chatLayoutKnobs };

package/dist/knob-contracts/chat-message-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/chat-message-knobs.d.ts
-export declare const chatMessageKnobs: readonly ["--cui-chat-message-avatar-radius", "--cui-chat-message-avatar-background", "--cui-chat-message-avatar-border-color", "--cui-chat-message-avatar-border-width", "--cui-chat-message-radius", "--cui-chat-message-corner-radius", "--cui-chat-message-background", "--cui-chat-message-background-image", "--cui-chat-message-foreground", "--cui-chat-message-border-color", "--cui-chat-message-border-width", "--cui-chat-message-shadow"];
+export declare const chatMessageKnobs: readonly ["--cui-chat-message-avatar-radius", "--cui-chat-message-avatar-background", "--cui-chat-message-avatar-border-color", "--cui-chat-message-avatar-border-width", "--cui-chat-message-radius", "--cui-chat-message-corner-radius", "--cui-chat-message-background", "--cui-chat-message-background-image", "--cui-chat-message-foreground", "--cui-chat-message-border-color", "--cui-chat-message-border-width", "--cui-chat-message-shadow", "--cui-chat-message-pending-dot-color", "--cui-chat-message-pending-dot-size"];
 export type ChatMessageKnobStyle = Partial<Record<(typeof chatMessageKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/chat-message-knobs.js

@@ -11,7 +11,9 @@ const chatMessageKnobs = [
 	"--cui-chat-message-foreground",
 	"--cui-chat-message-border-color",
 	"--cui-chat-message-border-width",
-	"--cui-chat-message-shadow"
+	"--cui-chat-message-shadow",
+	"--cui-chat-message-pending-dot-color",
+	"--cui-chat-message-pending-dot-size"
 ];
 //#endregion
 export { chatMessageKnobs };

package/dist/knob-contracts/context-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/context-knobs.d.ts
-export declare const contextKnobs: readonly ["--cui-context-graph-radius", "--cui-context-track-fill", "--cui-context-segment-tool-fill", "--cui-context-segment-message-fill", "--cui-context-segment-source-fill", "--cui-context-segment-reasoning-fill", "--cui-context-overage-fill", "--cui-context-limit-marker-color"];
+export declare const contextKnobs: readonly ["--cui-context-graph-radius", "--cui-context-legend-indicator-radius", "--cui-context-segment-system-fill", "--cui-context-segment-cache-fill", "--cui-context-track-fill", "--cui-context-segment-tool-fill", "--cui-context-segment-message-fill", "--cui-context-segment-source-fill", "--cui-context-segment-reasoning-fill", "--cui-context-overage-fill", "--cui-context-limit-marker-color"];
 export type ContextKnobStyle = Partial<Record<(typeof contextKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/context-knobs.js

@@ -1,6 +1,9 @@
 //#region src/knob-contracts/context-knobs.ts
 const contextKnobs = [
 	"--cui-context-graph-radius",
+	"--cui-context-legend-indicator-radius",
+	"--cui-context-segment-system-fill",
+	"--cui-context-segment-cache-fill",
 	"--cui-context-track-fill",
 	"--cui-context-segment-tool-fill",
 	"--cui-context-segment-message-fill",

package/dist/knob-contracts/inline-attachment-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/inline-attachment-knobs.d.ts
-export declare const inlineAttachmentKnobs: readonly ["--cui-inline-attachment-radius", "--cui-inline-attachment-background", "--cui-inline-attachment-ring-color", "--cui-inline-attachment-shadow", "--cui-inline-attachment-hover-shadow", "--cui-inline-attachment-content-radius", "--cui-inline-attachment-content-background", "--cui-inline-attachment-content-foreground", "--cui-inline-attachment-content-shadow", "--cui-inline-attachment-image-outline-color"];
+export declare const inlineAttachmentKnobs: readonly ["--cui-inline-attachment-radius", "--cui-inline-attachment-background", "--cui-inline-attachment-ring-color", "--cui-inline-attachment-padding", "--cui-inline-attachment-document-padding", "--cui-inline-attachment-document-background", "--cui-inline-attachment-document-background-image", "--cui-inline-attachment-shadow", "--cui-inline-attachment-hover-shadow", "--cui-inline-attachment-content-radius", "--cui-inline-attachment-content-background", "--cui-inline-attachment-content-foreground", "--cui-inline-attachment-content-shadow", "--cui-inline-attachment-image-outline-color"];
 export type InlineAttachmentKnobStyle = Partial<Record<(typeof inlineAttachmentKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/inline-attachment-knobs.js

@@ -3,6 +3,10 @@ const inlineAttachmentKnobs = [
 	"--cui-inline-attachment-radius",
 	"--cui-inline-attachment-background",
 	"--cui-inline-attachment-ring-color",
+	"--cui-inline-attachment-padding",
+	"--cui-inline-attachment-document-padding",
+	"--cui-inline-attachment-document-background",
+	"--cui-inline-attachment-document-background-image",
 	"--cui-inline-attachment-shadow",
 	"--cui-inline-attachment-hover-shadow",
 	"--cui-inline-attachment-content-radius",

package/dist/knob-contracts/inline-citation-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/inline-citation-knobs.d.ts
-export declare const inlineCitationKnobs: readonly ["--cui-inline-citation-trigger-radius", "--cui-inline-citation-trigger-background", "--cui-inline-citation-trigger-foreground", "--cui-inline-citation-trigger-border-color", "--cui-inline-citation-trigger-border-width", "--cui-inline-citation-trigger-hover-background", "--cui-inline-citation-trigger-hover-foreground", "--cui-inline-citation-navigation-background", "--cui-inline-citation-quote-background", "--cui-inline-citation-quote-radius"];
+export declare const inlineCitationKnobs: readonly ["--cui-inline-citation-trigger-radius", "--cui-inline-citation-trigger-background", "--cui-inline-citation-trigger-foreground", "--cui-inline-citation-trigger-border-color", "--cui-inline-citation-trigger-border-width", "--cui-inline-citation-trigger-hover-background", "--cui-inline-citation-trigger-hover-foreground", "--cui-inline-citation-navigation-background", "--cui-inline-citation-quote-background", "--cui-inline-citation-quote-radius", "--cui-inline-citation-favicon-background", "--cui-inline-citation-favicon-radius"];
 export type InlineCitationKnobStyle = Partial<Record<(typeof inlineCitationKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/inline-citation-knobs.js

@@ -9,7 +9,9 @@ const inlineCitationKnobs = [
 	"--cui-inline-citation-trigger-hover-foreground",
 	"--cui-inline-citation-navigation-background",
 	"--cui-inline-citation-quote-background",
-	"--cui-inline-citation-quote-radius"
+	"--cui-inline-citation-quote-radius",
+	"--cui-inline-citation-favicon-background",
+	"--cui-inline-citation-favicon-radius"
 ];
 //#endregion
 export { inlineCitationKnobs };

package/dist/knob-contracts/page-layout-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/page-layout-knobs.d.ts
+export declare const pageLayoutKnobs: readonly ["--cui-page-layout-article-size", "--cui-page-layout-aside-size", "--cui-page-layout-padding-inline", "--cui-page-layout-padding-block", "--cui-page-layout-column-gap", "--cui-page-layout-header-start-gap", "--cui-page-layout-header-gap", "--cui-page-layout-header-column-gap", "--cui-page-layout-header-row-gap", "--cui-page-layout-size", "--cui-page-layout-sticky-gap"];
+export type PageLayoutKnobStyle = Partial<Record<(typeof pageLayoutKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/page-layout-knobs.js

@@ -0,0 +1,16 @@
+//#region src/knob-contracts/page-layout-knobs.ts
+const pageLayoutKnobs = [
+	"--cui-page-layout-article-size",
+	"--cui-page-layout-aside-size",
+	"--cui-page-layout-padding-inline",
+	"--cui-page-layout-padding-block",
+	"--cui-page-layout-column-gap",
+	"--cui-page-layout-header-start-gap",
+	"--cui-page-layout-header-gap",
+	"--cui-page-layout-header-column-gap",
+	"--cui-page-layout-header-row-gap",
+	"--cui-page-layout-size",
+	"--cui-page-layout-sticky-gap"
+];
+//#endregion
+export { pageLayoutKnobs };

package/dist/knob-contracts/table-of-contents-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/table-of-contents-knobs.d.ts
-export declare const tableOfContentsKnobs: readonly ["--cui-table-of-contents-background", "--cui-table-of-contents-border-color", "--cui-table-of-contents-border-width", "--cui-table-of-contents-radius", "--cui-table-of-contents-shadow", "--cui-table-of-contents-backdrop-filter", "--cui-table-of-contents-padding", "--cui-table-of-contents-label-foreground", "--cui-table-of-contents-label-font-size", "--cui-table-of-contents-label-font-weight", "--cui-table-of-contents-label-gap", "--cui-table-of-contents-item-foreground", "--cui-table-of-contents-item-hover-foreground", "--cui-table-of-contents-item-active-foreground", "--cui-table-of-contents-item-font-size", "--cui-table-of-contents-item-line-height", "--cui-table-of-contents-item-font-weight", "--cui-table-of-contents-item-root-font-weight", "--cui-table-of-contents-item-padding-block", "--cui-table-of-contents-item-padding-inline", "--cui-table-of-contents-item-indent", "--cui-table-of-contents-rail-background", "--cui-table-of-contents-rail-width", "--cui-table-of-contents-trail-background", "--cui-table-of-contents-trail-width", "--cui-table-of-contents-trail-radius", "--cui-table-of-contents-highlight-radius", "--cui-table-of-contents-highlight-background"];
+export declare const tableOfContentsKnobs: readonly ["--cui-table-of-contents-background", "--cui-table-of-contents-border-color", "--cui-table-of-contents-border-width", "--cui-table-of-contents-radius", "--cui-table-of-contents-shadow", "--cui-table-of-contents-backdrop-filter", "--cui-table-of-contents-padding", "--cui-table-of-contents-label-foreground", "--cui-table-of-contents-label-font-size", "--cui-table-of-contents-label-font-weight", "--cui-table-of-contents-label-gap", "--cui-table-of-contents-item-foreground", "--cui-table-of-contents-item-hover-foreground", "--cui-table-of-contents-item-active-foreground", "--cui-table-of-contents-item-font-size", "--cui-table-of-contents-item-line-height", "--cui-table-of-contents-item-font-weight", "--cui-table-of-contents-item-root-font-weight", "--cui-table-of-contents-item-padding-block", "--cui-table-of-contents-item-padding-inline", "--cui-table-of-contents-item-indent-size", "--cui-table-of-contents-rail-background", "--cui-table-of-contents-rail-size", "--cui-table-of-contents-trail-background", "--cui-table-of-contents-trail-size", "--cui-table-of-contents-trail-radius", "--cui-table-of-contents-highlight-radius", "--cui-table-of-contents-highlight-background"];
 export type TableOfContentsKnobStyle = Partial<Record<(typeof tableOfContentsKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/table-of-contents-knobs.js

@@ -20,11 +20,11 @@ const tableOfContentsKnobs = [
 	"--cui-table-of-contents-item-root-font-weight",
 	"--cui-table-of-contents-item-padding-block",
 	"--cui-table-of-contents-item-padding-inline",
-	"--cui-table-of-contents-item-indent",
+	"--cui-table-of-contents-item-indent-size",
 	"--cui-table-of-contents-rail-background",
-	"--cui-table-of-contents-rail-width",
+	"--cui-table-of-contents-rail-size",
 	"--cui-table-of-contents-trail-background",
-	"--cui-table-of-contents-trail-width",
+	"--cui-table-of-contents-trail-size",
 	"--cui-table-of-contents-trail-radius",
 	"--cui-table-of-contents-highlight-radius",
 	"--cui-table-of-contents-highlight-background"

package/dist/knob-contracts/task-list-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/task-list-knobs.d.ts
-export declare const taskListKnobs: readonly ["--cui-task-list-radius", "--cui-task-list-background", "--cui-task-list-foreground", "--cui-task-list-border-color", "--cui-task-list-border-width", "--cui-task-list-shadow", "--cui-task-list-item-foreground", "--cui-task-list-item-pending-foreground", "--cui-task-list-indicator-foreground", "--cui-task-list-indicator-active-foreground"];
+export declare const taskListKnobs: readonly ["--cui-task-list-radius", "--cui-task-list-ring-color", "--cui-task-list-items-padding", "--cui-task-list-item-radius", "--cui-task-list-trigger-hover-background", "--cui-task-list-background", "--cui-task-list-foreground", "--cui-task-list-border-color", "--cui-task-list-border-width", "--cui-task-list-shadow", "--cui-task-list-item-foreground", "--cui-task-list-item-pending-foreground", "--cui-task-list-indicator-foreground", "--cui-task-list-indicator-active-foreground"];
 export type TaskListKnobStyle = Partial<Record<(typeof taskListKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/task-list-knobs.js

@@ -1,6 +1,10 @@
 //#region src/knob-contracts/task-list-knobs.ts
 const taskListKnobs = [
 	"--cui-task-list-radius",
+	"--cui-task-list-ring-color",
+	"--cui-task-list-items-padding",
+	"--cui-task-list-item-radius",
+	"--cui-task-list-trigger-hover-background",
 	"--cui-task-list-background",
 	"--cui-task-list-foreground",
 	"--cui-task-list-border-color",

package/dist/knob-contracts/user-ask-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/user-ask-knobs.d.ts
-export declare const userAskKnobs: readonly ["--cui-user-ask-radius", "--cui-user-ask-background", "--cui-user-ask-foreground", "--cui-user-ask-border-color", "--cui-user-ask-border-width", "--cui-user-ask-shadow", "--cui-user-ask-option-radius", "--cui-user-ask-option-hover-background", "--cui-user-ask-option-selected-background", "--cui-user-ask-indicator-background", "--cui-user-ask-indicator-foreground", "--cui-user-ask-input-background", "--cui-user-ask-input-foreground"];
+export declare const userAskKnobs: readonly ["--cui-user-ask-radius", "--cui-user-ask-padding", "--cui-user-ask-backdrop-filter", "--cui-user-ask-indicator-radius", "--cui-user-ask-indicator-multiple-radius", "--cui-user-ask-background", "--cui-user-ask-foreground", "--cui-user-ask-border-color", "--cui-user-ask-border-width", "--cui-user-ask-shadow", "--cui-user-ask-option-radius", "--cui-user-ask-option-hover-background", "--cui-user-ask-option-selected-background", "--cui-user-ask-indicator-background", "--cui-user-ask-indicator-foreground", "--cui-user-ask-input-background", "--cui-user-ask-input-foreground"];
 export type UserAskKnobStyle = Partial<Record<(typeof userAskKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/user-ask-knobs.js

@@ -1,6 +1,10 @@
 //#region src/knob-contracts/user-ask-knobs.ts
 const userAskKnobs = [
 	"--cui-user-ask-radius",
+	"--cui-user-ask-padding",
+	"--cui-user-ask-backdrop-filter",
+	"--cui-user-ask-indicator-radius",
+	"--cui-user-ask-indicator-multiple-radius",
 	"--cui-user-ask-background",
 	"--cui-user-ask-foreground",
 	"--cui-user-ask-border-color",

package/dist/lib/phone-input-format.js

@@ -1,5 +1,5 @@
-import { getCountryCallingCode } from "react-phone-number-input/max";
 import { AsYouType } from "libphonenumber-js/max";
+import { getCountryCallingCode } from "react-phone-number-input/max";
 //#region src/lib/phone-input-format.ts
 function normalizePhoneInputText(value, country) {
 	if (!country) return value;

package/dist/markdown-block.js

@@ -68,7 +68,7 @@ function MarkdownBlockContent({ children, className, ...props }) {
 		"data-control-ui": "markdown-block",
 		"data-control-family": "markdown-block",
 		"data-slot": "content",
-		className: cn("max-h-[420px] overflow-auto mask-y-from-[calc(100%_-_var(--scroll-fade-size))]", className),
+		className: cn("max-h-[420px] overflow-auto mask-b-from-[calc(100%_-_var(--scroll-fade-size))]", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(Markdown, { content: code })
 	});

package/dist/styles/index.css

@@ -37,6 +37,7 @@
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";
+@import "./recipes/empty.css";
 @import "./recipes/context.css";
 @import "./recipes/popup-drawer.css";
 @import "./recipes/dockable-panel.css";
@@ -46,7 +47,6 @@
 @import "./recipes/dynamic-notification.css";
 @import "./recipes/dynamic-notification-input.css";
 @import "./recipes/dynamic-notification-motion.css";
-@import "./recipes/empty.css";
 @import "./recipes/environment-variables.css";
 @import "./recipes/resizable.css";
 @import "./recipes/gradient-editor.css";
@@ -59,6 +59,7 @@
 @import "./recipes/markdown-block.css";
 @import "./recipes/range.css";
 @import "./recipes/morphing-panel.css";
+@import "./recipes/page-layout.css";
 @import "./recipes/pagination.css";
 @import "./recipes/phone-input.css";
 @import "./recipes/rich-tooltip.css";

package/dist/styles/recipes/action-bar.css

@@ -1,22 +1,54 @@
 @layer components {
   :where([data-control-family="action-bar"][data-slot="root"]) {
+    --cui-action-bar-hidden-opacity: 0;
+    --cui-action-bar-visible-opacity: 1;
     margin-block-start: calc(var(--spacing) * 1);
     min-block-size: calc(var(--spacing) * 8);
     gap: calc(var(--spacing) * 1);
-    opacity: 1;
+    opacity: var(--cui-action-bar-visible-opacity);
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     :where([data-control-family="chat-layout"][data-slot="turn"] [data-control-family="action-bar"][data-slot="root"]) {
-      opacity: 0;
+      opacity: var(--cui-action-bar-hidden-opacity);
     }
 
     :where([data-control-family="chat-layout"][data-slot="turn"]:hover [data-control-family="action-bar"][data-slot="root"]) {
-      opacity: 1;
+      opacity: var(--cui-action-bar-visible-opacity);
     }
   }
 
   :where([data-control-family="chat-layout"][data-slot="turn"]:focus-within [data-control-family="action-bar"][data-slot="root"]) {
-    opacity: 1;
+    opacity: var(--cui-action-bar-visible-opacity);
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="action-bar"][data-slot="root"] [data-control-family="button"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="action-bar"][data-slot="root"] [data-control-family="button"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
+}
+
+@property --cui-action-bar-hidden-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --cui-action-bar-visible-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
 }