@templatical/editor 0.26.2 → 0.27.0

package/dist/CloudPanels-D0X449DD.js

@@ -0,0 +1,227 @@
+import { _ as e, c as t, d as n, g as r, j as i, k as a, kt as o, l as s, m as c, r as l, rt as u, u as d, v as f, z as p } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { c as m, t as h } from "./runtime-dom.esm-bundler-BgKXIPLV.js";
+import { t as g } from "./useI18n-BfXff_Sy.js";
+import { t as _ } from "./circle-alert-CuuK6thq.js";
+import { t as v } from "./triangle-alert-Fw0ce8oQ.js";
+import { n as y } from "./useCloudI18n-CAZTZ9_a.js";
+//#region src/cloud/components/CloudErrorOverlay.vue?vue&type=script&setup=true&lang.ts
+var b = {
+	key: 0,
+	role: "alert",
+	class: "tpl-error tpl:absolute tpl:inset-0 tpl:z-overlay tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-6 tpl:px-8 tpl:bg-[var(--tpl-bg)]"
+}, x = { class: "tpl:flex tpl:size-16 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-danger-light)]" }, S = { class: "tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:text-center" }, C = { class: "tpl:text-lg tpl:font-semibold tpl:text-[var(--tpl-text)]" }, w = { class: "tpl:max-w-md tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, T = /* @__PURE__ */ f({
+	__name: "CloudErrorOverlay",
+	props: {
+		error: {},
+		visible: { type: Boolean }
+	},
+	emits: ["retry"],
+	setup(e, { emit: i }) {
+		let s = i, { t: c } = y();
+		function l(e) {
+			return "isUnauthorized" in e && e.isUnauthorized ? c.error.authFailed : "isNotFound" in e && e.isNotFound ? c.error.templateNotFound : c.error.defaultMessage;
+		}
+		function f(e) {
+			return "isNotFound" in e && !!e.isNotFound;
+		}
+		return (i, p) => e.visible && e.error ? (a(), n("div", b, [
+			t("div", x, [r(u(_), {
+				size: 32,
+				"stroke-width": 1.5,
+				class: "tpl:text-[var(--tpl-danger)]"
+			})]),
+			t("div", S, [t("h2", C, o(u(c).error.title), 1), t("p", w, o(l(e.error)), 1)]),
+			f(e.error) ? d("", !0) : (a(), n("button", {
+				key: 0,
+				class: "tpl-btn tpl-btn-primary tpl:inline-flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]",
+				onClick: p[0] ||= (e) => s("retry")
+			}, o(u(c).error.retry), 1))
+		])) : d("", !0);
+	}
+}), E = {
+	key: 0,
+	class: "tpl-loading tpl:absolute tpl:inset-0 tpl:z-overlay tpl:flex tpl:flex-col tpl:bg-[var(--tpl-bg)]"
+}, D = { class: "tpl:flex tpl:flex-1 tpl:overflow-hidden" }, O = { class: "tpl:flex tpl:w-12 tpl:shrink-0 tpl:flex-col tpl:items-center tpl:gap-4 tpl:py-5 tpl:border-r tpl:border-[var(--tpl-border)]" }, k = /* @__PURE__ */ f({
+	__name: "CloudLoadingOverlay",
+	props: { visible: { type: Boolean } },
+	setup(e) {
+		return (r, o) => e.visible ? (a(), n("div", E, [o[1] ||= c("<div class=\"tpl:flex tpl:h-14 tpl:shrink-0 tpl:items-center tpl:justify-between tpl:px-4 tpl:border-b tpl:border-[var(--tpl-border)]\"><div class=\"tpl-shimmer tpl:h-5 tpl:w-28 tpl:rounded-[var(--tpl-radius-sm)]\"></div><div class=\"tpl:flex tpl:gap-3\"><div class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"></div><div class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"></div></div></div>", 1), t("div", D, [t("div", O, [(a(), n(l, null, i(5, (e) => t("div", {
+			key: e,
+			class: "tpl-shimmer tpl:size-7 tpl:rounded-[var(--tpl-radius-sm)]"
+		})), 64))]), o[0] ||= c("<div class=\"tpl:flex tpl:flex-1 tpl:items-start tpl:justify-center tpl:overflow-auto tpl:p-8 tpl:bg-[var(--tpl-canvas-bg)]\"><div class=\"tpl:w-full tpl:max-w-[600px] tpl:rounded-[var(--tpl-radius)] tpl:p-6 tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)]\"><div class=\"tpl:space-y-2 tpl:py-4\"><div class=\"tpl-shimmer tpl:h-3 tpl:w-3/4 tpl:rounded\"></div><div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div><div class=\"tpl-shimmer tpl:h-3 tpl:w-5/6 tpl:rounded\"></div></div><div class=\"tpl:py-4\"><div class=\"tpl-shimmer tpl:h-44 tpl:w-full tpl:rounded-[var(--tpl-radius-sm)]\"></div></div><div class=\"tpl:space-y-2 tpl:py-4\"><div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div><div class=\"tpl-shimmer tpl:h-3 tpl:w-2/3 tpl:rounded\"></div></div><div class=\"tpl:flex tpl:justify-center tpl:py-4\"><div class=\"tpl-shimmer tpl:h-10 tpl:w-36 tpl:rounded-[var(--tpl-radius-sm)]\"></div></div><div class=\"tpl:space-y-2 tpl:py-4\"><div class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/2 tpl:rounded\"></div><div class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/3 tpl:rounded\"></div></div></div></div><div class=\"tpl:flex tpl:w-[320px] tpl:shrink-0 tpl:flex-col tpl:gap-4 tpl:p-4 tpl:border-l tpl:border-[var(--tpl-border)]\"><div class=\"tpl-shimmer tpl:h-8 tpl:rounded-[var(--tpl-radius-sm)]\"></div><div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div><div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div></div>", 2)])])) : d("", !0);
+	}
+}), A = ["aria-label"], j = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl:max-w-md tpl:flex-col tpl:gap-4 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-5 tpl:shadow-[var(--tpl-shadow-md)]" }, M = { class: "tpl:flex tpl:items-center tpl:gap-2" }, N = { class: "tpl:m-0 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-text)]" }, P = { class: "tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, F = { class: "tpl:m-0 tpl:flex tpl:max-h-64 tpl:list-none tpl:flex-col tpl:gap-1.5 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2" }, I = { class: "tpl:text-xs tpl:text-[var(--tpl-text)]" }, L = { class: "tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, R = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, z = /* @__PURE__ */ f({
+	__name: "CloudSaveGateModal",
+	props: {
+		open: { type: Boolean },
+		issues: {}
+	},
+	emits: ["cancel", "confirm"],
+	setup(e, { emit: c }) {
+		let f = c, { t: g } = y();
+		return (c, _) => (a(), s(h, {
+			"enter-active-class": "tpl:transition-opacity",
+			"leave-active-class": "tpl:transition-opacity",
+			"enter-from-class": "tpl:opacity-0",
+			"leave-to-class": "tpl:opacity-0"
+		}, {
+			default: p(() => [e.open ? (a(), n("div", {
+				key: 0,
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": u(g).saveGate.title,
+				class: "tpl:fixed tpl:inset-0 tpl:z-50 tpl:flex tpl:items-center tpl:justify-center tpl:bg-black/40 tpl:p-6",
+				onClick: _[2] ||= m((e) => f("cancel"), ["self"])
+			}, [t("div", j, [
+				t("header", M, [r(u(v), {
+					size: 18,
+					"stroke-width": 2,
+					class: "tpl:text-[var(--tpl-warning)]"
+				}), t("h2", N, o(u(g).saveGate.title), 1)]),
+				t("p", P, o(u(g).saveGate.body), 1),
+				t("ul", F, [(a(!0), n(l, null, i(e.issues, (e) => (a(), n("li", {
+					key: `${e.ruleId}-${e.blockId ?? "template"}`,
+					class: "tpl:flex tpl:flex-col tpl:gap-0.5 tpl:rounded tpl:px-2 tpl:py-1.5"
+				}, [t("span", I, o(e.message), 1), t("span", L, o(e.ruleId), 1)]))), 128))]),
+				t("footer", R, [t("button", {
+					type: "button",
+					class: "tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]",
+					onClick: _[0] ||= (e) => f("cancel")
+				}, o(u(g).saveGate.cancel), 1), t("button", {
+					type: "button",
+					class: "tpl:rounded-md tpl:bg-[var(--tpl-danger)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-bg)]",
+					onClick: _[1] ||= (e) => f("confirm")
+				}, o(u(g).saveGate.confirm), 1)])
+			])], 8, A)) : d("", !0)]),
+			_: 1
+		}));
+	}
+}), B = {
+	key: 0,
+	role: "status",
+	"aria-live": "polite",
+	class: "tpl:absolute tpl:top-16 tpl:left-1/2 tpl:z-toast tpl:-translate-x-1/2 tpl:rounded-[var(--tpl-radius)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:shadow-[var(--tpl-shadow-lg)]",
+	style: {
+		"background-color": "var(--tpl-warning-light)",
+		color: "var(--tpl-text)",
+		border: "1px solid var(--tpl-warning)"
+	}
+}, V = /* @__PURE__ */ f({
+	__name: "CollabUndoToast",
+	props: { visible: { type: Boolean } },
+	setup(e) {
+		let { t } = g();
+		return (r, i) => e.visible ? (a(), n("div", B, o(u(t).history.collabWarning), 1)) : d("", !0);
+	}
+}), H = /* @__PURE__ */ f({
+	__name: "CloudPanels",
+	props: {
+		editor: {},
+		core: {},
+		runtime: {},
+		cloud: {},
+		ready: {}
+	},
+	setup(t) {
+		let i = e(() => import("./AiChatSidebar-iVJDzqjr.js")), o = e(() => import("./DesignReferenceSidebar-DKsx2TiL.js")), s = e(() => import("./TemplateScoringPanel-Bv_bBsJi.js")), c = e(async () => {
+			try {
+				return (await import("@templatical/media-library")).MediaLibraryModal;
+			} catch {
+				throw Error("[Templatical] Cloud media library requires the optional peer dependency '@templatical/media-library'. Please install it.");
+			}
+		}), d = t;
+		function f(e) {
+			d.core.history.record(), d.editor.setContent(e), d.core.conditionPreview.reset();
+		}
+		return (e, d) => (a(), n(l, null, [
+			r(h, {
+				"enter-active-class": "tpl:transition-opacity tpl:duration-200",
+				"enter-from-class": "tpl:opacity-100",
+				"enter-to-class": "tpl:opacity-100",
+				"leave-active-class": "tpl:transition-opacity tpl:duration-300",
+				"leave-from-class": "tpl:opacity-100",
+				"leave-to-class": "tpl:opacity-0"
+			}, {
+				default: p(() => [r(k, { visible: t.editor.state.isLoading }, null, 8, ["visible"])]),
+				_: 1
+			}),
+			r(h, {
+				"enter-active-class": "tpl:transition-opacity tpl:duration-200",
+				"enter-from-class": "tpl:opacity-0",
+				"enter-to-class": "tpl:opacity-100",
+				"leave-active-class": "tpl:transition-opacity tpl:duration-300",
+				"leave-from-class": "tpl:opacity-100",
+				"leave-to-class": "tpl:opacity-0"
+			}, {
+				default: p(() => [r(T, {
+					error: t.ready.sessionError.value,
+					visible: !!t.ready.sessionError.value,
+					onRetry: t.ready.retry
+				}, null, 8, [
+					"error",
+					"visible",
+					"onRetry"
+				])]),
+				_: 1
+			}),
+			r(z, {
+				open: t.ready.saveGate.modalOpen.value,
+				issues: t.ready.saveGate.blockingIssues.value,
+				onCancel: t.ready.saveGate.cancel,
+				onConfirm: t.ready.saveGate.confirmAndSave
+			}, null, 8, [
+				"open",
+				"issues",
+				"onCancel",
+				"onConfirm"
+			]),
+			r(h, {
+				"enter-active-class": "tpl:transition-all tpl:duration-200 tpl:ease-out",
+				"enter-from-class": "tpl:translate-y-[-8px] tpl:opacity-0",
+				"enter-to-class": "tpl:translate-y-0 tpl:opacity-100",
+				"leave-active-class": "tpl:transition-all tpl:duration-300 tpl:ease-in",
+				"leave-from-class": "tpl:translate-y-0 tpl:opacity-100",
+				"leave-to-class": "tpl:translate-y-[-8px] tpl:opacity-0"
+			}, {
+				default: p(() => [r(V, { visible: t.ready.collabWarning.collabUndoWarningVisible.value }, null, 8, ["visible"])]),
+				_: 1
+			}),
+			r(u(i), {
+				visible: t.cloud.panelState.aiChatOpen.value,
+				"on-apply": f,
+				onClose: d[0] ||= (e) => t.cloud.panelState.aiChatOpen.value = !1
+			}, null, 8, ["visible"]),
+			r(u(s), {
+				visible: t.cloud.panelState.scoringPanelOpen.value,
+				onClose: d[1] ||= (e) => t.cloud.panelState.scoringPanelOpen.value = !1
+			}, null, 8, ["visible"]),
+			r(u(o), {
+				visible: t.cloud.panelState.designReferenceOpen.value,
+				"has-existing-blocks": t.editor.content.value.blocks.length > 0,
+				onClose: d[2] ||= (e) => t.cloud.panelState.designReferenceOpen.value = !1,
+				onApply: f
+			}, null, 8, ["visible", "has-existing-blocks"]),
+			r(u(c), {
+				visible: t.cloud.panelState.mediaLibraryOpen.value,
+				accept: t.cloud.panelState.mediaLibraryAccept.value,
+				"popover-target": t.core.popoverRoot.value,
+				"auth-manager": t.cloud.mediaBrowser.authManager,
+				"project-id": t.cloud.mediaBrowser.projectId,
+				"plan-config": t.cloud.mediaBrowser.planConfig,
+				onSelect: t.cloud.mediaLib.handleMediaSelect,
+				onClose: t.cloud.mediaLib.handleMediaLibraryClose
+			}, null, 8, [
+				"visible",
+				"accept",
+				"popover-target",
+				"auth-manager",
+				"project-id",
+				"plan-config",
+				"onSelect",
+				"onClose"
+			])
+		], 64));
+	}
+});
+//#endregion
+export { H as default };

