@templatical/editor 0.43.3 → 0.44.0

package/dist/cdn/chunks/{CountdownToolbar-DfyqIppF.js.map → CountdownToolbar-C9QpHQcv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CountdownToolbar-DfyqIppF.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","FieldRow","_unref","_withCtx","_createElementVNode","_normalizeClass","_renderList","_toDisplayString","_createBlock","ToggleSwitch","SlidingPillSelect","NumberWithSuffix","ColorPicker","_sfc_main","renderList","withCtx","openBlock","defineComponent","unref","createVNode","normalizeClass","computed","createElementBlock","createBlock","createBaseVNode","Fragment","toDisplayString","useI18n","inputClass","ColorPicker_default","ToggleSwitch_default","SlidingPillSelect_default","FieldRow_default","NumberWithSuffix_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","CountdownToolbar_default","__emit","emit","TIMEZONES","SEPARATORS","UNITS","unitItems","unit","updateField","field","value","t","__props","_cache","$event","tz","item","font"],"sources":["../../../src/components/toolbar/CountdownToolbar.vue","../../../src/components/toolbar/CountdownToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport ToggleSwitch from \"../ToggleSwitch.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      \"days\" | \"hours\" | \"minutes\" | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <ToggleSwitch\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        class=\"tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <ToggleSwitch\n    class=\"tpl:mb-3.5 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport ToggleSwitch from \"../ToggleSwitch.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      \"days\" | \"hours\" | \"minutes\" | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <ToggleSwitch\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        class=\"tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <ToggleSwitch\n    class=\"tpl:mb-3.5 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"CountdownToolbar-C9QpHQcv.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","FieldRow","_unref","_withCtx","_createElementVNode","_normalizeClass","_renderList","_toDisplayString","_createBlock","ToggleSwitch","SlidingPillSelect","NumberWithSuffix","ColorPicker","_sfc_main","renderList","withCtx","openBlock","defineComponent","unref","createVNode","normalizeClass","computed","createElementBlock","createBlock","createBaseVNode","Fragment","toDisplayString","useI18n","inputClass","ColorPicker_default","ToggleSwitch_default","SlidingPillSelect_default","FieldRow_default","NumberWithSuffix_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","CountdownToolbar_default","__emit","emit","TIMEZONES","SEPARATORS","UNITS","unitItems","unit","updateField","field","value","t","__props","_cache","$event","tz","item","font"],"sources":["../../../src/components/toolbar/CountdownToolbar.vue","../../../src/components/toolbar/CountdownToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport ToggleSwitch from \"../ToggleSwitch.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      \"days\" | \"hours\" | \"minutes\" | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <ToggleSwitch\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        class=\"tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <ToggleSwitch\n    class=\"tpl:mb-3.5 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport ToggleSwitch from \"../ToggleSwitch.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      \"days\" | \"hours\" | \"minutes\" | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <ToggleSwitch\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        class=\"tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <ToggleSwitch\n    class=\"tpl:mb-3.5 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAgBA,IAAMoD,IAAOD,GAIP,EAAE,SAAMrB,EAAQ,GAEhBuB,IAAY;GAChB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GAEMC,IAAa;GACjB;IAAE,OAAO;IAAK,OAAO;GAAI;GACzB;IAAE,OAAO;IAAK,OAAO;GAAI;GACzB;IAAE,OAAO;IAAK,OAAO;GAAI;EAC3B,GAGMC,IAAmB;GAAC;GAAQ;GAAS;GAAW;EAAS,GAEzDC,IAAYhC,QAChB+B,EAAM,KAAK,OAAU;GACnB;GACA,SAAS,OAAOE;GAChB,UAAU,QAAQA;GAClB,gBAAgBA,EAAK,YAAY;EAEnC,EAAE,CACJ;EAEA,SAASC,EAAY,GAA6B,GAAsB;GACtE,EAAK,UAAU,GAAGC,IAAQC,EAAM,CAA4B;EAC9D;;GAIEzD,EASWC,GAAA,EATA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,WAAA,GAAA;IAC5B,SAAAvD,QAOE,CAPFC,EAOE,SAAA;KANA,MAAK;KACJ,OAAKC,EAAEH,EAAA0B,CAAA,CAAU;KACjB,OAAO+B,EAAA,MAAM;KACb,SAAK,AAAAC,EAAA,QAAA,MAAWL,EAAW,cAAgBM,EAAO,OAA4B,KAAK;;;;GAMxF7D,EAUWC,GAAA,EAVA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,SAAA,GAAA;IAC5B,SAAAvD,QAQS,CARTC,EAQS,UAAA;KAPN,OAAKC,EAAEH,EAAA0B,CAAA,CAAU;KACjB,OAAO+B,EAAA,MAAM;KACb,UAAM,AAAAC,EAAA,QAAA,MAAWL,EAAW,YAAcM,EAAO,OAA6B,KAAK;IAIpFhE,GAAAA,EAAAA,EAAA,GAAAC,EAAuEC,GAAA,MAAAO,EAAlD4C,IAAN,MAAf9C,EAAuE,UAAA;KAAtC,KAAK0D;KAAK,OAAOA;IAAO,GAAAvD,EAAAuD,CAAE,GAAA,GAAA1B,CAAA;;;GAI/DpC,EAWWC,GAAA,EAXA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,QAAA,GAAA;IAC5B,SAAAvD,QASM,CATNC,EASM,OATNiC,GASM,EARJxC,EAAA,EAAA,GAAAC,EAOEC,GAAA,MAAAO,EANe+C,EAAA,QAAR,OADTxD,EAAA,GAAAW,EAOEC,GAAA;KALC,KAAKsD,EAAK;KACX,OAAM;KACL,eAAaJ,EAAA,MAAMI,EAAK;KACxB,OAAO7D,EAAAwD,CAAA,CAAC,CAAC,UAAUK,EAAK;KACxB,wBAAkB,MAAER,EAAYQ,EAAK,SAASF,CAAM;;;;;;;;GAK3D7D,EAMWC,GAAA,EANA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,UAAA,GAAA;IAC5B,SAAAvD,QAIE,CAJFH,EAIEU,GAAA;KAHC,SAASyC;KACT,eAAaQ,EAAA,MAAM;KACnB,uBAAkB,AAAAC,EAAA,QAAA,MAAEL,EAAW,aAAcM,CAAM;;;;GAIxD7D,EAoBWC,GAAA,EApBA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,WAAA,GAAA;IAC5B,SAAAvD,QAkBS,CAlBTC,EAkBS,UAAA;KAjBN,OAAKC,EAAEH,EAAA0B,CAAA,CAAU;KACjB,OAAO+B,EAAA,MAAM,cAAU;KACvB,UAAM,AAAAC,EAAA,QAAA,MAAWL,EAAA,cAAgDM,EAAO,OAA6B,SAAS,KAAA,CAAA;IAO/GzD,GAAAA,CAAAA,EAAuD,UAAvDmC,GAAuDhC,EAAnCL,EAAAwD,CAAA,CAAC,CAAC,UAAU,WAAW,GAAA,CAAA,IAC3C7D,EAAA,EAAA,GAAAC,EAMSC,GAAA,MAAAO,EALQqD,EAAA,eAAR,OADT9D,EAAA,GAAAC,EAMS,UAAA;KAJN,KAAKkE,EAAK;KACV,OAAOA,EAAK;IAEV,GAAAzD,EAAAyD,EAAK,KAAK,GAAA,GAAAxB,CAAA;;;GAKnBpC,EAmBM,OAnBNqC,GAmBM,CAlBJzC,EAQWC,GAAA,EARA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,cAAA,GAAA;IAC5B,SAAAvD,QAME,CANFH,EAMEW,GAAA;KALC,eAAagD,EAAA,MAAM;KACnB,KAAK;KACL,KAAK;KACN,QAAO;KACN,uBAAkB,AAAAC,EAAA,QAAA,MAAEL,EAAW,iBAAkBM,CAAM;;;GAG5D7D,GAAAA,GAAAA,CAAAA,OAAAA,CAAAA,GAAAA,EAQWC,GAAA,EARA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,cAAA,GAAA;IAC5B,SAAAvD,QAME,CANFH,EAMEW,GAAA;KALC,eAAagD,EAAA,MAAM;KACnB,KAAK;KACL,KAAK;KACN,QAAO;KACN,uBAAkB,AAAAC,EAAA,QAAA,MAAEL,EAAW,iBAAkBM,CAAM;;;;GAK9DzD,EAaM,OAbNsC,GAaM,CAZJ1C,EAKWC,GAAA,EALA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,WAAA,GAAA;IAC5B,SAAAvD,QAGE,CAHFH,EAGEY,GAAA;KAFC,eAAa+C,EAAA,MAAM;KACnB,uBAAkB,AAAAC,EAAA,QAAA,MAAEL,EAAW,cAAeM,CAAM;;;GAGzD7D,GAAAA,GAAAA,CAAAA,OAAAA,CAAAA,GAAAA,EAKWC,GAAA,EALA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,WAAA,GAAA;IAC5B,SAAAvD,QAGE,CAHFH,EAGEY,GAAA;KAFC,eAAa+C,EAAA,MAAM;KACnB,uBAAkB,AAAAC,EAAA,QAAA,MAAEL,EAAW,cAAeM,CAAM;;;;GAK3D7D,EAKWC,GAAA,EALA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,WAAA,GAAA;IAC5B,SAAAvD,QAGE,CAHFH,EAGEY,GAAA;KAFC,eAAa+C,EAAA,MAAM;KACnB,uBAAkB,AAAAC,EAAA,QAAA,MAAEL,EAAW,mBAAoBM,CAAM;;;;GAI9D7D,EAcWC,GAAA,EAdA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,OAAA,GAAA;IAC5B,SAAAvD,QAYM,CAZNC,EAYM,OAZNuC,GAYM,EAXJ9C,EAAA,EAAA,GAAAC,EAUEC,GAAA,MAAAO,EATe+C,EAAA,QAAR,OADTxD,EAAA,GAAAC,EAUE,SAAA;KARC,KAAKiE,EAAK;KACX,MAAK;KACJ,OAAK1D,EAAEH,EAAA0B,CAAA,CAAU;KACjB,OAAO+B,EAAA,MAAMI,EAAK;KAClB,aAAa7D,EAAAwD,CAAA,CAAC,CAAC,UAAUK,EAAK;KAC9B,UAAK,MAAaR,EAAYQ,EAAK,UAAWF,EAAO,OAA4B,KAAK;;;;GAO7F7D,EAUWC,GAAA,EAVA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,OAAA,GAAA;IAC5B,SAAAvD,QAQE,CARFC,EAQE,SAAA;KAPA,MAAK;KACJ,OAAKC,EAAEH,EAAA0B,CAAA,CAAU;KACjB,OAAO+B,EAAA,MAAM;KACb,aAAazD,EAAAwD,CAAA,CAAC,CAAC,UAAU;KACzB,SAAK,AAAAE,EAAA,QAAA,MAAWL,EAAW,kBAAoBM,EAAO,OAA4B,KAAK;;;;GAM5F7D,EAaWC,GAAA,EAbA,OAAOC,EAAAwD,CAAA,CAAC,CAAC,UAAU,gBAAA,GAAA;IAC5B,SAAAvD,QAWE,CAXFC,EAWE,SAAA;KAVA,MAAK;KACJ,OAAKC,EAAEH,EAAA0B,CAAA,CAAU;KACjB,OAAO+B,EAAA,MAAM;KACd,aAAY;KACX,SAAK,AAAAC,EAAA,SAAA,MAAWL,EAAA,mBAAqDM,EAAO,OAA4B,KAAA;;;;GAS7G7D,EAKES,GAAA;IAJA,OAAM;IACL,eAAakD,EAAA,MAAM;IACnB,OAAOzD,EAAAwD,CAAA,CAAC,CAAC,UAAU;IACnB,uBAAkB,AAAAE,EAAA,SAAA,MAAEL,EAAW,gBAAiBM,CAAM"}

