@templatical/editor 0.40.0 → 0.42.0

package/dist/cdn/chunks/{SavedBlocksBrowserModal-BzQWibKG.js.map → SavedBlocksBrowserModal-C6Z8AvtD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SavedBlocksBrowserModal-BzQWibKG.js","names":[],"sources":["../../../src/components/SavedBlocksBrowserModal.vue","../../../src/components/SavedBlocksBrowserModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables\";\nimport { blockTypeIcons } from \"../utils/blockTypeIcons\";\nimport { formatAbsoluteDateTime } from \"../utils/formatAbsoluteDateTime\";\nimport { formatRelativeTime } from \"../utils/formatRelativeTime\";\nimport {\n  SAVED_BLOCKS_KEY,\n  EDITOR_KEY,\n  UI_LOCALE_KEY,\n  requireInject,\n} from \"../keys\";\nimport type { SavedBlock } from \"@templatical/types\";\nimport { Package, Pencil, Search, Trash2, X } from \"@lucide/vue\";\nimport {\n  computed,\n  defineAsyncComponent,\n  inject,\n  nextTick,\n  ref,\n  watch,\n} from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\", saved: SavedBlock, insertIndex: number | undefined): void;\n}>();\n\nconst BlockPreviewCanvas = defineAsyncComponent(\n  () => import(\"./BlockPreviewCanvas.vue\"),\n);\n\nconst { t, format } = useI18n();\nconst savedBlocks = requireInject(SAVED_BLOCKS_KEY, \"SavedBlocksBrowserModal\");\nconst editor = requireInject(EDITOR_KEY, \"SavedBlocksBrowserModal\");\nconst uiLocale = inject(UI_LOCALE_KEY, undefined);\n\nconst searchQuery = ref(\"\");\n/** `\"\"` = no category filter. Matched exactly against `SavedBlock.category`. */\nconst categoryFilter = ref(\"\");\nconst selectedId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\nconst renamingId = ref<string | null>(null);\nconst renameDraft = ref(\"\");\nconst renameCategoryDraft = ref(\"\");\nconst renameInput = ref<HTMLInputElement | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\n// Order is the provider's to decide — the editor never re-sorts. Whatever\n// `list()` returns is what the user sees (the bundled localStorage adapter, for\n// instance, returns newest-first). Filters only narrow; they never reorder.\n//\n// Both filters run in memory over the loaded entries rather than round-tripping\n// to the provider: that keeps a BYO provider at four dumb methods, and it is\n// what lets the category options below be derived at all — a provider-filtered\n// response could not tell us which other categories exist.\nconst filtered = computed(() => {\n  const query = searchQuery.value.trim().toLowerCase();\n  const category = categoryFilter.value;\n  return savedBlocks.savedBlocks.value.filter((b) => {\n    if (query && !b.name.toLowerCase().includes(query)) return false;\n    if (category && b.category !== category) return false;\n    return true;\n  });\n});\n\n/**\n * The list is fetched when this modal opens, not at editor mount, so a first\n * open can arrive before the provider answers. Show the skeleton only while\n * there is *nothing* to display: on a reopen the previous entries render\n * immediately and the refetch lands underneath them.\n *\n * Without this the empty state would claim \"No saved blocks yet\" for the whole\n * duration of the request — false, not merely unhelpful.\n */\nconst isInitialLoad = computed(\n  () =>\n    savedBlocks.isLoading.value && savedBlocks.savedBlocks.value.length === 0,\n);\n\n/** Whether any filter is narrowing the list — drives the empty-state copy. */\nconst isFiltering = computed(\n  () => searchQuery.value.trim().length > 0 || categoryFilter.value !== \"\",\n);\n\nconst selected = computed(() => {\n  if (!selectedId.value) return null;\n  return (\n    savedBlocks.savedBlocks.value.find((b) => b.id === selectedId.value) ?? null\n  );\n});\n\ninterface PositionOption {\n  value: string;\n  label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n  const options: PositionOption[] = [\n    { value: \"beginning\", label: t.savedBlocks.insertAtBeginning },\n  ];\n  const blocks = editor.content.value.blocks;\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    const typeKey = block.type as keyof typeof t.blocks;\n    const label = t.blocks[typeKey] ?? block.type;\n    options.push({\n      value: block.id,\n      label: format(t.savedBlocks.insertAfterBlock, {\n        block: `${label} ${i + 1}`,\n      }),\n    });\n  }\n  options.push({ value: \"end\", label: t.savedBlocks.insertAtEnd });\n  return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n  if (insertPosition.value === \"end\") return undefined;\n  if (insertPosition.value === \"beginning\") return 0;\n  const blocks = editor.content.value.blocks;\n  const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n  if (idx !== -1) return idx + 1;\n  return undefined;\n});\n\n// `immediate` matters: the modal is mounted lazily behind a `v-if` on the same\n// state that drives `visible`, so it can mount with `visible` already true and\n// would otherwise never resolve the default insert position.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      searchQuery.value = \"\";\n      categoryFilter.value = \"\";\n      selectedId.value = null;\n      confirmDeleteId.value = null;\n      renamingId.value = null;\n      // Default to after selected block, or end\n      const selectedBlockId = editor.state.selectedBlockId;\n      if (selectedBlockId) {\n        const idx = editor.content.value.blocks.findIndex(\n          (b) => b.id === selectedBlockId,\n        );\n        insertPosition.value = idx !== -1 ? selectedBlockId : \"end\";\n      } else {\n        insertPosition.value = \"end\";\n      }\n    }\n  },\n  { immediate: true },\n);\n\nfunction getBlockTypeIcons(\n  saved: SavedBlock,\n): { type: string; icon: unknown }[] {\n  const icons: { type: string; icon: unknown }[] = [];\n  const seen = new Set<string>();\n  for (const block of saved.content) {\n    if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n      seen.add(block.type);\n      icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n    }\n    if (icons.length >= 5) break;\n  }\n  return icons;\n}\n\nfunction getRemainingTypeCount(saved: SavedBlock): number {\n  const types = new Set(saved.content.map((b) => b.type));\n  return Math.max(0, types.size - 5);\n}\n\n/** Compact \"5m ago\" label, or \"\" when the provider supplies no usable timestamp. */\nfunction relativeLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatRelativeTime(raw, t.time, format) ?? \"\";\n}\n\n/**\n * Absolute timestamp for the row's tooltip. Built by `Intl`, so it needs no\n * i18n keys — but it does need the editor's locale, or it formats in the\n * browser's and disagrees with the translated row beside it.\n */\nfunction absoluteLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatAbsoluteDateTime(raw, uiLocale);\n}\n\nasync function handleDelete(id: string): Promise<void> {\n  try {\n    await savedBlocks.remove(id);\n    if (selectedId.value === id) {\n      selectedId.value = null;\n    }\n  } finally {\n    confirmDeleteId.value = null;\n  }\n}\n\nasync function startRename(saved: SavedBlock): Promise<void> {\n  // The pencil is already hidden when editing isn't permitted; this stops a\n  // programmatic call opening an editor whose commit could only fail.\n  if (!savedBlocks.canUpdateBlock(saved)) return;\n  renamingId.value = saved.id;\n  renameDraft.value = saved.name;\n  renameCategoryDraft.value = saved.category ?? \"\";\n  confirmDeleteId.value = null;\n  await nextTick();\n  renameInput.value?.focus();\n  renameInput.value?.select();\n}\n\nfunction cancelRename(): void {\n  renamingId.value = null;\n  renameDraft.value = \"\";\n  renameCategoryDraft.value = \"\";\n}\n\nasync function commitRename(id: string): Promise<void> {\n  // Guards two races: Escape sets `renamingId` to null and the unmounting\n  // input can still emit `blur`, and Enter commits then blurs. Either would\n  // otherwise fire a second, unwanted update.\n  if (renamingId.value !== id) return;\n  const nextName = renameDraft.value.trim();\n  const nextCategory = renameCategoryDraft.value.trim();\n  const current = savedBlocks.savedBlocks.value.find((b) => b.id === id);\n\n  // An empty name is not a rename — fall back to what's stored, so clearing\n  // the field and blurring can't wipe the entry's name.\n  const patch: Partial<{ name: string; category: string }> = {};\n  if (nextName && nextName !== current?.name) patch.name = nextName;\n  // \"\" is meaningful here: it clears the category. Only skip when unchanged.\n  if (nextCategory !== (current?.category ?? \"\")) patch.category = nextCategory;\n\n  // Skip the round-trip when nothing actually changed.\n  if (Object.keys(patch).length === 0) {\n    cancelRename();\n    return;\n  }\n  try {\n    await savedBlocks.update(id, patch);\n  } finally {\n    cancelRename();\n  }\n}\n\n/**\n * Commit when focus leaves the edit row entirely — not when it moves between\n * the name and category inputs. A plain `@blur` on each input would commit\n * (and unmount the row) the moment the user tabbed from one to the other.\n */\nfunction onEditFocusOut(event: FocusEvent, id: string): void {\n  const row = event.currentTarget as HTMLElement;\n  const next = event.relatedTarget as Node | null;\n  if (next && row.contains(next)) return;\n  void commitRename(id);\n}\n\nfunction handleInsert(): void {\n  if (selected.value) {\n    emit(\"insert\", selected.value, resolvedInsertIndex.value);\n  }\n}\n\nfunction handleClose(): void {\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  // While renaming, Enter/Escape belong to the inline input, not the dialog.\n  if (renamingId.value) return;\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n  if (event.key === \"Enter\" && selected.value) {\n    event.preventDefault();\n    handleInsert();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Explicit width, not `w-full`: the modal's parent is shrink-to-fit, so\n         `width: 100%` resolved against its own contents and the 600px preview\n         canvas drove the dialog's size — it measured 523px with nothing selected\n         and 965px with a block selected, nearly doubling on click. A pinned\n         width makes every state identical and stops any future right-pane\n         content from moving it. `max-w-full` keeps it inside the backdrop on\n         narrow hosts — a percentage, so it neither reintroduces the `rem`\n         sensitivity of issue #209 nor the viewport mismatch of issue #575; the\n         preview scrolls within. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-testid=\"saved-blocks-browser\"\n      aria-labelledby=\"tpl-saved-blocks-browser-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-[1000px] tpl:max-w-full tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n      >\n        <h3\n          id=\"tpl-saved-blocks-browser-title\"\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ t.savedBlocks.browse }}\n        </h3>\n        <button\n          :aria-label=\"t.savedBlocks.close\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n          @click=\"handleClose\"\n        >\n          <X :size=\"16\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n        <!-- Left panel: saved block list -->\n        <div\n          class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n        >\n          <!-- Search + category filter -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:px-4 tpl:pt-4 tpl:pb-3\"\n          >\n            <div class=\"tpl:relative\">\n              <Search\n                :size=\"14\"\n                :stroke-width=\"2\"\n                class=\"tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                :placeholder=\"t.savedBlocks.search\"\n                :disabled=\"isInitialLoad\"\n                class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n              />\n            </div>\n            <!-- Only worth showing once something is actually categorised. -->\n            <select\n              v-if=\"savedBlocks.categories.value.length > 0\"\n              v-model=\"categoryFilter\"\n              data-testid=\"saved-blocks-category-filter\"\n              :aria-label=\"t.savedBlocks.filterByCategory\"\n              class=\"tpl:h-8 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n            >\n              <option value=\"\">{{ t.savedBlocks.allCategories }}</option>\n              <option\n                v-for=\"option in savedBlocks.categories.value\"\n                :key=\"option\"\n                :value=\"option\"\n              >\n                {{ option }}\n              </option>\n            </select>\n          </div>\n\n          <!-- Suggestions for the inline category editor, shared by every row -->\n          <datalist id=\"tpl-saved-block-browser-categories\">\n            <option\n              v-for=\"option in savedBlocks.categories.value\"\n              :key=\"option\"\n              :value=\"option\"\n            />\n          </datalist>\n\n          <!-- List -->\n          <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n            <!-- Skeleton rows: same height and gap as a real card, so the pane\n                 doesn't resize when the entries land. `aria-busy` on the region\n                 is what a screen reader announces; the bars are decorative. -->\n            <div\n              v-if=\"isInitialLoad\"\n              data-testid=\"saved-blocks-loading\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n              role=\"status\"\n              aria-busy=\"true\"\n              :aria-label=\"t.savedBlocks.loading\"\n            >\n              <div\n                v-for=\"n in 3\"\n                :key=\"n\"\n                aria-hidden=\"true\"\n                class=\"tpl-saved-block-skeleton tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)]\"\n              >\n                <div\n                  class=\"tpl:h-3 tpl:w-1/2 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n                <div\n                  class=\"tpl:mt-2 tpl:h-2.5 tpl:w-1/4 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n              </div>\n            </div>\n\n            <div\n              v-else-if=\"filtered.length > 0\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n            >\n              <template v-for=\"item in filtered\" :key=\"item.id\">\n                <!-- Inline rename replaces the whole row: an <input> nested\n                     inside the card <button> would be invalid markup and\n                     wouldn't focus reliably. -->\n                <div\n                  v-if=\"renamingId === item.id\"\n                  class=\"tpl:flex tpl:w-full tpl:flex-col tpl:gap-1 tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-primary)]\"\n                  style=\"background-color: var(--tpl-primary-light)\"\n                  @focusout=\"onEditFocusOut($event, item.id)\"\n                >\n                  <input\n                    :ref=\"(el) => (renameInput = el as HTMLInputElement | null)\"\n                    v-model=\"renameDraft\"\n                    type=\"text\"\n                    :aria-label=\"t.savedBlocks.rename\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                  <input\n                    v-model=\"renameCategoryDraft\"\n                    type=\"text\"\n                    data-testid=\"saved-blocks-edit-category\"\n                    :aria-label=\"t.savedBlocks.category\"\n                    :placeholder=\"t.savedBlocks.categoryPlaceholder\"\n                    list=\"tpl-saved-block-browser-categories\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                </div>\n\n                <button\n                  v-else\n                  type=\"button\"\n                  data-testid=\"saved-block-card\"\n                  :aria-pressed=\"selectedId === item.id\"\n                  class=\"tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]\"\n                  :style=\"{\n                    borderColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary)'\n                        : 'var(--tpl-border)',\n                    backgroundColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary-light)'\n                        : 'transparent',\n                  }\"\n                  @click=\"selectedId = item.id\"\n                >\n                  <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n                    <span\n                      class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                    >\n                      {{ item.name }}\n                    </span>\n                    <span\n                      class=\"tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                    >\n                      {{\n                        format(t.savedBlocks.blockCount, {\n                          count: item.content.length,\n                        })\n                      }}\n                    </span>\n                  </div>\n                  <div\n                    v-if=\"item.category\"\n                    class=\"tpl:mt-1 tpl:flex tpl:items-center\"\n                  >\n                    <span\n                      data-testid=\"saved-block-category\"\n                      class=\"tpl:max-w-full tpl:truncate tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]\"\n                    >\n                      {{ item.category }}\n                    </span>\n                  </div>\n                  <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n                    <component\n                      :is=\"icon.icon\"\n                      v-for=\"icon in getBlockTypeIcons(item)\"\n                      :key=\"icon.type\"\n                      :size=\"14\"\n                      :stroke-width=\"1.5\"\n                      class=\"tpl:text-[var(--tpl-text-dim)]\"\n                    />\n                    <span\n                      v-if=\"getRemainingTypeCount(item) > 0\"\n                      class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      +{{ getRemainingTypeCount(item) }}\n                    </span>\n                    <span\n                      v-if=\"relativeLabel(item)\"\n                      data-testid=\"saved-block-updated\"\n                      class=\"tpl:ml-1 tpl:truncate tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                      :title=\"absoluteLabel(item)\"\n                    >\n                      {{ relativeLabel(item) }}\n                    </span>\n                    <button\n                      v-if=\"confirmDeleteId === item.id\"\n                      :aria-label=\"t.savedBlocks.deleteConfirm\"\n                      class=\"tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]\"\n                      style=\"background-color: transparent\"\n                      @click.stop=\"handleDelete(item.id)\"\n                    >\n                      {{ t.savedBlocks.deleteConfirm }}\n                    </button>\n                    <!-- Hidden, not disabled: an action the user can't perform\n                         is better absent than greyed out. `ml-auto` moves to\n                         whichever button survives so the row stays aligned. -->\n                    <template v-else>\n                      <button\n                        v-if=\"savedBlocks.canUpdateBlock(item)\"\n                        class=\"tpl-saved-block-rename-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :aria-label=\"t.savedBlocks.rename\"\n                        :title=\"t.savedBlocks.rename\"\n                        @click.stop=\"startRename(item)\"\n                      >\n                        <Pencil :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                      <button\n                        v-if=\"savedBlocks.canDeleteBlock(item)\"\n                        class=\"tpl-saved-block-delete-btn tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :class=\"{\n                          'tpl:ml-auto': !savedBlocks.canUpdateBlock(item),\n                        }\"\n                        :aria-label=\"t.savedBlocks.delete\"\n                        :title=\"t.savedBlocks.delete\"\n                        @click.stop=\"confirmDeleteId = item.id\"\n                      >\n                        <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                    </template>\n                  </div>\n                </button>\n              </template>\n            </div>\n\n            <!-- Empty state — only once we actually know the library is empty -->\n            <div\n              v-else\n              class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n            >\n              <Package\n                :size=\"32\"\n                :stroke-width=\"1\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <p\n                v-if=\"isFiltering\"\n                class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ t.savedBlocks.noResults }}\n              </p>\n              <template v-else>\n                <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n                  {{ t.savedBlocks.empty }}\n                </p>\n                <p\n                  class=\"tpl:mt-1 tpl:max-w-[220px] tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n                >\n                  {{ t.savedBlocks.emptyHint }}\n                </p>\n              </template>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right panel: preview -->\n        <div\n          class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n        >\n          <div\n            v-if=\"selected\"\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n          >\n            <!-- Visual preview -->\n            <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n              <BlockPreviewCanvas :blocks=\"selected.content\" />\n            </div>\n          </div>\n\n          <!-- Empty preview state -->\n          <div\n            v-else\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n          >\n            <Package\n              :size=\"32\"\n              :stroke-width=\"1\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ t.savedBlocks.selectToPreview }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n      >\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <label\n            class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ t.savedBlocks.insertPosition }}\n          </label>\n          <select\n            v-model=\"insertPosition\"\n            class=\"tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          >\n            <option\n              v-for=\"opt in positionOptions\"\n              :key=\"opt.value\"\n              :value=\"opt.value\"\n            >\n              {{ opt.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"tpl:flex tpl:gap-2\">\n          <button\n            type=\"button\"\n            data-testid=\"saved-blocks-browser-close\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n            @click=\"handleClose\"\n          >\n            {{ t.savedBlocks.close }}\n          </button>\n          <button\n            type=\"button\"\n            :class=\"primaryBtnClass\"\n            :disabled=\"!selected\"\n            @click=\"handleInsert\"\n          >\n            {{ t.savedBlocks.insert }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </TplModal>\n</template>\n\n<style>\n/* Subtle breathing so the placeholders read as \"loading\" rather than as empty\n   rows. `prefers-reduced-motion` holds them still at full opacity — the bars\n   still communicate shape without animating. */\n.tpl-saved-block-skeleton {\n  animation: tpl-saved-block-pulse 1.4s ease-in-out infinite;\n}\n\n@keyframes tpl-saved-block-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.55;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-saved-block-skeleton {\n    animation: none;\n  }\n}\n\n.tpl-saved-block-delete-btn:hover {\n  color: var(--tpl-danger) !important;\n}\n\n.tpl-saved-block-rename-btn:hover {\n  color: var(--tpl-primary) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables\";\nimport { blockTypeIcons } from \"../utils/blockTypeIcons\";\nimport { formatAbsoluteDateTime } from \"../utils/formatAbsoluteDateTime\";\nimport { formatRelativeTime } from \"../utils/formatRelativeTime\";\nimport {\n  SAVED_BLOCKS_KEY,\n  EDITOR_KEY,\n  UI_LOCALE_KEY,\n  requireInject,\n} from \"../keys\";\nimport type { SavedBlock } from \"@templatical/types\";\nimport { Package, Pencil, Search, Trash2, X } from \"@lucide/vue\";\nimport {\n  computed,\n  defineAsyncComponent,\n  inject,\n  nextTick,\n  ref,\n  watch,\n} from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\", saved: SavedBlock, insertIndex: number | undefined): void;\n}>();\n\nconst BlockPreviewCanvas = defineAsyncComponent(\n  () => import(\"./BlockPreviewCanvas.vue\"),\n);\n\nconst { t, format } = useI18n();\nconst savedBlocks = requireInject(SAVED_BLOCKS_KEY, \"SavedBlocksBrowserModal\");\nconst editor = requireInject(EDITOR_KEY, \"SavedBlocksBrowserModal\");\nconst uiLocale = inject(UI_LOCALE_KEY, undefined);\n\nconst searchQuery = ref(\"\");\n/** `\"\"` = no category filter. Matched exactly against `SavedBlock.category`. */\nconst categoryFilter = ref(\"\");\nconst selectedId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\nconst renamingId = ref<string | null>(null);\nconst renameDraft = ref(\"\");\nconst renameCategoryDraft = ref(\"\");\nconst renameInput = ref<HTMLInputElement | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\n// Order is the provider's to decide — the editor never re-sorts. Whatever\n// `list()` returns is what the user sees (the bundled localStorage adapter, for\n// instance, returns newest-first). Filters only narrow; they never reorder.\n//\n// Both filters run in memory over the loaded entries rather than round-tripping\n// to the provider: that keeps a BYO provider at four dumb methods, and it is\n// what lets the category options below be derived at all — a provider-filtered\n// response could not tell us which other categories exist.\nconst filtered = computed(() => {\n  const query = searchQuery.value.trim().toLowerCase();\n  const category = categoryFilter.value;\n  return savedBlocks.savedBlocks.value.filter((b) => {\n    if (query && !b.name.toLowerCase().includes(query)) return false;\n    if (category && b.category !== category) return false;\n    return true;\n  });\n});\n\n/**\n * The list is fetched when this modal opens, not at editor mount, so a first\n * open can arrive before the provider answers. Show the skeleton only while\n * there is *nothing* to display: on a reopen the previous entries render\n * immediately and the refetch lands underneath them.\n *\n * Without this the empty state would claim \"No saved blocks yet\" for the whole\n * duration of the request — false, not merely unhelpful.\n */\nconst isInitialLoad = computed(\n  () =>\n    savedBlocks.isLoading.value && savedBlocks.savedBlocks.value.length === 0,\n);\n\n/** Whether any filter is narrowing the list — drives the empty-state copy. */\nconst isFiltering = computed(\n  () => searchQuery.value.trim().length > 0 || categoryFilter.value !== \"\",\n);\n\nconst selected = computed(() => {\n  if (!selectedId.value) return null;\n  return (\n    savedBlocks.savedBlocks.value.find((b) => b.id === selectedId.value) ?? null\n  );\n});\n\ninterface PositionOption {\n  value: string;\n  label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n  const options: PositionOption[] = [\n    { value: \"beginning\", label: t.savedBlocks.insertAtBeginning },\n  ];\n  const blocks = editor.content.value.blocks;\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    const typeKey = block.type as keyof typeof t.blocks;\n    const label = t.blocks[typeKey] ?? block.type;\n    options.push({\n      value: block.id,\n      label: format(t.savedBlocks.insertAfterBlock, {\n        block: `${label} ${i + 1}`,\n      }),\n    });\n  }\n  options.push({ value: \"end\", label: t.savedBlocks.insertAtEnd });\n  return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n  if (insertPosition.value === \"end\") return undefined;\n  if (insertPosition.value === \"beginning\") return 0;\n  const blocks = editor.content.value.blocks;\n  const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n  if (idx !== -1) return idx + 1;\n  return undefined;\n});\n\n// `immediate` matters: the modal is mounted lazily behind a `v-if` on the same\n// state that drives `visible`, so it can mount with `visible` already true and\n// would otherwise never resolve the default insert position.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      searchQuery.value = \"\";\n      categoryFilter.value = \"\";\n      selectedId.value = null;\n      confirmDeleteId.value = null;\n      renamingId.value = null;\n      // Default to after selected block, or end\n      const selectedBlockId = editor.state.selectedBlockId;\n      if (selectedBlockId) {\n        const idx = editor.content.value.blocks.findIndex(\n          (b) => b.id === selectedBlockId,\n        );\n        insertPosition.value = idx !== -1 ? selectedBlockId : \"end\";\n      } else {\n        insertPosition.value = \"end\";\n      }\n    }\n  },\n  { immediate: true },\n);\n\nfunction getBlockTypeIcons(\n  saved: SavedBlock,\n): { type: string; icon: unknown }[] {\n  const icons: { type: string; icon: unknown }[] = [];\n  const seen = new Set<string>();\n  for (const block of saved.content) {\n    if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n      seen.add(block.type);\n      icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n    }\n    if (icons.length >= 5) break;\n  }\n  return icons;\n}\n\nfunction getRemainingTypeCount(saved: SavedBlock): number {\n  const types = new Set(saved.content.map((b) => b.type));\n  return Math.max(0, types.size - 5);\n}\n\n/** Compact \"5m ago\" label, or \"\" when the provider supplies no usable timestamp. */\nfunction relativeLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatRelativeTime(raw, t.time, format) ?? \"\";\n}\n\n/**\n * Absolute timestamp for the row's tooltip. Built by `Intl`, so it needs no\n * i18n keys — but it does need the editor's locale, or it formats in the\n * browser's and disagrees with the translated row beside it.\n */\nfunction absoluteLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatAbsoluteDateTime(raw, uiLocale);\n}\n\nasync function handleDelete(id: string): Promise<void> {\n  try {\n    await savedBlocks.remove(id);\n    if (selectedId.value === id) {\n      selectedId.value = null;\n    }\n  } finally {\n    confirmDeleteId.value = null;\n  }\n}\n\nasync function startRename(saved: SavedBlock): Promise<void> {\n  // The pencil is already hidden when editing isn't permitted; this stops a\n  // programmatic call opening an editor whose commit could only fail.\n  if (!savedBlocks.canUpdateBlock(saved)) return;\n  renamingId.value = saved.id;\n  renameDraft.value = saved.name;\n  renameCategoryDraft.value = saved.category ?? \"\";\n  confirmDeleteId.value = null;\n  await nextTick();\n  renameInput.value?.focus();\n  renameInput.value?.select();\n}\n\nfunction cancelRename(): void {\n  renamingId.value = null;\n  renameDraft.value = \"\";\n  renameCategoryDraft.value = \"\";\n}\n\nasync function commitRename(id: string): Promise<void> {\n  // Guards two races: Escape sets `renamingId` to null and the unmounting\n  // input can still emit `blur`, and Enter commits then blurs. Either would\n  // otherwise fire a second, unwanted update.\n  if (renamingId.value !== id) return;\n  const nextName = renameDraft.value.trim();\n  const nextCategory = renameCategoryDraft.value.trim();\n  const current = savedBlocks.savedBlocks.value.find((b) => b.id === id);\n\n  // An empty name is not a rename — fall back to what's stored, so clearing\n  // the field and blurring can't wipe the entry's name.\n  const patch: Partial<{ name: string; category: string }> = {};\n  if (nextName && nextName !== current?.name) patch.name = nextName;\n  // \"\" is meaningful here: it clears the category. Only skip when unchanged.\n  if (nextCategory !== (current?.category ?? \"\")) patch.category = nextCategory;\n\n  // Skip the round-trip when nothing actually changed.\n  if (Object.keys(patch).length === 0) {\n    cancelRename();\n    return;\n  }\n  try {\n    await savedBlocks.update(id, patch);\n  } finally {\n    cancelRename();\n  }\n}\n\n/**\n * Commit when focus leaves the edit row entirely — not when it moves between\n * the name and category inputs. A plain `@blur` on each input would commit\n * (and unmount the row) the moment the user tabbed from one to the other.\n */\nfunction onEditFocusOut(event: FocusEvent, id: string): void {\n  const row = event.currentTarget as HTMLElement;\n  const next = event.relatedTarget as Node | null;\n  if (next && row.contains(next)) return;\n  void commitRename(id);\n}\n\nfunction handleInsert(): void {\n  if (selected.value) {\n    emit(\"insert\", selected.value, resolvedInsertIndex.value);\n  }\n}\n\nfunction handleClose(): void {\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  // While renaming, Enter/Escape belong to the inline input, not the dialog.\n  if (renamingId.value) return;\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n  if (event.key === \"Enter\" && selected.value) {\n    event.preventDefault();\n    handleInsert();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Explicit width, not `w-full`: the modal's parent is shrink-to-fit, so\n         `width: 100%` resolved against its own contents and the 600px preview\n         canvas drove the dialog's size — it measured 523px with nothing selected\n         and 965px with a block selected, nearly doubling on click. A pinned\n         width makes every state identical and stops any future right-pane\n         content from moving it. `max-w-full` keeps it inside the backdrop on\n         narrow hosts — a percentage, so it neither reintroduces the `rem`\n         sensitivity of issue #209 nor the viewport mismatch of issue #575; the\n         preview scrolls within. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-testid=\"saved-blocks-browser\"\n      aria-labelledby=\"tpl-saved-blocks-browser-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-[1000px] tpl:max-w-full tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n      >\n        <h3\n          id=\"tpl-saved-blocks-browser-title\"\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ t.savedBlocks.browse }}\n        </h3>\n        <button\n          :aria-label=\"t.savedBlocks.close\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n          @click=\"handleClose\"\n        >\n          <X :size=\"16\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n        <!-- Left panel: saved block list -->\n        <div\n          class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n        >\n          <!-- Search + category filter -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:px-4 tpl:pt-4 tpl:pb-3\"\n          >\n            <div class=\"tpl:relative\">\n              <Search\n                :size=\"14\"\n                :stroke-width=\"2\"\n                class=\"tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                :placeholder=\"t.savedBlocks.search\"\n                :disabled=\"isInitialLoad\"\n                class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n              />\n            </div>\n            <!-- Only worth showing once something is actually categorised. -->\n            <select\n              v-if=\"savedBlocks.categories.value.length > 0\"\n              v-model=\"categoryFilter\"\n              data-testid=\"saved-blocks-category-filter\"\n              :aria-label=\"t.savedBlocks.filterByCategory\"\n              class=\"tpl:h-8 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n            >\n              <option value=\"\">{{ t.savedBlocks.allCategories }}</option>\n              <option\n                v-for=\"option in savedBlocks.categories.value\"\n                :key=\"option\"\n                :value=\"option\"\n              >\n                {{ option }}\n              </option>\n            </select>\n          </div>\n\n          <!-- Suggestions for the inline category editor, shared by every row -->\n          <datalist id=\"tpl-saved-block-browser-categories\">\n            <option\n              v-for=\"option in savedBlocks.categories.value\"\n              :key=\"option\"\n              :value=\"option\"\n            />\n          </datalist>\n\n          <!-- List -->\n          <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n            <!-- Skeleton rows: same height and gap as a real card, so the pane\n                 doesn't resize when the entries land. `aria-busy` on the region\n                 is what a screen reader announces; the bars are decorative. -->\n            <div\n              v-if=\"isInitialLoad\"\n              data-testid=\"saved-blocks-loading\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n              role=\"status\"\n              aria-busy=\"true\"\n              :aria-label=\"t.savedBlocks.loading\"\n            >\n              <div\n                v-for=\"n in 3\"\n                :key=\"n\"\n                aria-hidden=\"true\"\n                class=\"tpl-saved-block-skeleton tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)]\"\n              >\n                <div\n                  class=\"tpl:h-3 tpl:w-1/2 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n                <div\n                  class=\"tpl:mt-2 tpl:h-2.5 tpl:w-1/4 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n              </div>\n            </div>\n\n            <div\n              v-else-if=\"filtered.length > 0\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n            >\n              <template v-for=\"item in filtered\" :key=\"item.id\">\n                <!-- Inline rename replaces the whole row: an <input> nested\n                     inside the card <button> would be invalid markup and\n                     wouldn't focus reliably. -->\n                <div\n                  v-if=\"renamingId === item.id\"\n                  class=\"tpl:flex tpl:w-full tpl:flex-col tpl:gap-1 tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-primary)]\"\n                  style=\"background-color: var(--tpl-primary-light)\"\n                  @focusout=\"onEditFocusOut($event, item.id)\"\n                >\n                  <input\n                    :ref=\"(el) => (renameInput = el as HTMLInputElement | null)\"\n                    v-model=\"renameDraft\"\n                    type=\"text\"\n                    :aria-label=\"t.savedBlocks.rename\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                  <input\n                    v-model=\"renameCategoryDraft\"\n                    type=\"text\"\n                    data-testid=\"saved-blocks-edit-category\"\n                    :aria-label=\"t.savedBlocks.category\"\n                    :placeholder=\"t.savedBlocks.categoryPlaceholder\"\n                    list=\"tpl-saved-block-browser-categories\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                </div>\n\n                <button\n                  v-else\n                  type=\"button\"\n                  data-testid=\"saved-block-card\"\n                  :aria-pressed=\"selectedId === item.id\"\n                  class=\"tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]\"\n                  :style=\"{\n                    borderColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary)'\n                        : 'var(--tpl-border)',\n                    backgroundColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary-light)'\n                        : 'transparent',\n                  }\"\n                  @click=\"selectedId = item.id\"\n                >\n                  <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n                    <span\n                      class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                    >\n                      {{ item.name }}\n                    </span>\n                    <span\n                      class=\"tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                    >\n                      {{\n                        format(t.savedBlocks.blockCount, {\n                          count: item.content.length,\n                        })\n                      }}\n                    </span>\n                  </div>\n                  <div\n                    v-if=\"item.category\"\n                    class=\"tpl:mt-1 tpl:flex tpl:items-center\"\n                  >\n                    <span\n                      data-testid=\"saved-block-category\"\n                      class=\"tpl:max-w-full tpl:truncate tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]\"\n                    >\n                      {{ item.category }}\n                    </span>\n                  </div>\n                  <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n                    <component\n                      :is=\"icon.icon\"\n                      v-for=\"icon in getBlockTypeIcons(item)\"\n                      :key=\"icon.type\"\n                      :size=\"14\"\n                      :stroke-width=\"1.5\"\n                      class=\"tpl:text-[var(--tpl-text-dim)]\"\n                    />\n                    <span\n                      v-if=\"getRemainingTypeCount(item) > 0\"\n                      class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      +{{ getRemainingTypeCount(item) }}\n                    </span>\n                    <span\n                      v-if=\"relativeLabel(item)\"\n                      data-testid=\"saved-block-updated\"\n                      class=\"tpl:ml-1 tpl:truncate tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                      :title=\"absoluteLabel(item)\"\n                    >\n                      {{ relativeLabel(item) }}\n                    </span>\n                    <button\n                      v-if=\"confirmDeleteId === item.id\"\n                      :aria-label=\"t.savedBlocks.deleteConfirm\"\n                      class=\"tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]\"\n                      style=\"background-color: transparent\"\n                      @click.stop=\"handleDelete(item.id)\"\n                    >\n                      {{ t.savedBlocks.deleteConfirm }}\n                    </button>\n                    <!-- Hidden, not disabled: an action the user can't perform\n                         is better absent than greyed out. `ml-auto` moves to\n                         whichever button survives so the row stays aligned. -->\n                    <template v-else>\n                      <button\n                        v-if=\"savedBlocks.canUpdateBlock(item)\"\n                        class=\"tpl-saved-block-rename-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :aria-label=\"t.savedBlocks.rename\"\n                        :title=\"t.savedBlocks.rename\"\n                        @click.stop=\"startRename(item)\"\n                      >\n                        <Pencil :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                      <button\n                        v-if=\"savedBlocks.canDeleteBlock(item)\"\n                        class=\"tpl-saved-block-delete-btn tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :class=\"{\n                          'tpl:ml-auto': !savedBlocks.canUpdateBlock(item),\n                        }\"\n                        :aria-label=\"t.savedBlocks.delete\"\n                        :title=\"t.savedBlocks.delete\"\n                        @click.stop=\"confirmDeleteId = item.id\"\n                      >\n                        <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                    </template>\n                  </div>\n                </button>\n              </template>\n            </div>\n\n            <!-- Empty state — only once we actually know the library is empty -->\n            <div\n              v-else\n              class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n            >\n              <Package\n                :size=\"32\"\n                :stroke-width=\"1\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <p\n                v-if=\"isFiltering\"\n                class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ t.savedBlocks.noResults }}\n              </p>\n              <template v-else>\n                <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n                  {{ t.savedBlocks.empty }}\n                </p>\n                <p\n                  class=\"tpl:mt-1 tpl:max-w-[220px] tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n                >\n                  {{ t.savedBlocks.emptyHint }}\n                </p>\n              </template>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right panel: preview -->\n        <div\n          class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n        >\n          <div\n            v-if=\"selected\"\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n          >\n            <!-- Visual preview -->\n            <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n              <BlockPreviewCanvas :blocks=\"selected.content\" />\n            </div>\n          </div>\n\n          <!-- Empty preview state -->\n          <div\n            v-else\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n          >\n            <Package\n              :size=\"32\"\n              :stroke-width=\"1\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ t.savedBlocks.selectToPreview }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n      >\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <label\n            class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ t.savedBlocks.insertPosition }}\n          </label>\n          <select\n            v-model=\"insertPosition\"\n            class=\"tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          >\n            <option\n              v-for=\"opt in positionOptions\"\n              :key=\"opt.value\"\n              :value=\"opt.value\"\n            >\n              {{ opt.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"tpl:flex tpl:gap-2\">\n          <button\n            type=\"button\"\n            data-testid=\"saved-blocks-browser-close\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n            @click=\"handleClose\"\n          >\n            {{ t.savedBlocks.close }}\n          </button>\n          <button\n            type=\"button\"\n            :class=\"primaryBtnClass\"\n            :disabled=\"!selected\"\n            @click=\"handleInsert\"\n          >\n            {{ t.savedBlocks.insert }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </TplModal>\n</template>\n\n<style>\n/* Subtle breathing so the placeholders read as \"loading\" rather than as empty\n   rows. `prefers-reduced-motion` holds them still at full opacity — the bars\n   still communicate shape without animating. */\n.tpl-saved-block-skeleton {\n  animation: tpl-saved-block-pulse 1.4s ease-in-out infinite;\n}\n\n@keyframes tpl-saved-block-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.55;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-saved-block-skeleton {\n    animation: none;\n  }\n}\n\n.tpl-saved-block-delete-btn:hover {\n  color: var(--tpl-danger) !important;\n}\n\n.tpl-saved-block-rename-btn:hover {\n  color: var(--tpl-primary) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,IAAM,KAAQ,GAIR,IAAO,GAKP,KAAqB,SACnB,OAAO,mCACf,CAAA,MAAA,MAAA,EAAA,CAAA,CAAA,GAEM,EAAE,MAAG,cAAW,GAAQ,GACxB,IAAc,EAAc,IAAkB,yBAAyB,GACvE,IAAS,EAAc,IAAY,yBAAyB,GAC5D,KAAW,EAAO,IAAe,KAAA,CAAS,GAE1C,IAAc,EAAI,EAAE,GAEpB,IAAiB,EAAI,EAAE,GACvB,IAAa,EAAmB,IAAI,GACpC,IAAkB,EAAmB,IAAI,GACzC,IAAa,EAAmB,IAAI,GACpC,IAAc,EAAI,EAAE,GACpB,IAAsB,EAAI,EAAE,GAC5B,IAAc,EAA6B,IAAI,GAE/C,IAAiB,EAAY,KAAK,GAUlC,IAAW,QAAe;GAC9B,IAAM,IAAQ,EAAY,MAAM,KAAK,CAAC,CAAC,YAAY,GAC7C,IAAW,EAAe;GAChC,OAAO,EAAY,YAAY,MAAM,QAAQ,MAE3C,EADI,KAAS,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,SAAS,CAAK,KAC7C,KAAY,EAAE,aAAa,EAEhC;EACH,CAAC,GAWK,IAAgB,QAElB,EAAY,UAAU,SAAS,EAAY,YAAY,MAAM,WAAW,CAC5E,GAGM,KAAc,QACZ,EAAY,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,EAAe,UAAU,EACxE,GAEM,IAAW,QACV,EAAW,QAEd,EAAY,YAAY,MAAM,MAAM,MAAM,EAAE,OAAO,EAAW,KAAK,KAAK,OAF5C,IAI/B,GAOK,KAAkB,QAAiC;GACvD,IAAM,IAA4B,CAChC;IAAE,OAAO;IAAa,OAAO,EAAE,YAAY;GAAkB,CAC/D,GACM,IAAS,EAAO,QAAQ,MAAM;GACpC,KAAK,IAAI,IAAI,GAAG,IAAI,EAAO,QAAQ,KAAK;IACtC,IAAM,IAAQ,EAAO;IAGrB,EAAQ,KAAK;KACX,OAAO,EAAM;KACb,OAAO,EAAO,EAAE,YAAY,kBAAkB,EAC5C,OAAO,GAJG,EAAE,OADA,EAAM,SACa,EAAM,KAIrB,GAAG,IAAI,IACzB,CAAC;IACH,CAAC;GACH;GAEA,OADA,EAAQ,KAAK;IAAE,OAAO;IAAO,OAAO,EAAE,YAAY;GAAY,CAAC,GACxD;EACT,CAAC,GAEK,KAAsB,QAAmC;GAC7D,IAAI,EAAe,UAAU,OAAO;GACpC,IAAI,EAAe,UAAU,aAAa,OAAO;GAEjD,IAAM,IADS,EAAO,QAAQ,MAAM,OACjB,WAAW,MAAM,EAAE,OAAO,EAAe,KAAK;GACjE,IAAI,MAAQ,IAAI,OAAO,IAAM;EAE/B,CAAC;EAKD,QACQ,GAAM,UACX,MAAY;GACX,IAAI,GAAS;IAKX,AAJA,EAAY,QAAQ,IACpB,EAAe,QAAQ,IACvB,EAAW,QAAQ,MACnB,EAAgB,QAAQ,MACxB,EAAW,QAAQ;IAEnB,IAAM,IAAkB,EAAO,MAAM;IACrC,IAAI,GAAiB;KACnB,IAAM,IAAM,EAAO,QAAQ,MAAM,OAAO,WACrC,MAAM,EAAE,OAAO,CAClB;KACA,EAAe,QAAQ,MAAQ,KAAuB,QAAlB;IACtC,OACE,EAAe,QAAQ;GAE3B;EACF,GACA,EAAE,WAAW,GAAK,CACpB;EAEA,SAAS,GACP,GACmC;GACnC,IAAM,IAA2C,CAAC,GAC5C,oBAAO,IAAI,IAAY;GAC7B,KAAK,IAAM,KAAS,EAAM,SAKxB,IAJI,CAAC,EAAK,IAAI,EAAM,IAAI,KAAK,EAAe,EAAM,UAChD,EAAK,IAAI,EAAM,IAAI,GACnB,EAAM,KAAK;IAAE,MAAM,EAAM;IAAM,MAAM,EAAe,EAAM;GAAM,CAAC,IAE/D,EAAM,UAAU,GAAG;GAEzB,OAAO;EACT;EAEA,SAAS,EAAsB,GAA2B;GACxD,IAAM,IAAQ,IAAI,IAAI,EAAM,QAAQ,KAAK,MAAM,EAAE,IAAI,CAAC;GACtD,OAAO,KAAK,IAAI,GAAG,EAAM,OAAO,CAAC;EACnC;EAGA,SAAS,EAAc,GAA2B;GAChD,IAAM,IAAM,EAAM,aAAa,EAAM;GAErC,OADK,IACE,GAAmB,GAAK,EAAE,MAAM,CAAM,KAAK,KADjC;EAEnB;EAOA,SAAS,GAAc,GAA2B;GAChD,IAAM,IAAM,EAAM,aAAa,EAAM;GAErC,OADK,IACE,GAAuB,GAAK,EAAQ,IAD1B;EAEnB;EAEA,eAAe,GAAa,GAA2B;GACrD,IAAI;IAEF,AADA,MAAM,EAAY,OAAO,CAAE,GACvB,EAAW,UAAU,MACvB,EAAW,QAAQ;GAEvB,UAAU;IACR,EAAgB,QAAQ;GAC1B;EACF;EAEA,eAAe,GAAY,GAAkC;GAGtD,EAAY,eAAe,CAAK,MACrC,EAAW,QAAQ,EAAM,IACzB,EAAY,QAAQ,EAAM,MAC1B,EAAoB,QAAQ,EAAM,YAAY,IAC9C,EAAgB,QAAQ,MACxB,MAAM,GAAS,GACf,EAAY,OAAO,MAAM,GACzB,EAAY,OAAO,OAAO;EAC5B;EAEA,SAAS,IAAqB;GAG5B,AAFA,EAAW,QAAQ,MACnB,EAAY,QAAQ,IACpB,EAAoB,QAAQ;EAC9B;EAEA,eAAe,EAAa,GAA2B;GAIrD,IAAI,EAAW,UAAU,GAAI;GAC7B,IAAM,IAAW,EAAY,MAAM,KAAK,GAClC,IAAe,EAAoB,MAAM,KAAK,GAC9C,IAAU,EAAY,YAAY,MAAM,MAAM,MAAM,EAAE,OAAO,CAAE,GAI/D,IAAqD,CAAC;GAM5D,IALI,KAAY,MAAa,GAAS,SAAM,EAAM,OAAO,IAErD,OAAkB,GAAS,YAAY,QAAK,EAAM,WAAW,IAG7D,OAAO,KAAK,CAAK,CAAC,CAAC,WAAW,GAAG;IACnC,EAAa;IACb;GACF;GACA,IAAI;IACF,MAAM,EAAY,OAAO,GAAI,CAAK;GACpC,UAAU;IACR,EAAa;GACf;EACF;EAOA,SAAS,GAAe,GAAmB,GAAkB;GAC3D,IAAM,IAAM,EAAM,eACZ,IAAO,EAAM;GACf,KAAQ,EAAI,SAAS,CAAI,KAC7B,EAAkB,CAAE;EACtB;EAEA,SAAS,IAAqB;GAC5B,AAAI,EAAS,SACX,EAAK,UAAU,EAAS,OAAO,GAAoB,KAAK;EAE5D;EAEA,SAAS,IAAoB;GAC3B,EAAK,OAAO;EACd;EAEA,SAAS,GAAc,GAA4B;GAE7C,EAAW,UACX,EAAM,QAAQ,YAChB,EAAY,GAEV,EAAM,QAAQ,WAAW,EAAS,UACpC,EAAM,eAAe,GACrB,EAAa;EAEjB;oBAIE,EAAA,GAAA,EAkXW,IAAA;GAlXA,SAAS,EAAA;GAAU,SAAO;GAAc,WAAS;;GAU1D,SAAA,QAuWM,CAvWN,EAuWM,OAvWN,IAuWM;IA3VJ,EAgBM,OAhBN,IAgBM,CAbJ,EAKK,MALL,IAKK,EADA,EAAA,CAAA,CAAC,CAAC,YAAY,MAAM,GAAA,CAAA,GAEzB,EAMS,UAAA;KALN,cAAY,EAAA,CAAA,CAAC,CAAC,YAAY;KAC3B,OAAM;KACL,SAAO;IAER,GAAA,CAAA,EAAkC,EAAA,EAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;;IAKjC,EA4RM,OA5RN,IA4RM,CA1RJ,EAyPM,OAzPN,IAyPM;KArPJ,EAkCM,OAlCN,IAkCM,CA/BJ,EAaM,OAbN,IAaM,CAZJ,EAIE,EAAA,EAAA,GAAA;MAHC,MAAM;MACN,gBAAc;MACf,OAAM;KAER,CAAA,GAAA,EAAA,EAME,SAAA;MALS,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAW,QAAA;MACpB,MAAK;MACJ,aAAa,EAAA,CAAA,CAAC,CAAC,YAAY;MAC3B,UAAU,EAAA;MACX,OAAM;KAJG,GAAA,MAAA,GAAA,EAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAW,CAAA,CAAA,CAAA,CAAA,GAShB,EAAA,CAAA,CAAW,CAAC,WAAW,MAAM,SAAM,IAD3C,GAAA,EAAA,GAAA,EAeS,UAAA;;MAbE,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAc,QAAA;MACvB,eAAY;MACX,cAAY,EAAA,CAAA,CAAC,CAAC,YAAY;MAC3B,OAAM;KAEN,GAAA,CAAA,EAA2D,UAA3D,GAA2D,EAAvC,EAAA,CAAA,CAAC,CAAC,YAAY,aAAa,GAAA,CAAA,IAC/C,EAAA,EAAA,GAAA,EAMS,GAAA,MAAA,EALU,EAAA,CAAA,CAAW,CAAC,WAAW,QAAjC,OADT,EAAA,GAAA,EAMS,UAAA;MAJN,KAAK;MACL,OAAO;KAEL,GAAA,EAAA,CAAM,GAAA,GAAA,CAAA,EAXF,GAAA,GAAA,EAAA,GAAA,GAAA,EAAA,IAAA,CAAA,CAAA,GAAA,EAAA,KAAc,CAAA,CAAA,IAAA,EAAA,IAAA,EAAA,CAAA,CAAA;KAiB3B,EAMW,YANX,GAMW,EALT,EAAA,EAAA,GAAA,EAIE,GAAA,MAAA,EAHiB,EAAA,CAAA,CAAW,CAAC,WAAW,QAAjC,OADT,EAAA,GAAA,EAIE,UAAA;MAFC,KAAK;MACL,OAAO;;KAKZ,EAsMM,OAtMN,IAsMM,CAjMI,EAAA,SADR,EAAA,GAAA,EAqBM,OAAA;;MAnBJ,eAAY;MACZ,OAAM;MACN,MAAK;MACL,aAAU;MACT,cAAY,EAAA,CAAA,CAAC,CAAC,YAAY;KAE3B,GAAA,EAAA,EAAA,GAAA,EAYM,GAAA,MAAA,EAXQ,IAAL,MADT,EAYM,OAAA;MAVH,KAAK;MACN,eAAY;MACZ,OAAM;KAEN,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAEE,OAAA,EADA,OAAM,6DAA4D,GAAA,MAAA,EAAA,GAEpE,EAEE,OAAA,EADA,OAAM,wEAAuE,GAAA,MAAA,EAAA,CAAA,CAAA,CAAA,CAMtE,GAAA,EAAA,EAAA,GAAA,GAAA,EAAA,KAAA,EAAA,MAAS,SAAM,KAD5B,EAAA,GAAA,EA8IM,OA9IN,IA8IM,EA1IJ,EAAA,EAAA,GAAA,EAyIW,GAAA,MAAA,EAzIc,EAAA,QAAR,OAAwB,EAAA,GAAA,EAAA,GAAA,EAAA,KAAA,EAAK,GAAA,GAAA,CAKpC,EAAA,UAAe,EAAK,MAD5B,EAAA,GAAA,EA0BM,OAAA;;MAxBJ,OAAM;MACN,OAAA,EAAA,oBAAA,2BAAA;MACC,aAAQ,MAAE,GAAe,GAAQ,EAAK,EAAE;KAEzC,GAAA,CAAA,EAAA,EAQE,SAAA;;MAPC,MAAM,MAAQ,EAAA,QAAc;MACpB,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAW,QAAA;MACpB,MAAK;MACJ,cAAY,EAAA,CAAA,CAAC,CAAC,YAAY;MAC3B,OAAM;MACL,WAAO,CAAqB,EAAA,GAAA,MAAA,EAAa,EAAK,EAAE,GAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA,GACtB,AAAA,EAAA,OAAA,EAAA,GAAA,MAAA,EAAY,GAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA;KAL9B,GAAA,MAAA,IAAA,EAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAW,CAAA,CAAA,GAOtB,EAAA,EAUE,SAAA;MATS,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAmB,QAAA;MAC5B,MAAK;MACL,eAAY;MACX,cAAY,EAAA,CAAA,CAAC,CAAC,YAAY;MAC1B,aAAa,EAAA,CAAA,CAAC,CAAC,YAAY;MAC5B,MAAK;MACL,OAAM;MACL,WAAO,CAAqB,EAAA,GAAA,MAAA,EAAa,EAAK,EAAE,GAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA,GACtB,AAAA,EAAA,OAAA,EAAA,GAAA,MAAA,EAAY,GAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA;KAR9B,GAAA,MAAA,IAAA,EAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAmB,CAAA,CAAA,CAAA,GAAA,IAAA,EAAA,MAYhC,EAAA,GAAA,EAwGS,UAAA;;MAtGP,MAAK;MACL,eAAY;MACX,gBAAc,EAAA,UAAe,EAAK;MACnC,OAAM;MACL,OAAK,GAAA;OAA2D,aAAA,EAAA,UAAe,EAAK,KAAA,uBAAA;OAA4J,iBAAA,EAAA,UAAe,EAAK,KAAA,6BAAA;;MAUpQ,UAAK,MAAE,EAAA,QAAa,EAAK;;MAE1B,EAeM,OAfN,IAeM,CAdJ,EAIO,QAJP,IAIO,EADF,EAAK,IAAI,GAAA,CAAA,GAEd,EAQO,QARP,IAQO,EAJH,EAAA,CAAA,CAAM,CAAC,EAAA,CAAA,CAAC,CAAC,YAAY,YAAU,EAAqC,OAAA,EAAK,QAAQ,OAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA;MAO/E,EAAK,YADb,EAAA,GAAA,EAUM,OAVN,IAUM,CANJ,EAKO,QALP,IAKO,EADF,EAAK,QAAQ,GAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;MAGpB,EA0DM,OA1DN,IA0DM;QAzDJ,EAAA,EAAA,GAAA,EAOE,GAAA,MAAA,EALe,GAAkB,CAAI,IAA9B,OAFT,EAAA,GAAA,EAOE,GANK,EAAK,IAAI,GAAA;QAEb,KAAK,EAAK;QACV,MAAM;QACN,gBAAc;QACf,OAAM;;OAGA,EAAsB,CAAI,IAAA,KADlC,EAAA,GAAA,EAKO,QALP,IAGC,OACE,EAAG,EAAsB,CAAI,CAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;OAGxB,EAAc,CAAI,KAD1B,EAAA,GAAA,EAOO,QAAA;;QALL,eAAY;QACZ,OAAM;QACL,OAAO,GAAc,CAAI;OAEvB,GAAA,EAAA,EAAc,CAAI,CAAA,GAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA;OAGf,EAAA,UAAoB,EAAK,MADjC,EAAA,GAAA,EAQS,UAAA;;QANN,cAAY,EAAA,CAAA,CAAC,CAAC,YAAY;QAC3B,OAAM;QACN,OAAA,EAAA,oBAAA,cAAA;QACC,SAAK,GAAA,MAAO,GAAa,EAAK,EAAE,GAAA,CAAA,MAAA,CAAA;OAE9B,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,YAAY,aAAa,GAAA,GAAA,EAAA,MAKhC,EAAA,GAAA,EAsBW,GAAA,EAAA,KAAA,EAAA,GAAA,CApBD,EAAA,CAAA,CAAW,CAAC,eAAe,CAAI,KADvC,EAAA,GAAA,EAQS,UAAA;;QANP,OAAM;QACL,cAAY,EAAA,CAAA,CAAC,CAAC,YAAY;QAC1B,OAAO,EAAA,CAAA,CAAC,CAAC,YAAY;QACrB,SAAK,GAAA,MAAO,GAAY,CAAI,GAAA,CAAA,MAAA,CAAA;OAE7B,GAAA,CAAA,EAAyC,EAAA,EAAA,GAAA;QAAhC,MAAM;QAAK,gBAAc;OAG5B,CAAA,CAAA,GAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAA,CAAA,CAAW,CAAC,eAAe,CAAI,KADvC,EAAA,GAAA,EAWS,UAAA;;QATP,OAAK,EAAA,CAAC,kKAAgK,EAClH,eAAA,CAAA,EAAA,CAAA,CAAW,CAAC,eAAe,CAAI,EAAA,CAAA,CAAA;QAGlF,cAAY,EAAA,CAAA,CAAC,CAAC,YAAY;QAC1B,OAAO,EAAA,CAAA,CAAC,CAAC,YAAY;QACrB,SAAK,GAAA,MAAO,EAAA,QAAkB,EAAK,IAAE,CAAA,MAAA,CAAA;OAEtC,GAAA,CAAA,EAAyC,EAAA,EAAA,GAAA;QAAhC,MAAM;QAAK,gBAAc;;;uBAS9C,GAAA,GAAA,EAAA,CAAA,MAAA,EAAA,GAAA,EAyBM,OAzBN,IAyBM,CArBJ,EAIE,EAAA,CAAA,GAAA;MAHC,MAAM;MACN,gBAAc;MACf,OAAM;KAGA,CAAA,GAAA,GAAA,SADR,EAAA,GAAA,EAKI,KALJ,GAKI,EADC,EAAA,CAAA,CAAC,CAAC,YAAY,SAAS,GAAA,CAAA,MAE5B,EAAA,GAAA,EASW,GAAA,EAAA,KAAA,EAAA,GAAA,CART,EAEI,KAFJ,IAEI,EADC,EAAA,CAAA,CAAC,CAAC,YAAY,KAAK,GAAA,CAAA,GAExB,EAII,KAJJ,IAII,EADC,EAAA,CAAA,CAAC,CAAC,YAAY,SAAS,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,EAAA,CAAA;IAQpC,CAAA,GAAA,EA6BM,OA7BN,IA6BM,CAzBI,EAAA,SADR,EAAA,GAAA,EAQM,OARN,IAQM,CAHJ,EAEM,OAFN,IAEM,CADJ,EAAiD,EAAA,EAAA,GAAA,EAA5B,QAAQ,EAAA,MAAS,QAAA,GAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAK1C,EAAA,GAAA,EAcM,OAdN,IAcM,CAVJ,EAIE,EAAA,CAAA,GAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;IAER,CAAA,GAAA,EAII,KAJJ,IAII,EADC,EAAA,CAAA,CAAC,CAAC,YAAY,eAAe,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;IAOxC,EAwCM,OAxCN,IAwCM,CArCJ,EAkBM,OAlBN,IAkBM,CAjBJ,EAIQ,SAJR,IAIQ,EADH,EAAA,CAAA,CAAC,CAAC,YAAY,cAAc,GAAA,CAAA,GAEjC,EAAA,EAWS,UAAA;KAVE,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAc,QAAA;KACvB,OAAM;IAEN,GAAA,EAAA,EAAA,EAAA,GAAA,EAMS,GAAA,MAAA,EALO,GAAA,QAAP,OADT,EAAA,GAAA,EAMS,UAAA;KAJN,KAAK,EAAI;KACT,OAAO,EAAI;IAET,GAAA,EAAA,EAAI,KAAK,GAAA,GAAA,EAAA,EARL,GAAA,GAAA,EAAA,GAAA,GAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAc,CAAA,CAAA,CAAA,CAAA,GAY3B,EAiBM,OAjBN,IAiBM,CAhBJ,EAOS,UAAA;KANP,MAAK;KACL,eAAY;KACZ,OAAM;KACL,SAAO;IAEL,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,YAAY,KAAK,GAAA,CAAA,GAExB,EAOS,UAAA;KANP,MAAK;KACJ,OAAK,EAAE,EAAA,EAAA,CAAe;KACtB,UAAQ,CAAG,EAAA;KACX,SAAO;IAEL,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,YAAY,MAAM,GAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"SavedBlocksBrowserModal-C6Z8AvtD.js","names":[],"sources":["../../../src/components/SavedBlocksBrowserModal.vue","../../../src/components/SavedBlocksBrowserModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables\";\nimport { blockTypeIcons } from \"../utils/blockTypeIcons\";\nimport { formatAbsoluteDateTime } from \"../utils/formatAbsoluteDateTime\";\nimport { formatRelativeTime } from \"../utils/formatRelativeTime\";\nimport {\n  SAVED_BLOCKS_KEY,\n  EDITOR_KEY,\n  UI_LOCALE_KEY,\n  requireInject,\n} from \"../keys\";\nimport type { SavedBlock } from \"@templatical/types\";\nimport { Package, Pencil, Search, Trash2, X } from \"@lucide/vue\";\nimport {\n  computed,\n  defineAsyncComponent,\n  inject,\n  nextTick,\n  ref,\n  watch,\n} from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\", saved: SavedBlock, insertIndex: number | undefined): void;\n}>();\n\nconst BlockPreviewCanvas = defineAsyncComponent(\n  () => import(\"./BlockPreviewCanvas.vue\"),\n);\n\nconst { t, format } = useI18n();\nconst savedBlocks = requireInject(SAVED_BLOCKS_KEY, \"SavedBlocksBrowserModal\");\nconst editor = requireInject(EDITOR_KEY, \"SavedBlocksBrowserModal\");\nconst uiLocale = inject(UI_LOCALE_KEY, undefined);\n\nconst searchQuery = ref(\"\");\n/** `\"\"` = no category filter. Matched exactly against `SavedBlock.category`. */\nconst categoryFilter = ref(\"\");\nconst selectedId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\nconst renamingId = ref<string | null>(null);\nconst renameDraft = ref(\"\");\nconst renameCategoryDraft = ref(\"\");\nconst renameInput = ref<HTMLInputElement | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\n// Order is the provider's to decide — the editor never re-sorts. Whatever\n// `list()` returns is what the user sees (the bundled localStorage adapter, for\n// instance, returns newest-first). Filters only narrow; they never reorder.\n//\n// Both filters run in memory over the loaded entries rather than round-tripping\n// to the provider: that keeps a BYO provider at four dumb methods, and it is\n// what lets the category options below be derived at all — a provider-filtered\n// response could not tell us which other categories exist.\nconst filtered = computed(() => {\n  const query = searchQuery.value.trim().toLowerCase();\n  const category = categoryFilter.value;\n  return savedBlocks.savedBlocks.value.filter((b) => {\n    if (query && !b.name.toLowerCase().includes(query)) return false;\n    if (category && b.category !== category) return false;\n    return true;\n  });\n});\n\n/**\n * The list is fetched when this modal opens, not at editor mount, so a first\n * open can arrive before the provider answers. Show the skeleton only while\n * there is *nothing* to display: on a reopen the previous entries render\n * immediately and the refetch lands underneath them.\n *\n * Without this the empty state would claim \"No saved blocks yet\" for the whole\n * duration of the request — false, not merely unhelpful.\n */\nconst isInitialLoad = computed(\n  () =>\n    savedBlocks.isLoading.value && savedBlocks.savedBlocks.value.length === 0,\n);\n\n/** Whether any filter is narrowing the list — drives the empty-state copy. */\nconst isFiltering = computed(\n  () => searchQuery.value.trim().length > 0 || categoryFilter.value !== \"\",\n);\n\nconst selected = computed(() => {\n  if (!selectedId.value) return null;\n  return (\n    savedBlocks.savedBlocks.value.find((b) => b.id === selectedId.value) ?? null\n  );\n});\n\ninterface PositionOption {\n  value: string;\n  label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n  const options: PositionOption[] = [\n    { value: \"beginning\", label: t.savedBlocks.insertAtBeginning },\n  ];\n  const blocks = editor.content.value.blocks;\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    const typeKey = block.type as keyof typeof t.blocks;\n    const label = t.blocks[typeKey] ?? block.type;\n    options.push({\n      value: block.id,\n      label: format(t.savedBlocks.insertAfterBlock, {\n        block: `${label} ${i + 1}`,\n      }),\n    });\n  }\n  options.push({ value: \"end\", label: t.savedBlocks.insertAtEnd });\n  return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n  if (insertPosition.value === \"end\") return undefined;\n  if (insertPosition.value === \"beginning\") return 0;\n  const blocks = editor.content.value.blocks;\n  const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n  if (idx !== -1) return idx + 1;\n  return undefined;\n});\n\n// `immediate` matters: the modal is mounted lazily behind a `v-if` on the same\n// state that drives `visible`, so it can mount with `visible` already true and\n// would otherwise never resolve the default insert position.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      searchQuery.value = \"\";\n      categoryFilter.value = \"\";\n      selectedId.value = null;\n      confirmDeleteId.value = null;\n      renamingId.value = null;\n      // Default to after selected block, or end\n      const selectedBlockId = editor.state.selectedBlockId;\n      if (selectedBlockId) {\n        const idx = editor.content.value.blocks.findIndex(\n          (b) => b.id === selectedBlockId,\n        );\n        insertPosition.value = idx !== -1 ? selectedBlockId : \"end\";\n      } else {\n        insertPosition.value = \"end\";\n      }\n    }\n  },\n  { immediate: true },\n);\n\nfunction getBlockTypeIcons(\n  saved: SavedBlock,\n): { type: string; icon: unknown }[] {\n  const icons: { type: string; icon: unknown }[] = [];\n  const seen = new Set<string>();\n  for (const block of saved.content) {\n    if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n      seen.add(block.type);\n      icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n    }\n    if (icons.length >= 5) break;\n  }\n  return icons;\n}\n\nfunction getRemainingTypeCount(saved: SavedBlock): number {\n  const types = new Set(saved.content.map((b) => b.type));\n  return Math.max(0, types.size - 5);\n}\n\n/** Compact \"5m ago\" label, or \"\" when the provider supplies no usable timestamp. */\nfunction relativeLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatRelativeTime(raw, t.time, format) ?? \"\";\n}\n\n/**\n * Absolute timestamp for the row's tooltip. Built by `Intl`, so it needs no\n * i18n keys — but it does need the editor's locale, or it formats in the\n * browser's and disagrees with the translated row beside it.\n */\nfunction absoluteLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatAbsoluteDateTime(raw, uiLocale);\n}\n\nasync function handleDelete(id: string): Promise<void> {\n  try {\n    await savedBlocks.remove(id);\n    if (selectedId.value === id) {\n      selectedId.value = null;\n    }\n  } finally {\n    confirmDeleteId.value = null;\n  }\n}\n\nasync function startRename(saved: SavedBlock): Promise<void> {\n  // The pencil is already hidden when editing isn't permitted; this stops a\n  // programmatic call opening an editor whose commit could only fail.\n  if (!savedBlocks.canUpdateBlock(saved)) return;\n  renamingId.value = saved.id;\n  renameDraft.value = saved.name;\n  renameCategoryDraft.value = saved.category ?? \"\";\n  confirmDeleteId.value = null;\n  await nextTick();\n  renameInput.value?.focus();\n  renameInput.value?.select();\n}\n\nfunction cancelRename(): void {\n  renamingId.value = null;\n  renameDraft.value = \"\";\n  renameCategoryDraft.value = \"\";\n}\n\nasync function commitRename(id: string): Promise<void> {\n  // Guards two races: Escape sets `renamingId` to null and the unmounting\n  // input can still emit `blur`, and Enter commits then blurs. Either would\n  // otherwise fire a second, unwanted update.\n  if (renamingId.value !== id) return;\n  const nextName = renameDraft.value.trim();\n  const nextCategory = renameCategoryDraft.value.trim();\n  const current = savedBlocks.savedBlocks.value.find((b) => b.id === id);\n\n  // An empty name is not a rename — fall back to what's stored, so clearing\n  // the field and blurring can't wipe the entry's name.\n  const patch: Partial<{ name: string; category: string }> = {};\n  if (nextName && nextName !== current?.name) patch.name = nextName;\n  // \"\" is meaningful here: it clears the category. Only skip when unchanged.\n  if (nextCategory !== (current?.category ?? \"\")) patch.category = nextCategory;\n\n  // Skip the round-trip when nothing actually changed.\n  if (Object.keys(patch).length === 0) {\n    cancelRename();\n    return;\n  }\n  try {\n    await savedBlocks.update(id, patch);\n  } finally {\n    cancelRename();\n  }\n}\n\n/**\n * Commit when focus leaves the edit row entirely — not when it moves between\n * the name and category inputs. A plain `@blur` on each input would commit\n * (and unmount the row) the moment the user tabbed from one to the other.\n */\nfunction onEditFocusOut(event: FocusEvent, id: string): void {\n  const row = event.currentTarget as HTMLElement;\n  const next = event.relatedTarget as Node | null;\n  if (next && row.contains(next)) return;\n  void commitRename(id);\n}\n\nfunction handleInsert(): void {\n  if (selected.value) {\n    emit(\"insert\", selected.value, resolvedInsertIndex.value);\n  }\n}\n\nfunction handleClose(): void {\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  // While renaming, Enter/Escape belong to the inline input, not the dialog.\n  if (renamingId.value) return;\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n  if (event.key === \"Enter\" && selected.value) {\n    event.preventDefault();\n    handleInsert();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Explicit width, not `w-full`: the modal's parent is shrink-to-fit, so\n         `width: 100%` resolved against its own contents and the 600px preview\n         canvas drove the dialog's size — it measured 523px with nothing selected\n         and 965px with a block selected, nearly doubling on click. A pinned\n         width makes every state identical and stops any future right-pane\n         content from moving it. `max-w-full` keeps it inside the backdrop on\n         narrow hosts — a percentage, so it neither reintroduces the `rem`\n         sensitivity of issue #209 nor the viewport mismatch of issue #575; the\n         preview scrolls within. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-testid=\"saved-blocks-browser\"\n      aria-labelledby=\"tpl-saved-blocks-browser-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-[1000px] tpl:max-w-full tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n      >\n        <h3\n          id=\"tpl-saved-blocks-browser-title\"\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ t.savedBlocks.browse }}\n        </h3>\n        <button\n          :aria-label=\"t.savedBlocks.close\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n          @click=\"handleClose\"\n        >\n          <X :size=\"16\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n        <!-- Left panel: saved block list -->\n        <div\n          class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n        >\n          <!-- Search + category filter -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:px-4 tpl:pt-4 tpl:pb-3\"\n          >\n            <div class=\"tpl:relative\">\n              <Search\n                :size=\"14\"\n                :stroke-width=\"2\"\n                class=\"tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                :placeholder=\"t.savedBlocks.search\"\n                :disabled=\"isInitialLoad\"\n                class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n              />\n            </div>\n            <!-- Only worth showing once something is actually categorised. -->\n            <select\n              v-if=\"savedBlocks.categories.value.length > 0\"\n              v-model=\"categoryFilter\"\n              data-testid=\"saved-blocks-category-filter\"\n              :aria-label=\"t.savedBlocks.filterByCategory\"\n              class=\"tpl:h-8 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n            >\n              <option value=\"\">{{ t.savedBlocks.allCategories }}</option>\n              <option\n                v-for=\"option in savedBlocks.categories.value\"\n                :key=\"option\"\n                :value=\"option\"\n              >\n                {{ option }}\n              </option>\n            </select>\n          </div>\n\n          <!-- Suggestions for the inline category editor, shared by every row -->\n          <datalist id=\"tpl-saved-block-browser-categories\">\n            <option\n              v-for=\"option in savedBlocks.categories.value\"\n              :key=\"option\"\n              :value=\"option\"\n            />\n          </datalist>\n\n          <!-- List -->\n          <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n            <!-- Skeleton rows: same height and gap as a real card, so the pane\n                 doesn't resize when the entries land. `aria-busy` on the region\n                 is what a screen reader announces; the bars are decorative. -->\n            <div\n              v-if=\"isInitialLoad\"\n              data-testid=\"saved-blocks-loading\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n              role=\"status\"\n              aria-busy=\"true\"\n              :aria-label=\"t.savedBlocks.loading\"\n            >\n              <div\n                v-for=\"n in 3\"\n                :key=\"n\"\n                aria-hidden=\"true\"\n                class=\"tpl-saved-block-skeleton tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)]\"\n              >\n                <div\n                  class=\"tpl:h-3 tpl:w-1/2 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n                <div\n                  class=\"tpl:mt-2 tpl:h-2.5 tpl:w-1/4 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n              </div>\n            </div>\n\n            <div\n              v-else-if=\"filtered.length > 0\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n            >\n              <template v-for=\"item in filtered\" :key=\"item.id\">\n                <!-- Inline rename replaces the whole row: an <input> nested\n                     inside the card <button> would be invalid markup and\n                     wouldn't focus reliably. -->\n                <div\n                  v-if=\"renamingId === item.id\"\n                  class=\"tpl:flex tpl:w-full tpl:flex-col tpl:gap-1 tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-primary)]\"\n                  style=\"background-color: var(--tpl-primary-light)\"\n                  @focusout=\"onEditFocusOut($event, item.id)\"\n                >\n                  <input\n                    :ref=\"(el) => (renameInput = el as HTMLInputElement | null)\"\n                    v-model=\"renameDraft\"\n                    type=\"text\"\n                    :aria-label=\"t.savedBlocks.rename\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                  <input\n                    v-model=\"renameCategoryDraft\"\n                    type=\"text\"\n                    data-testid=\"saved-blocks-edit-category\"\n                    :aria-label=\"t.savedBlocks.category\"\n                    :placeholder=\"t.savedBlocks.categoryPlaceholder\"\n                    list=\"tpl-saved-block-browser-categories\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                </div>\n\n                <button\n                  v-else\n                  type=\"button\"\n                  data-testid=\"saved-block-card\"\n                  :aria-pressed=\"selectedId === item.id\"\n                  class=\"tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]\"\n                  :style=\"{\n                    borderColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary)'\n                        : 'var(--tpl-border)',\n                    backgroundColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary-light)'\n                        : 'transparent',\n                  }\"\n                  @click=\"selectedId = item.id\"\n                >\n                  <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n                    <span\n                      class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                    >\n                      {{ item.name }}\n                    </span>\n                    <span\n                      class=\"tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                    >\n                      {{\n                        format(t.savedBlocks.blockCount, {\n                          count: item.content.length,\n                        })\n                      }}\n                    </span>\n                  </div>\n                  <div\n                    v-if=\"item.category\"\n                    class=\"tpl:mt-1 tpl:flex tpl:items-center\"\n                  >\n                    <span\n                      data-testid=\"saved-block-category\"\n                      class=\"tpl:max-w-full tpl:truncate tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]\"\n                    >\n                      {{ item.category }}\n                    </span>\n                  </div>\n                  <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n                    <component\n                      :is=\"icon.icon\"\n                      v-for=\"icon in getBlockTypeIcons(item)\"\n                      :key=\"icon.type\"\n                      :size=\"14\"\n                      :stroke-width=\"1.5\"\n                      class=\"tpl:text-[var(--tpl-text-dim)]\"\n                    />\n                    <span\n                      v-if=\"getRemainingTypeCount(item) > 0\"\n                      class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      +{{ getRemainingTypeCount(item) }}\n                    </span>\n                    <span\n                      v-if=\"relativeLabel(item)\"\n                      data-testid=\"saved-block-updated\"\n                      class=\"tpl:ml-1 tpl:truncate tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                      :title=\"absoluteLabel(item)\"\n                    >\n                      {{ relativeLabel(item) }}\n                    </span>\n                    <button\n                      v-if=\"confirmDeleteId === item.id\"\n                      :aria-label=\"t.savedBlocks.deleteConfirm\"\n                      class=\"tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]\"\n                      style=\"background-color: transparent\"\n                      @click.stop=\"handleDelete(item.id)\"\n                    >\n                      {{ t.savedBlocks.deleteConfirm }}\n                    </button>\n                    <!-- Hidden, not disabled: an action the user can't perform\n                         is better absent than greyed out. `ml-auto` moves to\n                         whichever button survives so the row stays aligned. -->\n                    <template v-else>\n                      <button\n                        v-if=\"savedBlocks.canUpdateBlock(item)\"\n                        class=\"tpl-saved-block-rename-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :aria-label=\"t.savedBlocks.rename\"\n                        :title=\"t.savedBlocks.rename\"\n                        @click.stop=\"startRename(item)\"\n                      >\n                        <Pencil :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                      <button\n                        v-if=\"savedBlocks.canDeleteBlock(item)\"\n                        class=\"tpl-saved-block-delete-btn tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :class=\"{\n                          'tpl:ml-auto': !savedBlocks.canUpdateBlock(item),\n                        }\"\n                        :aria-label=\"t.savedBlocks.delete\"\n                        :title=\"t.savedBlocks.delete\"\n                        @click.stop=\"confirmDeleteId = item.id\"\n                      >\n                        <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                    </template>\n                  </div>\n                </button>\n              </template>\n            </div>\n\n            <!-- Empty state — only once we actually know the library is empty -->\n            <div\n              v-else\n              class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n            >\n              <Package\n                :size=\"32\"\n                :stroke-width=\"1\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <p\n                v-if=\"isFiltering\"\n                class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ t.savedBlocks.noResults }}\n              </p>\n              <template v-else>\n                <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n                  {{ t.savedBlocks.empty }}\n                </p>\n                <p\n                  class=\"tpl:mt-1 tpl:max-w-[220px] tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n                >\n                  {{ t.savedBlocks.emptyHint }}\n                </p>\n              </template>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right panel: preview -->\n        <div\n          class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n        >\n          <div\n            v-if=\"selected\"\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n          >\n            <!-- Visual preview -->\n            <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n              <BlockPreviewCanvas :blocks=\"selected.content\" />\n            </div>\n          </div>\n\n          <!-- Empty preview state -->\n          <div\n            v-else\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n          >\n            <Package\n              :size=\"32\"\n              :stroke-width=\"1\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ t.savedBlocks.selectToPreview }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n      >\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <label\n            class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ t.savedBlocks.insertPosition }}\n          </label>\n          <select\n            v-model=\"insertPosition\"\n            class=\"tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          >\n            <option\n              v-for=\"opt in positionOptions\"\n              :key=\"opt.value\"\n              :value=\"opt.value\"\n            >\n              {{ opt.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"tpl:flex tpl:gap-2\">\n          <button\n            type=\"button\"\n            data-testid=\"saved-blocks-browser-close\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n            @click=\"handleClose\"\n          >\n            {{ t.savedBlocks.close }}\n          </button>\n          <button\n            type=\"button\"\n            :class=\"primaryBtnClass\"\n            :disabled=\"!selected\"\n            @click=\"handleInsert\"\n          >\n            {{ t.savedBlocks.insert }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </TplModal>\n</template>\n\n<style>\n/* Subtle breathing so the placeholders read as \"loading\" rather than as empty\n   rows. `prefers-reduced-motion` holds them still at full opacity — the bars\n   still communicate shape without animating. */\n.tpl-saved-block-skeleton {\n  animation: tpl-saved-block-pulse 1.4s ease-in-out infinite;\n}\n\n@keyframes tpl-saved-block-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.55;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-saved-block-skeleton {\n    animation: none;\n  }\n}\n\n.tpl-saved-block-delete-btn:hover {\n  color: var(--tpl-danger) !important;\n}\n\n.tpl-saved-block-rename-btn:hover {\n  color: var(--tpl-primary) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables\";\nimport { blockTypeIcons } from \"../utils/blockTypeIcons\";\nimport { formatAbsoluteDateTime } from \"../utils/formatAbsoluteDateTime\";\nimport { formatRelativeTime } from \"../utils/formatRelativeTime\";\nimport {\n  SAVED_BLOCKS_KEY,\n  EDITOR_KEY,\n  UI_LOCALE_KEY,\n  requireInject,\n} from \"../keys\";\nimport type { SavedBlock } from \"@templatical/types\";\nimport { Package, Pencil, Search, Trash2, X } from \"@lucide/vue\";\nimport {\n  computed,\n  defineAsyncComponent,\n  inject,\n  nextTick,\n  ref,\n  watch,\n} from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\", saved: SavedBlock, insertIndex: number | undefined): void;\n}>();\n\nconst BlockPreviewCanvas = defineAsyncComponent(\n  () => import(\"./BlockPreviewCanvas.vue\"),\n);\n\nconst { t, format } = useI18n();\nconst savedBlocks = requireInject(SAVED_BLOCKS_KEY, \"SavedBlocksBrowserModal\");\nconst editor = requireInject(EDITOR_KEY, \"SavedBlocksBrowserModal\");\nconst uiLocale = inject(UI_LOCALE_KEY, undefined);\n\nconst searchQuery = ref(\"\");\n/** `\"\"` = no category filter. Matched exactly against `SavedBlock.category`. */\nconst categoryFilter = ref(\"\");\nconst selectedId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\nconst renamingId = ref<string | null>(null);\nconst renameDraft = ref(\"\");\nconst renameCategoryDraft = ref(\"\");\nconst renameInput = ref<HTMLInputElement | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\n// Order is the provider's to decide — the editor never re-sorts. Whatever\n// `list()` returns is what the user sees (the bundled localStorage adapter, for\n// instance, returns newest-first). Filters only narrow; they never reorder.\n//\n// Both filters run in memory over the loaded entries rather than round-tripping\n// to the provider: that keeps a BYO provider at four dumb methods, and it is\n// what lets the category options below be derived at all — a provider-filtered\n// response could not tell us which other categories exist.\nconst filtered = computed(() => {\n  const query = searchQuery.value.trim().toLowerCase();\n  const category = categoryFilter.value;\n  return savedBlocks.savedBlocks.value.filter((b) => {\n    if (query && !b.name.toLowerCase().includes(query)) return false;\n    if (category && b.category !== category) return false;\n    return true;\n  });\n});\n\n/**\n * The list is fetched when this modal opens, not at editor mount, so a first\n * open can arrive before the provider answers. Show the skeleton only while\n * there is *nothing* to display: on a reopen the previous entries render\n * immediately and the refetch lands underneath them.\n *\n * Without this the empty state would claim \"No saved blocks yet\" for the whole\n * duration of the request — false, not merely unhelpful.\n */\nconst isInitialLoad = computed(\n  () =>\n    savedBlocks.isLoading.value && savedBlocks.savedBlocks.value.length === 0,\n);\n\n/** Whether any filter is narrowing the list — drives the empty-state copy. */\nconst isFiltering = computed(\n  () => searchQuery.value.trim().length > 0 || categoryFilter.value !== \"\",\n);\n\nconst selected = computed(() => {\n  if (!selectedId.value) return null;\n  return (\n    savedBlocks.savedBlocks.value.find((b) => b.id === selectedId.value) ?? null\n  );\n});\n\ninterface PositionOption {\n  value: string;\n  label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n  const options: PositionOption[] = [\n    { value: \"beginning\", label: t.savedBlocks.insertAtBeginning },\n  ];\n  const blocks = editor.content.value.blocks;\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    const typeKey = block.type as keyof typeof t.blocks;\n    const label = t.blocks[typeKey] ?? block.type;\n    options.push({\n      value: block.id,\n      label: format(t.savedBlocks.insertAfterBlock, {\n        block: `${label} ${i + 1}`,\n      }),\n    });\n  }\n  options.push({ value: \"end\", label: t.savedBlocks.insertAtEnd });\n  return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n  if (insertPosition.value === \"end\") return undefined;\n  if (insertPosition.value === \"beginning\") return 0;\n  const blocks = editor.content.value.blocks;\n  const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n  if (idx !== -1) return idx + 1;\n  return undefined;\n});\n\n// `immediate` matters: the modal is mounted lazily behind a `v-if` on the same\n// state that drives `visible`, so it can mount with `visible` already true and\n// would otherwise never resolve the default insert position.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      searchQuery.value = \"\";\n      categoryFilter.value = \"\";\n      selectedId.value = null;\n      confirmDeleteId.value = null;\n      renamingId.value = null;\n      // Default to after selected block, or end\n      const selectedBlockId = editor.state.selectedBlockId;\n      if (selectedBlockId) {\n        const idx = editor.content.value.blocks.findIndex(\n          (b) => b.id === selectedBlockId,\n        );\n        insertPosition.value = idx !== -1 ? selectedBlockId : \"end\";\n      } else {\n        insertPosition.value = \"end\";\n      }\n    }\n  },\n  { immediate: true },\n);\n\nfunction getBlockTypeIcons(\n  saved: SavedBlock,\n): { type: string; icon: unknown }[] {\n  const icons: { type: string; icon: unknown }[] = [];\n  const seen = new Set<string>();\n  for (const block of saved.content) {\n    if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n      seen.add(block.type);\n      icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n    }\n    if (icons.length >= 5) break;\n  }\n  return icons;\n}\n\nfunction getRemainingTypeCount(saved: SavedBlock): number {\n  const types = new Set(saved.content.map((b) => b.type));\n  return Math.max(0, types.size - 5);\n}\n\n/** Compact \"5m ago\" label, or \"\" when the provider supplies no usable timestamp. */\nfunction relativeLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatRelativeTime(raw, t.time, format) ?? \"\";\n}\n\n/**\n * Absolute timestamp for the row's tooltip. Built by `Intl`, so it needs no\n * i18n keys — but it does need the editor's locale, or it formats in the\n * browser's and disagrees with the translated row beside it.\n */\nfunction absoluteLabel(saved: SavedBlock): string {\n  const raw = saved.updatedAt ?? saved.createdAt;\n  if (!raw) return \"\";\n  return formatAbsoluteDateTime(raw, uiLocale);\n}\n\nasync function handleDelete(id: string): Promise<void> {\n  try {\n    await savedBlocks.remove(id);\n    if (selectedId.value === id) {\n      selectedId.value = null;\n    }\n  } finally {\n    confirmDeleteId.value = null;\n  }\n}\n\nasync function startRename(saved: SavedBlock): Promise<void> {\n  // The pencil is already hidden when editing isn't permitted; this stops a\n  // programmatic call opening an editor whose commit could only fail.\n  if (!savedBlocks.canUpdateBlock(saved)) return;\n  renamingId.value = saved.id;\n  renameDraft.value = saved.name;\n  renameCategoryDraft.value = saved.category ?? \"\";\n  confirmDeleteId.value = null;\n  await nextTick();\n  renameInput.value?.focus();\n  renameInput.value?.select();\n}\n\nfunction cancelRename(): void {\n  renamingId.value = null;\n  renameDraft.value = \"\";\n  renameCategoryDraft.value = \"\";\n}\n\nasync function commitRename(id: string): Promise<void> {\n  // Guards two races: Escape sets `renamingId` to null and the unmounting\n  // input can still emit `blur`, and Enter commits then blurs. Either would\n  // otherwise fire a second, unwanted update.\n  if (renamingId.value !== id) return;\n  const nextName = renameDraft.value.trim();\n  const nextCategory = renameCategoryDraft.value.trim();\n  const current = savedBlocks.savedBlocks.value.find((b) => b.id === id);\n\n  // An empty name is not a rename — fall back to what's stored, so clearing\n  // the field and blurring can't wipe the entry's name.\n  const patch: Partial<{ name: string; category: string }> = {};\n  if (nextName && nextName !== current?.name) patch.name = nextName;\n  // \"\" is meaningful here: it clears the category. Only skip when unchanged.\n  if (nextCategory !== (current?.category ?? \"\")) patch.category = nextCategory;\n\n  // Skip the round-trip when nothing actually changed.\n  if (Object.keys(patch).length === 0) {\n    cancelRename();\n    return;\n  }\n  try {\n    await savedBlocks.update(id, patch);\n  } finally {\n    cancelRename();\n  }\n}\n\n/**\n * Commit when focus leaves the edit row entirely — not when it moves between\n * the name and category inputs. A plain `@blur` on each input would commit\n * (and unmount the row) the moment the user tabbed from one to the other.\n */\nfunction onEditFocusOut(event: FocusEvent, id: string): void {\n  const row = event.currentTarget as HTMLElement;\n  const next = event.relatedTarget as Node | null;\n  if (next && row.contains(next)) return;\n  void commitRename(id);\n}\n\nfunction handleInsert(): void {\n  if (selected.value) {\n    emit(\"insert\", selected.value, resolvedInsertIndex.value);\n  }\n}\n\nfunction handleClose(): void {\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  // While renaming, Enter/Escape belong to the inline input, not the dialog.\n  if (renamingId.value) return;\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n  if (event.key === \"Enter\" && selected.value) {\n    event.preventDefault();\n    handleInsert();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Explicit width, not `w-full`: the modal's parent is shrink-to-fit, so\n         `width: 100%` resolved against its own contents and the 600px preview\n         canvas drove the dialog's size — it measured 523px with nothing selected\n         and 965px with a block selected, nearly doubling on click. A pinned\n         width makes every state identical and stops any future right-pane\n         content from moving it. `max-w-full` keeps it inside the backdrop on\n         narrow hosts — a percentage, so it neither reintroduces the `rem`\n         sensitivity of issue #209 nor the viewport mismatch of issue #575; the\n         preview scrolls within. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-testid=\"saved-blocks-browser\"\n      aria-labelledby=\"tpl-saved-blocks-browser-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-[1000px] tpl:max-w-full tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n      >\n        <h3\n          id=\"tpl-saved-blocks-browser-title\"\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ t.savedBlocks.browse }}\n        </h3>\n        <button\n          :aria-label=\"t.savedBlocks.close\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n          @click=\"handleClose\"\n        >\n          <X :size=\"16\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n        <!-- Left panel: saved block list -->\n        <div\n          class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n        >\n          <!-- Search + category filter -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:px-4 tpl:pt-4 tpl:pb-3\"\n          >\n            <div class=\"tpl:relative\">\n              <Search\n                :size=\"14\"\n                :stroke-width=\"2\"\n                class=\"tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                :placeholder=\"t.savedBlocks.search\"\n                :disabled=\"isInitialLoad\"\n                class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n              />\n            </div>\n            <!-- Only worth showing once something is actually categorised. -->\n            <select\n              v-if=\"savedBlocks.categories.value.length > 0\"\n              v-model=\"categoryFilter\"\n              data-testid=\"saved-blocks-category-filter\"\n              :aria-label=\"t.savedBlocks.filterByCategory\"\n              class=\"tpl:h-8 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n            >\n              <option value=\"\">{{ t.savedBlocks.allCategories }}</option>\n              <option\n                v-for=\"option in savedBlocks.categories.value\"\n                :key=\"option\"\n                :value=\"option\"\n              >\n                {{ option }}\n              </option>\n            </select>\n          </div>\n\n          <!-- Suggestions for the inline category editor, shared by every row -->\n          <datalist id=\"tpl-saved-block-browser-categories\">\n            <option\n              v-for=\"option in savedBlocks.categories.value\"\n              :key=\"option\"\n              :value=\"option\"\n            />\n          </datalist>\n\n          <!-- List -->\n          <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n            <!-- Skeleton rows: same height and gap as a real card, so the pane\n                 doesn't resize when the entries land. `aria-busy` on the region\n                 is what a screen reader announces; the bars are decorative. -->\n            <div\n              v-if=\"isInitialLoad\"\n              data-testid=\"saved-blocks-loading\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n              role=\"status\"\n              aria-busy=\"true\"\n              :aria-label=\"t.savedBlocks.loading\"\n            >\n              <div\n                v-for=\"n in 3\"\n                :key=\"n\"\n                aria-hidden=\"true\"\n                class=\"tpl-saved-block-skeleton tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)]\"\n              >\n                <div\n                  class=\"tpl:h-3 tpl:w-1/2 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n                <div\n                  class=\"tpl:mt-2 tpl:h-2.5 tpl:w-1/4 tpl:rounded tpl:bg-[var(--tpl-bg-hover)]\"\n                />\n              </div>\n            </div>\n\n            <div\n              v-else-if=\"filtered.length > 0\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n            >\n              <template v-for=\"item in filtered\" :key=\"item.id\">\n                <!-- Inline rename replaces the whole row: an <input> nested\n                     inside the card <button> would be invalid markup and\n                     wouldn't focus reliably. -->\n                <div\n                  v-if=\"renamingId === item.id\"\n                  class=\"tpl:flex tpl:w-full tpl:flex-col tpl:gap-1 tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-primary)]\"\n                  style=\"background-color: var(--tpl-primary-light)\"\n                  @focusout=\"onEditFocusOut($event, item.id)\"\n                >\n                  <input\n                    :ref=\"(el) => (renameInput = el as HTMLInputElement | null)\"\n                    v-model=\"renameDraft\"\n                    type=\"text\"\n                    :aria-label=\"t.savedBlocks.rename\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                  <input\n                    v-model=\"renameCategoryDraft\"\n                    type=\"text\"\n                    data-testid=\"saved-blocks-edit-category\"\n                    :aria-label=\"t.savedBlocks.category\"\n                    :placeholder=\"t.savedBlocks.categoryPlaceholder\"\n                    list=\"tpl-saved-block-browser-categories\"\n                    class=\"tpl:h-7 tpl:w-full tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    @keydown.enter.prevent.stop=\"commitRename(item.id)\"\n                    @keydown.esc.prevent.stop=\"cancelRename()\"\n                  />\n                </div>\n\n                <button\n                  v-else\n                  type=\"button\"\n                  data-testid=\"saved-block-card\"\n                  :aria-pressed=\"selectedId === item.id\"\n                  class=\"tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]\"\n                  :style=\"{\n                    borderColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary)'\n                        : 'var(--tpl-border)',\n                    backgroundColor:\n                      selectedId === item.id\n                        ? 'var(--tpl-primary-light)'\n                        : 'transparent',\n                  }\"\n                  @click=\"selectedId = item.id\"\n                >\n                  <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n                    <span\n                      class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                    >\n                      {{ item.name }}\n                    </span>\n                    <span\n                      class=\"tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                    >\n                      {{\n                        format(t.savedBlocks.blockCount, {\n                          count: item.content.length,\n                        })\n                      }}\n                    </span>\n                  </div>\n                  <div\n                    v-if=\"item.category\"\n                    class=\"tpl:mt-1 tpl:flex tpl:items-center\"\n                  >\n                    <span\n                      data-testid=\"saved-block-category\"\n                      class=\"tpl:max-w-full tpl:truncate tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]\"\n                    >\n                      {{ item.category }}\n                    </span>\n                  </div>\n                  <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n                    <component\n                      :is=\"icon.icon\"\n                      v-for=\"icon in getBlockTypeIcons(item)\"\n                      :key=\"icon.type\"\n                      :size=\"14\"\n                      :stroke-width=\"1.5\"\n                      class=\"tpl:text-[var(--tpl-text-dim)]\"\n                    />\n                    <span\n                      v-if=\"getRemainingTypeCount(item) > 0\"\n                      class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      +{{ getRemainingTypeCount(item) }}\n                    </span>\n                    <span\n                      v-if=\"relativeLabel(item)\"\n                      data-testid=\"saved-block-updated\"\n                      class=\"tpl:ml-1 tpl:truncate tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                      :title=\"absoluteLabel(item)\"\n                    >\n                      {{ relativeLabel(item) }}\n                    </span>\n                    <button\n                      v-if=\"confirmDeleteId === item.id\"\n                      :aria-label=\"t.savedBlocks.deleteConfirm\"\n                      class=\"tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]\"\n                      style=\"background-color: transparent\"\n                      @click.stop=\"handleDelete(item.id)\"\n                    >\n                      {{ t.savedBlocks.deleteConfirm }}\n                    </button>\n                    <!-- Hidden, not disabled: an action the user can't perform\n                         is better absent than greyed out. `ml-auto` moves to\n                         whichever button survives so the row stays aligned. -->\n                    <template v-else>\n                      <button\n                        v-if=\"savedBlocks.canUpdateBlock(item)\"\n                        class=\"tpl-saved-block-rename-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :aria-label=\"t.savedBlocks.rename\"\n                        :title=\"t.savedBlocks.rename\"\n                        @click.stop=\"startRename(item)\"\n                      >\n                        <Pencil :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                      <button\n                        v-if=\"savedBlocks.canDeleteBlock(item)\"\n                        class=\"tpl-saved-block-delete-btn tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-dim)]\"\n                        :class=\"{\n                          'tpl:ml-auto': !savedBlocks.canUpdateBlock(item),\n                        }\"\n                        :aria-label=\"t.savedBlocks.delete\"\n                        :title=\"t.savedBlocks.delete\"\n                        @click.stop=\"confirmDeleteId = item.id\"\n                      >\n                        <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n                      </button>\n                    </template>\n                  </div>\n                </button>\n              </template>\n            </div>\n\n            <!-- Empty state — only once we actually know the library is empty -->\n            <div\n              v-else\n              class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n            >\n              <Package\n                :size=\"32\"\n                :stroke-width=\"1\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <p\n                v-if=\"isFiltering\"\n                class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ t.savedBlocks.noResults }}\n              </p>\n              <template v-else>\n                <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n                  {{ t.savedBlocks.empty }}\n                </p>\n                <p\n                  class=\"tpl:mt-1 tpl:max-w-[220px] tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n                >\n                  {{ t.savedBlocks.emptyHint }}\n                </p>\n              </template>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right panel: preview -->\n        <div\n          class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n        >\n          <div\n            v-if=\"selected\"\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n          >\n            <!-- Visual preview -->\n            <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n              <BlockPreviewCanvas :blocks=\"selected.content\" />\n            </div>\n          </div>\n\n          <!-- Empty preview state -->\n          <div\n            v-else\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n          >\n            <Package\n              :size=\"32\"\n              :stroke-width=\"1\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ t.savedBlocks.selectToPreview }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n      >\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <label\n            class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ t.savedBlocks.insertPosition }}\n          </label>\n          <select\n            v-model=\"insertPosition\"\n            class=\"tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          >\n            <option\n              v-for=\"opt in positionOptions\"\n              :key=\"opt.value\"\n              :value=\"opt.value\"\n            >\n              {{ opt.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"tpl:flex tpl:gap-2\">\n          <button\n            type=\"button\"\n            data-testid=\"saved-blocks-browser-close\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n            @click=\"handleClose\"\n          >\n            {{ t.savedBlocks.close }}\n          </button>\n          <button\n            type=\"button\"\n            :class=\"primaryBtnClass\"\n            :disabled=\"!selected\"\n            @click=\"handleInsert\"\n          >\n            {{ t.savedBlocks.insert }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </TplModal>\n</template>\n\n<style>\n/* Subtle breathing so the placeholders read as \"loading\" rather than as empty\n   rows. `prefers-reduced-motion` holds them still at full opacity — the bars\n   still communicate shape without animating. */\n.tpl-saved-block-skeleton {\n  animation: tpl-saved-block-pulse 1.4s ease-in-out infinite;\n}\n\n@keyframes tpl-saved-block-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.55;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-saved-block-skeleton {\n    animation: none;\n  }\n}\n\n.tpl-saved-block-delete-btn:hover {\n  color: var(--tpl-danger) !important;\n}\n\n.tpl-saved-block-rename-btn:hover {\n  color: var(--tpl-primary) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/cdn/chunks/{SavedBlocksPanels-Ce1RePjk.js → SavedBlocksPanels-DNwKmnhp.js}

@@ -5,7 +5,7 @@ var c = /* @__PURE__ */ t({
 	__name: "SavedBlocksPanels",
 	props: { feature: {} },
 	setup(t) {
-		let c = t, l = s(() => import("./SavedBlocksPickBar-DIDl6xfy.js")), u = s(() => import("./SaveBlockDialog-DeW_M6kh.js")), d = s(() => import("./SavedBlocksBrowserModal-BzQWibKG.js"));
+		let c = t, l = s(() => import("./SavedBlocksPickBar-D2p1ufB4.js")), u = s(() => import("./SaveBlockDialog-CGM3mrGj.js")), d = s(() => import("./SavedBlocksBrowserModal-C6Z8AvtD.js"));
 		function f(e, t) {
 			c.feature.insert(e, t);
 		}
@@ -35,4 +35,4 @@ var c = /* @__PURE__ */ t({
 //#endregion
 export { c as default };
 
-//# sourceMappingURL=SavedBlocksPanels-Ce1RePjk.js.map
+//# sourceMappingURL=SavedBlocksPanels-DNwKmnhp.js.map

package/dist/cdn/chunks/{SavedBlocksPanels-Ce1RePjk.js.map → SavedBlocksPanels-DNwKmnhp.js.map}

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

package/dist/cdn/chunks/{SavedBlocksPickBar-DIDl6xfy.js → SavedBlocksPickBar-D2p1ufB4.js}

@@ -1,7 +1,7 @@
 import { N as e, S as t, at as n, b as r, ct as i, g as a, p as o, ut as s, y as c } from "./draggable-IB4x6w2O.js";
-import "./useEditorCore-CQraU2s_.js";
+import "./useEditorCore-yd40TFKy.js";
 import { t as l } from "./useI18n-CyO_Nmca.js";
-import { Bt as u, n as d } from "./icons-BKkJ-5xF.js";
+import { Vt as u, n as d } from "./icons-Bad3WZ3G.js";
 import { v as f, x as p } from "./styleConstants-C_YAPdQS.js";
 //#region src/components/SavedBlocksPickBar.vue?vue&type=script&setup=true&lang.ts
 var m = {
@@ -52,4 +52,4 @@ var m = {
 //#endregion
 export { x as default };
 
-//# sourceMappingURL=SavedBlocksPickBar-DIDl6xfy.js.map
+//# sourceMappingURL=SavedBlocksPickBar-D2p1ufB4.js.map

package/dist/cdn/chunks/{SavedBlocksPickBar-DIDl6xfy.js.map → SavedBlocksPickBar-D2p1ufB4.js.map}

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

package/dist/cdn/chunks/{TemplateScoringPanel-d_Ppowsq.js → TemplateScoringPanel-BDB4RErx.js}

@@ -1,6 +1,6 @@
 import { B as e, E as t, F as n, H as r, N as i, Q as ee, R as a, S as o, at as s, b as c, ct as l, g as u, h as d, lt as f, m as p, n as te, p as m, u as h, ut as g, y as _ } from "./draggable-IB4x6w2O.js";
-import { $ as v, F as y, O as ne, W as re, g as b } from "./keys-DCWeHkSF.js";
-import { E as x, It as S, Mt as C, O as w, dt as ie, it as ae, k as T, n as oe, t as se, u as ce, wt as le, z as E } from "./icons-BKkJ-5xF.js";
+import { $ as v, F as y, O as b, W as ne, g as x } from "./keys-DCWeHkSF.js";
+import { A as S, B as C, D as w, Lt as T, Nt as E, Tt as re, at as ie, d as ae, ft as oe, k as se, n as ce, t as le } from "./icons-Bad3WZ3G.js";
 import { t as D } from "./LoadingTrack-_7DH_5aw.js";
 import { t as O } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { n as k } from "./useCloudI18n-CrjWbpbu.js";
@@ -60,7 +60,7 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 	props: { visible: { type: Boolean } },
 	emits: ["close"],
 	setup(o, { emit: O }) {
-		let G = o, Ae = O, { t: K } = k(), q = v(b, "TemplateScoringPanel"), J = v(re, "TemplateScoringPanel"), Y = t(ne, y), X = ee({
+		let G = o, Ae = O, { t: K } = k(), q = v(x, "TemplateScoringPanel"), J = v(ne, "TemplateScoringPanel"), Y = t(b, y), X = ee({
 			spam: !0,
 			readability: !0,
 			accessibility: !0,
@@ -75,10 +75,10 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 			"accessibility",
 			"bestPractices"
 		], Me = {
-			spam: w,
-			readability: le,
-			accessibility: x,
-			bestPractices: se
+			spam: se,
+			readability: re,
+			accessibility: w,
+			bestPractices: le
 		};
 		function Q() {
 			J.score(q.content.value, Y.value);
@@ -111,7 +111,7 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 				role: "complementary",
 				"aria-label": s(K).scoring.title,
 				class: "tpl-scoring-panel tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]"
-			}, [m("div", F, [m("div", I, [c(s(T), {
+			}, [m("div", F, [m("div", I, [c(s(S), {
 				size: 13,
 				"stroke-width": 2
 			}), m("span", null, g(s(K).scoring.title), 1)]), m("div", L, [s(J).scoringResult.value && !s(J).isScoring.value ? (i(), u("button", {
@@ -121,7 +121,7 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 				"aria-label": s(K).scoring.rescore,
 				title: s(K).scoring.rescore,
 				onClick: t[0] ||= (e) => Q()
-			}, [c(s(E), {
+			}, [c(s(C), {
 				size: 14,
 				"stroke-width": 2
 			})], 8, R)) : d("", !0), m("button", {
@@ -129,11 +129,11 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 				class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
 				"aria-label": s(K).scoring.close,
 				onClick: t[1] ||= (e) => Ae("close")
-			}, [c(s(oe), {
+			}, [c(s(ce), {
 				size: 14,
 				"stroke-width": 2
 			})], 8, z)])]), m("div", B, [s(J).isScoring.value ? (i(), u("div", V, [m("p", H, g(s(K).scoring.scoring), 1), c(D, { class: "tpl:w-3/4" })])) : s(J).error.value && !s(J).scoringResult.value ? (i(), u("div", U, [
-				c(s(C), {
+				c(s(E), {
 					size: 32,
 					"stroke-width": 1.5,
 					class: "tpl:text-[var(--tpl-danger)]"
@@ -142,7 +142,7 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 				m("button", {
 					class: "tpl:mt-2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text-muted)]",
 					onClick: t[2] ||= (e) => Q()
-				}, [c(s(E), {
+				}, [c(s(C), {
 					size: 12,
 					"stroke-width": 2
 				}), _(" " + g(s(K).scoring.rescore), 1)])
@@ -158,7 +158,7 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 					m("span", de, g(s(K).scoring.overallScore), 1),
 					$() > 0 ? (i(), u("span", fe, g($()) + " " + g(s(K).scoring.findings), 1)) : d("", !0)
 				], 4),
-				s(J).fixError.value ? (i(), u("div", pe, [c(s(C), {
+				s(J).fixError.value ? (i(), u("div", pe, [c(s(E), {
 					size: 14,
 					"stroke-width": 2,
 					class: "tpl:mt-0.5 tpl:shrink-0"
@@ -184,7 +184,7 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 						})
 					}, g(s(J).scoringResult.value.categories[e].score), 5),
 					s(J).scoringResult.value.categories[e].findings.length > 0 ? (i(), u("span", ge, g(s(J).scoringResult.value.categories[e].findings.length), 1)) : d("", !0),
-					c(s(S), {
+					c(s(T), {
 						size: 12,
 						"stroke-width": 2,
 						class: l(["tpl:transition-transform tpl:duration-200 tpl:text-[var(--tpl-text-dim)]", X.value[e] ? "tpl:rotate-0" : "tpl:-rotate-90"])
@@ -192,7 +192,7 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 				], 8, me), X.value[e] ? (i(), u("div", _e, [s(J).scoringResult.value.categories[e].findings.length === 0 ? (i(), u("div", ve, g(s(K).scoring.noFindings), 1)) : d("", !0), (i(!0), u(h, null, n(s(J).scoringResult.value.categories[e].findings, (e) => (i(), u("div", {
 					key: e.id,
 					class: "tpl:border-t tpl:px-3 tpl:py-2.5 tpl:first:border-t-0 tpl:border-[var(--tpl-border-light)]"
-				}, [m("div", ye, [(i(), p(a(s(e.severity === "high" ? C : e.severity === "medium" ? ce : ie)), {
+				}, [m("div", ye, [(i(), p(a(s(e.severity === "high" ? E : e.severity === "medium" ? ae : oe)), {
 					size: 13,
 					"stroke-width": 2,
 					class: "tpl:mt-0.5 tpl:shrink-0",
@@ -211,18 +211,18 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 						style: { "background-color": "transparent" },
 						disabled: s(J).fixingFindingId.value !== null,
 						onClick: (t) => Ne(e)
-					}, [s(J).fixingFindingId.value === e.id ? (i(), p(s(ae), {
+					}, [s(J).fixingFindingId.value === e.id ? (i(), p(s(ie), {
 						key: 0,
 						class: "tpl-spinner",
 						size: 11,
 						"stroke-width": 2
-					})) : (i(), p(s(x), {
+					})) : (i(), p(s(w), {
 						key: 1,
 						size: 11,
 						"stroke-width": 2
 					})), _(" " + g(s(J).fixingFindingId.value === e.id ? s(K).scoring.fixing : s(K).scoring.fix), 1)], 8, Te), s(J).fixError.value ? (i(), u("p", Ee, g(s(J).fixError.value), 1)) : d("", !0)])) : d("", !0)
 				])])]))), 128))])) : d("", !0)])), 64))
-			])) : (i(), u("div", De, [c(s(T), {
+			])) : (i(), u("div", De, [c(s(S), {
 				size: 32,
 				"stroke-width": 1.5,
 				class: "tpl:text-[var(--tpl-text-dim)]"
@@ -234,4 +234,4 @@ var P = ["aria-label"], F = { class: "tpl:flex tpl:items-center tpl:justify-betw
 //#endregion
 export { G as default };
 
-//# sourceMappingURL=TemplateScoringPanel-d_Ppowsq.js.map
+//# sourceMappingURL=TemplateScoringPanel-BDB4RErx.js.map