@haklex/rich-editor-ui 0.58.0 → 0.59.1

package/dist/index.mjs

@@ -1,17 +1,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlertTriangle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Check, CheckCircle2, ChevronDown, ChevronRight, ChevronUp, Copy, CornerDownLeft, Delete, Info, Pipette, Plus, X } from "lucide-react";
+import { AlertCircle, AlertTriangle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Check, CheckCircle2, ChevronDown, ChevronRight, ChevronUp, CircleAlert, CircleCheck, Copy, CornerDownLeft, Delete, Info, LoaderCircle, 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";
-import { PortalThemeProvider, PortalThemeProvider as PortalThemeProvider$1, PortalThemeWrapper, PortalThemeWrapper as PortalThemeWrapper$1, usePortalContainer, usePortalTheme } from "@haklex/rich-style-token";
+import { PortalThemeProvider, PortalThemeProvider as PortalThemeProvider$1, PortalThemeWrapper, PortalThemeWrapper as PortalThemeWrapper$1, usePortalTheme } from "@haklex/rich-style-token";
+import { Tooltip } from "@base-ui/react/tooltip";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+import { chromeWidth } from "@haklex/rich-style-token/styles";
+import { createPortal } from "react-dom";
 import { Menu } from "@base-ui/react/menu";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $getNodeByKey, $getRoot } from "lexical";
-import { createPortal } from "react-dom";
+import { $getNodeByKey, $getRoot, $getSelection, $isRangeSelection } from "lexical";
 import { Select as Select$1 } from "@base-ui/react/select";
-import { Tooltip } from "@base-ui/react/tooltip";
 //#region ../../node_modules/.pnpm/@vanilla-extract+recipes@0.5.7_@vanilla-extract+css@1.21.3/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
 function toPrimitive(t, r) {
 	if ("object" != typeof t || !t) return t;
@@ -101,43 +102,49 @@ var createRuntimeFn = (config) => {
 };
 //#endregion
 //#region src/components/action-button/styles.css.ts
-var semanticClassNames$1 = {
+var levelTone = {
+	"1": "_73ej2i1",
+	"2": "_73ej2i2",
+	"3": "_73ej2i3",
+	"4": "_73ej2i4"
+};
+var semanticClassNames = {
 	actionBar: "re-ui-action-bar",
 	actionButton: "re-ui-action-btn",
 	actionButtonEnd: "re-ui-action-btn--end",
 	actionButtonDanger: "re-ui-action-btn--danger",
 	actionButtonIcon: "re-ui-action-btn--icon"
 };
-var actionBar = "_73ej2i0";
+var actionBar = "_73ej2i5";
 var actionButton$1 = createRuntimeFn({
-	defaultClassName: "_73ej2i1",
+	defaultClassName: "_73ej2i6",
 	variantClassNames: {
 		variant: {
-			ghost: "_73ej2i2",
-			solid: "_73ej2i3",
-			outline: "_73ej2i4",
-			accent: "_73ej2i5"
+			ghost: "_73ej2i7",
+			solid: "_73ej2i8",
+			outline: "_73ej2i9",
+			accent: "_73ej2ia"
 		},
 		size: {
-			sm: "_73ej2i6",
-			md: "_73ej2i7",
-			lg: "_73ej2i8"
+			sm: "_73ej2ib",
+			md: "_73ej2ic",
+			lg: "_73ej2id"
 		},
 		icon: {
-			true: "_73ej2i9",
-			false: "_73ej2ia"
+			true: "_73ej2ie",
+			false: "_73ej2if"
 		},
 		end: {
-			true: "_73ej2ib",
-			false: "_73ej2ic"
+			true: "_73ej2ig",
+			false: "_73ej2ih"
 		},
 		danger: {
-			true: "_73ej2id",
-			false: "_73ej2ie"
+			true: "_73ej2ii",
+			false: "_73ej2ij"
 		},
 		rounded: {
-			true: "_73ej2if",
-			false: "_73ej2ig"
+			true: "_73ej2ik",
+			false: "_73ej2il"
 		}
 	},
 	defaultVariants: {
@@ -152,31 +159,39 @@ var actionButton$1 = createRuntimeFn({
 		[{
 			icon: true,
 			size: "sm"
-		}, "_73ej2ih"],
+		}, "_73ej2im"],
 		[{
 			icon: true,
 			size: "md"
-		}, "_73ej2ii"],
+		}, "_73ej2in"],
 		[{
 			icon: true,
 			size: "lg"
-		}, "_73ej2ij"],
+		}, "_73ej2io"],
+		[{
+			icon: true,
+			variant: "outline"
+		}, "_73ej2ip"],
 		[{
 			icon: true,
 			variant: "ghost"
-		}, "_73ej2ik"],
+		}, "_73ej2iq"],
 		[{
 			rounded: true,
 			icon: true
-		}, "_73ej2il"],
-		[{ danger: true }, "_73ej2im"]
+		}, "_73ej2ir"],
+		[{
+			danger: true,
+			variant: "solid"
+		}, "_73ej2is"],
+		[{ danger: true }, "_73ej2it"]
 	]
 });
 //#endregion
 //#region src/components/action-button/index.tsx
 function ActionBar({ className, gap, style, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: `${actionBar} ${semanticClassNames$1.actionBar}${className ? ` ${className}` : ""}`,
+		className: `${actionBar} ${semanticClassNames.actionBar}${className ? ` ${className}` : ""}`,
 		style: gap != null ? {
 			...style,
 			gap
@@ -184,11 +199,12 @@ function ActionBar({ className, gap, style, ...props }) {
 		...props
 	});
 }
-function ActionButton({ variant, size, end = false, danger = false, icon = false, rounded = false, className, type = "button", ...props }) {
-	const semanticParts = [semanticClassNames$1.actionButton];
-	if (end) semanticParts.push(semanticClassNames$1.actionButtonEnd);
-	if (danger) semanticParts.push(semanticClassNames$1.actionButtonDanger);
-	if (icon) semanticParts.push(semanticClassNames$1.actionButtonIcon);
+function ActionButton({ variant, size, end = false, danger = false, icon = false, rounded = false, level, className, type = "button", ...props }) {
+	const semanticParts = [semanticClassNames.actionButton];
+	if (end) semanticParts.push(semanticClassNames.actionButtonEnd);
+	if (danger) semanticParts.push(semanticClassNames.actionButtonDanger);
+	if (icon) semanticParts.push(semanticClassNames.actionButtonIcon);
+	if (level && !icon) semanticParts.push(levelTone[level]);
 	const recipeClass = actionButton$1({
 		variant,
 		size,
@@ -204,7 +220,9 @@ function ActionButton({ variant, size, end = false, danger = false, icon = false
 	});
 }
 function getActionButtonClassName(options) {
-	return `${actionButton$1(options)} ${semanticClassNames$1.actionButton}`;
+	const { level, ...recipe } = options ?? {};
+	const levelClass = level ? ` ${levelTone[level]}` : "";
+	return `${actionButton$1(recipe)} ${semanticClassNames.actionButton}${levelClass}`;
 }
 //#endregion
 //#region src/components/alert/styles.css.ts
@@ -1117,7 +1135,7 @@ function CodeBlock({ chrome, className, collapsible = true, code, language, show
 //#endregion
 //#region src/components/collapsible/styles.css.ts
 var trigger$1 = "_1hdi6a90";
-var panel$2 = "_1hdi6a92";
+var panel$1 = "_1hdi6a92";
 var panelContent = "_1hdi6a93";
 //#endregion
 //#region src/components/collapsible/index.tsx
@@ -1135,7 +1153,7 @@ function CollapsibleTrigger({ children, className, hideChevron, ...props }) {
 function CollapsiblePanel({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
 		...props,
-		className: `${panel$2}${className ? ` ${className}` : ""}`,
+		className: `${panel$1}${className ? ` ${className}` : ""}`,
 		children: /* @__PURE__ */ jsx("div", {
 			className: panelContent,
 			children
@@ -1161,8 +1179,18 @@ function getStrictContext(name) {
 //#region src/components/popover/styles.css.ts
 var popup$5 = "f2q44l0";
 var arrow = "f2q44l1";
-var title$1 = "f2q44l2";
+var title$2 = "f2q44l2";
 var description$1 = "f2q44l3";
+var size$1 = {
+	sm: "f2q44l4",
+	md: "f2q44l5",
+	lg: "f2q44l6"
+};
+var flush = "f2q44l7";
+var header$2 = "f2q44l8";
+var headerTitle$1 = "f2q44la";
+var body$1 = "f2q44lc";
+var footer$3 = "f2q44ld";
 //#endregion
 //#region src/components/popover/index.tsx
 var [PopoverProvider, usePopover] = getStrictContext("PopoverContext");
@@ -1195,14 +1223,18 @@ function PopoverPortal({ children, ...props }) {
 function PopoverPositioner(props) {
 	return /* @__PURE__ */ jsx(Popover$1.Positioner, { ...props });
 }
-function PopoverPopup({ className, children, ...props }) {
+function PopoverPopup({ className, children, flush: flush$1, size, ...props }) {
+	const classes = [popup$5];
+	if (size) classes.push(size$1[size]);
+	if (flush$1) classes.push(flush);
+	if (className) classes.push(className);
 	return /* @__PURE__ */ jsx(Popover$1.Popup, {
-		className: `${popup$5}${className ? ` ${className}` : ""}`,
+		className: classes.join(" "),
 		...props,
 		children
 	});
 }
-function PopoverPanel({ align = "center", side, sideOffset = 4, className, children, ...popupProps }) {
+function PopoverPanel({ align = "center", side, sideOffset = 8, className, children, ...popupProps }) {
 	return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
 		align,
 		side,
@@ -1225,7 +1257,7 @@ function PopoverClose(props) {
 }
 function PopoverTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Popover$1.Title, {
-		className: `${title$1}${className ? ` ${className}` : ""}`,
+		className: `${title$2}${className ? ` ${className}` : ""}`,
 		...props
 	});
 }
@@ -1235,6 +1267,268 @@ function PopoverDescription({ className, ...props }) {
 		...props
 	});
 }
+function PopoverHeader({ actions, className, icon, title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${header$2}${className ? ` ${className}` : ""}`,
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "f2q44l9",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: headerTitle$1,
+				children: title
+			}),
+			actions && /* @__PURE__ */ jsx("span", {
+				className: "f2q44lb",
+				children: actions
+			})
+		]
+	});
+}
+function PopoverBody({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `${body$1}${className ? ` ${className}` : ""}`,
+		children
+	});
+}
+function PopoverFooter({ children, className, hint }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${footer$3}${className ? ` ${className}` : ""}`,
+		children: [hint && /* @__PURE__ */ jsx("span", {
+			className: "f2q44le",
+			children: hint
+		}), children]
+	});
+}
+//#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$2 = "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$2 = () => () => {};
+var clientPlatform = () => detectPlatform(typeof navigator === "undefined" ? void 0 : navigator);
+var serverPlatform = () => "other";
+function useKbdPlatform() {
+	return useSyncExternalStore(subscribe$2, clientPlatform, serverPlatform);
+}
+function Kbd({ className, keys, platform, size: size$2 = "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$2 === "sm" ? 11 : 12;
+	const capClass = `${cap} ${size[size$2]} ${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$2} ${mirrored}` : icon$2,
+					size: iconSize,
+					strokeWidth: 2
+				}) : d.label
+			}, `${d.name}-${i}`);
+		})]
+	});
+}
+//#endregion
+//#region src/components/tooltip/styles.css.ts
+var positioner$2 = "_1cspf2m0";
+var popup$4 = "_1cspf2m1";
+//#endregion
+//#region src/components/tooltip/index.tsx
+function TooltipProvider(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, { ...props });
+}
+function TooltipRoot(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
+}
+function TooltipTrigger(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, { ...props });
+}
+function TooltipPortal({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, {
+		...props,
+		children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children })
+	});
+}
+function TooltipPositioner(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Positioner, { ...props });
+}
+function TooltipPopup({ className, children, shortcut, ...props }) {
+	return /* @__PURE__ */ jsxs(Tooltip.Popup, {
+		className: `${popup$4}${className ? ` ${className}` : ""}`,
+		...props,
+		children: [children, shortcut && /* @__PURE__ */ jsx(Kbd, {
+			className: "_1cspf2m2",
+			keys: shortcut,
+			size: "sm",
+			tone: "inverted"
+		})]
+	});
+}
+function TooltipContent({ side = "top", sideOffset = 6, align = "center", className, children, ...popupProps }) {
+	return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
+		align,
+		className: positioner$2,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(TooltipPopup, {
+			className,
+			...popupProps,
+			children
+		})
+	}) });
+}
+var createTooltipHandle = Tooltip.createHandle;
 //#endregion
 //#region src/components/color-picker/color-math.ts
 var clamp = (n, min, max) => n < min ? min : n > max ? max : n;
