stilo-editor 0.0.0-stage → 0.1.0

package/dist/ui.js

@@ -0,0 +1,1292 @@
+import { H as e } from "./src-3tAxKI0c.js";
+import { Bold as t, ChevronDown as n, Code as r, ExternalLink as i, FaceSlightlySmilingPlus as a, Highlighter as o, Italic as s, Link as c, List as l, ListOrdered as u, Minus as d, Pencil as f, Redo2 as p, RemoveFormatting as m, Strikethrough as h, Subscript as g, Superscript as _, TextQuote as v, Type as y, Underline as b, Undo2 as x, Unlink as S, createElement as C } from "lucide";
+import { autoUpdate as w, computePosition as T, flip as E, offset as D, shift as O } from "@floating-ui/dom";
+//#region src/ui/components/shortcut.ts
+function k() {
+	return /Mac|iPhone|iPad/.test(navigator.platform);
+}
+function A(e, t) {
+	let n = e.split("-"), r = n.pop(), i = [];
+	if (t) return n.includes("Ctrl") && i.push("⌃"), n.includes("Alt") && i.push("⌥"), n.includes("Shift") && i.push("⇧"), n.includes("Mod") && i.push("⌘"), i.join("") + (r.length === 1 ? r.toUpperCase() : r);
+	let a = n.includes("Mod"), o = n.includes("Ctrl");
+	return (o || a && !o) && i.push("Ctrl"), n.includes("Alt") && i.push("Alt"), n.includes("Shift") && i.push("Shift"), i.join("+") + (i.length > 0 ? "+" : "") + (r.length === 1 ? r.toUpperCase() : r);
+}
+//#endregion
+//#region src/ui/i18n/en.ts
+var j = {
+	"toolbar.label": "Formatting",
+	"toolbar.undo": "Undo",
+	"toolbar.redo": "Redo",
+	"toolbar.bold": "Bold",
+	"toolbar.italic": "Italic",
+	"toolbar.underline": "Underline",
+	"toolbar.strike": "Strikethrough",
+	"toolbar.subscript": "Subscript",
+	"toolbar.superscript": "Superscript",
+	"toolbar.code": "Code",
+	"toolbar.clearFormatting": "Clear formatting",
+	"toolbar.bulletList": "Bulleted list",
+	"toolbar.orderedList": "Numbered list",
+	"toolbar.blockquote": "Quote",
+	"toolbar.horizontalRule": "Horizontal line",
+	"toolbar.link": "Link",
+	"toolbar.heading": "Text style",
+	"heading.paragraph": "Paragraph",
+	"heading.h1": "Heading 1",
+	"heading.h2": "Heading 2",
+	"heading.h3": "Heading 3",
+	"heading.h4": "Heading 4",
+	"heading.h5": "Heading 5",
+	"heading.h6": "Heading 6",
+	"link.url": "URL",
+	"link.newTab": "Open in new tab",
+	"link.apply": "Apply",
+	"link.remove": "Remove link",
+	"link.edit": "Edit link",
+	"link.open": "Open link in a new tab",
+	"toolbar.characters": "Insert character",
+	"characters.search": "Search",
+	"characters.noResults": "No results",
+	"characters.symbols": "Symbols",
+	"characters.emoji": "Emoji",
+	"characters.punctuation": "Punctuation",
+	"characters.currency": "Currency",
+	"characters.math": "Math",
+	"characters.arrows": "Arrows",
+	"characters.greek": "Greek",
+	"characters.latin": "Accented letters",
+	"characters.signs": "Signs and shapes",
+	"characters.smileys": "Smileys",
+	"characters.people": "People and gestures",
+	"characters.nature": "Animals and nature",
+	"characters.food": "Food and drink",
+	"characters.travel": "Travel and places",
+	"characters.activities": "Activities",
+	"characters.objects": "Objects",
+	"characters.emojiSymbols": "Symbols",
+	"toolbar.textColor": "Text color",
+	"toolbar.highlight": "Highlight",
+	"color.more": "more colors",
+	"color.default": "Default",
+	"color.none": "No color",
+	"color.pick": "Pick a color",
+	"color.custom": "Custom color",
+	"color.apply": "Apply",
+	"color.black": "Black",
+	"color.darkGray2": "Dark gray 2",
+	"color.darkGray1": "Dark gray 1",
+	"color.gray": "Gray",
+	"color.lightGray1": "Light gray 1",
+	"color.lightGray2": "Light gray 2",
+	"color.lightGray3": "Light gray 3",
+	"color.white": "White",
+	"color.red": "Red",
+	"color.orange": "Orange",
+	"color.yellow": "Yellow",
+	"color.green": "Green",
+	"color.cyan": "Cyan",
+	"color.blue": "Blue",
+	"color.purple": "Purple",
+	"color.pink": "Pink",
+	"color.lightRed": "Light red",
+	"color.lightOrange": "Light orange",
+	"color.lightYellow": "Light yellow",
+	"color.lightGreen": "Light green",
+	"color.lightCyan": "Light cyan",
+	"color.lightBlue": "Light blue",
+	"color.lightPurple": "Light purple",
+	"color.lightPink": "Light pink",
+	"color.darkRed": "Dark red",
+	"color.darkOrange": "Dark orange",
+	"color.darkYellow": "Dark yellow",
+	"color.darkGreen": "Dark green",
+	"color.darkCyan": "Dark cyan",
+	"color.darkBlue": "Dark blue",
+	"color.darkPurple": "Dark purple",
+	"color.darkPink": "Dark pink"
+}, M = {
+	"toolbar.label": "Formattazione",
+	"toolbar.undo": "Annulla",
+	"toolbar.redo": "Ripeti",
+	"toolbar.bold": "Grassetto",
+	"toolbar.italic": "Corsivo",
+	"toolbar.underline": "Sottolineato",
+	"toolbar.strike": "Barrato",
+	"toolbar.subscript": "Pedice",
+	"toolbar.superscript": "Apice",
+	"toolbar.code": "Codice",
+	"toolbar.clearFormatting": "Cancella formattazione",
+	"toolbar.bulletList": "Elenco puntato",
+	"toolbar.orderedList": "Elenco numerato",
+	"toolbar.blockquote": "Citazione",
+	"toolbar.horizontalRule": "Linea orizzontale",
+	"toolbar.link": "Collegamento",
+	"toolbar.heading": "Stile testo",
+	"heading.paragraph": "Paragrafo",
+	"heading.h1": "Titolo 1",
+	"heading.h2": "Titolo 2",
+	"heading.h3": "Titolo 3",
+	"heading.h4": "Titolo 4",
+	"heading.h5": "Titolo 5",
+	"heading.h6": "Titolo 6",
+	"link.url": "URL",
+	"link.newTab": "Apri in una nuova scheda",
+	"link.apply": "Applica",
+	"link.remove": "Rimuovi collegamento",
+	"link.edit": "Modifica collegamento",
+	"link.open": "Apri il collegamento in una nuova scheda",
+	"toolbar.characters": "Inserisci carattere",
+	"characters.search": "Cerca",
+	"characters.noResults": "Nessun risultato",
+	"characters.symbols": "Simboli",
+	"characters.emoji": "Emoji",
+	"characters.punctuation": "Punteggiatura",
+	"characters.currency": "Valute",
+	"characters.math": "Matematica",
+	"characters.arrows": "Frecce",
+	"characters.greek": "Greco",
+	"characters.latin": "Lettere accentate",
+	"characters.signs": "Segni e forme",
+	"characters.smileys": "Faccine",
+	"characters.people": "Persone e gesti",
+	"characters.nature": "Animali e natura",
+	"characters.food": "Cibo e bevande",
+	"characters.travel": "Viaggi e luoghi",
+	"characters.activities": "Attività",
+	"characters.objects": "Oggetti",
+	"characters.emojiSymbols": "Simboli",
+	"toolbar.textColor": "Colore testo",
+	"toolbar.highlight": "Evidenziatore",
+	"color.more": "altri colori",
+	"color.default": "Predefinito",
+	"color.none": "Nessun colore",
+	"color.pick": "Scegli un colore",
+	"color.custom": "Colore personalizzato",
+	"color.apply": "Applica",
+	"color.black": "Nero",
+	"color.darkGray2": "Grigio scuro 2",
+	"color.darkGray1": "Grigio scuro 1",
+	"color.gray": "Grigio",
+	"color.lightGray1": "Grigio chiaro 1",
+	"color.lightGray2": "Grigio chiaro 2",
+	"color.lightGray3": "Grigio chiaro 3",
+	"color.white": "Bianco",
+	"color.red": "Rosso",
+	"color.orange": "Arancione",
+	"color.yellow": "Giallo",
+	"color.green": "Verde",
+	"color.cyan": "Ciano",
+	"color.blue": "Blu",
+	"color.purple": "Viola",
+	"color.pink": "Rosa",
+	"color.lightRed": "Rosso chiaro",
+	"color.lightOrange": "Arancione chiaro",
+	"color.lightYellow": "Giallo chiaro",
+	"color.lightGreen": "Verde chiaro",
+	"color.lightCyan": "Ciano chiaro",
+	"color.lightBlue": "Blu chiaro",
+	"color.lightPurple": "Viola chiaro",
+	"color.lightPink": "Rosa chiaro",
+	"color.darkRed": "Rosso scuro",
+	"color.darkOrange": "Arancione scuro",
+	"color.darkYellow": "Giallo scuro",
+	"color.darkGreen": "Verde scuro",
+	"color.darkCyan": "Ciano scuro",
+	"color.darkBlue": "Blu scuro",
+	"color.darkPurple": "Viola scuro",
+	"color.darkPink": "Rosa scuro"
+};
+//#endregion
+//#region src/ui/components/popover.ts
+function N(e) {
+	let { anchor: t, content: n, container: r, placement: i = "bottom-start", offset: a = 4, onClose: o } = e, s = !1, c = !1, l, u = 0;
+	n.classList.add("stilo-popover"), n.setAttribute("hidden", ""), r.classList.add("stilo-popover-host"), r.appendChild(n);
+	function d() {
+		let e = ++u;
+		Promise.resolve(T(t, n, {
+			strategy: "absolute",
+			placement: i,
+			middleware: [
+				D(a),
+				E(),
+				O({ padding: 8 })
+			]
+		}).then((t) => {
+			s || u !== e || (n.style.left = `${t.x}px`, n.style.top = `${t.y}px`);
+		}));
+	}
+	function f() {
+		c || s || (c = !0, n.removeAttribute("hidden"), l = w(t, n, () => {
+			c && d();
+		}), document.addEventListener("pointerdown", h, !0), document.addEventListener("keydown", g, !0));
+	}
+	function p(e = "api") {
+		c && !s && (c = !1, n.setAttribute("hidden", ""), l?.(), l = void 0, document.removeEventListener("pointerdown", h, !0), document.removeEventListener("keydown", g, !0), o?.(e));
+	}
+	function m() {
+		s || (s = !0, c && (c = !1, n.setAttribute("hidden", ""), l?.(), l = void 0, document.removeEventListener("pointerdown", h, !0), document.removeEventListener("keydown", g, !0), o?.("api")), r.contains(n) && r.removeChild(n), r.querySelector(":scope > .stilo-popover") || r.classList.remove("stilo-popover-host"));
+	}
+	function h(e) {
+		if (!c || s) return;
+		let r = e.target;
+		n.contains(r) || typeof t == "object" && "nodeType" in t && t.nodeType === 1 && t.contains(r) || p("outside");
+	}
+	function g(e) {
+		c && !s && e.key === "Escape" && (e.preventDefault(), p("escape"));
+	}
+	return {
+		get isOpen() {
+			return c;
+		},
+		open: f,
+		close: p,
+		destroy: m
+	};
+}
+//#endregion
+//#region src/ui/components/link-popover.ts
+var P = "https://example.com";
+function F(e) {
+	return e.isActive("link") || e.commands.setLink.can({ href: P });
+}
+function I(e, t) {
+	let { container: n, messages: r } = t, i = {
+		contextElement: e.view.dom,
+		getBoundingClientRect: () => {
+			let { from: t, to: n } = e.state.selection, r = e.view.coordsAtPos(t), i = e.view.coordsAtPos(n), a = Math.min(r.left, i.left), o = Math.max(r.right, i.right), { top: s } = r, { bottom: c } = i;
+			return {
+				x: a,
+				y: s,
+				left: a,
+				top: s,
+				right: o,
+				bottom: c,
+				width: o - a,
+				height: c - s
+			};
+		}
+	}, a = document.createElement("div");
+	a.className = "stilo-link-popover", a.setAttribute("role", "dialog"), a.setAttribute("aria-label", r["toolbar.link"]);
+	let o = document.createElement("form");
+	o.className = "stilo-link-popover__form";
+	let s = document.createElement("input");
+	s.type = "text", s.inputMode = "url", s.className = "stilo-link-popover__url", s.placeholder = "https://", s.autocomplete = "off", s.spellcheck = !1, s.setAttribute("aria-label", r["link.url"]);
+	let c = document.createElement("label");
+	c.className = "stilo-link-popover__new-tab";
+	let l = document.createElement("input");
+	l.type = "checkbox", c.append(l, r["link.newTab"]);
+	let u = document.createElement("div");
+	u.className = "stilo-link-popover__actions";
+	let d = L("submit", r["link.apply"]);
+	d.classList.add("stilo-link-popover__button--primary");
+	let f = L("button", r["link.remove"]);
+	u.append(d, f), o.append(s, c, u), a.append(o);
+	let p = N({
+		anchor: i,
+		content: a,
+		container: n,
+		onClose: (t) => {
+			t === "escape" && e.focus();
+		}
+	});
+	function m() {
+		p.close(), e.focus();
+	}
+	let h = (t) => {
+		t.preventDefault();
+		let n = s.value.trim();
+		(n ? e.commands.setLink({
+			href: n,
+			target: l.checked ? "_blank" : null
+		}) : !e.isActive("link") || e.commands.unsetLink()) ? m() : (s.setAttribute("aria-invalid", "true"), s.focus());
+	}, g = () => {
+		e.commands.unsetLink(), m();
+	}, _ = () => {
+		s.removeAttribute("aria-invalid");
+	};
+	o.addEventListener("submit", h), f.addEventListener("click", g), s.addEventListener("input", _);
+	function v() {
+		if (p.isOpen || !F(e)) return;
+		let { href: t, target: n } = e.getAttributes("link");
+		s.value = typeof t == "string" ? t : "", s.removeAttribute("aria-invalid"), l.checked = n === "_blank", f.hidden = !e.isActive("link"), p.open(), s.focus({ preventScroll: !0 }), s.select();
+	}
+	function y() {
+		o.removeEventListener("submit", h), f.removeEventListener("click", g), s.removeEventListener("input", _), p.destroy();
+	}
+	return {
+		get isOpen() {
+			return p.isOpen;
+		},
+		open: v,
+		close: () => p.close(),
+		destroy: y
+	};
+}
+function L(e, t) {
+	let n = document.createElement("button");
+	return n.type = e, n.className = "stilo-link-popover__button", n.textContent = t, n;
+}
+//#endregion
+//#region src/ui/toolbar/palette.ts
+function R(e, t) {
+	return {
+		color: e,
+		labelKey: t
+	};
+}
+var z = [
+	R("#000000", "color.black"),
+	R("#404040", "color.darkGray2"),
+	R("#737373", "color.darkGray1"),
+	R("#a3a3a3", "color.gray"),
+	R("#d4d4d4", "color.lightGray1"),
+	R("#e5e5e5", "color.lightGray2"),
+	R("#f5f5f5", "color.lightGray3"),
+	R("#ffffff", "color.white"),
+	R("#ef4444", "color.red"),
+	R("#f97316", "color.orange"),
+	R("#eab308", "color.yellow"),
+	R("#22c55e", "color.green"),
+	R("#06b6d4", "color.cyan"),
+	R("#3b82f6", "color.blue"),
+	R("#a855f7", "color.purple"),
+	R("#ec4899", "color.pink"),
+	R("#fecaca", "color.lightRed"),
+	R("#fed7aa", "color.lightOrange"),
+	R("#fef08a", "color.lightYellow"),
+	R("#bbf7d0", "color.lightGreen"),
+	R("#a5f3fc", "color.lightCyan"),
+	R("#bfdbfe", "color.lightBlue"),
+	R("#e9d5ff", "color.lightPurple"),
+	R("#fbcfe8", "color.lightPink"),
+	R("#991b1b", "color.darkRed"),
+	R("#9a3412", "color.darkOrange"),
+	R("#854d0e", "color.darkYellow"),
+	R("#166534", "color.darkGreen"),
+	R("#155e75", "color.darkCyan"),
+	R("#1e40af", "color.darkBlue"),
+	R("#6b21a8", "color.darkPurple"),
+	R("#9d174d", "color.darkPink")
+], B = [
+	["undo", "redo"],
+	["heading"],
+	[
+		"bold",
+		"italic",
+		"underline",
+		"strike",
+		"code",
+		"subscript",
+		"superscript",
+		"link",
+		"clearFormatting"
+	],
+	["textColor", "highlight"],
+	[
+		"bulletList",
+		"orderedList",
+		"blockquote",
+		"horizontalRule",
+		"characters"
+	]
+], V = {
+	undo: {
+		id: "undo",
+		kind: "button",
+		icon: x,
+		labelKey: "toolbar.undo",
+		shortcut: "Mod-z",
+		run: (e) => {
+			e.commands.undo();
+		},
+		isEnabled: (e) => e.commands.undo.can()
+	},
+	redo: {
+		id: "redo",
+		kind: "button",
+		icon: p,
+		labelKey: "toolbar.redo",
+		shortcut: "Mod-Shift-z",
+		run: (e) => {
+			e.commands.redo();
+		},
+		isEnabled: (e) => e.commands.redo.can()
+	},
+	bold: {
+		id: "bold",
+		kind: "button",
+		icon: t,
+		labelKey: "toolbar.bold",
+		shortcut: "Mod-b",
+		run: (e) => {
+			e.commands.toggleBold();
+		},
+		isActive: (e) => e.isActive("bold"),
+		isEnabled: (e) => "toggleBold" in e.commands && e.commands.toggleBold.can(),
+		isAvailable: (e) => "toggleBold" in e.commands
+	},
+	italic: {
+		id: "italic",
+		kind: "button",
+		icon: s,
+		labelKey: "toolbar.italic",
+		shortcut: "Mod-i",
+		run: (e) => {
+			e.commands.toggleItalic();
+		},
+		isActive: (e) => e.isActive("italic"),
+		isEnabled: (e) => "toggleItalic" in e.commands && e.commands.toggleItalic.can(),
+		isAvailable: (e) => "toggleItalic" in e.commands
+	},
+	underline: {
+		id: "underline",
+		kind: "button",
+		icon: b,
+		labelKey: "toolbar.underline",
+		shortcut: "Mod-u",
+		run: (e) => {
+			e.commands.toggleUnderline();
+		},
+		isActive: (e) => e.isActive("underline"),
+		isEnabled: (e) => "toggleUnderline" in e.commands && e.commands.toggleUnderline.can(),
+		isAvailable: (e) => "toggleUnderline" in e.commands
+	},
+	strike: {
+		id: "strike",
+		kind: "button",
+		icon: h,
+		labelKey: "toolbar.strike",
+		shortcut: "Mod-Shift-s",
+		run: (e) => {
+			e.commands.toggleStrike();
+		},
+		isActive: (e) => e.isActive("strike"),
+		isEnabled: (e) => "toggleStrike" in e.commands && e.commands.toggleStrike.can(),
+		isAvailable: (e) => "toggleStrike" in e.commands
+	},
+	code: {
+		id: "code",
+		kind: "button",
+		icon: r,
+		labelKey: "toolbar.code",
+		shortcut: "Mod-e",
+		run: (e) => {
+			e.commands.toggleCode();
+		},
+		isActive: (e) => e.isActive("code"),
+		isEnabled: (e) => "toggleCode" in e.commands && e.commands.toggleCode.can(),
+		isAvailable: (e) => "toggleCode" in e.commands
+	},
+	subscript: {
+		id: "subscript",
+		kind: "button",
+		icon: g,
+		labelKey: "toolbar.subscript",
+		shortcut: "Mod-,",
+		run: (e) => {
+			e.commands.toggleSubscript();
+		},
+		isActive: (e) => e.isActive("subscript"),
+		isEnabled: (e) => "toggleSubscript" in e.commands && e.commands.toggleSubscript.can(),
+		isAvailable: (e) => "toggleSubscript" in e.commands
+	},
+	superscript: {
+		id: "superscript",
+		kind: "button",
+		icon: _,
+		labelKey: "toolbar.superscript",
+		shortcut: "Mod-.",
+		run: (e) => {
+			e.commands.toggleSuperscript();
+		},
+		isActive: (e) => e.isActive("superscript"),
+		isEnabled: (e) => "toggleSuperscript" in e.commands && e.commands.toggleSuperscript.can(),
+		isAvailable: (e) => "toggleSuperscript" in e.commands
+	},
+	link: {
+		id: "link",
+		kind: "button",
+		icon: c,
+		labelKey: "toolbar.link",
+		shortcut: "Mod-k",
+		run: (e, t) => {
+			t.openLinkPopover();
+		},
+		isActive: (e) => e.isActive("link"),
+		isEnabled: (e) => "setLink" in e.commands && F(e),
+		isAvailable: (e) => "setLink" in e.commands
+	},
+	clearFormatting: {
+		id: "clearFormatting",
+		kind: "button",
+		icon: m,
+		labelKey: "toolbar.clearFormatting",
+		shortcut: "Mod-\\",
+		run: (e) => {
+			e.commands.clearFormatting();
+		},
+		isEnabled: (e) => "clearFormatting" in e.commands && e.commands.clearFormatting.can(),
+		isAvailable: (e) => "clearFormatting" in e.commands
+	},
+	bulletList: {
+		id: "bulletList",
+		kind: "button",
+		icon: l,
+		labelKey: "toolbar.bulletList",
+		shortcut: "Mod-Shift-8",
+		run: (e) => {
+			e.commands.toggleBulletList();
+		},
+		isActive: (e) => e.isActive("bulletList"),
+		isEnabled: (e) => "toggleBulletList" in e.commands && e.commands.toggleBulletList.can(),
+		isAvailable: (e) => "toggleBulletList" in e.commands
+	},
+	orderedList: {
+		id: "orderedList",
+		kind: "button",
+		icon: u,
+		labelKey: "toolbar.orderedList",
+		shortcut: "Mod-Shift-7",
+		run: (e) => {
+			e.commands.toggleOrderedList();
+		},
+		isActive: (e) => e.isActive("orderedList"),
+		isEnabled: (e) => "toggleOrderedList" in e.commands && e.commands.toggleOrderedList.can(),
+		isAvailable: (e) => "toggleOrderedList" in e.commands
+	},
+	blockquote: {
+		id: "blockquote",
+		kind: "button",
+		icon: v,
+		labelKey: "toolbar.blockquote",
+		shortcut: "Mod-Shift-b",
+		run: (e) => {
+			e.commands.toggleBlockquote();
+		},
+		isActive: (e) => e.isActive("blockquote"),
+		isEnabled: (e) => "toggleBlockquote" in e.commands && e.commands.toggleBlockquote.can(),
+		isAvailable: (e) => "toggleBlockquote" in e.commands
+	},
+	horizontalRule: {
+		id: "horizontalRule",
+		kind: "button",
+		icon: d,
+		labelKey: "toolbar.horizontalRule",
+		run: (e) => {
+			e.commands.setHorizontalRule();
+		},
+		isEnabled: (e) => "setHorizontalRule" in e.commands && e.commands.setHorizontalRule.can(),
+		isAvailable: (e) => "setHorizontalRule" in e.commands
+	},
+	characters: {
+		id: "characters",
+		kind: "button",
+		icon: a,
+		labelKey: "toolbar.characters",
+		run: (e, t) => {
+			t.toggleCharacterPicker();
+		},
+		isAvailable: (e) => "insertText" in e.commands
+	},
+	heading: G(),
+	textColor: U(),
+	highlight: W()
+};
+function H(e, t) {
+	let { color: n } = e.getAttributes(t);
+	return typeof n == "string" ? n : null;
+}
+function U(e = z) {
+	return {
+		id: "textColor",
+		kind: "color",
+		icon: y,
+		labelKey: "toolbar.textColor",
+		palette: e,
+		defaultColor: "#000000",
+		setColor: (e, t) => t !== null && e.commands.setColor(t),
+		unsetColor: (e) => {
+			e.commands.unsetColor();
+		},
+		hasColor: (e, t) => e.isActive("textStyle", { color: t }),
+		getColor: (e) => H(e, "textStyle"),
+		isEnabled: (e) => "setColor" in e.commands && e.commands.setColor.can("#000000"),
+		isAvailable: (e) => "setColor" in e.commands
+	};
+}
+function W(e = z) {
+	return {
+		id: "highlight",
+		kind: "color",
+		icon: o,
+		labelKey: "toolbar.highlight",
+		palette: e,
+		defaultColor: null,
+		defaultChoice: !0,
+		setColor: (e, t) => e.commands.setHighlight({ color: t }),
+		unsetColor: (e) => {
+			e.commands.unsetHighlight();
+		},
+		hasColor: (e, t) => e.isActive("highlight", { color: t }),
+		getColor: (e) => H(e, "highlight"),
+		isEnabled: (e) => "setHighlight" in e.commands && e.commands.setHighlight.can(),
+		isAvailable: (e) => "setHighlight" in e.commands
+	};
+}
+function G(e = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6
+]) {
+	return {
+		id: "heading",
+		kind: "dropdown",
+		labelKey: "toolbar.heading",
+		options: [{
+			id: "paragraph",
+			labelKey: "heading.paragraph",
+			shortcut: "Mod-Alt-0",
+			run: (e) => {
+				e.commands.setParagraph();
+			},
+			isActive: (e) => e.isActive("paragraph"),
+			isEnabled: (e) => e.isActive("paragraph") || e.commands.setParagraph.can()
+		}, ...e.map((e) => ({
+			id: `h${e}`,
+			labelKey: `heading.h${e}`,
+			shortcut: `Mod-Alt-${e}`,
+			run: (t) => {
+				t.commands.setHeading({ level: e });
+			},
+			isActive: (t) => t.isActive("heading", { level: e }),
+			isEnabled: (t) => t.isActive("heading", { level: e }) || t.commands.setHeading.can({ level: e })
+		}))],
+		isAvailable: (e) => "setHeading" in e.commands
+	};
+}
+//#endregion
+//#region src/ui/components/character-picker.ts
+var K = 10;
+async function q() {
+	let { SYMBOLS: e, EMOJI: t } = await import("./characters--8h5uTeF.js");
+	return {
+		symbols: e,
+		emoji: t
+	};
+}
+function J(e, t) {
+	let { anchor: n, container: r, messages: i } = t, a = document.createElement("div");
+	a.className = "stilo-char-picker", a.setAttribute("role", "dialog"), a.setAttribute("aria-label", i["toolbar.characters"]);
+	let o = document.createElement("input");
+	o.type = "search", o.className = "stilo-char-picker__search", o.placeholder = i["characters.search"], o.autocomplete = "off", o.spellcheck = !1, o.setAttribute("aria-label", i["characters.search"]);
+	let s = document.createElement("div");
+	s.className = "stilo-char-picker__tabs", s.setAttribute("role", "tablist");
+	let c = /* @__PURE__ */ new Map();
+	for (let e of ["symbols", "emoji"]) {
+		let t = document.createElement("button");
+		t.type = "button", t.className = "stilo-char-picker__tab", t.setAttribute("role", "tab"), t.textContent = i[`characters.${e}`], c.set(e, t), s.append(t);
+	}
+	let l = document.createElement("div");
+	l.className = "stilo-char-picker__panel", l.setAttribute("role", "tabpanel"), a.append(o, s, l), n.setAttribute("aria-haspopup", "dialog"), n.setAttribute("aria-expanded", "false");
+	let u = N({
+		anchor: n,
+		content: a,
+		container: r,
+		onClose: (t) => {
+			n.setAttribute("aria-expanded", "false"), t === "escape" && e.focus();
+		}
+	}), d = null, f = "symbols", p = [], m = [];
+	function h(e) {
+		f = e;
+		for (let [t, n] of c) {
+			let r = t === e;
+			n.setAttribute("aria-selected", String(r)), n.tabIndex = r ? 0 : -1;
+		}
+	}
+	function g(e, t) {
+		let n = document.createElement("div");
+		n.className = "stilo-char-picker__grid", n.setAttribute("role", "group"), n.setAttribute("aria-label", t);
+		let r = e.map(([e, t]) => {
+			let n = document.createElement("button");
+			return n.type = "button", n.className = "stilo-char-picker__char", n.tabIndex = -1, n.title = t, n.setAttribute("aria-label", t), n.dataset.character = e, n.textContent = e, n;
+		});
+		n.append(...r), p.push(...r);
+		for (let e = 0; e < r.length; e += K) m.push(r.slice(e, e + K));
+		return n;
+	}
+	function _() {
+		if (!d) return;
+		p = [], m = [], l.replaceChildren();
+		let e = o.value.trim().toLowerCase();
+		if (s.hidden = e !== "", e) {
+			let t = [...d.symbols, ...d.emoji].flatMap((e) => e.characters).filter(([t, n]) => t === e || n.toLowerCase().includes(e));
+			if (t.length > 0) l.append(g(t, i["characters.search"]));
+			else {
+				let e = document.createElement("p");
+				e.className = "stilo-char-picker__empty", e.textContent = i["characters.noResults"], l.append(e);
+			}
+		} else for (let e of d[f]) {
+			let t = i[e.labelKey], n = document.createElement("div");
+			n.className = "stilo-char-picker__heading", n.textContent = t, l.append(n, g(e.characters, t));
+		}
+		p[0] && (p[0].tabIndex = 0);
+	}
+	function v(e) {
+		if (e) {
+			for (let e of p) e.tabIndex = -1;
+			e.tabIndex = 0, e.focus();
+		}
+	}
+	function y(e, t) {
+		if (t === "ArrowLeft") return p[p.indexOf(e) - 1];
+		if (t === "ArrowRight") return p[p.indexOf(e) + 1];
+		let n = m.findIndex((t) => t.includes(e)), r = m[n].indexOf(e), i = m[t === "ArrowUp" ? n - 1 : n + 1];
+		return i?.[Math.min(r, i.length - 1)];
+	}
+	let b = () => _(), x = (e) => {
+		e.key === "ArrowDown" && p[0] && (e.preventDefault(), v(p[0]));
+	}, S = (e) => {
+		let t = [...c].find(([, t]) => t === e.target)?.[0];
+		t && (h(t), _());
+	}, C = (e) => {
+		if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+		e.preventDefault();
+		let t = f === "symbols" ? "emoji" : "symbols";
+		h(t), _(), c.get(t).focus();
+	}, w = (t) => {
+		let n = t.target.closest(".stilo-char-picker__char");
+		n?.dataset.character && (e.commands.insertText(n.dataset.character), v(n));
+	}, T = (e) => {
+		let t = e.target.closest(".stilo-char-picker__char");
+		t && [
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(e.key) && (e.preventDefault(), v(y(t, e.key)));
+	};
+	o.addEventListener("input", b), o.addEventListener("keydown", x), s.addEventListener("click", S), s.addEventListener("keydown", C), l.addEventListener("click", w), l.addEventListener("keydown", T), h(f);
+	async function E() {
+		u.isOpen || (u.open(), n.setAttribute("aria-expanded", "true"), d ??= await q(), u.isOpen && (o.value = "", _(), o.focus({ preventScroll: !0 })));
+	}
+	function D() {
+		u.isOpen && (u.close(), e.focus());
+	}
+	function O() {
+		o.removeEventListener("input", b), o.removeEventListener("keydown", x), s.removeEventListener("click", S), s.removeEventListener("keydown", C), l.removeEventListener("click", w), l.removeEventListener("keydown", T), u.destroy(), n.removeAttribute("aria-haspopup"), n.removeAttribute("aria-expanded");
+	}
+	return {
+		get isOpen() {
+			return u.isOpen;
+		},
+		open: E,
+		close: D,
+		toggle: () => u.isOpen ? D() : void E(),
+		destroy: O
+	};
+}
+//#endregion
+//#region src/ui/components/icon.ts
+function Y(e) {
+	return C(e, {
+		class: "stilo-icon",
+		"aria-hidden": "true"
+	});
+}
+//#endregion
+//#region src/ui/components/color-button.ts
+var X = 8, ee = "Mark", te = /^#[0-9a-f]{6}$/;
+function Z(e, t) {
+	let n = document.createElement(e);
+	return n.className = t, n;
+}
+function Q(e, t) {
+	let n = Z("button", e);
+	return n.type = "button", n.setAttribute("aria-label", t), n.title = t, n;
+}
+function ne(e, t, r) {
+	let { container: i, messages: a } = r, o = a[t.labelKey] ?? t.labelKey, s = t.defaultColor, c = Z("span", "stilo-split"), l = Q("stilo-toolbar__button stilo-split__main", o), u = Z("span", "stilo-split__color");
+	l.append(Y(t.icon), u);
+	let d = Q("stilo-toolbar__button stilo-split__arrow", `${o}: ${a["color.more"]}`);
+	d.append(Y(n));
+	for (let e of [l, d]) e.dataset.item = t.id, e.tabIndex = -1;
+	l.setAttribute("aria-pressed", "false"), d.setAttribute("aria-haspopup", "dialog"), d.setAttribute("aria-expanded", "false"), c.append(l, d);
+	let f = Z("div", "stilo-color-picker");
+	f.setAttribute("role", "dialog"), f.setAttribute("aria-label", o);
+	let p = Z("div", "stilo-color-picker__actions"), m = Z("button", "stilo-color-picker__none");
+	m.type = "button", m.textContent = a["color.none"], p.append(m);
+	let h = null;
+	if (t.defaultChoice) {
+		let e = Z("span", "stilo-color-picker__separator");
+		e.setAttribute("aria-hidden", "true"), h = Z("button", "stilo-color-picker__default"), h.type = "button";
+		let t = document.createElement("mark");
+		t.textContent = a["color.default"], h.append(t), p.append(e, h);
+	}
+	let g = Z("div", "stilo-color-picker__grid");
+	g.setAttribute("role", "group"), g.setAttribute("aria-label", o);
+	let _ = t.palette.map(({ color: e, labelKey: t }) => {
+		let n = Q("stilo-color-picker__swatch", a[t] ?? t);
+		return n.tabIndex = -1, n.dataset.color = e, n.style.backgroundColor = e, n;
+	});
+	g.append(..._);
+	let v = Z("form", "stilo-color-picker__custom"), y = Z("input", "stilo-color-picker__native");
+	y.type = "color", y.setAttribute("aria-label", a["color.pick"]);
+	let b = Z("input", "stilo-color-picker__value");
+	b.type = "text", b.placeholder = "#000000", b.autocomplete = "off", b.spellcheck = !1, b.setAttribute("aria-label", a["color.custom"]);
+	let x = Z("button", "stilo-color-picker__apply");
+	x.type = "submit", x.textContent = a["color.apply"], v.append(y, b, x), f.append(p, g, v);
+	let S = N({
+		anchor: c,
+		content: f,
+		container: i,
+		onClose: (t) => {
+			d.setAttribute("aria-expanded", "false"), t === "escape" && e.focus();
+		}
+	});
+	function C() {
+		u.style.backgroundColor = s ?? ee;
+	}
+	function w() {
+		return t.isEnabled?.(e) ?? !0;
+	}
+	function T() {
+		let n = w();
+		for (let e of [l, d]) n ? e.removeAttribute("aria-disabled") : e.setAttribute("aria-disabled", "true");
+		let r = n && t.hasColor(e, s);
+		l.setAttribute("aria-pressed", String(r)), l.classList.toggle("stilo-toolbar__button--active", r);
+	}
+	function E(e, t) {
+		if (e) {
+			for (let e of _) e.tabIndex = -1;
+			e.tabIndex = 0, e.focus(t);
+		}
+	}
+	function D() {
+		let n = t.getColor(e);
+		for (let e of _) e.setAttribute("aria-pressed", String(e.dataset.color === n));
+		h?.setAttribute("aria-pressed", String(t.hasColor(e, null))), b.value = n ?? "", b.removeAttribute("aria-invalid"), y.value = n && te.test(n) ? n : "#000000", S.open(), d.setAttribute("aria-expanded", "true");
+		let r = _.find((e) => e.getAttribute("aria-pressed") === "true");
+		!r && h?.getAttribute("aria-pressed") === "true" ? h.focus({ preventScroll: !0 }) : E(r ?? _[0], { preventScroll: !0 });
+	}
+	function O() {
+		S.close(), e.focus();
+	}
+	function k(n) {
+		return t.setColor(e, n) ? (s = t.getColor(e), C(), !0) : !1;
+	}
+	let A = () => {
+		w() && (S.close(), e.focus(), t.hasColor(e, s) ? t.unsetColor(e) : k(s));
+	}, j = () => {
+		S.isOpen ? O() : w() && D();
+	}, M = () => {
+		t.unsetColor(e), s = t.defaultColor, C(), O();
+	}, P = () => {
+		k(null), O();
+	}, F = (e) => {
+		let t = e.target.closest(".stilo-color-picker__swatch");
+		t?.dataset.color && (k(t.dataset.color), O());
+	}, I = (e) => {
+		let t = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -8,
+			ArrowDown: X
+		}[e.key], n = _.indexOf(e.target);
+		t !== void 0 && n !== -1 && (e.preventDefault(), E(_[n + t]));
+	}, L = () => {
+		b.value = y.value, b.removeAttribute("aria-invalid");
+	}, R = () => b.removeAttribute("aria-invalid"), z = (e) => {
+		e.preventDefault(), k(b.value.trim()) ? O() : (b.setAttribute("aria-invalid", "true"), b.focus());
+	};
+	l.addEventListener("click", A), d.addEventListener("click", j), m.addEventListener("click", M), h?.addEventListener("click", P), g.addEventListener("click", F), g.addEventListener("keydown", I), y.addEventListener("input", L), b.addEventListener("input", R), v.addEventListener("submit", z), C();
+	function B() {
+		l.removeEventListener("click", A), d.removeEventListener("click", j), m.removeEventListener("click", M), h?.removeEventListener("click", P), g.removeEventListener("click", F), g.removeEventListener("keydown", I), y.removeEventListener("input", L), b.removeEventListener("input", R), v.removeEventListener("submit", z), S.destroy(), c.remove();
+	}
+	return {
+		element: c,
+		main: l,
+		arrow: d,
+		update: T,
+		destroy: B
+	};
+}
+//#endregion
+//#region src/ui/components/dropdown.ts
+function re(e) {
+	let { label: t, options: r, container: i, onSelect: a } = e, o = document.createElement("button");
+	o.type = "button", o.className = "stilo-toolbar__button stilo-dropdown__trigger", o.setAttribute("aria-haspopup", "menu"), o.setAttribute("aria-expanded", "false"), o.setAttribute("title", t), o.setAttribute("tabindex", "-1");
+	let s = document.createElement("span");
+	s.className = "stilo-dropdown__value", o.appendChild(s);
+	let c = Y(n);
+	o.appendChild(c);
+	let l = document.createElement("div");
+	l.className = "stilo-dropdown__menu stilo-popover", l.setAttribute("role", "menu"), l.setAttribute("aria-label", t), l.setAttribute("hidden", "");
+	let u = [];
+	for (let e of r) {
+		let t = document.createElement("div");
+		t.className = `stilo-dropdown__option stilo-dropdown__option--${e.id}`, t.setAttribute("role", "menuitemradio"), t.setAttribute("tabindex", "-1"), t.setAttribute("data-option", e.id), t.setAttribute("aria-checked", "false");
+		let n = document.createElement("span");
+		if (n.className = "stilo-dropdown__label", n.textContent = e.label, t.appendChild(n), e.shortcut) {
+			let n = document.createElement("span");
+			n.className = "stilo-dropdown__shortcut", n.textContent = e.shortcut, t.appendChild(n);
+		}
+		u.push(t), l.appendChild(t);
+	}
+	let d;
+	i.appendChild(l);
+	function f() {
+		if (d) return;
+		d = N({
+			anchor: o,
+			content: l,
+			container: i,
+			onClose(e) {
+				e === "escape" && o.focus(), o.setAttribute("aria-expanded", "false"), d = void 0;
+			}
+		}), o.setAttribute("aria-expanded", "true"), d.open();
+		let e = u.findIndex((e) => e.getAttribute("aria-checked") === "true");
+		if (e >= 0) u[e].focus();
+		else {
+			let e = u.findIndex((e) => e.getAttribute("aria-disabled") !== "true");
+			e >= 0 && u[e].focus();
+		}
+	}
+	function p() {
+		d && (d.close(), o.setAttribute("aria-expanded", "false"));
+	}
+	function m() {
+		o.getAttribute("aria-disabled") !== "true" && (d ? p() : f());
+	}
+	o.addEventListener("click", m);
+	function h(e) {
+		if (o.getAttribute("aria-disabled") !== "true") switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault(), f();
+				let t = u.findIndex((e) => e.getAttribute("aria-disabled") !== "true");
+				t >= 0 && u[t].focus();
+				break;
+			}
+			case "ArrowUp":
+				e.preventDefault(), f();
+				for (let e = u.length - 1; e >= 0; e--) if (u[e].getAttribute("aria-disabled") !== "true") {
+					u[e].focus();
+					break;
+				}
+		}
+	}
+	o.addEventListener("keydown", h);
+	function g(e) {
+		let t = document.activeElement;
+		if (!t || !l.contains(t)) return;
+		let n = u.filter((e) => e.getAttribute("aria-disabled") !== "true"), r = n.indexOf(t);
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), n[(r + 1) % n.length].focus();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), n[(r - 1 + n.length) % n.length].focus();
+				break;
+			case "Home":
+				e.preventDefault(), n[0].focus();
+				break;
+			case "End":
+				e.preventDefault(), n[n.length - 1].focus();
+				break;
+			case "Enter":
+				if (e.preventDefault(), t === document.activeElement && t !== o) {
+					let e = t.getAttribute("data-option");
+					e && t.getAttribute("aria-disabled") !== "true" && (a(e), p());
+				}
+				break;
+			case " ":
+				if (e.preventDefault(), t === document.activeElement && t !== o) {
+					let e = t.getAttribute("data-option");
+					e && t.getAttribute("aria-disabled") !== "true" && a(e);
+				}
+				break;
+			case "Escape":
+				e.preventDefault(), p(), o.focus();
+				break;
+			case "Tab": p();
+		}
+	}
+	l.addEventListener("keydown", g);
+	for (let e of u) e.addEventListener("click", () => {
+		let t = e.getAttribute("data-option");
+		t && e.getAttribute("aria-disabled") !== "true" && (a(t), p());
+	});
+	let _ = !1;
+	function v(e) {
+		let { activeId: n, disabledIds: i } = e, a = r.find((e) => e.id === n)?.label ?? t;
+		s.textContent = a, o.setAttribute("aria-label", `${t}: ${a}`), i.size === r.length ? o.setAttribute("aria-disabled", "true") : o.removeAttribute("aria-disabled");
+		for (let e of u) {
+			let t = e.getAttribute("data-option");
+			i.has(t) ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.setAttribute("aria-checked", t === n ? "true" : "false");
+		}
+	}
+	function y() {
+		_ || (_ = !0, d?.destroy(), d = void 0, o.removeEventListener("click", m), o.removeEventListener("keydown", h), l.removeEventListener("keydown", g));
+	}
+	return {
+		get trigger() {
+			return o;
+		},
+		update: v,
+		destroy: y
+	};
+}
+//#endregion
+//#region src/ui/components/link-bubble.ts
+function ie(e, t) {
+	let { container: n, messages: r, onEdit: a } = t, o = null, s = {
+		contextElement: e.view.dom,
+		getBoundingClientRect: () => (o ?? e.view.dom).getBoundingClientRect()
+	}, c = document.createElement("div");
+	c.className = "stilo-link-bubble", c.setAttribute("role", "group"), c.setAttribute("aria-label", r["toolbar.link"]);
+	let l = document.createElement("a");
+	l.className = "stilo-link-bubble__button", l.target = "_blank", l.rel = "noopener noreferrer", l.setAttribute("aria-label", r["link.open"]), l.append(Y(i));
+	let u = $(f, r["link.edit"]), d = $(S, r["link.remove"]);
+	c.append(l, u, d);
+	let p = N({
+		anchor: s,
+		content: c,
+		container: n
+	}), m = (e) => {
+		e.preventDefault();
+	}, h = () => {
+		p.close(), a();
+	}, g = () => {
+		e.commands.unsetLink();
+	};
+	c.addEventListener("mousedown", m), u.addEventListener("click", h), d.addEventListener("click", g), e.on("transaction", v), e.on("focus", v), e.on("blur", v);
+	function _() {
+		let { selection: t } = e.state;
+		if (!t.empty || !e.isActive("link") || !e.view.hasFocus()) return null;
+		let { node: n } = e.view.domAtPos(t.from);
+		return (n instanceof Element ? n : n.parentElement)?.closest("a") ?? null;
+	}
+	function v() {
+		let t = _();
+		if (t !== o && p.close(), o = t, !o) return;
+		let n = String(e.getAttributes("link").href ?? "");
+		l.href = n, l.title = `${r["link.open"]}: ${n}`, p.open();
+	}
+	function y() {
+		e.off("transaction", v), e.off("focus", v), e.off("blur", v), c.removeEventListener("mousedown", m), u.removeEventListener("click", h), d.removeEventListener("click", g), p.destroy();
+	}
+	return {
+		get isOpen() {
+			return p.isOpen;
+		},
+		update: v,
+		destroy: y
+	};
+}
+function $(e, t) {
+	let n = document.createElement("button");
+	return n.type = "button", n.className = "stilo-link-bubble__button", n.setAttribute("aria-label", t), n.title = t, n.append(Y(e)), n;
+}
+//#endregion
+//#region src/ui/toolbar/toolbar.ts
+function ae(t, n) {
+	if (typeof t == "string") {
+		let r = V[t];
+		if (!r) throw new e(`Toolbar: unknown item "${t}"`);
+		return r.isAvailable && !r.isAvailable(n) ? void 0 : r;
+	}
+	if (!t.isAvailable || t.isAvailable(n)) return t;
+}
+function oe(e, t) {
+	let { container: n, items: r = B, messages: i = j, sticky: a = !0 } = t, o = k(), s = [];
+	for (let t of r) {
+		let n = [];
+		for (let r of t) {
+			let t = ae(r, e);
+			t && n.push(t);
+		}
+		n.length > 0 && s.push(n);
+	}
+	let c = document.createElement("div");
+	c.className = "stilo-toolbar", c.setAttribute("role", "toolbar"), c.setAttribute("aria-label", i?.["toolbar.label"] ?? "Formatting"), c.setAttribute("aria-orientation", "horizontal");
+	let l = [], u = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map(), f = [];
+	for (let t of s) {
+		let n = document.createElement("div");
+		n.className = "stilo-toolbar__group", n.setAttribute("role", "group");
+		for (let r of t) if (r.kind === "dropdown") {
+			let t = r, a = t.options.map((e) => {
+				let t = i[e.labelKey] ?? e.labelKey, n = e.shortcut ? A(e.shortcut, o) : void 0;
+				return {
+					id: e.id,
+					label: t,
+					shortcut: n
+				};
+			}), s = re({
+				label: i[t.labelKey] ?? t.labelKey,
+				options: a,
+				container: c,
+				onSelect: (n) => {
+					let r = t.options.find((e) => e.id === n);
+					r && (r.run(e), e.focus());
+				}
+			});
+			s.trigger.setAttribute("data-item", t.id), n.appendChild(s.trigger), l.push(s.trigger), u.set(s.trigger, t), d.set(t.id, s);
+		} else if (r.kind === "color") {
+			let t = ne(e, r, {
+				container: c,
+				messages: i
+			});
+			n.appendChild(t.element);
+			for (let e of [t.main, t.arrow]) l.push(e), u.set(e, r);
+			f.push(t);
+		} else {
+			let e = r, t = i[e.labelKey] ?? e.labelKey, a = e.shortcut === void 0 ? t : `${t} (${A(e.shortcut, o)})`, s = document.createElement("button");
+			s.type = "button", s.className = "stilo-toolbar__button", s.setAttribute("data-item", e.id), s.setAttribute("aria-label", t), s.setAttribute("title", a), s.setAttribute("tabindex", "-1"), e.isActive && s.setAttribute("aria-pressed", "false");
+			let c = Y(e.icon);
+			s.appendChild(c), n.appendChild(s), l.push(s), u.set(s, e);
+		}
+		c.appendChild(n);
+	}
+	let p = e.view.dom.parentElement ?? c, m = "setLink" in e.commands ? I(e, {
+		container: p,
+		messages: i
+	}) : null, h = m ? ie(e, {
+		container: p,
+		messages: i,
+		onEdit: () => m.open()
+	}) : null, g = c.querySelector("[data-item=\"characters\"]"), _ = g ? J(e, {
+		anchor: g,
+		container: c,
+		messages: i
+	}) : null, v = {
+		openLinkPopover: () => m?.open(),
+		toggleCharacterPicker: () => _?.toggle()
+	};
+	n.appendChild(c);
+	let y = null;
+	if (a) {
+		n.classList.add("stilo-toolbar-host");
+		let t = () => {
+			let t = n.offsetHeight + 5;
+			e.view.setProps({ scrollMargin: {
+				top: t,
+				right: 5,
+				bottom: 5,
+				left: 5
+			} });
+		};
+		t(), typeof ResizeObserver < "u" && (y = new ResizeObserver(t), y.observe(n));
+	}
+	let b = 0, x = !1, S = 0;
+	function C(e) {
+		l.forEach((t, n) => {
+			t.setAttribute("tabindex", n === e ? "0" : "-1");
+		}), S = e;
+	}
+	C(0);
+	function w() {
+		for (let e of f) e.update();
+		for (let t of l) {
+			let n = u.get(t);
+			if (n && n.kind !== "color") {
+				if (n.kind === "dropdown") {
+					let t = n, r = null, i = /* @__PURE__ */ new Set();
+					for (let n of t.options) {
+						let t = n.isActive(e);
+						n.isEnabled !== void 0 && !n.isEnabled(e) && i.add(n.id), t && r === null && (r = n.id);
+					}
+					d.get(t.id)?.update({
+						activeId: r,
+						disabledIds: i
+					});
+				} else {
+					let r = t, i = n;
+					if (i.isActive) {
+						let t = i.isActive(e);
+						r.setAttribute("aria-pressed", t ? "true" : "false"), t ? r.classList.add("stilo-toolbar__button--active") : r.classList.remove("stilo-toolbar__button--active");
+					} else r.removeAttribute("aria-pressed"), r.classList.remove("stilo-toolbar__button--active");
+					i.isEnabled ? i.isEnabled(e) ? r.removeAttribute("aria-disabled") : r.setAttribute("aria-disabled", "true") : r.removeAttribute("aria-disabled");
+				}
+			}
+		}
+	}
+	w();
+	let T = () => {
+		x || (b ||= requestAnimationFrame(() => {
+			x || (b = 0, w());
+		}));
+	};
+	e.on("transaction", T);
+	let E = (e) => {
+		x || e.target.closest(".stilo-char-picker, .stilo-color-picker") || e.preventDefault();
+	};
+	c.addEventListener("mousedown", E);
+	let D = (t) => {
+		if (x) return;
+		let n = t.target.closest("[data-item]");
+		if (!n) return;
+		let r = u.get(n);
+		r && r.kind === "button" && (!r.isEnabled || r.isEnabled(e)) && (e.focus(), r.run(e, v));
+	};
+	c.addEventListener("click", D);
+	let O = (t) => {
+		if (x) return;
+		let n = t.target.closest("[data-item]");
+		if (!n) return;
+		let r = l.indexOf(n);
+		if (r !== -1) switch (t.key) {
+			case "ArrowRight": {
+				t.preventDefault();
+				let e = (r + 1) % l.length;
+				C(e), l[e].focus();
+				break;
+			}
+			case "ArrowLeft": {
+				t.preventDefault();
+				let e = (r - 1 + l.length) % l.length;
+				C(e), l[e].focus();
+				break;
+			}
+			case "Home":
+				t.preventDefault(), C(0), l[0].focus();
+				break;
+			case "End": {
+				t.preventDefault();
+				let e = l.length - 1;
+				C(e), l[e].focus();
+				break;
+			}
+			case "Escape": t.preventDefault(), e.focus();
+		}
+	};
+	c.addEventListener("keydown", O);
+	let M = (t) => {
+		if (x) return;
+		let n = o ? t.metaKey : t.ctrlKey;
+		m && n && !t.altKey && !t.shiftKey && t.key.toLowerCase() === "k" ? (t.preventDefault(), m.open()) : t.key === "F10" && t.altKey && (t.preventDefault(), e.focus(), S >= 0 && S < l.length && l[S].focus());
+	};
+	e.view.dom.addEventListener("keydown", M);
+	let N = () => {
+		P();
+	};
+	e.on("destroy", N);
+	function P() {
+		if (!x) {
+			x = !0, b &&= (cancelAnimationFrame(b), 0), e.off("transaction", T), e.off("destroy", N), c.removeEventListener("mousedown", E), c.removeEventListener("click", D), c.removeEventListener("keydown", O), e.view.dom.removeEventListener("keydown", M);
+			for (let e of d.values()) e.destroy();
+			for (let e of f) e.destroy();
+			m?.destroy(), h?.destroy(), _?.destroy(), n.contains(c) && n.removeChild(c), a && (y?.disconnect(), n.classList.remove("stilo-toolbar-host"), e.view.setProps({ scrollMargin: void 0 }));
+		}
+	}
+	return {
+		get element() {
+			return c;
+		},
+		update: w,
+		destroy: P
+	};
+}
+//#endregion
+export { V as DEFAULT_ITEMS, z as DEFAULT_PALETTE, B as DEFAULT_TOOLBAR, oe as createToolbar, j as en, A as formatShortcut, G as headingDropdown, W as highlightButton, M as it, U as textColorButton };