@ctrl-ui/react 0.8.20 → 0.9.0

package/README.md

@@ -71,6 +71,7 @@ Install a peer only when you import the component that needs it.
 | Component | Peer |
 | --- | --- |
 | `ui/calendar` | `react-day-picker` |
+| `ui/chart` | `@tanstack/charts` |
 | `ui/code`, `ui/code-diff` | `@tanstack/react-virtual`, `diff`, `shiki` |
 | `ui/command` | `cmdk` |
 | `ui/flow` | `@xyflow/react` |

package/dist/action-bar.d.ts

@@ -14,7 +14,6 @@ export type ActionBarContextValue = {
 export type ActionBarProps = Omit<ComponentProps<"div">, "style"> & {
   label?: string;
   align?: "start" | "end";
-  context?: ActionBarContextValue;
   copyValue?: ActionBarCopyValue;
   editValue?: ActionBarCopyValue;
   onCopy?: (value: string) => void;
@@ -23,7 +22,7 @@ export type ActionBarProps = Omit<ComponentProps<"div">, "style"> & {
   onEditError?: (error: unknown) => void;
   style?: CSSProperties & ActionBarKnobStyle;
 };
-export declare function ActionBar({ label, align, className, children, context, copyValue, editValue, onCopy, onCopyError, onEdit, onEditError, ...props }: ActionBarProps): import("react").JSX.Element;
+export declare function ActionBar({ label, align, className, children, copyValue, editValue, onCopy, onCopyError, onEdit, onEditError, ...props }: ActionBarProps): import("react").JSX.Element;
 type ActionBarItemBaseProps = Omit<ComponentProps<typeof Button>, "iconOnly" | "children"> & {
   icon?: ReactNode;
 };

package/dist/action-bar.js

@@ -11,15 +11,14 @@ const ActionBarContext = createContext({});
 async function resolveCopyValue(value) {
 	return typeof value === "function" ? await value() : value;
 }
-function ActionBar({ label = "Message actions", align = "start", className, children, context, copyValue, editValue, onCopy, onCopyError, onEdit, onEditError, ...props }) {
+function ActionBar({ label = "Message actions", align = "start", className, children, copyValue, editValue, onCopy, onCopyError, onEdit, onEditError, ...props }) {
 	const actionContext = {
-		...context,
-		copyValue: copyValue ?? context?.copyValue,
-		editValue: editValue ?? context?.editValue,
-		onCopy: onCopy ?? context?.onCopy,
-		onCopyError: onCopyError ?? context?.onCopyError,
-		onEdit: onEdit ?? context?.onEdit,
-		onEditError: onEditError ?? context?.onEditError
+		copyValue,
+		editValue,
+		onCopy,
+		onCopyError,
+		onEdit,
+		onEditError
 	};
 	return /* @__PURE__ */ jsx(ActionBarContext.Provider, {
 		value: actionContext,

package/dist/blocks/design-canvas-inspector.js

@@ -2,9 +2,12 @@
 import { Button } from "../ui/button.js";
 import { Heading } from "../ui/typography.js";
 import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
+import { ColorPickerArea } from "../ui/color-picker-area.js";
+import { ColorPickerHue } from "../ui/color-picker-sliders.js";
 import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldScrubArea } from "../ui/number-field.js";
-import { ColorPicker, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "../ui/color-picker.js";
+import { ColorPickerEyeDropper, ColorPickerInput } from "../ui/color-picker-values.js";
+import { ColorPicker, ColorPickerContent, ColorPickerTrigger } from "../ui/color-picker.js";
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty.js";
 import { Separator } from "../ui/separator.js";
 import { Toggle } from "../ui/toggle.js";

package/dist/blocks/file-explorer.js

@@ -12,9 +12,9 @@ import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
 import { Input } from "../ui/input.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { groupFileExplorerItems, orderFileExplorerEntries, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Fragment, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, FileIcon, FolderIcon, MoreHorizontalIcon, SearchIcon, XIcon } from "lucide-react";

package/dist/chat-message.js

@@ -148,14 +148,7 @@ function useMessageEditor({ value, onSave, onSaveError }) {
 	const inputRef = useRef(null);
 	const triggerRef = useRef(null);
 	const savingRef = useRef(false);
-	const mountedRef = useRef(false);
 	const errorId = useId();
-	useEffect(() => {
-		mountedRef.current = true;
-		return () => {
-			mountedRef.current = false;
-		};
-	}, []);
 	useLayoutEffect(() => {
 		if (editing) {
 			const input = inputRef.current;
@@ -190,15 +183,13 @@ function useMessageEditor({ value, onSave, onSaveError }) {
 		setFailed(false);
 		try {
 			await onSave(draft);
-			if (mountedRef.current) setEditing(false);
+			setEditing(false);
 		} catch (error) {
-			if (mountedRef.current) {
-				setFailed(true);
-				onSaveError?.(error);
-			}
+			setFailed(true);
+			onSaveError?.(error);
 		} finally {
 			savingRef.current = false;
-			if (mountedRef.current) setSaving(false);
+			setSaving(false);
 		}
 	}
 	return {

package/dist/hooks/use-textarea-trigger-menu.d.ts

@@ -1,7 +1,25 @@
-import { TriggerConfig, TriggerMenuController, TriggerMenuItemData } from "./use-trigger-menu.js";
-import { RefObject } from "react";
+import { TriggerMatch } from "../lib/trigger-detect.js";
+import { TriggerConfig, TriggerMenuInputAria, TriggerMenuItemData } from "./use-trigger-menu.js";
+import { ComponentProps, RefObject } from "react";
 //#region src/hooks/use-textarea-trigger-menu.d.ts
 export declare function useTextareaTriggerMenu<Item extends TriggerMenuItemData>(ref: RefObject<HTMLTextAreaElement | null>, options: {
   triggers: readonly TriggerConfig<Item>[];
-}): TriggerMenuController<Item>;
+}): {
+  open: boolean;
+  items: readonly Item[];
+  activeIndex: number;
+  anchorRect: DOMRect | null;
+  activeChar: string | null;
+  query: string;
+  listId: string;
+  optionId: (index: number) => string;
+  inputAria: TriggerMenuInputAria;
+  report: (match: TriggerMatch | null, anchorRect: DOMRect | null) => void;
+  handleKeyDown: (key: string) => boolean;
+  setActiveIndex: (index: number) => void;
+  select: (item: Item) => void;
+  close: () => void;
+  setOpen: (open: boolean) => void;
+  getTextareaProps: (props?: ComponentProps<"textarea">) => ComponentProps<"textarea">;
+};
 //#endregion

package/dist/hooks/use-textarea-trigger-menu.js

@@ -1,8 +1,8 @@
 "use client";
 import { isComposingKey, useTriggerMenu } from "./use-trigger-menu.js";
 import { caretRectInTextarea, detectTrigger } from "../lib/trigger-detect.js";
-import { useEffect, useEffectEvent } from "react";
 //#region src/hooks/use-textarea-trigger-menu.ts
+const CLOSE_AFTER_BLUR_MS = 120;
 function replaceRange(element, start, end, text) {
 	element.focus();
 	element.setSelectionRange(start, end);
@@ -27,47 +27,43 @@ function useTextareaTriggerMenu(ref, options) {
 			});
 		}
 	});
-	const syncTrigger = useEffectEvent(() => {
-		const element = ref.current;
-		if (!element) return;
-		const caret = element.selectionStart ?? element.value.length;
+	function reportTriggerAtCaret(textarea) {
+		const caret = textarea.selectionStart ?? textarea.value.length;
 		const chars = options.triggers.map((trigger) => trigger.char);
-		const match = detectTrigger(element.value.slice(0, caret), chars);
-		controller.report(match, match === null ? null : caretRectInTextarea(element, match.start));
-	});
-	const handleKeyDown = useEffectEvent((event) => {
-		if (isComposingKey(event)) return;
-		if (controller.open && controller.handleKeyDown(event.key)) event.preventDefault();
-	});
-	const closeAfterBlur = useEffectEvent(() => {
-		controller.close();
-	});
-	useEffect(() => {
-		const element = ref.current;
-		if (!element) return;
-		function onKeyDown(event) {
-			handleKeyDown(event);
-		}
-		function syncAfterInput() {
-			window.setTimeout(syncTrigger, 0);
-		}
-		function onBlur() {
-			window.setTimeout(closeAfterBlur, 120);
-		}
-		element.addEventListener("input", syncAfterInput);
-		element.addEventListener("keydown", onKeyDown);
-		element.addEventListener("keyup", syncTrigger);
-		element.addEventListener("click", syncTrigger);
-		element.addEventListener("blur", onBlur);
-		return () => {
-			element.removeEventListener("input", syncAfterInput);
-			element.removeEventListener("keydown", onKeyDown);
-			element.removeEventListener("keyup", syncTrigger);
-			element.removeEventListener("click", syncTrigger);
-			element.removeEventListener("blur", onBlur);
+		const match = detectTrigger(textarea.value.slice(0, caret), chars);
+		controller.report(match, match === null ? null : caretRectInTextarea(textarea, match.start));
+	}
+	function getTextareaProps(props = {}) {
+		const { onChange, onKeyDown, onKeyUp, onClick, onBlur, ...textareaProps } = props;
+		return {
+			...textareaProps,
+			...controller.inputAria,
+			onChange: (event) => {
+				onChange?.(event);
+				reportTriggerAtCaret(event.currentTarget);
+			},
+			onKeyDown: (event) => {
+				if (!isComposingKey(event.nativeEvent) && controller.open && controller.handleKeyDown(event.key)) event.preventDefault();
+				onKeyDown?.(event);
+			},
+			onKeyUp: (event) => {
+				onKeyUp?.(event);
+				reportTriggerAtCaret(event.currentTarget);
+			},
+			onClick: (event) => {
+				onClick?.(event);
+				reportTriggerAtCaret(event.currentTarget);
+			},
+			onBlur: (event) => {
+				onBlur?.(event);
+				window.setTimeout(controller.close, CLOSE_AFTER_BLUR_MS);
+			}
 		};
-	}, [ref]);
-	return controller;
+	}
+	return {
+		...controller,
+		getTextareaProps
+	};
 }
 //#endregion
 export { useTextareaTriggerMenu };

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

@@ -27,6 +27,7 @@ export declare function useUserAsk({ onComplete, onDismiss }: Pick<UserAskProps,
   questions: UserAskQuestionEntry[];
   activeIndex: number;
   activeQuestion: UserAskQuestionEntry;
+  hasNavigated: boolean;
   canContinue: boolean;
   isLastQuestion: boolean;
   registerQuestion: (entry: UserAskQuestionEntry) => void;

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

@@ -20,6 +20,7 @@ function useUserAsk({ onComplete, onDismiss }) {
 	const [selections, setSelections] = useState({});
 	const [freeformTexts, setFreeformTexts] = useState({});
 	const [requestedIndex, setRequestedIndex] = useState(0);
+	const [hasNavigated, setHasNavigated] = useState(false);
 	const [registerQuestion] = useState(() => (entry) => {
 		setQuestions((previous) => upsert(previous, entry));
 	});
@@ -102,7 +103,9 @@ function useUserAsk({ onComplete, onDismiss }) {
 	const canContinue = activeQuestion !== void 0 && answerFor(activeQuestion.id) !== void 0;
 	const isLastQuestion = activeIndex === questions.length - 1;
 	function goTo(index) {
-		setRequestedIndex(Math.max(0, Math.min(index, questions.length - 1)));
+		const targetIndex = Math.max(0, Math.min(index, questions.length - 1));
+		if (targetIndex !== activeIndex) setHasNavigated(true);
+		setRequestedIndex(targetIndex);
 	}
 	function resolveAnswers() {
 		const answers = {};
@@ -174,6 +177,7 @@ function useUserAsk({ onComplete, onDismiss }) {
 		questions,
 		activeIndex,
 		activeQuestion,
+		hasNavigated,
 		canContinue,
 		isLastQuestion,
 		registerQuestion,

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/audio-recorder-knobs.d.ts
-export declare const audioRecorderKnobs: readonly ["--cui-audio-recorder-foreground", "--cui-audio-recorder-active-foreground", "--cui-audio-recorder-recording-ring-color", "--cui-audio-recorder-error-foreground", "--cui-audio-recorder-meta-foreground"];
+export declare const audioRecorderKnobs: readonly ["--cui-audio-recorder-foreground", "--cui-audio-recorder-recording-foreground", "--cui-audio-recorder-recorded-foreground", "--cui-audio-recorder-recording-ring-color", "--cui-audio-recorder-error-foreground", "--cui-audio-recorder-meta-foreground"];
 export type AudioRecorderKnobStyle = Partial<Record<(typeof audioRecorderKnobs)[number], string>>;
 //#endregion

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

@@ -1,7 +1,8 @@
 //#region src/knob-contracts/audio-recorder-knobs.ts
 const audioRecorderKnobs = [
 	"--cui-audio-recorder-foreground",
-	"--cui-audio-recorder-active-foreground",
+	"--cui-audio-recorder-recording-foreground",
+	"--cui-audio-recorder-recorded-foreground",
 	"--cui-audio-recorder-recording-ring-color",
 	"--cui-audio-recorder-error-foreground",
 	"--cui-audio-recorder-meta-foreground"

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/chart-knobs.d.ts
+export declare const chartKnobs: readonly ["--cui-chart-foreground", "--cui-chart-background", "--cui-chart-line-size", "--cui-chart-area-opacity", "--cui-chart-hatch-opacity", "--cui-chart-hatch-tint-opacity", "--cui-chart-tooltip-background", "--cui-chart-tooltip-foreground", "--cui-chart-tooltip-border-color", "--cui-chart-tooltip-border-width", "--cui-chart-tooltip-radius", "--cui-chart-tooltip-shadow", "--cui-chart-tooltip-padding", "--cui-chart-legend-gap", "--cui-chart-swatch-size", "--cui-chart-swatch-radius", "--cui-chart-animation-duration", "--cui-chart-transition-duration", "--cui-chart-easing"];
+export type ChartKnobStyle = Partial<Record<(typeof chartKnobs)[number], string>>;
+//#endregion

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

@@ -0,0 +1,24 @@
+//#region src/knob-contracts/chart-knobs.ts
+const chartKnobs = [
+	"--cui-chart-foreground",
+	"--cui-chart-background",
+	"--cui-chart-line-size",
+	"--cui-chart-area-opacity",
+	"--cui-chart-hatch-opacity",
+	"--cui-chart-hatch-tint-opacity",
+	"--cui-chart-tooltip-background",
+	"--cui-chart-tooltip-foreground",
+	"--cui-chart-tooltip-border-color",
+	"--cui-chart-tooltip-border-width",
+	"--cui-chart-tooltip-radius",
+	"--cui-chart-tooltip-shadow",
+	"--cui-chart-tooltip-padding",
+	"--cui-chart-legend-gap",
+	"--cui-chart-swatch-size",
+	"--cui-chart-swatch-radius",
+	"--cui-chart-animation-duration",
+	"--cui-chart-transition-duration",
+	"--cui-chart-easing"
+];
+//#endregion
+export { chartKnobs };

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-border-width", "--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-background", "--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

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

package/dist/knob-contracts/dockable-panel-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/dockable-panel-knobs.d.ts
-export declare const dockablePanelKnobs: readonly ["--cui-dockable-panel-radius", "--cui-dockable-panel-background", "--cui-dockable-panel-foreground", "--cui-dockable-panel-border-color", "--cui-dockable-panel-border-width", "--cui-dockable-panel-shadow", "--cui-dockable-panel-drop-zone-active-background", "--cui-dockable-panel-drop-zone-active-border-color"];
+export declare const dockablePanelKnobs: readonly ["--cui-dockable-panel-radius", "--cui-dockable-panel-background", "--cui-dockable-panel-foreground", "--cui-dockable-panel-border-color", "--cui-dockable-panel-border-width", "--cui-dockable-panel-shadow", "--cui-dockable-panel-drop-zone-active-background", "--cui-dockable-panel-drop-zone-active-border-color", "--cui-dockable-panel-drop-zone-background"];
 export type DockablePanelKnobStyle = Partial<Record<(typeof dockablePanelKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/dockable-panel-knobs.js

@@ -7,7 +7,8 @@ const dockablePanelKnobs = [
 	"--cui-dockable-panel-border-width",
 	"--cui-dockable-panel-shadow",
 	"--cui-dockable-panel-drop-zone-active-background",
-	"--cui-dockable-panel-drop-zone-active-border-color"
+	"--cui-dockable-panel-drop-zone-active-border-color",
+	"--cui-dockable-panel-drop-zone-background"
 ];
 //#endregion
 export { dockablePanelKnobs };

package/dist/knob-contracts/emoji-picker-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/emoji-picker-knobs.d.ts
-export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-height", "--cui-emoji-picker-cell-radius", "--cui-emoji-picker-active-background", "--cui-emoji-picker-header-background", "--cui-emoji-picker-header-foreground"];
+export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-height", "--cui-emoji-picker-cell-radius", "--cui-emoji-picker-glyph-size", "--cui-emoji-picker-active-background", "--cui-emoji-picker-header-background", "--cui-emoji-picker-header-foreground"];
 export type EmojiPickerKnobStyle = Partial<Record<(typeof emojiPickerKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/emoji-picker-knobs.js

@@ -3,6 +3,7 @@ const emojiPickerKnobs = [
 	"--cui-emoji-picker-cell-size",
 	"--cui-emoji-picker-height",
 	"--cui-emoji-picker-cell-radius",
+	"--cui-emoji-picker-glyph-size",
 	"--cui-emoji-picker-active-background",
 	"--cui-emoji-picker-header-background",
 	"--cui-emoji-picker-header-foreground"

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/empty-knobs.d.ts
-export declare const emptyKnobs: readonly ["--cui-empty-radius", "--cui-empty-background", "--cui-empty-border-color", "--cui-empty-border-width", "--cui-empty-border-style", "--cui-empty-media-radius", "--cui-empty-media-background", "--cui-empty-shadow", "--cui-empty-foreground", "--cui-empty-description-foreground", "--cui-empty-media-foreground", "--cui-empty-padding", "--cui-empty-gap", "--cui-empty-header-gap", "--cui-empty-content-gap", "--cui-empty-content-size", "--cui-empty-media-size", "--cui-empty-media-icon-size", "--cui-empty-font-size", "--cui-empty-title-font-weight"];
+export declare const emptyKnobs: readonly ["--cui-empty-radius", "--cui-empty-background", "--cui-empty-border-color", "--cui-empty-border-width", "--cui-empty-border-style", "--cui-empty-media-radius", "--cui-empty-media-background", "--cui-empty-shadow", "--cui-empty-foreground", "--cui-empty-description-foreground", "--cui-empty-media-foreground", "--cui-empty-padding", "--cui-empty-gap", "--cui-empty-header-gap", "--cui-empty-content-gap", "--cui-empty-content-size", "--cui-empty-media-size", "--cui-empty-media-icon-size", "--cui-empty-font-size", "--cui-empty-title-font-weight", "--cui-empty-media-background-image"];
 export type EmptyKnobStyle = Partial<Record<(typeof emptyKnobs)[number], string>>;
 //#endregion

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

@@ -19,7 +19,8 @@ const emptyKnobs = [
 	"--cui-empty-media-size",
 	"--cui-empty-media-icon-size",
 	"--cui-empty-font-size",
-	"--cui-empty-title-font-weight"
+	"--cui-empty-title-font-weight",
+	"--cui-empty-media-background-image"
 ];
 //#endregion
 export { emptyKnobs };

package/dist/knob-contracts/icon-picker-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/icon-picker-knobs.d.ts
-export declare const iconPickerKnobs: readonly ["--cui-icon-picker-cell-size", "--cui-icon-picker-cell-radius", "--cui-icon-picker-foreground", "--cui-icon-picker-active-background"];
+export declare const iconPickerKnobs: readonly ["--cui-icon-picker-cell-size", "--cui-icon-picker-cell-radius", "--cui-icon-picker-icon-size", "--cui-icon-picker-foreground", "--cui-icon-picker-cell-hover-background", "--cui-icon-picker-cell-pressed-background"];
 export type IconPickerKnobStyle = Partial<Record<(typeof iconPickerKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/icon-picker-knobs.js

@@ -2,8 +2,10 @@
 const iconPickerKnobs = [
 	"--cui-icon-picker-cell-size",
 	"--cui-icon-picker-cell-radius",
+	"--cui-icon-picker-icon-size",
 	"--cui-icon-picker-foreground",
-	"--cui-icon-picker-active-background"
+	"--cui-icon-picker-cell-hover-background",
+	"--cui-icon-picker-cell-pressed-background"
 ];
 //#endregion
 export { iconPickerKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/resizable-knobs.d.ts
-export declare const resizableKnobs: readonly ["--cui-resizable-group-background", "--cui-resizable-group-radius", "--cui-resizable-group-border-color", "--cui-resizable-group-border-width", "--cui-resizable-handle-color", "--cui-resizable-handle-hover-background", "--cui-resizable-handle-active-background", "--cui-resizable-grip-radius", "--cui-resizable-grip-background", "--cui-resizable-grip-foreground"];
+export declare const resizableKnobs: readonly ["--cui-resizable-group-background", "--cui-resizable-group-radius", "--cui-resizable-group-border-color", "--cui-resizable-group-border-width", "--cui-resizable-handle-hover-background", "--cui-resizable-handle-active-background", "--cui-resizable-grip-radius", "--cui-resizable-grip-background", "--cui-resizable-grip-foreground", "--cui-resizable-handle-background"];
 export type ResizableKnobStyle = Partial<Record<(typeof resizableKnobs)[number], string>>;
 //#endregion

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

@@ -4,12 +4,12 @@ const resizableKnobs = [
 	"--cui-resizable-group-radius",
 	"--cui-resizable-group-border-color",
 	"--cui-resizable-group-border-width",
-	"--cui-resizable-handle-color",
 	"--cui-resizable-handle-hover-background",
 	"--cui-resizable-handle-active-background",
 	"--cui-resizable-grip-radius",
 	"--cui-resizable-grip-background",
-	"--cui-resizable-grip-foreground"
+	"--cui-resizable-grip-foreground",
+	"--cui-resizable-handle-background"
 ];
 //#endregion
 export { resizableKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/sidebar-knobs.d.ts
-export declare const sidebarKnobs: readonly ["--cui-sidebar-nav-height", "--cui-sidebar-nav-background", "--cui-sidebar-nav-foreground", "--cui-sidebar-nav-border-color", "--cui-sidebar-nav-border-width", "--cui-sidebar-nav-shadow", "--cui-sidebar-nav-item-radius", "--cui-sidebar-nav-item-active-background", "--cui-sidebar-nav-item-active-foreground", "--cui-sidebar-nav-gap", "--cui-sidebar-menu-badge-height", "--cui-sidebar-menu-badge-background", "--cui-sidebar-menu-badge-foreground", "--cui-sidebar-rail-divider-background", "--cui-sidebar-wrapper-background", "--cui-sidebar-wrapper-background-image", "--cui-sidebar-inner-background", "--cui-sidebar-inner-border-color", "--cui-sidebar-inner-background-image", "--cui-sidebar-inner-backdrop-filter", "--cui-sidebar-inner-border-width", "--cui-sidebar-inner-radius", "--cui-sidebar-inner-shadow", "--cui-sidebar-header-background", "--cui-sidebar-header-shadow", "--cui-sidebar-inset-background", "--cui-sidebar-inset-background-image", "--cui-sidebar-inset-shadow", "--cui-sidebar-inset-border-color", "--cui-sidebar-inset-border-width", "--cui-sidebar-inset-radius", "--cui-sidebar-inset-inset", "--cui-sidebar-menu-button-radius", "--cui-sidebar-group-label-foreground", "--cui-sidebar-menu-button-foreground", "--cui-sidebar-menu-button-hover-background", "--cui-sidebar-menu-button-hover-foreground", "--cui-sidebar-menu-button-hover-shadow", "--cui-sidebar-menu-button-active-background", "--cui-sidebar-menu-button-active-foreground", "--cui-sidebar-menu-button-active-shadow", "--cui-sidebar-menu-button-track-active-foreground", "--cui-sidebar-menu-button-height", "--cui-sidebar-menu-button-padding-block", "--cui-sidebar-menu-button-padding-inline", "--cui-sidebar-menu-button-font-size", "--cui-sidebar-menu-button-font-weight", "--cui-sidebar-menu-button-active-font-weight", "--cui-sidebar-group-label-font-size", "--cui-sidebar-group-label-font-weight", "--cui-sidebar-group-label-letter-spacing", "--cui-sidebar-group-label-text-transform", "--cui-sidebar-group-label-padding", "--cui-sidebar-skip-link-background", "--cui-sidebar-skip-link-foreground", "--cui-sidebar-skip-link-radius", "--cui-sidebar-skip-link-shadow"];
+export declare const sidebarKnobs: readonly ["--cui-sidebar-nav-height", "--cui-sidebar-nav-background", "--cui-sidebar-nav-foreground", "--cui-sidebar-nav-border-color", "--cui-sidebar-nav-border-width", "--cui-sidebar-nav-shadow", "--cui-sidebar-nav-item-radius", "--cui-sidebar-nav-item-active-background", "--cui-sidebar-nav-item-active-foreground", "--cui-sidebar-nav-gap", "--cui-sidebar-menu-badge-height", "--cui-sidebar-menu-badge-background", "--cui-sidebar-menu-badge-foreground", "--cui-sidebar-rail-divider-background", "--cui-sidebar-wrapper-background", "--cui-sidebar-wrapper-background-image", "--cui-sidebar-inner-background", "--cui-sidebar-inner-border-color", "--cui-sidebar-inner-background-image", "--cui-sidebar-inner-backdrop-filter", "--cui-sidebar-inner-border-width", "--cui-sidebar-inner-radius", "--cui-sidebar-inner-shadow", "--cui-sidebar-header-background", "--cui-sidebar-header-shadow", "--cui-sidebar-inset-background", "--cui-sidebar-inset-background-image", "--cui-sidebar-inset-shadow", "--cui-sidebar-inset-border-color", "--cui-sidebar-inset-border-width", "--cui-sidebar-inset-radius", "--cui-sidebar-inset-inset", "--cui-sidebar-menu-button-radius", "--cui-sidebar-group-label-foreground", "--cui-sidebar-menu-button-foreground", "--cui-sidebar-menu-button-hover-background", "--cui-sidebar-menu-button-hover-foreground", "--cui-sidebar-menu-button-hover-shadow", "--cui-sidebar-menu-button-active-background", "--cui-sidebar-menu-button-active-foreground", "--cui-sidebar-menu-button-active-shadow", "--cui-sidebar-menu-button-track-active-foreground", "--cui-sidebar-menu-button-height", "--cui-sidebar-menu-button-padding-block", "--cui-sidebar-menu-button-padding-inline", "--cui-sidebar-menu-button-font-size", "--cui-sidebar-menu-button-font-weight", "--cui-sidebar-menu-button-active-font-weight", "--cui-sidebar-group-label-font-size", "--cui-sidebar-group-label-font-weight", "--cui-sidebar-group-label-letter-spacing", "--cui-sidebar-group-label-text-transform", "--cui-sidebar-group-label-padding", "--cui-sidebar-skip-link-background", "--cui-sidebar-skip-link-foreground", "--cui-sidebar-skip-link-radius", "--cui-sidebar-skip-link-shadow", "--cui-sidebar-menu-button-background", "--cui-sidebar-menu-button-shadow"];
 export type SidebarKnobStyle = Partial<Record<(typeof sidebarKnobs)[number], string>>;
 //#endregion

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

@@ -56,7 +56,9 @@ const sidebarKnobs = [
 	"--cui-sidebar-skip-link-background",
 	"--cui-sidebar-skip-link-foreground",
 	"--cui-sidebar-skip-link-radius",
-	"--cui-sidebar-skip-link-shadow"
+	"--cui-sidebar-skip-link-shadow",
+	"--cui-sidebar-menu-button-background",
+	"--cui-sidebar-menu-button-shadow"
 ];
 //#endregion
 export { sidebarKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/tabs-knobs.d.ts
-export declare const tabsKnobs: readonly ["--cui-tabs-surface-background", "--cui-tabs-surface-radius", "--cui-tabs-trigger-radius", "--cui-tabs-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--cui-tabs-active-foreground", "--cui-tabs-hover-foreground", "--cui-tabs-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width"];
+export declare const tabsKnobs: readonly ["--cui-tabs-surface-background", "--cui-tabs-surface-radius", "--cui-tabs-trigger-radius", "--cui-tabs-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--cui-tabs-active-foreground", "--cui-tabs-hover-foreground", "--cui-tabs-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width", "--cui-tabs-indicator-background-image"];
 export type TabsKnobStyle = Partial<Record<(typeof tabsKnobs)[number], string>>;
 //#endregion

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

@@ -14,7 +14,8 @@ const tabsKnobs = [
 	"--cui-tabs-indicator-shadow",
 	"--cui-tabs-list-shadow",
 	"--cui-tabs-border-color",
-	"--cui-tabs-border-width"
+	"--cui-tabs-border-width",
+	"--cui-tabs-indicator-background-image"
 ];
 //#endregion
 export { tabsKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/tree-knobs.d.ts
-export declare const treeKnobs: readonly ["--cui-tree-item-trigger-radius", "--cui-tree-item-trigger-foreground", "--cui-tree-item-trigger-hover-background", "--cui-tree-item-trigger-hover-foreground", "--cui-tree-item-trigger-selected-background", "--cui-tree-item-trigger-selected-foreground", "--cui-tree-item-trigger-font-size", "--cui-tree-item-trigger-selected-font-weight", "--cui-tree-indent-inset"];
+export declare const treeKnobs: readonly ["--cui-tree-item-trigger-radius", "--cui-tree-item-trigger-foreground", "--cui-tree-item-trigger-hover-background", "--cui-tree-item-trigger-hover-foreground", "--cui-tree-item-trigger-selected-background", "--cui-tree-item-trigger-selected-foreground", "--cui-tree-item-trigger-font-size", "--cui-tree-item-trigger-selected-font-weight", "--cui-tree-indent-inset", "--cui-tree-item-trigger-background"];
 export type TreeKnobStyle = Partial<Record<(typeof treeKnobs)[number], string>>;
 //#endregion

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

@@ -8,7 +8,8 @@ const treeKnobs = [
 	"--cui-tree-item-trigger-selected-foreground",
 	"--cui-tree-item-trigger-font-size",
 	"--cui-tree-item-trigger-selected-font-weight",
-	"--cui-tree-indent-inset"
+	"--cui-tree-indent-inset",
+	"--cui-tree-item-trigger-background"
 ];
 //#endregion
 export { treeKnobs };

package/dist/lib/color.d.ts

@@ -33,7 +33,7 @@ export type ChannelSpec = {
   max: number;
   step: number;
 };
-export declare function hsvaToRgba({ h, s, v, a }: Hsva): Rgba;
+export declare function hsvaToRgba(hsva: Hsva): Rgba;
 export declare function rgbaToHsva({ r, g, b, a }: Rgba): Hsva;
 export declare function hsvaToHsla({ h, s, v, a }: Hsva): Hsla;
 export declare function hslaToHsva({ h, s, l, a }: Hsla): Hsva;
@@ -47,6 +47,7 @@ export declare function formatColor(hsva: Hsva, format: ColorFormat, opts?: {
   alpha?: boolean;
 }): string;
 export declare function parseColor(input: string): Hsva | null;
+export declare function preserveAchromatic(next: Hsva, prev: Hsva): Hsva;
 export declare function getChannels(hsva: Hsva, format: ColorFormat): ChannelSpec[];
 export declare function setChannel(hsva: Hsva, id: ChannelId, value: number): Hsva;
 export declare function pointToSaturationValue(rect: {
@@ -56,11 +57,6 @@ export declare function pointToSaturationValue(rect: {
   s: number;
   v: number;
 };
-export type GradientKind = "linear" | "radial" | "conic";
-export declare function formatGradient(stops: {
-  position: number;
-  color: string;
-}[], type: GradientKind, angle: number): string;
 export declare function pointToHueSat(rect: {
   width: number;
   height: number;