@@ -1348,30 +1642,36 @@ 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";
+var panel = "_17r50hf5";
+var presetView = "_17r50hf6";
+var section = "_17r50hf7";
+var sectionLabel = "_17r50hf8";
+var grid = "_17r50hf9";
+var swatch = "_17r50hfa";
+var swatchDot = "_17r50hfb";
+var defaultDot = "_17r50hfc";
+var backgroundChip = "_17r50hfd";
+var footer$2 = "_17r50hfe";
+var footerButton = "_17r50hff";
+var footerIcon = "_17r50hfg";
+var pickerView = "_17r50hfh";
+var backButton = "_17r50hfi";
+var backIcon = "_17r50hfj";
+var satSquare = "_17r50hfk";
+var satOverlayX = "_17r50hfl";
+var satOverlayY = "_17r50hfm";
+var satThumb = "_17r50hfn";
+var hueTrack = "_17r50hfo";
+var alphaTrack = "_17r50hfp";
+var alphaGradient = "_17r50hfq";
+var sliderThumb = "_17r50hfr";
+var hexRow = "_17r50hfs";
+var hexInput = "_17r50hft";
+var hexInputInvalid = "_17r50hfu";
+var previewPair = "_17r50hfx";
+var previewCell = "_17r50hfy";
+var actionRow = "_17r50hfz";
+var actionButton = "_17r50hf10";
 //#endregion
 //#region src/components/color-picker/picker-view.tsx
 var FALLBACK = {
@@ -1555,11 +1855,11 @@ function PickerView({ initialColor, onApply, onCancel, onBack }) {
 					}),
 					hasEyeDropper && /* @__PURE__ */ jsx("button", {
 						"aria-label": "Pick color from screen",
-						className: "_17r50hfp",
+						className: "_17r50hfv",
 						type: "button",
 						onClick: openEyeDropper,
 						onMouseDown: (e) => e.preventDefault(),
-						children: /* @__PURE__ */ jsx(Pipette, { className: "_17r50hfq" })
+						children: /* @__PURE__ */ jsx(Pipette, { className: "_17r50hfw" })
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						"aria-hidden": true,
@@ -1596,129 +1896,442 @@ function PickerView({ initialColor, onApply, onCancel, onBack }) {
 	});
 }
 //#endregion
