@templatical/editor 0.42.0 → 0.42.1

package/dist/cdn/chunks/TplModal-C_eIPykE.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TplModal-C_eIPykE.js","names":[],"sources":["../../../src/components/TplModal.vue","../../../src/components/TplModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFocusTrap } from \"../composables\";\nimport { usePopoverRoot } from \"../composables/usePopoverRoot\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../keys\";\nimport { computed, inject, ref } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst dialogRef = ref<HTMLElement | null>(null);\nconst isVisible = computed(() => props.visible);\nuseFocusTrap(dialogRef, isVisible);\n\nconst tplUiTheme = inject(UI_THEME_KEY);\n\n// The backdrop below carries the bare `tpl` class, which re-declares every\n// `--tpl-*` token from the base `.tpl` rule. A custom property declared on an\n// element beats one inherited from an ancestor, so that re-declaration shadows\n// the consumer's `theme` config — which lives as inline styles on the editor\n// root — for this whole teleported subtree. Re-applying `themeStyles` here is\n// what restores it, and doing it on the backdrop covers every dialog rendered\n// through this wrapper rather than each one remembering to. `data-tpl-theme`\n// does the same job for the dark token block. See the invariant in\n// `tests/theme-token-scope.test.ts` (issue #487).\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst popoverRoot = usePopoverRoot();\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Escape\") {\n    emit(\"close\");\n  }\n  emit(\"keydown\", event);\n}\n</script>\n\n<template>\n  <Teleport v-if=\"popoverRoot\" :to=\"popoverRoot\">\n    <Transition\n      enter-active-class=\"tpl:transition\"\n      enter-from-class=\"tpl:opacity-0\"\n      enter-to-class=\"tpl:opacity-100\"\n      leave-active-class=\"tpl:transition tpl:duration-100\"\n      leave-from-class=\"tpl:opacity-100\"\n      leave-to-class=\"tpl:opacity-0\"\n    >\n      <!-- The backdrop is the reference box every slotted panel caps against,\n           which is why it owns the gutter (`p-4`) rather than each panel\n           carrying its own margin. `inset-0` gives it a definite height; the\n           wrapper below spans that height so a panel's percentage cap\n           (`max-h-[90%]` / `max-h-[80%]`) has an unbroken chain to resolve\n           through. Those numbers are the `vh` values they replaced, so an\n           untrapped editor renders exactly as before.\n\n           Panels must never cap in `vh`. `fixed` covers the viewport only while\n           nothing traps it, and an ancestor with `transform`, `filter`,\n           `backdrop-filter`, `will-change: transform`, `contain: paint`,\n           `container-type` or a transform animation becomes the containing\n           block for fixed descendants. The editor is embedded in someone\n           else's page, so any of those can sit above it: `inset-0` then\n           resolves to that ancestor's box while a `vh` cap still resolves to\n           the viewport, and the panel overflows a container that usually also\n           has `overflow: hidden`. That is issue #575 — in a 420px host inside a\n           720px viewport, a 648px panel clipped ~113px off both the top and the\n           bottom, with no scrollbar to reach the buttons. Capping against the\n           backdrop is self-correcting whether or not the trap is present.\n           Locked by `tests/overlay-height-scope.test.ts`.\n\n           The padding belongs here and not on the wrapper: preflight is\n           omitted, so non-form elements keep `content-box` and padding on an\n           `h-full` element would add to 100% and overflow by exactly the\n           padding (the trap behind issue #115). Insets size the backdrop's\n           border box, so padding here safely shrinks the content box instead. -->\n      <!-- `z-10` is the one z-index inside `.tpl-popover-root` that has to be\n           real. The root is a single stacking context, so its residents\n           otherwise paint in teleport-anchor order — and this modal's anchor is\n           established when the editor mounts, while a link dialog's is\n           established later, when a paragraph enters edit mode. Without a\n           number, a picker opened FROM that dialog renders behind it. Any\n           positive value beats the `auto` siblings; 10 stays far below the\n           suggestion popup (9999) and `SmallScreenNotice` (10001), and cannot\n           escape the root's own 10000 either way. -->\n      <div\n        v-if=\"visible\"\n        :data-tpl-theme=\"tplUiTheme\"\n        class=\"tpl tpl:fixed tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:p-4\"\n        style=\"\n          background-color: var(--tpl-overlay);\n          backdrop-filter: blur(8px);\n          -webkit-backdrop-filter: blur(8px);\n        \"\n        :style=\"themeStyles\"\n        @click.self=\"emit('close')\"\n        @keydown=\"handleKeydown\"\n      >\n        <!-- `h-full` only, deliberately no `w-full`: height is what has to\n             become definite, and widening this element would change what\n             `w-full` on a panel resolves against. Panels are shrink-to-fit\n             horizontally — the test-email dialog stays compact until its\n             preview opens, and the saved-blocks browser pins an explicit width\n             precisely because this wrapper is shrink-to-fit. Constraining one\n             axis leaves all of that intact.\n\n             It repeats `@click.self` because it now covers the backdrop's full\n             height: clicks in the gap above or below the panel land here, so\n             without it click-outside-to-close would only work on the padding\n             ring and the columns either side. -->\n        <div\n          ref=\"dialogRef\"\n          class=\"tpl:flex tpl:h-full tpl:items-center tpl:justify-center\"\n          @click.self=\"emit('close')\"\n        >\n          <slot />\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useFocusTrap } from \"../composables\";\nimport { usePopoverRoot } from \"../composables/usePopoverRoot\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../keys\";\nimport { computed, inject, ref } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst dialogRef = ref<HTMLElement | null>(null);\nconst isVisible = computed(() => props.visible);\nuseFocusTrap(dialogRef, isVisible);\n\nconst tplUiTheme = inject(UI_THEME_KEY);\n\n// The backdrop below carries the bare `tpl` class, which re-declares every\n// `--tpl-*` token from the base `.tpl` rule. A custom property declared on an\n// element beats one inherited from an ancestor, so that re-declaration shadows\n// the consumer's `theme` config — which lives as inline styles on the editor\n// root — for this whole teleported subtree. Re-applying `themeStyles` here is\n// what restores it, and doing it on the backdrop covers every dialog rendered\n// through this wrapper rather than each one remembering to. `data-tpl-theme`\n// does the same job for the dark token block. See the invariant in\n// `tests/theme-token-scope.test.ts` (issue #487).\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst popoverRoot = usePopoverRoot();\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Escape\") {\n    emit(\"close\");\n  }\n  emit(\"keydown\", event);\n}\n</script>\n\n<template>\n  <Teleport v-if=\"popoverRoot\" :to=\"popoverRoot\">\n    <Transition\n      enter-active-class=\"tpl:transition\"\n      enter-from-class=\"tpl:opacity-0\"\n      enter-to-class=\"tpl:opacity-100\"\n      leave-active-class=\"tpl:transition tpl:duration-100\"\n      leave-from-class=\"tpl:opacity-100\"\n      leave-to-class=\"tpl:opacity-0\"\n    >\n      <!-- The backdrop is the reference box every slotted panel caps against,\n           which is why it owns the gutter (`p-4`) rather than each panel\n           carrying its own margin. `inset-0` gives it a definite height; the\n           wrapper below spans that height so a panel's percentage cap\n           (`max-h-[90%]` / `max-h-[80%]`) has an unbroken chain to resolve\n           through. Those numbers are the `vh` values they replaced, so an\n           untrapped editor renders exactly as before.\n\n           Panels must never cap in `vh`. `fixed` covers the viewport only while\n           nothing traps it, and an ancestor with `transform`, `filter`,\n           `backdrop-filter`, `will-change: transform`, `contain: paint`,\n           `container-type` or a transform animation becomes the containing\n           block for fixed descendants. The editor is embedded in someone\n           else's page, so any of those can sit above it: `inset-0` then\n           resolves to that ancestor's box while a `vh` cap still resolves to\n           the viewport, and the panel overflows a container that usually also\n           has `overflow: hidden`. That is issue #575 — in a 420px host inside a\n           720px viewport, a 648px panel clipped ~113px off both the top and the\n           bottom, with no scrollbar to reach the buttons. Capping against the\n           backdrop is self-correcting whether or not the trap is present.\n           Locked by `tests/overlay-height-scope.test.ts`.\n\n           The padding belongs here and not on the wrapper: preflight is\n           omitted, so non-form elements keep `content-box` and padding on an\n           `h-full` element would add to 100% and overflow by exactly the\n           padding (the trap behind issue #115). Insets size the backdrop's\n           border box, so padding here safely shrinks the content box instead. -->\n      <!-- `z-10` is the one z-index inside `.tpl-popover-root` that has to be\n           real. The root is a single stacking context, so its residents\n           otherwise paint in teleport-anchor order — and this modal's anchor is\n           established when the editor mounts, while a link dialog's is\n           established later, when a paragraph enters edit mode. Without a\n           number, a picker opened FROM that dialog renders behind it. Any\n           positive value beats the `auto` siblings; 10 stays far below the\n           suggestion popup (9999) and `SmallScreenNotice` (10001), and cannot\n           escape the root's own 10000 either way. -->\n      <div\n        v-if=\"visible\"\n        :data-tpl-theme=\"tplUiTheme\"\n        class=\"tpl tpl:fixed tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:p-4\"\n        style=\"\n          background-color: var(--tpl-overlay);\n          backdrop-filter: blur(8px);\n          -webkit-backdrop-filter: blur(8px);\n        \"\n        :style=\"themeStyles\"\n        @click.self=\"emit('close')\"\n        @keydown=\"handleKeydown\"\n      >\n        <!-- `h-full` only, deliberately no `w-full`: height is what has to\n             become definite, and widening this element would change what\n             `w-full` on a panel resolves against. Panels are shrink-to-fit\n             horizontally — the test-email dialog stays compact until its\n             preview opens, and the saved-blocks browser pins an explicit width\n             precisely because this wrapper is shrink-to-fit. Constraining one\n             axis leaves all of that intact.\n\n             It repeats `@click.self` because it now covers the backdrop's full\n             height: clicks in the gap above or below the panel land here, so\n             without it click-outside-to-close would only work on the padding\n             ring and the columns either side. -->\n        <div\n          ref=\"dialogRef\"\n          class=\"tpl:flex tpl:h-full tpl:items-center tpl:justify-center\"\n          @click.self=\"emit('close')\"\n        >\n          <slot />\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;EAMA,IAAM,IAAQ,GAIR,IAAO,GAKP,IAAY,EAAwB,IAAI,GACxC,IAAY,QAAe,EAAM,OAAO;EAC9C,EAAa,GAAW,CAAS;EAEjC,IAAM,IAAa,EAAO,CAAY,GAWhC,IAAc,EAAO,GAAkB,IAAI,GAC3C,IAAc,EAAe;EAEnC,SAAS,EAAc,GAA4B;GAIjD,AAHI,EAAM,QAAQ,YAChB,EAAK,OAAO,GAEd,EAAK,WAAW,CAAK;EACvB;mBAIkB,EAAA,CAAA,KAAhB,EAAA,GAAA,EA+EW,GAAA;;GA/EmB,IAAI,EAAA,CAAA;EAChC,GAAA,CAAA,EA6Ea,GAAA;GA5EX,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;GACf,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;;GAsCf,SAAA,QAgCM,CA/BE,EAAA,WADR,EAAA,GAAA,EAgCM,OAAA;;IA9BH,kBAAgB,EAAA,CAAA;IACjB,OAAM;IACN,OAIC,EAAA,CAJD;KAAA,oBAAA;KAAA,mBAAA;KAAA,2BAAA;IAAA,GAKQ,EAAA,CAAA,CAAW,CAAA;IAClB,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,OAAA,GAAA,CAAA,MAAA,CAAA;IAChB,WAAS;GAcV,GAAA,CAAA,EAMM,OAAA;IALA,SAAA;IAAJ,KAAI;IACJ,OAAM;IACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,OAAA,GAAA,CAAA,MAAA,CAAA;GAEjB,GAAA,CAAA,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/cdn/chunks/VersionHistoryMenu-Ww57XAzj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VersionHistoryMenu-Ww57XAzj.js","names":[],"sources":["../../../src/components/VersionHistoryMenu.vue","../../../src/components/VersionHistoryMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The header's version-history control: step older / newer through the list, or\n * open the dropdown and jump straight to one.\n *\n * Shared by both editors. Reads the `TemplateVersion` contract, so any\n * provider drives it.\n */\nimport { computed, inject, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport {\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  Clock,\n  LoaderCircle,\n} from \"@lucide/vue\";\nimport type { TemplateVersion } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { formatAbsoluteDateTime } from \"../utils/formatAbsoluteDateTime\";\nimport { formatRelativeTime } from \"../utils/formatRelativeTime\";\nimport { UI_LOCALE_KEY } from \"../keys\";\n\nconst props = defineProps<{\n  versions: TemplateVersion[];\n  isLoading: boolean;\n  isRestoring: boolean;\n  /** Which version is on the canvas, or `null` while editing normally. */\n  previewingId: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"open\"): void;\n  (e: \"navigate\", version: TemplateVersion): void;\n}>();\n\nconst { t, format } = useI18n();\nconst uiLocale = inject(UI_LOCALE_KEY, undefined);\n\nconst isOpen = ref(false);\nconst dropdownRef = ref<HTMLElement | null>(null);\n\n/**\n * Position in the list (0 = newest), derived from what is actually previewed\n * rather than tracked locally. A local index went stale the moment the user\n * cancelled a preview — the arrows then stepped from wherever they had left off\n * instead of from the top.\n */\nconst currentIndex = computed(() =>\n  props.previewingId === null\n    ? -1\n    : props.versions.findIndex((v) => v.id === props.previewingId),\n);\n\nconst canGoNewer = computed(\n  () => currentIndex.value > 0 && !props.isRestoring && !props.isLoading,\n);\n\nconst canGoOlder = computed(\n  () =>\n    currentIndex.value < props.versions.length - 1 &&\n    props.versions.length > 0 &&\n    !props.isRestoring &&\n    !props.isLoading,\n);\n\nfunction goNewer(): void {\n  if (!canGoNewer.value) return;\n  emit(\"navigate\", props.versions[currentIndex.value - 1]);\n}\n\nfunction goOlder(): void {\n  if (!canGoOlder.value) return;\n  emit(\"navigate\", props.versions[currentIndex.value + 1]);\n}\n\nfunction toggleDropdown(): void {\n  isOpen.value = !isOpen.value;\n  // Always on open, never only when empty: history grows behind the user's back\n  // (every save may record one), so a list fetched once would go stale silently.\n  if (isOpen.value) emit(\"open\");\n}\n\nfunction selectVersion(version: TemplateVersion): void {\n  emit(\"navigate\", version);\n  isOpen.value = false;\n}\n\nfunction formatDate(dateString: string): string {\n  const result = formatRelativeTime(dateString, t.time, format, 7);\n  if (result !== null) return result;\n\n  // Past the relative window, `Intl` builds the label — in the EDITOR's locale,\n  // not the browser's, which is what put \"Mar 4\" in a German menu.\n  return formatAbsoluteDateTime(dateString, uiLocale, {\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  });\n}\n\nonClickOutside(dropdownRef, () => {\n  isOpen.value = false;\n});\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    class=\"tpl:relative tpl:flex tpl:items-center tpl:gap-0.5\"\n    data-testid=\"version-history\"\n  >\n    <!-- Step to an older version -->\n    <button\n      class=\"tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-30 tpl:disabled:hover:bg-transparent tpl:text-[var(--tpl-text-muted)]\"\n      data-testid=\"version-history-older\"\n      :disabled=\"!canGoOlder\"\n      :title=\"t.versionHistory.olderVersion\"\n      :aria-label=\"t.versionHistory.olderVersion\"\n      @click.stop=\"goOlder\"\n    >\n      <ChevronLeft :size=\"14\" :stroke-width=\"2\" />\n    </button>\n\n    <!-- History dropdown toggle -->\n    <button\n      class=\"tpl:flex tpl:h-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-0.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-1.5 tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n      data-testid=\"version-history-toggle\"\n      :aria-expanded=\"isOpen\"\n      :title=\"t.versionHistory.tooltip\"\n      :aria-label=\"t.versionHistory.tooltip\"\n      @click.stop=\"toggleDropdown\"\n    >\n      <Clock :size=\"16\" :stroke-width=\"1.5\" />\n      <ChevronDown\n        class=\"tpl:transition-transform\"\n        :class=\"{ 'tpl:rotate-180': isOpen }\"\n        :size=\"10\"\n        :stroke-width=\"2\"\n      />\n    </button>\n\n    <Transition name=\"tpl-dropdown\">\n      <div\n        v-if=\"isOpen\"\n        class=\"tpl-scale-in tpl:absolute tpl:top-full tpl:left-1/2 tpl:z-50 tpl:mt-2 tpl:w-72 tpl:-translate-x-1/2 tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg)] tpl:border tpl:border-[var(--tpl-border)] tpl:shadow-[var(--tpl-shadow-lg)]\"\n        data-testid=\"version-history-dropdown\"\n      >\n        <div\n          class=\"tpl:border-b tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)] tpl:border-[var(--tpl-border)]\"\n        >\n          {{ t.versionHistory.dropdownTitle }}\n        </div>\n\n        <div\n          v-if=\"isLoading && versions.length === 0\"\n          class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8\"\n          role=\"status\"\n          aria-busy=\"true\"\n        >\n          <LoaderCircle\n            class=\"tpl:animate-spin tpl:text-[var(--tpl-primary)]\"\n            :size=\"20\"\n            :stroke-width=\"2\"\n          />\n        </div>\n\n        <div\n          v-else-if=\"versions.length === 0\"\n          class=\"tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n          data-testid=\"version-history-empty\"\n        >\n          {{ t.versionHistory.empty }}\n        </div>\n\n        <div v-else class=\"tpl:max-h-64 tpl:overflow-y-auto\">\n          <button\n            v-for=\"version in versions\"\n            :key=\"version.id\"\n            class=\"tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:border-l-2 tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-all tpl:hover:border-l-[var(--tpl-primary)] tpl:hover:bg-[var(--tpl-bg-hover)]\"\n            :class=\"\n              version.id === previewingId\n                ? 'tpl:border-l-[var(--tpl-primary)] tpl:bg-[var(--tpl-bg-active)]'\n                : 'tpl:border-l-transparent'\n            \"\n            style=\"background-color: transparent\"\n            data-testid=\"version-history-entry\"\n            :data-version-id=\"version.id\"\n            :disabled=\"isRestoring\"\n            @click=\"selectVersion(version)\"\n          >\n            <div class=\"tpl:flex tpl:flex-col tpl:gap-0.5\">\n              <div\n                class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n              >\n                <span>{{\n                  version.label ?? formatDate(version.createdAt)\n                }}</span>\n                <span\n                  v-if=\"version.isAutomatic\"\n                  class=\"tpl:rounded tpl:px-1 tpl:py-0.5 tpl:text-xs tpl:font-normal tpl:bg-[var(--tpl-bg-active)] tpl:text-[var(--tpl-text-muted)]\"\n                >\n                  {{ t.versionHistory.auto }}\n                </span>\n              </div>\n              <!-- A labelled version still shows when it was taken, and by whom\n                   if the store tracks that; an unlabelled one already leads with\n                   the date, so the line would repeat it. -->\n              <div\n                v-if=\"version.label || version.author?.name\"\n                class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n              >\n                <template v-if=\"version.label\">{{\n                  formatDate(version.createdAt)\n                }}</template>\n                <template v-if=\"version.label && version.author?.name\">\n                  ·\n                </template>\n                <template v-if=\"version.author?.name\">{{\n                  version.author.name\n                }}</template>\n              </div>\n            </div>\n          </button>\n        </div>\n      </div>\n    </Transition>\n\n    <!-- Step to a newer version -->\n    <button\n      class=\"tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-30 tpl:disabled:hover:bg-transparent tpl:text-[var(--tpl-text-muted)]\"\n      data-testid=\"version-history-newer\"\n      :disabled=\"!canGoNewer\"\n      :title=\"t.versionHistory.newerVersion\"\n      :aria-label=\"t.versionHistory.newerVersion\"\n      @click.stop=\"goNewer\"\n    >\n      <ChevronRight :size=\"14\" :stroke-width=\"2\" />\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * The header's version-history control: step older / newer through the list, or\n * open the dropdown and jump straight to one.\n *\n * Shared by both editors. Reads the `TemplateVersion` contract, so any\n * provider drives it.\n */\nimport { computed, inject, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport {\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  Clock,\n  LoaderCircle,\n} from \"@lucide/vue\";\nimport type { TemplateVersion } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { formatAbsoluteDateTime } from \"../utils/formatAbsoluteDateTime\";\nimport { formatRelativeTime } from \"../utils/formatRelativeTime\";\nimport { UI_LOCALE_KEY } from \"../keys\";\n\nconst props = defineProps<{\n  versions: TemplateVersion[];\n  isLoading: boolean;\n  isRestoring: boolean;\n  /** Which version is on the canvas, or `null` while editing normally. */\n  previewingId: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"open\"): void;\n  (e: \"navigate\", version: TemplateVersion): void;\n}>();\n\nconst { t, format } = useI18n();\nconst uiLocale = inject(UI_LOCALE_KEY, undefined);\n\nconst isOpen = ref(false);\nconst dropdownRef = ref<HTMLElement | null>(null);\n\n/**\n * Position in the list (0 = newest), derived from what is actually previewed\n * rather than tracked locally. A local index went stale the moment the user\n * cancelled a preview — the arrows then stepped from wherever they had left off\n * instead of from the top.\n */\nconst currentIndex = computed(() =>\n  props.previewingId === null\n    ? -1\n    : props.versions.findIndex((v) => v.id === props.previewingId),\n);\n\nconst canGoNewer = computed(\n  () => currentIndex.value > 0 && !props.isRestoring && !props.isLoading,\n);\n\nconst canGoOlder = computed(\n  () =>\n    currentIndex.value < props.versions.length - 1 &&\n    props.versions.length > 0 &&\n    !props.isRestoring &&\n    !props.isLoading,\n);\n\nfunction goNewer(): void {\n  if (!canGoNewer.value) return;\n  emit(\"navigate\", props.versions[currentIndex.value - 1]);\n}\n\nfunction goOlder(): void {\n  if (!canGoOlder.value) return;\n  emit(\"navigate\", props.versions[currentIndex.value + 1]);\n}\n\nfunction toggleDropdown(): void {\n  isOpen.value = !isOpen.value;\n  // Always on open, never only when empty: history grows behind the user's back\n  // (every save may record one), so a list fetched once would go stale silently.\n  if (isOpen.value) emit(\"open\");\n}\n\nfunction selectVersion(version: TemplateVersion): void {\n  emit(\"navigate\", version);\n  isOpen.value = false;\n}\n\nfunction formatDate(dateString: string): string {\n  const result = formatRelativeTime(dateString, t.time, format, 7);\n  if (result !== null) return result;\n\n  // Past the relative window, `Intl` builds the label — in the EDITOR's locale,\n  // not the browser's, which is what put \"Mar 4\" in a German menu.\n  return formatAbsoluteDateTime(dateString, uiLocale, {\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  });\n}\n\nonClickOutside(dropdownRef, () => {\n  isOpen.value = false;\n});\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    class=\"tpl:relative tpl:flex tpl:items-center tpl:gap-0.5\"\n    data-testid=\"version-history\"\n  >\n    <!-- Step to an older version -->\n    <button\n      class=\"tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-30 tpl:disabled:hover:bg-transparent tpl:text-[var(--tpl-text-muted)]\"\n      data-testid=\"version-history-older\"\n      :disabled=\"!canGoOlder\"\n      :title=\"t.versionHistory.olderVersion\"\n      :aria-label=\"t.versionHistory.olderVersion\"\n      @click.stop=\"goOlder\"\n    >\n      <ChevronLeft :size=\"14\" :stroke-width=\"2\" />\n    </button>\n\n    <!-- History dropdown toggle -->\n    <button\n      class=\"tpl:flex tpl:h-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-0.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-1.5 tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n      data-testid=\"version-history-toggle\"\n      :aria-expanded=\"isOpen\"\n      :title=\"t.versionHistory.tooltip\"\n      :aria-label=\"t.versionHistory.tooltip\"\n      @click.stop=\"toggleDropdown\"\n    >\n      <Clock :size=\"16\" :stroke-width=\"1.5\" />\n      <ChevronDown\n        class=\"tpl:transition-transform\"\n        :class=\"{ 'tpl:rotate-180': isOpen }\"\n        :size=\"10\"\n        :stroke-width=\"2\"\n      />\n    </button>\n\n    <Transition name=\"tpl-dropdown\">\n      <div\n        v-if=\"isOpen\"\n        class=\"tpl-scale-in tpl:absolute tpl:top-full tpl:left-1/2 tpl:z-50 tpl:mt-2 tpl:w-72 tpl:-translate-x-1/2 tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg)] tpl:border tpl:border-[var(--tpl-border)] tpl:shadow-[var(--tpl-shadow-lg)]\"\n        data-testid=\"version-history-dropdown\"\n      >\n        <div\n          class=\"tpl:border-b tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)] tpl:border-[var(--tpl-border)]\"\n        >\n          {{ t.versionHistory.dropdownTitle }}\n        </div>\n\n        <div\n          v-if=\"isLoading && versions.length === 0\"\n          class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8\"\n          role=\"status\"\n          aria-busy=\"true\"\n        >\n          <LoaderCircle\n            class=\"tpl:animate-spin tpl:text-[var(--tpl-primary)]\"\n            :size=\"20\"\n            :stroke-width=\"2\"\n          />\n        </div>\n\n        <div\n          v-else-if=\"versions.length === 0\"\n          class=\"tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n          data-testid=\"version-history-empty\"\n        >\n          {{ t.versionHistory.empty }}\n        </div>\n\n        <div v-else class=\"tpl:max-h-64 tpl:overflow-y-auto\">\n          <button\n            v-for=\"version in versions\"\n            :key=\"version.id\"\n            class=\"tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:border-l-2 tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-all tpl:hover:border-l-[var(--tpl-primary)] tpl:hover:bg-[var(--tpl-bg-hover)]\"\n            :class=\"\n              version.id === previewingId\n                ? 'tpl:border-l-[var(--tpl-primary)] tpl:bg-[var(--tpl-bg-active)]'\n                : 'tpl:border-l-transparent'\n            \"\n            style=\"background-color: transparent\"\n            data-testid=\"version-history-entry\"\n            :data-version-id=\"version.id\"\n            :disabled=\"isRestoring\"\n            @click=\"selectVersion(version)\"\n          >\n            <div class=\"tpl:flex tpl:flex-col tpl:gap-0.5\">\n              <div\n                class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n              >\n                <span>{{\n                  version.label ?? formatDate(version.createdAt)\n                }}</span>\n                <span\n                  v-if=\"version.isAutomatic\"\n                  class=\"tpl:rounded tpl:px-1 tpl:py-0.5 tpl:text-xs tpl:font-normal tpl:bg-[var(--tpl-bg-active)] tpl:text-[var(--tpl-text-muted)]\"\n                >\n                  {{ t.versionHistory.auto }}\n                </span>\n              </div>\n              <!-- A labelled version still shows when it was taken, and by whom\n                   if the store tracks that; an unlabelled one already leads with\n                   the date, so the line would repeat it. -->\n              <div\n                v-if=\"version.label || version.author?.name\"\n                class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n              >\n                <template v-if=\"version.label\">{{\n                  formatDate(version.createdAt)\n                }}</template>\n                <template v-if=\"version.label && version.author?.name\">\n                  ·\n                </template>\n                <template v-if=\"version.author?.name\">{{\n                  version.author.name\n                }}</template>\n              </div>\n            </div>\n          </button>\n        </div>\n      </div>\n    </Transition>\n\n    <!-- Step to a newer version -->\n    <button\n      class=\"tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-30 tpl:disabled:hover:bg-transparent tpl:text-[var(--tpl-text-muted)]\"\n      data-testid=\"version-history-newer\"\n      :disabled=\"!canGoNewer\"\n      :title=\"t.versionHistory.newerVersion\"\n      :aria-label=\"t.versionHistory.newerVersion\"\n      @click.stop=\"goNewer\"\n    >\n      <ChevronRight :size=\"14\" :stroke-width=\"2\" />\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/VersionHistoryPanels-w0EG_qVW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VersionHistoryPanels-w0EG_qVW.js","names":[],"sources":["../../../src/components/VersionHistoryPanels.vue","../../../src/components/VersionHistoryPanels.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Mount point for the version-history chrome that sits outside the header,\n * shared by the OSS and Cloud editors.\n *\n * Same shape as `SavedBlocksPanels.vue` / `TestEmailPanel.vue`: everything here\n * is `defineAsyncComponent` behind a `v-if` on its own state, and the editors in\n * turn lazy-load *this* wrapper and render it only when a\n * `VersionHistoryProvider` is configured — so a consumer without one downloads\n * none of it.\n *\n * The header's dropdown control is not here for one reason only: it has to sit\n * in the header's centre column. It is lazily imported at those two sites\n * instead, and covered by the same CDN chunk guard.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseVersionHistoryFeatureReturn } from \"../composables/useVersionHistoryFeature\";\n\nconst props = defineProps<{\n  feature: UseVersionHistoryFeatureReturn;\n}>();\n\nconst VersionPreviewBanner = defineAsyncComponent(\n  () => import(\"./VersionPreviewBanner.vue\"),\n);\n// Its own chunk, fetched only if a restore is attempted with unsaved work —\n// which for a Cloud session (autosave on) is the uncommon case.\nconst RestoreVersionDialog = defineAsyncComponent(\n  () => import(\"./RestoreVersionDialog.vue\"),\n);\n\n/**\n * Every action here swallows its rejection: the feature already reported it\n * through `onError` and rolled the canvas back, and an unhandled rejection out\n * of a DOM event binding helps nobody.\n */\nasync function handleRequestRestore(): Promise<void> {\n  try {\n    await props.feature.requestRestore();\n  } catch {\n    /* reported through onError */\n  }\n}\n\nasync function handleSaveAndRestore(): Promise<void> {\n  try {\n    await props.feature.saveAndRestore();\n  } catch {\n    /* reported through onError */\n  }\n}\n\nasync function handleDiscardAndRestore(): Promise<void> {\n  try {\n    await props.feature.discardAndRestore();\n  } catch {\n    /* reported through onError */\n  }\n}\n</script>\n\n<template>\n  <VersionPreviewBanner\n    v-if=\"feature.isPreviewing.value\"\n    :visible=\"feature.isPreviewing.value\"\n    :can-restore=\"feature.canRestore.value\"\n    @cancel=\"feature.cancelPreview()\"\n    @confirm=\"handleRequestRestore\"\n  />\n\n  <RestoreVersionDialog\n    v-if=\"feature.isConfirmingRestore.value\"\n    :visible=\"feature.isConfirmingRestore.value\"\n    :can-save=\"feature.canSaveBeforeRestore.value\"\n    :is-busy=\"feature.isConfirmBusy.value\"\n    @cancel=\"feature.cancelRestoreConfirm()\"\n    @save-and-restore=\"handleSaveAndRestore\"\n    @discard-and-restore=\"handleDiscardAndRestore\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Mount point for the version-history chrome that sits outside the header,\n * shared by the OSS and Cloud editors.\n *\n * Same shape as `SavedBlocksPanels.vue` / `TestEmailPanel.vue`: everything here\n * is `defineAsyncComponent` behind a `v-if` on its own state, and the editors in\n * turn lazy-load *this* wrapper and render it only when a\n * `VersionHistoryProvider` is configured — so a consumer without one downloads\n * none of it.\n *\n * The header's dropdown control is not here for one reason only: it has to sit\n * in the header's centre column. It is lazily imported at those two sites\n * instead, and covered by the same CDN chunk guard.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseVersionHistoryFeatureReturn } from \"../composables/useVersionHistoryFeature\";\n\nconst props = defineProps<{\n  feature: UseVersionHistoryFeatureReturn;\n}>();\n\nconst VersionPreviewBanner = defineAsyncComponent(\n  () => import(\"./VersionPreviewBanner.vue\"),\n);\n// Its own chunk, fetched only if a restore is attempted with unsaved work —\n// which for a Cloud session (autosave on) is the uncommon case.\nconst RestoreVersionDialog = defineAsyncComponent(\n  () => import(\"./RestoreVersionDialog.vue\"),\n);\n\n/**\n * Every action here swallows its rejection: the feature already reported it\n * through `onError` and rolled the canvas back, and an unhandled rejection out\n * of a DOM event binding helps nobody.\n */\nasync function handleRequestRestore(): Promise<void> {\n  try {\n    await props.feature.requestRestore();\n  } catch {\n    /* reported through onError */\n  }\n}\n\nasync function handleSaveAndRestore(): Promise<void> {\n  try {\n    await props.feature.saveAndRestore();\n  } catch {\n    /* reported through onError */\n  }\n}\n\nasync function handleDiscardAndRestore(): Promise<void> {\n  try {\n    await props.feature.discardAndRestore();\n  } catch {\n    /* reported through onError */\n  }\n}\n</script>\n\n<template>\n  <VersionPreviewBanner\n    v-if=\"feature.isPreviewing.value\"\n    :visible=\"feature.isPreviewing.value\"\n    :can-restore=\"feature.canRestore.value\"\n    @cancel=\"feature.cancelPreview()\"\n    @confirm=\"handleRequestRestore\"\n  />\n\n  <RestoreVersionDialog\n    v-if=\"feature.isConfirmingRestore.value\"\n    :visible=\"feature.isConfirmingRestore.value\"\n    :can-save=\"feature.canSaveBeforeRestore.value\"\n    :is-busy=\"feature.isConfirmBusy.value\"\n    @cancel=\"feature.cancelRestoreConfirm()\"\n    @save-and-restore=\"handleSaveAndRestore\"\n    @discard-and-restore=\"handleDiscardAndRestore\"\n  />\n</template>\n"],"mappings":";;;;;;;EAkBA,IAAM,IAAQ,GAIR,IAAuB,QACrB,OAAO,qCACf,GAGM,IAAuB,QACrB,OAAO,qCACf;EAOA,eAAe,IAAsC;GACnD,IAAI;IACF,MAAM,EAAM,QAAQ,eAAe;GACrC,QAAQ,CAER;EACF;EAEA,eAAe,IAAsC;GACnD,IAAI;IACF,MAAM,EAAM,QAAQ,eAAe;GACrC,QAAQ,CAER;EACF;EAEA,eAAe,IAAyC;GACtD,IAAI;IACF,MAAM,EAAM,QAAQ,kBAAkB;GACxC,QAAQ,CAER;EACF;oBAKU,EAAA,GAAA,EAAA,GAAA,MAAA,CAAA,EAAA,QAAQ,aAAa,SAD7B,EAAA,GAAA,EAME,EAAA,CAAA,GAAA;;GAJC,SAAS,EAAA,QAAQ,aAAa;GAC9B,eAAa,EAAA,QAAQ,WAAW;GAChC,UAAM,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,cAAa;GAC7B,WAAS;EAIJ,GAAA,MAAA,GAAA,CAAA,WAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAA,QAAQ,oBAAoB,SADpC,EAAA,GAAA,EAQE,EAAA,CAAA,GAAA;;GANC,SAAS,EAAA,QAAQ,oBAAoB;GACrC,YAAU,EAAA,QAAQ,qBAAqB;GACvC,WAAS,EAAA,QAAQ,cAAc;GAC/B,UAAM,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,qBAAoB;GACpC,kBAAkB;GAClB,qBAAqB"}

