@haklex/rich-editor-ui 0.57.0 → 0.58.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlertTriangle, ArrowLeft, Check, ChevronDown, ChevronRight, ChevronUp, Copy, Info, Pipette, Plus, X } from "lucide-react";
+import { AlertCircle, AlertTriangle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Check, CheckCircle2, ChevronDown, ChevronRight, ChevronUp, Copy, CornerDownLeft, Delete, Info, Pipette, Plus, X } from "lucide-react";
 import { createContext, createElement, forwardRef, use, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
@@ -161,11 +161,15 @@ var actionButton$1 = createRuntimeFn({
 			icon: true,
 			size: "lg"
 		}, "_73ej2ij"],
+		[{
+			icon: true,
+			variant: "ghost"
+		}, "_73ej2ik"],
 		[{
 			rounded: true,
 			icon: true
-		}, "_73ej2ik"],
-		[{ danger: true }, "_73ej2il"]
+		}, "_73ej2il"],
+		[{ danger: true }, "_73ej2im"]
 	]
 });
 //#endregion
@@ -205,37 +209,46 @@ function getActionButtonClassName(options) {
 //#endregion
 //#region src/components/alert/styles.css.ts
 var alert = createRuntimeFn({
-	defaultClassName: "_15r7gwx0",
+	defaultClassName: "_15r7gwx5",
 	variantClassNames: { variant: {
-		info: "_15r7gwx1",
-		warning: "_15r7gwx2",
-		error: "_15r7gwx3"
+		info: "_15r7gwx6",
+		success: "_15r7gwx7",
+		warning: "_15r7gwx8",
+		error: "_15r7gwx9",
+		neutral: "_15r7gwxa"
 	} },
 	defaultVariants: { variant: "info" },
 	compoundVariants: []
 });
-var alertContent = "_15r7gwx4";
-var alertIcon = "_15r7gwx5";
+var alertContent = "_15r7gwxb";
+var alertIcon = "_15r7gwxd";
 //#endregion
 //#region src/components/alert/index.tsx
-var icons = {
+var icons$1 = {
 	info: Info,
+	success: CheckCircle2,
 	warning: AlertTriangle,
-	error: AlertCircle
+	error: AlertCircle,
+	neutral: Info
 };
-function Alert({ variant, children, action, className }) {
-	const IconComponent = icons[variant];
+function Alert({ variant, title, children, action, className }) {
+	const IconComponent = icons$1[variant];
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${alert({ variant })}${className ? ` ${className}` : ""}`,
+		"data-variant": variant,
 		role: "alert",
 		children: [
 			/* @__PURE__ */ jsx(IconComponent, { className: alertIcon }),
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
 				className: alertContent,
-				children
+				children: [title && /* @__PURE__ */ jsx("div", {
+					className: "_15r7gwxc",
+					"data-slot": "alert-title",
+					children: title
+				}), /* @__PURE__ */ jsx("div", { children })]
 			}),
 			action && /* @__PURE__ */ jsx("div", {
-				className: "_15r7gwx6",
+				className: "_15r7gwxe",
 				children: action
 			})
 		]
@@ -385,87 +398,84 @@ var badge = createRuntimeFn({
 });
 //#endregion
 //#region src/components/badge/index.tsx
-function Badge({ variant, size, children, className }) {
-	return /* @__PURE__ */ jsx("span", {
+function Badge({ variant, size, dot, children, className }) {
+	return /* @__PURE__ */ jsxs("span", {
 		className: `${badge({
 			variant,
 			size
 		})}${className ? ` ${className}` : ""}`,
-		children
+		children: [dot && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "_1vt0sm18",
+			"data-slot": "badge-dot"
+		}), children]
 	});
 }
 //#endregion
 //#region src/components/checkbox/styles.css.ts
-var root = "_10muorc2";
-var box = "_10muorc4";
-var boxUnchecked = "_10muorc5";
-var boxChecked = "_10muorc6";
-var checkmark = "_10muorc8";
-var checkmarkVisible = "_10muorc9";
-var checkmarkHidden = "_10muorca";
-var ripple = "_10muorcb";
+var root = "_10muorc0";
+var box = "_10muorc2";
+var boxUnchecked = "_10muorc3";
+var boxChecked = "_10muorc4";
+var mark = "_10muorc5";
+var markVisible = "_10muorc6";
+var markHidden = "_10muorc7";
 //#endregion
 //#region src/components/checkbox/index.tsx
 function cx(...args) {
 	return args.filter(Boolean).join(" ");
 }
-function AnimatedCheckbox({ label, description, checked: controlledChecked, defaultChecked = false, onChange, disabled = false, className }) {
+function AnimatedCheckbox({ label, description, checked: controlledChecked, defaultChecked = false, indeterminate = false, onChange, disabled = false, className }) {
 	const [internalChecked, setInternalChecked] = useState(defaultChecked);
-	const [bouncing, setBouncing] = useState(false);
 	const isControlled = controlledChecked !== void 0;
 	const isChecked = isControlled ? controlledChecked : internalChecked;
-	const isFirstRender = useRef(true);
-	const rippleKey = useRef(0);
-	useEffect(() => {
-		if (isFirstRender.current) {
-			isFirstRender.current = false;
-			return;
-		}
-		setBouncing(true);
-		rippleKey.current += 1;
-		const timer = setTimeout(() => setBouncing(false), 400);
-		return () => clearTimeout(timer);
-	}, [isChecked]);
+	const filled = indeterminate || isChecked;
 	const handleToggle = () => {
 		if (disabled) return;
-		const next = !isChecked;
+		const next = indeterminate ? true : !isChecked;
 		if (!isControlled) setInternalChecked(next);
 		onChange?.(next);
 	};
 	return /* @__PURE__ */ jsxs("button", {
-		"aria-checked": isChecked,
+		"aria-checked": indeterminate ? "mixed" : isChecked,
 		"aria-disabled": disabled,
-		className: cx(root, disabled && "_10muorc3", className),
+		className: cx(root, disabled && "_10muorc1", className),
 		role: "checkbox",
 		type: "button",
 		onClick: handleToggle,
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: cx(box, isChecked ? boxChecked : boxUnchecked, bouncing && "_10muorc7"),
+			className: cx(box, filled ? boxChecked : boxUnchecked),
 			children: [/* @__PURE__ */ jsx("svg", {
-				className: cx(checkmark, isChecked ? checkmarkVisible : checkmarkHidden),
+				"aria-hidden": true,
+				className: cx(mark, isChecked && !indeterminate ? markVisible : markHidden),
 				fill: "none",
-				viewBox: "0 0 12 10",
+				viewBox: "0 0 12 12",
 				children: /* @__PURE__ */ jsx("path", {
-					d: "M1 5.5L4 8.5L11 1.5",
+					d: "M2.5 6.25L5 8.75L9.5 3.5",
 					stroke: "currentColor",
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
-					strokeWidth: "2",
-					style: {
-						color: "#fff",
-						strokeDasharray: 20,
-						strokeDashoffset: isChecked ? 0 : 20,
-						transition: isChecked ? "stroke-dashoffset 0.4s ease-out 0.1s" : "stroke-dashoffset 0.2s ease-in"
-					}
+					strokeWidth: "1.75"
 				})
-			}), /* @__PURE__ */ jsx("span", { className: cx(ripple, bouncing && "_10muorcc") }, rippleKey.current)]
+			}), /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": true,
+				className: cx(mark, indeterminate ? markVisible : markHidden),
+				fill: "none",
+				viewBox: "0 0 12 12",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M3 6H9",
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeWidth: "1.75"
+				})
+			})]
 		}), (label || description) && /* @__PURE__ */ jsxs("span", {
-			className: "_10muorcd",
+			className: "_10muorc8",
 			children: [label && /* @__PURE__ */ jsx("span", {
-				className: cx("_10muorce", disabled && "_10muorcf"),
+				className: cx("_10muorc9", disabled && "_10muorca"),
 				children: label
 			}), description && /* @__PURE__ */ jsx("span", {
-				className: "_10muorcg",
+				className: "_10muorcb",
 				children: description
 			})]
 		})]
@@ -603,6 +613,7 @@ function CodeBlockCard({ children, chrome = "bar", className, code, collapsible
 				}), showCopyButton && /* @__PURE__ */ jsxs("button", {
 					"aria-label": copied ? "Copied" : "Copy code",
 					className: "_1gq8hf94",
+					"data-copied": copied || void 0,
 					type: "button",
 					onClick: handleCopy,
 					children: [copied ? CheckIcon$1 : CopyIcon, /* @__PURE__ */ jsx("span", { children: copied ? "Copied" : "Copy" })]
@@ -1107,6 +1118,7 @@ function CodeBlock({ chrome, className, collapsible = true, code, language, show
 //#region src/components/collapsible/styles.css.ts
 var trigger$1 = "_1hdi6a90";
 var panel$2 = "_1hdi6a92";
+var panelContent = "_1hdi6a93";
 //#endregion
 //#region src/components/collapsible/index.tsx
 function Collapsible(props) {
@@ -1116,6 +1128,7 @@ function CollapsibleTrigger({ children, className, hideChevron, ...props }) {
 	return /* @__PURE__ */ jsxs(Collapsible$1.Trigger, {
 		...props,
 		className: `${trigger$1}${className ? ` ${className}` : ""}`,
+		"data-no-chevron": hideChevron || void 0,
 		children: [!hideChevron && /* @__PURE__ */ jsx(ChevronRight, { className: "_1hdi6a91" }), children]
 	});
 }
@@ -1123,7 +1136,10 @@ function CollapsiblePanel({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
 		...props,
 		className: `${panel$2}${className ? ` ${className}` : ""}`,
-		children
+		children: /* @__PURE__ */ jsx("div", {
+			className: panelContent,
+			children
+		})
 	});
 }
 //#endregion
@@ -1143,10 +1159,10 @@ function getStrictContext(name) {
 }
 //#endregion
 //#region src/components/popover/styles.css.ts
-var popup$5 = "f2q44l2";
-var arrow = "f2q44l3";
-var title$1 = "f2q44l4";
-var description$1 = "f2q44l5";
+var popup$5 = "f2q44l0";
+var arrow = "f2q44l1";
+var title$1 = "f2q44l2";
+var description$1 = "f2q44l3";
 //#endregion
 //#region src/components/popover/index.tsx
 var [PopoverProvider, usePopover] = getStrictContext("PopoverContext");
@@ -1327,36 +1343,35 @@ function huePreviewHex(h) {
 }
 //#endregion
 //#region src/components/color-picker/styles.css.ts
-var trigger = "_17r50hf1";
-var triggerLabel = "_17r50hf2";
-var triggerLetter = "_17r50hf3";
-var triggerBar = "_17r50hf4";
-var triggerChevron = "_17r50hf5";
-var panel$1 = "_17r50hf6";
-var grid = "_17r50hf7";
-var swatch = "_17r50hf8";
-var swatchDot = "_17r50hf9";
-var addSwatchDot = "_17r50hfb";
-var addSwatchIcon = "_17r50hfc";
-var pickerView = "_17r50hfd";
-var backButton = "_17r50hfe";
-var backIcon = "_17r50hff";
-var satSquare = "_17r50hfg";
-var satOverlayX = "_17r50hfh";
-var satOverlayY = "_17r50hfi";
-var satThumb = "_17r50hfj";
-var hueTrack = "_17r50hfk";
-var alphaTrack = "_17r50hfl";
-var alphaGradient = "_17r50hfm";
-var sliderThumb = "_17r50hfn";
-var hexRow = "_17r50hfo";
-var hexInput = "_17r50hfp";
-var hexInputInvalid = "_17r50hfq";
-var previewPair = "_17r50hft";
-var previewCell = "_17r50hfu";
-var actionRow = "_17r50hfv";
-var actionButton = "_17r50hfw";
-var actionButtonPrimary = "_17r50hfx";
+var trigger = "_17r50hf0";
+var triggerLabel = "_17r50hf1";
+var triggerLetter = "_17r50hf2";
+var triggerBar = "_17r50hf3";
+var triggerChevron = "_17r50hf4";
+var panel$1 = "_17r50hf5";
+var grid = "_17r50hf6";
+var swatch = "_17r50hf7";
+var swatchDot = "_17r50hf8";
+var addSwatchDot = "_17r50hf9";
+var addSwatchIcon = "_17r50hfa";
+var pickerView = "_17r50hfb";
+var backButton = "_17r50hfc";
+var backIcon = "_17r50hfd";
+var satSquare = "_17r50hfe";
+var satOverlayX = "_17r50hff";
+var satOverlayY = "_17r50hfg";
+var satThumb = "_17r50hfh";
+var hueTrack = "_17r50hfi";
+var alphaTrack = "_17r50hfj";
+var alphaGradient = "_17r50hfk";
+var sliderThumb = "_17r50hfl";
+var hexRow = "_17r50hfm";
+var hexInput = "_17r50hfn";
+var hexInputInvalid = "_17r50hfo";
+var previewPair = "_17r50hfr";
+var previewCell = "_17r50hfs";
+var actionRow = "_17r50hft";
+var actionButton = "_17r50hfu";
 //#endregion
 //#region src/components/color-picker/picker-view.tsx
 var FALLBACK = {
@@ -1540,11 +1555,11 @@ function PickerView({ initialColor, onApply, onCancel, onBack }) {
 					}),
 					hasEyeDropper && /* @__PURE__ */ jsx("button", {
 						"aria-label": "Pick color from screen",
-						className: "_17r50hfr",
+						className: "_17r50hfp",
 						type: "button",
 						onClick: openEyeDropper,
 						onMouseDown: (e) => e.preventDefault(),
-						children: /* @__PURE__ */ jsx(Pipette, { className: "_17r50hfs" })
+						children: /* @__PURE__ */ jsx(Pipette, { className: "_17r50hfq" })
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						"aria-hidden": true,
@@ -1561,15 +1576,17 @@ function PickerView({ initialColor, onApply, onCancel, onBack }) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: actionRow,
-				children: [/* @__PURE__ */ jsx("button", {
+				children: [/* @__PURE__ */ jsx(ActionButton, {
 					className: actionButton,
-					type: "button",
+					size: "md",
+					variant: "outline",
 					onClick: onCancel,
 					onMouseDown: (e) => e.preventDefault(),
 					children: "Cancel"
-				}), /* @__PURE__ */ jsx("button", {
-					className: `${actionButton} ${actionButtonPrimary}`,
-					type: "button",
+				}), /* @__PURE__ */ jsx(ActionButton, {
+					className: actionButton,
+					size: "md",
+					variant: "solid",
 					onClick: handleApply,
 					onMouseDown: (e) => e.preventDefault(),
 					children: "Apply"
@@ -1669,16 +1686,17 @@ function ColorPicker({ currentColor, onSelect, className }) {
 			sideOffset: 6,
 			children: view === "preset" ? /* @__PURE__ */ jsxs("div", {
 				className: grid,
-				children: [TEXT_COLORS.map((color) => /* @__PURE__ */ jsxs("button", {
+				children: [TEXT_COLORS.map((color) => /* @__PURE__ */ jsx("button", {
 					"aria-label": color.name,
+					"aria-pressed": currentColor === color.value,
 					className: swatch,
 					type: "button",
 					onClick: () => handlePreset(color.value),
 					onMouseDown: (e) => e.preventDefault(),
-					children: [/* @__PURE__ */ jsx("span", {
+					children: /* @__PURE__ */ jsx("span", {
 						className: swatchDot,
 						style: { backgroundColor: color.value === "inherit" ? "currentColor" : color.value }
-					}), currentColor === color.value && /* @__PURE__ */ jsx(Check, { className: "_17r50hfa" })]
+					})
 				}, color.value)), /* @__PURE__ */ jsx("button", {
 					"aria-label": "Custom color",
 					className: swatch,
@@ -1699,11 +1717,9 @@ function ColorPicker({ currentColor, onSelect, className }) {
 		})]
 	});
 }
-//#endregion
-//#region src/components/combobox/styles.css.ts
-var popup$4 = "_2buwsh0";
-var item$3 = "_2buwsh1";
-var empty = "_2buwsh2";
+var popup$4 = "_2buwsh1";
+var item$3 = "_2buwsh2";
+var empty = "_2buwsh3";
 //#endregion
 //#region src/components/combobox/index.tsx
 function Combobox(props) {
@@ -1717,7 +1733,7 @@ function ComboboxTrigger({ className, ...props }) {
 }
 function ComboboxInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.Input, {
-		className,
+		className: className ?? "_2buwsh0",
 		...props
 	});
 }
@@ -1765,18 +1781,18 @@ function ComboboxGroupLabel(props) {
 }
 //#endregion
 //#region src/components/dialog/styles.css.ts
-var backdrop = "vwlngv4";
-var popup$3 = "vwlngv5";
-var header = "vwlngv7";
-var headerContent = "vwlngv8";
-var footer = "vwlngva";
-var title = "vwlngvb";
-var description = "vwlngvc";
-var sheetBackdrop = "vwlngvf";
-var sheetContainer = "vwlngvg";
-var sheetDragHandle = "vwlngvh";
-var sheetDragPill = "vwlngvi";
-var sheetContent = "vwlngvj";
+var backdrop = "vwlngv0";
+var popup$3 = "vwlngv1";
+var header = "vwlngv3";
+var headerContent = "vwlngv4";
+var footer = "vwlngv5";
+var title = "vwlngv6";
+var description = "vwlngv7";
+var sheetBackdrop = "vwlngva";
+var sheetContainer = "vwlngvb";
+var sheetDragHandle = "vwlngvc";
+var sheetDragPill = "vwlngvd";
+var sheetContent = "vwlngve";
 //#endregion
 //#region src/components/dialog/index.tsx
 function Dialog(props) {
@@ -1802,7 +1818,7 @@ function DialogPopup({ showCloseButton = true, className, children, ...props })
 		className: `${popup$3}${className ? ` ${className}` : ""}`,
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
-			className: "vwlngv6",
+			className: "vwlngv2",
 			children: /* @__PURE__ */ jsx(X, {})
 		})]
 	})] });
@@ -1846,7 +1862,7 @@ var listeners = /* @__PURE__ */ new Set();
 function emit() {
 	for (const fn of listeners) fn();
 }
-function subscribe(fn) {
+function subscribe$1(fn) {
 	listeners.add(fn);
 	return () => {
 		listeners.delete(fn);
@@ -1969,7 +1985,7 @@ var SheetStackEntry = ({ item, index }) => {
 	}, [dismiss]);
 	const zIndex = 50 + index;
 	const sheetHeight = sheetRef.current?.offsetHeight || 1;
-	const backdropOpacity = isDragging ? Math.max(0, 1 - translateY / sheetHeight) * .5 : .5;
+	const backdropOpacity = isDragging ? Math.max(0, 1 - translateY / sheetHeight) : 1;
 	return /* @__PURE__ */ jsx(PortalThemeProvider$1, {
 		className: portalClassName ?? "",
 		theme,
@@ -2000,12 +2016,12 @@ var SheetStackEntry = ({ item, index }) => {
 					children: /* @__PURE__ */ jsx("div", { className: sheetDragPill })
 				}),
 				(title$3 || description$4) && /* @__PURE__ */ jsxs("div", {
-					className: "vwlngvk",
+					className: "vwlngvf",
 					children: [title$3 && /* @__PURE__ */ jsx("div", {
-						className: "vwlngvb",
+						className: "vwlngv6",
 						children: title$3
 					}), description$4 && /* @__PURE__ */ jsx("div", {
-						className: "vwlngvc",
+						className: "vwlngv7",
 						children: description$4
 					})]
 				}),
@@ -2064,18 +2080,18 @@ var DialogStackEntry = ({ item, index }) => {
 				"data-theme": theme,
 				style: { zIndex: zIndex + 1 },
 				children: [(title$2 || description$3 || showCloseButton) && /* @__PURE__ */ jsxs("div", {
-					className: "vwlngv7",
+					className: "vwlngv3",
 					children: [(title$2 || description$3) && /* @__PURE__ */ jsxs("div", {
-						className: "vwlngv8",
+						className: "vwlngv4",
 						children: [title$2 && /* @__PURE__ */ jsx(Dialog$1.Title, {
-							className: "vwlngvb",
+							className: "vwlngv6",
 							children: title$2
 						}), description$3 && /* @__PURE__ */ jsx(Dialog$1.Description, {
-							className: "vwlngvc",
+							className: "vwlngv7",
 							children: description$3
 						})]
 					}), showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
-						className: "vwlngv9",
+						className: "vwlngv2",
 						children: /* @__PURE__ */ jsx(CloseIcon, {})
 					})]
 				}), createElement(content, { dismiss })]
@@ -2084,7 +2100,7 @@ var DialogStackEntry = ({ item, index }) => {
 	});
 };
 var DialogStackProvider = ({ children }) => {
-	const stack = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+	const stack = useSyncExternalStore(subscribe$1, getSnapshot, getSnapshot);
 	const isMobile = useIsMobile();
 	return /* @__PURE__ */ jsxs(Fragment, { children: [children, stack.map((item, index) => shouldUseSheet(item.sheet, isMobile) ? /* @__PURE__ */ jsx(SheetStackEntry, {
 		index,
@@ -2095,6 +2111,184 @@ var DialogStackProvider = ({ children }) => {
 	}, item.id))] });
 };
 //#endregion
+//#region src/components/kbd/keys.ts
+var aliases = {
+	"ctrl": "mod",
+	"control": "mod",
+	"cmd": "mod",
+	"command": "mod",
+	"meta": "mod",
+	"mod": "mod",
+	"option": "alt",
+	"opt": "alt",
+	"alt": "alt",
+	"shift": "shift",
+	"return": "enter",
+	"enter": "enter",
+	"esc": "escape",
+	"escape": "escape",
+	"backspace": "backspace",
+	"del": "delete",
+	"delete": "delete",
+	"arrowup": "up",
+	"up": "up",
+	"arrowdown": "down",
+	"down": "down",
+	"arrowleft": "left",
+	"left": "left",
+	"arrowright": "right",
+	"right": "right",
+	"⌘": "mod",
+	"⌃": "mod",
+	"⇧": "shift",
+	"⌥": "alt",
+	"↵": "enter",
+	"⏎": "enter",
+	"⌫": "backspace",
+	"⌦": "delete",
+	"↑": "up",
+	"↓": "down",
+	"←": "left",
+	"→": "right"
+};
+var glyphs = /[←↑→↓↵⇧⌃⌘⌥⌦⌫⏎]/g;
+function normalize(token) {
+	const lower = token.trim().toLowerCase();
+	return aliases[lower] ?? lower;
+}
+function parseShortcut(shortcut) {
+	return (shortcut.includes("+") ? shortcut.split("+") : shortcut.replaceAll(glyphs, (g) => `+${g}+`).split("+")).filter((p) => p.trim() !== "").map(normalize);
+}
+var macModifiers = {
+	mod: {
+		label: "⌘",
+		name: "Command"
+	},
+	shift: {
+		label: "⇧",
+		name: "Shift"
+	},
+	alt: {
+		label: "⌥",
+		name: "Option"
+	}
+};
+var otherModifiers = {
+	mod: {
+		label: "Ctrl",
+		name: "Control"
+	},
+	shift: {
+		label: "Shift",
+		name: "Shift"
+	},
+	alt: {
+		label: "Alt",
+		name: "Alt"
+	}
+};
+var iconKeys = {
+	enter: "Enter",
+	backspace: "Backspace",
+	delete: "Delete",
+	up: "Up",
+	down: "Down",
+	left: "Left",
+	right: "Right"
+};
+var namedKeys = {
+	escape: {
+		label: "Esc",
+		name: "Escape"
+	},
+	tab: {
+		label: "Tab",
+		name: "Tab"
+	},
+	space: {
+		label: "Space",
+		name: "Space"
+	}
+};
+function keyDisplay(key, platform) {
+	const modifiers = platform === "mac" ? macModifiers : otherModifiers;
+	if (modifiers[key]) return modifiers[key];
+	if (key in iconKeys) return {
+		icon: key,
+		name: iconKeys[key]
+	};
+	if (namedKeys[key]) return namedKeys[key];
+	const label = key.length === 1 ? key.toUpperCase() : key[0].toUpperCase() + key.slice(1);
+	return {
+		label,
+		name: label
+	};
+}
+function detectPlatform(nav) {
+	if (!nav) return "other";
+	const source = `${nav.platform ?? ""} ${nav.userAgent ?? ""}`;
+	return /mac|iphone|ipad|ipod/i.test(source) ? "mac" : "other";
+}
+//#endregion
+//#region src/components/kbd/styles.css.ts
+var group$1 = "lhlko40";
+var cap = "lhlko41";
+var size = {
+	sm: "lhlko42",
+	md: "lhlko43"
+};
+var tone = {
+	"default": "lhlko44",
+	muted: "lhlko45",
+	inverted: "lhlko46"
+};
+var icon = "lhlko47";
+var mirrored = "lhlko48";
+var visuallyHidden = "lhlko49";
+//#endregion
+//#region src/components/kbd/index.tsx
+var icons = {
+	enter: CornerDownLeft,
+	backspace: Delete,
+	delete: Delete,
+	up: ArrowUp,
+	down: ArrowDown,
+	left: ArrowLeft,
+	right: ArrowRight
+};
+var subscribe = () => () => {};
+var clientPlatform = () => detectPlatform(typeof navigator === "undefined" ? void 0 : navigator);
+var serverPlatform = () => "other";
+function useKbdPlatform() {
+	return useSyncExternalStore(subscribe, clientPlatform, serverPlatform);
+}
+function Kbd({ className, keys, platform, size: size$1 = "md", tone: tone$1 = "default" }) {
+	const detected = useKbdPlatform();
+	const resolved = platform ?? detected;
+	const displays = (typeof keys === "string" ? parseShortcut(keys) : keys).map((key) => keyDisplay(key, resolved));
+	const iconSize = size$1 === "sm" ? 11 : 12;
+	const capClass = `${cap} ${size[size$1]} ${tone[tone$1]}`;
+	return /* @__PURE__ */ jsxs("kbd", {
+		className: `${group$1}${className ? ` ${className}` : ""}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: visuallyHidden,
+			"data-slot": "kbd-label",
+			children: displays.map((d) => d.name).join(" ")
+		}), displays.map((d, i) => {
+			const Icon = d.icon ? icons[d.icon] : void 0;
+			return /* @__PURE__ */ jsx("kbd", {
+				"aria-hidden": "true",
+				className: capClass,
+				children: Icon ? /* @__PURE__ */ jsx(Icon, {
+					className: d.icon === "delete" ? `${icon} ${mirrored}` : icon,
+					size: iconSize,
+					strokeWidth: 2
+				}) : d.label
+			}, `${d.name}-${i}`);
+		})]
+	});
+}
+//#endregion
 //#region src/components/dropdown-menu/styles.css.ts
 var popup$2 = "oih0op0";
 var positioner$2 = "oih0op1";
