@templatical/editor 0.29.0 → 0.30.0

package/dist/cdn/chunks/{IssuesPanel-3nTCyKgK.js.map → IssuesPanel-iC2hgrXx.js.map}

@@ -1 +1 @@
-{"version":3,"file":"IssuesPanel-3nTCyKgK.js","names":[],"sources":["../../../src/components/sidebar/IssuesPanel.vue","../../../src/components/sidebar/IssuesPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useScrollToBlock } from \"../../composables/useScrollToBlock\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\nconst scrollToBlock = useScrollToBlock();\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (!issue.blockId) return;\n  editor.selectBlock(issue.blockId);\n  // Selecting is invisible on its own — on a long template the block sits\n  // below the fold and the canvas stays put, so \"Jump\" appears to do nothing.\n  scrollToBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"format(t.issues.issueCountTooltip, { count: totalCount })\"\n      >\n        {{ totalCount }}\n      </span>\n    </header>\n\n    <div\n      v-if=\"!lint || lint.unavailable.value\"\n      class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      <!-- Quality package not available; render nothing visible beyond a hint. -->\n    </div>\n\n    <div\n      v-else-if=\"totalCount === 0\"\n      class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{ t.issues.emptyState }}\n    </div>\n\n    <template v-else>\n      <section\n        v-for=\"group in [\n          {\n            key: 'errors',\n            title: t.issues.groupErrors,\n            icon: AlertCircle,\n            items: errors,\n            tone: 'tpl:text-[var(--tpl-danger)]',\n          },\n          {\n            key: 'warnings',\n            title: t.issues.groupWarnings,\n            icon: AlertTriangle,\n            items: warnings,\n            tone: 'tpl:text-[var(--tpl-warning)]',\n          },\n          {\n            key: 'info',\n            title: t.issues.groupInfo,\n            icon: Info,\n            items: infos,\n            tone: 'tpl:text-[var(--tpl-text-muted)]',\n          },\n        ]\"\n        :key=\"group.key\"\n      >\n        <header\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                data-testid=\"issue-jump\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]\"\n                @click=\"jumpTo(issue)\"\n              >\n                <ArrowRight :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.jump }}\n              </button>\n              <button\n                v-if=\"issue.fix\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-on-primary)]\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useScrollToBlock } from \"../../composables/useScrollToBlock\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\nconst scrollToBlock = useScrollToBlock();\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (!issue.blockId) return;\n  editor.selectBlock(issue.blockId);\n  // Selecting is invisible on its own — on a long template the block sits\n  // below the fold and the canvas stays put, so \"Jump\" appears to do nothing.\n  scrollToBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"format(t.issues.issueCountTooltip, { count: totalCount })\"\n      >\n        {{ totalCount }}\n      </span>\n    </header>\n\n    <div\n      v-if=\"!lint || lint.unavailable.value\"\n      class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      <!-- Quality package not available; render nothing visible beyond a hint. -->\n    </div>\n\n    <div\n      v-else-if=\"totalCount === 0\"\n      class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{ t.issues.emptyState }}\n    </div>\n\n    <template v-else>\n      <section\n        v-for=\"group in [\n          {\n            key: 'errors',\n            title: t.issues.groupErrors,\n            icon: AlertCircle,\n            items: errors,\n            tone: 'tpl:text-[var(--tpl-danger)]',\n          },\n          {\n            key: 'warnings',\n            title: t.issues.groupWarnings,\n            icon: AlertTriangle,\n            items: warnings,\n            tone: 'tpl:text-[var(--tpl-warning)]',\n          },\n          {\n            key: 'info',\n            title: t.issues.groupInfo,\n            icon: Info,\n            items: infos,\n            tone: 'tpl:text-[var(--tpl-text-muted)]',\n          },\n        ]\"\n        :key=\"group.key\"\n      >\n        <header\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                data-testid=\"issue-jump\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]\"\n                @click=\"jumpTo(issue)\"\n              >\n                <ArrowRight :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.jump }}\n              </button>\n              <button\n                v-if=\"issue.fix\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-on-primary)]\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"IssuesPanel-iC2hgrXx.js","names":[],"sources":["../../../src/components/sidebar/IssuesPanel.vue","../../../src/components/sidebar/IssuesPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useScrollToBlock } from \"../../composables/useScrollToBlock\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\nconst scrollToBlock = useScrollToBlock();\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (!issue.blockId) return;\n  editor.selectBlock(issue.blockId);\n  // Selecting is invisible on its own — on a long template the block sits\n  // below the fold and the canvas stays put, so \"Jump\" appears to do nothing.\n  scrollToBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"format(t.issues.issueCountTooltip, { count: totalCount })\"\n      >\n        {{ totalCount }}\n      </span>\n    </header>\n\n    <div\n      v-if=\"!lint || lint.unavailable.value\"\n      class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      <!-- Quality package not available; render nothing visible beyond a hint. -->\n    </div>\n\n    <div\n      v-else-if=\"totalCount === 0\"\n      class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{ t.issues.emptyState }}\n    </div>\n\n    <template v-else>\n      <section\n        v-for=\"group in [\n          {\n            key: 'errors',\n            title: t.issues.groupErrors,\n            icon: AlertCircle,\n            items: errors,\n            tone: 'tpl:text-[var(--tpl-danger)]',\n          },\n          {\n            key: 'warnings',\n            title: t.issues.groupWarnings,\n            icon: AlertTriangle,\n            items: warnings,\n            tone: 'tpl:text-[var(--tpl-warning)]',\n          },\n          {\n            key: 'info',\n            title: t.issues.groupInfo,\n            icon: Info,\n            items: infos,\n            tone: 'tpl:text-[var(--tpl-text-muted)]',\n          },\n        ]\"\n        :key=\"group.key\"\n      >\n        <header\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                data-testid=\"issue-jump\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]\"\n                @click=\"jumpTo(issue)\"\n              >\n                <ArrowRight :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.jump }}\n              </button>\n              <button\n                v-if=\"issue.fix\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-on-primary)]\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useScrollToBlock } from \"../../composables/useScrollToBlock\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\nconst scrollToBlock = useScrollToBlock();\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (!issue.blockId) return;\n  editor.selectBlock(issue.blockId);\n  // Selecting is invisible on its own — on a long template the block sits\n  // below the fold and the canvas stays put, so \"Jump\" appears to do nothing.\n  scrollToBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"format(t.issues.issueCountTooltip, { count: totalCount })\"\n      >\n        {{ totalCount }}\n      </span>\n    </header>\n\n    <div\n      v-if=\"!lint || lint.unavailable.value\"\n      class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      <!-- Quality package not available; render nothing visible beyond a hint. -->\n    </div>\n\n    <div\n      v-else-if=\"totalCount === 0\"\n      class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{ t.issues.emptyState }}\n    </div>\n\n    <template v-else>\n      <section\n        v-for=\"group in [\n          {\n            key: 'errors',\n            title: t.issues.groupErrors,\n            icon: AlertCircle,\n            items: errors,\n            tone: 'tpl:text-[var(--tpl-danger)]',\n          },\n          {\n            key: 'warnings',\n            title: t.issues.groupWarnings,\n            icon: AlertTriangle,\n            items: warnings,\n            tone: 'tpl:text-[var(--tpl-warning)]',\n          },\n          {\n            key: 'info',\n            title: t.issues.groupInfo,\n            icon: Info,\n            items: infos,\n            tone: 'tpl:text-[var(--tpl-text-muted)]',\n          },\n        ]\"\n        :key=\"group.key\"\n      >\n        <header\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                data-testid=\"issue-jump\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]\"\n                @click=\"jumpTo(issue)\"\n              >\n                <ArrowRight :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.jump }}\n              </button>\n              <button\n                v-if=\"issue.fix\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-on-primary)]\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{LoadingTrack-D_wweXVz.js → LoadingTrack-Cz1sT0wP.js}

@@ -1,4 +1,4 @@
-import { N as e, g as t } from "./draggable-BLMjz0GK.js";
+import { N as e, g as t } from "./draggable-D2vo-aQI.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 //#region src/components/LoadingTrack.vue
 var r = {}, i = { class: "tpl-loading-track" };
@@ -9,4 +9,4 @@ var o = /*#__PURE__*/ n(r, [["render", a], ["__scopeId", "data-v-c3d50014"]]);
 //#endregion
 export { o as t };
 
-//# sourceMappingURL=LoadingTrack-D_wweXVz.js.map
+//# sourceMappingURL=LoadingTrack-Cz1sT0wP.js.map

package/dist/cdn/chunks/{LoadingTrack-D_wweXVz.js.map → LoadingTrack-Cz1sT0wP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LoadingTrack-D_wweXVz.js","names":[],"sources":["../../../src/components/LoadingTrack.vue"],"sourcesContent":["<template>\n  <div class=\"tpl-loading-track\"></div>\n</template>\n\n<style scoped>\n.tpl-loading-track {\n  height: 3px;\n  width: 100%;\n  border-radius: 9999px;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    color-mix(in srgb, var(--tpl-primary) 10%, transparent) 15%,\n    color-mix(in srgb, var(--tpl-primary) 30%, transparent) 30%,\n    var(--tpl-primary) 50%,\n    color-mix(in srgb, var(--tpl-primary) 30%, transparent) 70%,\n    color-mix(in srgb, var(--tpl-primary) 10%, transparent) 85%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: tpl-loading-flow 3s ease-in-out infinite;\n}\n\n@keyframes tpl-loading-flow {\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -100% 0;\n  }\n}\n/* The bar communicates \"working\" by its presence and its amber fill; the sweep\n   is decoration, so reduced motion holds it still rather than removing it. */\n@media (prefers-reduced-motion: reduce) {\n  .tpl-loading-track-fill {\n    animation: none;\n    background-position: 50% 0;\n  }\n}\n</style>\n"],"mappings":";;;YACO,IAAA,EAAA,OAAM,oBAAmB;;CAA9B,OAAA,EAAA,GAAA,EAAqC,OAArC,CAAqC"}
+{"version":3,"file":"LoadingTrack-Cz1sT0wP.js","names":[],"sources":["../../../src/components/LoadingTrack.vue"],"sourcesContent":["<template>\n  <div class=\"tpl-loading-track\"></div>\n</template>\n\n<style scoped>\n.tpl-loading-track {\n  height: 3px;\n  width: 100%;\n  border-radius: 9999px;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    color-mix(in srgb, var(--tpl-primary) 10%, transparent) 15%,\n    color-mix(in srgb, var(--tpl-primary) 30%, transparent) 30%,\n    var(--tpl-primary) 50%,\n    color-mix(in srgb, var(--tpl-primary) 30%, transparent) 70%,\n    color-mix(in srgb, var(--tpl-primary) 10%, transparent) 85%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: tpl-loading-flow 3s ease-in-out infinite;\n}\n\n@keyframes tpl-loading-flow {\n  0% {\n    background-position: 100% 0;\n  }\n  100% {\n    background-position: -100% 0;\n  }\n}\n/* The bar communicates \"working\" by its presence and its amber fill; the sweep\n   is decoration, so reduced motion holds it still rather than removing it. */\n@media (prefers-reduced-motion: reduce) {\n  .tpl-loading-track-fill {\n    animation: none;\n    background-position: 50% 0;\n  }\n}\n</style>\n"],"mappings":";;;YACO,IAAA,EAAA,OAAM,oBAAmB;;CAA9B,OAAA,EAAA,GAAA,EAAqC,OAArC,CAAqC"}

