@templatical/editor 0.34.3 → 0.36.0

package/dist/x-D_-42Ukq.js

@@ -0,0 +1,14 @@
+import { t as e } from "./createLucideIcon-Cwf_nTzE.js";
+var t = e({
+	name: "x",
+	size: 24,
+	node: [["path", {
+		d: "M18 6 6 18",
+		key: "1bl5f8"
+	}], ["path", {
+		d: "m6 6 12 12",
+		key: "d8bk6v"
+	}]]
+});
+//#endregion
+export { t };

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@templatical/editor",
   "description": "Vue 3 visual drag-and-drop email editor powered by Templatical",
-  "version": "0.34.3",
+  "version": "0.36.0",
   "bugs": "https://github.com/templatical/sdk/issues",
   "devDependencies": {
-    "@lucide/vue": "^1.41.0",
-    "@templatical/core": "0.34.3",
-    "@templatical/quality": "0.34.3",
-    "@templatical/types": "0.34.3",
+    "@lucide/vue": "^1.43.0",
+    "@templatical/core": "0.36.0",
+    "@templatical/media-library": "0.36.0",
+    "@templatical/quality": "0.36.0",
+    "@templatical/types": "0.36.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-color": "^3.31.3",
     "@tiptap/extension-font-family": "^3.31.3",
@@ -24,7 +25,7 @@
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/test-utils": "^2.5.0",
     "@vueuse/core": "^14.4.0",
-    "es-module-lexer": "^2.3.2",
+    "es-module-lexer": "^3.0.2",
     "happy-dom": "^20.14.0",
     "jsdom": "30.0.1",
     "liquidjs": "^10.29.0",
@@ -63,17 +64,13 @@
   "license": "FSL-1.1-MIT",
   "module": "./dist/templatical-editor.js",
   "peerDependencies": {
-    "@templatical/media-library": "0.34.3",
-    "@templatical/quality": "0.34.3",
-    "@templatical/renderer": "0.34.3"
+    "@templatical/quality": "0.36.0",
+    "@templatical/renderer": "0.36.0"
   },
   "peerDependenciesMeta": {
     "@templatical/renderer": {
       "optional": true
     },
-    "@templatical/media-library": {
-      "optional": true
-    },
     "@templatical/quality": {
       "optional": true
     }

package/dist/BlockPreviewCanvas-B621ANn9.js

@@ -1,129 +0,0 @@
-import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { A as t, N as n, Ot as r, P as i, S as a, c as o, d as s, j as c, k as l, l as u, r as d, rt as f, s as p, v as m } from "./vue.runtime.esm-bundler-D9JUcKrV.js";
-import { R as h, a as g, b as _, d as v, f as y, g as b, h as x, i as S, l as C, m as w, n as T, p as E, r as D, v as O, y as k } from "./useEditorCore-DdkQuTHl.js";
-import { A, d as j, h as M, q as N, s as P } from "./keys-C3P1yxnr.js";
-import { n as F, t as I } from "./emailFrameWidth-BmFCN2dp.js";
-//#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
-var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__PURE__ */ m({
-	name: "PreviewSectionBlock",
-	__name: "PreviewSectionBlock",
-	props: {
-		block: {},
-		viewport: {}
-	},
-	setup(e) {
-		let t = {
-			title: C,
-			paragraph: w,
-			image: b,
-			video: T,
-			button: h,
-			divider: k,
-			social: g,
-			menu: x,
-			table: D,
-			spacer: S,
-			html: O,
-			custom: _
-		}, m = e, y = a(P, null), A = p(() => {
-			switch (m.block.columns) {
-				case "2": return ["50%", "50%"];
-				case "3": return [
-					"33.33%",
-					"33.33%",
-					"33.33%"
-				];
-				case "1-2": return ["33.33%", "66.67%"];
-				case "2-1": return ["66.67%", "33.33%"];
-				default: return ["100%"];
-			}
-		}), j = p(() => {
-			let e = A.value.length, t = [...m.block.children];
-			for (; t.length < e;) t.push([]);
-			return t.slice(0, e);
-		});
-		function M(e) {
-			return j.value[e] || [];
-		}
-		function N(e) {
-			return E(e, y, t);
-		}
-		return (e, t) => {
-			let a = n("PreviewSectionBlock", !0);
-			return l(), s("div", L, [o("div", R, [(l(!0), s(d, null, c(j.value, (e, t) => (l(), s("div", {
-				key: t,
-				style: r({ width: A.value[t] })
-			}, [(l(!0), s(d, null, c(M(t), (e) => (l(), s("div", {
-				key: e.id,
-				style: r(f(v)(e))
-			}, [e.type === "section" ? (l(), u(a, {
-				key: 0,
-				block: e,
-				viewport: "desktop"
-			}, null, 8, ["block"])) : (l(), u(i(N(e)), {
-				key: 1,
-				block: e,
-				viewport: "desktop"
-			}, null, 8, ["block"]))], 4))), 128))], 4))), 128))])]);
-		};
-	}
-}), B = ["lang"], V = /*@__PURE__*/ m({
-	__name: "BlockPreviewCanvas",
-	props: {
-		blocks: {},
-		viewport: { default: "desktop" },
-		applyConditionFilter: {
-			type: Boolean,
-			default: !0
-		}
-	},
-	setup(e) {
-		let n = e, m = a(P), L = a(M, null), R = a(j, null), V = a(A, null);
-		t(N, p(() => V?.value ?? !1));
-		let H = p(() => n.applyConditionFilter ? n.blocks.filter((e) => !R?.isHidden(e.id)) : n.blocks), U = p(() => F(L?.content.value.settings, n.viewport)), W = p(() => L ? y(L.content.value.settings) : {}), G = p(() => L?.content.value.settings?.locale?.trim() || void 0), K = p(() => L?.content.value.settings.backgroundColor || "var(--tpl-canvas-bg)"), q = p(() => U.value + 192), J = {
-			section: z,
-			title: C,
-			paragraph: w,
-			image: b,
-			video: T,
-			button: h,
-			divider: k,
-			social: g,
-			menu: x,
-			table: D,
-			spacer: S,
-			html: O,
-			custom: _
-		};
-		function Y(e) {
-			return E(e, m, J);
-		}
-		return (t, n) => (l(), s("div", {
-			"data-testid": "block-preview-stage",
-			class: "tpl:pointer-events-none tpl:mx-auto tpl:flex tpl:select-none tpl:justify-center tpl:rounded-lg",
-			style: r({
-				width: `${q.value}px`,
-				minWidth: `${U.value}px`,
-				maxWidth: "100%",
-				backgroundColor: K.value,
-				boxShadow: "var(--tpl-shadow-sm)"
-			})
-		}, [o("div", {
-			"data-testid": "block-preview-canvas",
-			lang: G.value,
-			style: r({
-				width: `${U.value}px`,
-				transition: f(I),
-				...W.value
-			})
-		}, [(l(!0), s(d, null, c(H.value, (t) => (l(), s("div", {
-			key: t.id,
-			style: r(f(v)(t))
-		}, [(l(), u(i(Y(t)), {
-			block: t,
-			viewport: e.viewport
-		}, null, 8, ["block", "viewport"]))], 4))), 128))], 12, B)], 4));
-	}
-}), H = /* @__PURE__ */ e({ default: () => U }), U = V;
-//#endregion
-export { H as n, U as t };

package/dist/CloudHeaderExtras-BJ3Cebhv.js

@@ -1,59 +0,0 @@
-import { Dt as e, _ as t, c as n, d as r, g as i, h as a, k as o, kt as s, l as c, r as l, rt as u, u as d, v as f, z as p } from "./vue.runtime.esm-bundler-D9JUcKrV.js";
-import { c as m, t as h } from "./runtime-dom.esm-bundler-BuG03jBM.js";
-import { t as g } from "./sparkles-Dy2BJjiX.js";
-import { n as _ } from "./useCloudI18n-BKoiYsWZ.js";
-//#region src/cloud/components/CloudHeaderExtras.vue?vue&type=script&setup=true&lang.ts
-var v = {
-	key: 0,
-	"data-testid": "cloud-template-usage",
-	class: "tpl:text-xs tpl:opacity-60 tpl:text-[var(--tpl-text-muted)]"
-}, y = ["aria-expanded"], b = {
-	key: 0,
-	class: "tpl:absolute tpl:right-0 tpl:top-full tpl:z-50 tpl:mt-1 tpl:origin-top-right"
-}, x = /* @__PURE__ */ f({
-	__name: "CloudHeaderExtras",
-	props: {
-		part: {},
-		cloud: {}
-	},
-	setup(f) {
-		let x = t(() => import("./CollaboratorBar-KphmSQeZ.js")), S = t(() => import("./AiFeatureMenu-DWdKguDN.js")), { t: C, format: w } = _();
-		return (t, _) => f.part === "left" ? (o(), r(l, { key: 0 }, [f.cloud.featureFlags.templateLimit.value === null ? d("", !0) : (o(), r("span", v, s(u(w)(u(C).header.templatesUsed, {
-			used: f.cloud.featureFlags.templateCount.value,
-			max: f.cloud.featureFlags.templateLimit.value
-		})), 1)), f.cloud.collaboration && f.cloud.isCollaborationEnabled.value ? (o(), c(u(x), {
-			key: 1,
-			collaborators: f.cloud.collaboration.collaborators.value,
-			"is-connected": f.cloud.websocket.isConnected.value
-		}, null, 8, ["collaborators", "is-connected"])) : d("", !0)], 64)) : f.part === "right" ? (o(), r(l, { key: 1 }, [f.cloud.featureFlags.canUseAiGeneration.value && f.cloud.featureFlags.hasTemplateSaved.value ? (o(), r("div", {
-			key: 0,
-			ref: (e) => f.cloud.panelState.aiMenuRef.value = e,
-			class: "tpl:relative"
-		}, [n("button", {
-			type: "button",
-			"data-testid": "ai-menu-trigger",
-			"aria-expanded": f.cloud.panelState.aiMenuOpen.value,
-			class: e(["tpl-ai-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-4 tpl:py-2 tpl:text-sm tpl:font-semibold tpl:whitespace-nowrap tpl:transition-all tpl:duration-200", f.cloud.panelState.aiButtonActive.value ? "tpl-ai-btn--active" : "tpl-ai-btn--idle"]),
-			onClick: _[0] ||= m((...e) => f.cloud.panelState.toggleAiMenu && f.cloud.panelState.toggleAiMenu(...e), ["stop"])
-		}, [i(u(g), {
-			size: 16,
-			"stroke-width": 2,
-			class: "tpl-ai-btn-icon"
-		}), a(" " + s(u(C).aiChat.button), 1)], 10, y), i(h, {
-			"enter-active-class": "tpl:transition-all tpl:ease-out",
-			"enter-from-class": "tpl:scale-95 tpl:opacity-0",
-			"enter-to-class": "tpl:scale-100 tpl:opacity-100",
-			"leave-active-class": "tpl:transition-all tpl:duration-100 tpl:ease-in",
-			"leave-from-class": "tpl:scale-100 tpl:opacity-100",
-			"leave-to-class": "tpl:scale-95 tpl:opacity-0"
-		}, {
-			default: p(() => [f.cloud.panelState.aiMenuOpen.value ? (o(), r("div", b, [i(u(S), {
-				"active-feature": f.cloud.panelState.activeAiFeature.value,
-				onSelect: f.cloud.panelState.handleAiFeatureSelect
-			}, null, 8, ["active-feature", "onSelect"])])) : d("", !0)]),
-			_: 1
-		})], 512)) : d("", !0)], 64)) : d("", !0);
-	}
-});
-//#endregion
-export { x as default };

package/dist/CollaboratorBar-KphmSQeZ.js

@@ -1,95 +0,0 @@
-import { Ot as e, c as t, d as n, j as r, k as i, kt as a, l as o, r as s, rt as c, s as l, u, v as d } from "./vue.runtime.esm-bundler-D9JUcKrV.js";
-import "./useEditorCore-DdkQuTHl.js";
-import { t as f } from "./createLucideIcon-Bvw1Zx56.js";
-import { n as p } from "./useCloudI18n-BKoiYsWZ.js";
-import { t as m } from "./readableTextColor-f8Kykfnh.js";
-var h = f("wifi-off", [
-	["path", {
-		d: "M12 20h.01",
-		key: "zekei9"
-	}],
-	["path", {
-		d: "M8.5 16.429a5 5 0 0 1 7 0",
-		key: "1bycff"
-	}],
-	["path", {
-		d: "M5 12.859a10 10 0 0 1 5.17-2.69",
-		key: "1dl1wf"
-	}],
-	["path", {
-		d: "M19 12.859a10 10 0 0 0-2.007-1.523",
-		key: "4k23kn"
-	}],
-	["path", {
-		d: "M2 8.82a15 15 0 0 1 4.177-2.643",
-		key: "1grhjp"
-	}],
-	["path", {
-		d: "M22 8.82a15 15 0 0 0-11.288-3.764",
-		key: "z3jwby"
-	}],
-	["path", {
-		d: "m2 2 20 20",
-		key: "1ooewy"
-	}]
-]), g = f("wifi", [
-	["path", {
-		d: "M12 20h.01",
-		key: "zekei9"
-	}],
-	["path", {
-		d: "M2 8.82a15 15 0 0 1 20 0",
-		key: "dnpr2z"
-	}],
-	["path", {
-		d: "M5 12.859a10 10 0 0 1 14 0",
-		key: "1x1e6c"
-	}],
-	["path", {
-		d: "M8.5 16.429a5 5 0 0 1 7 0",
-		key: "1bycff"
-	}]
-]), _ = { class: "tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2" }, v = ["title"], y = {
-	key: 0,
-	class: "tpl:flex tpl:items-center tpl:-space-x-1.5"
-}, b = ["title"], x = ["title"], S = 3, C = /* @__PURE__ */ d({
-	__name: "CollaboratorBar",
-	props: {
-		collaborators: {},
-		isConnected: { type: Boolean }
-	},
-	setup(d) {
-		let f = d, { t: C } = p(), w = l(() => f.collaborators.slice(0, S)), T = l(() => f.collaborators.slice(S)), E = l(() => T.value.length), D = l(() => T.value.map((e) => e.name).join("\n"));
-		function O(e) {
-			let t = e.trim().split(/\s+/);
-			return t.length >= 2 ? (t[0].charAt(0) + t[t.length - 1].charAt(0)).toUpperCase() : e.charAt(0).toUpperCase();
-		}
-		return (l, f) => (i(), n("div", _, [t("div", {
-			class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-[11px]",
-			style: e({ color: d.isConnected ? "var(--tpl-success)" : "var(--tpl-text-muted)" }),
-			title: d.isConnected ? c(C).collaboration.connected : c(C).collaboration.disconnected
-		}, [d.isConnected ? (i(), o(c(g), {
-			key: 0,
-			size: 12,
-			"stroke-width": 2
-		})) : (i(), o(c(h), {
-			key: 1,
-			size: 12,
-			"stroke-width": 2
-		}))], 12, v), d.collaborators.length > 0 ? (i(), n("div", y, [(i(!0), n(s, null, r(w.value, (t) => (i(), n("div", {
-			key: t.id,
-			class: "tpl-collaborator-avatar tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:transition-transform tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]",
-			style: e({
-				backgroundColor: t.color,
-				color: c(m)(t.color)
-			}),
-			title: t.name
-		}, a(O(t.name)), 13, b))), 128)), E.value > 0 ? (i(), n("div", {
-			key: 0,
-			class: "tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[9px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]",
-			title: D.value
-		}, " +" + a(E.value), 9, x)) : u("", !0)])) : u("", !0)]));
-	}
-});
-//#endregion
-export { C as default };

package/dist/IssuesPanel-CiOjeRFI.js

@@ -1,109 +0,0 @@
-import { Dt as e, P as t, S as n, c as r, d as i, g as a, h as o, j as s, k as c, kt as l, l as u, r as d, rt as f, s as p, u as m, v as h } from "./vue.runtime.esm-bundler-D9JUcKrV.js";
-import { V as g, h as _ } from "./keys-C3P1yxnr.js";
-import { t as v } from "./useI18n-CL6RfPzK.js";
-import { t as y } from "./createLucideIcon-Bvw1Zx56.js";
-import { t as b } from "./circle-alert-CJDW5LZo.js";
-import { t as x } from "./info-DybAwcA3.js";
-import { n as S, t as C } from "./useScrollToBlock-CdI8fGqt.js";
-import { t as w } from "./triangle-alert-DxnFj4-B.js";
-var T = y("arrow-right", [["path", {
-	d: "M5 12h14",
-	key: "1ays0h"
-}], ["path", {
-	d: "m12 5 7 7-7 7",
-	key: "xquz4c"
-}]]), E = y("wrench", [["path", {
-	d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z",
-	key: "1ngwbx"
-}]]), D = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, O = { class: "tpl:flex tpl:items-center tpl:gap-2" }, k = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, A = ["title"], j = {
-	key: 0,
-	class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
-}, M = {
-	key: 1,
-	class: "tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
-}, N = { class: "tpl:ml-auto tpl:font-normal tpl:opacity-70" }, P = {
-	key: 1,
-	class: "tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0"
-}, F = { class: "tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]" }, I = { class: "tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, L = { class: "tpl:flex tpl:gap-1.5" }, R = ["onClick"], z = ["title", "onClick"], B = /* @__PURE__ */ h({
-	__name: "IssuesPanel",
-	setup(h) {
-		let { t: y, format: B } = v(), V = n(g, null), H = n(_, null), U = C(), W = p(() => (V?.issues.value ?? []).filter((e) => e.severity === "error")), G = p(() => (V?.issues.value ?? []).filter((e) => e.severity === "warning")), K = p(() => (V?.issues.value ?? []).filter((e) => e.severity === "info")), q = p(() => W.value.length + G.value.length + K.value.length);
-		function J(e) {
-			H && e.blockId && (H.selectBlock(e.blockId), U(e.blockId));
-		}
-		function Y(e) {
-			V?.applyFix(e);
-		}
-		return (n, p) => (c(), i("div", D, [r("header", O, [
-			a(f(S), {
-				size: 16,
-				"stroke-width": 1.5
-			}),
-			r("h3", k, l(f(y).issues.panelTitle), 1),
-			q.value > 0 ? (c(), i("span", {
-				key: 0,
-				class: "tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]",
-				title: f(B)(f(y).issues.issueCountTooltip, { count: q.value })
-			}, l(q.value), 9, A)) : m("", !0)
-		]), !f(V) || f(V).unavailable.value ? (c(), i("div", j)) : q.value === 0 ? (c(), i("div", M, l(f(y).issues.emptyState), 1)) : (c(!0), i(d, { key: 2 }, s([
-			{
-				key: "errors",
-				title: f(y).issues.groupErrors,
-				icon: f(b),
-				items: W.value,
-				tone: "tpl:text-[var(--tpl-danger)]"
-			},
-			{
-				key: "warnings",
-				title: f(y).issues.groupWarnings,
-				icon: f(w),
-				items: G.value,
-				tone: "tpl:text-[var(--tpl-warning)]"
-			},
-			{
-				key: "info",
-				title: f(y).issues.groupInfo,
-				icon: f(x),
-				items: K.value,
-				tone: "tpl:text-[var(--tpl-text-muted)]"
-			}
-		], (n) => (c(), i("section", { key: n.key }, [n.items.length > 0 ? (c(), i("header", {
-			key: 0,
-			class: e(["tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide", n.tone])
-		}, [
-			(c(), u(t(n.icon), {
-				size: 12,
-				"stroke-width": 2
-			})),
-			o(" " + l(n.title) + " ", 1),
-			r("span", N, l(n.items.length), 1)
-		], 2)) : m("", !0), n.items.length > 0 ? (c(), i("ul", P, [(c(!0), i(d, null, s(n.items, (e) => (c(), i("li", {
-			key: `${e.ruleId}-${e.blockId ?? "template"}`,
-			class: "tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3"
-		}, [
-			r("p", F, l(e.message), 1),
-			r("p", I, l(e.ruleId), 1),
-			r("div", L, [e.blockId ? (c(), i("button", {
-				key: 0,
-				type: "button",
-				"data-testid": "issue-jump",
-				class: "tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]",
-				onClick: (t) => J(e)
-			}, [a(f(T), {
-				size: 10,
-				"stroke-width": 2
-			}), o(" " + l(f(y).issues.jump), 1)], 8, R)) : m("", !0), e.fix ? (c(), i("button", {
-				key: 1,
-				type: "button",
-				class: "tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-on-primary)]",
-				title: e.fix.description,
-				onClick: (t) => Y(e)
-			}, [a(f(E), {
-				size: 10,
-				"stroke-width": 2
-			}), o(" " + l(f(y).issues.fix), 1)], 8, z)) : m("", !0)])
-		]))), 128))])) : m("", !0)]))), 128))]));
-	}
-});
-//#endregion
-export { B as default };