@templatical/editor 0.25.0 → 0.25.2

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

@@ -1 +1 @@
-{"version":3,"file":"BlockPreviewCanvas-CXCWhqbp.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-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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"}

package/dist/cdn/chunks/{CloudEditor-D-t7RyDh.js → CloudEditor-BaqiFbf0.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-JcMTNF3U.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 _, 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 { 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-DfW-thCr.js";
-import { _ as P } from "./dist-lZgXNk4G.js";
-import { t as F } from "./dist-B8AX9np4.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-BxPCfHBH.js";
-import { t as V } from "./useI18n-DniEFeIl.js";
-import { F as H, I as U, It as W, M as G, Ot as K, T as q, it as J, jt as Y, tt as re, u as ie } from "./icons-Cp4ZIJw-.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 { t as ae } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { n as X } from "./useCloudI18n-CjVzv11v.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-DANwMzW2.js";
-import { d as $ } from "./ColorPicker-_1O7YU2z.js";
-import { n as ve, t as ye } from "./MergeTagModeToggle-CWuVC3MU.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-DOaGUdR0.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";
 //#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-Dpj0x27M.js");
+			let { MediaApiClient: t } = await import("./src-CRvTVX4F.js");
 			return l(await new t(a).uploadMedia(e));
 		} catch (e) {
 			return s?.(e), null;
@@ -613,7 +613,7 @@ 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-DcXYo47v.js")), n = u(() => import("./SnapshotHistory-QQt0DKey.js")), r = u(() => import("./AiFeatureMenu-CI4SYTq2.js")), { t: a } = V(), { t: o, format: c } = X();
+		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();
 		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, {
 				used: e.featureFlags.templateCount.value,
@@ -663,10 +663,10 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 					"aria-live": "assertive",
 					class: "tpl-tooltip tpl-status tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-danger)]",
 					"data-tooltip": e.featureFlags.saveErrorMessage.value
-				}, [D(h(Y), {
+				}, [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(W), {
+				}), T(" " + d(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),
@@ -697,7 +697,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 					"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"]),
 					onClick: u[2] ||= _((...t) => e.panelState.toggleAiMenu && e.panelState.toggleAiMenu(...t), ["stop"])
-				}, [D(h(q), {
+				}, [D(h(H), {
 					size: 16,
 					"stroke-width": 2,
 					class: "tpl-ai-btn-icon"
@@ -731,7 +731,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 					class: "tpl-spinner",
 					size: 16,
 					"stroke-width": 2
-				})) : (i(), v(h(G), {
+				})) : (i(), v(h(K), {
 					key: 0,
 					size: 16,
 					"stroke-width": 2
@@ -750,7 +750,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 					class: "tpl-spinner",
 					size: 16,
 					"stroke-width": 2
-				})) : (i(), v(h(H), {
+				})) : (i(), v(h(U), {
 					key: 0,
 					size: 16,
 					"stroke-width": 2
@@ -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-bkBKpNgE.js")), r = u(() => import("./CommentsSidebar-BEgLBYX-.js")), a = u(() => import("./DesignReferenceSidebar-DPqBr-ut.js")), o = u(() => import("./TemplateScoringPanel-BwyCMcit.js")), s = u(async () => {
+		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 () => {
 			try {
-				return (await import("./src-Dpj0x27M.js")).MediaLibraryModal;
+				return (await import("./src-CRvTVX4F.js")).MediaLibraryModal;
 			} catch {
 				throw Error("[Templatical] Cloud media library requires the optional peer dependency '@templatical/media-library'. Please install it.");
 			}
@@ -852,7 +852,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 			return "isNotFound" in e && !!e.isNotFound;
 		}
 		return (t, s) => e.visible && e.error ? (i(), p("div", Ct, [
-			x("div", wt, [D(h(Y), {
+			x("div", wt, [D(h(q), {
 				size: 32,
 				"stroke-width": 1.5,
 				class: "tpl:text-[var(--tpl-danger)]"
@@ -874,7 +874,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) => e.visible ? (i(), p("div", kt, [x("div", At, [D(h(K), {
+		return (t, a) => e.visible ? (i(), p("div", kt, [x("div", At, [D(h(Y), {
 			size: 18,
 			"stroke-width": 2,
 			class: "tpl:text-[var(--tpl-primary)]"
@@ -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-B62U5DYW.js")), f = u(() => import("./TestEmailPanel-CvuBq4RA.js")), w = e;
+		let l = u(() => import("./SavedBlocksPanels-ElerTTa_.js")), f = u(() => import("./TestEmailPanel-1zxRa00s.js")), w = e;
 		a(z, w.cloudTranslations);
 		let E = o, O = c(null), k = c(null), A = Ue({
 			config: w.config,
@@ -925,7 +925,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 			getCommentsSidebar: () => O.value ? { filterByBlock: O.value.filterCommentsByBlock } : null,
 			editorRoot: w.shadowRoot,
 			containerEl: k
-		}), { isInitializing: j, isAuthReady: ee, initError: N, planConfigInstance: P, websocket: F, collaboration: I, isCollaborationEnabled: te, editor: L, core: R, featureFlags: B, mediaLib: ne, exporter: V, testEmail: H, commentsInstance: W, savedBlocks: G, panelState: K, snapshotPreview: q, collabWarning: J, setThemeOverrides: Y, setUiTheme: re } = A, { showNotice: ie } = M(() => w.config.smallScreenNotice);
+		}), { isInitializing: j, isAuthReady: ee, initError: N, planConfigInstance: P, websocket: F, collaboration: I, isCollaborationEnabled: te, editor: L, core: R, featureFlags: B, mediaLib: ne, exporter: V, testEmail: H, commentsInstance: U, savedBlocks: G, panelState: K, snapshotPreview: q, collabWarning: J, setThemeOverrides: Y, setUiTheme: re } = A, { showNotice: ie } = M(() => w.config.smallScreenNotice);
 		async function ae() {
 			try {
 				await q.confirmRestoreSnapshot();
@@ -1007,7 +1007,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 				"feature-flags": h(B),
 				"panel-state": h(K),
 				"snapshot-preview": h(q),
-				"comments-instance": h(W),
+				"comments-instance": h(U),
 				"test-email": h(H),
 				websocket: h(F),
 				collaboration: h(I),
@@ -1075,7 +1075,7 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 					},
 					"data-testid": "restore-hidden-blocks",
 					onClick: r[0] ||= (e) => h(R).conditionPreview.reset()
-				}, [D(h(U), {
+				}, [D(h(W), {
 					size: 13,
 					"stroke-width": 2
 				}), T(" " + d(h(R).t.blockSettings.restoreHiddenBlocks), 1)])) : m("", !0)]),
@@ -1163,4 +1163,4 @@ var qe = ["aria-label"], Je = { class: "tpl:flex tpl:max-h-[80vh] tpl:w-full tpl
 //#endregion
 export { zt as default };
 
-//# sourceMappingURL=CloudEditor-D-t7RyDh.js.map
+//# sourceMappingURL=CloudEditor-BaqiFbf0.js.map