package/dist/cdn/chunks/VersionPreviewBanner-Bbd4C-AN.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VersionPreviewBanner-Bbd4C-AN.js","names":[],"sources":["../../../src/components/VersionPreviewBanner.vue","../../../src/components/VersionPreviewBanner.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ghostBtnClass, primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Shown while a past version is on the canvas instead of the user's own work.\n * Cancel puts the pre-preview content back; Restore makes the version current.\n *\n * Lives outside `src/cloud/` because version history is a BYO provider, not a\n * Cloud feature — a consumer's own `versionHistory` provider drives this banner\n * with no Cloud involved.\n */\nimport { Clock } from \"@lucide/vue\";\nimport { useI18n } from \"../composables/useI18n\";\n\ndefineProps<{\n  visible: boolean;\n  /**\n   * Whether the provider supplied `restore`. When it didn't, history is\n   * browse-and-preview only, so the confirm action does not render at all\n   * rather than rendering disabled — the same discipline saved blocks uses.\n   */\n  canRestore: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"confirm\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"tpl-preview-banner tpl:absolute tpl:top-14 tpl:right-0 tpl:left-0 tpl:z-40 tpl:flex tpl:items-center tpl:justify-center tpl:gap-4 tpl:px-4 tpl:py-3 tpl:bg-[var(--tpl-primary-light)] tpl:border-b tpl:border-[var(--tpl-primary)]\"\n    data-testid=\"version-preview-banner\"\n    role=\"status\"\n  >\n    <div\n      class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:text-[var(--tpl-text)]\"\n    >\n      <Clock\n        :size=\"18\"\n        :stroke-width=\"2\"\n        class=\"tpl:text-[var(--tpl-primary)]\"\n      />\n      <span>{{ t.versionPreview.message }}</span>\n    </div>\n    <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <button\n        :class=\"ghostBtnClass\"\n        style=\"background-color: transparent\"\n        data-testid=\"version-preview-cancel\"\n        @click=\"emit('cancel')\"\n      >\n        {{ t.versionPreview.cancel }}\n      </button>\n      <button\n        v-if=\"canRestore\"\n        :class=\"primaryBtnClass\"\n        data-testid=\"version-preview-restore\"\n        @click=\"emit('confirm')\"\n      >\n        {{ t.versionPreview.restore }}\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ghostBtnClass, primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Shown while a past version is on the canvas instead of the user's own work.\n * Cancel puts the pre-preview content back; Restore makes the version current.\n *\n * Lives outside `src/cloud/` because version history is a BYO provider, not a\n * Cloud feature — a consumer's own `versionHistory` provider drives this banner\n * with no Cloud involved.\n */\nimport { Clock } from \"@lucide/vue\";\nimport { useI18n } from \"../composables/useI18n\";\n\ndefineProps<{\n  visible: boolean;\n  /**\n   * Whether the provider supplied `restore`. When it didn't, history is\n   * browse-and-preview only, so the confirm action does not render at all\n   * rather than rendering disabled — the same discipline saved blocks uses.\n   */\n  canRestore: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"confirm\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"tpl-preview-banner tpl:absolute tpl:top-14 tpl:right-0 tpl:left-0 tpl:z-40 tpl:flex tpl:items-center tpl:justify-center tpl:gap-4 tpl:px-4 tpl:py-3 tpl:bg-[var(--tpl-primary-light)] tpl:border-b tpl:border-[var(--tpl-primary)]\"\n    data-testid=\"version-preview-banner\"\n    role=\"status\"\n  >\n    <div\n      class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:text-[var(--tpl-text)]\"\n    >\n      <Clock\n        :size=\"18\"\n        :stroke-width=\"2\"\n        class=\"tpl:text-[var(--tpl-primary)]\"\n      />\n      <span>{{ t.versionPreview.message }}</span>\n    </div>\n    <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <button\n        :class=\"ghostBtnClass\"\n        style=\"background-color: transparent\"\n        data-testid=\"version-preview-cancel\"\n        @click=\"emit('cancel')\"\n      >\n        {{ t.versionPreview.cancel }}\n      </button>\n      <button\n        v-if=\"canRestore\"\n        :class=\"primaryBtnClass\"\n        data-testid=\"version-preview-restore\"\n        @click=\"emit('confirm')\"\n      >\n        {{ t.versionPreview.restore }}\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAuBA,IAAM,IAAO,GAKP,EAAE,SAAM,EAAQ;mBAKZ,EAAA,WADR,EAAA,GAAA,EAkCM,OAlCN,GAkCM,CA5BJ,EASM,OATN,GASM,CANJ,EAIE,EAAA,CAAA,GAAA;GAHC,MAAM;GACN,gBAAc;GACf,OAAM;EAER,CAAA,GAAA,EAA2C,QAAA,MAAA,EAAlC,EAAA,CAAA,CAAC,CAAC,eAAe,OAAO,GAAA,CAAA,CAAA,CAAA,GAEnC,EAiBM,OAjBN,GAiBM,CAhBJ,EAOS,UAAA;GANN,OAAK,EAAE,EAAA,CAAA,CAAa;GACrB,OAAA,EAAA,oBAAA,cAAA;GACA,eAAY;GACX,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,QAAA;EAET,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,eAAe,MAAM,GAAA,CAAA,GAGpB,EAAA,cADR,EAAA,GAAA,EAOS,UAAA;;GALN,OAAK,EAAE,EAAA,CAAA,CAAe;GACvB,eAAY;GACX,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,SAAA;EAET,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,eAAe,OAAO,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/cdn/chunks/WrapperBlock-Ch4KeMIb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"WrapperBlock-Ch4KeMIb.js","names":[],"sources":["../../../src/utils/emailFrameWidth.ts","../../../src/components/blocks/WrapperBlock.vue","../../../src/components/blocks/WrapperBlock.vue"],"sourcesContent":["import type { TemplateSettings, ViewportSize } from \"@templatical/types\";\n\n/**\n * Width a mobile preview renders at. Not the template's own width — a phone\n * viewport is narrower than any sensible email body, so every viewport-aware\n * surface clamps to this.\n */\nexport const MOBILE_EMAIL_WIDTH = 375;\n\n/**\n * Fallback body width when no template settings are available — headless mounts\n * and tests. Matches `createDefaultTemplateContent`'s default.\n */\nexport const DEFAULT_EMAIL_WIDTH = 600;\n\n/**\n * The width an email body lays itself out against, for a given viewport.\n *\n * **The single source of truth for every surface that renders blocks**: the\n * canvas, the preview canvas, and the save dialog's scaled preview rows. They\n * have to agree — `SavedBlockPreviewRow` divides by this number to compute its\n * `transform: scale()`, so if it and the canvas disagreed the rows would be\n * scaled by the wrong factor and overflow or under-fill their frame. Sharing one\n * function makes that agreement structural instead of three constants that happen\n * to match today.\n *\n * Pass the *current* template's settings even when previewing content from\n * elsewhere (a saved block stores only `Block[]`): the current settings are what\n * the content will actually be rendered at.\n */\nexport function getEmailFrameWidth(\n  settings: TemplateSettings | undefined,\n  viewport: ViewportSize = \"desktop\",\n): number {\n  if (viewport === \"mobile\") return MOBILE_EMAIL_WIDTH;\n  return settings?.width ?? DEFAULT_EMAIL_WIDTH;\n}\n\n/**\n * Band of email background shown on each side of the content column.\n *\n * A surface that renders blocks at exactly the body width has nowhere for\n * `settings.backgroundColor` to show: a full-width section's own background\n * covers every pixel of it, so the body colour reads as unset even though the\n * sent email paints it across the whole client viewport. The gutter is what\n * makes it visible, mirroring how `mj-body background-color` renders beside the\n * centred content.\n *\n * Fixed rather than \"fill the container\" so the band never overwhelms the\n * content on a wide monitor. `Canvas.vue` adds it to both sides of a fixed\n * stage; `BlockPreviewCanvas` treats it as the cap on a fluid one, because a\n * fixed 792px stage overflows every dialog it lives in.\n */\nexport const EMAIL_GUTTER = 96;\n\n/**\n * How a viewport switch animates the frame.\n *\n * Lives here rather than being written out per call site so every surface that\n * switches viewport eases identically — the canvas's toggle and the test-email\n * dialog's should feel like the same control, not two similar ones. The slight\n * overshoot in the curve is deliberate and matches the editor's other viewport\n * transitions.\n *\n * Only `width` transitions: block content re-flows for the new viewport in the\n * same frame, exactly as it does on the canvas, so animating height as well would\n * lag the reflow behind the frame.\n */\nexport const EMAIL_FRAME_WIDTH_TRANSITION =\n  \"width 300ms cubic-bezier(0.34, 1.56, 0.64, 1)\";\n","<script setup lang=\"ts\">\nimport {\n  getBlockWrapperStyle,\n  getWrapperStyle,\n  resolveBlockComponent,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  ViewportSize,\n  WrapperBlock as WrapperBlockType,\n} from \"@templatical/types\";\nimport { computed, inject } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\ndefineOptions({ name: \"WrapperBlock\" });\n\nconst props = defineProps<{\n  block: WrapperBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst wrapperStyle = computed(() => getWrapperStyle(props.block) ?? {});\n\nfunction getBlockComponent(block: Block) {\n  // Children resolve through the registry (title, section, …). No local\n  // fallback map: a Canvas import of PreviewSectionBlock (or a preview import\n  // of SectionBlock) would pull the other surface's tree into this band.\n  return resolveBlockComponent(block, blockRegistry, {});\n}\n</script>\n\n<template>\n  <div data-testid=\"layout-wrapper\" class=\"tpl:w-full\" :style=\"wrapperStyle\">\n    <div\n      v-for=\"child in block.children\"\n      :key=\"child.id\"\n      :data-block-id=\"child.id\"\n      :style=\"getBlockWrapperStyle(child)\"\n    >\n      <component\n        :is=\"getBlockComponent(child)\"\n        :block=\"child\"\n        :viewport=\"viewport\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  getBlockWrapperStyle,\n  getWrapperStyle,\n  resolveBlockComponent,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  ViewportSize,\n  WrapperBlock as WrapperBlockType,\n} from \"@templatical/types\";\nimport { computed, inject } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\ndefineOptions({ name: \"WrapperBlock\" });\n\nconst props = defineProps<{\n  block: WrapperBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst wrapperStyle = computed(() => getWrapperStyle(props.block) ?? {});\n\nfunction getBlockComponent(block: Block) {\n  // Children resolve through the registry (title, section, …). No local\n  // fallback map: a Canvas import of PreviewSectionBlock (or a preview import\n  // of SectionBlock) would pull the other surface's tree into this band.\n  return resolveBlockComponent(block, blockRegistry, {});\n}\n</script>\n\n<template>\n  <div data-testid=\"layout-wrapper\" class=\"tpl:w-full\" :style=\"wrapperStyle\">\n    <div\n      v-for=\"child in block.children\"\n      :key=\"child.id\"\n      :data-block-id=\"child.id\"\n      :style=\"getBlockWrapperStyle(child)\"\n    >\n      <component\n        :is=\"getBlockComponent(child)\"\n        :block=\"child\"\n        :viewport=\"viewport\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;AA8BA,SAAgB,EACd,GACA,IAAyB,WACjB;CAER,OADI,MAAa,WAAU,MACpB,GAAU,SAAA;AACnB;AAgCA,IAAa,IACX;;;;;;;;ECrDF,IAAM,IAAQ,GAKR,IAAgB,EAAO,GAAoB,IAAI,GAE/C,IAAe,QAAe,EAAgB,EAAM,KAAK,KAAK,CAAC,CAAC;EAEtE,SAAS,EAAkB,GAAc;GAIvC,OAAO,EAAsB,GAAO,GAAe,CAAC,CAAC;EACvD;oBAIE,EAAA,GAAA,EAaM,OAAA;GAbD,eAAY;GAAiB,OAAM;GAAc,OAAK,EAAE,EAAA,KAAY;EACvE,GAAA,EAAA,EAAA,EAAA,GAAA,EAWM,GAAA,MAAA,EAVY,EAAA,MAAM,WAAf,OADT,EAAA,GAAA,EAWM,OAAA;GATH,KAAK,EAAM;GACX,iBAAe,EAAM;GACrB,OAAK,EAAE,EAAA,CAAA,CAAoB,CAAC,CAAK,CAAA;EAElC,GAAA,EAAA,EAAA,GAAA,EAIE,EAHK,EAAkB,CAAK,CAAA,GAAA;GAC3B,OAAO;GACP,UAAU,EAAA"}