-//#region src/components/color-picker/index.tsx
-var TEXT_COLORS = [
-	{
-		name: "Default",
-		value: "inherit"
-	},
-	{
-		name: "Gray",
-		value: "#6b7280"
-	},
-	{
-		name: "Red",
-		value: "#ef4444"
-	},
-	{
-		name: "Orange",
-		value: "#f97316"
-	},
-	{
-		name: "Amber",
-		value: "#f59e0b"
-	},
-	{
-		name: "Green",
-		value: "#22c55e"
-	},
-	{
-		name: "Teal",
-		value: "#14b8a6"
+//#region src/components/segmented-control/styles.css.ts
+var container = createRuntimeFn({
+	defaultClassName: "_6d8tz20",
+	variantClassNames: {
+		size: {
+			sm: "_6d8tz21",
+			md: "_6d8tz22"
+		},
+		fullWidth: {
+			true: "_6d8tz23",
+			false: "_6d8tz24"
+		}
 	},
-	{
-		name: "Blue",
-		value: "#3b82f6"
+	defaultVariants: {
+		size: "sm",
+		fullWidth: false
 	},
-	{
-		name: "Indigo",
-		value: "#6366f1"
+	compoundVariants: []
+});
+var indicator = createRuntimeFn({
+	defaultClassName: "_6d8tz25",
+	variantClassNames: { ready: {
+		true: "_6d8tz26",
+		false: "_6d8tz27"
+	} },
+	defaultVariants: { ready: true },
+	compoundVariants: []
+});
+var item$3 = createRuntimeFn({
+	defaultClassName: "_6d8tz28",
+	variantClassNames: {
+		size: {
+			sm: "_6d8tz29",
+			md: "_6d8tz2a"
+		},
+		active: {
+			true: "_6d8tz2b",
+			false: "_6d8tz2c"
+		},
+		disabled: {
+			true: "_6d8tz2d",
+			false: "_6d8tz2e"
+		},
+		fullWidth: {
+			true: "_6d8tz2f",
+			false: "_6d8tz2g"
+		}
 	},
-	{
-		name: "Purple",
-		value: "#a855f7"
+	defaultVariants: {
+		size: "sm",
+		active: false,
+		disabled: false,
+		fullWidth: false
 	},
-	{
-		name: "Pink",
-		value: "#ec4899"
-	}
+	compoundVariants: []
+});
+//#endregion
+//#region src/components/segmented-control/index.tsx
+function SegmentedControl({ items, value, onChange, size = "sm", fullWidth = false, className }) {
+	const containerRef = useRef(null);
+	const itemElementsRef = useRef(/* @__PURE__ */ new Map());
+	const [indicator$2, setIndicator] = useState({
+		left: 0,
+		width: 0
+	});
+	const [isReady, setIsReady] = useState(false);
+	const updateIndicator = useCallback(() => {
+		const container = containerRef.current;
+		const activeEl = itemElementsRef.current.get(value);
+		if (!container || !activeEl) return;
+		const containerRect = container.getBoundingClientRect();
+		const activeRect = activeEl.getBoundingClientRect();
+		setIndicator({
+			left: activeRect.left - containerRect.left,
+			width: activeRect.width
+		});
+		setIsReady(true);
+	}, [value]);
+	useEffect(() => {
+		updateIndicator();
+	}, [updateIndicator]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(() => {
+			updateIndicator();
+		});
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, [updateIndicator]);
+	const handleKeyDown = (e) => {
+		const enabledItems = items.filter((item) => !item.disabled);
+		const currentIndex = enabledItems.findIndex((item) => item.value === value);
+		let nextIndex = currentIndex;
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				e.preventDefault();
+				nextIndex = (currentIndex + 1) % enabledItems.length;
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				e.preventDefault();
+				nextIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;
+				break;
+			case "Home":
+				e.preventDefault();
+				nextIndex = 0;
+				break;
+			case "End":
+				e.preventDefault();
+				nextIndex = enabledItems.length - 1;
+		}
+		if (nextIndex !== currentIndex) {
+			const nextItem = enabledItems[nextIndex];
+			onChange(nextItem.value);
+			itemElementsRef.current.get(nextItem.value)?.focus();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-orientation": "horizontal",
+		className: `${container({
+			size,
+			fullWidth
+		})} ${className || ""}`.trim(),
+		ref: containerRef,
+		role: "tablist",
+		onKeyDown: handleKeyDown,
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: indicator({ ready: isReady }),
+			style: {
+				left: indicator$2.left,
+				width: indicator$2.width
+			}
+		}), items.map((item) => {
+			const isActive = item.value === value;
+			return /* @__PURE__ */ jsx("button", {
+				"aria-selected": isActive,
+				"data-active": isActive || void 0,
+				disabled: item.disabled,
+				role: "tab",
+				tabIndex: isActive ? 0 : -1,
+				type: "button",
+				className: item$3({
+					size,
+					active: isActive,
+					disabled: Boolean(item.disabled),
+					fullWidth
+				}),
+				ref: (el) => {
+					if (el) itemElementsRef.current.set(item.value, el);
+					else itemElementsRef.current.delete(item.value);
+				},
+				onClick: () => onChange(item.value),
+				children: item.label
+			}, item.value);
+		})]
+	});
+}
+//#endregion
+//#region src/components/color-picker/presets.ts
+var DEFAULT_COLOR = "inherit";
+var HUES = [
+	["Gray", "#737373"],
+	["Red", "#ef4444"],
+	["Orange", "#f97316"],
+	["Amber", "#f59e0b"],
+	["Green", "#22c55e"],
+	["Teal", "#14b8a6"],
+	["Blue", "#3b82f6"],
+	["Indigo", "#6366f1"],
+	["Purple", "#a855f7"],
+	["Pink", "#ec4899"]
 ];
-function ColorPicker({ currentColor, onSelect, className }) {
+var textValue = (base) => `color-mix(in oklab, ${base} 75%, var(--rc-text, #171717))`;
+var backgroundValue = (base) => `color-mix(in oklab, ${base} 18%, transparent)`;
+var PRESETS = {
+	text: HUES.map(([name, base]) => ({
+		name,
+		value: textValue(base)
+	})),
+	background: HUES.map(([name, base]) => ({
+		name,
+		value: backgroundValue(base)
+	}))
+};
+function isDefaultColor(value) {
+	return !value || value === "inherit" || value === "transparent";
+}
+function presetName(target, value) {
+	return PRESETS[target].find((p) => p.value === value)?.name ?? value;
+}
+//#endregion
+//#region src/components/color-picker/preset-view.tsx
+var GRID_COLUMNS = 8;
+var TARGET_ITEMS = [{
+	label: "Text",
+	value: "text"
+}, {
+	label: "Background",
+	value: "background"
+}];
+function moveFocus(e) {
+	const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : e.key === "ArrowDown" ? GRID_COLUMNS : e.key === "ArrowUp" ? -8 : 0;
+	if (!step) return;
+	const buttons = Array.from(e.currentTarget.querySelectorAll("button"));
+	const index = buttons.indexOf(document.activeElement);
+	if (index === -1) return;
+	const next = buttons[Math.max(0, Math.min(buttons.length - 1, index + step))];
+	e.preventDefault();
+	next?.focus();
+}
+function Swatch({ current, onPick, preset, target }) {
+	const isDefault = preset.value === DEFAULT_COLOR;
+	const pressed = isDefault ? isDefaultColor(current) : current === preset.value;
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": preset.name,
+		"aria-pressed": pressed,
+		className: swatch,
+		title: preset.name,
+		type: "button",
+		onClick: () => onPick(preset.value),
+		onMouseDown: (e) => e.preventDefault(),
+		children: isDefault ? /* @__PURE__ */ jsx("span", {
+			"data-default-swatch": true,
+			className: `${swatchDot} ${defaultDot}`
+		}) : target === "background" ? /* @__PURE__ */ jsx("span", {
+			className: backgroundChip,
+			style: { backgroundColor: preset.value },
+			children: "A"
+		}) : /* @__PURE__ */ jsx("span", {
+			className: swatchDot,
+			style: { backgroundColor: preset.value }
+		})
+	});
+}
+function PresetView({ current, onCustom, onPick, onTargetChange, recent, target }) {
+	const presets = [{
+		name: "Default",
+		value: DEFAULT_COLOR
+	}, ...PRESETS[target]];
+	return /* @__PURE__ */ jsxs("div", {
+		className: presetView,
+		children: [
+			onTargetChange && /* @__PURE__ */ jsx(SegmentedControl, {
+				fullWidth: true,
+				items: TARGET_ITEMS,
+				value: target,
+				onChange: onTargetChange
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: section,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: sectionLabel,
+					children: "Theme colors"
+				}), /* @__PURE__ */ jsx("div", {
+					"aria-label": "Theme colors",
+					className: grid,
+					role: "group",
+					onKeyDown: moveFocus,
+					children: presets.map((preset) => /* @__PURE__ */ jsx(Swatch, {
+						current,
+						preset,
+						target,
+						onPick
+					}, preset.value))
+				})]
+			}),
+			recent.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "_17r50hf7",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "_17r50hf8",
+					children: "Recent"
+				}), /* @__PURE__ */ jsx("div", {
+					"aria-label": "Recent colors",
+					className: "_17r50hf9",
+					role: "group",
+					onKeyDown: moveFocus,
+					children: recent.map((value) => /* @__PURE__ */ jsx(Swatch, {
+						current,
+						preset: {
+							name: presetName(target, value),
+							value
+						},
+						target,
+						onPick
+					}, value))
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: footer$2,
+				children: /* @__PURE__ */ jsxs("button", {
+					"aria-label": "Custom color",
+					className: footerButton,
+					type: "button",
+					onClick: onCustom,
+					onMouseDown: (e) => e.preventDefault(),
+					children: [/* @__PURE__ */ jsx(Plus, { className: footerIcon }), "Custom…"]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/color-picker/recent.ts
+var MAX_RECENT = 5;
+var STORAGE_KEY = "haklex:color-picker:recent";
+var EMPTY$1 = {
+	text: [],
+	background: []
+};
+var state = null;
+var listeners$2 = /* @__PURE__ */ new Set();
+function sanitize(value) {
+	if (!Array.isArray(value)) return [];
+	return value.filter((v) => typeof v === "string").slice(0, MAX_RECENT);
+}
+function load() {
+	if (state) return state;
+	state = EMPTY$1;
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (raw) {
+			const parsed = JSON.parse(raw);
+			state = {
+				text: sanitize(parsed.text),
+				background: sanitize(parsed.background)
+			};
+		}
+	} catch {
+		state = EMPTY$1;
+	}
+	return state;
+}
+function persist(next) {
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+		return true;
+	} catch {
+		return false;
+	}
+}
+function pushRecentColor(target, color) {
+	const current = load();
+	const list = [color, ...current[target].filter((c) => c !== color)].slice(0, MAX_RECENT);
+	state = {
+		...current,
+		[target]: list
+	};
+	persist(state);
+	for (const listener of listeners$2) listener();
+}
+function subscribe$1(listener) {
+	listeners$2.add(listener);
+	return () => {
+		listeners$2.delete(listener);
+	};
+}
+var getServerSnapshot = () => EMPTY$1;
+function useRecentColors(target) {
+	return useSyncExternalStore(subscribe$1, load, getServerSnapshot)[target];
+}
+//#endregion
+//#region src/components/color-picker/index.tsx
+function ColorPicker({ currentColor, currentBackground, onSelect, onSelectBackground, className, tooltip }) {
 	const [open, setOpen] = useState(false);
 	const [view, setView] = useState("preset");
-	const displayColor = currentColor === "inherit" || !currentColor ? "currentColor" : currentColor;
+	const [target, setTarget] = useState("text");
+	const recent = useRecentColors(target);
+	const activeTarget = onSelectBackground ? target : "text";
+	const current = activeTarget === "text" ? currentColor : currentBackground ?? "";
+	const textColor = isDefaultColor(currentColor) ? "currentColor" : currentColor;
+	const background = isDefaultColor(currentBackground) ? void 0 : currentBackground;
 	const handleOpenChange = (next) => {
 		setOpen(next);
 		if (!next) setView("preset");
 	};
-	const handlePreset = (value) => {
-		onSelect(value);
-		handleOpenChange(false);
-	};
-	const handleApply = (hex) => {
-		onSelect(hex);
+	const pick = (value) => {
+		if (value !== "inherit") pushRecentColor(activeTarget, value);
+		if (activeTarget === "background") onSelectBackground?.(value);
+		else onSelect(value);
 		handleOpenChange(false);
 	};
-	const handleCancel = () => handleOpenChange(false);
+	const triggerButton = /* @__PURE__ */ jsx("button", {
+		"aria-label": "Text color",
+		"data-tooltip": tooltip,
+		type: "button",
+		onMouseDown: (e) => e.preventDefault()
+	});
+	const trigger$2 = /* @__PURE__ */ jsxs(PopoverTrigger, {
+		className: `${trigger}${className ? ` ${className}` : ""}`,
+		render: triggerButton,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: triggerLabel,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: triggerLetter,
+				style: {
+					color: textColor,
+					backgroundColor: background
+				},
+				children: "A"
+			}), /* @__PURE__ */ jsx("span", {
+				className: triggerBar,
+				style: { backgroundColor: textColor }
+			})]
+		}), /* @__PURE__ */ jsx(ChevronDown, { className: triggerChevron })]
+	});
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange: handleOpenChange,
-		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
-			className: `${trigger}${className ? ` ${className}` : ""}`,
-			render: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onMouseDown: (e) => e.preventDefault()
-			}),
-			children: [/* @__PURE__ */ jsxs("span", {
-				className: triggerLabel,
-				children: [/* @__PURE__ */ jsx("span", {
-					className: triggerLetter,
-					style: { color: displayColor },
-					children: "A"
-				}), /* @__PURE__ */ jsx("span", {
-					className: triggerBar,
-					style: { backgroundColor: displayColor }
-				})]
-			}), /* @__PURE__ */ jsx(ChevronDown, { className: triggerChevron })]
-		}), /* @__PURE__ */ jsx(PopoverPanel, {
-			className: panel$1,
+		children: [tooltip ? /* @__PURE__ */ jsxs(TooltipRoot, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: trigger$2 }), /* @__PURE__ */ jsx(TooltipContent, {
 			side: "bottom",
-			sideOffset: 6,
-			children: view === "preset" ? /* @__PURE__ */ jsxs("div", {
-				className: grid,
-				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", {
-						className: swatchDot,
-						style: { backgroundColor: color.value === "inherit" ? "currentColor" : color.value }
-					})
-				}, color.value)), /* @__PURE__ */ jsx("button", {
-					"aria-label": "Custom color",
-					className: swatch,
-					type: "button",
-					onClick: () => setView("picker"),
-					onMouseDown: (e) => e.preventDefault(),
-					children: /* @__PURE__ */ jsx("span", {
-						className: addSwatchDot,
-						children: /* @__PURE__ */ jsx(Plus, { className: addSwatchIcon })
-					})
-				})]
+			children: tooltip
+		})] }) : trigger$2, /* @__PURE__ */ jsx(PopoverPanel, {
+			className: panel,
+			side: "bottom",
+			size: "md",
+			children: view === "preset" ? /* @__PURE__ */ jsx(PresetView, {
+				current,
+				recent,
+				target: activeTarget,
+				onCustom: () => setView("picker"),
+				onPick: pick,
+				onTargetChange: onSelectBackground ? setTarget : void 0
 			}) : /* @__PURE__ */ jsx(PickerView, {
-				initialColor: currentColor,
-				onApply: handleApply,
+				initialColor: current,
+				onApply: pick,
 				onBack: () => setView("preset"),
-				onCancel: handleCancel
+				onCancel: () => handleOpenChange(false)
 			})
 		})]
 	});
 }
