@ctrl-ui/react 0.8.5 → 0.8.7

package/dist/hooks/use-dropzone.d.ts

@@ -1,9 +1,9 @@
 import { DropzoneFileRejection, DropzonePolicy } from "../lib/dropzone-validation.js";
-import { ChangeEvent, ComponentProps, DragEvent, RefObject } from "react";
+import { ChangeEvent, ClipboardEvent, ComponentProps, DragEvent, RefObject } from "react";
 //#region src/hooks/use-dropzone.d.ts
 export type DropzoneVisualState = "idle" | "accept" | "reject" | "unknown" | "processing";
-export type DropzoneValueChangeReason = "drop" | "input" | "remove" | "clear";
-export type DropzoneEvent = DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>;
+export type DropzoneValueChangeReason = "drop" | "input" | "paste" | "remove" | "clear";
+export type DropzoneEvent = DragEvent<HTMLElement> | ClipboardEvent<HTMLElement> | ChangeEvent<HTMLInputElement>;
 export type DropzoneGetFilesFromEvent = (event: DropzoneEvent, signal: AbortSignal) => readonly File[] | Promise<readonly File[]>;
 export type DropzoneValueChangeDetails = {
   reason: DropzoneValueChangeReason;
@@ -22,6 +22,7 @@ export type UseDropzoneOptions = {
   policy?: DropzonePolicy;
   disabled?: boolean;
   drag?: boolean;
+  paste?: boolean;
   preventDropOnDocument?: boolean;
   trackDocumentDrag?: boolean;
   getFilesFromEvent?: DropzoneGetFilesFromEvent;
@@ -35,6 +36,7 @@ export type UseDropzoneReturn = {
   multiple: boolean;
   disabled: boolean;
   dragEnabled: boolean;
+  pasteEnabled: boolean;
   visualState: DropzoneVisualState;
   isDragActive: boolean;
   isDragAccept: boolean;
@@ -48,11 +50,12 @@ export type UseDropzoneReturn = {
   open: () => void;
   removeFile: (file: File) => void;
   clearFiles: () => void;
+  removeRejection: (file: File) => void;
   clearRejections: () => void;
   reset: () => void;
   getRootProps: (props?: ComponentProps<"div">) => ComponentProps<"div">;
   getInputProps: (props?: ComponentProps<"input">) => ComponentProps<"input">;
 };
-export declare function useDropzone({ value: controlledValue, defaultValue, onValueChange, policy, disabled, drag, preventDropOnDocument, trackDocumentDrag, getFilesFromEvent, onDrop, onError }?: UseDropzoneOptions): UseDropzoneReturn;
+export declare function useDropzone({ value: controlledValue, defaultValue, onValueChange, policy, disabled, drag, paste, preventDropOnDocument, trackDocumentDrag, getFilesFromEvent, onDrop, onError }?: UseDropzoneOptions): UseDropzoneReturn;
 export declare function defaultGetFilesFromEvent(event: DropzoneEvent): readonly File[];
 //#endregion

package/dist/hooks/use-dropzone.js

@@ -4,7 +4,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 //#region src/hooks/use-dropzone.ts
 const registeredDropzoneRoots = /* @__PURE__ */ new WeakSet();
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-function useDropzone({ value: controlledValue, defaultValue = [], onValueChange, policy, disabled = false, drag = true, preventDropOnDocument = true, trackDocumentDrag = false, getFilesFromEvent, onDrop, onError } = {}) {
+function useDropzone({ value: controlledValue, defaultValue = [], onValueChange, policy, disabled = false, drag = true, paste = true, preventDropOnDocument = true, trackDocumentDrag = false, getFilesFromEvent, onDrop, onError } = {}) {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const [fileRejections, setFileRejections] = useState([]);
 	const [isDragActive, setIsDragActive] = useState(false);
@@ -25,12 +25,15 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 	const disabledRef = useRef(disabled);
 	const dragEnabled = drag && !disabled;
 	const dragEnabledRef = useRef(dragEnabled);
+	const pasteEnabled = paste && !disabled;
+	const pasteEnabledRef = useRef(pasteEnabled);
 	const policyRef = useRef(policy);
 	const customExtractionRef = useRef(Boolean(getFilesFromEvent));
 	useIsomorphicLayoutEffect(() => {
 		currentValueRef.current = currentValue;
 		disabledRef.current = disabled;
 		dragEnabledRef.current = dragEnabled;
+		pasteEnabledRef.current = pasteEnabled;
 		policyRef.current = policy;
 		customExtractionRef.current = Boolean(getFilesFromEvent);
 	});
@@ -136,6 +139,10 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 			removedFiles
 		});
 	}
+	function removeRejection(file) {
+		if (disabledRef.current || processingRef.current) return;
+		setFileRejections((current) => current.filter((rejection) => rejection.file !== file));
+	}
 	function clearRejections() {
 		if (disabledRef.current || processingRef.current || fileRejections.length === 0) return;
 		setFileRejections([]);
@@ -153,7 +160,7 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 		if (fileRejections.length > 0) setFileRejections([]);
 	}
 	function getRootProps(props = {}) {
-		const { onDragEnter, onDragOver, onDragLeave, onDragEnd, onDrop: callerOnDrop, ref, ...rootProps } = props;
+		const { onDragEnter, onDragOver, onDragLeave, onDragEnd, onDrop: callerOnDrop, onPaste, ref, ...rootProps } = props;
 		return {
 			...rootProps,
 			ref: (node) => {
@@ -207,6 +214,14 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 				if (event.defaultPrevented || !dragEnabledRef.current) return;
 				event.preventDefault();
 				intake(event, "drop");
+			},
+			onPaste: (event) => {
+				onPaste?.(event);
+				if (!isFilePaste(event.clipboardData)) return;
+				event.stopPropagation();
+				if (event.defaultPrevented || !pasteEnabledRef.current) return;
+				event.preventDefault();
+				intake(event, "paste");
 			}
 		};
 	}
@@ -326,6 +341,7 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 		multiple: policy?.multiple ?? true,
 		disabled,
 		dragEnabled,
+		pasteEnabled,
 		visualState,
 		isDragActive,
 		isDragAccept: visualState === "accept",
@@ -339,6 +355,7 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 		open,
 		removeFile,
 		clearFiles,
+		removeRejection,
 		clearRejections,
 		reset,
 		getRootProps,
@@ -346,11 +363,25 @@ function useDropzone({ value: controlledValue, defaultValue = [], onValueChange,
 	};
 }
 function defaultGetFilesFromEvent(event) {
-	return "dataTransfer" in event ? Array.from(event.dataTransfer.files) : Array.from(event.currentTarget.files ?? []);
+	if ("clipboardData" in event) return getClipboardFiles(event.clipboardData);
+	if ("dataTransfer" in event) return Array.from(event.dataTransfer.files);
+	return Array.from(event.currentTarget.files ?? []);
+}
+/** Safari exposes a pasted screenshot through `items` only, so `files` alone loses it. */
+function getClipboardFiles(clipboardData) {
+	const files = Array.from(clipboardData.files);
+	if (files.length > 0) return files;
+	return Array.from(clipboardData.items).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((file) => file !== null);
 }
 function isFileDrag(dataTransfer) {
 	return dataTransfer ? Array.from(dataTransfer.types).includes("Files") : false;
 }
+/** Clipboards that also carry text belong to the focused editor: only a text-free paste is an attachment. */
+function isFilePaste(clipboardData) {
+	if (!clipboardData) return false;
+	const types = Array.from(clipboardData.types);
+	return types.includes("Files") && !types.includes("text/plain");
+}
 function getRegisteredDropzoneRoot(event) {
 	for (const target of event.composedPath()) if (target && registeredDropzoneRoots.has(target)) return target;
 }

package/dist/inline-attachment.js

@@ -47,7 +47,7 @@ function GeneratingPlaceholder() {
 		"data-control-ui": "inline-attachment",
 		"data-control-family": "inline-attachment",
 		"data-slot": "placeholder",
-		className: cn("size-full", "halftone")
+		className: "size-full halftone"
 	});
 }
 function DocumentPlaceholder() {
@@ -65,8 +65,7 @@ function DocumentPlaceholder() {
 				/* @__PURE__ */ jsx("div", {
 					"data-control-ui": "inline-attachment",
 					"data-control-family": "inline-attachment",
-					"data-slot": "document-heading",
-					className: ""
+					"data-slot": "document-heading"
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "grid",
@@ -75,37 +74,32 @@ function DocumentPlaceholder() {
 							"data-control-ui": "inline-attachment",
 							"data-control-family": "inline-attachment",
 							"data-slot": "document-line",
-							"data-width": "long",
-							className: ""
+							"data-width": "long"
 						}),
 						/* @__PURE__ */ jsx("div", {
 							"data-control-ui": "inline-attachment",
 							"data-control-family": "inline-attachment",
 							"data-slot": "document-line",
-							"data-width": "medium",
-							className: ""
+							"data-width": "medium"
 						}),
 						/* @__PURE__ */ jsx("div", {
 							"data-control-ui": "inline-attachment",
 							"data-control-family": "inline-attachment",
 							"data-slot": "document-line",
-							"data-width": "longest",
-							className: ""
+							"data-width": "longest"
 						}),
 						/* @__PURE__ */ jsx("div", {
 							"data-control-ui": "inline-attachment",
 							"data-control-family": "inline-attachment",
 							"data-slot": "document-line",
-							"data-width": "short",
-							className: ""
+							"data-width": "short"
 						})
 					]
 				}),
 				/* @__PURE__ */ jsx("div", {
 					"data-control-ui": "inline-attachment",
 					"data-control-family": "inline-attachment",
-					"data-slot": "document-stamp",
-					className: ""
+					"data-slot": "document-stamp"
 				})
 			]
 		})