package/dist/{CollaboratorBar-zvfvE7f-.js → CollaboratorBar-DMSWCrX3.js}

@@ -1,7 +1,7 @@
-import { A as e, Dt as t, O as n, Ot as r, _ as i, c as a, d as o, l as s, nt as c, r as l, s as u, u as d } from "./vue.runtime.esm-bundler-D1diBMsm.js";
-import "./useEditorCore-idmPLUeb.js";
-import { t as f } from "./createLucideIcon-C8WzBYCv.js";
-import { n as p } from "./useCloudI18n-DKVm6PCa.js";
+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-DzEsDRtY.js";
+import "./useEditorCore-B-kONNRw.js";
+import { t as f } from "./createLucideIcon-L-wQXW_R.js";
+import { n as p } from "./useCloudI18n-CAZTZ9_a.js";
 import { t as m } from "./readableTextColor-f8Kykfnh.js";
 var h = f("wifi-off", [
 	["path", {
@@ -52,43 +52,43 @@ var h = f("wifi-off", [
 ]), _ = { 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__ */ i({
+}, b = ["title"], x = ["title"], S = 3, C = /* @__PURE__ */ d({
 	__name: "CollaboratorBar",
 	props: {
 		collaborators: {},
 		isConnected: { type: Boolean }
 	},
-	setup(i) {
-		let f = i, { t: C } = p(), w = u(() => f.collaborators.slice(0, S)), T = u(() => f.collaborators.slice(S)), E = u(() => T.value.length), D = u(() => T.value.map((e) => e.name).join("\n"));
+	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 (u, f) => (n(), o("div", _, [a("div", {
+		return (l, f) => (i(), n("div", _, [t("div", {
 			class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-[11px]",
-			style: t({ color: i.isConnected ? "var(--tpl-success)" : "var(--tpl-text-muted)" }),
-			title: i.isConnected ? c(C).collaboration.connected : c(C).collaboration.disconnected
-		}, [i.isConnected ? (n(), s(c(g), {
+			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
-		})) : (n(), s(c(h), {
+		})) : (i(), o(c(h), {
 			key: 1,
 			size: 12,
 			"stroke-width": 2
-		}))], 12, v), i.collaborators.length > 0 ? (n(), o("div", y, [(n(!0), o(l, null, e(w.value, (e) => (n(), o("div", {
-			key: e.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:duration-150 tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]",
-			style: t({
-				backgroundColor: e.color,
-				color: c(m)(e.color)
+		}))], 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: e.name
-		}, r(O(e.name)), 13, b))), 128)), E.value > 0 ? (n(), o("div", {
+			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
-		}, " +" + r(E.value), 9, x)) : d("", !0)])) : d("", !0)]));
+		}, " +" + a(E.value), 9, x)) : u("", !0)])) : u("", !0)]));
 	}
 });
 //#endregion