@templatical/editor 0.21.2 → 0.23.0

package/dist/cdn/chunks/SaveBlockDialog-Bb3fdUEZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SaveBlockDialog-Bb3fdUEZ.js","names":[],"sources":["../../../src/components/SavedBlockPreviewRow.vue","../../../src/components/SavedBlockPreviewRow.vue","../../../src/components/SaveBlockDialog.vue","../../../src/components/SaveBlockDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One reorderable row in the save dialog's preview list: a grip handle beside a\n * scaled-down render of the real block.\n *\n * The preview is the same `SavedBlockPreviewCanvas` the browser modal uses, so\n * a row shows what the block actually looks like rather than a description of\n * it. That canvas is fixed at the 600px email width every block component\n * renders against, so the row shrinks it with `transform: scale()` instead of\n * re-flowing it at dialog width — a re-flow would show a layout the recipient\n * will never see.\n *\n * `transform` doesn't participate in layout, so the frame would keep reserving\n * the full unscaled height; a `ResizeObserver` mirrors the scaled height back\n * onto it. The handle is a sibling of the scaled subtree, so it stays full size\n * and keeps its real hit area.\n *\n * Row chrome uses the raw theme tokens, not the `--tpl-chrome-*` aliases: the\n * chrome is an ancestor and a sibling of the rendered email content, never a\n * descendant, so the `.tpl-block-content` token override can't reach it.\n */\nimport SavedBlockPreviewCanvas from \"./SavedBlockPreviewCanvas.vue\";\nimport { useI18n } from \"../composables\";\nimport { CUSTOM_BLOCK_DEFINITIONS_KEY } from \"../keys\";\nimport { getBlockLabel } from \"../utils/blockTypeLabels\";\nimport { ChevronDown, ChevronUp, GripVertical } from \"@lucide/vue\";\nimport type { Block } from \"@templatical/types\";\nimport { computed, inject, onBeforeUnmount, onMounted, ref } from \"vue\";\n\nconst props = defineProps<{\n  block: Block;\n  /** 1-based position in the list — spoken by the handle's label. */\n  position: number;\n  total: number;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"move\", delta: -1 | 1): void;\n}>();\n\nconst { t, format } = useI18n();\n// Optional: absent when the consumer registers no custom blocks.\nconst customBlockDefinitions = inject(CUSTOM_BLOCK_DEFINITIONS_KEY, []);\n\n/** The email width every block component lays itself out against. */\nconst PREVIEW_WIDTH = 600;\n/**\n * Collapsed height for a tall block. A hero card or a multi-row section would\n * otherwise be taller than the whole list, leaving one row on screen — and\n * seeing the rows together is what makes them orderable. Anything taller\n * collapses to this, fades out at the cut, and can be expanded in place.\n */\nconst COLLAPSED_HEIGHT = 240;\n\nconst frameEl = ref<HTMLElement | null>(null);\nconst contentEl = ref<HTMLElement | null>(null);\nconst scale = ref(1);\n/** Scaled height of the whole block; `null` until first measured. */\nconst fullHeight = ref<number | null>(null);\nconst expanded = ref(false);\n\nlet observer: ResizeObserver | null = null;\n\n/** Only a block taller than the collapsed cap needs fading or expanding. */\nconst isClipped = computed(\n  () => fullHeight.value !== null && fullHeight.value > COLLAPSED_HEIGHT,\n);\n\nconst frameHeight = computed(() => {\n  if (fullHeight.value === null) return null;\n  if (expanded.value || !isClipped.value) return fullHeight.value;\n  return COLLAPSED_HEIGHT;\n});\n\nfunction measure(): void {\n  const frame = frameEl.value;\n  const content = contentEl.value;\n  if (!frame || !content) return;\n  const width = frame.clientWidth;\n  if (width <= 0) return;\n  // Never scale up: a dialog wider than the email would blow the preview past\n  // its real proportions.\n  const next = Math.min(1, width / PREVIEW_WIDTH);\n  scale.value = next;\n  fullHeight.value = content.offsetHeight * next;\n}\n\nonMounted(() => {\n  measure();\n  // Absent in non-DOM test environments. Without it the frame simply falls back\n  // to the untransformed height and clips — degraded, never broken.\n  if (typeof ResizeObserver === \"undefined\") return;\n  observer = new ResizeObserver(() => measure());\n  if (frameEl.value) observer.observe(frameEl.value);\n  if (contentEl.value) observer.observe(contentEl.value);\n});\n\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  observer = null;\n});\n\nconst blockLabel = computed(() =>\n  getBlockLabel(props.block, t, customBlockDefinitions),\n);\n\nconst handleLabel = computed(() =>\n  format(t.savedBlocks.reorderHandle, {\n    block: blockLabel.value,\n    position: props.position,\n    total: props.total,\n  }),\n);\n\nconst toggleLabel = computed(() =>\n  format(\n    expanded.value\n      ? t.savedBlocks.collapsePreview\n      : t.savedBlocks.expandPreview,\n    { block: blockLabel.value },\n  ),\n);\n</script>\n\n<template>\n  <div\n    data-testid=\"saved-blocks-reorder-row\"\n    :data-block-id=\"block.id\"\n    class=\"tpl:flex tpl:items-start tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:p-1.5 tpl:border-[var(--tpl-border)]\"\n    style=\"background-color: var(--tpl-bg)\"\n  >\n    <!-- Sortable's `handle` selector points here, so a pointer-drag can only\n         start from the grip — never from the preview itself. -->\n    <button\n      type=\"button\"\n      data-testid=\"saved-blocks-reorder-handle\"\n      class=\"tpl-saved-block-reorder-handle tpl:mt-0.5 tpl:shrink-0 tpl:cursor-grab tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:text-[var(--tpl-text-dim)]\"\n      :aria-label=\"handleLabel\"\n      :title=\"t.savedBlocks.reorderHint\"\n      @keydown.up.prevent=\"emit('move', -1)\"\n      @keydown.down.prevent=\"emit('move', 1)\"\n    >\n      <GripVertical :size=\"14\" :stroke-width=\"1.5\" />\n    </button>\n\n    <div class=\"tpl:relative tpl:min-w-0 tpl:flex-1\">\n      <div\n        ref=\"frameEl\"\n        class=\"tpl:overflow-hidden\"\n        :style=\"{\n          height: frameHeight !== null ? `${frameHeight}px` : undefined,\n        }\"\n      >\n        <div\n          ref=\"contentEl\"\n          :style=\"{\n            width: `${PREVIEW_WIDTH}px`,\n            transform: `scale(${scale})`,\n            transformOrigin: 'top left',\n          }\"\n        >\n          <SavedBlockPreviewCanvas :blocks=\"[block]\" />\n        </div>\n      </div>\n\n      <!-- Fade over the cut, so a clipped block reads as truncated rather than\n           as a block that simply ends there. Pointer-transparent: it sits over\n           the preview, and swallowing clicks would break the row. -->\n      <div\n        v-if=\"isClipped && !expanded\"\n        data-testid=\"saved-blocks-preview-fade\"\n        aria-hidden=\"true\"\n        class=\"tpl:pointer-events-none tpl:absolute tpl:inset-x-0 tpl:bottom-0 tpl:h-10\"\n        style=\"\n          background: linear-gradient(\n            to bottom,\n            transparent,\n            var(--tpl-bg) 90%\n          );\n        \"\n      />\n\n      <button\n        v-if=\"isClipped\"\n        type=\"button\"\n        data-testid=\"saved-blocks-preview-toggle\"\n        class=\"tpl:absolute tpl:bottom-1 tpl:right-1 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-0.5 tpl:rounded tpl:border tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:text-[var(--tpl-text-muted)]\"\n        :aria-label=\"toggleLabel\"\n        :aria-expanded=\"expanded\"\n        @click=\"expanded = !expanded\"\n      >\n        <component\n          :is=\"expanded ? ChevronUp : ChevronDown\"\n          :size=\"11\"\n          :stroke-width=\"2\"\n        />\n        {{ expanded ? t.savedBlocks.collapse : t.savedBlocks.expand }}\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * One reorderable row in the save dialog's preview list: a grip handle beside a\n * scaled-down render of the real block.\n *\n * The preview is the same `SavedBlockPreviewCanvas` the browser modal uses, so\n * a row shows what the block actually looks like rather than a description of\n * it. That canvas is fixed at the 600px email width every block component\n * renders against, so the row shrinks it with `transform: scale()` instead of\n * re-flowing it at dialog width — a re-flow would show a layout the recipient\n * will never see.\n *\n * `transform` doesn't participate in layout, so the frame would keep reserving\n * the full unscaled height; a `ResizeObserver` mirrors the scaled height back\n * onto it. The handle is a sibling of the scaled subtree, so it stays full size\n * and keeps its real hit area.\n *\n * Row chrome uses the raw theme tokens, not the `--tpl-chrome-*` aliases: the\n * chrome is an ancestor and a sibling of the rendered email content, never a\n * descendant, so the `.tpl-block-content` token override can't reach it.\n */\nimport SavedBlockPreviewCanvas from \"./SavedBlockPreviewCanvas.vue\";\nimport { useI18n } from \"../composables\";\nimport { CUSTOM_BLOCK_DEFINITIONS_KEY } from \"../keys\";\nimport { getBlockLabel } from \"../utils/blockTypeLabels\";\nimport { ChevronDown, ChevronUp, GripVertical } from \"@lucide/vue\";\nimport type { Block } from \"@templatical/types\";\nimport { computed, inject, onBeforeUnmount, onMounted, ref } from \"vue\";\n\nconst props = defineProps<{\n  block: Block;\n  /** 1-based position in the list — spoken by the handle's label. */\n  position: number;\n  total: number;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"move\", delta: -1 | 1): void;\n}>();\n\nconst { t, format } = useI18n();\n// Optional: absent when the consumer registers no custom blocks.\nconst customBlockDefinitions = inject(CUSTOM_BLOCK_DEFINITIONS_KEY, []);\n\n/** The email width every block component lays itself out against. */\nconst PREVIEW_WIDTH = 600;\n/**\n * Collapsed height for a tall block. A hero card or a multi-row section would\n * otherwise be taller than the whole list, leaving one row on screen — and\n * seeing the rows together is what makes them orderable. Anything taller\n * collapses to this, fades out at the cut, and can be expanded in place.\n */\nconst COLLAPSED_HEIGHT = 240;\n\nconst frameEl = ref<HTMLElement | null>(null);\nconst contentEl = ref<HTMLElement | null>(null);\nconst scale = ref(1);\n/** Scaled height of the whole block; `null` until first measured. */\nconst fullHeight = ref<number | null>(null);\nconst expanded = ref(false);\n\nlet observer: ResizeObserver | null = null;\n\n/** Only a block taller than the collapsed cap needs fading or expanding. */\nconst isClipped = computed(\n  () => fullHeight.value !== null && fullHeight.value > COLLAPSED_HEIGHT,\n);\n\nconst frameHeight = computed(() => {\n  if (fullHeight.value === null) return null;\n  if (expanded.value || !isClipped.value) return fullHeight.value;\n  return COLLAPSED_HEIGHT;\n});\n\nfunction measure(): void {\n  const frame = frameEl.value;\n  const content = contentEl.value;\n  if (!frame || !content) return;\n  const width = frame.clientWidth;\n  if (width <= 0) return;\n  // Never scale up: a dialog wider than the email would blow the preview past\n  // its real proportions.\n  const next = Math.min(1, width / PREVIEW_WIDTH);\n  scale.value = next;\n  fullHeight.value = content.offsetHeight * next;\n}\n\nonMounted(() => {\n  measure();\n  // Absent in non-DOM test environments. Without it the frame simply falls back\n  // to the untransformed height and clips — degraded, never broken.\n  if (typeof ResizeObserver === \"undefined\") return;\n  observer = new ResizeObserver(() => measure());\n  if (frameEl.value) observer.observe(frameEl.value);\n  if (contentEl.value) observer.observe(contentEl.value);\n});\n\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  observer = null;\n});\n\nconst blockLabel = computed(() =>\n  getBlockLabel(props.block, t, customBlockDefinitions),\n);\n\nconst handleLabel = computed(() =>\n  format(t.savedBlocks.reorderHandle, {\n    block: blockLabel.value,\n    position: props.position,\n    total: props.total,\n  }),\n);\n\nconst toggleLabel = computed(() =>\n  format(\n    expanded.value\n      ? t.savedBlocks.collapsePreview\n      : t.savedBlocks.expandPreview,\n    { block: blockLabel.value },\n  ),\n);\n</script>\n\n<template>\n  <div\n    data-testid=\"saved-blocks-reorder-row\"\n    :data-block-id=\"block.id\"\n    class=\"tpl:flex tpl:items-start tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:p-1.5 tpl:border-[var(--tpl-border)]\"\n    style=\"background-color: var(--tpl-bg)\"\n  >\n    <!-- Sortable's `handle` selector points here, so a pointer-drag can only\n         start from the grip — never from the preview itself. -->\n    <button\n      type=\"button\"\n      data-testid=\"saved-blocks-reorder-handle\"\n      class=\"tpl-saved-block-reorder-handle tpl:mt-0.5 tpl:shrink-0 tpl:cursor-grab tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:text-[var(--tpl-text-dim)]\"\n      :aria-label=\"handleLabel\"\n      :title=\"t.savedBlocks.reorderHint\"\n      @keydown.up.prevent=\"emit('move', -1)\"\n      @keydown.down.prevent=\"emit('move', 1)\"\n    >\n      <GripVertical :size=\"14\" :stroke-width=\"1.5\" />\n    </button>\n\n    <div class=\"tpl:relative tpl:min-w-0 tpl:flex-1\">\n      <div\n        ref=\"frameEl\"\n        class=\"tpl:overflow-hidden\"\n        :style=\"{\n          height: frameHeight !== null ? `${frameHeight}px` : undefined,\n        }\"\n      >\n        <div\n          ref=\"contentEl\"\n          :style=\"{\n            width: `${PREVIEW_WIDTH}px`,\n            transform: `scale(${scale})`,\n            transformOrigin: 'top left',\n          }\"\n        >\n          <SavedBlockPreviewCanvas :blocks=\"[block]\" />\n        </div>\n      </div>\n\n      <!-- Fade over the cut, so a clipped block reads as truncated rather than\n           as a block that simply ends there. Pointer-transparent: it sits over\n           the preview, and swallowing clicks would break the row. -->\n      <div\n        v-if=\"isClipped && !expanded\"\n        data-testid=\"saved-blocks-preview-fade\"\n        aria-hidden=\"true\"\n        class=\"tpl:pointer-events-none tpl:absolute tpl:inset-x-0 tpl:bottom-0 tpl:h-10\"\n        style=\"\n          background: linear-gradient(\n            to bottom,\n            transparent,\n            var(--tpl-bg) 90%\n          );\n        \"\n      />\n\n      <button\n        v-if=\"isClipped\"\n        type=\"button\"\n        data-testid=\"saved-blocks-preview-toggle\"\n        class=\"tpl:absolute tpl:bottom-1 tpl:right-1 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-0.5 tpl:rounded tpl:border tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:text-[var(--tpl-text-muted)]\"\n        :aria-label=\"toggleLabel\"\n        :aria-expanded=\"expanded\"\n        @click=\"expanded = !expanded\"\n      >\n        <component\n          :is=\"expanded ? ChevronUp : ChevronDown\"\n          :size=\"11\"\n          :stroke-width=\"2\"\n        />\n        {{ expanded ? t.savedBlocks.collapse : t.savedBlocks.expand }}\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport SavedBlockPreviewRow from \"./SavedBlockPreviewRow.vue\";\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables\";\nimport {\n  CUSTOM_BLOCK_DEFINITIONS_KEY,\n  EDITOR_KEY,\n  SAVED_BLOCKS_KEY,\n  requireInject,\n} from \"../keys\";\nimport { getBlockLabel } from \"../utils/blockTypeLabels\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { VueDraggable } from \"vue-draggable-plus\";\nimport type { Block } from \"@templatical/types\";\nimport { computed, inject, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /**\n   * Blocks chosen during the canvas pick session, in the order they were\n   * picked — `pickedIds` is built from a `Set`, which iterates in insertion\n   * order. That order seeds the reorderable list below. Every id must be a\n   * top-level block, which is what the session guarantees.\n   */\n  pickedIds: readonly string[];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"saved\"): void;\n}>();\n\nconst { t, format } = useI18n();\nconst editor = requireInject(EDITOR_KEY, \"SaveBlockDialog\");\nconst savedBlocks = requireInject(SAVED_BLOCKS_KEY, \"SaveBlockDialog\");\n// Optional: a consumer with no custom blocks never provides definitions, and\n// the label helper degrades to the type slug rather than throwing.\nconst customBlockDefinitions = inject(CUSTOM_BLOCK_DEFINITIONS_KEY, []);\n\nconst name = ref(\"\");\nconst category = ref(\"\");\nconst isSaving = ref(false);\nconst error = ref<string | null>(null);\nconst announcement = ref(\"\");\n\n/**\n * The order the blocks will be saved in: seeded from the pick order, then owned\n * by this dialog once the user drags a row.\n *\n * Ids rather than blocks, deliberately. Resolving late means a block edited\n * while the dialog is open (a collaborator in Cloud) is persisted as it stands\n * at save time, not as it looked when the dialog opened, and an id that stops\n * resolving drops out on its own instead of leaving a stale snapshot behind.\n */\nconst orderedIds = ref<string[]>([]);\n\n/**\n * The picked blocks in the list's current order. Ids that no longer resolve (a\n * block deleted mid-session) simply drop out.\n */\nconst pickedBlocks = computed(() => {\n  const byId = new Map(editor.content.value.blocks.map((b) => [b.id, b]));\n  return orderedIds.value\n    .map((id) => byId.get(id))\n    .filter((b): b is Block => b !== undefined);\n});\n\n/**\n * Sortable's model. The setter reads ids straight back off the emitted entries\n * rather than storing them, so a Sortable `el` expando can never reach the\n * payload `create()` sends to the provider — and because the getter is already\n * filtered, writing through it prunes unresolvable ids too.\n */\nconst orderedBlocks = computed<Block[]>({\n  get: () => pickedBlocks.value,\n  set: (blocks) => {\n    orderedIds.value = blocks.map((b) => b.id);\n  },\n});\n\n/** Keyboard reorder from a focused grip: swap with the neighbouring row. */\nfunction moveBlock(blockId: string, delta: -1 | 1): void {\n  const order = pickedBlocks.value.map((b) => b.id);\n  const from = order.indexOf(blockId);\n  const to = from + delta;\n  if (from === -1 || to < 0 || to >= order.length) return;\n  [order[from], order[to]] = [order[to], order[from]];\n  orderedIds.value = order;\n\n  const moved = pickedBlocks.value[to];\n  announcement.value = moved\n    ? format(t.savedBlocks.reorderAnnouncement, {\n        block: label(moved),\n        position: to + 1,\n        total: order.length,\n      })\n    : \"\";\n}\n\n/** Custom blocks read as the consumer's name for them, not the type `custom`. */\nfunction label(block: Block): string {\n  return getBlockLabel(block, t, customBlockDefinitions);\n}\n\n/** e.g. \"Title, Paragraph, Button\" — what the user is about to save. */\nconst summary = computed(() => pickedBlocks.value.map(label).join(\", \"));\n\n// `immediate` matters: the dialog is mounted lazily behind a `v-if` on the\n// same state that drives `visible`, so it can mount with `visible` already\n// true and would otherwise never reset the name field or seed the order.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      name.value = \"\";\n      category.value = \"\";\n      error.value = null;\n      announcement.value = \"\";\n      orderedIds.value = [...props.pickedIds];\n    }\n  },\n  { immediate: true },\n);\n\nconst canSave = computed(\n  () =>\n    name.value.trim().length > 0 &&\n    pickedBlocks.value.length > 0 &&\n    !isSaving.value,\n);\n\nasync function handleSave(): Promise<void> {\n  if (!canSave.value) return;\n\n  const blocks = pickedBlocks.value;\n  // Defence in depth: never persist an empty saved block (it would list as\n  // \"0 block(s)\" and insert nothing). Guards a pick set whose ids no longer\n  // resolve to anything on the canvas.\n  if (blocks.length === 0) return;\n\n  isSaving.value = true;\n  error.value = null;\n\n  try {\n    // Empty stays undefined rather than \"\": an entry is either categorised or\n    // it isn't, and a blank string would show up as a nameless filter option.\n    await savedBlocks.create(\n      name.value.trim(),\n      blocks,\n      category.value.trim() || undefined,\n    );\n    emit(\"saved\");\n    emit(\"close\");\n  } catch (err) {\n    error.value = (err as Error).message;\n  } finally {\n    isSaving.value = false;\n  }\n}\n\nfunction handleClose(): void {\n  if (!isSaving.value) {\n    emit(\"close\");\n  }\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSave();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSaving\"\n      aria-labelledby=\"tpl-save-block-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-2xl 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        max-height: 90vh;\n      \"\n    >\n      <h3\n        id=\"tpl-save-block-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.savedBlocks.saveAsBlock }}\n      </h3>\n\n      <!-- Saved block name -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.savedBlocks.name }}\n        </label>\n        <input\n          v-model=\"name\"\n          type=\"text\"\n          data-testid=\"saved-blocks-name-input\"\n          :placeholder=\"t.savedBlocks.namePlaceholder\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSaving\"\n        />\n      </div>\n\n      <!-- Category: free text, with the already-used categories offered as\n           suggestions. A datalist rather than a <select> because the set is\n           derived from existing entries — there is no registry to pick from,\n           and the first entry in a category has to be able to name it. -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-save-block-category\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.savedBlocks.category }}\n        </label>\n        <input\n          id=\"tpl-save-block-category\"\n          v-model=\"category\"\n          type=\"text\"\n          data-testid=\"saved-blocks-category-input\"\n          list=\"tpl-saved-block-categories\"\n          :placeholder=\"t.savedBlocks.categoryPlaceholder\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSaving\"\n        />\n        <datalist id=\"tpl-saved-block-categories\">\n          <option\n            v-for=\"option in savedBlocks.categories.value\"\n            :key=\"option\"\n            :value=\"option\"\n          />\n        </datalist>\n      </div>\n\n      <!-- Summary of what the pick session chose. Which blocks were picked is\n           settled on the canvas — the dialog re-presents them only so the user\n           can see and order what they're about to save. -->\n      <p\n        data-testid=\"saved-blocks-save-summary\"\n        class=\"tpl:mb-1.5 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n      >\n        {{ format(t.savedBlocks.savingCount, { count: pickedBlocks.length }) }}\n        <span class=\"tpl:text-[var(--tpl-text-dim)]\">{{ summary }}</span>\n      </p>\n\n      <!-- Reorderable preview. Seeded in pick order and saved in whatever order\n           the list ends up in. Its own Sortable instance with no `group`, so it\n           can never exchange items with the canvas or a section column. -->\n      <p\n        v-if=\"pickedBlocks.length > 1\"\n        class=\"tpl:mb-1.5 tpl:shrink-0 tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n      >\n        {{ t.savedBlocks.reorderHint }}\n      </p>\n      <!-- The only growing region: takes whatever the dialog's 90vh cap leaves\n           after the fixed chrome, rather than a hand-tuned vh guess that a row\n           expanding to full height would blow past. `min-h-0` is what lets a\n           flex child actually shrink below its content and scroll. -->\n      <VueDraggable\n        v-model=\"orderedBlocks\"\n        data-testid=\"saved-blocks-reorder-list\"\n        :animation=\"150\"\n        ghost-class=\"tpl-ghost\"\n        drag-class=\"tpl-dragging\"\n        handle=\".tpl-saved-block-reorder-handle\"\n        :force-fallback=\"true\"\n        class=\"tpl:mb-4 tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col tpl:gap-1.5 tpl:overflow-y-auto\"\n      >\n        <SavedBlockPreviewRow\n          v-for=\"(block, index) in orderedBlocks\"\n          :key=\"block.id\"\n          :block=\"block\"\n          :position=\"index + 1\"\n          :total=\"orderedBlocks.length\"\n          @move=\"(delta) => moveBlock(block.id, delta)\"\n        />\n      </VueDraggable>\n\n      <!-- Keyboard reorder announcement region (visually hidden, live) -->\n      <div\n        class=\"tpl-sr-only\"\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        {{ announcement }}\n      </div>\n\n      <!-- Error message -->\n      <p\n        v-if=\"error\"\n        role=\"alert\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ error }}\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          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSaving\"\n          :class=\"{\n            'tpl:cursor-not-allowed tpl:opacity-50': isSaving,\n          }\"\n          @click=\"handleClose\"\n        >\n          {{ t.savedBlocks.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          :disabled=\"!canSave\"\n          @click=\"handleSave\"\n        >\n          <span v-if=\"isSaving\" 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.savedBlocks.saving }}\n          </span>\n          <span v-else>\n            {{ t.savedBlocks.save }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport SavedBlockPreviewRow from \"./SavedBlockPreviewRow.vue\";\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables\";\nimport {\n  CUSTOM_BLOCK_DEFINITIONS_KEY,\n  EDITOR_KEY,\n  SAVED_BLOCKS_KEY,\n  requireInject,\n} from \"../keys\";\nimport { getBlockLabel } from \"../utils/blockTypeLabels\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { VueDraggable } from \"vue-draggable-plus\";\nimport type { Block } from \"@templatical/types\";\nimport { computed, inject, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /**\n   * Blocks chosen during the canvas pick session, in the order they were\n   * picked — `pickedIds` is built from a `Set`, which iterates in insertion\n   * order. That order seeds the reorderable list below. Every id must be a\n   * top-level block, which is what the session guarantees.\n   */\n  pickedIds: readonly string[];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"saved\"): void;\n}>();\n\nconst { t, format } = useI18n();\nconst editor = requireInject(EDITOR_KEY, \"SaveBlockDialog\");\nconst savedBlocks = requireInject(SAVED_BLOCKS_KEY, \"SaveBlockDialog\");\n// Optional: a consumer with no custom blocks never provides definitions, and\n// the label helper degrades to the type slug rather than throwing.\nconst customBlockDefinitions = inject(CUSTOM_BLOCK_DEFINITIONS_KEY, []);\n\nconst name = ref(\"\");\nconst category = ref(\"\");\nconst isSaving = ref(false);\nconst error = ref<string | null>(null);\nconst announcement = ref(\"\");\n\n/**\n * The order the blocks will be saved in: seeded from the pick order, then owned\n * by this dialog once the user drags a row.\n *\n * Ids rather than blocks, deliberately. Resolving late means a block edited\n * while the dialog is open (a collaborator in Cloud) is persisted as it stands\n * at save time, not as it looked when the dialog opened, and an id that stops\n * resolving drops out on its own instead of leaving a stale snapshot behind.\n */\nconst orderedIds = ref<string[]>([]);\n\n/**\n * The picked blocks in the list's current order. Ids that no longer resolve (a\n * block deleted mid-session) simply drop out.\n */\nconst pickedBlocks = computed(() => {\n  const byId = new Map(editor.content.value.blocks.map((b) => [b.id, b]));\n  return orderedIds.value\n    .map((id) => byId.get(id))\n    .filter((b): b is Block => b !== undefined);\n});\n\n/**\n * Sortable's model. The setter reads ids straight back off the emitted entries\n * rather than storing them, so a Sortable `el` expando can never reach the\n * payload `create()` sends to the provider — and because the getter is already\n * filtered, writing through it prunes unresolvable ids too.\n */\nconst orderedBlocks = computed<Block[]>({\n  get: () => pickedBlocks.value,\n  set: (blocks) => {\n    orderedIds.value = blocks.map((b) => b.id);\n  },\n});\n\n/** Keyboard reorder from a focused grip: swap with the neighbouring row. */\nfunction moveBlock(blockId: string, delta: -1 | 1): void {\n  const order = pickedBlocks.value.map((b) => b.id);\n  const from = order.indexOf(blockId);\n  const to = from + delta;\n  if (from === -1 || to < 0 || to >= order.length) return;\n  [order[from], order[to]] = [order[to], order[from]];\n  orderedIds.value = order;\n\n  const moved = pickedBlocks.value[to];\n  announcement.value = moved\n    ? format(t.savedBlocks.reorderAnnouncement, {\n        block: label(moved),\n        position: to + 1,\n        total: order.length,\n      })\n    : \"\";\n}\n\n/** Custom blocks read as the consumer's name for them, not the type `custom`. */\nfunction label(block: Block): string {\n  return getBlockLabel(block, t, customBlockDefinitions);\n}\n\n/** e.g. \"Title, Paragraph, Button\" — what the user is about to save. */\nconst summary = computed(() => pickedBlocks.value.map(label).join(\", \"));\n\n// `immediate` matters: the dialog is mounted lazily behind a `v-if` on the\n// same state that drives `visible`, so it can mount with `visible` already\n// true and would otherwise never reset the name field or seed the order.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      name.value = \"\";\n      category.value = \"\";\n      error.value = null;\n      announcement.value = \"\";\n      orderedIds.value = [...props.pickedIds];\n    }\n  },\n  { immediate: true },\n);\n\nconst canSave = computed(\n  () =>\n    name.value.trim().length > 0 &&\n    pickedBlocks.value.length > 0 &&\n    !isSaving.value,\n);\n\nasync function handleSave(): Promise<void> {\n  if (!canSave.value) return;\n\n  const blocks = pickedBlocks.value;\n  // Defence in depth: never persist an empty saved block (it would list as\n  // \"0 block(s)\" and insert nothing). Guards a pick set whose ids no longer\n  // resolve to anything on the canvas.\n  if (blocks.length === 0) return;\n\n  isSaving.value = true;\n  error.value = null;\n\n  try {\n    // Empty stays undefined rather than \"\": an entry is either categorised or\n    // it isn't, and a blank string would show up as a nameless filter option.\n    await savedBlocks.create(\n      name.value.trim(),\n      blocks,\n      category.value.trim() || undefined,\n    );\n    emit(\"saved\");\n    emit(\"close\");\n  } catch (err) {\n    error.value = (err as Error).message;\n  } finally {\n    isSaving.value = false;\n  }\n}\n\nfunction handleClose(): void {\n  if (!isSaving.value) {\n    emit(\"close\");\n  }\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSave();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSaving\"\n      aria-labelledby=\"tpl-save-block-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-2xl 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        max-height: 90vh;\n      \"\n    >\n      <h3\n        id=\"tpl-save-block-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.savedBlocks.saveAsBlock }}\n      </h3>\n\n      <!-- Saved block name -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.savedBlocks.name }}\n        </label>\n        <input\n          v-model=\"name\"\n          type=\"text\"\n          data-testid=\"saved-blocks-name-input\"\n          :placeholder=\"t.savedBlocks.namePlaceholder\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSaving\"\n        />\n      </div>\n\n      <!-- Category: free text, with the already-used categories offered as\n           suggestions. A datalist rather than a <select> because the set is\n           derived from existing entries — there is no registry to pick from,\n           and the first entry in a category has to be able to name it. -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-save-block-category\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.savedBlocks.category }}\n        </label>\n        <input\n          id=\"tpl-save-block-category\"\n          v-model=\"category\"\n          type=\"text\"\n          data-testid=\"saved-blocks-category-input\"\n          list=\"tpl-saved-block-categories\"\n          :placeholder=\"t.savedBlocks.categoryPlaceholder\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSaving\"\n        />\n        <datalist id=\"tpl-saved-block-categories\">\n          <option\n            v-for=\"option in savedBlocks.categories.value\"\n            :key=\"option\"\n            :value=\"option\"\n          />\n        </datalist>\n      </div>\n\n      <!-- Summary of what the pick session chose. Which blocks were picked is\n           settled on the canvas — the dialog re-presents them only so the user\n           can see and order what they're about to save. -->\n      <p\n        data-testid=\"saved-blocks-save-summary\"\n        class=\"tpl:mb-1.5 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n      >\n        {{ format(t.savedBlocks.savingCount, { count: pickedBlocks.length }) }}\n        <span class=\"tpl:text-[var(--tpl-text-dim)]\">{{ summary }}</span>\n      </p>\n\n      <!-- Reorderable preview. Seeded in pick order and saved in whatever order\n           the list ends up in. Its own Sortable instance with no `group`, so it\n           can never exchange items with the canvas or a section column. -->\n      <p\n        v-if=\"pickedBlocks.length > 1\"\n        class=\"tpl:mb-1.5 tpl:shrink-0 tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n      >\n        {{ t.savedBlocks.reorderHint }}\n      </p>\n      <!-- The only growing region: takes whatever the dialog's 90vh cap leaves\n           after the fixed chrome, rather than a hand-tuned vh guess that a row\n           expanding to full height would blow past. `min-h-0` is what lets a\n           flex child actually shrink below its content and scroll. -->\n      <VueDraggable\n        v-model=\"orderedBlocks\"\n        data-testid=\"saved-blocks-reorder-list\"\n        :animation=\"150\"\n        ghost-class=\"tpl-ghost\"\n        drag-class=\"tpl-dragging\"\n        handle=\".tpl-saved-block-reorder-handle\"\n        :force-fallback=\"true\"\n        class=\"tpl:mb-4 tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col tpl:gap-1.5 tpl:overflow-y-auto\"\n      >\n        <SavedBlockPreviewRow\n          v-for=\"(block, index) in orderedBlocks\"\n          :key=\"block.id\"\n          :block=\"block\"\n          :position=\"index + 1\"\n          :total=\"orderedBlocks.length\"\n          @move=\"(delta) => moveBlock(block.id, delta)\"\n        />\n      </VueDraggable>\n\n      <!-- Keyboard reorder announcement region (visually hidden, live) -->\n      <div\n        class=\"tpl-sr-only\"\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        {{ announcement }}\n      </div>\n\n      <!-- Error message -->\n      <p\n        v-if=\"error\"\n        role=\"alert\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ error }}\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          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSaving\"\n          :class=\"{\n            'tpl:cursor-not-allowed tpl:opacity-50': isSaving,\n          }\"\n          @click=\"handleClose\"\n        >\n          {{ t.savedBlocks.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          :disabled=\"!canSave\"\n          @click=\"handleSave\"\n        >\n          <span v-if=\"isSaving\" 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.savedBlocks.saving }}\n          </span>\n          <span v-else>\n            {{ t.savedBlocks.save }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/SavedBlockPreviewCanvas-DZOMgNsz.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SavedBlockPreviewCanvas-DZOMgNsz.js","names":[],"sources":["../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/SavedBlockPreviewCanvas.vue","../../../src/components/SavedBlockPreviewCanvas.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./blocks/ButtonBlock.vue\";\nimport CustomBlock from \"./blocks/CustomBlock.vue\";\nimport DividerBlock from \"./blocks/DividerBlock.vue\";\nimport HtmlBlock from \"./blocks/HtmlBlock.vue\";\nimport ImageBlock from \"./blocks/ImageBlock.vue\";\nimport MenuBlock from \"./blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"./blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"./blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"./blocks/SpacerBlock.vue\";\nimport TableBlock from \"./blocks/TableBlock.vue\";\nimport TitleBlock from \"./blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"./blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"./blocks/VideoBlock.vue\";\nimport { BLOCK_REGISTRY_KEY, EDITOR_KEY } from \"../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n  getDocumentStyle,\n} from \"../utils/blockComponentResolver\";\nimport type { Block } from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\n\ndefineProps<{\n  blocks: Block[];\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\nconst editor = inject(EDITOR_KEY, null);\n\n/**\n * The same document-level style the canvas applies, so a previewed block\n * renders identically to the canvas one: without it the font falls back to the\n * editor UI's and the link rules hit their unset defaults, dropping the\n * underline and the link colour.\n *\n * Read from the *current* template even in the saved-blocks browser, where the\n * previewed content came from elsewhere — a saved block stores only `Block[]`,\n * and the current settings are what it will actually look like once inserted.\n */\nconst documentStyle = computed(() =>\n  editor ? getDocumentStyle(editor.content.value.settings) : {},\n);\n\nconst previewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    data-testid=\"saved-blocks-preview-canvas\"\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg\"\n    :style=\"{\n      backgroundColor: 'var(--tpl-canvas-bg)',\n      boxShadow: 'var(--tpl-shadow-sm)',\n      ...documentStyle,\n    }\"\n  >\n    <div\n      v-for=\"block in blocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        viewport=\"desktop\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./blocks/ButtonBlock.vue\";\nimport CustomBlock from \"./blocks/CustomBlock.vue\";\nimport DividerBlock from \"./blocks/DividerBlock.vue\";\nimport HtmlBlock from \"./blocks/HtmlBlock.vue\";\nimport ImageBlock from \"./blocks/ImageBlock.vue\";\nimport MenuBlock from \"./blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"./blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"./blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"./blocks/SpacerBlock.vue\";\nimport TableBlock from \"./blocks/TableBlock.vue\";\nimport TitleBlock from \"./blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"./blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"./blocks/VideoBlock.vue\";\nimport { BLOCK_REGISTRY_KEY, EDITOR_KEY } from \"../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n  getDocumentStyle,\n} from \"../utils/blockComponentResolver\";\nimport type { Block } from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\n\ndefineProps<{\n  blocks: Block[];\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\nconst editor = inject(EDITOR_KEY, null);\n\n/**\n * The same document-level style the canvas applies, so a previewed block\n * renders identically to the canvas one: without it the font falls back to the\n * editor UI's and the link rules hit their unset defaults, dropping the\n * underline and the link colour.\n *\n * Read from the *current* template even in the saved-blocks browser, where the\n * previewed content came from elsewhere — a saved block stores only `Block[]`,\n * and the current settings are what it will actually look like once inserted.\n */\nconst documentStyle = computed(() =>\n  editor ? getDocumentStyle(editor.content.value.settings) : {},\n);\n\nconst previewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    data-testid=\"saved-blocks-preview-canvas\"\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg\"\n    :style=\"{\n      backgroundColor: 'var(--tpl-canvas-bg)',\n      boxShadow: 'var(--tpl-shadow-sm)',\n      ...documentStyle,\n    }\"\n  >\n    <div\n      v-for=\"block in blocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        viewport=\"desktop\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAwBA,IAAM,IAAsD;GAC1D,OAAO;GACP,WAAW;GACX,OAAO;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;EACV,GAEM,IAAQ,GAOR,IAAgB,EAAO,GAAoB,IAAI,GAE/C,IAAe,QAAe;GAClC,QAAQ,EAAM,MAAM,SAApB;IACE,KAAK,KACH,OAAO,CAAC,OAAO,KAAK;IACtB,KAAK,KACH,OAAO;KAAC;KAAU;KAAU;IAAQ;IACtC,KAAK,OACH,OAAO,CAAC,UAAU,QAAQ;IAC5B,KAAK,OACH,OAAO,CAAC,UAAU,QAAQ;IAC5B,SACE,OAAO,CAAC,MAAM;GAClB;EACF,CAAC,GAEK,IAAU,QAAe;GAC7B,IAAM,IAAQ,EAAa,MAAM,QAC3B,IAAW,CAAC,GAAG,EAAM,MAAM,QAAQ;GACzC,OAAO,EAAS,SAAS,IACvB,EAAS,KAAK,CAAC,CAAC;GAElB,OAAO,EAAS,MAAM,GAAG,CAAK;EAChC,CAAC;EAED,SAAS,EAAgB,GAA2B;GAClD,OAAO,EAAQ,MAAM,MAAa,CAAC;EACrC;EAEA,SAAS,EAAkB,GAAgC;GACzD,OAAO,EAAsB,GAAO,GAAe,CAAwB;EAC7E;;;eAIE,EA2BM,OA3BN,GA2BM,CA1BJ,EAyBM,OAzBN,GAyBM,EAAA,EAAA,EAAA,GAxBJ,EAuBM,GAAA,MAAA,EAtBoB,EAAA,QAAhB,GAAG,YADb,EAuBM,OAAA;IArBH,KAAK;IACL,OAAK,EAAA,EAAA,OAAW,EAAA,MAAa,GAAQ,CAAA;eAEtC,EAiBM,GAAA,MAAA,EAhBiB,EAAgB,CAAQ,IAAtC,YADT,EAiBM,OAAA;IAfH,KAAK,EAAW;IAChB,OAAK,EAAE,EAAA,CAAA,CAAoB,CAAC,CAAU,CAAA;OAI/B,EAAW,SAAI,aAAA,EAAA,GADvB,EAIE,GAAA;;IAFC,OAAO;IACR,UAAS;mCAEX,EAKE,EAJK,EAAkB,CAAU,CAAA,GAAA;;IAEhC,OAAO;IACR,UAAS;;;;;;;;EE7ErB,IAAM,IAAgB,EAAO,CAAkB,GACzC,IAAS,EAAO,GAAY,IAAI,GAYhC,IAAgB,QACpB,IAAS,EAAiB,EAAO,QAAQ,MAAM,QAAQ,IAAI,CAAC,CAC9D,GAEM,IAAiD;GACrD,SAAS;GACT,OAAO;GACP,WAAW;GACX,OAAO;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;EACV;EAEA,SAAS,EAAkB,GAAgC;GACzD,OAAO,EAAsB,GAAO,GAAe,CAAmB;EACxE;yBAIE,EAoBM,OAAA;GAnBJ,eAAY;GACZ,OAAM;GACL,OAAK,EAAA;;;OAAqG,EAAA;;cAM3G,EAUM,GAAA,MAAA,EATY,EAAA,SAAT,YADT,EAUM,OAAA;GARH,KAAK,EAAM;GACX,OAAK,EAAE,EAAA,CAAA,CAAoB,CAAC,CAAK,CAAA;YAElC,EAIE,EAHK,EAAkB,CAAK,CAAA,GAAA;GACpB;GACR,UAAS"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"SavedBlocksBrowserModal-CeUWcPv0.js","names":[],"sources":["../../../src/components/SavedBlocksBrowserModal.vue","../../../src/components/SavedBlocksBrowserModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables\";\nimport { blockTypeIcons } from \"../utils/blockTypeIcons\";\nimport { formatRelativeTime } from \"../utils/formatRelativeTime\";\nimport { SAVED_BLOCKS_KEY, EDITOR_KEY, requireInject } from \"../keys\";\nimport type { SavedBlock } from \"@templatical/types\";\nimport { Package, Pencil, Search, Trash2, X } from \"@lucide/vue\";\nimport { computed, defineAsyncComponent, nextTick, ref, watch } 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 SavedBlockPreviewCanvas = defineAsyncComponent(\n  () => import(\"./SavedBlockPreviewCanvas.vue\"),\n);\n\nconst { t, format } = useI18n();\nconst savedBlocks = requireInject(SAVED_BLOCKS_KEY, \"SavedBlocksBrowserModal\");\nconst editor = requireInject(EDITOR_KEY, \"SavedBlocksBrowserModal\");\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.savedBlocks.time, format) ?? \"\";\n}\n\n/** Absolute timestamp for the row's tooltip — locale-formatted, no i18n keys. */\nfunction absoluteLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  const parsed = new Date(raw);\n  return Number.isNaN(parsed.getTime()) ? \"\" : parsed.toLocaleString();\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` keeps it inside narrow viewports, expressed\n         against `--tpl-base-size` rather than `rem` so the editor stays immune to\n         the host page's root font-size (issue #209); the 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:mx-4 tpl:flex tpl:w-[1000px] tpl:max-w-[calc(100vw_-_2*var(--tpl-base-size))] 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        max-height: 90vh;\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:duration-100 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: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: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: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: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:duration-100 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:duration-100 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:duration-100 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              <SavedBlockPreviewCanvas :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: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-xs tpl:transition-all tpl:duration-150 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=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\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 TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables\";\nimport { blockTypeIcons } from \"../utils/blockTypeIcons\";\nimport { formatRelativeTime } from \"../utils/formatRelativeTime\";\nimport { SAVED_BLOCKS_KEY, EDITOR_KEY, requireInject } from \"../keys\";\nimport type { SavedBlock } from \"@templatical/types\";\nimport { Package, Pencil, Search, Trash2, X } from \"@lucide/vue\";\nimport { computed, defineAsyncComponent, nextTick, ref, watch } 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 SavedBlockPreviewCanvas = defineAsyncComponent(\n  () => import(\"./SavedBlockPreviewCanvas.vue\"),\n);\n\nconst { t, format } = useI18n();\nconst savedBlocks = requireInject(SAVED_BLOCKS_KEY, \"SavedBlocksBrowserModal\");\nconst editor = requireInject(EDITOR_KEY, \"SavedBlocksBrowserModal\");\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.savedBlocks.time, format) ?? \"\";\n}\n\n/** Absolute timestamp for the row's tooltip — locale-formatted, no i18n keys. */\nfunction absoluteLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  const parsed = new Date(raw);\n  return Number.isNaN(parsed.getTime()) ? \"\" : parsed.toLocaleString();\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` keeps it inside narrow viewports, expressed\n         against `--tpl-base-size` rather than `rem` so the editor stays immune to\n         the host page's root font-size (issue #209); the 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:mx-4 tpl:flex tpl:w-[1000px] tpl:max-w-[calc(100vw_-_2*var(--tpl-base-size))] 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        max-height: 90vh;\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:duration-100 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: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: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: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: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:duration-100 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:duration-100 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:duration-100 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              <SavedBlockPreviewCanvas :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: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-xs tpl:transition-all tpl:duration-150 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=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\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/TestEmailModal-BJTDxFHh.js

@@ -1,96 +0,0 @@
-import { H as e, M as t, P as n, V as r, Z as i, a, ct as o, g as s, h as c, it as l, m as u, ot as d, p as f, u as p, v as m, x as h, y as g, z as _ } from "./draggable-D840DIZB.js";
-import "./useEditorCore-BA6mspzD.js";
-import { rt as v } from "./icons-CYWw8Xfp.js";
-import { n as y } from "./useCloudI18n-BjNENqkM.js";
-import { t as b } from "./TplModal-CH9RzKF7.js";
-//#region src/cloud/components/TestEmailModal.vue?vue&type=script&setup=true&lang.ts
-var x = ["aria-busy"], S = {
-	id: "tpl-test-email-title",
-	class: "tpl:mb-4 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
-}, C = { class: "tpl:mb-3" }, w = { class: "tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, T = ["value"], E = ["disabled"], D = ["value"], O = {
-	key: 0,
-	role: "alert",
-	class: "tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]"
-}, k = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, A = ["disabled"], j = ["disabled"], M = {
-	key: 0,
-	class: "tpl:flex tpl:items-center tpl:gap-1.5"
-}, N = { key: 1 }, P = /* @__PURE__ */ h({
-	__name: "TestEmailModal",
-	props: {
-		visible: { type: Boolean },
-		allowedEmails: {},
-		isSending: { type: Boolean },
-		error: {}
-	},
-	emits: ["send", "close"],
-	setup(h, { emit: P }) {
-		let F = h, I = P, { t: L } = y(), R = i("");
-		_(() => F.visible, (e) => {
-			e && (R.value = F.allowedEmails[0] ?? "");
-		});
-		function z() {
-			!R.value || F.isSending || I("send", R.value);
-		}
-		function B() {
-			F.isSending || I("close");
-		}
-		function V(e) {
-			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), z()), e.key === "Escape" && B();
-		}
-		return (i, _) => (t(), u(b, {
-			visible: h.visible,
-			onClose: B,
-			onKeydown: V
-		}, {
-			default: r(() => [f("div", {
-				role: "dialog",
-				"aria-modal": "true",
-				"aria-busy": h.isSending,
-				"aria-labelledby": "tpl-test-email-title",
-				class: "tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5",
-				style: {
-					"background-color": "var(--tpl-bg-elevated)",
-					"box-shadow": "var(--tpl-shadow-xl)"
-				}
-			}, [
-				f("h3", S, o(l(L).testEmail.title), 1),
-				f("div", C, [f("label", w, o(l(L).testEmail.recipientLabel), 1), h.allowedEmails.length === 1 ? (t(), s("input", {
-					key: 0,
-					type: "text",
-					value: R.value,
-					disabled: "",
-					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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"
-				}, null, 8, T)) : e((t(), s("select", {
-					key: 1,
-					"onUpdate:modelValue": _[0] ||= (e) => R.value = e,
-					class: "tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]",
-					disabled: h.isSending
-				}, [(t(!0), s(p, null, n(h.allowedEmails, (e) => (t(), s("option", {
-					key: e,
-					value: e
-				}, o(e), 9, D))), 128))], 8, E)), [[a, R.value]])]),
-				h.error ? (t(), s("p", O, o(h.error), 1)) : c("", !0),
-				f("div", k, [f("button", {
-					type: "button",
-					class: d(["tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]", { "tpl:cursor-not-allowed tpl:opacity-50": h.isSending }]),
-					disabled: h.isSending,
-					onClick: B
-				}, o(l(L).testEmail.cancel), 11, A), f("button", {
-					type: "button",
-					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
-					disabled: !R.value || h.isSending,
-					onClick: z
-				}, [h.isSending ? (t(), s("span", M, [g(l(v), {
-					class: "tpl:animate-spin",
-					size: 12,
-					"stroke-width": 2
-				}), m(" " + o(l(L).testEmail.sending), 1)])) : (t(), s("span", N, o(l(L).testEmail.send), 1))], 8, j)])
-			], 8, x)]),
-			_: 1
-		}, 8, ["visible"]));
-	}
-});
-//#endregion
-export { P as default };
-
-//# sourceMappingURL=TestEmailModal-BJTDxFHh.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TestEmailModal-BJTDxFHh.js","names":[],"sources":["../../../src/cloud/components/TestEmailModal.vue","../../../src/cloud/components/TestEmailModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"../../components/TplModal.vue\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  allowedEmails: string[];\n  isSending: boolean;\n  error: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst recipient = ref(\"\");\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      recipient.value = props.allowedEmails[0] ?? \"\";\n    }\n  },\n);\n\nfunction handleSend(): void {\n  if (!recipient.value || props.isSending) {\n    return;\n  }\n\n  emit(\"send\", recipient.value);\n}\n\nfunction handleClose(): void {\n  if (!props.isSending) {\n    emit(\"close\");\n  }\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    <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:mx-4 tpl:w-full tpl:max-w-sm 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:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ cloudT.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.testEmail.recipientLabel }}\n        </label>\n        <input\n          v-if=\"allowedEmails.length === 1\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n        <select\n          v-else\n          v-model=\"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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSending\"\n        >\n          <option v-for=\"email in allowedEmails\" :key=\"email\" :value=\"email\">\n            {{ email }}\n          </option>\n        </select>\n      </div>\n\n      <!-- Error message -->\n      <p\n        v-if=\"error\"\n        role=\"alert\"\n        class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ error }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\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-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{\n            'tpl:cursor-not-allowed tpl:opacity-50': isSending,\n          }\"\n          @click=\"handleClose\"\n        >\n          {{ cloudT.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          :disabled=\"!recipient || isSending\"\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            {{ cloudT.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ cloudT.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport TplModal from \"../../components/TplModal.vue\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  allowedEmails: string[];\n  isSending: boolean;\n  error: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst recipient = ref(\"\");\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      recipient.value = props.allowedEmails[0] ?? \"\";\n    }\n  },\n);\n\nfunction handleSend(): void {\n  if (!recipient.value || props.isSending) {\n    return;\n  }\n\n  emit(\"send\", recipient.value);\n}\n\nfunction handleClose(): void {\n  if (!props.isSending) {\n    emit(\"close\");\n  }\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    <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:mx-4 tpl:w-full tpl:max-w-sm 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:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ cloudT.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.testEmail.recipientLabel }}\n        </label>\n        <input\n          v-if=\"allowedEmails.length === 1\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n        <select\n          v-else\n          v-model=\"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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSending\"\n        >\n          <option v-for=\"email in allowedEmails\" :key=\"email\" :value=\"email\">\n            {{ email }}\n          </option>\n        </select>\n      </div>\n\n      <!-- Error message -->\n      <p\n        v-if=\"error\"\n        role=\"alert\"\n        class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ error }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\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-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{\n            'tpl:cursor-not-allowed tpl:opacity-50': isSending,\n          }\"\n          @click=\"handleClose\"\n        >\n          {{ cloudT.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          :disabled=\"!recipient || isSending\"\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            {{ cloudT.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ cloudT.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GAOR,IAAO,GAKP,EAAE,GAAG,MAAW,EAAmB,GAEnC,IAAY,EAAI,EAAE;EAExB,QACQ,EAAM,UACX,MAAY;GACX,AAAI,MACF,EAAU,QAAQ,EAAM,cAAc,MAAM;EAEhD,CACF;EAEA,SAAS,IAAmB;GACtB,CAAC,EAAU,SAAS,EAAM,aAI9B,EAAK,QAAQ,EAAU,KAAK;EAC9B;EAEA,SAAS,IAAoB;GAC3B,AAAK,EAAM,aACT,EAAK,OAAO;EAEhB;EAEA,SAAS,EAAc,GAA4B;GAKjD,AAJI,EAAM,QAAQ,WAAW,CAAC,EAAM,aAClC,EAAM,eAAe,GACrB,EAAW,IAET,EAAM,QAAQ,YAChB,EAAY;EAEhB;yBAIE,EAuFW,GAAA;GAvFA,SAAS,EAAA;GAAU,SAAO;GAAc,WAAS;;oBAsFpD,CArFN,EAqFM,OAAA;IApFJ,MAAK;IACL,cAAW;IACV,aAAW,EAAA;IACZ,mBAAgB;IAChB,OAAM;IACN,OAAA;KAAA,oBAAA;KAAA,cAAA;IAAA;;IAKA,EAKK,MALL,GAKK,EADA,EAAA,CAAA,CAAM,CAAC,UAAU,KAAK,GAAA,CAAA;IAI3B,EAuBM,OAvBN,GAuBM,CAtBJ,EAIQ,SAJR,GAIQ,EADH,EAAA,CAAA,CAAM,CAAC,UAAU,cAAc,GAAA,CAAA,GAG5B,EAAA,cAAc,WAAM,KAAA,EAAA,GAD5B,EAME,SAAA;;KAJA,MAAK;KACJ,OAAO,EAAA;KACR,UAAA;KACA,OAAM;8BAER,EASS,UAAA;;8CAPW,QAAA;KAClB,OAAM;KACL,UAAU,EAAA;gBAEX,EAES,GAAA,MAAA,EAFe,EAAA,gBAAT,YAAf,EAES,UAAA;KAF+B,KAAK;KAAQ,OAAO;SACvD,CAAK,GAAA,GAAA,CAAA,0BALD,EAAA,KAAS,CAAA,CAAA,CAAA,CAAA;IAYd,EAAA,SAAA,EAAA,GADR,EAMI,KANJ,GAMI,EADC,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAIV,EA8BM,OA9BN,GA8BM,CA7BJ,EAUS,UAAA;KATP,MAAK;KACL,OAAK,EAAA,CAAC,mOAAiO,EAAA,yCAExK,EAAA,UAAA,CAAA,CAAA;KAD9D,UAAU,EAAA;KAIV,SAAO;SAEL,EAAA,CAAA,CAAM,CAAC,UAAU,MAAM,GAAA,IAAA,CAAA,GAE5B,EAiBS,UAAA;KAhBP,MAAK;KACL,OAAM;KACL,UAAQ,CAAG,EAAA,SAAa,EAAA;KACxB,SAAO;QAEI,EAAA,aAAA,EAAA,GAAZ,EAOO,QAPP,GAOO,CANL,EAIE,EAAA,CAAA,GAAA;KAHA,OAAM;KACL,MAAM;KACN,gBAAc;UACf,MACF,EAAG,EAAA,CAAA,CAAM,CAAC,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA,MAAA,EAAA,GAE7B,EAEO,QAAA,GAAA,EADF,EAAA,CAAA,CAAM,CAAC,UAAU,IAAI,GAAA,CAAA,EAAA,GAAA,GAAA,CAAA,CAAA,CAAA"}