@templatical/editor 0.41.0 → 0.42.1

package/dist/cdn/chunks/SavedBlocksBrowserModal-DpXWf4Pi.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SavedBlocksBrowserModal-DpXWf4Pi.js","names":[],"sources":["../../../src/components/SavedBlocksBrowserModal.vue","../../../src/components/SavedBlocksBrowserModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables\";\nimport { blockTypeIcons } from \"../utils/blockTypeIcons\";\nimport { formatAbsoluteDateTime } from \"../utils/formatAbsoluteDateTime\";\nimport { formatRelativeTime } from \"../utils/formatRelativeTime\";\nimport {\n  SAVED_BLOCKS_KEY,\n  EDITOR_KEY,\n  UI_LOCALE_KEY,\n  requireInject,\n} from \"../keys\";\nimport type { SavedBlock } from \"@templatical/types\";\nimport { Package, Pencil, Search, Trash2, X } from \"@lucide/vue\";\nimport {\n  computed,\n  defineAsyncComponent,\n  inject,\n  nextTick,\n  ref,\n  watch,\n} from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\", saved: SavedBlock, insertIndex: number | undefined): void;\n}>();\n\nconst BlockPreviewCanvas = defineAsyncComponent(\n  () => import(\"./BlockPreviewCanvas.vue\"),\n);\n\nconst { t, format } = useI18n();\nconst savedBlocks = requireInject(SAVED_BLOCKS_KEY, \"SavedBlocksBrowserModal\");\nconst editor = requireInject(EDITOR_KEY, \"SavedBlocksBrowserModal\");\nconst uiLocale = inject(UI_LOCALE_KEY, undefined);\n\nconst searchQuery = ref(\"\");\n/** `\"\"` = no category filter. Matched exactly against `SavedBlock.category`. */\nconst categoryFilter = ref(\"\");\nconst selectedId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\nconst renamingId = ref<string | null>(null);\nconst renameDraft = ref(\"\");\nconst renameCategoryDraft = ref(\"\");\nconst renameInput = ref<HTMLInputElement | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\n// Order is the provider's to decide — the editor never re-sorts. Whatever\n// `list()` returns is what the user sees (the bundled localStorage adapter, for\n// instance, returns newest-first). Filters only narrow; they never reorder.\n//\n// Both filters run in memory over the loaded entries rather than round-tripping\n// to the provider: that keeps a BYO provider at four dumb methods, and it is\n// what lets the category options below be derived at all — a provider-filtered\n// response could not tell us which other categories exist.\nconst filtered = computed(() => {\n  const query = searchQuery.value.trim().toLowerCase();\n  const category = categoryFilter.value;\n  return savedBlocks.savedBlocks.value.filter((b) => {\n    if (query && !b.name.toLowerCase().includes(query)) return false;\n    if (category && b.category !== category) return false;\n    return true;\n  });\n});\n\n/**\n * The list is fetched when this modal opens, not at editor mount, so a first\n * open can arrive before the provider answers. Show the skeleton only while\n * there is *nothing* to display: on a reopen the previous entries render\n * immediately and the refetch lands underneath them.\n *\n * Without this the empty state would claim \"No saved blocks yet\" for the whole\n * duration of the request — false, not merely unhelpful.\n */\nconst isInitialLoad = computed(\n  () =>\n    savedBlocks.isLoading.value && savedBlocks.savedBlocks.value.length === 0,\n);\n\n/** Whether any filter is narrowing the list — drives the empty-state copy. */\nconst isFiltering = computed(\n  () => searchQuery.value.trim().length > 0 || categoryFilter.value !== \"\",\n);\n\nconst selected = computed(() => {\n  if (!selectedId.value) return null;\n  return (\n    savedBlocks.savedBlocks.value.find((b) => b.id === selectedId.value) ?? null\n  );\n});\n\ninterface PositionOption {\n  value: string;\n  label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n  const options: PositionOption[] = [\n    { value: \"beginning\", label: t.savedBlocks.insertAtBeginning },\n  ];\n  const blocks = editor.content.value.blocks;\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    const typeKey = block.type as keyof typeof t.blocks;\n    const label = t.blocks[typeKey] ?? block.type;\n    options.push({\n      value: block.id,\n      label: format(t.savedBlocks.insertAfterBlock, {\n        block: `${label} ${i + 1}`,\n      }),\n    });\n  }\n  options.push({ value: \"end\", label: t.savedBlocks.insertAtEnd });\n  return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n  if (insertPosition.value === \"end\") return undefined;\n  if (insertPosition.value === \"beginning\") return 0;\n  const blocks = editor.content.value.blocks;\n  const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n  if (idx !== -1) return idx + 1;\n  return undefined;\n});\n\n// `immediate` matters: the modal is mounted lazily behind a `v-if` on the same\n// state that drives `visible`, so it can mount with `visible` already true and\n// would otherwise never resolve the default insert position.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      searchQuery.value = \"\";\n      categoryFilter.value = \"\";\n      selectedId.value = null;\n      confirmDeleteId.value = null;\n      renamingId.value = null;\n      // Default to after selected block, or end\n      const selectedBlockId = editor.state.selectedBlockId;\n      if (selectedBlockId) {\n        const idx = editor.content.value.blocks.findIndex(\n          (b) => b.id === selectedBlockId,\n        );\n        insertPosition.value = idx !== -1 ? selectedBlockId : \"end\";\n      } else {\n        insertPosition.value = \"end\";\n      }\n    }\n  },\n  { immediate: true },\n);\n\nfunction getBlockTypeIcons(\n  saved: SavedBlock,\n): { type: string; icon: unknown }[] {\n  const icons: { type: string; icon: unknown }[] = [];\n  const seen = new Set<string>();\n  for (const block of saved.content) {\n    if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n      seen.add(block.type);\n      icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n    }\n    if (icons.length >= 5) break;\n  }\n  return icons;\n}\n\nfunction getRemainingTypeCount(saved: SavedBlock): number {\n  const types = new Set(saved.content.map((b) => b.type));\n  return Math.max(0, types.size - 5);\n}\n\n/** Compact \"5m ago\" label, or \"\" when the provider supplies no usable timestamp. */\nfunction relativeLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatRelativeTime(raw, t.time, format) ?? \"\";\n}\n\n/**\n * Absolute timestamp for the row's tooltip. Built by `Intl`, so it needs no\n * i18n keys — but it does need the editor's locale, or it formats in the\n * browser's and disagrees with the translated row beside it.\n */\nfunction absoluteLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatAbsoluteDateTime(raw, uiLocale);\n}\n\nasync function handleDelete(id: string): Promise<void> {\n  try {\n    await savedBlocks.remove(id);\n    if (selectedId.value === id) {\n      selectedId.value = null;\n    }\n  } finally {\n    confirmDeleteId.value = null;\n  }\n}\n\nasync function startRename(saved: SavedBlock): Promise<void> {\n  // The pencil is already hidden when editing isn't permitted; this stops a\n  // programmatic call opening an editor whose commit could only fail.\n  if (!savedBlocks.canUpdateBlock(saved)) return;\n  renamingId.value = saved.id;\n  renameDraft.value = saved.name;\n  renameCategoryDraft.value = saved.category ?? \"\";\n  confirmDeleteId.value = null;\n  await nextTick();\n  renameInput.value?.focus();\n  renameInput.value?.select();\n}\n\nfunction cancelRename(): void {\n  renamingId.value = null;\n  renameDraft.value = \"\";\n  renameCategoryDraft.value = \"\";\n}\n\nasync function commitRename(id: string): Promise<void> {\n  // Guards two races: Escape sets `renamingId` to null and the unmounting\n  // input can still emit `blur`, and Enter commits then blurs. Either would\n  // otherwise fire a second, unwanted update.\n  if (renamingId.value !== id) return;\n  const nextName = renameDraft.value.trim();\n  const nextCategory = renameCategoryDraft.value.trim();\n  const current = savedBlocks.savedBlocks.value.find((b) => b.id === id);\n\n  // An empty name is not a rename — fall back to what's stored, so clearing\n  // the field and blurring can't wipe the entry's name.\n  const patch: Partial<{ name: string; category: string }> = {};\n  if (nextName && nextName !== current?.name) patch.name = nextName;\n  // \"\" is meaningful here: it clears the category. Only skip when unchanged.\n  if (nextCategory !== (current?.category ?? \"\")) patch.category = nextCategory;\n\n  // Skip the round-trip when nothing actually changed.\n  if (Object.keys(patch).length === 0) {\n    cancelRename();\n    return;\n  }\n  try {\n    await savedBlocks.update(id, patch);\n  } finally {\n    cancelRename();\n  }\n}\n\n/**\n * Commit when focus leaves the edit row entirely — not when it moves between\n * the name and category inputs. A plain `@blur` on each input would commit\n * (and unmount the row) the moment the user tabbed from one to the other.\n */\nfunction onEditFocusOut(event: FocusEvent, id: string): void {\n  const row = event.currentTarget as HTMLElement;\n  const next = event.relatedTarget as Node | null;\n  if (next && row.contains(next)) return;\n  void commitRename(id);\n}\n\nfunction handleInsert(): void {\n  if (selected.value) {\n    emit(\"insert\", selected.value, resolvedInsertIndex.value);\n  }\n}\n\nfunction handleClose(): void {\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  // While renaming, Enter/Escape belong to the inline input, not the dialog.\n  if (renamingId.value) return;\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n  if (event.key === \"Enter\" && selected.value) {\n    event.preventDefault();\n    handleInsert();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Explicit width, not `w-full`: the modal's parent is shrink-to-fit, so\n         `width: 100%` resolved against its own contents and the 600px preview\n         canvas drove the dialog's size — it measured 523px with nothing selected\n         and 965px with a block selected, nearly doubling on click. A pinned\n         width makes every state identical and stops any future right-pane\n         content from moving it. `max-w-full` keeps it inside the backdrop on\n         narrow hosts — a percentage, so it neither reintroduces the `rem`\n         sensitivity of issue #209 nor the viewport mismatch of issue #575; the\n         preview scrolls within. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-testid=\"saved-blocks-browser\"\n      aria-labelledby=\"tpl-saved-blocks-browser-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-[1000px] tpl:max-w-full tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n      >\n        <h3\n          id=\"tpl-saved-blocks-browser-title\"\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ t.savedBlocks.browse }}\n        </h3>\n        <button\n          :aria-label=\"t.savedBlocks.close\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n          @click=\"handleClose\"\n        >\n          <X :size=\"16\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n        <!-- Left panel: saved block list -->\n        <div\n          class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n        >\n          <!-- Search + category filter -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:px-4 tpl:pt-4 tpl:pb-3\"\n          >\n            <div class=\"tpl:relative\">\n              <Search\n                :size=\"14\"\n                :stroke-width=\"2\"\n                class=\"tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                :placeholder=\"t.savedBlocks.search\"\n                :disabled=\"isInitialLoad\"\n                class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n              />\n            </div>\n            <!-- Only worth showing once something is actually categorised. -->\n            <select\n              v-if=\"savedBlocks.categories.value.length > 0\"\n              v-model=\"categoryFilter\"\n              data-testid=\"saved-blocks-category-filter\"\n              :aria-label=\"t.savedBlocks.filterByCategory\"\n              class=\"tpl:h-8 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n            >\n              <option value=\"\">{{ t.savedBlocks.allCategories }}</option>\n              <option\n                v-for=\"option in savedBlocks.categories.value\"\n                :key=\"option\"\n                :value=\"option\"\n              >\n                {{ option }}\n              </option>\n            </select>\n          </div>\n\n          <!-- Suggestions for the inline category editor, shared by every row -->\n          <datalist id=\"tpl-saved-block-browser-categories\">\n            <option\n              v-for=\"option in savedBlocks.categories.value\"\n              :key=\"option\"\n              :value=\"option\"\n            />\n          </datalist>\n\n          <!-- List -->\n          <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n            <!-- Skeleton rows: same height and gap as a real card, so the pane\n                 doesn't resize when the entries land. `aria-busy` on the region\n                 is what a screen reader announces; the bars are decorative. -->\n            <div\n              v-if=\"isInitialLoad\"\n              data-testid=\"saved-blocks-loading\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n              role=\"status\"\n              aria-busy=\"true\"\n              :aria-label=\"t.savedBlocks.loading\"\n            >\n              <div\n                v-for=\"n in 3\"\n                :key=\"n\"\n                aria-hidden=\"true\"\n                class=\"tpl-saved-block-skeleton tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)]\"\n              >\n                <div\n                  class=\"tpl:h-3 tpl:w-1/2 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n                <div\n                  class=\"tpl:mt-2 tpl:h-2.5 tpl:w-1/4 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n              </div>\n            </div>\n\n            <div\n              v-else-if=\"filtered.length > 0\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n            >\n              <template v-for=\"item in filtered\" :key=\"item.id\">\n                <!-- Inline rename replaces the whole row: an <input> nested\n                     inside the card <button> would be invalid markup and\n                     wouldn't focus reliably. -->\n                <div\n                  v-if=\"renamingId === item.id\"\n                  class=\"tpl:flex tpl:w-full tpl:flex-col tpl:gap-1 tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-primary)]\"\n                  style=\"background-color: var(--tpl-primary-light)\"\n                  @focusout=\"onEditFocusOut($event, item.id)\"\n                >\n                  <input\n                    :ref=\"(el) => (renameInput = el as HTMLInputElement | null)\"\n                    v-model=\"renameDraft\"\n                    type=\"text\"\n                    :aria-label=\"t.savedBlocks.rename\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                  <input\n                    v-model=\"renameCategoryDraft\"\n                    type=\"text\"\n                    data-testid=\"saved-blocks-edit-category\"\n                    :aria-label=\"t.savedBlocks.category\"\n                    :placeholder=\"t.savedBlocks.categoryPlaceholder\"\n                    list=\"tpl-saved-block-browser-categories\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                </div>\n\n                <button\n                  v-else\n                  type=\"button\"\n                  data-testid=\"saved-block-card\"\n                  :aria-pressed=\"selectedId === item.id\"\n                  class=\"tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]\"\n                  :style=\"{\n                    borderColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary)'\n                        : 'var(--tpl-border)',\n                    backgroundColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary-light)'\n                        : 'transparent',\n                  }\"\n                  @click=\"selectedId = item.id\"\n                >\n                  <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n                    <span\n                      class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                    >\n                      {{ item.name }}\n                    </span>\n                    <span\n                      class=\"tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                    >\n                      {{\n                        format(t.savedBlocks.blockCount, {\n                          count: item.content.length,\n                        })\n                      }}\n                    </span>\n                  </div>\n                  <div\n                    v-if=\"item.category\"\n                    class=\"tpl:mt-1 tpl:flex tpl:items-center\"\n                  >\n                    <span\n                      data-testid=\"saved-block-category\"\n                      class=\"tpl:max-w-full tpl:truncate tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]\"\n                    >\n                      {{ item.category }}\n                    </span>\n                  </div>\n                  <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n                    <component\n                      :is=\"icon.icon\"\n                      v-for=\"icon in getBlockTypeIcons(item)\"\n                      :key=\"icon.type\"\n                      :size=\"14\"\n                      :stroke-width=\"1.5\"\n                      class=\"tpl:text-[var(--tpl-text-dim)]\"\n                    />\n                    <span\n                      v-if=\"getRemainingTypeCount(item) > 0\"\n                      class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      +{{ getRemainingTypeCount(item) }}\n                    </span>\n                    <span\n                      v-if=\"relativeLabel(item)\"\n                      data-testid=\"saved-block-updated\"\n                      class=\"tpl:ml-1 tpl:truncate tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                      :title=\"absoluteLabel(item)\"\n                    >\n                      {{ relativeLabel(item) }}\n                    </span>\n                    <button\n                      v-if=\"confirmDeleteId === item.id\"\n                      :aria-label=\"t.savedBlocks.deleteConfirm\"\n                      class=\"tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]\"\n                      style=\"background-color: transparent\"\n                      @click.stop=\"handleDelete(item.id)\"\n                    >\n                      {{ t.savedBlocks.deleteConfirm }}\n                    </button>\n                    <!-- Hidden, not disabled: an action the user can't perform\n                         is better absent than greyed out. `ml-auto` moves to\n                         whichever button survives so the row stays aligned. -->\n                    <template v-else>\n                      <button\n                        v-if=\"savedBlocks.canUpdateBlock(item)\"\n                        class=\"tpl-saved-block-rename-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :aria-label=\"t.savedBlocks.rename\"\n                        :title=\"t.savedBlocks.rename\"\n                        @click.stop=\"startRename(item)\"\n                      >\n                        <Pencil :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                      <button\n                        v-if=\"savedBlocks.canDeleteBlock(item)\"\n                        class=\"tpl-saved-block-delete-btn tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :class=\"{\n                          'tpl:ml-auto': !savedBlocks.canUpdateBlock(item),\n                        }\"\n                        :aria-label=\"t.savedBlocks.delete\"\n                        :title=\"t.savedBlocks.delete\"\n                        @click.stop=\"confirmDeleteId = item.id\"\n                      >\n                        <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                    </template>\n                  </div>\n                </button>\n              </template>\n            </div>\n\n            <!-- Empty state — only once we actually know the library is empty -->\n            <div\n              v-else\n              class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n            >\n              <Package\n                :size=\"32\"\n                :stroke-width=\"1\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <p\n                v-if=\"isFiltering\"\n                class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ t.savedBlocks.noResults }}\n              </p>\n              <template v-else>\n                <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n                  {{ t.savedBlocks.empty }}\n                </p>\n                <p\n                  class=\"tpl:mt-1 tpl:max-w-[220px] tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n                >\n                  {{ t.savedBlocks.emptyHint }}\n                </p>\n              </template>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right panel: preview -->\n        <div\n          class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n        >\n          <div\n            v-if=\"selected\"\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n          >\n            <!-- Visual preview -->\n            <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n              <BlockPreviewCanvas :blocks=\"selected.content\" />\n            </div>\n          </div>\n\n          <!-- Empty preview state -->\n          <div\n            v-else\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n          >\n            <Package\n              :size=\"32\"\n              :stroke-width=\"1\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ t.savedBlocks.selectToPreview }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n      >\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <label\n            class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ t.savedBlocks.insertPosition }}\n          </label>\n          <select\n            v-model=\"insertPosition\"\n            class=\"tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          >\n            <option\n              v-for=\"opt in positionOptions\"\n              :key=\"opt.value\"\n              :value=\"opt.value\"\n            >\n              {{ opt.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"tpl:flex tpl:gap-2\">\n          <button\n            type=\"button\"\n            data-testid=\"saved-blocks-browser-close\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n            @click=\"handleClose\"\n          >\n            {{ t.savedBlocks.close }}\n          </button>\n          <button\n            type=\"button\"\n            :class=\"primaryBtnClass\"\n            :disabled=\"!selected\"\n            @click=\"handleInsert\"\n          >\n            {{ t.savedBlocks.insert }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </TplModal>\n</template>\n\n<style>\n/* Subtle breathing so the placeholders read as \"loading\" rather than as empty\n   rows. `prefers-reduced-motion` holds them still at full opacity — the bars\n   still communicate shape without animating. */\n.tpl-saved-block-skeleton {\n  animation: tpl-saved-block-pulse 1.4s ease-in-out infinite;\n}\n\n@keyframes tpl-saved-block-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.55;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-saved-block-skeleton {\n    animation: none;\n  }\n}\n\n.tpl-saved-block-delete-btn:hover {\n  color: var(--tpl-danger) !important;\n}\n\n.tpl-saved-block-rename-btn:hover {\n  color: var(--tpl-primary) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables\";\nimport { blockTypeIcons } from \"../utils/blockTypeIcons\";\nimport { formatAbsoluteDateTime } from \"../utils/formatAbsoluteDateTime\";\nimport { formatRelativeTime } from \"../utils/formatRelativeTime\";\nimport {\n  SAVED_BLOCKS_KEY,\n  EDITOR_KEY,\n  UI_LOCALE_KEY,\n  requireInject,\n} from \"../keys\";\nimport type { SavedBlock } from \"@templatical/types\";\nimport { Package, Pencil, Search, Trash2, X } from \"@lucide/vue\";\nimport {\n  computed,\n  defineAsyncComponent,\n  inject,\n  nextTick,\n  ref,\n  watch,\n} from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\", saved: SavedBlock, insertIndex: number | undefined): void;\n}>();\n\nconst BlockPreviewCanvas = defineAsyncComponent(\n  () => import(\"./BlockPreviewCanvas.vue\"),\n);\n\nconst { t, format } = useI18n();\nconst savedBlocks = requireInject(SAVED_BLOCKS_KEY, \"SavedBlocksBrowserModal\");\nconst editor = requireInject(EDITOR_KEY, \"SavedBlocksBrowserModal\");\nconst uiLocale = inject(UI_LOCALE_KEY, undefined);\n\nconst searchQuery = ref(\"\");\n/** `\"\"` = no category filter. Matched exactly against `SavedBlock.category`. */\nconst categoryFilter = ref(\"\");\nconst selectedId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\nconst renamingId = ref<string | null>(null);\nconst renameDraft = ref(\"\");\nconst renameCategoryDraft = ref(\"\");\nconst renameInput = ref<HTMLInputElement | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\n// Order is the provider's to decide — the editor never re-sorts. Whatever\n// `list()` returns is what the user sees (the bundled localStorage adapter, for\n// instance, returns newest-first). Filters only narrow; they never reorder.\n//\n// Both filters run in memory over the loaded entries rather than round-tripping\n// to the provider: that keeps a BYO provider at four dumb methods, and it is\n// what lets the category options below be derived at all — a provider-filtered\n// response could not tell us which other categories exist.\nconst filtered = computed(() => {\n  const query = searchQuery.value.trim().toLowerCase();\n  const category = categoryFilter.value;\n  return savedBlocks.savedBlocks.value.filter((b) => {\n    if (query && !b.name.toLowerCase().includes(query)) return false;\n    if (category && b.category !== category) return false;\n    return true;\n  });\n});\n\n/**\n * The list is fetched when this modal opens, not at editor mount, so a first\n * open can arrive before the provider answers. Show the skeleton only while\n * there is *nothing* to display: on a reopen the previous entries render\n * immediately and the refetch lands underneath them.\n *\n * Without this the empty state would claim \"No saved blocks yet\" for the whole\n * duration of the request — false, not merely unhelpful.\n */\nconst isInitialLoad = computed(\n  () =>\n    savedBlocks.isLoading.value && savedBlocks.savedBlocks.value.length === 0,\n);\n\n/** Whether any filter is narrowing the list — drives the empty-state copy. */\nconst isFiltering = computed(\n  () => searchQuery.value.trim().length > 0 || categoryFilter.value !== \"\",\n);\n\nconst selected = computed(() => {\n  if (!selectedId.value) return null;\n  return (\n    savedBlocks.savedBlocks.value.find((b) => b.id === selectedId.value) ?? null\n  );\n});\n\ninterface PositionOption {\n  value: string;\n  label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n  const options: PositionOption[] = [\n    { value: \"beginning\", label: t.savedBlocks.insertAtBeginning },\n  ];\n  const blocks = editor.content.value.blocks;\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    const typeKey = block.type as keyof typeof t.blocks;\n    const label = t.blocks[typeKey] ?? block.type;\n    options.push({\n      value: block.id,\n      label: format(t.savedBlocks.insertAfterBlock, {\n        block: `${label} ${i + 1}`,\n      }),\n    });\n  }\n  options.push({ value: \"end\", label: t.savedBlocks.insertAtEnd });\n  return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n  if (insertPosition.value === \"end\") return undefined;\n  if (insertPosition.value === \"beginning\") return 0;\n  const blocks = editor.content.value.blocks;\n  const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n  if (idx !== -1) return idx + 1;\n  return undefined;\n});\n\n// `immediate` matters: the modal is mounted lazily behind a `v-if` on the same\n// state that drives `visible`, so it can mount with `visible` already true and\n// would otherwise never resolve the default insert position.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      searchQuery.value = \"\";\n      categoryFilter.value = \"\";\n      selectedId.value = null;\n      confirmDeleteId.value = null;\n      renamingId.value = null;\n      // Default to after selected block, or end\n      const selectedBlockId = editor.state.selectedBlockId;\n      if (selectedBlockId) {\n        const idx = editor.content.value.blocks.findIndex(\n          (b) => b.id === selectedBlockId,\n        );\n        insertPosition.value = idx !== -1 ? selectedBlockId : \"end\";\n      } else {\n        insertPosition.value = \"end\";\n      }\n    }\n  },\n  { immediate: true },\n);\n\nfunction getBlockTypeIcons(\n  saved: SavedBlock,\n): { type: string; icon: unknown }[] {\n  const icons: { type: string; icon: unknown }[] = [];\n  const seen = new Set<string>();\n  for (const block of saved.content) {\n    if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n      seen.add(block.type);\n      icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n    }\n    if (icons.length >= 5) break;\n  }\n  return icons;\n}\n\nfunction getRemainingTypeCount(saved: SavedBlock): number {\n  const types = new Set(saved.content.map((b) => b.type));\n  return Math.max(0, types.size - 5);\n}\n\n/** Compact \"5m ago\" label, or \"\" when the provider supplies no usable timestamp. */\nfunction relativeLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatRelativeTime(raw, t.time, format) ?? \"\";\n}\n\n/**\n * Absolute timestamp for the row's tooltip. Built by `Intl`, so it needs no\n * i18n keys — but it does need the editor's locale, or it formats in the\n * browser's and disagrees with the translated row beside it.\n */\nfunction absoluteLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatAbsoluteDateTime(raw, uiLocale);\n}\n\nasync function handleDelete(id: string): Promise<void> {\n  try {\n    await savedBlocks.remove(id);\n    if (selectedId.value === id) {\n      selectedId.value = null;\n    }\n  } finally {\n    confirmDeleteId.value = null;\n  }\n}\n\nasync function startRename(saved: SavedBlock): Promise<void> {\n  // The pencil is already hidden when editing isn't permitted; this stops a\n  // programmatic call opening an editor whose commit could only fail.\n  if (!savedBlocks.canUpdateBlock(saved)) return;\n  renamingId.value = saved.id;\n  renameDraft.value = saved.name;\n  renameCategoryDraft.value = saved.category ?? \"\";\n  confirmDeleteId.value = null;\n  await nextTick();\n  renameInput.value?.focus();\n  renameInput.value?.select();\n}\n\nfunction cancelRename(): void {\n  renamingId.value = null;\n  renameDraft.value = \"\";\n  renameCategoryDraft.value = \"\";\n}\n\nasync function commitRename(id: string): Promise<void> {\n  // Guards two races: Escape sets `renamingId` to null and the unmounting\n  // input can still emit `blur`, and Enter commits then blurs. Either would\n  // otherwise fire a second, unwanted update.\n  if (renamingId.value !== id) return;\n  const nextName = renameDraft.value.trim();\n  const nextCategory = renameCategoryDraft.value.trim();\n  const current = savedBlocks.savedBlocks.value.find((b) => b.id === id);\n\n  // An empty name is not a rename — fall back to what's stored, so clearing\n  // the field and blurring can't wipe the entry's name.\n  const patch: Partial<{ name: string; category: string }> = {};\n  if (nextName && nextName !== current?.name) patch.name = nextName;\n  // \"\" is meaningful here: it clears the category. Only skip when unchanged.\n  if (nextCategory !== (current?.category ?? \"\")) patch.category = nextCategory;\n\n  // Skip the round-trip when nothing actually changed.\n  if (Object.keys(patch).length === 0) {\n    cancelRename();\n    return;\n  }\n  try {\n    await savedBlocks.update(id, patch);\n  } finally {\n    cancelRename();\n  }\n}\n\n/**\n * Commit when focus leaves the edit row entirely — not when it moves between\n * the name and category inputs. A plain `@blur` on each input would commit\n * (and unmount the row) the moment the user tabbed from one to the other.\n */\nfunction onEditFocusOut(event: FocusEvent, id: string): void {\n  const row = event.currentTarget as HTMLElement;\n  const next = event.relatedTarget as Node | null;\n  if (next && row.contains(next)) return;\n  void commitRename(id);\n}\n\nfunction handleInsert(): void {\n  if (selected.value) {\n    emit(\"insert\", selected.value, resolvedInsertIndex.value);\n  }\n}\n\nfunction handleClose(): void {\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  // While renaming, Enter/Escape belong to the inline input, not the dialog.\n  if (renamingId.value) return;\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n  if (event.key === \"Enter\" && selected.value) {\n    event.preventDefault();\n    handleInsert();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Explicit width, not `w-full`: the modal's parent is shrink-to-fit, so\n         `width: 100%` resolved against its own contents and the 600px preview\n         canvas drove the dialog's size — it measured 523px with nothing selected\n         and 965px with a block selected, nearly doubling on click. A pinned\n         width makes every state identical and stops any future right-pane\n         content from moving it. `max-w-full` keeps it inside the backdrop on\n         narrow hosts — a percentage, so it neither reintroduces the `rem`\n         sensitivity of issue #209 nor the viewport mismatch of issue #575; the\n         preview scrolls within. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-testid=\"saved-blocks-browser\"\n      aria-labelledby=\"tpl-saved-blocks-browser-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-[1000px] tpl:max-w-full tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n      >\n        <h3\n          id=\"tpl-saved-blocks-browser-title\"\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ t.savedBlocks.browse }}\n        </h3>\n        <button\n          :aria-label=\"t.savedBlocks.close\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n          @click=\"handleClose\"\n        >\n          <X :size=\"16\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n        <!-- Left panel: saved block list -->\n        <div\n          class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n        >\n          <!-- Search + category filter -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:px-4 tpl:pt-4 tpl:pb-3\"\n          >\n            <div class=\"tpl:relative\">\n              <Search\n                :size=\"14\"\n                :stroke-width=\"2\"\n                class=\"tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                :placeholder=\"t.savedBlocks.search\"\n                :disabled=\"isInitialLoad\"\n                class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n              />\n            </div>\n            <!-- Only worth showing once something is actually categorised. -->\n            <select\n              v-if=\"savedBlocks.categories.value.length > 0\"\n              v-model=\"categoryFilter\"\n              data-testid=\"saved-blocks-category-filter\"\n              :aria-label=\"t.savedBlocks.filterByCategory\"\n              class=\"tpl:h-8 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n            >\n              <option value=\"\">{{ t.savedBlocks.allCategories }}</option>\n              <option\n                v-for=\"option in savedBlocks.categories.value\"\n                :key=\"option\"\n                :value=\"option\"\n              >\n                {{ option }}\n              </option>\n            </select>\n          </div>\n\n          <!-- Suggestions for the inline category editor, shared by every row -->\n          <datalist id=\"tpl-saved-block-browser-categories\">\n            <option\n              v-for=\"option in savedBlocks.categories.value\"\n              :key=\"option\"\n              :value=\"option\"\n            />\n          </datalist>\n\n          <!-- List -->\n          <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n            <!-- Skeleton rows: same height and gap as a real card, so the pane\n                 doesn't resize when the entries land. `aria-busy` on the region\n                 is what a screen reader announces; the bars are decorative. -->\n            <div\n              v-if=\"isInitialLoad\"\n              data-testid=\"saved-blocks-loading\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n              role=\"status\"\n              aria-busy=\"true\"\n              :aria-label=\"t.savedBlocks.loading\"\n            >\n              <div\n                v-for=\"n in 3\"\n                :key=\"n\"\n                aria-hidden=\"true\"\n                class=\"tpl-saved-block-skeleton tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)]\"\n              >\n                <div\n                  class=\"tpl:h-3 tpl:w-1/2 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n                <div\n                  class=\"tpl:mt-2 tpl:h-2.5 tpl:w-1/4 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n              </div>\n            </div>\n\n            <div\n              v-else-if=\"filtered.length > 0\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n            >\n              <template v-for=\"item in filtered\" :key=\"item.id\">\n                <!-- Inline rename replaces the whole row: an <input> nested\n                     inside the card <button> would be invalid markup and\n                     wouldn't focus reliably. -->\n                <div\n                  v-if=\"renamingId === item.id\"\n                  class=\"tpl:flex tpl:w-full tpl:flex-col tpl:gap-1 tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-primary)]\"\n                  style=\"background-color: var(--tpl-primary-light)\"\n                  @focusout=\"onEditFocusOut($event, item.id)\"\n                >\n                  <input\n                    :ref=\"(el) => (renameInput = el as HTMLInputElement | null)\"\n                    v-model=\"renameDraft\"\n                    type=\"text\"\n                    :aria-label=\"t.savedBlocks.rename\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                  <input\n                    v-model=\"renameCategoryDraft\"\n                    type=\"text\"\n                    data-testid=\"saved-blocks-edit-category\"\n                    :aria-label=\"t.savedBlocks.category\"\n                    :placeholder=\"t.savedBlocks.categoryPlaceholder\"\n                    list=\"tpl-saved-block-browser-categories\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                </div>\n\n                <button\n                  v-else\n                  type=\"button\"\n                  data-testid=\"saved-block-card\"\n                  :aria-pressed=\"selectedId === item.id\"\n                  class=\"tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]\"\n                  :style=\"{\n                    borderColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary)'\n                        : 'var(--tpl-border)',\n                    backgroundColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary-light)'\n                        : 'transparent',\n                  }\"\n                  @click=\"selectedId = item.id\"\n                >\n                  <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n                    <span\n                      class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                    >\n                      {{ item.name }}\n                    </span>\n                    <span\n                      class=\"tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                    >\n                      {{\n                        format(t.savedBlocks.blockCount, {\n                          count: item.content.length,\n                        })\n                      }}\n                    </span>\n                  </div>\n                  <div\n                    v-if=\"item.category\"\n                    class=\"tpl:mt-1 tpl:flex tpl:items-center\"\n                  >\n                    <span\n                      data-testid=\"saved-block-category\"\n                      class=\"tpl:max-w-full tpl:truncate tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]\"\n                    >\n                      {{ item.category }}\n                    </span>\n                  </div>\n                  <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n                    <component\n                      :is=\"icon.icon\"\n                      v-for=\"icon in getBlockTypeIcons(item)\"\n                      :key=\"icon.type\"\n                      :size=\"14\"\n                      :stroke-width=\"1.5\"\n                      class=\"tpl:text-[var(--tpl-text-dim)]\"\n                    />\n                    <span\n                      v-if=\"getRemainingTypeCount(item) > 0\"\n                      class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      +{{ getRemainingTypeCount(item) }}\n                    </span>\n                    <span\n                      v-if=\"relativeLabel(item)\"\n                      data-testid=\"saved-block-updated\"\n                      class=\"tpl:ml-1 tpl:truncate tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                      :title=\"absoluteLabel(item)\"\n                    >\n                      {{ relativeLabel(item) }}\n                    </span>\n                    <button\n                      v-if=\"confirmDeleteId === item.id\"\n                      :aria-label=\"t.savedBlocks.deleteConfirm\"\n                      class=\"tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]\"\n                      style=\"background-color: transparent\"\n                      @click.stop=\"handleDelete(item.id)\"\n                    >\n                      {{ t.savedBlocks.deleteConfirm }}\n                    </button>\n                    <!-- Hidden, not disabled: an action the user can't perform\n                         is better absent than greyed out. `ml-auto` moves to\n                         whichever button survives so the row stays aligned. -->\n                    <template v-else>\n                      <button\n                        v-if=\"savedBlocks.canUpdateBlock(item)\"\n                        class=\"tpl-saved-block-rename-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :aria-label=\"t.savedBlocks.rename\"\n                        :title=\"t.savedBlocks.rename\"\n                        @click.stop=\"startRename(item)\"\n                      >\n                        <Pencil :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                      <button\n                        v-if=\"savedBlocks.canDeleteBlock(item)\"\n                        class=\"tpl-saved-block-delete-btn tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :class=\"{\n                          'tpl:ml-auto': !savedBlocks.canUpdateBlock(item),\n                        }\"\n                        :aria-label=\"t.savedBlocks.delete\"\n                        :title=\"t.savedBlocks.delete\"\n                        @click.stop=\"confirmDeleteId = item.id\"\n                      >\n                        <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                    </template>\n                  </div>\n                </button>\n              </template>\n            </div>\n\n            <!-- Empty state — only once we actually know the library is empty -->\n            <div\n              v-else\n              class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n            >\n              <Package\n                :size=\"32\"\n                :stroke-width=\"1\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <p\n                v-if=\"isFiltering\"\n                class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ t.savedBlocks.noResults }}\n              </p>\n              <template v-else>\n                <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n                  {{ t.savedBlocks.empty }}\n                </p>\n                <p\n                  class=\"tpl:mt-1 tpl:max-w-[220px] tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n                >\n                  {{ t.savedBlocks.emptyHint }}\n                </p>\n              </template>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right panel: preview -->\n        <div\n          class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n        >\n          <div\n            v-if=\"selected\"\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n          >\n            <!-- Visual preview -->\n            <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n              <BlockPreviewCanvas :blocks=\"selected.content\" />\n            </div>\n          </div>\n\n          <!-- Empty preview state -->\n          <div\n            v-else\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n          >\n            <Package\n              :size=\"32\"\n              :stroke-width=\"1\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ t.savedBlocks.selectToPreview }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n      >\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <label\n            class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ t.savedBlocks.insertPosition }}\n          </label>\n          <select\n            v-model=\"insertPosition\"\n            class=\"tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          >\n            <option\n              v-for=\"opt in positionOptions\"\n              :key=\"opt.value\"\n              :value=\"opt.value\"\n            >\n              {{ opt.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"tpl:flex tpl:gap-2\">\n          <button\n            type=\"button\"\n            data-testid=\"saved-blocks-browser-close\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n            @click=\"handleClose\"\n          >\n            {{ t.savedBlocks.close }}\n          </button>\n          <button\n            type=\"button\"\n            :class=\"primaryBtnClass\"\n            :disabled=\"!selected\"\n            @click=\"handleInsert\"\n          >\n            {{ t.savedBlocks.insert }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </TplModal>\n</template>\n\n<style>\n/* Subtle breathing so the placeholders read as \"loading\" rather than as empty\n   rows. `prefers-reduced-motion` holds them still at full opacity — the bars\n   still communicate shape without animating. */\n.tpl-saved-block-skeleton {\n  animation: tpl-saved-block-pulse 1.4s ease-in-out infinite;\n}\n\n@keyframes tpl-saved-block-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.55;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-saved-block-skeleton {\n    animation: none;\n  }\n}\n\n.tpl-saved-block-delete-btn:hover {\n  color: var(--tpl-danger) !important;\n}\n\n.tpl-saved-block-rename-btn:hover {\n  color: var(--tpl-primary) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/cdn/chunks/SavedBlocksPanels-B-ASmf1P.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SavedBlocksPanels-B-ASmf1P.js","names":[],"sources":["../../../src/components/SavedBlocksPanels.vue","../../../src/components/SavedBlocksPanels.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Mount point for the saved-blocks UI, shared by the OSS and Cloud editors.\n *\n * Everything here is `defineAsyncComponent` rendered behind `v-if` on its own\n * state, so each chunk is fetched only when actually needed —\n * `defineAsyncComponent` triggers its `import()` on first render, not at\n * definition time. `Editor.vue` in turn lazy-loads *this* wrapper and renders\n * it only when a `SavedBlocksProvider` is configured, so a consumer without one\n * downloads none of it.\n *\n * The pick bar lives here rather than in `Editor.vue` so the editor shell needs\n * no knowledge of saved blocks, and the lazy-load guarantee covers the bar too.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { SavedBlock } from \"@templatical/types\";\nimport type { UseSavedBlocksFeatureReturn } from \"../composables/useSavedBlocksFeature\";\n\nconst props = defineProps<{\n  feature: UseSavedBlocksFeatureReturn;\n}>();\n\nconst SavedBlocksPickBar = defineAsyncComponent(\n  () => import(\"./SavedBlocksPickBar.vue\"),\n);\nconst SaveBlockDialog = defineAsyncComponent(\n  () => import(\"./SaveBlockDialog.vue\"),\n);\nconst SavedBlocksBrowserModal = defineAsyncComponent(\n  () => import(\"./SavedBlocksBrowserModal.vue\"),\n);\n\nfunction handleInsert(\n  saved: SavedBlock,\n  insertIndex: number | undefined,\n): void {\n  props.feature.insert(saved, insertIndex);\n}\n</script>\n\n<template>\n  <SavedBlocksPickBar\n    v-if=\"feature.isPicking.value\"\n    :count=\"feature.pickedCount.value\"\n    @confirm=\"feature.confirmPicking()\"\n    @cancel=\"feature.cancelPicking()\"\n  />\n\n  <SaveBlockDialog\n    v-if=\"feature.isSaveDialogOpen.value\"\n    :visible=\"feature.isSaveDialogOpen.value\"\n    :picked-ids=\"[...feature.pickedIds.value]\"\n    @close=\"feature.closeSaveDialog()\"\n    @saved=\"feature.refresh()\"\n  />\n\n  <SavedBlocksBrowserModal\n    v-if=\"feature.isBrowserOpen.value\"\n    :visible=\"feature.isBrowserOpen.value\"\n    @close=\"feature.closeBrowser()\"\n    @insert=\"handleInsert\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Mount point for the saved-blocks UI, shared by the OSS and Cloud editors.\n *\n * Everything here is `defineAsyncComponent` rendered behind `v-if` on its own\n * state, so each chunk is fetched only when actually needed —\n * `defineAsyncComponent` triggers its `import()` on first render, not at\n * definition time. `Editor.vue` in turn lazy-loads *this* wrapper and renders\n * it only when a `SavedBlocksProvider` is configured, so a consumer without one\n * downloads none of it.\n *\n * The pick bar lives here rather than in `Editor.vue` so the editor shell needs\n * no knowledge of saved blocks, and the lazy-load guarantee covers the bar too.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { SavedBlock } from \"@templatical/types\";\nimport type { UseSavedBlocksFeatureReturn } from \"../composables/useSavedBlocksFeature\";\n\nconst props = defineProps<{\n  feature: UseSavedBlocksFeatureReturn;\n}>();\n\nconst SavedBlocksPickBar = defineAsyncComponent(\n  () => import(\"./SavedBlocksPickBar.vue\"),\n);\nconst SaveBlockDialog = defineAsyncComponent(\n  () => import(\"./SaveBlockDialog.vue\"),\n);\nconst SavedBlocksBrowserModal = defineAsyncComponent(\n  () => import(\"./SavedBlocksBrowserModal.vue\"),\n);\n\nfunction handleInsert(\n  saved: SavedBlock,\n  insertIndex: number | undefined,\n): void {\n  props.feature.insert(saved, insertIndex);\n}\n</script>\n\n<template>\n  <SavedBlocksPickBar\n    v-if=\"feature.isPicking.value\"\n    :count=\"feature.pickedCount.value\"\n    @confirm=\"feature.confirmPicking()\"\n    @cancel=\"feature.cancelPicking()\"\n  />\n\n  <SaveBlockDialog\n    v-if=\"feature.isSaveDialogOpen.value\"\n    :visible=\"feature.isSaveDialogOpen.value\"\n    :picked-ids=\"[...feature.pickedIds.value]\"\n    @close=\"feature.closeSaveDialog()\"\n    @saved=\"feature.refresh()\"\n  />\n\n  <SavedBlocksBrowserModal\n    v-if=\"feature.isBrowserOpen.value\"\n    :visible=\"feature.isBrowserOpen.value\"\n    @close=\"feature.closeBrowser()\"\n    @insert=\"handleInsert\"\n  />\n</template>\n"],"mappings":";;;;;;;EAkBA,IAAM,IAAQ,GAIR,IAAqB,QACnB,OAAO,mCACf,GACM,IAAkB,QAChB,OAAO,gCACf,GACM,IAA0B,QACxB,OAAO,wCACf;EAEA,SAAS,EACP,GACA,GACM;GACN,EAAM,QAAQ,OAAO,GAAO,CAAW;EACzC;;GAKU,EAAA,QAAQ,UAAU,SAD1B,EAAA,GAAA,EAKE,EAAA,CAAA,GAAA;;IAHC,OAAO,EAAA,QAAQ,YAAY;IAC3B,WAAO,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,eAAc;IAC/B,UAAM,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,cAAa;;GAIxB,EAAA,QAAQ,iBAAiB,SADjC,EAAA,GAAA,EAME,EAAA,CAAA,GAAA;;IAJC,SAAS,EAAA,QAAQ,iBAAiB;IAClC,cAAU,CAAA,GAAM,EAAA,QAAQ,UAAU,KAAK;IACvC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,gBAAe;IAC9B,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,QAAO;;GAIjB,EAAA,QAAQ,cAAc,SAD9B,EAAA,GAAA,EAKE,EAAA,CAAA,GAAA;;IAHC,SAAS,EAAA,QAAQ,cAAc;IAC/B,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,aAAY;IAC3B,UAAQ"}

