@templatical/editor 0.25.2 → 0.26.0

package/dist/cdn/chunks/{BlockPreviewCanvas-oND1iXLL.js → BlockPreviewCanvas-DH5ULGkw.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./rolldown-runtime-B0aSnxlc.js";
-import { I as t, L as n, M as r, N as i, P as a, T as o, f as s, g as c, it as l, m as u, p as d, st as f, u as p, x as m } from "./draggable-Z4XXmbPC.js";
-import { _ as h, a as g, c as _, d as v, f as y, h as b, i as x, k as S, m as C, n as w, p as T, r as E, u as D, v as O, y as k } from "./useEditorCore-BMXBmdd8.js";
-import { W as A, f as j, g as M, k as N, s as P } from "./keys-DsoX52o_.js";
+import { I as t, L as n, M as r, N as i, P as a, T as o, ct as s, f as c, g as l, it as u, m as d, p as f, u as p, x as m } from "./draggable-DCs9qL-b.js";
+import { _ as h, a as g, c as _, d as v, f as y, h as b, i as x, k as S, m as C, n as w, p as T, r as E, u as D, v as O, y as k } from "./useEditorCore-C_nUXiph.js";
+import { W as A, f as j, g as M, k as N, s as P } from "./keys-Cmc2Yl3D.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({
@@ -25,7 +25,7 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 			spacer: x,
 			html: h,
 			custom: k
-		}, m = e, v = o(P, null), A = s(() => {
+		}, m = e, v = o(P, null), A = c(() => {
 			switch (m.block.columns) {
 				case "2": return ["50%", "50%"];
 				case "3": return [
@@ -37,7 +37,7 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 				case "2-1": return ["66.67%", "33.33%"];
 				default: return ["100%"];
 			}
-		}), j = s(() => {
+		}), j = c(() => {
 			let e = A.value.length, t = [...m.block.children];
 			for (; t.length < e;) t.push([]);
 			return t.slice(0, e);
@@ -50,17 +50,17 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 		}
 		return (e, i) => {
 			let o = t("PreviewSectionBlock", !0);
-			return r(), c("div", L, [d("div", R, [(r(!0), c(p, null, a(j.value, (e, t) => (r(), c("div", {
+			return r(), l("div", L, [f("div", R, [(r(!0), l(p, null, a(j.value, (e, t) => (r(), l("div", {
 				key: t,
-				style: f({ width: A.value[t] })
-			}, [(r(!0), c(p, null, a(M(t), (e) => (r(), c("div", {
+				style: s({ width: A.value[t] })
+			}, [(r(!0), l(p, null, a(M(t), (e) => (r(), l("div", {
 				key: e.id,
-				style: f(l(D)(e))
-			}, [e.type === "section" ? (r(), u(o, {
+				style: s(u(D)(e))
+			}, [e.type === "section" ? (r(), d(o, {
 				key: 0,
 				block: e,
 				viewport: "desktop"
-			}, null, 8, ["block"])) : (r(), u(n(N(e)), {
+			}, null, 8, ["block"])) : (r(), d(n(N(e)), {
 				key: 1,
 				block: e,
 				viewport: "desktop"
@@ -78,9 +78,9 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 		}
 	},
 	setup(e) {
-		let t = e, d = o(P), m = o(M, null), L = o(j, null), R = o(N, null);
-		i(A, s(() => R?.value ?? !1));
-		let B = s(() => t.applyConditionFilter ? t.blocks.filter((e) => !L?.isHidden(e.id)) : t.blocks), V = s(() => F(m?.content.value.settings, t.viewport)), H = s(() => m ? v(m.content.value.settings) : {}), U = {
+		let t = e, f = o(P), m = o(M, null), L = o(j, null), R = o(N, null);
+		i(A, c(() => R?.value ?? !1));
+		let B = c(() => t.applyConditionFilter ? t.blocks.filter((e) => !L?.isHidden(e.id)) : t.blocks), V = c(() => F(m?.content.value.settings, t.viewport)), H = c(() => m ? v(m.content.value.settings) : {}), U = {
 			section: z,
 			title: _,
 			paragraph: T,
@@ -96,22 +96,22 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 			custom: k
 		};
 		function W(e) {
-			return y(e, d, U);
+			return y(e, f, U);
 		}
-		return (t, i) => (r(), c("div", {
+		return (t, i) => (r(), l("div", {
 			"data-testid": "block-preview-canvas",
 			class: "tpl:pointer-events-none tpl:mx-auto tpl:select-none tpl:rounded-lg",
-			style: f({
+			style: s({
 				width: `${V.value}px`,
-				transition: l(I),
+				transition: u(I),
 				backgroundColor: "var(--tpl-canvas-bg)",
 				boxShadow: "var(--tpl-shadow-sm)",
 				...H.value
 			})
-		}, [(r(!0), c(p, null, a(B.value, (t) => (r(), c("div", {
+		}, [(r(!0), l(p, null, a(B.value, (t) => (r(), l("div", {
 			key: t.id,
-			style: f(l(D)(t))
-		}, [(r(), u(n(W(t)), {
+			style: s(u(D)(t))
+		}, [(r(), d(n(W(t)), {
 			block: t,
 			viewport: e.viewport
 		}, null, 8, ["block", "viewport"]))], 4))), 128))], 4));
@@ -120,4 +120,4 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 //#endregion
 export { V as n, H as t };
 
-//# sourceMappingURL=BlockPreviewCanvas-oND1iXLL.js.map
+//# sourceMappingURL=BlockPreviewCanvas-DH5ULGkw.js.map

package/dist/cdn/chunks/{BlockPreviewCanvas-oND1iXLL.js.map → BlockPreviewCanvas-DH5ULGkw.js.map}

@@ -1 +1 @@
-{"version":3,"file":"BlockPreviewCanvas-oND1iXLL.js","names":[],"sources":["../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/BlockPreviewCanvas.vue","../../../src/components/BlockPreviewCanvas.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./blocks/ButtonBlock.vue\";\nimport CustomBlock from \"./blocks/CustomBlock.vue\";\nimport DividerBlock from \"./blocks/DividerBlock.vue\";\nimport HtmlBlock from \"./blocks/HtmlBlock.vue\";\nimport ImageBlock from \"./blocks/ImageBlock.vue\";\nimport MenuBlock from \"./blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"./blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"./blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"./blocks/SpacerBlock.vue\";\nimport TableBlock from \"./blocks/TableBlock.vue\";\nimport TitleBlock from \"./blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"./blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"./blocks/VideoBlock.vue\";\nimport {\n  BLOCK_REGISTRY_KEY,\n  CONDITION_PREVIEW_KEY,\n  EDITOR_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  USE_MERGE_TAG_SAMPLES_KEY,\n} from \"../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n  getDocumentStyle,\n} from \"../utils/blockComponentResolver\";\nimport {\n  EMAIL_FRAME_WIDTH_TRANSITION,\n  getEmailFrameWidth,\n} from \"../utils/emailFrameWidth\";\nimport type { Block, ViewportSize } from \"@templatical/types\";\nimport { computed, inject, provide, type Component } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    blocks: Block[];\n    /**\n     * Which viewport to render. Defaults to `desktop`, so the saved-blocks\n     * surfaces — which have no viewport control — behave exactly as before.\n     * The test-email dialog passes the user's choice so responsive blocks show\n     * the variant a recipient on that device would receive.\n     */\n    viewport?: ViewportSize;\n    /**\n     * Whether the hand-toggled display-condition filter still applies here.\n     * `false` where a resolver owns the preview: it has already evaluated every\n     * condition against real data, so layering a manual hide on top would veto\n     * the answer that was asked for.\n     *\n     * A prop rather than an injected `PREVIEW_RESOLUTION_KEY` read, because the\n     * test-email dialog builds its *own* resolution instance (keyed to the\n     * selected recipient) — injecting would consult the shared canvas instance\n     * and get the wrong answer.\n     */\n    applyConditionFilter?: boolean;\n  }>(),\n  { viewport: \"desktop\", applyConditionFilter: true },\n);\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\nconst editor = inject(EDITOR_KEY, null);\nconst conditionPreview = inject(CONDITION_PREVIEW_KEY, null);\n\n/**\n * This canvas is only ever a preview — nothing here is editable — so it honours\n * the user's mode directly, with no `previewMode` gate of the kind `Canvas.vue`\n * needs. Re-provided rather than left to inherit, because a `BlockPreviewCanvas`\n * inside a dialog may sit under an editing `Canvas` that provides `false`.\n */\nconst mergeTagSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\nprovide(\n  USE_MERGE_TAG_SAMPLES_KEY,\n  computed(() => mergeTagSampleMode?.value ?? false),\n);\n\n/**\n * Blocks a display condition currently excludes, so a preview never shows\n * content the recipient won't get. The canvas does the same via\n * `v-show=\"!conditionPreview?.isHidden(block.id)\"`.\n *\n * A no-op for the saved-blocks browser: entries there carry their *stored* ids,\n * which aren't in the current template, so nothing is tracked as hidden. It\n * bites where it should — the save dialog and the test-email preview, both of\n * which show blocks that are live on the canvas.\n *\n * Skipped entirely when `applyConditionFilter` is false — see the prop.\n */\nconst visibleBlocks = computed(() =>\n  props.applyConditionFilter\n    ? props.blocks.filter((block) => !conditionPreview?.isHidden(block.id))\n    : props.blocks,\n);\n\n/**\n * Frame width, from the one helper the canvas and the scaled preview rows also\n * use — so all three agree by construction rather than by three constants that\n * happen to match. A template with a custom body width now previews at that\n * width instead of a flat 600.\n */\nconst frameWidth = computed(() =>\n  getEmailFrameWidth(editor?.content.value.settings, props.viewport),\n);\n\n/**\n * The same document-level style the canvas applies, so a previewed block\n * renders identically to the canvas one: without it the font falls back to the\n * editor UI's and the link rules hit their unset defaults, dropping the\n * underline and the link colour.\n *\n * Read from the *current* template even in the saved-blocks browser, where the\n * previewed content came from elsewhere — a saved block stores only `Block[]`,\n * and the current settings are what it will actually look like once inserted.\n */\nconst documentStyle = computed(() =>\n  editor ? getDocumentStyle(editor.content.value.settings) : {},\n);\n\nconst previewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    data-testid=\"block-preview-canvas\"\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:select-none tpl:rounded-lg\"\n    :style=\"{\n      width: `${frameWidth}px`,\n      transition: EMAIL_FRAME_WIDTH_TRANSITION,\n      backgroundColor: 'var(--tpl-canvas-bg)',\n      boxShadow: 'var(--tpl-shadow-sm)',\n      ...documentStyle,\n    }\"\n  >\n    <div\n      v-for=\"block in visibleBlocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        :viewport=\"viewport\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./blocks/ButtonBlock.vue\";\nimport CustomBlock from \"./blocks/CustomBlock.vue\";\nimport DividerBlock from \"./blocks/DividerBlock.vue\";\nimport HtmlBlock from \"./blocks/HtmlBlock.vue\";\nimport ImageBlock from \"./blocks/ImageBlock.vue\";\nimport MenuBlock from \"./blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"./blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"./blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"./blocks/SpacerBlock.vue\";\nimport TableBlock from \"./blocks/TableBlock.vue\";\nimport TitleBlock from \"./blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"./blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"./blocks/VideoBlock.vue\";\nimport {\n  BLOCK_REGISTRY_KEY,\n  CONDITION_PREVIEW_KEY,\n  EDITOR_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  USE_MERGE_TAG_SAMPLES_KEY,\n} from \"../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n  getDocumentStyle,\n} from \"../utils/blockComponentResolver\";\nimport {\n  EMAIL_FRAME_WIDTH_TRANSITION,\n  getEmailFrameWidth,\n} from \"../utils/emailFrameWidth\";\nimport type { Block, ViewportSize } from \"@templatical/types\";\nimport { computed, inject, provide, type Component } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    blocks: Block[];\n    /**\n     * Which viewport to render. Defaults to `desktop`, so the saved-blocks\n     * surfaces — which have no viewport control — behave exactly as before.\n     * The test-email dialog passes the user's choice so responsive blocks show\n     * the variant a recipient on that device would receive.\n     */\n    viewport?: ViewportSize;\n    /**\n     * Whether the hand-toggled display-condition filter still applies here.\n     * `false` where a resolver owns the preview: it has already evaluated every\n     * condition against real data, so layering a manual hide on top would veto\n     * the answer that was asked for.\n     *\n     * A prop rather than an injected `PREVIEW_RESOLUTION_KEY` read, because the\n     * test-email dialog builds its *own* resolution instance (keyed to the\n     * selected recipient) — injecting would consult the shared canvas instance\n     * and get the wrong answer.\n     */\n    applyConditionFilter?: boolean;\n  }>(),\n  { viewport: \"desktop\", applyConditionFilter: true },\n);\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\nconst editor = inject(EDITOR_KEY, null);\nconst conditionPreview = inject(CONDITION_PREVIEW_KEY, null);\n\n/**\n * This canvas is only ever a preview — nothing here is editable — so it honours\n * the user's mode directly, with no `previewMode` gate of the kind `Canvas.vue`\n * needs. Re-provided rather than left to inherit, because a `BlockPreviewCanvas`\n * inside a dialog may sit under an editing `Canvas` that provides `false`.\n */\nconst mergeTagSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\nprovide(\n  USE_MERGE_TAG_SAMPLES_KEY,\n  computed(() => mergeTagSampleMode?.value ?? false),\n);\n\n/**\n * Blocks a display condition currently excludes, so a preview never shows\n * content the recipient won't get. The canvas does the same via\n * `v-show=\"!conditionPreview?.isHidden(block.id)\"`.\n *\n * A no-op for the saved-blocks browser: entries there carry their *stored* ids,\n * which aren't in the current template, so nothing is tracked as hidden. It\n * bites where it should — the save dialog and the test-email preview, both of\n * which show blocks that are live on the canvas.\n *\n * Skipped entirely when `applyConditionFilter` is false — see the prop.\n */\nconst visibleBlocks = computed(() =>\n  props.applyConditionFilter\n    ? props.blocks.filter((block) => !conditionPreview?.isHidden(block.id))\n    : props.blocks,\n);\n\n/**\n * Frame width, from the one helper the canvas and the scaled preview rows also\n * use — so all three agree by construction rather than by three constants that\n * happen to match. A template with a custom body width now previews at that\n * width instead of a flat 600.\n */\nconst frameWidth = computed(() =>\n  getEmailFrameWidth(editor?.content.value.settings, props.viewport),\n);\n\n/**\n * The same document-level style the canvas applies, so a previewed block\n * renders identically to the canvas one: without it the font falls back to the\n * editor UI's and the link rules hit their unset defaults, dropping the\n * underline and the link colour.\n *\n * Read from the *current* template even in the saved-blocks browser, where the\n * previewed content came from elsewhere — a saved block stores only `Block[]`,\n * and the current settings are what it will actually look like once inserted.\n */\nconst documentStyle = computed(() =>\n  editor ? getDocumentStyle(editor.content.value.settings) : {},\n);\n\nconst previewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    data-testid=\"block-preview-canvas\"\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:select-none tpl:rounded-lg\"\n    :style=\"{\n      width: `${frameWidth}px`,\n      transition: EMAIL_FRAME_WIDTH_TRANSITION,\n      backgroundColor: 'var(--tpl-canvas-bg)',\n      boxShadow: 'var(--tpl-shadow-sm)',\n      ...documentStyle,\n    }\"\n  >\n    <div\n      v-for=\"block in visibleBlocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        :viewport=\"viewport\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"BlockPreviewCanvas-DH5ULGkw.js","names":[],"sources":["../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/BlockPreviewCanvas.vue","../../../src/components/BlockPreviewCanvas.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./blocks/ButtonBlock.vue\";\nimport CustomBlock from \"./blocks/CustomBlock.vue\";\nimport DividerBlock from \"./blocks/DividerBlock.vue\";\nimport HtmlBlock from \"./blocks/HtmlBlock.vue\";\nimport ImageBlock from \"./blocks/ImageBlock.vue\";\nimport MenuBlock from \"./blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"./blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"./blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"./blocks/SpacerBlock.vue\";\nimport TableBlock from \"./blocks/TableBlock.vue\";\nimport TitleBlock from \"./blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"./blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"./blocks/VideoBlock.vue\";\nimport {\n  BLOCK_REGISTRY_KEY,\n  CONDITION_PREVIEW_KEY,\n  EDITOR_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  USE_MERGE_TAG_SAMPLES_KEY,\n} from \"../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n  getDocumentStyle,\n} from \"../utils/blockComponentResolver\";\nimport {\n  EMAIL_FRAME_WIDTH_TRANSITION,\n  getEmailFrameWidth,\n} from \"../utils/emailFrameWidth\";\nimport type { Block, ViewportSize } from \"@templatical/types\";\nimport { computed, inject, provide, type Component } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    blocks: Block[];\n    /**\n     * Which viewport to render. Defaults to `desktop`, so the saved-blocks\n     * surfaces — which have no viewport control — behave exactly as before.\n     * The test-email dialog passes the user's choice so responsive blocks show\n     * the variant a recipient on that device would receive.\n     */\n    viewport?: ViewportSize;\n    /**\n     * Whether the hand-toggled display-condition filter still applies here.\n     * `false` where a resolver owns the preview: it has already evaluated every\n     * condition against real data, so layering a manual hide on top would veto\n     * the answer that was asked for.\n     *\n     * A prop rather than an injected `PREVIEW_RESOLUTION_KEY` read, because the\n     * test-email dialog builds its *own* resolution instance (keyed to the\n     * selected recipient) — injecting would consult the shared canvas instance\n     * and get the wrong answer.\n     */\n    applyConditionFilter?: boolean;\n  }>(),\n  { viewport: \"desktop\", applyConditionFilter: true },\n);\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\nconst editor = inject(EDITOR_KEY, null);\nconst conditionPreview = inject(CONDITION_PREVIEW_KEY, null);\n\n/**\n * This canvas is only ever a preview — nothing here is editable — so it honours\n * the user's mode directly, with no `previewMode` gate of the kind `Canvas.vue`\n * needs. Re-provided rather than left to inherit, because a `BlockPreviewCanvas`\n * inside a dialog may sit under an editing `Canvas` that provides `false`.\n */\nconst mergeTagSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\nprovide(\n  USE_MERGE_TAG_SAMPLES_KEY,\n  computed(() => mergeTagSampleMode?.value ?? false),\n);\n\n/**\n * Blocks a display condition currently excludes, so a preview never shows\n * content the recipient won't get. The canvas does the same via\n * `v-show=\"!conditionPreview?.isHidden(block.id)\"`.\n *\n * A no-op for the saved-blocks browser: entries there carry their *stored* ids,\n * which aren't in the current template, so nothing is tracked as hidden. It\n * bites where it should — the save dialog and the test-email preview, both of\n * which show blocks that are live on the canvas.\n *\n * Skipped entirely when `applyConditionFilter` is false — see the prop.\n */\nconst visibleBlocks = computed(() =>\n  props.applyConditionFilter\n    ? props.blocks.filter((block) => !conditionPreview?.isHidden(block.id))\n    : props.blocks,\n);\n\n/**\n * Frame width, from the one helper the canvas and the scaled preview rows also\n * use — so all three agree by construction rather than by three constants that\n * happen to match. A template with a custom body width now previews at that\n * width instead of a flat 600.\n */\nconst frameWidth = computed(() =>\n  getEmailFrameWidth(editor?.content.value.settings, props.viewport),\n);\n\n/**\n * The same document-level style the canvas applies, so a previewed block\n * renders identically to the canvas one: without it the font falls back to the\n * editor UI's and the link rules hit their unset defaults, dropping the\n * underline and the link colour.\n *\n * Read from the *current* template even in the saved-blocks browser, where the\n * previewed content came from elsewhere — a saved block stores only `Block[]`,\n * and the current settings are what it will actually look like once inserted.\n */\nconst documentStyle = computed(() =>\n  editor ? getDocumentStyle(editor.content.value.settings) : {},\n);\n\nconst previewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    data-testid=\"block-preview-canvas\"\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:select-none tpl:rounded-lg\"\n    :style=\"{\n      width: `${frameWidth}px`,\n      transition: EMAIL_FRAME_WIDTH_TRANSITION,\n      backgroundColor: 'var(--tpl-canvas-bg)',\n      boxShadow: 'var(--tpl-shadow-sm)',\n      ...documentStyle,\n    }\"\n  >\n    <div\n      v-for=\"block in visibleBlocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        :viewport=\"viewport\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./blocks/ButtonBlock.vue\";\nimport CustomBlock from \"./blocks/CustomBlock.vue\";\nimport DividerBlock from \"./blocks/DividerBlock.vue\";\nimport HtmlBlock from \"./blocks/HtmlBlock.vue\";\nimport ImageBlock from \"./blocks/ImageBlock.vue\";\nimport MenuBlock from \"./blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"./blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"./blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"./blocks/SpacerBlock.vue\";\nimport TableBlock from \"./blocks/TableBlock.vue\";\nimport TitleBlock from \"./blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"./blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"./blocks/VideoBlock.vue\";\nimport {\n  BLOCK_REGISTRY_KEY,\n  CONDITION_PREVIEW_KEY,\n  EDITOR_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  USE_MERGE_TAG_SAMPLES_KEY,\n} from \"../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n  getDocumentStyle,\n} from \"../utils/blockComponentResolver\";\nimport {\n  EMAIL_FRAME_WIDTH_TRANSITION,\n  getEmailFrameWidth,\n} from \"../utils/emailFrameWidth\";\nimport type { Block, ViewportSize } from \"@templatical/types\";\nimport { computed, inject, provide, type Component } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    blocks: Block[];\n    /**\n     * Which viewport to render. Defaults to `desktop`, so the saved-blocks\n     * surfaces — which have no viewport control — behave exactly as before.\n     * The test-email dialog passes the user's choice so responsive blocks show\n     * the variant a recipient on that device would receive.\n     */\n    viewport?: ViewportSize;\n    /**\n     * Whether the hand-toggled display-condition filter still applies here.\n     * `false` where a resolver owns the preview: it has already evaluated every\n     * condition against real data, so layering a manual hide on top would veto\n     * the answer that was asked for.\n     *\n     * A prop rather than an injected `PREVIEW_RESOLUTION_KEY` read, because the\n     * test-email dialog builds its *own* resolution instance (keyed to the\n     * selected recipient) — injecting would consult the shared canvas instance\n     * and get the wrong answer.\n     */\n    applyConditionFilter?: boolean;\n  }>(),\n  { viewport: \"desktop\", applyConditionFilter: true },\n);\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\nconst editor = inject(EDITOR_KEY, null);\nconst conditionPreview = inject(CONDITION_PREVIEW_KEY, null);\n\n/**\n * This canvas is only ever a preview — nothing here is editable — so it honours\n * the user's mode directly, with no `previewMode` gate of the kind `Canvas.vue`\n * needs. Re-provided rather than left to inherit, because a `BlockPreviewCanvas`\n * inside a dialog may sit under an editing `Canvas` that provides `false`.\n */\nconst mergeTagSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\nprovide(\n  USE_MERGE_TAG_SAMPLES_KEY,\n  computed(() => mergeTagSampleMode?.value ?? false),\n);\n\n/**\n * Blocks a display condition currently excludes, so a preview never shows\n * content the recipient won't get. The canvas does the same via\n * `v-show=\"!conditionPreview?.isHidden(block.id)\"`.\n *\n * A no-op for the saved-blocks browser: entries there carry their *stored* ids,\n * which aren't in the current template, so nothing is tracked as hidden. It\n * bites where it should — the save dialog and the test-email preview, both of\n * which show blocks that are live on the canvas.\n *\n * Skipped entirely when `applyConditionFilter` is false — see the prop.\n */\nconst visibleBlocks = computed(() =>\n  props.applyConditionFilter\n    ? props.blocks.filter((block) => !conditionPreview?.isHidden(block.id))\n    : props.blocks,\n);\n\n/**\n * Frame width, from the one helper the canvas and the scaled preview rows also\n * use — so all three agree by construction rather than by three constants that\n * happen to match. A template with a custom body width now previews at that\n * width instead of a flat 600.\n */\nconst frameWidth = computed(() =>\n  getEmailFrameWidth(editor?.content.value.settings, props.viewport),\n);\n\n/**\n * The same document-level style the canvas applies, so a previewed block\n * renders identically to the canvas one: without it the font falls back to the\n * editor UI's and the link rules hit their unset defaults, dropping the\n * underline and the link colour.\n *\n * Read from the *current* template even in the saved-blocks browser, where the\n * previewed content came from elsewhere — a saved block stores only `Block[]`,\n * and the current settings are what it will actually look like once inserted.\n */\nconst documentStyle = computed(() =>\n  editor ? getDocumentStyle(editor.content.value.settings) : {},\n);\n\nconst previewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    data-testid=\"block-preview-canvas\"\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:select-none tpl:rounded-lg\"\n    :style=\"{\n      width: `${frameWidth}px`,\n      transition: EMAIL_FRAME_WIDTH_TRANSITION,\n      backgroundColor: 'var(--tpl-canvas-bg)',\n      boxShadow: 'var(--tpl-shadow-sm)',\n      ...documentStyle,\n    }\"\n  >\n    <div\n      v-for=\"block in visibleBlocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        :viewport=\"viewport\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{CloudEditor-BaqiFbf0.js → CloudEditor-C0nB1JfD.js}

@@ -1,18 +1,18 @@
-import { $ as e, A as t, H as n, J as r, M as i, N as a, P as o, V as s, Z as c, _ as l, b as u, ct as d, f, g as p, h as m, it as h, j as g, l as _, m as v, n as y, ot as b, p as x, s as S, st as C, u as w, v as T, x as E, y as D, z as O } from "./draggable-Z4XXmbPC.js";
+import { $ as e, A as t, H as n, J as r, M as i, N as a, P as o, V as s, Z as c, _ as l, b as u, ct as d, f, g as p, h as m, it as h, j as g, l as _, lt as v, m as y, n as b, p as x, s as S, st as C, u as w, v as T, x as E, y as D, z as O } from "./draggable-DCs9qL-b.js";
 import { t as k } from "./timeouts-SsLMC4a3.js";
-import { B as A } from "./src-CZjSXPYq.js";
-import { T as j, b as M, j as ee, t as N } from "./useEditorCore-BMXBmdd8.js";
-import { _ as P } from "./dist-B4VIlp1g.js";
-import { t as F } from "./dist-H51neg3K.js";
-import { M as I, c as te, d as L, i as R, l as z, t as B, z as ne } from "./keys-DsoX52o_.js";
-import { t as V } from "./useI18n-BvcEYzrI.js";
-import { E as H, F as U, I as W, Lt as G, M as K, Mt as q, it as J, kt as Y, tt as re, u as ie } from "./icons-C_kRN0_C.js";
+import { B as A } from "./src-EKTTBQ0y.js";
+import { T as j, b as M, j as ee, t as N } from "./useEditorCore-C_nUXiph.js";
+import { _ as P } from "./dist-C6z8AjBC.js";
+import { t as F } from "./dist-B2HKGHnc.js";
+import { M as I, c as te, d as L, i as R, l as z, t as B, z as ne } from "./keys-Cmc2Yl3D.js";
+import { t as V } from "./useI18n-UMs0F71x.js";
+import { E as H, F as U, I as W, Lt as G, M as K, Mt as q, it as J, kt as Y, tt as re, u as ie } from "./icons-CvYN6zrM.js";
 import { t as ae } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { n as X } from "./useCloudI18n-D4JpHTPk.js";
-import { a as Z, c as oe, d as Q, f as se, i as ce, l as le, m as ue, n as de, o as fe, p as pe, r as me, s as he, t as ge, u as _e } from "./styles-znpPfrFd.js";
-import { d as $ } from "./ColorPicker-BXH44v2H.js";
-import { n as ve, t as ye } from "./MergeTagModeToggle-BCmQg4Qe.js";
-import { C as be, a as xe, c as Se, d as Ce, f as we, g as Te, h as Ee, i as De, l as Oe, n as ke, o as Ae, p as je, r as Me, s as Ne, t as Pe, u as Fe, v as Ie, y as Le } from "./cloud-B0f7Ub8f.js";
+import { n as X } from "./useCloudI18n-8wkJtuJD.js";
+import { a as Z, c as oe, d as Q, f as se, i as ce, l as le, m as ue, n as de, o as fe, p as pe, r as me, s as he, t as ge, u as _e } from "./styles-C7s-VtJi.js";
+import { d as $ } from "./ColorPicker-W_UyiVGc.js";
+import { n as ve, t as ye } from "./MergeTagModeToggle-D8iKvz7v.js";
+import { C as be, a as xe, c as Se, d as Ce, f as we, g as Te, h as Ee, i as De, l as Oe, n as ke, o as Ae, p as je, r as Me, s as Ne, t as Pe, u as Fe, v as Ie, y as Le } from "./cloud-CuItCnN_.js";
 //#region src/cloud/composables/useSnapshotPreview.ts
 function Re(t) {
 	let { authManager: n, editor: i, history: a, conditionPreview: o, autoSave: s, onError: l } = t, u = e(null), d = c(null), p = c(null), m = !1;
@@ -184,7 +184,7 @@ function He(e) {
 		let t = f(e);
 		if (t) return s?.(t), null;
 		try {
-			let { MediaApiClient: t } = await import("./src-CRvTVX4F.js");
+			let { MediaApiClient: t } = await import("./src-C0N74uvF.js");
 			return l(await new t(a).uploadMedia(e));
 		} catch (e) {
 			return s?.(e), null;
@@ -532,7 +532,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 	emits: ["cancel", "confirm"],
 	setup(e, { emit: t }) {
 		let n = t, { t: r } = X();
-		return (t, a) => (i(), v(y, {
+		return (t, a) => (i(), y(b, {
 			"enter-active-class": "tpl:transition-opacity tpl:duration-150",
 			"leave-active-class": "tpl:transition-opacity tpl:duration-150",
 			"enter-from-class": "tpl:opacity-0",
@@ -550,21 +550,21 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 					size: 18,
 					"stroke-width": 2,
 					class: "tpl:text-[var(--tpl-warning)]"
-				}), x("h2", Xe, d(h(r).saveGate.title), 1)]),
-				x("p", Ze, d(h(r).saveGate.body), 1),
+				}), x("h2", Xe, v(h(r).saveGate.title), 1)]),
+				x("p", Ze, v(h(r).saveGate.body), 1),
 				x("ul", Qe, [(i(!0), p(w, null, o(e.issues, (e) => (i(), p("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"
-				}, [x("span", $e, d(e.message), 1), x("span", et, d(e.ruleId), 1)]))), 128))]),
+				}, [x("span", $e, v(e.message), 1), x("span", et, v(e.ruleId), 1)]))), 128))]),
 				x("footer", tt, [x("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: a[0] ||= (e) => n("cancel")
-				}, d(h(r).saveGate.cancel), 1), x("button", {
+				}, v(h(r).saveGate.cancel), 1), x("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-white",
 					onClick: a[1] ||= (e) => n("confirm")
-				}, d(h(r).saveGate.confirm), 1)])
+				}, v(h(r).saveGate.confirm), 1)])
 			])], 8, qe)) : m("", !0)]),
 			_: 1
 		}));
@@ -613,9 +613,9 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 	},
 	emits: ["save"],
 	setup(e) {
-		let t = u(() => import("./CollaboratorBar-DF02nTwF.js")), n = u(() => import("./SnapshotHistory-jogWGLB-.js")), r = u(() => import("./AiFeatureMenu-BS4Rek6j.js")), { t: a } = V(), { t: o, format: c } = X();
+		let t = u(() => import("./CollaboratorBar-f6Ni7KNH.js")), n = u(() => import("./SnapshotHistory-Srpzt2na.js")), r = u(() => import("./AiFeatureMenu-D2AIDwEG.js")), { t: a } = V(), { t: o, format: c } = X();
 		return (l, u) => (i(), p("header", rt, [
-			x("div", it, [e.featureFlags.templateLimit.value === null ? m("", !0) : (i(), p("span", at, d(h(c)(h(o).header.templatesUsed, {
+			x("div", it, [e.featureFlags.templateLimit.value === null ? m("", !0) : (i(), p("span", at, v(h(c)(h(o).header.templatesUsed, {
 				used: e.featureFlags.templateCount.value,
 				max: e.featureFlags.templateLimit.value
 			})), 1))]),
@@ -632,17 +632,17 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 					"preview-mode": e.editor.state.previewMode,
 					onChange: e.editor.setPreviewMode
 				}, null, 8, ["preview-mode", "onChange"]),
-				e.editor.state.previewMode && !e.core.previewResolution.supersedesSamples.value ? (i(), v(ye, {
+				e.editor.state.previewMode && !e.core.previewResolution.supersedesSamples.value ? (i(), y(ye, {
 					key: 0,
 					"sample-mode": e.core.mergeTagSampleMode.value,
 					onChange: u[0] ||= (t) => e.core.mergeTagSampleMode.value = t
 				}, null, 8, ["sample-mode"])) : m("", !0),
-				e.collaboration && e.isCollaborationEnabled ? (i(), v(h(t), {
+				e.collaboration && e.isCollaborationEnabled ? (i(), y(h(t), {
 					key: 1,
 					collaborators: e.collaboration.collaborators.value,
 					"is-connected": e.websocket.isConnected.value
 				}, null, 8, ["collaborators", "is-connected"])) : m("", !0),
-				e.snapshotPreview.snapshotHistoryInstance.value ? (i(), v(h(n), {
+				e.snapshotPreview.snapshotHistoryInstance.value ? (i(), y(h(n), {
 					key: 2,
 					snapshots: e.snapshotPreview.snapshotHistorySnapshots.value,
 					"is-loading": e.snapshotPreview.snapshotHistoryIsLoading.value,
@@ -666,16 +666,16 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				}, [D(h(q), {
 					size: 12,
 					"stroke-width": 2.5
-				}), T(" " + d(h(o).header.saveFailed), 1)], 8, ct)) : e.featureFlags.saveStatus.value === "saved" ? (i(), p("div", lt, [D(h(G), {
+				}), T(" " + v(h(o).header.saveFailed), 1)], 8, ct)) : e.featureFlags.saveStatus.value === "saved" ? (i(), p("div", lt, [D(h(G), {
 					size: 12,
 					"stroke-width": 2.5
-				}), T(" " + d(h(o).header.saved), 1)])) : e.editor.state.isDirty ? (i(), p("div", ut, [u[5] ||= x("span", { class: "tpl-pulse tpl:size-1.5 tpl:rounded-full tpl:bg-[var(--tpl-primary)]" }, null, -1), T(" " + d(h(o).header.unsaved), 1)])) : m("", !0),
+				}), T(" " + v(h(o).header.saved), 1)])) : e.editor.state.isDirty ? (i(), p("div", ut, [u[5] ||= x("span", { class: "tpl-pulse tpl:size-1.5 tpl:rounded-full tpl:bg-[var(--tpl-primary)]" }, null, -1), T(" " + v(h(o).header.unsaved), 1)])) : m("", !0),
 				e.commentsInstance.isEnabled.value && e.featureFlags.hasTemplateSaved.value ? (i(), p("button", {
 					key: 3,
 					"aria-label": e.commentsInstance.unresolvedCount.value > 0 ? `${h(o).comments.button} (${e.commentsInstance.unresolvedCount.value})` : h(o).comments.button,
 					"aria-expanded": e.panelState.commentsOpen.value,
-					class: b(h($)),
-					style: C({
+					class: C(h($)),
+					style: d({
 						backgroundColor: e.panelState.commentsOpen.value ? "var(--tpl-primary)" : "transparent",
 						color: e.panelState.commentsOpen.value ? "var(--tpl-bg)" : "var(--tpl-primary)",
 						borderColor: "var(--tpl-primary)"
@@ -686,8 +686,8 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 						size: 16,
 						"stroke-width": 2
 					}),
-					T(" " + d(h(o).comments.button) + " ", 1),
-					e.commentsInstance.unresolvedCount.value > 0 && !e.panelState.commentsOpen.value ? (i(), p("span", ft, d(e.commentsInstance.unresolvedCount.value), 1)) : m("", !0)
+					T(" " + v(h(o).comments.button) + " ", 1),
+					e.commentsInstance.unresolvedCount.value > 0 && !e.panelState.commentsOpen.value ? (i(), p("span", ft, v(e.commentsInstance.unresolvedCount.value), 1)) : m("", !0)
 				], 14, dt)) : m("", !0),
 				e.featureFlags.canUseAiGeneration.value && e.featureFlags.hasTemplateSaved.value ? (i(), p("div", {
 					key: 4,
@@ -695,13 +695,13 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 					class: "tpl:relative"
 				}, [x("button", {
 					"aria-expanded": e.panelState.aiMenuOpen.value,
-					class: b(["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", e.panelState.aiButtonActive.value ? "tpl-ai-btn--active" : "tpl-ai-btn--idle"]),
+					class: C(["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", e.panelState.aiButtonActive.value ? "tpl-ai-btn--active" : "tpl-ai-btn--idle"]),
 					onClick: u[2] ||= _((...t) => e.panelState.toggleAiMenu && e.panelState.toggleAiMenu(...t), ["stop"])
 				}, [D(h(H), {
 					size: 16,
 					"stroke-width": 2,
 					class: "tpl-ai-btn-icon"
-				}), T(" " + d(h(o).aiChat.button), 1)], 10, pt), D(y, {
+				}), T(" " + v(h(o).aiChat.button), 1)], 10, pt), D(b, {
 					"enter-active-class": "tpl:transition-all tpl:duration-150 tpl:ease-out",
 					"enter-from-class": "tpl:scale-95 tpl:opacity-0",
 					"enter-to-class": "tpl:scale-100 tpl:opacity-100",
@@ -717,7 +717,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				})], 512)) : m("", !0),
 				e.testEmail.isAvailable.value ? (i(), p("button", {
 					key: 5,
-					class: b(h($)),
+					class: C(h($)),
 					"data-testid": "test-email-trigger",
 					style: {
 						"background-color": "transparent",
@@ -726,18 +726,18 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 					},
 					disabled: e.testEmail.isSending.value,
 					onClick: u[3] ||= (t) => e.testEmail.open()
-				}, [e.testEmail.isSending.value ? (i(), v(h(J), {
+				}, [e.testEmail.isSending.value ? (i(), y(h(J), {
 					key: 1,
 					class: "tpl-spinner",
 					size: 16,
 					"stroke-width": 2
-				})) : (i(), v(h(K), {
+				})) : (i(), y(h(K), {
 					key: 0,
 					size: 16,
 					"stroke-width": 2
-				})), T(" " + d(h(a).testEmail.button), 1)], 10, ht)) : m("", !0),
+				})), T(" " + v(h(a).testEmail.button), 1)], 10, ht)) : m("", !0),
 				x("button", {
-					class: b(h($)),
+					class: C(h($)),
 					style: {
 						"background-color": "transparent",
 						color: "var(--tpl-primary)",
@@ -745,16 +745,16 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 					},
 					disabled: e.isSaveDisabled,
 					onClick: u[4] ||= (e) => l.$emit("save")
-				}, [e.isSaving ? (i(), v(h(J), {
+				}, [e.isSaving ? (i(), y(h(J), {
 					key: 1,
 					class: "tpl-spinner",
 					size: 16,
 					"stroke-width": 2
-				})) : (i(), v(h(U), {
+				})) : (i(), y(h(U), {
 					key: 0,
 					size: 16,
 					"stroke-width": 2
-				})), T(" " + d(e.isSaving ? h(o).header.saving : h(o).header.save), 1)], 10, gt)
+				})), T(" " + v(e.isSaving ? h(o).header.saving : h(o).header.save), 1)], 10, gt)
 			])
 		]));
 	}
@@ -769,9 +769,9 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 		mediaLib: {}
 	},
 	setup(e, { expose: t }) {
-		let n = u(() => import("./AiChatSidebar-BY1Iy-e8.js")), r = u(() => import("./CommentsSidebar-B9bWvvbl.js")), a = u(() => import("./DesignReferenceSidebar-BXjH47QC.js")), o = u(() => import("./TemplateScoringPanel-B2XIOTl-.js")), s = u(async () => {
+		let n = u(() => import("./AiChatSidebar-BHqNxNcX.js")), r = u(() => import("./CommentsSidebar-BLRZRSSC.js")), a = u(() => import("./DesignReferenceSidebar-DBoEBKxQ.js")), o = u(() => import("./TemplateScoringPanel-NucRtAP0.js")), s = u(async () => {
 			try {
-				return (await import("./src-CRvTVX4F.js")).MediaLibraryModal;
+				return (await import("./src-C0N74uvF.js")).MediaLibraryModal;
 			} catch {
 				throw Error("[Templatical] Cloud media library requires the optional peer dependency '@templatical/media-library'. Please install it.");
 			}
@@ -857,12 +857,12 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				"stroke-width": 1.5,
 				class: "tpl:text-[var(--tpl-danger)]"
 			})]),
-			x("div", Tt, [x("h2", Et, d(h(r).error.title), 1), x("p", Dt, d(a(e.error)), 1)]),
+			x("div", Tt, [x("h2", Et, v(h(r).error.title), 1), x("p", Dt, v(a(e.error)), 1)]),
 			o(e.error) ? m("", !0) : (i(), p("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-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
 				onClick: s[0] ||= (e) => n("retry")
-			}, d(h(r).error.retry), 1))
+			}, v(h(r).error.retry), 1))
 		])) : m("", !0);
 	}
 }), kt = {
@@ -878,14 +878,14 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 			size: 18,
 			"stroke-width": 2,
 			class: "tpl:text-[var(--tpl-primary)]"
-		}), x("span", null, d(h(r).snapshotPreview.message), 1)]), x("div", jt, [x("button", {
+		}), x("span", null, v(h(r).snapshotPreview.message), 1)]), x("div", jt, [x("button", {
 			class: "tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-150 tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]",
 			style: { "background-color": "transparent" },
 			onClick: a[0] ||= (e) => n("cancel")
-		}, d(h(r).snapshotPreview.cancel), 1), x("button", {
+		}, v(h(r).snapshotPreview.cancel), 1), x("button", {
 			class: "tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
 			onClick: a[1] ||= (e) => n("confirm")
-		}, d(h(r).snapshotPreview.restore), 1)])])) : m("", !0);
+		}, v(h(r).snapshotPreview.restore), 1)])])) : m("", !0);
 	}
 }), Nt = {
 	key: 0,
@@ -902,7 +902,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 	props: { visible: { type: Boolean } },
 	setup(e) {
 		let { t } = V();
-		return (n, r) => e.visible ? (i(), p("div", Nt, d(h(t).history.collabWarning), 1)) : m("", !0);
+		return (n, r) => e.visible ? (i(), p("div", Nt, v(h(t).history.collabWarning), 1)) : m("", !0);
 	}
 }), Ft = ["data-tpl-theme"], It = { class: "tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0" }, Lt = { class: "tpl-main tpl:flex tpl:justify-center tpl:p-8" }, Rt = ["aria-label"], zt = /*#__PURE__*/ ae(/* @__PURE__ */ E({
 	__name: "CloudEditor",
@@ -915,7 +915,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 	},
 	emits: ["ready"],
 	setup(e, { expose: r, emit: o }) {
-		let l = u(() => import("./SavedBlocksPanels-ElerTTa_.js")), f = u(() => import("./TestEmailPanel-1zxRa00s.js")), w = e;
+		let l = u(() => import("./SavedBlocksPanels-Bb-eDMAh.js")), f = u(() => import("./TestEmailPanel-Dr7Dkq2P.js")), w = e;
 		a(z, w.cloudTranslations);
 		let E = o, O = c(null), k = c(null), A = Ue({
 			config: w.config,
@@ -964,14 +964,14 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 		}), (t, r) => (i(), p("div", {
 			ref_key: "rootEl",
 			ref: k,
-			class: b(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": h(L).state.darkMode }]),
+			class: C(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": h(L).state.darkMode }]),
 			"data-tpl-theme": h(R).resolvedTheme.value,
-			style: C(h(R).themeStyles.value),
+			style: d(h(R).themeStyles.value),
 			onDragover: r[6] ||= _(() => {}, ["prevent"]),
 			onDrop: r[7] ||= _(() => {}, ["prevent"])
 		}, [
 			D(le),
-			D(y, {
+			D(b, {
 				"enter-active-class": "tpl:transition-opacity tpl:duration-200",
 				"enter-from-class": "tpl:opacity-100",
 				"enter-to-class": "tpl:opacity-100",
@@ -982,7 +982,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				default: s(() => [D(St, { visible: h(j) || h(L).state.isLoading }, null, 8, ["visible"])]),
 				_: 1
 			}),
-			D(y, {
+			D(b, {
 				"enter-active-class": "tpl:transition-opacity tpl:duration-200",
 				"enter-from-class": "tpl:opacity-0",
 				"enter-to-class": "tpl:opacity-100",
@@ -1045,7 +1045,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				onCancel: h(q).cancelPreview,
 				onConfirm: ae
 			}, null, 8, ["visible", "onCancel"]),
-			D(y, {
+			D(b, {
 				"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",
@@ -1058,12 +1058,12 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 			}),
 			n(D(oe, null, null, 512), [[S, !h(L).state.previewMode]]),
 			x("div", {
-				class: b(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto", [h(L).state.previewMode ? "tpl:left-0 tpl:right-0" : h(K).rightPanelOpen.value ? "tpl:left-12 tpl:right-[680px]" : "tpl:left-12 tpl:right-[320px]", h(q).isPreviewingSnapshot.value ? "tpl:top-[104px]" : "tpl:top-14"]]),
+				class: C(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto", [h(L).state.previewMode ? "tpl:left-0 tpl:right-0" : h(K).rightPanelOpen.value ? "tpl:left-12 tpl:right-[680px]" : "tpl:left-12 tpl:right-[320px]", h(q).isPreviewingSnapshot.value ? "tpl:top-[104px]" : "tpl:top-14"]]),
 				style: {
 					transition: "all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)",
 					"background-color": "var(--tpl-canvas-bg)"
 				}
-			}, [x("div", It, [D(y, { name: "tpl-restore-btn" }, {
+			}, [x("div", It, [D(b, { name: "tpl-restore-btn" }, {
 				default: s(() => [h(R).conditionPreview.hasHiddenBlocks.value && h(R).appliesConditionFilter.value ? (i(), p("button", {
 					key: 0,
 					class: "tpl:absolute tpl:left-1/2 tpl:top-2 tpl:-translate-x-1/2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-full tpl:border tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:whitespace-nowrap tpl:shadow-md tpl:hover:opacity-80",
@@ -1078,7 +1078,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				}, [D(h(W), {
 					size: 13,
 					"stroke-width": 2
-				}), T(" " + d(h(R).t.blockSettings.restoreHiddenBlocks), 1)])) : m("", !0)]),
+				}), T(" " + v(h(R).t.blockSettings.restoreHiddenBlocks), 1)])) : m("", !0)]),
 				_: 1
 			})]), x("main", Lt, [D(_e, {
 				viewport: h(L).state.viewport,
@@ -1099,7 +1099,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				"locked-blocks",
 				"onSelectBlock"
 			])])], 2),
-			e.config.branding !== !1 && !h(B).isWhiteLabeled.value ? (i(), v(me, {
+			e.config.branding !== !1 && !h(B).isWhiteLabeled.value ? (i(), y(me, {
 				key: 0,
 				"position-class": [h(L).state.previewMode ? "tpl:left-0 tpl:right-0" : h(K).rightPanelOpen.value ? "tpl:left-12 tpl:right-[680px]" : "tpl:left-12 tpl:right-[320px]"]
 			}, null, 8, ["position-class"])) : m("", !0),
@@ -1109,7 +1109,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				"aria-live": "polite",
 				"aria-atomic": "true",
 				"aria-label": h(R).t.landmarks.reorderAnnouncements
-			}, d(h(R).keyboardReorder.announcement.value), 9, Rt),
+			}, v(h(R).keyboardReorder.announcement.value), 9, Rt),
 			n(D(he, {
 				"selected-block": h(L).selectedBlock.value,
 				settings: h(L).content.value.settings,
@@ -1124,7 +1124,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				"shifted-left",
 				"onUpdateSettings"
 			]), [[S, !h(L).state.previewMode]]),
-			!h(j) && h(ee) ? (i(), v(vt, {
+			!h(j) && h(ee) ? (i(), y(vt, {
 				key: 1,
 				ref_key: "cloudPanelsRef",
 				ref: O,
@@ -1142,11 +1142,11 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				"plan-config-instance",
 				"media-lib"
 			])) : m("", !0),
-			h(G).isAvailable.value ? (i(), v(h(l), {
+			h(G).isAvailable.value ? (i(), y(h(l), {
 				key: 2,
 				feature: h(G)
 			}, null, 8, ["feature"])) : m("", !0),
-			h(H).isAvailable.value ? (i(), v(h(f), {
+			h(H).isAvailable.value ? (i(), y(h(f), {
 				key: 3,
 				feature: h(H)
 			}, null, 8, ["feature"])) : m("", !0),
@@ -1156,11 +1156,11 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 			}, null, 512),
 			D(de),
 			D(ge),
-			h(ie) ? (i(), v(fe, { key: 4 })) : m("", !0)
+			h(ie) ? (i(), y(fe, { key: 4 })) : m("", !0)
 		], 46, Ft));
 	}
 }), [["__scopeId", "data-v-16786f1a"]]);
 //#endregion
 export { zt as default };
 
-//# sourceMappingURL=CloudEditor-BaqiFbf0.js.map
+//# sourceMappingURL=CloudEditor-C0nB1JfD.js.map