package/dist/cdn/chunks/{MergeTagModeToggle-BUNsRKs6.js → MergeTagModeToggle-DZtnCj0F.js}

@@ -1,8 +1,8 @@
-import { E as e, F as t, N as n, S as r, at as i, f as a, g as o, h as s, lt as c, m as l, p as u, u as d, ut as f } from "./draggable-BLMjz0GK.js";
-import { u as p } from "./src-B_QJduQD.js";
-import { T as m } from "./keys-D7OpfE2s.js";
-import { t as h } from "./useI18n-DYb1SgLB.js";
-import { $ as g, D as _, E as v, p as y } from "./icons-C2kP4vOJ.js";
+import { E as e, F as t, N as n, S as r, at as i, f as a, g as o, h as s, lt as c, m as l, p as u, u as d, ut as f } from "./draggable-D2vo-aQI.js";
+import { u as p } from "./src-BD60gqPW.js";
+import { T as m } from "./keys-BJ770Mwm.js";
+import { t as h } from "./useI18n-DIhawILp.js";
+import { $ as g, D as _, E as v, p as y } from "./icons-BTdLXRXn.js";
 //#region src/components/ViewportToggle.vue?vue&type=script&setup=true&lang.ts
 var b = ["aria-label"], x = [
 	"aria-checked",
@@ -124,4 +124,4 @@ var b = ["aria-label"], x = [
 //#endregion
 export { S as n, T as t };
 
-//# sourceMappingURL=MergeTagModeToggle-BUNsRKs6.js.map
+//# sourceMappingURL=MergeTagModeToggle-DZtnCj0F.js.map

package/dist/cdn/chunks/{MergeTagModeToggle-BUNsRKs6.js.map → MergeTagModeToggle-DZtnCj0F.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagModeToggle-BUNsRKs6.js","names":[],"sources":["../../../src/components/ViewportToggle.vue","../../../src/components/ViewportToggle.vue","../../../src/components/MergeTagModeToggle.vue","../../../src/components/MergeTagModeToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"MergeTagModeToggle-DZtnCj0F.js","names":[],"sources":["../../../src/components/ViewportToggle.vue","../../../src/components/ViewportToggle.vue","../../../src/components/MergeTagModeToggle.vue","../../../src/components/MergeTagModeToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{MergeTagSuggestion-Dt6I8bZi.js → MergeTagSuggestion-VP_nC-8W.js}

@@ -1,5 +1,5 @@
-import { F as e, N as t, Q as n, S as r, ct as i, g as a, h as o, l as s, p as c, r as l, u, ut as d, w as f } from "./draggable-BLMjz0GK.js";
-import { h as p, m } from "./tiptap-DOw5Yb4H.js";
+import { F as e, N as t, Q as n, S as r, ct as i, g as a, h as o, l as s, p as c, r as l, u, ut as d, w as f } from "./draggable-D2vo-aQI.js";
+import { h as p, m } from "./tiptap-Bqy-H6CT.js";
 //#region src/components/MergeTagSuggestionList.vue?vue&type=script&setup=true&lang.ts
 var h = ["id"], g = {
 	key: 0,
@@ -212,4 +212,4 @@ var D = p.create({
 //#endregion
 export { w as i, T as n, C as r, D as t };
 
-//# sourceMappingURL=MergeTagSuggestion-Dt6I8bZi.js.map
+//# sourceMappingURL=MergeTagSuggestion-VP_nC-8W.js.map

package/dist/cdn/chunks/{MergeTagSuggestion-Dt6I8bZi.js.map → MergeTagSuggestion-VP_nC-8W.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagSuggestion-Dt6I8bZi.js","names":["$emit"],"sources":["../../../src/components/MergeTagSuggestionList.vue","../../../src/components/MergeTagSuggestionList.vue","../../../src/extensions/MergeTagSuggestion.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MergeTag } from \"@templatical/types\";\n\nconst props = defineProps<{\n  items: MergeTag[];\n  selectedIndex: number;\n  emptyText: string;\n  /** Stable id used for aria-controls + per-option id derivation. */\n  listId?: string;\n}>();\n\ndefineEmits<{\n  (e: \"select\", item: MergeTag): void;\n  (e: \"hover\", index: number): void;\n}>();\n\nfunction optionId(index: number): string | undefined {\n  return props.listId ? `${props.listId}-opt-${index}` : undefined;\n}\n</script>\n\n<template>\n  <div\n    :id=\"listId\"\n    class=\"tpl:min-w-[200px] tpl:max-w-[320px] tpl:max-h-[50vh] tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1 tpl:shadow-[var(--tpl-shadow-lg)]\"\n    role=\"listbox\"\n    data-testid=\"merge-tag-suggestion-list\"\n  >\n    <div\n      v-if=\"items.length === 0\"\n      class=\"tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n      data-testid=\"merge-tag-suggestion-empty\"\n    >\n      {{ emptyText }}\n    </div>\n    <button\n      v-for=\"(item, index) in items\"\n      :key=\"item.value\"\n      :id=\"optionId(index)\"\n      type=\"button\"\n      role=\"option\"\n      :aria-selected=\"index === selectedIndex\"\n      :data-selected=\"index === selectedIndex ? 'true' : 'false'\"\n      :data-merge-tag-value=\"item.value\"\n      class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors\"\n      :class=\"\n        index === selectedIndex\n          ? 'tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]'\n          : 'tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]'\n      \"\n      @mousedown.prevent.stop=\"$emit('select', item)\"\n      @mousemove=\"index !== selectedIndex && $emit('hover', index)\"\n    >\n      <span class=\"tpl:font-medium\">{{ item.label }}</span>\n      <span class=\"tpl:text-[var(--tpl-text-dim)] tpl:font-mono\">{{\n        item.value\n      }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { MergeTag } from \"@templatical/types\";\n\nconst props = defineProps<{\n  items: MergeTag[];\n  selectedIndex: number;\n  emptyText: string;\n  /** Stable id used for aria-controls + per-option id derivation. */\n  listId?: string;\n}>();\n\ndefineEmits<{\n  (e: \"select\", item: MergeTag): void;\n  (e: \"hover\", index: number): void;\n}>();\n\nfunction optionId(index: number): string | undefined {\n  return props.listId ? `${props.listId}-opt-${index}` : undefined;\n}\n</script>\n\n<template>\n  <div\n    :id=\"listId\"\n    class=\"tpl:min-w-[200px] tpl:max-w-[320px] tpl:max-h-[50vh] tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1 tpl:shadow-[var(--tpl-shadow-lg)]\"\n    role=\"listbox\"\n    data-testid=\"merge-tag-suggestion-list\"\n  >\n    <div\n      v-if=\"items.length === 0\"\n      class=\"tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n      data-testid=\"merge-tag-suggestion-empty\"\n    >\n      {{ emptyText }}\n    </div>\n    <button\n      v-for=\"(item, index) in items\"\n      :key=\"item.value\"\n      :id=\"optionId(index)\"\n      type=\"button\"\n      role=\"option\"\n      :aria-selected=\"index === selectedIndex\"\n      :data-selected=\"index === selectedIndex ? 'true' : 'false'\"\n      :data-merge-tag-value=\"item.value\"\n      class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors\"\n      :class=\"\n        index === selectedIndex\n          ? 'tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]'\n          : 'tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]'\n      \"\n      @mousedown.prevent.stop=\"$emit('select', item)\"\n      @mousemove=\"index !== selectedIndex && $emit('hover', index)\"\n    >\n      <span class=\"tpl:font-medium\">{{ item.label }}</span>\n      <span class=\"tpl:text-[var(--tpl-text-dim)] tpl:font-mono\">{{\n        item.value\n      }}</span>\n    </button>\n  </div>\n</template>\n","import type { MergeTag } from \"@templatical/types\";\nimport { Extension } from \"@tiptap/core\";\nimport Suggestion, {\n  type SuggestionOptions,\n  type SuggestionProps,\n  type SuggestionKeyDownProps,\n} from \"@tiptap/suggestion\";\nimport { type App, createApp, h, ref, type Ref } from \"vue\";\nimport MergeTagSuggestionList from \"../components/MergeTagSuggestionList.vue\";\n\nconst MAX_RESULTS = 10;\n\n// Monotonic counter for unique listbox IDs across multiple popup instances.\nlet POPUP_ID_SEQ = 0;\n\nexport interface MergeTagSuggestionOptions {\n  /** Available merge tags */\n  mergeTags: MergeTag[];\n  /** Trigger string (e.g. \"{{\", \"*|\", \"%%=\") */\n  char: string;\n  /** Localized empty-state label */\n  emptyText: string;\n  /**\n   * Mount target for the suggestion popup. When provided with a non-null\n   * `.value`, the popup attaches into that element instead of\n   * `document.body` — keeping it inside the editor's effective DOM root\n   * (shadow-aware). Pass the ref returned by `usePopoverRoot()`.\n   *\n   * Falls back to `document.body` when omitted or when the ref's value is\n   * null at popup-open time (e.g. headless/test editors without an editor\n   * shell). Preserves pre-Phase-3 behavior for callers that don't migrate.\n   */\n  popoverRoot?: Ref<HTMLElement | null> | null;\n}\n\n/**\n * Filter merge tags by query against label and value (case-insensitive).\n * Capped at MAX_RESULTS. Exported for testing.\n */\nexport function filterMergeTags(tags: MergeTag[], query: string): MergeTag[] {\n  const trimmed = query.trim().toLowerCase();\n  if (trimmed === \"\") {\n    return tags.slice(0, MAX_RESULTS);\n  }\n  return tags\n    .filter((tag) => {\n      const label = tag.label.toLowerCase();\n      const value = tag.value.toLowerCase();\n      return label.includes(trimmed) || value.includes(trimmed);\n    })\n    .slice(0, MAX_RESULTS);\n}\n\n/**\n * Handle a keydown event against a list of items. Returns whether the\n * event was handled (so the suggestion plugin can stop propagation).\n * Exported for testing.\n */\nexport function handleSuggestionKeyDown(\n  event: KeyboardEvent,\n  items: MergeTag[],\n  selectedIndex: Ref<number>,\n  onSelect: (item: MergeTag) => void,\n): boolean {\n  if (items.length === 0) {\n    if (event.key === \"Enter\" || event.key === \"Tab\") return true;\n    return false;\n  }\n\n  if (event.key === \"ArrowDown\") {\n    selectedIndex.value = (selectedIndex.value + 1) % items.length;\n    return true;\n  }\n  if (event.key === \"ArrowUp\") {\n    selectedIndex.value =\n      (selectedIndex.value - 1 + items.length) % items.length;\n    return true;\n  }\n  if (event.key === \"Enter\" || event.key === \"Tab\") {\n    onSelect(items[selectedIndex.value]);\n    return true;\n  }\n  return false;\n}\n\n/** Options for opening the merge-tag popup. */\nexport interface MergeTagPopupOpenOptions {\n  /** Filtered tags to render. */\n  items: MergeTag[];\n  /**\n   * Anchor rect getter (the caret rect). Same contract as\n   * `@tiptap/suggestion`'s `clientRect`: viewport coordinates, re-read on\n   * every reposition so the popup tracks the caret through scroll.\n   */\n  getRect: (() => DOMRect | null) | null;\n  /**\n   * Element that owns the ARIA combobox state and serves as the theme +\n   * scroll-ancestor anchor — the ProseMirror `view.dom` in rich text, the\n   * `<input>`/`<textarea>` in a field.\n   */\n  anchorEl: HTMLElement | null;\n  /** Called with the item the user picks. */\n  onCommand: (item: MergeTag) => void;\n}\n\n/** Options for updating the popup after the query changed. */\nexport interface MergeTagPopupUpdateOptions {\n  items: MergeTag[];\n  getRect: (() => DOMRect | null) | null;\n  onCommand: (item: MergeTag) => void;\n}\n\n/**\n * Imperative handle over a single merge-tag suggestion popup.\n * Both the TipTap suggestion renderer and the input/textarea autocomplete\n * driver drive the SAME controller, so the popup's rendering, positioning,\n * scroll-tracking, ARIA wiring, and keyboard behavior are identical across\n * rich-text and plain-field surfaces by construction.\n */\nexport interface MergeTagPopupController {\n  /** Mount the popup and start tracking the caret. */\n  open(options: MergeTagPopupOpenOptions): void;\n  /** Refresh items + anchor after the query changed. */\n  update(options: MergeTagPopupUpdateOptions): void;\n  /**\n   * Handle a navigation/selection key (Arrow/Enter/Tab). Returns whether it\n   * was handled. Does NOT handle Escape — each caller owns Escape (TipTap's\n   * plugin closes via `onExit`; the field driver calls `close()`).\n   */\n  handleKeyDown(event: KeyboardEvent): boolean;\n  /** Unmount the popup, clear ARIA, and detach listeners. Idempotent. */\n  close(): void;\n  /** Whether the popup is currently mounted. */\n  isOpen(): boolean;\n}\n\n/**\n * Creates a merge-tag suggestion popup controller: mount, ARIA wiring,\n * caret-tracking position (flip-above + off-screen freeze), scroll/resize\n * repositioning, and cleanup. Framework-agnostic — it takes a plain caret\n * rect getter and an anchor element, so it serves both the ProseMirror\n * suggestion plugin and native text fields.\n */\nexport function createMergeTagPopup(\n  emptyText: string,\n  popoverRootRef?: Ref<HTMLElement | null> | null,\n): MergeTagPopupController {\n  let app: App | null = null;\n  let container: HTMLElement | null = null;\n  let editableEl: HTMLElement | null = null;\n  const itemsRef = ref<MergeTag[]>([]);\n  const selectedIndex = ref(0);\n  let currentCommand: ((item: MergeTag) => void) | null = null;\n  const listId = `tpl-merge-tag-suggestion-${++POPUP_ID_SEQ}`;\n  let latestClientRect: (() => DOMRect | null) | null = null;\n  let scrollTargets: Array<EventTarget> = [];\n  let pendingRaf: number | null = null;\n\n  function reposition(): void {\n    position(latestClientRect?.() ?? null);\n  }\n\n  /**\n   * Reposition immediately and on the next animation frame.\n   * After a keystroke triggers the suggestion, TipTap may run its\n   * own `scrollIntoView` to keep the caret visible. That scroll\n   * lands AFTER the current task's `position()` call but BEFORE\n   * the browser's next paint, so we re-measure on rAF to catch\n   * the post-scroll caret rect. Without this, the popup pins to\n   * the pre-scroll caret position and ends up offset on slower\n   * runners.\n   */\n  function repositionAfterPaint(): void {\n    reposition();\n    if (pendingRaf !== null) cancelAnimationFrame(pendingRaf);\n    pendingRaf = requestAnimationFrame(() => {\n      pendingRaf = null;\n      reposition();\n    });\n  }\n\n  function collectScrollAncestors(el: HTMLElement | null): HTMLElement[] {\n    // Walk up the DOM finding scrollable ancestors. ProseMirror's\n    // scrollIntoView fires on whichever ancestor scrolls — listening\n    // to all of them ensures we reposition regardless of which one\n    // moves.\n    const result: HTMLElement[] = [];\n    let node: HTMLElement | null = el?.parentElement ?? null;\n    while (\n      node &&\n      // shadow-ok: ancestor walk terminator; not a mount target\n      node !== document.body &&\n      node !== document.documentElement\n    ) {\n      const style = window.getComputedStyle(node);\n      const overflow = style.overflow + style.overflowX + style.overflowY;\n      if (/(auto|scroll|overlay)/.test(overflow)) {\n        result.push(node);\n      }\n      node = node.parentElement;\n    }\n    return result;\n  }\n\n  function attachScrollListeners(viewDom: HTMLElement | null): void {\n    scrollTargets = [window, ...collectScrollAncestors(viewDom)];\n    for (const target of scrollTargets) {\n      target.addEventListener(\"scroll\", reposition, {\n        passive: true,\n        capture: true,\n      });\n    }\n    window.addEventListener(\"resize\", reposition, { passive: true });\n  }\n\n  function detachScrollListeners(): void {\n    for (const target of scrollTargets) {\n      target.removeEventListener(\"scroll\", reposition, {\n        capture: true,\n      } as EventListenerOptions);\n    }\n    window.removeEventListener(\"resize\", reposition);\n    scrollTargets = [];\n  }\n\n  function position(rect: DOMRect | null): void {\n    if (!container || !rect) return;\n    // If the caret has scrolled out of the viewport, freeze the\n    // popup at its last on-screen position. Following the caret\n    // off-screen produces an invisible popup the user can't reach,\n    // and lets pathological scroll loops drag the popup further\n    // each tick.\n    if (rect.bottom < 0 || rect.top > window.innerHeight) return;\n    // Position `absolute` relative to the mount target — the popover root\n    // (`position: relative`) or the <body> fallback. The caret rect is in\n    // viewport space, so subtract the offset parent's rect to get local\n    // coords: a transformed ancestor of the editor becomes the containing\n    // block for a `fixed` popup and would offset it, but not for an\n    // `absolute` popup anchored inside the positioned popover root. The\n    // off-screen freeze and flip-above decisions still use viewport metrics.\n    container.style.position = \"absolute\";\n    container.style.zIndex = \"9999\";\n    const origin = container.offsetParent?.getBoundingClientRect();\n    const originTop = origin?.top ?? 0;\n    const originLeft = origin?.left ?? 0;\n    container.style.left = `${rect.left - originLeft}px`;\n    // Place below caret first; offsetHeight is sync-readable after\n    // the Vue app has mounted (or after onUpdate's reactive flush).\n    container.style.top = `${rect.bottom - originTop}px`;\n    const popupHeight = container.offsetHeight;\n    if (popupHeight === 0) return;\n    const spaceBelow = window.innerHeight - rect.bottom;\n    if (spaceBelow < popupHeight) {\n      // Not enough room below — flip above. Clamp to 0 so the\n      // popup never positions off the top of the viewport.\n      const flippedTop = Math.max(0, rect.top - popupHeight);\n      container.style.top = `${flippedTop - originTop}px`;\n    }\n  }\n\n  function applyThemeContext(\n    target: HTMLElement,\n    editorEl: HTMLElement | null | undefined,\n  ): void {\n    // When the popup mounts to document.body its `position: fixed`\n    // resolves against the viewport — any transform/filter on a\n    // consumer-page ancestor (route transitions, reveal animations,\n    // dark canvas inversion) creates a containing block and moves\n    // fixed descendants with it. Body ancestors don't transform.\n    //\n    // When mounting inside the editor's popover root, the popup is a\n    // descendant of the `.tpl[data-tpl-theme]` root so CSS vars + font\n    // would inherit — but the snapshot below is still emitted inline\n    // because inline declarations win and the cost is negligible. This\n    // keeps a single behavior across both mount paths.\n    //\n    // CSS vars (--tpl-bg-elevated, --tpl-border, etc.) are scoped to\n    // `.tpl` and `.tpl[data-tpl-theme=\"dark\"]` in the editor's\n    // stylesheet, so the popup wouldn't inherit them at body root.\n    // Adding `class=\"tpl\"` would also pull base rules (min-height,\n    // flex, full-page bg) we don't want on a popup. Instead, snapshot\n    // every --tpl-* custom property from the editor's theme root and\n    // re-emit them inline on the popup wrapper.\n    const themeRoot = editorEl?.closest<HTMLElement>(\"[data-tpl-theme]\");\n    if (!themeRoot) return;\n    const themeValue = themeRoot.getAttribute(\"data-tpl-theme\");\n    if (themeValue) target.setAttribute(\"data-tpl-theme\", themeValue);\n    const computed = window.getComputedStyle(themeRoot);\n    for (let i = 0; i < computed.length; i++) {\n      const prop = computed[i];\n      if (prop.startsWith(\"--tpl-\")) {\n        target.style.setProperty(prop, computed.getPropertyValue(prop));\n      }\n    }\n    // The popup is teleported out of the editor wrapper, so it inherits no\n    // font from it: without this its content renders in the page's default font\n    // and ends up at a different height — which changes the flip-above decision\n    // and shifts the popup off the caret. Copy typography too.\n    target.style.fontFamily = computed.fontFamily;\n    target.style.fontSize = computed.fontSize;\n    target.style.lineHeight = computed.lineHeight;\n  }\n\n  function setEditableAria(active: boolean): void {\n    if (!editableEl) return;\n    if (active) {\n      editableEl.setAttribute(\"role\", \"combobox\");\n      editableEl.setAttribute(\"aria-haspopup\", \"listbox\");\n      editableEl.setAttribute(\"aria-expanded\", \"true\");\n      editableEl.setAttribute(\"aria-controls\", listId);\n    } else {\n      editableEl.removeAttribute(\"aria-expanded\");\n      editableEl.removeAttribute(\"aria-controls\");\n      editableEl.removeAttribute(\"aria-activedescendant\");\n      editableEl.removeAttribute(\"aria-haspopup\");\n      editableEl.removeAttribute(\"role\");\n    }\n  }\n\n  function setActiveDescendant(): void {\n    if (!editableEl) return;\n    if (itemsRef.value.length === 0) {\n      editableEl.removeAttribute(\"aria-activedescendant\");\n      return;\n    }\n    editableEl.setAttribute(\n      \"aria-activedescendant\",\n      `${listId}-opt-${selectedIndex.value}`,\n    );\n  }\n\n  function select(item: MergeTag): void {\n    currentCommand?.(item);\n  }\n\n  return {\n    open: ({ items, getRect, anchorEl, onCommand }) => {\n      itemsRef.value = items;\n      selectedIndex.value = 0;\n      currentCommand = onCommand;\n\n      container = document.createElement(\"div\");\n      container.setAttribute(\"data-testid\", \"merge-tag-suggestion-popup\");\n      editableEl = anchorEl;\n      applyThemeContext(container, anchorEl);\n      // Prefer the editor's popover root (shadow-aware) when wired by\n      // the consumer. Falls back to document.body for headless callers\n      // that don't pass `popoverRoot` to configure().\n      // shadow-ok: fallback when popoverRoot wasn't provided (e.g., headless caller); editor mounts pass the shadow-aware root\n      const mountTarget = popoverRootRef?.value ?? document.body;\n      mountTarget.appendChild(container);\n\n      app = createApp({\n        render() {\n          return h(MergeTagSuggestionList, {\n            items: itemsRef.value,\n            selectedIndex: selectedIndex.value,\n            emptyText,\n            listId,\n            onSelect: (item: MergeTag) => select(item),\n            onHover: (index: number) => {\n              selectedIndex.value = index;\n              setActiveDescendant();\n            },\n          });\n        },\n      });\n      app.mount(container);\n      setEditableAria(true);\n      setActiveDescendant();\n      latestClientRect = getRect;\n      repositionAfterPaint();\n      attachScrollListeners(anchorEl);\n    },\n    update: ({ items, getRect, onCommand }) => {\n      itemsRef.value = items;\n      // Reset selection when item set changes (query changed).\n      if (selectedIndex.value >= items.length) {\n        selectedIndex.value = 0;\n      }\n      currentCommand = onCommand;\n      setActiveDescendant();\n      latestClientRect = getRect;\n      repositionAfterPaint();\n    },\n    handleKeyDown: (event: KeyboardEvent): boolean => {\n      const handled = handleSuggestionKeyDown(\n        event,\n        itemsRef.value,\n        selectedIndex,\n        select,\n      );\n      if (handled) setActiveDescendant();\n      return handled;\n    },\n    close: () => {\n      // Idempotent: nothing to tear down (and no window listeners to detach)\n      // when the popup was never opened. Keeps repeated close() / close-before-\n      // open cheap and side-effect-free.\n      if (container === null) return;\n      if (pendingRaf !== null) {\n        cancelAnimationFrame(pendingRaf);\n        pendingRaf = null;\n      }\n      detachScrollListeners();\n      setEditableAria(false);\n      app?.unmount();\n      container.remove();\n      app = null;\n      container = null;\n      editableEl = null;\n      currentCommand = null;\n      latestClientRect = null;\n    },\n    isOpen: () => container !== null,\n  };\n}\n\n/**\n * Builds the `@tiptap/suggestion` `render` factory for the merge-tag popup.\n * A thin adapter over {@link createMergeTagPopup}: it maps ProseMirror's\n * `SuggestionProps` (items, `clientRect`, `view.dom`, `command`) onto the\n * controller. Exported as a standalone function so that mapping can be\n * unit-tested with mocked `SuggestionProps` instead of a full editor.\n */\nexport function createMergeTagSuggestionRenderer(\n  emptyText: string,\n  popoverRootRef?: Ref<HTMLElement | null> | null,\n): NonNullable<SuggestionOptions<MergeTag>[\"render\"]> {\n  return () => {\n    const popup = createMergeTagPopup(emptyText, popoverRootRef);\n\n    return {\n      onStart: (props: SuggestionProps<MergeTag>) => {\n        // Use view.dom (ProseMirror contenteditable, actually\n        // attached to the DOM) rather than options.element, which may\n        // be a detached div when no `element` is passed to the editor\n        // constructor (as is the case with @tiptap/vue-3 EditorContent).\n        const viewDom = props.editor.view?.dom as HTMLElement | undefined;\n        popup.open({\n          items: props.items,\n          getRect: props.clientRect ?? null,\n          anchorEl: viewDom ?? null,\n          onCommand: (item) => props.command(item),\n        });\n      },\n      onUpdate: (props: SuggestionProps<MergeTag>) => {\n        popup.update({\n          items: props.items,\n          getRect: props.clientRect ?? null,\n          onCommand: (item) => props.command(item),\n        });\n      },\n      onKeyDown: (props: SuggestionKeyDownProps): boolean => {\n        // Escape closes via TipTap's suggestion plugin (→ onExit); report it\n        // handled without selecting.\n        if (props.event.key === \"Escape\") {\n          return true;\n        }\n        return popup.handleKeyDown(props.event);\n      },\n      onExit: () => popup.close(),\n    };\n  };\n}\n\nexport const MergeTagSuggestion = Extension.create<MergeTagSuggestionOptions>({\n  name: \"mergeTagSuggestion\",\n\n  addOptions() {\n    return {\n      mergeTags: [],\n      char: \"{{\",\n      emptyText: \"No matching merge tags\",\n      popoverRoot: null,\n    };\n  },\n\n  addProseMirrorPlugins() {\n    const tags = this.options.mergeTags;\n    const emptyText = this.options.emptyText;\n    const popoverRootRef = this.options.popoverRoot;\n\n    const config: Omit<SuggestionOptions<MergeTag>, \"editor\"> = {\n      char: this.options.char,\n      allowSpaces: false,\n      startOfLine: false,\n      // Default is [\" \"] which requires whitespace/line-start before the\n      // trigger char — so `.{{` would not fire. Allow any preceding char.\n      allowedPrefixes: null,\n      items: ({ query }: { query: string }) => filterMergeTags(tags, query),\n      command: ({\n        editor,\n        range,\n        props,\n      }: {\n        editor: SuggestionProps<MergeTag>[\"editor\"];\n        range: { from: number; to: number };\n        props: MergeTag;\n      }) => {\n        // Use insertContentAt for atomic replace (matches the canonical\n        // @tiptap/suggestion + Mention pattern). Avoids edge cases where\n        // chained deleteRange + insertMergeTag fails to insert when the\n        // selection state shifts mid-chain.\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(range, {\n            type: \"mergeTagNode\",\n            attrs: { label: props.label, value: props.value },\n          })\n          .run();\n      },\n      render: createMergeTagSuggestionRenderer(emptyText, popoverRootRef),\n    };\n\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...config,\n      }),\n    ];\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"MergeTagSuggestion-VP_nC-8W.js","names":["$emit"],"sources":["../../../src/components/MergeTagSuggestionList.vue","../../../src/components/MergeTagSuggestionList.vue","../../../src/extensions/MergeTagSuggestion.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MergeTag } from \"@templatical/types\";\n\nconst props = defineProps<{\n  items: MergeTag[];\n  selectedIndex: number;\n  emptyText: string;\n  /** Stable id used for aria-controls + per-option id derivation. */\n  listId?: string;\n}>();\n\ndefineEmits<{\n  (e: \"select\", item: MergeTag): void;\n  (e: \"hover\", index: number): void;\n}>();\n\nfunction optionId(index: number): string | undefined {\n  return props.listId ? `${props.listId}-opt-${index}` : undefined;\n}\n</script>\n\n<template>\n  <div\n    :id=\"listId\"\n    class=\"tpl:min-w-[200px] tpl:max-w-[320px] tpl:max-h-[50vh] tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1 tpl:shadow-[var(--tpl-shadow-lg)]\"\n    role=\"listbox\"\n    data-testid=\"merge-tag-suggestion-list\"\n  >\n    <div\n      v-if=\"items.length === 0\"\n      class=\"tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n      data-testid=\"merge-tag-suggestion-empty\"\n    >\n      {{ emptyText }}\n    </div>\n    <button\n      v-for=\"(item, index) in items\"\n      :key=\"item.value\"\n      :id=\"optionId(index)\"\n      type=\"button\"\n      role=\"option\"\n      :aria-selected=\"index === selectedIndex\"\n      :data-selected=\"index === selectedIndex ? 'true' : 'false'\"\n      :data-merge-tag-value=\"item.value\"\n      class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors\"\n      :class=\"\n        index === selectedIndex\n          ? 'tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]'\n          : 'tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]'\n      \"\n      @mousedown.prevent.stop=\"$emit('select', item)\"\n      @mousemove=\"index !== selectedIndex && $emit('hover', index)\"\n    >\n      <span class=\"tpl:font-medium\">{{ item.label }}</span>\n      <span class=\"tpl:text-[var(--tpl-text-dim)] tpl:font-mono\">{{\n        item.value\n      }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { MergeTag } from \"@templatical/types\";\n\nconst props = defineProps<{\n  items: MergeTag[];\n  selectedIndex: number;\n  emptyText: string;\n  /** Stable id used for aria-controls + per-option id derivation. */\n  listId?: string;\n}>();\n\ndefineEmits<{\n  (e: \"select\", item: MergeTag): void;\n  (e: \"hover\", index: number): void;\n}>();\n\nfunction optionId(index: number): string | undefined {\n  return props.listId ? `${props.listId}-opt-${index}` : undefined;\n}\n</script>\n\n<template>\n  <div\n    :id=\"listId\"\n    class=\"tpl:min-w-[200px] tpl:max-w-[320px] tpl:max-h-[50vh] tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1 tpl:shadow-[var(--tpl-shadow-lg)]\"\n    role=\"listbox\"\n    data-testid=\"merge-tag-suggestion-list\"\n  >\n    <div\n      v-if=\"items.length === 0\"\n      class=\"tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n      data-testid=\"merge-tag-suggestion-empty\"\n    >\n      {{ emptyText }}\n    </div>\n    <button\n      v-for=\"(item, index) in items\"\n      :key=\"item.value\"\n      :id=\"optionId(index)\"\n      type=\"button\"\n      role=\"option\"\n      :aria-selected=\"index === selectedIndex\"\n      :data-selected=\"index === selectedIndex ? 'true' : 'false'\"\n      :data-merge-tag-value=\"item.value\"\n      class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors\"\n      :class=\"\n        index === selectedIndex\n          ? 'tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]'\n          : 'tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]'\n      \"\n      @mousedown.prevent.stop=\"$emit('select', item)\"\n      @mousemove=\"index !== selectedIndex && $emit('hover', index)\"\n    >\n      <span class=\"tpl:font-medium\">{{ item.label }}</span>\n      <span class=\"tpl:text-[var(--tpl-text-dim)] tpl:font-mono\">{{\n        item.value\n      }}</span>\n    </button>\n  </div>\n</template>\n","import type { MergeTag } from \"@templatical/types\";\nimport { Extension } from \"@tiptap/core\";\nimport Suggestion, {\n  type SuggestionOptions,\n  type SuggestionProps,\n  type SuggestionKeyDownProps,\n} from \"@tiptap/suggestion\";\nimport { type App, createApp, h, ref, type Ref } from \"vue\";\nimport MergeTagSuggestionList from \"../components/MergeTagSuggestionList.vue\";\n\nconst MAX_RESULTS = 10;\n\n// Monotonic counter for unique listbox IDs across multiple popup instances.\nlet POPUP_ID_SEQ = 0;\n\nexport interface MergeTagSuggestionOptions {\n  /** Available merge tags */\n  mergeTags: MergeTag[];\n  /** Trigger string (e.g. \"{{\", \"*|\", \"%%=\") */\n  char: string;\n  /** Localized empty-state label */\n  emptyText: string;\n  /**\n   * Mount target for the suggestion popup. When provided with a non-null\n   * `.value`, the popup attaches into that element instead of\n   * `document.body` — keeping it inside the editor's effective DOM root\n   * (shadow-aware). Pass the ref returned by `usePopoverRoot()`.\n   *\n   * Falls back to `document.body` when omitted or when the ref's value is\n   * null at popup-open time (e.g. headless/test editors without an editor\n   * shell). Preserves pre-Phase-3 behavior for callers that don't migrate.\n   */\n  popoverRoot?: Ref<HTMLElement | null> | null;\n}\n\n/**\n * Filter merge tags by query against label and value (case-insensitive).\n * Capped at MAX_RESULTS. Exported for testing.\n */\nexport function filterMergeTags(tags: MergeTag[], query: string): MergeTag[] {\n  const trimmed = query.trim().toLowerCase();\n  if (trimmed === \"\") {\n    return tags.slice(0, MAX_RESULTS);\n  }\n  return tags\n    .filter((tag) => {\n      const label = tag.label.toLowerCase();\n      const value = tag.value.toLowerCase();\n      return label.includes(trimmed) || value.includes(trimmed);\n    })\n    .slice(0, MAX_RESULTS);\n}\n\n/**\n * Handle a keydown event against a list of items. Returns whether the\n * event was handled (so the suggestion plugin can stop propagation).\n * Exported for testing.\n */\nexport function handleSuggestionKeyDown(\n  event: KeyboardEvent,\n  items: MergeTag[],\n  selectedIndex: Ref<number>,\n  onSelect: (item: MergeTag) => void,\n): boolean {\n  if (items.length === 0) {\n    if (event.key === \"Enter\" || event.key === \"Tab\") return true;\n    return false;\n  }\n\n  if (event.key === \"ArrowDown\") {\n    selectedIndex.value = (selectedIndex.value + 1) % items.length;\n    return true;\n  }\n  if (event.key === \"ArrowUp\") {\n    selectedIndex.value =\n      (selectedIndex.value - 1 + items.length) % items.length;\n    return true;\n  }\n  if (event.key === \"Enter\" || event.key === \"Tab\") {\n    onSelect(items[selectedIndex.value]);\n    return true;\n  }\n  return false;\n}\n\n/** Options for opening the merge-tag popup. */\nexport interface MergeTagPopupOpenOptions {\n  /** Filtered tags to render. */\n  items: MergeTag[];\n  /**\n   * Anchor rect getter (the caret rect). Same contract as\n   * `@tiptap/suggestion`'s `clientRect`: viewport coordinates, re-read on\n   * every reposition so the popup tracks the caret through scroll.\n   */\n  getRect: (() => DOMRect | null) | null;\n  /**\n   * Element that owns the ARIA combobox state and serves as the theme +\n   * scroll-ancestor anchor — the ProseMirror `view.dom` in rich text, the\n   * `<input>`/`<textarea>` in a field.\n   */\n  anchorEl: HTMLElement | null;\n  /** Called with the item the user picks. */\n  onCommand: (item: MergeTag) => void;\n}\n\n/** Options for updating the popup after the query changed. */\nexport interface MergeTagPopupUpdateOptions {\n  items: MergeTag[];\n  getRect: (() => DOMRect | null) | null;\n  onCommand: (item: MergeTag) => void;\n}\n\n/**\n * Imperative handle over a single merge-tag suggestion popup.\n * Both the TipTap suggestion renderer and the input/textarea autocomplete\n * driver drive the SAME controller, so the popup's rendering, positioning,\n * scroll-tracking, ARIA wiring, and keyboard behavior are identical across\n * rich-text and plain-field surfaces by construction.\n */\nexport interface MergeTagPopupController {\n  /** Mount the popup and start tracking the caret. */\n  open(options: MergeTagPopupOpenOptions): void;\n  /** Refresh items + anchor after the query changed. */\n  update(options: MergeTagPopupUpdateOptions): void;\n  /**\n   * Handle a navigation/selection key (Arrow/Enter/Tab). Returns whether it\n   * was handled. Does NOT handle Escape — each caller owns Escape (TipTap's\n   * plugin closes via `onExit`; the field driver calls `close()`).\n   */\n  handleKeyDown(event: KeyboardEvent): boolean;\n  /** Unmount the popup, clear ARIA, and detach listeners. Idempotent. */\n  close(): void;\n  /** Whether the popup is currently mounted. */\n  isOpen(): boolean;\n}\n\n/**\n * Creates a merge-tag suggestion popup controller: mount, ARIA wiring,\n * caret-tracking position (flip-above + off-screen freeze), scroll/resize\n * repositioning, and cleanup. Framework-agnostic — it takes a plain caret\n * rect getter and an anchor element, so it serves both the ProseMirror\n * suggestion plugin and native text fields.\n */\nexport function createMergeTagPopup(\n  emptyText: string,\n  popoverRootRef?: Ref<HTMLElement | null> | null,\n): MergeTagPopupController {\n  let app: App | null = null;\n  let container: HTMLElement | null = null;\n  let editableEl: HTMLElement | null = null;\n  const itemsRef = ref<MergeTag[]>([]);\n  const selectedIndex = ref(0);\n  let currentCommand: ((item: MergeTag) => void) | null = null;\n  const listId = `tpl-merge-tag-suggestion-${++POPUP_ID_SEQ}`;\n  let latestClientRect: (() => DOMRect | null) | null = null;\n  let scrollTargets: Array<EventTarget> = [];\n  let pendingRaf: number | null = null;\n\n  function reposition(): void {\n    position(latestClientRect?.() ?? null);\n  }\n\n  /**\n   * Reposition immediately and on the next animation frame.\n   * After a keystroke triggers the suggestion, TipTap may run its\n   * own `scrollIntoView` to keep the caret visible. That scroll\n   * lands AFTER the current task's `position()` call but BEFORE\n   * the browser's next paint, so we re-measure on rAF to catch\n   * the post-scroll caret rect. Without this, the popup pins to\n   * the pre-scroll caret position and ends up offset on slower\n   * runners.\n   */\n  function repositionAfterPaint(): void {\n    reposition();\n    if (pendingRaf !== null) cancelAnimationFrame(pendingRaf);\n    pendingRaf = requestAnimationFrame(() => {\n      pendingRaf = null;\n      reposition();\n    });\n  }\n\n  function collectScrollAncestors(el: HTMLElement | null): HTMLElement[] {\n    // Walk up the DOM finding scrollable ancestors. ProseMirror's\n    // scrollIntoView fires on whichever ancestor scrolls — listening\n    // to all of them ensures we reposition regardless of which one\n    // moves.\n    const result: HTMLElement[] = [];\n    let node: HTMLElement | null = el?.parentElement ?? null;\n    while (\n      node &&\n      // shadow-ok: ancestor walk terminator; not a mount target\n      node !== document.body &&\n      node !== document.documentElement\n    ) {\n      const style = window.getComputedStyle(node);\n      const overflow = style.overflow + style.overflowX + style.overflowY;\n      if (/(auto|scroll|overlay)/.test(overflow)) {\n        result.push(node);\n      }\n      node = node.parentElement;\n    }\n    return result;\n  }\n\n  function attachScrollListeners(viewDom: HTMLElement | null): void {\n    scrollTargets = [window, ...collectScrollAncestors(viewDom)];\n    for (const target of scrollTargets) {\n      target.addEventListener(\"scroll\", reposition, {\n        passive: true,\n        capture: true,\n      });\n    }\n    window.addEventListener(\"resize\", reposition, { passive: true });\n  }\n\n  function detachScrollListeners(): void {\n    for (const target of scrollTargets) {\n      target.removeEventListener(\"scroll\", reposition, {\n        capture: true,\n      } as EventListenerOptions);\n    }\n    window.removeEventListener(\"resize\", reposition);\n    scrollTargets = [];\n  }\n\n  function position(rect: DOMRect | null): void {\n    if (!container || !rect) return;\n    // If the caret has scrolled out of the viewport, freeze the\n    // popup at its last on-screen position. Following the caret\n    // off-screen produces an invisible popup the user can't reach,\n    // and lets pathological scroll loops drag the popup further\n    // each tick.\n    if (rect.bottom < 0 || rect.top > window.innerHeight) return;\n    // Position `absolute` relative to the mount target — the popover root\n    // (`position: relative`) or the <body> fallback. The caret rect is in\n    // viewport space, so subtract the offset parent's rect to get local\n    // coords: a transformed ancestor of the editor becomes the containing\n    // block for a `fixed` popup and would offset it, but not for an\n    // `absolute` popup anchored inside the positioned popover root. The\n    // off-screen freeze and flip-above decisions still use viewport metrics.\n    container.style.position = \"absolute\";\n    container.style.zIndex = \"9999\";\n    const origin = container.offsetParent?.getBoundingClientRect();\n    const originTop = origin?.top ?? 0;\n    const originLeft = origin?.left ?? 0;\n    container.style.left = `${rect.left - originLeft}px`;\n    // Place below caret first; offsetHeight is sync-readable after\n    // the Vue app has mounted (or after onUpdate's reactive flush).\n    container.style.top = `${rect.bottom - originTop}px`;\n    const popupHeight = container.offsetHeight;\n    if (popupHeight === 0) return;\n    const spaceBelow = window.innerHeight - rect.bottom;\n    if (spaceBelow < popupHeight) {\n      // Not enough room below — flip above. Clamp to 0 so the\n      // popup never positions off the top of the viewport.\n      const flippedTop = Math.max(0, rect.top - popupHeight);\n      container.style.top = `${flippedTop - originTop}px`;\n    }\n  }\n\n  function applyThemeContext(\n    target: HTMLElement,\n    editorEl: HTMLElement | null | undefined,\n  ): void {\n    // When the popup mounts to document.body its `position: fixed`\n    // resolves against the viewport — any transform/filter on a\n    // consumer-page ancestor (route transitions, reveal animations,\n    // dark canvas inversion) creates a containing block and moves\n    // fixed descendants with it. Body ancestors don't transform.\n    //\n    // When mounting inside the editor's popover root, the popup is a\n    // descendant of the `.tpl[data-tpl-theme]` root so CSS vars + font\n    // would inherit — but the snapshot below is still emitted inline\n    // because inline declarations win and the cost is negligible. This\n    // keeps a single behavior across both mount paths.\n    //\n    // CSS vars (--tpl-bg-elevated, --tpl-border, etc.) are scoped to\n    // `.tpl` and `.tpl[data-tpl-theme=\"dark\"]` in the editor's\n    // stylesheet, so the popup wouldn't inherit them at body root.\n    // Adding `class=\"tpl\"` would also pull base rules (min-height,\n    // flex, full-page bg) we don't want on a popup. Instead, snapshot\n    // every --tpl-* custom property from the editor's theme root and\n    // re-emit them inline on the popup wrapper.\n    const themeRoot = editorEl?.closest<HTMLElement>(\"[data-tpl-theme]\");\n    if (!themeRoot) return;\n    const themeValue = themeRoot.getAttribute(\"data-tpl-theme\");\n    if (themeValue) target.setAttribute(\"data-tpl-theme\", themeValue);\n    const computed = window.getComputedStyle(themeRoot);\n    for (let i = 0; i < computed.length; i++) {\n      const prop = computed[i];\n      if (prop.startsWith(\"--tpl-\")) {\n        target.style.setProperty(prop, computed.getPropertyValue(prop));\n      }\n    }\n    // The popup is teleported out of the editor wrapper, so it inherits no\n    // font from it: without this its content renders in the page's default font\n    // and ends up at a different height — which changes the flip-above decision\n    // and shifts the popup off the caret. Copy typography too.\n    target.style.fontFamily = computed.fontFamily;\n    target.style.fontSize = computed.fontSize;\n    target.style.lineHeight = computed.lineHeight;\n  }\n\n  function setEditableAria(active: boolean): void {\n    if (!editableEl) return;\n    if (active) {\n      editableEl.setAttribute(\"role\", \"combobox\");\n      editableEl.setAttribute(\"aria-haspopup\", \"listbox\");\n      editableEl.setAttribute(\"aria-expanded\", \"true\");\n      editableEl.setAttribute(\"aria-controls\", listId);\n    } else {\n      editableEl.removeAttribute(\"aria-expanded\");\n      editableEl.removeAttribute(\"aria-controls\");\n      editableEl.removeAttribute(\"aria-activedescendant\");\n      editableEl.removeAttribute(\"aria-haspopup\");\n      editableEl.removeAttribute(\"role\");\n    }\n  }\n\n  function setActiveDescendant(): void {\n    if (!editableEl) return;\n    if (itemsRef.value.length === 0) {\n      editableEl.removeAttribute(\"aria-activedescendant\");\n      return;\n    }\n    editableEl.setAttribute(\n      \"aria-activedescendant\",\n      `${listId}-opt-${selectedIndex.value}`,\n    );\n  }\n\n  function select(item: MergeTag): void {\n    currentCommand?.(item);\n  }\n\n  return {\n    open: ({ items, getRect, anchorEl, onCommand }) => {\n      itemsRef.value = items;\n      selectedIndex.value = 0;\n      currentCommand = onCommand;\n\n      container = document.createElement(\"div\");\n      container.setAttribute(\"data-testid\", \"merge-tag-suggestion-popup\");\n      editableEl = anchorEl;\n      applyThemeContext(container, anchorEl);\n      // Prefer the editor's popover root (shadow-aware) when wired by\n      // the consumer. Falls back to document.body for headless callers\n      // that don't pass `popoverRoot` to configure().\n      // shadow-ok: fallback when popoverRoot wasn't provided (e.g., headless caller); editor mounts pass the shadow-aware root\n      const mountTarget = popoverRootRef?.value ?? document.body;\n      mountTarget.appendChild(container);\n\n      app = createApp({\n        render() {\n          return h(MergeTagSuggestionList, {\n            items: itemsRef.value,\n            selectedIndex: selectedIndex.value,\n            emptyText,\n            listId,\n            onSelect: (item: MergeTag) => select(item),\n            onHover: (index: number) => {\n              selectedIndex.value = index;\n              setActiveDescendant();\n            },\n          });\n        },\n      });\n      app.mount(container);\n      setEditableAria(true);\n      setActiveDescendant();\n      latestClientRect = getRect;\n      repositionAfterPaint();\n      attachScrollListeners(anchorEl);\n    },\n    update: ({ items, getRect, onCommand }) => {\n      itemsRef.value = items;\n      // Reset selection when item set changes (query changed).\n      if (selectedIndex.value >= items.length) {\n        selectedIndex.value = 0;\n      }\n      currentCommand = onCommand;\n      setActiveDescendant();\n      latestClientRect = getRect;\n      repositionAfterPaint();\n    },\n    handleKeyDown: (event: KeyboardEvent): boolean => {\n      const handled = handleSuggestionKeyDown(\n        event,\n        itemsRef.value,\n        selectedIndex,\n        select,\n      );\n      if (handled) setActiveDescendant();\n      return handled;\n    },\n    close: () => {\n      // Idempotent: nothing to tear down (and no window listeners to detach)\n      // when the popup was never opened. Keeps repeated close() / close-before-\n      // open cheap and side-effect-free.\n      if (container === null) return;\n      if (pendingRaf !== null) {\n        cancelAnimationFrame(pendingRaf);\n        pendingRaf = null;\n      }\n      detachScrollListeners();\n      setEditableAria(false);\n      app?.unmount();\n      container.remove();\n      app = null;\n      container = null;\n      editableEl = null;\n      currentCommand = null;\n      latestClientRect = null;\n    },\n    isOpen: () => container !== null,\n  };\n}\n\n/**\n * Builds the `@tiptap/suggestion` `render` factory for the merge-tag popup.\n * A thin adapter over {@link createMergeTagPopup}: it maps ProseMirror's\n * `SuggestionProps` (items, `clientRect`, `view.dom`, `command`) onto the\n * controller. Exported as a standalone function so that mapping can be\n * unit-tested with mocked `SuggestionProps` instead of a full editor.\n */\nexport function createMergeTagSuggestionRenderer(\n  emptyText: string,\n  popoverRootRef?: Ref<HTMLElement | null> | null,\n): NonNullable<SuggestionOptions<MergeTag>[\"render\"]> {\n  return () => {\n    const popup = createMergeTagPopup(emptyText, popoverRootRef);\n\n    return {\n      onStart: (props: SuggestionProps<MergeTag>) => {\n        // Use view.dom (ProseMirror contenteditable, actually\n        // attached to the DOM) rather than options.element, which may\n        // be a detached div when no `element` is passed to the editor\n        // constructor (as is the case with @tiptap/vue-3 EditorContent).\n        const viewDom = props.editor.view?.dom as HTMLElement | undefined;\n        popup.open({\n          items: props.items,\n          getRect: props.clientRect ?? null,\n          anchorEl: viewDom ?? null,\n          onCommand: (item) => props.command(item),\n        });\n      },\n      onUpdate: (props: SuggestionProps<MergeTag>) => {\n        popup.update({\n          items: props.items,\n          getRect: props.clientRect ?? null,\n          onCommand: (item) => props.command(item),\n        });\n      },\n      onKeyDown: (props: SuggestionKeyDownProps): boolean => {\n        // Escape closes via TipTap's suggestion plugin (→ onExit); report it\n        // handled without selecting.\n        if (props.event.key === \"Escape\") {\n          return true;\n        }\n        return popup.handleKeyDown(props.event);\n      },\n      onExit: () => popup.close(),\n    };\n  };\n}\n\nexport const MergeTagSuggestion = Extension.create<MergeTagSuggestionOptions>({\n  name: \"mergeTagSuggestion\",\n\n  addOptions() {\n    return {\n      mergeTags: [],\n      char: \"{{\",\n      emptyText: \"No matching merge tags\",\n      popoverRoot: null,\n    };\n  },\n\n  addProseMirrorPlugins() {\n    const tags = this.options.mergeTags;\n    const emptyText = this.options.emptyText;\n    const popoverRootRef = this.options.popoverRoot;\n\n    const config: Omit<SuggestionOptions<MergeTag>, \"editor\"> = {\n      char: this.options.char,\n      allowSpaces: false,\n      startOfLine: false,\n      // Default is [\" \"] which requires whitespace/line-start before the\n      // trigger char — so `.{{` would not fire. Allow any preceding char.\n      allowedPrefixes: null,\n      items: ({ query }: { query: string }) => filterMergeTags(tags, query),\n      command: ({\n        editor,\n        range,\n        props,\n      }: {\n        editor: SuggestionProps<MergeTag>[\"editor\"];\n        range: { from: number; to: number };\n        props: MergeTag;\n      }) => {\n        // Use insertContentAt for atomic replace (matches the canonical\n        // @tiptap/suggestion + Mention pattern). Avoids edge cases where\n        // chained deleteRange + insertMergeTag fails to insert when the\n        // selection state shifts mid-chain.\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(range, {\n            type: \"mergeTagNode\",\n            attrs: { label: props.label, value: props.value },\n          })\n          .run();\n      },\n      render: createMergeTagSuggestionRenderer(emptyText, popoverRootRef),\n    };\n\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...config,\n      }),\n    ];\n  },\n});\n"],"mappings":"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"}

package/dist/cdn/chunks/{ParagraphEditor-BtzkHfv2.js → ParagraphEditor-BalgLjBt.js}

@@ -1,14 +1,14 @@
-import { E as e, F as t, N as n, Q as r, R as i, S as a, at as o, b as s, c, ct as l, d as u, f as d, g as f, h as p, l as m, lt as h, m as g, p as _, q as v, u as y, ut as b, y as x } from "./draggable-BLMjz0GK.js";
-import { E as S, S as C, T as w, x as T } from "./useEditorCore-Dq5gdn5i.js";
-import { t as E } from "./dist-2fOlspdg.js";
-import { B as D, D as O, H as k, W as ee, _ as te, h as ne, w as A } from "./keys-D7OpfE2s.js";
-import { t as j } from "./useI18n-DYb1SgLB.js";
-import { n as M } from "./usePopoverPosition-CJZ6EkS4.js";
-import { Ct as N, P as re, R as ie, Rt as ae, S as oe, Vt as se, _ as ce, at as le, ct as ue, g as de, h as fe, it as pe, l as me, m as he, ot as ge, ut as _e, x as ve, y as ye } from "./icons-C2kP4vOJ.js";
+import { E as e, F as t, N as n, Q as r, R as i, S as a, at as o, b as s, c, ct as l, d as u, f as d, g as f, h as p, l as m, lt as h, m as g, p as _, q as v, u as y, ut as b, y as x } from "./draggable-D2vo-aQI.js";
+import { E as S, S as C, T as w, x as T } from "./useEditorCore-BQeEwEQ9.js";
+import { t as E } from "./dist-El3fQnfk.js";
+import { B as D, D as O, H as k, W as ee, _ as te, h as ne, w as A } from "./keys-BJ770Mwm.js";
+import { t as j } from "./useI18n-DIhawILp.js";
+import { n as M } from "./usePopoverPosition-DkiTLnBm.js";
+import { Ct as N, P as re, R as ie, Rt as ae, S as oe, Vt as se, _ as ce, at as le, c as ue, ct as de, g as fe, h as pe, it as me, m as he, ot as ge, ut as _e, x as ve, y as ye } from "./icons-BTdLXRXn.js";
 import { t as P } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { a as be, n as xe, o as Se, s as Ce } from "./styleConstants-C_YAPdQS.js";
-import { t as F } from "./ColorPicker-UpN24AsB.js";
-import { n as I, t as L } from "./RichTextEditorContent-BQATmyd9.js";
+import { t as F } from "./ColorPicker-Ww4xHHMI.js";
+import { n as I, t as L } from "./RichTextEditorContent-DpvOKKH-.js";
 //#region src/components/blocks/EmojiPickerDropdown.vue?vue&type=script&setup=true&lang.ts
 var R = [
 	"aria-label",
@@ -299,7 +299,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(W, {
-				icon: o(me),
+				icon: o(ue),
 				label: o(E).paragraphEditor.underline,
 				active: t.editor.isActive("underline"),
 				onClick: r[2] ||= (e) => t.editor.chain().focus().toggleUnderline().run()
@@ -341,7 +341,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			]),
 			s(J),
 			s(W, {
-				icon: o(ue),
+				icon: o(de),
 				label: o(E).paragraphEditor.addLink,
 				active: t.editor.isActive("link"),
 				onClick: r[6] ||= (e) => a("open-link-dialog")
@@ -393,7 +393,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(W, {
-				icon: o(de),
+				icon: o(fe),
 				label: o(E).paragraphEditor.alignRight,
 				active: t.editor.isActive({ textAlign: "right" }),
 				onClick: r[11] ||= (e) => t.editor.chain().focus().setTextAlign("right").run()
@@ -403,7 +403,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(W, {
-				icon: o(fe),
+				icon: o(pe),
 				label: o(E).paragraphEditor.alignJustify,
 				active: t.editor.isActive({ textAlign: "justify" }),
 				onClick: r[12] ||= (e) => t.editor.chain().focus().setTextAlign("justify").run()
@@ -466,7 +466,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				size: 16,
 				"stroke-width": 2
 			}), x(" " + b(o(E).logicTag.insertShort), 1)], 8, Ae)], 64)) : p("", !0)
-		])], 64)) : (n(), f("div", $, [s(o(pe), {
+		])], 64)) : (n(), f("div", $, [s(o(me), {
 			class: "tpl-spinner",
 			size: 14,
 			"stroke-width": 2
@@ -487,18 +487,18 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			editorName: "ParagraphEditor",
 			async loadExtensions({ mergeTags: e, syntax: t, triggerChar: n, autocompleteEnabled: r, suggestionEmptyText: i }) {
 				let [{ Editor: o, EditorContent: s }, { default: c }, { default: l }, { default: u }, { default: d }, { default: f }, { default: p }, { TextStyle: m }, { default: h }, { default: g }, { default: _ }, { MergeTagNode: v, MergeTagSuggestion: y, LogicMergeTagNode: b, FontSize: x, LineHeight: S, LetterSpacing: w, LineBoundaryKeys: T }] = await Promise.all([
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.r),
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.i),
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.l),
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.a),
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.c),
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.s),
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.o),
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.p),
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.f),
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.d),
-					import("./tiptap-DOw5Yb4H.js").then((e) => e.u),
-					import("./extensions-Deqilwp8.js")
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.r),
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.i),
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.l),
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.a),
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.c),
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.s),
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.o),
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.p),
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.f),
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.d),
+					import("./tiptap-Bqy-H6CT.js").then((e) => e.u),
+					import("./extensions-D30V0hzj.js")
 				]);
 				return {
 					TiptapEditor: o,
@@ -609,4 +609,4 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 //#endregion
 export { Ne as default };
 
-//# sourceMappingURL=ParagraphEditor-BtzkHfv2.js.map
+//# sourceMappingURL=ParagraphEditor-BalgLjBt.js.map