@@ -2104,7 +2298,7 @@ var label = "_1sxaacb3";
 var checkboxItem = "oih0op3";
 var radioItem = "oih0op3";
 var checkboxIndicator = "oih0op4";
-var radioIndicator = "oih0op5";
+var radioIndicator = "oih0op4";
 //#endregion
 //#region src/components/dropdown-menu/index.tsx
 function DropdownMenu(props) {
@@ -2153,11 +2347,22 @@ function DropdownMenuLabel({ className, ...props }) {
 		...props
 	});
 }
-function DropdownMenuItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Menu.Item, {
-		className: `${item$2}${className ? ` ${className}` : ""}`,
+function DropdownMenuItem({ className, children, shortcut, variant = "default", ...props }) {
+	const classes = [
+		item$2,
+		variant === "destructive" && "_1sxaacb0",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Menu.Item, {
+		className: classes,
 		"data-slot": "dropdown-menu-item",
-		...props
+		...props,
+		children: [children, shortcut && /* @__PURE__ */ jsx(Kbd, {
+			className: "_1sxaacb1",
+			keys: shortcut,
+			size: "sm",
+			tone: "muted"
+		})]
 	});
 }
 function DropdownMenuSeparator({ className, ...props }) {
@@ -2569,16 +2774,16 @@ function SegmentedControl({ items, value, onChange, size = "sm", fullWidth = fal
 }
 //#endregion
 //#region src/components/select/styles.css.ts
-var triggerButton = "p74a622";
-var triggerIcon = "p74a623";
-var positioner$1 = "p74a624";
-var popup$1 = "p74a625";
-var group = "p74a626";
-var item = "p74a627";
-var itemIndicator = "p74a628";
-var groupLabel = "p74a629";
-var separator = "p74a62a";
-var scrollButton = "p74a62b";
+var triggerButton = "p74a620";
+var triggerIcon = "p74a621";
+var positioner$1 = "p74a622";
+var popup$1 = "p74a623";
+var group = "p74a624";
+var item = "p74a625";
+var itemIndicator = "p74a626";
+var groupLabel = "_1sxaacb3";
+var separator = "_1sxaacb2";
+var scrollButton = "p74a627";
 //#endregion
 //#region src/components/select/index.tsx
 function Select(props) {
@@ -2652,7 +2857,8 @@ var spinner = createRuntimeFn({
 	defaultClassName: "_131cfek1",
 	variantClassNames: { size: {
 		sm: "_131cfek2",
-		md: "_131cfek3"
+		md: "_131cfek3",
+		lg: "_131cfek4"
 	} },
 	defaultVariants: { size: "sm" },
 	compoundVariants: []
@@ -2727,8 +2933,8 @@ function StatusDot({ status, pulse: showPulse, size, className }) {
 }
 //#endregion
 //#region src/components/tooltip/styles.css.ts
-var positioner = "_1cspf2m2";
-var popup = "_1cspf2m3";
+var positioner = "_1cspf2m0";
+var popup = "_1cspf2m1";
 //#endregion
 //#region src/components/tooltip/index.tsx
 function TooltipProvider(props) {
@@ -2749,11 +2955,16 @@ function TooltipPortal({ children, ...props }) {
 function TooltipPositioner(props) {
 	return /* @__PURE__ */ jsx(Tooltip.Positioner, { ...props });
 }
-function TooltipPopup({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip.Popup, {
+function TooltipPopup({ className, children, shortcut: shortcut$2, ...props }) {
+	return /* @__PURE__ */ jsxs(Tooltip.Popup, {
 		className: `${popup}${className ? ` ${className}` : ""}`,
 		...props,
-		children
+		children: [children, shortcut$2 && /* @__PURE__ */ jsx(Kbd, {
+			className: "_1cspf2m2",
+			keys: shortcut$2,
+			size: "sm",
+			tone: "inverted"
+		})]
 	});
 }
 function TooltipContent({ side = "top", sideOffset = 6, align = "center", className, children, ...popupProps }) {
@@ -2795,4 +3006,4 @@ function ViewportGate({ children, fallback, threshold = .5 }) {
 	});
 }
 //#endregion
-export { ActionBar, ActionButton, Alert, AnimatedCheckbox, AnimatedTabs, AutoResizeTextArea, Badge, CodeBlock, Collapsible, CollapsiblePanel, CollapsibleTrigger, ColorPicker, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogStackProvider, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Popover, PopoverArrow, PopoverClose, PopoverDescription, PopoverPanel, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, PortalThemeProvider, PortalThemeWrapper, QuoteAttributionPlugin, ScrollArea, SegmentedControl, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Spinner, StatusDot, TooltipContent, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, ViewportGate, codeLanguages, createTooltipHandle, dismissAllDialogs, dismissDialog, dismissTopDialog, getActionButtonClassName, highlightCode, presentDialog, streamdownCodePlugin, usePopover, usePortalTheme };
+export { ActionBar, ActionButton, Alert, AnimatedCheckbox, AnimatedTabs, AutoResizeTextArea, Badge, CodeBlock, Collapsible, CollapsiblePanel, CollapsibleTrigger, ColorPicker, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogStackProvider, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Kbd, Popover, PopoverArrow, PopoverClose, PopoverDescription, PopoverPanel, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, PortalThemeProvider, PortalThemeWrapper, QuoteAttributionPlugin, ScrollArea, SegmentedControl, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Spinner, StatusDot, TooltipContent, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, ViewportGate, codeLanguages, createTooltipHandle, detectPlatform, dismissAllDialogs, dismissDialog, dismissTopDialog, getActionButtonClassName, highlightCode, keyDisplay, parseShortcut, presentDialog, streamdownCodePlugin, useKbdPlatform, usePopover, usePortalTheme };