@eigenpal/docx-editor-vue 1.4.0 → 1.6.0

package/dist/{MenuBar-CbONA9-a.js → MenuBar-BLKoZqG3.js}

@@ -1,49 +1,50 @@
-import { d as e, p as t } from "./KeyboardShortcutsDialog-BbuDgglK.js";
+import { f as e, u as t } from "./KeyboardShortcutsDialog-OPAV0oVm.js";
 import { t as n } from "./_plugin-vue_export-helper-B52Kst-M.js";
-import { t as r } from "./useCommentSidebarItems-BHomCzpj.js";
+import { t as r } from "./useCommentSidebarItems-DXbF857R.js";
 import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, openBlock as v, reactive as y, ref as b, renderList as x, renderSlot as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, vModelSelect as E, vModelText as D, watch as O, withCtx as k, withDirectives as A, withKeys as j, withModifiers as M } from "vue";
 import { generateThemeTintShadeMatrix as N, resolveColor as P, resolveColorToHex as F, resolveHighlightColor as I } from "@eigenpal/docx-editor-core/utils";
 import { redoDepth as L, undoDepth as R } from "prosemirror-history";
 import { extractSelectionContext as ee } from "@eigenpal/docx-editor-core/prosemirror/plugins/selectionTracker";
 import { clearFormatting as z } from "@eigenpal/docx-editor-core/prosemirror/commands/formatting";
 import { normalizeFontFamilies as B } from "@eigenpal/docx-editor-core/utils/fontOptions";
-import { getTableContext as V } from "@eigenpal/docx-editor-core/prosemirror/extensions/nodes/TableExtension";
-import { formatDate as H, getAvatarColor as U, getCommentText as W, getInitials as G, truncateText as K } from "@eigenpal/docx-editor-core/utils/comments";
-import { resolveItemPositions as q } from "@eigenpal/docx-editor-core/plugin-api/resolveItemPositions";
-import { SIDEBAR_DOCUMENT_SHIFT as J } from "@eigenpal/docx-editor-core/utils/sidebarConstants";
-import { pixelsToTwips as te, twipsToPixels as Y } from "@eigenpal/docx-editor-core/utils/units";
+import { getStylePreviewProps as V, resolveParagraphStyleOptions as H } from "@eigenpal/docx-editor-core/utils/stylePreview";
+import { getTableContext as U } from "@eigenpal/docx-editor-core/prosemirror/extensions/nodes/TableExtension";
+import { formatDate as W, getAvatarColor as G, getCommentText as K, getInitials as q, truncateText as J } from "@eigenpal/docx-editor-core/utils/comments";
+import { resolveItemPositions as Y } from "@eigenpal/docx-editor-core/plugin-api/resolveItemPositions";
+import { SIDEBAR_DOCUMENT_SHIFT as X, SIDEBAR_WIDTH as te } from "@eigenpal/docx-editor-core/utils/sidebarConstants";
+import { pixelsToTwips as ne, twipsToPixels as re } from "@eigenpal/docx-editor-core/utils/units";
 //#region src/components/ui/ColorPicker.vue?vue&type=script&setup=true&lang.ts
