@templatical/editor 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/dist/{AiChatSidebar-busJk9hm.js → AiChatSidebar-DwME3f-a.js} +84 -70
  2. package/dist/{AiFeatureMenu-DLGv_-pj.js → AiFeatureMenu-DJvWL1GZ.js} +23 -23
  3. package/dist/CloudEditor-Fe0ssRgi.js +1082 -0
  4. package/dist/{CollaboratorBar-Dv3l52vC.js → CollaboratorBar-DTT0EkZn.js} +25 -21
  5. package/dist/{CommentsSidebar-4tjp0VU5.js → CommentsSidebar-DrJhQRXK.js} +131 -131
  6. package/dist/{DesignReferenceSidebar-CmwXvltV.js → DesignReferenceSidebar-DdOht5zn.js} +49 -49
  7. package/dist/ModuleBrowserModal-CiV_jOEM.js +205 -0
  8. package/dist/{ModulePreviewCanvas-BcBJLnwL.js → ModulePreviewCanvas-Bmy6Y1WE.js} +2 -2
  9. package/dist/ParagraphEditor-CoQ3NlS7.js +688 -0
  10. package/dist/{RichTextEditorContent-CQqodi7p.js → RichTextEditorContent-CHJlh7HJ.js} +8 -4
  11. package/dist/{SaveModuleDialog-Bmzi72td.js → SaveModuleDialog-CD2ZYq1o.js} +25 -25
  12. package/dist/{SnapshotHistory-AEgi9Xsn.js → SnapshotHistory-DltsKvhP.js} +2 -2
  13. package/dist/TemplateScoringPanel-DmnmUE3y.js +254 -0
  14. package/dist/{TestEmailModal-Dpq1is9S.js → TestEmailModal-Dl633j9o.js} +3 -3
  15. package/dist/{TitleEditor-CLcDdcWI.js → TitleEditor-C7fds2Nc.js} +7 -7
  16. package/dist/{TplModal-CGzRjR96.js → TplModal-C5_CF-qn.js} +2 -2
  17. package/dist/{blockTypeIcons-BpPTqcok.js → blockTypeIcons-BrKZB10B.js} +1 -1
  18. package/dist/cdn/chunks/AiChatSidebar-X_Bv3Qys.js +2 -0
  19. package/dist/cdn/chunks/AiFeatureMenu-C5UQmEgV.js +59 -0
  20. package/dist/cdn/chunks/AiFeatureMenu-C5UQmEgV.js.map +1 -0
  21. package/dist/cdn/chunks/CloudEditor-DeTolKnf.js +1056 -0
  22. package/dist/cdn/chunks/CloudEditor-DeTolKnf.js.map +1 -0
  23. package/dist/cdn/chunks/CollaboratorBar-DO1nxSrr.js +51 -0
  24. package/dist/cdn/chunks/CollaboratorBar-DO1nxSrr.js.map +1 -0
  25. package/dist/cdn/chunks/CommentsSidebar-4MTw_hue.js +2 -0
  26. package/dist/cdn/chunks/DesignReferenceSidebar-Bswh4Yx4.js +2 -0
  27. package/dist/{ModuleBrowserModal-lrk3Fr0H.js → cdn/chunks/ModuleBrowserModal-ChBr3aXj.js} +52 -62
  28. package/dist/cdn/chunks/ModuleBrowserModal-ChBr3aXj.js.map +1 -0
  29. package/dist/cdn/chunks/ModulePreviewCanvas-DkSvri9H.js +107 -0
  30. package/dist/cdn/chunks/ModulePreviewCanvas-DkSvri9H.js.map +1 -0
  31. package/dist/cdn/chunks/ParagraphEditor-DU3oUKA7.js +539 -0
  32. package/dist/cdn/chunks/ParagraphEditor-DU3oUKA7.js.map +1 -0
  33. package/dist/cdn/chunks/RichTextEditorContent-BrsW1p9s.js +106 -0
  34. package/dist/cdn/chunks/RichTextEditorContent-BrsW1p9s.js.map +1 -0
  35. package/dist/cdn/chunks/SaveModuleDialog-CjqKkTEc.js +119 -0
  36. package/dist/cdn/chunks/SaveModuleDialog-CjqKkTEc.js.map +1 -0
  37. package/dist/cdn/chunks/SnapshotHistory-KME4xmn_.js +2 -0
  38. package/dist/cdn/chunks/TemplateScoringPanel-DgB3xDN6.js +2 -0
  39. package/dist/cdn/chunks/TestEmailModal-DdpvRbYf.js +2 -0
  40. package/dist/cdn/chunks/TitleEditor-C8FYbadT.js +166 -0
  41. package/dist/cdn/chunks/TitleEditor-C8FYbadT.js.map +1 -0
  42. package/dist/cdn/chunks/_rolldown_dynamic_import_helper-DMEI4TQ3.js +9 -0
  43. package/dist/cdn/chunks/blockTypeIcons-5QwYklNq.js +22 -0
  44. package/dist/cdn/chunks/blockTypeIcons-5QwYklNq.js.map +1 -0
  45. package/dist/cdn/chunks/de-BB3dgVOc.js +700 -0
  46. package/dist/cdn/chunks/de-BB3dgVOc.js.map +1 -0
  47. package/dist/cdn/chunks/de-BvYD17KT.js +89 -0
  48. package/dist/cdn/chunks/de-BvYD17KT.js.map +1 -0
  49. package/dist/cdn/chunks/dist-BF5c3Dr-.js +2 -0
  50. package/dist/cdn/chunks/dist-BGzvIxcJ.js +2 -0
  51. package/dist/cdn/chunks/dist-CFemF8rI.js +2 -0
  52. package/dist/cdn/chunks/dist-Co6uFhFK.js +2 -0
  53. package/dist/cdn/chunks/dist-DCikBY9K.js +2 -0
  54. package/dist/cdn/chunks/dist-DUILafAC.js +2 -0
  55. package/dist/cdn/chunks/dist-DghiKH0A.js +2 -0
  56. package/dist/cdn/chunks/dist-Dw8ckvfK.js +2 -0
  57. package/dist/cdn/chunks/dist-H07p0KAw.js +2 -0
  58. package/dist/cdn/chunks/dist-KYv9v_1z2.js +457 -0
  59. package/dist/cdn/chunks/dist-KYv9v_1z2.js.map +1 -0
  60. package/dist/cdn/chunks/dist-MjnKIc0W.js +2 -0
  61. package/dist/cdn/chunks/dist-odp0vGRv.js +2 -0
  62. package/dist/cdn/chunks/draggable-BQNU47zu.js +11544 -0
  63. package/dist/cdn/chunks/{draggable-ClUwYCFL.js.map → draggable-BQNU47zu.js.map} +1 -1
  64. package/dist/cdn/chunks/emojiData-BVEJHcNH.js +19 -0
  65. package/dist/cdn/chunks/{emojiData-6fVLNqeH.js.map → emojiData-BVEJHcNH.js.map} +1 -1
  66. package/dist/cdn/chunks/en-CpotcOPr.js +89 -0
  67. package/dist/cdn/chunks/en-CpotcOPr.js.map +1 -0
  68. package/dist/cdn/chunks/en-DeDcpnoS.js +700 -0
  69. package/dist/cdn/chunks/en-DeDcpnoS.js.map +1 -0
  70. package/dist/cdn/chunks/extensions-Bj7USRLr.js +419 -0
  71. package/dist/cdn/chunks/{extensions-ea_ewKUl.js.map → extensions-Bj7USRLr.js.map} +1 -1
  72. package/dist/cdn/chunks/features-Ds0XUfte.js +6737 -0
  73. package/dist/cdn/chunks/features-Ds0XUfte.js.map +1 -0
  74. package/dist/cdn/chunks/icons-fWsuSvgd.js +653 -0
  75. package/dist/cdn/chunks/icons-fWsuSvgd.js.map +1 -0
  76. package/dist/cdn/chunks/liquid.browser-C1VIYISn.js +3272 -0
  77. package/dist/cdn/chunks/liquid.browser-C1VIYISn.js.map +1 -0
  78. package/dist/cdn/chunks/media-library-BGQm_OyC.js +6005 -0
  79. package/dist/cdn/chunks/media-library-BGQm_OyC.js.map +1 -0
  80. package/dist/cdn/chunks/pusher-DJPhQnE8.js +2505 -0
  81. package/dist/cdn/chunks/pusher-DJPhQnE8.js.map +1 -0
  82. package/dist/cdn/chunks/readableTextColor-Cd_cgWO_.js +32 -0
  83. package/dist/cdn/chunks/readableTextColor-Cd_cgWO_.js.map +1 -0
  84. package/dist/cdn/chunks/rolldown-runtime-DPITmOBR.js +20 -0
  85. package/dist/cdn/chunks/src-3i8rPuqd.js +494 -0
  86. package/dist/cdn/chunks/src-3i8rPuqd.js.map +1 -0
  87. package/dist/cdn/chunks/styleConstants-DFe3I4Op.js +57 -0
  88. package/dist/cdn/chunks/{styleConstants-CNejCb-L.js.map → styleConstants-DFe3I4Op.js.map} +1 -1
  89. package/dist/cdn/chunks/styles-Dgijy53u.js +3350 -0
  90. package/dist/cdn/chunks/styles-Dgijy53u.js.map +1 -0
  91. package/dist/cdn/chunks/tiptap-BhxaWR8R.js +14208 -0
  92. package/dist/cdn/chunks/{tiptap-Cya4P9CN.js.map → tiptap-BhxaWR8R.js.map} +1 -1
  93. package/dist/cdn/editor.css +2 -1
  94. package/dist/cdn/editor.js +231 -1
  95. package/dist/cdn/editor.js.map +1 -1
  96. package/dist/{de-B4Ob4vCo.js → de-D7TLGIPA.js} +20 -4
  97. package/dist/{dist-DmpMJbmZ.js → dist-Ci5lFuUy.js} +1 -1
  98. package/dist/{en-YXsspZJG.js → en-DvtiEMwP.js} +20 -4
  99. package/dist/{extensions-CKM99njP.js → extensions-DWx_jj8v.js} +3 -3
  100. package/dist/{keys-Dwa2PmdD.js → keys-C0MQRs8d.js} +3 -3
  101. package/dist/readableTextColor-LDlmVEUv.js +30 -0
  102. package/dist/{styleConstants-D4SOZGBV.js → styleConstants-Cxw88naD.js} +5 -5
  103. package/dist/styles-fdXNRqI3.js +3556 -0
  104. package/dist/templatical-editor.css +1 -1
  105. package/dist/templatical-editor.js +122 -128
  106. package/dist/templatical-editor.umd.cjs +62 -71
  107. package/dist/{useEditorCore-Cc4RCwWq.js → useEditorCore-DUGD6pq_.js} +1247 -1088
  108. package/dist/{useI18n-DUirdXEX.js → useI18n-D6m7ZUgY.js} +1 -1
  109. package/dist/{useMergeTag-DVnlvPYJ.js → useMergeTag-BZ3X0bNr.js} +1 -1
  110. package/package.json +4 -2
  111. package/dist/CloudEditor-BDnHd6Um.js +0 -919
  112. package/dist/ParagraphEditor-DH8cSC6m.js +0 -625
  113. package/dist/TemplateScoringPanel-CTgMtc0-.js +0 -249
  114. package/dist/cdn/chunks/ParagraphEditor-CCtWbGDv.js +0 -3
  115. package/dist/cdn/chunks/ParagraphEditor-CCtWbGDv.js.map +0 -1
  116. package/dist/cdn/chunks/RichTextEditorContent-BUD9veXd.js +0 -2
  117. package/dist/cdn/chunks/RichTextEditorContent-BUD9veXd.js.map +0 -1
  118. package/dist/cdn/chunks/TitleEditor-e_UTyxjd.js +0 -3
  119. package/dist/cdn/chunks/TitleEditor-e_UTyxjd.js.map +0 -1
  120. package/dist/cdn/chunks/dist-0UheN8rK.js +0 -1
  121. package/dist/cdn/chunks/dist-55mmbGQ9.js +0 -1
  122. package/dist/cdn/chunks/dist-B31mxKyP.js +0 -1
  123. package/dist/cdn/chunks/dist-B5JI9nIg.js +0 -1
  124. package/dist/cdn/chunks/dist-B93vLKhU.js +0 -1
  125. package/dist/cdn/chunks/dist-BDt3FJvj.js +0 -1
  126. package/dist/cdn/chunks/dist-BJRuFHmi.js +0 -1
  127. package/dist/cdn/chunks/dist-BKSzrf0L.js +0 -1
  128. package/dist/cdn/chunks/dist-BL8c5gYQ.js +0 -1
  129. package/dist/cdn/chunks/dist-CYThWMP5.js +0 -1
  130. package/dist/cdn/chunks/dist-DxZbPJYt.js +0 -1
  131. package/dist/cdn/chunks/draggable-ClUwYCFL.js +0 -17
  132. package/dist/cdn/chunks/emojiData-6fVLNqeH.js +0 -2
  133. package/dist/cdn/chunks/extensions-ea_ewKUl.js +0 -2
  134. package/dist/cdn/chunks/icons-vmLJTaJk.js +0 -2
  135. package/dist/cdn/chunks/icons-vmLJTaJk.js.map +0 -1
  136. package/dist/cdn/chunks/rolldown-runtime-BakkzWXw.js +0 -1
  137. package/dist/cdn/chunks/styleConstants-CNejCb-L.js +0 -2
  138. package/dist/cdn/chunks/tiptap-Cya4P9CN.js +0 -145
  139. package/dist/cdn/chunks/useEditorCore-CwuxQuvh.js +0 -2
  140. package/dist/cdn/chunks/useEditorCore-CwuxQuvh.js.map +0 -1
  141. package/dist/cdn/chunks/useMergeTag-DVOz1v9p.js +0 -2
  142. package/dist/cdn/chunks/useMergeTag-DVOz1v9p.js.map +0 -1
  143. package/dist/i18n-CJsFtdbZ.js +0 -23
  144. package/dist/styles-DSw1VNU3.js +0 -3406
