@ctrl-ui/react 0.8.18 → 0.8.20

package/dist/blocks/settings.js

@@ -3,12 +3,13 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { LiveStatus } from "../ui/live-status.js";
 import { ScrollArea } from "../ui/scroll-area.js";
+import { Heading, Text } from "../ui/typography.js";
 import { prefersReducedMotion } from "../lib/motion.js";
-import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
-import { Input } from "../ui/input.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarHeader, SidebarInset, SidebarTrigger } from "../ui/sidebar.js";
+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 { searchSettings } from "./settings-data.js";
 import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
@@ -118,8 +119,10 @@ function SettingsShell({ pages, currentPage, query, results, backAction, searchP
 			className: "h-full min-h-0 min-w-0",
 			children: [/* @__PURE__ */ jsxs("header", {
 				className: "flex h-12 shrink-0 items-center gap-2 border-b px-3 lg:hidden",
-				children: [/* @__PURE__ */ jsx(SidebarTrigger, {}), /* @__PURE__ */ jsx("span", {
-					className: "truncate text-label font-medium",
+				children: [/* @__PURE__ */ jsx(SidebarTrigger, {}), /* @__PURE__ */ jsx(Text, {
+					size: "label",
+					weight: "medium",
+					className: "truncate",
 					title: currentPage?.title,
 					children: currentPage?.title ?? "Settings"
 				})]
@@ -212,8 +215,9 @@ function SettingsPage({ page, instanceId }) {
 	const { layout } = useSidebar();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mx-auto flex w-full max-w-4xl flex-col gap-10 px-5 py-8 md:px-10 md:py-12",
-		children: [/* @__PURE__ */ jsx(layout === "contained" ? "h2" : "h1", {
-			className: "text-heading-2 text-foreground text-balance",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			level: layout === "contained" ? 2 : 1,
+			size: "heading-2",
 			children: page.title
 		}), page.sections.map((section) => /* @__PURE__ */ jsxs(FieldSet, {
 			className: "gap-3",

package/dist/chat-composer-editor/extensions/mention.d.ts

@@ -1,5 +1,5 @@
-import { ChatComposerEditorExtension } from "../types.js";
 import { TriggerConfig, TriggerMenuItemData } from "../../hooks/use-trigger-menu.js";
+import { ChatComposerEditorExtension } from "../types.js";
 import { Command } from "prosemirror-state";
 //#region src/chat-composer-editor/extensions/mention.d.ts
 export declare const deleteMentionBackward: Command;

package/dist/chat-message.d.ts

@@ -23,6 +23,19 @@ export type ChatMessageTimeProps = ChatMessagePartProps<"time"> & {
 export declare function ChatMessageTime({ className, ...props }: ChatMessageTimeProps): JSX.Element;
 export type ChatMessageContentProps = ChatMessagePartProps<"div">;
 export declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): JSX.Element;
+export type ChatMessageEditableProps = Omit<ChatMessagePartProps<"div">, "onError"> & {
+  value: string;
+  /** Persist the text in the host. Reject to keep the draft open for retry. */
+  onSave: (value: string) => void | Promise<void>;
+  onSaveError?: (error: unknown) => void;
+  editorLabel?: string;
+  saveLabel?: string;
+  cancelLabel?: string;
+  savingLabel?: string;
+  saveErrorLabel?: string;
+};
+/** Plain-text editing in the message surface. Children replace the default Copy/Edit actions. */
+export declare function ChatMessageEditable({ value, onSave, onSaveError, editorLabel, saveLabel, cancelLabel, savingLabel, saveErrorLabel, children, className, ...props }: ChatMessageEditableProps): JSX.Element;
 export type ChatMessagePendingProps = Omit<ChatMessagePartProps<"div">, "children">;
 /** Visual only: the pending transition is announced by `ChatMessage` through the thread's status region. */
 export declare function ChatMessagePending({ className, ...props }: ChatMessagePendingProps): JSX.Element | null;

package/dist/chat-message.js

@@ -1,9 +1,11 @@
 "use client";
 import { cn } from "./lib/cn.js";
+import { LiveStatus } from "./ui/live-status.js";
+import { ActionBar, ActionBarCopy, ActionBarEdit, ActionBarItem } from "./action-bar.js";
 import { ChatMessageStateProvider, chatAuthorLabels, chatMessageStatusLabels, chatMessageTransition, useChatMessage, useChatMessageContext, useChatThreadAnnounce } from "./hooks/use-chat-message.js";
 import { ChatMessageReaction, ChatMessageReactions, ChatMessageReplies, ChatMessageReplySummary, ChatTypingIndicator } from "./chat-message/social.js";
-import { useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat-message.tsx
 function ChatMessage({ from, state = "idle", density = "comfortable", layout = "bubble", continuation = false, authorLabel = chatAuthorLabels[from], statusLabels, className, children, ...props }) {
 	const message = useChatMessage({
@@ -137,6 +139,199 @@ function ChatMessageContent({ className, ...props }) {
 		...props
 	});
 }
+function useMessageEditor({ value, onSave, onSaveError }) {
+	const [editing, setEditing] = useState(false);
+	const [draft, setDraft] = useState(value);
+	const [originalValue, setOriginalValue] = useState(value);
+	const [saving, setSaving] = useState(false);
+	const [failed, setFailed] = useState(false);
+	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;
+			input?.focus({ preventScroll: true });
+			input?.setSelectionRange(input.value.length, input.value.length);
+		} else if (triggerRef.current) {
+			triggerRef.current.focus({ preventScroll: true });
+			triggerRef.current = null;
+		}
+	}, [editing]);
+	function startEditing() {
+		if (savingRef.current) return;
+		triggerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		setDraft(value);
+		setOriginalValue(value);
+		setFailed(false);
+		setEditing(true);
+	}
+	function cancelEditing() {
+		if (savingRef.current) return;
+		setFailed(false);
+		setEditing(false);
+	}
+	async function save() {
+		if (!editing || savingRef.current || !draft.trim()) return;
+		if (draft === value) {
+			cancelEditing();
+			return;
+		}
+		savingRef.current = true;
+		setSaving(true);
+		setFailed(false);
+		try {
+			await onSave(draft);
+			if (mountedRef.current) setEditing(false);
+		} catch (error) {
+			if (mountedRef.current) {
+				setFailed(true);
+				onSaveError?.(error);
+			}
+		} finally {
+			savingRef.current = false;
+			if (mountedRef.current) setSaving(false);
+		}
+	}
+	return {
+		editing,
+		draft,
+		setDraft,
+		saving,
+		failed,
+		inputRef,
+		errorId,
+		startEditing,
+		cancelEditing,
+		save,
+		displayValue: editing ? originalValue : value
+	};
+}
+/** Plain-text editing in the message surface. Children replace the default Copy/Edit actions. */
+function ChatMessageEditable({ value, onSave, onSaveError, editorLabel = "Edit message", saveLabel = "Save", cancelLabel = "Cancel", savingLabel = "Saving…", saveErrorLabel = "Couldn't save your message. Try again.", children, className, ...props }) {
+	const message = useChatMessageContext();
+	const { editing, draft, setDraft, saving, failed, inputRef, errorId, startEditing, cancelEditing, save, displayValue } = useMessageEditor({
+		value,
+		onSave,
+		onSaveError
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-control-ui": "chat-message",
+		"data-control-family": "chat-message",
+		"data-slot": "editable",
+		"data-editing": editing ? "" : void 0,
+		className: cn("min-w-0", className),
+		children: [
+			/* @__PURE__ */ jsxs(ChatMessageContent, {
+				"data-editable": "",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"data-control-ui": "chat-message",
+						"data-control-family": "chat-message",
+						"data-slot": "edit-value",
+						"aria-hidden": editing,
+						children: displayValue || "​"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-control-ui": "chat-message",
+						"data-control-family": "chat-message",
+						"data-slot": "edit-sizer",
+						"aria-hidden": "true",
+						children: `${draft}\u200b`
+					}),
+					/* @__PURE__ */ jsx("textarea", {
+						ref: inputRef,
+						"data-control-ui": "chat-message",
+						"data-control-family": "chat-message",
+						"data-slot": "edit-input",
+						"aria-keyshortcuts": "Control+Enter Meta+Enter Escape",
+						"aria-label": editorLabel,
+						"aria-describedby": failed ? errorId : void 0,
+						"aria-hidden": !editing,
+						"aria-busy": saving,
+						tabIndex: editing ? 0 : -1,
+						readOnly: !editing || saving,
+						value: editing ? draft : value,
+						rows: 1,
+						onChange: (event) => setDraft(event.currentTarget.value),
+						onKeyDown: (event) => {
+							if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
+							if (event.key === "Escape") {
+								event.preventDefault();
+								event.stopPropagation();
+								cancelEditing();
+							} else if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+								event.preventDefault();
+								save();
+							}
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-control-ui": "chat-message",
+				"data-control-family": "chat-message",
+				"data-slot": "edit-toolbars",
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-control-ui": "chat-message",
+					"data-control-family": "chat-message",
+					"data-slot": "edit-toolbar",
+					"data-active": !editing ? "" : void 0,
+					inert: editing,
+					"aria-hidden": editing,
+					children: /* @__PURE__ */ jsx(ActionBar, {
+						align: message.isEndAligned ? "end" : "start",
+						copyValue: value,
+						onEdit: startEditing,
+						children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionBarCopy, {}), /* @__PURE__ */ jsx(ActionBarEdit, {})] })
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					"data-control-ui": "chat-message",
+					"data-control-family": "chat-message",
+					"data-slot": "edit-toolbar",
+					"data-active": editing ? "" : void 0,
+					inert: !editing,
+					"aria-hidden": !editing,
+					children: /* @__PURE__ */ jsxs(ActionBar, {
+						align: message.isEndAligned ? "end" : "start",
+						label: "Edit actions",
+						"aria-busy": saving,
+						children: [/* @__PURE__ */ jsx(ActionBarItem, {
+							type: "button",
+							disabled: saving || !draft.trim(),
+							onClick: () => void save(),
+							children: saveLabel
+						}), /* @__PURE__ */ jsx(ActionBarItem, {
+							type: "button",
+							disabled: saving,
+							onClick: cancelEditing,
+							children: cancelLabel
+						})]
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(LiveStatus, { message: saving ? savingLabel : "" }),
+			/* @__PURE__ */ jsx("span", {
+				id: errorId,
+				role: "alert",
+				"data-control-ui": "chat-message",
+				"data-control-family": "chat-message",
+				"data-slot": "edit-error",
+				hidden: !failed,
+				children: failed ? saveErrorLabel : ""
+			})
+		]
+	});
+}
 /** Visual only: the pending transition is announced by `ChatMessage` through the thread's status region. */
 function ChatMessagePending({ className, ...props }) {
 	if (!useChatMessageContext().isPending) return null;
@@ -190,4 +385,4 @@ function ChatMessageActions({ className, children, ...props }) {
 	});
 }
 //#endregion
-export { ChatMessage, ChatMessageActions, ChatMessageAuthor, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessagePending, ChatMessageReaction, ChatMessageReactions, ChatMessageReplies, ChatMessageReplySummary, ChatMessageRow, ChatMessageTime, ChatTypingIndicator };
+export { ChatMessage, ChatMessageActions, ChatMessageAuthor, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageEditable, ChatMessageFooter, ChatMessageHeader, ChatMessagePending, ChatMessageReaction, ChatMessageReactions, ChatMessageReplies, ChatMessageReplySummary, ChatMessageRow, ChatMessageTime, ChatTypingIndicator };

package/dist/filter-bar/editor.js

@@ -1,5 +1,6 @@
 "use client";
 import { Button } from "../ui/button.js";
+import { Text } from "../ui/typography.js";
 import { useFilterBarContext } from "./context.js";
 import { allowsCustomValue, fieldOperators, fieldOptions, parseCustomValue } from "./model.js";
 import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "../ui/combobox.js";
@@ -75,9 +76,11 @@ function handleEditorKeyDown(context, draft, event) {
 	return true;
 }
 function EditorOptions({ field, invalidNumber, owner }) {
-	if (field?.loading || field?.error) return /* @__PURE__ */ jsx("div", {
+	if (field?.loading || field?.error) return /* @__PURE__ */ jsx(Text, {
+		as: "div",
+		size: "caption",
 		id: statusId(owner),
-		className: "p-3 text-caption",
+		className: "p-3",
 		children: field.error ?? "Loading values…"
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: invalidNumber ? "Enter a number, like 42 or 3.5." : "No matching options." }), /* @__PURE__ */ jsx(ComboboxList, { children: (choice) => /* @__PURE__ */ jsx(ComboboxItem, {

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/flow-knobs.d.ts
+export declare const flowKnobs: readonly ["--cui-flow-background", "--cui-flow-grid-dot-color", "--cui-flow-edge-stroke", "--cui-flow-selected-edge-stroke", "--cui-flow-edge-size", "--cui-flow-node-background", "--cui-flow-node-foreground", "--cui-flow-node-border-color", "--cui-flow-node-hover-border-color", "--cui-flow-node-selected-border-color", "--cui-flow-node-border-width", "--cui-flow-node-radius", "--cui-flow-node-shadow", "--cui-flow-handle-size", "--cui-flow-handle-background", "--cui-flow-handle-border-color", "--cui-flow-handle-border-width", "--cui-flow-edge-label-background", "--cui-flow-edge-label-foreground", "--cui-flow-edge-label-border-color", "--cui-flow-edge-label-border-width", "--cui-flow-controls-item-radius", "--cui-flow-controls-padding", "--cui-flow-controls-radius", "--cui-flow-controls-background", "--cui-flow-controls-border-color", "--cui-flow-controls-shadow"];
+export type FlowKnobStyle = Partial<Record<(typeof flowKnobs)[number], string>>;
+//#endregion

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

@@ -0,0 +1,32 @@
+//#region src/knob-contracts/flow-knobs.ts
+const flowKnobs = [
+	"--cui-flow-background",
+	"--cui-flow-grid-dot-color",
+	"--cui-flow-edge-stroke",
+	"--cui-flow-selected-edge-stroke",
+	"--cui-flow-edge-size",
+	"--cui-flow-node-background",
+	"--cui-flow-node-foreground",
+	"--cui-flow-node-border-color",
+	"--cui-flow-node-hover-border-color",
+	"--cui-flow-node-selected-border-color",
+	"--cui-flow-node-border-width",
+	"--cui-flow-node-radius",
+	"--cui-flow-node-shadow",
+	"--cui-flow-handle-size",
+	"--cui-flow-handle-background",
+	"--cui-flow-handle-border-color",
+	"--cui-flow-handle-border-width",
+	"--cui-flow-edge-label-background",
+	"--cui-flow-edge-label-foreground",
+	"--cui-flow-edge-label-border-color",
+	"--cui-flow-edge-label-border-width",
+	"--cui-flow-controls-item-radius",
+	"--cui-flow-controls-padding",
+	"--cui-flow-controls-radius",
+	"--cui-flow-controls-background",
+	"--cui-flow-controls-border-color",
+	"--cui-flow-controls-shadow"
+];
+//#endregion
+export { flowKnobs };

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/item-knobs.d.ts
-export declare const itemKnobs: readonly ["--cui-item-radius", "--cui-item-hover-background", "--cui-item-hover-border-color", "--cui-item-border-width", "--cui-item-active-scale"];
+export declare const itemKnobs: readonly ["--cui-item-radius", "--cui-item-hover-background", "--cui-item-hover-border-color", "--cui-item-border-width", "--cui-item-active-scale", "--cui-item-gap", "--cui-item-padding-block", "--cui-item-padding-inline"];
 export type ItemKnobStyle = Partial<Record<(typeof itemKnobs)[number], string>>;
 //#endregion

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

@@ -4,7 +4,10 @@ const itemKnobs = [
 	"--cui-item-hover-background",
 	"--cui-item-hover-border-color",
 	"--cui-item-border-width",
-	"--cui-item-active-scale"
+	"--cui-item-active-scale",
+	"--cui-item-gap",
+	"--cui-item-padding-block",
+	"--cui-item-padding-inline"
 ];
 //#endregion
 export { itemKnobs };

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/label-knobs.d.ts
+export declare const labelKnobs: readonly ["--cui-label-root-foreground"];
+export type LabelKnobStyle = Partial<Record<(typeof labelKnobs)[number], string>>;
+//#endregion

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

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/label-knobs.ts
+const labelKnobs = ["--cui-label-root-foreground"];
+//#endregion
+export { labelKnobs };

package/dist/knob-contracts/markdown-editor-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/markdown-editor-knobs.d.ts
+export declare const markdownEditorKnobs: readonly ["--cui-markdown-editor-background", "--cui-markdown-editor-foreground", "--cui-markdown-editor-border-color", "--cui-markdown-editor-radius", "--cui-markdown-editor-padding", "--cui-markdown-editor-gutter-size", "--cui-markdown-editor-min-height", "--cui-markdown-editor-max-height", "--cui-markdown-editor-gap", "--cui-markdown-editor-muted-foreground", "--cui-markdown-editor-code-background", "--cui-markdown-editor-border-width"];
+export type MarkdownEditorKnobStyle = Partial<Record<(typeof markdownEditorKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/markdown-editor-knobs.js

@@ -0,0 +1,17 @@
+//#region src/knob-contracts/markdown-editor-knobs.ts
+const markdownEditorKnobs = [
+	"--cui-markdown-editor-background",
+	"--cui-markdown-editor-foreground",
+	"--cui-markdown-editor-border-color",
+	"--cui-markdown-editor-radius",
+	"--cui-markdown-editor-padding",
+	"--cui-markdown-editor-gutter-size",
+	"--cui-markdown-editor-min-height",
+	"--cui-markdown-editor-max-height",
+	"--cui-markdown-editor-gap",
+	"--cui-markdown-editor-muted-foreground",
+	"--cui-markdown-editor-code-background",
+	"--cui-markdown-editor-border-width"
+];
+//#endregion
+export { markdownEditorKnobs };

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

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

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

@@ -5,7 +5,8 @@ const morphingPanelKnobs = [
 	"--cui-morphing-panel-foreground",
 	"--cui-morphing-panel-border-color",
 	"--cui-morphing-panel-shadow",
-	"--cui-morphing-panel-trigger-hover-background"
+	"--cui-morphing-panel-trigger-hover-background",
+	"--cui-morphing-panel-border-width"
 ];
 //#endregion
 export { morphingPanelKnobs };

package/dist/knob-contracts/resize-handle-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/resize-handle-knobs.d.ts
+export declare const resizeHandleKnobs: readonly ["--cui-resize-handle-size", "--cui-resize-handle-hit-size", "--cui-resize-handle-background", "--cui-resize-handle-hover-background", "--cui-resize-handle-border-color", "--cui-resize-handle-border-width", "--cui-resize-handle-radius"];
+export type ResizeHandleKnobStyle = Partial<Record<(typeof resizeHandleKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/resize-handle-knobs.js

@@ -0,0 +1,12 @@
+//#region src/knob-contracts/resize-handle-knobs.ts
+const resizeHandleKnobs = [
+	"--cui-resize-handle-size",
+	"--cui-resize-handle-hit-size",
+	"--cui-resize-handle-background",
+	"--cui-resize-handle-hover-background",
+	"--cui-resize-handle-border-color",
+	"--cui-resize-handle-border-width",
+	"--cui-resize-handle-radius"
+];
+//#endregion
+export { resizeHandleKnobs };

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

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

@@ -1,5 +1,15 @@
 //#region src/knob-contracts/sidebar-knobs.ts
 const sidebarKnobs = [
+	"--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",

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

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/switch-knobs.d.ts
-export declare const switchKnobs: readonly ["--cui-switch-thumb-shadow", "--cui-switch-radius", "--cui-switch-shadow", "--cui-switch-background", "--cui-switch-border-color", "--cui-switch-border-width", "--cui-switch-checked-border-color", "--cui-switch-hover-background", "--cui-switch-checked-background", "--cui-switch-checked-hover-background", "--cui-switch-thumb-radius", "--cui-switch-thumb-background", "--cui-switch-inline-size", "--cui-switch-height", "--cui-switch-padding", "--cui-switch-thumb-inline-size", "--cui-switch-thumb-press-scale", "--cui-switch-thumb-backdrop-filter"];
+export declare const switchKnobs: readonly ["--cui-switch-thumb-shadow", "--cui-switch-radius", "--cui-switch-shadow", "--cui-switch-background", "--cui-switch-border-color", "--cui-switch-border-width", "--cui-switch-checked-border-color", "--cui-switch-hover-background", "--cui-switch-checked-background", "--cui-switch-checked-hover-background", "--cui-switch-thumb-radius", "--cui-switch-thumb-background", "--cui-switch-inline-size", "--cui-switch-height", "--cui-switch-padding", "--cui-switch-thumb-inline-size", "--cui-switch-thumb-press-inline-size", "--cui-switch-thumb-press-scale", "--cui-switch-thumb-backdrop-filter"];
 export type SwitchKnobStyle = Partial<Record<(typeof switchKnobs)[number], string>>;
 //#endregion

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

@@ -16,6 +16,7 @@ const switchKnobs = [
 	"--cui-switch-height",
 	"--cui-switch-padding",
 	"--cui-switch-thumb-inline-size",
+	"--cui-switch-thumb-press-inline-size",
 	"--cui-switch-thumb-press-scale",
 	"--cui-switch-thumb-backdrop-filter"
 ];

package/dist/lib/canvas-grid.d.ts

@@ -0,0 +1,4 @@
+//#region src/lib/canvas-grid.d.ts
+export declare const CANVAS_GRID_GAP = 24;
+export declare const CANVAS_GRID_DOT_RADIUS = 1;
+//#endregion

package/dist/lib/canvas-grid.js

@@ -0,0 +1,5 @@
+//#region src/lib/canvas-grid.ts
+const CANVAS_GRID_GAP = 24;
+const CANVAS_GRID_DOT_RADIUS = 1;
+//#endregion
+export { CANVAS_GRID_DOT_RADIUS, CANVAS_GRID_GAP };

package/dist/markdown-editor/context.d.ts

@@ -0,0 +1,22 @@
+import { MarkdownImageUpload } from "./uploads.js";
+import { Editor } from "@tiptap/core";
+//#region src/markdown-editor/context.d.ts
+export type MarkdownEditorContextValue = {
+  editor: Editor | null;
+  disabled: boolean;
+  source: boolean;
+  markdown: string;
+  sourceRequired: boolean;
+  setSource: (source: boolean) => void;
+  setMarkdown: (value: string) => void;
+  setContentAttributes: (attributes: Record<string, string>) => void;
+  canUpload: boolean;
+  uploads: MarkdownImageUpload[];
+  upload: (files: File[], position?: number) => void;
+  retryUpload: (id: string) => void;
+  removeUpload: (id: string) => void;
+  uploadError: string | null;
+};
+export declare const MarkdownEditorContext: import("react").Context<MarkdownEditorContextValue | null>;
+export declare function useMarkdownEditor(): MarkdownEditorContextValue;
+//#endregion

package/dist/markdown-editor/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+//#region src/markdown-editor/context.ts
+const MarkdownEditorContext = createContext(null);
+function useMarkdownEditor() {
+	const context = useContext(MarkdownEditorContext);
+	if (!context) throw new Error("Markdown editor parts require a MarkdownEditor parent.");
+	return context;
+}
+//#endregion
+export { MarkdownEditorContext, useMarkdownEditor };

package/dist/markdown-editor/drag-handle.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+//#region src/markdown-editor/drag-handle.d.ts
+export declare function MarkdownEditorDragHandle({ container }: {
+  container: RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element | null;
+//#endregion