@ctrl-ui/react 0.9.5 → 0.9.6

package/dist/lib/infinite-canvas-camera.js

@@ -0,0 +1,98 @@
+//#region src/lib/infinite-canvas-camera.ts
+const MAX_CAMERA_OFFSET_PX = 1e7;
+const WHEEL_LINE_HEIGHT_PX = 16;
+const DOM_DELTA_LINE = 1;
+const DOM_DELTA_PAGE = 2;
+function clampScale(scale, minScale, maxScale) {
+	return Math.min(Math.max(scale, minScale), maxScale);
+}
+function sameTransform(left, right) {
+	return left.x === right.x && left.y === right.y && left.scale === right.scale;
+}
+function boundedTransform(next, minScale, maxScale) {
+	if (!(Number.isFinite(next.x) && Number.isFinite(next.y) && Number.isFinite(next.scale)) || next.scale <= 0) return null;
+	return {
+		x: Math.min(Math.max(next.x, -1e7), MAX_CAMERA_OFFSET_PX),
+		y: Math.min(Math.max(next.y, -1e7), MAX_CAMERA_OFFSET_PX),
+		scale: clampScale(next.scale, minScale, maxScale)
+	};
+}
+function toWorldPoint(transform, point) {
+	return {
+		x: (point.x - transform.x) / transform.scale,
+		y: (point.y - transform.y) / transform.scale
+	};
+}
+function zoomAroundPoint(transform, nextScale, point) {
+	const world = toWorldPoint(transform, point);
+	return {
+		x: point.x - world.x * nextScale,
+		y: point.y - world.y * nextScale,
+		scale: nextScale
+	};
+}
+function pinchTransform(start, startMidpoint, midpoint, nextScale) {
+	const zoomed = zoomAroundPoint(start, nextScale, startMidpoint);
+	return {
+		x: zoomed.x + midpoint.x - startMidpoint.x,
+		y: zoomed.y + midpoint.y - startMidpoint.y,
+		scale: nextScale
+	};
+}
+function wheelDeltaMultiplier(deltaMode, pageHeight) {
+	if (deltaMode === DOM_DELTA_LINE) return WHEEL_LINE_HEIGHT_PX;
+	if (deltaMode === DOM_DELTA_PAGE) return pageHeight;
+	return 1;
+}
+function wheelDeltaPixels(event, pageHeight) {
+	const multiplier = wheelDeltaMultiplier(event.deltaMode, pageHeight);
+	const verticalAsHorizontal = event.shiftKey && event.deltaX === 0;
+	return {
+		x: (verticalAsHorizontal ? event.deltaY : event.deltaX) * multiplier,
+		y: (verticalAsHorizontal ? 0 : event.deltaY) * multiplier
+	};
+}
+function unionBounds(bounds) {
+	if (bounds.length === 0) return null;
+	let left = Number.POSITIVE_INFINITY;
+	let top = Number.POSITIVE_INFINITY;
+	let right = Number.NEGATIVE_INFINITY;
+	let bottom = Number.NEGATIVE_INFINITY;
+	for (const entry of bounds) {
+		left = Math.min(left, entry.x);
+		top = Math.min(top, entry.y);
+		right = Math.max(right, entry.x + entry.width);
+		bottom = Math.max(bottom, entry.y + entry.height);
+	}
+	return {
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function fitTransform(bounds, area, limits) {
+	const availableWidth = Math.max(1, area.width - limits.padding * 2);
+	const availableHeight = Math.max(1, area.height - limits.padding * 2);
+	const scale = clampScale(Math.min(availableWidth / Math.max(bounds.width, 1), availableHeight / Math.max(bounds.height, 1)), limits.minScale, limits.maxScale);
+	return {
+		x: area.x + area.width / 2 - (bounds.x + bounds.width / 2) * scale,
+		y: area.y + area.height / 2 - (bounds.y + bounds.height / 2) * scale,
+		scale
+	};
+}
+function revealAxisOffset(start, size, areaStart, areaSize, padding) {
+	const visibleStart = areaStart + padding;
+	const visibleEnd = areaStart + areaSize - padding;
+	if (size > visibleEnd - visibleStart || start < visibleStart) return visibleStart - start;
+	if (start + size > visibleEnd) return visibleEnd - (start + size);
+	return 0;
+}
+function revealOffset(screenBounds, area, padding) {
+	return {
+		x: revealAxisOffset(screenBounds.x, screenBounds.width, area.x, area.width, padding),
+		y: revealAxisOffset(screenBounds.y, screenBounds.height, area.y, area.height, padding)
+	};
+}
+//#endregion
+export { boundedTransform, clampScale, fitTransform, pinchTransform, revealOffset, sameTransform, toWorldPoint, unionBounds, wheelDeltaMultiplier, wheelDeltaPixels, zoomAroundPoint };

package/dist/lib/infinite-canvas-navigation.d.ts

@@ -0,0 +1,19 @@
+import { InfiniteCanvasPoint } from "./infinite-canvas-camera.js";
+import { InfiniteCanvasCameraStore } from "./infinite-canvas-camera-store.js";
+//#region src/lib/infinite-canvas-navigation.d.ts
+export type InfiniteCanvasPanOnDrag = "background" | "anywhere" | "never";
+export type InfiniteCanvasNavigationOptions = {
+  panOnDrag: InfiniteCanvasPanOnDrag;
+  onWheel?: (event: WheelEvent) => void;
+};
+export type InfiniteCanvasNavigation = {
+  beginBackgroundPan: (event: PointerEvent) => void;
+  syncPanReady: () => void;
+  detach: () => void;
+};
+export declare const INFINITE_CANVAS_KEY_SHORTCUTS = "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1";
+export declare const ARROW_KEY_DIRECTIONS: Partial<Record<string, InfiniteCanvasPoint>>;
+export declare function keyboardStep(shiftKey: boolean): number;
+export declare function runInfiniteCanvasKeyCommand(camera: InfiniteCanvasCameraStore, key: string, shiftKey: boolean): boolean;
+export declare function attachInfiniteCanvasNavigation(root: HTMLElement, camera: InfiniteCanvasCameraStore, readOptions: () => InfiniteCanvasNavigationOptions): InfiniteCanvasNavigation;
+//#endregion

package/dist/lib/infinite-canvas-navigation.js

@@ -0,0 +1,395 @@
+import { pinchTransform, wheelDeltaMultiplier, wheelDeltaPixels, zoomAroundPoint } from "./infinite-canvas-camera.js";
+//#region src/lib/infinite-canvas-navigation.ts
+const INFINITE_CANVAS_KEY_SHORTCUTS = "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1";
+const ARROW_KEY_DIRECTIONS = {
+	ArrowLeft: {
+		x: -1,
+		y: 0
+	},
+	ArrowRight: {
+		x: 1,
+		y: 0
+	},
+	ArrowUp: {
+		x: 0,
+		y: -1
+	},
+	ArrowDown: {
+		x: 0,
+		y: 1
+	}
+};
+const KEYBOARD_ZOOM_FACTORS = {
+	"+": 1.15,
+	"=": 1.15,
+	"-": 1 / 1.15
+};
+const KEYBOARD_STEP_PX = 32;
+const WHEEL_ZOOM_SPEED = .004;
+const MAX_WHEEL_ZOOM_DELTA = 50;
+const NOTCHED_WHEEL_DELTA = 40;
+const CLICK_SLOP_PX = 3;
+const MIDDLE_BUTTON = 1;
+const SCROLLABLE_OVERFLOW = /auto|scroll|overlay/;
+const SPACE_CONSUMING_TARGET = [
+	"input",
+	"textarea",
+	"select",
+	"button",
+	"a[href]",
+	"[contenteditable]:not([contenteditable='false'])",
+	...[
+		"button",
+		"checkbox",
+		"combobox",
+		"menuitem",
+		"option",
+		"radio",
+		"slider",
+		"spinbutton",
+		"switch",
+		"tab",
+		"textbox"
+	].map((role) => `[role='${role}']`)
+].join(", ");
+function keyboardStep(shiftKey) {
+	return shiftKey ? 96 : KEYBOARD_STEP_PX;
+}
+function runInfiniteCanvasKeyCommand(camera, key, shiftKey) {
+	const direction = ARROW_KEY_DIRECTIONS[key];
+	if (direction) {
+		const current = camera.getTransform();
+		const step = keyboardStep(shiftKey);
+		camera.move({
+			...current,
+			x: current.x - direction.x * step,
+			y: current.y - direction.y * step
+		}, "keyboard");
+		return true;
+	}
+	const zoomFactor = KEYBOARD_ZOOM_FACTORS[key];
+	if (zoomFactor) camera.zoomBy(zoomFactor, { reason: "keyboard" });
+	else if (key === "0") camera.reset({ reason: "keyboard" });
+	else if (key === "1") camera.fit({ reason: "keyboard" });
+	else return false;
+	return true;
+}
+function canScrollFurther(element, delta) {
+	if (element.scrollHeight <= element.clientHeight && element.scrollWidth <= element.clientWidth) return false;
+	const { overflowX, overflowY } = getComputedStyle(element);
+	const verticalRoom = delta.y < 0 ? element.scrollTop > 0 : Math.ceil(element.scrollTop + element.clientHeight) < element.scrollHeight;
+	const horizontalRoom = delta.x < 0 ? element.scrollLeft > 0 : Math.ceil(element.scrollLeft + element.clientWidth) < element.scrollWidth;
+	return delta.y !== 0 && SCROLLABLE_OVERFLOW.test(overflowY) && verticalRoom || delta.x !== 0 && SCROLLABLE_OVERFLOW.test(overflowX) && horizontalRoom;
+}
+function nestedScrollerConsumes(target, root, delta) {
+	for (let element = target instanceof Element ? target : null; element && element !== root; element = element.parentElement) if (canScrollFurther(element, delta)) return true;
+	return false;
+}
+function gesturePointerIds(active) {
+	return active.kind === "pan" ? [active.pointerId] : active.pointerIds;
+}
+function clickAfterGesture(ended) {
+	if (ended.kind === "pinch") return "click";
+	if (!(ended.explicit || ended.moved)) return null;
+	return ended.button === MIDDLE_BUTTON ? "auxclick" : "click";
+}
+function gestureScale(event) {
+	return "scale" in event && typeof event.scale === "number" ? event.scale : null;
+}
+function gestureClientPoint(event) {
+	if (!("clientX" in event && "clientY" in event)) return null;
+	const { clientX, clientY } = event;
+	return typeof clientX === "number" && typeof clientY === "number" ? {
+		clientX,
+		clientY
+	} : null;
+}
+function attachInfiniteCanvasNavigation(root, camera, readOptions) {
+	const listeners = new AbortController();
+	const { signal } = listeners;
+	const touches = /* @__PURE__ */ new Map();
+	let gesture = null;
+	let spaceHeld = false;
+	let safariPinchStartScale = null;
+	let suppressedClick = null;
+	let suppressedClickTimer;
+	let pointerFocus = false;
+	let pointerFocusTimer;
+	function syncPanReady() {
+		root.toggleAttribute("data-pan-ready", spaceHeld || readOptions().panOnDrag === "anywhere");
+	}
+	function suppressNextClick(type) {
+		suppressedClick = type;
+		clearTimeout(suppressedClickTimer);
+		suppressedClickTimer = setTimeout(() => {
+			suppressedClick = null;
+		});
+	}
+	function startPan(event, explicit) {
+		root.setPointerCapture(event.pointerId);
+		root.toggleAttribute("data-panning", true);
+		gesture = {
+			kind: "pan",
+			pointerId: event.pointerId,
+			button: event.button,
+			explicit,
+			moved: false,
+			startPointer: {
+				x: event.clientX,
+				y: event.clientY
+			},
+			startTransform: camera.getTransform()
+		};
+	}
+	function startPinch() {
+		const [first, second] = [...touches.entries()];
+		if (!(first && second)) return;
+		for (const [pointerId] of [first, second]) if (!root.hasPointerCapture(pointerId)) root.setPointerCapture(pointerId);
+		root.toggleAttribute("data-panning", true);
+		gesture = {
+			kind: "pinch",
+			pointerIds: [first[0], second[0]],
+			startDistance: Math.max(1, Math.hypot(first[1].x - second[1].x, first[1].y - second[1].y)),
+			startMidpoint: camera.toLocalPoint({
+				clientX: (first[1].x + second[1].x) / 2,
+				clientY: (first[1].y + second[1].y) / 2
+			}),
+			startTransform: camera.getTransform()
+		};
+	}
+	function involvesPointer(pointerId) {
+		return gesture !== null && gesturePointerIds(gesture).includes(pointerId);
+	}
+	function finishGesture() {
+		const ended = gesture;
+		if (!ended) return;
+		gesture = null;
+		root.removeAttribute("data-panning");
+		for (const pointerId of gesturePointerIds(ended)) if (root.hasPointerCapture(pointerId)) root.releasePointerCapture(pointerId);
+		const click = clickAfterGesture(ended);
+		if (click) suppressNextClick(click);
+	}
+	function claim(event) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	function isNavigableTarget(target) {
+		return target === root || target instanceof Node && camera.contentElement()?.contains(target) === true;
+	}
+	function markPointerFocus() {
+		pointerFocus = true;
+		clearTimeout(pointerFocusTimer);
+		pointerFocusTimer = setTimeout(() => {
+			pointerFocus = false;
+		});
+	}
+	function claimsTouchPinch(event) {
+		if (event.pointerType !== "touch") return false;
+		if (event.isPrimary) touches.clear();
+		touches.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		if (touches.size < 2) return false;
+		claim(event);
+		if (touches.size === 2) startPinch();
+		return true;
+	}
+	function isExplicitPan(event) {
+		if (!isNavigableTarget(event.target)) return false;
+		if (event.button === MIDDLE_BUTTON) return true;
+		return event.button === 0 && (spaceHeld || readOptions().panOnDrag === "anywhere");
+	}
+	function claimNavigationPointer(event) {
+		markPointerFocus();
+		if (claimsTouchPinch(event) || gesture || !event.isPrimary || !isExplicitPan(event)) return;
+		claim(event);
+		startPan(event, true);
+	}
+	function followPointer(event) {
+		if (touches.has(event.pointerId)) touches.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		if (!(gesture && involvesPointer(event.pointerId))) return;
+		if (gesture.kind === "pan") {
+			const deltaX = event.clientX - gesture.startPointer.x;
+			const deltaY = event.clientY - gesture.startPointer.y;
+			if (Math.hypot(deltaX, deltaY) > CLICK_SLOP_PX) gesture.moved = true;
+			const { startTransform } = gesture;
+			camera.move({
+				...startTransform,
+				x: startTransform.x + deltaX,
+				y: startTransform.y + deltaY
+			}, "pointer");
+			return;
+		}
+		const [first, second] = gesture.pointerIds.map((pointerId) => touches.get(pointerId));
+		if (!(first && second)) return;
+		const midpoint = camera.toLocalPoint({
+			clientX: (first.x + second.x) / 2,
+			clientY: (first.y + second.y) / 2
+		});
+		const ratio = Math.hypot(first.x - second.x, first.y - second.y) / gesture.startDistance;
+		const nextScale = camera.limitScale(gesture.startTransform.scale * ratio);
+		camera.move(pinchTransform(gesture.startTransform, gesture.startMidpoint, midpoint, nextScale), "pinch");
+	}
+	function releasePointer(event) {
+		touches.delete(event.pointerId);
+		if (involvesPointer(event.pointerId)) finishGesture();
+	}
+	function zoomWithWheel(event) {
+		event.preventDefault();
+		if (safariPinchStartScale !== null) return;
+		const current = camera.getTransform();
+		const zoomDelta = event.deltaY * wheelDeltaMultiplier(event.deltaMode, root.clientHeight);
+		const boundedDelta = Math.min(Math.max(zoomDelta, -50), MAX_WHEEL_ZOOM_DELTA);
+		const nextScale = camera.limitScale(current.scale * Math.exp(-boundedDelta * WHEEL_ZOOM_SPEED));
+		camera.move(zoomAroundPoint(current, nextScale, camera.toLocalPoint(event)), "wheel", Math.abs(zoomDelta) >= NOTCHED_WHEEL_DELTA);
+	}
+	function handleWheel(event) {
+		readOptions().onWheel?.(event);
+		if (event.defaultPrevented) return;
+		if (event.ctrlKey || event.metaKey) {
+			zoomWithWheel(event);
+			return;
+		}
+		const delta = wheelDeltaPixels(event, root.clientHeight);
+		if (nestedScrollerConsumes(event.target, root, delta)) return;
+		event.preventDefault();
+		const current = camera.getTransform();
+		camera.move({
+			...current,
+			x: current.x - delta.x,
+			y: current.y - delta.y
+		}, "wheel");
+	}
+	function startSafariPinch(event) {
+		event.preventDefault();
+		safariPinchStartScale = camera.getTransform().scale;
+	}
+	function followSafariPinch(event) {
+		event.preventDefault();
+		const scale = gestureScale(event);
+		if (safariPinchStartScale === null || scale === null || gesture?.kind === "pinch") return;
+		const clientPoint = gestureClientPoint(event);
+		const origin = clientPoint ? camera.toLocalPoint(clientPoint) : {
+			x: root.clientWidth / 2,
+			y: root.clientHeight / 2
+		};
+		camera.move(zoomAroundPoint(camera.getTransform(), camera.limitScale(safariPinchStartScale * scale), origin), "pinch");
+	}
+	function endSafariPinch(event) {
+		event.preventDefault();
+		safariPinchStartScale = null;
+	}
+	function armSpacePan(event) {
+		if (event.code !== "Space") return;
+		if (spaceHeld) {
+			event.preventDefault();
+			return;
+		}
+		if (event.defaultPrevented || event.repeat || event.isComposing || event.ctrlKey || event.metaKey || event.altKey) return;
+		const { target } = event;
+		if (target instanceof HTMLElement && (target.isContentEditable || target.matches(SPACE_CONSUMING_TARGET))) return;
+		if (!(root.contains(document.activeElement) || root.matches(":hover"))) return;
+		event.preventDefault();
+		spaceHeld = true;
+		syncPanReady();
+	}
+	function disarmSpacePan(event) {
+		if (event.code !== "Space" || !spaceHeld) return;
+		spaceHeld = false;
+		syncPanReady();
+	}
+	function releaseHeldInput() {
+		spaceHeld = false;
+		safariPinchStartScale = null;
+		touches.clear();
+		finishGesture();
+		syncPanReady();
+	}
+	function swallowClickAfterPan(event) {
+		if (event.type !== suppressedClick) return;
+		suppressedClick = null;
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	function revealKeyboardFocus(event) {
+		if (pointerFocus || !(event.target instanceof Element)) return;
+		if (camera.contentElement()?.contains(event.target)) camera.revealElement(event.target);
+	}
+	function absorbNativeScroll() {
+		const { scrollLeft, scrollTop } = root;
+		if (scrollLeft === 0 && scrollTop === 0) return;
+		root.scrollTo(0, 0);
+		const current = camera.getTransform();
+		camera.moveNow({
+			...current,
+			x: current.x - scrollLeft,
+			y: current.y - scrollTop
+		}, "reveal");
+	}
+	root.addEventListener("pointerdown", claimNavigationPointer, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("pointermove", followPointer, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("pointerup", releasePointer, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("pointercancel", releasePointer, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("lostpointercapture", (event) => {
+		if (event.target === root && involvesPointer(event.pointerId)) finishGesture();
+	}, { signal });
+	root.addEventListener("click", swallowClickAfterPan, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("auxclick", swallowClickAfterPan, {
+		capture: true,
+		signal
+	});
+	root.addEventListener("mousedown", (event) => {
+		if (event.button === MIDDLE_BUTTON && isNavigableTarget(event.target)) event.preventDefault();
+	}, { signal });
+	root.addEventListener("wheel", handleWheel, {
+		passive: false,
+		signal
+	});
+	root.addEventListener("gesturestart", startSafariPinch, { signal });
+	root.addEventListener("gesturechange", followSafariPinch, { signal });
+	root.addEventListener("gestureend", endSafariPinch, { signal });
+	root.addEventListener("focusin", revealKeyboardFocus, { signal });
+	root.addEventListener("scroll", absorbNativeScroll, { signal });
+	window.addEventListener("keydown", armSpacePan, { signal });
+	window.addEventListener("keyup", disarmSpacePan, { signal });
+	window.addEventListener("blur", releaseHeldInput, { signal });
+	document.addEventListener("visibilitychange", () => {
+		if (document.visibilityState === "hidden") releaseHeldInput();
+	}, { signal });
+	syncPanReady();
+	return {
+		beginBackgroundPan(event) {
+			if (gesture || event.defaultPrevented || event.target !== root || !event.isPrimary || event.button !== 0) return;
+			if (readOptions().panOnDrag === "background") startPan(event, false);
+		},
+		syncPanReady,
+		detach() {
+			listeners.abort();
+			clearTimeout(suppressedClickTimer);
+			clearTimeout(pointerFocusTimer);
+			releaseHeldInput();
+			root.removeAttribute("data-pan-ready");
+		}
+	};
+}
+//#endregion
+export { ARROW_KEY_DIRECTIONS, INFINITE_CANVAS_KEY_SHORTCUTS, attachInfiniteCanvasNavigation, keyboardStep, runInfiniteCanvasKeyCommand };

package/dist/markdown-editor/bubble-menu.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+//#region src/markdown-editor/bubble-menu.d.ts
+export declare function MarkdownEditorBubbleMenu({ children }: {
+  children?: ReactNode;
+}): import("react").JSX.Element | null;
+//#endregion

package/dist/markdown-editor/bubble-menu.js

@@ -0,0 +1,45 @@
+"use client";
+import { TooltipProvider } from "../ui/tooltip.js";
+import { useMarkdownEditor } from "./context.js";
+import { Toolbar, ToolbarSeparator } from "../ui/toolbar.js";
+import { MarkdownEditorFormatButton, MarkdownEditorHeading, MarkdownEditorLink, useMarkdownEditorFormatActions } from "./toolbar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeSelection } from "@tiptap/pm/state";
+import { BubbleMenu } from "@tiptap/react/menus";
+//#region src/markdown-editor/bubble-menu.tsx
+const showForFormattableText = ({ editor, view, state, element }) => {
+	const { selection } = state;
+	return !(selection instanceof NodeSelection) && !selection.empty && state.doc.textBetween(selection.from, selection.to).trim() !== "" && !editor.isActive("codeBlock") && editor.isEditable && (view.hasFocus() || element.contains(document.activeElement));
+};
+const floatingOptions = {
+	placement: "top",
+	offset: 8,
+	flip: { padding: 8 },
+	shift: { padding: 8 }
+};
+function MarkdownEditorBubbleMenu({ children }) {
+	const { editor, disabled, source } = useMarkdownEditor();
+	const { marks } = useMarkdownEditorFormatActions();
+	if (!editor || disabled || source) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu, {
+		editor,
+		shouldShow: showForFormattableText,
+		options: floatingOptions,
+		"data-control-ui": "markdown-editor",
+		"data-control-family": "markdown-editor",
+		"data-slot": "bubble-menu",
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Toolbar, {
+			"aria-label": "Selection formatting",
+			variant: "floating",
+			children: [
+				/* @__PURE__ */ jsx(MarkdownEditorHeading, {}),
+				/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+				marks.map((action) => /* @__PURE__ */ jsx(MarkdownEditorFormatButton, { action }, action.label)),
+				/* @__PURE__ */ jsx(MarkdownEditorLink, {}),
+				children
+			]
+		}) })
+	});
+}
+//#endregion
+export { MarkdownEditorBubbleMenu };

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

@@ -1,8 +1,24 @@
-import { ReactNode } from "react";
+import { MouseEventHandler, ReactNode } from "react";
+import { BoldIcon } from "lucide-react";
 //#region src/markdown-editor/toolbar.d.ts
+type MarkdownEditorFormatAction = {
+  label: string;
+  Icon: typeof BoldIcon;
+  active: boolean;
+  run: () => void;
+};
+export declare function useMarkdownEditorFormatActions(): {
+  marks: MarkdownEditorFormatAction[];
+  blocks: MarkdownEditorFormatAction[];
+};
+export declare function MarkdownEditorFormatButton({ action, onMouseDown }: {
+  action: MarkdownEditorFormatAction;
+  onMouseDown?: MouseEventHandler<HTMLButtonElement>;
+}): import("react").JSX.Element;
 export declare function MarkdownEditorToolbar({ children }: {
   children?: ReactNode;
 }): import("react").JSX.Element;
+export declare function MarkdownEditorHeading(): import("react").JSX.Element;
 export declare function MarkdownEditorLink(): import("react").JSX.Element;
 export declare function MarkdownEditorImage(): import("react").JSX.Element;
 export declare function MarkdownEditorUploads(): import("react").JSX.Element;