package/dist/cdn/chunks/blockTypeIcons-CyPXFh7L.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"blockTypeIcons-CyPXFh7L.js","names":[],"sources":["../../../src/utils/blockTypeIcons.ts"],"sourcesContent":["import {\n  Code,\n  Columns3,\n  Heading,\n  Image,\n  Minus,\n  MoveVertical,\n  Navigation,\n  Pilcrow,\n  Play,\n  RectangleHorizontal,\n  Share2,\n  Table,\n  Timer,\n} from \"@lucide/vue\";\nimport type { Component } from \"vue\";\n\nexport const blockTypeIcons: Record<string, Component> = {\n  section: Columns3,\n  title: Heading,\n  paragraph: Pilcrow,\n  image: Image,\n  button: RectangleHorizontal,\n  divider: Minus,\n  video: Play,\n  social: Share2,\n  menu: Navigation,\n  table: Table,\n  spacer: MoveVertical,\n  countdown: Timer,\n  html: Code,\n};\n"],"mappings":";;AAiBA,IAAa,IAA4C;CACvD,SAAS;CACT,OAAO;CACP,WAAW;CACX,OAAO;CACP,QAAQ;CACR,SAAS;CACT,OAAO;CACP,QAAQ;CACR,MAAM;CACN,OAAO;CACP,QAAQ;CACR,WAAW;CACX,MAAM;AACR"}