@damiro/stylo 0.16.0 → 0.18.0

package/dist/stylo.js

@@ -1,20 +1,20 @@
-import { c as e, t, u as n } from "./embed-cache-CcBfVrc9.js";
-import { g as r, k as i, l as a, n as o, t as s } from "./useCodeMirror-TAWSJQiZ.js";
+import { c as e, t, u as n } from "./embed-cache-BU9Smn-h.js";
+import { g as r, k as i, l as a, n as o, t as s } from "./useCodeMirror-Fn6qEfMx.js";
 import { n as c, r as l } from "./config-DTBxVhtH.js";
-import { Suspense as u, forwardRef as d, lazy as f, useEffect as p, useImperativeHandle as m, useReducer as h, useRef as g, useState as _, useSyncExternalStore as v } from "react";
-import { EditorView as y, showPanel as b } from "@codemirror/view";
-import { createPortal as x } from "react-dom";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { Suspense as u, forwardRef as d, lazy as f, useCallback as p, useEffect as m, useImperativeHandle as h, useLayoutEffect as g, useReducer as _, useRef as v, useState as y, useSyncExternalStore as b } from "react";
+import { EditorView as x, showPanel as S } from "@codemirror/view";
+import { createPortal as C } from "react-dom";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
 //#region src/editor/SourceView.tsx
