@templatical/editor 0.7.3 → 0.8.1

package/dist/cdn/chunks/{CountdownToolbar-B9fPfFqp.js.map → CountdownToolbar-CdjFGEI7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CountdownToolbar-B9fPfFqp.js","names":[],"sources":["../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CountdownToolbar.vue","../../../src/components/toolbar/CountdownToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.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\"\n      | \"hours\"\n      | \"minutes\"\n      | \"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      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\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  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\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 CheckboxItem from \"./CheckboxItem.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\"\n      | \"hours\"\n      | \"minutes\"\n      | \"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      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\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  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"CountdownToolbar-CdjFGEI7.js","names":[],"sources":["../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CountdownToolbar.vue","../../../src/components/toolbar/CountdownToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.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\"\n      | \"hours\"\n      | \"minutes\"\n      | \"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      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\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  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\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 CheckboxItem from \"./CheckboxItem.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\"\n      | \"hours\"\n      | \"minutes\"\n      | \"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      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\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  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{AccessibilityPanel-CQt87OMk.js → IssuesPanel-DJOLYNAJ.js}

@@ -1,7 +1,7 @@
 import { L as e, M as t, P as n, T as r, ct as i, f as a, g as o, h as s, it as c, m as l, ot as u, p as d, u as f, v as p, x as m, y as h } from "./draggable-P6QWzy4g.js";
-import { Dt as g, Ft as _, It as v, Jt as y, st as b, yt as x } from "./features-CXF_YKlL.js";
-import { Q as S, Z as C, t as w } from "./icons-KbmhF7rg.js";
-//#region src/components/sidebar/AccessibilityPanel.vue?vue&type=script&setup=true&lang.ts
+import { $t as g, Dt as _, Ft as v, qt as y, st as b, yt as x } from "./features-BsW4aFcn.js";
+import { B as S, Q as C, t as w } from "./icons-BgPk6tUq.js";
+//#region src/components/sidebar/IssuesPanel.vue?vue&type=script&setup=true&lang.ts
 var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:flex tpl:items-center tpl:gap-2" }, D = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, O = ["title"], k = {
 	key: 0,
 	class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
@@ -12,9 +12,9 @@ var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:
 	key: 1,
 	class: "tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0"
 }, N = { class: "tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]" }, P = { class: "tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, F = { class: "tpl:flex tpl:gap-1.5" }, I = ["onClick"], L = ["title", "onClick"], R = /* @__PURE__ */ m({
-	__name: "AccessibilityPanel",
+	__name: "IssuesPanel",
 	setup(m) {
-		let { t: R, format: z } = _(), B = r(v, null), V = r(y, null), H = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "error")), U = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "warning")), W = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "info")), G = a(() => H.value.length + U.value.length + W.value.length);
+		let { t: R, format: z } = v(), B = r(g, null), V = r(y, null), H = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "error")), U = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "warning")), W = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "info")), G = a(() => H.value.length + U.value.length + W.value.length);
 		function K(e) {
 			V && e.blockId && V.selectBlock(e.blockId);
 		}
@@ -26,30 +26,30 @@ var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:
 				size: 16,
 				"stroke-width": 1.5
 			}),
-			d("h3", D, i(c(R).accessibility.panelTitle), 1),
+			d("h3", D, i(c(R).issues.panelTitle), 1),
 			G.value > 0 ? (t(), o("span", {
 				key: 0,
 				class: "tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]",
-				title: c(z)(c(R).accessibility.issueCountTooltip, { count: G.value })
+				title: c(z)(c(R).issues.issueCountTooltip, { count: G.value })
 			}, i(G.value), 9, O)) : s("", !0)
-		]), !c(B) || c(B).unavailable.value ? (t(), o("div", k)) : G.value === 0 ? (t(), o("div", A, i(c(R).accessibility.emptyState), 1)) : (t(!0), o(f, { key: 2 }, n([
+		]), !c(B) || c(B).unavailable.value ? (t(), o("div", k)) : G.value === 0 ? (t(), o("div", A, i(c(R).issues.emptyState), 1)) : (t(!0), o(f, { key: 2 }, n([
 			{
 				key: "errors",
-				title: c(R).accessibility.groupErrors,
-				icon: c(g),
+				title: c(R).issues.groupErrors,
+				icon: c(_),
 				items: H.value,
 				tone: "tpl:text-[var(--tpl-danger)]"
 			},
 			{
 				key: "warnings",
-				title: c(R).accessibility.groupWarnings,
+				title: c(R).issues.groupWarnings,
 				icon: c(b),
 				items: U.value,
 				tone: "tpl:text-[var(--tpl-warning)]"
 			},
 			{
 				key: "info",
-				title: c(R).accessibility.groupInfo,
+				title: c(R).issues.groupInfo,
 				icon: c(x),
 				items: W.value,
 				tone: "tpl:text-[var(--tpl-text-muted)]"
@@ -78,7 +78,7 @@ var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:
 			}, [h(c(C), {
 				size: 10,
 				"stroke-width": 2
-			}), p(" " + i(c(R).accessibility.jump), 1)], 8, I)) : s("", !0), e.fix ? (t(), o("button", {
+			}), p(" " + i(c(R).issues.jump), 1)], 8, I)) : s("", !0), e.fix ? (t(), o("button", {
 				key: 1,
 				type: "button",
 				class: "tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-white",
@@ -87,11 +87,11 @@ var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:
 			}, [h(c(w), {
 				size: 10,
 				"stroke-width": 2
-			}), p(" " + i(c(R).accessibility.fix), 1)], 8, L)) : s("", !0)])
+			}), p(" " + i(c(R).issues.fix), 1)], 8, L)) : s("", !0)])
 		]))), 128))])) : s("", !0)]))), 128))]));
 	}
 });
 //#endregion
 export { R as default };
 
-//# sourceMappingURL=AccessibilityPanel-CQt87OMk.js.map
+//# sourceMappingURL=IssuesPanel-DJOLYNAJ.js.map