@@ -1 +1 @@
1
- {"version":3,"file":"editor.js","names":["css","hueCss","saturationCss"],"sources":["../../src/components/Canvas.vue","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/convert.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/compare.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/dom.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/slider.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/hue.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/saturation.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/color-picker.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/hue.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/saturation.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/color-picker.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/entrypoints/hex.js","../../../../node_modules/.bun/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/hex-color-picker.js","../../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type {\n Block,\n Collaborator,\n CustomBlock as CustomBlockType,\n TemplateContent,\n ViewportSize,\n} from \"@templatical/types\";\nimport { ImageUp, Sparkles, SquarePlus } from \"@lucide/vue\";\nimport { computed, inject, type Component } from \"vue\";\nimport {\n EDITOR_KEY,\n CONDITION_PREVIEW_KEY,\n BLOCK_REGISTRY_KEY,\n CAPABILITIES_KEY,\n requireInject,\n} from \"../keys\";\nimport draggable from \"vuedraggable\";\nimport { resolveBlockComponent } from \"../utils/blockComponentResolver\";\n\nimport BlockWrapper from \"./blocks/BlockWrapper.vue\";\nimport SectionBlock from \"./blocks/SectionBlock.vue\";\nimport TitleBlock from \"./blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"./blocks/ParagraphBlock.vue\";\nimport ImageBlock from \"./blocks/ImageBlock.vue\";\nimport ButtonBlock from \"./blocks/ButtonBlock.vue\";\nimport DividerBlock from \"./blocks/DividerBlock.vue\";\nimport SpacerBlock from \"./blocks/SpacerBlock.vue\";\nimport HtmlBlock from \"./blocks/HtmlBlock.vue\";\nimport SocialIconsBlock from \"./blocks/SocialIconsBlock.vue\";\nimport MenuBlock from \"./blocks/MenuBlock.vue\";\nimport TableBlock from \"./blocks/TableBlock.vue\";\nimport CustomBlock from \"./blocks/CustomBlock.vue\";\nimport VideoBlock from \"./blocks/VideoBlock.vue\";\nimport CountdownBlockComponent from \"./blocks/CountdownBlock.vue\";\n\nconst blockComponentMap: Record<string, Component> = {\n section: SectionBlock,\n title: TitleBlock,\n paragraph: ParagraphBlock,\n image: ImageBlock,\n button: ButtonBlock,\n divider: DividerBlock,\n spacer: SpacerBlock,\n html: HtmlBlock,\n social: SocialIconsBlock,\n menu: MenuBlock,\n table: TableBlock,\n video: VideoBlock,\n countdown: CountdownBlockComponent,\n custom: CustomBlock,\n};\n\nconst props = defineProps<{\n viewport: ViewportSize;\n content: TemplateContent;\n selectedBlockId: string | null;\n darkMode: boolean;\n previewMode: boolean;\n lockedBlocks?: Map<string, Collaborator>;\n}>();\n\nconst emit = defineEmits<{\n (e: \"select-block\", blockId: string | null): void;\n (e: \"open-ai-chat\"): void;\n (e: \"open-design-reference\"): void;\n}>();\n\nconst { t } = useI18n();\n\nconst editor = requireInject(EDITOR_KEY, \"Canvas\");\nconst conditionPreview = inject(CONDITION_PREVIEW_KEY, null);\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst caps = inject(CAPABILITIES_KEY, {});\n\nconst canUseAiChat = computed(\n () =>\n (caps.plan?.hasFeature(\"ai_generation\") ?? false) &&\n (caps.ai?.isFeatureEnabled(\"chat\") ?? false),\n);\nconst canUseDesignToTemplate = computed(\n () =>\n (caps.plan?.hasFeature(\"ai_generation\") ?? false) &&\n (caps.ai?.isFeatureEnabled(\"designToTemplate\") ?? false),\n);\n\nconst blocks = computed({\n get: () => props.content.blocks,\n set: (value: Block[]) => {\n editor.setContent({\n ...props.content,\n blocks: value,\n });\n },\n});\n\nconst viewportWidth = computed(() => {\n switch (props.viewport) {\n case \"mobile\":\n return 375;\n case \"tablet\":\n return 768;\n default:\n return props.content.settings.width;\n }\n});\n\n// Canvas dark mode preview: simulates how the email will appear in recipients'\n// dark-themed email clients. Uses CSS filter inversion — independent of the\n// editor UI theme (light/dark/auto) which is controlled via uiTheme config.\nconst canvasStyle = computed(() => ({\n backgroundColor: props.content.settings.backgroundColor,\n fontFamily: props.content.settings.fontFamily,\n}));\n\nfunction handleCanvasClick(event: MouseEvent): void {\n if (props.previewMode) {\n return;\n }\n if (event.target === event.currentTarget) {\n emit(\"select-block\", null);\n }\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n return resolveBlockComponent(block, blockRegistry, blockComponentMap);\n}\n\nfunction getBlockLock(blockId: string): Collaborator | null {\n return props.lockedBlocks?.get(blockId) ?? null;\n}\n\nfunction handleFetchData(\n block: Block,\n payload: {\n fieldValues: Record<string, unknown>;\n dataSourceFetched: boolean;\n },\n): void {\n if (block.type !== \"custom\") {\n return;\n }\n\n editor.updateBlock(block.id, {\n fieldValues: payload.fieldValues,\n dataSourceFetched: payload.dataSourceFetched,\n } as Partial<CustomBlockType>);\n}\n</script>\n\n<template>\n <div\n class=\"tpl-canvas-wrapper tpl:rounded-lg tpl:transition-[width] tpl:duration-300\"\n style=\"transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)\"\n :style=\"{\n width: `${viewportWidth}px`,\n backgroundColor: content.settings.backgroundColor,\n boxShadow: darkMode ? 'none' : 'var(--tpl-shadow-xl)',\n filter: darkMode ? 'invert(1) hue-rotate(180deg)' : 'none',\n transition: 'filter 300ms ease',\n }\"\n >\n <div\n class=\"tpl-canvas tpl:rounded-lg\"\n :class=\"{\n 'tpl-canvas--dark-mode': darkMode,\n 'tpl-preview-mode': previewMode,\n }\"\n :style=\"canvasStyle\"\n @click=\"handleCanvasClick\"\n >\n <draggable\n v-model=\"blocks\"\n group=\"blocks\"\n item-key=\"id\"\n :animation=\"150\"\n ghost-class=\"tpl-ghost\"\n drag-class=\"tpl-dragging\"\n handle=\".tpl-block-btn\"\n :invert-swap=\"true\"\n :inverted-swap-threshold=\"0.65\"\n :disabled=\"previewMode\"\n class=\"tpl-canvas-blocks\"\n >\n <template #item=\"{ element: block }\">\n <div v-show=\"!conditionPreview?.isHidden(block.id)\">\n <div class=\"tpl:relative\">\n <!-- Collaboration lock overlay -->\n <div\n v-if=\"getBlockLock(block.id)\"\n class=\"tpl-collab-lock tpl:pointer-events-none tpl:absolute tpl:inset-0 tpl:z-[4] tpl:rounded-sm\"\n :style=\"{\n outline: `2px solid ${getBlockLock(block.id)!.color}`,\n outlineOffset: '-1px',\n }\"\n >\n <span\n class=\"tpl:absolute tpl:-top-0.5 tpl:left-1/2 tpl:z-[5] tpl:flex tpl:-translate-x-1/2 tpl:-translate-y-full tpl:items-center tpl:gap-1 tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:text-white tpl:whitespace-nowrap\"\n :style=\"{\n backgroundColor: getBlockLock(block.id)!.color,\n }\"\n >\n <span\n class=\"tpl:inline-flex tpl:size-3 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[8px] tpl:font-bold\"\n style=\"\n background-color: color-mix(\n in srgb,\n var(--tpl-bg) 30%,\n transparent\n );\n \"\n >\n {{ getBlockLock(block.id)!.name.charAt(0) }}\n </span>\n {{ getBlockLock(block.id)!.name }}\n </span>\n </div>\n <BlockWrapper\n :block=\"block\"\n :is-selected=\"\n !previewMode &&\n selectedBlockId === block.id &&\n !getBlockLock(block.id)\n \"\n :viewport=\"viewport\"\n :preview-mode=\"previewMode\"\n @select=\"\n previewMode || getBlockLock(block.id)\n ? undefined\n : emit('select-block', block.id)\n \"\n >\n <component\n :is=\"getBlockComponent(block)\"\n :block=\"block\"\n :viewport=\"viewport\"\n @fetch-data=\"handleFetchData(block, $event)\"\n @update=\"\n (updates: Partial<Block>) =>\n editor.updateBlock(block.id, updates)\n \"\n />\n </BlockWrapper>\n </div>\n </div>\n </template>\n <template #footer>\n <div\n v-if=\"blocks.length === 0 && !previewMode\"\n class=\"tpl-canvas-empty tpl:m-6 tpl:flex tpl:min-h-[400px] tpl:flex-col tpl:items-center tpl:justify-center tpl:rounded-xl tpl:border-2 tpl:border-dashed tpl:px-10 tpl:py-12 tpl:text-center tpl:border-[var(--tpl-primary)] tpl:bg-[var(--tpl-bg-elevated)] tpl:font-[var(--tpl-font-family)]\"\n >\n <div\n class=\"tpl-canvas-empty-icon tpl:mb-4 tpl:text-[var(--tpl-primary)]\"\n >\n <SquarePlus :size=\"48\" :stroke-width=\"1\" />\n </div>\n <p\n class=\"tpl-canvas-empty-title tpl:m-0 tpl:mb-2 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-primary)]\"\n >\n {{ t.canvas.noBlocks }}\n </p>\n <p\n class=\"tpl-canvas-empty-text tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.canvas.dragHint }}\n </p>\n <p\n v-if=\"canUseAiChat\"\n class=\"tpl:m-0 tpl:mt-2 tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-center tpl:gap-x-1 tpl:gap-y-0.5 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.canvas.aiHintChat }}\n <button\n class=\"tpl:inline-flex tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:whitespace-nowrap tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-0.5 tpl:text-sm tpl:font-semibold tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary-hover)]\"\n @click=\"emit('open-ai-chat')\"\n >\n <Sparkles :size=\"14\" :stroke-width=\"2\" />\n {{ t.aiMenu.aiAssistant }}\n </button>\n {{ t.canvas.aiHintChatSuffix }}\n </p>\n <p\n v-if=\"canUseDesignToTemplate\"\n class=\"tpl:m-0 tpl:mt-4 tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-center tpl:gap-x-1 tpl:gap-y-0.5 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.canvas.aiHintDesign }}\n <button\n class=\"tpl:inline-flex tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:whitespace-nowrap tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-0.5 tpl:text-sm tpl:font-semibold tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary-hover)]\"\n @click=\"emit('open-design-reference')\"\n >\n <ImageUp :size=\"14\" :stroke-width=\"2\" />\n {{ t.aiMenu.designToTemplate }}\n </button>\n {{ t.canvas.aiHintDesignSuffix }}\n </p>\n </div>\n </template>\n </draggable>\n </div>\n </div>\n</template>\n\n<style scoped>\n/* Counter-invert images so they look normal in dark mode */\n.tpl-canvas--dark-mode :deep(img) {\n filter: invert(1) hue-rotate(180deg);\n}\n\n/* Counter-invert editor UI chrome so controls stay readable */\n.tpl-canvas--dark-mode :deep(.tpl-block-actions),\n.tpl-canvas--dark-mode :deep(.tpl-condition-toggle),\n.tpl-canvas--dark-mode :deep(.tpl-block-hidden-overlay) {\n filter: invert(1) hue-rotate(180deg);\n}\n</style>\n","// Clamps a value between an upper and lower bound.\n// We use ternary operators because it makes the minified code\n// 2 times shorter then `Math.min(Math.max(a,b),c)`\nexport const clamp = (number, min = 0, max = 1) => {\n return number > max ? max : number < min ? min : number;\n};\nexport const round = (number, digits = 0, base = Math.pow(10, digits)) => {\n return Math.round(base * number) / base;\n};\n//# sourceMappingURL=math.js.map","import { round } from './math.js';\n/**\n * Valid CSS <angle> units.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/angle\n */\nconst angleUnits = {\n grad: 360 / 400,\n turn: 360,\n rad: 360 / (Math.PI * 2)\n};\nexport const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));\nexport const hexToRgba = (hex) => {\n if (hex[0] === '#')\n hex = hex.substring(1);\n if (hex.length < 6) {\n return {\n r: parseInt(hex[0] + hex[0], 16),\n g: parseInt(hex[1] + hex[1], 16),\n b: parseInt(hex[2] + hex[2], 16),\n a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1\n };\n }\n return {\n r: parseInt(hex.substring(0, 2), 16),\n g: parseInt(hex.substring(2, 4), 16),\n b: parseInt(hex.substring(4, 6), 16),\n a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1\n };\n};\nexport const parseHue = (value, unit = 'deg') => {\n return Number(value) * (angleUnits[unit] || 1);\n};\nexport const hslaStringToHsva = (hslString) => {\n const matcher = /hsla?\\(?\\s*(-?\\d*\\.?\\d+)(deg|rad|grad|turn)?[,\\s]+(-?\\d*\\.?\\d+)%?[,\\s]+(-?\\d*\\.?\\d+)%?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n const match = matcher.exec(hslString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return hslaToHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n l: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n });\n};\nexport const hslStringToHsva = hslaStringToHsva;\nexport const hslaToHsva = ({ h, s, l, a }) => {\n s *= (l < 50 ? l : 100 - l) / 100;\n return {\n h: h,\n s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,\n v: l + s,\n a\n };\n};\nexport const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));\nexport const hsvaToHsla = ({ h, s, v, a }) => {\n const hh = ((200 - s) * v) / 100;\n return {\n h: round(h),\n s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),\n l: round(hh / 2),\n a: round(a, 2)\n };\n};\nexport const hsvaToHsvString = (hsva) => {\n const { h, s, v } = roundHsva(hsva);\n return `hsv(${h}, ${s}%, ${v}%)`;\n};\nexport const hsvaToHsvaString = (hsva) => {\n const { h, s, v, a } = roundHsva(hsva);\n return `hsva(${h}, ${s}%, ${v}%, ${a})`;\n};\nexport const hsvaToHslString = (hsva) => {\n const { h, s, l } = hsvaToHsla(hsva);\n return `hsl(${h}, ${s}%, ${l}%)`;\n};\nexport const hsvaToHslaString = (hsva) => {\n const { h, s, l, a } = hsvaToHsla(hsva);\n return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n};\nexport const hsvaToRgba = ({ h, s, v, a }) => {\n h = (h / 360) * 6;\n s = s / 100;\n v = v / 100;\n const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;\n return {\n r: round([v, c, b, b, d, v][module] * 255),\n g: round([d, v, v, c, b, b][module] * 255),\n b: round([b, b, d, v, v, c][module] * 255),\n a: round(a, 2)\n };\n};\nexport const hsvaToRgbString = (hsva) => {\n const { r, g, b } = hsvaToRgba(hsva);\n return `rgb(${r}, ${g}, ${b})`;\n};\nexport const hsvaToRgbaString = (hsva) => {\n const { r, g, b, a } = hsvaToRgba(hsva);\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n};\nexport const hsvaStringToHsva = (hsvString) => {\n const matcher = /hsva?\\(?\\s*(-?\\d*\\.?\\d+)(deg|rad|grad|turn)?[,\\s]+(-?\\d*\\.?\\d+)%?[,\\s]+(-?\\d*\\.?\\d+)%?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n const match = matcher.exec(hsvString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return roundHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n v: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n });\n};\nexport const hsvStringToHsva = hsvaStringToHsva;\nexport const rgbaStringToHsva = (rgbaString) => {\n const matcher = /rgba?\\(?\\s*(-?\\d*\\.?\\d+)(%)?[,\\s]+(-?\\d*\\.?\\d+)(%)?[,\\s]+(-?\\d*\\.?\\d+)(%)?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n const match = matcher.exec(rgbaString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return rgbaToHsva({\n r: Number(match[1]) / (match[2] ? 100 / 255 : 1),\n g: Number(match[3]) / (match[4] ? 100 / 255 : 1),\n b: Number(match[5]) / (match[6] ? 100 / 255 : 1),\n a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1)\n });\n};\nexport const rgbStringToHsva = rgbaStringToHsva;\nconst format = (number) => {\n const hex = number.toString(16);\n return hex.length < 2 ? '0' + hex : hex;\n};\nexport const rgbaToHex = ({ r, g, b, a }) => {\n const alphaHex = a < 1 ? format(round(a * 255)) : '';\n return '#' + format(r) + format(g) + format(b) + alphaHex;\n};\nexport const rgbaToHsva = ({ r, g, b, a }) => {\n const max = Math.max(r, g, b);\n const delta = max - Math.min(r, g, b);\n // prettier-ignore\n const hh = delta\n ? max === r\n ? (g - b) / delta\n : max === g\n ? 2 + (b - r) / delta\n : 4 + (r - g) / delta\n : 0;\n return {\n h: round(60 * (hh < 0 ? hh + 6 : hh)),\n s: round(max ? (delta / max) * 100 : 0),\n v: round((max / 255) * 100),\n a\n };\n};\nexport const roundHsva = (hsva) => ({\n h: round(hsva.h),\n s: round(hsva.s),\n v: round(hsva.v),\n a: round(hsva.a, 2)\n});\nexport const rgbaToRgb = ({ r, g, b }) => ({ r, g, b });\nexport const hslaToHsl = ({ h, s, l }) => ({ h, s, l });\nexport const hsvaToHsv = (hsva) => {\n const { h, s, v } = roundHsva(hsva);\n return { h, s, v };\n};\n//# sourceMappingURL=convert.js.map","import { hexToRgba } from './convert.js';\nexport const equalColorObjects = (first, second) => {\n if (first === second)\n return true;\n for (const prop in first) {\n // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)\n // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)\n // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,\n // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if\n // there is or not), and then as a type TS can iterate over.\n if (first[prop] !==\n second[prop])\n return false;\n }\n return true;\n};\nexport const equalColorString = (first, second) => {\n return first.replace(/\\s/g, '') === second.replace(/\\s/g, '');\n};\nexport const equalHex = (first, second) => {\n if (first.toLowerCase() === second.toLowerCase())\n return true;\n // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects\n return equalColorObjects(hexToRgba(first), hexToRgba(second));\n};\n//# sourceMappingURL=compare.js.map","const cache = {};\nexport const tpl = (html) => {\n let template = cache[html];\n if (!template) {\n template = document.createElement('template');\n template.innerHTML = html;\n cache[html] = template;\n }\n return template;\n};\nexport const fire = (target, type, detail) => {\n target.dispatchEvent(new CustomEvent(type, {\n bubbles: true,\n detail\n }));\n};\n//# sourceMappingURL=dom.js.map","import { fire, tpl } from '../utils/dom.js';\nimport { clamp } from '../utils/math.js';\nlet hasTouched = false;\n// Check if an event was triggered by touch\nconst isTouch = (e) => 'touches' in e;\n// Prevent mobile browsers from handling mouse events (conflicting with touch ones).\n// If we detected a touch interaction before, we prefer reacting to touch events only.\nconst isValid = (event) => {\n if (hasTouched && !isTouch(event))\n return false;\n if (!hasTouched)\n hasTouched = isTouch(event);\n return true;\n};\nconst pointerMove = (target, event) => {\n const pointer = isTouch(event) ? event.touches[0] : event;\n const rect = target.el.getBoundingClientRect();\n fire(target.el, 'move', target.getMove({\n x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),\n y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)\n }));\n};\nconst keyMove = (target, event) => {\n // We use `keyCode` instead of `key` to reduce the size of the library.\n const keyCode = event.keyCode;\n // Ignore all keys except arrow ones, Page Up, Page Down, Home and End.\n if (keyCode > 40 || (target.xy && keyCode < 37) || keyCode < 33)\n return;\n // Do not scroll page by keys when color picker element has focus.\n event.preventDefault();\n // Send relative offset to the parent component.\n fire(target.el, 'move', target.getMove({\n x: keyCode === 39 // Arrow Right\n ? 0.01\n : keyCode === 37 // Arrow Left\n ? -0.01\n : keyCode === 34 // Page Down\n ? 0.05\n : keyCode === 33 // Page Up\n ? -0.05\n : keyCode === 35 // End\n ? 1\n : keyCode === 36 // Home\n ? -1\n : 0,\n y: keyCode === 40 // Arrow down\n ? 0.01\n : keyCode === 38 // Arrow Up\n ? -0.01\n : 0\n }, true));\n};\nexport class Slider {\n constructor(root, part, aria, xy) {\n const template = tpl(`<div role=\"slider\" tabindex=\"0\" part=\"${part}\" ${aria}><div part=\"${part}-pointer\"></div></div>`);\n root.appendChild(template.content.cloneNode(true));\n const el = root.querySelector(`[part=${part}]`);\n el.addEventListener('mousedown', this);\n el.addEventListener('touchstart', this);\n el.addEventListener('keydown', this);\n this.el = el;\n this.xy = xy;\n this.nodes = [el.firstChild, el];\n }\n set dragging(state) {\n const toggleEvent = state ? document.addEventListener : document.removeEventListener;\n toggleEvent(hasTouched ? 'touchmove' : 'mousemove', this);\n toggleEvent(hasTouched ? 'touchend' : 'mouseup', this);\n }\n handleEvent(event) {\n switch (event.type) {\n case 'mousedown':\n case 'touchstart':\n event.preventDefault();\n // event.button is 0 in mousedown for left button activation\n if (!isValid(event) || (!hasTouched && event.button != 0))\n return;\n this.el.focus();\n pointerMove(this, event);\n this.dragging = true;\n break;\n case 'mousemove':\n case 'touchmove':\n event.preventDefault();\n pointerMove(this, event);\n break;\n case 'mouseup':\n case 'touchend':\n this.dragging = false;\n break;\n case 'keydown':\n keyMove(this, event);\n break;\n }\n }\n style(styles) {\n styles.forEach((style, i) => {\n for (const p in style) {\n this.nodes[i].style.setProperty(p, style[p]);\n }\n });\n }\n}\n//# sourceMappingURL=slider.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Hue extends Slider {\n constructor(root) {\n super(root, 'hue', 'aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"', false);\n }\n update({ h }) {\n this.h = h;\n this.style([\n {\n left: `${(h / 360) * 100}%`,\n color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })\n }\n ]);\n this.el.setAttribute('aria-valuenow', `${round(h)}`);\n }\n getMove(offset, key) {\n // Hue measured in degrees of the color circle ranging from 0 to 360\n return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };\n }\n}\n//# sourceMappingURL=hue.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Saturation extends Slider {\n constructor(root) {\n super(root, 'saturation', 'aria-label=\"Color\"', true);\n }\n update(hsva) {\n this.hsva = hsva;\n this.style([\n {\n top: `${100 - hsva.v}%`,\n left: `${hsva.s}%`,\n color: hsvaToHslString(hsva)\n },\n {\n 'background-color': hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 })\n }\n ]);\n this.el.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);\n }\n getMove(offset, key) {\n // Saturation and brightness always fit into [0, 100] range\n return {\n s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,\n v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)\n };\n }\n}\n//# sourceMappingURL=saturation.js.map","export default `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`;\n//# sourceMappingURL=color-picker.js.map","export default `[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`;\n//# sourceMappingURL=hue.js.map","export default `[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`;\n//# sourceMappingURL=saturation.js.map","import { equalColorObjects } from '../utils/compare.js';\nimport { fire, tpl } from '../utils/dom.js';\nimport { Hue } from './hue.js';\nimport { Saturation } from './saturation.js';\nimport css from '../styles/color-picker.js';\nimport hueCss from '../styles/hue.js';\nimport saturationCss from '../styles/saturation.js';\nconst $isSame = Symbol('same');\nconst $color = Symbol('color');\nconst $hsva = Symbol('hsva');\nconst $update = Symbol('update');\nconst $parts = Symbol('parts');\nexport const $css = Symbol('css');\nexport const $sliders = Symbol('sliders');\nexport class ColorPicker extends HTMLElement {\n static get observedAttributes() {\n return ['color'];\n }\n get [$css]() {\n return [css, hueCss, saturationCss];\n }\n get [$sliders]() {\n return [Saturation, Hue];\n }\n get color() {\n return this[$color];\n }\n set color(newColor) {\n if (!this[$isSame](newColor)) {\n const newHsva = this.colorModel.toHsva(newColor);\n this[$update](newHsva);\n this[$color] = newColor;\n }\n }\n constructor() {\n super();\n const template = tpl(`<style>${this[$css].join('')}</style>`);\n const root = this.attachShadow({ mode: 'open' });\n root.appendChild(template.content.cloneNode(true));\n root.addEventListener('move', this);\n this[$parts] = this[$sliders].map((slider) => new slider(root));\n }\n connectedCallback() {\n // A user may set a property on an _instance_ of an element,\n // before its prototype has been connected to this class.\n // If so, we need to run it through the proper class setter.\n if (this.hasOwnProperty('color')) {\n const value = this.color;\n delete this['color'];\n this.color = value;\n }\n else if (!this.color) {\n this.color = this.colorModel.defaultColor;\n }\n }\n attributeChangedCallback(_attr, _oldVal, newVal) {\n const color = this.colorModel.fromAttr(newVal);\n if (!this[$isSame](color)) {\n this.color = color;\n }\n }\n handleEvent(event) {\n // Merge the current HSV color object with updated params.\n const oldHsva = this[$hsva];\n const newHsva = { ...oldHsva, ...event.detail };\n this[$update](newHsva);\n let newColor;\n if (!equalColorObjects(newHsva, oldHsva) &&\n !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) {\n this[$color] = newColor;\n fire(this, 'color-changed', { value: newColor });\n }\n }\n [$isSame](color) {\n return this.color && this.colorModel.equal(color, this.color);\n }\n [$update](hsva) {\n this[$hsva] = hsva;\n this[$parts].forEach((part) => part.update(hsva));\n }\n}\n//# sourceMappingURL=color-picker.js.map","import { ColorPicker } from '../components/color-picker.js';\nimport { hexToHsva, hsvaToHex } from '../utils/convert.js';\nimport { equalHex } from '../utils/compare.js';\nconst colorModel = {\n defaultColor: '#000',\n toHsva: hexToHsva,\n fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),\n equal: equalHex,\n fromAttr: (color) => color\n};\nexport class HexBase extends ColorPicker {\n get colorModel() {\n return colorModel;\n }\n}\n//# sourceMappingURL=hex.js.map","import { HexBase } from './lib/entrypoints/hex.js';\n/**\n * A color picker custom element that uses HEX format.\n *\n * @element hex-color-picker\n *\n * @prop {string} color - Selected color in HEX format.\n * @attr {string} color - Selected color in HEX format.\n *\n * @fires color-changed - Event fired when color property changes.\n *\n * @csspart hue - A hue selector container.\n * @csspart saturation - A saturation selector container\n * @csspart hue-pointer - A hue pointer element.\n * @csspart saturation-pointer - A saturation pointer element.\n */\nexport class HexColorPicker extends HexBase {\n}\ncustomElements.define('hex-color-picker', HexColorPicker);\n//# sourceMappingURL=hex-color-picker.js.map","import { createApp, h, ref, type App, type Ref } from \"vue\";\nimport { INIT_TIMEOUT_MS } from \"./constants/timeouts\";\nimport type {\n BlockDefaults,\n CustomBlockDefinition,\n DisplayConditionsConfig,\n FontsConfig,\n MediaResult,\n MergeTagsConfig,\n SaveResult,\n Template,\n TemplateContent,\n TemplateDefaults,\n ThemeOverrides,\n UiTheme,\n} from \"@templatical/types\";\nimport type { MediaRequestContext } from \"@templatical/media-library\";\n\nimport Editor from \"./Editor.vue\";\nimport { loadTranslations } from \"./i18n\";\nimport { useFonts } from \"./composables\";\n\n// ---------------------------------------------------------------------------\n// OSS config + return types\n// ---------------------------------------------------------------------------\n\nexport interface TemplaticalEditorConfig {\n container: string | HTMLElement;\n content?: TemplateContent;\n\n onChange?: (content: TemplateContent) => void;\n onSave?: (content: TemplateContent) => void;\n onError?: (error: Error) => void;\n\n onRequestMedia?: OnRequestMedia;\n\n mergeTags?: MergeTagsConfig;\n displayConditions?: DisplayConditionsConfig;\n customBlocks?: CustomBlockDefinition[];\n fonts?: FontsConfig;\n\n blockDefaults?: BlockDefaults;\n templateDefaults?: TemplateDefaults;\n\n theme?: ThemeOverrides;\n uiTheme?: UiTheme;\n locale?: string;\n}\n\n/** Function type for media browser requests, used by both OSS and Cloud editors. */\nexport type OnRequestMedia = (\n context?: MediaRequestContext,\n) => Promise<MediaResult | null>;\n\nexport interface TemplaticalEditor {\n getContent(): TemplateContent;\n setContent(content: TemplateContent): void;\n setTheme(theme: UiTheme): void;\n unmount(): void;\n toMjml?(): string;\n}\n\nexport interface TemplaticalCloudEditor extends TemplaticalEditor {\n create(content?: TemplateContent): Promise<Template>;\n load(templateId: string): Promise<Template>;\n save(): Promise<SaveResult>;\n}\n\n// ---------------------------------------------------------------------------\n// OSS init — sync\n// ---------------------------------------------------------------------------\n\nlet appInstance: App | null = null;\nconst editorRef: Ref<InstanceType<typeof Editor> | null> = ref(null);\n\nexport async function init(\n config: TemplaticalEditorConfig,\n): Promise<TemplaticalEditor> {\n const container =\n typeof config.container === \"string\"\n ? document.querySelector(config.container)\n : config.container;\n\n if (!container) {\n throw new Error(\n `[Templatical] Container element not found: ${config.container}`,\n );\n }\n\n if (appInstance) {\n unmount();\n }\n\n // Load translations before mounting so child components can use useI18n synchronously\n const translations = await loadTranslations(config.locale ?? \"en\");\n\n // Create fonts manager to pass to Editor\n const fontsManager = useFonts(config.fonts);\n\n appInstance = createApp({\n setup() {\n return () =>\n h(Editor, {\n config,\n translations,\n fontsManager,\n ref: editorRef,\n });\n },\n });\n\n appInstance.mount(container);\n\n const instance: TemplaticalEditor = {\n getContent() {\n if (editorRef.value) {\n return JSON.parse(JSON.stringify(editorRef.value.getContent()));\n }\n return JSON.parse(JSON.stringify(config.content));\n },\n setContent(content: TemplateContent) {\n if (editorRef.value) {\n editorRef.value.setContent(content);\n }\n config.content = content;\n },\n setTheme(theme: UiTheme) {\n if (editorRef.value) {\n editorRef.value.setTheme(theme);\n }\n },\n unmount,\n };\n\n // Try to detect @templatical/renderer for export methods\n attachRenderer(instance);\n\n return instance;\n}\n\n// ---------------------------------------------------------------------------\n// Cloud init — async, flat config, tree-shaken when not called\n// ---------------------------------------------------------------------------\n\nlet cloudAppInstance: App | null = null;\n\nconst cloudEditorRef: Ref<InstanceType<\n typeof import(\"./cloud/CloudEditor.vue\").default\n> | null> = ref(null);\n\nexport async function initCloud(\n config: import(\"./cloud/CloudEditor.vue\").TemplaticalCloudEditorConfig,\n): Promise<TemplaticalCloudEditor> {\n const container =\n typeof config.container === \"string\"\n ? document.querySelector(config.container)\n : config.container;\n\n if (!container) {\n throw new Error(\n `[Templatical] Container element not found: ${config.container}`,\n );\n }\n\n if (cloudAppInstance) {\n unmountCloud();\n }\n\n // Dynamic import — CloudEditor.vue is tree-shaken from the OSS bundle\n const { default: CloudEditor } = await import(\"./cloud/CloudEditor.vue\");\n\n // Load translations before mounting so child components can use useI18n synchronously\n const { loadTranslations } = await import(\"./i18n\");\n const translations = await loadTranslations(config.locale ?? \"en\");\n\n // Create fonts manager to pass to CloudEditor\n const fontsManager = useFonts(config.fonts);\n\n // Promise that resolves when CloudEditor emits 'ready'\n const readyPromise = new Promise<void>((resolve, reject) => {\n const timeout = setTimeout(() => {\n reject(new Error(\"[Templatical] Cloud editor initialization timed out\"));\n }, INIT_TIMEOUT_MS);\n\n cloudAppInstance = createApp({\n setup() {\n return () =>\n h(CloudEditor, {\n config,\n translations,\n fontsManager,\n ref: cloudEditorRef,\n onReady: () => {\n clearTimeout(timeout);\n resolve();\n },\n });\n },\n });\n\n cloudAppInstance.mount(container);\n });\n\n await readyPromise;\n\n const instance: TemplaticalCloudEditor = {\n getContent() {\n if (cloudEditorRef.value) {\n return JSON.parse(JSON.stringify(cloudEditorRef.value.getContent()));\n }\n return JSON.parse(JSON.stringify(config.content));\n },\n setContent(content: TemplateContent) {\n if (cloudEditorRef.value) {\n cloudEditorRef.value.setContent(content);\n }\n },\n setTheme(theme: UiTheme) {\n if (cloudEditorRef.value) {\n cloudEditorRef.value.setTheme(theme);\n }\n },\n unmount: unmountCloud,\n create(content?: TemplateContent) {\n if (!cloudEditorRef.value) {\n return Promise.reject(\n new Error(\"[Templatical] Cloud editor not ready\"),\n );\n }\n return cloudEditorRef.value.create(content);\n },\n load(templateId: string) {\n if (!cloudEditorRef.value) {\n return Promise.reject(\n new Error(\"[Templatical] Cloud editor not ready\"),\n );\n }\n return cloudEditorRef.value.load(templateId);\n },\n save() {\n if (!cloudEditorRef.value) {\n return Promise.reject(\n new Error(\"[Templatical] Cloud editor not ready\"),\n );\n }\n return cloudEditorRef.value.save();\n },\n };\n\n // Try to detect @templatical/renderer for export methods\n attachRenderer(instance);\n\n return instance;\n}\n\n// ---------------------------------------------------------------------------\n// Unmount helpers\n// ---------------------------------------------------------------------------\n\nexport function unmount(): void {\n if (appInstance) {\n appInstance.unmount();\n appInstance = null;\n editorRef.value = null;\n }\n}\n\nfunction unmountCloud(): void {\n if (cloudAppInstance) {\n cloudAppInstance.unmount();\n cloudAppInstance = null;\n cloudEditorRef.value = null;\n }\n}\n\n// ---------------------------------------------------------------------------\n// Renderer attachment (shared by OSS + Cloud)\n// ---------------------------------------------------------------------------\n\nfunction attachRenderer(instance: TemplaticalEditor): void {\n import(\"@templatical/renderer\")\n .then((renderer) => {\n instance.toMjml = () => renderer.renderToMjml(instance.getContent());\n })\n .catch(() => {\n // @templatical/renderer not installed — export methods not available\n });\n}\n\n// ---------------------------------------------------------------------------\n// Re-exports\n// ---------------------------------------------------------------------------\n\nexport type { TemplaticalCloudEditorConfig } from \"./cloud/CloudEditor.vue\";\nexport type {\n BlockDefaults,\n TemplateContent,\n TemplateDefaults,\n ThemeOverrides,\n UiTheme,\n MergeTagsConfig,\n DisplayConditionsConfig,\n CustomBlockDefinition,\n ViewportSize,\n CustomFont,\n FontsConfig,\n SaveResult,\n Template,\n} from \"@templatical/types\";\n\nexport type { UseFontsReturn, FontOption } from \"./composables/useFonts\";\nexport { useFonts } from \"./composables/useFonts\";\nexport type { EditorCapabilities } from \"./types/editor-capabilities\";\nexport {\n TRANSLATIONS_KEY,\n EDITOR_KEY,\n HISTORY_KEY,\n BLOCK_ACTIONS_KEY,\n CONDITION_PREVIEW_KEY,\n FONTS_MANAGER_KEY,\n THEME_STYLES_KEY,\n UI_THEME_KEY,\n BLOCK_DEFAULTS_KEY,\n BLOCK_REGISTRY_KEY,\n CUSTOM_BLOCK_DEFINITIONS_KEY,\n MERGE_TAGS_KEY,\n MERGE_TAG_SYNTAX_KEY,\n ON_REQUEST_MERGE_TAG_KEY,\n ON_REQUEST_MEDIA_KEY,\n DISPLAY_CONDITIONS_KEY,\n ALLOW_CUSTOM_CONDITIONS_KEY,\n CAPABILITIES_KEY,\n} from \"./keys\";\n"],"x_google_ignoreList":[1,2,3,4,5,6,7,8,9,10,11,12,13],"mappings":"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"}
1
+ {"version":3,"file":"editor.js","names":[],"sources":["../../src/Editor.vue","../../src/Editor.vue","../../src/i18n/index.ts","../../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from \"vue\";\nimport type { TemplaticalEditorConfig } from \"./index\";\nimport { useEditor } from \"@templatical/core\";\nimport type { TemplateContent, UiTheme } from \"@templatical/types\";\nimport { useEditorCore } from \"./composables/useEditorCore\";\nimport type { Translations } from \"./i18n\";\nimport type { UseFontsReturn } from \"./composables/useFonts\";\n\nimport { RotateCcw } from \"@lucide/vue\";\nimport Canvas from \"./components/Canvas.vue\";\nimport Sidebar from \"./components/Sidebar.vue\";\nimport RightSidebar from \"./components/RightSidebar.vue\";\nimport ViewportToggle from \"./components/ViewportToggle.vue\";\nimport PreviewToggle from \"./components/PreviewToggle.vue\";\nimport DarkModeToggle from \"./components/DarkModeToggle.vue\";\nimport EditorFooter from \"./components/EditorFooter.vue\";\nimport \"./styles/index.css\";\n\nconst props = defineProps<{\n config: TemplaticalEditorConfig;\n translations: Translations;\n fontsManager: UseFontsReturn;\n}>();\n\n// --- Core editor state ---\nconst editor = useEditor({\n content: props.config.content!,\n templateDefaults: props.config.templateDefaults,\n});\n\n// --- Shared editor core (composables, provides, plugins, keyboard) ---\nconst core = useEditorCore({\n editor,\n config: {\n uiTheme: props.config.uiTheme,\n theme: props.config.theme,\n blockDefaults: props.config.blockDefaults,\n customBlocks: props.config.customBlocks,\n mergeTags: props.config.mergeTags,\n displayConditions: props.config.displayConditions,\n onRequestMedia: props.config.onRequestMedia,\n onSave: props.config.onSave\n ? () =>\n props.config.onSave!(JSON.parse(JSON.stringify(editor.state.content)))\n : undefined,\n },\n translations: props.translations,\n fontsManager: props.fontsManager,\n autoSaveOptions: props.config.onChange\n ? {\n onChange: () =>\n props.config.onChange!(\n JSON.parse(JSON.stringify(editor.state.content)),\n ),\n }\n : null,\n});\n\n// --- Lifecycle ---\nonMounted(async () => {\n await props.fontsManager.loadCustomFonts();\n});\n\nonUnmounted(() => {\n props.fontsManager.cleanupFontLinks();\n core.destroy();\n});\n\n// --- Public API (accessed via template ref from init()) ---\ndefineExpose({\n getContent: () => editor.content.value,\n setContent: (content: TemplateContent) => editor.setContent(content),\n setTheme: (theme: UiTheme) => editor.setUiTheme(theme),\n});\n</script>\n\n<template>\n <div\n class=\"tpl tpl:relative tpl:h-full tpl:overflow-hidden\"\n :class=\"{ 'tpl:dark': editor.state.darkMode }\"\n :data-tpl-theme=\"core.resolvedTheme.value\"\n :style=\"core.themeStyles.value\"\n >\n <!-- Header — absolute, full width, above everything -->\n <header\n class=\"tpl-header tpl:absolute tpl:top-0 tpl:right-0 tpl:left-0 tpl:z-50 tpl:grid tpl:h-14 tpl:grid-cols-[1fr_auto_1fr] tpl:items-center tpl:px-4 tpl:shadow-[var(--tpl-shadow-md)] tpl:border-b tpl:border-[var(--tpl-border)]\"\n style=\"\n background-color: color-mix(in srgb, var(--tpl-bg) 80%, transparent);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n \"\n >\n <!-- Left: Logo -->\n <div class=\"tpl:flex tpl:items-center tpl:gap-2.5\">\n <img\n width=\"24\"\n height=\"24\"\n src=\"https://templatical.com/logo.svg\"\n alt=\"Templatical\"\n />\n <span\n class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n style=\"letter-spacing: -0.01em\"\n >\n {{ core.t.header.title }}\n </span>\n </div>\n\n <!-- Center: viewport + preview + dark mode -->\n <div class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-10\">\n <ViewportToggle\n :viewport=\"editor.state.viewport\"\n @change=\"editor.setViewport\"\n />\n <DarkModeToggle\n :dark-mode=\"editor.state.darkMode\"\n @change=\"editor.setDarkMode\"\n />\n <PreviewToggle\n :preview-mode=\"editor.state.previewMode\"\n @change=\"editor.setPreviewMode\"\n />\n </div>\n\n <!-- Right: empty in OSS mode -->\n <div\n class=\"tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3\"\n ></div>\n </header>\n\n <!-- Left sidebar — absolute, below header -->\n <Sidebar v-show=\"!editor.state.previewMode\" />\n\n <!-- Canvas area — absolute, fills remaining space -->\n <div\n class=\"tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]\"\n style=\"transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)\"\n :class=\"[\n editor.state.previewMode\n ? 'tpl:left-0 tpl:right-0'\n : 'tpl:left-12 tpl:right-[320px]',\n 'tpl:top-14',\n ]\"\n >\n <!-- Restore hidden blocks button -->\n <div class=\"tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0\">\n <Transition name=\"tpl-restore-btn\">\n <button\n v-if=\"core.conditionPreview.hasHiddenBlocks.value\"\n 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 tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)] tpl:border-[var(--tpl-warning)]\"\n style=\"backdrop-filter: blur(8px)\"\n @click=\"core.conditionPreview.reset()\"\n >\n <RotateCcw :size=\"13\" :stroke-width=\"2\" />\n {{ core.t.blockSettings.restoreHiddenBlocks }}\n </button>\n </Transition>\n </div>\n <div class=\"tpl:flex tpl:justify-center tpl:p-8\">\n <Canvas\n :viewport=\"editor.state.viewport\"\n :content=\"editor.content.value\"\n :selected-block-id=\"editor.state.selectedBlockId\"\n :dark-mode=\"editor.state.darkMode\"\n :preview-mode=\"editor.state.previewMode\"\n @select-block=\"editor.selectBlock\"\n />\n </div>\n </div>\n\n <EditorFooter\n :position-class=\"[\n editor.state.previewMode\n ? 'tpl:left-0 tpl:right-0'\n : 'tpl:left-12 tpl:right-[320px]',\n ]\"\n />\n\n <!-- Keyboard reorder announcement region (visually hidden, screen-reader live) -->\n <div\n class=\"tpl-sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n :aria-label=\"core.t.landmarks.reorderAnnouncements\"\n >\n {{ core.keyboardReorder.announcement.value }}\n </div>\n\n <!-- Right sidebar — persisted with v-show -->\n <RightSidebar\n v-show=\"!editor.state.previewMode\"\n :selected-block=\"editor.selectedBlock.value\"\n :settings=\"editor.content.value.settings\"\n @update-block=\"\n (updates) => editor.updateBlock(editor.state.selectedBlockId!, updates)\n \"\n @delete-block=\"\n () => {\n if (editor.state.selectedBlockId) {\n core.blockActions.deleteBlock(editor.state.selectedBlockId);\n }\n }\n \"\n @duplicate-block=\"\n () => {\n if (editor.selectedBlock.value) {\n core.blockActions.duplicateBlock(editor.selectedBlock.value);\n }\n }\n \"\n @update-settings=\"(updates) => editor.updateSettings(updates)\"\n />\n </div>\n</template>\n\n<style scoped>\n.tpl-restore-btn-enter-active {\n transition:\n opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-restore-btn-leave-active {\n transition:\n opacity 150ms ease-in,\n transform 150ms ease-in;\n}\n\n.tpl-restore-btn-enter-from,\n.tpl-restore-btn-leave-to {\n opacity: 0;\n transform: translateY(-8px) scale(0.9);\n}\n\n.tpl-restore-btn-enter-to,\n.tpl-restore-btn-leave-from {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from \"vue\";\nimport type { TemplaticalEditorConfig } from \"./index\";\nimport { useEditor } from \"@templatical/core\";\nimport type { TemplateContent, UiTheme } from \"@templatical/types\";\nimport { useEditorCore } from \"./composables/useEditorCore\";\nimport type { Translations } from \"./i18n\";\nimport type { UseFontsReturn } from \"./composables/useFonts\";\n\nimport { RotateCcw } from \"@lucide/vue\";\nimport Canvas from \"./components/Canvas.vue\";\nimport Sidebar from \"./components/Sidebar.vue\";\nimport RightSidebar from \"./components/RightSidebar.vue\";\nimport ViewportToggle from \"./components/ViewportToggle.vue\";\nimport PreviewToggle from \"./components/PreviewToggle.vue\";\nimport DarkModeToggle from \"./components/DarkModeToggle.vue\";\nimport EditorFooter from \"./components/EditorFooter.vue\";\nimport \"./styles/index.css\";\n\nconst props = defineProps<{\n config: TemplaticalEditorConfig;\n translations: Translations;\n fontsManager: UseFontsReturn;\n}>();\n\n// --- Core editor state ---\nconst editor = useEditor({\n content: props.config.content!,\n templateDefaults: props.config.templateDefaults,\n});\n\n// --- Shared editor core (composables, provides, plugins, keyboard) ---\nconst core = useEditorCore({\n editor,\n config: {\n uiTheme: props.config.uiTheme,\n theme: props.config.theme,\n blockDefaults: props.config.blockDefaults,\n customBlocks: props.config.customBlocks,\n mergeTags: props.config.mergeTags,\n displayConditions: props.config.displayConditions,\n onRequestMedia: props.config.onRequestMedia,\n onSave: props.config.onSave\n ? () =>\n props.config.onSave!(JSON.parse(JSON.stringify(editor.state.content)))\n : undefined,\n },\n translations: props.translations,\n fontsManager: props.fontsManager,\n autoSaveOptions: props.config.onChange\n ? {\n onChange: () =>\n props.config.onChange!(\n JSON.parse(JSON.stringify(editor.state.content)),\n ),\n }\n : null,\n});\n\n// --- Lifecycle ---\nonMounted(async () => {\n await props.fontsManager.loadCustomFonts();\n});\n\nonUnmounted(() => {\n props.fontsManager.cleanupFontLinks();\n core.destroy();\n});\n\n// --- Public API (accessed via template ref from init()) ---\ndefineExpose({\n getContent: () => editor.content.value,\n setContent: (content: TemplateContent) => editor.setContent(content),\n setTheme: (theme: UiTheme) => editor.setUiTheme(theme),\n});\n</script>\n\n<template>\n <div\n class=\"tpl tpl:relative tpl:h-full tpl:overflow-hidden\"\n :class=\"{ 'tpl:dark': editor.state.darkMode }\"\n :data-tpl-theme=\"core.resolvedTheme.value\"\n :style=\"core.themeStyles.value\"\n >\n <!-- Header — absolute, full width, above everything -->\n <header\n class=\"tpl-header tpl:absolute tpl:top-0 tpl:right-0 tpl:left-0 tpl:z-50 tpl:grid tpl:h-14 tpl:grid-cols-[1fr_auto_1fr] tpl:items-center tpl:px-4 tpl:shadow-[var(--tpl-shadow-md)] tpl:border-b tpl:border-[var(--tpl-border)]\"\n style=\"\n background-color: color-mix(in srgb, var(--tpl-bg) 80%, transparent);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n \"\n >\n <!-- Left: Logo -->\n <div class=\"tpl:flex tpl:items-center tpl:gap-2.5\">\n <img\n width=\"24\"\n height=\"24\"\n src=\"https://templatical.com/logo.svg\"\n alt=\"Templatical\"\n />\n <span\n class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n style=\"letter-spacing: -0.01em\"\n >\n {{ core.t.header.title }}\n </span>\n </div>\n\n <!-- Center: viewport + preview + dark mode -->\n <div class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-10\">\n <ViewportToggle\n :viewport=\"editor.state.viewport\"\n @change=\"editor.setViewport\"\n />\n <DarkModeToggle\n :dark-mode=\"editor.state.darkMode\"\n @change=\"editor.setDarkMode\"\n />\n <PreviewToggle\n :preview-mode=\"editor.state.previewMode\"\n @change=\"editor.setPreviewMode\"\n />\n </div>\n\n <!-- Right: empty in OSS mode -->\n <div\n class=\"tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3\"\n ></div>\n </header>\n\n <!-- Left sidebar — absolute, below header -->\n <Sidebar v-show=\"!editor.state.previewMode\" />\n\n <!-- Canvas area — absolute, fills remaining space -->\n <div\n class=\"tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]\"\n style=\"transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)\"\n :class=\"[\n editor.state.previewMode\n ? 'tpl:left-0 tpl:right-0'\n : 'tpl:left-12 tpl:right-[320px]',\n 'tpl:top-14',\n ]\"\n >\n <!-- Restore hidden blocks button -->\n <div class=\"tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0\">\n <Transition name=\"tpl-restore-btn\">\n <button\n v-if=\"core.conditionPreview.hasHiddenBlocks.value\"\n 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 tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)] tpl:border-[var(--tpl-warning)]\"\n style=\"backdrop-filter: blur(8px)\"\n @click=\"core.conditionPreview.reset()\"\n >\n <RotateCcw :size=\"13\" :stroke-width=\"2\" />\n {{ core.t.blockSettings.restoreHiddenBlocks }}\n </button>\n </Transition>\n </div>\n <div class=\"tpl:flex tpl:justify-center tpl:p-8\">\n <Canvas\n :viewport=\"editor.state.viewport\"\n :content=\"editor.content.value\"\n :selected-block-id=\"editor.state.selectedBlockId\"\n :dark-mode=\"editor.state.darkMode\"\n :preview-mode=\"editor.state.previewMode\"\n @select-block=\"editor.selectBlock\"\n />\n </div>\n </div>\n\n <EditorFooter\n :position-class=\"[\n editor.state.previewMode\n ? 'tpl:left-0 tpl:right-0'\n : 'tpl:left-12 tpl:right-[320px]',\n ]\"\n />\n\n <!-- Keyboard reorder announcement region (visually hidden, screen-reader live) -->\n <div\n class=\"tpl-sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n :aria-label=\"core.t.landmarks.reorderAnnouncements\"\n >\n {{ core.keyboardReorder.announcement.value }}\n </div>\n\n <!-- Right sidebar — persisted with v-show -->\n <RightSidebar\n v-show=\"!editor.state.previewMode\"\n :selected-block=\"editor.selectedBlock.value\"\n :settings=\"editor.content.value.settings\"\n @update-block=\"\n (updates) => editor.updateBlock(editor.state.selectedBlockId!, updates)\n \"\n @delete-block=\"\n () => {\n if (editor.state.selectedBlockId) {\n core.blockActions.deleteBlock(editor.state.selectedBlockId);\n }\n }\n \"\n @duplicate-block=\"\n () => {\n if (editor.selectedBlock.value) {\n core.blockActions.duplicateBlock(editor.selectedBlock.value);\n }\n }\n \"\n @update-settings=\"(updates) => editor.updateSettings(updates)\"\n />\n </div>\n</template>\n\n<style scoped>\n.tpl-restore-btn-enter-active {\n transition:\n opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-restore-btn-leave-active {\n transition:\n opacity 150ms ease-in,\n transform 150ms ease-in;\n}\n\n.tpl-restore-btn-enter-from,\n.tpl-restore-btn-leave-to {\n opacity: 0;\n transform: translateY(-8px) scale(0.9);\n}\n\n.tpl-restore-btn-enter-to,\n.tpl-restore-btn-leave-from {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n</style>\n","import type en from \"./locales/en\";\n\nexport type Translations = typeof en;\nexport type TranslationKey = keyof Translations;\n\nconst supportedLocales = [\"en\", \"de\"];\n\n/**\n * Get the base language code from a locale string.\n * e.g., 'en-GB' -> 'en', 'de-DE' -> 'de'\n */\nexport function getBaseLocale(locale: string): string {\n return locale.split(\"-\")[0].toLowerCase();\n}\n\n/**\n * Load translations for a given locale.\n * Falls back to English if the locale is not supported.\n * Only loads the required locale file.\n */\nexport async function loadTranslations(locale: string): Promise<Translations> {\n const baseLocale = getBaseLocale(locale);\n const targetLocale = supportedLocales.includes(baseLocale)\n ? baseLocale\n : \"en\";\n\n const module = await import(`./locales/${targetLocale}.ts`);\n return module.default as Translations;\n}\n\n/**\n * Check if a locale is supported.\n */\nexport function isLocaleSupported(locale: string): boolean {\n return (\n supportedLocales.includes(locale) ||\n supportedLocales.includes(getBaseLocale(locale))\n );\n}\n\n/**\n * Get list of supported locales.\n */\nexport function getSupportedLocales(): string[] {\n return [...supportedLocales];\n}\n","import { createApp, h, ref, type App, type Ref } from \"vue\";\nimport { INIT_TIMEOUT_MS } from \"./constants/timeouts\";\nimport type {\n BlockDefaults,\n CustomBlockDefinition,\n DisplayConditionsConfig,\n FontsConfig,\n MediaResult,\n MergeTagsConfig,\n SaveResult,\n Template,\n TemplateContent,\n TemplateDefaults,\n ThemeOverrides,\n UiTheme,\n} from \"@templatical/types\";\nimport type { MediaRequestContext } from \"@templatical/media-library\";\n\nimport Editor from \"./Editor.vue\";\nimport { loadTranslations } from \"./i18n\";\nimport { useFonts } from \"./composables\";\n\n// ---------------------------------------------------------------------------\n// OSS config + return types\n// ---------------------------------------------------------------------------\n\nexport interface TemplaticalEditorConfig {\n container: string | HTMLElement;\n content?: TemplateContent;\n\n onChange?: (content: TemplateContent) => void;\n onSave?: (content: TemplateContent) => void;\n onError?: (error: Error) => void;\n\n onRequestMedia?: OnRequestMedia;\n\n mergeTags?: MergeTagsConfig;\n displayConditions?: DisplayConditionsConfig;\n customBlocks?: CustomBlockDefinition[];\n fonts?: FontsConfig;\n\n blockDefaults?: BlockDefaults;\n templateDefaults?: TemplateDefaults;\n\n theme?: ThemeOverrides;\n uiTheme?: UiTheme;\n locale?: string;\n}\n\n/** Function type for media browser requests, used by both OSS and Cloud editors. */\nexport type OnRequestMedia = (\n context?: MediaRequestContext,\n) => Promise<MediaResult | null>;\n\nexport interface TemplaticalEditor {\n getContent(): TemplateContent;\n setContent(content: TemplateContent): void;\n setTheme(theme: UiTheme): void;\n unmount(): void;\n toMjml?(): string;\n}\n\nexport interface TemplaticalCloudEditor extends TemplaticalEditor {\n create(content?: TemplateContent): Promise<Template>;\n load(templateId: string): Promise<Template>;\n save(): Promise<SaveResult>;\n}\n\n// ---------------------------------------------------------------------------\n// OSS init — sync\n// ---------------------------------------------------------------------------\n\nlet appInstance: App | null = null;\nconst editorRef: Ref<InstanceType<typeof Editor> | null> = ref(null);\n\nexport async function init(\n config: TemplaticalEditorConfig,\n): Promise<TemplaticalEditor> {\n const container =\n typeof config.container === \"string\"\n ? document.querySelector(config.container)\n : config.container;\n\n if (!container) {\n throw new Error(\n `[Templatical] Container element not found: ${config.container}`,\n );\n }\n\n if (appInstance) {\n unmount();\n }\n\n // Load translations before mounting so child components can use useI18n synchronously\n const translations = await loadTranslations(config.locale ?? \"en\");\n\n // Create fonts manager to pass to Editor\n const fontsManager = useFonts(config.fonts);\n\n appInstance = createApp({\n setup() {\n return () =>\n h(Editor, {\n config,\n translations,\n fontsManager,\n ref: editorRef,\n });\n },\n });\n\n appInstance.mount(container);\n\n const instance: TemplaticalEditor = {\n getContent() {\n if (editorRef.value) {\n return JSON.parse(JSON.stringify(editorRef.value.getContent()));\n }\n return JSON.parse(JSON.stringify(config.content));\n },\n setContent(content: TemplateContent) {\n if (editorRef.value) {\n editorRef.value.setContent(content);\n }\n config.content = content;\n },\n setTheme(theme: UiTheme) {\n if (editorRef.value) {\n editorRef.value.setTheme(theme);\n }\n },\n unmount,\n };\n\n // Try to detect @templatical/renderer for export methods\n attachRenderer(instance);\n\n return instance;\n}\n\n// ---------------------------------------------------------------------------\n// Cloud init — async, flat config, tree-shaken when not called\n// ---------------------------------------------------------------------------\n\nlet cloudAppInstance: App | null = null;\n\nconst cloudEditorRef: Ref<InstanceType<\n typeof import(\"./cloud/CloudEditor.vue\").default\n> | null> = ref(null);\n\nexport async function initCloud(\n config: import(\"./cloud/CloudEditor.vue\").TemplaticalCloudEditorConfig,\n): Promise<TemplaticalCloudEditor> {\n const container =\n typeof config.container === \"string\"\n ? document.querySelector(config.container)\n : config.container;\n\n if (!container) {\n throw new Error(\n `[Templatical] Container element not found: ${config.container}`,\n );\n }\n\n if (cloudAppInstance) {\n unmountCloud();\n }\n\n // Dynamic import — CloudEditor.vue is tree-shaken from the OSS bundle\n const { default: CloudEditor } = await import(\"./cloud/CloudEditor.vue\");\n\n // Load translations before mounting so child components can use useI18n synchronously\n const translations = await loadTranslations(config.locale ?? \"en\");\n\n // Create fonts manager to pass to CloudEditor\n const fontsManager = useFonts(config.fonts);\n\n // Promise that resolves when CloudEditor emits 'ready'\n const readyPromise = new Promise<void>((resolve, reject) => {\n const timeout = setTimeout(() => {\n reject(new Error(\"[Templatical] Cloud editor initialization timed out\"));\n }, INIT_TIMEOUT_MS);\n\n cloudAppInstance = createApp({\n setup() {\n return () =>\n h(CloudEditor, {\n config,\n translations,\n fontsManager,\n ref: cloudEditorRef,\n onReady: () => {\n clearTimeout(timeout);\n resolve();\n },\n });\n },\n });\n\n cloudAppInstance.mount(container);\n });\n\n await readyPromise;\n\n const instance: TemplaticalCloudEditor = {\n getContent() {\n if (cloudEditorRef.value) {\n return JSON.parse(JSON.stringify(cloudEditorRef.value.getContent()));\n }\n return JSON.parse(JSON.stringify(config.content));\n },\n setContent(content: TemplateContent) {\n if (cloudEditorRef.value) {\n cloudEditorRef.value.setContent(content);\n }\n },\n setTheme(theme: UiTheme) {\n if (cloudEditorRef.value) {\n cloudEditorRef.value.setTheme(theme);\n }\n },\n unmount: unmountCloud,\n create(content?: TemplateContent) {\n if (!cloudEditorRef.value) {\n return Promise.reject(\n new Error(\"[Templatical] Cloud editor not ready\"),\n );\n }\n return cloudEditorRef.value.create(content);\n },\n load(templateId: string) {\n if (!cloudEditorRef.value) {\n return Promise.reject(\n new Error(\"[Templatical] Cloud editor not ready\"),\n );\n }\n return cloudEditorRef.value.load(templateId);\n },\n save() {\n if (!cloudEditorRef.value) {\n return Promise.reject(\n new Error(\"[Templatical] Cloud editor not ready\"),\n );\n }\n return cloudEditorRef.value.save();\n },\n };\n\n // Try to detect @templatical/renderer for export methods\n attachRenderer(instance);\n\n return instance;\n}\n\n// ---------------------------------------------------------------------------\n// Unmount helpers\n// ---------------------------------------------------------------------------\n\nexport function unmount(): void {\n if (appInstance) {\n appInstance.unmount();\n appInstance = null;\n editorRef.value = null;\n }\n}\n\nfunction unmountCloud(): void {\n if (cloudAppInstance) {\n cloudAppInstance.unmount();\n cloudAppInstance = null;\n cloudEditorRef.value = null;\n }\n}\n\n// ---------------------------------------------------------------------------\n// Renderer attachment (shared by OSS + Cloud)\n// ---------------------------------------------------------------------------\n\nfunction attachRenderer(instance: TemplaticalEditor): void {\n import(\"@templatical/renderer\")\n .then((renderer) => {\n instance.toMjml = () => renderer.renderToMjml(instance.getContent());\n })\n .catch(() => {\n // @templatical/renderer not installed — export methods not available\n });\n}\n\n// ---------------------------------------------------------------------------\n// Re-exports\n// ---------------------------------------------------------------------------\n\nexport type { TemplaticalCloudEditorConfig } from \"./cloud/CloudEditor.vue\";\nexport type {\n BlockDefaults,\n TemplateContent,\n TemplateDefaults,\n ThemeOverrides,\n UiTheme,\n MergeTagsConfig,\n DisplayConditionsConfig,\n CustomBlockDefinition,\n ViewportSize,\n CustomFont,\n FontsConfig,\n SaveResult,\n Template,\n} from \"@templatical/types\";\n\nexport type { UseFontsReturn, FontOption } from \"./composables/useFonts\";\nexport { useFonts } from \"./composables/useFonts\";\nexport type { EditorCapabilities } from \"./types/editor-capabilities\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAmBA,IAAM,IAAQ,GAOR,IAAS,EAAU;GACvB,SAAS,EAAM,OAAO;GACtB,kBAAkB,EAAM,OAAO;GAChC,CAAC,EAGI,IAAO,EAAc;GACzB;GACA,QAAQ;IACN,SAAS,EAAM,OAAO;IACtB,OAAO,EAAM,OAAO;IACpB,eAAe,EAAM,OAAO;IAC5B,cAAc,EAAM,OAAO;IAC3B,WAAW,EAAM,OAAO;IACxB,mBAAmB,EAAM,OAAO;IAChC,gBAAgB,EAAM,OAAO;IAC7B,QAAQ,EAAM,OAAO,eAEf,EAAM,OAAO,OAAQ,KAAK,MAAM,KAAK,UAAU,EAAO,MAAM,QAAQ,CAAC,CAAA,GACvE,KAAA;IACL;GACD,cAAc,EAAM;GACpB,cAAc,EAAM;GACpB,iBAAiB,EAAM,OAAO,WAC1B,EACE,gBACE,EAAM,OAAO,SACX,KAAK,MAAM,KAAK,UAAU,EAAO,MAAM,QAAQ,CAAC,CACjD,EACL,GACA;GACL,CAAC;SAGF,EAAU,YAAY;AACpB,SAAM,EAAM,aAAa,iBAAiB;IAC1C,EAEF,QAAkB;AAEhB,GADA,EAAM,aAAa,kBAAkB,EACrC,EAAK,SAAS;IACd,EAGF,EAAa;GACX,kBAAkB,EAAO,QAAQ;GACjC,aAAa,MAA6B,EAAO,WAAW,EAAQ;GACpE,WAAW,MAAmB,EAAO,WAAW,EAAM;GACvD,CAAC,kBAIA,EAwIM,OAAA;GAvIJ,OAAK,EAAA,CAAC,mDAAiD,EAAA,YACjC,EAAA,EAAM,CAAC,MAAM,UAAQ,CAAA,CAAA;GAC1C,kBAAgB,EAAA,EAAI,CAAC,cAAc;GACnC,OAAK,EAAE,EAAA,EAAI,CAAC,YAAY,MAAK;;GAG9B,EA4CS,UA5CT,GA4CS;IAnCP,EAaM,OAbN,GAaM,CAAA,AAAA,EAAA,OAZJ,EAKE,OAAA;KAJA,OAAM;KACN,QAAO;KACP,KAAI;KACJ,KAAI;kBAEN,EAKO,QALP,GAKO,EADF,EAAA,EAAI,CAAC,EAAE,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA;IAK1B,EAaM,OAbN,GAaM;KAZJ,EAGE,GAAA;MAFC,UAAU,EAAA,EAAM,CAAC,MAAM;MACvB,UAAQ,EAAA,EAAM,CAAC;;KAElB,EAGE,GAAA;MAFC,aAAW,EAAA,EAAM,CAAC,MAAM;MACxB,UAAQ,EAAA,EAAM,CAAC;;KAElB,EAGE,GAAA;MAFC,gBAAc,EAAA,EAAM,CAAC,MAAM;MAC3B,UAAQ,EAAA,EAAM,CAAC;;;aAKpB,EAEO,OAAA,EADL,OAAM,yEAAuE,EAAA,MAAA,GAAA;;KAKjF,EAA8C,GAAA,MAAA,MAAA,IAAA,EAAA,CAAA,CAAA,GAAA,CAA5B,EAAA,EAAM,CAAC,MAAM,YAAW,CAAA,CAAA;GAG1C,EAkCM,OAAA;IAjCJ,OAAK,EAAA,CAAC,sFAAoF,CAExE,EAAA,EAAM,CAAC,MAAM,cAAA,2BAAA,iCAAA,aAAA,CAAA,CAAA;IAD/B,OAAA,EAAA,YAAA,+CAA+D;OAS/D,EAYM,OAZN,GAYM,CAXJ,EAUa,GAAA,EAVD,MAAK,mBAAiB,EAAA;qBASvB,CAPD,EAAA,EAAI,CAAC,iBAAiB,gBAAgB,SAAA,GAAA,EAD9C,EAQS,UAAA;;KANP,OAAM;KACN,OAAA,EAAA,mBAAA,aAAkC;KACjC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,EAAI,CAAC,iBAAiB,OAAK;QAEnC,EAA0C,EAAA,GAAA,EAAA;KAA9B,MAAM;KAAK,gBAAc;UAAK,MAC1C,EAAG,EAAA,EAAI,CAAC,EAAE,cAAc,oBAAmB,EAAA,EAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;;SAIjD,EASM,OATN,GASM,CARJ,EAOE,GAAA;IANC,UAAU,EAAA,EAAM,CAAC,MAAM;IACvB,SAAS,EAAA,EAAM,CAAC,QAAQ;IACxB,qBAAmB,EAAA,EAAM,CAAC,MAAM;IAChC,aAAW,EAAA,EAAM,CAAC,MAAM;IACxB,gBAAc,EAAA,EAAM,CAAC,MAAM;IAC3B,eAAc,EAAA,EAAM,CAAC;;;;;;;;;GAK5B,EAME,GAAA,EALC,kBAAc,CAAY,EAAA,EAAM,CAAC,MAAM,cAAA,2BAAA,gCAAA,EAAA,EAAA,MAAA,GAAA,CAAA,iBAAA,CAAA;GAQ1C,EAQM,OAAA;IAPJ,OAAM;IACN,MAAK;IACL,aAAU;IACV,eAAY;IACX,cAAY,EAAA,EAAI,CAAC,EAAE,UAAU;QAE3B,EAAA,EAAI,CAAC,gBAAgB,aAAa,MAAK,EAAA,GAAA,EAAA;KAI5C,EAsBE,GAAA;IApBC,kBAAgB,EAAA,EAAM,CAAC,cAAc;IACrC,UAAU,EAAA,EAAM,CAAC,QAAQ,MAAM;IAC/B,eAAY,AAAA,EAAA,QAAY,MAAY,EAAA,EAAM,CAAC,YAAY,EAAA,EAAM,CAAC,MAAM,iBAAkB,EAAO;IAG7F,eAAY,AAAA,EAAA,aAAA;KAAiC,EAAA,EAAM,CAAC,MAAM,mBAA+B,EAAA,EAAI,CAAC,aAAa,YAAY,EAAA,EAAM,CAAC,MAAM,gBAAe;;IAOnJ,kBAAe,AAAA,EAAA,aAAA;KAAiC,EAAA,EAAM,CAAC,cAAc,SAAqB,EAAA,EAAI,CAAC,aAAa,eAAe,EAAA,EAAM,CAAC,cAAc,MAAK;;IAOrJ,kBAAe,AAAA,EAAA,QAAG,MAAY,EAAA,EAAM,CAAC,eAAe,EAAO;sDApBnD,EAAA,EAAM,CAAC,MAAM,YAAW,CAAA,CAAA;;;yCE3LjC,IAAmB,CAAC,MAAM,KAAK;AAMrC,SAAgB,EAAc,GAAwB;AACpD,QAAO,EAAO,MAAM,IAAI,CAAC,GAAG,aAAa;;AAQ3C,eAAsB,EAAiB,GAAuC;CAC5E,IAAM,IAAa,EAAc,EAAO,EAClC,IAAe,EAAiB,SAAS,EAAW,GACtD,IACA;AAGJ,SADe,MAAM,EAAA,uBAAA,OAAA;EAAA,yBAAA,OAAA;EAAA,yBAAA,OAAA;EAAA,CAAA,EAAA,aAAA,EAAA,MAAA,EAAiC,EACxC;;;;AC6ChB,IAAI,IAA0B,MACxB,IAAqD,EAAI,KAAK;AAEpE,eAAsB,EACpB,GAC4B;CAC5B,IAAM,IACJ,OAAO,EAAO,aAAc,WACxB,SAAS,cAAc,EAAO,UAAU,GACxC,EAAO;AAEb,KAAI,CAAC,EACH,OAAU,MACR,8CAA8C,EAAO,YACtD;AAGH,CAAI,KACF,GAAS;CAIX,IAAM,IAAe,MAAM,EAAiB,EAAO,UAAU,KAAK,EAG5D,IAAe,EAAS,EAAO,MAAM;AAc3C,CAZA,IAAc,EAAU,EACtB,QAAQ;AACN,eACE,EAAE,GAAQ;GACR;GACA;GACA;GACA,KAAK;GACN,CAAC;IAEP,CAAC,EAEF,EAAY,MAAM,EAAU;CAE5B,IAAM,IAA8B;EAClC,aAAa;AAIX,UAFS,KAAK,MAAM,KAAK,UADrB,EAAU,QACqB,EAAU,MAAM,YAAY,GAE9B,EAAO,QAH1B,CACmD;;EAInE,WAAW,GAA0B;AAInC,GAHI,EAAU,SACZ,EAAU,MAAM,WAAW,EAAQ,EAErC,EAAO,UAAU;;EAEnB,SAAS,GAAgB;AACvB,GAAI,EAAU,SACZ,EAAU,MAAM,SAAS,EAAM;;EAGnC;EACD;AAKD,QAFA,EAAe,EAAS,EAEjB;;AAOT,IAAI,IAA+B,MAE7B,IAEM,EAAI,KAAK;AAErB,eAAsB,EACpB,GACiC;CACjC,IAAM,IACJ,OAAO,EAAO,aAAc,WACxB,SAAS,cAAc,EAAO,UAAU,GACxC,EAAO;AAEb,KAAI,CAAC,EACH,OAAU,MACR,8CAA8C,EAAO,YACtD;AAGH,CAAI,KACF,GAAc;CAIhB,IAAM,EAAE,SAAS,MAAgB,MAAM,OAAO,qCAGxC,IAAe,MAAM,EAAiB,EAAO,UAAU,KAAK,EAG5D,IAAe,EAAS,EAAO,MAAM;AA2B3C,OAxBqB,IAAI,SAAe,GAAS,MAAW;EAC1D,IAAM,IAAU,iBAAiB;AAC/B,KAAO,gBAAI,MAAM,sDAAsD,CAAC;KACvE,EAAgB;AAkBnB,EAhBA,IAAmB,EAAU,EAC3B,QAAQ;AACN,gBACE,EAAE,GAAa;IACb;IACA;IACA;IACA,KAAK;IACL,eAAe;AAEb,KADA,aAAa,EAAQ,EACrB,GAAS;;IAEZ,CAAC;KAEP,CAAC,EAEF,EAAiB,MAAM,EAAU;GACjC;CAIF,IAAM,IAAmC;EACvC,aAAa;AAIX,UAFS,KAAK,MAAM,KAAK,UADrB,EAAe,QACgB,EAAe,MAAM,YAAY,GAEnC,EAAO,QAHrB,CACmD;;EAIxE,WAAW,GAA0B;AACnC,GAAI,EAAe,SACjB,EAAe,MAAM,WAAW,EAAQ;;EAG5C,SAAS,GAAgB;AACvB,GAAI,EAAe,SACjB,EAAe,MAAM,SAAS,EAAM;;EAGxC,SAAS;EACT,OAAO,GAA2B;AAMhC,UALK,EAAe,QAKb,EAAe,MAAM,OAAO,EAAQ,GAJlC,QAAQ,OACb,gBAAI,MAAM,uCAAuC,CAClD;;EAIL,KAAK,GAAoB;AAMvB,UALK,EAAe,QAKb,EAAe,MAAM,KAAK,EAAW,GAJnC,QAAQ,OACb,gBAAI,MAAM,uCAAuC,CAClD;;EAIL,OAAO;AAML,UALK,EAAe,QAKb,EAAe,MAAM,MAAM,GAJzB,QAAQ,OACb,gBAAI,MAAM,uCAAuC,CAClD;;EAIN;AAKD,QAFA,EAAe,EAAS,EAEjB;;AAOT,SAAgB,IAAgB;AAC9B,CAAI,MACF,EAAY,SAAS,EACrB,IAAc,MACd,EAAU,QAAQ;;AAItB,SAAS,IAAqB;AAC5B,CAAI,MACF,EAAiB,SAAS,EAC1B,IAAmB,MACnB,EAAe,QAAQ;;AAQ3B,SAAS,EAAe,GAAmC;AACzD,QAAO,8BACJ,MAAM,MAAa;AAClB,IAAS,eAAe,EAAS,aAAa,EAAS,YAAY,CAAC;GACpE,CACD,YAAY,GAEX"}
@@ -32,6 +32,7 @@ var e = {
32
32
  collabWarning: "Rückgängig machen kann die Änderungen anderer Mitarbeiter beeinflussen"
33
33
  },
34
34
  viewport: {
35
+ label: "Ansichtsgröße",
35
36
  desktop: "Desktop",
36
37
  tablet: "Tablet",
37
38
  mobile: "Mobil"
@@ -98,16 +99,23 @@ var e = {
98
99
  textColor: "Textfarbe",
99
100
  highlightColor: "Hervorhebungsfarbe",
100
101
  lineHeight: "Zeilenhöhe",
101
- letterSpacing: "Zeichenabstand"
102
+ letterSpacing: "Zeichenabstand",
103
+ emojiItemLabel: "Emoji {emoji} einfügen",
104
+ closeEmojiPicker: "Emoji-Auswahl schließen"
102
105
  },
103
106
  blockActions: {
104
- drag: "Zum Sortieren ziehen",
107
+ drag: "Zum Sortieren ziehen oder Leertaste drücken, um mit der Tastatur zu verschieben",
108
+ dragLifted: "{block} wird verschoben. Pfeiltasten zum Positionieren, Leer- oder Eingabetaste zum Ablegen, Esc zum Abbrechen.",
105
109
  duplicate: "Block duplizieren",
106
110
  delete: "Block löschen",
107
111
  hiddenOnViewport: "Ausgeblendet auf {viewport}",
108
112
  saveAsModule: "Als Modul speichern",
109
113
  conditionToggle: "Anzeigebedingung umschalten",
110
- comments: "Kommentare ({count})"
114
+ comments: "Kommentare ({count})",
115
+ lifted: "{block} angehoben. Position {position} von {total}.",
116
+ moved: "{block} auf Position {position} von {total} verschoben.",
117
+ dropped: "{block} auf Position {position} von {total} abgelegt.",
118
+ cancelled: "Verschieben abgebrochen. {block} auf Position {position} zurückgesetzt."
111
119
  },
112
120
  section: {
113
121
  dropHere: "Blöcke hierher ziehen",
@@ -627,7 +635,15 @@ var e = {
627
635
  },
628
636
  sidebarNav: {
629
637
  browseModules: "Gespeicherte Module durchsuchen",
630
- expandSidebar: "Block-Seitenleiste erweitern"
638
+ expandSidebar: "Block-Seitenleiste erweitern",
639
+ palette: "Blockpalette",
640
+ insertBlock: "{block}-Block einfügen"
641
+ },
642
+ landmarks: {
643
+ canvas: "E-Mail-Leinwand",
644
+ blockToolbar: "Blockeigenschaften",
645
+ rightSidebar: "Blockeigenschaften und Vorlageneinstellungen",
646
+ reorderAnnouncements: "Block-Neuanordnungsmeldungen"
631
647
  },
632
648
  modules: {
633
649
  title: "Gespeicherte Module",
@@ -1,4 +1,4 @@
1
- import { F as e } from "./useEditorCore-Cc4RCwWq.js";
1
+ import { L as e } from "./useEditorCore-DUGD6pq_.js";
2
2
  import { $ as t, $t as n, A as r, At as i, B as a, Bt as o, C as ee, Ct as te, D as ne, Dt as re, E as ie, Et as ae, F as oe, Ft as se, G as ce, Gt as le, H as ue, Ht as de, I as fe, It as pe, J as me, Jt as he, K as ge, Kt as _e, L as ve, Lt as ye, M as s, Mt as c, N as l, Nt as u, O as d, Ot as f, P as p, Pt as m, Q as h, Qt as g, R as _, Rt as v, S as y, St as b, T as x, Tt as S, U as C, Ut as w, V as T, Vt as E, W as D, Wt as O, X as k, Xt as A, Y as j, Yt as M, Z as N, Zt as P, _ as be, _t as F, a as xe, an as I, at as Se, b as Ce, bt as we, c as Te, cn as Ee, ct as De, d as Oe, dn as ke, dt as Ae, en as je, et as Me, f as L, fn as Ne, ft as Pe, g as Fe, gt as Ie, h as Le, ht as Re, i as ze, in as Be, it as Ve, j as He, jt as Ue, k as We, kt as Ge, l as R, ln as Ke, lt as qe, m as Je, mn as Ye, mt as Xe, n as z, nn as Ze, nt as Qe, o as $e, on as et, ot as tt, p as nt, pn as rt, pt as it, q as at, qt as ot, r as st, rn as ct, rt as lt, s as ut, sn as dt, st as ft, t as pt, tn as mt, tt as ht, u as gt, un as _t, ut as vt, v as yt, vt as bt, w as xt, wt as St, x as Ct, xt as wt, y as B, yt as Tt, z as Et, zt as Dt } from "./dist-C_ymrGFi.js";
3
3
  import { customRef as Ot, defineComponent as V, getCurrentInstance as kt, h as H, markRaw as U, nextTick as At, onBeforeUnmount as W, onMounted as jt, provide as G, reactive as Mt, ref as K, render as q, shallowRef as Nt, toRaw as Pt, unref as Ft, watchEffect as It } from "vue";
4
4
  //#region ../../node_modules/.bun/@tiptap+vue-3@3.22.1+bbf5de022be137e7/node_modules/@tiptap/vue-3/dist/index.js
@@ -32,6 +32,7 @@ var e = {
32
32
  collabWarning: "Undo may affect collaborators' recent changes"
33
33
  },
34
34
  viewport: {
35
+ label: "Viewport",
35
36
  desktop: "Desktop",
36
37
  tablet: "Tablet",
37
38
  mobile: "Mobile"
@@ -98,16 +99,23 @@ var e = {
98
99
  textColor: "Text Color",
99
100
  highlightColor: "Highlight Color",
100
101
  lineHeight: "Line Height",
101
- letterSpacing: "Letter Spacing"
102
+ letterSpacing: "Letter Spacing",
103
+ emojiItemLabel: "Insert emoji {emoji}",
104
+ closeEmojiPicker: "Close emoji picker"
102
105
  },
103
106
  blockActions: {
104
- drag: "Drag to reorder",
107
+ drag: "Drag to reorder, or press Space to move with keyboard",
108
+ dragLifted: "Moving {block}. Use up and down arrow keys to reposition, Space or Enter to drop, Escape to cancel.",
105
109
  duplicate: "Duplicate block",
106
110
  delete: "Delete block",
107
111
  hiddenOnViewport: "Hidden on {viewport}",
108
112
  saveAsModule: "Save as Module",
109
113
  conditionToggle: "Toggle display condition",
110
- comments: "Comments ({count})"
114
+ comments: "Comments ({count})",
115
+ lifted: "{block} lifted. Position {position} of {total}.",
116
+ moved: "{block} moved to position {position} of {total}.",
117
+ dropped: "{block} dropped at position {position} of {total}.",
118
+ cancelled: "Move cancelled. {block} returned to position {position}."
111
119
  },
112
120
  section: {
113
121
  dropHere: "Drop blocks here",
@@ -627,7 +635,15 @@ var e = {
627
635
  },
628
636
  sidebarNav: {
629
637
  browseModules: "Browse saved modules",
630
- expandSidebar: "Expand block sidebar"
638
+ expandSidebar: "Expand block sidebar",
639
+ palette: "Block palette",
640
+ insertBlock: "Insert {block} block"
641
+ },
642
+ landmarks: {
643
+ canvas: "Email canvas",
644
+ blockToolbar: "Block properties",
645
+ rightSidebar: "Block properties and template settings",
646
+ reorderAnnouncements: "Block reorder announcements"
631
647
  },
632
648
  modules: {
633
649
  title: "Saved Modules",
@@ -1,7 +1,7 @@
1
- import { t as e } from "./useI18n-DUirdXEX.js";
2
- import { t } from "./useMergeTag-DVnlvPYJ.js";
1
+ import { t as e } from "./useI18n-D6m7ZUgY.js";
2
+ import { t } from "./useMergeTag-BZ3X0bNr.js";
3
3
  import { Wt as n, i as r, o as i, p as a, u as o } from "./dist-C_ymrGFi.js";
4
- import { n as s, t as c } from "./dist-DmpMJbmZ.js";
4
+ import { n as s, t as c } from "./dist-Ci5lFuUy.js";
5
5
  import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as _, openBlock as v, ref as y, toDisplayString as b, unref as x, vModelText as S, withCtx as C, withDirectives as w, withKeys as T, withModifiers as E } from "vue";
6
6
  import { SYNTAX_PRESETS as D, getLogicMergeTagKeyword as O, getMergeTagLabel as k, isLogicMergeTagValue as A } from "@templatical/types";
7
7
  //#region src/extensions/FontSize.ts
@@ -1,10 +1,10 @@
1
1
  import { inject as e } from "vue";
2
2
  //#region src/keys.ts
3
- var t = Symbol("translations"), n = Symbol("editor"), r = Symbol("history"), i = Symbol("blockActions"), a = Symbol("conditionPreview"), o = Symbol("fontsManager"), s = Symbol("themeStyles"), c = Symbol("tplUiTheme"), l = Symbol("blockDefaults"), u = Symbol("blockRegistry"), d = Symbol("customBlockDefinitions"), f = Symbol("mergeTags"), p = Symbol("mergeTagSyntax"), m = Symbol("onRequestMergeTag"), h = Symbol("onRequestMedia"), g = Symbol("displayConditions"), _ = Symbol("allowCustomConditions"), v = Symbol("capabilities"), y = Symbol("authManager"), b = Symbol("aiConfig"), x = Symbol("comments"), S = Symbol("savedModulesHeadless"), C = Symbol("scoring");
4
- function w(t, n) {
3
+ var t = Symbol("translations"), n = Symbol("editor"), r = Symbol("history"), i = Symbol("blockActions"), a = Symbol("conditionPreview"), o = Symbol("fontsManager"), s = Symbol("themeStyles"), c = Symbol("tplUiTheme"), l = Symbol("blockDefaults"), u = Symbol("blockRegistry"), d = Symbol("customBlockDefinitions"), f = Symbol("mergeTags"), p = Symbol("mergeTagSyntax"), m = Symbol("onRequestMergeTag"), h = Symbol("onRequestMedia"), g = Symbol("displayConditions"), _ = Symbol("allowCustomConditions"), v = Symbol("capabilities"), y = Symbol("keyboardReorder"), b = Symbol("authManager"), x = Symbol("aiConfig"), S = Symbol("comments"), C = Symbol("savedModulesHeadless"), w = Symbol("scoring");
4
+ function T(t, n) {
5
5
  let r = e(t, null);
6
6
  if (r == null) throw Error(`${n} requires a provider for ${t.description ?? "unknown key"}. Ensure it is a descendant of Editor or CloudEditor.`);
7
7
  return r;
8
8
  }
9
9
  //#endregion
10
- export { c as C, t as S, h as _, l as a, C as b, x as c, g as d, n as f, p as g, f as h, i, a as l, r as m, _ as n, u as o, o as p, y as r, v as s, b as t, d as u, m as v, w, s as x, S as y };
10
+ export { t as C, s as S, T, p as _, l as a, C as b, S as c, g as d, n as f, f as g, y as h, i, a as l, r as m, _ as n, u as o, o as p, b as r, v as s, x as t, d as u, h as v, c as w, w as x, m as y };
@@ -0,0 +1,30 @@
1
+ //#region src/utils/readableTextColor.ts
2
+ function e(e, i = {}) {
3
+ let a = i.light ?? "#ffffff", o = i.dark ?? "#1f1f1f", s = t(e);
4
+ if (!s) return a;
5
+ let c = n(s), l = t(a), u = t(o), d = l ? n(l) : 1, f = u ? n(u) : 0;
6
+ return r(c, d) >= r(c, f) ? a : o;
7
+ }
8
+ function t(e) {
9
+ let t = e.trim().match(/^#?([\da-f]{3}|[\da-f]{6})$/i);
10
+ if (!t) return null;
11
+ let n = t[1];
12
+ return n.length === 3 && (n = n.split("").map((e) => e + e).join("")), [
13
+ parseInt(n.slice(0, 2), 16),
14
+ parseInt(n.slice(2, 4), 16),
15
+ parseInt(n.slice(4, 6), 16)
16
+ ];
17
+ }
18
+ function n([e, t, n]) {
19
+ let r = (e) => {
20
+ let t = e / 255;
21
+ return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
22
+ };
23
+ return .2126 * r(e) + .7152 * r(t) + .0722 * r(n);
24
+ }
25
+ function r(e, t) {
26
+ let [n, r] = e >= t ? [e, t] : [t, e];
27
+ return (n + .05) / (r + .05);
28
+ }
29
+ //#endregion
30
+ export { e as t };
@@ -38,7 +38,7 @@ var t = e("text-align-center", [
38
38
  d: "M17 19H3",
39
39
  key: "z6ezky"
40
40
  }]
41
- ]), i = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]", a = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", o = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-l-[var(--tpl-radius-sm)] tpl:rounded-r-none tpl:border-r-0 tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", s = "tpl:flex tpl:items-center tpl:px-2.5 tpl:text-xs tpl:border tpl:border-l-0 tpl:text-[var(--tpl-text-dim)] tpl:bg-[var(--tpl-bg-hover)] tpl:border-[var(--tpl-border)] tpl:rounded-r-[var(--tpl-radius-sm)]", c = "tpl:flex-1 tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-mono tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)]", l = "tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-4 tpl:border tpl:border-[var(--tpl-border)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)]", u = "tpl-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3.5 tpl:py-2 tpl:text-sm tpl:font-medium tpl:whitespace-nowrap tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-primary)] hover:tpl:text-[var(--tpl-bg)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50", d = [
41
+ ]), i = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]", a = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", o = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-l-[var(--tpl-radius-sm)] tpl:rounded-r-none tpl:border-r-0 tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", s = "tpl:flex tpl:items-center tpl:px-2.5 tpl:text-xs tpl:border tpl:border-l-0 tpl:text-[var(--tpl-text-dim)] tpl:bg-[var(--tpl-bg-hover)] tpl:border-[var(--tpl-border)] tpl:rounded-r-[var(--tpl-radius-sm)]", c = "tpl:flex-1 tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-mono tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)]", l = "tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-4 tpl:border tpl:border-[var(--tpl-border)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)]", u = "tpl:flex tpl:size-8 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]", d = "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-primary)] tpl:hover:text-[var(--tpl-primary)]", f = "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2.5 tpl:py-2 tpl:font-mono tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none tpl:transition-all tpl:duration-150 tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]", p = "tpl-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3.5 tpl:py-2 tpl:text-sm tpl:font-medium tpl:whitespace-nowrap tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-primary)] hover:tpl:text-[var(--tpl-bg)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50", m = [
42
42
  "10px",
43
43
  "12px",
44
44
  "14px",
@@ -51,7 +51,7 @@ var t = e("text-align-center", [
51
51
  "36px",
52
52
  "48px",
53
53
  "64px"
54
- ], f = [
54
+ ], h = [
55
55
  "1",
56
56
  "1.2",
57
57
  "1.4",
@@ -60,7 +60,7 @@ var t = e("text-align-center", [
60
60
  "1.8",
61
61
  "2",
62
62
  "2.5"
63
- ], p = [
63
+ ], g = [
64
64
  {
65
65
  label: "Normal",
66
66
  value: "normal"
@@ -89,6 +89,6 @@ var t = e("text-align-center", [
89
89
  label: "3px",
90
90
  value: "3px"
91
91
  }
92
- ], m = "#000000", h = "#ffffff", g = "#ffff00", _ = "#f2f2f2";
92
+ ], _ = "#000000", v = "#ffffff", y = "#ffff00", b = "#f2f2f2";
93
93
  //#endregion
94
- export { t as _, d as a, l as c, a as d, o as f, n as g, r as h, m as i, c as l, i as m, g as n, p as o, s as p, _ as r, f as s, h as t, u };
94
+ export { u as _, m as a, t as b, d as c, p as d, a as f, f as g, i as h, _ as i, l, s as m, y as n, g as o, o as p, b as r, h as s, v as t, c as u, r as v, n as y };