@templatical/editor 0.27.5 → 0.27.6

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@templatical/editor",
   "description": "Vue 3 visual drag-and-drop email editor powered by Templatical",
-  "version": "0.27.5",
+  "version": "0.27.6",
   "bugs": "https://github.com/templatical/sdk/issues",
   "devDependencies": {
-    "@lucide/vue": "^1.32.0",
+    "@lucide/vue": "^1.33.0",
     "@tiptap/core": "^3.30.2",
     "@tiptap/extension-color": "^3.30.2",
     "@tiptap/extension-font-family": "^3.30.2",
@@ -33,9 +33,9 @@
     "vue": "^3.5.41",
     "vue-draggable-plus": "^0.6.1",
     "vue-tsc": "^3.3.10",
-    "@templatical/core": "0.27.5",
-    "@templatical/types": "0.27.5",
-    "@templatical/quality": "0.27.5"
+    "@templatical/core": "0.27.6",
+    "@templatical/types": "0.27.6",
+    "@templatical/quality": "0.27.6"
   },
   "exports": {
     ".": {
@@ -63,9 +63,9 @@
   "license": "SEE LICENSE IN LICENSE",
   "module": "./dist/templatical-editor.js",
   "peerDependencies": {
-    "@templatical/media-library": "0.27.5",
-    "@templatical/quality": "0.27.5",
-    "@templatical/renderer": "0.27.5"
+    "@templatical/media-library": "0.27.6",
+    "@templatical/quality": "0.27.6",
+    "@templatical/renderer": "0.27.6"
   },
   "peerDependenciesMeta": {
     "@templatical/renderer": {

package/dist/cdn/chunks/CloudPanels-DVtJkWsj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CloudPanels-DVtJkWsj.js","names":[],"sources":["../../../src/cloud/components/CloudErrorOverlay.vue","../../../src/cloud/components/CloudErrorOverlay.vue","../../../src/cloud/components/CloudLoadingOverlay.vue","../../../src/cloud/components/CloudLoadingOverlay.vue","../../../src/cloud/components/CloudSaveGateModal.vue","../../../src/cloud/components/CloudSaveGateModal.vue","../../../src/cloud/components/CollabUndoToast.vue","../../../src/cloud/components/CollabUndoToast.vue","../../../src/cloud/components/CloudPanels.vue","../../../src/cloud/components/CloudPanels.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CircleAlert } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\n\ndefineProps<{\n  error: Error | null;\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"retry\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nfunction getErrorMessage(error: Error): string {\n  if (\n    \"isUnauthorized\" in error &&\n    (error as { isUnauthorized: boolean }).isUnauthorized\n  ) {\n    return cloudT.error.authFailed;\n  }\n  if (\"isNotFound\" in error && (error as { isNotFound: boolean }).isNotFound) {\n    return cloudT.error.templateNotFound;\n  }\n  return cloudT.error.defaultMessage;\n}\n\nfunction isNotFoundError(error: Error): boolean {\n  return (\n    \"isNotFound\" in error && !!(error as { isNotFound: boolean }).isNotFound\n  );\n}\n</script>\n\n<template>\n  <div\n    v-if=\"visible && error\"\n    role=\"alert\"\n    class=\"tpl-error tpl:absolute tpl:inset-0 tpl:z-overlay tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-6 tpl:px-8 tpl:bg-[var(--tpl-bg)]\"\n  >\n    <div\n      class=\"tpl:flex tpl:size-16 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-danger-light)]\"\n    >\n      <CircleAlert\n        :size=\"32\"\n        :stroke-width=\"1.5\"\n        class=\"tpl:text-[var(--tpl-danger)]\"\n      />\n    </div>\n    <div\n      class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:text-center\"\n    >\n      <h2 class=\"tpl:text-lg tpl:font-semibold tpl:text-[var(--tpl-text)]\">\n        {{ cloudT.error.title }}\n      </h2>\n      <p class=\"tpl:max-w-md tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n        {{ getErrorMessage(error) }}\n      </p>\n    </div>\n    <button\n      v-if=\"!isNotFoundError(error)\"\n      class=\"tpl-btn tpl-btn-primary tpl:inline-flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n      @click=\"emit('retry')\"\n    >\n      {{ cloudT.error.retry }}\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { CircleAlert } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\n\ndefineProps<{\n  error: Error | null;\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"retry\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nfunction getErrorMessage(error: Error): string {\n  if (\n    \"isUnauthorized\" in error &&\n    (error as { isUnauthorized: boolean }).isUnauthorized\n  ) {\n    return cloudT.error.authFailed;\n  }\n  if (\"isNotFound\" in error && (error as { isNotFound: boolean }).isNotFound) {\n    return cloudT.error.templateNotFound;\n  }\n  return cloudT.error.defaultMessage;\n}\n\nfunction isNotFoundError(error: Error): boolean {\n  return (\n    \"isNotFound\" in error && !!(error as { isNotFound: boolean }).isNotFound\n  );\n}\n</script>\n\n<template>\n  <div\n    v-if=\"visible && error\"\n    role=\"alert\"\n    class=\"tpl-error tpl:absolute tpl:inset-0 tpl:z-overlay tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-6 tpl:px-8 tpl:bg-[var(--tpl-bg)]\"\n  >\n    <div\n      class=\"tpl:flex tpl:size-16 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-danger-light)]\"\n    >\n      <CircleAlert\n        :size=\"32\"\n        :stroke-width=\"1.5\"\n        class=\"tpl:text-[var(--tpl-danger)]\"\n      />\n    </div>\n    <div\n      class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:text-center\"\n    >\n      <h2 class=\"tpl:text-lg tpl:font-semibold tpl:text-[var(--tpl-text)]\">\n        {{ cloudT.error.title }}\n      </h2>\n      <p class=\"tpl:max-w-md tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n        {{ getErrorMessage(error) }}\n      </p>\n    </div>\n    <button\n      v-if=\"!isNotFoundError(error)\"\n      class=\"tpl-btn tpl-btn-primary tpl:inline-flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n      @click=\"emit('retry')\"\n    >\n      {{ cloudT.error.retry }}\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  visible: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"tpl-loading tpl:absolute tpl:inset-0 tpl:z-overlay tpl:flex tpl:flex-col tpl:bg-[var(--tpl-bg)]\"\n  >\n    <!-- Skeleton header -->\n    <div\n      class=\"tpl:flex tpl:h-14 tpl:shrink-0 tpl:items-center tpl:justify-between tpl:px-4 tpl:border-b tpl:border-[var(--tpl-border)]\"\n    >\n      <div\n        class=\"tpl-shimmer tpl:h-5 tpl:w-28 tpl:rounded-[var(--tpl-radius-sm)]\"\n      ></div>\n      <div class=\"tpl:flex tpl:gap-3\">\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n    </div>\n    <!-- Skeleton body -->\n    <div class=\"tpl:flex tpl:flex-1 tpl:overflow-hidden\">\n      <!-- Left sidebar rail -->\n      <div\n        class=\"tpl:flex tpl:w-12 tpl:shrink-0 tpl:flex-col tpl:items-center tpl:gap-4 tpl:py-5 tpl:border-r tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          v-for=\"n in 5\"\n          :key=\"n\"\n          class=\"tpl-shimmer tpl:size-7 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n      <!-- Canvas area -->\n      <div\n        class=\"tpl:flex tpl:flex-1 tpl:items-start tpl:justify-center tpl:overflow-auto tpl:p-8 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <div\n          class=\"tpl:w-full tpl:max-w-[600px] tpl:rounded-[var(--tpl-radius)] tpl:p-6 tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)]\"\n        >\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-3/4 tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-5/6 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-44 tpl:w-full tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-2/3 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:flex tpl:justify-center tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-10 tpl:w-36 tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/2 tpl:rounded\"\n            ></div>\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/3 tpl:rounded\"\n            ></div>\n          </div>\n        </div>\n      </div>\n      <!-- Right panel -->\n      <div\n        class=\"tpl:flex tpl:w-[320px] tpl:shrink-0 tpl:flex-col tpl:gap-4 tpl:p-4 tpl:border-l tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  visible: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"tpl-loading tpl:absolute tpl:inset-0 tpl:z-overlay tpl:flex tpl:flex-col tpl:bg-[var(--tpl-bg)]\"\n  >\n    <!-- Skeleton header -->\n    <div\n      class=\"tpl:flex tpl:h-14 tpl:shrink-0 tpl:items-center tpl:justify-between tpl:px-4 tpl:border-b tpl:border-[var(--tpl-border)]\"\n    >\n      <div\n        class=\"tpl-shimmer tpl:h-5 tpl:w-28 tpl:rounded-[var(--tpl-radius-sm)]\"\n      ></div>\n      <div class=\"tpl:flex tpl:gap-3\">\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n    </div>\n    <!-- Skeleton body -->\n    <div class=\"tpl:flex tpl:flex-1 tpl:overflow-hidden\">\n      <!-- Left sidebar rail -->\n      <div\n        class=\"tpl:flex tpl:w-12 tpl:shrink-0 tpl:flex-col tpl:items-center tpl:gap-4 tpl:py-5 tpl:border-r tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          v-for=\"n in 5\"\n          :key=\"n\"\n          class=\"tpl-shimmer tpl:size-7 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n      <!-- Canvas area -->\n      <div\n        class=\"tpl:flex tpl:flex-1 tpl:items-start tpl:justify-center tpl:overflow-auto tpl:p-8 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <div\n          class=\"tpl:w-full tpl:max-w-[600px] tpl:rounded-[var(--tpl-radius)] tpl:p-6 tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)]\"\n        >\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-3/4 tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-5/6 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-44 tpl:w-full tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-2/3 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:flex tpl:justify-center tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-10 tpl:w-36 tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/2 tpl:rounded\"\n            ></div>\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/3 tpl:rounded\"\n            ></div>\n          </div>\n        </div>\n      </div>\n      <!-- Right panel -->\n      <div\n        class=\"tpl:flex tpl:w-[320px] tpl:shrink-0 tpl:flex-col tpl:gap-4 tpl:p-4 tpl:border-l tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { AlertTriangle } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\ndefineProps<{\n  open: boolean;\n  issues: LintIssue[];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"confirm\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl:transition-opacity\"\n    leave-active-class=\"tpl:transition-opacity\"\n    enter-from-class=\"tpl:opacity-0\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <div\n      v-if=\"open\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-label=\"cloudT.saveGate.title\"\n      class=\"tpl:fixed tpl:inset-0 tpl:z-50 tpl:flex tpl:items-center tpl:justify-center tpl:bg-black/40 tpl:p-6\"\n      @click.self=\"emit('cancel')\"\n    >\n      <div\n        class=\"tpl:flex tpl:max-h-[80vh] tpl:w-full tpl:max-w-md tpl:flex-col tpl:gap-4 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-5 tpl:shadow-[var(--tpl-shadow-md)]\"\n      >\n        <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <AlertTriangle\n            :size=\"18\"\n            :stroke-width=\"2\"\n            class=\"tpl:text-[var(--tpl-warning)]\"\n          />\n          <h2\n            class=\"tpl:m-0 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          >\n            {{ cloudT.saveGate.title }}\n          </h2>\n        </header>\n\n        <p class=\"tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n          {{ cloudT.saveGate.body }}\n        </p>\n\n        <ul\n          class=\"tpl:m-0 tpl:flex tpl:max-h-64 tpl:list-none tpl:flex-col tpl:gap-1.5 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2\"\n        >\n          <li\n            v-for=\"issue in issues\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-0.5 tpl:rounded tpl:px-2 tpl:py-1.5\"\n          >\n            <span class=\"tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </span>\n            <span\n              class=\"tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </span>\n          </li>\n        </ul>\n\n        <footer class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n            @click=\"emit('cancel')\"\n          >\n            {{ cloudT.saveGate.cancel }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:bg-[var(--tpl-danger)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-bg)]\"\n            @click=\"emit('confirm')\"\n          >\n            {{ cloudT.saveGate.confirm }}\n          </button>\n        </footer>\n      </div>\n    </div>\n  </Transition>\n</template>\n","<script setup lang=\"ts\">\nimport { AlertTriangle } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\ndefineProps<{\n  open: boolean;\n  issues: LintIssue[];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"confirm\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl:transition-opacity\"\n    leave-active-class=\"tpl:transition-opacity\"\n    enter-from-class=\"tpl:opacity-0\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <div\n      v-if=\"open\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-label=\"cloudT.saveGate.title\"\n      class=\"tpl:fixed tpl:inset-0 tpl:z-50 tpl:flex tpl:items-center tpl:justify-center tpl:bg-black/40 tpl:p-6\"\n      @click.self=\"emit('cancel')\"\n    >\n      <div\n        class=\"tpl:flex tpl:max-h-[80vh] tpl:w-full tpl:max-w-md tpl:flex-col tpl:gap-4 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-5 tpl:shadow-[var(--tpl-shadow-md)]\"\n      >\n        <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <AlertTriangle\n            :size=\"18\"\n            :stroke-width=\"2\"\n            class=\"tpl:text-[var(--tpl-warning)]\"\n          />\n          <h2\n            class=\"tpl:m-0 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          >\n            {{ cloudT.saveGate.title }}\n          </h2>\n        </header>\n\n        <p class=\"tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n          {{ cloudT.saveGate.body }}\n        </p>\n\n        <ul\n          class=\"tpl:m-0 tpl:flex tpl:max-h-64 tpl:list-none tpl:flex-col tpl:gap-1.5 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2\"\n        >\n          <li\n            v-for=\"issue in issues\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-0.5 tpl:rounded tpl:px-2 tpl:py-1.5\"\n          >\n            <span class=\"tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </span>\n            <span\n              class=\"tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </span>\n          </li>\n        </ul>\n\n        <footer class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n            @click=\"emit('cancel')\"\n          >\n            {{ cloudT.saveGate.cancel }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:bg-[var(--tpl-danger)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-bg)]\"\n            @click=\"emit('confirm')\"\n          >\n            {{ cloudT.saveGate.confirm }}\n          </button>\n        </footer>\n      </div>\n    </div>\n  </Transition>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\n\ndefineProps<{\n  visible: boolean;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    role=\"status\"\n    aria-live=\"polite\"\n    class=\"tpl:absolute tpl:top-16 tpl:left-1/2 tpl:z-toast tpl:-translate-x-1/2 tpl:rounded-[var(--tpl-radius)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:shadow-[var(--tpl-shadow-lg)]\"\n    style=\"\n      background-color: var(--tpl-warning-light);\n      color: var(--tpl-text);\n      border: 1px solid var(--tpl-warning);\n    \"\n  >\n    {{ t.history.collabWarning }}\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\n\ndefineProps<{\n  visible: boolean;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    role=\"status\"\n    aria-live=\"polite\"\n    class=\"tpl:absolute tpl:top-16 tpl:left-1/2 tpl:z-toast tpl:-translate-x-1/2 tpl:rounded-[var(--tpl-radius)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:shadow-[var(--tpl-shadow-lg)]\"\n    style=\"\n      background-color: var(--tpl-warning-light);\n      color: var(--tpl-text);\n      border: 1px solid var(--tpl-warning);\n    \"\n  >\n    {{ t.history.collabWarning }}\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { defineAsyncComponent } from \"vue\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport type { UseEditorReturn } from \"@templatical/core\";\n\nimport type { UseEditorCoreReturn } from \"../../composables/useEditorCore\";\nimport type { CloudAttachment, CloudReady, CloudRuntime } from \"../runtime\";\n\nimport CloudErrorOverlay from \"./CloudErrorOverlay.vue\";\nimport CloudLoadingOverlay from \"./CloudLoadingOverlay.vue\";\nimport CloudSaveGateModal from \"./CloudSaveGateModal.vue\";\nimport CollabUndoToast from \"./CollabUndoToast.vue\";\n\nconst AiChatSidebar = defineAsyncComponent(() => import(\"./AiChatSidebar.vue\"));\nconst DesignReferenceSidebar = defineAsyncComponent(\n  () => import(\"./DesignReferenceSidebar.vue\"),\n);\nconst TemplateScoringPanel = defineAsyncComponent(\n  () => import(\"./TemplateScoringPanel.vue\"),\n);\nconst MediaLibraryModal = defineAsyncComponent(async () => {\n  // try/catch downgrades Webpack's \"Module not found\" from error to warning\n  // when the optional peer isn't installed. Cloud consumers always install it.\n  try {\n    const m = await import(\"@templatical/media-library\");\n    return m.MediaLibraryModal;\n  } catch {\n    throw new Error(\n      \"[Templatical] Cloud media library requires the optional peer dependency '@templatical/media-library'. Please install it.\",\n    );\n  }\n});\n\n/**\n * Every piece of Cloud chrome that renders outside the header.\n *\n * `Editor.vue` mounts this behind one lazy `defineAsyncComponent` gated on a\n * cloud runtime being present, so an OSS consumer downloads none of it — the\n * `SavedBlocksPanels` / `TestEmailPanel` pattern.\n *\n * The overlays live here rather than in the shared editor deliberately: `init()`\n * cannot fail after it mounts, and OSS should not grow the ability.\n *\n * The comments sidebar is deliberately not here: it is shared, as `CommentsPanel`\n * in `Editor.vue` over a `CommentsProvider`. Its filter target lives on the shared\n * feature rather than being relayed through this component, so it survives the\n * lazy panel's mount without a runtime hop.\n */\nconst props = defineProps<{\n  editor: UseEditorReturn;\n  core: UseEditorCoreReturn;\n  runtime: CloudRuntime;\n  cloud: CloudAttachment;\n  ready: CloudReady;\n  /**\n   * The editor's `init({ locale })`, forwarded to `MediaLibraryModal` so\n   * `@templatical/media-library` loads its own strings in the same language.\n   * A locale rather than translations: that package owns its copy, and the\n   * editor's own chunk carries none of it.\n   */\n  locale?: string;\n}>();\n\nfunction applyContent(content: TemplateContent): void {\n  props.core.history.record();\n  props.editor.setContent(content);\n  props.core.conditionPreview.reset();\n}\n</script>\n\n<template>\n  <!-- A template create / load in flight. Cloud reads its content from the\n       server, so there is a real gap where the canvas shows the wrong thing. -->\n  <Transition\n    enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n    enter-from-class=\"tpl:opacity-100\"\n    enter-to-class=\"tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n    leave-from-class=\"tpl:opacity-100\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <CloudLoadingOverlay :visible=\"editor.state.isLoading\" />\n  </Transition>\n\n  <!-- Session failure — an auth refresh that could not renew the token. The\n       *bootstrap* has no overlay any more: it runs before the mount, so a\n       failure there rejects `initCloud()` instead of mounting a dead editor. -->\n  <Transition\n    enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n    enter-from-class=\"tpl:opacity-0\"\n    enter-to-class=\"tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n    leave-from-class=\"tpl:opacity-100\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <CloudErrorOverlay\n      :error=\"ready.sessionError.value\"\n      :visible=\"!!ready.sessionError.value\"\n      @retry=\"ready.retry\"\n    />\n  </Transition>\n\n  <CloudSaveGateModal\n    :open=\"ready.saveGate.modalOpen.value\"\n    :issues=\"ready.saveGate.blockingIssues.value\"\n    @cancel=\"ready.saveGate.cancel\"\n    @confirm=\"ready.saveGate.confirmAndSave\"\n  />\n\n  <Transition\n    enter-active-class=\"tpl:transition-all tpl:duration-200 tpl:ease-out\"\n    enter-from-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n    enter-to-class=\"tpl:translate-y-0 tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-all tpl:duration-300 tpl:ease-in\"\n    leave-from-class=\"tpl:translate-y-0 tpl:opacity-100\"\n    leave-to-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n  >\n    <CollabUndoToast\n      :visible=\"ready.collabWarning.collabUndoWarningVisible.value\"\n    />\n  </Transition>\n\n  <AiChatSidebar\n    :visible=\"cloud.panelState.aiChatOpen.value\"\n    :on-apply=\"applyContent\"\n    @close=\"cloud.panelState.aiChatOpen.value = false\"\n  />\n\n  <TemplateScoringPanel\n    :visible=\"cloud.panelState.scoringPanelOpen.value\"\n    @close=\"cloud.panelState.scoringPanelOpen.value = false\"\n  />\n\n  <DesignReferenceSidebar\n    :visible=\"cloud.panelState.designReferenceOpen.value\"\n    :has-existing-blocks=\"editor.content.value.blocks.length > 0\"\n    @close=\"cloud.panelState.designReferenceOpen.value = false\"\n    @apply=\"applyContent\"\n  />\n\n  <!-- `auth-manager` / `project-id` / `plan-config` are props, not injections.\n       An injection would have to match the modal's key identity; a mismatch\n       arrives as `undefined` with no error and the browser opens inert. -->\n  <MediaLibraryModal\n    :visible=\"cloud.panelState.mediaLibraryOpen.value\"\n    :accept=\"cloud.panelState.mediaLibraryAccept.value\"\n    :popover-target=\"core.popoverRoot.value\"\n    :locale=\"locale\"\n    :ui-theme=\"core.resolvedTheme.value\"\n    :auth-manager=\"cloud.mediaBrowser.authManager\"\n    :project-id=\"cloud.mediaBrowser.projectId\"\n    :plan-config=\"cloud.mediaBrowser.planConfig\"\n    @select=\"cloud.mediaLib.handleMediaSelect\"\n    @close=\"cloud.mediaLib.handleMediaLibraryClose\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport { defineAsyncComponent } from \"vue\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport type { UseEditorReturn } from \"@templatical/core\";\n\nimport type { UseEditorCoreReturn } from \"../../composables/useEditorCore\";\nimport type { CloudAttachment, CloudReady, CloudRuntime } from \"../runtime\";\n\nimport CloudErrorOverlay from \"./CloudErrorOverlay.vue\";\nimport CloudLoadingOverlay from \"./CloudLoadingOverlay.vue\";\nimport CloudSaveGateModal from \"./CloudSaveGateModal.vue\";\nimport CollabUndoToast from \"./CollabUndoToast.vue\";\n\nconst AiChatSidebar = defineAsyncComponent(() => import(\"./AiChatSidebar.vue\"));\nconst DesignReferenceSidebar = defineAsyncComponent(\n  () => import(\"./DesignReferenceSidebar.vue\"),\n);\nconst TemplateScoringPanel = defineAsyncComponent(\n  () => import(\"./TemplateScoringPanel.vue\"),\n);\nconst MediaLibraryModal = defineAsyncComponent(async () => {\n  // try/catch downgrades Webpack's \"Module not found\" from error to warning\n  // when the optional peer isn't installed. Cloud consumers always install it.\n  try {\n    const m = await import(\"@templatical/media-library\");\n    return m.MediaLibraryModal;\n  } catch {\n    throw new Error(\n      \"[Templatical] Cloud media library requires the optional peer dependency '@templatical/media-library'. Please install it.\",\n    );\n  }\n});\n\n/**\n * Every piece of Cloud chrome that renders outside the header.\n *\n * `Editor.vue` mounts this behind one lazy `defineAsyncComponent` gated on a\n * cloud runtime being present, so an OSS consumer downloads none of it — the\n * `SavedBlocksPanels` / `TestEmailPanel` pattern.\n *\n * The overlays live here rather than in the shared editor deliberately: `init()`\n * cannot fail after it mounts, and OSS should not grow the ability.\n *\n * The comments sidebar is deliberately not here: it is shared, as `CommentsPanel`\n * in `Editor.vue` over a `CommentsProvider`. Its filter target lives on the shared\n * feature rather than being relayed through this component, so it survives the\n * lazy panel's mount without a runtime hop.\n */\nconst props = defineProps<{\n  editor: UseEditorReturn;\n  core: UseEditorCoreReturn;\n  runtime: CloudRuntime;\n  cloud: CloudAttachment;\n  ready: CloudReady;\n  /**\n   * The editor's `init({ locale })`, forwarded to `MediaLibraryModal` so\n   * `@templatical/media-library` loads its own strings in the same language.\n   * A locale rather than translations: that package owns its copy, and the\n   * editor's own chunk carries none of it.\n   */\n  locale?: string;\n}>();\n\nfunction applyContent(content: TemplateContent): void {\n  props.core.history.record();\n  props.editor.setContent(content);\n  props.core.conditionPreview.reset();\n}\n</script>\n\n<template>\n  <!-- A template create / load in flight. Cloud reads its content from the\n       server, so there is a real gap where the canvas shows the wrong thing. -->\n  <Transition\n    enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n    enter-from-class=\"tpl:opacity-100\"\n    enter-to-class=\"tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n    leave-from-class=\"tpl:opacity-100\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <CloudLoadingOverlay :visible=\"editor.state.isLoading\" />\n  </Transition>\n\n  <!-- Session failure — an auth refresh that could not renew the token. The\n       *bootstrap* has no overlay any more: it runs before the mount, so a\n       failure there rejects `initCloud()` instead of mounting a dead editor. -->\n  <Transition\n    enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n    enter-from-class=\"tpl:opacity-0\"\n    enter-to-class=\"tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n    leave-from-class=\"tpl:opacity-100\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <CloudErrorOverlay\n      :error=\"ready.sessionError.value\"\n      :visible=\"!!ready.sessionError.value\"\n      @retry=\"ready.retry\"\n    />\n  </Transition>\n\n  <CloudSaveGateModal\n    :open=\"ready.saveGate.modalOpen.value\"\n    :issues=\"ready.saveGate.blockingIssues.value\"\n    @cancel=\"ready.saveGate.cancel\"\n    @confirm=\"ready.saveGate.confirmAndSave\"\n  />\n\n  <Transition\n    enter-active-class=\"tpl:transition-all tpl:duration-200 tpl:ease-out\"\n    enter-from-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n    enter-to-class=\"tpl:translate-y-0 tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-all tpl:duration-300 tpl:ease-in\"\n    leave-from-class=\"tpl:translate-y-0 tpl:opacity-100\"\n    leave-to-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n  >\n    <CollabUndoToast\n      :visible=\"ready.collabWarning.collabUndoWarningVisible.value\"\n    />\n  </Transition>\n\n  <AiChatSidebar\n    :visible=\"cloud.panelState.aiChatOpen.value\"\n    :on-apply=\"applyContent\"\n    @close=\"cloud.panelState.aiChatOpen.value = false\"\n  />\n\n  <TemplateScoringPanel\n    :visible=\"cloud.panelState.scoringPanelOpen.value\"\n    @close=\"cloud.panelState.scoringPanelOpen.value = false\"\n  />\n\n  <DesignReferenceSidebar\n    :visible=\"cloud.panelState.designReferenceOpen.value\"\n    :has-existing-blocks=\"editor.content.value.blocks.length > 0\"\n    @close=\"cloud.panelState.designReferenceOpen.value = false\"\n    @apply=\"applyContent\"\n  />\n\n  <!-- `auth-manager` / `project-id` / `plan-config` are props, not injections.\n       An injection would have to match the modal's key identity; a mismatch\n       arrives as `undefined` with no error and the browser opens inert. -->\n  <MediaLibraryModal\n    :visible=\"cloud.panelState.mediaLibraryOpen.value\"\n    :accept=\"cloud.panelState.mediaLibraryAccept.value\"\n    :popover-target=\"core.popoverRoot.value\"\n    :locale=\"locale\"\n    :ui-theme=\"core.resolvedTheme.value\"\n    :auth-manager=\"cloud.mediaBrowser.authManager\"\n    :project-id=\"cloud.mediaBrowser.projectId\"\n    :plan-config=\"cloud.mediaBrowser.planConfig\"\n    @select=\"cloud.mediaLib.handleMediaSelect\"\n    @close=\"cloud.mediaLib.handleMediaLibraryClose\"\n  />\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/RestoreVersionDialog-DYI-M27i.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RestoreVersionDialog-DYI-M27i.js","names":[],"sources":["../../../src/components/RestoreVersionDialog.vue","../../../src/components/RestoreVersionDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  dangerBtnClass,\n  primaryBtnClass,\n  secondaryBtnClass,\n} from \"../constants/styleConstants\";\n/**\n * Confirms a restore that would discard unsaved work.\n *\n * It exists because `confirmRestore()` throws away the pre-preview backup: once\n * a restore lands, anything the user had not saved exists nowhere. The editor\n * does not record a version to cover that — it never authors versions — so the\n * protection is a question asked at the moment of loss, with the option to put\n * the work somewhere real first.\n *\n * `canSave` decides which of the two shapes renders: an offer to save first, or\n * a plain warning when the templates provider withheld `save` (or there is no\n * templates provider at all), because there is then nowhere to put the work.\n */\nimport { AlertTriangle, LoaderCircle } from \"@lucide/vue\";\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables/useI18n\";\n\ndefineProps<{\n  visible: boolean;\n  /** Whether \"save first\" can be offered rather than only a warning. */\n  canSave: boolean;\n  /** True while either action is in flight — both buttons go inert. */\n  isBusy: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"save-and-restore\"): void;\n  (e: \"discard-and-restore\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"emit('cancel')\">\n    <div\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isBusy\"\n      aria-labelledby=\"tpl-restore-version-title\"\n      aria-describedby=\"tpl-restore-version-body\"\n      data-testid=\"restore-version-dialog\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-md tpl:flex-col tpl:gap-4 tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n        <AlertTriangle\n          :size=\"18\"\n          :stroke-width=\"2\"\n          class=\"tpl:text-[var(--tpl-warning)]\"\n        />\n        <h3\n          id=\"tpl-restore-version-title\"\n          class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ t.versionPreview.restoreConfirm.title }}\n        </h3>\n      </div>\n\n      <p\n        id=\"tpl-restore-version-body\"\n        class=\"tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n      >\n        {{\n          canSave\n            ? t.versionPreview.restoreConfirm.unsavedWithSave\n            : t.versionPreview.restoreConfirm.unsavedNoSave\n        }}\n      </p>\n\n      <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"restore-version-cancel\"\n          :class=\"secondaryBtnClass\"\n          :disabled=\"isBusy\"\n          @click=\"emit('cancel')\"\n        >\n          {{ t.versionPreview.restoreConfirm.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"restore-version-discard\"\n          :class=\"dangerBtnClass\"\n          :disabled=\"isBusy\"\n          @click=\"emit('discard-and-restore')\"\n        >\n          {{ t.versionPreview.restoreConfirm.restoreAnyway }}\n        </button>\n        <!-- Only rendered when there is somewhere to save to: an action the\n             editor cannot perform should not look like one you could take. -->\n        <button\n          v-if=\"canSave\"\n          type=\"button\"\n          data-testid=\"restore-version-save-first\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"isBusy\"\n          @click=\"emit('save-and-restore')\"\n        >\n          <LoaderCircle\n            v-if=\"isBusy\"\n            class=\"tpl:animate-spin\"\n            :size=\"12\"\n            :stroke-width=\"2\"\n          />\n          {{ t.versionPreview.restoreConfirm.saveAndRestore }}\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  dangerBtnClass,\n  primaryBtnClass,\n  secondaryBtnClass,\n} from \"../constants/styleConstants\";\n/**\n * Confirms a restore that would discard unsaved work.\n *\n * It exists because `confirmRestore()` throws away the pre-preview backup: once\n * a restore lands, anything the user had not saved exists nowhere. The editor\n * does not record a version to cover that — it never authors versions — so the\n * protection is a question asked at the moment of loss, with the option to put\n * the work somewhere real first.\n *\n * `canSave` decides which of the two shapes renders: an offer to save first, or\n * a plain warning when the templates provider withheld `save` (or there is no\n * templates provider at all), because there is then nowhere to put the work.\n */\nimport { AlertTriangle, LoaderCircle } from \"@lucide/vue\";\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../composables/useI18n\";\n\ndefineProps<{\n  visible: boolean;\n  /** Whether \"save first\" can be offered rather than only a warning. */\n  canSave: boolean;\n  /** True while either action is in flight — both buttons go inert. */\n  isBusy: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"save-and-restore\"): void;\n  (e: \"discard-and-restore\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"emit('cancel')\">\n    <div\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isBusy\"\n      aria-labelledby=\"tpl-restore-version-title\"\n      aria-describedby=\"tpl-restore-version-body\"\n      data-testid=\"restore-version-dialog\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-md tpl:flex-col tpl:gap-4 tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n        <AlertTriangle\n          :size=\"18\"\n          :stroke-width=\"2\"\n          class=\"tpl:text-[var(--tpl-warning)]\"\n        />\n        <h3\n          id=\"tpl-restore-version-title\"\n          class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ t.versionPreview.restoreConfirm.title }}\n        </h3>\n      </div>\n\n      <p\n        id=\"tpl-restore-version-body\"\n        class=\"tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n      >\n        {{\n          canSave\n            ? t.versionPreview.restoreConfirm.unsavedWithSave\n            : t.versionPreview.restoreConfirm.unsavedNoSave\n        }}\n      </p>\n\n      <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"restore-version-cancel\"\n          :class=\"secondaryBtnClass\"\n          :disabled=\"isBusy\"\n          @click=\"emit('cancel')\"\n        >\n          {{ t.versionPreview.restoreConfirm.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"restore-version-discard\"\n          :class=\"dangerBtnClass\"\n          :disabled=\"isBusy\"\n          @click=\"emit('discard-and-restore')\"\n        >\n          {{ t.versionPreview.restoreConfirm.restoreAnyway }}\n        </button>\n        <!-- Only rendered when there is somewhere to save to: an action the\n             editor cannot perform should not look like one you could take. -->\n        <button\n          v-if=\"canSave\"\n          type=\"button\"\n          data-testid=\"restore-version-save-first\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"isBusy\"\n          @click=\"emit('save-and-restore')\"\n        >\n          <LoaderCircle\n            v-if=\"isBusy\"\n            class=\"tpl:animate-spin\"\n            :size=\"12\"\n            :stroke-width=\"2\"\n          />\n          {{ t.versionPreview.restoreConfirm.saveAndRestore }}\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,IAAM,IAAO,GAMP,EAAE,SAAM,EAAQ;oBAIpB,EAAA,GAAA,EA8EW,GAAA;GA9EA,SAAS,EAAA;GAAU,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,QAAA;;GACvC,SAAA,QA4EM,CA5EN,EA4EM,OAAA;IA3EJ,MAAK;IACL,cAAW;IACV,aAAW,EAAA;IACZ,mBAAgB;IAChB,oBAAiB;IACjB,eAAY;IACZ,OAAM;IACN,OAAA;KAAA,oBAAA;KAAA,cAAA;IAAA;;IAKA,EAYM,OAZN,GAYM,CAXJ,EAIE,EAAA,CAAA,GAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;IAER,CAAA,GAAA,EAKK,MALL,GAKK,EADA,EAAA,CAAA,CAAC,CAAC,eAAe,eAAe,KAAK,GAAA,CAAA,CAAA,CAAA;IAI5C,EASI,KATJ,GASI,EAJA,EAAA,UAAsB,EAAA,CAAA,CAAC,CAAC,eAAe,eAAe,kBAA8B,EAAA,CAAA,CAAC,CAAC,eAAe,eAAe,aAAa,GAAA,CAAA;IAMrI,EAqCM,OArCN,GAqCM;KApCJ,EAQS,UAAA;MAPP,MAAK;MACL,eAAY;MACX,OAAK,EAAE,EAAA,CAAA,CAAiB;MACxB,UAAU,EAAA;MACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,QAAA;KAET,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,eAAe,eAAe,MAAM,GAAA,IAAA,CAAA;KAE3C,EAQS,UAAA;MAPP,MAAK;MACL,eAAY;MACX,OAAK,EAAE,EAAA,CAAA,CAAc;MACrB,UAAU,EAAA;MACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,qBAAA;KAET,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,eAAe,eAAe,aAAa,GAAA,IAAA,CAAA;KAK1C,EAAA,WADR,EAAA,GAAA,EAeS,UAAA;;MAbP,MAAK;MACL,eAAY;MACX,OAAK,EAAE,EAAA,CAAA,CAAe;MACtB,UAAU,EAAA;MACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,kBAAA;KAGJ,GAAA,CAAA,EAAA,UADR,EAAA,GAAA,EAKE,EAAA,CAAA,GAAA;;MAHA,OAAM;MACL,MAAM;MACN,gBAAc;KACf,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAA,MACF,EAAG,EAAA,CAAA,CAAC,CAAC,eAAe,eAAe,cAAc,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"TestEmailModal-CnoOTm5c.js","names":[],"sources":["../../../src/utils/validateEmailShape.ts","../../../src/components/TestEmailModal.vue","../../../src/components/TestEmailModal.vue"],"sourcesContent":["/**\n * Characters that cannot appear in a domain but routinely arrive attached to one.\n *\n * A **denylist**, not an allowlist, so unicode domains keep working — an\n * allowlist of `[a-z0-9.-]` would be the stricter, more obviously \"correct\"\n * choice and would reject them. What this actually targets is the punctuation\n * that comes from pasting out of a list or a mail client: `user@example.com,`\n * and `<user@example.com>`.\n */\nconst IMPOSSIBLE_DOMAIN_CHARS = /[,;<>()[\\]\\\\\"'`|/?#@!$%^&*+=~{}]/;\n\n/**\n * Does this string look like an email address?\n *\n * Deliberately loose: non-empty, no whitespace, exactly one `@`, a non-empty\n * local part, and a domain containing a dot with something either side and no\n * impossible characters. That is enough to catch the mistakes a typo actually\n * produces — a missing `@`, a trailing comma, a half-typed domain — before the\n * user pays for a round-trip.\n *\n * **Do not \"improve\" this into an RFC-ish regex.** Those reliably reject valid\n * addresses (plus-addressing, long new gTLDs, unicode domains) and the resulting\n * bug reports cost far more than the malformed addresses they catch. Only the\n * receiving mail server can really tell, and the sending backend has to validate\n * anyway — this is a fast-feedback affordance, not a gate. `validateEmailShape`\n * has its own test file pinning the addresses that must keep passing.\n */\nexport function looksLikeEmail(value: string): boolean {\n  const trimmed = value.trim();\n  if (trimmed.length === 0) return false;\n  if (/\\s/.test(trimmed)) return false;\n\n  const parts = trimmed.split(\"@\");\n  if (parts.length !== 2) return false;\n\n  const [local, domain] = parts;\n  if (local.length === 0) return false;\n  if (IMPOSSIBLE_DOMAIN_CHARS.test(domain)) return false;\n\n  // A dot with at least one character either side, so `a@b` and `a@b.` fail but\n  // `a@b.c` and `a@sub.example.museum` pass.\n  const dot = domain.indexOf(\".\");\n  return dot > 0 && dot < domain.length - 1;\n}\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n *   for BYO senders; Cloud never takes it, because its list comes from a signed\n *   JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n *   version; there is nothing to choose, so offering an editable field would\n *   imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport { hasMergeTagSamples, type ViewportSize } from \"@templatical/types\";\nimport {\n  EDITOR_KEY,\n  MERGE_TAGS_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /** Omitted / undefined means unrestricted, so the field accepts free text. */\n  allowedRecipients?: string[];\n  defaultRecipient?: string;\n  isSending: boolean;\n  justSent: boolean;\n  error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n  resolvePreview: resolvePreviewHook ?? undefined,\n  getContent: () =>\n    editor?.content.value ?? { blocks: [], settings: {} as never },\n  isActive: () => props.visible,\n  getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(hasMergeTagSamples(inject(MERGE_TAGS_KEY, [])));\nconst sampleMode = computed({\n  get: () =>\n    // Off entirely while a resolver is configured — same rule as the canvas.\n    previewResolution.isConfigured\n      ? false\n      : (sharedSampleMode?.value ?? localSampleMode.value),\n  set: (on: boolean) => {\n    if (sharedSampleMode) sharedSampleMode.value = on;\n    else localSampleMode.value = on;\n  },\n});\n\nconst previewBlocks = computed(\n  () => previewResolution.content.value.blocks ?? [],\n);\n\nconst hasAllowlist = computed(\n  () =>\n    props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible) return;\n    recipient.value =\n      props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n  },\n  { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n  hasAllowlist.value\n    ? recipient.value.length > 0\n    : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n  () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n  () =>\n    !hasAllowlist.value &&\n    recipient.value.trim().length > 0 &&\n    !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n  if (!props.error) return null;\n  return props.error.kind === \"provider\"\n    ? props.error.message\n    : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n  if (!canSend.value) return;\n  emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n  // Sending is the one state that blocks dismissal; the success state closes\n  // immediately rather than making the user wait out the timer.\n  if (props.isSending) return;\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Grows to `max-w-2xl` only while the preview is open, so a 600px email\n         renders at roughly true size — the same reason SaveBlockDialog picked\n         that width. Collapsed, it stays the compact form it was. `max-h-[90vh]`\n         with a `min-h-0 overflow-y-auto` preview region is the pattern the\n         saved-blocks dialogs use: `min-h-0` is what lets a flex child shrink\n         below its content and actually scroll. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSending\"\n      aria-labelledby=\"tpl-test-email-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:flex tpl:max-h-[90vh] tpl:w-full tpl:max-w-2xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-test-email-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-test-email-recipient\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.testEmail.recipientLabel }}\n        </label>\n\n        <!-- Exactly one allowed address: nothing to choose. -->\n        <input\n          v-if=\"isSingleRecipient\"\n          id=\"tpl-test-email-recipient\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <!-- Several allowed addresses: pick one. -->\n        <select\n          v-else-if=\"hasAllowlist\"\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        >\n          <option\n            v-for=\"email in allowedRecipients\"\n            :key=\"email\"\n            :value=\"email\"\n          >\n            {{ email }}\n          </option>\n        </select>\n\n        <!-- No allowlist: free text. -->\n        <input\n          v-else\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          type=\"email\"\n          autocomplete=\"email\"\n          spellcheck=\"false\"\n          :placeholder=\"t.testEmail.recipientPlaceholder\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <p\n          v-if=\"showShapeHint\"\n          class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ t.testEmail.invalidAddress }}\n        </p>\n      </div>\n\n      <!-- Preview header: a label plus the viewport switch. Always shown — the\n           preview is part of the dialog rather than something to opt into. -->\n      <div class=\"tpl:mb-2 tpl:shrink-0\">\n        <!-- Two segmented controls: `flex-wrap` so they drop to their own row\n             rather than crushing the label on a narrow viewport. -->\n        <div\n          class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n        >\n          <span\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ t.testEmail.preview }}\n          </span>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <MergeTagModeToggle\n              v-if=\"!previewResolution.supersedesSamples.value\"\n              :sample-mode=\"sampleMode\"\n              @change=\"sampleMode = $event\"\n            />\n\n            <!-- Without this the preview would silently show only the desktop\n                 variant of any responsive block. -->\n            <ViewportToggle\n              :viewport=\"previewViewport\"\n              @change=\"previewViewport = $event\"\n            />\n          </div>\n        </div>\n\n        <!-- The hint has to follow the mode: \"shown unresolved\" is simply false\n             once every tag renders a realistic value. -->\n        <p\n          data-testid=\"test-email-preview-hint\"\n          class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{\n            previewResolution.supersedesSamples.value\n              ? t.previewResolution.hint\n              : sampleMode\n                ? t.testEmail.previewHintSample\n                : t.testEmail.previewHint\n          }}\n        </p>\n      </div>\n\n      <!-- The one region allowed to grow: `flex-1 min-h-0` so it absorbs the\n           remaining height and scrolls, leaving the form and actions fixed. -->\n      <div\n        id=\"tpl-test-email-preview\"\n        data-testid=\"test-email-preview\"\n        class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <!-- Skeleton while a *first* resolve is outstanding, so the dialog never\n             flashes the unresolved template before the resolved one. Sized like\n             the frame it replaces to avoid a layout jump. A re-resolve (recipient\n             change) keeps the previous result instead — `isInitialResolve`. -->\n        <div\n          v-if=\"previewResolution.isInitialResolve.value\"\n          role=\"status\"\n          aria-busy=\"true\"\n          data-testid=\"preview-resolution-loading\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n        >\n          <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n          <div\n            v-for=\"n in 3\"\n            :key=\"n\"\n            aria-hidden=\"true\"\n            class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n          ></div>\n        </div>\n\n        <!-- Resolution failed: the unresolved template renders below, so the\n             dialog degrades rather than showing an empty frame. -->\n        <p\n          v-else-if=\"previewResolution.hasFailed.value\"\n          role=\"status\"\n          data-testid=\"preview-resolution-failed\"\n          class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n        >\n          {{ t.previewResolution.failed }}\n        </p>\n\n        <BlockPreviewCanvas\n          v-if=\"!previewResolution.isInitialResolve.value\"\n          :blocks=\"previewBlocks\"\n          :viewport=\"previewViewport\"\n          :apply-condition-filter=\"!previewResolution.isConfigured\"\n        />\n      </div>\n\n      <!-- Success. Announced politely; the dialog closes itself shortly after. -->\n      <p\n        v-if=\"justSent\"\n        role=\"status\"\n        data-testid=\"test-email-success\"\n        class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n      >\n        <Check :size=\"13\" :stroke-width=\"2.5\" />\n        {{ t.testEmail.success }}\n      </p>\n\n      <!-- Failure. Stays open so the user can retry. -->\n      <p\n        v-else-if=\"errorText\"\n        role=\"alert\"\n        data-testid=\"test-email-error\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ errorText }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"test-email-cancel\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n          @click=\"handleClose\"\n        >\n          {{ t.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"test-email-send\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"!canSend\"\n          @click=\"handleSend\"\n        >\n          <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ t.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ t.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n *   for BYO senders; Cloud never takes it, because its list comes from a signed\n *   JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n *   version; there is nothing to choose, so offering an editable field would\n *   imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport { hasMergeTagSamples, type ViewportSize } from \"@templatical/types\";\nimport {\n  EDITOR_KEY,\n  MERGE_TAGS_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /** Omitted / undefined means unrestricted, so the field accepts free text. */\n  allowedRecipients?: string[];\n  defaultRecipient?: string;\n  isSending: boolean;\n  justSent: boolean;\n  error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n  resolvePreview: resolvePreviewHook ?? undefined,\n  getContent: () =>\n    editor?.content.value ?? { blocks: [], settings: {} as never },\n  isActive: () => props.visible,\n  getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(hasMergeTagSamples(inject(MERGE_TAGS_KEY, [])));\nconst sampleMode = computed({\n  get: () =>\n    // Off entirely while a resolver is configured — same rule as the canvas.\n    previewResolution.isConfigured\n      ? false\n      : (sharedSampleMode?.value ?? localSampleMode.value),\n  set: (on: boolean) => {\n    if (sharedSampleMode) sharedSampleMode.value = on;\n    else localSampleMode.value = on;\n  },\n});\n\nconst previewBlocks = computed(\n  () => previewResolution.content.value.blocks ?? [],\n);\n\nconst hasAllowlist = computed(\n  () =>\n    props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible) return;\n    recipient.value =\n      props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n  },\n  { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n  hasAllowlist.value\n    ? recipient.value.length > 0\n    : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n  () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n  () =>\n    !hasAllowlist.value &&\n    recipient.value.trim().length > 0 &&\n    !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n  if (!props.error) return null;\n  return props.error.kind === \"provider\"\n    ? props.error.message\n    : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n  if (!canSend.value) return;\n  emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n  // Sending is the one state that blocks dismissal; the success state closes\n  // immediately rather than making the user wait out the timer.\n  if (props.isSending) return;\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Grows to `max-w-2xl` only while the preview is open, so a 600px email\n         renders at roughly true size — the same reason SaveBlockDialog picked\n         that width. Collapsed, it stays the compact form it was. `max-h-[90vh]`\n         with a `min-h-0 overflow-y-auto` preview region is the pattern the\n         saved-blocks dialogs use: `min-h-0` is what lets a flex child shrink\n         below its content and actually scroll. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSending\"\n      aria-labelledby=\"tpl-test-email-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:flex tpl:max-h-[90vh] tpl:w-full tpl:max-w-2xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-test-email-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-test-email-recipient\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.testEmail.recipientLabel }}\n        </label>\n\n        <!-- Exactly one allowed address: nothing to choose. -->\n        <input\n          v-if=\"isSingleRecipient\"\n          id=\"tpl-test-email-recipient\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <!-- Several allowed addresses: pick one. -->\n        <select\n          v-else-if=\"hasAllowlist\"\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        >\n          <option\n            v-for=\"email in allowedRecipients\"\n            :key=\"email\"\n            :value=\"email\"\n          >\n            {{ email }}\n          </option>\n        </select>\n\n        <!-- No allowlist: free text. -->\n        <input\n          v-else\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          type=\"email\"\n          autocomplete=\"email\"\n          spellcheck=\"false\"\n          :placeholder=\"t.testEmail.recipientPlaceholder\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <p\n          v-if=\"showShapeHint\"\n          class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ t.testEmail.invalidAddress }}\n        </p>\n      </div>\n\n      <!-- Preview header: a label plus the viewport switch. Always shown — the\n           preview is part of the dialog rather than something to opt into. -->\n      <div class=\"tpl:mb-2 tpl:shrink-0\">\n        <!-- Two segmented controls: `flex-wrap` so they drop to their own row\n             rather than crushing the label on a narrow viewport. -->\n        <div\n          class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n        >\n          <span\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ t.testEmail.preview }}\n          </span>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <MergeTagModeToggle\n              v-if=\"!previewResolution.supersedesSamples.value\"\n              :sample-mode=\"sampleMode\"\n              @change=\"sampleMode = $event\"\n            />\n\n            <!-- Without this the preview would silently show only the desktop\n                 variant of any responsive block. -->\n            <ViewportToggle\n              :viewport=\"previewViewport\"\n              @change=\"previewViewport = $event\"\n            />\n          </div>\n        </div>\n\n        <!-- The hint has to follow the mode: \"shown unresolved\" is simply false\n             once every tag renders a realistic value. -->\n        <p\n          data-testid=\"test-email-preview-hint\"\n          class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{\n            previewResolution.supersedesSamples.value\n              ? t.previewResolution.hint\n              : sampleMode\n                ? t.testEmail.previewHintSample\n                : t.testEmail.previewHint\n          }}\n        </p>\n      </div>\n\n      <!-- The one region allowed to grow: `flex-1 min-h-0` so it absorbs the\n           remaining height and scrolls, leaving the form and actions fixed. -->\n      <div\n        id=\"tpl-test-email-preview\"\n        data-testid=\"test-email-preview\"\n        class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <!-- Skeleton while a *first* resolve is outstanding, so the dialog never\n             flashes the unresolved template before the resolved one. Sized like\n             the frame it replaces to avoid a layout jump. A re-resolve (recipient\n             change) keeps the previous result instead — `isInitialResolve`. -->\n        <div\n          v-if=\"previewResolution.isInitialResolve.value\"\n          role=\"status\"\n          aria-busy=\"true\"\n          data-testid=\"preview-resolution-loading\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n        >\n          <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n          <div\n            v-for=\"n in 3\"\n            :key=\"n\"\n            aria-hidden=\"true\"\n            class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n          ></div>\n        </div>\n\n        <!-- Resolution failed: the unresolved template renders below, so the\n             dialog degrades rather than showing an empty frame. -->\n        <p\n          v-else-if=\"previewResolution.hasFailed.value\"\n          role=\"status\"\n          data-testid=\"preview-resolution-failed\"\n          class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n        >\n          {{ t.previewResolution.failed }}\n        </p>\n\n        <BlockPreviewCanvas\n          v-if=\"!previewResolution.isInitialResolve.value\"\n          :blocks=\"previewBlocks\"\n          :viewport=\"previewViewport\"\n          :apply-condition-filter=\"!previewResolution.isConfigured\"\n        />\n      </div>\n\n      <!-- Success. Announced politely; the dialog closes itself shortly after. -->\n      <p\n        v-if=\"justSent\"\n        role=\"status\"\n        data-testid=\"test-email-success\"\n        class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n      >\n        <Check :size=\"13\" :stroke-width=\"2.5\" />\n        {{ t.testEmail.success }}\n      </p>\n\n      <!-- Failure. Stays open so the user can retry. -->\n      <p\n        v-else-if=\"errorText\"\n        role=\"alert\"\n        data-testid=\"test-email-error\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ errorText }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"test-email-cancel\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n          @click=\"handleClose\"\n        >\n          {{ t.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"test-email-send\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"!canSend\"\n          @click=\"handleSend\"\n        >\n          <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ t.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ t.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":";;;;;;;;;;;AASA,IAAM,IAA0B;AAkBhC,SAAgB,GAAe,GAAwB;CACrD,IAAM,IAAU,EAAM,KAAK;CAE3B,IADI,EAAQ,WAAW,KACnB,KAAK,KAAK,CAAO,GAAG,OAAO;CAE/B,IAAM,IAAQ,EAAQ,MAAM,GAAG;CAC/B,IAAI,EAAM,WAAW,GAAG,OAAO;CAE/B,IAAM,CAAC,GAAO,KAAU;CAExB,IADI,EAAM,WAAW,KACjB,EAAwB,KAAK,CAAM,GAAG,OAAO;CAIjD,IAAM,IAAM,EAAO,QAAQ,GAAG;CAC9B,OAAO,IAAM,KAAK,IAAM,EAAO,SAAS;AAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECCA,IAAM,IAAQ,GAUR,IAAO,GAKP,EAAE,SAAM,GAAQ,GAChB,KAAS,EAAO,IAAY,IAAI,GAEhC,IAAY,EAAI,EAAE,GAElB,IAAkB,EAAkB,SAAS,GAQ7C,KAAqB,EAAO,IAAqB,KAAA,CAAS,GAC1D,IAAoB,EAAqB;GAC7C,gBAAgB,MAAsB,KAAA;GACtC,kBACE,IAAQ,QAAQ,SAAS;IAAE,QAAQ,CAAC;IAAG,UAAU,CAAC;GAAW;GAC/D,gBAAgB,EAAM;GACtB,oBAAoB,EAAU,SAAS,KAAA;EACzC,CAAC,GAOK,IAAmB,EAAO,IAA2B,IAAI,GAKzD,IAAkB,EAAI,GAAmB,EAAO,IAAgB,CAAC,CAAC,CAAC,CAAC,GACpE,IAAa,EAAS;GAC1B,WAEE,EAAkB,eACd,KACC,GAAkB,SAAS,EAAgB;GAClD,MAAM,MAAgB;IACpB,AAAI,IAAkB,EAAiB,QAAQ,IAC1C,EAAgB,QAAQ;GAC/B;EACF,CAAC,GAEK,KAAgB,QACd,EAAkB,QAAQ,MAAM,UAAU,CAAC,CACnD,GAEM,IAAe,QAEjB,EAAM,sBAAsB,KAAA,KAAa,EAAM,kBAAkB,SAAS,CAC9E,GACM,KAAoB,QAAe,EAAM,mBAAmB,WAAW,CAAC;EAK9E,QACQ,EAAM,UACX,MAAY;GACN,MACL,EAAU,QACR,EAAM,oBAAoB,EAAM,oBAAoB,MAAM;EAC9D,GACA,EAAE,WAAW,GAAK,CACpB;EAGA,IAAM,IAAmB,QACvB,EAAa,QACT,EAAU,MAAM,SAAS,IACzB,GAAe,EAAU,KAAK,CACpC,GAEM,IAAU,QACR,EAAiB,SAAS,CAAC,EAAM,aAAa,CAAC,EAAM,QAC7D,GAGM,KAAgB,QAElB,CAAC,EAAa,SACd,EAAU,MAAM,KAAK,CAAC,CAAC,SAAS,KAChC,CAAC,EAAiB,KACtB,GAEM,IAAY,QACX,EAAM,QACJ,EAAM,MAAM,SAAS,aACxB,EAAM,MAAM,UACZ,EAAE,UAAU,sBAHS,IAI1B;EAED,SAAS,IAAmB;GACrB,EAAQ,SACb,EAAK,QAAQ,EAAU,MAAM,KAAK,CAAC;EACrC;EAEA,SAAS,IAAoB;GAGvB,EAAM,aACV,EAAK,OAAO;EACd;EAEA,SAAS,GAAc,GAA4B;GAKjD,AAJI,EAAM,QAAQ,WAAW,CAAC,EAAM,aAClC,EAAM,eAAe,GACrB,EAAW,IAET,EAAM,QAAQ,YAChB,EAAY;EAEhB;oBAIE,EAAA,GAAA,EAuOW,IAAA;GAvOA,SAAS,EAAA;GAAU,SAAO;GAAc,WAAS;;GAO1D,SAAA,QA+NM,CA/NN,EA+NM,OAAA;IA9NJ,MAAK;IACL,cAAW;IACV,aAAW,EAAA;IACZ,mBAAgB;IAChB,OAAM;IACN,OAAA;KAAA,oBAAA;KAAA,cAAA;IAAA;;IAKA,EAKK,MALL,GAKK,EADA,EAAA,CAAA,CAAC,CAAC,UAAU,KAAK,GAAA,CAAA;IAItB,EAyDM,OAzDN,GAyDM;KAxDJ,EAKQ,SALR,GAKQ,EADH,EAAA,CAAA,CAAC,CAAC,UAAU,cAAc,GAAA,CAAA;KAKvB,GAAA,SADR,EAAA,GAAA,EAQE,SAAA;;MANA,IAAG;MACH,MAAK;MACJ,OAAO,EAAA;MACR,UAAA;MACA,eAAY;MACZ,OAAM;KAKK,GAAA,MAAA,GAAA,CAAA,KAAA,EAAA,QADb,GAAA,EAAA,GAAA,EAeS,UAAA;;MAbP,IAAG;MACM,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAS,QAAA;MACjB,UAAU,EAAA,aAAa,EAAA;MACxB,eAAY;MACZ,OAAM;KAEN,GAAA,EAAA,EAAA,EAAA,GAAA,EAMS,GAAA,MAAA,EALS,EAAA,oBAAT,OADT,EAAA,GAAA,EAMS,UAAA;MAJN,KAAK;MACL,OAAO;KAEL,GAAA,EAAA,CAAK,GAAA,GAAA,CAAA,EAVD,GAAA,GAAA,EAAA,GAAA,GAAA,CAAA,IAAA,CAAA,CAAA,IAAA,EAAA,KAAS,CAAA,CAAA,IAepB,GAAA,EAAA,GAAA,EAWE,SAAA;;MATA,IAAG;MACM,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAS,QAAA;MAClB,MAAK;MACL,cAAa;MACb,YAAW;MACV,aAAa,EAAA,CAAA,CAAC,CAAC,UAAU;MACzB,UAAU,EAAA,aAAa,EAAA;MACxB,eAAY;MACZ,OAAM;KAPG,GAAA,MAAA,GAAA,CAAA,IAAA,CAAA,CAAA,IAAA,EAAA,KAAS,CAAA,CAAA;KAWZ,GAAA,SADR,EAAA,GAAA,EAKI,KALJ,GAKI,EADC,EAAA,CAAA,CAAC,CAAC,UAAU,cAAc,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;IAMjC,EA0CM,OA1CN,GA0CM,CAvCJ,EAuBM,OAvBN,GAuBM,CApBJ,EAIO,QAJP,GAIO,EADF,EAAA,CAAA,CAAC,CAAC,UAAU,OAAO,GAAA,CAAA,GAGxB,EAaM,OAbN,GAaM,CAXK,EAAA,CAAA,CAAiB,CAAC,kBAAkB,QAO7C,EAAA,IAAA,EAAA,KARA,EAAA,GAAA,EAIE,IAAA;;KAFC,eAAa,EAAA;KACb,UAAM,AAAA,EAAA,QAAA,MAAE,EAAA,QAAa;IAKxB,GAAA,MAAA,GAAA,CAAA,aAAA,CAAA,IAAA,EAGE,IAAA;KAFC,UAAU,EAAA;KACV,UAAM,AAAA,EAAA,QAAA,MAAE,EAAA,QAAkB;IAOjC,GAAA,MAAA,GAAA,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAWI,KAXJ,GAWI,EANA,EAAA,CAAA,CAAiB,CAAC,kBAAkB,QAAsB,EAAA,CAAA,CAAC,CAAC,kBAAkB,OAAqB,EAAA,QAA6B,EAAA,CAAA,CAAC,CAAC,UAAU,oBAAoC,EAAA,CAAA,CAAC,CAAC,UAAU,WAAW,GAAA,CAAA,CAAA,CAAA;IAW7M,EA0CM,OA1CN,GA0CM,CAhCI,EAAA,CAAA,CAAiB,CAAC,iBAAiB,SAD3C,EAAA,GAAA,EAcM,OAdN,GAcM,CAPJ,EAAoE,QAApE,GAAoE,EAAvC,EAAA,CAAA,CAAC,CAAC,kBAAkB,SAAS,GAAA,CAAA,IAC1D,EAAA,GAAA,EAKO,GAAA,MAAA,EAJO,IAAL,MADT,EAKO,OAAA;KAHJ,KAAK;KACN,eAAY;KACZ,OAAM;MAOG,GAAA,EAAA,EAAA,CAAA,KAAA,EAAA,CAAA,CAAiB,CAAC,UAAU,SADzC,EAAA,GAAA,EAOI,KAPJ,GAOI,EADC,EAAA,CAAA,CAAC,CAAC,kBAAkB,MAAM,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAItB,EAAA,CAAA,CAAiB,CAAC,iBAAiB,qBAD5C,EAAA,GAAA,EAKE,IAAA;;KAHC,QAAQ,GAAA;KACR,UAAU,EAAA;KACV,0BAAsB,CAAG,EAAA,CAAA,CAAiB,CAAC;;;;;;IAMxC,EAAA,YADR,EAAA,GAAA,EAQI,KARJ,IAQI,CAFF,EAAwC,EAAA,EAAA,GAAA;KAAhC,MAAM;KAAK,gBAAc;IAAO,CAAA,GAAA,EAAA,MACxC,EAAG,EAAA,CAAA,CAAC,CAAC,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA,KAKX,EAAA,SADb,EAAA,GAAA,EAOI,KAPJ,IAOI,EADC,EAAA,KAAS,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAId,EA8BM,OA9BN,IA8BM,CA7BJ,EASS,UAAA;KARP,MAAK;KACL,eAAY;KACZ,OAAK,EAAA,CAAC,sOAAoO,EAAA,yCAEvL,EAAA,UAAS,CAAA,CAAA;KAD3D,UAAU,EAAA;KAEV,SAAO;IAEL,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,UAAU,MAAM,GAAA,IAAA,EAAA,GAEvB,EAkBS,UAAA;KAjBP,MAAK;KACL,eAAY;KACX,OAAK,EAAE,EAAA,EAAA,CAAe;KACtB,UAAQ,CAAG,EAAA;KACX,SAAO;IAEI,GAAA,CAAA,EAAA,aAAZ,EAAA,GAAA,EAOO,QAPP,IAOO,CANL,EAIE,EAAA,EAAA,GAAA;KAHA,OAAM;KACL,MAAM;KACN,gBAAc;IACf,CAAA,GAAA,EAAA,MACF,EAAG,EAAA,CAAA,CAAC,CAAC,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA,MAExB,EAAA,GAAA,EAEO,QAAA,IAAA,EADF,EAAA,CAAA,CAAC,CAAC,UAAU,IAAI,GAAA,CAAA,EAAA,GAAA,IAAA,EAAA,CAAA,CAAA"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"TplModal-pGADKFOL.js","names":[],"sources":["../../../src/components/TplModal.vue","../../../src/components/TplModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFocusTrap } from \"../composables\";\nimport { usePopoverRoot } from \"../composables/usePopoverRoot\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../keys\";\nimport { computed, inject, ref } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst dialogRef = ref<HTMLElement | null>(null);\nconst isVisible = computed(() => props.visible);\nuseFocusTrap(dialogRef, isVisible);\n\nconst tplUiTheme = inject(UI_THEME_KEY);\n\n// The backdrop below carries the bare `tpl` class, which re-declares every\n// `--tpl-*` token from the base `.tpl` rule. A custom property declared on an\n// element beats one inherited from an ancestor, so that re-declaration shadows\n// the consumer's `theme` config — which lives as inline styles on the editor\n// root — for this whole teleported subtree. Re-applying `themeStyles` here is\n// what restores it, and doing it on the backdrop covers every dialog rendered\n// through this wrapper rather than each one remembering to. `data-tpl-theme`\n// does the same job for the dark token block. See the invariant in\n// `tests/theme-token-scope.test.ts` (issue #487).\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst popoverRoot = usePopoverRoot();\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Escape\") {\n    emit(\"close\");\n  }\n  emit(\"keydown\", event);\n}\n</script>\n\n<template>\n  <Teleport v-if=\"popoverRoot\" :to=\"popoverRoot\">\n    <Transition\n      enter-active-class=\"tpl:transition\"\n      enter-from-class=\"tpl:opacity-0\"\n      enter-to-class=\"tpl:opacity-100\"\n      leave-active-class=\"tpl:transition tpl:duration-100\"\n      leave-from-class=\"tpl:opacity-100\"\n      leave-to-class=\"tpl:opacity-0\"\n    >\n      <div\n        v-if=\"visible\"\n        :data-tpl-theme=\"tplUiTheme\"\n        class=\"tpl tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center\"\n        style=\"\n          background-color: var(--tpl-overlay);\n          backdrop-filter: blur(8px);\n          -webkit-backdrop-filter: blur(8px);\n        \"\n        :style=\"themeStyles\"\n        @click.self=\"emit('close')\"\n        @keydown=\"handleKeydown\"\n      >\n        <div ref=\"dialogRef\">\n          <slot />\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useFocusTrap } from \"../composables\";\nimport { usePopoverRoot } from \"../composables/usePopoverRoot\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../keys\";\nimport { computed, inject, ref } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst dialogRef = ref<HTMLElement | null>(null);\nconst isVisible = computed(() => props.visible);\nuseFocusTrap(dialogRef, isVisible);\n\nconst tplUiTheme = inject(UI_THEME_KEY);\n\n// The backdrop below carries the bare `tpl` class, which re-declares every\n// `--tpl-*` token from the base `.tpl` rule. A custom property declared on an\n// element beats one inherited from an ancestor, so that re-declaration shadows\n// the consumer's `theme` config — which lives as inline styles on the editor\n// root — for this whole teleported subtree. Re-applying `themeStyles` here is\n// what restores it, and doing it on the backdrop covers every dialog rendered\n// through this wrapper rather than each one remembering to. `data-tpl-theme`\n// does the same job for the dark token block. See the invariant in\n// `tests/theme-token-scope.test.ts` (issue #487).\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst popoverRoot = usePopoverRoot();\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Escape\") {\n    emit(\"close\");\n  }\n  emit(\"keydown\", event);\n}\n</script>\n\n<template>\n  <Teleport v-if=\"popoverRoot\" :to=\"popoverRoot\">\n    <Transition\n      enter-active-class=\"tpl:transition\"\n      enter-from-class=\"tpl:opacity-0\"\n      enter-to-class=\"tpl:opacity-100\"\n      leave-active-class=\"tpl:transition tpl:duration-100\"\n      leave-from-class=\"tpl:opacity-100\"\n      leave-to-class=\"tpl:opacity-0\"\n    >\n      <div\n        v-if=\"visible\"\n        :data-tpl-theme=\"tplUiTheme\"\n        class=\"tpl tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center\"\n        style=\"\n          background-color: var(--tpl-overlay);\n          backdrop-filter: blur(8px);\n          -webkit-backdrop-filter: blur(8px);\n        \"\n        :style=\"themeStyles\"\n        @click.self=\"emit('close')\"\n        @keydown=\"handleKeydown\"\n      >\n        <div ref=\"dialogRef\">\n          <slot />\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;EAMA,IAAM,IAAQ,GAIR,IAAO,GAKP,IAAY,EAAwB,IAAI,GACxC,IAAY,QAAe,EAAM,OAAO;EAC9C,EAAa,GAAW,CAAS;EAEjC,IAAM,IAAa,EAAO,CAAY,GAWhC,IAAc,EAAO,GAAkB,IAAI,GAC3C,IAAc,EAAe;EAEnC,SAAS,EAAc,GAA4B;GAIjD,AAHI,EAAM,QAAQ,YAChB,EAAK,OAAO,GAEd,EAAK,WAAW,CAAK;EACvB;mBAIkB,EAAA,CAAA,KAAhB,EAAA,GAAA,EA2BW,GAAA;;GA3BmB,IAAI,EAAA,CAAA;EAChC,GAAA,CAAA,EAyBa,GAAA;GAxBX,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;GACf,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;;GAEf,SAAA,QAgBM,CAfE,EAAA,WADR,EAAA,GAAA,EAgBM,OAAA;;IAdH,kBAAgB,EAAA,CAAA;IACjB,OAAM;IACN,OAIC,EAAA,CAJD;KAAA,oBAAA;KAAA,mBAAA;KAAA,2BAAA;IAAA,GAKQ,EAAA,CAAA,CAAW,CAAA;IAClB,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,OAAA,GAAA,CAAA,MAAA,CAAA;IAChB,WAAS;GAEV,GAAA,CAAA,EAEM,OAAA;IAFG,SAAA;IAAJ,KAAI;GACP,GAAA,CAAA,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}