package/dist/cdn/chunks/IssuesPanel-DJOLYNAJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IssuesPanel-DJOLYNAJ.js","names":[],"sources":["../../../src/components/sidebar/IssuesPanel.vue","../../../src/components/sidebar/IssuesPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (issue.blockId) editor.selectBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"format(t.issues.issueCountTooltip, { count: totalCount })\"\n      >\n        {{ totalCount }}\n      </span>\n    </header>\n\n    <div\n      v-if=\"!lint || lint.unavailable.value\"\n      class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      <!-- Quality package not available; render nothing visible beyond a hint. -->\n    </div>\n\n    <div\n      v-else-if=\"totalCount === 0\"\n      class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{ t.issues.emptyState }}\n    </div>\n\n    <template v-else>\n      <section\n        v-for=\"group in [\n          {\n            key: 'errors',\n            title: t.issues.groupErrors,\n            icon: AlertCircle,\n            items: errors,\n            tone: 'tpl:text-[var(--tpl-danger)]',\n          },\n          {\n            key: 'warnings',\n            title: t.issues.groupWarnings,\n            icon: AlertTriangle,\n            items: warnings,\n            tone: 'tpl:text-[var(--tpl-warning)]',\n          },\n          {\n            key: 'info',\n            title: t.issues.groupInfo,\n            icon: Info,\n            items: infos,\n            tone: 'tpl:text-[var(--tpl-text-muted)]',\n          },\n        ]\"\n        :key=\"group.key\"\n      >\n        <header\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]\"\n                @click=\"jumpTo(issue)\"\n              >\n                <ArrowRight :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.jump }}\n              </button>\n              <button\n                v-if=\"issue.fix\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-white\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (issue.blockId) editor.selectBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"format(t.issues.issueCountTooltip, { count: totalCount })\"\n      >\n        {{ totalCount }}\n      </span>\n    </header>\n\n    <div\n      v-if=\"!lint || lint.unavailable.value\"\n      class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      <!-- Quality package not available; render nothing visible beyond a hint. -->\n    </div>\n\n    <div\n      v-else-if=\"totalCount === 0\"\n      class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{ t.issues.emptyState }}\n    </div>\n\n    <template v-else>\n      <section\n        v-for=\"group in [\n          {\n            key: 'errors',\n            title: t.issues.groupErrors,\n            icon: AlertCircle,\n            items: errors,\n            tone: 'tpl:text-[var(--tpl-danger)]',\n          },\n          {\n            key: 'warnings',\n            title: t.issues.groupWarnings,\n            icon: AlertTriangle,\n            items: warnings,\n            tone: 'tpl:text-[var(--tpl-warning)]',\n          },\n          {\n            key: 'info',\n            title: t.issues.groupInfo,\n            icon: Info,\n            items: infos,\n            tone: 'tpl:text-[var(--tpl-text-muted)]',\n          },\n        ]\"\n        :key=\"group.key\"\n      >\n        <header\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]\"\n                @click=\"jumpTo(issue)\"\n              >\n                <ArrowRight :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.jump }}\n              </button>\n              <button\n                v-if=\"issue.fix\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-white\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAcA,IAAM,EAAE,MAAG,cAAW,GAAS,EACzB,IAAO,EAAO,GAAmB,KAAK,EACtC,IAAS,EAAO,GAAY,KAAK,EAEjC,IAAS,SACZ,GAAM,OAAO,SAAS,EAAE,EAAE,QAAQ,MAAM,EAAE,aAAa,QAAQ,CACjE,EACK,IAAW,SACd,GAAM,OAAO,SAAS,EAAE,EAAE,QAAQ,MAAM,EAAE,aAAa,UAAU,CACnE,EACK,IAAQ,SACX,GAAM,OAAO,SAAS,EAAE,EAAE,QAAQ,MAAM,EAAE,aAAa,OAAO,CAChE,EAEK,IAAa,QACX,EAAO,MAAM,SAAS,EAAS,MAAM,SAAS,EAAM,MAAM,OACjE;EAED,SAAS,EAAO,GAAwB;AACjC,QACD,EAAM,WAAS,EAAO,YAAY,EAAM,QAAQ;;EAGtD,SAAS,EAAS,GAAwB;AACxC,MAAM,SAAS,EAAM;;yBAKrB,EA+GM,OA/GN,GA+GM,CA9GJ,EAcS,UAdT,GAcS;GAbP,EAA6C,EAAA,EAAA,EAAA;IAAhC,MAAM;IAAK,gBAAc;;GACtC,EAIK,MAJL,GAIK,EADA,EAAA,EAAC,CAAC,OAAO,WAAU,EAAA,EAAA;GAGhB,EAAA,QAAU,KAAA,GAAA,EADlB,EAMO,QAAA;;IAJL,OAAM;IACL,OAAO,EAAA,EAAM,CAAC,EAAA,EAAC,CAAC,OAAO,mBAAiB,EAAA,OAAW,EAAA,OAAU,CAAA;QAE3D,EAAA,MAAU,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA;OAKR,EAAA,EAAI,IAAI,EAAA,EAAI,CAAC,YAAY,SAAA,GAAA,EADlC,EAKM,OALN,EAKM,IAGO,EAAA,UAAU,KAAA,GAAA,EADvB,EAKM,OALN,GAKM,EADD,EAAA,EAAC,CAAC,OAAO,WAAU,EAAA,EAAA,KAAA,EAAA,GAAA,EAItB,EA6EU,GAAA,EAAA,KAAA,GAAA,EAAA,EAAA;;;WA5EoE,EAAA,EAAC,CAAC,OAAO;UAA+B,EAAA,EAAW;WAAqB,EAAA;;;;;WAAmI,EAAA,EAAC,CAAC,OAAO;UAAiC,EAAA,EAAa;WAAqB,EAAA;;;;;WAAkI,EAAA,EAAC,CAAC,OAAO;UAA6B,EAAA,EAAI;WAAqB,EAAA;;;MAA7hB,YADT,EA6EU,WAAA,EArDP,KAAK,EAAM,KAAA,EAAA,CAGJ,EAAM,MAAM,SAAM,KAAA,GAAA,EAD1B,EAUS,UAAA;;GARP,OAAK,EAAA,CAAC,oHACE,EAAM,KAAI,CAAA;;SAElB,EAA2D,EAA3C,EAAM,KAAI,EAAA;IAAG,MAAM;IAAK,gBAAc;;KAAK,MAC3D,EAAG,EAAM,MAAK,GAAG,KACjB,EAAA;GAAA,EAEO,QAFP,GAEO,EADF,EAAM,MAAM,OAAM,EAAA,EAAA;sBAIjB,EAAM,MAAM,SAAM,KAAA,GAAA,EAD1B,EAuCK,MAvCL,GAuCK,EAAA,EAAA,GAAA,EAnCH,EAkCK,GAAA,MAAA,EAjCa,EAAM,QAAf,YADT,EAkCK,MAAA;GAhCF,KAAG,GAAK,EAAM,OAAM,GAAI,EAAM,WAAO;GACtC,OAAM;;GAEN,EAEI,KAFJ,GAEI,EADC,EAAM,QAAO,EAAA,EAAA;GAElB,EAII,KAJJ,GAII,EADC,EAAM,OAAM,EAAA,EAAA;GAEjB,EAoBM,OApBN,GAoBM,CAlBI,EAAM,WAAA,GAAA,EADd,EAQS,UAAA;;IANP,MAAK;IACL,OAAM;IACL,UAAK,MAAE,EAAO,EAAK;OAEpB,EAA2C,EAAA,EAAA,EAAA;IAA9B,MAAM;IAAK,gBAAc;SAAK,MAC3C,EAAG,EAAA,EAAC,CAAC,OAAO,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAGV,EAAM,OAAA,GAAA,EADd,EASS,UAAA;;IAPP,MAAK;IACL,OAAM;IACL,OAAO,EAAM,IAAI;IACjB,UAAK,MAAE,EAAS,EAAK;OAEtB,EAAuC,EAAA,EAAA,EAAA;IAA9B,MAAM;IAAK,gBAAc;SAAK,MACvC,EAAG,EAAA,EAAC,CAAC,OAAO,IAAG,EAAA,EAAA,CAAA,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/cdn/chunks/{ModuleBrowserModal-DfnJQBkM.js → ModuleBrowserModal-hnbUUl8w.js}