-var ne = [
+var ie = [
 	"disabled",
 	"title",
 	"aria-label"
-], re = [
+], ae = [
 	"disabled",
 	"title",
 	"aria-label",
 	"aria-expanded"
-], X = [
+], oe = [
 	"disabled",
 	"title",
 	"aria-label",
 	"aria-expanded"
-], ie = { class: "docx-color-picker__button-stack" }, Z = ["aria-label"], ae = {
+], se = { class: "docx-color-picker__button-stack" }, Z = ["aria-label"], ce = {
 	key: 0,
 	class: "docx-color-picker__auto-icon docx-color-picker__auto-icon--none"
-}, oe = {
+}, le = {
 	key: 1,
 	class: "docx-color-picker__auto-icon docx-color-picker__auto-icon--auto"
-}, se = { class: "docx-color-picker__section-label" }, ce = { class: "docx-color-picker__grid" }, le = [
+}, ue = { class: "docx-color-picker__section-label" }, de = { class: "docx-color-picker__grid" }, fe = [
 	"title",
 	"aria-label",
 	"aria-selected",
 	"onClick"
-], ue = { class: "docx-color-picker__section-label" }, de = { class: "docx-color-picker__grid" }, fe = [
+], pe = { class: "docx-color-picker__section-label" }, me = { class: "docx-color-picker__grid" }, he = [
 	"title",
 	"aria-label",
 	"aria-selected",
 	"onClick"
-], pe = { class: "docx-color-picker__section-label" }, me = { class: "docx-color-picker__custom" }, he = ["onKeydown"], ge = ["disabled"], _e = /* @__PURE__ */ n(/* @__PURE__ */ f({
+], ge = { class: "docx-color-picker__section-label" }, _e = { class: "docx-color-picker__custom" }, ve = ["onKeydown"], ye = ["disabled"], be = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "ColorPicker",
 	props: {
 		mode: {},
@@ -66,7 +67,7 @@ var ne = [
 	},
 	emits: ["change"],
 	setup(n, { emit: r }) {
-		let o = n, f = r, { t: p } = e(), y = [
+		let o = n, f = r, { t: p } = t(), y = [
 			{
 				nameKey: "colorPicker.colors.darkRed",
 				hex: "C00000"
@@ -145,37 +146,37 @@ var ne = [
 				left: `${t.left}px`
 			};
 		}
-		function te() {
+		function Y() {
 			o.disabled || (L.value || J(), L.value = !L.value);
 		}
-		function Y(e, t = !0) {
+		function X(e, t = !0) {
 			t && (B.value = e), f("change", e), L.value = !1;
 		}
-		function _e() {
+		function te() {
 			o.disabled || f("change", B.value);
 		}
-		function ve(e) {
+		function ne(e) {
 			if (o.mode === "highlight") {
-				Y(e.hex);
+				X(e.hex);
 				return;
 			}
 			let t = {
 				themeColor: e.themeSlot,
 				rgb: e.hex
 			};
-			e.tint && (t.themeTint = e.tint), e.shade && (t.themeShade = e.shade), Y(t);
+			e.tint && (t.themeTint = e.tint), e.shade && (t.themeShade = e.shade), X(t);
 		}
-		function Q(e) {
-			Y(o.mode === "highlight" ? e : { rgb: e });
-		}
-		function ye() {
-			Y(o.mode === "highlight" ? "none" : { auto: !0 }, !1);
+		function re(e) {
+			X(o.mode === "highlight" ? e : { rgb: e });
 		}
 		function be() {
+			X(o.mode === "highlight" ? "none" : { auto: !0 }, !1);
+		}
+		function xe() {
 			let e = R.value.replace(/^#/, "").toUpperCase();
-			C(e) && (Y(o.mode === "highlight" ? e : { rgb: e }), R.value = "");
+			C(e) && (X(o.mode === "highlight" ? e : { rgb: e }), R.value = "");
 		}
-		function xe(e) {
+		function Q(e) {
 			e.target.tagName !== "INPUT" && e.preventDefault();
 		}
 		function Se(e) {
@@ -183,7 +184,7 @@ var ne = [
 			let t = e.target;
 			ee.value?.contains(t) || z.value?.contains(t) || (L.value = !1);
 		}
-		return _(() => document.addEventListener("mousedown", Se)), g(() => document.removeEventListener("mousedown", Se)), (e, r) => (v(), c("div", {
+		return _(() => document.addEventListener("mousedown", Se)), g(() => document.removeEventListener("mousedown", Se)), (t, r) => (v(), c("div", {
 			ref_key: "containerRef",
 			ref: ee,
 			class: m(["docx-color-picker", n.className]),
@@ -198,14 +199,14 @@ var ne = [
 			title: n.title ?? G.value,
 			"aria-label": n.title ?? G.value,
 			onMousedown: r[0] ||= M(() => {}, ["prevent"]),
-			onClick: _e
-		}, [d(t, {
+			onClick: te
+		}, [d(e, {
 			name: K.value,
 			size: 18
 		}, null, 8, ["name"]), l("span", {
 			class: m(["docx-color-picker__bar", { "is-light": W.value === "transparent" || E(W.value) }]),
 			style: h({ background: W.value === "transparent" ? "#fff" : W.value })
-		}, null, 6)], 40, ne), l("button", {
+		}, null, 6)], 40, ie), l("button", {
 			type: "button",
 			class: m(["docx-color-picker__arrow", { "is-open": L.value }]),
 			disabled: n.disabled,
@@ -214,11 +215,11 @@ var ne = [
 			"aria-haspopup": "true",
 			"aria-expanded": L.value,
 			onMousedown: r[1] ||= M(() => {}, ["prevent"]),
-			onClick: te
-		}, [d(t, {
+			onClick: Y
+		}, [d(e, {
 			name: "arrow_drop_down",
 			size: 18
-		})], 42, re)], 2)) : (v(), c("button", {
+		})], 42, ae)], 2)) : (v(), c("button", {
 			key: 1,
 			type: "button",
 			class: m(["docx-color-picker__button", { "is-open": L.value }]),
@@ -228,17 +229,17 @@ var ne = [
 			"aria-haspopup": "true",
 			"aria-expanded": L.value,
 			onMousedown: r[2] ||= M(() => {}, ["prevent"]),
-			onClick: te
-		}, [l("span", ie, [d(t, {
+			onClick: Y
+		}, [l("span", se, [d(e, {
 			name: K.value,
 			size: 18
 		}, null, 8, ["name"]), l("span", {
 			class: m(["docx-color-picker__bar", { "is-light": U.value === "transparent" || E(U.value) }]),
 			style: h({ background: U.value === "transparent" ? "#fff" : U.value })
-		}, null, 6)]), d(t, {
+		}, null, 6)]), d(e, {
 			name: "arrow_drop_down",
 			size: 14
-		})], 42, X)), L.value && !n.disabled ? (v(), c("div", {
+		})], 42, oe)), L.value && !n.disabled ? (v(), c("div", {
 			key: 2,
 			ref_key: "panelRef",
 			ref: z,
@@ -246,17 +247,17 @@ var ne = [
 			style: h(q.value),
 			role: "dialog",
 			"aria-label": T(p)("colorPicker.ariaLabel", { type: G.value }),
-			onMousedown: xe
+			onMousedown: Q
 		}, [
 			l("button", {
 				type: "button",
 				class: "docx-color-picker__auto",
 				onMousedown: r[3] ||= M(() => {}, ["prevent"]),
-				onClick: ye
-			}, [n.mode === "highlight" ? (v(), c("span", ae, [...r[10] ||= [l("span", { class: "docx-color-picker__auto-slash" }, null, -1)]])) : (v(), c("span", oe)), u(" " + w(n.autoLabel ?? (n.mode === "highlight" ? T(p)("colorPicker.noColor") : T(p)("colorPicker.automatic"))), 1)], 32),
+				onClick: be
+			}, [n.mode === "highlight" ? (v(), c("span", ce, [...r[10] ||= [l("span", { class: "docx-color-picker__auto-slash" }, null, -1)]])) : (v(), c("span", le)), u(" " + w(n.autoLabel ?? (n.mode === "highlight" ? T(p)("colorPicker.noColor") : T(p)("colorPicker.automatic"))), 1)], 32),
 			r[12] ||= l("div", { class: "docx-color-picker__divider" }, null, -1),
-			l("div", se, w(T(p)("colorPicker.themeColors")), 1),
-			l("div", ce, [(v(!0), c(i, null, x(H.value, (e) => (v(), c("button", {
+			l("div", ue, w(T(p)("colorPicker.themeColors")), 1),
+			l("div", de, [(v(!0), c(i, null, x(H.value, (e) => (v(), c("button", {
 				key: e.key,
 				type: "button",
 				class: m(["docx-color-picker__cell", { "is-selected": k(n.value, e.hex) }]),
@@ -265,11 +266,11 @@ var ne = [
 				"aria-label": e.label,
 				"aria-selected": k(n.value, e.hex),
 				onMousedown: r[4] ||= M(() => {}, ["prevent"]),
-				onClick: (t) => ve(e)
-			}, null, 46, le))), 128))]),
+				onClick: (t) => ne(e)
+			}, null, 46, fe))), 128))]),
 			r[13] ||= l("div", { class: "docx-color-picker__divider" }, null, -1),
-			l("div", ue, w(T(p)("colorPicker.standardColors")), 1),
-			l("div", de, [(v(), c(i, null, x(y, (e) => l("button", {
+			l("div", pe, w(T(p)("colorPicker.standardColors")), 1),
+			l("div", me, [(v(), c(i, null, x(y, (e) => l("button", {
 				key: e.hex,
 				type: "button",
 				class: m(["docx-color-picker__cell", { "is-selected": k(n.value, e.hex) }]),
@@ -278,11 +279,11 @@ var ne = [
 				"aria-label": T(p)(e.nameKey),
 				"aria-selected": k(n.value, e.hex),
 				onMousedown: r[5] ||= M(() => {}, ["prevent"]),
-				onClick: (t) => Q(e.hex)
-			}, null, 46, fe)), 64))]),
+				onClick: (t) => re(e.hex)
+			}, null, 46, he)), 64))]),
 			r[14] ||= l("div", { class: "docx-color-picker__divider" }, null, -1),
-			l("div", pe, w(T(p)("colorPicker.customColor")), 1),
-			l("div", me, [
+			l("div", ge, w(T(p)("colorPicker.customColor")), 1),
+			l("div", _e, [
 				r[11] ||= l("span", { class: "docx-color-picker__hash" }, "#", -1),
 				A(l("input", {
 					"onUpdate:modelValue": r[6] ||= (e) => R.value = e,
@@ -292,20 +293,20 @@ var ne = [
 					maxlength: "6",
 					"aria-label": "Custom hex color",
 					onInput: r[7] ||= (e) => R.value = R.value.replace(/[^0-9A-Fa-f]/g, "").slice(0, 6),
-					onKeydown: j(M(be, ["prevent"]), ["enter"]),
+					onKeydown: j(M(xe, ["prevent"]), ["enter"]),
 					onMousedown: r[8] ||= M(() => {}, ["stop"])
-				}, null, 40, he), [[D, R.value]]),
+				}, null, 40, ve), [[D, R.value]]),
 				l("button", {
 					type: "button",
 					class: "docx-color-picker__apply-btn",
 					disabled: !C(R.value),
 					onMousedown: r[9] ||= M(() => {}, ["prevent"]),
-					onClick: be
-				}, w(T(p)("common.apply")), 41, ge)
+					onClick: xe
+				}, w(T(p)("common.apply")), 41, ye)
 			])
 		], 44, Z)) : s("", !0)], 6));
 	}
-}), [["__scopeId", "data-v-2cbf59ab"]]), ve = 4, Q = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), [["__scopeId", "data-v-e2472617"]]), xe = 4, Q = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "Popover",
 	props: {
 		open: { type: Boolean },
@@ -324,7 +325,7 @@ var ne = [
 			let e = i.value;
 			if (!e) return;
 			let t = e.getBoundingClientRect(), r = { position: "fixed" };
-			n.placement.startsWith("top") ? (r.bottom = `${Math.round(window.innerHeight - t.top + ve)}px`, r.top = "auto") : (r.top = `${Math.round(t.bottom + ve)}px`, r.bottom = "auto"), n.placement.endsWith("right") ? (r.right = `${Math.round(window.innerWidth - t.right)}px`, r.left = "auto") : (r.left = `${Math.round(t.left)}px`, r.right = "auto"), o.value = r;
+			n.placement.startsWith("top") ? (r.bottom = `${Math.round(window.innerHeight - t.top + xe)}px`, r.top = "auto") : (r.top = `${Math.round(t.bottom + xe)}px`, r.bottom = "auto"), n.placement.endsWith("right") ? (r.right = `${Math.round(window.innerWidth - t.right)}px`, r.left = "auto") : (r.left = `${Math.round(t.left)}px`, r.right = "auto"), o.value = r;
 		}
 		function u() {
 			r("update:open", !n.open), n.open && r("close");
@@ -372,15 +373,15 @@ var ne = [
 			onMousedown: n[0] ||= M(() => {}, ["stop"])
 		}, [S(t.$slots, "panel", {}, void 0, !0)], 38)) : s("", !0)], 512));
 	}
-}), [["__scopeId", "data-v-20a24bb6"]]), ye = ["title", "onClick"], be = {
+}), [["__scopeId", "data-v-5878ce2a"]]), Se = ["title", "onClick"], Ce = {
 	key: 0,
 	class: "editing-mode__label"
-}, xe = { class: "editing-mode__panel" }, Se = ["onClick"], Ce = { class: "editing-mode__option-text" }, we = { class: "editing-mode__option-label" }, Te = { class: "editing-mode__option-desc" }, Ee = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}, we = { class: "editing-mode__panel" }, Te = ["onClick"], Ee = { class: "editing-mode__option-text" }, De = { class: "editing-mode__option-label" }, Oe = { class: "editing-mode__option-desc" }, ke = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "EditingModeDropdown",
 	props: { modelValue: {} },
 	emits: ["update:modelValue"],
 	setup(n, { emit: r }) {
-		let { t: u } = e(), f = n, p = r, h = [
+		let { t: u } = t(), f = n, p = r, h = [
 			{
 				value: "editing",
 				labelKey: "editor.editing",
@@ -409,59 +410,59 @@ var ne = [
 		}
 		return _(() => {
 			D = window.matchMedia("(max-width: 1400px)"), S.value = D.matches, D.addEventListener("change", O);
-		}), g(() => D?.removeEventListener("change", O)), (e, r) => (v(), o(Q, {
+		}), g(() => D?.removeEventListener("change", O)), (t, r) => (v(), o(Q, {
 			open: y.value,
 			placement: "bottom-right",
 			"onUpdate:open": r[0] ||= (e) => y.value = e,
 			onClose: r[1] ||= (e) => y.value = !1
 		}, {
-			trigger: k(({ toggle: e }) => [l("button", {
+			trigger: k(({ toggle: t }) => [l("button", {
 				type: "button",
 				class: m(["editing-mode__trigger", {
 					"editing-mode__trigger--open": y.value,
 					"editing-mode__trigger--compact": S.value
 				}]),
 				title: `${T(u)(C.value.labelKey)} (Ctrl+Shift+E)`,
-				onClick: M(e, ["prevent"])
+				onClick: M(t, ["prevent"])
 			}, [
-				d(t, {
+				d(e, {
 					name: C.value.icon,
 					size: 18
 				}, null, 8, ["name"]),
-				S.value ? s("", !0) : (v(), c("span", be, w(T(u)(C.value.labelKey)), 1)),
-				d(t, {
+				S.value ? s("", !0) : (v(), c("span", Ce, w(T(u)(C.value.labelKey)), 1)),
+				d(e, {
 					name: "arrow_drop_down",
 					size: 16
 				})
-			], 10, ye)]),
-			panel: k(() => [l("div", xe, [(v(), c(i, null, x(h, (e) => l("button", {
-				key: e.value,
+			], 10, Se)]),
+			panel: k(() => [l("div", we, [(v(), c(i, null, x(h, (t) => l("button", {
+				key: t.value,
 				type: "button",
 				class: "editing-mode__option",
-				onClick: M((t) => E(e.value), ["prevent"])
+				onClick: M((e) => E(t.value), ["prevent"])
 			}, [
-				d(t, {
-					name: e.icon,
+				d(e, {
+					name: t.icon,
 					size: 20
 				}, null, 8, ["name"]),
-				l("span", Ce, [l("span", we, w(T(u)(e.labelKey)), 1), l("span", Te, w(T(u)(e.descKey)), 1)]),
-				e.value === n.modelValue ? (v(), o(t, {
+				l("span", Ee, [l("span", De, w(T(u)(t.labelKey)), 1), l("span", Oe, w(T(u)(t.descKey)), 1)]),
+				t.value === n.modelValue ? (v(), o(e, {
 					key: 0,
 					name: "check",
 					size: 18,
 					class: "editing-mode__check"
 				})) : s("", !0)
-			], 8, Se)), 64))])]),
+			], 8, Te)), 64))])]),
 			_: 1
 		}, 8, ["open"]));
 	}
-}), [["__scopeId", "data-v-e7645f58"]]), De = [
+}), [["__scopeId", "data-v-00df78da"]]), Ae = [
 	"disabled",
 	"aria-label",
 	"title",
 	"aria-expanded",
 	"onClick"
-], Oe = { class: "docx-icon-grid__panel" }, ke = ["title", "onClick"], Ae = /* @__PURE__ */ n(/* @__PURE__ */ f({
+], je = { class: "docx-icon-grid__panel" }, Me = ["title", "onClick"], Ne = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "IconGridDropdown",
 	props: {
 		options: {},
@@ -472,7 +473,7 @@ var ne = [
 		ariaLabel: {}
 	},
 	emits: ["select"],
-	setup(e, { emit: n }) {
+	setup(t, { emit: n }) {
 		let r = n, a = b(!1);
 		function s(e) {
 			r("select", e), a.value = !1;
@@ -485,41 +486,41 @@ var ne = [
 			trigger: k(({ toggle: n }) => [l("button", {
 				type: "button",
 				class: m(["docx-icon-grid__btn", { "docx-icon-grid__btn--open": a.value }]),
-				disabled: e.disabled,
-				"aria-label": e.ariaLabel ?? e.tooltipContent,
-				title: e.tooltipContent,
+				disabled: t.disabled,
+				"aria-label": t.ariaLabel ?? t.tooltipContent,
+				title: t.tooltipContent,
 				"aria-expanded": a.value,
 				"aria-haspopup": "true",
 				onClick: M(n, ["prevent"])
-			}, [d(t, {
-				name: e.triggerIcon,
+			}, [d(e, {
+				name: t.triggerIcon,
 				size: 20
-			}, null, 8, ["name"]), d(t, {
+			}, null, 8, ["name"]), d(e, {
 				name: "arrow_drop_down",
 				size: 14
-			})], 10, De)]),
-			panel: k(() => [l("div", Oe, [(v(!0), c(i, null, x(e.options, (n) => (v(), c("button", {
+			})], 10, Ae)]),
+			panel: k(() => [l("div", je, [(v(!0), c(i, null, x(t.options, (n) => (v(), c("button", {
 				key: n.value,
 				type: "button",
-				class: m(["docx-icon-grid__option", { "docx-icon-grid__option--active": e.activeValue === n.value }]),
+				class: m(["docx-icon-grid__option", { "docx-icon-grid__option--active": t.activeValue === n.value }]),
 				title: n.label,
 				onClick: M((e) => s(n.value), ["prevent"])
-			}, [d(t, {
+			}, [d(e, {
 				name: n.iconName,
 				size: 18
-			}, null, 8, ["name"])], 10, ke))), 128))])]),
+			}, null, 8, ["name"])], 10, Me))), 128))])]),
 			_: 1
 		}, 8, ["open"]));
 	}
-}), [["__scopeId", "data-v-435b9662"]]), je = /* @__PURE__ */ f({
+}), [["__scopeId", "data-v-28013428"]]), Pe = /* @__PURE__ */ f({
 	__name: "ImageWrapDropdown",
 	props: {
 		imageContext: {},
 		disabled: { type: Boolean }
 	},
 	emits: ["change"],
-	setup(t) {
-		let n = t, { t: r } = e(), i = [
+	setup(e) {
+		let n = e, { t: r } = t(), i = [
 			{
 				value: "inline",
 				labelKey: "imageWrap.inline",
@@ -558,13 +559,13 @@ var ne = [
 			let e = n.imageContext;
 			return e.displayMode === "float" && e.cssFloat === "left" ? "wrapRight" : e.displayMode === "float" && e.cssFloat === "right" ? "wrapLeft" : e.wrapType;
 		}), l = a(() => s.value.find((e) => e.value === c.value) ?? s.value[0]);
-		return (e, n) => (v(), o(Ae, {
+		return (t, n) => (v(), o(Ne, {
 			options: s.value,
 			"active-value": c.value,
 			"trigger-icon": l.value.iconName,
 			"tooltip-content": T(r)("imageWrap.tooltipPrefix", { label: l.value.label }),
-			disabled: t.disabled,
-			onSelect: n[0] ||= (t) => e.$emit("change", t)
+			disabled: e.disabled,
+			onSelect: n[0] ||= (e) => t.$emit("change", e)
 		}, null, 8, [
 			"options",
 			"active-value",
@@ -573,12 +574,12 @@ var ne = [
 			"disabled"
 		]));
 	}
-}), Me = /* @__PURE__ */ f({
+}), Fe = /* @__PURE__ */ f({
 	__name: "ImageTransformDropdown",
 	props: { disabled: { type: Boolean } },
 	emits: ["transform"],
-	setup(t) {
-		let { t: n } = e(), r = [
+	setup(e) {
+		let { t: n } = t(), r = [
 			{
 				value: "rotateCW",
 				labelKey: "imageTransform.rotateClockwise",
@@ -604,19 +605,19 @@ var ne = [
 			label: n(e.labelKey),
 			iconName: e.iconName
 		})));
-		return (e, r) => (v(), o(Ae, {
+		return (t, r) => (v(), o(Ne, {
 			options: i.value,
 			"trigger-icon": "rotate_right",
 			"tooltip-content": T(n)("imageTransform.tooltip"),
-			disabled: t.disabled,
-			onSelect: r[0] ||= (t) => e.$emit("transform", t)
+			disabled: e.disabled,
+			onSelect: r[0] ||= (e) => t.$emit("transform", e)
 		}, null, 8, [
 			"options",
 			"tooltip-content",
 			"disabled"
 		]));
 	}
-}), Ne = [
+}), Ie = [
 	{
 		name: "Arial",
 		fontFamily: "Arial",
@@ -677,7 +678,7 @@ var ne = [
 		fontFamily: "Consolas",
 		category: "monospace"
 	}
-], Pe = [
+], Le = [
 	8,
 	9,
 	10,
@@ -692,62 +693,38 @@ var ne = [
 	36,
 	48,
 	72
-], Fe = [
+], Re = [
 	{
 		id: "Normal",
 		label: "Normal",
-		nameKey: "styles.normalText",
-		previewStyle: { fontSize: "13px" }
+		nameKey: "styles.normalText"
 	},
 	{
 		id: "Title",
 		label: "Title",
-		nameKey: "styles.title",
-		previewStyle: {
-			fontSize: "20px",
-			fontWeight: "bold"
-		}
+		nameKey: "styles.title"
 	},
 	{
 		id: "Subtitle",
 		label: "Subtitle",
-		nameKey: "styles.subtitle",
-		previewStyle: {
-			fontSize: "15px",
-			color: "#6b7280"
-		}
+		nameKey: "styles.subtitle"
 	},
 	{
 		id: "Heading1",
 		label: "Heading 1",
-		nameKey: "styles.heading1",
-		previewStyle: {
-			fontSize: "18px",
-			fontWeight: "bold",
-			color: "#4a6c8c"
-		}
+		nameKey: "styles.heading1"
 	},
 	{
 		id: "Heading2",
 		label: "Heading 2",
-		nameKey: "styles.heading2",
-		previewStyle: {
-			fontSize: "16px",
-			fontWeight: "bold",
-			color: "#4a6c8c"
-		}
+		nameKey: "styles.heading2"
 	},
 	{
 		id: "Heading3",
 		label: "Heading 3",
-		nameKey: "styles.heading3",
-		previewStyle: {
-			fontSize: "14px",
-			fontWeight: "bold",
-			color: "#4a6c8c"
-		}
+		nameKey: "styles.heading3"
 	}
-], Ie = [
+], ze = [
 	{
 		label: "Single",
 		labelKey: "lineSpacing.single",
@@ -766,7 +743,7 @@ var ne = [
 		labelKey: "lineSpacing.double",
 		value: 480
 	}
-], Le = [
+], Be = [
 	.5,
 	.75,
 	1,
@@ -776,7 +753,7 @@ var ne = [
 ];
 //#endregion
 //#region src/composables/useToolbarDropdowns.ts
-function Re(e) {
+function Ve(e) {
 	let t = b(null), n = b({
 		top: 0,
 		left: 0
@@ -822,30 +799,98 @@ function Re(e) {
 	return _(() => document.addEventListener("mousedown", c)), g(() => document.removeEventListener("mousedown", c)), {
 		openDropdown: t,
 		dropdownMenuStyle: o,
-		toggleDropdown: s
+		toggleDropdown: s,
+		recomputeDropdownPos: i
+	};
+}
+//#endregion
+//#region src/composables/useToolbarFontSize.ts
+function He(e) {
+	let t = b(!1), n = (t) => e.execCommand("setFontSize", t * 2);
+	function r() {
+		t.value = !1, e.openDropdown.value = "size", e.recomputeDropdownPos("size");
+	}
+	function i() {
+		t.value = !0;
+	}
+	function a(r) {
+		if (t.value) {
+			let e = parseFloat(r.target.value);
+			isNaN(e) || n(Math.round(Math.min(Math.max(e, 1), 1638) * 2) / 2);
+		}
+		t.value = !1, e.openDropdown.value = null;
+	}
+	function o(r) {
+		t.value = !1, n(r), e.openDropdown.value = null;
+	}
+	function s() {
+		let t = e.currentFontSize.value;
+		n(Le.find((e) => e > t) || t + 1);
+	}
+	function c() {
+		let t = e.currentFontSize.value;
+		n([...Le].reverse().find((e) => e < t) || Math.max(1, t - 1));
+	}
+	return {
+		onSizeFocus: r,
+		onSizeInput: i,
+		commitFontSize: a,
+		pickFontSize: o,
+		increaseFontSize: s,
+		decreaseFontSize: c
+	};
+}
+//#endregion
+//#region src/composables/useParagraphStyleOptions.ts
+function Ue(e) {
+	let t = a(() => {
+		let t = H(e.documentStyles());
+		return t.length > 0 ? t.map((t) => {
+			let n = Re.find((e) => e.id === t.styleId);
+			return {
+				id: t.styleId,
+				label: n ? e.t(n.nameKey) : t.name,
+				previewStyle: V(t)
+			};
+		}) : Re.map((t) => ({
+			id: t.id,
+			label: e.t(t.nameKey),
+			previewStyle: V({ styleId: t.id })
+		}));
+	});
+	return {
+		resolvedParagraphStyles: t,
+		currentStyleLabel: a(() => {
+			let n = e.currentStyleId() || "Normal", r = t.value.find((e) => e.id === n);
+			return r ? r.label : n;
+		})
 	};
 }
 //#endregion
 //#region src/components/Toolbar.vue?vue&type=script&setup=true&lang.ts
-var ze = {
+var We = {
 	key: 0,
 	class: "basic-toolbar"
-}, Be = [
+}, Ge = [
 	"title",
 	"aria-label",
 	"disabled"
-], Ve = [
+], Ke = [
 	"title",
 	"aria-label",
 	"disabled"
-], He = ["disabled", "title"], Ue = ["title"], We = ["disabled", "title"], Ge = ["onMousedown"], Ke = ["title"], qe = ["onMousedown"], Je = ["title"], Ye = {
+], qe = ["disabled", "title"], Je = ["aria-expanded", "title"], Ye = ["disabled", "title"], Xe = ["onMousedown"], Ze = ["aria-expanded", "title"], Qe = ["onMousedown"], $e = ["aria-expanded", "title"], et = {
 	key: 0,
 	class: "toolbar-dropdown__group-label"
-}, Xe = ["onMousedown"], Ze = ["title"], Qe = ["title"], $e = ["title"], et = ["onMousedown"], tt = ["title", "aria-label"], nt = ["title", "aria-label"], rt = ["title", "aria-label"], it = ["title", "aria-label"], at = ["title", "aria-label"], ot = ["title", "aria-label"], st = ["title", "aria-label"], ct = ["title"], lt = ["title", "aria-label"], ut = ["title", "aria-label"], dt = [
+}, tt = ["onMousedown"], nt = ["title"], rt = [
+	"value",
+	"title",
+	"aria-expanded"
+], it = ["title"], at = ["onMousedown"], ot = ["title", "aria-label"], st = ["title", "aria-label"], ct = ["title", "aria-label"], lt = ["title", "aria-label"], ut = ["title", "aria-label"], dt = ["title", "aria-label"], ft = ["title", "aria-label"], pt = ["aria-expanded", "title"], mt = ["title"], ht = ["title"], gt = ["title"], _t = ["title"], vt = ["title", "aria-label"], yt = ["title", "aria-label"], bt = [
 	"title",
 	"aria-label",
 	"disabled"
-], ft = ["title", "aria-label"], pt = ["title"], mt = ["onMousedown"], ht = ["title", "aria-label"], gt = ["title", "aria-label"], _t = ["title", "aria-label"], vt = /* @__PURE__ */ n(/* @__PURE__ */ f({
+], xt = ["title", "aria-label"], St = ["aria-expanded", "title"], Ct = ["onMousedown"], wt = ["title", "aria-label"], Tt = ["title", "aria-label"], Et = ["title", "aria-label"], Dt = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "Toolbar",
 	props: {
 		view: {},
@@ -860,7 +905,8 @@ var ze = {
 		commentsSidebarOpen: { type: Boolean },
 		imageContext: {},
 		theme: {},
-		fontFamilies: {}
+		fontFamilies: {},
+		documentStyles: {}
 	},
 	emits: [
 		"find-replace",
@@ -883,14 +929,14 @@ var ze = {
 		"image-transform"
 	],
 	setup(n, { emit: r }) {
-		let f = n, { t: p } = e(), g = r, _ = a(() => f.zoomPercent ?? 100), y = a(() => f.isMinZoom ?? !1), C = a(() => f.isMaxZoom ?? !1), E = a(() => f.zoomPresets ?? Le), D = a(() => f.showZoomControl ?? !0), O = b(null), k = b(null), A = b(null), j = b(null), N = b(null), P = b(null), { openDropdown: F, dropdownMenuStyle: I, toggleDropdown: V } = Re({
-			zoom: P,
+		let f = n, { t: p } = t(), g = r, _ = a(() => f.zoomPercent ?? 100), y = a(() => f.isMinZoom ?? !1), C = a(() => f.isMaxZoom ?? !1), E = a(() => f.zoomPresets ?? Be), D = a(() => f.showZoomControl ?? !0), O = b(null), k = b(null), A = b(null), N = b(null), P = b(null), F = b(null), { openDropdown: I, dropdownMenuStyle: V, toggleDropdown: H, recomputeDropdownPos: U } = Ve({
+			zoom: F,
 			style: O,
 			font: k,
 			size: A,
-			align: j,
-			spacing: N
-		}), H = a(() => {
+			align: N,
+			spacing: P
+		}), W = a(() => {
 			f.stateTick;
 			let e = f.view;
 			return e ? ee(e.state) : {
@@ -905,55 +951,56 @@ var ze = {
 				inInsertion: !1,
 				inDeletion: !1
 			};
-		}), U = a(() => {
-			let e = H.value.textFormatting.fontFamily;
+		}), G = a(() => {
+			let e = W.value.textFormatting.fontFamily;
 			return e?.ascii || e?.hAnsi || "Arial";
-		}), W = a(() => {
-			let e = H.value.textFormatting.fontSize;
+		}), K = a(() => {
+			let e = W.value.textFormatting.fontSize;
 			return e ? e / 2 : 11;
-		}), G = a(() => H.value.paragraphFormatting.alignment || "left"), K = a(() => {
-			switch (G.value) {
+		}), q = a(() => W.value.paragraphFormatting.alignment || "left"), J = a(() => {
+			switch (q.value) {
 				case "center": return "format_align_center";
 				case "right": return "format_align_right";
 				case "both": return "format_align_justify";
 				default: return "format_align_left";
 			}
-		}), q = a(() => {
-			let e = H.value.paragraphFormatting.styleId || "Normal", t = Fe.find((t) => t.id === e);
-			return t ? p(t.nameKey) : e;
-		}), J = a(() => {
+		}), { resolvedParagraphStyles: Y, currentStyleLabel: X } = Ue({
+			documentStyles: () => f.documentStyles,
+			currentStyleId: () => W.value.paragraphFormatting.styleId || "Normal",
+			t: p
+		}), te = a(() => {
 			f.stateTick;
 			let e = f.view;
 			return e ? R(e.state) > 0 : !1;
-		}), te = a(() => {
+		}), ne = a(() => {
 			f.stateTick;
 			let e = f.view;
 			return e ? L(e.state) > 0 : !1;
-		}), Y = a(() => {
-			let e = H.value, t = e.inList && (e.listLevel ?? 0) > 0, n = (e.paragraphFormatting.indentLeft ?? 0) > 0;
+		}), re = a(() => {
+			let e = W.value, t = e.inList && (e.listLevel ?? 0) > 0, n = (e.paragraphFormatting.indentLeft ?? 0) > 0;
 			return t || n;
-		}), ne = a(() => {
-			let e = H.value.textFormatting.color?.rgb;
+		}), ie = a(() => {
+			let e = W.value.textFormatting.color?.rgb;
 			return e ? e.replace(/^#/, "").toUpperCase() : void 0;
-		}), re = a(() => {
-			let e = H.value.textFormatting.highlight;
+		}), ae = a(() => {
+			let e = W.value.textFormatting.highlight;
 			if (!(!e || e === "none")) return e.replace(/^#/, "").toUpperCase();
-		}), X = a(() => B(f.fontFamilies) ?? Ne), ie = a(() => [
+		}), oe = a(() => B(f.fontFamilies) ?? Ie), se = a(() => [
 			{
 				label: p("font.sansSerif"),
-				fonts: X.value.filter((e) => e.category === "sans-serif")
+				fonts: oe.value.filter((e) => e.category === "sans-serif")
 			},
 			{
 				label: p("font.serif"),
-				fonts: X.value.filter((e) => e.category === "serif")
+				fonts: oe.value.filter((e) => e.category === "serif")
 			},
 			{
 				label: p("font.monospace"),
-				fonts: X.value.filter((e) => e.category === "monospace")
+				fonts: oe.value.filter((e) => e.category === "monospace")
 			},
 			{
 				label: p("font.other"),
-				fonts: X.value.filter((e) => !e.category || e.category === "other")
+				fonts: oe.value.filter((e) => !e.category || e.category === "other")
 			}
 		]);
 		function Z(e, ...t) {
@@ -964,139 +1011,143 @@ var ze = {
 				console.warn("[Toolbar] command not found:", e);
 				return;
 			}
-			r(...t)(n.state, (e) => n.dispatch(e), n), n.hasFocus() || n.focus(), F.value = null;
+			r(...t)(n.state, (e) => n.dispatch(e), n), n.hasFocus() || n.focus(), I.value = null;
 		}
-		function ae(e) {
+		function ce(e) {
 			Z("setFontFamily", e);
 		}
-		function oe(e) {
-			Z("setFontSize", e * 2);
-		}
-		function se() {
-			let e = W.value;
-			oe(Pe.find((t) => t > e) || e + 2);
-		}
-		function ce() {
-			let e = W.value;
-			oe([...Pe].reverse().find((t) => t < e) || Math.max(1, e - 2));
-		}
-		function le(e) {
+		let { onSizeFocus: le, onSizeInput: ue, commitFontSize: de, pickFontSize: fe, increaseFontSize: pe, decreaseFontSize: me } = He({
+			currentFontSize: K,
+			openDropdown: I,
+			recomputeDropdownPos: U,
+			execCommand: Z
+		});
+		function he(e) {
 			if (typeof e == "object" && e.auto) {
 				Z("clearTextColor");
 				return;
 			}
 			Z("setTextColor", typeof e == "string" ? { rgb: e } : e);
 		}
-		function ue() {
+		function ge() {
 			let e = f.view;
 			e && (z(e.state, (t) => e.dispatch(t), e), e.hasFocus() || e.focus());
 		}
-		function de(e) {
+		function _e(e) {
 			Z("setHighlight", typeof e == "string" ? e : e.rgb ?? "none");
 		}
-		function fe(e) {
-			g("apply-style", e), F.value = null;
+		function ve(e) {
+			g("apply-style", e), I.value = null;
 		}
-		function pe(e) {
+		function ye(e) {
 			Z("setLineSpacing", e);
 		}
-		function me(e) {
-			let t = H.value.paragraphFormatting.lineSpacing;
+		function xe(e) {
+			let t = W.value.paragraphFormatting.lineSpacing;
 			return t ? Math.abs(t - e) < 10 : e === 240;
 		}
-		return (e, r) => n.view ? (v(), c("div", ze, [
+		return (t, r) => n.view ? (v(), c("div", We, [
 			l("button", {
 				title: T(p)("formattingBar.undoShortcut"),
 				"aria-label": T(p)("formattingBar.undo"),
-				disabled: !J.value,
+				disabled: !te.value,
 				onMousedown: r[0] ||= M((e) => Z("undo"), ["prevent"])
-			}, [d(t, { name: "undo" })], 40, Be),
+			}, [d(e, { name: "undo" })], 40, Ge),
 			l("button", {
 				title: T(p)("formattingBar.redoShortcut"),
 				"aria-label": T(p)("formattingBar.redo"),
-				disabled: !te.value,
+				disabled: !ne.value,
 				onMousedown: r[1] ||= M((e) => Z("redo"), ["prevent"])
-			}, [d(t, { name: "redo" })], 40, Ve),
-			r[31] ||= l("span", { class: "divider" }, null, -1),
+			}, [d(e, { name: "redo" })], 40, Ke),
+			r[39] ||= l("span", { class: "divider" }, null, -1),
 			D.value ? (v(), c("div", {
 				key: 0,
 				class: "toolbar-dropdown zoom-group",
 				ref_key: "zoomDropdownRef",
-				ref: P
+				ref: F
 			}, [
 				l("button", {
 					class: "size-btn",
-					onMousedown: r[2] ||= M((t) => e.$emit("zoom-out"), ["prevent"]),
+					onMousedown: r[2] ||= M((e) => t.$emit("zoom-out"), ["prevent"]),
 					disabled: y.value,
 					title: T(p)("zoom.zoomOut")
-				}, " − ", 40, He),
+				}, " − ", 40, qe),
 				l("button", {
 					class: "toolbar-dropdown__trigger zoom-trigger",
-					onMousedown: r[3] ||= M((e) => T(V)("zoom"), ["prevent"]),
+					onMousedown: r[3] ||= M((e) => T(H)("zoom"), ["prevent"]),
+					"aria-expanded": T(I) === "zoom",
+					"aria-haspopup": "listbox",
 					title: T(p)("zoom.zoomLevel")
-				}, w(_.value) + "% ", 41, Ue),
+				}, [u(w(_.value) + "% ", 1), d(e, {
+					class: "chevron",
+					name: "arrow_drop_down",
+					size: 16
+				})], 40, Je),
 				l("button", {
 					class: "size-btn",
-					onMousedown: r[4] ||= M((t) => e.$emit("zoom-in"), ["prevent"]),
+					onMousedown: r[4] ||= M((e) => t.$emit("zoom-in"), ["prevent"]),
 					disabled: C.value,
 					title: T(p)("zoom.zoomIn")
-				}, " + ", 40, We),
-				T(F) === "zoom" ? (v(), c("div", {
+				}, " + ", 40, Ye),
+				T(I) === "zoom" ? (v(), c("div", {
 					key: 0,
-					style: h(T(I)),
+					style: h(T(V)),
 					class: "toolbar-dropdown__menu zoom-menu"
-				}, [(v(!0), c(i, null, x(E.value, (t) => (v(), c("button", {
-					key: t,
-					class: m(["toolbar-dropdown__item", { active: _.value === Math.round(t * 100) }]),
-					onMousedown: M((n) => e.$emit("zoom-set", t), ["prevent"])
-				}, w(Math.round(t * 100)) + "% ", 43, Ge))), 128))], 4)) : s("", !0)
+				}, [(v(!0), c(i, null, x(E.value, (e) => (v(), c("button", {
+					key: e,
+					class: m(["toolbar-dropdown__item", { active: _.value === Math.round(e * 100) }]),
+					onMousedown: M((n) => t.$emit("zoom-set", e), ["prevent"])
+				}, w(Math.round(e * 100)) + "% ", 43, Xe))), 128))], 4)) : s("", !0)
 			], 512)) : s("", !0),
-			r[32] ||= l("span", { class: "divider" }, null, -1),
+			r[40] ||= l("span", { class: "divider" }, null, -1),
 			l("div", {
 				class: "toolbar-dropdown",
 				ref_key: "styleDropdownRef",
 				ref: O
 			}, [l("button", {
 				class: "toolbar-dropdown__trigger style-trigger",
-				onMousedown: r[5] ||= M((e) => T(V)("style"), ["prevent"]),
+				onMousedown: r[5] ||= M((e) => T(H)("style"), ["prevent"]),
+				"aria-expanded": T(I) === "style",
+				"aria-haspopup": "listbox",
 				title: T(p)("styles.selectAriaLabel")
-			}, [u(w(q.value) + " ", 1), d(t, {
+			}, [u(w(T(X)) + " ", 1), d(e, {
 				class: "chevron",
 				name: "arrow_drop_down",
 				size: 16
-			})], 40, Ke), T(F) === "style" ? (v(), c("div", {
+			})], 40, Ze), T(I) === "style" ? (v(), c("div", {
 				key: 0,
-				style: h(T(I)),
+				style: h(T(V)),
 				class: "toolbar-dropdown__menu style-menu"
-			}, [(v(!0), c(i, null, x(T(Fe), (e) => (v(), c("button", {
+			}, [(v(!0), c(i, null, x(T(Y), (e) => (v(), c("button", {
 				key: e.id,
-				class: m(["toolbar-dropdown__item", { active: (H.value.paragraphFormatting.styleId || "Normal") === e.id }]),
-				style: h(e.previewStyle),
-				onMousedown: M((t) => fe(e.id), ["prevent"])
-			}, w(T(p)(e.nameKey)), 47, qe))), 128))], 4)) : s("", !0)], 512),
-			r[33] ||= l("span", { class: "divider" }, null, -1),
+				class: m(["toolbar-dropdown__item", { active: (W.value.paragraphFormatting.styleId || "Normal") === e.id }]),
+				onMousedown: M((t) => ve(e.id), ["prevent"])
+			}, [l("span", { style: h(e.previewStyle) }, w(e.label), 5)], 42, Qe))), 128))], 4)) : s("", !0)], 512),
+			r[41] ||= l("span", { class: "divider" }, null, -1),
 			l("div", {
 				class: "toolbar-dropdown",
 				ref_key: "fontDropdownRef",
 				ref: k
 			}, [l("button", {
 				class: "toolbar-dropdown__trigger font-trigger",
-				onMousedown: r[6] ||= M((e) => T(V)("font"), ["prevent"]),
+				onMousedown: r[6] ||= M((e) => T(H)("font"), ["prevent"]),
+				"aria-expanded": T(I) === "font",
+				"aria-haspopup": "listbox",
 				title: T(p)("font.selectAriaLabel")
-			}, [u(w(U.value) + " ", 1), d(t, {
+			}, [u(w(G.value) + " ", 1), d(e, {
 				class: "chevron",
 				name: "arrow_drop_down",
 				size: 16
-			})], 40, Je), T(F) === "font" ? (v(), c("div", {
+			})], 40, $e), T(I) === "font" ? (v(), c("div", {
 				key: 0,
-				style: h(T(I)),
+				style: h(T(V)),
 				class: "toolbar-dropdown__menu font-menu"
-			}, [(v(!0), c(i, null, x(ie.value, (e) => (v(), c(i, { key: e.label }, [e.fonts.length > 0 ? (v(), c("div", Ye, w(e.label), 1)) : s("", !0), (v(!0), c(i, null, x(e.fonts, (e) => (v(), c("button", {
+			}, [(v(!0), c(i, null, x(se.value, (e) => (v(), c(i, { key: e.label }, [e.fonts.length > 0 ? (v(), c("div", et, w(e.label), 1)) : s("", !0), (v(!0), c(i, null, x(e.fonts, (e) => (v(), c("button", {
 				key: e.name,
-				class: m(["toolbar-dropdown__item", { active: U.value === e.name }]),
+				class: m(["toolbar-dropdown__item", { active: G.value === e.name }]),
 				style: h({ fontFamily: e.fontFamily }),
-				onMousedown: M((t) => ae(e.name), ["prevent"])
-			}, w(e.name), 47, Xe))), 128))], 64))), 128))], 4)) : s("", !0)], 512),
+				onMousedown: M((t) => ce(e.name), ["prevent"])
+			}, w(e.name), 47, tt))), 128))], 64))), 128))], 4)) : s("", !0)], 512),
 			l("div", {
 				class: "toolbar-dropdown font-size-group",
 				ref_key: "sizeDropdownRef",
@@ -1104,218 +1155,238 @@ var ze = {
 			}, [
 				l("button", {
 					class: "size-btn",
-					onMousedown: M(ce, ["prevent"]),
+					onMousedown: r[7] ||= M((...e) => T(me) && T(me)(...e), ["prevent"]),
 					title: T(p)("fontSize.decrease")
-				}, " − ", 40, Ze),
-				l("button", {
-					class: "toolbar-dropdown__trigger size-trigger",
-					onMousedown: r[7] ||= M((e) => T(V)("size"), ["prevent"]),
-					title: T(p)("fontSize.label")
-				}, w(W.value), 41, Qe),
+				}, " − ", 40, nt),
+				l("input", {
+					class: "size-trigger size-input",
+					type: "text",
+					value: K.value,
+					title: T(p)("fontSize.label"),
+					onMousedown: r[8] ||= M(() => {}, ["stop"]),
+					onFocus: r[9] ||= (...e) => T(le) && T(le)(...e),
+					"aria-expanded": T(I) === "size",
+					"aria-haspopup": "listbox",
+					onInput: r[10] ||= (...e) => T(ue) && T(ue)(...e),
+					onKeydown: [
+						r[11] ||= j(M((e) => T(pe)(), ["prevent", "stop"]), ["up"]),
+						r[12] ||= j(M((e) => T(me)(), ["prevent", "stop"]), ["down"]),
+						r[13] ||= j(M((e) => T(de)(e), ["prevent"]), ["enter"])
+					],
+					onBlur: r[14] ||= (e) => T(de)(e)
+				}, null, 40, rt),
 				l("button", {
 					class: "size-btn",
-					onMousedown: M(se, ["prevent"]),
+					onMousedown: r[15] ||= M((...e) => T(pe) && T(pe)(...e), ["prevent"]),
 					title: T(p)("fontSize.increase")
-				}, " + ", 40, $e),
-				T(F) === "size" ? (v(), c("div", {
+				}, " + ", 40, it),
+				T(I) === "size" ? (v(), c("div", {
 					key: 0,
-					style: h(T(I)),
+					style: h(T(V)),
 					class: "toolbar-dropdown__menu size-menu"
-				}, [(v(!0), c(i, null, x(T(Pe), (e) => (v(), c("button", {
+				}, [(v(!0), c(i, null, x(T(Le), (e) => (v(), c("button", {
 					key: e,
-					class: m(["toolbar-dropdown__item", { active: W.value === e }]),
-					onMousedown: M((t) => oe(e), ["prevent"])
-				}, w(e), 43, et))), 128))], 4)) : s("", !0)
+					class: m(["toolbar-dropdown__item", { active: K.value === e }]),
+					onMousedown: M((t) => T(fe)(e), ["prevent"])
+				}, w(e), 43, at))), 128))], 4)) : s("", !0)
 			], 512),
-			r[34] ||= l("span", { class: "divider" }, null, -1),
+			r[42] ||= l("span", { class: "divider" }, null, -1),
 			l("button", {
 				title: T(p)("formattingBar.boldShortcut"),
 				"aria-label": T(p)("formattingBar.bold"),
-				class: m({ active: H.value.textFormatting.bold }),
-				onMousedown: r[8] ||= M((e) => Z("toggleBold"), ["prevent"])
-			}, [d(t, { name: "format_bold" })], 42, tt),
+				class: m({ active: W.value.textFormatting.bold }),
+				onMousedown: r[16] ||= M((e) => Z("toggleBold"), ["prevent"])
+			}, [d(e, { name: "format_bold" })], 42, ot),
 			l("button", {
 				title: T(p)("formattingBar.italicShortcut"),
 				"aria-label": T(p)("formattingBar.italic"),
-				class: m({ active: H.value.textFormatting.italic }),
-				onMousedown: r[9] ||= M((e) => Z("toggleItalic"), ["prevent"])
-			}, [d(t, { name: "format_italic" })], 42, nt),
+				class: m({ active: W.value.textFormatting.italic }),
+				onMousedown: r[17] ||= M((e) => Z("toggleItalic"), ["prevent"])
+			}, [d(e, { name: "format_italic" })], 42, st),
 			l("button", {
 				title: T(p)("formattingBar.underlineShortcut"),
 				"aria-label": T(p)("formattingBar.underline"),
-				class: m({ active: !!H.value.textFormatting.underline }),
-				onMousedown: r[10] ||= M((e) => Z("toggleUnderline"), ["prevent"])
-			}, [d(t, { name: "format_underlined" })], 42, rt),
+				class: m({ active: !!W.value.textFormatting.underline }),
+				onMousedown: r[18] ||= M((e) => Z("toggleUnderline"), ["prevent"])
+			}, [d(e, { name: "format_underlined" })], 42, ct),
 			l("button", {
 				title: T(p)("formattingBar.strikethrough"),
 				"aria-label": T(p)("formattingBar.strikethrough"),
-				class: m({ active: H.value.textFormatting.strike }),
-				onMousedown: r[11] ||= M((e) => Z("toggleStrike"), ["prevent"])
-			}, [d(t, { name: "strikethrough_s" })], 42, it),
-			d(_e, {
+				class: m({ active: W.value.textFormatting.strike }),
+				onMousedown: r[19] ||= M((e) => Z("toggleStrike"), ["prevent"])
+			}, [d(e, { name: "strikethrough_s" })], 42, lt),
+			d(be, {
 				mode: "text",
-				value: ne.value,
+				value: ie.value,
 				theme: n.theme ?? null,
-				onChange: le
+				onChange: he
 			}, null, 8, ["value", "theme"]),
-			d(_e, {
+			d(be, {
 				mode: "highlight",
-				value: re.value,
+				value: ae.value,
 				theme: n.theme ?? null,
-				onChange: de
+				onChange: _e
 			}, null, 8, ["value", "theme"]),
 			l("button", {
 				title: T(p)("formattingBar.insertLinkShortcut"),
 				"aria-label": T(p)("formattingBar.insertLink"),
-				onMousedown: r[12] ||= M((t) => e.$emit("insert-link"), ["prevent"])
-			}, [d(t, { name: "link" })], 40, at),
+				onMousedown: r[20] ||= M((e) => t.$emit("insert-link"), ["prevent"])
+			}, [d(e, { name: "link" })], 40, ut),
 			l("button", {
 				title: T(p)("formattingBar.superscriptShortcut"),
 				"aria-label": T(p)("formattingBar.superscript"),
-				class: m({ active: H.value.textFormatting.vertAlign === "superscript" }),
-				onMousedown: r[13] ||= M((e) => Z("toggleSuperscript"), ["prevent"])
-			}, [d(t, { name: "superscript" })], 42, ot),
+				class: m({ active: W.value.textFormatting.vertAlign === "superscript" }),
+				onMousedown: r[21] ||= M((e) => Z("toggleSuperscript"), ["prevent"])
+			}, [d(e, { name: "superscript" })], 42, dt),
 			l("button", {
 				title: T(p)("formattingBar.subscriptShortcut"),
 				"aria-label": T(p)("formattingBar.subscript"),
-				class: m({ active: H.value.textFormatting.vertAlign === "subscript" }),
-				onMousedown: r[14] ||= M((e) => Z("toggleSubscript"), ["prevent"])
-			}, [d(t, { name: "subscript" })], 42, st),
-			r[35] ||= l("span", { class: "divider" }, null, -1),
+				class: m({ active: W.value.textFormatting.vertAlign === "subscript" }),
+				onMousedown: r[22] ||= M((e) => Z("toggleSubscript"), ["prevent"])
+			}, [d(e, { name: "subscript" })], 42, ft),
+			r[43] ||= l("span", { class: "divider" }, null, -1),
 			l("div", {
 				class: "toolbar-dropdown",
 				ref_key: "alignDropdownRef",
-				ref: j
+				ref: N
 			}, [l("button", {
 				class: "toolbar-dropdown__trigger align-trigger",
-				onMousedown: r[15] ||= M((e) => T(V)("align"), ["prevent"]),
+				onMousedown: r[23] ||= M((e) => T(H)("align"), ["prevent"]),
+				"aria-expanded": T(I) === "align",
+				"aria-haspopup": "listbox",
 				title: T(p)("formattingBar.groups.alignment")
-			}, [d(t, { name: K.value }, null, 8, ["name"]), d(t, {
+			}, [d(e, { name: J.value }, null, 8, ["name"]), d(e, {
 				class: "chevron",
 				name: "arrow_drop_down",
 				size: 16
-			})], 40, ct), T(F) === "align" ? (v(), c("div", {
+			})], 40, pt), T(I) === "align" ? (v(), c("div", {
 				key: 0,
-				style: h(T(I)),
-				class: "toolbar-dropdown__menu align-menu"
+				style: h(T(V)),
+				class: "toolbar-dropdown__menu align-strip"
 			}, [
 				l("button", {
-					class: m(["toolbar-dropdown__item dropdown-item--icon", { active: G.value === "left" }]),
-					onMousedown: r[16] ||= M((e) => {
-						Z("alignLeft"), F.value = null;
+					class: m(["align-strip__btn", { active: q.value === "left" }]),
+					title: `${T(p)("alignment.alignLeft")} (${T(p)("alignment.alignLeftShortcut")})`,
+					onMousedown: r[24] ||= M((e) => {
+						Z("alignLeft"), I.value = null;
 					}, ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "format_align_left",
 					size: 18
-				}), u(" " + w(T(p)("alignment.alignLeft")) + " (" + w(T(p)("alignment.alignLeftShortcut")) + ") ", 1)], 34),
+				})], 42, mt),
 				l("button", {
-					class: m(["toolbar-dropdown__item dropdown-item--icon", { active: G.value === "center" }]),
-					onMousedown: r[17] ||= M((e) => {
-						Z("alignCenter"), F.value = null;
+					class: m(["align-strip__btn", { active: q.value === "center" }]),
+					title: `${T(p)("alignment.center")} (${T(p)("alignment.centerShortcut")})`,
+					onMousedown: r[25] ||= M((e) => {
+						Z("alignCenter"), I.value = null;
 					}, ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "format_align_center",
 					size: 18
-				}), u(" " + w(T(p)("alignment.center")) + " (" + w(T(p)("alignment.centerShortcut")) + ") ", 1)], 34),
+				})], 42, ht),
 				l("button", {
-					class: m(["toolbar-dropdown__item dropdown-item--icon", { active: G.value === "right" }]),
-					onMousedown: r[18] ||= M((e) => {
-						Z("alignRight"), F.value = null;
+					class: m(["align-strip__btn", { active: q.value === "right" }]),
+					title: `${T(p)("alignment.alignRight")} (${T(p)("alignment.alignRightShortcut")})`,
+					onMousedown: r[26] ||= M((e) => {
+						Z("alignRight"), I.value = null;
 					}, ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "format_align_right",
 					size: 18
-				}), u(" " + w(T(p)("alignment.alignRight")) + " (" + w(T(p)("alignment.alignRightShortcut")) + ") ", 1)], 34),
+				})], 42, gt),
 				l("button", {
-					class: m(["toolbar-dropdown__item dropdown-item--icon", { active: G.value === "both" }]),
-					onMousedown: r[19] ||= M((e) => {
-						Z("alignJustify"), F.value = null;
+					class: m(["align-strip__btn", { active: q.value === "both" }]),
+					title: `${T(p)("alignment.justify")} (${T(p)("alignment.justifyShortcut")})`,
+					onMousedown: r[27] ||= M((e) => {
+						Z("alignJustify"), I.value = null;
 					}, ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "format_align_justify",
 					size: 18
-				}), u(" " + w(T(p)("alignment.justify")) + " (" + w(T(p)("alignment.justifyShortcut")) + ") ", 1)], 34)
+				})], 42, _t)
 			], 4)) : s("", !0)], 512),
 			l("button", {
 				title: T(p)("lists.bulletList"),
 				"aria-label": T(p)("lists.bulletList"),
-				class: m({ active: H.value.inList && H.value.listType === "bullet" }),
-				onMousedown: r[20] ||= M((e) => Z("toggleBulletList"), ["prevent"])
-			}, [d(t, { name: "format_list_bulleted" })], 42, lt),
+				class: m({ active: W.value.inList && W.value.listType === "bullet" }),
+				onMousedown: r[28] ||= M((e) => Z("toggleBulletList"), ["prevent"])
+			}, [d(e, { name: "format_list_bulleted" })], 42, vt),
 			l("button", {
 				title: T(p)("lists.numberedList"),
 				"aria-label": T(p)("lists.numberedList"),
-				class: m({ active: H.value.inList && H.value.listType === "numbered" }),
-				onMousedown: r[21] ||= M((e) => Z("toggleNumberedList"), ["prevent"])
-			}, [d(t, { name: "format_list_numbered" })], 42, ut),
+				class: m({ active: W.value.inList && W.value.listType === "numbered" }),
+				onMousedown: r[29] ||= M((e) => Z("toggleNumberedList"), ["prevent"])
+			}, [d(e, { name: "format_list_numbered" })], 42, yt),
 			l("button", {
 				title: T(p)("lists.decreaseIndent"),
 				"aria-label": T(p)("lists.decreaseIndent"),
-				disabled: !Y.value,
-				onMousedown: r[22] ||= M((e) => Z("outdent"), ["prevent"])
-			}, [d(t, { name: "format_indent_decrease" })], 40, dt),
+				disabled: !re.value,
+				onMousedown: r[30] ||= M((e) => Z("outdent"), ["prevent"])
+			}, [d(e, { name: "format_indent_decrease" })], 40, bt),
 			l("button", {
 				title: T(p)("lists.increaseIndent"),
 				"aria-label": T(p)("lists.increaseIndent"),
-				onMousedown: r[23] ||= M((e) => Z("indent"), ["prevent"])
-			}, [d(t, { name: "format_indent_increase" })], 40, ft),
+				onMousedown: r[31] ||= M((e) => Z("indent"), ["prevent"])
+			}, [d(e, { name: "format_indent_increase" })], 40, xt),
 			l("div", {
 				class: "toolbar-dropdown",
 				ref_key: "spacingDropdownRef",
-				ref: N
+				ref: P
 			}, [l("button", {
 				class: "toolbar-dropdown__trigger",
-				onMousedown: r[24] ||= M((e) => T(V)("spacing"), ["prevent"]),
+				onMousedown: r[32] ||= M((e) => T(H)("spacing"), ["prevent"]),
+				"aria-expanded": T(I) === "spacing",
+				"aria-haspopup": "listbox",
 				title: T(p)("lineSpacing.label")
-			}, [d(t, { name: "format_line_spacing" }), d(t, {
+			}, [d(e, { name: "format_line_spacing" }), d(e, {
 				class: "chevron",
 				name: "arrow_drop_down",
 				size: 16
-			})], 40, pt), T(F) === "spacing" ? (v(), c("div", {
+			})], 40, St), T(I) === "spacing" ? (v(), c("div", {
 				key: 0,
-				style: h(T(I)),
+				style: h(T(V)),
 				class: "toolbar-dropdown__menu"
-			}, [(v(!0), c(i, null, x(T(Ie), (e) => (v(), c("button", {
+			}, [(v(!0), c(i, null, x(T(ze), (e) => (v(), c("button", {
 				key: e.value,
-				class: m(["toolbar-dropdown__item", { active: me(e.value) }]),
-				onMousedown: M((t) => pe(e.value), ["prevent"])
-			}, w(e.labelKey ? T(p)(e.labelKey) : e.label), 43, mt))), 128))], 4)) : s("", !0)], 512),
+				class: m(["toolbar-dropdown__item", { active: xe(e.value) }]),
+				onMousedown: M((t) => ye(e.value), ["prevent"])
+			}, w(e.labelKey ? T(p)(e.labelKey) : e.label), 43, Ct))), 128))], 4)) : s("", !0)], 512),
 			l("button", {
 				title: T(p)("formattingBar.clearFormatting"),
 				"aria-label": T(p)("formattingBar.clearFormatting"),
-				onMousedown: M(ue, ["prevent"])
-			}, [d(t, { name: "format_clear" })], 40, ht),
-			r[36] ||= l("span", { class: "divider" }, null, -1),
+				onMousedown: M(ge, ["prevent"])
+			}, [d(e, { name: "format_clear" })], 40, wt),
+			r[44] ||= l("span", { class: "divider" }, null, -1),
 			l("button", {
 				title: T(p)("formattingBar.commentsAndChanges"),
 				"aria-label": T(p)("formattingBar.commentsAndChanges"),
 				class: m({ active: n.commentsSidebarOpen }),
-				onMousedown: r[25] ||= M((t) => e.$emit("toggle-sidebar"), ["prevent"])
-			}, [d(t, { name: "comment" })], 42, gt),
+				onMousedown: r[33] ||= M((e) => t.$emit("toggle-sidebar"), ["prevent"])
+			}, [d(e, { name: "comment" })], 42, Tt),
 			n.imageContext ? (v(), c(i, { key: 1 }, [
-				r[30] ||= l("span", { class: "divider" }, null, -1),
-				d(je, {
+				r[38] ||= l("span", { class: "divider" }, null, -1),
+				d(Pe, {
 					"image-context": n.imageContext,
-					onChange: r[26] ||= (t) => e.$emit("image-wrap-type", t)
+					onChange: r[34] ||= (e) => t.$emit("image-wrap-type", e)
 				}, null, 8, ["image-context"]),
-				d(Me, { onTransform: r[27] ||= (t) => e.$emit("image-transform", t) }),
+				d(Fe, { onTransform: r[35] ||= (e) => t.$emit("image-transform", e) }),
 				l("button", {
 					title: T(p)("formattingBar.imagePropertiesShortcut"),
 					"aria-label": T(p)("formattingBar.imageProperties"),
-					onMousedown: r[28] ||= M((t) => e.$emit("image-properties"), ["prevent"])
-				}, [d(t, { name: "tune" })], 40, _t)
+					onMousedown: r[36] ||= M((e) => t.$emit("image-properties"), ["prevent"])
+				}, [d(e, { name: "tune" })], 40, Et)
 			], 64)) : s("", !0),
