@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/inline-attachment.d.ts

@@ -5,13 +5,17 @@ export type InlineAttachmentState = "ready" | "pending" | "error";
 type InlineAttachmentStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
+type AttachmentLabel = (name: string) => string;
 export type InlineAttachmentProps = InlineAttachmentStyleProps<ComponentProps<"button">, InlineAttachmentKnobStyle> & {
   name: string;
   state?: InlineAttachmentState;
   /** Width-to-height ratio of the reserved box — generated media knows its ratio before its pixels, so arrival never reflows the turn. */
   aspect?: number;
+  openLabel?: AttachmentLabel;
+  pendingLabel?: AttachmentLabel;
+  errorLabel?: AttachmentLabel;
 };
-export declare function InlineAttachment({ name, state, aspect, disabled, className, children, style, "aria-label": ariaLabel, ...props }: InlineAttachmentProps): import("react").JSX.Element;
+export declare function InlineAttachment({ name, state, aspect, disabled, openLabel, pendingLabel, errorLabel, onClick, className, children, style, "aria-label": ariaLabel, ...props }: InlineAttachmentProps): import("react").JSX.Element;
 export type InlineAttachmentMediaProps = ComponentProps<"div"> & {
   src?: string;
   alt?: string;
@@ -26,7 +30,7 @@ export type InlineAttachmentTitleProps = ComponentProps<"div"> & {
 };
 export declare function InlineAttachmentTitle({ children, className, ...props }: InlineAttachmentTitleProps): import("react").JSX.Element;
 export type InlineAttachmentDescriptionProps = InlineAttachmentStyleProps<ComponentProps<"div">, InlineAttachmentKnobStyle>;
-export declare function InlineAttachmentDescription({ className, ...props }: InlineAttachmentDescriptionProps): import("react").JSX.Element;
+export declare function InlineAttachmentDescription({ className, children, ...props }: InlineAttachmentDescriptionProps): import("react").JSX.Element;
 export type InlineAttachmentActionsProps = ComponentProps<"div"> & {
   style?: CSSProperties & InlineAttachmentKnobStyle;
 };

package/dist/inline-attachment.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inline-attachment.tsx
 const InlineAttachmentContext = createContext(null);
@@ -9,32 +9,47 @@ function useInlineAttachmentContext() {
 	if (!context) throw new Error("InlineAttachment compound components must be rendered inside <InlineAttachment>.");
 	return context;
 }
-function defaultLabel(name, state) {
-	if (state === "pending") return `Generating ${name}`;
-	if (state === "error") return `${name} is unavailable`;
-	return `Open attachment: ${name}`;
-}
-function InlineAttachment({ name, state = "ready", aspect = 1.26, disabled, className, children, style, "aria-label": ariaLabel, ...props }) {
+const defaultOpenLabel = (name) => `Open attachment: ${name}`;
+const defaultPendingLabel = (name) => `Generating ${name}`;
+const defaultErrorLabel = (name) => `${name} couldn't load. Try again.`;
+function InlineAttachment({ name, state = "ready", aspect = 1.26, disabled, openLabel = defaultOpenLabel, pendingLabel = defaultPendingLabel, errorLabel = defaultErrorLabel, onClick, className, children, style, "aria-label": ariaLabel, ...props }) {
 	const attachmentStyle = {
 		aspectRatio: aspect,
 		...style
 	};
+	const descriptionId = useId();
+	const pending = state === "pending";
+	const defaultLabel = {
+		ready: openLabel,
+		pending: pendingLabel,
+		error: errorLabel
+	}[state](name);
 	return /* @__PURE__ */ jsx(InlineAttachmentContext.Provider, {
 		value: {
 			name,
-			state
+			state,
+			descriptionId
 		},
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
-			"aria-label": ariaLabel ?? defaultLabel(name, state),
-			"aria-busy": state === "pending" || void 0,
-			disabled: disabled || state === "pending",
+			"aria-label": ariaLabel ?? defaultLabel,
+			"aria-describedby": descriptionId,
+			"aria-busy": pending || void 0,
+			"aria-disabled": pending || void 0,
+			disabled,
+			onClick: (event) => {
+				if (pending) {
+					event.preventDefault();
+					return;
+				}
+				onClick?.(event);
+			},
 			"data-control-ui": "inline-attachment",
 			"data-control-family": "inline-attachment",
 			"data-slot": "root",
 			"data-surface": "panel",
 			"data-state": state,
-			className: cn("group relative w-full max-w-72 cursor-pointer overflow-hidden disabled:cursor-default", className),
+			className: cn("group relative w-full max-w-72 cursor-pointer overflow-hidden disabled:cursor-default aria-disabled:cursor-default", className),
 			style: attachmentStyle,
 			...props,
 			children
@@ -47,7 +62,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 +80,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 +89,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"
 				})
 			]
 		})