-var popup$4 = "_2buwsh1";
-var item$3 = "_2buwsh2";
+var popup$3 = "_2buwsh1";
+var item$2 = "_2buwsh2";
 var empty = "_2buwsh3";
 //#endregion
 //#region src/components/combobox/index.tsx
@@ -1749,7 +2362,7 @@ function ComboboxContent({ align = "start", alignOffset = 0, side = "bottom", si
 		sideOffset,
 		style: { zIndex: 50 },
 		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
-			className: `${popup$4}${className ? ` ${className}` : ""}`,
+			className: `${popup$3}${className ? ` ${className}` : ""}`,
 			...popupProps,
 			children
 		})
@@ -1760,7 +2373,7 @@ function ComboboxList(props) {
 }
 function ComboboxItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.Item, {
-		className: `${item$3}${className ? ` ${className}` : ""}`,
+		className: `${item$2}${className ? ` ${className}` : ""}`,
 		...props
 	});
 }
@@ -1782,11 +2395,11 @@ function ComboboxGroupLabel(props) {
 //#endregion
 //#region src/components/dialog/styles.css.ts
 var backdrop = "vwlngv0";
-var popup$3 = "vwlngv1";
-var header = "vwlngv3";
+var popup$2 = "vwlngv1";
+var header$1 = "vwlngv3";
 var headerContent = "vwlngv4";
-var footer = "vwlngv5";
-var title = "vwlngv6";
+var footer$1 = "vwlngv5";
+var title$1 = "vwlngv6";
 var description = "vwlngv7";
 var sheetBackdrop = "vwlngva";
 var sheetContainer = "vwlngvb";
@@ -1815,7 +2428,7 @@ function DialogBackdrop({ className, ...props }) {
 }
 function DialogPopup({ showCloseButton = true, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
-		className: `${popup$3}${className ? ` ${className}` : ""}`,
+		className: `${popup$2}${className ? ` ${className}` : ""}`,
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
 			className: "vwlngv2",
@@ -1828,7 +2441,7 @@ function DialogClose(props) {
 }
 function DialogHeader({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: `${header}${className ? ` ${className}` : ""}`,
+		className: `${header$1}${className ? ` ${className}` : ""}`,
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			className: headerContent,
@@ -1838,13 +2451,13 @@ function DialogHeader({ className, children, ...props }) {
 }
 function DialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: `${footer}${className ? ` ${className}` : ""}`,
+		className: `${footer$1}${className ? ` ${className}` : ""}`,
 		...props
 	});
 }
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Title, {
-		className: `${title}${className ? ` ${className}` : ""}`,
+		className: `${title$1}${className ? ` ${className}` : ""}`,
 		...props
 	});
 }
