@damiro/stylo 0.17.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-B07wRexo.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, hostExtensions: m }) {
-	let [h, y] = _(null), C = g(f);
-	C.current = f;
-	let E = g((e) => {
-		y(e), C.current?.(e);
-	}).current, D = g(p);
-	D.current = p;
-	let [O] = _(() => p ? new i() : null), k = v(O?.subscribe ?? w, O?.getSnapshot ?? T), [A] = _(() => O ? [b.of(O.panel)] : []), j = 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,41 +24,41 @@ function E({ value: e, onChange: t, readOnly: r, placeholder: a, codeLanguages:
 		tagSource: l,
 		onResolveError: u,
 		onSave: d,
-		onViewChange: E,
+		onViewChange: x,
 		hostExtensions: m,
 		extensions: A
 	});
-	return /* @__PURE__ */ S("div", {
+	return /* @__PURE__ */ T("div", {
 		className: n.source,
 		ref: j,
-		children: k && D.current && x(D.current({ view: h }), k)
+		children: k && w.current && C(w.current({ view: h }), k)
 	});
 }
 //#endregion
 //#region src/inplace/lazyInPlace.ts
-var D = f(async () => ({ default: (await import("./InPlaceView-CRb5AkfX.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, hostExtensions: x }) {
-	let [w, T] = _(null), D = g(null), k = g(!1);
-	return p(() => {
-		let e = w?.scrollDOM, t = D.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 (k.current) return;
+			if (D.current) return;
 			let n = e.scrollHeight - e.clientHeight;
-			n <= 0 || (k.current = !0, t.scrollTop = e.scrollTop / n * (t.scrollHeight - t.clientHeight), requestAnimationFrame(() => {
-				k.current = !1;
+			n <= 0 || (D.current = !0, t.scrollTop = e.scrollTop / n * (t.scrollHeight - t.clientHeight), requestAnimationFrame(() => {
+				D.current = !1;
 			}));
 		}, r = () => n(e, t), i = () => n(t, e);
 		return e.addEventListener("scroll", r, { passive: !0 }), t.addEventListener("scroll", i, { passive: !0 }), () => {
 			e.removeEventListener("scroll", r), t.removeEventListener("scroll", i);
 		};
-	}, [w]), /* @__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,
@@ -67,29 +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) => {
-					T(e), y?.(e);
+					C(e), _?.(e);
 				},
 				canvasHeader: b,
 				hostExtensions: x
 			})
-		}), /* @__PURE__ */ S("div", {
+		}), /* @__PURE__ */ T("div", {
 			className: n.splitPane,
-			ref: D,
-			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
 				})
 			})
@@ -98,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;
@@ -110,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);
@@ -125,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 !== "|") {
@@ -137,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 {
@@ -159,105 +281,206 @@ 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, extensions: z }, B) {
-	let V = a === "preview" || a === "split" || a === "in-place" ? a : "source", [H, U] = _(null), W = V === "preview" ? null : c(M), G = M && typeof M == "object" ? M : void 0, K = G?.render, q = G?.sticky === "top" ? "top" : G?.sticky ? "bottom" : !1, J = G?.stickyVisibility, Y = g(s);
+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 = g(j);
-	X.current = j;
-	let Z = g((e, t) => {
+	let X = v(D);
+	X.current = D;
+	let Z = v((e, t) => {
 		X.current?.(e, t);
-	}).current, Q = g(A);
-	Q.current = A;
-	let $ = g(void 0);
-	p(() => {
+	}).current, Q = v(w);
+	Q.current = w;
+	let $ = v(void 0);
+	m(() => {
 		let t = e(r)?.frontmatter ?? null;
 		t !== $.current && ($.current = t, Y.current?.(t));
-	}, [r]), m(B, () => ({
-		focus: () => H?.focus(),
-		getView: () => H,
+	}, [r]), h(z, () => ({
+		focus: () => V?.focus(),
+		getView: () => V,
 		insertAtCursor: (e) => {
-			H && (H.dispatch(H.state.replaceSelection(e)), H.focus());
+			V && (V.dispatch(V.state.replaceSelection(e)), V.focus());
 		},
 		scrollToHeading: (e) => {
-			if (!H) return !1;
-			let t = e.trim().toLowerCase(), { doc: n } = H.state;
+			if (!V) return !1;
+			let t = e.trim().toLowerCase(), { doc: n } = V.state;
 			for (let e = 1; e <= n.lines; e++) {
 				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 H.dispatch({
+				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" })
-				}), H.focus(), !0;
+					effects: x.scrollIntoView(r.from, { y: "start" })
+				}), V.focus(), !0;
 			}
 			return !1;
 		},
@@ -265,107 +488,109 @@ var F = d(function({ value: r, onChange: i, mode: a = "in-place", onSave: o, onF
 			let n = Q.current;
 			n && t(n, e);
 		}
-	}), [H]);
+	}), [V]);
 	let ee = [
 		n.root,
-		q === "bottom" && n.stickyToolbarRootBottom,
-		q === "top" && n.stickyToolbarRootTop,
+		K === "bottom" && n.stickyToolbarRootBottom,
+		K === "top" && n.stickyToolbarRootTop,
 		"stylo",
-		v
+		g
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ C("div", {
+	return /* @__PURE__ */ E("div", {
 		className: ee,
-		"data-stylo-mode": V,
+		"data-stylo-mode": B,
 		children: [
-			W && (() => {
-				let e = /* @__PURE__ */ S(P, {
-					view: H,
-					items: W,
+			U && (() => {
+				let e = /* @__PURE__ */ T(J, {
+					view: V,
+					items: U,
 					icons: N,
 					disabled: f,
-					sticky: q,
-					stickyVisibility: J
+					sticky: K,
+					stickyVisibility: q,
+					overflow: W?.overflow,
+					overflowIcon: W?.overflowIcon
 				});
-				return K ? K(e, { view: H }) : e;
+				return G ? G(e, { view: V }) : e;
 			})(),
-			V === "source" && /* @__PURE__ */ S(E, {
+			B === "source" && /* @__PURE__ */ T(k, {
 				value: r,
 				onChange: i,
 				readOnly: f,
-				placeholder: h,
-				codeLanguages: x,
-				wikiLinkSource: w,
-				tagSource: T,
+				placeholder: p,
+				codeLanguages: b,
+				wikiLinkSource: S,
+				tagSource: C,
 				onResolveError: Z,
 				onSave: o,
-				onViewChange: U,
-				canvasHeader: R,
-				hostExtensions: z
+				onViewChange: H,
+				canvasHeader: L,
+				hostExtensions: R
 			}),
-			V === "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,
+					embedSource: w,
 					onResolveError: Z,
-					frontmatter: F,
-					codeLanguages: x,
-					softBreaks: I,
-					onTaskToggle: L
+					frontmatter: P,
+					codeLanguages: b,
+					softBreaks: F,
+					onTaskToggle: I
 				})
 			}),
-			V === "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,
+				placeholder: p,
+				codeLanguages: b,
+				wikiLinkSource: S,
+				tagSource: C,
+				embedSource: w,
 				onResolveError: Z,
-				frontmatter: F,
-				softBreaks: I,
-				onTaskToggle: L,
+				frontmatter: P,
+				softBreaks: F,
+				onTaskToggle: I,
 				onSave: o,
-				onViewChange: U,
-				canvasHeader: R,
-				hostExtensions: z
+				onViewChange: H,
+				canvasHeader: L,
+				hostExtensions: R
 			}),
-			V === "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,
+					inPlace: _,
+					codeLanguages: b,
+					wikiLinkSource: S,
+					tagSource: C,
+					embedSource: w,
 					onResolveError: Z,
 					onSave: o,
-					onViewChange: U,
-					canvasHeader: R,
-					hostExtensions: z
+					onViewChange: H,
+					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