@templatical/editor 0.24.1 → 0.25.0

package/dist/cdn/chunks/{DesignReferenceSidebar-YeqxSsxO.js → DesignReferenceSidebar-DPqBr-ut.js}

@@ -1,11 +1,11 @@
 import { H as e, M as t, V as n, Z as r, ct as i, f as a, g as o, h as s, it as c, k as ee, m as te, n as ne, o as re, ot as ie, p as l, st as u, v as d, x as f, y as p, z as ae } from "./draggable-JcMTNF3U.js";
 import "./timeouts-SsLMC4a3.js";
-import { H as m, h as oe, r as se } from "./keys-CswSK7eb.js";
+import { G as m, g as oe, i as se } from "./keys-BxPCfHBH.js";
 import { St as ce, jt as le, n as h, pt as g, s as ue, xt as _ } from "./icons-Cp4ZIJw-.js";
 import { t as de } from "./LoadingTrack-G2tuXqCJ.js";
 import { t as v } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { n as fe } from "./useCloudI18n-sx1pqEbY.js";
-import { m as pe } from "./cloud-CRlDc0Ev.js";
+import { n as fe } from "./useCloudI18n-CjVzv11v.js";
+import { m as pe } from "./cloud-DOaGUdR0.js";
 //#region src/cloud/components/DesignReferenceSidebar.vue?vue&type=script&setup=true&lang.ts
 var me = {
 	key: 0,
@@ -220,4 +220,4 @@ var me = {
 //#endregion
 export { L as default };
 
-//# sourceMappingURL=DesignReferenceSidebar-YeqxSsxO.js.map
+//# sourceMappingURL=DesignReferenceSidebar-DPqBr-ut.js.map

package/dist/cdn/chunks/{DesignReferenceSidebar-YeqxSsxO.js.map → DesignReferenceSidebar-DPqBr-ut.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DesignReferenceSidebar-YeqxSsxO.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:duration-150 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 tpl:duration-150\"\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 tpl:duration-150\"\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:duration-150 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 tpl:duration-150\"\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:duration-150 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:duration-150 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:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\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:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n            :disabled=\"!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:duration-150 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 tpl:duration-150\"\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 tpl:duration-150\"\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:duration-150 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 tpl:duration-150\"\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:duration-150 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:duration-150 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:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\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:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n            :disabled=\"!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-DPqBr-ut.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:duration-150 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 tpl:duration-150\"\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 tpl:duration-150\"\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:duration-150 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 tpl:duration-150\"\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:duration-150 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:duration-150 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:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\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:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n            :disabled=\"!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:duration-150 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 tpl:duration-150\"\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 tpl:duration-150\"\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:duration-150 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 tpl:duration-150\"\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:duration-150 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:duration-150 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:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\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:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n            :disabled=\"!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/{IssuesPanel-BhsvC3XQ.js → IssuesPanel-DoQWb23r.js}

@@ -1,6 +1,6 @@
 import { L as e, M as t, P as n, T as r, ct as i, f as a, g as o, h as s, it as c, m as l, ot as u, p as d, u as f, v as p, x as m, y as h } from "./draggable-JcMTNF3U.js";
-import { L as g, h as _ } from "./keys-CswSK7eb.js";
-import { t as v } from "./useI18n-vD57BfVR.js";
+import { B as g, g as _ } from "./keys-BxPCfHBH.js";
+import { t as v } from "./useI18n-DniEFeIl.js";
 import { Vt as y, dt as b, jt as x, r as S, st as C, u as w } from "./icons-Cp4ZIJw-.js";
 //#region src/components/sidebar/IssuesPanel.vue?vue&type=script&setup=true&lang.ts
 var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:flex tpl:items-center tpl:gap-2" }, D = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, O = ["title"], k = {
@@ -95,4 +95,4 @@ var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:
 //#endregion
 export { R as default };
 
-//# sourceMappingURL=IssuesPanel-BhsvC3XQ.js.map
+//# sourceMappingURL=IssuesPanel-DoQWb23r.js.map

package/dist/cdn/chunks/{IssuesPanel-BhsvC3XQ.js.map → IssuesPanel-DoQWb23r.js.map}

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

package/dist/cdn/chunks/{MergeTagModeToggle-DrdxQA0K.js → MergeTagModeToggle-CWuVC3MU.js}

@@ -1,7 +1,7 @@
 import { M as e, P as t, T as n, ct as r, f as i, g as a, h as o, it as s, m as c, p as l, st as u, u as d, x as f } from "./draggable-JcMTNF3U.js";
-import { l as p } from "./src-D5mfLR4V.js";
-import { T as m } from "./keys-CswSK7eb.js";
-import { t as h } from "./useI18n-vD57BfVR.js";
+import { u as p } from "./src-CZjSXPYq.js";
+import { E as m } from "./keys-BxPCfHBH.js";
+import { t as h } from "./useI18n-DniEFeIl.js";
 import { $ as g, E as _, T as v, p as y } from "./icons-Cp4ZIJw-.js";
 //#region src/components/ViewportToggle.vue?vue&type=script&setup=true&lang.ts
 var b = ["aria-label"], x = [
@@ -124,4 +124,4 @@ var b = ["aria-label"], x = [
 //#endregion
 export { S as n, T as t };
 
-//# sourceMappingURL=MergeTagModeToggle-DrdxQA0K.js.map
+//# sourceMappingURL=MergeTagModeToggle-CWuVC3MU.js.map

package/dist/cdn/chunks/{MergeTagModeToggle-DrdxQA0K.js.map → MergeTagModeToggle-CWuVC3MU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagModeToggle-DrdxQA0K.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-CWuVC3MU.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/{NumberWithSuffix-BK_Xh4w4.js → NumberWithSuffix-DQ4sgvt5.js}

@@ -1,5 +1,5 @@
 import { F as e, L as t, M as n, P as r, ct as i, f as a, g as o, h as s, it as c, m as l, ot as u, p as d, st as f, u as p, v as m, x as h } from "./draggable-JcMTNF3U.js";
-import { h as g, m as _, p as v } from "./ColorPicker-B-ymPPtU.js";
+import { h as g, m as _, p as v } from "./ColorPicker-_1O7YU2z.js";
 //#region src/components/ToggleSwitch.vue?vue&type=script&setup=true&lang.ts
 var y = { key: 0 }, b = {
 	key: 0,
@@ -120,4 +120,4 @@ var y = { key: 0 }, b = {
 //#endregion
 export { S as i, D as n, T as r, A as t };
 
-//# sourceMappingURL=NumberWithSuffix-BK_Xh4w4.js.map
+//# sourceMappingURL=NumberWithSuffix-DQ4sgvt5.js.map

package/dist/cdn/chunks/{NumberWithSuffix-BK_Xh4w4.js.map → NumberWithSuffix-DQ4sgvt5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NumberWithSuffix-BK_Xh4w4.js","names":["$slots"],"sources":["../../../src/components/ToggleSwitch.vue","../../../src/components/ToggleSwitch.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/toolbar/NumberWithSuffix.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 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 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 { 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","<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\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:items-stretch\">\n    <input\n      type=\"number\"\n      :class=\"inputGroupInputClass\"\n      :value=\"modelValue\"\n      :min=\"min\"\n      :max=\"max\"\n      @input=\"\n        emit(\n          'update:modelValue',\n          Number(($event.target as HTMLInputElement).value),\n        )\n      \"\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\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:items-stretch\">\n    <input\n      type=\"number\"\n      :class=\"inputGroupInputClass\"\n      :value=\"modelValue\"\n      :min=\"min\"\n      :max=\"max\"\n      @input=\"\n        emit(\n          'update:modelValue',\n          Number(($event.target as HTMLInputElement).value),\n        )\n      \"\n    />\n    <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAO;oBAMX,EAAA,GAAA,EAgCQ,SAAA,EA/BL,OAAK,EAAA,CAAA,2DAA2E,EAAA,WAAQ,2BAAA,oBAAA,CAAA,EAAA,GAAA,CAK7EA,EAAAA,OAAO,WAAW,EAAA,SAAS,EAAA,YAAvC,EAAA,GAAA,EAGO,QAAA,GAAA,CAFL,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAf,EAAA,EAAA,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,GACF,EAAA,YAAZ,EAAA,GAAA,EAAoE,QAApE,GAA2D,IAAE,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAE/D,EAqBS,UAAA;GApBP,MAAK;GACL,MAAK;GACJ,gBAAc,EAAA;GACd,cAAY,EAAA;GACZ,UAAU,EAAA;GACV,OAAK,EAAA;;IAA6K,EAAA,aAAA,gCAAA;IAAuG,EAAA,WAAA,0CAAA;;GASzR,SAAK,AAAA,EAAA,QAAA,MAAA,CAAG,EAAA,YAAY,EAAI,qBAAA,CAAuB,EAAA,UAAU;EAE1D,GAAA,CAAA,EAGE,QAAA,EAFA,OAAK,EAAA,CAAC,oJACE,EAAA,aAAU,sBAAA,mBAAA,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,IAAA,CAAA,CAAA,GAAA,CAAA;;;;;;;;;;;;;;;EEjC1B,IAAM,IAAQ,GAKR,IAAO,GAIP,IAAgB,QACpB,EAAM,QAAQ,WAAW,MAAM,EAAE,UAAU,EAAM,UAAU,CAC7D,GAEM,IAAa,QACX,cAAc,KAAK,IAAI,EAAc,OAAO,CAAC,IAAI,IAAI,GAC7D;oBAIE,EAAA,GAAA,EAiDM,OAAA;GAhDJ,MAAK;GACL,OAAM;GACL,OAAK,EAAA;IAAyC,qBAAA,UAAA,EAAA,QAAQ,OAAM;;;EASrD,GAAA,CAAA,EAAA,SAAa,KADrB,EAAA,GAAA,EAWO,OAAA;;GATL,OAAM;GACL,OAAK,EAAA;;IAA+D,OAAA,uBAAA,EAAA,QAAQ,OAAM;IAAwB,WAAA,EAAA;;;;;EAU7G,GAAA,MAAA,CAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAwBS,GAAA,MAAA,EAvBU,EAAA,UAAV,OADT,EAAA,GAAA,EAwBS,UAAA;GAtBN,KAAK,EAAO;GACb,MAAK;GACJ,gBAAc,EAAA,eAAe,EAAO;GACpC,cAAY,EAAO;GACpB,OAAM;GACL,OAAK,EAAA;IAA6B,OAAA,EAAA,eAAe,EAAO,QAAA,uBAAA;;;GAOxD,OAAO,EAAO;GACd,UAAK,MAAE,EAAI,qBAAsB,EAAO,KAAK;EAItC,GAAA,CAAA,EAAO,QAFf,EAAA,GAAA,EAKE,EAJK,EAAO,IAAI,GAAA;;GAEf,MAAM;GACN,gBAAc;EAEjB,CAAA,MAAA,EAAA,GAAA,EAAsC,QAAA,GAAA,EAAtB,EAAO,KAAK,GAAA,CAAA,EAAA,GAAA,IAAA,CAAA;;;;;;oBEnEhC,EAAA,GAAA,EAGM,OAHN,GAGM,CAFS,EAAA,SAAb,EAAA,GAAA,EAA2D,SAAA;;GAAtC,OAAK,EAAE,EAAA,CAAA,CAAU;EAAK,GAAA,EAAA,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAChD,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;;;;;;;;;;;;;;;;EEEZ,IAAM,IAAO;oBAMX,EAAA,GAAA,EAeM,OAfN,GAeM,CAdJ,EAYE,SAAA;GAXA,MAAK;GACJ,OAAK,EAAE,EAAA,CAAA,CAAoB;GAC3B,OAAO,EAAA;GACP,KAAK,EAAA;GACL,KAAK,EAAA;GACL,SAAK,AAAA,EAAA,QAAA,MAAW,EAAA,qBAA+C,OAAQ,EAAO,OAA4B,KAAK,CAAA;EAOlH,GAAA,MAAA,IAAA,CAAA,GAAA,EAAmD,QAAA,EAA5C,OAAK,EAAE,EAAA,CAAA,CAAgB,EAAK,GAAA,EAAA,EAAA,MAAM,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"NumberWithSuffix-DQ4sgvt5.js","names":["$slots"],"sources":["../../../src/components/ToggleSwitch.vue","../../../src/components/ToggleSwitch.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/toolbar/NumberWithSuffix.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 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 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 { 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","<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\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:items-stretch\">\n    <input\n      type=\"number\"\n      :class=\"inputGroupInputClass\"\n      :value=\"modelValue\"\n      :min=\"min\"\n      :max=\"max\"\n      @input=\"\n        emit(\n          'update:modelValue',\n          Number(($event.target as HTMLInputElement).value),\n        )\n      \"\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\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:items-stretch\">\n    <input\n      type=\"number\"\n      :class=\"inputGroupInputClass\"\n      :value=\"modelValue\"\n      :min=\"min\"\n      :max=\"max\"\n      @input=\"\n        emit(\n          'update:modelValue',\n          Number(($event.target as HTMLInputElement).value),\n        )\n      \"\n    />\n    <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{ParagraphEditor-DKz4vTWB.js → ParagraphEditor-Uv5LPF3W.js}

@@ -1,13 +1,13 @@
 import { K as e, L as t, M as n, P as r, T as i, Z as a, c as o, ct as s, d as c, f as l, g as u, h as d, it as f, l as p, m, ot as h, p as g, st as _, u as v, v as y, x as b, y as x } from "./draggable-JcMTNF3U.js";
-import { D as S, E as C, S as w, x as T } from "./useEditorCore-ZqF7P99K.js";
+import { D as S, E as C, S as w, x as T } from "./useEditorCore-DfW-thCr.js";
 import { t as E } from "./dist-B8AX9np4.js";
-import { B as D, D as O, H as k, R as ee, _ as te, h as ne, w as A } from "./keys-CswSK7eb.js";
-import { t as j } from "./useI18n-vD57BfVR.js";
-import { n as M } from "./usePopoverPosition-BdQ3Sv4B.js";
+import { G as D, O, T as k, U as ee, V as te, g as ne, v as A } from "./keys-BxPCfHBH.js";
+import { t as j } from "./useI18n-DniEFeIl.js";
+import { n as M } from "./usePopoverPosition-C4xFJCJ2.js";
 import { Bt as re, D as N, Lt as ie, P as ae, R as oe, at as se, b as ce, ct as le, g as ue, h as de, it as fe, l as pe, m as me, ot as he, ut as ge, v as _e, x as ve } from "./icons-Cp4ZIJw-.js";
 import { t as P } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { c as F, o as ye, r as be, s as xe, t as I } from "./ColorPicker-B-ymPPtU.js";
-import { n as L, t as R } from "./RichTextEditorContent-CJ2WVicQ.js";
+import { c as F, o as ye, r as be, s as xe, t as I } from "./ColorPicker-_1O7YU2z.js";
+import { n as L, t as R } from "./RichTextEditorContent-Bt3s09qY.js";
 //#region src/components/blocks/EmojiPickerDropdown.vue?vue&type=script&setup=true&lang.ts
 var z = [
 	"aria-label",
@@ -156,7 +156,7 @@ var we = ["data-tpl-theme", "aria-label"], Te = { class: "tpl:flex tpl:items-cen
 		"add-logic-tag"
 	],
 	setup(e, { emit: t }) {
-		let r = e, a = t, o = i(ee, null), p = i(D, null), h = k(te, "ParagraphToolbar"), b = M(), S = i(O, null), C = i(A, null), w = i(ne, null), T = l(() => (S?.isOpen.value ?? !1) || (C?.isOpen.value ?? !1)), { t: E } = j(), N = h.fonts;
+		let r = e, a = t, o = i(te, null), p = i(ee, null), h = D(A, "ParagraphToolbar"), b = M(), S = i(O, null), C = i(k, null), w = i(ne, null), T = l(() => (S?.isOpen.value ?? !1) || (C?.isOpen.value ?? !1)), { t: E } = j(), N = h.fonts;
 		function P(e) {
 			r.editor?.chain().focus().insertContent(e).run();
 		}
@@ -487,7 +487,7 @@ var we = ["data-tpl-theme", "aria-label"], Te = { class: "tpl:flex tpl:items-cen
 					import("./tiptap-rsib432n.js").then((e) => e.f),
 					import("./tiptap-rsib432n.js").then((e) => e.d),
 					import("./tiptap-rsib432n.js").then((e) => e.u),
-					import("./extensions-CKMD_er_.js")
+					import("./extensions-5jgtarD-.js")
 				]);
 				return {
 					TiptapEditor: a,
@@ -597,4 +597,4 @@ var we = ["data-tpl-theme", "aria-label"], Te = { class: "tpl:flex tpl:items-cen
 //#endregion
 export { Me as default };
 
-//# sourceMappingURL=ParagraphEditor-DKz4vTWB.js.map
+//# sourceMappingURL=ParagraphEditor-Uv5LPF3W.js.map