@@ -1857,33 +2470,33 @@ function DialogDescription({ className, ...props }) {
 //#endregion
 //#region src/components/dialog/store.ts
 var stack = [];
-var idCounter = 0;
-var listeners = /* @__PURE__ */ new Set();
-function emit() {
-	for (const fn of listeners) fn();
+var idCounter$1 = 0;
+var listeners$1 = /* @__PURE__ */ new Set();
+function emit$1() {
+	for (const fn of listeners$1) fn();
 }
-function subscribe$1(fn) {
-	listeners.add(fn);
+function subscribe(fn) {
+	listeners$1.add(fn);
 	return () => {
-		listeners.delete(fn);
+		listeners$1.delete(fn);
 	};
 }
 function getSnapshot() {
 	return stack;
 }
 function presentDialog(props) {
-	const id = `dialog-${++idCounter}`;
+	const id = `dialog-${++idCounter$1}`;
 	stack = [...stack, {
 		...props,
 		id,
 		open: true
 	}];
-	emit();
+	emit$1();
 	return () => dismissDialog(id);
 }
 function removeDialog(id) {
 	stack = stack.filter((item) => item.id !== id);
-	emit();
+	emit$1();
 }
 function dismissDialog(id) {
 	const target = stack.find((item) => item.id === id);
@@ -1892,29 +2505,193 @@ function dismissDialog(id) {
 		...item,
 		open: false
 	} : item);
-	emit();
+	emit$1();
 	target.onClose?.();
 }
-function dismissTopDialog() {
-	for (let i = stack.length - 1; i >= 0; i--) if (stack[i].open) {
-		dismissDialog(stack[i].id);
-		return;
-	}
+async function requestDismissDialog(id) {
+	const target = stack.find((item) => item.id === id);
+	if (!target || !target.open) return;
+	if (target.confirmDismiss && !await target.confirmDismiss()) return;
+	dismissDialog(id);
+}
+function dialogWidthStyle(width) {
+	if (width === void 0) return {};
+	return { "--rc-dialog-width": typeof width === "number" ? `${width}px` : chromeWidth[width] };
+}
+function dismissTopDialog() {
+	for (let i = stack.length - 1; i >= 0; i--) if (stack[i].open) {
+		dismissDialog(stack[i].id);
+		return;
+	}
+}
+function dismissAllDialogs() {
+	const closing = stack.filter((item) => item.open);
+	stack = stack.map((item) => ({
+		...item,
+		open: false
+	}));
+	emit$1();
+	for (const item of closing) item.onClose?.();
+}
+//#endregion
+//#region src/components/dialog/confirm.tsx
+function confirmDiscardChanges({ cancelLabel = "Keep editing", confirmLabel = "Discard", description = "Your edits haven’t been saved.", title = "Discard changes?" } = {}) {
+	return new Promise((resolve) => {
+		let settled = false;
+		const settle = (value) => {
+			if (settled) return;
+			settled = true;
+			resolve(value);
+		};
+		presentDialog({
+			title,
+			description,
+			showCloseButton: false,
+			width: 360,
+			onClose: () => settle(false),
+			content: ({ dismiss }) => /* @__PURE__ */ jsxs("div", {
+				className: footer$1,
+				children: [/* @__PURE__ */ jsx(ActionButton, {
+					size: "md",
+					variant: "outline",
+					onClick: () => {
+						settle(false);
+						dismiss();
+					},
+					children: cancelLabel
+				}), /* @__PURE__ */ jsx(ActionButton, {
+					autoFocus: true,
+					danger: true,
+					size: "md",
+					variant: "solid",
+					onClick: () => {
+						settle(true);
+						dismiss();
+					},
+					children: confirmLabel
+				})]
+			})
+		});
+	});
+}
+//#endregion
+//#region src/components/toast/store.ts
+var DEFAULT_DURATION = 2400;
+var toasts = [];
+var idCounter = 0;
+var timers = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+function emit() {
+	for (const fn of listeners) fn();
+}
+function schedule(item) {
+	const existing = timers.get(item.id);
+	if (existing) clearTimeout(existing);
+	timers.delete(item.id);
+	if (item.tone === "loading" && item.duration === void 0) return;
+	timers.set(item.id, setTimeout(() => dismissToast(item.id), item.duration ?? DEFAULT_DURATION));
+}
+function subscribeToasts(fn) {
+	listeners.add(fn);
+	return () => {
+		listeners.delete(fn);
+	};
+}
+function getToasts() {
+	return toasts;
 }
-function dismissAllDialogs() {
-	const closing = stack.filter((item) => item.open);
-	stack = stack.map((item) => ({
-		...item,
-		open: false
-	}));
+function toast(options) {
+	const item = {
+		...options,
+		id: `toast-${++idCounter}`
+	};
+	toasts = [...toasts, item];
+	schedule(item);
 	emit();
-	for (const item of closing) item.onClose?.();
+	return item.id;
+}
+function updateToast(id, patch) {
+	let updated;
+	toasts = toasts.map((item) => {
+		if (item.id !== id) return item;
+		updated = {
+			...item,
+			...patch
+		};
+		return updated;
+	});
+	if (!updated) return;
+	schedule(updated);
+	emit();
+}
+function dismissToast(id) {
+	const timer = timers.get(id);
+	if (timer) clearTimeout(timer);
+	timers.delete(id);
+	if (!toasts.some((item) => item.id === id)) return;
+	toasts = toasts.filter((item) => item.id !== id);
+	emit();
+}
+//#endregion
+//#region src/components/toast/styles.css.ts
+var viewport = "xom7f32";
+var toast$1 = "xom7f33";
+var title = "xom7f34";
+var icon = "xom7f35";
+var spin = "xom7f36";
+var success = "xom7f37";
+var error$1 = "xom7f38";
+//#endregion
+//#region src/components/toast/index.tsx
+var EMPTY = [];
+function ToastIcon({ tone }) {
+	if (tone === "loading") return /* @__PURE__ */ jsx(LoaderCircle, { className: `${icon} ${spin}` });
+	if (tone === "success") return /* @__PURE__ */ jsx(CircleCheck, { className: `${icon} ${success}` });
+	if (tone === "error") return /* @__PURE__ */ jsx(CircleAlert, { className: `${icon} ${error$1}` });
+	return null;
+}
+function ToastViewport() {
+	const items = useSyncExternalStore(subscribeToasts, getToasts, () => EMPTY);
+	if (typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx(PortalThemeWrapper$1, { children: /* @__PURE__ */ jsx("div", {
+		"aria-live": "polite",
+		className: viewport,
+		role: "status",
+		children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+			className: toast$1,
+			children: [
+				/* @__PURE__ */ jsx(ToastIcon, { tone: item.tone }),
+				/* @__PURE__ */ jsx("span", {
+					className: title,
+					children: item.title
+				}),
+				item.action && /* @__PURE__ */ jsx(ActionButton, {
+					size: "sm",
+					onClick: () => {
+						item.action?.onClick();
+						dismissToast(item.id);
+					},
+					children: item.action.label
+				})
+			]
+		}, item.id))
+	}) }), document.body);
 }
 //#endregion
 //#region src/components/dialog/sheet.tsx
+function isScrollRegion(el) {
+	if (el.isContentEditable || el.classList.contains("cm-editor")) return true;
+	const { overflowY } = getComputedStyle(el);
+	return (overflowY === "auto" || overflowY === "scroll") && el.scrollHeight > el.clientHeight;
+}
+function isInsideScrolledRegion(target, boundary) {
+	for (let el = target; el && el !== boundary; el = el.parentElement) if (el.scrollTop > 0 && isScrollRegion(el)) return true;
+	return false;
+}
 var SheetStackEntry = ({ item, index }) => {
-	const { id, open, title: title$3, description: description$4, content, className, portalClassName, theme = "light", clickOutsideToDismiss = true } = item;
+	const { id, open, title, description: description$4, content, className, portalClassName, theme = "light", clickOutsideToDismiss = true } = item;
 	const dismiss = useCallback(() => dismissDialog(id), [id]);
+	const requestDismiss = useCallback(() => requestDismissDialog(id), [id]);
 	useEffect(() => {
 		if (!open) {
 			const timer = setTimeout(() => removeDialog(id), 200);
@@ -1929,16 +2706,13 @@ var SheetStackEntry = ({ item, index }) => {
 		};
 	}, []);
 	const sheetRef = useRef(null);
-	const contentRef = useRef(null);
 	const dragState = useRef(null);
 	const [translateY, setTranslateY] = useState(0);
 	const [isDragging, setIsDragging] = useState(false);
 	const handleTouchStart = useCallback((e) => {
 		const touch = e.touches[0];
-		const isHandle = e.target.closest(`.${sheetDragHandle}`) !== null;
-		const contentEl = contentRef.current;
-		const isContentAtTop = !contentEl || contentEl.scrollTop <= 0;
-		if (!isHandle && !isContentAtTop) return;
+		const target = e.target;
+		if (!(target.closest(`.vwlngvc, .vwlngvf`) !== null) && isInsideScrolledRegion(target, sheetRef.current)) return;
 		dragState.current = {
 			startY: touch.clientY,
 			startTime: Date.now(),
@@ -1978,11 +2752,12 @@ var SheetStackEntry = ({ item, index }) => {
 		const deltaY = state.currentY - state.startY;
 		const elapsed = Date.now() - state.startTime;
 		const velocity = deltaY / Math.max(elapsed, 1) * 1e3;
-		if (deltaY > (sheetRef.current?.offsetHeight ?? 0) * .25 || velocity > 500) dismiss();
-		else setTranslateY(0);
+		const threshold = (sheetRef.current?.offsetHeight ?? 0) * .25;
+		setTranslateY(0);
+		if (deltaY > threshold || velocity > 500) requestDismiss();
 		setIsDragging(false);
 		dragState.current = null;
-	}, [dismiss]);
+	}, [requestDismiss]);
 	const zIndex = 50 + index;
 	const sheetHeight = sheetRef.current?.offsetHeight || 1;
 	const backdropOpacity = isDragging ? Math.max(0, 1 - translateY / sheetHeight) : 1;
@@ -1996,7 +2771,7 @@ var SheetStackEntry = ({ item, index }) => {
 				opacity: open ? backdropOpacity : 0,
 				pointerEvents: open ? "auto" : "none"
 			},
-			onClick: clickOutsideToDismiss ? dismiss : void 0
+			onClick: clickOutsideToDismiss ? requestDismiss : void 0
 		}), /* @__PURE__ */ jsxs("div", {
 			className: `${sheetContainer}${className ? ` ${className}` : ""}`,
 			"data-closed": !open ? "" : void 0,
@@ -2015,11 +2790,11 @@ var SheetStackEntry = ({ item, index }) => {
 					className: sheetDragHandle,
 					children: /* @__PURE__ */ jsx("div", { className: sheetDragPill })
 				}),
-				(title$3 || description$4) && /* @__PURE__ */ jsxs("div", {
+				(title || description$4) && /* @__PURE__ */ jsxs("div", {
 					className: "vwlngvf",
-					children: [title$3 && /* @__PURE__ */ jsx("div", {
+					children: [title && /* @__PURE__ */ jsx("div", {
 						className: "vwlngv6",
-						children: title$3
+						children: title
 					}), description$4 && /* @__PURE__ */ jsx("div", {
 						className: "vwlngv7",
 						children: description$4
@@ -2027,8 +2802,10 @@ var SheetStackEntry = ({ item, index }) => {
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: sheetContent,
-					ref: contentRef,
-					children: createElement(content, { dismiss })
+					children: createElement(content, {
+						dismiss,
+						requestDismiss
+					})
 				})
 			]
 		})] })
@@ -2051,8 +2828,9 @@ function shouldUseSheet(sheet, isMobile) {
 }
 var CloseIcon = () => /* @__PURE__ */ jsx(X, {});
 var DialogStackEntry = ({ item, index }) => {
-	const { id, open, title: title$2, description: description$3, content, className, portalClassName, theme = "light", showCloseButton = true, clickOutsideToDismiss = true } = item;
+	const { id, open, title, description: description$3, content, className, portalClassName, theme = "light", showCloseButton = true, clickOutsideToDismiss = true, width } = item;
 	const dismiss = useCallback(() => dismissDialog(id), [id]);
+	const requestDismiss = useCallback(() => requestDismissDialog(id), [id]);
 	useEffect(() => {
 		if (!open) {
 			const timer = setTimeout(() => {
@@ -2066,7 +2844,7 @@ var DialogStackEntry = ({ item, index }) => {
 		disablePointerDismissal: !clickOutsideToDismiss,
 		open,
 		onOpenChange: (open) => {
-			if (!open) dismiss();
+			if (!open) requestDismiss();
 		},
 		children: /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeProvider$1, {
 			className: portalClassName ?? "",
@@ -2076,16 +2854,19 @@ var DialogStackEntry = ({ item, index }) => {
 				style: { zIndex }
 			}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 				suppressHydrationWarning: true,
-				className: `${popup$3}${className ? ` ${className}` : ""}`,
+				className: `${popup$2}${className ? ` ${className}` : ""}`,
 				"data-theme": theme,
-				style: { zIndex: zIndex + 1 },
-				children: [(title$2 || description$3 || showCloseButton) && /* @__PURE__ */ jsxs("div", {
+				style: {
+					zIndex: zIndex + 1,
+					...dialogWidthStyle(width)
+				},
+				children: [(title || description$3 || showCloseButton) && /* @__PURE__ */ jsxs("div", {
 					className: "vwlngv3",
-					children: [(title$2 || description$3) && /* @__PURE__ */ jsxs("div", {
+					children: [(title || description$3) && /* @__PURE__ */ jsxs("div", {
 						className: "vwlngv4",
-						children: [title$2 && /* @__PURE__ */ jsx(Dialog$1.Title, {
+						children: [title && /* @__PURE__ */ jsx(Dialog$1.Title, {
 							className: "vwlngv6",
-							children: title$2
+							children: title
 						}), description$3 && /* @__PURE__ */ jsx(Dialog$1.Description, {
 							className: "vwlngv7",
 							children: description$3
@@ -2094,211 +2875,42 @@ var DialogStackEntry = ({ item, index }) => {
 						className: "vwlngv2",
 						children: /* @__PURE__ */ jsx(CloseIcon, {})
 					})]
-				}), createElement(content, { dismiss })]
+				}), createElement(content, {
+					dismiss,
+					requestDismiss
+				})]
 			})] })
 		}) })
 	});
 };
 var DialogStackProvider = ({ children }) => {
-	const stack = useSyncExternalStore(subscribe$1, getSnapshot, getSnapshot);
+	const stack = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 	const isMobile = useIsMobile();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [children, stack.map((item, index) => shouldUseSheet(item.sheet, isMobile) ? /* @__PURE__ */ jsx(SheetStackEntry, {
-		index,
-		item
-	}, item.id) : /* @__PURE__ */ jsx(DialogStackEntry, {
-		index,
-		item
-	}, 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
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		children,
+		/* @__PURE__ */ jsx(ToastViewport, {}),
+		stack.map((item, index) => shouldUseSheet(item.sheet, isMobile) ? /* @__PURE__ */ jsx(SheetStackEntry, {
+			index,
+			item
+		}, item.id) : /* @__PURE__ */ jsx(DialogStackEntry, {
+			index,
+			item
+		}, item.id))
+	] });
 };
-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";
-var item$2 = "oih0op2";
-var separator$1 = "_1sxaacb2";
-var label = "_1sxaacb3";
+var popup$1 = "oih0op0";
+var positioner$1 = "oih0op1";
+var item$1 = "oih0op2";
+var separator$1 = "_1sxaacb3";
+var label$1 = "_1sxaacb4";
 var checkboxItem = "oih0op3";
 var radioItem = "oih0op3";
 var checkboxIndicator = "oih0op4";
 var radioIndicator = "oih0op4";
+var subTrigger = "oih0op5";
+var subTriggerValue = "oih0op6";
 //#endregion
 //#region src/components/dropdown-menu/index.tsx
 function DropdownMenu(props) {
@@ -2320,14 +2932,14 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
 	return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		align,
 		alignOffset,
-		className: positioner$2,
+		className: positioner$1,
 		"data-slot": "dropdown-menu-positioner",
 		positionMethod,
 		side,
 		sideOffset,
 		style: { zIndex: 50 },
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
-			className: `${popup$2}${className ? ` ${className}` : ""}`,
+			className: `${popup$1}${className ? ` ${className}` : ""}`,
 			"data-slot": "dropdown-menu-content",
 			...popupProps,
 			children
@@ -2342,29 +2954,43 @@ function DropdownMenuGroup(props) {
 }
 function DropdownMenuLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
-		className: `${label}${className ? ` ${className}` : ""}`,
+		className: `${label$1}${className ? ` ${className}` : ""}`,
 		"data-slot": "dropdown-menu-label",
 		...props
 	});
 }
-function DropdownMenuItem({ className, children, shortcut, variant = "default", ...props }) {
+function DropdownMenuItem({ className, children, shortcut: shortcut$2, variant = "default", ...props }) {
 	const classes = [
-		item$2,
-		variant === "destructive" && "_1sxaacb0",
+		item$1,
+		variant === "destructive" && "_1sxaacb1",
 		className
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs(Menu.Item, {
 		className: classes,
 		"data-slot": "dropdown-menu-item",
 		...props,
-		children: [children, shortcut && /* @__PURE__ */ jsx(Kbd, {
-			className: "_1sxaacb1",
-			keys: shortcut,
+		children: [children, shortcut$2 && /* @__PURE__ */ jsx(Kbd, {
+			className: "_1sxaacb2",
+			keys: shortcut$2,
 			size: "sm",
 			tone: "muted"
 		})]
 	});
 }
+function DropdownMenuSub(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+}
+function DropdownMenuSubTrigger({ className, children, value, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		className: `${item$1} ${subTrigger}${className ? ` ${className}` : ""}`,
+		"data-slot": "dropdown-menu-sub-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsxs("span", {
+			className: subTriggerValue,
+			children: [value, /* @__PURE__ */ jsx(ChevronRight, {})]
+		})]
+	});
+}
 function DropdownMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Separator, {
 		className: `${separator$1}${className ? ` ${className}` : ""}`,
@@ -2380,7 +3006,7 @@ function DropdownMenuRadioGroup(props) {
 }
 function DropdownMenuRadioItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
-		className: `${item$2} ${radioItem}${className ? ` ${className}` : ""}`,
+		className: `${item$1} ${radioItem}${className ? ` ${className}` : ""}`,
 		"data-slot": "dropdown-menu-radio-item",
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
@@ -2392,7 +3018,7 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
 }
 function DropdownMenuCheckboxItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
-		className: `${item$2} ${checkboxItem}${className ? ` ${className}` : ""}`,
+		className: `${item$1} ${checkboxItem}${className ? ` ${className}` : ""}`,
 		"data-slot": "dropdown-menu-checkbox-item",
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
@@ -2402,22 +3028,148 @@ function DropdownMenuCheckboxItem({ className, children, ...props }) {
 		})]
 	});
 }
-function CheckIcon() {
-	return /* @__PURE__ */ jsx(Check, { size: 16 });
+function CheckIcon() {
+	return /* @__PURE__ */ jsx(Check, { size: 16 });
+}
+//#endregion
+//#region src/components/field/styles.css.ts
+var field$1 = "_1i1no470";
+var label = "_1i1no471";
+var hint = "_1i1no472";
+var error = "_1i1no473";
+//#endregion
+//#region src/components/field/index.tsx
+function Field({ children, className, error: error$2, hint: hint$1, id, label: label$3 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${field$1}${className ? ` ${className}` : ""}`,
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				className: label,
+				htmlFor: id,
+				children: label$3
+			}),
+			children,
+			error$2 ? /* @__PURE__ */ jsx("p", {
+				className: error,
+				id: `${id}-error`,
+				role: "alert",
+				children: error$2
+			}) : hint$1 ? /* @__PURE__ */ jsx("p", {
+				className: hint,
+				id: `${id}-hint`,
+				children: hint$1
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/components/modal-shell/styles.css.ts
+var shell = "_1q3gqvh0";
+var header = "_1q3gqvh1";
+var headerLead = "_1q3gqvh2";
+var headerTitle = "_1q3gqvh4";
+var headerCenter = "_1q3gqvh5";
+var headerActions = "_1q3gqvh6";
+var body = "_1q3gqvh8";
+var footer = "_1q3gqvh9";
+var footerStatus = "_1q3gqvha";
+//#endregion
+//#region src/components/modal-shell/index.tsx
+function ModalShell({ children, className, onSave }) {
+	const handleKeyDown = (event) => {
+		if (!onSave || event.defaultPrevented || !(event.metaKey || event.ctrlKey)) return;
+		if (event.key === "s" || event.key === "Enter") {
+			event.preventDefault();
+			onSave();
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: `${shell}${className ? ` ${className}` : ""}`,
+		onKeyDown: handleKeyDown,
+		children
+	});
+}
+function ModalShellHeader({ actions, center, closeLabel = "Close", icon, onClose, title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: header,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: headerLead,
+				children: [icon && /* @__PURE__ */ jsx("span", {
+					className: "_1q3gqvh3",
+					children: icon
+				}), /* @__PURE__ */ jsx("span", {
+					className: headerTitle,
+					children: title
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: headerCenter,
+				children: center
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: headerActions,
+				children: [actions, onClose && /* @__PURE__ */ jsxs(Fragment, { children: [actions && /* @__PURE__ */ jsx("span", { className: "_1q3gqvh7" }), /* @__PURE__ */ jsx(ActionButton, {
+					icon: true,
+					"aria-label": closeLabel,
+					size: "md",
+					title: closeLabel,
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(X, {})
+				})] })]
+			})
+		]
+	});
+}
+function ModalShellBody({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `${body}${className ? ` ${className}` : ""}`,
+		children
+	});
+}
+function ModalShellFooter({ cancelLabel = "Cancel", children, dirty, onCancel, onSave, saveDisabled, saveLabel = "Save", status }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: footer,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: footerStatus,
+				children: [dirty && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "_1q3gqvhb"
+				}), status]
+			}),
+			children,
+			onCancel && /* @__PURE__ */ jsx(ActionButton, {
+				size: "md",
+				variant: "outline",
+				onClick: onCancel,
+				children: cancelLabel
+			}),
+			onSave && /* @__PURE__ */ jsxs(ActionButton, {
+				disabled: saveDisabled,
+				size: "md",
+				variant: "solid",
+				onClick: onSave,
+				children: [saveLabel, /* @__PURE__ */ jsx(Kbd, {
+					keys: ["mod", "s"],
+					size: "sm",
+					tone: "inverted"
+				})]
+			})
+		]
+	});
 }
 //#endregion
 //#region src/components/quote-attribution/styles.css.ts
-var semanticClassNames = {
-	overlay: "rich-quote-attribution-overlay",
-	panel: "rich-quote-attribution-panel",
-	input: "rich-quote-attribution-input"
-};
-var overlay = "_1dj5lvb0";
-var panel = "_1dj5lvb1";
-var input = "_1dj5lvb2";
+var slot = "_1dj5lvb0";
+var text = "_1dj5lvb1";
+var field = "_1dj5lvb2";
+var dash = "_1dj5lvb3";
+var input$1 = "_1dj5lvb4";
 //#endregion
 //#region src/components/quote-attribution/QuoteAttributionPlugin.tsx
 var RICH_QUOTE_TYPE = "rich-quote";
+var SLOT_ATTR = "data-quote-attribution-slot";
 function $isRichQuoteLike(node) {
 	if (!node) return false;
 	const ctor = node.constructor;
@@ -2432,98 +3184,104 @@ function $collectQuotes() {
 	for (const child of $getRoot().getChildren()) visit(child);
 	return out;
 }
-function readRect(dom) {
-	const r = dom.getBoundingClientRect();
-	return {
-		top: r.top,
-		left: r.left,
-		width: r.width,
-		height: r.height
-	};
+function $activeQuoteKey() {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection)) return null;
+	let node = selection.anchor.getNode();
+	while (node) {
+		if ($isRichQuoteLike(node)) return node.getKey();
+		node = node.getParent();
+	}
+	return null;
 }
-function rectsEqual(a, b) {
-	if (a === b) return true;
-	if (!a || !b) return false;
-	return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
+function findSlot(quote) {
+	if (!quote) return null;
+	for (const child of quote.children) if (child.hasAttribute(SLOT_ATTR)) return child;
+	return null;
 }
 function QuoteAttributionPlugin() {
 	const [editor] = useLexicalComposerContext();
-	const portalContainer = usePortalContainer();
 	const [quotes, setQuotes] = useState([]);
+	const [activeKey, setActiveKey] = useState(null);
+	const [editable, setEditable] = useState(() => editor.isEditable());
+	useEffect(() => editor.registerEditableListener(setEditable), [editor]);
 	useEffect(() => {
 		const collect = () => {
 			editor.getEditorState().read(() => {
 				const list = [];
 				for (const node of $collectQuotes()) {
-					const dom = editor.getElementByKey(node.getKey());
-					if (dom) list.push({
+					const slot = findSlot(editor.getElementByKey(node.getKey()));
+					if (slot) list.push({
 						key: node.getKey(),
 						attribution: node.getAttribution() ?? "",
-						dom
+						slot
 					});
 				}
 				setQuotes(list);
+				setActiveKey($activeQuoteKey());
 			});
 		};
-		collect();
-		return editor.registerUpdateListener(() => collect());
+		const removeRoot = editor.registerRootListener(() => queueMicrotask(collect));
+		const removeUpdate = editor.registerUpdateListener(collect);
+		return () => {
+			removeRoot();
+			removeUpdate();
+		};
 	}, [editor]);
-	if (!editor.isEditable()) return null;
-	if (quotes.length === 0) return null;
-	return createPortal(/* @__PURE__ */ jsx(PortalThemeWrapper$1, { children: quotes.map((q) => /* @__PURE__ */ jsx(QuotePanel, {
-		attribution: q.attribution,
+	return /* @__PURE__ */ jsx(Fragment, { children: quotes.map((quote) => createPortal(/* @__PURE__ */ jsx(QuoteAttribution, {
+		active: quote.key === activeKey,
+		attribution: quote.attribution,
+		editable,
 		editor,
-		quoteDom: q.dom,
-		quoteKey: q.key
-	}, q.key)) }), portalContainer);
+		quoteKey: quote.key,
+		slot: quote.slot
+	}), quote.slot, quote.key)) });
 }
-function QuotePanel({ attribution, editor, quoteDom, quoteKey }) {
-	const [rect, setRect] = useState(null);
+var stop = (event) => event.stopPropagation();
+function QuoteAttribution({ active, attribution, editable, editor, quoteKey, slot: slot$1 }) {
 	const [value, setValue] = useState(attribution);
 	const [focused, setFocused] = useState(false);
 	useEffect(() => {
 		if (!focused) setValue(attribution);
 	}, [attribution, focused]);
 	useLayoutEffect(() => {
-		quoteDom.setAttribute("data-attribution-panel", "");
-		let next = null;
-		const sync = () => {
-			const r = readRect(quoteDom);
-			if (!rectsEqual(next, r)) {
-				next = r;
-				setRect(r);
-			}
-		};
-		sync();
-		const ro = new ResizeObserver(sync);
-		ro.observe(quoteDom);
-		window.addEventListener("scroll", sync, true);
-		window.addEventListener("resize", sync);
-		return () => {
-			quoteDom.removeAttribute("data-attribution-panel");
-			ro.disconnect();
-			window.removeEventListener("scroll", sync, true);
-			window.removeEventListener("resize", sync);
-		};
-	}, [quoteDom]);
+		slot$1.classList.add(slot);
+		slot$1.toggleAttribute("data-empty", !attribution);
+		slot$1.toggleAttribute("data-active", active || focused);
+	}, [
+		active,
+		attribution,
+		focused,
+		slot$1
+	]);
+	useLayoutEffect(() => () => {
+		slot$1.classList.remove(slot);
+		slot$1.removeAttribute("data-empty");
+		slot$1.removeAttribute("data-active");
+	}, [slot$1]);
 	const commit = useCallback((raw) => {
-		const trimmed = raw.trim();
+		const next = raw.trim() || null;
+		if (next === (attribution || null)) return;
 		editor.update(() => {
 			const node = $getNodeByKey(quoteKey);
-			if ($isRichQuoteLike(node)) node.setAttribution(trimmed || null);
+			if ($isRichQuoteLike(node)) node.setAttribution(next);
 		});
-	}, [editor, quoteKey]);
-	const handleKeyDown = useCallback((e) => {
-		e.stopPropagation();
-		if (e.key === "Enter") {
-			e.preventDefault();
+	}, [
+		attribution,
+		editor,
+		quoteKey
+	]);
+	const handleKeyDown = useCallback((event) => {
+		event.stopPropagation();
+		if (event.key === "Enter") {
+			event.preventDefault();
 			commit(value);
-			e.currentTarget.blur();
+			event.currentTarget.blur();
 			editor.focus();
-		} else if (e.key === "Escape") {
-			e.preventDefault();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
 			setValue(attribution);
-			e.currentTarget.blur();
+			event.currentTarget.blur();
 			editor.focus();
 		}
 	}, [
@@ -2532,53 +3290,44 @@ function QuotePanel({ attribution, editor, quoteDom, quoteKey }) {
 		editor,
 		value
 	]);
-	const stop = useCallback((e) => {
-		e.stopPropagation();
-	}, []);
-	if (!rect) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: overlay,
-		style: {
-			top: `${rect.top}px`,
-			left: `${rect.left}px`,
-			width: `${rect.width}px`,
-			height: `${rect.height}px`
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			className: `${panel} ${semanticClassNames.panel}`,
-			contentEditable: false,
-			"data-lexical-editor": "false",
-			children: /* @__PURE__ */ jsx("input", {
-				className: `${input} ${semanticClassNames.input}`,
-				placeholder: "— Author, Work",
-				type: "text",
-				value,
-				onBeforeInput: stop,
-				onClick: stop,
-				onCompositionEnd: stop,
-				onCompositionStart: stop,
-				onCompositionUpdate: stop,
-				onCopy: stop,
-				onCut: stop,
-				onDragStart: stop,
-				onDrop: stop,
-				onFocus: () => setFocused(true),
-				onInput: stop,
-				onKeyDown: handleKeyDown,
-				onKeyUp: stop,
-				onMouseDown: stop,
-				onPaste: stop,
-				onPointerDown: stop,
-				onBlur: (e) => {
-					setFocused(false);
-					commit(e.currentTarget.value);
-				},
-				onChange: (e) => {
-					e.stopPropagation();
-					setValue(e.target.value);
-				}
-			})
-		})
+	if (!editable) return attribution ? /* @__PURE__ */ jsxs("span", {
+		className: text,
+		children: ["— ", attribution]
+	}) : null;
+	return /* @__PURE__ */ jsxs("label", {
+		className: field,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: dash,
+			children: "—"
+		}), /* @__PURE__ */ jsx("input", {
+			"aria-label": "Quote attribution",
+			className: input$1,
+			placeholder: "Author, Work",
+			type: "text",
+			value,
+			onBeforeInput: stop,
+			onChange: (event) => setValue(event.target.value),
+			onClick: stop,
+			onCompositionEnd: stop,
+			onCompositionStart: stop,
+			onCompositionUpdate: stop,
+			onCopy: stop,
+			onCut: stop,
+			onDragStart: stop,
+			onDrop: stop,
+			onFocus: () => setFocused(true),
+			onInput: stop,
+			onKeyDown: handleKeyDown,
+			onKeyUp: stop,
+			onMouseDown: stop,
+			onPaste: stop,
+			onPointerDown: stop,
+			onBlur: (event) => {
+				setFocused(false);
+				commit(event.currentTarget.value);
+			}
+		})]
 	});
 }
 //#endregion
@@ -2612,177 +3361,16 @@ function ScrollArea({ children, className, autoScrollToBottom = false, scrollRef
 	});
 }
 //#endregion
-//#region src/components/segmented-control/styles.css.ts
-var container = createRuntimeFn({
-	defaultClassName: "_6d8tz20",
-	variantClassNames: {
-		size: {
-			sm: "_6d8tz21",
-			md: "_6d8tz22"
-		},
-		fullWidth: {
-			true: "_6d8tz23",
-			false: "_6d8tz24"
-		}
-	},
-	defaultVariants: {
-		size: "sm",
-		fullWidth: false
-	},
-	compoundVariants: []
-});
-var indicator = createRuntimeFn({
-	defaultClassName: "_6d8tz25",
-	variantClassNames: { ready: {
-		true: "_6d8tz26",
-		false: "_6d8tz27"
-	} },
-	defaultVariants: { ready: true },
-	compoundVariants: []
-});
-var item$1 = createRuntimeFn({
-	defaultClassName: "_6d8tz28",
-	variantClassNames: {
-		size: {
-			sm: "_6d8tz29",
-			md: "_6d8tz2a"
-		},
-		active: {
-			true: "_6d8tz2b",
-			false: "_6d8tz2c"
-		},
-		disabled: {
-			true: "_6d8tz2d",
-			false: "_6d8tz2e"
-		},
-		fullWidth: {
-			true: "_6d8tz2f",
-			false: "_6d8tz2g"
-		}
-	},
-	defaultVariants: {
-		size: "sm",
-		active: false,
-		disabled: false,
-		fullWidth: false
-	},
-	compoundVariants: []
-});
-//#endregion
-//#region src/components/segmented-control/index.tsx
-function SegmentedControl({ items, value, onChange, size = "sm", fullWidth = false, className }) {
-	const containerRef = useRef(null);
-	const itemElementsRef = useRef(/* @__PURE__ */ new Map());
-	const [indicator$2, setIndicator] = useState({
-		left: 0,
-		width: 0
-	});
-	const [isReady, setIsReady] = useState(false);
-	const updateIndicator = useCallback(() => {
-		const container = containerRef.current;
-		const activeEl = itemElementsRef.current.get(value);
-		if (!container || !activeEl) return;
-		const containerRect = container.getBoundingClientRect();
-		const activeRect = activeEl.getBoundingClientRect();
-		setIndicator({
-			left: activeRect.left - containerRect.left,
-			width: activeRect.width
-		});
-		setIsReady(true);
-	}, [value]);
-	useEffect(() => {
-		updateIndicator();
-	}, [updateIndicator]);
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container) return;
-		const observer = new ResizeObserver(() => {
-			updateIndicator();
-		});
-		observer.observe(container);
-		return () => observer.disconnect();
-	}, [updateIndicator]);
-	const handleKeyDown = (e) => {
-		const enabledItems = items.filter((item) => !item.disabled);
-		const currentIndex = enabledItems.findIndex((item) => item.value === value);
-		let nextIndex = currentIndex;
-		switch (e.key) {
-			case "ArrowRight":
-			case "ArrowDown":
-				e.preventDefault();
-				nextIndex = (currentIndex + 1) % enabledItems.length;
-				break;
-			case "ArrowLeft":
-			case "ArrowUp":
-				e.preventDefault();
-				nextIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;
-				break;
-			case "Home":
-				e.preventDefault();
-				nextIndex = 0;
-				break;
-			case "End":
-				e.preventDefault();
-				nextIndex = enabledItems.length - 1;
-		}
-		if (nextIndex !== currentIndex) {
-			const nextItem = enabledItems[nextIndex];
-			onChange(nextItem.value);
-			itemElementsRef.current.get(nextItem.value)?.focus();
-		}
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		"aria-orientation": "horizontal",
-		className: `${container({
-			size,
-			fullWidth
-		})} ${className || ""}`.trim(),
-		ref: containerRef,
-		role: "tablist",
-		onKeyDown: handleKeyDown,
-		children: [/* @__PURE__ */ jsx("div", {
-			"aria-hidden": "true",
-			className: indicator({ ready: isReady }),
-			style: {
-				left: indicator$2.left,
-				width: indicator$2.width
-			}
-		}), items.map((item) => {
-			const isActive = item.value === value;
-			return /* @__PURE__ */ jsx("button", {
-				"aria-selected": isActive,
-				"data-active": isActive || void 0,
-				disabled: item.disabled,
-				role: "tab",
-				tabIndex: isActive ? 0 : -1,
-				type: "button",
-				className: item$1({
-					size,
-					active: isActive,
-					disabled: Boolean(item.disabled),
-					fullWidth
-				}),
-				ref: (el) => {
-					if (el) itemElementsRef.current.set(item.value, el);
-					else itemElementsRef.current.delete(item.value);
-				},
-				onClick: () => onChange(item.value),
-				children: item.label
-			}, item.value);
-		})]
-	});
-}
-//#endregion
 //#region src/components/select/styles.css.ts
 var triggerButton = "p74a620";
 var triggerIcon = "p74a621";
-var positioner$1 = "p74a622";
-var popup$1 = "p74a623";
+var positioner = "p74a622";
+var popup = "p74a623";
 var group = "p74a624";
 var item = "p74a625";
 var itemIndicator = "p74a626";
-var groupLabel = "_1sxaacb3";
-var separator = "_1sxaacb2";
+var groupLabel = "_1sxaacb4";
+var separator = "_1sxaacb3";
 var scrollButton = "p74a627";
 //#endregion
 //#region src/components/select/index.tsx
@@ -2806,12 +3394,12 @@ function SelectContent({ children, className, align = "center", alignItemWithTri
 	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
 		align,
 		alignItemWithTrigger,
-		className: positioner$1,
+		className: positioner,
 		side,
 		sideOffset,
 		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
 			...props,
-			className: `${popup$1}${className ? ` ${className}` : ""}`,
+			className: `${popup}${className ? ` ${className}` : ""}`,
 			children: [
 				/* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
 					className: scrollButton,
@@ -2932,55 +3520,20 @@ function StatusDot({ status, pulse: showPulse, size, className }) {
 	});
 }
 //#endregion
-//#region src/components/tooltip/styles.css.ts
-var positioner = "_1cspf2m0";
-var popup = "_1cspf2m1";
+//#region src/components/text-input/styles.css.ts
+var input = "i56btd0";
+var mono = "i56btd1";
 //#endregion
-//#region src/components/tooltip/index.tsx
-function TooltipProvider(props) {
-	return /* @__PURE__ */ jsx(Tooltip.Provider, { ...props });
-}
-function TooltipRoot(props) {
-	return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
-}
-function TooltipTrigger(props) {
-	return /* @__PURE__ */ jsx(Tooltip.Trigger, { ...props });
-}
-function TooltipPortal({ children, ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip.Portal, {
-		...props,
-		children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children })
-	});
-}
-function TooltipPositioner(props) {
-	return /* @__PURE__ */ jsx(Tooltip.Positioner, { ...props });
-}
-function TooltipPopup({ className, children, shortcut: shortcut$2, ...props }) {
-	return /* @__PURE__ */ jsxs(Tooltip.Popup, {
-		className: `${popup}${className ? ` ${className}` : ""}`,
-		...props,
-		children: [children, shortcut$2 && /* @__PURE__ */ jsx(Kbd, {
-			className: "_1cspf2m2",
-			keys: shortcut$2,
-			size: "sm",
-			tone: "inverted"
-		})]
+//#region src/components/text-input/index.tsx
+function TextInput({ invalid, mono: mono$1, className, type = "text", ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		"aria-invalid": invalid || void 0,
+		className: `${input}${mono$1 ? ` ${mono}` : ""}${className ? ` ${className}` : ""}`,
+		type,
+		...props
 	});
 }
-function TooltipContent({ side = "top", sideOffset = 6, align = "center", className, children, ...popupProps }) {
-	return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
-		align,
-		className: positioner,
-		side,
-		sideOffset,
-		children: /* @__PURE__ */ jsx(TooltipPopup, {
-			className,
-			...popupProps,
-			children
-		})
-	}) });
-}
-var createTooltipHandle = Tooltip.createHandle;
+var textInputClassName = input;
 //#endregion
 //#region src/components/viewport-gate/index.tsx
 function ViewportGate({ children, fallback, threshold = .5 }) {
@@ -3006,4 +3559,27 @@ 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, 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 };
+//#region src/hooks/use-live-edit.ts
+function useLiveEdit(values, open, onApply) {
+	const latestRef = useRef(values);
+	latestRef.current = values;
+	const snapshotRef = useRef(open ? values : null);
+	const changedRef = useRef(false);
+	useEffect(() => {
+		snapshotRef.current = open ? latestRef.current : null;
+		changedRef.current = false;
+	}, [open]);
+	return {
+		apply: useCallback((patch) => {
+			onApply(patch, changedRef.current);
+			changedRef.current = true;
+		}, [onApply]),
+		revert: useCallback(() => {
+			const snapshot = snapshotRef.current;
+			if (snapshot && changedRef.current) onApply(snapshot, true);
+			changedRef.current = false;
+		}, [onApply])
+	};
+}
+//#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, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, Kbd, ModalShell, ModalShellBody, ModalShellFooter, ModalShellHeader, Popover, PopoverArrow, PopoverBody, PopoverClose, PopoverDescription, PopoverFooter, PopoverHeader, PopoverPanel, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, PortalThemeProvider, PortalThemeWrapper, QuoteAttributionPlugin, ScrollArea, SegmentedControl, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Spinner, StatusDot, TextInput, ToastViewport, TooltipContent, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, ViewportGate, codeLanguages, confirmDiscardChanges, createTooltipHandle, detectPlatform, dismissAllDialogs, dismissDialog, dismissToast, dismissTopDialog, getActionButtonClassName, highlightCode, keyDisplay, parseShortcut, presentDialog, requestDismissDialog, streamdownCodePlugin, textInputClassName, toast, updateToast, useKbdPlatform, useLiveEdit, usePopover, usePortalTheme };