@templatical/editor 0.6.7 → 0.7.0

package/README.md

@@ -8,7 +8,8 @@
 The visual editor for [Templatical](https://github.com/templatical/sdk) — an open-source drag-and-drop email editor with JSON templates and MJML output.
 
 - 🧩 **14 block types** — title, paragraph, image, button, section, divider, spacer, social icons, menu, table, HTML, video, countdown, custom
-- 🎨 **27 design tokens** — full theming, dark mode, custom fonts
+- 🛡 **Shadow DOM isolated** — mounts inside an open shadow root by default so host page CSS cannot bleed in
+- 🎨 **27 design tokens** — full theming via `--tpl-user-*` CSS variables, dark mode, custom fonts
 - 🔌 **Framework-agnostic** — works in React, Vue, Svelte, Angular, vanilla
 - 📦 **JSON in, MJML out** — portable templates, render with any email provider
 - 🌍 **Bilingual** — English + German built in
@@ -59,6 +60,29 @@ editor.unmount();
 
 First-class examples for **React, Vue, Svelte, Angular, and vanilla JS** are in the [installation guide](https://docs.templatical.com/getting-started/installation).
 
+## Shadow DOM by default
+
+The editor mounts inside an open shadow root attached to your container. Host page CSS — including resets like `* { color: red !important }` — cannot cascade into editor elements, and editor utility classes cannot leak out.
+
+```ts
+// Shadow DOM is on by default — no extra config
+const editor = await init({ container: "#editor" });
+
+// Opt out for light-DOM mount (older browsers, host-side document.querySelector access)
+const editor = await init({ container: "#editor", shadowDom: false });
+```
+
+Theme via `:host`-style CSS variables — set `--tpl-user-*` on the container (or any ancestor) and the value inherits across the shadow boundary:
+
+```css
+#editor {
+  --tpl-user-primary: oklch(65% 0.2 280);
+  --tpl-user-radius: 14px;
+}
+```
+
+See the [Shadow DOM guide](https://docs.templatical.com/guide/shadow-dom) for trade-offs, opt-out semantics, and browser-support tiers.
+
 ## Cloud features
 
 For AI rewrite, real-time collaboration, comments, snapshots, and saved modules, use `initCloud()` instead. See the [Cloud guide](https://docs.templatical.com/cloud/getting-started).
@@ -69,6 +93,7 @@ For AI rewrite, real-time collaboration, comments, snapshots, and saved modules,
 - [Editor API reference](https://docs.templatical.com/api/editor)
 - [Block reference](https://docs.templatical.com/guide/blocks)
 - [Theming](https://docs.templatical.com/guide/theming)
+- [Shadow DOM](https://docs.templatical.com/guide/shadow-dom)
 - [Custom blocks](https://docs.templatical.com/guide/custom-blocks)
 
 Full docs at **[docs.templatical.com](https://docs.templatical.com)**.

package/dist/{AccessibilityPanel-B2MT0M58.js → AccessibilityPanel-D-PqmHdH.js}

@@ -1,6 +1,6 @@
 import { A as e, F as t, M as n, _ as r, at as i, b as a, d as o, f as s, h as c, l, m as u, p as d, rt as f, st as p, v as m, w as h } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
-import { m as g, t as _ } from "./keys-Bqs_0du9.js";
-import { t as v } from "./useI18n-CgmQftNf.js";
+import { m as g, t as _ } from "./keys-B5SJtPWf.js";
+import { t as v } from "./useI18n-PEB8ioi_.js";
 import { t as y } from "./createLucideIcon-Di4mqmGn.js";
 import { t as b } from "./accessibility-BgUEA-Ai.js";
 import { t as x } from "./circle-alert-C0L9pUQ4.js";

package/dist/{AiChatSidebar-w5ek3Z76.js → AiChatSidebar-BwLECwsO.js}

@@ -1,6 +1,6 @@
 import { A as e, B as t, D as n, E as ee, L as r, M as i, X as a, _ as o, a as te, at as ne, b as s, f as c, h as l, l as u, m as d, p as f, rt as p, st as m, t as re, v as h, w as ie, z as ae } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
 import { o as oe, s as se } from "./dist-BzRLLpfq.js";
-import { O as g, i as ce, l as le, m as _, v as ue } from "./keys-Bqs_0du9.js";
+import { A as g, i as ce, l as le, m as _, y as ue } from "./keys-B5SJtPWf.js";
 import { t as v } from "./createLucideIcon-Di4mqmGn.js";
 import { t as de } from "./circle-alert-C0L9pUQ4.js";
 import { t as fe } from "./loader-circle-_9bP23op.js";

package/dist/{AiFeatureMenu-ChlAWywJ.js → AiFeatureMenu-CVHKharv.js}

@@ -1,11 +1,11 @@
 import { A as e, F as t, M as n, b as r, d as i, f as a, h as o, l as s, ot as c, p as l, st as u } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
-import "./useEditorCore-CnXrv71D.js";
-import { O as d, n as f } from "./keys-Bqs_0du9.js";
+import "./useEditorCore-uCU9Ny0M.js";
+import { A as d, n as f } from "./keys-B5SJtPWf.js";
 import { t as p } from "./image-up-1D_3XDdO.js";
 import { t as m } from "./shield-check-C5Gv2cM1.js";
 import { t as h } from "./sparkles-D1IGi_cC.js";
 import { t as g } from "./_plugin-vue_export-helper-B0hnzhyu.js";
-import { n as _ } from "./useCloudI18n-CL_AwWwi.js";
+import { n as _ } from "./useCloudI18n-ByEMykjO.js";
 //#region src/cloud/components/AiFeatureMenu.vue?vue&type=script&setup=true&lang.ts
 var v = {
 	class: "tpl-ai-feature-menu tpl:w-[280px] tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:py-1 tpl:bg-[var(--tpl-bg-elevated)] tpl:border tpl:border-[var(--tpl-border)] tpl:shadow-[var(--tpl-shadow-lg)]",

package/dist/{BlockA11yBadge-C0S6kPC4.js → BlockA11yBadge-BFIw0h1m.js}

@@ -1,6 +1,6 @@
 import { A as e, at as t, b as n, d as r, h as i, m as a, p as o, rt as s, w as c } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
-import { t as l } from "./keys-Bqs_0du9.js";
-import { t as u } from "./useI18n-CgmQftNf.js";
+import { t as l } from "./keys-B5SJtPWf.js";
+import { t as u } from "./useI18n-PEB8ioi_.js";
 import { t as d } from "./circle-alert-C0L9pUQ4.js";
 import { t as f } from "./triangle-alert-DWQySIE2.js";
 //#region src/components/canvas/BlockA11yBadge.vue?vue&type=script&setup=true&lang.ts

package/dist/{CloudEditor-DYYaScFe.js → CloudEditor-DdZatjUe.js}

@@ -1,14 +1,14 @@
 import { A as e, B as t, L as n, M as r, O as i, Q as a, X as o, _ as s, at as c, b as l, c as u, d, f, g as p, h as m, j as h, k as g, l as _, m as v, o as y, ot as b, p as x, q as S, rt as C, st as w, t as T, v as E, y as D, z as O } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
 import { t as k } from "./timeouts-BSGxjuUF.js";
 import { E as A, i as j } from "./dist-DJmnUmW9.js";
-import { P as M, S as ee, t as N } from "./useEditorCore-CnXrv71D.js";
+import { P as M, S as ee, t as N } from "./useEditorCore-uCU9Ny0M.js";
 import { s as P, t as F } from "./dist-BzRLLpfq.js";
-import { C as te, c as ne, i as I, l as L, n as R, u as z, w as B, x as V } from "./keys-Bqs_0du9.js";
-import { t as H } from "./useI18n-CgmQftNf.js";
+import { E as te, S as ne, T as I, c as L, i as R, l as z, n as B, u as V } from "./keys-B5SJtPWf.js";
+import { t as H } from "./useI18n-PEB8ioi_.js";
 import { t as U } from "./createLucideIcon-Di4mqmGn.js";
 import { t as W } from "./check-Bg5yrRmX.js";
 import { t as G } from "./circle-alert-C0L9pUQ4.js";
-import { a as K, c as re, i as q, l as ie, n as J, o as ae, r as oe, s as se, t as ce } from "./styles-BgmKdc2x.js";
+import { a as K, c as re, i as q, l as ie, n as J, o as ae, r as oe, s as se, t as ce } from "./styles-D_fEz49o.js";
 import { t as Y } from "./clock-CDlEdqiP.js";
 import { t as X } from "./loader-circle-_9bP23op.js";
 import { t as Z } from "./message-circle-gzy2ZGJ3.js";
@@ -16,7 +16,7 @@ import { t as le } from "./send-BatIZC9a.js";
 import { t as ue } from "./sparkles-D1IGi_cC.js";
 import { t as de } from "./triangle-alert-DWQySIE2.js";
 import { t as fe } from "./_plugin-vue_export-helper-B0hnzhyu.js";
-import { n as Q } from "./useCloudI18n-CL_AwWwi.js";
+import { n as Q } from "./useCloudI18n-ByEMykjO.js";
 import { d as $ } from "./styleConstants-fWzlIIwN.js";
 import { _ as pe, a as me, c as he, d as ge, f as _e, g as ve, h as ye, l as be, m as xe, n as Se, o as Ce, p as we, r as Te, s as Ee, t as De, v as Oe, y as ke } from "./cloud-a3VovHva.js";
 var Ae = U("save", [
@@ -268,7 +268,8 @@ function Ie(e) {
 			enabled: () => t.autoSave !== !1 && v.hasFeature("auto_save")
 		},
 		themeExtraStyles: () => ({ "--tpl-drop-text": `"${r.canvas.dropHere}"` }),
-		keyboardOptions: { onBeforeUndo: () => g?.showCollabUndoWarning() }
+		keyboardOptions: { onBeforeUndo: () => g?.showCollabUndoWarning() },
+		editorRoot: e.editorRoot
 	}), T = Ne({
 		isCollaborationEnabled: C,
 		getCollaboratorCount: () => S?.collaborators.value.length ?? 0,
@@ -322,7 +323,7 @@ function Ie(e) {
 		comments: F,
 		channel: x.channel
 	});
-	let L = ye({
+	let z = ye({
 		authManager: _,
 		onError: t.onError
 	}), H = o(!1), U = o(null), W = o(!1), G = pe({
@@ -334,7 +335,7 @@ function Ie(e) {
 			s()?.filterByBlock(e);
 		});
 	}
-	h(V, A.handleRequestMedia), h(I, _), h(R, O), h(z, F), h(te, L), h(B, G), h(ne, {
+	h(ne, A.handleRequestMedia), h(R, _), h(B, O), h(V, F), h(I, z), h(te, G), h(L, {
 		plan: v,
 		ai: O,
 		comments: {
@@ -348,7 +349,7 @@ function Ie(e) {
 			openBrowser: () => {
 				W.value = !0;
 			},
-			moduleCount: d(() => L.modules.value.length)
+			moduleCount: d(() => z.modules.value.length)
 		}
 	});
 	function q(e) {
@@ -367,7 +368,7 @@ function Ie(e) {
 			if (!e.api.ok) throw Error("Health check failed: API is not reachable");
 			if (!e.auth.ok) throw Error(`Health check failed: authentication error${e.auth.error ? ` - ${e.auth.error}` : ""}`);
 			if (e.websocket.ok || M.warn("WebSocket health check failed:", e.websocket.error ?? "unknown error", "-- real-time features will be disabled."), await v.fetchConfig(), f) return;
-			i.setCustomFontsEnabled(v.hasFeature("custom_fonts")), t.customBlocks?.length && v.hasFeature("custom_blocks") && w.registerCustomBlocks(t.customBlocks), t.theme && v.hasFeature("theme_customization") && (w.themeOverrides.value = t.theme), t.modules !== !1 && v.hasFeature("saved_modules") && L.loadModules(), a("ready");
+			i.setCustomFontsEnabled(v.hasFeature("custom_fonts")), t.customBlocks?.length && v.hasFeature("custom_blocks") && w.registerCustomBlocks(t.customBlocks), t.theme && v.hasFeature("theme_customization") && (w.themeOverrides.value = t.theme), t.modules !== !1 && v.hasFeature("saved_modules") && z.loadModules(), a("ready");
 		} catch (e) {
 			if (f) return;
 			let n = e instanceof Error ? e : Error("Initialization failed", { cause: e });
@@ -397,7 +398,7 @@ function Ie(e) {
 		exporter: j,
 		testEmail: P,
 		commentsInstance: F,
-		savedModulesHeadless: L,
+		savedModulesHeadless: z,
 		scoringInstance: G,
 		panelState: D,
 		snapshotPreview: E,
@@ -590,7 +591,7 @@ var Be = ["aria-label"], Ve = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 	},
 	emits: ["save"],
 	setup(t) {
-		let n = D(() => import("./CollaboratorBar-Bo8vtPId.js")), r = D(() => import("./SnapshotHistory-DwX2fj6N.js")), i = D(() => import("./AiFeatureMenu-ChlAWywJ.js")), { t: a, format: o } = Q();
+		let n = D(() => import("./CollaboratorBar-VZKOv_Zn.js")), r = D(() => import("./SnapshotHistory-C97Iw6xw.js")), i = D(() => import("./AiFeatureMenu-CVHKharv.js")), { t: a, format: o } = Q();
 		return (l, d) => (e(), m("header", Xe, [
 			f("div", Ze, [t.featureFlags.templateLimit.value === null ? v("", !0) : (e(), m("span", Qe, w(C(o)(C(a).header.templatesUsed, {
 				used: t.featureFlags.templateCount.value,
@@ -752,7 +753,7 @@ var Be = ["aria-label"], Ve = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 		"module-insert"
 	],
 	setup(t, { expose: n, emit: r }) {
-		let i = D(() => import("./AiChatSidebar-w5ek3Z76.js")), a = D(() => import("./CommentsSidebar-BQROg36f.js")), s = D(() => import("./DesignReferenceSidebar-CfqpcWX6.js")), c = D(() => import("./TemplateScoringPanel-BIAeCAEP.js")), l = D(() => import("./TestEmailModal-CIlBvWWn.js")), u = D(() => import("./SaveModuleDialog-CSUPmfRP.js")), d = D(() => import("./ModuleBrowserModal-CKhsaPnA.js")), f = D(async () => {
+		let i = D(() => import("./AiChatSidebar-BwLECwsO.js")), a = D(() => import("./CommentsSidebar-BiRtaXYD.js")), s = D(() => import("./DesignReferenceSidebar-Ci9HIGbf.js")), c = D(() => import("./TemplateScoringPanel-V79yrEPC.js")), l = D(() => import("./TestEmailModal-B7S8H-VG.js")), u = D(() => import("./SaveModuleDialog-DGGGNZfm.js")), d = D(() => import("./ModuleBrowserModal-D7IYx1Nh.js")), f = D(async () => {
 			try {
 				return (await import("@templatical/media-library")).MediaLibraryModal;
 			} catch {
@@ -822,11 +823,13 @@ var Be = ["aria-label"], Ve = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 			E(C(f), {
 				visible: t.panelState.mediaLibraryOpen.value,
 				accept: t.panelState.mediaLibraryAccept.value,
+				"popover-target": t.core.popoverRoot.value,
 				onSelect: t.mediaLib.handleMediaSelect,
 				onClose: t.mediaLib.handleMediaLibraryClose
 			}, null, 8, [
 				"visible",
 				"accept",
+				"popover-target",
 				"onSelect",
 				"onClose"
 			])
@@ -922,19 +925,21 @@ var Be = ["aria-label"], Ve = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 		config: {},
 		translations: {},
 		cloudTranslations: {},
-		fontsManager: {}
+		fontsManager: {},
+		shadowRoot: {}
 	},
 	emits: ["ready"],
 	setup(n, { expose: r, emit: a }) {
 		let l = n;
-		h(L, l.cloudTranslations);
+		h(z, l.cloudTranslations);
 		let u = a, d = o(null), p = Ie({
 			config: l.config,
 			translations: l.translations,
 			fontsManager: l.fontsManager,
 			emit: u,
-			getCommentsSidebar: () => d.value ? { filterByBlock: d.value.filterCommentsByBlock } : null
-		}), { isInitializing: _, isAuthReady: S, initError: D, planConfigInstance: k, websocket: A, collaboration: M, isCollaborationEnabled: ee, editor: N, core: P, featureFlags: F, mediaLib: te, exporter: ne, testEmail: I, commentsInstance: R, savedModulesHeadless: z, panelState: B, snapshotPreview: V, collabWarning: H, showSaveModuleDialog: U, showModuleBrowserModal: W, saveModulePreSelectedBlockId: G, setThemeOverrides: re, setUiTheme: q } = p;
+			getCommentsSidebar: () => d.value ? { filterByBlock: d.value.filterCommentsByBlock } : null,
+			editorRoot: l.shadowRoot
+		}), { isInitializing: _, isAuthReady: S, initError: D, planConfigInstance: k, websocket: A, collaboration: M, isCollaborationEnabled: ee, editor: N, core: P, featureFlags: F, mediaLib: te, exporter: ne, testEmail: I, commentsInstance: L, savedModulesHeadless: R, panelState: B, snapshotPreview: V, collabWarning: H, showSaveModuleDialog: U, showModuleBrowserModal: W, saveModulePreSelectedBlockId: G, setThemeOverrides: re, setUiTheme: q } = p;
 		async function J(e) {
 			try {
 				await I.sendTestEmail(e), B.testEmailModalOpen.value = !1;
@@ -1018,7 +1023,7 @@ var Be = ["aria-label"], Ve = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				"feature-flags": C(F),
 				"panel-state": C(B),
 				"snapshot-preview": C(V),
-				"comments-instance": C(R),
+				"comments-instance": C(L),
 				"test-email": C(I),
 				websocket: C(A),
 				collaboration: C(M),
@@ -1149,7 +1154,7 @@ var Be = ["aria-label"], Ve = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				"plan-config-instance": C(k),
 				"test-email": C(I),
 				"media-lib": C(te),
-				"saved-modules-headless": C(z),
+				"saved-modules-headless": C(R),
 				"show-save-module-dialog": C(U),
 				"save-module-pre-selected-block-id": C(G),
 				"show-module-browser-modal": C(W),
@@ -1170,9 +1175,13 @@ var Be = ["aria-label"], Ve = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				"show-save-module-dialog",
 				"save-module-pre-selected-block-id",
 				"show-module-browser-modal"
-			])) : v("", !0)
+			])) : v("", !0),
+			f("div", {
+				ref: (e) => C(P).popoverRoot.value = e,
+				class: "tpl-popover-root"
+			}, null, 512)
 		], 14, Ot));
 	}
-}), [["__scopeId", "data-v-b332971f"]]);
+}), [["__scopeId", "data-v-c00ce9ab"]]);
 //#endregion
 export { Mt as default };

package/dist/{CollaboratorBar-Bo8vtPId.js → CollaboratorBar-VZKOv_Zn.js}

@@ -1,7 +1,7 @@
 import { A as e, M as t, b as n, d as r, f as i, h as a, l as o, m as s, ot as c, p as l, rt as u, st as d } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
-import "./useEditorCore-CnXrv71D.js";
+import "./useEditorCore-uCU9Ny0M.js";
 import { t as f } from "./createLucideIcon-Di4mqmGn.js";
-import { n as p } from "./useCloudI18n-CL_AwWwi.js";
+import { n as p } from "./useCloudI18n-ByEMykjO.js";
 import { t as m } from "./readableTextColor-CY3SiRnt.js";
 var h = f("wifi-off", [
 	["path", {

package/dist/{CommentsSidebar-BQROg36f.js → CommentsSidebar-BiRtaXYD.js}

@@ -1,6 +1,6 @@
 import { A as e, B as t, E as n, L as r, M as i, X as a, _ as ee, a as o, at as s, b as c, d as l, f as u, h as d, l as f, m as p, ot as te, p as m, rt as h, st as g, t as _, v, z as y } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
-import { O as b, i as ne, m as re, u as ie } from "./keys-Bqs_0du9.js";
-import { t as ae } from "./useI18n-CgmQftNf.js";
+import { A as b, i as ne, m as re, u as ie } from "./keys-B5SJtPWf.js";
+import { t as ae } from "./useI18n-PEB8ioi_.js";
 import { t as x } from "./createLucideIcon-Di4mqmGn.js";
 import { t as oe } from "./check-Bg5yrRmX.js";
 import { t as se } from "./chevron-down-tee-ghFi.js";
@@ -10,7 +10,7 @@ import { t as w } from "./send-BatIZC9a.js";
 import { t as T } from "./trash-2-424iqbpN.js";
 import { t as E } from "./x-Dlaenqta.js";
 import { t as D } from "./_plugin-vue_export-helper-B0hnzhyu.js";
-import { n as ce } from "./useCloudI18n-CL_AwWwi.js";
+import { n as ce } from "./useCloudI18n-ByEMykjO.js";
 import { t as le } from "./formatRelativeTime-BOEf47hq.js";
 var ue = x("chevron-up", [["path", {
 	d: "m18 15-6-6-6 6",

package/dist/{CountdownBlock-Bxqe7zwL.js → CountdownBlock-Cq8A8WrM.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./rolldown-runtime-CAFD8bLK.js";
 import { A as t, M as n, X as r, b as i, d as a, f as o, h as s, l as c, m as l, ot as u, rt as d, st as f } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
 import { o as p } from "./dist-BzRLLpfq.js";
-import { t as m } from "./useI18n-CgmQftNf.js";
+import { t as m } from "./useI18n-PEB8ioi_.js";
 //#region src/components/blocks/CountdownBlock.vue?vue&type=script&setup=true&lang.ts
 var h = {
 	key: 0,

package/dist/{CountdownToolbar-CpFAnjSo.js → CountdownToolbar-CojjlZet.js}

@@ -1,7 +1,7 @@
 import { A as e, M as t, _ as n, at as r, b as i, d as a, f as o, h as s, l as c, p as l, rt as u, st as d, v as f, z as p } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
-import { t as m } from "./useI18n-CgmQftNf.js";
+import { t as m } from "./useI18n-PEB8ioi_.js";
 import { f as h } from "./styleConstants-fWzlIIwN.js";
-import { i as g, n as _, r as v, t as y } from "./NumberWithSuffix-Dw8dN1Pt.js";
+import { i as g, n as _, r as v, t as y } from "./NumberWithSuffix-CLTBb2Rj.js";
 //#region src/components/toolbar/CheckboxItem.vue?vue&type=script&setup=true&lang.ts
 var b = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, x = ["checked"], S = /* @__PURE__ */ i({
 	__name: "CheckboxItem",

package/dist/{DesignReferenceSidebar-CfqpcWX6.js → DesignReferenceSidebar-Ci9HIGbf.js}

@@ -1,13 +1,13 @@
 import { A as e, B as t, D as n, L as r, X as i, _ as a, a as ee, at as te, b as o, d as ne, f as s, h as c, m as l, ot as u, p as re, rt as d, st as f, t as ie, v as p, z as ae } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
 import "./timeouts-BSGxjuUF.js";
-import { O as m, i as oe, m as h } from "./keys-Bqs_0du9.js";
+import { A as m, i as oe, m as h } from "./keys-B5SJtPWf.js";
 import { t as g } from "./createLucideIcon-Di4mqmGn.js";
 import { t as se } from "./circle-alert-C0L9pUQ4.js";
 import { t as _ } from "./image-up-1D_3XDdO.js";
 import { t as v } from "./x-Dlaenqta.js";
 import { t as ce } from "./LoadingTrack-CFkDkjBb.js";
 import { t as y } from "./_plugin-vue_export-helper-B0hnzhyu.js";
-import { n as le } from "./useCloudI18n-CL_AwWwi.js";
+import { n as le } from "./useCloudI18n-ByEMykjO.js";
 import { u as ue } from "./cloud-a3VovHva.js";
 var de = g("file-image", [
 	["path", {

package/dist/ModuleBrowserModal-D7IYx1Nh.js

@@ -0,0 +1,206 @@
+import { A as e, B as t, F as n, L as r, M as i, X as a, a as ee, b as o, c as s, d as c, f as l, h as u, i as te, l as d, m as ne, ot as re, p as f, rt as p, st as m, v as h, y as ie, z as ae } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
+import "./useEditorCore-uCU9Ny0M.js";
+import { A as g, T as _, m as oe } from "./keys-B5SJtPWf.js";
+import { t as se } from "./useI18n-PEB8ioi_.js";
+import { t as v } from "./createLucideIcon-Di4mqmGn.js";
+import { n as y, t as b } from "./blockTypeIcons-BSf-3RJ-.js";
+import { t as ce } from "./trash-2-424iqbpN.js";
+import { t as le } from "./x-Dlaenqta.js";
+import { n as ue } from "./useCloudI18n-ByEMykjO.js";
+import { t as de } from "./TplModal-BgABm6ju.js";
+var fe = v("search", [["path", {
+	d: "m21 21-4.34-4.34",
+	key: "14j7rj"
+}], ["circle", {
+	cx: "11",
+	cy: "11",
+	r: "8",
+	key: "4ej97u"
+}]]), pe = {
+	role: "dialog",
+	"aria-modal": "true",
+	"aria-labelledby": "tpl-module-browser-title",
+	class: "tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-[1000px] tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]",
+	style: {
+		"background-color": "var(--tpl-bg-elevated)",
+		"box-shadow": "var(--tpl-shadow-xl)",
+		"max-height": "90vh"
+	}
+}, me = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]" }, x = {
+	id: "tpl-module-browser-title",
+	class: "tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
+}, S = ["aria-label"], C = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, w = { class: "tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden" }, T = { class: "tpl:px-4 tpl:pt-4 tpl:pb-3" }, E = { class: "tpl:relative" }, D = ["placeholder"], O = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4" }, k = {
+	key: 0,
+	class: "tpl:flex tpl:flex-col tpl:gap-1"
+}, A = ["aria-pressed", "onClick"], j = { class: "tpl:flex tpl:items-center tpl:gap-2" }, M = { class: "tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, N = { class: "tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]" }, P = { class: "tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1" }, F = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]"
+}, I = ["aria-label", "onClick"], L = [
+	"aria-label",
+	"title",
+	"onClick"
+], R = {
+	key: 1,
+	class: "tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12"
+}, z = { class: "tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, he = { class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]" }, ge = {
+	key: 0,
+	class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden"
+}, _e = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, ve = {
+	key: 1,
+	class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4"
+}, ye = { class: "tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, be = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]" }, xe = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Se = { class: "tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, Ce = ["value"], we = { class: "tpl:flex tpl:gap-2" }, Te = ["disabled"], B = /* @__PURE__ */ o({
+	__name: "ModuleBrowserModal",
+	props: { visible: { type: Boolean } },
+	emits: ["close", "insert"],
+	setup(o, { emit: v }) {
+		let B = o, V = v, Ee = ie(() => import("./ModulePreviewCanvas-I-uMcK5G.js")), { t: De } = se(), { t: H } = ue(), U = g(_, "ModuleBrowserModal"), W = g(oe, "ModuleBrowserModal"), G = a(""), K = a(null), q = a(null), J = a("end"), Y = c(() => {
+			let e = U.modules.value;
+			if (!G.value) return e;
+			let t = G.value.toLowerCase();
+			return e.filter((e) => e.name.toLowerCase().includes(t));
+		}), X = c(() => K.value ? U.modules.value.find((e) => e.id === K.value) ?? null : null), Oe = c(() => {
+			let e = [{
+				value: "beginning",
+				label: H.modules.insertAtBeginning
+			}], t = W.content.value.blocks;
+			for (let n = 0; n < t.length; n++) {
+				let r = t[n], i = r.type, a = De.blocks[i] ?? r.type;
+				e.push({
+					value: r.id,
+					label: H.modules.insertAfterBlock.replace("{block}", `${a} ${n + 1}`)
+				});
+			}
+			return e.push({
+				value: "end",
+				label: H.modules.insertAtEnd
+			}), e;
+		}), ke = c(() => {
+			if (J.value === "end") return;
+			if (J.value === "beginning") return 0;
+			let e = W.content.value.blocks.findIndex((e) => e.id === J.value);
+			if (e !== -1) return e + 1;
+		});
+		r(() => B.visible, (e) => {
+			if (e) {
+				G.value = "", K.value = null, q.value = null;
+				let e = W.state.selectedBlockId;
+				e ? J.value = W.content.value.blocks.findIndex((t) => t.id === e) === -1 ? "end" : e : J.value = "end";
+			}
+		});
+		function Ae(e) {
+			let t = [], n = /* @__PURE__ */ new Set();
+			for (let r of e.content) if (!n.has(r.type) && b[r.type] && (n.add(r.type), t.push({
+				type: r.type,
+				icon: b[r.type]
+			})), t.length >= 5) break;
+			return t;
+		}
+		function Z(e) {
+			let t = new Set(e.content.map((e) => e.type));
+			return Math.max(0, t.size - 5);
+		}
+		async function je(e) {
+			try {
+				await U.deleteModule(e), K.value === e && (K.value = null);
+			} finally {
+				q.value = null;
+			}
+		}
+		function Q() {
+			X.value && V("insert", X.value, ke.value);
+		}
+		function $() {
+			V("close");
+		}
+		function Me(e) {
+			e.key === "Escape" && $(), e.key === "Enter" && X.value && (e.preventDefault(), Q());
+		}
+		return (r, a) => (e(), f(de, {
+			visible: o.visible,
+			onClose: $,
+			onKeydown: Me
+		}, {
+			default: ae(() => [l("div", pe, [
+				l("div", me, [l("h3", x, m(p(H).modules.browse), 1), l("button", {
+					"aria-label": p(H).modules.close,
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]",
+					onClick: $
+				}, [h(p(le), {
+					size: 16,
+					"stroke-width": 2
+				})], 8, S)]),
+				l("div", C, [l("div", w, [l("div", T, [l("div", E, [h(p(fe), {
+					size: 14,
+					"stroke-width": 2,
+					class: "tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]"
+				}), t(l("input", {
+					"onUpdate:modelValue": a[0] ||= (e) => G.value = e,
+					type: "text",
+					placeholder: p(H).modules.search,
+					class: "tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"
+				}, null, 8, D), [[ee, G.value]])])]), l("div", O, [Y.value.length > 0 ? (e(), u("div", k, [(e(!0), u(d, null, i(Y.value, (t) => (e(), u("button", {
+					key: t.id,
+					type: "button",
+					"aria-pressed": K.value === t.id,
+					class: "tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]",
+					style: re({
+						borderColor: K.value === t.id ? "var(--tpl-primary)" : "var(--tpl-border)",
+						backgroundColor: K.value === t.id ? "var(--tpl-primary-light)" : "transparent"
+					}),
+					onClick: (e) => K.value = t.id
+				}, [l("div", j, [l("span", M, m(t.name), 1), l("span", N, m(p(H).modules.blockCount.replace("{count}", String(t.content.length))), 1)]), l("div", P, [
+					(e(!0), u(d, null, i(Ae(t), (t) => (e(), f(n(t.icon), {
+						key: t.type,
+						size: 14,
+						"stroke-width": 1.5,
+						class: "tpl:text-[var(--tpl-text-dim)]"
+					}))), 128)),
+					Z(t) > 0 ? (e(), u("span", F, " +" + m(Z(t)), 1)) : ne("", !0),
+					q.value === t.id ? (e(), u("button", {
+						key: 1,
+						"aria-label": p(H).modules.deleteConfirm,
+						class: "tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-100 tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]",
+						style: { "background-color": "transparent" },
+						onClick: s((e) => je(t.id), ["stop"])
+					}, m(p(H).modules.deleteConfirm), 9, I)) : (e(), u("button", {
+						key: 2,
+						class: "tpl-module-delete-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]",
+						"aria-label": p(H).modules.delete,
+						title: p(H).modules.delete,
+						onClick: s((e) => q.value = t.id, ["stop"])
+					}, [h(p(ce), {
+						size: 12,
+						"stroke-width": 1.5
+					})], 8, L))
+				])], 12, A))), 128))])) : (e(), u("div", R, [h(p(y), {
+					size: 32,
+					"stroke-width": 1,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), l("p", z, m(G.value ? p(H).modules.noModules : p(H).modules.noModulesHint), 1)]))])]), l("div", he, [X.value ? (e(), u("div", ge, [l("div", _e, [h(p(Ee), { blocks: X.value.content }, null, 8, ["blocks"])])])) : (e(), u("div", ve, [h(p(y), {
+					size: 32,
+					"stroke-width": 1,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), l("p", ye, m(p(H).modules.selectToPreview), 1)]))])]),
+				l("div", be, [l("div", xe, [l("label", Se, m(p(H).modules.insertPosition), 1), t(l("select", {
+					"onUpdate:modelValue": a[1] ||= (e) => J.value = e,
+					class: "tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"
+				}, [(e(!0), u(d, null, i(Oe.value, (t) => (e(), u("option", {
+					key: t.value,
+					value: t.value
+				}, m(t.label), 9, Ce))), 128))], 512), [[te, J.value]])]), l("div", we, [l("button", {
+					type: "button",
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]",
+					onClick: $
+				}, m(p(H).modules.close), 1), l("button", {
+					type: "button",
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
+					disabled: !X.value,
+					onClick: Q
+				}, m(p(H).modules.insert), 9, Te)])])
+			])]),
+			_: 1
+		}, 8, ["visible"]));
+	}
+});
+//#endregion
+export { B as default };

package/dist/{ModulePreviewCanvas-Cw9GeGus.js → ModulePreviewCanvas-I-uMcK5G.js}

@@ -1,6 +1,6 @@
 import { A as e, F as t, M as n, P as r, b as i, d as a, f as o, h as s, l as c, ot as l, p as u, rt as d, w as f } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
-import { N as p, _ as m, a as h, f as g, g as _, h as v, i as y, m as b, n as x, p as S, r as C, u as w, v as T, y as E } from "./useEditorCore-CnXrv71D.js";
-import { s as D } from "./keys-Bqs_0du9.js";
+import { N as p, _ as m, a as h, f as g, g as _, h as v, i as y, m as b, n as x, p as S, r as C, u as w, v as T, y as E } from "./useEditorCore-uCU9Ny0M.js";
+import { s as D } from "./keys-B5SJtPWf.js";
 //#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
 var O = { class: "tpl:w-full" }, k = { class: "tpl:flex tpl:gap-0" }, A = /* @__PURE__ */ i({
 	name: "PreviewSectionBlock",

package/dist/{NumberWithSuffix-Dw8dN1Pt.js → NumberWithSuffix-CLTBb2Rj.js}

@@ -1,6 +1,6 @@
 import { A as e, F as t, M as n, N as r, X as i, at as a, b as o, d as s, f as c, h as l, l as u, m as d, ot as f, p, rt as m, s as h, st as g, t as ee, v as _, z as te } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
 import { t as v } from "./dist-BzRLLpfq.js";
-import { t as ne } from "./useI18n-CgmQftNf.js";
+import { t as ne } from "./useI18n-PEB8ioi_.js";
 import { h as y, i as b, m as x, p as S, u as C } from "./styleConstants-fWzlIIwN.js";
 //#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
 var w = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, T = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;