-			S(e.$slots, "table-context", {}, void 0, !0),
-			r[37] ||= l("span", { class: "divider" }, null, -1),
-			n.editorMode ? (v(), o(Ee, {
+			S(t.$slots, "table-context", {}, void 0, !0),
+			r[45] ||= l("span", { class: "divider" }, null, -1),
+			n.editorMode ? (v(), o(ke, {
 				key: 2,
 				"model-value": n.editorMode,
-				"onUpdate:modelValue": r[29] ||= (t) => e.$emit("mode-change", t)
+				"onUpdate:modelValue": r[37] ||= (e) => t.$emit("mode-change", e)
 			}, null, 8, ["model-value"])) : s("", !0),
-			S(e.$slots, "toolbar-extra", {}, void 0, !0)
+			S(t.$slots, "toolbar-extra", {}, void 0, !0)
 		])) : s("", !0);
 	}
-}), [["__scopeId", "data-v-9c584674"]]), yt = /* @__PURE__ */ f({
+}), [["__scopeId", "data-v-8271d639"]]), Ot = /* @__PURE__ */ f({
 	__name: "TableCellFillPicker",
 	props: {
 		disabled: { type: Boolean },
@@ -1323,16 +1394,16 @@ var ze = {
 		value: {}
 	},
 	emits: ["change"],
-	setup(t, { emit: n }) {
-		let r = n, { t: i } = e();
+	setup(e, { emit: n }) {
+		let r = n, { t: i } = t();
 		function a(e) {
 			typeof e == "string" && r("change", e === "none" ? "" : e.replace(/^#/, ""));
 		}
-		return (e, n) => (v(), o(_e, {
+		return (t, n) => (v(), o(be, {
 			mode: "highlight",
-			value: t.value,
-			theme: t.theme ?? null,
-			disabled: t.disabled,
+			value: e.value,
+			theme: e.theme ?? null,
+			disabled: e.disabled,
 			title: T(i)("table.cellFillColor"),
 			icon: "format_color_fill",
 			"auto-label": T(i)("colorPicker.noColor"),
@@ -1345,11 +1416,11 @@ var ze = {
 			"auto-label"
 		]));
 	}
-}), bt = ["disabled", "onClick"], xt = { class: "docx-tbp__panel" }, St = ["title", "onClick"], Ct = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), kt = ["disabled", "onClick"], At = { class: "docx-tbp__panel" }, jt = ["title", "onClick"], Mt = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "TableBorderPicker",
 	props: { disabled: { type: Boolean } },
 	emits: ["change"],
-	setup(e, { emit: n }) {
+	setup(t, { emit: n }) {
 		let r = n, a = b(!1), s = [
 			{
 				value: "all",
@@ -1413,27 +1484,27 @@ var ze = {
 			trigger: k(({ toggle: n }) => [l("button", {
 				type: "button",
 				class: "docx-tbp__btn",
-				disabled: e.disabled,
+				disabled: t.disabled,
 				title: "Borders",
 				onClick: M(n, ["prevent"])
-			}, [d(t, {
+			}, [d(e, {
 				name: "border_all",
 				size: 20
-			})], 8, bt)]),
-			panel: k(() => [l("div", xt, [(v(), c(i, null, x(s, (e) => l("button", {
-				key: e.value,
+			})], 8, kt)]),
+			panel: k(() => [l("div", At, [(v(), c(i, null, x(s, (t) => l("button", {
+				key: t.value,
 				type: "button",
 				class: "docx-tbp__option",
-				title: e.label,
-				onClick: M((t) => u(e.value), ["prevent"])
-			}, [d(t, {
-				name: e.icon,
+				title: t.label,
+				onClick: M((e) => u(t.value), ["prevent"])
+			}, [d(e, {
+				name: t.icon,
 				size: 20
-			}, null, 8, ["name"])], 8, St)), 64))])]),
+			}, null, 8, ["name"])], 8, jt)), 64))])]),
 			_: 1
 		}, 8, ["open"]));
 	}
-}), [["__scopeId", "data-v-51d7b6e0"]]), wt = /* @__PURE__ */ f({
+}), [["__scopeId", "data-v-47032801"]]), Nt = /* @__PURE__ */ f({
 	__name: "TableBorderColorPicker",
 	props: {
 		disabled: { type: Boolean },
@@ -1441,16 +1512,16 @@ var ze = {
 		value: {}
 	},
 	emits: ["change"],
-	setup(t, { emit: n }) {
-		let r = n, { t: i } = e();
+	setup(e, { emit: n }) {
+		let r = n, { t: i } = t();
 		function a(e) {
 			typeof e == "string" ? r("change", e.replace(/^#/, "")) : e.rgb ? r("change", e.rgb.replace(/^#/, "")) : e.auto && r("change", "000000");
 		}
-		return (e, n) => (v(), o(_e, {
+		return (t, n) => (v(), o(be, {
 			mode: "border",
-			value: t.value,
-			theme: t.theme ?? null,
-			disabled: t.disabled,
+			value: e.value,
+			theme: e.theme ?? null,
+			disabled: e.disabled,
 			title: T(i)("table.borderColor"),
 			onChange: a
 		}, null, 8, [
@@ -1460,11 +1531,11 @@ var ze = {
 			"title"
 		]));
 	}
-}), Tt = ["disabled", "onClick"], Et = { class: "docx-tbwidth__panel" }, Dt = ["onClick"], Ot = { class: "docx-tbwidth__label" }, kt = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), Pt = ["disabled", "onClick"], Ft = { class: "docx-tbwidth__panel" }, It = ["onClick"], Lt = { class: "docx-tbwidth__label" }, Rt = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "TableBorderWidthPicker",
 	props: { disabled: { type: Boolean } },
 	emits: ["change"],
-	setup(e, { emit: n }) {
+	setup(t, { emit: n }) {
 		let r = n, a = b(!1), s = [
 			{
 				label: "0.5pt",
@@ -1518,14 +1589,14 @@ var ze = {
 			trigger: k(({ toggle: n }) => [l("button", {
 				type: "button",
 				class: "docx-tbwidth__btn",
-				disabled: e.disabled,
+				disabled: t.disabled,
 				title: "Border width",
 				onClick: M(n, ["prevent"])
-			}, [d(t, {
+			}, [d(e, {
 				name: "line_weight",
 				size: 20
-			})], 8, Tt)]),
-			panel: k(() => [l("div", Et, [(v(), c(i, null, x(s, (e) => l("button", {
+			})], 8, Pt)]),
+			panel: k(() => [l("div", Ft, [(v(), c(i, null, x(s, (e) => l("button", {
 				key: e.eighths,
 				type: "button",
 				class: "docx-tbwidth__option",
@@ -1533,27 +1604,27 @@ var ze = {
 			}, [l("span", {
 				class: "docx-tbwidth__preview",
 				style: h({ borderTopWidth: e.previewPx + "px" })
-			}, null, 4), l("span", Ot, w(e.label), 1)], 8, Dt)), 64))])]),
+			}, null, 4), l("span", Lt, w(e.label), 1)], 8, It)), 64))])]),
 			_: 1
 		}, 8, ["open"]));
 	}
-}), [["__scopeId", "data-v-c134095d"]]), At = [
+}), [["__scopeId", "data-v-f11ca0b1"]]), zt = [
 	"disabled",
 	"title",
 	"onClick"
-], jt = ["aria-label"], Mt = ["disabled"], Nt = ["disabled"], Pt = ["disabled"], Ft = ["disabled"], It = { class: "docx-tmore__section-label" }, Lt = { class: "docx-tmore__icon-row" }, Rt = ["title"], zt = ["title"], Bt = ["title"], Vt = { class: "docx-tmore__section-label" }, Ht = { class: "docx-tmore__icon-row" }, Ut = ["title"], Wt = ["title"], Gt = ["title"], Kt = { class: "docx-tmore__grow" }, qt = {
+], Bt = ["aria-label"], Vt = ["disabled"], Ht = ["disabled"], Ut = ["disabled"], Wt = ["disabled"], Gt = { class: "docx-tmore__section-label" }, Kt = { class: "docx-tmore__icon-row" }, qt = ["title"], Jt = ["title"], Yt = ["title"], Xt = { class: "docx-tmore__section-label" }, Zt = { class: "docx-tmore__icon-row" }, Qt = ["title"], $t = ["title"], en = ["title"], tn = { class: "docx-tmore__grow" }, nn = {
 	key: 0,
 	class: "docx-tmore__sub"
-}, Jt = { class: "docx-tmore__margin-grid" }, Yt = { class: "docx-tmore__field-label" }, Xt = ["onUpdate:modelValue"], Zt = { class: "docx-tmore__grow" }, Qt = {
+}, rn = { class: "docx-tmore__margin-grid" }, an = { class: "docx-tmore__field-label" }, on = ["onUpdate:modelValue"], sn = { class: "docx-tmore__grow" }, cn = {
 	key: 1,
 	class: "docx-tmore__sub"
-}, $t = { class: "docx-tmore__row-field" }, en = { class: "docx-tmore__field-label" }, tn = { value: "auto" }, nn = { value: "atLeast" }, rn = { value: "exact" }, an = {
+}, ln = { class: "docx-tmore__row-field" }, un = { class: "docx-tmore__field-label" }, dn = { value: "auto" }, fn = { value: "atLeast" }, pn = { value: "exact" }, mn = {
 	key: 0,
 	class: "docx-tmore__row-field"
-}, on = { class: "docx-tmore__field-label" }, sn = { class: "docx-tmore__grow" }, cn = {
+}, hn = { class: "docx-tmore__field-label" }, gn = { class: "docx-tmore__grow" }, _n = {
 	key: 2,
 	class: "docx-tmore__sub docx-tmore__sub--list"
-}, ln = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}, vn = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "TableMoreDropdown",
 	props: {
 		disabled: {
@@ -1579,7 +1650,7 @@ var ze = {
 		"row-height"
 	],
 	setup(n, { emit: r }) {
-		let a = n, u = r, { t: f } = e(), p = b(!1), h = b(!1), g = b(!1), _ = b(!1), S = y({
+		let a = n, u = r, { t: f } = t(), p = b(!1), h = b(!1), g = b(!1), _ = b(!1), S = y({
 			top: 0,
 			bottom: 0,
 			left: 108,
@@ -1616,22 +1687,22 @@ var ze = {
 		function R(e) {
 			u("cell-text-direction", e), p.value = !1;
 		}
-		return (e, r) => (v(), o(Q, {
+		return (t, r) => (v(), o(Q, {
 			open: p.value,
 			placement: "bottom-right",
 			"onUpdate:open": r[34] ||= (e) => p.value = e,
 			onClose: r[35] ||= (e) => p.value = !1
 		}, {
-			trigger: k(({ toggle: e }) => [l("button", {
+			trigger: k(({ toggle: t }) => [l("button", {
 				type: "button",
 				class: m(["docx-tmore__btn", { "docx-tmore__btn--open": p.value }]),
 				disabled: n.disabled,
 				title: T(f)("tableAdvanced.tableOptions"),
-				onClick: M(e, ["prevent"])
-			}, [d(t, {
+				onClick: M(t, ["prevent"])
+			}, [d(e, {
 				name: "more_vert",
 				size: 20
-			})], 10, At)]),
+			})], 10, zt)]),
 			panel: k(() => [l("div", {
 				class: "docx-tmore__panel",
 				role: "menu",
@@ -1641,7 +1712,7 @@ var ze = {
 					type: "button",
 					class: "docx-tmore__item",
 					onClick: r[0] ||= M((e) => P("addRowAbove"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "add",
 					size: 18
 				}), l("span", null, w(T(f)("table.insertRowAbove")), 1)]),
@@ -1649,7 +1720,7 @@ var ze = {
 					type: "button",
 					class: "docx-tmore__item",
 					onClick: r[1] ||= M((e) => P("addRowBelow"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "add",
 					size: 18
 				}), l("span", null, w(T(f)("table.insertRowBelow")), 1)]),
@@ -1657,7 +1728,7 @@ var ze = {
 					type: "button",
 					class: "docx-tmore__item",
 					onClick: r[2] ||= M((e) => P("addColumnLeft"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "add",
 					size: 18
 				}), l("span", null, w(T(f)("table.insertColumnLeft")), 1)]),
@@ -1665,7 +1736,7 @@ var ze = {
 					type: "button",
 					class: "docx-tmore__item",
 					onClick: r[3] ||= M((e) => P("addColumnRight"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "add",
 					size: 18
 				}), l("span", null, w(T(f)("table.insertColumnRight")), 1)]),
@@ -1675,113 +1746,113 @@ var ze = {
 					class: "docx-tmore__item",
 					disabled: N("mergeCells"),
 					onClick: r[4] ||= M((e) => P("mergeCells"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "call_merge",
 					size: 18
-				}), l("span", null, w(T(f)("table.mergeCells")), 1)], 8, Mt),
+				}), l("span", null, w(T(f)("table.mergeCells")), 1)], 8, Vt),
 				l("button", {
 					type: "button",
 					class: "docx-tmore__item",
 					disabled: N("splitCell"),
 					onClick: r[5] ||= M((e) => P("splitCell"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "call_split",
 					size: 18
-				}), l("span", null, w(T(f)("table.splitCell")), 1)], 8, Nt),
+				}), l("span", null, w(T(f)("table.splitCell")), 1)], 8, Ht),
 				r[39] ||= l("div", { class: "docx-tmore__separator" }, null, -1),
 				l("button", {
 					type: "button",
 					class: "docx-tmore__item docx-tmore__item--danger",
 					disabled: N("deleteRow"),
 					onClick: r[6] ||= M((e) => P("deleteRow"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "delete",
 					size: 18
-				}), l("span", null, w(T(f)("table.deleteRow")), 1)], 8, Pt),
+				}), l("span", null, w(T(f)("table.deleteRow")), 1)], 8, Ut),
 				l("button", {
 					type: "button",
 					class: "docx-tmore__item docx-tmore__item--danger",
 					disabled: N("deleteColumn"),
 					onClick: r[7] ||= M((e) => P("deleteColumn"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "delete",
 					size: 18
-				}), l("span", null, w(T(f)("table.deleteColumn")), 1)], 8, Ft),
+				}), l("span", null, w(T(f)("table.deleteColumn")), 1)], 8, Wt),
 				l("button", {
 					type: "button",
 					class: "docx-tmore__item docx-tmore__item--danger",
 					onClick: r[8] ||= M((e) => P("deleteTable"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "delete",
 					size: 18
 				}), l("span", null, w(T(f)("table.deleteTable")), 1)]),
 				r[40] ||= l("div", { class: "docx-tmore__separator" }, null, -1),