package/dist/cdn/chunks/{DesignReferenceSidebar-C6O12hvt.js → DesignReferenceSidebar-BO0xz1wC.js}

@@ -1,12 +1,12 @@
 import { A as e, B as t, H as n, N as r, Q as i, S as a, U as ee, at as o, b as s, ct as c, f as te, g as l, h as u, lt as d, m as ne, n as re, o as ie, p as f, ut as p, y as m } from "./draggable-IB4x6w2O.js";
 import { $ as h, g as ae, i as oe } from "./keys-DCWeHkSF.js";
 import "./timeouts-DHPZQ0G3.js";
-import { Ct as se, Nt as ce, St as g, mt as _, n as v, s as le } from "./icons-BF0mJX0V.js";
+import { Ct as se, Nt as ce, St as g, mt as _, n as v, s as le } from "./icons-BjvraR-Y.js";
 import { t as ue } from "./LoadingTrack-_7DH_5aw.js";
 import { t as y } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { n as de } from "./useCloudI18n-CrjWbpbu.js";
 import { v as b } from "./styleConstants-C_YAPdQS.js";
-import { _ as fe } from "./cloud-De-eh1u6.js";
+import { _ as fe } from "./cloud-DLQU5l0Z.js";
 //#region src/cloud/components/DesignReferenceSidebar.vue?vue&type=script&setup=true&lang.ts
 var pe = ["aria-label"], me = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, he = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]" }, ge = ["aria-label"], _e = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, x = {
 	key: 0,
