@ctrl-ui/react 0.8.19 → 0.8.20

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/markdown-editor-knobs.d.ts

@@ -1,4 +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-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 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

@@ -5,6 +5,7 @@ const markdownEditorKnobs = [
 	"--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",

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/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/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

package/dist/markdown-editor/drag-handle.js

@@ -0,0 +1,126 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { LiveStatus } from "../ui/live-status.js";
+import { useMarkdownEditor } from "./context.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { GripVerticalIcon } from "lucide-react";
+import { NodeSelection } from "@tiptap/pm/state";
+import { closeHistory } from "@tiptap/pm/history";
+//#region src/markdown-editor/drag-handle.tsx
+function MarkdownEditorDragHandle({ container }) {
+	const { editor, disabled, source } = useMarkdownEditor();
+	const [block, setBlock] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const button = useRef(null);
+	const dragging = useRef(false);
+	useEffect(() => {
+		const surface = container.current;
+		if (!editor || !surface || disabled || source) return;
+		function show(blockPosition) {
+			if (!editor || !surface) return;
+			const node = editor.view.nodeDOM(blockPosition);
+			if (!(node instanceof HTMLElement)) return;
+			const top = node.getBoundingClientRect().top - surface.getBoundingClientRect().top + surface.scrollTop;
+			setBlock((current) => current?.position === blockPosition && current.top === top ? current : {
+				position: blockPosition,
+				top
+			});
+		}
+		function track(event) {
+			if (!editor || dragging.current || button.current?.contains(event.target instanceof Node ? event.target : null)) return;
+			const rect = editor.view.dom.getBoundingClientRect();
+			const padding = Number.parseFloat(getComputedStyle(editor.view.dom).paddingInlineStart);
+			const hit = editor.view.posAtCoords({
+				left: Math.max(event.clientX, rect.left + padding),
+				top: event.clientY
+			});
+			if (!hit) return;
+			const resolved = editor.state.doc.resolve(hit.pos);
+			show(resolved.depth > 0 ? resolved.before(1) : hit.pos);
+		}
+		function selectionChanged() {
+			if (!editor || dragging.current) return;
+			const { $from } = editor.state.selection;
+			show($from.depth > 0 ? $from.before(1) : $from.pos);
+		}
+		function hide() {
+			if (!dragging.current && document.activeElement !== button.current) setBlock(null);
+		}
+		surface.addEventListener("mousemove", track);
+		surface.addEventListener("mouseleave", hide);
+		editor.on("transaction", selectionChanged).on("focus", selectionChanged);
+		return () => {
+			surface.removeEventListener("mousemove", track);
+			surface.removeEventListener("mouseleave", hide);
+			editor.off("transaction", selectionChanged).off("focus", selectionChanged);
+			editor.view.dragging = null;
+		};
+	}, [
+		editor,
+		container,
+		disabled,
+		source
+	]);
+	if (!editor || disabled || source) return null;
+	const selected = editor.state.selection.$from;
+	const position = block?.position ?? (selected.depth > 0 ? selected.before(1) : selected.pos);
+	function move(direction) {
+		if (!editor) return;
+		const { doc, tr } = editor.state;
+		const node = doc.nodeAt(position);
+		if (!node) return;
+		const adjacent = direction === -1 ? doc.resolve(position).nodeBefore : doc.nodeAt(position + node.nodeSize);
+		if (!adjacent) return;
+		const target = direction === -1 ? position - adjacent.nodeSize : position + adjacent.nodeSize;
+		tr.delete(position, position + node.nodeSize).insert(target, node);
+		tr.setSelection(NodeSelection.create(tr.doc, target));
+		editor.view.dispatch(closeHistory(tr).scrollIntoView());
+		setAnnouncement(`Block moved ${direction === -1 ? "up" : "down"}.`);
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		ref: button,
+		type: "button",
+		variant: "ghost",
+		size: "xs",
+		iconOnly: true,
+		"data-markdown-drag-handle": "",
+		"data-visible": block ? "" : void 0,
+		"aria-label": "Drag to reorder block",
+		"aria-description": "Drag this block, or use Alt+ArrowUp and Alt+ArrowDown to move it.",
+		title: "Drag to reorder · Alt+↑/↓ to move",
+		draggable: true,
+		style: { top: block?.top },
+		onClick: () => editor.commands.setNodeSelection(position),
+		onKeyDown: (event) => {
+			if (!event.altKey || !["ArrowUp", "ArrowDown"].includes(event.key)) return;
+			event.preventDefault();
+			move(event.key === "ArrowUp" ? -1 : 1);
+		},
+		onDragStart: (event) => {
+			const { view } = editor;
+			const selection = NodeSelection.create(view.state.doc, position);
+			const node = view.nodeDOM(position);
+			view.dispatch(view.state.tr.setSelection(selection));
+			const { dom, text, slice } = view.serializeForClipboard(selection.content());
+			event.dataTransfer.clearData();
+			event.dataTransfer.setData("text/html", dom.innerHTML);
+			event.dataTransfer.setData("text/plain", text);
+			event.dataTransfer.effectAllowed = "copyMove";
+			if (node instanceof HTMLElement) event.dataTransfer.setDragImage(node, 0, 0);
+			view.dragging = {
+				slice,
+				move: true
+			};
+			dragging.current = true;
+		},
+		onDragEnd: () => {
+			editor.view.dragging = null;
+			dragging.current = false;
+			setBlock(null);
+		},
+		children: /* @__PURE__ */ jsx(GripVerticalIcon, { "aria-hidden": "true" })
+	}), /* @__PURE__ */ jsx(LiveStatus, { message: announcement })] });
+}
+//#endregion
+export { MarkdownEditorDragHandle };

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

@@ -0,0 +1,12 @@
+import { TriggerMenuItemData } from "../hooks/use-trigger-menu.js";
+//#region src/markdown-editor/suggestions.d.ts
+export type MarkdownEditorMention = TriggerMenuItemData & {
+  href: string;
+};
+export type MarkdownEditorSuggestionsProps = {
+  /** The application supplies people and their persistent profile URLs. */
+  mentions?: readonly MarkdownEditorMention[] | ((query: string) => readonly MarkdownEditorMention[]);
+  onMentionSelect?: (mention: MarkdownEditorMention) => void;
+};
+export declare function MarkdownEditorSuggestions({ mentions, onMentionSelect }: MarkdownEditorSuggestionsProps): import("react").JSX.Element;
+//#endregion