@@ -184,7 +178,7 @@ function InlineAttachmentAction({ className, ...props }) {
 		"data-control-ui": "inline-attachment",
 		"data-control-family": "inline-attachment",
 		"data-slot": "action",
-		className: cn(className),
+		className,
 		...props
 	});
 }

package/dist/inline-citation.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
 import { SourceFavicon, sourceHostname } from "./source-badge.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
 import { createContext, useContext, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeft, ArrowRight, ExternalLink } from "lucide-react";

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", "--cui-chat-layout-scroll-button-gap"];
+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", "--cui-chat-layout-turn-gap"];
 export type ChatLayoutKnobStyle = Partial<Record<(typeof chatLayoutKnobs)[number], string>>;
 //#endregion

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

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

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

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

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

@@ -2,6 +2,7 @@
 const choiceKnobs = [
 	"--cui-choice-radius",
 	"--cui-choice-border-color",
+	"--cui-choice-border-width",
 	"--cui-choice-checked-background",
 	"--cui-choice-checked-border-color",
 	"--cui-choice-shadow"

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

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

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/collapsible-knobs.ts
-const collapsibleKnobs = [];
+const collapsibleKnobs = ["--cui-collapsible-trigger-radius", "--cui-collapsible-trigger-hover-background"];
 //#endregion
 export { collapsibleKnobs };

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/filter-bar-knobs.d.ts
+export declare const filterBarKnobs: readonly ["--cui-filter-bar-background", "--cui-filter-bar-foreground", "--cui-filter-bar-border-color", "--cui-filter-bar-border-width", "--cui-filter-bar-radius", "--cui-filter-bar-height", "--cui-filter-bar-gap", "--cui-filter-bar-padding-inline", "--cui-filter-bar-font-size", "--cui-filter-bar-hover-background", "--cui-filter-bar-focus-ring-color"];
+export type FilterBarKnobStyle = Partial<Record<(typeof filterBarKnobs)[number], string>>;
+//#endregion

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

@@ -0,0 +1,16 @@
+//#region src/knob-contracts/filter-bar-knobs.ts
+const filterBarKnobs = [
+	"--cui-filter-bar-background",
+	"--cui-filter-bar-foreground",
+	"--cui-filter-bar-border-color",
+	"--cui-filter-bar-border-width",
+	"--cui-filter-bar-radius",
+	"--cui-filter-bar-height",
+	"--cui-filter-bar-gap",
+	"--cui-filter-bar-padding-inline",
+	"--cui-filter-bar-font-size",
+	"--cui-filter-bar-hover-background",
+	"--cui-filter-bar-focus-ring-color"
+];
+//#endregion
+export { filterBarKnobs };

package/dist/knob-contracts/infinite-canvas-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/infinite-canvas-knobs.d.ts
-export declare const infiniteCanvasKnobs: readonly ["--cui-infinite-canvas-radius", "--cui-infinite-canvas-background", "--cui-infinite-canvas-grid-dot-color", "--cui-infinite-canvas-border-color", "--cui-infinite-canvas-controls-radius", "--cui-infinite-canvas-controls-background", "--cui-infinite-canvas-controls-border-color", "--cui-infinite-canvas-controls-shadow"];
+export declare const infiniteCanvasKnobs: readonly ["--cui-infinite-canvas-radius", "--cui-infinite-canvas-background", "--cui-infinite-canvas-grid-dot-color", "--cui-infinite-canvas-border-color", "--cui-infinite-canvas-padding", "--cui-infinite-canvas-controls-item-radius", "--cui-infinite-canvas-controls-padding", "--cui-infinite-canvas-controls-radius", "--cui-infinite-canvas-controls-background", "--cui-infinite-canvas-controls-border-color", "--cui-infinite-canvas-controls-shadow"];
 export type InfiniteCanvasKnobStyle = Partial<Record<(typeof infiniteCanvasKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/infinite-canvas-knobs.js

@@ -4,6 +4,9 @@ const infiniteCanvasKnobs = [
 	"--cui-infinite-canvas-background",
 	"--cui-infinite-canvas-grid-dot-color",
 	"--cui-infinite-canvas-border-color",
+	"--cui-infinite-canvas-padding",
+	"--cui-infinite-canvas-controls-item-radius",
+	"--cui-infinite-canvas-controls-padding",
 	"--cui-infinite-canvas-controls-radius",
 	"--cui-infinite-canvas-controls-background",
 	"--cui-infinite-canvas-controls-border-color",

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

@@ -1,4 +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-gap", "--cui-page-layout-header-column-gap", "--cui-page-layout-header-row-gap", "--cui-page-layout-size", "--cui-page-layout-sticky-gap"];
+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", "--cui-page-layout-background", "--cui-page-layout-sticky-header-background"];
 export type PageLayoutKnobStyle = Partial<Record<(typeof pageLayoutKnobs)[number], string>>;
 //#endregion

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

@@ -5,11 +5,14 @@ const pageLayoutKnobs = [
 	"--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"
+	"--cui-page-layout-sticky-gap",
+	"--cui-page-layout-background",
+	"--cui-page-layout-sticky-header-background"
 ];
 //#endregion
 export { pageLayoutKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/popup-knobs.d.ts
-export declare const popupKnobs: readonly ["--cui-popup-radius", "--cui-popup-background", "--cui-popup-foreground", "--cui-popup-border-color", "--cui-popup-border-width", "--cui-popup-shadow", "--cui-popup-backdrop-filter", "--cui-popup-backdrop-background", "--cui-popup-item-radius", "--cui-popup-item-foreground", "--cui-popup-item-highlight-background", "--cui-popup-item-highlight-foreground", "--cui-popup-item-highlight-muted-foreground", "--cui-popup-item-disabled-opacity", "--cui-popup-separator-color", "--cui-popup-shortcut-foreground"];
+export declare const popupKnobs: readonly ["--cui-popup-radius", "--cui-popup-background", "--cui-popup-foreground", "--cui-popup-border-color", "--cui-popup-border-width", "--cui-popup-shadow", "--cui-popup-backdrop-filter", "--cui-popup-backdrop-background", "--cui-popup-backdrop-blur", "--cui-popup-item-radius", "--cui-popup-item-foreground", "--cui-popup-item-highlight-background", "--cui-popup-item-highlight-foreground", "--cui-popup-item-highlight-muted-foreground", "--cui-popup-item-disabled-opacity", "--cui-popup-separator-color", "--cui-popup-shortcut-foreground"];
 export type PopupKnobStyle = Partial<Record<(typeof popupKnobs)[number], string>>;
 //#endregion

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

@@ -8,6 +8,7 @@ const popupKnobs = [
 	"--cui-popup-shadow",
 	"--cui-popup-backdrop-filter",
 	"--cui-popup-backdrop-background",
+	"--cui-popup-backdrop-blur",
 	"--cui-popup-item-radius",
 	"--cui-popup-item-foreground",
 	"--cui-popup-item-highlight-background",

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-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 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-stroke", "--cui-table-of-contents-rail-size", "--cui-table-of-contents-trail-stroke", "--cui-table-of-contents-trail-size", "--cui-table-of-contents-indicator-foreground"];
 export type TableOfContentsKnobStyle = Partial<Record<(typeof tableOfContentsKnobs)[number], string>>;
 //#endregion

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

@@ -21,13 +21,11 @@ const tableOfContentsKnobs = [
 	"--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-stroke",
 	"--cui-table-of-contents-rail-size",
-	"--cui-table-of-contents-trail-background",
+	"--cui-table-of-contents-trail-stroke",
 	"--cui-table-of-contents-trail-size",
-	"--cui-table-of-contents-trail-radius",
-	"--cui-table-of-contents-highlight-radius",
-	"--cui-table-of-contents-highlight-background"
+	"--cui-table-of-contents-indicator-foreground"
 ];
 //#endregion
 export { tableOfContentsKnobs };

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

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

package/dist/markdown-block.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "./lib/cn.js";
+import { ScrollArea } from "./ui/scroll-area.js";
 import { CodeCopy } from "./ui/code.js";
 import { Markdown } from "./ui/markdown.js";
 import { createContext, useContext } from "react";
@@ -64,13 +65,16 @@ function MarkdownBlockCopy({ "aria-label": ariaLabel = "Copy markdown", ...props
 }
 function MarkdownBlockContent({ children, className, ...props }) {
 	const code = useMarkdownBlockContext();
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "markdown-block",
-		"data-control-family": "markdown-block",
-		"data-slot": "content",
-		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 })
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		maxHeight: "420px",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "markdown-block",
+			"data-control-family": "markdown-block",
+			"data-slot": "content",
+			className,
+			...props,
+			children: children ?? /* @__PURE__ */ jsx(Markdown, { content: code })
+		})
 	});
 }
 //#endregion