@@ -1,7 +1,7 @@
 import { H as e, L as t, M as n, P as r, V as ee, Z as i, a as te, b as a, ct as o, f as s, g as c, h as ne, it as l, l as u, m as d, o as re, p as f, st as ie, u as p, x as m, y as h, z as ae } from "./draggable-P6QWzy4g.js";
-import { Ft as oe, Jt as se, Qt as ce, at as le, ct as ue, i as de, nn as g, tt as fe } from "./features-CXF_YKlL.js";
-import { b as pe, j as _ } from "./icons-KbmhF7rg.js";
-import { t as v } from "./blockTypeIcons-D3CGFW5P.js";
+import { Ft as oe, Zt as se, at as ce, ct as le, i as ue, nn as g, qt as de, tt as fe } from "./features-BsW4aFcn.js";
+import { b as pe, j as _ } from "./icons-BgPk6tUq.js";
+import { t as v } from "./blockTypeIcons-B_klsmQ1.js";
 //#region src/cloud/components/ModuleBrowserModal.vue?vue&type=script&setup=true&lang.ts
 var me = {
 	role: "dialog",
@@ -40,7 +40,7 @@ var me = {
 	props: { visible: { type: Boolean } },
 	emits: ["close", "insert"],
 	setup(m, { emit: B }) {
-		let Te = m, V = B, Ee = a(() => import("./ModulePreviewCanvas-DE4_oHA_.js")), { t: De } = oe(), { t: H } = fe(), U = g(ce, "ModuleBrowserModal"), W = g(se, "ModuleBrowserModal"), G = i(""), K = i(null), q = i(null), J = i("end"), Y = s(() => {
+		let Te = m, V = B, Ee = a(() => import("./ModulePreviewCanvas-_DoUZGQh.js")), { t: De } = oe(), { t: H } = fe(), U = g(se, "ModuleBrowserModal"), W = g(de, "ModuleBrowserModal"), G = i(""), K = i(null), q = i(null), J = i("end"), Y = s(() => {
 			let e = U.modules.value;
 			if (!G.value) return e;
 			let t = G.value.toLowerCase();
@@ -102,7 +102,7 @@ var me = {
 		function Me(e) {
 			e.key === "Escape" && $(), e.key === "Enter" && X.value && (e.preventDefault(), Q());
 		}
-		return (i, a) => (n(), d(de, {
+		return (i, a) => (n(), d(ue, {
 			visible: m.visible,
 			onClose: $,
 			onKeydown: Me
@@ -112,7 +112,7 @@ var me = {
 					"aria-label": l(H).modules.close,
 					class: "tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]",
 					onClick: $
-				}, [h(l(le), {
+				}, [h(l(ce), {
 					size: 16,
 					"stroke-width": 2
 				})], 8, b)]),
@@ -155,7 +155,7 @@ var me = {
 						"aria-label": l(H).modules.delete,
 						title: l(H).modules.delete,
 						onClick: u((t) => q.value = e.id, ["stop"])
-					}, [h(l(ue), {
+					}, [h(l(le), {
 						size: 12,
 						"stroke-width": 1.5
 					})], 8, F))
@@ -192,4 +192,4 @@ var me = {
 //#endregion
 export { B as default };
 
-//# sourceMappingURL=ModuleBrowserModal-DfnJQBkM.js.map
+//# sourceMappingURL=ModuleBrowserModal-hnbUUl8w.js.map

package/dist/cdn/chunks/{ModuleBrowserModal-DfnJQBkM.js.map → ModuleBrowserModal-hnbUUl8w.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ModuleBrowserModal-DfnJQBkM.js","names":[],"sources":["../../../src/cloud/components/ModuleBrowserModal.vue","../../../src/cloud/components/ModuleBrowserModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { blockTypeIcons } from \"../../utils/blockTypeIcons\";\nimport {\n  SAVED_MODULES_HEADLESS_KEY,\n  EDITOR_KEY,\n  requireInject,\n} from \"../../keys\";\nimport type { SavedModule } from \"@templatical/types\";\nimport { Package, Search, Trash2, X } from \"@lucide/vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\", module: SavedModule, insertIndex: number | undefined): void;\n}>();\n\nconst ModulePreviewCanvas = defineAsyncComponent(\n  () => import(\"./ModulePreviewCanvas.vue\"),\n);\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst savedModules = requireInject(\n  SAVED_MODULES_HEADLESS_KEY,\n  \"ModuleBrowserModal\",\n);\nconst editor = requireInject(EDITOR_KEY, \"ModuleBrowserModal\");\n\nconst searchQuery = ref(\"\");\nconst selectedModuleId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\nconst filteredModules = computed(() => {\n  const modules = savedModules.modules.value;\n  if (!searchQuery.value) return modules;\n  const query = searchQuery.value.toLowerCase();\n  return modules.filter((m) => m.name.toLowerCase().includes(query));\n});\n\nconst selectedModule = computed(() => {\n  if (!selectedModuleId.value) return null;\n  return (\n    savedModules.modules.value.find((m) => m.id === selectedModuleId.value) ??\n    null\n  );\n});\n\ninterface PositionOption {\n  value: string;\n  label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n  const options: PositionOption[] = [\n    { value: \"beginning\", label: cloudT.modules.insertAtBeginning },\n  ];\n  const blocks = editor.content.value.blocks;\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    const typeKey = block.type as keyof typeof t.blocks;\n    const label = t.blocks[typeKey] ?? block.type;\n    options.push({\n      value: block.id,\n      label: cloudT.modules.insertAfterBlock.replace(\n        \"{block}\",\n        `${label} ${i + 1}`,\n      ),\n    });\n  }\n  options.push({ value: \"end\", label: cloudT.modules.insertAtEnd });\n  return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n  if (insertPosition.value === \"end\") return undefined;\n  if (insertPosition.value === \"beginning\") return 0;\n  const blocks = editor.content.value.blocks;\n  const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n  if (idx !== -1) return idx + 1;\n  return undefined;\n});\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      searchQuery.value = \"\";\n      selectedModuleId.value = null;\n      confirmDeleteId.value = null;\n      // Default to after selected block, or end\n      const selectedId = editor.state.selectedBlockId;\n      if (selectedId) {\n        const idx = editor.content.value.blocks.findIndex(\n          (b) => b.id === selectedId,\n        );\n        insertPosition.value = idx !== -1 ? selectedId : \"end\";\n      } else {\n        insertPosition.value = \"end\";\n      }\n    }\n  },\n);\n\nfunction getModuleBlockTypeIcons(\n  module: SavedModule,\n): { type: string; icon: unknown }[] {\n  const icons: { type: string; icon: unknown }[] = [];\n  const seen = new Set<string>();\n  for (const block of module.content) {\n    if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n      seen.add(block.type);\n      icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n    }\n    if (icons.length >= 5) break;\n  }\n  return icons;\n}\n\nfunction getRemainingTypeCount(module: SavedModule): number {\n  const types = new Set(module.content.map((b) => b.type));\n  return Math.max(0, types.size - 5);\n}\n\nasync function handleDelete(moduleId: string): Promise<void> {\n  try {\n    await savedModules.deleteModule(moduleId);\n    if (selectedModuleId.value === moduleId) {\n      selectedModuleId.value = null;\n    }\n  } finally {\n    confirmDeleteId.value = null;\n  }\n}\n\nfunction handleInsert(): void {\n  if (selectedModule.value) {\n    emit(\"insert\", selectedModule.value, resolvedInsertIndex.value);\n  }\n}\n\nfunction handleClose(): void {\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n  if (event.key === \"Enter\" && selectedModule.value) {\n    event.preventDefault();\n    handleInsert();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"tpl-module-browser-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-[1000px] tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n        max-height: 90vh;\n      \"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n      >\n        <h3\n          id=\"tpl-module-browser-title\"\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ cloudT.modules.browse }}\n        </h3>\n        <button\n          :aria-label=\"cloudT.modules.close\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]\"\n          @click=\"handleClose\"\n        >\n          <X :size=\"16\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n        <!-- Left panel: module grid -->\n        <div\n          class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n        >\n          <!-- Search -->\n          <div class=\"tpl:px-4 tpl:pt-4 tpl:pb-3\">\n            <div class=\"tpl:relative\">\n              <Search\n                :size=\"14\"\n                :stroke-width=\"2\"\n                class=\"tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                :placeholder=\"cloudT.modules.search\"\n                class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n              />\n            </div>\n          </div>\n\n          <!-- Grid -->\n          <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n            <div\n              v-if=\"filteredModules.length > 0\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n            >\n              <button\n                v-for=\"mod in filteredModules\"\n                :key=\"mod.id\"\n                type=\"button\"\n                :aria-pressed=\"selectedModuleId === mod.id\"\n                class=\"tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]\"\n                :style=\"{\n                  borderColor:\n                    selectedModuleId === mod.id\n                      ? 'var(--tpl-primary)'\n                      : 'var(--tpl-border)',\n                  backgroundColor:\n                    selectedModuleId === mod.id\n                      ? 'var(--tpl-primary-light)'\n                      : 'transparent',\n                }\"\n                @click=\"selectedModuleId = mod.id\"\n              >\n                <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n                  <span\n                    class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{ mod.name }}\n                  </span>\n                  <span\n                    class=\"tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                  >\n                    {{\n                      cloudT.modules.blockCount.replace(\n                        \"{count}\",\n                        String(mod.content.length),\n                      )\n                    }}\n                  </span>\n                </div>\n                <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n                  <component\n                    :is=\"icon.icon\"\n                    v-for=\"icon in getModuleBlockTypeIcons(mod)\"\n                    :key=\"icon.type\"\n                    :size=\"14\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span\n                    v-if=\"getRemainingTypeCount(mod) > 0\"\n                    class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                  >\n                    +{{ getRemainingTypeCount(mod) }}\n                  </span>\n                  <button\n                    v-if=\"confirmDeleteId === mod.id\"\n                    :aria-label=\"cloudT.modules.deleteConfirm\"\n                    class=\"tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-100 tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]\"\n                    style=\"background-color: transparent\"\n                    @click.stop=\"handleDelete(mod.id)\"\n                  >\n                    {{ cloudT.modules.deleteConfirm }}\n                  </button>\n                  <button\n                    v-else\n                    class=\"tpl-module-delete-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]\"\n                    :aria-label=\"cloudT.modules.delete\"\n                    :title=\"cloudT.modules.delete\"\n                    @click.stop=\"confirmDeleteId = mod.id\"\n                  >\n                    <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n                  </button>\n                </div>\n              </button>\n            </div>\n\n            <!-- Empty state -->\n            <div\n              v-else\n              class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n            >\n              <Package\n                :size=\"32\"\n                :stroke-width=\"1\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n                {{\n                  searchQuery\n                    ? cloudT.modules.noModules\n                    : cloudT.modules.noModulesHint\n                }}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right panel: preview -->\n        <div\n          class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n        >\n          <div\n            v-if=\"selectedModule\"\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n          >\n            <!-- Visual preview -->\n            <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n              <ModulePreviewCanvas :blocks=\"selectedModule.content\" />\n            </div>\n          </div>\n\n          <!-- Empty preview state -->\n          <div\n            v-else\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n          >\n            <Package\n              :size=\"32\"\n              :stroke-width=\"1\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ cloudT.modules.selectToPreview }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n      >\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <label\n            class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ cloudT.modules.insertPosition }}\n          </label>\n          <select\n            v-model=\"insertPosition\"\n            class=\"tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          >\n            <option\n              v-for=\"opt in positionOptions\"\n              :key=\"opt.value\"\n              :value=\"opt.value\"\n            >\n              {{ opt.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"tpl:flex tpl:gap-2\">\n          <button\n            type=\"button\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n            @click=\"handleClose\"\n          >\n            {{ cloudT.modules.close }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n            :disabled=\"!selectedModule\"\n            @click=\"handleInsert\"\n          >\n            {{ cloudT.modules.insert }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </TplModal>\n</template>\n\n<style>\n.tpl-module-delete-btn:hover {\n  color: var(--tpl-danger) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { blockTypeIcons } from \"../../utils/blockTypeIcons\";\nimport {\n  SAVED_MODULES_HEADLESS_KEY,\n  EDITOR_KEY,\n  requireInject,\n} from \"../../keys\";\nimport type { SavedModule } from \"@templatical/types\";\nimport { Package, Search, Trash2, X } from \"@lucide/vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\", module: SavedModule, insertIndex: number | undefined): void;\n}>();\n\nconst ModulePreviewCanvas = defineAsyncComponent(\n  () => import(\"./ModulePreviewCanvas.vue\"),\n);\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst savedModules = requireInject(\n  SAVED_MODULES_HEADLESS_KEY,\n  \"ModuleBrowserModal\",\n);\nconst editor = requireInject(EDITOR_KEY, \"ModuleBrowserModal\");\n\nconst searchQuery = ref(\"\");\nconst selectedModuleId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\nconst filteredModules = computed(() => {\n  const modules = savedModules.modules.value;\n  if (!searchQuery.value) return modules;\n  const query = searchQuery.value.toLowerCase();\n  return modules.filter((m) => m.name.toLowerCase().includes(query));\n});\n\nconst selectedModule = computed(() => {\n  if (!selectedModuleId.value) return null;\n  return (\n    savedModules.modules.value.find((m) => m.id === selectedModuleId.value) ??\n    null\n  );\n});\n\ninterface PositionOption {\n  value: string;\n  label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n  const options: PositionOption[] = [\n    { value: \"beginning\", label: cloudT.modules.insertAtBeginning },\n  ];\n  const blocks = editor.content.value.blocks;\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    const typeKey = block.type as keyof typeof t.blocks;\n    const label = t.blocks[typeKey] ?? block.type;\n    options.push({\n      value: block.id,\n      label: cloudT.modules.insertAfterBlock.replace(\n        \"{block}\",\n        `${label} ${i + 1}`,\n      ),\n    });\n  }\n  options.push({ value: \"end\", label: cloudT.modules.insertAtEnd });\n  return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n  if (insertPosition.value === \"end\") return undefined;\n  if (insertPosition.value === \"beginning\") return 0;\n  const blocks = editor.content.value.blocks;\n  const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n  if (idx !== -1) return idx + 1;\n  return undefined;\n});\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      searchQuery.value = \"\";\n      selectedModuleId.value = null;\n      confirmDeleteId.value = null;\n      // Default to after selected block, or end\n      const selectedId = editor.state.selectedBlockId;\n      if (selectedId) {\n        const idx = editor.content.value.blocks.findIndex(\n          (b) => b.id === selectedId,\n        );\n        insertPosition.value = idx !== -1 ? selectedId : \"end\";\n      } else {\n        insertPosition.value = \"end\";\n      }\n    }\n  },\n);\n\nfunction getModuleBlockTypeIcons(\n  module: SavedModule,\n): { type: string; icon: unknown }[] {\n  const icons: { type: string; icon: unknown }[] = [];\n  const seen = new Set<string>();\n  for (const block of module.content) {\n    if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n      seen.add(block.type);\n      icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n    }\n    if (icons.length >= 5) break;\n  }\n  return icons;\n}\n\nfunction getRemainingTypeCount(module: SavedModule): number {\n  const types = new Set(module.content.map((b) => b.type));\n  return Math.max(0, types.size - 5);\n}\n\nasync function handleDelete(moduleId: string): Promise<void> {\n  try {\n    await savedModules.deleteModule(moduleId);\n    if (selectedModuleId.value === moduleId) {\n      selectedModuleId.value = null;\n    }\n  } finally {\n    confirmDeleteId.value = null;\n  }\n}\n\nfunction handleInsert(): void {\n  if (selectedModule.value) {\n    emit(\"insert\", selectedModule.value, resolvedInsertIndex.value);\n  }\n}\n\nfunction handleClose(): void {\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n  if (event.key === \"Enter\" && selectedModule.value) {\n    event.preventDefault();\n    handleInsert();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"tpl-module-browser-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-[1000px] tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n        max-height: 90vh;\n      \"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n      >\n        <h3\n          id=\"tpl-module-browser-title\"\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ cloudT.modules.browse }}\n        </h3>\n        <button\n          :aria-label=\"cloudT.modules.close\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]\"\n          @click=\"handleClose\"\n        >\n          <X :size=\"16\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n        <!-- Left panel: module grid -->\n        <div\n          class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n        >\n          <!-- Search -->\n          <div class=\"tpl:px-4 tpl:pt-4 tpl:pb-3\">\n            <div class=\"tpl:relative\">\n              <Search\n                :size=\"14\"\n                :stroke-width=\"2\"\n                class=\"tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                :placeholder=\"cloudT.modules.search\"\n                class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n              />\n            </div>\n          </div>\n\n          <!-- Grid -->\n          <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n            <div\n              v-if=\"filteredModules.length > 0\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n            >\n              <button\n                v-for=\"mod in filteredModules\"\n                :key=\"mod.id\"\n                type=\"button\"\n                :aria-pressed=\"selectedModuleId === mod.id\"\n                class=\"tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]\"\n                :style=\"{\n                  borderColor:\n                    selectedModuleId === mod.id\n                      ? 'var(--tpl-primary)'\n                      : 'var(--tpl-border)',\n                  backgroundColor:\n                    selectedModuleId === mod.id\n                      ? 'var(--tpl-primary-light)'\n                      : 'transparent',\n                }\"\n                @click=\"selectedModuleId = mod.id\"\n              >\n                <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n                  <span\n                    class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{ mod.name }}\n                  </span>\n                  <span\n                    class=\"tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                  >\n                    {{\n                      cloudT.modules.blockCount.replace(\n                        \"{count}\",\n                        String(mod.content.length),\n                      )\n                    }}\n                  </span>\n                </div>\n                <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n                  <component\n                    :is=\"icon.icon\"\n                    v-for=\"icon in getModuleBlockTypeIcons(mod)\"\n                    :key=\"icon.type\"\n                    :size=\"14\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span\n                    v-if=\"getRemainingTypeCount(mod) > 0\"\n                    class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                  >\n                    +{{ getRemainingTypeCount(mod) }}\n                  </span>\n                  <button\n                    v-if=\"confirmDeleteId === mod.id\"\n                    :aria-label=\"cloudT.modules.deleteConfirm\"\n                    class=\"tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-100 tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]\"\n                    style=\"background-color: transparent\"\n                    @click.stop=\"handleDelete(mod.id)\"\n                  >\n                    {{ cloudT.modules.deleteConfirm }}\n                  </button>\n                  <button\n                    v-else\n                    class=\"tpl-module-delete-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]\"\n                    :aria-label=\"cloudT.modules.delete\"\n                    :title=\"cloudT.modules.delete\"\n                    @click.stop=\"confirmDeleteId = mod.id\"\n                  >\n                    <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n                  </button>\n                </div>\n              </button>\n            </div>\n\n            <!-- Empty state -->\n            <div\n              v-else\n              class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n            >\n              <Package\n                :size=\"32\"\n                :stroke-width=\"1\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n                {{\n                  searchQuery\n                    ? cloudT.modules.noModules\n                    : cloudT.modules.noModulesHint\n                }}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right panel: preview -->\n        <div\n          class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n        >\n          <div\n            v-if=\"selectedModule\"\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n          >\n            <!-- Visual preview -->\n            <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n              <ModulePreviewCanvas :blocks=\"selectedModule.content\" />\n            </div>\n          </div>\n\n          <!-- Empty preview state -->\n          <div\n            v-else\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n          >\n            <Package\n              :size=\"32\"\n              :stroke-width=\"1\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ cloudT.modules.selectToPreview }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n      >\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <label\n            class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ cloudT.modules.insertPosition }}\n          </label>\n          <select\n            v-model=\"insertPosition\"\n            class=\"tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          >\n            <option\n              v-for=\"opt in positionOptions\"\n              :key=\"opt.value\"\n              :value=\"opt.value\"\n            >\n              {{ opt.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"tpl:flex tpl:gap-2\">\n          <button\n            type=\"button\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n            @click=\"handleClose\"\n          >\n            {{ cloudT.modules.close }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n            :disabled=\"!selectedModule\"\n            @click=\"handleInsert\"\n          >\n            {{ cloudT.modules.insert }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </TplModal>\n</template>\n\n<style>\n.tpl-module-delete-btn:hover {\n  color: var(--tpl-danger) !important;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ModuleBrowserModal-hnbUUl8w.js","names":[],"sources":["../../../src/cloud/components/ModuleBrowserModal.vue","../../../src/cloud/components/ModuleBrowserModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { blockTypeIcons } from \"../../utils/blockTypeIcons\";\nimport {\n  SAVED_MODULES_HEADLESS_KEY,\n  EDITOR_KEY,\n  requireInject,\n} from \"../../keys\";\nimport type { SavedModule } from \"@templatical/types\";\nimport { Package, Search, Trash2, X } from \"@lucide/vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\", module: SavedModule, insertIndex: number | undefined): void;\n}>();\n\nconst ModulePreviewCanvas = defineAsyncComponent(\n  () => import(\"./ModulePreviewCanvas.vue\"),\n);\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst savedModules = requireInject(\n  SAVED_MODULES_HEADLESS_KEY,\n  \"ModuleBrowserModal\",\n);\nconst editor = requireInject(EDITOR_KEY, \"ModuleBrowserModal\");\n\nconst searchQuery = ref(\"\");\nconst selectedModuleId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\nconst filteredModules = computed(() => {\n  const modules = savedModules.modules.value;\n  if (!searchQuery.value) return modules;\n  const query = searchQuery.value.toLowerCase();\n  return modules.filter((m) => m.name.toLowerCase().includes(query));\n});\n\nconst selectedModule = computed(() => {\n  if (!selectedModuleId.value) return null;\n  return (\n    savedModules.modules.value.find((m) => m.id === selectedModuleId.value) ??\n    null\n  );\n});\n\ninterface PositionOption {\n  value: string;\n  label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n  const options: PositionOption[] = [\n    { value: \"beginning\", label: cloudT.modules.insertAtBeginning },\n  ];\n  const blocks = editor.content.value.blocks;\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    const typeKey = block.type as keyof typeof t.blocks;\n    const label = t.blocks[typeKey] ?? block.type;\n    options.push({\n      value: block.id,\n      label: cloudT.modules.insertAfterBlock.replace(\n        \"{block}\",\n        `${label} ${i + 1}`,\n      ),\n    });\n  }\n  options.push({ value: \"end\", label: cloudT.modules.insertAtEnd });\n  return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n  if (insertPosition.value === \"end\") return undefined;\n  if (insertPosition.value === \"beginning\") return 0;\n  const blocks = editor.content.value.blocks;\n  const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n  if (idx !== -1) return idx + 1;\n  return undefined;\n});\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      searchQuery.value = \"\";\n      selectedModuleId.value = null;\n      confirmDeleteId.value = null;\n      // Default to after selected block, or end\n      const selectedId = editor.state.selectedBlockId;\n      if (selectedId) {\n        const idx = editor.content.value.blocks.findIndex(\n          (b) => b.id === selectedId,\n        );\n        insertPosition.value = idx !== -1 ? selectedId : \"end\";\n      } else {\n        insertPosition.value = \"end\";\n      }\n    }\n  },\n);\n\nfunction getModuleBlockTypeIcons(\n  module: SavedModule,\n): { type: string; icon: unknown }[] {\n  const icons: { type: string; icon: unknown }[] = [];\n  const seen = new Set<string>();\n  for (const block of module.content) {\n    if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n      seen.add(block.type);\n      icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n    }\n    if (icons.length >= 5) break;\n  }\n  return icons;\n}\n\nfunction getRemainingTypeCount(module: SavedModule): number {\n  const types = new Set(module.content.map((b) => b.type));\n  return Math.max(0, types.size - 5);\n}\n\nasync function handleDelete(moduleId: string): Promise<void> {\n  try {\n    await savedModules.deleteModule(moduleId);\n    if (selectedModuleId.value === moduleId) {\n      selectedModuleId.value = null;\n    }\n  } finally {\n    confirmDeleteId.value = null;\n  }\n}\n\nfunction handleInsert(): void {\n  if (selectedModule.value) {\n    emit(\"insert\", selectedModule.value, resolvedInsertIndex.value);\n  }\n}\n\nfunction handleClose(): void {\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n  if (event.key === \"Enter\" && selectedModule.value) {\n    event.preventDefault();\n    handleInsert();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"tpl-module-browser-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-[1000px] tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n        max-height: 90vh;\n      \"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n      >\n        <h3\n          id=\"tpl-module-browser-title\"\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ cloudT.modules.browse }}\n        </h3>\n        <button\n          :aria-label=\"cloudT.modules.close\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]\"\n          @click=\"handleClose\"\n        >\n          <X :size=\"16\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n        <!-- Left panel: module grid -->\n        <div\n          class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n        >\n          <!-- Search -->\n          <div class=\"tpl:px-4 tpl:pt-4 tpl:pb-3\">\n            <div class=\"tpl:relative\">\n              <Search\n                :size=\"14\"\n                :stroke-width=\"2\"\n                class=\"tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                :placeholder=\"cloudT.modules.search\"\n                class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n              />\n            </div>\n          </div>\n\n          <!-- Grid -->\n          <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n            <div\n              v-if=\"filteredModules.length > 0\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n            >\n              <button\n                v-for=\"mod in filteredModules\"\n                :key=\"mod.id\"\n                type=\"button\"\n                :aria-pressed=\"selectedModuleId === mod.id\"\n                class=\"tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]\"\n                :style=\"{\n                  borderColor:\n                    selectedModuleId === mod.id\n                      ? 'var(--tpl-primary)'\n                      : 'var(--tpl-border)',\n                  backgroundColor:\n                    selectedModuleId === mod.id\n                      ? 'var(--tpl-primary-light)'\n                      : 'transparent',\n                }\"\n                @click=\"selectedModuleId = mod.id\"\n              >\n                <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n                  <span\n                    class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{ mod.name }}\n                  </span>\n                  <span\n                    class=\"tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                  >\n                    {{\n                      cloudT.modules.blockCount.replace(\n                        \"{count}\",\n                        String(mod.content.length),\n                      )\n                    }}\n                  </span>\n                </div>\n                <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n                  <component\n                    :is=\"icon.icon\"\n                    v-for=\"icon in getModuleBlockTypeIcons(mod)\"\n                    :key=\"icon.type\"\n                    :size=\"14\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span\n                    v-if=\"getRemainingTypeCount(mod) > 0\"\n                    class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                  >\n                    +{{ getRemainingTypeCount(mod) }}\n                  </span>\n                  <button\n                    v-if=\"confirmDeleteId === mod.id\"\n                    :aria-label=\"cloudT.modules.deleteConfirm\"\n                    class=\"tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-100 tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]\"\n                    style=\"background-color: transparent\"\n                    @click.stop=\"handleDelete(mod.id)\"\n                  >\n                    {{ cloudT.modules.deleteConfirm }}\n                  </button>\n                  <button\n                    v-else\n                    class=\"tpl-module-delete-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]\"\n                    :aria-label=\"cloudT.modules.delete\"\n                    :title=\"cloudT.modules.delete\"\n                    @click.stop=\"confirmDeleteId = mod.id\"\n                  >\n                    <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n                  </button>\n                </div>\n              </button>\n            </div>\n\n            <!-- Empty state -->\n            <div\n              v-else\n              class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n            >\n              <Package\n                :size=\"32\"\n                :stroke-width=\"1\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n                {{\n                  searchQuery\n                    ? cloudT.modules.noModules\n                    : cloudT.modules.noModulesHint\n                }}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right panel: preview -->\n        <div\n          class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n        >\n          <div\n            v-if=\"selectedModule\"\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n          >\n            <!-- Visual preview -->\n            <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n              <ModulePreviewCanvas :blocks=\"selectedModule.content\" />\n            </div>\n          </div>\n\n          <!-- Empty preview state -->\n          <div\n            v-else\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n          >\n            <Package\n              :size=\"32\"\n              :stroke-width=\"1\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ cloudT.modules.selectToPreview }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n      >\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <label\n            class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ cloudT.modules.insertPosition }}\n          </label>\n          <select\n            v-model=\"insertPosition\"\n            class=\"tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          >\n            <option\n              v-for=\"opt in positionOptions\"\n              :key=\"opt.value\"\n              :value=\"opt.value\"\n            >\n              {{ opt.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"tpl:flex tpl:gap-2\">\n          <button\n            type=\"button\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n            @click=\"handleClose\"\n          >\n            {{ cloudT.modules.close }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n            :disabled=\"!selectedModule\"\n            @click=\"handleInsert\"\n          >\n            {{ cloudT.modules.insert }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </TplModal>\n</template>\n\n<style>\n.tpl-module-delete-btn:hover {\n  color: var(--tpl-danger) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { blockTypeIcons } from \"../../utils/blockTypeIcons\";\nimport {\n  SAVED_MODULES_HEADLESS_KEY,\n  EDITOR_KEY,\n  requireInject,\n} from \"../../keys\";\nimport type { SavedModule } from \"@templatical/types\";\nimport { Package, Search, Trash2, X } from \"@lucide/vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\", module: SavedModule, insertIndex: number | undefined): void;\n}>();\n\nconst ModulePreviewCanvas = defineAsyncComponent(\n  () => import(\"./ModulePreviewCanvas.vue\"),\n);\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst savedModules = requireInject(\n  SAVED_MODULES_HEADLESS_KEY,\n  \"ModuleBrowserModal\",\n);\nconst editor = requireInject(EDITOR_KEY, \"ModuleBrowserModal\");\n\nconst searchQuery = ref(\"\");\nconst selectedModuleId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\nconst filteredModules = computed(() => {\n  const modules = savedModules.modules.value;\n  if (!searchQuery.value) return modules;\n  const query = searchQuery.value.toLowerCase();\n  return modules.filter((m) => m.name.toLowerCase().includes(query));\n});\n\nconst selectedModule = computed(() => {\n  if (!selectedModuleId.value) return null;\n  return (\n    savedModules.modules.value.find((m) => m.id === selectedModuleId.value) ??\n    null\n  );\n});\n\ninterface PositionOption {\n  value: string;\n  label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n  const options: PositionOption[] = [\n    { value: \"beginning\", label: cloudT.modules.insertAtBeginning },\n  ];\n  const blocks = editor.content.value.blocks;\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    const typeKey = block.type as keyof typeof t.blocks;\n    const label = t.blocks[typeKey] ?? block.type;\n    options.push({\n      value: block.id,\n      label: cloudT.modules.insertAfterBlock.replace(\n        \"{block}\",\n        `${label} ${i + 1}`,\n      ),\n    });\n  }\n  options.push({ value: \"end\", label: cloudT.modules.insertAtEnd });\n  return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n  if (insertPosition.value === \"end\") return undefined;\n  if (insertPosition.value === \"beginning\") return 0;\n  const blocks = editor.content.value.blocks;\n  const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n  if (idx !== -1) return idx + 1;\n  return undefined;\n});\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      searchQuery.value = \"\";\n      selectedModuleId.value = null;\n      confirmDeleteId.value = null;\n      // Default to after selected block, or end\n      const selectedId = editor.state.selectedBlockId;\n      if (selectedId) {\n        const idx = editor.content.value.blocks.findIndex(\n          (b) => b.id === selectedId,\n        );\n        insertPosition.value = idx !== -1 ? selectedId : \"end\";\n      } else {\n        insertPosition.value = \"end\";\n      }\n    }\n  },\n);\n\nfunction getModuleBlockTypeIcons(\n  module: SavedModule,\n): { type: string; icon: unknown }[] {\n  const icons: { type: string; icon: unknown }[] = [];\n  const seen = new Set<string>();\n  for (const block of module.content) {\n    if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n      seen.add(block.type);\n      icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n    }\n    if (icons.length >= 5) break;\n  }\n  return icons;\n}\n\nfunction getRemainingTypeCount(module: SavedModule): number {\n  const types = new Set(module.content.map((b) => b.type));\n  return Math.max(0, types.size - 5);\n}\n\nasync function handleDelete(moduleId: string): Promise<void> {\n  try {\n    await savedModules.deleteModule(moduleId);\n    if (selectedModuleId.value === moduleId) {\n      selectedModuleId.value = null;\n    }\n  } finally {\n    confirmDeleteId.value = null;\n  }\n}\n\nfunction handleInsert(): void {\n  if (selectedModule.value) {\n    emit(\"insert\", selectedModule.value, resolvedInsertIndex.value);\n  }\n}\n\nfunction handleClose(): void {\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n  if (event.key === \"Enter\" && selectedModule.value) {\n    event.preventDefault();\n    handleInsert();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"tpl-module-browser-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-[1000px] tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n        max-height: 90vh;\n      \"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n      >\n        <h3\n          id=\"tpl-module-browser-title\"\n          class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n        >\n          {{ cloudT.modules.browse }}\n        </h3>\n        <button\n          :aria-label=\"cloudT.modules.close\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]\"\n          @click=\"handleClose\"\n        >\n          <X :size=\"16\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n        <!-- Left panel: module grid -->\n        <div\n          class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n        >\n          <!-- Search -->\n          <div class=\"tpl:px-4 tpl:pt-4 tpl:pb-3\">\n            <div class=\"tpl:relative\">\n              <Search\n                :size=\"14\"\n                :stroke-width=\"2\"\n                class=\"tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                :placeholder=\"cloudT.modules.search\"\n                class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n              />\n            </div>\n          </div>\n\n          <!-- Grid -->\n          <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n            <div\n              v-if=\"filteredModules.length > 0\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n            >\n              <button\n                v-for=\"mod in filteredModules\"\n                :key=\"mod.id\"\n                type=\"button\"\n                :aria-pressed=\"selectedModuleId === mod.id\"\n                class=\"tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]\"\n                :style=\"{\n                  borderColor:\n                    selectedModuleId === mod.id\n                      ? 'var(--tpl-primary)'\n                      : 'var(--tpl-border)',\n                  backgroundColor:\n                    selectedModuleId === mod.id\n                      ? 'var(--tpl-primary-light)'\n                      : 'transparent',\n                }\"\n                @click=\"selectedModuleId = mod.id\"\n              >\n                <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n                  <span\n                    class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{ mod.name }}\n                  </span>\n                  <span\n                    class=\"tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                  >\n                    {{\n                      cloudT.modules.blockCount.replace(\n                        \"{count}\",\n                        String(mod.content.length),\n                      )\n                    }}\n                  </span>\n                </div>\n                <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n                  <component\n                    :is=\"icon.icon\"\n                    v-for=\"icon in getModuleBlockTypeIcons(mod)\"\n                    :key=\"icon.type\"\n                    :size=\"14\"\n                    :stroke-width=\"1.5\"\n                    class=\"tpl:text-[var(--tpl-text-dim)]\"\n                  />\n                  <span\n                    v-if=\"getRemainingTypeCount(mod) > 0\"\n                    class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                  >\n                    +{{ getRemainingTypeCount(mod) }}\n                  </span>\n                  <button\n                    v-if=\"confirmDeleteId === mod.id\"\n                    :aria-label=\"cloudT.modules.deleteConfirm\"\n                    class=\"tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-100 tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]\"\n                    style=\"background-color: transparent\"\n                    @click.stop=\"handleDelete(mod.id)\"\n                  >\n                    {{ cloudT.modules.deleteConfirm }}\n                  </button>\n                  <button\n                    v-else\n                    class=\"tpl-module-delete-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]\"\n                    :aria-label=\"cloudT.modules.delete\"\n                    :title=\"cloudT.modules.delete\"\n                    @click.stop=\"confirmDeleteId = mod.id\"\n                  >\n                    <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n                  </button>\n                </div>\n              </button>\n            </div>\n\n            <!-- Empty state -->\n            <div\n              v-else\n              class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n            >\n              <Package\n                :size=\"32\"\n                :stroke-width=\"1\"\n                class=\"tpl:text-[var(--tpl-text-dim)]\"\n              />\n              <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n                {{\n                  searchQuery\n                    ? cloudT.modules.noModules\n                    : cloudT.modules.noModulesHint\n                }}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right panel: preview -->\n        <div\n          class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n        >\n          <div\n            v-if=\"selectedModule\"\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n          >\n            <!-- Visual preview -->\n            <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n              <ModulePreviewCanvas :blocks=\"selectedModule.content\" />\n            </div>\n          </div>\n\n          <!-- Empty preview state -->\n          <div\n            v-else\n            class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n          >\n            <Package\n              :size=\"32\"\n              :stroke-width=\"1\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ cloudT.modules.selectToPreview }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n      >\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <label\n            class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            {{ cloudT.modules.insertPosition }}\n          </label>\n          <select\n            v-model=\"insertPosition\"\n            class=\"tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          >\n            <option\n              v-for=\"opt in positionOptions\"\n              :key=\"opt.value\"\n              :value=\"opt.value\"\n            >\n              {{ opt.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"tpl:flex tpl:gap-2\">\n          <button\n            type=\"button\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n            @click=\"handleClose\"\n          >\n            {{ cloudT.modules.close }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n            :disabled=\"!selectedModule\"\n            @click=\"handleInsert\"\n          >\n            {{ cloudT.modules.insert }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </TplModal>\n</template>\n\n<style>\n.tpl-module-delete-btn:hover {\n  color: var(--tpl-danger) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/cdn/chunks/{ModulePreviewCanvas-DE4_oHA_.js → ModulePreviewCanvas-_DoUZGQh.js}

@@ -1,5 +1,5 @@
 import { I as e, L as t, M as n, P as r, T as i, f as a, g as o, it as s, m as c, p as l, st as u, u as d, x as f } from "./draggable-P6QWzy4g.js";
-import { B as p, H as m, J as h, K as g, M as _, Mt as v, N as y, P as b, R as x, U as S, V as C, Vt as w, W as T, j as E, q as D } from "./features-CXF_YKlL.js";
+import { B as p, Bt as m, H as h, J as g, K as _, M as v, Mt as y, N as b, P as x, R as S, U as C, V as w, W as T, j as E, q as D } from "./features-BsW4aFcn.js";
 //#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
 var O = { class: "tpl:w-full" }, k = { class: "tpl:flex tpl:gap-0" }, A = /* @__PURE__ */ f({
 	name: "PreviewSectionBlock",
@@ -10,19 +10,19 @@ var O = { class: "tpl:w-full" }, k = { class: "tpl:flex tpl:gap-0" }, A = /* @__
 	},
 	setup(f) {
 		let A = {
-			title: x,
-			paragraph: m,
+			title: S,
+			paragraph: h,
 			image: T,
 			video: E,
-			button: v,
+			button: y,
 			divider: D,
-			social: b,
-			menu: S,
-			table: _,
-			spacer: y,
-			html: g,
-			custom: h
-		}, j = f, M = i(w, null), N = a(() => {
+			social: x,
+			menu: C,
+			table: v,
+			spacer: b,
+			html: _,
+			custom: g
+		}, j = f, M = i(m, null), N = a(() => {
 			switch (j.block.columns) {
 				case "2": return ["50%", "50%"];
 				case "3": return [
@@ -43,7 +43,7 @@ var O = { class: "tpl:w-full" }, k = { class: "tpl:flex tpl:gap-0" }, A = /* @__
 			return P.value[e] || [];
 		}
 		function I(e) {
-			return C(e, M, A);
+			return w(e, M, A);
 		}
 		return (i, a) => {
 			let f = e("PreviewSectionBlock", !0);
@@ -74,23 +74,23 @@ var O = { class: "tpl:w-full" }, k = { class: "tpl:flex tpl:gap-0" }, A = /* @__
 	__name: "ModulePreviewCanvas",
 	props: { blocks: {} },
 	setup(e) {
-		let a = i(w), l = {
+		let a = i(m), l = {
 			section: A,
-			title: x,
-			paragraph: m,
+			title: S,
+			paragraph: h,
 			image: T,
 			video: E,
-			button: v,
+			button: y,
 			divider: D,
-			social: b,
-			menu: S,
-			table: _,
-			spacer: y,
-			html: g,
-			custom: h
+			social: x,
+			menu: C,
+			table: v,
+			spacer: b,
+			html: _,
+			custom: g
 		};
 		function f(e) {
-			return C(e, a, l);
+			return w(e, a, l);
 		}
 		return (i, a) => (n(), o("div", j, [(n(!0), o(d, null, r(e.blocks, (e) => (n(), o("div", {
 			key: e.id,
@@ -104,4 +104,4 @@ var O = { class: "tpl:w-full" }, k = { class: "tpl:flex tpl:gap-0" }, A = /* @__
 //#endregion
 export { M as default };
 
-//# sourceMappingURL=ModulePreviewCanvas-DE4_oHA_.js.map
+//# sourceMappingURL=ModulePreviewCanvas-_DoUZGQh.js.map