@@ -152,22 +161,28 @@ function InlineAttachmentContent({ className, ...props }) {
 }
 function InlineAttachmentTitle({ children, className, ...props }) {
 	const { name } = useInlineAttachmentContext();
+	const label = children ?? name;
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "inline-attachment",
 		"data-control-family": "inline-attachment",
 		"data-slot": "title",
+		title: typeof label === "string" ? label : void 0,
 		className: cn("truncate", className),
 		...props,
-		children: children ?? name
+		children: label
 	});
 }
-function InlineAttachmentDescription({ className, ...props }) {
+function InlineAttachmentDescription({ className, children, ...props }) {
+	const { descriptionId } = useInlineAttachmentContext();
 	return /* @__PURE__ */ jsx("div", {
+		id: descriptionId,
 		"data-control-ui": "inline-attachment",
 		"data-control-family": "inline-attachment",
 		"data-slot": "description",
+		title: typeof children === "string" ? children : void 0,
 		className: cn("truncate", className),
-		...props
+		...props,
+		children
 	});
 }
 function InlineAttachmentActions({ className, ...props }) {
@@ -184,7 +199,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.d.ts

@@ -13,26 +13,33 @@ export type SourceReference = {
 type InlineCitationStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
+export type CitationLabelTemplates = {
+  emptyLabel?: string;
+  viewSourcesLabel?: (count: number) => string;
+  positionLabel?: (position: number, count: number) => string;
+};
+export declare function citationLabel(sources: readonly SourceReference[], emptyLabel?: string): string;
 type PopoverRootProps = ComponentProps<typeof Popover>;
 export type InlineCitationProps = ComponentProps<"span"> & {
   sources: readonly SourceReference[];
   open?: PopoverRootProps["open"];
   defaultOpen?: PopoverRootProps["defaultOpen"];
   onOpenChange?: PopoverRootProps["onOpenChange"];
+  positionLabel?: CitationLabelTemplates["positionLabel"];
 } & {
   style?: CSSProperties & InlineCitationKnobStyle;
 };
-export declare function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, children, ...props }: InlineCitationProps): import("react").JSX.Element;
-export type InlineCitationTriggerProps = InlineCitationStyleProps<ComponentProps<typeof PopoverTrigger>, InlineCitationKnobStyle>;
-export declare function InlineCitationTrigger({ "aria-label": ariaLabel, className, children, disabled, render, ...props }: InlineCitationTriggerProps): import("react").JSX.Element;
+export declare function InlineCitation({ sources, open, defaultOpen, onOpenChange, positionLabel, className, children, ...props }: InlineCitationProps): import("react").JSX.Element;
+export type InlineCitationTriggerProps = InlineCitationStyleProps<ComponentProps<typeof PopoverTrigger>, InlineCitationKnobStyle> & Pick<CitationLabelTemplates, "emptyLabel" | "viewSourcesLabel">;
+export declare function InlineCitationTrigger({ "aria-label": ariaLabel, emptyLabel, viewSourcesLabel, className, children, disabled, render, ...props }: InlineCitationTriggerProps): import("react").JSX.Element;
 export type InlineCitationFaviconsProps = InlineCitationStyleProps<ComponentProps<"span">, InlineCitationKnobStyle> & {
   limit?: number;
 };
 export declare function InlineCitationFavicons({ limit, className, ...props }: InlineCitationFaviconsProps): import("react").JSX.Element;
-export type InlineCitationLabelProps = ComponentProps<"span"> & {
+export type InlineCitationLabelProps = ComponentProps<"span"> & Pick<CitationLabelTemplates, "emptyLabel"> & {
   style?: CSSProperties & InlineCitationKnobStyle;
 };
-export declare function InlineCitationLabel({ className, children, ...props }: InlineCitationLabelProps): import("react").JSX.Element;
+export declare function InlineCitationLabel({ emptyLabel, className, children, ...props }: InlineCitationLabelProps): import("react").JSX.Element;
 export type InlineCitationContentProps = ComponentProps<typeof PopoverContent>;
 export declare function InlineCitationContent({ className, children, align, padding, ...props }: InlineCitationContentProps): import("react").JSX.Element;
 export type InlineCitationNavigationProps = InlineCitationStyleProps<ComponentProps<"div">, InlineCitationKnobStyle>;

package/dist/inline-citation.js

@@ -1,12 +1,21 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
 import { SourceFavicon, sourceHostname } from "./source-badge.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";
 //#region src/inline-citation.tsx
+const defaultViewSourcesLabel = (count) => count === 1 ? "view 1 source" : `view ${count} sources`;
+const defaultPositionLabel = (position, count) => `Source ${position} of ${count}`;
+function citationLabel(sources, emptyLabel = "No sources") {
+	const firstSource = sources[0];
+	if (!firstSource) return emptyLabel;
+	const additional = sources.length - 1;
+	return `${sourceHostname(firstSource.href)}${additional > 0 ? ` +${additional}` : ""}`;
+}
 const InlineCitationContext = createContext(null);
 function useInlineCitation() {
 	const context = useContext(InlineCitationContext);
@@ -16,10 +25,11 @@ function useInlineCitation() {
 function supportsCrossSlide() {
 	return typeof CSS !== "undefined" && CSS.supports("(anchor-name: --aui-slide-panel) and (anchor-scope: --aui-slide-panel)");
 }
-function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, children, ...props }) {
+function InlineCitation({ sources, open, defaultOpen, onOpenChange, positionLabel = defaultPositionLabel, className, children, ...props }) {
 	const [selectedIndex, setSelectedIndex] = useState(0);
 	const [entering, setEntering] = useState(null);
 	const [exiting, setExiting] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
 	const sourceRef = useRef(null);
 	const exitCount = useRef(0);
 	const clearEntering = useRef(0);
@@ -34,6 +44,7 @@ function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, c
 		const direction = step > 0 ? "right" : "left";
 		const leaving = sources[currentIndex];
 		setSelectedIndex(nextIndex);
+		setAnnouncement(positionLabel(nextIndex + 1, sources.length));
 		setEntering({
 			direction,
 			previousHeight: sourceRef.current?.getBoundingClientRect().height
@@ -56,10 +67,12 @@ function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, c
 		if (!nextOpen) {
 			setEntering(null);
 			setExiting(null);
+			setAnnouncement("");
 		}
 		onOpenChange?.(...args);
 	};
 	const context = {
+		announcement,
 		currentIndex,
 		currentSource,
 		entering,
@@ -89,11 +102,10 @@ function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, c
 		})
 	});
 }
-function InlineCitationTrigger({ "aria-label": ariaLabel, className, children, disabled, render, ...props }) {
+function InlineCitationTrigger({ "aria-label": ariaLabel, emptyLabel, viewSourcesLabel = defaultViewSourcesLabel, className, children, disabled, render, ...props }) {
 	const { sources } = useInlineCitation();
 	const firstSource = sources[0];
-	const sourceCount = sources.length;
-	const accessibleLabel = sourceCount === 1 ? "View 1 source" : `View ${sourceCount} sources`;
+	const accessibleLabel = `${citationLabel(sources, emptyLabel)}, ${viewSourcesLabel(sources.length)}`;
 	return /* @__PURE__ */ jsx(PopoverTrigger, {
 		render: render ?? /* @__PURE__ */ jsx("button", { type: "button" }),
 		"aria-label": ariaLabel ?? accessibleLabel,
@@ -103,7 +115,7 @@ function InlineCitationTrigger({ "aria-label": ariaLabel, className, children, d
 		"data-control-family": "inline-citation",
 		"data-slot": "trigger",
 		className: cn("inline-flex items-center align-baseline", className),
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(InlineCitationFavicons, {}), /* @__PURE__ */ jsx(InlineCitationLabel, {})] })
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(InlineCitationFavicons, {}), /* @__PURE__ */ jsx(InlineCitationLabel, { emptyLabel })] })
 	});
 }
 function InlineCitationFavicons({ limit = 3, className, ...props }) {
@@ -123,17 +135,17 @@ function InlineCitationFavicons({ limit = 3, className, ...props }) {
 		}, source.href))
 	});
 }