@@ -227,4 +227,4 @@ var pe = ["aria-label"], me = { class: "tpl:flex tpl:items-center tpl:justify-be
 //#endregion
 export { R as default };
 
-//# sourceMappingURL=DesignReferenceSidebar-C6O12hvt.js.map
+//# sourceMappingURL=DesignReferenceSidebar-BO0xz1wC.js.map

package/dist/cdn/chunks/{DesignReferenceSidebar-C6O12hvt.js.map → DesignReferenceSidebar-BO0xz1wC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DesignReferenceSidebar-C6O12hvt.js","names":["_openBlock","_createBlock","_Transition","_withCtx","_createElementBlock","_unref","_createElementVNode","_createVNode","_toDisplayString","LoadingTrack","_normalizeStyle","_createTextVNode","_withDirectives","_normalizeClass","_vModelText","_createCommentVNode","_sfc_main","onBeforeUnmount","watch","withCtx","openBlock","ref","defineComponent","withDirectives","unref","createVNode","normalizeClass","computed","createElementBlock","createCommentVNode","normalizeStyle","createBlock","Transition","vModelText","createBaseVNode","toDisplayString","createTextVNode","requireInject","EDITOR_KEY","AUTH_MANAGER_KEY","FileImage","CircleAlert","FileText","ImageUp","X","Upload","LoadingTrack_default","_plugin_vue_export_helper_default","useCloudI18nStrict","primaryBtnClass","useDesignReference","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","_hoisted_23","_hoisted_24","_hoisted_25","_hoisted_26","_hoisted_27","DesignReferenceSidebar_default","__emit","props","__props","emit","cloudT","editor","authManager","designReference","content","fileInput","activeTab","selectedFile","prompt","filePreviewUrl","showConfirmation","isDragging","canGenerate","selectTab","tab","clearFile","handleFileSelect","input","event","file","setFile","handleDragOver","handleDragLeave","handleDrop","handleGenerate","cancelConfirmation","isVisible","_cache","$event"],"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 { primaryBtnClass } from \"../../constants/styleConstants\";\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      role=\"complementary\"\n      :aria-label=\"cloudT.designReference.title\"\n      class=\"tpl-design-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\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          type=\"button\"\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n          :aria-label=\"cloudT.designReference.close\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"designReference.isGenerating.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <div\n            class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3\"\n          >\n            <LoadingTrack />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudT.designReference.generating }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Input form -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n          <!-- Source tabs -->\n          <div\n            class=\"tpl:flex tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n          >\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'image' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'image'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'image' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('image')\"\n            >\n              <FileImage :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadImage }}\n            </button>\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'pdf' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'pdf'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'pdf' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('pdf')\"\n            >\n              <FileText :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadPdf }}\n            </button>\n          </div>\n\n          <!-- File upload area (image or pdf) -->\n          <div>\n            <!-- Preview -->\n            <div v-if=\"selectedFile\" class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n              <div\n                class=\"tpl:relative tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n              >\n                <!-- Image preview -->\n                <img\n                  v-if=\"filePreviewUrl\"\n                  :src=\"filePreviewUrl\"\n                  :alt=\"selectedFile.name\"\n                  class=\"tpl:h-auto tpl:max-h-48 tpl:w-full tpl:object-contain\"\n                />\n                <!-- PDF preview (icon-based) -->\n                <div\n                  v-else\n                  class=\"tpl:flex tpl:h-32 tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2\"\n                >\n                  <FileText\n                    :size=\"32\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\">\n                    {{ selectedFile.name }}\n                  </span>\n                </div>\n                <!-- Remove button -->\n                <button\n                  class=\"tpl:absolute tpl:top-2 tpl:right-2 tpl:rounded-full tpl:p-1 tpl:transition-colors tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:shadow-[var(--tpl-shadow)]\"\n                  @click=\"clearFile\"\n                >\n                  <X :size=\"12\" :stroke-width=\"2\" />\n                </button>\n              </div>\n            </div>\n\n            <!-- Drop zone -->\n            <div\n              v-else\n              class=\"tpl-design-dropzone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border-2 tpl:border-dashed tpl:px-4 tpl:py-8 tpl:transition-colors\"\n              :style=\"{\n                borderColor: isDragging\n                  ? 'var(--tpl-primary)'\n                  : 'var(--tpl-border-light)',\n                backgroundColor: isDragging\n                  ? 'var(--tpl-primary-light)'\n                  : 'var(--tpl-bg)',\n              }\"\n              @click=\"fileInput?.click()\"\n              @dragover=\"handleDragOver\"\n              @dragleave=\"handleDragLeave\"\n              @drop=\"handleDrop\"\n            >\n              <Upload\n                :size=\"24\"\n                :stroke-width=\"1.5\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <span\n                class=\"tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n              >\n                {{ cloudT.designReference.dropHint }}\n              </span>\n              <span\n                class=\"tpl:text-center tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  activeTab === \"image\"\n                    ? cloudT.designReference.acceptedImages\n                    : cloudT.designReference.acceptedPdf\n                }}\n              </span>\n            </div>\n            <input\n              ref=\"fileInput\"\n              type=\"file\"\n              class=\"tpl:hidden\"\n              :accept=\"\n                activeTab === 'image'\n                  ? 'image/png,image/jpeg,image/webp'\n                  : 'application/pdf'\n              \"\n              @change=\"handleFileSelect\"\n            />\n          </div>\n\n          <!-- Prompt textarea -->\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <label\n              class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.designReference.promptLabel }}\n            </label>\n            <textarea\n              v-model=\"prompt\"\n              class=\"tpl:min-h-[72px] tpl:w-full tpl:resize-none tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:font-sans tpl:text-sm tpl:outline-none tpl:transition-colors tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)]\"\n              :class=\"['tpl-design-prompt-input']\"\n              :placeholder=\"cloudT.designReference.promptPlaceholder\"\n              rows=\"3\"\n            />\n          </div>\n\n          <!-- Confirmation overlay -->\n          <div\n            v-if=\"showConfirmation\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:px-3 tpl:py-3 tpl:bg-[var(--tpl-warning-light)] tpl:border tpl:border-[var(--tpl-warning)]\"\n          >\n            <p class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\">\n              {{ cloudT.designReference.replaceWarning }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-2\">\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]\"\n                style=\"background-color: transparent\"\n                @click=\"cancelConfirmation\"\n              >\n                {{ cloudT.designReference.replaceCancel }}\n              </button>\n              <button\n                type=\"button\"\n                :class=\"[primaryBtnClass, 'tpl:flex-1']\"\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            type=\"button\"\n            :class=\"[primaryBtnClass, 'tpl:w-full']\"\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-[10px] 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 { primaryBtnClass } from \"../../constants/styleConstants\";\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      role=\"complementary\"\n      :aria-label=\"cloudT.designReference.title\"\n      class=\"tpl-design-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\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          type=\"button\"\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n          :aria-label=\"cloudT.designReference.close\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"designReference.isGenerating.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <div\n            class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3\"\n          >\n            <LoadingTrack />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudT.designReference.generating }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Input form -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n          <!-- Source tabs -->\n          <div\n            class=\"tpl:flex tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n          >\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'image' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'image'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'image' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('image')\"\n            >\n              <FileImage :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadImage }}\n            </button>\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'pdf' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'pdf'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'pdf' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('pdf')\"\n            >\n              <FileText :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadPdf }}\n            </button>\n          </div>\n\n          <!-- File upload area (image or pdf) -->\n          <div>\n            <!-- Preview -->\n            <div v-if=\"selectedFile\" class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n              <div\n                class=\"tpl:relative tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n              >\n                <!-- Image preview -->\n                <img\n                  v-if=\"filePreviewUrl\"\n                  :src=\"filePreviewUrl\"\n                  :alt=\"selectedFile.name\"\n                  class=\"tpl:h-auto tpl:max-h-48 tpl:w-full tpl:object-contain\"\n                />\n                <!-- PDF preview (icon-based) -->\n                <div\n                  v-else\n                  class=\"tpl:flex tpl:h-32 tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2\"\n                >\n                  <FileText\n                    :size=\"32\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\">\n                    {{ selectedFile.name }}\n                  </span>\n                </div>\n                <!-- Remove button -->\n                <button\n                  class=\"tpl:absolute tpl:top-2 tpl:right-2 tpl:rounded-full tpl:p-1 tpl:transition-colors tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:shadow-[var(--tpl-shadow)]\"\n                  @click=\"clearFile\"\n                >\n                  <X :size=\"12\" :stroke-width=\"2\" />\n                </button>\n              </div>\n            </div>\n\n            <!-- Drop zone -->\n            <div\n              v-else\n              class=\"tpl-design-dropzone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border-2 tpl:border-dashed tpl:px-4 tpl:py-8 tpl:transition-colors\"\n              :style=\"{\n                borderColor: isDragging\n                  ? 'var(--tpl-primary)'\n                  : 'var(--tpl-border-light)',\n                backgroundColor: isDragging\n                  ? 'var(--tpl-primary-light)'\n                  : 'var(--tpl-bg)',\n              }\"\n              @click=\"fileInput?.click()\"\n              @dragover=\"handleDragOver\"\n              @dragleave=\"handleDragLeave\"\n              @drop=\"handleDrop\"\n            >\n              <Upload\n                :size=\"24\"\n                :stroke-width=\"1.5\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <span\n                class=\"tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n              >\n                {{ cloudT.designReference.dropHint }}\n              </span>\n              <span\n                class=\"tpl:text-center tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  activeTab === \"image\"\n                    ? cloudT.designReference.acceptedImages\n                    : cloudT.designReference.acceptedPdf\n                }}\n              </span>\n            </div>\n            <input\n              ref=\"fileInput\"\n              type=\"file\"\n              class=\"tpl:hidden\"\n              :accept=\"\n                activeTab === 'image'\n                  ? 'image/png,image/jpeg,image/webp'\n                  : 'application/pdf'\n              \"\n              @change=\"handleFileSelect\"\n            />\n          </div>\n\n          <!-- Prompt textarea -->\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <label\n              class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.designReference.promptLabel }}\n            </label>\n            <textarea\n              v-model=\"prompt\"\n              class=\"tpl:min-h-[72px] tpl:w-full tpl:resize-none tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:font-sans tpl:text-sm tpl:outline-none tpl:transition-colors tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)]\"\n              :class=\"['tpl-design-prompt-input']\"\n              :placeholder=\"cloudT.designReference.promptPlaceholder\"\n              rows=\"3\"\n            />\n          </div>\n\n          <!-- Confirmation overlay -->\n          <div\n            v-if=\"showConfirmation\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:px-3 tpl:py-3 tpl:bg-[var(--tpl-warning-light)] tpl:border tpl:border-[var(--tpl-warning)]\"\n          >\n            <p class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\">\n              {{ cloudT.designReference.replaceWarning }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-2\">\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]\"\n                style=\"background-color: transparent\"\n                @click=\"cancelConfirmation\"\n              >\n                {{ cloudT.designReference.replaceCancel }}\n              </button>\n              <button\n                type=\"button\"\n                :class=\"[primaryBtnClass, 'tpl:flex-1']\"\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            type=\"button\"\n            :class=\"[primaryBtnClass, 'tpl:w-full']\"\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-[10px] 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-BO0xz1wC.js","names":["_openBlock","_createBlock","_Transition","_withCtx","_createElementBlock","_unref","_createElementVNode","_createVNode","_toDisplayString","LoadingTrack","_normalizeStyle","_createTextVNode","_withDirectives","_normalizeClass","_vModelText","_createCommentVNode","_sfc_main","onBeforeUnmount","watch","withCtx","openBlock","ref","defineComponent","withDirectives","unref","createVNode","normalizeClass","computed","createElementBlock","createCommentVNode","normalizeStyle","createBlock","Transition","vModelText","createBaseVNode","toDisplayString","createTextVNode","requireInject","EDITOR_KEY","AUTH_MANAGER_KEY","FileImage","CircleAlert","FileText","ImageUp","X","Upload","LoadingTrack_default","_plugin_vue_export_helper_default","useCloudI18nStrict","primaryBtnClass","useDesignReference","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","_hoisted_23","_hoisted_24","_hoisted_25","_hoisted_26","_hoisted_27","DesignReferenceSidebar_default","__emit","props","__props","emit","cloudT","editor","authManager","designReference","content","fileInput","activeTab","selectedFile","prompt","filePreviewUrl","showConfirmation","isDragging","canGenerate","selectTab","tab","clearFile","handleFileSelect","input","event","file","setFile","handleDragOver","handleDragLeave","handleDrop","handleGenerate","cancelConfirmation","isVisible","_cache","$event"],"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 { primaryBtnClass } from \"../../constants/styleConstants\";\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      role=\"complementary\"\n      :aria-label=\"cloudT.designReference.title\"\n      class=\"tpl-design-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\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          type=\"button\"\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n          :aria-label=\"cloudT.designReference.close\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"designReference.isGenerating.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <div\n            class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3\"\n          >\n            <LoadingTrack />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudT.designReference.generating }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Input form -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n          <!-- Source tabs -->\n          <div\n            class=\"tpl:flex tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n          >\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'image' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'image'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'image' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('image')\"\n            >\n              <FileImage :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadImage }}\n            </button>\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'pdf' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'pdf'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'pdf' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('pdf')\"\n            >\n              <FileText :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadPdf }}\n            </button>\n          </div>\n\n          <!-- File upload area (image or pdf) -->\n          <div>\n            <!-- Preview -->\n            <div v-if=\"selectedFile\" class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n              <div\n                class=\"tpl:relative tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n              >\n                <!-- Image preview -->\n                <img\n                  v-if=\"filePreviewUrl\"\n                  :src=\"filePreviewUrl\"\n                  :alt=\"selectedFile.name\"\n                  class=\"tpl:h-auto tpl:max-h-48 tpl:w-full tpl:object-contain\"\n                />\n                <!-- PDF preview (icon-based) -->\n                <div\n                  v-else\n                  class=\"tpl:flex tpl:h-32 tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2\"\n                >\n                  <FileText\n                    :size=\"32\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\">\n                    {{ selectedFile.name }}\n                  </span>\n                </div>\n                <!-- Remove button -->\n                <button\n                  class=\"tpl:absolute tpl:top-2 tpl:right-2 tpl:rounded-full tpl:p-1 tpl:transition-colors tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:shadow-[var(--tpl-shadow)]\"\n                  @click=\"clearFile\"\n                >\n                  <X :size=\"12\" :stroke-width=\"2\" />\n                </button>\n              </div>\n            </div>\n\n            <!-- Drop zone -->\n            <div\n              v-else\n              class=\"tpl-design-dropzone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border-2 tpl:border-dashed tpl:px-4 tpl:py-8 tpl:transition-colors\"\n              :style=\"{\n                borderColor: isDragging\n                  ? 'var(--tpl-primary)'\n                  : 'var(--tpl-border-light)',\n                backgroundColor: isDragging\n                  ? 'var(--tpl-primary-light)'\n                  : 'var(--tpl-bg)',\n              }\"\n              @click=\"fileInput?.click()\"\n              @dragover=\"handleDragOver\"\n              @dragleave=\"handleDragLeave\"\n              @drop=\"handleDrop\"\n            >\n              <Upload\n                :size=\"24\"\n                :stroke-width=\"1.5\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <span\n                class=\"tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n              >\n                {{ cloudT.designReference.dropHint }}\n              </span>\n              <span\n                class=\"tpl:text-center tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  activeTab === \"image\"\n                    ? cloudT.designReference.acceptedImages\n                    : cloudT.designReference.acceptedPdf\n                }}\n              </span>\n            </div>\n            <input\n              ref=\"fileInput\"\n              type=\"file\"\n              class=\"tpl:hidden\"\n              :accept=\"\n                activeTab === 'image'\n                  ? 'image/png,image/jpeg,image/webp'\n                  : 'application/pdf'\n              \"\n              @change=\"handleFileSelect\"\n            />\n          </div>\n\n          <!-- Prompt textarea -->\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <label\n              class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.designReference.promptLabel }}\n            </label>\n            <textarea\n              v-model=\"prompt\"\n              class=\"tpl:min-h-[72px] tpl:w-full tpl:resize-none tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:font-sans tpl:text-sm tpl:outline-none tpl:transition-colors tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)]\"\n              :class=\"['tpl-design-prompt-input']\"\n              :placeholder=\"cloudT.designReference.promptPlaceholder\"\n              rows=\"3\"\n            />\n          </div>\n\n          <!-- Confirmation overlay -->\n          <div\n            v-if=\"showConfirmation\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:px-3 tpl:py-3 tpl:bg-[var(--tpl-warning-light)] tpl:border tpl:border-[var(--tpl-warning)]\"\n          >\n            <p class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\">\n              {{ cloudT.designReference.replaceWarning }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-2\">\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]\"\n                style=\"background-color: transparent\"\n                @click=\"cancelConfirmation\"\n              >\n                {{ cloudT.designReference.replaceCancel }}\n              </button>\n              <button\n                type=\"button\"\n                :class=\"[primaryBtnClass, 'tpl:flex-1']\"\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            type=\"button\"\n            :class=\"[primaryBtnClass, 'tpl:w-full']\"\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-[10px] 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 { primaryBtnClass } from \"../../constants/styleConstants\";\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      role=\"complementary\"\n      :aria-label=\"cloudT.designReference.title\"\n      class=\"tpl-design-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\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          type=\"button\"\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n          :aria-label=\"cloudT.designReference.close\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"designReference.isGenerating.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <div\n            class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3\"\n          >\n            <LoadingTrack />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudT.designReference.generating }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Input form -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n          <!-- Source tabs -->\n          <div\n            class=\"tpl:flex tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n          >\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'image' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'image'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'image' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('image')\"\n            >\n              <FileImage :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadImage }}\n            </button>\n            <button\n              class=\"tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n              :style=\"{\n                backgroundColor:\n                  activeTab === 'pdf' ? 'var(--tpl-bg)' : 'transparent',\n                color:\n                  activeTab === 'pdf'\n                    ? 'var(--tpl-primary)'\n                    : 'var(--tpl-text-muted)',\n                boxShadow: activeTab === 'pdf' ? 'var(--tpl-shadow)' : 'none',\n              }\"\n              @click=\"selectTab('pdf')\"\n            >\n              <FileText :size=\"12\" :stroke-width=\"2\" />\n              {{ cloudT.designReference.uploadPdf }}\n            </button>\n          </div>\n\n          <!-- File upload area (image or pdf) -->\n          <div>\n            <!-- Preview -->\n            <div v-if=\"selectedFile\" class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n              <div\n                class=\"tpl:relative tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n              >\n                <!-- Image preview -->\n                <img\n                  v-if=\"filePreviewUrl\"\n                  :src=\"filePreviewUrl\"\n                  :alt=\"selectedFile.name\"\n                  class=\"tpl:h-auto tpl:max-h-48 tpl:w-full tpl:object-contain\"\n                />\n                <!-- PDF preview (icon-based) -->\n                <div\n                  v-else\n                  class=\"tpl:flex tpl:h-32 tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2\"\n                >\n                  <FileText\n                    :size=\"32\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\">\n                    {{ selectedFile.name }}\n                  </span>\n                </div>\n                <!-- Remove button -->\n                <button\n                  class=\"tpl:absolute tpl:top-2 tpl:right-2 tpl:rounded-full tpl:p-1 tpl:transition-colors tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:shadow-[var(--tpl-shadow)]\"\n                  @click=\"clearFile\"\n                >\n                  <X :size=\"12\" :stroke-width=\"2\" />\n                </button>\n              </div>\n            </div>\n\n            <!-- Drop zone -->\n            <div\n              v-else\n              class=\"tpl-design-dropzone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border-2 tpl:border-dashed tpl:px-4 tpl:py-8 tpl:transition-colors\"\n              :style=\"{\n                borderColor: isDragging\n                  ? 'var(--tpl-primary)'\n                  : 'var(--tpl-border-light)',\n                backgroundColor: isDragging\n                  ? 'var(--tpl-primary-light)'\n                  : 'var(--tpl-bg)',\n              }\"\n              @click=\"fileInput?.click()\"\n              @dragover=\"handleDragOver\"\n              @dragleave=\"handleDragLeave\"\n              @drop=\"handleDrop\"\n            >\n              <Upload\n                :size=\"24\"\n                :stroke-width=\"1.5\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <span\n                class=\"tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n              >\n                {{ cloudT.designReference.dropHint }}\n              </span>\n              <span\n                class=\"tpl:text-center tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  activeTab === \"image\"\n                    ? cloudT.designReference.acceptedImages\n                    : cloudT.designReference.acceptedPdf\n                }}\n              </span>\n            </div>\n            <input\n              ref=\"fileInput\"\n              type=\"file\"\n              class=\"tpl:hidden\"\n              :accept=\"\n                activeTab === 'image'\n                  ? 'image/png,image/jpeg,image/webp'\n                  : 'application/pdf'\n              \"\n              @change=\"handleFileSelect\"\n            />\n          </div>\n\n          <!-- Prompt textarea -->\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <label\n              class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.designReference.promptLabel }}\n            </label>\n            <textarea\n              v-model=\"prompt\"\n              class=\"tpl:min-h-[72px] tpl:w-full tpl:resize-none tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:font-sans tpl:text-sm tpl:outline-none tpl:transition-colors tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)]\"\n              :class=\"['tpl-design-prompt-input']\"\n              :placeholder=\"cloudT.designReference.promptPlaceholder\"\n              rows=\"3\"\n            />\n          </div>\n\n          <!-- Confirmation overlay -->\n          <div\n            v-if=\"showConfirmation\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:px-3 tpl:py-3 tpl:bg-[var(--tpl-warning-light)] tpl:border tpl:border-[var(--tpl-warning)]\"\n          >\n            <p class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\">\n              {{ cloudT.designReference.replaceWarning }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-2\">\n              <button\n                class=\"tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]\"\n                style=\"background-color: transparent\"\n                @click=\"cancelConfirmation\"\n              >\n                {{ cloudT.designReference.replaceCancel }}\n              </button>\n              <button\n                type=\"button\"\n                :class=\"[primaryBtnClass, 'tpl:flex-1']\"\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            type=\"button\"\n            :class=\"[primaryBtnClass, 'tpl:w-full']\"\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-[10px] 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkBA,IAAMgF,IAAQC,GAKRC,IAAOH,GAKP,EAAE,GAAGI,MAAWnC,GAAmB,GACnCoC,KAAS/C,EAAcC,IAAY,wBAAwB,GAC3D+C,KAAchD,EAAcE,IAAkB,wBAAwB,GAEtE+C,IAAkBpC,GAAmB;GACzC;GACA,qBAAqBkC,GAAO,MAAM,UAAU,MAAM;GAClD,UAAU,MAAYF,EAAK,SAASK,CAAO;EAC7C,CAAC,GAEKC,IAAYnE,EAA6B,IAAI,GAI7CoE,IAAYpE,EAAe,OAAO,GAClCqE,IAAerE,EAAiB,IAAI,GACpCsE,IAAStE,EAAI,EAAE,GACfuE,IAAiBvE,EAAmB,IAAI,GACxCwE,IAAmBxE,EAAI,EAAK,GAC5ByE,IAAazE,EAAI,EAAK,GAEtB0E,IAAcpE,SAClB,CAAI2D,EAAgB,aAAa,SAI1BI,EAAa,UAAU,IAC/B;EAED,SAASM,EAAU,GAAsB;GAEvC,AADA,EAAU,QAAQC,GAClBC,EAAU;EACZ;EAEA,SAASC,GAAiB,GAAoB;GAC5C,IAAMC,IAAQC,EAAM,QACdC,IAAOF,EAAM,QAAQ;GAK3B,AAJIE,KACFC,EAAQD,CAAI,GAGd,EAAM,QAAQ;EAChB;EAEA,SAASC,EAAQ,GAAkB;GAEjC,IAAID,EAAK,OAAA,UAA8B;IACrC,EAAgB,MAAM,QAAQnB,EAAO,gBAAgB;IACrD;GACF;GAGA,IAAIM,EAAU,UAAU,SAElB;QAAA,CAAC;KADe;KAAa;KAAc;KAAa;IACvD,CAAA,CAAW,SAASa,EAAK,IAAI,GAAG;KACnC,EAAgB,MAAM,QAAQnB,EAAO,gBAAgB;KACrD;IACF;UACK,IAAIM,EAAU,UAAU,SACzBa,EAAK,SAAS,mBAAmB;IACnC,EAAgB,MAAM,QAAQnB,EAAO,gBAAgB;IACrD;GACF;GAUF,AAPA,EAAa,QAAQmB,GACrB,EAAgB,MAAM,QAAQ,MAG1BV,EAAe,SACjB,IAAI,gBAAgBA,EAAe,KAAK,GAEtCU,EAAK,KAAK,WAAW,QAAQ,IAC/B,EAAe,QAAQ,IAAI,gBAAgBA,CAAI,IAE/C,EAAe,QAAQ;EAE3B;EAEA,SAASJ,IAAkB;GAKzB,AAJA,AAEEN,EAAe,WADf,IAAI,gBAAgBA,EAAe,KAAK,GACjB,OAEzB,EAAa,QAAQ;EACvB;EAEA,SAASY,GAAe,GAAwB;GAE9C,AADAH,EAAM,eAAe,GACrB,EAAW,QAAQ;EACrB;EAEA,SAASI,KAAwB;GAC/B,EAAW,QAAQ;EACrB;EAEA,SAASC,GAAW,GAAwB;GAE1C,AADAL,EAAM,eAAe,GACrB,EAAW,QAAQ;GAEnB,IAAMC,IAAOD,EAAM,cAAc,QAAQ;GACzC,AAAIC,KACFC,EAAQD,CAAI;EAEhB;EAEA,SAASK,IAAuB;GAC9B,IAAI,CAACZ,EAAY,OACf;GAIF,IAAIf,EAAM,qBAAqB,CAACa,EAAiB,OAAO;IACtD,EAAiB,QAAQ;IACzB;GACF;GAEA,EAAiB,QAAQ;GAEzB,IAAMO,IAIF,CAAC;GAYL,AAVIT,EAAO,MAAM,KAAK,MACpB,EAAM,SAASA,EAAO,MAAM,KAAK,IAG/BF,EAAU,UAAU,WAAWC,EAAa,QAC9C,EAAM,cAAcA,EAAa,QACxBD,EAAU,UAAU,SAASC,EAAa,UACnD,EAAM,YAAYA,EAAa,QAGjCJ,EAAgB,SAASc,CAAK;EAChC;EAEA,SAASQ,KAA2B;GAClC,EAAiB,QAAQ;EAC3B;SAGA1F,QACQ8D,EAAM,UACX,MAAc;GACb,AAAK6B,MACH,EAAiB,QAAQ;EAE7B,CACF,GAEA5F,QAAsB;GACpB,AAEE2E,EAAe,WADf,IAAI,gBAAgBA,EAAe,KAAK,GACjB;EAE3B,CAAC,cAIC5F,EAAA,GAAAC,GA+PaC,IAAA;GA9PX,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;GACf,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;;GAEf,SAAAC,QAsPM,CArPE8E,EAAA,WADRjF,EAAA,GAAAI,EAsPM,OAAA;;IApPJ,MAAK;IACJ,cAAYC,EAAA8E,CAAA,CAAM,CAAC,gBAAgB;IACpC,OAAM;GAGN7E,GAAAA,CAAAA,EAiBM,OAjBN8C,IAiBM,CAdJ9C,EAKM,OALN+C,IAKM,CAFJ9C,EAAwCF,EAAAsC,CAAA,GAAA;IAA9B,MAAM;IAAK,gBAAc;GACnCrC,CAAAA,GAAAA,EAA+C,QAAA,MAAAE,EAAtCH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,KAAK,GAAA,CAAA,CAAA,CAAA,GAEvC7E,EAOS,UAAA;IANP,MAAK;IACL,OAAM;IACL,cAAYD,EAAA8E,CAAA,CAAM,CAAC,gBAAgB;IACnC,SAAK,AAAA2B,EAAA,QAAA,MAAE5B,EAAI,OAAA;GAEZ3E,GAAAA,CAAAA,EAAkCF,EAAAuC,CAAA,GAAA;IAA9B,MAAM;IAAK,gBAAc;GAKjCtC,CAAAA,CAAAA,GAAAA,GAAAA,EAAAA,CAAAA,CAAAA,GAAAA,EA0NM,OA1NNiD,IA0NM,CAvNIlD,EAAAiF,CAAA,CAAe,CAAC,aAAa,SADrCtF,EAAA,GAAAI,EAYM,OAZNoD,GAYM,CARJlD,EAOM,OAPNmD,GAOM,CAJJlD,EAAgBE,EAAA,GAChBH,EAEI,KAFJoD,GAEIlD,EADCH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,UAAU,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAM1CnF,EAAA,GAAAI,EAwMM,OAxMNuD,GAwMM;IAtMJrD,EAmCM,OAnCNsD,GAmCM,CAhCJtD,EAeS,UAAA;KAdP,OAAM;KACL,OAAKI,EAAA;MAAuD,iBAAA+E,EAAA,UAAS,UAAA,kBAAA;MAAyF,OAAAA,EAAA,UAAS,UAAA,uBAAA;MAAkI,WAAAA,EAAA,UAAS,UAAA,sBAAA;;KASlT,SAAK,AAAAqB,EAAA,QAAA,MAAEd,EAAS,OAAA;IAEjBzF,GAAAA,CAAAA,EAA0CF,EAAAmC,EAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;IAAK7B,CAAAA,GAAAA,EAAA,MAC1CH,EAAGH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,WAAW,GAAA,CAAA,CAAA,GAAA,CAAA,GAEvC7E,EAeS,UAAA;KAdP,OAAM;KACL,OAAKI,EAAA;MAAuD,iBAAA+E,EAAA,UAAS,QAAA,kBAAA;MAAuF,OAAAA,EAAA,UAAS,QAAA,uBAAA;MAAgI,WAAAA,EAAA,UAAS,QAAA,sBAAA;;KAS9S,SAAK,AAAAqB,EAAA,QAAA,MAAEd,EAAS,KAAA;IAEjBzF,GAAAA,CAAAA,EAAyCF,EAAAqC,CAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;IAAK/B,CAAAA,GAAAA,EAAA,MACzCH,EAAGH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,SAAS,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA;IAKvC7E,EAqFM,OAAA,MAAA,CAnFOoF,EAAA,SAAX1F,EAAA,GAAAI,EAiCM,OAjCNyD,GAiCM,CAhCJvD,EA+BM,OA/BNwD,GA+BM,CA1BI8B,EAAA,SADR5F,EAAA,GAAAI,EAKE,OAAA;;KAHC,KAAKwF,EAAA;KACL,KAAKF,EAAA,MAAa;KACnB,OAAM;IAGR1F,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,EAAA,GAAAI,EAYM,OAZN4D,GAYM,CARJzD,EAIEF,EAAAqC,CAAA,GAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;IAERpC,CAAAA,GAAAA,EAEO,QAFP2D,GAEOzD,EADFkF,EAAA,MAAa,IAAI,GAAA,CAAA,CAAA,CAAA,IAIxBpF,EAKS,UAAA;KAJP,OAAM;KACL,SAAO4F;IAER3F,GAAAA,CAAAA,EAAkCF,EAAAuC,CAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;IAMnC5C,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,MAAAA,EAAA,GAAAI,EAmCM,OAAA;;KAjCJ,OAAM;KACL,OAAKM,EAAA;MAAiC,aAAAoF,EAAA,QAAA,uBAAA;MAAoI,iBAAAA,EAAA,QAAA,6BAAA;;KAQ1K,SAAK,AAAAgB,EAAA,QAAA,MAAEtB,EAAA,OAAW,MAAK;KACvB,YAAUgB;KACV,aAAWC;KACX,QAAMC;;KAEPnG,EAIEF,EAAAwC,EAAA,GAAA;MAHC,MAAM;MACN,gBAAc;MACf,OAAM;;KAERvC,EAIO,QAJP4D,GAIO1D,EADFH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,QAAQ,GAAA,CAAA;KAEpC7E,EAQO,QARP6D,GAQO3D,EAJHiF,EAAA,UAAS,UAAmCpF,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,iBAAqC9E,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,WAAW,GAAA,CAAA;IAMhJ7E,GAAAA,EAAAA,IAAAA,EAUE,SAAA;KATI,SAAA;KAAJ,KAAIkF;KACJ,MAAK;KACL,OAAM;KACL,QAAyBC,EAAA,UAAS,UAAA,oCAAA;KAKlC,UAAQU;;IAKb7F,EAaM,OAbN+D,GAaM,CAZJ/D,EAIQ,SAJRgE,GAIQ9D,EADHH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,WAAW,GAAA,CAAA,GAEvCvE,GAAAN,EAME,YAAA;KALS,uBAAA,AAAAwG,EAAA,QAAA,MAAA,EAAM,QAAAC;KACf,OAAKlG,EAAA,CAAC,0UACE,CAAA,yBAAA,CAA2B,CAAA;KAClC,aAAaR,EAAA8E,CAAA,CAAM,CAAC,gBAAgB;KACrC,MAAK;IAJI,GAAA,MAAA,GAAAZ,CAAA,GAAA,CAAA,CAAAzD,IAAA6E,EAAA,KAAM,CAAA,CAAA,CAAA,CAAA;IAUXE,EAAA,SADR7F,EAAA,GAAAI,EAuBM,OAvBNoE,IAuBM,CAnBJlE,EAEI,KAFJmE,IAEIjE,EADCH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,cAAc,GAAA,CAAA,GAE1C7E,EAeM,OAfNoE,GAeM,CAdJpE,EAMS,UAAA;KALP,OAAM;KACN,OAAA,EAAA,oBAAA,cAAA;KACC,SAAOsG;IAEL,GAAApG,EAAAH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,aAAa,GAAA,CAAA,GAEzC7E,EAMS,UAAA;KALP,MAAK;KACJ,OAAKO,EAAA,CAAGR,EAAA4C,CAAA,GAAe,YAAA,CAAA;KACvB,SAAO0D;IAEL,GAAAnG,EAAAH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,cAAc,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAAtD,EAAA,IAAA,EAAA;IAOtCxB,EAAAiF,CAAA,CAAe,CAAC,MAAM,SAD9BtF,EAAA,GAAAI,EAUM,OAVNuE,IAUM,CANJpE,EAIEF,EAAAoC,EAAA,GAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;IAERnC,CAAAA,GAAAA,EAA+C,QAAA,MAAAE,EAAtCH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,KAAK,GAAA,CAAA,CAAA,CAAA,KAAAtD,EAAA,IAAA,EAAA;IAK9BgE,EAAA,QAO2BhE,EAAA,IAAA,EAAA,KARpC7B,EAAA,GAAAI,EASS,UAAA;;KAPP,MAAK;KACJ,OAAKS,EAAA,CAAGR,EAAA4C,CAAA,GAAe,YAAA,CAAA;KACvB,UAAQ,CAAG8C,EAAA;KACX,SAAOY;IAERpG,GAAAA,CAAAA,EAAwCF,EAAAsC,CAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;IAAKhC,CAAAA,GAAAA,EAAA,MACxCH,EAAGH,EAAA8E,CAAA,CAAM,CAAC,gBAAgB,QAAQ,GAAA,CAAA,CAAA,GAAA,IAAAP,EAAA;IAIpCtE,EAII,KAJJuE,IAIIrE,EADCH,EAAA8E,CAAA,CAAM,CAAC,OAAO,UAAU,GAAA,CAAA"}

package/dist/cdn/chunks/{IssuesPanel-DYJXIwnw.js → IssuesPanel--62qud8w.js}

@@ -1,7 +1,7 @@
 import { E as e, F as t, N as n, R as r, S as i, at as a, b as o, ct as s, f as c, g as l, h as u, m as d, p as f, u as p, ut as m, y as h } from "./draggable-IB4x6w2O.js";
 import { K as g, g as _ } from "./keys-DCWeHkSF.js";
 import { t as v } from "./useI18n-CyO_Nmca.js";
-import { Nt as y, Ut as b, ct as x, d as S, ft as C, r as w } from "./icons-BF0mJX0V.js";
+import { Nt as y, Ut as b, ct as x, d as S, ft as C, r as w } from "./icons-BjvraR-Y.js";
 import { t as T } from "./useScrollToBlock-DgHZJvID.js";
 //#region src/components/sidebar/IssuesPanel.vue?vue&type=script&setup=true&lang.ts
 var E = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, D = { class: "tpl:flex tpl:items-center tpl:gap-2" }, O = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, k = ["title"], A = {
@@ -97,4 +97,4 @@ var E = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, D = { class: "tpl:
 //#endregion
 export { z as default };
 
-//# sourceMappingURL=IssuesPanel-DYJXIwnw.js.map
+//# sourceMappingURL=IssuesPanel--62qud8w.js.map

package/dist/cdn/chunks/{IssuesPanel-DYJXIwnw.js.map → IssuesPanel--62qud8w.js.map}

@@ -1 +1 @@
-{"version":3,"file":"IssuesPanel-DYJXIwnw.js","names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode","_unref","_toDisplayString","_createCommentVNode","_Fragment","_renderList","AlertCircle","AlertTriangle","_normalizeClass","_createBlock","_resolveDynamicComponent","_createTextVNode","_sfc_main","inject","renderList","openBlock","resolveDynamicComponent","defineComponent","unref","createVNode","normalizeClass","computed","createElementBlock","createCommentVNode","createBlock","createBaseVNode","Fragment","toDisplayString","createTextVNode","TEMPLATE_LINT_KEY","EDITOR_KEY","useI18n","CircleAlert","ArrowRight","ListChecks","TriangleAlert","Info","Wrench","useScrollToBlock","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","IssuesPanel_default","lint","editor","scrollToBlock","errors","i","warnings","infos","totalCount","jumpTo","issue","applyFix","t","format","group"],"sources":["../../../src/components/sidebar/IssuesPanel.vue","../../../src/components/sidebar/IssuesPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useScrollToBlock } from \"../../composables/useScrollToBlock\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\nconst scrollToBlock = useScrollToBlock();\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (!issue.blockId) return;\n  editor.selectBlock(issue.blockId);\n  // Selecting is invisible on its own — on a long template the block sits\n  // below the fold and the canvas stays put, so \"Jump\" appears to do nothing.\n  scrollToBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[10px] 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-xs tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                data-testid=\"issue-jump\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs 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-xs tpl:font-medium tpl:text-[var(--tpl-on-primary)]\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useScrollToBlock } from \"../../composables/useScrollToBlock\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\nconst scrollToBlock = useScrollToBlock();\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (!issue.blockId) return;\n  editor.selectBlock(issue.blockId);\n  // Selecting is invisible on its own — on a long template the block sits\n  // below the fold and the canvas stays put, so \"Jump\" appears to do nothing.\n  scrollToBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[10px] 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-xs tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                data-testid=\"issue-jump\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs 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-xs tpl:font-medium tpl:text-[var(--tpl-on-primary)]\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"IssuesPanel--62qud8w.js","names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode","_unref","_toDisplayString","_createCommentVNode","_Fragment","_renderList","AlertCircle","AlertTriangle","_normalizeClass","_createBlock","_resolveDynamicComponent","_createTextVNode","_sfc_main","inject","renderList","openBlock","resolveDynamicComponent","defineComponent","unref","createVNode","normalizeClass","computed","createElementBlock","createCommentVNode","createBlock","createBaseVNode","Fragment","toDisplayString","createTextVNode","TEMPLATE_LINT_KEY","EDITOR_KEY","useI18n","CircleAlert","ArrowRight","ListChecks","TriangleAlert","Info","Wrench","useScrollToBlock","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","IssuesPanel_default","lint","editor","scrollToBlock","errors","i","warnings","infos","totalCount","jumpTo","issue","applyFix","t","format","group"],"sources":["../../../src/components/sidebar/IssuesPanel.vue","../../../src/components/sidebar/IssuesPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useScrollToBlock } from \"../../composables/useScrollToBlock\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\nconst scrollToBlock = useScrollToBlock();\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (!issue.blockId) return;\n  editor.selectBlock(issue.blockId);\n  // Selecting is invisible on its own — on a long template the block sits\n  // below the fold and the canvas stays put, so \"Jump\" appears to do nothing.\n  scrollToBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[10px] 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-xs tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                data-testid=\"issue-jump\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs 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-xs tpl:font-medium tpl:text-[var(--tpl-on-primary)]\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useScrollToBlock } from \"../../composables/useScrollToBlock\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\nconst scrollToBlock = useScrollToBlock();\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (!issue.blockId) return;\n  editor.selectBlock(issue.blockId);\n  // Selecting is invisible on its own — on a long template the block sits\n  // below the fold and the canvas stays put, so \"Jump\" appears to do nothing.\n  scrollToBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[10px] 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-xs tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                data-testid=\"issue-jump\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs 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-xs tpl:font-medium tpl:text-[var(--tpl-on-primary)]\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{LogicTagInsertButton-FNMVxm_V.js → LogicTagInsertButton-gc8ICURV.js}

@@ -1,12 +1,12 @@
 import { E as e, F as t, H as n, K as r, N as i, Q as a, S as o, Y as s, at as c, b as l, c as u, ct as d, d as f, f as p, g as m, h, k as g, l as _, lt as v, m as y, n as b, p as x, q as S, r as C, u as w, ut as T, w as E, y as D } from "./draggable-IB4x6w2O.js";
-import { a as O, c as k, d as A, l as j } from "./src-BR3I3gOW.js";
+import { a as O, c as k, d as A, l as j } from "./src-QIGNPFkl.js";
 import { t as ee } from "./dist-CXB2_kBa.js";
 import { J as te, Y as M, Z as ne, d as re } from "./keys-DCWeHkSF.js";
 import { t as N } from "./useI18n-CyO_Nmca.js";
 import { a as ie, i as ae, n as oe, o as se, r as ce, t as le } from "./usePopoverPosition-DGXjXKjM.js";
-import { F as P, n as ue, q as F, zt as I } from "./icons-BF0mJX0V.js";
-import { t as L } from "./useMergeTag-C5MyHYxJ.js";
-import { t as de } from "./useLogicTag-J_i_hvZg.js";
+import { F as P, n as ue, q as F, zt as I } from "./icons-BjvraR-Y.js";
+import { t as L } from "./useMergeTag-2iW-BKWW.js";
+import { t as de } from "./useLogicTag-D6lWY0bD.js";
 import { u as fe } from "./styleConstants-C_YAPdQS.js";
 //#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
 var R = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, z = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n, B = (e) => he(V(e)), V = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
@@ -1056,4 +1056,4 @@ var ft = ["aria-label"], pt = [
 //#endregion
 export { it as a, qe as c, dt as i, St as n, nt as o, yt as r, rt as s, Tt as t };
 
-//# sourceMappingURL=LogicTagInsertButton-FNMVxm_V.js.map
+//# sourceMappingURL=LogicTagInsertButton-gc8ICURV.js.map