@templatical/editor 0.29.1 → 0.30.0

package/dist/cdn/chunks/{DesignReferenceSidebar-DY-laxO5.js.map → DesignReferenceSidebar-DRGqm33h.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DesignReferenceSidebar-DY-laxO5.js","names":[],"sources":["../../../src/cloud/components/DesignReferenceSidebar.vue","../../../src/cloud/components/DesignReferenceSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MAX_UPLOAD_SIZE_BYTES } from \"../../constants/timeouts\";\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport { useDesignReference } from \"@templatical/core/cloud\";\nimport { EDITOR_KEY, AUTH_MANAGER_KEY, requireInject } from \"../../keys\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  FileImage,\n  FileText,\n  ImageUp,\n  Upload,\n  X,\n} from \"@lucide/vue\";\nimport { computed, onBeforeUnmount, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  hasExistingBlocks: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"apply\", content: TemplateContent): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"DesignReferenceSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"DesignReferenceSidebar\");\n\nconst designReference = useDesignReference({\n  authManager,\n  getTemplateId: () => editor.state.template?.id ?? null,\n  onApply: (content) => emit(\"apply\", content),\n});\n\nconst fileInput = ref<HTMLInputElement | null>(null);\n\ntype SourceTab = \"image\" | \"pdf\";\n\nconst activeTab = ref<SourceTab>(\"image\");\nconst selectedFile = ref<File | null>(null);\nconst prompt = ref(\"\");\nconst filePreviewUrl = ref<string | null>(null);\nconst showConfirmation = ref(false);\nconst isDragging = ref(false);\n\nconst canGenerate = computed(() => {\n  if (designReference.isGenerating.value) {\n    return false;\n  }\n\n  return selectedFile.value !== null;\n});\n\nfunction selectTab(tab: SourceTab): void {\n  activeTab.value = tab;\n  clearFile();\n}\n\nfunction handleFileSelect(event: Event): void {\n  const input = event.target as HTMLInputElement;\n  const file = input.files?.[0];\n  if (file) {\n    setFile(file);\n  }\n  // Reset input so same file can be selected again\n  input.value = \"\";\n}\n\nfunction setFile(file: File): void {\n  // Validate file size (10MB)\n  if (file.size > MAX_UPLOAD_SIZE_BYTES) {\n    designReference.error.value = cloudT.designReference.fileTooLarge;\n    return;\n  }\n\n  // Validate file type\n  if (activeTab.value === \"image\") {\n    const validTypes = [\"image/png\", \"image/jpeg\", \"image/jpg\", \"image/webp\"];\n    if (!validTypes.includes(file.type)) {\n      designReference.error.value = cloudT.designReference.invalidFileType;\n      return;\n    }\n  } else if (activeTab.value === \"pdf\") {\n    if (file.type !== \"application/pdf\") {\n      designReference.error.value = cloudT.designReference.invalidFileType;\n      return;\n    }\n  }\n\n  selectedFile.value = file;\n  designReference.error.value = null;\n\n  // Create preview URL for images\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n  }\n  if (file.type.startsWith(\"image/\")) {\n    filePreviewUrl.value = URL.createObjectURL(file);\n  } else {\n    filePreviewUrl.value = null;\n  }\n}\n\nfunction clearFile(): void {\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n    filePreviewUrl.value = null;\n  }\n  selectedFile.value = null;\n}\n\nfunction handleDragOver(event: DragEvent): void {\n  event.preventDefault();\n  isDragging.value = true;\n}\n\nfunction handleDragLeave(): void {\n  isDragging.value = false;\n}\n\nfunction handleDrop(event: DragEvent): void {\n  event.preventDefault();\n  isDragging.value = false;\n\n  const file = event.dataTransfer?.files?.[0];\n  if (file) {\n    setFile(file);\n  }\n}\n\nfunction handleGenerate(): void {\n  if (!canGenerate.value) {\n    return;\n  }\n\n  // Show confirmation if there are existing blocks\n  if (props.hasExistingBlocks && !showConfirmation.value) {\n    showConfirmation.value = true;\n    return;\n  }\n\n  showConfirmation.value = false;\n\n  const input: {\n    prompt?: string;\n    imageUpload?: File;\n    pdfUpload?: File;\n  } = {};\n\n  if (prompt.value.trim()) {\n    input.prompt = prompt.value.trim();\n  }\n\n  if (activeTab.value === \"image\" && selectedFile.value) {\n    input.imageUpload = selectedFile.value;\n  } else if (activeTab.value === \"pdf\" && selectedFile.value) {\n    input.pdfUpload = selectedFile.value;\n  }\n\n  designReference.generate(input);\n}\n\nfunction cancelConfirmation(): void {\n  showConfirmation.value = false;\n}\n\n// Reset state when panel closes\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (!isVisible) {\n      showConfirmation.value = false;\n    }\n  },\n);\n\nonBeforeUnmount(() => {\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n    filePreviewUrl.value = null;\n  }\n});\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-design-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-design-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-design-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <ImageUp :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.designReference.title }}</span>\n        </div>\n        <button\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"designReference.isGenerating.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <div\n            class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3\"\n          >\n            <LoadingTrack />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudT.designReference.generating }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Input form -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n          <!-- Source tabs -->\n          <div\n            class=\"tpl:flex tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n          >\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'image' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'image'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'image' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('image')\"\n            >\n              <FileImage :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadImage }}\n            </button>\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'pdf' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'pdf'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'pdf' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('pdf')\"\n            >\n              <FileText :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadPdf }}\n            </button>\n          </div>\n\n          <!-- File upload area (image or pdf) -->\n          <div>\n            <!-- Preview -->\n            <div v-if=\"selectedFile\" class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n              <div\n                class=\"tpl:relative tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n              >\n                <!-- Image preview -->\n                <img\n                  v-if=\"filePreviewUrl\"\n                  :src=\"filePreviewUrl\"\n                  :alt=\"selectedFile.name\"\n                  class=\"tpl:h-auto tpl:max-h-48 tpl:w-full tpl:object-contain\"\n                />\n                <!-- PDF preview (icon-based) -->\n                <div\n                  v-else\n                  class=\"tpl:flex tpl:h-32 tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2\"\n                >\n                  <FileText\n                    :size=\"32\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\">\n                    {{ selectedFile.name }}\n                  </span>\n                </div>\n                <!-- Remove button -->\n                <button\n                  class=\"tpl:absolute tpl:top-2 tpl:right-2 tpl:rounded-full tpl:p-1 tpl:transition-colors tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:shadow-[var(--tpl-shadow)]\"\n                  @click=\"clearFile\"\n                >\n                  <X :size=\"12\" :stroke-width=\"2\" />\n                </button>\n              </div>\n            </div>\n\n            <!-- Drop zone -->\n            <div\n              v-else\n              class=\"tpl-design-dropzone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border-2 tpl:border-dashed tpl:px-4 tpl:py-8 tpl:transition-colors\"\n              :style=\"{\n                borderColor: isDragging\n                  ? 'var(--tpl-primary)'\n                  : 'var(--tpl-border-light)',\n                backgroundColor: isDragging\n                  ? 'var(--tpl-primary-light)'\n                  : 'var(--tpl-bg)',\n              }\"\n              @click=\"fileInput?.click()\"\n              @dragover=\"handleDragOver\"\n              @dragleave=\"handleDragLeave\"\n              @drop=\"handleDrop\"\n            >\n              <Upload\n                :size=\"24\"\n                :stroke-width=\"1.5\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <span\n                class=\"tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n              >\n                {{ cloudT.designReference.dropHint }}\n              </span>\n              <span\n                class=\"tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  activeTab === \"image\"\n                    ? cloudT.designReference.acceptedImages\n                    : cloudT.designReference.acceptedPdf\n                }}\n              </span>\n            </div>\n            <input\n              ref=\"fileInput\"\n              type=\"file\"\n              class=\"tpl:hidden\"\n              :accept=\"\n                activeTab === 'image'\n                  ? 'image/png,image/jpeg,image/webp'\n                  : 'application/pdf'\n              \"\n              @change=\"handleFileSelect\"\n            />\n          </div>\n\n          <!-- Prompt textarea -->\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <label\n              class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.designReference.promptLabel }}\n            </label>\n            <textarea\n              v-model=\"prompt\"\n              class=\"tpl:min-h-[72px] tpl:w-full tpl:resize-none tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:font-sans tpl:text-sm tpl:outline-none tpl:transition-colors tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n              :class=\"['tpl-design-prompt-input']\"\n              :placeholder=\"cloudT.designReference.promptPlaceholder\"\n              rows=\"3\"\n            />\n          </div>\n\n          <!-- Confirmation overlay -->\n          <div\n            v-if=\"showConfirmation\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:px-3 tpl:py-3 tpl:bg-[var(--tpl-warning-light)] tpl:border tpl:border-[var(--tpl-warning)]\"\n          >\n            <p class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\">\n              {{ cloudT.designReference.replaceWarning }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-2\">\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]\"\n                style=\"background-color: transparent\"\n                @click=\"cancelConfirmation\"\n              >\n                {{ cloudT.designReference.replaceCancel }}\n              </button>\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n                @click=\"handleGenerate\"\n              >\n                {{ cloudT.designReference.replaceConfirm }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Error message -->\n          <div\n            v-if=\"designReference.error.value\"\n            class=\"tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n          >\n            <CircleAlert\n              :size=\"14\"\n              :stroke-width=\"2\"\n              class=\"tpl:mt-0.5 tpl:shrink-0\"\n            />\n            <span>{{ cloudT.designReference.error }}</span>\n          </div>\n\n          <!-- Generate button -->\n          <button\n            v-if=\"!showConfirmation\"\n            class=\"tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n            :disabled=\"!canGenerate\"\n            @click=\"handleGenerate\"\n          >\n            <ImageUp :size=\"16\" :stroke-width=\"2\" />\n            {{ cloudT.designReference.generate }}\n          </button>\n\n          <!-- AI disclaimer -->\n          <p\n            class=\"tpl:m-0 tpl:pt-1 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ cloudT.aiMenu.disclaimer }}\n          </p>\n        </div>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-design-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-design-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-design-prompt-input:focus {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-design-dropzone:hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { MAX_UPLOAD_SIZE_BYTES } from \"../../constants/timeouts\";\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport { useDesignReference } from \"@templatical/core/cloud\";\nimport { EDITOR_KEY, AUTH_MANAGER_KEY, requireInject } from \"../../keys\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  FileImage,\n  FileText,\n  ImageUp,\n  Upload,\n  X,\n} from \"@lucide/vue\";\nimport { computed, onBeforeUnmount, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  hasExistingBlocks: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"apply\", content: TemplateContent): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"DesignReferenceSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"DesignReferenceSidebar\");\n\nconst designReference = useDesignReference({\n  authManager,\n  getTemplateId: () => editor.state.template?.id ?? null,\n  onApply: (content) => emit(\"apply\", content),\n});\n\nconst fileInput = ref<HTMLInputElement | null>(null);\n\ntype SourceTab = \"image\" | \"pdf\";\n\nconst activeTab = ref<SourceTab>(\"image\");\nconst selectedFile = ref<File | null>(null);\nconst prompt = ref(\"\");\nconst filePreviewUrl = ref<string | null>(null);\nconst showConfirmation = ref(false);\nconst isDragging = ref(false);\n\nconst canGenerate = computed(() => {\n  if (designReference.isGenerating.value) {\n    return false;\n  }\n\n  return selectedFile.value !== null;\n});\n\nfunction selectTab(tab: SourceTab): void {\n  activeTab.value = tab;\n  clearFile();\n}\n\nfunction handleFileSelect(event: Event): void {\n  const input = event.target as HTMLInputElement;\n  const file = input.files?.[0];\n  if (file) {\n    setFile(file);\n  }\n  // Reset input so same file can be selected again\n  input.value = \"\";\n}\n\nfunction setFile(file: File): void {\n  // Validate file size (10MB)\n  if (file.size > MAX_UPLOAD_SIZE_BYTES) {\n    designReference.error.value = cloudT.designReference.fileTooLarge;\n    return;\n  }\n\n  // Validate file type\n  if (activeTab.value === \"image\") {\n    const validTypes = [\"image/png\", \"image/jpeg\", \"image/jpg\", \"image/webp\"];\n    if (!validTypes.includes(file.type)) {\n      designReference.error.value = cloudT.designReference.invalidFileType;\n      return;\n    }\n  } else if (activeTab.value === \"pdf\") {\n    if (file.type !== \"application/pdf\") {\n      designReference.error.value = cloudT.designReference.invalidFileType;\n      return;\n    }\n  }\n\n  selectedFile.value = file;\n  designReference.error.value = null;\n\n  // Create preview URL for images\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n  }\n  if (file.type.startsWith(\"image/\")) {\n    filePreviewUrl.value = URL.createObjectURL(file);\n  } else {\n    filePreviewUrl.value = null;\n  }\n}\n\nfunction clearFile(): void {\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n    filePreviewUrl.value = null;\n  }\n  selectedFile.value = null;\n}\n\nfunction handleDragOver(event: DragEvent): void {\n  event.preventDefault();\n  isDragging.value = true;\n}\n\nfunction handleDragLeave(): void {\n  isDragging.value = false;\n}\n\nfunction handleDrop(event: DragEvent): void {\n  event.preventDefault();\n  isDragging.value = false;\n\n  const file = event.dataTransfer?.files?.[0];\n  if (file) {\n    setFile(file);\n  }\n}\n\nfunction handleGenerate(): void {\n  if (!canGenerate.value) {\n    return;\n  }\n\n  // Show confirmation if there are existing blocks\n  if (props.hasExistingBlocks && !showConfirmation.value) {\n    showConfirmation.value = true;\n    return;\n  }\n\n  showConfirmation.value = false;\n\n  const input: {\n    prompt?: string;\n    imageUpload?: File;\n    pdfUpload?: File;\n  } = {};\n\n  if (prompt.value.trim()) {\n    input.prompt = prompt.value.trim();\n  }\n\n  if (activeTab.value === \"image\" && selectedFile.value) {\n    input.imageUpload = selectedFile.value;\n  } else if (activeTab.value === \"pdf\" && selectedFile.value) {\n    input.pdfUpload = selectedFile.value;\n  }\n\n  designReference.generate(input);\n}\n\nfunction cancelConfirmation(): void {\n  showConfirmation.value = false;\n}\n\n// Reset state when panel closes\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (!isVisible) {\n      showConfirmation.value = false;\n    }\n  },\n);\n\nonBeforeUnmount(() => {\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n    filePreviewUrl.value = null;\n  }\n});\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-design-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-design-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-design-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <ImageUp :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.designReference.title }}</span>\n        </div>\n        <button\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"designReference.isGenerating.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <div\n            class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3\"\n          >\n            <LoadingTrack />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudT.designReference.generating }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Input form -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n          <!-- Source tabs -->\n          <div\n            class=\"tpl:flex tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n          >\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'image' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'image'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'image' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('image')\"\n            >\n              <FileImage :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadImage }}\n            </button>\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'pdf' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'pdf'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'pdf' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('pdf')\"\n            >\n              <FileText :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadPdf }}\n            </button>\n          </div>\n\n          <!-- File upload area (image or pdf) -->\n          <div>\n            <!-- Preview -->\n            <div v-if=\"selectedFile\" class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n              <div\n                class=\"tpl:relative tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n              >\n                <!-- Image preview -->\n                <img\n                  v-if=\"filePreviewUrl\"\n                  :src=\"filePreviewUrl\"\n                  :alt=\"selectedFile.name\"\n                  class=\"tpl:h-auto tpl:max-h-48 tpl:w-full tpl:object-contain\"\n                />\n                <!-- PDF preview (icon-based) -->\n                <div\n                  v-else\n                  class=\"tpl:flex tpl:h-32 tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2\"\n                >\n                  <FileText\n                    :size=\"32\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\">\n                    {{ selectedFile.name }}\n                  </span>\n                </div>\n                <!-- Remove button -->\n                <button\n                  class=\"tpl:absolute tpl:top-2 tpl:right-2 tpl:rounded-full tpl:p-1 tpl:transition-colors tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:shadow-[var(--tpl-shadow)]\"\n                  @click=\"clearFile\"\n                >\n                  <X :size=\"12\" :stroke-width=\"2\" />\n                </button>\n              </div>\n            </div>\n\n            <!-- Drop zone -->\n            <div\n              v-else\n              class=\"tpl-design-dropzone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border-2 tpl:border-dashed tpl:px-4 tpl:py-8 tpl:transition-colors\"\n              :style=\"{\n                borderColor: isDragging\n                  ? 'var(--tpl-primary)'\n                  : 'var(--tpl-border-light)',\n                backgroundColor: isDragging\n                  ? 'var(--tpl-primary-light)'\n                  : 'var(--tpl-bg)',\n              }\"\n              @click=\"fileInput?.click()\"\n              @dragover=\"handleDragOver\"\n              @dragleave=\"handleDragLeave\"\n              @drop=\"handleDrop\"\n            >\n              <Upload\n                :size=\"24\"\n                :stroke-width=\"1.5\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <span\n                class=\"tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n              >\n                {{ cloudT.designReference.dropHint }}\n              </span>\n              <span\n                class=\"tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  activeTab === \"image\"\n                    ? cloudT.designReference.acceptedImages\n                    : cloudT.designReference.acceptedPdf\n                }}\n              </span>\n            </div>\n            <input\n              ref=\"fileInput\"\n              type=\"file\"\n              class=\"tpl:hidden\"\n              :accept=\"\n                activeTab === 'image'\n                  ? 'image/png,image/jpeg,image/webp'\n                  : 'application/pdf'\n              \"\n              @change=\"handleFileSelect\"\n            />\n          </div>\n\n          <!-- Prompt textarea -->\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <label\n              class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.designReference.promptLabel }}\n            </label>\n            <textarea\n              v-model=\"prompt\"\n              class=\"tpl:min-h-[72px] tpl:w-full tpl:resize-none tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:font-sans tpl:text-sm tpl:outline-none tpl:transition-colors tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n              :class=\"['tpl-design-prompt-input']\"\n              :placeholder=\"cloudT.designReference.promptPlaceholder\"\n              rows=\"3\"\n            />\n          </div>\n\n          <!-- Confirmation overlay -->\n          <div\n            v-if=\"showConfirmation\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:px-3 tpl:py-3 tpl:bg-[var(--tpl-warning-light)] tpl:border tpl:border-[var(--tpl-warning)]\"\n          >\n            <p class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\">\n              {{ cloudT.designReference.replaceWarning }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-2\">\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]\"\n                style=\"background-color: transparent\"\n                @click=\"cancelConfirmation\"\n              >\n                {{ cloudT.designReference.replaceCancel }}\n              </button>\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n                @click=\"handleGenerate\"\n              >\n                {{ cloudT.designReference.replaceConfirm }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Error message -->\n          <div\n            v-if=\"designReference.error.value\"\n            class=\"tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n          >\n            <CircleAlert\n              :size=\"14\"\n              :stroke-width=\"2\"\n              class=\"tpl:mt-0.5 tpl:shrink-0\"\n            />\n            <span>{{ cloudT.designReference.error }}</span>\n          </div>\n\n          <!-- Generate button -->\n          <button\n            v-if=\"!showConfirmation\"\n            class=\"tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n            :disabled=\"!canGenerate\"\n            @click=\"handleGenerate\"\n          >\n            <ImageUp :size=\"16\" :stroke-width=\"2\" />\n            {{ cloudT.designReference.generate }}\n          </button>\n\n          <!-- AI disclaimer -->\n          <p\n            class=\"tpl:m-0 tpl:pt-1 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ cloudT.aiMenu.disclaimer }}\n          </p>\n        </div>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-design-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-design-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-design-prompt-input:focus {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-design-dropzone:hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"DesignReferenceSidebar-DRGqm33h.js","names":[],"sources":["../../../src/cloud/components/DesignReferenceSidebar.vue","../../../src/cloud/components/DesignReferenceSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MAX_UPLOAD_SIZE_BYTES } from \"../../constants/timeouts\";\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport { useDesignReference } from \"@templatical/core/cloud\";\nimport { EDITOR_KEY, AUTH_MANAGER_KEY, requireInject } from \"../../keys\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  FileImage,\n  FileText,\n  ImageUp,\n  Upload,\n  X,\n} from \"@lucide/vue\";\nimport { computed, onBeforeUnmount, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  hasExistingBlocks: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"apply\", content: TemplateContent): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"DesignReferenceSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"DesignReferenceSidebar\");\n\nconst designReference = useDesignReference({\n  authManager,\n  getTemplateId: () => editor.state.template?.id ?? null,\n  onApply: (content) => emit(\"apply\", content),\n});\n\nconst fileInput = ref<HTMLInputElement | null>(null);\n\ntype SourceTab = \"image\" | \"pdf\";\n\nconst activeTab = ref<SourceTab>(\"image\");\nconst selectedFile = ref<File | null>(null);\nconst prompt = ref(\"\");\nconst filePreviewUrl = ref<string | null>(null);\nconst showConfirmation = ref(false);\nconst isDragging = ref(false);\n\nconst canGenerate = computed(() => {\n  if (designReference.isGenerating.value) {\n    return false;\n  }\n\n  return selectedFile.value !== null;\n});\n\nfunction selectTab(tab: SourceTab): void {\n  activeTab.value = tab;\n  clearFile();\n}\n\nfunction handleFileSelect(event: Event): void {\n  const input = event.target as HTMLInputElement;\n  const file = input.files?.[0];\n  if (file) {\n    setFile(file);\n  }\n  // Reset input so same file can be selected again\n  input.value = \"\";\n}\n\nfunction setFile(file: File): void {\n  // Validate file size (10MB)\n  if (file.size > MAX_UPLOAD_SIZE_BYTES) {\n    designReference.error.value = cloudT.designReference.fileTooLarge;\n    return;\n  }\n\n  // Validate file type\n  if (activeTab.value === \"image\") {\n    const validTypes = [\"image/png\", \"image/jpeg\", \"image/jpg\", \"image/webp\"];\n    if (!validTypes.includes(file.type)) {\n      designReference.error.value = cloudT.designReference.invalidFileType;\n      return;\n    }\n  } else if (activeTab.value === \"pdf\") {\n    if (file.type !== \"application/pdf\") {\n      designReference.error.value = cloudT.designReference.invalidFileType;\n      return;\n    }\n  }\n\n  selectedFile.value = file;\n  designReference.error.value = null;\n\n  // Create preview URL for images\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n  }\n  if (file.type.startsWith(\"image/\")) {\n    filePreviewUrl.value = URL.createObjectURL(file);\n  } else {\n    filePreviewUrl.value = null;\n  }\n}\n\nfunction clearFile(): void {\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n    filePreviewUrl.value = null;\n  }\n  selectedFile.value = null;\n}\n\nfunction handleDragOver(event: DragEvent): void {\n  event.preventDefault();\n  isDragging.value = true;\n}\n\nfunction handleDragLeave(): void {\n  isDragging.value = false;\n}\n\nfunction handleDrop(event: DragEvent): void {\n  event.preventDefault();\n  isDragging.value = false;\n\n  const file = event.dataTransfer?.files?.[0];\n  if (file) {\n    setFile(file);\n  }\n}\n\nfunction handleGenerate(): void {\n  if (!canGenerate.value) {\n    return;\n  }\n\n  // Show confirmation if there are existing blocks\n  if (props.hasExistingBlocks && !showConfirmation.value) {\n    showConfirmation.value = true;\n    return;\n  }\n\n  showConfirmation.value = false;\n\n  const input: {\n    prompt?: string;\n    imageUpload?: File;\n    pdfUpload?: File;\n  } = {};\n\n  if (prompt.value.trim()) {\n    input.prompt = prompt.value.trim();\n  }\n\n  if (activeTab.value === \"image\" && selectedFile.value) {\n    input.imageUpload = selectedFile.value;\n  } else if (activeTab.value === \"pdf\" && selectedFile.value) {\n    input.pdfUpload = selectedFile.value;\n  }\n\n  designReference.generate(input);\n}\n\nfunction cancelConfirmation(): void {\n  showConfirmation.value = false;\n}\n\n// Reset state when panel closes\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (!isVisible) {\n      showConfirmation.value = false;\n    }\n  },\n);\n\nonBeforeUnmount(() => {\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n    filePreviewUrl.value = null;\n  }\n});\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-design-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-design-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-design-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <ImageUp :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.designReference.title }}</span>\n        </div>\n        <button\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"designReference.isGenerating.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <div\n            class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3\"\n          >\n            <LoadingTrack />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudT.designReference.generating }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Input form -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n          <!-- Source tabs -->\n          <div\n            class=\"tpl:flex tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n          >\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'image' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'image'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'image' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('image')\"\n            >\n              <FileImage :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadImage }}\n            </button>\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'pdf' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'pdf'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'pdf' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('pdf')\"\n            >\n              <FileText :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadPdf }}\n            </button>\n          </div>\n\n          <!-- File upload area (image or pdf) -->\n          <div>\n            <!-- Preview -->\n            <div v-if=\"selectedFile\" class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n              <div\n                class=\"tpl:relative tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n              >\n                <!-- Image preview -->\n                <img\n                  v-if=\"filePreviewUrl\"\n                  :src=\"filePreviewUrl\"\n                  :alt=\"selectedFile.name\"\n                  class=\"tpl:h-auto tpl:max-h-48 tpl:w-full tpl:object-contain\"\n                />\n                <!-- PDF preview (icon-based) -->\n                <div\n                  v-else\n                  class=\"tpl:flex tpl:h-32 tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2\"\n                >\n                  <FileText\n                    :size=\"32\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\">\n                    {{ selectedFile.name }}\n                  </span>\n                </div>\n                <!-- Remove button -->\n                <button\n                  class=\"tpl:absolute tpl:top-2 tpl:right-2 tpl:rounded-full tpl:p-1 tpl:transition-colors tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:shadow-[var(--tpl-shadow)]\"\n                  @click=\"clearFile\"\n                >\n                  <X :size=\"12\" :stroke-width=\"2\" />\n                </button>\n              </div>\n            </div>\n\n            <!-- Drop zone -->\n            <div\n              v-else\n              class=\"tpl-design-dropzone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border-2 tpl:border-dashed tpl:px-4 tpl:py-8 tpl:transition-colors\"\n              :style=\"{\n                borderColor: isDragging\n                  ? 'var(--tpl-primary)'\n                  : 'var(--tpl-border-light)',\n                backgroundColor: isDragging\n                  ? 'var(--tpl-primary-light)'\n                  : 'var(--tpl-bg)',\n              }\"\n              @click=\"fileInput?.click()\"\n              @dragover=\"handleDragOver\"\n              @dragleave=\"handleDragLeave\"\n              @drop=\"handleDrop\"\n            >\n              <Upload\n                :size=\"24\"\n                :stroke-width=\"1.5\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <span\n                class=\"tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n              >\n                {{ cloudT.designReference.dropHint }}\n              </span>\n              <span\n                class=\"tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  activeTab === \"image\"\n                    ? cloudT.designReference.acceptedImages\n                    : cloudT.designReference.acceptedPdf\n                }}\n              </span>\n            </div>\n            <input\n              ref=\"fileInput\"\n              type=\"file\"\n              class=\"tpl:hidden\"\n              :accept=\"\n                activeTab === 'image'\n                  ? 'image/png,image/jpeg,image/webp'\n                  : 'application/pdf'\n              \"\n              @change=\"handleFileSelect\"\n            />\n          </div>\n\n          <!-- Prompt textarea -->\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <label\n              class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.designReference.promptLabel }}\n            </label>\n            <textarea\n              v-model=\"prompt\"\n              class=\"tpl:min-h-[72px] tpl:w-full tpl:resize-none tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:font-sans tpl:text-sm tpl:outline-none tpl:transition-colors tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n              :class=\"['tpl-design-prompt-input']\"\n              :placeholder=\"cloudT.designReference.promptPlaceholder\"\n              rows=\"3\"\n            />\n          </div>\n\n          <!-- Confirmation overlay -->\n          <div\n            v-if=\"showConfirmation\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:px-3 tpl:py-3 tpl:bg-[var(--tpl-warning-light)] tpl:border tpl:border-[var(--tpl-warning)]\"\n          >\n            <p class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\">\n              {{ cloudT.designReference.replaceWarning }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-2\">\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]\"\n                style=\"background-color: transparent\"\n                @click=\"cancelConfirmation\"\n              >\n                {{ cloudT.designReference.replaceCancel }}\n              </button>\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n                @click=\"handleGenerate\"\n              >\n                {{ cloudT.designReference.replaceConfirm }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Error message -->\n          <div\n            v-if=\"designReference.error.value\"\n            class=\"tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n          >\n            <CircleAlert\n              :size=\"14\"\n              :stroke-width=\"2\"\n              class=\"tpl:mt-0.5 tpl:shrink-0\"\n            />\n            <span>{{ cloudT.designReference.error }}</span>\n          </div>\n\n          <!-- Generate button -->\n          <button\n            v-if=\"!showConfirmation\"\n            class=\"tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n            :disabled=\"!canGenerate\"\n            @click=\"handleGenerate\"\n          >\n            <ImageUp :size=\"16\" :stroke-width=\"2\" />\n            {{ cloudT.designReference.generate }}\n          </button>\n\n          <!-- AI disclaimer -->\n          <p\n            class=\"tpl:m-0 tpl:pt-1 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ cloudT.aiMenu.disclaimer }}\n          </p>\n        </div>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-design-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-design-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-design-prompt-input:focus {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-design-dropzone:hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { MAX_UPLOAD_SIZE_BYTES } from \"../../constants/timeouts\";\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport { useDesignReference } from \"@templatical/core/cloud\";\nimport { EDITOR_KEY, AUTH_MANAGER_KEY, requireInject } from \"../../keys\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  FileImage,\n  FileText,\n  ImageUp,\n  Upload,\n  X,\n} from \"@lucide/vue\";\nimport { computed, onBeforeUnmount, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  hasExistingBlocks: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"apply\", content: TemplateContent): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"DesignReferenceSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"DesignReferenceSidebar\");\n\nconst designReference = useDesignReference({\n  authManager,\n  getTemplateId: () => editor.state.template?.id ?? null,\n  onApply: (content) => emit(\"apply\", content),\n});\n\nconst fileInput = ref<HTMLInputElement | null>(null);\n\ntype SourceTab = \"image\" | \"pdf\";\n\nconst activeTab = ref<SourceTab>(\"image\");\nconst selectedFile = ref<File | null>(null);\nconst prompt = ref(\"\");\nconst filePreviewUrl = ref<string | null>(null);\nconst showConfirmation = ref(false);\nconst isDragging = ref(false);\n\nconst canGenerate = computed(() => {\n  if (designReference.isGenerating.value) {\n    return false;\n  }\n\n  return selectedFile.value !== null;\n});\n\nfunction selectTab(tab: SourceTab): void {\n  activeTab.value = tab;\n  clearFile();\n}\n\nfunction handleFileSelect(event: Event): void {\n  const input = event.target as HTMLInputElement;\n  const file = input.files?.[0];\n  if (file) {\n    setFile(file);\n  }\n  // Reset input so same file can be selected again\n  input.value = \"\";\n}\n\nfunction setFile(file: File): void {\n  // Validate file size (10MB)\n  if (file.size > MAX_UPLOAD_SIZE_BYTES) {\n    designReference.error.value = cloudT.designReference.fileTooLarge;\n    return;\n  }\n\n  // Validate file type\n  if (activeTab.value === \"image\") {\n    const validTypes = [\"image/png\", \"image/jpeg\", \"image/jpg\", \"image/webp\"];\n    if (!validTypes.includes(file.type)) {\n      designReference.error.value = cloudT.designReference.invalidFileType;\n      return;\n    }\n  } else if (activeTab.value === \"pdf\") {\n    if (file.type !== \"application/pdf\") {\n      designReference.error.value = cloudT.designReference.invalidFileType;\n      return;\n    }\n  }\n\n  selectedFile.value = file;\n  designReference.error.value = null;\n\n  // Create preview URL for images\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n  }\n  if (file.type.startsWith(\"image/\")) {\n    filePreviewUrl.value = URL.createObjectURL(file);\n  } else {\n    filePreviewUrl.value = null;\n  }\n}\n\nfunction clearFile(): void {\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n    filePreviewUrl.value = null;\n  }\n  selectedFile.value = null;\n}\n\nfunction handleDragOver(event: DragEvent): void {\n  event.preventDefault();\n  isDragging.value = true;\n}\n\nfunction handleDragLeave(): void {\n  isDragging.value = false;\n}\n\nfunction handleDrop(event: DragEvent): void {\n  event.preventDefault();\n  isDragging.value = false;\n\n  const file = event.dataTransfer?.files?.[0];\n  if (file) {\n    setFile(file);\n  }\n}\n\nfunction handleGenerate(): void {\n  if (!canGenerate.value) {\n    return;\n  }\n\n  // Show confirmation if there are existing blocks\n  if (props.hasExistingBlocks && !showConfirmation.value) {\n    showConfirmation.value = true;\n    return;\n  }\n\n  showConfirmation.value = false;\n\n  const input: {\n    prompt?: string;\n    imageUpload?: File;\n    pdfUpload?: File;\n  } = {};\n\n  if (prompt.value.trim()) {\n    input.prompt = prompt.value.trim();\n  }\n\n  if (activeTab.value === \"image\" && selectedFile.value) {\n    input.imageUpload = selectedFile.value;\n  } else if (activeTab.value === \"pdf\" && selectedFile.value) {\n    input.pdfUpload = selectedFile.value;\n  }\n\n  designReference.generate(input);\n}\n\nfunction cancelConfirmation(): void {\n  showConfirmation.value = false;\n}\n\n// Reset state when panel closes\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (!isVisible) {\n      showConfirmation.value = false;\n    }\n  },\n);\n\nonBeforeUnmount(() => {\n  if (filePreviewUrl.value) {\n    URL.revokeObjectURL(filePreviewUrl.value);\n    filePreviewUrl.value = null;\n  }\n});\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-design-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-design-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-design-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <ImageUp :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.designReference.title }}</span>\n        </div>\n        <button\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"designReference.isGenerating.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <div\n            class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3\"\n          >\n            <LoadingTrack />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudT.designReference.generating }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Input form -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n          <!-- Source tabs -->\n          <div\n            class=\"tpl:flex tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n          >\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'image' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'image'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'image' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('image')\"\n            >\n              <FileImage :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadImage }}\n            </button>\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'pdf' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'pdf'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'pdf' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('pdf')\"\n            >\n              <FileText :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadPdf }}\n            </button>\n          </div>\n\n          <!-- File upload area (image or pdf) -->\n          <div>\n            <!-- Preview -->\n            <div v-if=\"selectedFile\" class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n              <div\n                class=\"tpl:relative tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n              >\n                <!-- Image preview -->\n                <img\n                  v-if=\"filePreviewUrl\"\n                  :src=\"filePreviewUrl\"\n                  :alt=\"selectedFile.name\"\n                  class=\"tpl:h-auto tpl:max-h-48 tpl:w-full tpl:object-contain\"\n                />\n                <!-- PDF preview (icon-based) -->\n                <div\n                  v-else\n                  class=\"tpl:flex tpl:h-32 tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2\"\n                >\n                  <FileText\n                    :size=\"32\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\">\n                    {{ selectedFile.name }}\n                  </span>\n                </div>\n                <!-- Remove button -->\n                <button\n                  class=\"tpl:absolute tpl:top-2 tpl:right-2 tpl:rounded-full tpl:p-1 tpl:transition-colors tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:shadow-[var(--tpl-shadow)]\"\n                  @click=\"clearFile\"\n                >\n                  <X :size=\"12\" :stroke-width=\"2\" />\n                </button>\n              </div>\n            </div>\n\n            <!-- Drop zone -->\n            <div\n              v-else\n              class=\"tpl-design-dropzone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border-2 tpl:border-dashed tpl:px-4 tpl:py-8 tpl:transition-colors\"\n              :style=\"{\n                borderColor: isDragging\n                  ? 'var(--tpl-primary)'\n                  : 'var(--tpl-border-light)',\n                backgroundColor: isDragging\n                  ? 'var(--tpl-primary-light)'\n                  : 'var(--tpl-bg)',\n              }\"\n              @click=\"fileInput?.click()\"\n              @dragover=\"handleDragOver\"\n              @dragleave=\"handleDragLeave\"\n              @drop=\"handleDrop\"\n            >\n              <Upload\n                :size=\"24\"\n                :stroke-width=\"1.5\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <span\n                class=\"tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n              >\n                {{ cloudT.designReference.dropHint }}\n              </span>\n              <span\n                class=\"tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  activeTab === \"image\"\n                    ? cloudT.designReference.acceptedImages\n                    : cloudT.designReference.acceptedPdf\n                }}\n              </span>\n            </div>\n            <input\n              ref=\"fileInput\"\n              type=\"file\"\n              class=\"tpl:hidden\"\n              :accept=\"\n                activeTab === 'image'\n                  ? 'image/png,image/jpeg,image/webp'\n                  : 'application/pdf'\n              \"\n              @change=\"handleFileSelect\"\n            />\n          </div>\n\n          <!-- Prompt textarea -->\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <label\n              class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.designReference.promptLabel }}\n            </label>\n            <textarea\n              v-model=\"prompt\"\n              class=\"tpl:min-h-[72px] tpl:w-full tpl:resize-none tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:font-sans tpl:text-sm tpl:outline-none tpl:transition-colors tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n              :class=\"['tpl-design-prompt-input']\"\n              :placeholder=\"cloudT.designReference.promptPlaceholder\"\n              rows=\"3\"\n            />\n          </div>\n\n          <!-- Confirmation overlay -->\n          <div\n            v-if=\"showConfirmation\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:px-3 tpl:py-3 tpl:bg-[var(--tpl-warning-light)] tpl:border tpl:border-[var(--tpl-warning)]\"\n          >\n            <p class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\">\n              {{ cloudT.designReference.replaceWarning }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-2\">\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]\"\n                style=\"background-color: transparent\"\n                @click=\"cancelConfirmation\"\n              >\n                {{ cloudT.designReference.replaceCancel }}\n              </button>\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n                @click=\"handleGenerate\"\n              >\n                {{ cloudT.designReference.replaceConfirm }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Error message -->\n          <div\n            v-if=\"designReference.error.value\"\n            class=\"tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n          >\n            <CircleAlert\n              :size=\"14\"\n              :stroke-width=\"2\"\n              class=\"tpl:mt-0.5 tpl:shrink-0\"\n            />\n            <span>{{ cloudT.designReference.error }}</span>\n          </div>\n\n          <!-- Generate button -->\n          <button\n            v-if=\"!showConfirmation\"\n            class=\"tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n            :disabled=\"!canGenerate\"\n            @click=\"handleGenerate\"\n          >\n            <ImageUp :size=\"16\" :stroke-width=\"2\" />\n            {{ cloudT.designReference.generate }}\n          </button>\n\n          <!-- AI disclaimer -->\n          <p\n            class=\"tpl:m-0 tpl:pt-1 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ cloudT.aiMenu.disclaimer }}\n          </p>\n        </div>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-design-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-design-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-design-prompt-input:focus {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-design-dropzone:hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/cdn/chunks/{NumberWithSuffix-DOG0zHvY.js → FieldRow-CbcpsxZ4.js}