-function InlineCitationLabel({ className, children, ...props }) {
+function InlineCitationLabel({ emptyLabel, className, children, ...props }) {
 	const { sources } = useInlineCitation();
-	const firstSource = sources[0];
-	const additionalSourceCount = Math.max(0, sources.length - 1);
+	const label = citationLabel(sources, emptyLabel);
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "inline-citation",
 		"data-control-family": "inline-citation",
 		"data-slot": "label",
+		title: children === void 0 ? label : void 0,
 		...props,
 		className: cn("min-w-0 truncate", className),
-		children: children ?? (firstSource ? `${sourceHostname(firstSource.href)}${additionalSourceCount > 0 ? ` +${additionalSourceCount}` : ""}` : "No sources")
+		children: children ?? label
 	});
 }
 function InlineCitationContent({ className, children, align = "start", padding = "none", ...props }) {
@@ -201,18 +213,15 @@ function InlineCitationNext({ className, children, disabled, onClick, ...props }
 	});
 }
 function InlineCitationPosition({ className, children, ...props }) {
-	const { currentIndex, sources } = useInlineCitation();
-	return /* @__PURE__ */ jsx("span", {
-		role: "status",
-		"aria-live": "polite",
-		"aria-atomic": "true",
+	const { announcement, currentIndex, sources } = useInlineCitation();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		"data-control-ui": "inline-citation",
 		"data-control-family": "inline-citation",
 		"data-slot": "position",
 		...props,
 		className: cn(className),
 		children: children ?? `${sources.length === 0 ? 0 : currentIndex + 1}/${sources.length}`
-	});
+	}), /* @__PURE__ */ jsx(LiveStatus, { message: announcement })] });
 }
 function InlineCitationSourceDetails({ source }) {
 	const hostname = sourceHostname(source.href);
@@ -316,4 +325,4 @@ function InlineCitationSource({ source: sourceProp, className, children, style,
 	}, `exit-${exiting.id}`) : null] });
 }
 //#endregion