-				l("div", It, w(T(f)("tableAdvanced.verticalAlignment")), 1),
-				l("div", Lt, [
+				l("div", Gt, w(T(f)("tableAdvanced.verticalAlignment")), 1),
+				l("div", Kt, [
 					l("button", {
 						type: "button",
 						class: "docx-tmore__icon-btn",
 						title: T(f)("tableAdvanced.top"),
 						onMousedown: r[9] ||= M(() => {}, ["prevent"]),
 						onClick: r[10] ||= M((e) => P("verticalAlignTop"), ["prevent"])
-					}, [d(t, {
+					}, [d(e, {
 						name: "vertical_align_top",
 						size: 16
-					})], 40, Rt),
+					})], 40, qt),
 					l("button", {
 						type: "button",
 						class: "docx-tmore__icon-btn",
 						title: T(f)("tableAdvanced.middle"),
 						onMousedown: r[11] ||= M(() => {}, ["prevent"]),
 						onClick: r[12] ||= M((e) => P("verticalAlignMiddle"), ["prevent"])
-					}, [d(t, {
+					}, [d(e, {
 						name: "vertical_align_center",
 						size: 16
-					})], 40, zt),
+					})], 40, Jt),
 					l("button", {
 						type: "button",
 						class: "docx-tmore__icon-btn",
 						title: T(f)("tableAdvanced.bottom"),
 						onMousedown: r[13] ||= M(() => {}, ["prevent"]),
 						onClick: r[14] ||= M((e) => P("verticalAlignBottom"), ["prevent"])
-					}, [d(t, {
+					}, [d(e, {
 						name: "vertical_align_bottom",
 						size: 16
-					})], 40, Bt)
+					})], 40, Yt)
 				]),
 				r[41] ||= l("div", { class: "docx-tmore__separator" }, null, -1),