@@ -83,41 +83,48 @@ var y = { key: 0 }, b = {
 			"stroke-width": 2
 		})) : (n(), c("span", w, m(e.label), 1))], 12, C))), 128))], 4));
 	}
-}), E = { class: "tpl:mb-3.5" }, D = /* @__PURE__ */ i({
-	__name: "FieldRow",
-	props: { label: {} },
-	setup(e) {
-		return (r, i) => (n(), c("div", E, [e.label ? (n(), c("label", {
-			key: 0,
-			class: o(a(g))
-		}, m(e.label), 3)) : l("", !0), t(r.$slots, "default")]));
-	}
-}), O = { class: "tpl:flex tpl:items-stretch" }, k = [
+}), E = { class: "tpl:flex tpl:items-stretch" }, D = [
+	"data-testid",
 	"value",
 	"min",
 	"max"
-], A = /* @__PURE__ */ i({
+], O = /* @__PURE__ */ i({
 	__name: "NumberWithSuffix",
 	props: {
 		modelValue: {},
 		min: {},
 		max: {},
-		suffix: {}
+		suffix: {},
+		testid: {}
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
 		let r = t;
-		return (t, i) => (n(), c("div", O, [f("input", {
+		function i(e) {
+			let t = e.target;
+			t.validity?.badInput || r("update:modelValue", Number(t.value));
+		}
+		return (t, r) => (n(), c("div", E, [f("input", {
 			type: "number",
+			"data-testid": e.testid,
 			class: o(a(v)),
 			value: e.modelValue,
 			min: e.min,
 			max: e.max,
-			onInput: i[0] ||= (e) => r("update:modelValue", Number(e.target.value))
-		}, null, 42, k), f("span", { class: o(a(_)) }, m(e.suffix), 3)]));
+			onInput: i
+		}, null, 42, D), f("span", { class: o(a(_)) }, m(e.suffix), 3)]));
+	}
+}), k = { class: "tpl:mb-3.5" }, A = /* @__PURE__ */ i({
+	__name: "FieldRow",
+	props: { label: {} },
+	setup(e) {
+		return (r, i) => (n(), c("div", k, [e.label ? (n(), c("label", {
+			key: 0,
+			class: o(a(g))
+		}, m(e.label), 3)) : l("", !0), t(r.$slots, "default")]));
 	}
 });
 //#endregion
-export { S as i, D as n, T as r, A as t };
+export { S as i, O as n, T as r, A as t };
 
-//# sourceMappingURL=NumberWithSuffix-DOG0zHvY.js.map
+//# sourceMappingURL=FieldRow-CbcpsxZ4.js.map

package/dist/cdn/chunks/FieldRow-CbcpsxZ4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldRow-CbcpsxZ4.js","names":["$slots"],"sources":["../../../src/components/ToggleSwitch.vue","../../../src/components/ToggleSwitch.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/FieldRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label?: string;\n  disabled?: boolean;\n  required?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    :class=\"[\n      'tpl:flex tpl:items-center tpl:justify-between tpl:gap-2',\n      disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n    ]\"\n  >\n    <span v-if=\"$slots.default || label || required\">\n      <slot>{{ label }}</slot>\n      <span v-if=\"required\" class=\"tpl:text-[var(--tpl-danger)]\"> *</span>\n    </span>\n    <button\n      type=\"button\"\n      role=\"switch\"\n      :aria-checked=\"modelValue\"\n      :aria-label=\"label\"\n      :disabled=\"disabled\"\n      :class=\"[\n        'tpl:relative tpl:inline-flex tpl:h-5 tpl:w-9 tpl:shrink-0 tpl:rounded-full tpl:border-2 tpl:border-transparent tpl:transition-colors tpl:duration-200',\n        modelValue\n          ? 'tpl:bg-[var(--tpl-primary)]'\n          : 'tpl:bg-[var(--tpl-border)]',\n        disabled\n          ? 'tpl:cursor-not-allowed tpl:opacity-60'\n          : 'tpl:cursor-pointer',\n      ]\"\n      @click=\"!disabled && emit('update:modelValue', !modelValue)\"\n    >\n      <span\n        class=\"tpl:pointer-events-none tpl:inline-block tpl:size-4 tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow)] tpl:transition-transform tpl:duration-200\"\n        :class=\"modelValue ? 'tpl:translate-x-4' : 'tpl:translate-x-0'\"\n      />\n    </button>\n  </label>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label?: string;\n  disabled?: boolean;\n  required?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    :class=\"[\n      'tpl:flex tpl:items-center tpl:justify-between tpl:gap-2',\n      disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n    ]\"\n  >\n    <span v-if=\"$slots.default || label || required\">\n      <slot>{{ label }}</slot>\n      <span v-if=\"required\" class=\"tpl:text-[var(--tpl-danger)]\"> *</span>\n    </span>\n    <button\n      type=\"button\"\n      role=\"switch\"\n      :aria-checked=\"modelValue\"\n      :aria-label=\"label\"\n      :disabled=\"disabled\"\n      :class=\"[\n        'tpl:relative tpl:inline-flex tpl:h-5 tpl:w-9 tpl:shrink-0 tpl:rounded-full tpl:border-2 tpl:border-transparent tpl:transition-colors tpl:duration-200',\n        modelValue\n          ? 'tpl:bg-[var(--tpl-primary)]'\n          : 'tpl:bg-[var(--tpl-border)]',\n        disabled\n          ? 'tpl:cursor-not-allowed tpl:opacity-60'\n          : 'tpl:cursor-pointer',\n      ]\"\n      @click=\"!disabled && emit('update:modelValue', !modelValue)\"\n    >\n      <span\n        class=\"tpl:pointer-events-none tpl:inline-block tpl:size-4 tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow)] tpl:transition-transform tpl:duration-200\"\n        :class=\"modelValue ? 'tpl:translate-x-4' : 'tpl:translate-x-0'\"\n      />\n    </button>\n  </label>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n  value: string;\n  label: string;\n  icon?: Component;\n}\n\nconst props = defineProps<{\n  options: PillOption[];\n  modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n  props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n  () => `translateX(${Math.max(selectedIndex.value, 0) * 100}%)`,\n);\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill — hidden when modelValue matches no option,\n         otherwise it would silently sit on the first option and create\n         a visual mismatch with aria-checked. -->\n    <div\n      v-if=\"selectedIndex >= 0\"\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${options.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      role=\"radio\"\n      :aria-checked=\"modelValue === option.value\"\n      :aria-label=\"option.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          modelValue === option.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"option.label\"\n      @click=\"emit('update:modelValue', option.value)\"\n    >\n      <component\n        :is=\"option.icon\"\n        v-if=\"option.icon\"\n        :size=\"14\"\n        :stroke-width=\"2\"\n      />\n      <span v-else>{{ option.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n  value: string;\n  label: string;\n  icon?: Component;\n}\n\nconst props = defineProps<{\n  options: PillOption[];\n  modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n  props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n  () => `translateX(${Math.max(selectedIndex.value, 0) * 100}%)`,\n);\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill — hidden when modelValue matches no option,\n         otherwise it would silently sit on the first option and create\n         a visual mismatch with aria-checked. -->\n    <div\n      v-if=\"selectedIndex >= 0\"\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${options.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      role=\"radio\"\n      :aria-checked=\"modelValue === option.value\"\n      :aria-label=\"option.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          modelValue === option.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"option.label\"\n      @click=\"emit('update:modelValue', option.value)\"\n    >\n      <component\n        :is=\"option.icon\"\n        v-if=\"option.icon\"\n        :size=\"14\"\n        :stroke-width=\"2\"\n      />\n      <span v-else>{{ option.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  inputGroupInputClass,\n  inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n  modelValue: number;\n  min?: number;\n  max?: number;\n  suffix: string;\n  /**\n   * `data-testid` for the `<input>`. A plain attribute on this component falls\n   * through to the wrapping `<div>`, which is not the element a test reads a\n   * value from.\n   */\n  testid?: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: number): void;\n}>();\n\nfunction onInput(event: Event): void {\n  const el = event.target as HTMLInputElement;\n  // A number input reports in-progress unparseable content as an EMPTY string\n  // with `badInput` set, so `Number(el.value)` is 0 and indistinguishable from\n  // a cleared field. Emitting here overwrites the real value with 0 before the\n  // number being typed ever arrives. Typing \"-\" is the everyday case: measured\n  // in Chrome, it fires `input` with value \"\" + badInput true, and only the\n  // following \"5\" fires again with \"-5\". `min` does not help — it drives\n  // constraint validation, not the reported value.\n  if (el.validity?.badInput) return;\n  emit(\"update:modelValue\", Number(el.value));\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:items-stretch\">\n    <input\n      type=\"number\"\n      :data-testid=\"testid\"\n      :class=\"inputGroupInputClass\"\n      :value=\"modelValue\"\n      :min=\"min\"\n      :max=\"max\"\n      @input=\"onInput\"\n    />\n    <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  inputGroupInputClass,\n  inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n  modelValue: number;\n  min?: number;\n  max?: number;\n  suffix: string;\n  /**\n   * `data-testid` for the `<input>`. A plain attribute on this component falls\n   * through to the wrapping `<div>`, which is not the element a test reads a\n   * value from.\n   */\n  testid?: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: number): void;\n}>();\n\nfunction onInput(event: Event): void {\n  const el = event.target as HTMLInputElement;\n  // A number input reports in-progress unparseable content as an EMPTY string\n  // with `badInput` set, so `Number(el.value)` is 0 and indistinguishable from\n  // a cleared field. Emitting here overwrites the real value with 0 before the\n  // number being typed ever arrives. Typing \"-\" is the everyday case: measured\n  // in Chrome, it fires `input` with value \"\" + badInput true, and only the\n  // following \"5\" fires again with \"-5\". `min` does not help — it drives\n  // constraint validation, not the reported value.\n  if (el.validity?.badInput) return;\n  emit(\"update:modelValue\", Number(el.value));\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:items-stretch\">\n    <input\n      type=\"number\"\n      :data-testid=\"testid\"\n      :class=\"inputGroupInputClass\"\n      :value=\"modelValue\"\n      :min=\"min\"\n      :max=\"max\"\n      @input=\"onInput\"\n    />\n    <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n  label?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:mb-3.5\">\n    <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n  label?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:mb-3.5\">\n    <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n    <slot />\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { E as e, F as t, N as n, S as r, at as i, f as a, g as o, h as s, lt as c, m as l, p as u, u as d, ut as f } from "./draggable-D2vo-aQI.js";
-import { u as p } from "./src-B_QJduQD.js";
+import { u as p } from "./src-BD60gqPW.js";
 import { T as m } from "./keys-BJ770Mwm.js";
 import { t as h } from "./useI18n-DIhawILp.js";
 import { $ as g, D as _, E as v, p as y } from "./icons-BTdLXRXn.js";
@@ -124,4 +124,4 @@ var b = ["aria-label"], x = [
 //#endregion
 export { S as n, T as t };
 
-//# sourceMappingURL=MergeTagModeToggle-BRW3qErZ.js.map
+//# sourceMappingURL=MergeTagModeToggle-DZtnCj0F.js.map

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

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

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

@@ -1,5 +1,5 @@
 import { E as e, F as t, N as n, Q as r, R as i, S as a, at as o, b as s, c, ct as l, d as u, f as d, g as f, h as p, l as m, lt as h, m as g, p as _, q as v, u as y, ut as b, y as x } from "./draggable-D2vo-aQI.js";
-import { E as S, S as C, T as w, x as T } from "./useEditorCore-o2emEjgF.js";
+import { E as S, S as C, T as w, x as T } from "./useEditorCore-BQeEwEQ9.js";
 import { t as E } from "./dist-El3fQnfk.js";
 import { B as D, D as O, H as k, W as ee, _ as te, h as ne, w as A } from "./keys-BJ770Mwm.js";
 import { t as j } from "./useI18n-DIhawILp.js";
@@ -498,7 +498,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 					import("./tiptap-Bqy-H6CT.js").then((e) => e.f),
 					import("./tiptap-Bqy-H6CT.js").then((e) => e.d),
 					import("./tiptap-Bqy-H6CT.js").then((e) => e.u),
-					import("./extensions-BQefRevf.js")
+					import("./extensions-D30V0hzj.js")
 				]);
 				return {
 					TiptapEditor: o,
@@ -609,4 +609,4 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 //#endregion
 export { Ne as default };
 
-//# sourceMappingURL=ParagraphEditor-CPVnO48U.js.map
+//# sourceMappingURL=ParagraphEditor-BalgLjBt.js.map