-export { InlineCitation, InlineCitationContent, InlineCitationFavicons, InlineCitationLabel, InlineCitationNavigation, InlineCitationNext, InlineCitationPosition, InlineCitationPrevious, InlineCitationSource, InlineCitationTrigger };
+export { InlineCitation, InlineCitationContent, InlineCitationFavicons, InlineCitationLabel, InlineCitationNavigation, InlineCitationNext, InlineCitationPosition, InlineCitationPrevious, InlineCitationSource, InlineCitationTrigger, citationLabel };

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"];
+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 type AudioRecorderKnobStyle = Partial<Record<(typeof audioRecorderKnobs)[number], string>>;
 //#endregion

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

@@ -3,7 +3,8 @@ const audioRecorderKnobs = [
 	"--cui-audio-recorder-foreground",
 	"--cui-audio-recorder-active-foreground",
 	"--cui-audio-recorder-recording-ring-color",
-	"--cui-audio-recorder-error-foreground"
+	"--cui-audio-recorder-error-foreground",
+	"--cui-audio-recorder-meta-foreground"
 ];
 //#endregion
 export { audioRecorderKnobs };

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-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", "--cui-audio-visualizer-baseline-stroke"];
 export type AudioVisualizerKnobStyle = Partial<Record<(typeof audioVisualizerKnobs)[number], string>>;
 //#endregion

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