-				l("div", Vt, w(T(f)("tableAdvanced.tableAlignment")), 1),
-				l("div", Ht, [
+				l("div", Xt, w(T(f)("tableAdvanced.tableAlignment")), 1),
+				l("div", Zt, [
 					l("button", {
 						type: "button",
 						class: m(["docx-tmore__icon-btn", { "docx-tmore__icon-btn--active": n.currentJustification === "left" }]),
 						title: T(f)("tableAdvanced.alignTableLeft"),
 						onMousedown: r[15] ||= M(() => {}, ["prevent"]),
 						onClick: r[16] ||= M((e) => P("alignTableLeft"), ["prevent"])
-					}, [d(t, {
+					}, [d(e, {
 						name: "format_align_left",
 						size: 16
-					})], 42, Ut),
+					})], 42, Qt),
 					l("button", {
 						type: "button",
 						class: m(["docx-tmore__icon-btn", { "docx-tmore__icon-btn--active": n.currentJustification === "center" }]),
 						title: T(f)("tableAdvanced.alignTableCenter"),
 						onMousedown: r[17] ||= M(() => {}, ["prevent"]),
 						onClick: r[18] ||= M((e) => P("alignTableCenter"), ["prevent"])
-					}, [d(t, {
+					}, [d(e, {
 						name: "format_align_center",
 						size: 16
-					})], 42, Wt),
+					})], 42, $t),
 					l("button", {
 						type: "button",
 						class: m(["docx-tmore__icon-btn", { "docx-tmore__icon-btn--active": n.currentJustification === "right" }]),
 						title: T(f)("tableAdvanced.alignTableRight"),
 						onMousedown: r[19] ||= M(() => {}, ["prevent"]),
 						onClick: r[20] ||= M((e) => P("alignTableRight"), ["prevent"])
-					}, [d(t, {
+					}, [d(e, {
 						name: "format_align_right",
 						size: 16
-					})], 42, Gt)
+					})], 42, en)
 				]),
 				r[42] ||= l("div", { class: "docx-tmore__separator" }, null, -1),
 				l("button", {
@@ -1789,17 +1860,17 @@ var ze = {
 					class: "docx-tmore__item",
 					onClick: r[21] ||= M((e) => h.value = !h.value, ["prevent"])
 				}, [
-					d(t, {
+					d(e, {
 						name: "padding",
 						size: 18
 					}),
-					l("span", Kt, w(T(f)("tableAdvanced.cellMargins")), 1),
-					d(t, {
+					l("span", tn, w(T(f)("tableAdvanced.cellMargins")), 1),
+					d(e, {
 						name: h.value ? "expand_less" : "expand_more",
 						size: 18
 					}, null, 8, ["name"])
 				]),
-				h.value ? (v(), c("div", qt, [l("div", Jt, [(v(), c(i, null, x([
+				h.value ? (v(), c("div", nn, [l("div", rn, [(v(), c(i, null, x([
 					"top",
 					"bottom",
 					"left",
@@ -1808,14 +1879,14 @@ var ze = {
 					key: e,
 					class: "docx-tmore__field"
 				}, [
-					l("span", Yt, w(e), 1),
+					l("span", an, w(e), 1),
 					A(l("input", {
 						type: "number",
 						min: "0",
 						step: "20",
 						"onUpdate:modelValue": (t) => S[e] = t,
 						class: "docx-tmore__input"
-					}, null, 8, Xt), [[
+					}, null, 8, on), [[
 						D,
 						S[e],
 						void 0,
@@ -1832,27 +1903,27 @@ var ze = {
 					class: "docx-tmore__item",
 					onClick: r[22] ||= M((e) => g.value = !g.value, ["prevent"])
 				}, [
-					d(t, {
+					d(e, {
 						name: "height",
 						size: 18
 					}),
-					l("span", Zt, w(T(f)("tableAdvanced.rowHeight")), 1),
-					d(t, {
+					l("span", sn, w(T(f)("tableAdvanced.rowHeight")), 1),
+					d(e, {
 						name: g.value ? "expand_less" : "expand_more",
 						size: 18
 					}, null, 8, ["name"])
 				]),
-				g.value ? (v(), c("div", Qt, [
-					l("label", $t, [l("span", en, w(T(f)("tableAdvanced.rule")), 1), A(l("select", {
+				g.value ? (v(), c("div", cn, [
+					l("label", ln, [l("span", un, w(T(f)("tableAdvanced.rule")), 1), A(l("select", {
 						"onUpdate:modelValue": r[23] ||= (e) => j.value = e,
 						class: "docx-tmore__select"
 					}, [
-						l("option", tn, w(T(f)("tableAdvanced.heightRules.auto")), 1),
-						l("option", nn, w(T(f)("tableAdvanced.heightRules.atLeast")), 1),
-						l("option", rn, w(T(f)("tableAdvanced.heightRules.exact")), 1)
+						l("option", dn, w(T(f)("tableAdvanced.heightRules.auto")), 1),
+						l("option", fn, w(T(f)("tableAdvanced.heightRules.atLeast")), 1),
+						l("option", pn, w(T(f)("tableAdvanced.heightRules.exact")), 1)
 					], 512), [[E, j.value]])]),
-					j.value === "auto" ? s("", !0) : (v(), c("label", an, [
-						l("span", on, w(T(f)("tableAdvanced.height")), 1),
+					j.value === "auto" ? s("", !0) : (v(), c("label", mn, [
+						l("span", hn, w(T(f)("tableAdvanced.height")), 1),
 						A(l("input", {
 							type: "number",
 							min: "0",
@@ -1878,17 +1949,17 @@ var ze = {
 					class: "docx-tmore__item",
 					onClick: r[25] ||= M((e) => _.value = !_.value, ["prevent"])
 				}, [
-					d(t, {
+					d(e, {
 						name: "text_rotation_none",
 						size: 18
 					}),
-					l("span", sn, w(T(f)("tableAdvanced.textDirection")), 1),
-					d(t, {
+					l("span", gn, w(T(f)("tableAdvanced.textDirection")), 1),
+					d(e, {
 						name: _.value ? "expand_less" : "expand_more",
 						size: 18
 					}, null, 8, ["name"])
 				]),
-				_.value ? (v(), c("div", cn, [
+				_.value ? (v(), c("div", _n, [
 					l("button", {
 						type: "button",
 						class: "docx-tmore__sub-item",
@@ -1910,7 +1981,7 @@ var ze = {
 					type: "button",
 					class: "docx-tmore__item",
 					onClick: r[29] ||= M((e) => P("toggleHeaderRow"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "table_rows",
 					size: 18
 				}), l("span", null, w(T(f)("tableAdvanced.toggleHeaderRow")), 1)]),
@@ -1918,7 +1989,7 @@ var ze = {
 					type: "button",
 					class: "docx-tmore__item",
 					onClick: r[30] ||= M((e) => P("distributeColumns"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "view_column",
 					size: 18
 				}), l("span", null, w(T(f)("tableAdvanced.distributeColumns")), 1)]),
@@ -1926,7 +1997,7 @@ var ze = {
 					type: "button",
 					class: "docx-tmore__item",
 					onClick: r[31] ||= M((e) => P("autoFit"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "fit_width",
 					size: 18
 				}), l("span", null, w(T(f)("tableAdvanced.autoFit")), 1)]),
@@ -1934,7 +2005,7 @@ var ze = {
 					type: "button",
 					class: "docx-tmore__item",
 					onClick: r[32] ||= M((e) => P("toggleNoWrap"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "wrap_text",
 					size: 18
 				}), l("span", null, w(T(f)("tableAdvanced.toggleNoWrap")), 1)]),
@@ -1943,15 +2014,15 @@ var ze = {
 					type: "button",
 					class: "docx-tmore__item",
 					onClick: r[33] ||= M((e) => P("tableProperties"), ["prevent"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "settings",
 					size: 18
 				}), l("span", null, w(T(f)("tableAdvanced.tableProperties")), 1)])
-			], 8, jt)]),
+			], 8, Bt)]),
 			_: 1
 		}, 8, ["open"]));
 	}
-}), [["__scopeId", "data-v-dbab3895"]]), un = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), [["__scopeId", "data-v-27bf8a6f"]]), yn = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "TableToolbar",
 	props: {
 		view: {},
@@ -1963,7 +2034,7 @@ var ze = {
 		let t = e, n = a(() => {
 			t.stateTick;
 			let e = t.view;
-			return e ? V(e.state) : null;
+			return e ? U(e.state) : null;
 		}), r = a(() => !!n.value?.isInTable), o = a(() => {
 			t.stateTick;
 			let e = t.view;
@@ -1985,7 +2056,7 @@ var ze = {
 		O([() => t.view, () => t.stateTick], () => {
 			let e = t.view;
 			if (!e) return;
-			let n = V(e.state), r = n.cellBorderColor;
+			let n = U(e.state), r = n.cellBorderColor;
 			!r || !n.isInTable || typeof r == "object" && "rgb" in r && typeof r.rgb == "string" && (h.color = { rgb: r.rgb });
 		}, { immediate: !0 });
 		function g(e, ...n) {
@@ -2058,17 +2129,17 @@ var ze = {
 		}
 		return (t, n) => r.value ? (v(), c(i, { key: 0 }, [
 			n[0] ||= l("span", { class: "divider" }, null, -1),
-			d(Ct, { onChange: _ }),
-			d(wt, {
+			d(Mt, { onChange: _ }),
+			d(Nt, {
 				theme: e.theme ?? null,
 				onChange: y
 			}, null, 8, ["theme"]),
-			d(kt, { onChange: b }),
-			d(yt, {
+			d(Rt, { onChange: b }),
+			d(Ot, {
 				theme: e.theme ?? null,
 				onChange: x
 			}, null, 8, ["theme"]),
-			d(ln, {
+			d(vn, {
 				"can-split": o.value,
 				"can-merge": u.value,
 				"row-count": f.value,
@@ -2087,18 +2158,18 @@ var ze = {
 			])
 		], 64)) : s("", !0);
 	}
-}), [["__scopeId", "data-v-56725acf"]]), dn = /* @__PURE__ */ f({
+}), [["__scopeId", "data-v-b9fbce78"]]), bn = /* @__PURE__ */ f({
 	__name: "Avatar",
 	props: {
 		name: { default: "U" },
 		size: { default: 32 }
 	},
 	setup(e) {
-		let t = e, n = a(() => G(t.name || "U")), r = a(() => ({
+		let t = e, n = a(() => q(t.name || "U")), r = a(() => ({
 			width: t.size + "px",
 			height: t.size + "px",
 			borderRadius: "50%",
-			backgroundColor: U(t.name || "U"),
+			backgroundColor: G(t.name || "U"),
 			color: "#fff",
 			display: "flex",
 			alignItems: "center",
@@ -2112,13 +2183,13 @@ var ze = {
 			style: h(r.value)
 		}, w(n.value), 5));
 	}
-}), fn = {
+}), xn = {
 	key: 0,
 	class: "reply-thread"
-}, pn = {
+}, Sn = {
 	key: 0,
 	class: "reply-thread__more"
-}, mn = { class: "reply-thread__header" }, hn = { class: "reply-thread__author-block" }, gn = { class: "reply-thread__author" }, _n = { class: "reply-thread__date" }, vn = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}, Cn = { class: "reply-thread__header" }, wn = { class: "reply-thread__author-block" }, Tn = { class: "reply-thread__author" }, En = { class: "reply-thread__date" }, Dn = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "ReplyThread",
 	props: {
 		replies: {},
@@ -2126,15 +2197,15 @@ var ze = {
 	},
 	setup(e) {
 		let t = e, n = a(() => t.isExpanded ? t.replies : t.replies.slice(-1)), r = a(() => t.isExpanded ? 0 : Math.max(0, t.replies.length - 1));
-		return (t, a) => e.replies.length > 0 ? (v(), c("div", fn, [r.value > 0 ? (v(), c("div", pn, w(r.value) + " " + w(r.value === 1 ? "reply" : "replies"), 1)) : s("", !0), (v(!0), c(i, null, x(n.value, (t) => (v(), c("div", {
+		return (t, a) => e.replies.length > 0 ? (v(), c("div", xn, [r.value > 0 ? (v(), c("div", Sn, w(r.value) + " " + w(r.value === 1 ? "reply" : "replies"), 1)) : s("", !0), (v(!0), c(i, null, x(n.value, (t) => (v(), c("div", {
 			key: t.id,
 			class: m(["reply-thread__item", { "reply-thread__item--expanded": e.isExpanded }])
-		}, [l("div", mn, [d(dn, {
+		}, [l("div", Cn, [d(bn, {
 			name: t.author,
 			size: 28
-		}, null, 8, ["name"]), l("div", hn, [l("div", gn, w(t.author || "Unknown"), 1), l("div", _n, w(T(H)(t.date)), 1)])]), l("div", { class: m(["reply-thread__body", { "reply-thread__body--clamp": !e.isExpanded }]) }, w(T(W)(t.content)), 3)], 2))), 128))])) : s("", !0);
+		}, null, 8, ["name"]), l("div", wn, [l("div", Tn, w(t.author || "Unknown"), 1), l("div", En, w(T(W)(t.date)), 1)])]), l("div", { class: m(["reply-thread__body", { "reply-thread__body--clamp": !e.isExpanded }]) }, w(T(K)(t.content)), 3)], 2))), 128))])) : s("", !0);
 	}
-}), [["__scopeId", "data-v-fc8a461d"]]), yn = ["onKeydown"], bn = { class: "reply-input__actions" }, xn = ["disabled"], Sn = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), [["__scopeId", "data-v-9634d553"]]), On = ["onKeydown"], kn = { class: "reply-input__actions" }, An = ["disabled"], jn = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "ReplyInput",
 	emits: ["submit"],
 	setup(e, { emit: t }) {
@@ -2166,14 +2237,14 @@ var ze = {
 				j(M(h, ["prevent"]), ["enter"]),
 				j(f, ["esc"])
 			]
-		}, null, 40, yn), [[D, o.value]]), l("div", bn, [l("button", {
+		}, null, 40, On), [[D, o.value]]), l("div", kn, [l("button", {
 			class: "reply-input__cancel",
 			onClick: M(f, ["stop"])
 		}, "Cancel"), l("button", {
 			class: m(["reply-input__submit", { "reply-input__submit--active": u.value }]),
 			disabled: !u.value,
 			onClick: M(h, ["stop"])
-		}, "Reply", 10, xn)])], 64)) : (v(), c("input", {
+		}, "Reply", 10, An)])], 64)) : (v(), c("input", {
 			key: 0,
 			readonly: "",
 			placeholder: "Reply",
@@ -2182,13 +2253,13 @@ var ze = {
 			onClick: M(d, ["stop"])
 		}, null, 32))], 32));
 	}
-}), [["__scopeId", "data-v-aa3d5b08"]]), Cn = ["data-comment-id"], wn = {
+}), [["__scopeId", "data-v-1cfd229c"]]), Mn = ["data-comment-id"], Nn = {
 	key: 0,
 	class: "comment-card__resolved"
-}, Tn = { class: "comment-card__head" }, En = { class: "comment-card__author-block" }, Dn = { class: "comment-card__author" }, On = { class: "comment-card__date" }, kn = {
+}, Pn = { class: "comment-card__head" }, Fn = { class: "comment-card__author-block" }, In = { class: "comment-card__author" }, Ln = { class: "comment-card__date" }, Rn = {
 	key: 0,
 	class: "comment-card__actions"
-}, An = ["title"], jn = { class: "comment-card__body" }, Mn = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}, zn = ["title"], Bn = { class: "comment-card__body" }, Vn = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "CommentCard",
 	props: {
 		comment: {},
@@ -2202,41 +2273,41 @@ var ze = {
 		"unresolve",
 		"delete"
 	],
-	setup(e, { emit: n }) {
-		let r = e, i = n, a = b(!1);
+	setup(t, { emit: n }) {
+		let r = t, i = n, a = b(!1);
 		function u() {
 			a.value = !1, i("delete", r.comment.id);
 		}
 		return (n, r) => (v(), c("div", {
-			class: m(["comment-card", { "comment-card--expanded": e.expanded }]),
-			"data-comment-id": e.comment.id,
+			class: m(["comment-card", { "comment-card--expanded": t.expanded }]),
+			"data-comment-id": t.comment.id,
 			onClick: r[5] ||= (e) => n.$emit("click"),
 			onMousedown: r[6] ||= M(() => {}, ["stop"])
 		}, [
-			e.comment.done ? (v(), c("div", wn, [d(t, {
+			t.comment.done ? (v(), c("div", Nn, [d(e, {
 				name: "check",
 				size: 12
 			}), r[7] ||= l("span", null, "Resolved", -1)])) : s("", !0),
-			l("div", Tn, [
-				d(dn, {
-					name: e.comment.author,
+			l("div", Pn, [
+				d(bn, {
+					name: t.comment.author,
 					size: 32
 				}, null, 8, ["name"]),
-				l("div", En, [l("div", Dn, w(e.comment.author || "Unknown"), 1), l("div", On, w(T(H)(e.comment.date)), 1)]),
-				e.expanded ? (v(), c("div", kn, [
+				l("div", Fn, [l("div", In, w(t.comment.author || "Unknown"), 1), l("div", Ln, w(T(W)(t.comment.date)), 1)]),
+				t.expanded ? (v(), c("div", Rn, [
 					l("button", {
 						class: "comment-card__icon-btn",
-						title: e.comment.done ? "Reopen" : "Resolve",
-						onClick: r[0] ||= M((t) => e.comment.done ? n.$emit("unresolve", e.comment.id) : n.$emit("resolve", e.comment.id), ["stop"])
-					}, [d(t, {
-						name: e.comment.done ? "undo" : "check",
+						title: t.comment.done ? "Reopen" : "Resolve",
+						onClick: r[0] ||= M((e) => t.comment.done ? n.$emit("unresolve", t.comment.id) : n.$emit("resolve", t.comment.id), ["stop"])
+					}, [d(e, {
+						name: t.comment.done ? "undo" : "check",
 						size: 20
-					}, null, 8, ["name"])], 8, An),
+					}, null, 8, ["name"])], 8, zn),
 					l("button", {
 						class: "comment-card__icon-btn",
 						title: "More options",
 						onClick: r[1] ||= M((e) => a.value = !a.value, ["stop"])
-					}, [d(t, {
+					}, [d(e, {
 						name: "more_vert",
 						size: 20
 					})]),
@@ -2251,74 +2322,75 @@ var ze = {
 					}, "Delete")], 32)) : s("", !0)
 				])) : s("", !0)
 			]),
-			l("div", jn, w(T(W)(e.comment.content)), 1),
-			d(vn, {
-				replies: e.replies,
-				"is-expanded": e.expanded
+			l("div", Bn, w(T(K)(t.comment.content)), 1),
+			d(Dn, {
+				replies: t.replies,
+				"is-expanded": t.expanded
 			}, null, 8, ["replies", "is-expanded"]),
-			e.expanded && !e.comment.done ? (v(), o(Sn, {
+			t.expanded && !t.comment.done ? (v(), o(jn, {
 				key: 1,
-				onSubmit: r[4] ||= (t) => n.$emit("reply", e.comment.id, t)
+				onSubmit: r[4] ||= (e) => n.$emit("reply", t.comment.id, e)
 			})) : s("", !0)
-		], 42, Cn));
+		], 42, Mn));
 	}
-}), [["__scopeId", "data-v-b9e94a26"]]), Nn = ["data-comment-id"], Pn = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), [["__scopeId", "data-v-fc5f60de"]]), Hn = ["data-comment-id"], Un = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "ResolvedCommentMarker",
 	props: { comment: {} },
 	emits: ["toggle-expand"],
-	setup(e) {
+	setup(t) {
 		return (n, r) => (v(), c("div", {
 			class: "resolved-comment-marker",
-			"data-comment-id": e.comment.id,
+			"data-comment-id": t.comment.id,
 			"data-comment-resolved": "true",
 			onClick: r[0] ||= (e) => n.$emit("toggle-expand"),
 			onMousedown: r[1] ||= M(() => {}, ["stop"])
-		}, [d(t, {
+		}, [d(e, {
 			name: "chat_bubble_check",
 			size: 20
-		})], 40, Nn));
+		})], 40, Hn));
 	}
-}), [["__scopeId", "data-v-c3b210c1"]]), Fn = { class: "tc-card__head" }, In = { class: "tc-card__author-block" }, Ln = { class: "tc-card__author" }, Rn = {
+}), [["__scopeId", "data-v-c4b9639d"]]), Wn = { class: "tc-card__head" }, Gn = { class: "tc-card__author-block" }, Kn = { class: "tc-card__author" }, qn = {
 	key: 0,
 	class: "tc-card__date"
-}, zn = {
+}, Jn = {
 	key: 0,
 	class: "tc-card__actions"
-}, Bn = ["title"], Vn = ["title"], Hn = { class: "tc-card__body" }, Un = { class: "tc-card__deleted" }, Wn = { class: "tc-card__inserted" }, Gn = { class: "tc-card__inserted" }, Kn = { class: "tc-card__deleted" }, qn = { class: "tc-card__changed" }, Jn = {
+}, Yn = ["title"], Xn = ["title"], Zn = { class: "tc-card__body" }, Qn = { class: "tc-card__deleted" }, $n = { class: "tc-card__inserted" }, er = { class: "tc-card__inserted" }, tr = { class: "tc-card__deleted" }, nr = { class: "tc-card__changed" }, rr = {
 	key: 4,
 	class: "tc-card__inserted"
-}, Yn = {
+}, ir = {
 	key: 5,
 	class: "tc-card__deleted"
-}, Xn = {
+}, ar = {
 	key: 6,
 	class: "tc-card__inserted"
-}, Zn = {
+}, or = {
 	key: 7,
 	class: "tc-card__deleted"
-}, Qn = {
+}, sr = {
 	key: 8,
 	class: "tc-card__changed"
-}, $n = {
+}, cr = {
 	key: 9,
 	class: "tc-card__changed"
-}, er = {
+}, lr = {
 	key: 10,
 	class: "tc-card__changed"
-}, tr = {
+}, ur = {
 	key: 11,
 	class: "tc-card__changed"
-}, nr = {
+}, dr = {
 	key: 12,
 	class: "tc-card__inserted"
-}, rr = {
+}, fr = {
 	key: 13,
 	class: "tc-card__deleted"
-}, ir = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}, pr = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "TrackedChangeCard",
 	props: {
 		change: {},
-		expanded: { type: Boolean }
+		expanded: { type: Boolean },
+		replies: {}
 	},
 	emits: [
 		"click",
@@ -2327,7 +2399,7 @@ var ze = {
 		"reply"
 	],
 	setup(n, { emit: r }) {
-		let { t: f } = e(), p = n, h = r, g = a(() => p.change.author || f("trackedChanges.unknown"));
+		let { t: f } = t(), p = n, h = r, g = a(() => p.change.author || f("trackedChanges.unknown"));
 		function _() {
 			let e = new Set([p.change.revisionId]);
 			p.change.type === "replacement" && p.change.insertionRevisionId != null && e.add(p.change.insertionRevisionId);
@@ -2340,46 +2412,50 @@ var ze = {
 		function b() {
 			for (let e of _()) h("reject-by-id", e);
 		}
-		return (e, r) => (v(), c("div", {
+		return (t, r) => (v(), c("div", {
 			class: m(["tc-card", { "tc-card--expanded": n.expanded }]),
-			onClick: r[1] ||= (t) => e.$emit("click"),
+			onClick: r[1] ||= (e) => t.$emit("click"),
 			onMousedown: r[2] ||= M(() => {}, ["stop"])
 		}, [
-			l("div", Fn, [
-				d(dn, {
+			l("div", Wn, [
+				d(bn, {
 					name: g.value,
 					size: 32
 				}, null, 8, ["name"]),
-				l("div", In, [l("div", Ln, w(g.value), 1), n.change.date ? (v(), c("div", Rn, w(T(H)(n.change.date)), 1)) : s("", !0)]),
-				n.expanded ? (v(), c("div", zn, [l("button", {
+				l("div", Gn, [l("div", Kn, w(g.value), 1), n.change.date ? (v(), c("div", qn, w(T(W)(n.change.date)), 1)) : s("", !0)]),
+				n.expanded ? (v(), c("div", Jn, [l("button", {
 					class: "tc-card__icon-btn",
 					title: T(f)("common.accept"),
 					onClick: M(y, ["stop"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "check",
 					size: 20
-				})], 8, Bn), l("button", {
+				})], 8, Yn), l("button", {
 					class: "tc-card__icon-btn",
 					title: T(f)("common.reject"),
 					onClick: M(b, ["stop"])
-				}, [d(t, {
+				}, [d(e, {
 					name: "close",
 					size: 20
-				})], 8, Vn)])) : s("", !0)
+				})], 8, Xn)])) : s("", !0)
 			]),
-			l("div", Hn, [n.change.type === "replacement" ? (v(), c(i, { key: 0 }, [
+			l("div", Zn, [n.change.type === "replacement" ? (v(), c(i, { key: 0 }, [
 				u(w(T(f)("trackedChanges.replaced")) + " ", 1),
-				l("span", Un, "\"" + w(T(K)(n.change.deletedText || "")) + "\"", 1),
+				l("span", Qn, "\"" + w(T(J)(n.change.deletedText || "")) + "\"", 1),
 				u(" " + w(T(f)("trackedChanges.with")) + " ", 1),
-				l("span", Wn, "\"" + w(T(K)(n.change.text)) + "\"", 1)
-			], 64)) : n.change.type === "paragraphMarkInsertion" ? (v(), c(i, { key: 1 }, [u(w(T(f)("revisions.paragraphMarkInserted")), 1), n.change.text ? (v(), c(i, { key: 0 }, [r[3] ||= u(": ", -1), l("span", Gn, "\"" + w(T(K)(n.change.text)) + "\"", 1)], 64)) : s("", !0)], 64)) : n.change.type === "paragraphMarkDeletion" ? (v(), c(i, { key: 2 }, [u(w(T(f)("revisions.paragraphMarkDeleted")), 1), n.change.text ? (v(), c(i, { key: 0 }, [r[4] ||= u(": ", -1), l("span", Kn, "\"" + w(T(K)(n.change.text)) + "\"", 1)], 64)) : s("", !0)], 64)) : n.change.type === "paragraphPropertiesChanged" ? (v(), c(i, { key: 3 }, [u(w(T(f)("revisions.paragraphPropertiesChanged")), 1), n.change.text ? (v(), c(i, { key: 0 }, [r[5] ||= u(": ", -1), l("span", qn, "\"" + w(T(K)(n.change.text)) + "\"", 1)], 64)) : s("", !0)], 64)) : n.change.type === "rowInserted" ? (v(), c("span", Jn, w(T(f)("revisions.rowInserted")), 1)) : n.change.type === "rowDeleted" ? (v(), c("span", Yn, w(T(f)("revisions.rowDeleted")), 1)) : n.change.type === "cellInserted" ? (v(), c("span", Xn, w(T(f)("revisions.cellInserted")), 1)) : n.change.type === "cellDeleted" ? (v(), c("span", Zn, w(T(f)("revisions.cellDeleted")), 1)) : n.change.type === "cellMerged" ? (v(), c("span", Qn, w(T(f)("revisions.cellMerged")), 1)) : n.change.type === "rowPropertiesChanged" ? (v(), c("span", $n, w(T(f)("revisions.rowPropertiesChanged")), 1)) : n.change.type === "cellPropertiesChanged" ? (v(), c("span", er, w(T(f)("revisions.cellPropertiesChanged")), 1)) : n.change.type === "tablePropertiesChanged" ? (v(), c("span", tr, w(T(f)("revisions.tablePropertiesChanged")), 1)) : n.change.type === "tableInserted" ? (v(), c("span", nr, w(T(f)("revisions.tableInserted")), 1)) : n.change.type === "tableDeleted" ? (v(), c("span", rr, w(T(f)("revisions.tableDeleted")), 1)) : (v(), c(i, { key: 14 }, [u(w(n.change.type === "insertion" ? T(f)("trackedChanges.added") : T(f)("trackedChanges.deleted")) + " ", 1), l("span", { class: m(n.change.type === "insertion" ? "tc-card__inserted" : "tc-card__deleted") }, " \"" + w(T(K)(n.change.text)) + "\" ", 3)], 64))]),
-			n.expanded ? (v(), o(Sn, {
+				l("span", $n, "\"" + w(T(J)(n.change.text)) + "\"", 1)
+			], 64)) : n.change.type === "paragraphMarkInsertion" ? (v(), c(i, { key: 1 }, [u(w(T(f)("revisions.paragraphMarkInserted")), 1), n.change.text ? (v(), c(i, { key: 0 }, [r[3] ||= u(": ", -1), l("span", er, "\"" + w(T(J)(n.change.text)) + "\"", 1)], 64)) : s("", !0)], 64)) : n.change.type === "paragraphMarkDeletion" ? (v(), c(i, { key: 2 }, [u(w(T(f)("revisions.paragraphMarkDeleted")), 1), n.change.text ? (v(), c(i, { key: 0 }, [r[4] ||= u(": ", -1), l("span", tr, "\"" + w(T(J)(n.change.text)) + "\"", 1)], 64)) : s("", !0)], 64)) : n.change.type === "paragraphPropertiesChanged" ? (v(), c(i, { key: 3 }, [u(w(T(f)("revisions.paragraphPropertiesChanged")), 1), n.change.text ? (v(), c(i, { key: 0 }, [r[5] ||= u(": ", -1), l("span", nr, "\"" + w(T(J)(n.change.text)) + "\"", 1)], 64)) : s("", !0)], 64)) : n.change.type === "rowInserted" ? (v(), c("span", rr, w(T(f)("revisions.rowInserted")), 1)) : n.change.type === "rowDeleted" ? (v(), c("span", ir, w(T(f)("revisions.rowDeleted")), 1)) : n.change.type === "cellInserted" ? (v(), c("span", ar, w(T(f)("revisions.cellInserted")), 1)) : n.change.type === "cellDeleted" ? (v(), c("span", or, w(T(f)("revisions.cellDeleted")), 1)) : n.change.type === "cellMerged" ? (v(), c("span", sr, w(T(f)("revisions.cellMerged")), 1)) : n.change.type === "rowPropertiesChanged" ? (v(), c("span", cr, w(T(f)("revisions.rowPropertiesChanged")), 1)) : n.change.type === "cellPropertiesChanged" ? (v(), c("span", lr, w(T(f)("revisions.cellPropertiesChanged")), 1)) : n.change.type === "tablePropertiesChanged" ? (v(), c("span", ur, w(T(f)("revisions.tablePropertiesChanged")), 1)) : n.change.type === "tableInserted" ? (v(), c("span", dr, w(T(f)("revisions.tableInserted")), 1)) : n.change.type === "tableDeleted" ? (v(), c("span", fr, w(T(f)("revisions.tableDeleted")), 1)) : (v(), c(i, { key: 14 }, [u(w(n.change.type === "insertion" ? T(f)("trackedChanges.added") : T(f)("trackedChanges.deleted")) + " ", 1), l("span", { class: m(n.change.type === "insertion" ? "tc-card__inserted" : "tc-card__deleted") }, " \"" + w(T(J)(n.change.text)) + "\" ", 3)], 64))]),
+			d(Dn, {
+				replies: n.replies,
+				"is-expanded": n.expanded
+			}, null, 8, ["replies", "is-expanded"]),
+			n.expanded ? (v(), o(jn, {
 				key: 0,
-				onSubmit: r[0] ||= (t) => e.$emit("reply", n.change.revisionId, t)
+				onSubmit: r[0] ||= (e) => t.$emit("reply", n.change.revisionId, e)
 			})) : s("", !0)
 		], 34));
 	}
-}), [["__scopeId", "data-v-317869c0"]]), ar = ["onKeydown"], or = { class: "add-comment-card__actions" }, sr = ["disabled"], cr = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), [["__scopeId", "data-v-aba5ffb2"]]), mr = ["onKeydown"], hr = { class: "add-comment-card__actions" }, gr = ["disabled"], _r = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "AddCommentCard",
 	emits: ["submit", "cancel"],
 	setup(e, { emit: t }) {
@@ -2408,16 +2484,16 @@ var ze = {
 				j(M(s, ["exact", "prevent"]), ["enter"]),
 				j(u, ["esc"])
 			]
-		}, null, 40, ar), [[D, r.value]]), l("div", or, [l("button", {
+		}, null, 40, mr), [[D, r.value]]), l("div", hr, [l("button", {
 			class: "add-comment-card__cancel",
 			onClick: u
 		}, "Cancel"), l("button", {
 			class: m(["add-comment-card__submit", { "add-comment-card__submit--active": o.value }]),
 			disabled: !o.value,
 			onClick: s
-		}, "Comment", 10, sr)])], 32));
+		}, "Comment", 10, gr)])], 32));
 	}
-}), [["__scopeId", "data-v-cc70979b"]]), lr = q, ur = ["data-card-id"], dr = 16, fr = 300, pr = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), [["__scopeId", "data-v-ddb8719d"]]), vr = Y, yr = ["data-card-id"], br = 16, xr = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "UnifiedSidebar",
 	props: {
 		isOpen: { type: Boolean },
@@ -2452,17 +2528,30 @@ var ze = {
 			let t = p.value === e ? null : e;
 			f.value = t, d("update:activeItemId", t);
 		}
-		let y = r({
+		function y(e) {
+			e.stopPropagation(), !e.target.closest(".unified-sidebar__card-slot") && p.value !== null && (f.value = null, d("update:activeItemId", null));
+		}
+		let S = r({
 			comments: a(() => n.comments),
 			trackedChanges: a(() => n.trackedChanges),
 			showResolved: a(() => n.showResolved ?? !1),
 			isAddingComment: a(() => n.isAddingComment ?? !1),
 			addCommentYPosition: a(() => n.addCommentYPosition ?? null)
-		}), S = b(null), E = b(/* @__PURE__ */ new Map()), D = /* @__PURE__ */ new Map(), A = null;
-		function j() {
-			let e = n.pagesContainer, t = y.value;
+		}), E = b(null), D = b(/* @__PURE__ */ new Map()), A = /* @__PURE__ */ new Map(), j = null, M = null, N = /* @__PURE__ */ new Set();
+		function P() {
+			let e = E.value;
+			if (!e || !M) return;
+			let t = new Set(e.querySelectorAll("[data-card-id]"));
+			if (!(t.size === N.size && [...t].every((e) => N.has(e)))) {
+				M.disconnect();
+				for (let e of t) M.observe(e);
+				N = t;
+			}
+		}
+		function F() {
+			let e = n.pagesContainer, t = S.value;
 			if (!e || t.length === 0) {
-				E.value = /* @__PURE__ */ new Map();
+				D.value = /* @__PURE__ */ new Map();
 				return;
 			}
 			let r = e.getBoundingClientRect(), i = /* @__PURE__ */ new Map();
@@ -2497,43 +2586,43 @@ var ze = {
 				}
 				t && s.set(e.anchorKey, c(t));
 			}
-			let l = /* @__PURE__ */ new Map(), u = S.value;
+			let l = /* @__PURE__ */ new Map(), u = E.value;
 			if (u) for (let e of u.querySelectorAll("[data-card-id]")) {
 				let t = e.dataset.cardId;
 				t && l.set(t, e.offsetHeight);
 			}
 			let d = /* @__PURE__ */ new Map();
-			for (let { item: e, y: n } of lr(t, s, null, 1, l, D)) d.set(e.id, n);
-			E.value = d;
+			for (let { item: e, y: n } of vr(t, s, null, 1, l, A)) d.set(e.id, n);
+			D.value = d, P();
 		}
-		let N = a(() => {
+		let I = a(() => {
 			let e = 0;
-			for (let t of E.value.values()) e = Math.max(e, t);
+			for (let t of D.value.values()) e = Math.max(e, t);
 			return e + 200;
-		}), P = a(() => {
+		}), L = a(() => {
 			let e = p.value;
 			if (!e) return "";
 			if (e.startsWith("comment-")) return `.paged-editor__pages [data-comment-id="${e.slice(8)}"] { background-color: rgba(255, 212, 0, 0.35) !important; border-bottom: 2px solid rgba(255, 212, 0, 0.7) !important; }`;
 			if (e.startsWith("tc-")) {
 				let t = e.split("-")[1];
 				return `
-      .paged-editor__pages .docx-insertion[data-revision-id="${y.value.find((t) => t.id === e)?.change?.insertionRevisionId ?? Number(t)}"] { background-color: rgba(52, 168, 83, 0.2) !important; border-bottom: 2px solid #2e7d32 !important; }
+      .paged-editor__pages .docx-insertion[data-revision-id="${S.value.find((t) => t.id === e)?.change?.insertionRevisionId ?? Number(t)}"] { background-color: rgba(52, 168, 83, 0.2) !important; border-bottom: 2px solid #2e7d32 !important; }
       .paged-editor__pages .docx-deletion[data-revision-id="${t}"] { background-color: rgba(211, 47, 47, 0.2) !important; text-decoration-thickness: 2px !important; }
     `;
 			}
 			return "";
-		}), F = a(() => {
-			let e = n.pageWidthPx / 2 + dr - J, t = E.value.size > 0 || y.value.length === 0;
+		}), R = a(() => {
+			let e = n.pageWidthPx / 2 + br - X, t = D.value.size > 0 || S.value.length === 0;
 			return {
 				position: "absolute",
 				top: "0",
 				left: `calc(50% + ${e}px)`,
-				width: fr + "px",
+				width: te + "px",
 				opacity: +!!t
 			};
 		});
-		function I(e) {
-			let t = E.value.get(e);
+		function ee(e) {
+			let t = D.value.get(e);
 			return t == null ? {
 				position: "static",
 				marginBottom: "8px"
@@ -2545,22 +2634,22 @@ var ze = {
 				transition: "top 0.15s ease"
 			};
 		}
-		let L = !1;
-		function R() {
-			L || (L = !0, requestAnimationFrame(() => {
-				L = !1, j();
+		let z = !1;
+		function B() {
+			z || (z = !0, requestAnimationFrame(() => {
+				z = !1, F();
 			}));
 		}
 		O(() => [
-			y.value.length,
+			S.value.length,
 			p.value,
 			n.pagesContainer,
 			n.pageWidthPx,
 			n.zoom,
 			n.isAddingComment,
 			n.addCommentYPosition
-		], () => R(), { immediate: !0 });
-		function ee(e) {
+		], () => B(), { immediate: !0 });
+		function V(e) {
 			let t = e?.parentElement ?? null;
 			for (; t;) {
 				let e = getComputedStyle(t).overflowY;
@@ -2569,43 +2658,43 @@ var ze = {
 			}
 			return null;
 		}
-		let z = null;
-		function B() {
-			z && z.removeEventListener("scroll", R), z = ee(n.pagesContainer), z && z.addEventListener("scroll", R, { passive: !0 });
+		let H = null;
+		function U() {
+			H && H.removeEventListener("scroll", B), H = V(n.pagesContainer), H && H.addEventListener("scroll", B, { passive: !0 });
 		}
 		return _(() => {
-			R(), n.pagesContainer && (A = new ResizeObserver(() => R()), A.observe(n.pagesContainer), B());
-		}), O(() => n.pagesContainer, (e, t) => {
-			A?.disconnect(), A = null, e && (A = new ResizeObserver(() => R()), A.observe(e), B());
+			M = new ResizeObserver(() => B()), B(), n.pagesContainer && (j = new ResizeObserver(() => B()), j.observe(n.pagesContainer), U());
+		}), O(() => n.pagesContainer, (e) => {
+			j?.disconnect(), j = null, e && (j = new ResizeObserver(() => B()), j.observe(e), U());
 		}), g(() => {
-			A?.disconnect(), z && z.removeEventListener("scroll", R);
-		}), (t, n) => (v(), c(i, null, [P.value ? (v(), o(C("style"), { key: 0 }, {
-			default: k(() => [u(w(P.value), 1)]),
+			j?.disconnect(), M?.disconnect(), H && H.removeEventListener("scroll", B);
+		}), (t, n) => (v(), c(i, null, [L.value ? (v(), o(C("style"), { key: 0 }, {
+			default: k(() => [u(w(L.value), 1)]),
 			_: 1
 		})) : s("", !0), e.isOpen ? (v(), c("aside", {
 			key: 1,
 			ref_key: "rootRef",
-			ref: S,
+			ref: E,
 			class: "unified-sidebar",
-			style: h(F.value),
-			onMousedown: n[11] ||= M(() => {}, ["stop"])
+			style: h(R.value),
+			onMousedown: y
 		}, [l("div", {
 			class: "unified-sidebar__inner",
-			style: h({ minHeight: N.value + "px" })
-		}, [(v(!0), c(i, null, x(T(y), (e) => (v(), c("div", {
+			style: h({ minHeight: I.value + "px" })
+		}, [(v(!0), c(i, null, x(T(S), (e) => (v(), c("div", {
 			key: e.id,
 			class: "unified-sidebar__card-slot",
 			"data-card-id": e.id,
-			style: h(I(e.id))
-		}, [e.kind === "add-comment" ? (v(), o(cr, {
+			style: h(ee(e.id))
+		}, [e.kind === "add-comment" ? (v(), o(_r, {
 			key: 0,
 			onSubmit: n[0] ||= (e) => t.$emit("add-comment", e),
 			onCancel: n[1] ||= (e) => t.$emit("cancel-add-comment")
-		})) : e.kind === "comment" && e.comment.done && p.value !== e.id ? (v(), o(Pn, {
+		})) : e.kind === "comment" && e.comment.done && p.value !== e.id ? (v(), o(Un, {
 			key: 1,
 			comment: e.comment,
 			onToggleExpand: (t) => m(e.id)
-		}, null, 8, ["comment", "onToggleExpand"])) : e.kind === "comment" ? (v(), o(Mn, {
+		}, null, 8, ["comment", "onToggleExpand"])) : e.kind === "comment" ? (v(), o(Vn, {
 			key: 2,
 			comment: e.comment,
 			replies: e.replies,
@@ -2620,9 +2709,10 @@ var ze = {
 			"replies",
 			"expanded",
 			"onClick"
-		])) : e.kind === "tracked-change" ? (v(), o(ir, {
+		])) : e.kind === "tracked-change" ? (v(), o(pr, {
 			key: 3,
 			change: e.change,
+			replies: e.replies ?? [],
 			expanded: p.value === e.id,
 			onClick: (t) => m(e.id),
 			onAccept: n[6] ||= (e, n) => t.$emit("accept-change", e, n),
@@ -2632,11 +2722,12 @@ var ze = {
 			onReply: n[10] ||= (e, n) => t.$emit("tracked-change-reply", e, n)
 		}, null, 8, [
 			"change",
+			"replies",
 			"expanded",
 			"onClick"
-		])) : s("", !0)], 12, ur))), 128))], 4)], 36)) : s("", !0)], 64));
+		])) : s("", !0)], 12, yr))), 128))], 4)], 36)) : s("", !0)], 64));
 	}
-}), [["__scopeId", "data-v-1d084620"]]), mr = ["title", "onClick"], hr = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), [["__scopeId", "data-v-b5509735"]]), Sr = ["title", "onClick"], Cr = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "CommentMarginMarkers",
 	props: {
 		comments: {},
@@ -2647,8 +2738,8 @@ var ze = {
 		resolvedCommentIds: {}
 	},
 	emits: ["marker-click"],
-	setup(e) {
-		let n = e, r = a(() => {
+	setup(t) {
+		let n = t, r = a(() => {
 			if (n.sidebarOpen) return [];
 			let e = n.pagesContainer;
 			if (!e) return [];
@@ -2686,14 +2777,14 @@ var ze = {
 			key: r.comment.id,
 			class: "docx-comment-margin-markers__btn",
 			title: r.isResolved ? "Resolved comment" : "Comment",
-			style: h({ top: r.y * e.zoom + "px" }),
+			style: h({ top: r.y * t.zoom + "px" }),
 			onClick: (e) => n.$emit("marker-click", r.comment.id)
-		}, [d(t, {
+		}, [d(e, {
 			name: r.isResolved ? "chat_bubble_check" : "chat_bubble_outline",
 			size: 18
-		}, null, 8, ["name"])], 12, mr))), 128))], 36)) : s("", !0);
+		}, null, 8, ["name"])], 12, Sr))), 128))], 36)) : s("", !0);
 	}
-}), [["__scopeId", "data-v-a20c82d9"]]), gr = ["aria-valuemax"], _r = { class: "docx-horizontal-ruler__ticks" }, vr = ["title", "onDblclick"], yr = 12240, br = 1440, xr = 1440, Sr = 567, Cr = 22, wr = "#4285f4", Tr = "#3367d6", Er = "#2a56c6", $ = 5, Dr = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), [["__scopeId", "data-v-b6c7e425"]]), wr = ["aria-valuemax"], Tr = { class: "docx-horizontal-ruler__ticks" }, Er = ["title", "onDblclick"], Dr = 12240, Or = 1440, kr = 1440, Ar = 567, jr = 22, Mr = "var(--doc-primary)", Nr = "var(--doc-primary)", Pr = "var(--doc-primary-hover)", $ = 5, Fr = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "HorizontalRuler",
 	props: {
 		sectionProps: {},
@@ -2727,15 +2818,15 @@ var ze = {
 	setup(e, { emit: t }) {
 		let n = e, r = t, o = Math.round($ * 1.6), u = b(null), d = b(null), f = b(null), p = b(0), m = b("");
 		function _(e) {
-			return Y(e) * n.zoom;
+			return re(e) * n.zoom;
 		}
 		function y(e) {
-			return Math.round(te(e / n.zoom));
+			return Math.round(ne(e / n.zoom));
 		}
-		let S = a(() => n.sectionProps?.pageWidth ?? yr), C = a(() => n.sectionProps?.marginLeft ?? br), T = a(() => n.sectionProps?.marginRight ?? br), E = a(() => S.value - C.value - T.value), D = a(() => _(S.value)), O = a(() => _(C.value)), k = a(() => _(T.value)), A = a(() => _(n.indentLeft)), j = a(() => _(n.indentRight)), N = a(() => n.hangingIndent ? -n.firstLineIndent : n.firstLineIndent), P = a(() => _(N.value)), F = a(() => O.value + A.value), I = a(() => D.value - k.value - j.value), L = a(() => O.value + A.value + P.value), R = a(() => ({
+		let S = a(() => n.sectionProps?.pageWidth ?? Dr), C = a(() => n.sectionProps?.marginLeft ?? Or), T = a(() => n.sectionProps?.marginRight ?? Or), E = a(() => S.value - C.value - T.value), D = a(() => _(S.value)), O = a(() => _(C.value)), k = a(() => _(T.value)), A = a(() => _(n.indentLeft)), j = a(() => _(n.indentRight)), N = a(() => n.hangingIndent ? -n.firstLineIndent : n.firstLineIndent), P = a(() => _(N.value)), F = a(() => O.value + A.value), I = a(() => D.value - k.value - j.value), L = a(() => O.value + A.value + P.value), R = a(() => ({
 			position: "relative",
 			width: D.value + "px",
-			height: Cr + "px",
+			height: jr + "px",
 			backgroundColor: "transparent",
 			overflow: "visible",
 			userSelect: "none",
@@ -2745,9 +2836,9 @@ var ze = {
 			top: 0,
 			left: 0,
 			width: O.value + "px",
-			height: Cr + "px",
-			backgroundColor: "rgba(0, 0, 0, 0.02)",
-			borderRight: "1px solid rgba(0,0,0,0.06)",
+			height: jr + "px",
+			backgroundColor: "var(--doc-shadow-subtle)",
+			borderRight: "1px solid var(--doc-shadow-subtle)",
 			cursor: n.editable ? "ew-resize" : "default",
 			zIndex: 1
 		})), z = a(() => ({
@@ -2755,15 +2846,15 @@ var ze = {
 			top: 0,
 			right: 0,
 			width: k.value + "px",
-			height: Cr + "px",
-			backgroundColor: "rgba(0, 0, 0, 0.02)",
-			borderLeft: "1px solid rgba(0,0,0,0.06)",
+			height: jr + "px",
+			backgroundColor: "var(--doc-shadow-subtle)",
+			borderLeft: "1px solid var(--doc-shadow-subtle)",
 			cursor: n.editable ? "ew-resize" : "default",
 			zIndex: 1
 		})), B = a(() => {
 			let e = [];
 			if (n.unit === "inch") {
-				let t = xr / 8, n = Math.ceil(S.value / t);
+				let t = kr / 8, n = Math.ceil(S.value / t);
 				for (let r = 0; r <= n; r++) {
 					let n = r * t;
 					if (n > S.value) break;
@@ -2784,7 +2875,7 @@ var ze = {
 					});
 				}
 			} else {
-				let t = Sr / 10, n = Math.ceil(S.value / t);
+				let t = Ar / 10, n = Math.ceil(S.value / t);
 				for (let r = 0; r <= n; r++) {
 					let n = r * t;
 					if (n > S.value) break;
@@ -2812,10 +2903,10 @@ var ze = {
 			};
 		}) : []);
 		function H(e) {
-			return n.unit === "cm" ? (e / Sr).toFixed(1) + " cm" : (e / xr).toFixed(2) + "\"";
+			return n.unit === "cm" ? (e / Ar).toFixed(1) + " cm" : (e / kr).toFixed(2) + "\"";
 		}
 		function U(e) {
-			return d.value === e ? Er : f.value === e ? Tr : wr;
+			return d.value === e ? Pr : f.value === e ? Nr : Mr;
 		}
 		function W(e, t, r) {
 			return {
@@ -2853,7 +2944,7 @@ var ze = {
 		}
 		let K = 0;
 		function q(e, t) {
-			n.editable && (d.value = e, t.clientX, e === "leftMargin" ? K = C.value : e === "rightMargin" ? K = T.value : e === "leftIndent" ? K = n.indentLeft : e === "rightIndent" ? K = n.indentRight : e === "firstLineIndent" && (K = n.firstLineIndent), p.value = t.clientX - (u.value?.getBoundingClientRect().left ?? 0), m.value = H(K), document.addEventListener("mousemove", J), document.addEventListener("mouseup", ne));
+			n.editable && (d.value = e, t.clientX, e === "leftMargin" ? K = C.value : e === "rightMargin" ? K = T.value : e === "leftIndent" ? K = n.indentLeft : e === "rightIndent" ? K = n.indentRight : e === "firstLineIndent" && (K = n.firstLineIndent), p.value = t.clientX - (u.value?.getBoundingClientRect().left ?? 0), m.value = H(K), document.addEventListener("mousemove", J), document.addEventListener("mouseup", Y));
 		}
 		function J(e) {
 			if (!d.value || !u.value) return;
@@ -2861,13 +2952,13 @@ var ze = {
 			if (!t) return;
 			let n = e.clientX - t.left;
 			p.value = n;
-			let r = y(n), i = re(d.value, r);
-			m.value = H(i), X(d.value, i);
+			let r = y(n), i = X(d.value, r);
+			m.value = H(i), te(d.value, i);
 		}
-		function ne(e) {
-			d.value = null, document.removeEventListener("mousemove", J), document.removeEventListener("mouseup", ne);
+		function Y(e) {
+			d.value = null, document.removeEventListener("mousemove", J), document.removeEventListener("mouseup", Y);
 		}
-		function re(e, t) {
+		function X(e, t) {
 			if (e === "leftMargin") {
 				let e = S.value - T.value - 720;
 				return Math.round(Math.max(0, Math.min(t, e)));
@@ -2887,7 +2978,7 @@ var ze = {
 			let r = S.value - T.value - t, i = E.value - n.indentLeft - 720;
 			return Math.round(Math.max(0, Math.min(r, i)));
 		}
-		function X(e, t) {
+		function te(e, t) {
 			switch (e) {
 				case "leftMargin":
 					r("left-margin-change", t);
@@ -2907,7 +2998,7 @@ var ze = {
 			}
 		}
 		return g(() => {
-			document.removeEventListener("mousemove", J), document.removeEventListener("mouseup", ne);
+			document.removeEventListener("mousemove", J), document.removeEventListener("mouseup", Y);
 		}), (t, n) => (v(), c("div", {
 			ref_key: "rulerRef",
 			ref: u,
@@ -2928,7 +3019,7 @@ var ze = {
 				style: h(z.value),
 				onMousedown: n[1] ||= M((t) => e.editable ? q("rightMargin", t) : null, ["prevent", "stop"])
 			}, null, 36),
-			l("div", _r, [(v(!0), c(i, null, x(B.value, (e, t) => (v(), c(i, { key: t }, [l("div", {
+			l("div", Tr, [(v(!0), c(i, null, x(B.value, (e, t) => (v(), c(i, { key: t }, [l("div", {
 				class: "docx-horizontal-ruler__tick-line",
 				style: h({
 					left: e.position + "px",
@@ -2969,15 +3060,15 @@ var ze = {
 				style: h({ left: e.px + "px" }),
 				title: `${e.label}`,
 				onDblclick: M((n) => t.$emit("tab-stop-remove", e.twips), ["prevent"])
-			}, "L", 44, vr))), 128)),
+			}, "L", 44, Er))), 128)),
 			d.value && m.value ? (v(), c("div", {
 				key: 3,
 				class: "docx-horizontal-ruler__tooltip",
 				style: h({ left: p.value + "px" })
 			}, w(m.value), 5)) : s("", !0)
-		], 12, gr));
+		], 12, wr));
 	}
-}), [["__scopeId", "data-v-5644874e"]]), Or = { class: "docx-vertical-ruler__ticks" }, kr = 15840, Ar = 1440, jr = 1440, Mr = 567, Nr = 20, Pr = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), [["__scopeId", "data-v-e917c826"]]), Ir = { class: "docx-vertical-ruler__ticks" }, Lr = 15840, Rr = 1440, zr = 1440, Br = 567, Vr = 20, Hr = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "VerticalRuler",
 	props: {
 		sectionProps: {},
@@ -2992,14 +3083,14 @@ var ze = {
 	setup(e, { emit: t }) {
 		let n = e, r = t, o = b(null), u = b(null), d = b(null);
 		function f(e) {
-			return Y(e) * n.zoom;
+			return re(e) * n.zoom;
 		}
 		function p(e) {
-			return Math.round(te(e / n.zoom));
+			return Math.round(ne(e / n.zoom));
 		}
-		let m = a(() => n.sectionProps?.pageHeight ?? kr), _ = a(() => n.sectionProps?.marginTop ?? Ar), y = a(() => n.sectionProps?.marginBottom ?? Ar), S = a(() => f(m.value)), C = a(() => f(_.value)), T = a(() => f(y.value)), E = a(() => ({
+		let m = a(() => n.sectionProps?.pageHeight ?? Lr), _ = a(() => n.sectionProps?.marginTop ?? Rr), y = a(() => n.sectionProps?.marginBottom ?? Rr), S = a(() => f(m.value)), C = a(() => f(_.value)), T = a(() => f(y.value)), E = a(() => ({
 			position: "relative",
-			width: Nr + "px",
+			width: Vr + "px",
 			height: S.value + "px",
 			backgroundColor: "transparent",
 			overflow: "visible",
@@ -3008,7 +3099,7 @@ var ze = {
 		})), D = a(() => {
 			let e = [];
 			if (n.unit === "inch") {
-				let t = jr / 8, n = Math.ceil(m.value / t);
+				let t = zr / 8, n = Math.ceil(m.value / t);
 				for (let r = 0; r <= n; r++) {
 					let n = r * t;
 					if (n > m.value) break;
@@ -3029,7 +3120,7 @@ var ze = {
 					});
 				}
 			} else {
-				let t = Mr / 10, n = Math.ceil(m.value / t);
+				let t = Br / 10, n = Math.ceil(m.value / t);
 				for (let r = 0; r <= n; r++) {
 					let n = r * t;
 					if (n > m.value) break;
@@ -3054,7 +3145,7 @@ var ze = {
 				position: "absolute",
 				top: e - 5 + "px",
 				right: 0,
-				width: Nr + "px",
+				width: Vr + "px",
 				height: "10px",
 				cursor: n.editable ? "ns-resize" : "default",
 				zIndex: u.value === null ? 1 : 10
@@ -3070,7 +3161,7 @@ var ze = {
 				height: "0",
 				borderTop: "5px solid transparent",
 				borderBottom: "5px solid transparent",
-				borderRight: `8px solid ${t ? "var(--doc-primary-hover, #1557b0)" : "var(--doc-primary, #1a73e8)"}`,
+				borderRight: `8px solid ${t ? "var(--doc-primary-hover)" : "var(--doc-primary)"}`,
 				transition: "border-right-color 0.1s"
 			};
 		}
@@ -3097,7 +3188,7 @@ var ze = {
 			"aria-label": "Vertical ruler",
 			"aria-orientation": "vertical"
 		}, [
-			l("div", Or, [(v(!0), c(i, null, x(D.value, (e, t) => (v(), c(i, { key: t }, [l("div", {
+			l("div", Ir, [(v(!0), c(i, null, x(D.value, (e, t) => (v(), c(i, { key: t }, [l("div", {
 				class: "docx-vertical-ruler__tick-line",
 				style: h({
 					top: e.position + "px",
@@ -3126,10 +3217,10 @@ var ze = {
 			}, [l("div", { style: h(k("bottomMargin")) }, null, 4)], 36)) : s("", !0)
 		], 4));
 	}
-}), [["__scopeId", "data-v-6e1bbe22"]]), Fr = { class: "doc-name" }, Ir = ["value"], Lr = {
+}), [["__scopeId", "data-v-42fc6ef7"]]), Ur = { class: "doc-name" }, Wr = ["value"], Gr = {
 	key: 1,
 	class: "doc-name__text"
-}, Rr = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}, Kr = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "DocumentName",
 	props: {
 		modelValue: {},
@@ -3148,28 +3239,28 @@ var ze = {
 		function s(e) {
 			e.target.value.trim() || r("update:modelValue", "Untitled document.docx");
 		}
-		return (t, n) => (v(), c("div", Fr, [e.editable ? (v(), c("input", {
+		return (t, n) => (v(), c("div", Ur, [e.editable ? (v(), c("input", {
 			key: 0,
 			class: "doc-name__input",
 			value: i.value,
 			onInput: o,
 			onBlur: s,
 			placeholder: "Untitled document"
-		}, null, 40, Ir)) : (v(), c("span", Lr, w(i.value || "Untitled document"), 1))]));
+		}, null, 40, Wr)) : (v(), c("span", Gr, w(i.value || "Untitled document"), 1))]));
 	}
-}), [["__scopeId", "data-v-d78ee2fa"]]), zr = ["disabled", "onClick"], Br = {
+}), [["__scopeId", "data-v-3f4b57cc"]]), qr = ["disabled", "onClick"], Jr = {
 	key: 0,
 	class: "docx-menu-dropdown__separator"
-}, Vr = ["onMouseenter", "onMouseleave"], Hr = ["disabled", "onClick"], Ur = { class: "docx-menu-dropdown__label" }, Wr = {
+}, Yr = ["onMouseenter", "onMouseleave"], Xr = ["disabled", "onClick"], Zr = { class: "docx-menu-dropdown__label" }, Qr = {
 	key: 1,
 	class: "docx-menu-dropdown__shortcut"
-}, Gr = {
+}, $r = {
 	key: 2,
 	class: "docx-menu-dropdown__chevron"
-}, Kr = {
+}, ei = {
 	key: 0,
 	class: "docx-menu-dropdown__submenu"
-}, qr = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}, ti = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "MenuDropdown",
 	props: {
 		label: {},
@@ -3180,7 +3271,7 @@ var ze = {
 			default: !1
 		}
 	},
-	setup(e) {
+	setup(t) {
 		function n(e) {
 			return "type" in e && e.type === "separator";
 		}
@@ -3199,47 +3290,47 @@ var ze = {
 			trigger: k(({ toggle: n }) => [l("button", {
 				type: "button",
 				class: m(["docx-menu-dropdown__trigger", { "docx-menu-dropdown__trigger--open": r.value }]),
-				disabled: e.disabled,
+				disabled: t.disabled,
 				onMousedown: g[0] ||= M(() => {}, ["prevent"]),
 				onClick: M(n, ["prevent"])
-			}, [u(w(e.label) + " ", 1), e.showChevron ? (v(), o(t, {
+			}, [u(w(t.label) + " ", 1), t.showChevron ? (v(), o(e, {
 				key: 0,
 				name: "arrow_drop_down",
 				size: 16
-			})) : s("", !0)], 42, zr)]),
+			})) : s("", !0)], 42, qr)]),
 			panel: k(() => [l("div", {
 				class: "docx-menu-dropdown__menu",
 				onMousedown: g[1] ||= M(() => {}, ["prevent"])
-			}, [(v(!0), c(i, null, x(e.items, (e, r) => (v(), c(i, { key: r }, [n(e) ? (v(), c("div", Br)) : (v(), c("div", {
+			}, [(v(!0), c(i, null, x(t.items, (t, r) => (v(), c(i, { key: r }, [n(t) ? (v(), c("div", Jr)) : (v(), c("div", {
 				key: 1,
 				class: "docx-menu-dropdown__wrap",
-				onMouseenter: (t) => e.submenu ? a.value = r : void 0,
-				onMouseleave: (t) => e.submenu ? a.value = null : void 0
+				onMouseenter: (e) => t.submenu ? a.value = r : void 0,
+				onMouseleave: (e) => t.submenu ? a.value = null : void 0
 			}, [l("button", {
 				type: "button",
-				class: m(["docx-menu-dropdown__item", { "docx-menu-dropdown__item--disabled": e.disabled }]),
-				disabled: e.disabled,
-				onClick: M((t) => p(e), ["prevent"])
+				class: m(["docx-menu-dropdown__item", { "docx-menu-dropdown__item--disabled": t.disabled }]),
+				disabled: t.disabled,
+				onClick: M((e) => p(t), ["prevent"])
 			}, [
-				e.icon ? (v(), o(t, {
+				t.icon ? (v(), o(e, {
 					key: 0,
-					name: e.icon,
+					name: t.icon,
 					size: 18
 				}, null, 8, ["name"])) : s("", !0),
-				l("span", Ur, w(e.label), 1),
-				e.shortcut ? (v(), c("span", Wr, w(e.shortcut), 1)) : s("", !0),
-				e.submenu ? (v(), c("span", Gr, [d(t, {
+				l("span", Zr, w(t.label), 1),
+				t.shortcut ? (v(), c("span", Qr, w(t.shortcut), 1)) : s("", !0),
+				t.submenu ? (v(), c("span", $r, [d(e, {
 					name: "keyboard_arrow_right",
 					size: 16
 				})])) : s("", !0)
-			], 10, Hr), e.submenu && a.value === r ? (v(), c("div", Kr, [S(h.$slots, "submenu", {
-				item: e,
+			], 10, Xr), t.submenu && a.value === r ? (v(), c("div", ei, [S(h.$slots, "submenu", {
+				item: t,
 				closeMenu: f
-			}, void 0, !0)])) : s("", !0)], 40, Vr))], 64))), 128))], 32)]),
+			}, void 0, !0)])) : s("", !0)], 40, Yr))], 64))), 128))], 32)]),
 			_: 3
 		}, 8, ["open"]));
 	}
-}), [["__scopeId", "data-v-65cffcb2"]]), Jr = ["aria-selected", "onMouseenter"], Yr = { class: "docx-table-grid-inline__label" }, Xr = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}), [["__scopeId", "data-v-f87b9133"]]), ni = ["aria-selected", "onMouseenter"], ri = { class: "docx-table-grid-inline__label" }, ii = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "TableGridInline",
 	props: {
 		gridRows: { default: 6 },
@@ -3275,105 +3366,135 @@ var ze = {
 				o.value = e.r, s.value = e.c;
 			},
 			onClick: M(d, ["prevent"])
-		}, null, 42, Jr))), 128))], 36), l("div", Yr, w(o.value > 0 && s.value > 0 ? `${s.value} × ${o.value}` : "Select size"), 1)]));
+		}, null, 42, ni))), 128))], 36), l("div", ri, w(o.value > 0 && s.value > 0 ? `${s.value} × ${o.value}` : "Select size"), 1)]));
 	}
-}), [["__scopeId", "data-v-ecd8fc63"]]), Zr = {
+}), [["__scopeId", "data-v-62b10375"]]), ai = {
 	class: "menu-bar",
 	role: "menubar"
-}, Qr = /* @__PURE__ */ n(/* @__PURE__ */ f({
+}, oi = {
+	key: 1,
+	class: "menu-bar__break-submenu"
+}, si = ["onClick"], ci = /* @__PURE__ */ n(/* @__PURE__ */ f({
 	__name: "MenuBar",
 	emits: ["action", "insert-table"],
-	setup(t, { emit: n }) {
-		let r = n, { t: i } = e();
-		function l(e) {
-			return () => r("action", e);
+	setup(n, { emit: r }) {
+		let u = r, { t: f } = t();
+		function p(e) {
+			return () => u("action", e);
 		}
-		let u = a(() => [
+		let m = a(() => [
 			{
 				icon: "file_upload",
-				label: i("toolbar.open"),
-				shortcut: i("toolbar.openShortcut"),
-				onClick: l("open")
+				label: f("toolbar.open"),
+				shortcut: f("toolbar.openShortcut"),
+				onClick: p("open")
 			},
 			{
 				icon: "file_download",
-				label: i("toolbar.save"),
-				shortcut: i("toolbar.saveShortcut"),
-				onClick: l("save")
+				label: f("toolbar.save"),
+				shortcut: f("toolbar.saveShortcut"),
+				onClick: p("save")
 			},
 			{ type: "separator" },
 			{
 				icon: "settings",
-				label: i("toolbar.pageSetup"),
-				onClick: l("pageSetup")
+				label: f("toolbar.pageSetup"),
+				onClick: p("pageSetup")
 			}
-		]), f = a(() => [{
+		]), h = a(() => [{
 			icon: "format_textdirection_l_to_r",
-			label: i("toolbar.leftToRight"),
-			onClick: l("dirLTR")
+			label: f("toolbar.leftToRight"),
+			onClick: p("dirLTR")
 		}, {
 			icon: "format_textdirection_r_to_l",
-			label: i("toolbar.rightToLeft"),
-			onClick: l("dirRTL")
-		}]), p = a(() => [
+			label: f("toolbar.rightToLeft"),
+			onClick: p("dirRTL")
+		}]), g = a(() => [
 			{
 				icon: "image",
-				label: i("toolbar.image"),
-				onClick: l("insertImage")
+				label: f("toolbar.image"),
+				onClick: p("insertImage")
 			},
 			{
 				icon: "grid_on",
-				label: i("toolbar.table"),
+				label: f("toolbar.table"),
 				key: "table",
 				submenu: !0
 			},
 			{ type: "separator" },
 			{
 				icon: "page_break",
-				label: i("toolbar.pageBreak"),
-				onClick: l("insertPageBreak")
+				label: f("toolbar.break"),
+				key: "break",
+				submenu: !0
 			},
 			{
 				icon: "format_list_numbered",
-				label: i("toolbar.tableOfContents"),
-				onClick: l("insertTOC")
+				label: f("toolbar.tableOfContents"),
+				onClick: p("insertTOC")
 			},
 			{
 				icon: "branding_watermark",
-				label: i("toolbar.watermark"),
-				onClick: l("watermark")
+				label: f("toolbar.watermark"),
+				onClick: p("watermark")
 			}
-		]), m = a(() => [{
-			label: i("toolbar.reportIssue"),
-			onClick: l("reportIssue")
+		]), _ = a(() => [
+			{
+				icon: "page_break",
+				label: f("toolbar.pageBreak"),
+				action: "insertPageBreak"
+			},
+			{
+				icon: "horizontal_rule",
+				label: f("toolbar.sectionBreakNextPage"),
+				action: "insertSectionBreakNextPage"
+			},
+			{
+				icon: "border_horizontal",
+				label: f("toolbar.sectionBreakContinuous"),
+				action: "insertSectionBreakContinuous"
+			}
+		]), y = a(() => [{
+			label: f("toolbar.reportIssue"),
+			onClick: p("reportIssue")
 		}]);
-		return (e, t) => (v(), c("div", Zr, [
-			d(qr, {
-				label: T(i)("toolbar.file"),
-				items: u.value
+		return (t, n) => (v(), c("div", ai, [
+			d(ti, {
+				label: T(f)("toolbar.file"),
+				items: m.value
 			}, null, 8, ["label", "items"]),
-			d(qr, {
-				label: T(i)("toolbar.format"),
-				items: f.value
+			d(ti, {
+				label: T(f)("toolbar.format"),
+				items: h.value
 			}, null, 8, ["label", "items"]),
-			d(qr, {
-				label: T(i)("toolbar.insert"),
-				items: p.value
+			d(ti, {
+				label: T(f)("toolbar.insert"),
+				items: g.value
 			}, {
-				submenu: k(({ item: e, closeMenu: t }) => [e.key === "table" ? (v(), o(Xr, {
+				submenu: k(({ item: t, closeMenu: n }) => [t.key === "table" ? (v(), o(ii, {
 					key: 0,
-					onInsert: (e, n) => {
-						r("insert-table", e, n), t();
+					onInsert: (e, t) => {
+						u("insert-table", e, t), n();
 					}
-				}, null, 8, ["onInsert"])) : s("", !0)]),
+				}, null, 8, ["onInsert"])) : t.key === "break" ? (v(), c("div", oi, [(v(!0), c(i, null, x(_.value, (t) => (v(), c("button", {
+					key: t.action,
+					type: "button",
+					class: "menu-bar__break-item",
+					onClick: M(() => {
+						u("action", t.action), n();
+					}, ["prevent"])
+				}, [d(e, {
+					name: t.icon,
+					size: 18
+				}, null, 8, ["name"]), l("span", null, w(t.label), 1)], 8, si))), 128))])) : s("", !0)]),
 				_: 1
 			}, 8, ["label", "items"]),
-			d(qr, {
-				label: T(i)("toolbar.help"),
-				items: m.value
+			d(ti, {
+				label: T(f)("toolbar.help"),
+				items: y.value
 			}, null, 8, ["label", "items"])
 		]));
 	}
-}), [["__scopeId", "data-v-6fc03bf3"]]);
+}), [["__scopeId", "data-v-14562b7b"]]);
 //#endregion
-export { je as C, _e as D, Q as E, Me as S, Ee as T, kt as _, Pr as a, yt as b, pr as c, Pn as d, Mn as f, ln as g, un as h, Rr as i, cr as l, vn as m, Xr as n, Dr as o, Sn as p, qr as r, hr as s, Qr as t, ir as u, wt as v, Ae as w, vt as x, Ct as y };
+export { Pe as C, be as D, Q as E, Fe as S, ke as T, Rt as _, Hr as a, Ot as b, xr as c, Un as d, Vn as f, vn as g, yn as h, Kr as i, _r as l, Dn as m, ii as n, Fr as o, jn as p, ti as r, Cr as s, ci as t, pr as u, Nt as v, Ne as w, Dt as x, Mt as y };