package/dist/scripts/contrast-eval.js

@@ -169,13 +169,13 @@ function splitTopLevel(text) {
 }
 const unresolved = (reason) => ({ unresolved: reason });
 const isUnresolved = (result) => Boolean(result?.unresolved);
-function evaluateCalc(expression, base, tokens, seen, depth) {
+function evaluateCalc(expression, keyword, base, tokens, seen, depth) {
 	const inner = expression.slice(5, -1).trim();
 	const match = /^(\S+)\s*([+\-*])\s*(\S+)$/.exec(inner);
 	if (!match) return null;
 	const [, leftText, operator, rightText] = match;
 	const operand = (text) => {
-		if (text === "l" || text === "alpha") return base;
+		if (text === keyword) return base;
 		const number = scalar(text);
 		if (number !== null) return number;
 		const nested = resolveScalar(text, tokens, seen, depth + 1);
@@ -204,10 +204,11 @@ function resolveScalar(value, tokens, seen, depth) {
 const literalChannel = (text, allowPercent) => allowPercent || !text.endsWith("%") ? scalar(text) : null;
 const channelValue = (text, keyword, base, tokens, seen, depth) => {
 	if (text === keyword) return base;
-	if (text.startsWith("calc(")) return evaluateCalc(text, base, tokens, seen, depth);
+	if (text.startsWith("calc(")) return evaluateCalc(text, keyword, base, tokens, seen, depth);
+	if (text.startsWith("var(")) return resolveScalar(text, tokens, seen, depth);
 	return literalChannel(text, keyword === "l");
 };
-const alphaValue = (text, base, tokens, seen, depth) => text.startsWith("calc(") ? evaluateCalc(text, base, tokens, seen, depth) : resolveScalar(text, tokens, seen, depth);
+const alphaValue = (text, base, tokens, seen, depth) => text.startsWith("calc(") ? evaluateCalc(text, "alpha", base, tokens, seen, depth) : resolveScalar(text, tokens, seen, depth);
 const CHANNEL_KEYWORDS = [
 	"l",
 	"c",

package/dist/styles/index.css

@@ -39,18 +39,20 @@
 @import "./recipes/color-picker-values.css";
 @import "./recipes/empty.css";
 @import "./recipes/context.css";
+@import "./recipes/infinite-canvas.css";
+@import "./recipes/resizable.css";
+@import "./recipes/separator.css";
+@import "./recipes/toolbar.css";
 @import "./recipes/popup-drawer.css";
 @import "./recipes/dockable-panel.css";
-@import "./recipes/separator.css";
 @import "./recipes/item.css";
 @import "./recipes/dropzone.css";
 @import "./recipes/dynamic-notification.css";
 @import "./recipes/dynamic-notification-input.css";
 @import "./recipes/dynamic-notification-motion.css";
 @import "./recipes/environment-variables.css";
-@import "./recipes/resizable.css";
+@import "./recipes/filter-bar.css";
 @import "./recipes/gradient-editor.css";
-@import "./recipes/infinite-canvas.css";
 @import "./recipes/inline-attachment.css";
 @import "./recipes/source-badge.css";
 @import "./recipes/inline-citation.css";
@@ -73,7 +75,6 @@
 @import "./recipes/thread-rail.css";
 @import "./recipes/timeline.css";
 @import "./recipes/popup-toast.css";
-@import "./recipes/toolbar.css";
 @import "./recipes/transcript-divider.css";
 @import "./recipes/tree.css";
 @import "./type-scale.css";

package/dist/styles/recipes/button-group.css

@@ -1,7 +1,7 @@
 @layer components {
   :where([data-control-family="button-group"][data-slot="root"]) {
     --cui-button-group-text-radius: var(--radius-control);
-    --cui-button-group-text-background: oklch(from var(--card) l c h / 0.72);
+    --cui-button-group-text-background: var(--control-fill);
     --cui-button-group-text-foreground: var(--muted-foreground);
     --cui-button-group-separator-background: var(--border);
   }

package/dist/styles/recipes/button.css

@@ -47,7 +47,7 @@
     --cui-button-open-background: var(--cui-button-hover-background);
     --cui-button-open-foreground: var(--cui-button-hover-foreground);
     --cui-button-open-shadow: var(--cui-button-shadow);
-    border-radius: var(--cui-button-radius);
+    border-radius: var(--nest-radius, var(--cui-button-radius));
     background-color: var(--cui-button-background);
     background-image: var(--cui-button-background-image);
     box-shadow: var(--cui-button-shadow);
@@ -142,7 +142,7 @@
   }
 
   :where([data-control-family="button"][data-variant="surface"]) {
-    --cui-button-background: oklch(from var(--card) l c h / 0.72);
+    --cui-button-background: var(--control-fill);
     --cui-button-foreground: var(--foreground);
     --cui-button-hover-background: oklch(from var(--foreground) l c h / 0.05);
     --cui-button-hover-foreground: var(--foreground);

package/dist/styles/recipes/chat-composer.css

@@ -6,7 +6,7 @@
     --cui-chat-composer-shell-backdrop-filter: none;
     --cui-chat-composer-shell-border-color: var(--border);
     --cui-chat-composer-shell-border-width: var(--control-rim-width);
-    --cui-chat-composer-shell-radius: var(--radius-field);
+    --cui-chat-composer-shell-radius: var(--radius-composer);
     --cui-chat-composer-shell-shadow: var(--shadow-md);
     --cui-chat-composer-input-foreground: var(--card-foreground);
     --cui-chat-composer-input-placeholder-foreground: var(--muted-foreground);
@@ -15,8 +15,8 @@
     --cui-chat-composer-mention-border-color: transparent;
     --cui-chat-composer-mention-border-width: 0px;
     --cui-chat-composer-mention-background: oklch(from var(--primary) l c h / 0.1);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+    padding-inline: var(--composer-padding);
+    padding-block: calc(var(--spacing) * 1) var(--composer-padding);
     background: var(--cui-chat-composer-root-background);
   }
 
@@ -41,6 +41,10 @@
     outline-offset: var(--focus-ring-offset);
   }
 
+  :where([data-control-family="chat-composer"][data-slot="shell"] [data-control-family="dropzone"][data-slot="overlay"]) {
+    --cui-dropzone-surface-radius: max(0px, calc(var(--cui-chat-composer-shell-radius) - var(--cui-chat-composer-shell-border-width)));
+  }
+
   :where([data-control-family="chat-composer"][data-slot="accent"]) {
     block-size: 1px;
     background-image: linear-gradient(to right, transparent, oklch(from var(--foreground) l c h / 0.2), transparent);
@@ -76,11 +80,15 @@
   }
 
   :where([data-control-family="chat-composer"][data-slot="toolbar"]) {
-    min-block-size: calc(var(--spacing) * 10);
+    --nest-radius: max(
+      0px,
+      calc(var(--cui-chat-composer-shell-radius) - var(--cui-chat-composer-shell-border-width) - var(--composer-padding))
+    );
+    min-block-size: calc(var(--control-h-xs) + var(--composer-padding) + var(--spacing) * 0.5);
     gap: calc(var(--spacing) * 2);
     flex-wrap: wrap;
-    padding-inline: calc(var(--spacing) * 2.5);
-    padding-block-end: calc(var(--spacing) * 2);
+    padding-inline: var(--composer-padding);
+    padding-block-end: var(--composer-padding);
   }
 
   :where([data-control-family="chat-composer"][data-slot="tools"]) {

package/dist/styles/recipes/chat-layout.css

@@ -6,27 +6,48 @@
     --cui-chat-layout-border-width: var(--control-rim-width);
     --cui-chat-layout-shadow: var(--shadow-md);
     --cui-chat-layout-scroll-button-gap: calc(var(--spacing) * 3);
-    background: var(--cui-chat-layout-background);
+    --cui-chat-layout-turn-gap: calc(var(--spacing) * 2);
+    container: chat-layout / inline-size;
+  }
+
+  :where(
+    [data-control-family="chat-layout"][data-slot="root"][data-chrome="panel"]:has([data-control-family="chat-layout"][data-slot="dock"])
+  ) {
+    --cui-chat-layout-radius: max(
+      var(--radius-scene),
+      calc(var(--radius-composer) + var(--composer-padding) + var(--cui-chat-layout-border-width))
+    );
   }
 
   :where([data-control-family="chat-layout"][data-slot="root"][data-chrome="panel"]) {
+    background: var(--cui-chat-layout-background);
     border: var(--cui-chat-layout-border-width) solid var(--cui-chat-layout-border-color);
     border-radius: var(--cui-chat-layout-radius);
     box-shadow: var(--cui-chat-layout-shadow);
   }
 
+  :where([data-popup-part="surface"] [data-control-family="chat-layout"][data-slot="root"][data-chrome="embedded"]) {
+    --cui-chat-layout-background: var(--cui-popup-background);
+    --cui-chat-layout-radius: var(--cui-popup-radius);
+    border-radius: var(--cui-chat-layout-radius);
+  }
+
   :where([data-control-family="chat-layout"][data-slot="thread-content"]) {
     gap: calc(var(--spacing) * 8);
     padding-block: calc(var(--spacing) * 6);
     padding-inline: calc(var(--spacing) * 4);
   }
 
-  @media (width >= 40rem) {
+  @container chat-layout (width >= 40rem) {
     :where([data-control-family="chat-layout"][data-slot="thread-content"]) {
       padding-inline: calc(var(--spacing) * 8);
     }
   }
 
+  :where([data-control-family="chat-layout"][data-slot="turn"]) {
+    gap: var(--cui-chat-layout-turn-gap);
+  }
+
   :where([data-control-family="chat-layout"][data-slot="dock"])::before {
     content: "";
     position: absolute;
@@ -89,3 +110,9 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-chat-layout-turn-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}