@@ -4,7 +4,8 @@ const audioVisualizerKnobs = [
 	"--cui-audio-visualizer-bar-radius",
 	"--cui-audio-visualizer-bar-background",
 	"--cui-audio-visualizer-line-fill",
-	"--cui-audio-visualizer-line-stroke"
+	"--cui-audio-visualizer-line-stroke",
+	"--cui-audio-visualizer-baseline-stroke"
 ];
 //#endregion
 export { audioVisualizerKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/avatar-knobs.d.ts
-export declare const avatarKnobs: readonly ["--cui-avatar-radius", "--cui-avatar-group-ring-color", "--cui-avatar-fallback-background", "--cui-avatar-fallback-foreground", "--cui-avatar-image-outline-color"];
+export declare const avatarKnobs: readonly ["--cui-avatar-radius", "--cui-avatar-group-ring-color", "--cui-avatar-fallback-background", "--cui-avatar-fallback-foreground", "--cui-avatar-image-outline-color", "--cui-avatar-badge-size", "--cui-avatar-badge-ring-size", "--cui-avatar-badge-ring-color", "--cui-avatar-badge-background", "--cui-avatar-badge-foreground"];
 export type AvatarKnobStyle = Partial<Record<(typeof avatarKnobs)[number], string>>;
 //#endregion

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

@@ -4,7 +4,12 @@ const avatarKnobs = [
 	"--cui-avatar-group-ring-color",
 	"--cui-avatar-fallback-background",
 	"--cui-avatar-fallback-foreground",
-	"--cui-avatar-image-outline-color"
+	"--cui-avatar-image-outline-color",
+	"--cui-avatar-badge-size",
+	"--cui-avatar-badge-ring-size",
+	"--cui-avatar-badge-ring-color",
+	"--cui-avatar-badge-background",
+	"--cui-avatar-badge-foreground"
 ];
 //#endregion
 export { avatarKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/badge-knobs.d.ts
-export declare const badgeKnobs: readonly ["--cui-badge-radius", "--cui-badge-background", "--cui-badge-foreground", "--cui-badge-border-color"];
+export declare const badgeKnobs: readonly ["--cui-badge-radius", "--cui-badge-background", "--cui-badge-foreground", "--cui-badge-border-color", "--cui-badge-font-size"];
 export type BadgeKnobStyle = Partial<Record<(typeof badgeKnobs)[number], string>>;
 //#endregion

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

@@ -3,7 +3,8 @@ const badgeKnobs = [
 	"--cui-badge-radius",
 	"--cui-badge-background",
 	"--cui-badge-foreground",
-	"--cui-badge-border-color"
+	"--cui-badge-border-color",
+	"--cui-badge-font-size"
 ];
 //#endregion
 export { badgeKnobs };

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/breadcrumb-knobs.d.ts
+export declare const breadcrumbKnobs: readonly ["--cui-breadcrumb-list-foreground", "--cui-breadcrumb-page-foreground", "--cui-breadcrumb-link-hover-foreground"];
+export type BreadcrumbKnobStyle = Partial<Record<(typeof breadcrumbKnobs)[number], string>>;
+//#endregion

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

@@ -0,0 +1,8 @@
+//#region src/knob-contracts/breadcrumb-knobs.ts
+const breadcrumbKnobs = [
+	"--cui-breadcrumb-list-foreground",
+	"--cui-breadcrumb-page-foreground",
+	"--cui-breadcrumb-link-hover-foreground"
+];
+//#endregion
+export { breadcrumbKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/button-knobs.d.ts
-export declare const buttonKnobs: readonly ["--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-background", "--cui-button-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-press-background", "--cui-button-press-scale", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow"];
+export declare const buttonKnobs: readonly ["--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-background", "--cui-button-background-image", "--cui-button-hover-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-press-background", "--cui-button-press-scale", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow"];
 export type ButtonKnobStyle = Partial<Record<(typeof buttonKnobs)[number], string>>;
 //#endregion

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

@@ -9,6 +9,7 @@ const buttonKnobs = [
 	"--cui-button-font-size",
 	"--cui-button-background",
 	"--cui-button-background-image",
+	"--cui-button-hover-background-image",
 	"--cui-button-foreground",
 	"--cui-button-hover-background",
 	"--cui-button-hover-foreground",

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/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", "--cui-chat-message-pending-dot-color", "--cui-chat-message-pending-dot-size"];
+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", "--cui-chat-message-row-hover-background", "--cui-chat-message-reaction-radius", "--cui-chat-message-reaction-background", "--cui-chat-message-reaction-border-color", "--cui-chat-message-reaction-border-width", "--cui-chat-message-reaction-pressed-background", "--cui-chat-message-reaction-pressed-border-color"];
 export type ChatMessageKnobStyle = Partial<Record<(typeof chatMessageKnobs)[number], string>>;
 //#endregion

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

@@ -13,7 +13,14 @@ const chatMessageKnobs = [
 	"--cui-chat-message-border-width",
 	"--cui-chat-message-shadow",
 	"--cui-chat-message-pending-dot-color",
-	"--cui-chat-message-pending-dot-size"
+	"--cui-chat-message-pending-dot-size",
+	"--cui-chat-message-row-hover-background",
+	"--cui-chat-message-reaction-radius",
+	"--cui-chat-message-reaction-background",
+	"--cui-chat-message-reaction-border-color",
+	"--cui-chat-message-reaction-border-width",
+	"--cui-chat-message-reaction-pressed-background",
+	"--cui-chat-message-reaction-pressed-border-color"
 ];
 //#endregion
 export { chatMessageKnobs };

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/code-diff-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/code-diff-knobs.d.ts
-export declare const codeDiffKnobs: readonly ["--cui-code-diff-radius", "--cui-code-diff-shadow", "--cui-code-diff-background", "--cui-code-diff-border-color", "--cui-code-diff-border-width", "--cui-code-diff-foreground", "--cui-code-diff-add-background", "--cui-code-diff-del-background", "--cui-code-diff-expand-button-radius", "--cui-code-diff-expand-button-background", "--cui-code-diff-expand-button-foreground", "--cui-code-diff-expand-button-shadow", "--cui-code-diff-expand-button-hover-background", "--cui-code-diff-expand-button-hover-foreground"];
+export declare const codeDiffKnobs: readonly ["--cui-code-diff-radius", "--cui-code-diff-shadow", "--cui-code-diff-background", "--cui-code-diff-border-color", "--cui-code-diff-border-width", "--cui-code-diff-header-background", "--cui-code-diff-header-border-color", "--cui-code-diff-foreground", "--cui-code-diff-add-background", "--cui-code-diff-del-background", "--cui-code-diff-expand-button-radius", "--cui-code-diff-expand-button-background", "--cui-code-diff-expand-button-foreground", "--cui-code-diff-expand-button-shadow", "--cui-code-diff-expand-button-hover-background", "--cui-code-diff-expand-button-hover-foreground"];
 export type CodeDiffKnobStyle = Partial<Record<(typeof codeDiffKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/code-diff-knobs.js

@@ -5,6 +5,8 @@ const codeDiffKnobs = [
 	"--cui-code-diff-background",
 	"--cui-code-diff-border-color",
 	"--cui-code-diff-border-width",
+	"--cui-code-diff-header-background",
+	"--cui-code-diff-header-border-color",
 	"--cui-code-diff-foreground",
 	"--cui-code-diff-add-background",
 	"--cui-code-diff-del-background",

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/code-knobs.d.ts
-export declare const codeKnobs: readonly ["--cui-code-radius", "--cui-code-background", "--cui-code-border-color", "--cui-code-border-width", "--cui-code-shadow", "--cui-code-title-foreground", "--cui-code-text-foreground", "--cui-code-line-highlight-background"];
+export declare const codeKnobs: readonly ["--cui-code-radius", "--cui-code-background", "--cui-code-border-color", "--cui-code-border-width", "--cui-code-shadow", "--cui-code-title-foreground", "--cui-code-text-foreground", "--cui-code-line-highlight-background", "--cui-code-header-background"];
 export type CodeKnobStyle = Partial<Record<(typeof codeKnobs)[number], string>>;
 //#endregion

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

@@ -7,7 +7,8 @@ const codeKnobs = [
 	"--cui-code-shadow",
 	"--cui-code-title-foreground",
 	"--cui-code-text-foreground",
-	"--cui-code-line-highlight-background"
+	"--cui-code-line-highlight-background",
+	"--cui-code-header-background"
 ];
 //#endregion
 export { codeKnobs };

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/dynamic-notification-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/dynamic-notification-knobs.d.ts
-export declare const dynamicNotificationKnobs: readonly ["--cui-dynamic-notification-content-easing", "--cui-dynamic-notification-expanded-radius", "--cui-dynamic-notification-morph-easing", "--cui-dynamic-notification-glass-foreground", "--cui-dynamic-notification-glass-ring-color", "--cui-dynamic-notification-liquid-foreground", "--cui-dynamic-notification-surface-background", "--cui-dynamic-notification-surface-foreground", "--cui-dynamic-notification-surface-ring-color", "--cui-dynamic-notification-surface-shadow", "--cui-dynamic-notification-indicator-end", "--cui-dynamic-notification-indicator-middle", "--cui-dynamic-notification-indicator-start"];
+export declare const dynamicNotificationKnobs: readonly ["--cui-dynamic-notification-content-easing", "--cui-dynamic-notification-expanded-radius", "--cui-dynamic-notification-morph-easing", "--cui-dynamic-notification-glass-foreground", "--cui-dynamic-notification-glass-ring-color", "--cui-dynamic-notification-liquid-foreground", "--cui-dynamic-notification-liquid-text-shadow", "--cui-dynamic-notification-surface-background", "--cui-dynamic-notification-title-foreground", "--cui-dynamic-notification-surface-foreground", "--cui-dynamic-notification-surface-ring-color", "--cui-dynamic-notification-surface-shadow", "--cui-dynamic-notification-indicator-end", "--cui-dynamic-notification-indicator-middle", "--cui-dynamic-notification-indicator-start"];
 export type DynamicNotificationKnobStyle = Partial<Record<(typeof dynamicNotificationKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/dynamic-notification-knobs.js

@@ -6,7 +6,9 @@ const dynamicNotificationKnobs = [
 	"--cui-dynamic-notification-glass-foreground",
 	"--cui-dynamic-notification-glass-ring-color",
 	"--cui-dynamic-notification-liquid-foreground",
+	"--cui-dynamic-notification-liquid-text-shadow",
 	"--cui-dynamic-notification-surface-background",
+	"--cui-dynamic-notification-title-foreground",
 	"--cui-dynamic-notification-surface-foreground",
 	"--cui-dynamic-notification-surface-ring-color",
 	"--cui-dynamic-notification-surface-shadow",

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/emoji-picker-knobs.d.ts
+export declare const emojiPickerKnobs: readonly ["--cui-emoji-picker-cell-size", "--cui-emoji-picker-cell-radius", "--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