-var w = () => () => {}, T = () => null;
-function E({ value: e, onChange: t, readOnly: r, placeholder: a, codeLanguages: o, wikiLinkSource: c, tagSource: l, onResolveError: u, onSave: d, onViewChange: f, canvasHeader: p }) {
-	let [m, h] = _(null), y = g(f);
-	y.current = f;
-	let C = g((e) => {
-		h(e), y.current?.(e);
-	}).current, E = g(p);
-	E.current = p;
-	let [D] = _(() => p ? new i() : null), O = v(D?.subscribe ?? w, D?.getSnapshot ?? T), [k] = _(() => D ? [b.of(D.panel)] : []), A = s({
+var D = () => () => {}, O = () => null;
+function k({ value: e, onChange: t, readOnly: r, placeholder: a, codeLanguages: o, wikiLinkSource: c, tagSource: l, onResolveError: u, onSave: d, onViewChange: f, canvasHeader: p, hostExtensions: m }) {
+	let [h, g] = y(null), _ = v(f);
+	_.current = f;
+	let x = v((e) => {
+		g(e), _.current?.(e);
+	}).current, w = v(p);
+	w.current = p;
+	let [E] = y(() => p ? new i() : null), k = b(E?.subscribe ?? D, E?.getSnapshot ?? O), [A] = y(() => E ? [S.of(E.panel)] : []), j = s({
 		value: e,
 		onChange: t,
 		readOnly: r,
@@ -24,24 +24,25 @@ function E({ value: e, onChange: t, readOnly: r, placeholder: a, codeLanguages:
 		tagSource: l,
 		onResolveError: u,
 		onSave: d,
-		onViewChange: C,
-		extensions: k
+		onViewChange: x,
+		hostExtensions: m,
+		extensions: A
 	});
-	return /* @__PURE__ */ S("div", {
+	return /* @__PURE__ */ T("div", {
 		className: n.source,
-		ref: A,
-		children: O && E.current && x(E.current({ view: m }), O)
+		ref: j,
+		children: k && w.current && C(w.current({ view: h }), k)
 	});
 }
 //#endregion
 //#region src/inplace/lazyInPlace.ts
-var D = f(async () => ({ default: (await import("./InPlaceView-CC5hZCcI.js")).InPlaceView })), O = f(async () => ({ default: (await import("./Preview-5lm2uUVj.js")).Preview }));
+var A = f(async () => ({ default: (await import("./InPlaceView-Z8c9cqW8.js")).InPlaceView })), j = f(async () => ({ default: (await import("./Preview-BRA_R_Gp.js")).Preview }));
 //#endregion
 //#region src/SplitView.tsx
-function k({ value: e, onChange: t, onWikiLinkClick: r, readOnly: i, placeholder: a, codeLanguages: o, wikiLinkSource: s, tagSource: c, embedSource: l, onResolveError: d, frontmatter: f, softBreaks: m, onTaskToggle: h, onSave: v, onViewChange: y, canvasHeader: b }) {
-	let [x, w] = _(null), T = g(null), D = g(!1);
-	return p(() => {
-		let e = x?.scrollDOM, t = T.current;
+function M({ value: e, onChange: t, onWikiLinkClick: r, readOnly: i, placeholder: a, codeLanguages: o, wikiLinkSource: s, tagSource: c, embedSource: l, onResolveError: d, frontmatter: f, softBreaks: p, onTaskToggle: h, onSave: g, onViewChange: _, canvasHeader: b, hostExtensions: x }) {
+	let [S, C] = y(null), w = v(null), D = v(!1);
+	return m(() => {
+		let e = S?.scrollDOM, t = w.current;
 		if (!e || !t) return;
 		let n = (e, t) => {
 			if (D.current) return;
@@ -53,11 +54,11 @@ function k({ value: e, onChange: t, onWikiLinkClick: r, readOnly: i, placeholder
 		return e.addEventListener("scroll", r, { passive: !0 }), t.addEventListener("scroll", i, { passive: !0 }), () => {
 			e.removeEventListener("scroll", r), t.removeEventListener("scroll", i);
 		};
-	}, [x]), /* @__PURE__ */ C("div", {
+	}, [S]), /* @__PURE__ */ E("div", {
 		className: n.split,
-		children: [/* @__PURE__ */ S("div", {
+		children: [/* @__PURE__ */ T("div", {
 			className: n.splitPane,
-			children: /* @__PURE__ */ S(E, {
+			children: /* @__PURE__ */ T(k, {
 				value: e,
 				onChange: t,
 				readOnly: i,
@@ -66,28 +67,29 @@ function k({ value: e, onChange: t, onWikiLinkClick: r, readOnly: i, placeholder
 				wikiLinkSource: s,
 				tagSource: c,
 				onResolveError: d,
-				onSave: v,
+				onSave: g,
 				onViewChange: (e) => {
-					w(e), y?.(e);
+					C(e), _?.(e);
 				},
-				canvasHeader: b
+				canvasHeader: b,
+				hostExtensions: x
 			})
-		}), /* @__PURE__ */ S("div", {
+		}), /* @__PURE__ */ T("div", {
 			className: n.splitPane,
-			ref: T,
-			children: /* @__PURE__ */ S(u, {
-				fallback: /* @__PURE__ */ S("div", {
+			ref: w,
+			children: /* @__PURE__ */ T(u, {
+				fallback: /* @__PURE__ */ T("div", {
 					className: n.preview,
 					"aria-busy": "true"
 				}),
-				children: /* @__PURE__ */ S(O, {
+				children: /* @__PURE__ */ T(j, {
 					value: e,
 					onWikiLinkClick: r,
 					embedSource: l,
 					onResolveError: d,
 					frontmatter: f,
 					codeLanguages: o,
-					softBreaks: m,
+					softBreaks: p,
 					onTaskToggle: h
 				})
 			})
@@ -96,8 +98,8 @@ function k({ value: e, onChange: t, onWikiLinkClick: r, readOnly: i, placeholder
 }
 //#endregion
 //#region src/toolbar/floating-watchdog.ts
-function A(e, t) {
-	p(() => {
+function N(e, t) {
+	m(() => {
 		if (!t) return;
 		let n = 0, r = !1, i = () => {
 			let t = e.current;
@@ -108,9 +110,9 @@ function A(e, t) {
 }
 //#endregion
 //#region src/toolbar/keyboard-inset.ts
-function j(e) {
-	let [t, n] = _(0);
-	return p(() => {
+function P(e) {
+	let [t, n] = y(0);
+	return m(() => {
 		let t = typeof window > "u" ? null : window.visualViewport;
 		if (!e || !t) {
 			n(0);
@@ -123,8 +125,130 @@ function j(e) {
 	}, [e]), t;
 }
 //#endregion
-//#region src/toolbar/Toolbar.tsx
-function M(e) {
+//#region src/toolbar/OverflowMenu.tsx
+var F = /* @__PURE__ */ E("svg", {
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	stroke: "none",
+	children: [
+		/* @__PURE__ */ T("circle", {
+			cx: "5",
+			cy: "12",
+			r: "1.8"
+		}),
+		/* @__PURE__ */ T("circle", {
+			cx: "12",
+			cy: "12",
+			r: "1.8"
+		}),
+		/* @__PURE__ */ T("circle", {
+			cx: "19",
+			cy: "12",
+			r: "1.8"
+		})
+	]
+}), I = (e) => e ?? F;
+function L({ entries: e, icon: t }) {
+	let [r, i] = y(!1), a = v(null), o = v(null);
+	m(() => {
+		if (!r) return;
+		let e = (e) => {
+			a.current?.contains(e.target) || i(!1);
+		}, t = (e) => {
+			if (e.key !== "Escape") return;
+			let t = a.current?.contains(document.activeElement);
+			i(!1), t && o.current?.focus();
+		};
+		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		};
+	}, [r]);
+	let s = () => Array.from(a.current?.querySelectorAll("[role^=menuitem]:enabled") ?? []);
+	return /* @__PURE__ */ E("div", {
+		ref: a,
+		className: n.toolbarMore,
+		"data-stylo-overflow": "",
+		onKeyDown: (e) => {
+			if ((e.key === "ArrowDown" || e.key === "ArrowUp") && r) {
+				e.preventDefault();
+				let t = s(), n = t.indexOf(document.activeElement), r = e.key === "ArrowDown";
+				t[n < 0 ? r ? 0 : t.length - 1 : (n + (r ? 1 : -1) + t.length) % t.length]?.focus();
+			}
+		},
+		onBlur: (e) => {
+			r && !a.current?.contains(e.relatedTarget) && i(!1);
+		},
+		children: [/* @__PURE__ */ T("button", {
+			ref: o,
+			type: "button",
+			className: n.toolbarButton,
+			title: "More",
+			"aria-label": "More",
+			"aria-haspopup": "menu",
+			"aria-expanded": r,
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: (e) => {
+				let t = !r;
+				i(t), t && e.detail === 0 && requestAnimationFrame(() => s()[0]?.focus());
+			},
+			children: I(t)
+		}), r && /* @__PURE__ */ T("div", {
+			className: n.toolbarMenu,
+			role: "menu",
+			"data-stylo-overflow-menu": "",
+			children: e.map((e, t) => e === "|" ? /* @__PURE__ */ T("div", {
+				className: n.toolbarMenuDivider,
+				role: "separator"
+			}, `d-${t}`) : /* @__PURE__ */ E("button", {
+				type: "button",
+				role: e.active === void 0 ? "menuitem" : "menuitemcheckbox",
+				"aria-checked": e.active,
+				"data-active": e.active ? "" : void 0,
+				className: n.toolbarMenuItem,
+				"data-command": e.key,
+				disabled: e.disabled,
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => {
+					a.current?.contains(document.activeElement) && o.current?.focus(), i(!1), e.run();
+				},
+				children: [e.icon, /* @__PURE__ */ T("span", { children: e.title })]
+			}, e.key))
+		})]
+	});
+}
+//#endregion
+//#region src/toolbar/overflow-fit.ts
+function R(e) {
+	let t = [];
+	for (let n of e) n.sep && (t.length === 0 || t[t.length - 1].sep) || t.push(n);
+	for (; t.length && t[t.length - 1].sep;) t.pop();
+	return t;
+}
+function z(e) {
+	let t = e.findIndex((e) => e.folded), n = e.map((e) => e.folded).lastIndexOf(!0);
+	return R(e.filter((e, r) => e.folded || e.sep && r > t && r < n));
+}
+function B(e, t, n, r = 0) {
+	let i = e.map(() => !1), a = () => {
+		let a = R(e.filter((e, t) => !i[t]));
+		return a.reduce((e, t) => e + t.width, 0) + r * Math.max(0, a.length - 1) + (i.some(Boolean) ? n + (a.length ? r : 0) : 0) <= t;
+	}, o = (t) => {
+		for (let n = e.length - 1; n >= 0; n--) {
+			let r = e[n];
+			if (!i[n] && !r.sep && r.pinned === t) return n;
+		}
+		return -1;
+	};
+	for (; !a();) {
+		let e = o(!1) >= 0 ? o(!1) : o(!0);
+		if (e < 0) break;
+		i[e] = !0;
+	}
+	return i;
+}
+//#endregion
+//#region src/toolbar/toolbar-model.ts
+function V(e) {
 	let t = [], n = [];
 	for (let r of e) {
 		if (r !== "|") {
@@ -135,7 +259,7 @@ function M(e) {
 	}
 	return n.length && t.push(n), t;
 }
-function N(e, t) {
+function H(e, t) {
 	if (typeof e != "string") {
 		let { id: t, icon: n, title: r, run: i, isActive: a, disabled: o } = e;
 		return {
@@ -157,91 +281,192 @@ function N(e, t) {
 		disabled: n.disabled
 	} : null;
 }
-function P({ view: e, items: t, icons: i, disabled: s, sticky: c, stickyVisibility: l }) {
-	let [, u] = h((e) => e + 1, 0), [d, f] = _(!1), m = j(c === "bottom"), v = g(null);
-	A(v, c === "top"), p(() => {
+//#endregion
+//#region src/toolbar/use-toolbar-overflow.ts
+var U = (e) => parseFloat(e) || 0;
+function W(e) {
+	let t = getComputedStyle(e);
+	return e.getBoundingClientRect().width + U(t.marginLeft) + U(t.marginRight);
+}
+function G(e, t) {
+	let [n, r] = y([]), i = t.map((e) => `${e.key}${e.sep ? "|" : ""}${e.pinned ? "!" : ""}`).join("\0"), a = p(() => {
+		let n = e.current, i = n?.closest("[role=toolbar]");
+		if (!i || !n) return;
+		let a = Array.from(n.children), o = a.pop();
+		if (!o || a.length !== t.length) return;
+		let s = getComputedStyle(i), c = i.clientWidth - U(s.paddingLeft) - U(s.paddingRight), l = B(t.map((e, t) => ({
+			sep: e.sep,
+			pinned: e.pinned,
+			width: W(a[t])
+		})), c, W(o), U(getComputedStyle(n).columnGap));
+		r((e) => e.length === l.length && e.every((e, t) => e === l[t]) ? e : l);
+	}, [e, i]);
+	return g(() => {
+		let t = e.current, n = t?.closest("[role=toolbar]");
+		if (!n || !t || (a(), typeof ResizeObserver > "u")) return;
+		let r = new ResizeObserver(a);
+		return r.observe(n), r.observe(t), () => r.disconnect();
+	}, [e, a]), n;
+}
+//#endregion
+//#region src/toolbar/OverflowBar.tsx
+var K = () => /* @__PURE__ */ T("span", {
+	className: n.toolbarSep,
+	"aria-hidden": "true"
+});
+function q({ items: e, icons: t, overflowIcon: r, resolve: i, run: a, renderItem: o }) {
+	let s = v(null), c = e.filter((e) => e === "|" || H(e, t) !== null), l = G(s, c.map((e, t) => ({
+		key: e === "|" ? `sep-${t}` : typeof e == "string" ? e : e.id,
+		sep: e === "|",
+		pinned: typeof e == "object" && !!e.pinned
+	}))), u = c.map((e, t) => ({
+		it: e,
+		sep: e === "|",
+		folded: !!l[t]
+	})), d = R(u.filter((e) => !e.folded)), f = z(u), p = f.map((e) => {
+		let t = e.it === "|" ? null : i(e.it);
+		if (!t) return "|";
+		let { btn: n, off: r, active: o } = t;
+		return {
+			key: n.key,
+			title: n.title,
+			icon: n.icon,
+			disabled: r,
+			active: n.isActive ? o : void 0,
+			run: () => a(n)
+		};
+	});
+	return /* @__PURE__ */ E(w, { children: [
+		d.map((e, t) => e.it === "|" ? /* @__PURE__ */ T(K, {}, `sep-${t}`) : o(e.it)),
+		f.length > 0 && /* @__PURE__ */ T(L, {
+			entries: p,
+			icon: r
+		}),
+		/* @__PURE__ */ T("div", {
+			className: n.toolbarMeasureClip,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ E("div", {
+				ref: s,
+				className: n.toolbarMeasure,
+				children: [c.map((e, r) => e === "|" ? /* @__PURE__ */ T(K, {}, r) : /* @__PURE__ */ T("button", {
+					type: "button",
+					tabIndex: -1,
+					className: n.toolbarButton,
+					children: H(e, t).icon
+				}, r)), /* @__PURE__ */ T("button", {
+					type: "button",
+					tabIndex: -1,
+					className: n.toolbarButton,
+					children: I(r)
+				})]
+			})
+		})
+	] });
+}
+//#endregion
+//#region src/toolbar/Toolbar.tsx
+function J({ view: e, items: t, icons: i, disabled: s, sticky: c, stickyVisibility: l, overflow: u, overflowIcon: d }) {
+	let [, f] = _((e) => e + 1, 0), [p, h] = y(!1), g = P(c === "bottom"), b = v(null);
+	N(b, c === "top"), m(() => {
 		if (!e) return;
 		let t = e.contentDOM;
-		f(e.hasFocus);
+		h(e.hasFocus);
 		let n = () => {
-			f(!0), u();
+			h(!0), f();
 		}, r = () => {
-			f(!1), u();
+			h(!1), f();
 		}, i = [
 			"keyup",
 			"mouseup",
 			"input"
 		];
-		for (let e of i) t.addEventListener(e, u);
+		for (let e of i) t.addEventListener(e, f);
 		return t.addEventListener("focus", n), t.addEventListener("blur", r), () => {
-			for (let e of i) t.removeEventListener(e, u);
+			for (let e of i) t.removeEventListener(e, f);
 			t.removeEventListener("focus", n), t.removeEventListener("blur", r);
 		};
 	}, [e]);
-	let y = !!c && l === "dynamic" && !d, b = e ? !!r(e) : !1, x = [
+	let x = !!c && l === "dynamic" && !p, S = e ? !!r(e) : !1, C = u === "menu", w = [
 		n.toolbar,
 		c && n.toolbarSticky,
 		c === "top" && n.toolbarStickyTop,
 		c === "bottom" && n.toolbarStickyBottom,
-		y && n.toolbarStickyHidden
-	].filter(Boolean).join(" "), C = c === "bottom" ? { transform: `translateY(-${m}px)` } : void 0;
-	return /* @__PURE__ */ S("div", {
-		ref: v,
-		className: x,
+		x && n.toolbarStickyHidden,
+		C && n.toolbarOverflow
+	].filter(Boolean).join(" "), E = c === "bottom" ? { transform: `translateY(-${g}px)` } : void 0, D = (t) => {
+		let n = H(t, i);
+		if (!n) return null;
+		let r = typeof t == "string" ? o[t] : void 0, c = e ? r ? a(e.state, r, S) : {
+			disabled: !!n.disabled?.(e.state),
+			active: !!n.isActive?.(e.state)
+		} : {
+			disabled: !0,
+			active: !1
+		}, l = !!(s || !e || c.disabled);
+		return {
+			btn: n,
+			off: l,
+			active: !l && c.active
+		};
+	}, O = (t) => {
+		e && (t.run(e), f());
+	}, k = (e) => {
+		let t = D(e);
+		if (!t) return null;
+		let { btn: r, off: i, active: a } = t;
+		return /* @__PURE__ */ T("button", {
+			type: "button",
+			className: n.toolbarButton,
+			"data-command": r.key,
+			title: r.title,
+			"aria-label": r.title,
+			"aria-pressed": r.isActive ? a : void 0,
+			"data-active": a ? "" : void 0,
+			disabled: i,
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: () => O(r),
+			children: r.icon
+		}, r.key);
+	}, A = C ? /* @__PURE__ */ T(q, {
+		items: t,
+		icons: i,
+		overflowIcon: d,
+		resolve: D,
+		run: O,
+		renderItem: k
+	}) : V(t).map((e, t) => e === "|" ? /* @__PURE__ */ T("span", {
+		className: n.toolbarSep,
+		"aria-hidden": "true"
+	}, `sep-${t}`) : /* @__PURE__ */ T("div", {
+		className: n.toolbarGroup,
+		children: e.map(k)
+	}, `group-${t}`));
+	return /* @__PURE__ */ T("div", {
+		ref: b,
+		className: w,
 		role: "toolbar",
 		"aria-label": "Formatting",
-		"aria-hidden": y || void 0,
-		style: C,
-		children: M(t).map((t, r) => t === "|" ? /* @__PURE__ */ S("span", {
-			className: n.toolbarSep,
-			"aria-hidden": "true"
-		}, `sep-${r}`) : /* @__PURE__ */ S("div", {
-			className: n.toolbarGroup,
-			children: t.map((t) => {
-				let r = N(t, i);
-				if (!r) return null;
-				let c = typeof t == "string" ? o[t] : void 0, l = e ? c ? a(e.state, c, b) : {
-					disabled: !!r.disabled?.(e.state),
-					active: !!r.isActive?.(e.state)
-				} : {
-					disabled: !0,
-					active: !1
-				}, d = s || !e || l.disabled, f = !d && l.active;
-				return /* @__PURE__ */ S("button", {
-					type: "button",
-					className: n.toolbarButton,
-					"data-command": r.key,
-					title: r.title,
-					"aria-label": r.title,
-					"aria-pressed": r.isActive ? f : void 0,
-					"data-active": f ? "" : void 0,
-					disabled: d,
-					onMouseDown: (e) => e.preventDefault(),
-					onClick: () => {
-						e && (r.run(e), u());
-					},
-					children: r.icon
-				}, r.key);
-			})
-		}, `group-${r}`))
+		"aria-hidden": x || void 0,
+		style: E,
+		children: A
 	});
 }
 //#endregion
 //#region src/Stylo.tsx
-var F = d(function({ value: r, onChange: i, mode: a = "in-place", onSave: o, onFrontmatter: s, onWikiLinkClick: l, onLinkClick: d, readOnly: f, placeholder: h, className: v, inPlace: b, codeLanguages: x, wikiLinkSource: w, tagSource: T, embedSource: A, onResolveError: j, toolbar: M, icons: N, frontmatter: F, softBreaks: I, onTaskToggle: L, canvasHeader: R }, z) {
-	let B = a === "preview" || a === "split" || a === "in-place" ? a : "source", [V, H] = _(null), U = B === "preview" ? null : c(M), W = M && typeof M == "object" ? M : void 0, G = W?.render, K = W?.sticky === "top" ? "top" : W?.sticky ? "bottom" : !1, q = W?.stickyVisibility, J = g(s);
-	J.current = s;
-	let Y = g(j);
-	Y.current = j;
-	let X = g((e, t) => {
-		Y.current?.(e, t);
-	}).current, Z = g(A);
-	Z.current = A;
-	let Q = g(void 0);
-	p(() => {
+var Y = d(function({ value: r, onChange: i, mode: a = "in-place", onSave: o, onFrontmatter: s, onWikiLinkClick: l, onLinkClick: d, readOnly: f, placeholder: p, className: g, inPlace: _, codeLanguages: b, wikiLinkSource: S, tagSource: C, embedSource: w, onResolveError: D, toolbar: O, icons: N, frontmatter: P, softBreaks: F, onTaskToggle: I, canvasHeader: L, extensions: R }, z) {
+	let B = a === "preview" || a === "split" || a === "in-place" ? a : "source", [V, H] = y(null), U = B === "preview" ? null : c(O), W = O && typeof O == "object" ? O : void 0, G = W?.render, K = W?.sticky === "top" ? "top" : W?.sticky ? "bottom" : !1, q = W?.stickyVisibility, Y = v(s);
+	Y.current = s;
+	let X = v(D);
+	X.current = D;
+	let Z = v((e, t) => {
+		X.current?.(e, t);
+	}).current, Q = v(w);
+	Q.current = w;
+	let $ = v(void 0);
+	m(() => {
 		let t = e(r)?.frontmatter ?? null;
-		t !== Q.current && (Q.current = t, J.current?.(t));
-	}, [r]), m(z, () => ({
+		t !== $.current && ($.current = t, Y.current?.(t));
+	}, [r]), h(z, () => ({
 		focus: () => V?.focus(),
 		getView: () => V,
 		insertAtCursor: (e) => {
@@ -254,113 +479,118 @@ var F = d(function({ value: r, onChange: i, mode: a = "in-place", onSave: o, onF
 				let r = n.line(e), i = /^ {0,3}#{1,6}[ \t]+(.*?)(?:[ \t]+#+)?[ \t]*$/.exec(r.text);
 				if (!(!i || i[1] === void 0) && i[1].trim().toLowerCase() === t) return V.dispatch({
 					selection: { anchor: r.from },
-					effects: y.scrollIntoView(r.from, { y: "start" })
+					effects: x.scrollIntoView(r.from, { y: "start" })
 				}), V.focus(), !0;
 			}
 			return !1;
 		},
 		invalidateEmbed: (e) => {
-			let n = Z.current;
+			let n = Q.current;
 			n && t(n, e);
 		}
 	}), [V]);
-	let $ = [
+	let ee = [
 		n.root,
 		K === "bottom" && n.stickyToolbarRootBottom,
 		K === "top" && n.stickyToolbarRootTop,
 		"stylo",
-		v
+		g
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ C("div", {
-		className: $,
+	return /* @__PURE__ */ E("div", {
+		className: ee,
 		"data-stylo-mode": B,
 		children: [
 			U && (() => {
-				let e = /* @__PURE__ */ S(P, {
+				let e = /* @__PURE__ */ T(J, {
 					view: V,
 					items: U,
 					icons: N,
 					disabled: f,
 					sticky: K,
-					stickyVisibility: q
+					stickyVisibility: q,
+					overflow: W?.overflow,
+					overflowIcon: W?.overflowIcon
 				});
 				return G ? G(e, { view: V }) : e;
 			})(),
-			B === "source" && /* @__PURE__ */ S(E, {
+			B === "source" && /* @__PURE__ */ T(k, {
 				value: r,
 				onChange: i,
 				readOnly: f,
-				placeholder: h,
-				codeLanguages: x,
-				wikiLinkSource: w,
-				tagSource: T,
-				onResolveError: X,
+				placeholder: p,
+				codeLanguages: b,
+				wikiLinkSource: S,
+				tagSource: C,
+				onResolveError: Z,
 				onSave: o,
 				onViewChange: H,
-				canvasHeader: R
+				canvasHeader: L,
+				hostExtensions: R
 			}),
-			B === "preview" && /* @__PURE__ */ S(u, {
-				fallback: /* @__PURE__ */ S("div", {
+			B === "preview" && /* @__PURE__ */ T(u, {
+				fallback: /* @__PURE__ */ T("div", {
 					className: n.preview,
 					"aria-busy": "true"
 				}),
-				children: /* @__PURE__ */ S(O, {
+				children: /* @__PURE__ */ T(j, {
 					value: r,
 					onWikiLinkClick: l,
-					embedSource: A,
-					onResolveError: X,
-					frontmatter: F,
-					codeLanguages: x,
-					softBreaks: I,
-					onTaskToggle: L
+					embedSource: w,
+					onResolveError: Z,
+					frontmatter: P,
+					codeLanguages: b,
+					softBreaks: F,
+					onTaskToggle: I
 				})
 			}),
-			B === "split" && /* @__PURE__ */ S(k, {
+			B === "split" && /* @__PURE__ */ T(M, {
 				value: r,
 				onChange: i,
 				onWikiLinkClick: l,
 				readOnly: f,
-				placeholder: h,
-				codeLanguages: x,
-				wikiLinkSource: w,
-				tagSource: T,
-				embedSource: A,
-				onResolveError: X,
-				frontmatter: F,
-				softBreaks: I,
-				onTaskToggle: L,
+				placeholder: p,
+				codeLanguages: b,
+				wikiLinkSource: S,
+				tagSource: C,
+				embedSource: w,
+				onResolveError: Z,
+				frontmatter: P,
+				softBreaks: F,
+				onTaskToggle: I,
 				onSave: o,
 				onViewChange: H,
-				canvasHeader: R
+				canvasHeader: L,
+				hostExtensions: R
 			}),
-			B === "in-place" && /* @__PURE__ */ S(u, {
-				fallback: /* @__PURE__ */ S("div", {
+			B === "in-place" && /* @__PURE__ */ T(u, {
+				fallback: /* @__PURE__ */ T("div", {
 					className: n.inplace,
 					"aria-busy": "true"
 				}),
-				children: /* @__PURE__ */ S(D, {
+				children: /* @__PURE__ */ T(A, {
 					value: r,
 					onChange: i,
 					readOnly: f,
-					placeholder: h,
+					placeholder: p,
 					onWikiLinkClick: l,
 					onLinkClick: d,
-					inPlace: b,
-					codeLanguages: x,
-					wikiLinkSource: w,
-					tagSource: T,
-					embedSource: A,
-					onResolveError: X,
+					inPlace: _,
+					codeLanguages: b,
+					wikiLinkSource: S,
+					tagSource: C,
+					embedSource: w,
+					onResolveError: Z,
 					onSave: o,
 					onViewChange: H,
-					canvasHeader: R
+					canvasHeader: L,
+					hostExtensions: R
 				})
 			})
 		]
 	});
 });
-F.displayName = "Stylo";
+Y.displayName = "Stylo";
 //#endregion
-export { F as Stylo, e as splitFrontmatter };
+export { Y as Stylo, e as splitFrontmatter };
 
 //# sourceMappingURL=stylo.js.map