package/dist/cdn/chunks/SavedBlocksPickBar-CEFIQ8Nd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SavedBlocksPickBar-CEFIQ8Nd.js","names":[],"sources":["../../../src/components/SavedBlocksPickBar.vue","../../../src/components/SavedBlocksPickBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Floating bar for an active pick session: how many blocks are picked, plus\n * Save and Cancel.\n *\n * Positioned like `EditorFooter` — absolute inside `.tpl`, NOT inside the\n * canvas body, whose `overflow: auto` would clip it. The rail offsets are the\n * non-preview ones because a session can't be active in preview mode\n * (`useSavedBlocksFeature` cancels it if preview turns on).\n */\nimport { useI18n } from \"../composables\";\nimport {\n  primaryBtnClass,\n  secondaryBtnClass,\n} from \"../constants/styleConstants\";\nimport { Bookmark, X } from \"@lucide/vue\";\n\nconst props = defineProps<{\n  count: number;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"confirm\"): void;\n  (e: \"cancel\"): void;\n}>();\n\nconst { t, format } = useI18n();\n\nfunction handleConfirm(): void {\n  if (props.count > 0) emit(\"confirm\");\n}\n</script>\n\n<template>\n  <div\n    data-testid=\"saved-blocks-pick-bar\"\n    class=\"tpl:absolute tpl:bottom-10 tpl:left-12 tpl:right-[320px] tpl:z-50 tpl:flex tpl:justify-center tpl:px-4\"\n    style=\"pointer-events: none\"\n  >\n    <div\n      role=\"toolbar\"\n      :aria-label=\"t.savedBlocks.pickToolbar\"\n      class=\"tpl-scale-in tpl:flex tpl:items-center tpl:gap-3 tpl:rounded-[var(--tpl-radius-lg)] tpl:border tpl:py-2 tpl:pl-4 tpl:pr-2 tpl:border-[var(--tpl-border)]\"\n      style=\"\n        pointer-events: auto;\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <div class=\"tpl:flex tpl:flex-col\">\n        <span\n          data-testid=\"saved-blocks-pick-count\"\n          class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\"\n        >\n          {{ format(t.savedBlocks.pickCount, { count }) }}\n        </span>\n        <span class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\">\n          {{ t.savedBlocks.pickHint }}\n        </span>\n      </div>\n\n      <div class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n        <button\n          type=\"button\"\n          data-testid=\"saved-blocks-pick-cancel\"\n          :class=\"secondaryBtnClass\"\n          @click=\"emit('cancel')\"\n        >\n          <X :size=\"13\" :stroke-width=\"2\" />\n          {{ t.savedBlocks.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"saved-blocks-pick-confirm\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"count === 0\"\n          @click=\"handleConfirm\"\n        >\n          <Bookmark :size=\"13\" :stroke-width=\"2\" />\n          {{ t.savedBlocks.save }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Floating bar for an active pick session: how many blocks are picked, plus\n * Save and Cancel.\n *\n * Positioned like `EditorFooter` — absolute inside `.tpl`, NOT inside the\n * canvas body, whose `overflow: auto` would clip it. The rail offsets are the\n * non-preview ones because a session can't be active in preview mode\n * (`useSavedBlocksFeature` cancels it if preview turns on).\n */\nimport { useI18n } from \"../composables\";\nimport {\n  primaryBtnClass,\n  secondaryBtnClass,\n} from \"../constants/styleConstants\";\nimport { Bookmark, X } from \"@lucide/vue\";\n\nconst props = defineProps<{\n  count: number;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"confirm\"): void;\n  (e: \"cancel\"): void;\n}>();\n\nconst { t, format } = useI18n();\n\nfunction handleConfirm(): void {\n  if (props.count > 0) emit(\"confirm\");\n}\n</script>\n\n<template>\n  <div\n    data-testid=\"saved-blocks-pick-bar\"\n    class=\"tpl:absolute tpl:bottom-10 tpl:left-12 tpl:right-[320px] tpl:z-50 tpl:flex tpl:justify-center tpl:px-4\"\n    style=\"pointer-events: none\"\n  >\n    <div\n      role=\"toolbar\"\n      :aria-label=\"t.savedBlocks.pickToolbar\"\n      class=\"tpl-scale-in tpl:flex tpl:items-center tpl:gap-3 tpl:rounded-[var(--tpl-radius-lg)] tpl:border tpl:py-2 tpl:pl-4 tpl:pr-2 tpl:border-[var(--tpl-border)]\"\n      style=\"\n        pointer-events: auto;\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <div class=\"tpl:flex tpl:flex-col\">\n        <span\n          data-testid=\"saved-blocks-pick-count\"\n          class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\"\n        >\n          {{ format(t.savedBlocks.pickCount, { count }) }}\n        </span>\n        <span class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\">\n          {{ t.savedBlocks.pickHint }}\n        </span>\n      </div>\n\n      <div class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n        <button\n          type=\"button\"\n          data-testid=\"saved-blocks-pick-cancel\"\n          :class=\"secondaryBtnClass\"\n          @click=\"emit('cancel')\"\n        >\n          <X :size=\"13\" :stroke-width=\"2\" />\n          {{ t.savedBlocks.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"saved-blocks-pick-confirm\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"count === 0\"\n          @click=\"handleConfirm\"\n        >\n          <Bookmark :size=\"13\" :stroke-width=\"2\" />\n          {{ t.savedBlocks.save }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAiBA,IAAM,IAAQ,GAIR,IAAO,GAKP,EAAE,MAAG,cAAW,EAAQ;EAE9B,SAAS,IAAsB;GAC7B,AAAI,EAAM,QAAQ,KAAG,EAAK,SAAS;EACrC;oBAIE,EAAA,GAAA,EAiDM,OAjDN,GAiDM,CA5CJ,EA2CM,OAAA;GA1CJ,MAAK;GACJ,cAAY,EAAA,CAAA,CAAC,CAAC,YAAY;GAC3B,OAAM;GACN,OAAA;IAAA,kBAAA;IAAA,oBAAA;IAAA,cAAA;GAAA;EAMA,GAAA,CAAA,EAUM,OAVN,GAUM,CATJ,EAKO,QALP,GAKO,EADF,EAAA,CAAA,CAAM,CAAC,EAAA,CAAA,CAAC,CAAC,YAAY,WAAS,EAAA,OAAI,EAAA,MAAK,CAAA,CAAA,GAAA,CAAA,GAE5C,EAEO,QAFP,GAEO,EADF,EAAA,CAAA,CAAC,CAAC,YAAY,QAAQ,GAAA,CAAA,CAAA,CAAA,GAI7B,EAoBM,OApBN,GAoBM,CAnBJ,EAQS,UAAA;GAPP,MAAK;GACL,eAAY;GACX,OAAK,EAAE,EAAA,CAAA,CAAiB;GACxB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,QAAA;EAEZ,GAAA,CAAA,EAAkC,EAAA,CAAA,GAAA;GAA9B,MAAM;GAAK,gBAAc;EAAK,CAAA,GAAA,EAAA,MAClC,EAAG,EAAA,CAAA,CAAC,CAAC,YAAY,MAAM,GAAA,CAAA,CAAA,GAAA,CAAA,GAEzB,EASS,UAAA;GARP,MAAK;GACL,eAAY;GACX,OAAK,EAAE,EAAA,CAAA,CAAe;GACtB,UAAU,EAAA,UAAK;GACf,SAAO;EAER,GAAA,CAAA,EAAyC,EAAA,CAAA,GAAA;GAA9B,MAAM;GAAK,gBAAc;EAAK,CAAA,GAAA,EAAA,MACzC,EAAG,EAAA,CAAA,CAAC,CAAC,YAAY,IAAI,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/cdn/chunks/TemplateScoringPanel-d_Ppowsq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplateScoringPanel-d_Ppowsq.js","names":[],"sources":["../../../src/cloud/utils/scoringStyles.ts","../../../src/cloud/components/TemplateScoringPanel.vue","../../../src/cloud/components/TemplateScoringPanel.vue"],"sourcesContent":["export type ScoringSeverity = \"high\" | \"medium\" | \"low\" | string;\n\nexport function scoreColor(score: number): string {\n  if (score >= 80) return \"var(--tpl-success)\";\n  if (score >= 60) return \"var(--tpl-warning)\";\n  return \"var(--tpl-danger)\";\n}\n\nexport function scoreBgColor(score: number): string {\n  if (score >= 80) return \"var(--tpl-success-light)\";\n  if (score >= 60) return \"var(--tpl-warning-light)\";\n  return \"var(--tpl-danger-light)\";\n}\n\nexport function severityColor(severity: ScoringSeverity): string {\n  if (severity === \"high\") return \"var(--tpl-danger)\";\n  if (severity === \"medium\") return \"var(--tpl-warning)\";\n  return \"var(--tpl-text-muted)\";\n}\n\nexport function severityBgColor(severity: ScoringSeverity): string {\n  if (severity === \"high\") return \"var(--tpl-danger-light)\";\n  if (severity === \"medium\") return \"var(--tpl-warning-light)\";\n  return \"var(--tpl-bg-hover)\";\n}\n","<script setup lang=\"ts\">\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport {\n  EDITOR_KEY,\n  SCORING_KEY,\n  MERGE_TAGS_KEY,\n  NO_MERGE_TAGS,\n  requireInject,\n} from \"../../keys\";\nimport {\n  scoreColor,\n  scoreBgColor,\n  severityColor,\n  severityBgColor,\n} from \"../utils/scoringStyles\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { ScoringCategory, ScoringFinding } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  TriangleAlert,\n  ChevronDown,\n  Eye,\n  Info,\n  LoaderCircle,\n  RefreshCw,\n  ShieldCheck,\n  ShieldX,\n  Sparkles,\n  X,\n  Zap,\n} from \"@lucide/vue\";\nimport { inject, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"TemplateScoringPanel\");\nconst scoring = requireInject(SCORING_KEY, \"TemplateScoringPanel\");\nconst mergeTags = inject(MERGE_TAGS_KEY, NO_MERGE_TAGS);\n\nconst expandedCategories = ref<Record<string, boolean>>({\n  spam: true,\n  readability: true,\n  accessibility: true,\n  bestPractices: true,\n});\n\nfunction toggleCategory(category: string): void {\n  expandedCategories.value[category] = !expandedCategories.value[category];\n}\n\nconst categoryOrder: ScoringCategory[] = [\n  \"spam\",\n  \"readability\",\n  \"accessibility\",\n  \"bestPractices\",\n];\n\nconst categoryIcons: Record<ScoringCategory, typeof ShieldCheck> = {\n  spam: ShieldX,\n  readability: Eye,\n  accessibility: Sparkles,\n  bestPractices: Zap,\n};\n\nfunction triggerScore(): void {\n  scoring.score(editor.content.value, mergeTags.value);\n}\n\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (isVisible && !scoring.scoringResult.value && !scoring.isScoring.value) {\n      triggerScore();\n    }\n  },\n);\n\nasync function handleFix(finding: ScoringFinding): Promise<void> {\n  if (!finding.blockId) {\n    return;\n  }\n\n  // Get the block content from the editor\n  const block = editor.content.value.blocks.find(\n    (b) => b.id === finding.blockId,\n  );\n  if (!block) {\n    return;\n  }\n\n  // Extract HTML content from the block (text blocks have content property)\n  const blockContent = (block as unknown as Record<string, unknown>).content as\n    string | undefined;\n  if (!blockContent) {\n    return;\n  }\n\n  const fixedContent = await scoring.fixFinding(\n    blockContent,\n    finding,\n    mergeTags.value,\n  );\n\n  if (fixedContent) {\n    editor.updateBlock(finding.blockId, { content: fixedContent });\n    scoring.removeFinding(finding.category, finding.id);\n  }\n}\n\nfunction totalFindings(): number {\n  if (!scoring.scoringResult.value) {\n    return 0;\n  }\n  return categoryOrder.reduce((sum, cat) => {\n    return (\n      sum + (scoring.scoringResult.value?.categories[cat]?.findings.length ?? 0)\n    );\n  }, 0);\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-scoring-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-scoring-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      role=\"complementary\"\n      :aria-label=\"cloudT.scoring.title\"\n      class=\"tpl-scoring-panel tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <ShieldCheck :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.scoring.title }}</span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"scoring.scoringResult.value && !scoring.isScoring.value\"\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            :aria-label=\"cloudT.scoring.rescore\"\n            :title=\"cloudT.scoring.rescore\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"14\" :stroke-width=\"2\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            :aria-label=\"cloudT.scoring.close\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"14\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"scoring.isScoring.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n            {{ cloudT.scoring.scoring }}\n          </p>\n          <LoadingTrack class=\"tpl:w-3/4\" />\n        </div>\n\n        <!-- Error state -->\n        <div\n          v-else-if=\"scoring.error.value && !scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <CircleAlert\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-danger)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.error }}\n          </p>\n          <button\n            class=\"tpl:mt-2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"12\" :stroke-width=\"2\" />\n            {{ cloudT.scoring.rescore }}\n          </button>\n        </div>\n\n        <!-- Results -->\n        <div\n          v-else-if=\"scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-4\"\n        >\n          <!-- Overall score -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:p-5\"\n            :style=\"{\n              backgroundColor: scoreBgColor(scoring.scoringResult.value.score),\n            }\"\n          >\n            <span\n              class=\"tpl:text-4xl tpl:font-bold tpl:tabular-nums\"\n              :style=\"{\n                color: scoreColor(scoring.scoringResult.value.score),\n              }\"\n            >\n              {{ scoring.scoringResult.value.score }}\n            </span>\n            <span\n              class=\"tpl:text-xs tpl:font-medium tpl:uppercase tpl:tracking-wider tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.scoring.overallScore }}\n            </span>\n            <span\n              v-if=\"totalFindings() > 0\"\n              class=\"tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ totalFindings() }}\n              {{ cloudT.scoring.findings }}\n            </span>\n          </div>\n\n          <!-- Fix error -->\n          <div\n            v-if=\"scoring.fixError.value\"\n            class=\"tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n          >\n            <CircleAlert\n              :size=\"14\"\n              :stroke-width=\"2\"\n              class=\"tpl:mt-0.5 tpl:shrink-0\"\n            />\n            <span>{{ cloudT.scoring.fixError }}</span>\n          </div>\n\n          <!-- Category cards -->\n          <div\n            v-for=\"category in categoryOrder\"\n            :key=\"category\"\n            class=\"tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)]\"\n          >\n            <!-- Category header -->\n            <button\n              class=\"tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-2.5 tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:bg-[var(--tpl-bg)]\"\n              @click=\"toggleCategory(category)\"\n            >\n              <component\n                :is=\"categoryIcons[category]\"\n                :size=\"14\"\n                :stroke-width=\"2\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              />\n              <span\n                class=\"tpl:flex-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n              >\n                {{ cloudT.scoring.categories[category] }}\n              </span>\n              <span\n                class=\"tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-semibold tpl:tabular-nums\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                  backgroundColor: scoreBgColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              >\n                {{ scoring.scoringResult.value.categories[category].score }}\n              </span>\n              <span\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length > 0\n                \"\n                class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  scoring.scoringResult.value.categories[category].findings\n                    .length\n                }}\n              </span>\n              <ChevronDown\n                :size=\"12\"\n                :stroke-width=\"2\"\n                class=\"tpl:transition-transform tpl:duration-200 tpl:text-[var(--tpl-text-dim)]\"\n                :class=\"\n                  expandedCategories[category]\n                    ? 'tpl:rotate-0'\n                    : 'tpl:-rotate-90'\n                \"\n              />\n            </button>\n\n            <!-- Findings list -->\n            <div\n              v-if=\"expandedCategories[category]\"\n              class=\"tpl:border-t tpl:border-[var(--tpl-border)]\"\n            >\n              <div\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length === 0\n                \"\n                class=\"tpl:px-3 tpl:py-3 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ cloudT.scoring.noFindings }}\n              </div>\n              <div\n                v-for=\"finding in scoring.scoringResult.value.categories[\n                  category\n                ].findings\"\n                :key=\"finding.id\"\n                class=\"tpl:border-t tpl:px-3 tpl:py-2.5 tpl:first:border-t-0 tpl:border-[var(--tpl-border-light)]\"\n              >\n                <div class=\"tpl:flex tpl:items-start tpl:gap-2\">\n                  <!-- Severity icon -->\n                  <component\n                    :is=\"\n                      finding.severity === 'high'\n                        ? CircleAlert\n                        : finding.severity === 'medium'\n                          ? TriangleAlert\n                          : Info\n                    \"\n                    :size=\"13\"\n                    :stroke-width=\"2\"\n                    class=\"tpl:mt-0.5 tpl:shrink-0\"\n                    :style=\"{\n                      color: severityColor(finding.severity),\n                    }\"\n                  />\n                  <div class=\"tpl:flex-1 tpl:min-w-0\">\n                    <!-- Severity badge + message -->\n                    <div class=\"tpl:flex tpl:items-start tpl:gap-1.5\">\n                      <span\n                        class=\"tpl:mt-0.5 tpl:shrink-0 tpl:rounded tpl:px-1 tpl:py-px tpl:text-[10px] tpl:font-medium tpl:leading-tight\"\n                        :style=\"{\n                          color: severityColor(finding.severity),\n                          backgroundColor: severityBgColor(finding.severity),\n                        }\"\n                      >\n                        {{ cloudT.scoring.severity[finding.severity] }}\n                      </span>\n                      <span\n                        class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\"\n                      >\n                        {{ finding.message }}\n                      </span>\n                    </div>\n                    <!-- Suggestion -->\n                    <p\n                      v-if=\"finding.suggestion\"\n                      class=\"tpl:mt-1 tpl:text-[10px] tpl:leading-snug tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      {{ finding.suggestion }}\n                    </p>\n                    <!-- Fix button -->\n                    <div\n                      v-if=\"finding.blockId\"\n                      class=\"tpl:mt-2 tpl:flex tpl:justify-center\"\n                    >\n                      <button\n                        class=\"tpl-scoring-fix-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)]\"\n                        style=\"background-color: transparent\"\n                        :disabled=\"scoring.fixingFindingId.value !== null\"\n                        @click=\"handleFix(finding)\"\n                      >\n                        <LoaderCircle\n                          v-if=\"scoring.fixingFindingId.value === finding.id\"\n                          class=\"tpl-spinner\"\n                          :size=\"11\"\n                          :stroke-width=\"2\"\n                        />\n                        <Sparkles v-else :size=\"11\" :stroke-width=\"2\" />\n                        {{\n                          scoring.fixingFindingId.value === finding.id\n                            ? cloudT.scoring.fixing\n                            : cloudT.scoring.fix\n                        }}\n                      </button>\n                      <p\n                        v-if=\"scoring.fixError.value\"\n                        class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n                      >\n                        {{ scoring.fixError.value }}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Empty state (no result, no loading, no error) -->\n        <div\n          v-else\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <ShieldCheck\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-text-dim)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.emptyState }}\n          </p>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-4 tpl:pb-2 tpl:pt-2 tpl:text-center tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudT.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-scoring-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-fix-btn:not(:disabled):hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport {\n  EDITOR_KEY,\n  SCORING_KEY,\n  MERGE_TAGS_KEY,\n  NO_MERGE_TAGS,\n  requireInject,\n} from \"../../keys\";\nimport {\n  scoreColor,\n  scoreBgColor,\n  severityColor,\n  severityBgColor,\n} from \"../utils/scoringStyles\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { ScoringCategory, ScoringFinding } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  TriangleAlert,\n  ChevronDown,\n  Eye,\n  Info,\n  LoaderCircle,\n  RefreshCw,\n  ShieldCheck,\n  ShieldX,\n  Sparkles,\n  X,\n  Zap,\n} from \"@lucide/vue\";\nimport { inject, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"TemplateScoringPanel\");\nconst scoring = requireInject(SCORING_KEY, \"TemplateScoringPanel\");\nconst mergeTags = inject(MERGE_TAGS_KEY, NO_MERGE_TAGS);\n\nconst expandedCategories = ref<Record<string, boolean>>({\n  spam: true,\n  readability: true,\n  accessibility: true,\n  bestPractices: true,\n});\n\nfunction toggleCategory(category: string): void {\n  expandedCategories.value[category] = !expandedCategories.value[category];\n}\n\nconst categoryOrder: ScoringCategory[] = [\n  \"spam\",\n  \"readability\",\n  \"accessibility\",\n  \"bestPractices\",\n];\n\nconst categoryIcons: Record<ScoringCategory, typeof ShieldCheck> = {\n  spam: ShieldX,\n  readability: Eye,\n  accessibility: Sparkles,\n  bestPractices: Zap,\n};\n\nfunction triggerScore(): void {\n  scoring.score(editor.content.value, mergeTags.value);\n}\n\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (isVisible && !scoring.scoringResult.value && !scoring.isScoring.value) {\n      triggerScore();\n    }\n  },\n);\n\nasync function handleFix(finding: ScoringFinding): Promise<void> {\n  if (!finding.blockId) {\n    return;\n  }\n\n  // Get the block content from the editor\n  const block = editor.content.value.blocks.find(\n    (b) => b.id === finding.blockId,\n  );\n  if (!block) {\n    return;\n  }\n\n  // Extract HTML content from the block (text blocks have content property)\n  const blockContent = (block as unknown as Record<string, unknown>).content as\n    string | undefined;\n  if (!blockContent) {\n    return;\n  }\n\n  const fixedContent = await scoring.fixFinding(\n    blockContent,\n    finding,\n    mergeTags.value,\n  );\n\n  if (fixedContent) {\n    editor.updateBlock(finding.blockId, { content: fixedContent });\n    scoring.removeFinding(finding.category, finding.id);\n  }\n}\n\nfunction totalFindings(): number {\n  if (!scoring.scoringResult.value) {\n    return 0;\n  }\n  return categoryOrder.reduce((sum, cat) => {\n    return (\n      sum + (scoring.scoringResult.value?.categories[cat]?.findings.length ?? 0)\n    );\n  }, 0);\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-scoring-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-scoring-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      role=\"complementary\"\n      :aria-label=\"cloudT.scoring.title\"\n      class=\"tpl-scoring-panel tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <ShieldCheck :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.scoring.title }}</span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"scoring.scoringResult.value && !scoring.isScoring.value\"\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            :aria-label=\"cloudT.scoring.rescore\"\n            :title=\"cloudT.scoring.rescore\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"14\" :stroke-width=\"2\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            :aria-label=\"cloudT.scoring.close\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"14\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"scoring.isScoring.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n            {{ cloudT.scoring.scoring }}\n          </p>\n          <LoadingTrack class=\"tpl:w-3/4\" />\n        </div>\n\n        <!-- Error state -->\n        <div\n          v-else-if=\"scoring.error.value && !scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <CircleAlert\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-danger)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.error }}\n          </p>\n          <button\n            class=\"tpl:mt-2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"12\" :stroke-width=\"2\" />\n            {{ cloudT.scoring.rescore }}\n          </button>\n        </div>\n\n        <!-- Results -->\n        <div\n          v-else-if=\"scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-4\"\n        >\n          <!-- Overall score -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:p-5\"\n            :style=\"{\n              backgroundColor: scoreBgColor(scoring.scoringResult.value.score),\n            }\"\n          >\n            <span\n              class=\"tpl:text-4xl tpl:font-bold tpl:tabular-nums\"\n              :style=\"{\n                color: scoreColor(scoring.scoringResult.value.score),\n              }\"\n            >\n              {{ scoring.scoringResult.value.score }}\n            </span>\n            <span\n              class=\"tpl:text-xs tpl:font-medium tpl:uppercase tpl:tracking-wider tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.scoring.overallScore }}\n            </span>\n            <span\n              v-if=\"totalFindings() > 0\"\n              class=\"tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ totalFindings() }}\n              {{ cloudT.scoring.findings }}\n            </span>\n          </div>\n\n          <!-- Fix error -->\n          <div\n            v-if=\"scoring.fixError.value\"\n            class=\"tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n          >\n            <CircleAlert\n              :size=\"14\"\n              :stroke-width=\"2\"\n              class=\"tpl:mt-0.5 tpl:shrink-0\"\n            />\n            <span>{{ cloudT.scoring.fixError }}</span>\n          </div>\n\n          <!-- Category cards -->\n          <div\n            v-for=\"category in categoryOrder\"\n            :key=\"category\"\n            class=\"tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)]\"\n          >\n            <!-- Category header -->\n            <button\n              class=\"tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-2.5 tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:bg-[var(--tpl-bg)]\"\n              @click=\"toggleCategory(category)\"\n            >\n              <component\n                :is=\"categoryIcons[category]\"\n                :size=\"14\"\n                :stroke-width=\"2\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              />\n              <span\n                class=\"tpl:flex-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n              >\n                {{ cloudT.scoring.categories[category] }}\n              </span>\n              <span\n                class=\"tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-semibold tpl:tabular-nums\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                  backgroundColor: scoreBgColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              >\n                {{ scoring.scoringResult.value.categories[category].score }}\n              </span>\n              <span\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length > 0\n                \"\n                class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  scoring.scoringResult.value.categories[category].findings\n                    .length\n                }}\n              </span>\n              <ChevronDown\n                :size=\"12\"\n                :stroke-width=\"2\"\n                class=\"tpl:transition-transform tpl:duration-200 tpl:text-[var(--tpl-text-dim)]\"\n                :class=\"\n                  expandedCategories[category]\n                    ? 'tpl:rotate-0'\n                    : 'tpl:-rotate-90'\n                \"\n              />\n            </button>\n\n            <!-- Findings list -->\n            <div\n              v-if=\"expandedCategories[category]\"\n              class=\"tpl:border-t tpl:border-[var(--tpl-border)]\"\n            >\n              <div\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length === 0\n                \"\n                class=\"tpl:px-3 tpl:py-3 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ cloudT.scoring.noFindings }}\n              </div>\n              <div\n                v-for=\"finding in scoring.scoringResult.value.categories[\n                  category\n                ].findings\"\n                :key=\"finding.id\"\n                class=\"tpl:border-t tpl:px-3 tpl:py-2.5 tpl:first:border-t-0 tpl:border-[var(--tpl-border-light)]\"\n              >\n                <div class=\"tpl:flex tpl:items-start tpl:gap-2\">\n                  <!-- Severity icon -->\n                  <component\n                    :is=\"\n                      finding.severity === 'high'\n                        ? CircleAlert\n                        : finding.severity === 'medium'\n                          ? TriangleAlert\n                          : Info\n                    \"\n                    :size=\"13\"\n                    :stroke-width=\"2\"\n                    class=\"tpl:mt-0.5 tpl:shrink-0\"\n                    :style=\"{\n                      color: severityColor(finding.severity),\n                    }\"\n                  />\n                  <div class=\"tpl:flex-1 tpl:min-w-0\">\n                    <!-- Severity badge + message -->\n                    <div class=\"tpl:flex tpl:items-start tpl:gap-1.5\">\n                      <span\n                        class=\"tpl:mt-0.5 tpl:shrink-0 tpl:rounded tpl:px-1 tpl:py-px tpl:text-[10px] tpl:font-medium tpl:leading-tight\"\n                        :style=\"{\n                          color: severityColor(finding.severity),\n                          backgroundColor: severityBgColor(finding.severity),\n                        }\"\n                      >\n                        {{ cloudT.scoring.severity[finding.severity] }}\n                      </span>\n                      <span\n                        class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\"\n                      >\n                        {{ finding.message }}\n                      </span>\n                    </div>\n                    <!-- Suggestion -->\n                    <p\n                      v-if=\"finding.suggestion\"\n                      class=\"tpl:mt-1 tpl:text-[10px] tpl:leading-snug tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      {{ finding.suggestion }}\n                    </p>\n                    <!-- Fix button -->\n                    <div\n                      v-if=\"finding.blockId\"\n                      class=\"tpl:mt-2 tpl:flex tpl:justify-center\"\n                    >\n                      <button\n                        class=\"tpl-scoring-fix-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)]\"\n                        style=\"background-color: transparent\"\n                        :disabled=\"scoring.fixingFindingId.value !== null\"\n                        @click=\"handleFix(finding)\"\n                      >\n                        <LoaderCircle\n                          v-if=\"scoring.fixingFindingId.value === finding.id\"\n                          class=\"tpl-spinner\"\n                          :size=\"11\"\n                          :stroke-width=\"2\"\n                        />\n                        <Sparkles v-else :size=\"11\" :stroke-width=\"2\" />\n                        {{\n                          scoring.fixingFindingId.value === finding.id\n                            ? cloudT.scoring.fixing\n                            : cloudT.scoring.fix\n                        }}\n                      </button>\n                      <p\n                        v-if=\"scoring.fixError.value\"\n                        class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n                      >\n                        {{ scoring.fixError.value }}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Empty state (no result, no loading, no error) -->\n        <div\n          v-else\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <ShieldCheck\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-text-dim)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.emptyState }}\n          </p>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-4 tpl:pb-2 tpl:pt-2 tpl:text-center tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudT.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-scoring-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-fix-btn:not(:disabled):hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/cdn/chunks/TemplateSettings-Dr5OJ0Gi.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplateSettings-Dr5OJ0Gi.js","names":[],"sources":["../../../src/components/TemplateSettings.vue","../../../src/components/TemplateSettings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ColorPicker from \"./ColorPicker.vue\";\nimport MergeTagTextarea from \"./MergeTagTextarea.vue\";\nimport ToggleSwitch from \"./ToggleSwitch.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n  resolveContentDirection,\n  type TemplateSettings,\n} from \"@templatical/types\";\nimport {\n  cardClass,\n  inputClass,\n  inputGroupInputClass,\n  inputSuffixClass,\n  labelClass,\n  DEFAULT_BG_COLOR,\n} from \"../constants/styleConstants\";\nimport { Circle, Eye, Globe, Info, Square } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\nimport {\n  FONTS_MANAGER_KEY,\n  TEMPLATE_SETTINGS_FIELDS_KEY,\n  requireInject,\n} from \"../keys\";\nimport {\n  ALL_TEMPLATE_SETTINGS_FIELDS,\n  TEMPLATE_SETTINGS_FIELD_CARDS,\n  type TemplateSettingsCard,\n  type TemplateSettingsField,\n} from \"../utils/templateSettingsFields\";\n\nconst props = defineProps<{\n  settings: TemplateSettings;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", settings: Partial<TemplateSettings>): void;\n}>();\n\nconst PREHEADER_MAX_LENGTH = 150;\n\nconst { t } = useI18n();\n\nconst fontsManager = requireInject(FONTS_MANAGER_KEY, \"TemplateSettings\");\nconst fontFamilies = computed(() => fontsManager.fonts.value);\n\n// If current font is not in available list (e.g., custom font when disabled), use default\nconst displayedFontFamily = computed(() => {\n  const isAvailable = fontFamilies.value.some(\n    (font) => font.value === props.settings.fontFamily,\n  );\n  return isAvailable\n    ? props.settings.fontFamily\n    : fontsManager.defaultFont.value;\n});\n\nconst widthPresets = [\n  { value: 480, label: \"480px\" },\n  { value: 600, label: \"600px\" },\n  { value: 700, label: \"700px\" },\n  { value: 800, label: \"800px\" },\n];\n\n// Default to every field: the key is absent whenever a consumer configured no\n// `templateSettings`, and that config only ever narrows.\nconst allowedFields = inject(\n  TEMPLATE_SETTINGS_FIELDS_KEY,\n  new Set(ALL_TEMPLATE_SETTINGS_FIELDS),\n);\n\nfunction shows(field: TemplateSettingsField): boolean {\n  return allowedFields.has(field);\n}\n\n// A card earns its heading only if it still has something to hold. Derived from\n// the field→card map rather than hand-listed per card, so a new setting joins\n// its card's gate the moment it joins the map.\nfunction showsCard(card: TemplateSettingsCard): boolean {\n  return ALL_TEMPLATE_SETTINGS_FIELDS.some(\n    (field) => TEMPLATE_SETTINGS_FIELD_CARDS[field] === card && shows(field),\n  );\n}\n\n// Tips is advice about the settings, so it rides on there being at least one:\n// a Settings tab holding nothing but advice reads as a bug. Plain const, like\n// the two helpers above — the allowlist is init-time config, not reactive\n// state, and a `computed` here would imply it can change.\nconst showsAnyField = allowedFields.size > 0;\n\nconst isRtl = computed(() => resolveContentDirection(props.settings) === \"rtl\");\n\n// Cards lay their contents out with a flex gap rather than a bottom margin on\n// every child but the last. A margin leaves dead space under whichever field\n// became last once an excluded one is dropped, and which field that is depends\n// on the consumer's allowlist — so there is no \"last\" to special-case.\nconst cardStackClass = `${cardClass} tpl:flex tpl:flex-col tpl:gap-3.5`;\n</script>\n\n<template>\n  <aside\n    data-testid=\"template-settings\"\n    class=\"tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]\"\n  >\n    <div\n      class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:gap-3 tpl:overflow-y-auto tpl:p-4\"\n    >\n      <!-- Layout card -->\n      <div\n        v-if=\"showsCard('layout')\"\n        :class=\"cardStackClass\"\n        data-testid=\"template-settings-card-layout\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          <Square\n            class=\"tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"14\"\n            :stroke-width=\"2\"\n          />\n          <span>{{ t.templateSettings.layout }}</span>\n        </div>\n\n        <div v-if=\"shows('width')\" data-testid=\"template-settings-width-preset\">\n          <label :class=\"labelClass\">{{\n            t.templateSettings.widthPreset\n          }}</label>\n          <div\n            class=\"tpl:grid tpl:grid-cols-4 tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n          >\n            <button\n              v-for=\"preset in widthPresets\"\n              :key=\"preset.value\"\n              class=\"tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n              :style=\"{\n                backgroundColor:\n                  settings.width === preset.value\n                    ? 'var(--tpl-bg)'\n                    : 'transparent',\n                color:\n                  settings.width === preset.value\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow:\n                  settings.width === preset.value\n                    ? 'var(--tpl-shadow)'\n                    : 'none',\n              }\"\n              @click=\"emit('update', { width: preset.value })\"\n            >\n              {{ preset.label }}\n            </button>\n          </div>\n        </div>\n\n        <div v-if=\"shows('width')\" data-testid=\"template-settings-width-custom\">\n          <label :class=\"labelClass\">{{\n            t.templateSettings.customWidth\n          }}</label>\n          <div class=\"tpl:flex tpl:items-stretch\">\n            <input\n              type=\"number\"\n              :class=\"inputGroupInputClass\"\n              :value=\"settings.width\"\n              min=\"300\"\n              max=\"900\"\n              @input=\"\n                emit('update', {\n                  width: Number(($event.target as HTMLInputElement).value),\n                })\n              \"\n            />\n            <span :class=\"inputSuffixClass\">px</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Appearance card -->\n      <div\n        v-if=\"showsCard('appearance')\"\n        :class=\"cardStackClass\"\n        data-testid=\"template-settings-card-appearance\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          <Circle\n            class=\"tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"14\"\n            :stroke-width=\"2\"\n          />\n          <span>{{ t.templateSettings.appearance }}</span>\n        </div>\n\n        <div\n          v-if=\"shows('backgroundColor')\"\n          data-testid=\"template-settings-background\"\n        >\n          <label :class=\"labelClass\">{{\n            t.templateSettings.backgroundColor\n          }}</label>\n          <ColorPicker\n            :model-value=\"settings.backgroundColor\"\n            :placeholder=\"DEFAULT_BG_COLOR\"\n            @update:model-value=\"emit('update', { backgroundColor: $event })\"\n          />\n        </div>\n\n        <div\n          v-if=\"shows('textColor')\"\n          data-testid=\"template-settings-text-color\"\n        >\n          <label :class=\"labelClass\">{{ t.templateSettings.textColor }}</label>\n          <ColorPicker\n            :model-value=\"settings.textColor ?? ''\"\n            seed-color=\"#1a1a1a\"\n            @update:model-value=\"emit('update', { textColor: $event })\"\n          />\n        </div>\n\n        <div\n          v-if=\"shows('linkColor')\"\n          data-testid=\"template-settings-link-color\"\n        >\n          <label :class=\"labelClass\">{{ t.templateSettings.linkColor }}</label>\n          <ColorPicker\n            :model-value=\"settings.linkColor ?? ''\"\n            seed-color=\"#0066cc\"\n            @update:model-value=\"\n              emit('update', { linkColor: $event || undefined })\n            \"\n          />\n        </div>\n\n        <div\n          v-if=\"shows('linkUnderline')\"\n          data-testid=\"template-settings-link-underline\"\n        >\n          <ToggleSwitch\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            :model-value=\"settings.linkUnderline\"\n            :label=\"t.templateSettings.linkUnderline\"\n            @update:model-value=\"emit('update', { linkUnderline: $event })\"\n          />\n        </div>\n\n        <div\n          v-if=\"shows('fontFamily')\"\n          data-testid=\"template-settings-font-family\"\n        >\n          <label :class=\"labelClass\">{{ t.templateSettings.fontFamily }}</label>\n          <select\n            :class=\"inputClass\"\n            :value=\"displayedFontFamily\"\n            @change=\"\n              emit('update', {\n                fontFamily: ($event.target as HTMLSelectElement).value,\n              })\n            \"\n          >\n            <option\n              v-for=\"font in fontFamilies\"\n              :key=\"font.value\"\n              :value=\"font.value\"\n            >\n              {{ font.label }}\n            </option>\n          </select>\n        </div>\n      </div>\n\n      <!-- Language card -->\n      <div\n        v-if=\"showsCard('language')\"\n        :class=\"cardStackClass\"\n        data-testid=\"template-settings-card-language\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          <Globe\n            class=\"tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"14\"\n            :stroke-width=\"2\"\n          />\n          <span>{{ t.templateSettings.language }}</span>\n        </div>\n\n        <div v-if=\"shows('locale')\" data-testid=\"template-settings-locale\">\n          <label :class=\"labelClass\">{{\n            t.templateSettings.contentLocale\n          }}</label>\n          <input\n            type=\"text\"\n            :class=\"inputClass\"\n            :value=\"settings.locale ?? ''\"\n            placeholder=\"en\"\n            spellcheck=\"false\"\n            autocapitalize=\"off\"\n            autocomplete=\"off\"\n            @input=\"\n              emit('update', {\n                locale:\n                  ($event.target as HTMLInputElement).value.trim() || undefined,\n              })\n            \"\n          />\n          <p\n            class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ t.templateSettings.contentLocaleHint }}\n          </p>\n        </div>\n\n        <div\n          v-if=\"shows('direction')\"\n          data-testid=\"template-settings-direction\"\n        >\n          <ToggleSwitch\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            :model-value=\"isRtl\"\n            :label=\"t.templateSettings.contentDirection\"\n            @update:model-value=\"\n              emit('update', { direction: $event ? 'rtl' : 'ltr' })\n            \"\n          />\n          <p\n            class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ t.templateSettings.contentDirectionHint }}\n          </p>\n        </div>\n      </div>\n\n      <!-- Preheader card -->\n      <div\n        v-if=\"showsCard('preheader')\"\n        :class=\"cardStackClass\"\n        data-testid=\"template-settings-card-preheader\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          <Eye\n            class=\"tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"14\"\n            :stroke-width=\"2\"\n          />\n          <span>{{ t.templateSettings.preheaderText }}</span>\n        </div>\n\n        <div\n          v-if=\"shows('preheaderText')\"\n          data-testid=\"template-settings-preheader\"\n        >\n          <MergeTagTextarea\n            :model-value=\"settings.preheaderText ?? ''\"\n            :placeholder=\"t.templateSettings.preheaderTextPlaceholder\"\n            :rows=\"2\"\n            @update:model-value=\"\n              emit('update', {\n                preheaderText: $event.replace(/[\\r\\n]/g, ' ') || undefined,\n              })\n            \"\n          />\n          <div\n            class=\"tpl:mt-1 tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n          >\n            <span\n              class=\"tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ t.templateSettings.preheaderTextHint }}\n            </span>\n            <span\n              class=\"tpl:shrink-0 tpl:text-xs tpl:tabular-nums tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ (settings.preheaderText ?? \"\").length }}/{{\n                PREHEADER_MAX_LENGTH\n              }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Tips card -->\n      <div\n        v-if=\"showsAnyField\"\n        class=\"tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n        data-testid=\"template-settings-card-tips\"\n      >\n        <div\n          class=\"tpl:mb-2.5 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text-muted)]\"\n        >\n          <Info :size=\"14\" :stroke-width=\"2\" />\n          <span>{{ t.templateSettings.tips }}</span>\n        </div>\n        <ul\n          class=\"tpl:m-0 tpl:pl-[18px] tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n        >\n          <li class=\"tpl:mb-1 tpl:last:mb-0\">\n            {{ t.templateSettings.tip1 }}\n          </li>\n          <li class=\"tpl:mb-1 tpl:last:mb-0\">\n            {{ t.templateSettings.tip2 }}\n          </li>\n          <li class=\"tpl:mb-1 tpl:last:mb-0\">\n            {{ t.templateSettings.tip3 }}\n          </li>\n        </ul>\n      </div>\n    </div>\n  </aside>\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"./ColorPicker.vue\";\nimport MergeTagTextarea from \"./MergeTagTextarea.vue\";\nimport ToggleSwitch from \"./ToggleSwitch.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n  resolveContentDirection,\n  type TemplateSettings,\n} from \"@templatical/types\";\nimport {\n  cardClass,\n  inputClass,\n  inputGroupInputClass,\n  inputSuffixClass,\n  labelClass,\n  DEFAULT_BG_COLOR,\n} from \"../constants/styleConstants\";\nimport { Circle, Eye, Globe, Info, Square } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\nimport {\n  FONTS_MANAGER_KEY,\n  TEMPLATE_SETTINGS_FIELDS_KEY,\n  requireInject,\n} from \"../keys\";\nimport {\n  ALL_TEMPLATE_SETTINGS_FIELDS,\n  TEMPLATE_SETTINGS_FIELD_CARDS,\n  type TemplateSettingsCard,\n  type TemplateSettingsField,\n} from \"../utils/templateSettingsFields\";\n\nconst props = defineProps<{\n  settings: TemplateSettings;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", settings: Partial<TemplateSettings>): void;\n}>();\n\nconst PREHEADER_MAX_LENGTH = 150;\n\nconst { t } = useI18n();\n\nconst fontsManager = requireInject(FONTS_MANAGER_KEY, \"TemplateSettings\");\nconst fontFamilies = computed(() => fontsManager.fonts.value);\n\n// If current font is not in available list (e.g., custom font when disabled), use default\nconst displayedFontFamily = computed(() => {\n  const isAvailable = fontFamilies.value.some(\n    (font) => font.value === props.settings.fontFamily,\n  );\n  return isAvailable\n    ? props.settings.fontFamily\n    : fontsManager.defaultFont.value;\n});\n\nconst widthPresets = [\n  { value: 480, label: \"480px\" },\n  { value: 600, label: \"600px\" },\n  { value: 700, label: \"700px\" },\n  { value: 800, label: \"800px\" },\n];\n\n// Default to every field: the key is absent whenever a consumer configured no\n// `templateSettings`, and that config only ever narrows.\nconst allowedFields = inject(\n  TEMPLATE_SETTINGS_FIELDS_KEY,\n  new Set(ALL_TEMPLATE_SETTINGS_FIELDS),\n);\n\nfunction shows(field: TemplateSettingsField): boolean {\n  return allowedFields.has(field);\n}\n\n// A card earns its heading only if it still has something to hold. Derived from\n// the field→card map rather than hand-listed per card, so a new setting joins\n// its card's gate the moment it joins the map.\nfunction showsCard(card: TemplateSettingsCard): boolean {\n  return ALL_TEMPLATE_SETTINGS_FIELDS.some(\n    (field) => TEMPLATE_SETTINGS_FIELD_CARDS[field] === card && shows(field),\n  );\n}\n\n// Tips is advice about the settings, so it rides on there being at least one:\n// a Settings tab holding nothing but advice reads as a bug. Plain const, like\n// the two helpers above — the allowlist is init-time config, not reactive\n// state, and a `computed` here would imply it can change.\nconst showsAnyField = allowedFields.size > 0;\n\nconst isRtl = computed(() => resolveContentDirection(props.settings) === \"rtl\");\n\n// Cards lay their contents out with a flex gap rather than a bottom margin on\n// every child but the last. A margin leaves dead space under whichever field\n// became last once an excluded one is dropped, and which field that is depends\n// on the consumer's allowlist — so there is no \"last\" to special-case.\nconst cardStackClass = `${cardClass} tpl:flex tpl:flex-col tpl:gap-3.5`;\n</script>\n\n<template>\n  <aside\n    data-testid=\"template-settings\"\n    class=\"tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]\"\n  >\n    <div\n      class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:gap-3 tpl:overflow-y-auto tpl:p-4\"\n    >\n      <!-- Layout card -->\n      <div\n        v-if=\"showsCard('layout')\"\n        :class=\"cardStackClass\"\n        data-testid=\"template-settings-card-layout\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          <Square\n            class=\"tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"14\"\n            :stroke-width=\"2\"\n          />\n          <span>{{ t.templateSettings.layout }}</span>\n        </div>\n\n        <div v-if=\"shows('width')\" data-testid=\"template-settings-width-preset\">\n          <label :class=\"labelClass\">{{\n            t.templateSettings.widthPreset\n          }}</label>\n          <div\n            class=\"tpl:grid tpl:grid-cols-4 tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n          >\n            <button\n              v-for=\"preset in widthPresets\"\n              :key=\"preset.value\"\n              class=\"tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n              :style=\"{\n                backgroundColor:\n                  settings.width === preset.value\n                    ? 'var(--tpl-bg)'\n                    : 'transparent',\n                color:\n                  settings.width === preset.value\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow:\n                  settings.width === preset.value\n                    ? 'var(--tpl-shadow)'\n                    : 'none',\n              }\"\n              @click=\"emit('update', { width: preset.value })\"\n            >\n              {{ preset.label }}\n            </button>\n          </div>\n        </div>\n\n        <div v-if=\"shows('width')\" data-testid=\"template-settings-width-custom\">\n          <label :class=\"labelClass\">{{\n            t.templateSettings.customWidth\n          }}</label>\n          <div class=\"tpl:flex tpl:items-stretch\">\n            <input\n              type=\"number\"\n              :class=\"inputGroupInputClass\"\n              :value=\"settings.width\"\n              min=\"300\"\n              max=\"900\"\n              @input=\"\n                emit('update', {\n                  width: Number(($event.target as HTMLInputElement).value),\n                })\n              \"\n            />\n            <span :class=\"inputSuffixClass\">px</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Appearance card -->\n      <div\n        v-if=\"showsCard('appearance')\"\n        :class=\"cardStackClass\"\n        data-testid=\"template-settings-card-appearance\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          <Circle\n            class=\"tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"14\"\n            :stroke-width=\"2\"\n          />\n          <span>{{ t.templateSettings.appearance }}</span>\n        </div>\n\n        <div\n          v-if=\"shows('backgroundColor')\"\n          data-testid=\"template-settings-background\"\n        >\n          <label :class=\"labelClass\">{{\n            t.templateSettings.backgroundColor\n          }}</label>\n          <ColorPicker\n            :model-value=\"settings.backgroundColor\"\n            :placeholder=\"DEFAULT_BG_COLOR\"\n            @update:model-value=\"emit('update', { backgroundColor: $event })\"\n          />\n        </div>\n\n        <div\n          v-if=\"shows('textColor')\"\n          data-testid=\"template-settings-text-color\"\n        >\n          <label :class=\"labelClass\">{{ t.templateSettings.textColor }}</label>\n          <ColorPicker\n            :model-value=\"settings.textColor ?? ''\"\n            seed-color=\"#1a1a1a\"\n            @update:model-value=\"emit('update', { textColor: $event })\"\n          />\n        </div>\n\n        <div\n          v-if=\"shows('linkColor')\"\n          data-testid=\"template-settings-link-color\"\n        >\n          <label :class=\"labelClass\">{{ t.templateSettings.linkColor }}</label>\n          <ColorPicker\n            :model-value=\"settings.linkColor ?? ''\"\n            seed-color=\"#0066cc\"\n            @update:model-value=\"\n              emit('update', { linkColor: $event || undefined })\n            \"\n          />\n        </div>\n\n        <div\n          v-if=\"shows('linkUnderline')\"\n          data-testid=\"template-settings-link-underline\"\n        >\n          <ToggleSwitch\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            :model-value=\"settings.linkUnderline\"\n            :label=\"t.templateSettings.linkUnderline\"\n            @update:model-value=\"emit('update', { linkUnderline: $event })\"\n          />\n        </div>\n\n        <div\n          v-if=\"shows('fontFamily')\"\n          data-testid=\"template-settings-font-family\"\n        >\n          <label :class=\"labelClass\">{{ t.templateSettings.fontFamily }}</label>\n          <select\n            :class=\"inputClass\"\n            :value=\"displayedFontFamily\"\n            @change=\"\n              emit('update', {\n                fontFamily: ($event.target as HTMLSelectElement).value,\n              })\n            \"\n          >\n            <option\n              v-for=\"font in fontFamilies\"\n              :key=\"font.value\"\n              :value=\"font.value\"\n            >\n              {{ font.label }}\n            </option>\n          </select>\n        </div>\n      </div>\n\n      <!-- Language card -->\n      <div\n        v-if=\"showsCard('language')\"\n        :class=\"cardStackClass\"\n        data-testid=\"template-settings-card-language\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          <Globe\n            class=\"tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"14\"\n            :stroke-width=\"2\"\n          />\n          <span>{{ t.templateSettings.language }}</span>\n        </div>\n\n        <div v-if=\"shows('locale')\" data-testid=\"template-settings-locale\">\n          <label :class=\"labelClass\">{{\n            t.templateSettings.contentLocale\n          }}</label>\n          <input\n            type=\"text\"\n            :class=\"inputClass\"\n            :value=\"settings.locale ?? ''\"\n            placeholder=\"en\"\n            spellcheck=\"false\"\n            autocapitalize=\"off\"\n            autocomplete=\"off\"\n            @input=\"\n              emit('update', {\n                locale:\n                  ($event.target as HTMLInputElement).value.trim() || undefined,\n              })\n            \"\n          />\n          <p\n            class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ t.templateSettings.contentLocaleHint }}\n          </p>\n        </div>\n\n        <div\n          v-if=\"shows('direction')\"\n          data-testid=\"template-settings-direction\"\n        >\n          <ToggleSwitch\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            :model-value=\"isRtl\"\n            :label=\"t.templateSettings.contentDirection\"\n            @update:model-value=\"\n              emit('update', { direction: $event ? 'rtl' : 'ltr' })\n            \"\n          />\n          <p\n            class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ t.templateSettings.contentDirectionHint }}\n          </p>\n        </div>\n      </div>\n\n      <!-- Preheader card -->\n      <div\n        v-if=\"showsCard('preheader')\"\n        :class=\"cardStackClass\"\n        data-testid=\"template-settings-card-preheader\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          <Eye\n            class=\"tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"14\"\n            :stroke-width=\"2\"\n          />\n          <span>{{ t.templateSettings.preheaderText }}</span>\n        </div>\n\n        <div\n          v-if=\"shows('preheaderText')\"\n          data-testid=\"template-settings-preheader\"\n        >\n          <MergeTagTextarea\n            :model-value=\"settings.preheaderText ?? ''\"\n            :placeholder=\"t.templateSettings.preheaderTextPlaceholder\"\n            :rows=\"2\"\n            @update:model-value=\"\n              emit('update', {\n                preheaderText: $event.replace(/[\\r\\n]/g, ' ') || undefined,\n              })\n            \"\n          />\n          <div\n            class=\"tpl:mt-1 tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n          >\n            <span\n              class=\"tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ t.templateSettings.preheaderTextHint }}\n            </span>\n            <span\n              class=\"tpl:shrink-0 tpl:text-xs tpl:tabular-nums tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ (settings.preheaderText ?? \"\").length }}/{{\n                PREHEADER_MAX_LENGTH\n              }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Tips card -->\n      <div\n        v-if=\"showsAnyField\"\n        class=\"tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n        data-testid=\"template-settings-card-tips\"\n      >\n        <div\n          class=\"tpl:mb-2.5 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text-muted)]\"\n        >\n          <Info :size=\"14\" :stroke-width=\"2\" />\n          <span>{{ t.templateSettings.tips }}</span>\n        </div>\n        <ul\n          class=\"tpl:m-0 tpl:pl-[18px] tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n        >\n          <li class=\"tpl:mb-1 tpl:last:mb-0\">\n            {{ t.templateSettings.tip1 }}\n          </li>\n          <li class=\"tpl:mb-1 tpl:last:mb-0\">\n            {{ t.templateSettings.tip2 }}\n          </li>\n          <li class=\"tpl:mb-1 tpl:last:mb-0\">\n            {{ t.templateSettings.tip3 }}\n          </li>\n        </ul>\n      </div>\n    </div>\n  </aside>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/TestEmailModal-CrjzVw8e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TestEmailModal-CrjzVw8e.js","names":[],"sources":["../../../src/utils/validateEmailShape.ts","../../../src/components/TestEmailModal.vue","../../../src/components/TestEmailModal.vue"],"sourcesContent":["/**\n * Characters that cannot appear in a domain but routinely arrive attached to one.\n *\n * A **denylist**, not an allowlist, so unicode domains keep working — an\n * allowlist of `[a-z0-9.-]` would be the stricter, more obviously \"correct\"\n * choice and would reject them. What this actually targets is the punctuation\n * that comes from pasting out of a list or a mail client: `user@example.com,`\n * and `<user@example.com>`.\n */\nconst IMPOSSIBLE_DOMAIN_CHARS = /[,;<>()[\\]\\\\\"'`|/?#@!$%^&*+=~{}]/;\n\n/**\n * Does this string look like an email address?\n *\n * Deliberately loose: non-empty, no whitespace, exactly one `@`, a non-empty\n * local part, and a domain containing a dot with something either side and no\n * impossible characters. That is enough to catch the mistakes a typo actually\n * produces — a missing `@`, a trailing comma, a half-typed domain — before the\n * user pays for a round-trip.\n *\n * **Do not \"improve\" this into an RFC-ish regex.** Those reliably reject valid\n * addresses (plus-addressing, long new gTLDs, unicode domains) and the resulting\n * bug reports cost far more than the malformed addresses they catch. Only the\n * receiving mail server can really tell, and the sending backend has to validate\n * anyway — this is a fast-feedback affordance, not a gate. `validateEmailShape`\n * has its own test file pinning the addresses that must keep passing.\n */\nexport function looksLikeEmail(value: string): boolean {\n  const trimmed = value.trim();\n  if (trimmed.length === 0) return false;\n  if (/\\s/.test(trimmed)) return false;\n\n  const parts = trimmed.split(\"@\");\n  if (parts.length !== 2) return false;\n\n  const [local, domain] = parts;\n  if (local.length === 0) return false;\n  if (IMPOSSIBLE_DOMAIN_CHARS.test(domain)) return false;\n\n  // A dot with at least one character either side, so `a@b` and `a@b.` fail but\n  // `a@b.c` and `a@sub.example.museum` pass.\n  const dot = domain.indexOf(\".\");\n  return dot > 0 && dot < domain.length - 1;\n}\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n *   for BYO senders; Cloud never takes it, because its list comes from a signed\n *   JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n *   version; there is nothing to choose, so offering an editable field would\n *   imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport {\n  applyLayout,\n  hasMergeTagSamples,\n  type ViewportSize,\n} from \"@templatical/types\";\nimport {\n  EDITOR_KEY,\n  LAYOUT_KEY,\n  MERGE_TAGS_KEY,\n  NO_MERGE_TAGS,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /** Omitted / undefined means unrestricted, so the field accepts free text. */\n  allowedRecipients?: string[];\n  defaultRecipient?: string;\n  isSending: boolean;\n  justSent: boolean;\n  error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\nconst layout = inject(LAYOUT_KEY, undefined);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n *\n * Compose the embedder shell while the dialog is showing. The send payload\n * stays unshelled.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n  resolvePreview: resolvePreviewHook ?? undefined,\n  getContent: () => {\n    const raw = editor?.content.value ?? { blocks: [], settings: {} as never };\n    return layout && props.visible ? applyLayout(layout, raw) : raw;\n  },\n  isActive: () => props.visible,\n  getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(\n  hasMergeTagSamples(inject(MERGE_TAGS_KEY, NO_MERGE_TAGS).value),\n);\nconst sampleMode = computed({\n  get: () =>\n    // Off entirely while a resolver is configured — same rule as the canvas.\n    previewResolution.isConfigured\n      ? false\n      : (sharedSampleMode?.value ?? localSampleMode.value),\n  set: (on: boolean) => {\n    if (sharedSampleMode) sharedSampleMode.value = on;\n    else localSampleMode.value = on;\n  },\n});\n\nconst previewBlocks = computed(\n  () => previewResolution.content.value.blocks ?? [],\n);\n\nconst previewSettings = computed(\n  () => previewResolution.content.value.settings,\n);\n\nconst hasAllowlist = computed(\n  () =>\n    props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible) return;\n    recipient.value =\n      props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n  },\n  { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n  hasAllowlist.value\n    ? recipient.value.length > 0\n    : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n  () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n  () =>\n    !hasAllowlist.value &&\n    recipient.value.trim().length > 0 &&\n    !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n  if (!props.error) return null;\n  return props.error.kind === \"provider\"\n    ? props.error.message\n    : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n  if (!canSend.value) return;\n  emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n  // Sending is the one state that blocks dismissal; the success state closes\n  // immediately rather than making the user wait out the timer.\n  if (props.isSending) return;\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Grows to `max-w-3xl` only while the preview is open. A 600px email has\n         to render at true size AND leave slack on both sides for the band of\n         body background the preview draws beside it: at `max-w-2xl` the\n         preview region's content box is exactly 600px, so the band would have\n         nowhere to go and `settings.backgroundColor` would look unset for any\n         template whose sections span the full width. Collapsed, it stays the\n         compact form it was. `w-full` keeps it shrinking on narrow screens.\n         `max-h-[90%]`\n         with a `min-h-0 overflow-y-auto` preview region is the pattern the\n         saved-blocks dialogs use: the cap bounds the panel to TplModal's\n         backdrop (never to `vh` — see the note there), and `min-h-0` is what\n         lets a flex child shrink below its content and actually scroll. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSending\"\n      aria-labelledby=\"tpl-test-email-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-full tpl:max-w-3xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-test-email-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-test-email-recipient\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.testEmail.recipientLabel }}\n        </label>\n\n        <!-- Exactly one allowed address: nothing to choose. -->\n        <input\n          v-if=\"isSingleRecipient\"\n          id=\"tpl-test-email-recipient\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <!-- Several allowed addresses: pick one. -->\n        <select\n          v-else-if=\"hasAllowlist\"\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        >\n          <option\n            v-for=\"email in allowedRecipients\"\n            :key=\"email\"\n            :value=\"email\"\n          >\n            {{ email }}\n          </option>\n        </select>\n\n        <!-- No allowlist: free text. -->\n        <input\n          v-else\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          type=\"email\"\n          autocomplete=\"email\"\n          spellcheck=\"false\"\n          :placeholder=\"t.testEmail.recipientPlaceholder\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <p\n          v-if=\"showShapeHint\"\n          class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ t.testEmail.invalidAddress }}\n        </p>\n      </div>\n\n      <!-- Preview header: a label plus the viewport switch. Always shown — the\n           preview is part of the dialog rather than something to opt into. -->\n      <div class=\"tpl:mb-2 tpl:shrink-0\">\n        <!-- Two segmented controls: `flex-wrap` so they drop to their own row\n             rather than crushing the label on a narrow viewport. -->\n        <div\n          class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n        >\n          <span\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ t.testEmail.preview }}\n          </span>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <MergeTagModeToggle\n              v-if=\"!previewResolution.supersedesSamples.value\"\n              :sample-mode=\"sampleMode\"\n              @change=\"sampleMode = $event\"\n            />\n\n            <!-- Without this the preview would silently show only the desktop\n                 variant of any responsive block. -->\n            <ViewportToggle\n              :viewport=\"previewViewport\"\n              @change=\"previewViewport = $event\"\n            />\n          </div>\n        </div>\n\n        <!-- The hint has to follow the mode: \"shown unresolved\" is simply false\n             once every tag renders a realistic value. -->\n        <p\n          data-testid=\"test-email-preview-hint\"\n          class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{\n            previewResolution.supersedesSamples.value\n              ? t.previewResolution.hint\n              : sampleMode\n                ? t.testEmail.previewHintSample\n                : t.testEmail.previewHint\n          }}\n        </p>\n      </div>\n\n      <!-- The one region allowed to grow: `flex-1 min-h-0` so it absorbs the\n           remaining height and scrolls, leaving the form and actions fixed. -->\n      <div\n        id=\"tpl-test-email-preview\"\n        data-testid=\"test-email-preview\"\n        class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <!-- Skeleton while a *first* resolve is outstanding, so the dialog never\n             flashes the unresolved template before the resolved one. Sized like\n             the frame it replaces to avoid a layout jump. A re-resolve (recipient\n             change) keeps the previous result instead — `isInitialResolve`. -->\n        <div\n          v-if=\"previewResolution.isInitialResolve.value\"\n          role=\"status\"\n          aria-busy=\"true\"\n          data-testid=\"preview-resolution-loading\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n        >\n          <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n          <div\n            v-for=\"n in 3\"\n            :key=\"n\"\n            aria-hidden=\"true\"\n            class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n          ></div>\n        </div>\n\n        <!-- Resolution failed: the unresolved template renders below, so the\n             dialog degrades rather than showing an empty frame. -->\n        <p\n          v-else-if=\"previewResolution.hasFailed.value\"\n          role=\"status\"\n          data-testid=\"preview-resolution-failed\"\n          class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n        >\n          {{ t.previewResolution.failed }}\n        </p>\n\n        <BlockPreviewCanvas\n          v-if=\"!previewResolution.isInitialResolve.value\"\n          :blocks=\"previewBlocks\"\n          :settings=\"previewSettings\"\n          :viewport=\"previewViewport\"\n          :apply-condition-filter=\"!previewResolution.isConfigured\"\n        />\n      </div>\n\n      <!-- Success. Announced politely; the dialog closes itself shortly after. -->\n      <p\n        v-if=\"justSent\"\n        role=\"status\"\n        data-testid=\"test-email-success\"\n        class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n      >\n        <Check :size=\"13\" :stroke-width=\"2.5\" />\n        {{ t.testEmail.success }}\n      </p>\n\n      <!-- Failure. Stays open so the user can retry. -->\n      <p\n        v-else-if=\"errorText\"\n        role=\"alert\"\n        data-testid=\"test-email-error\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ errorText }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"test-email-cancel\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n          @click=\"handleClose\"\n        >\n          {{ t.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"test-email-send\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"!canSend\"\n          @click=\"handleSend\"\n        >\n          <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ t.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ t.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n *   for BYO senders; Cloud never takes it, because its list comes from a signed\n *   JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n *   version; there is nothing to choose, so offering an editable field would\n *   imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport {\n  applyLayout,\n  hasMergeTagSamples,\n  type ViewportSize,\n} from \"@templatical/types\";\nimport {\n  EDITOR_KEY,\n  LAYOUT_KEY,\n  MERGE_TAGS_KEY,\n  NO_MERGE_TAGS,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /** Omitted / undefined means unrestricted, so the field accepts free text. */\n  allowedRecipients?: string[];\n  defaultRecipient?: string;\n  isSending: boolean;\n  justSent: boolean;\n  error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\nconst layout = inject(LAYOUT_KEY, undefined);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n *\n * Compose the embedder shell while the dialog is showing. The send payload\n * stays unshelled.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n  resolvePreview: resolvePreviewHook ?? undefined,\n  getContent: () => {\n    const raw = editor?.content.value ?? { blocks: [], settings: {} as never };\n    return layout && props.visible ? applyLayout(layout, raw) : raw;\n  },\n  isActive: () => props.visible,\n  getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(\n  hasMergeTagSamples(inject(MERGE_TAGS_KEY, NO_MERGE_TAGS).value),\n);\nconst sampleMode = computed({\n  get: () =>\n    // Off entirely while a resolver is configured — same rule as the canvas.\n    previewResolution.isConfigured\n      ? false\n      : (sharedSampleMode?.value ?? localSampleMode.value),\n  set: (on: boolean) => {\n    if (sharedSampleMode) sharedSampleMode.value = on;\n    else localSampleMode.value = on;\n  },\n});\n\nconst previewBlocks = computed(\n  () => previewResolution.content.value.blocks ?? [],\n);\n\nconst previewSettings = computed(\n  () => previewResolution.content.value.settings,\n);\n\nconst hasAllowlist = computed(\n  () =>\n    props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible) return;\n    recipient.value =\n      props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n  },\n  { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n  hasAllowlist.value\n    ? recipient.value.length > 0\n    : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n  () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n  () =>\n    !hasAllowlist.value &&\n    recipient.value.trim().length > 0 &&\n    !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n  if (!props.error) return null;\n  return props.error.kind === \"provider\"\n    ? props.error.message\n    : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n  if (!canSend.value) return;\n  emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n  // Sending is the one state that blocks dismissal; the success state closes\n  // immediately rather than making the user wait out the timer.\n  if (props.isSending) return;\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Grows to `max-w-3xl` only while the preview is open. A 600px email has\n         to render at true size AND leave slack on both sides for the band of\n         body background the preview draws beside it: at `max-w-2xl` the\n         preview region's content box is exactly 600px, so the band would have\n         nowhere to go and `settings.backgroundColor` would look unset for any\n         template whose sections span the full width. Collapsed, it stays the\n         compact form it was. `w-full` keeps it shrinking on narrow screens.\n         `max-h-[90%]`\n         with a `min-h-0 overflow-y-auto` preview region is the pattern the\n         saved-blocks dialogs use: the cap bounds the panel to TplModal's\n         backdrop (never to `vh` — see the note there), and `min-h-0` is what\n         lets a flex child shrink below its content and actually scroll. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSending\"\n      aria-labelledby=\"tpl-test-email-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-full tpl:max-w-3xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-test-email-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-test-email-recipient\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.testEmail.recipientLabel }}\n        </label>\n\n        <!-- Exactly one allowed address: nothing to choose. -->\n        <input\n          v-if=\"isSingleRecipient\"\n          id=\"tpl-test-email-recipient\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <!-- Several allowed addresses: pick one. -->\n        <select\n          v-else-if=\"hasAllowlist\"\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        >\n          <option\n            v-for=\"email in allowedRecipients\"\n            :key=\"email\"\n            :value=\"email\"\n          >\n            {{ email }}\n          </option>\n        </select>\n\n        <!-- No allowlist: free text. -->\n        <input\n          v-else\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          type=\"email\"\n          autocomplete=\"email\"\n          spellcheck=\"false\"\n          :placeholder=\"t.testEmail.recipientPlaceholder\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <p\n          v-if=\"showShapeHint\"\n          class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ t.testEmail.invalidAddress }}\n        </p>\n      </div>\n\n      <!-- Preview header: a label plus the viewport switch. Always shown — the\n           preview is part of the dialog rather than something to opt into. -->\n      <div class=\"tpl:mb-2 tpl:shrink-0\">\n        <!-- Two segmented controls: `flex-wrap` so they drop to their own row\n             rather than crushing the label on a narrow viewport. -->\n        <div\n          class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n        >\n          <span\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ t.testEmail.preview }}\n          </span>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <MergeTagModeToggle\n              v-if=\"!previewResolution.supersedesSamples.value\"\n              :sample-mode=\"sampleMode\"\n              @change=\"sampleMode = $event\"\n            />\n\n            <!-- Without this the preview would silently show only the desktop\n                 variant of any responsive block. -->\n            <ViewportToggle\n              :viewport=\"previewViewport\"\n              @change=\"previewViewport = $event\"\n            />\n          </div>\n        </div>\n\n        <!-- The hint has to follow the mode: \"shown unresolved\" is simply false\n             once every tag renders a realistic value. -->\n        <p\n          data-testid=\"test-email-preview-hint\"\n          class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{\n            previewResolution.supersedesSamples.value\n              ? t.previewResolution.hint\n              : sampleMode\n                ? t.testEmail.previewHintSample\n                : t.testEmail.previewHint\n          }}\n        </p>\n      </div>\n\n      <!-- The one region allowed to grow: `flex-1 min-h-0` so it absorbs the\n           remaining height and scrolls, leaving the form and actions fixed. -->\n      <div\n        id=\"tpl-test-email-preview\"\n        data-testid=\"test-email-preview\"\n        class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <!-- Skeleton while a *first* resolve is outstanding, so the dialog never\n             flashes the unresolved template before the resolved one. Sized like\n             the frame it replaces to avoid a layout jump. A re-resolve (recipient\n             change) keeps the previous result instead — `isInitialResolve`. -->\n        <div\n          v-if=\"previewResolution.isInitialResolve.value\"\n          role=\"status\"\n          aria-busy=\"true\"\n          data-testid=\"preview-resolution-loading\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n        >\n          <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n          <div\n            v-for=\"n in 3\"\n            :key=\"n\"\n            aria-hidden=\"true\"\n            class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n          ></div>\n        </div>\n\n        <!-- Resolution failed: the unresolved template renders below, so the\n             dialog degrades rather than showing an empty frame. -->\n        <p\n          v-else-if=\"previewResolution.hasFailed.value\"\n          role=\"status\"\n          data-testid=\"preview-resolution-failed\"\n          class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n        >\n          {{ t.previewResolution.failed }}\n        </p>\n\n        <BlockPreviewCanvas\n          v-if=\"!previewResolution.isInitialResolve.value\"\n          :blocks=\"previewBlocks\"\n          :settings=\"previewSettings\"\n          :viewport=\"previewViewport\"\n          :apply-condition-filter=\"!previewResolution.isConfigured\"\n        />\n      </div>\n\n      <!-- Success. Announced politely; the dialog closes itself shortly after. -->\n      <p\n        v-if=\"justSent\"\n        role=\"status\"\n        data-testid=\"test-email-success\"\n        class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n      >\n        <Check :size=\"13\" :stroke-width=\"2.5\" />\n        {{ t.testEmail.success }}\n      </p>\n\n      <!-- Failure. Stays open so the user can retry. -->\n      <p\n        v-else-if=\"errorText\"\n        role=\"alert\"\n        data-testid=\"test-email-error\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ errorText }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"test-email-cancel\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n          @click=\"handleClose\"\n        >\n          {{ t.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"test-email-send\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"!canSend\"\n          @click=\"handleSend\"\n        >\n          <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ t.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ t.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/TestEmailPanel-k9vdulTu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TestEmailPanel-k9vdulTu.js","names":[],"sources":["../../../src/components/TestEmailPanel.vue","../../../src/components/TestEmailPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Mount point for the test-email dialog, shared by the OSS and Cloud editors.\n *\n * The dialog is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens it — `defineAsyncComponent`\n * triggers its `import()` on first render, not at definition time. `Editor.vue`\n * in turn lazy-loads *this* wrapper and renders it only when a\n * `TestEmailProvider` is configured, so a consumer without one downloads none\n * of it.\n *\n * Never static-import `TestEmailModal` into `Editor.vue`:\n * that collapses it into the main entry for every consumer, including those who\n * never configure a sender. Guarded by `tests/cdn-chunk-granularity.test.ts`.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseTestEmailFeatureReturn } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  feature: UseTestEmailFeatureReturn;\n}>();\n\nconst TestEmailModal = defineAsyncComponent(\n  () => import(\"./TestEmailModal.vue\"),\n);\n\nfunction handleSend(recipient: string): void {\n  void props.feature.send(recipient);\n}\n</script>\n\n<template>\n  <TestEmailModal\n    v-if=\"feature.isModalOpen.value\"\n    :visible=\"feature.isModalOpen.value\"\n    :allowed-recipients=\"feature.allowedRecipients.value\"\n    :default-recipient=\"feature.defaultRecipient.value\"\n    :is-sending=\"feature.isSending.value\"\n    :just-sent=\"feature.justSent.value\"\n    :error=\"feature.error.value\"\n    @send=\"handleSend\"\n    @close=\"feature.close()\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Mount point for the test-email dialog, shared by the OSS and Cloud editors.\n *\n * The dialog is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens it — `defineAsyncComponent`\n * triggers its `import()` on first render, not at definition time. `Editor.vue`\n * in turn lazy-loads *this* wrapper and renders it only when a\n * `TestEmailProvider` is configured, so a consumer without one downloads none\n * of it.\n *\n * Never static-import `TestEmailModal` into `Editor.vue`:\n * that collapses it into the main entry for every consumer, including those who\n * never configure a sender. Guarded by `tests/cdn-chunk-granularity.test.ts`.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseTestEmailFeatureReturn } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  feature: UseTestEmailFeatureReturn;\n}>();\n\nconst TestEmailModal = defineAsyncComponent(\n  () => import(\"./TestEmailModal.vue\"),\n);\n\nfunction handleSend(recipient: string): void {\n  void props.feature.send(recipient);\n}\n</script>\n\n<template>\n  <TestEmailModal\n    v-if=\"feature.isModalOpen.value\"\n    :visible=\"feature.isModalOpen.value\"\n    :allowed-recipients=\"feature.allowedRecipients.value\"\n    :default-recipient=\"feature.defaultRecipient.value\"\n    :is-sending=\"feature.isSending.value\"\n    :just-sent=\"feature.justSent.value\"\n    :error=\"feature.error.value\"\n    @send=\"handleSend\"\n    @close=\"feature.close()\"\n  />\n</template>\n"],"mappings":";;;;;;;EAkBA,IAAM,IAAQ,GAIR,IAAiB,QACf,OAAO,+BACf;EAEA,SAAS,EAAW,GAAyB;GAC3C,EAAW,QAAQ,KAAK,CAAS;EACnC;mBAKU,EAAA,QAAQ,YAAY,SAD5B,EAAA,GAAA,EAUE,EAAA,CAAA,GAAA;;GARC,SAAS,EAAA,QAAQ,YAAY;GAC7B,sBAAoB,EAAA,QAAQ,kBAAkB;GAC9C,qBAAmB,EAAA,QAAQ,iBAAiB;GAC5C,cAAY,EAAA,QAAQ,UAAU;GAC9B,aAAW,EAAA,QAAQ,SAAS;GAC5B,OAAO,EAAA,QAAQ,MAAM;GACrB,QAAM;GACN,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,MAAK"}