@templatical/editor 0.13.0 → 0.15.0

package/dist/cdn/chunks/{ModuleBrowserModal-a-tZRCcD.js.map → ModuleBrowserModal-Dz-I5zfj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ModuleBrowserModal-a-tZRCcD.js","names":[],"sources":["../../../src/cloud/components/ModuleBrowserModal.vue","../../../src/cloud/components/ModuleBrowserModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"../../components/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 \"../../components/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,IAAM,KAAQ,GAIR,IAAO,GAKP,KAAsB,QACpB,OAAO,oCACf,GAEM,EAAE,UAAM,GAAQ,GAChB,EAAE,GAAG,MAAW,GAAmB,GACnC,IAAe,EACnB,IACA,oBACF,GACM,IAAS,EAAc,IAAY,oBAAoB,GAEvD,IAAc,EAAI,EAAE,GACpB,IAAmB,EAAmB,IAAI,GAC1C,IAAkB,EAAmB,IAAI,GAEzC,IAAiB,EAAY,KAAK,GAElC,IAAkB,QAAe;GACrC,IAAM,IAAU,EAAa,QAAQ;GACrC,IAAI,CAAC,EAAY,OAAO,OAAO;GAC/B,IAAM,IAAQ,EAAY,MAAM,YAAY;GAC5C,OAAO,EAAQ,QAAQ,MAAM,EAAE,KAAK,YAAY,CAAC,CAAC,SAAS,CAAK,CAAC;EACnE,CAAC,GAEK,IAAiB,QAChB,EAAiB,QAEpB,EAAa,QAAQ,MAAM,MAAM,MAAM,EAAE,OAAO,EAAiB,KAAK,KACtE,OAHkC,IAKrC,GAOK,KAAkB,QAAiC;GACvD,IAAM,IAA4B,CAChC;IAAE,OAAO;IAAa,OAAO,EAAO,QAAQ;GAAkB,CAChE,GACM,IAAS,EAAO,QAAQ,MAAM;GACpC,KAAK,IAAI,IAAI,GAAG,IAAI,EAAO,QAAQ,KAAK;IACtC,IAAM,IAAQ,EAAO;IAGrB,EAAQ,KAAK;KACX,OAAO,EAAM;KACb,OAAO,EAAO,QAAQ,iBAAiB,QACrC,WACA,GALU,GAAE,OADA,EAAM,SACa,EAAM,KAK5B,GAAG,IAAI,GAClB;IACF,CAAC;GACH;GAEA,OADA,EAAQ,KAAK;IAAE,OAAO;IAAO,OAAO,EAAO,QAAQ;GAAY,CAAC,GACzD;EACT,CAAC,GAEK,KAAsB,QAAmC;GAC7D,IAAI,EAAe,UAAU,OAAO;GACpC,IAAI,EAAe,UAAU,aAAa,OAAO;GAEjD,IAAM,IADS,EAAO,QAAQ,MAAM,OACjB,WAAW,MAAM,EAAE,OAAO,EAAe,KAAK;GACjE,IAAI,MAAQ,IAAI,OAAO,IAAM;EAE/B,CAAC;EAED,SACQ,GAAM,UACX,MAAY;GACX,IAAI,GAAS;IAGX,AAFA,EAAY,QAAQ,IACpB,EAAiB,QAAQ,MACzB,EAAgB,QAAQ;IAExB,IAAM,IAAa,EAAO,MAAM;IAChC,AAAI,IAIF,EAAe,QAHH,EAAO,QAAQ,MAAM,OAAO,WACrC,MAAM,EAAE,OAAO,CAEK,MAAQ,KAAkB,QAAb,IAEpC,EAAe,QAAQ;GAE3B;EACF,CACF;EAEA,SAAS,GACP,GACmC;GACnC,IAAM,IAA2C,CAAC,GAC5C,oBAAO,IAAI,IAAY;GAC7B,KAAK,IAAM,KAAS,EAAO,SAKzB,IAJI,CAAC,EAAK,IAAI,EAAM,IAAI,KAAK,EAAe,EAAM,UAChD,EAAK,IAAI,EAAM,IAAI,GACnB,EAAM,KAAK;IAAE,MAAM,EAAM;IAAM,MAAM,EAAe,EAAM;GAAM,CAAC,IAE/D,EAAM,UAAU,GAAG;GAEzB,OAAO;EACT;EAEA,SAAS,EAAsB,GAA6B;GAC1D,IAAM,IAAQ,IAAI,IAAI,EAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,CAAC;GACvD,OAAO,KAAK,IAAI,GAAG,EAAM,OAAO,CAAC;EACnC;EAEA,eAAe,GAAa,GAAiC;GAC3D,IAAI;IAEF,AADA,MAAM,EAAa,aAAa,CAAQ,GACpC,EAAiB,UAAU,MAC7B,EAAiB,QAAQ;GAE7B,UAAU;IACR,EAAgB,QAAQ;GAC1B;EACF;EAEA,SAAS,IAAqB;GAC5B,AAAI,EAAe,SACjB,EAAK,UAAU,EAAe,OAAO,GAAoB,KAAK;EAElE;EAEA,SAAS,IAAoB;GAC3B,EAAK,OAAO;EACd;EAEA,SAAS,GAAc,GAA4B;GAIjD,AAHI,EAAM,QAAQ,YAChB,EAAY,GAEV,EAAM,QAAQ,WAAW,EAAe,UAC1C,EAAM,eAAe,GACrB,EAAa;EAEjB;yBAIE,EAoOW,IAAA;GApOA,SAAS,EAAA;GAAU,SAAO;GAAc,WAAS;;qBAmOpD,CAlON,EAkOM,OAlON,IAkOM;IAtNJ,EAgBM,OAhBN,IAgBM,CAbJ,EAKK,MALL,GAKK,EADA,EAAA,CAAA,CAAM,CAAC,QAAQ,MAAM,GAAA,CAAA,GAE1B,EAMS,UAAA;KALN,cAAY,EAAA,CAAA,CAAM,CAAC,QAAQ;KAC5B,OAAM;KACL,SAAO;QAER,EAAkC,EAAA,EAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;;IAKjC,EAwJM,OAxJN,GAwJM,CAtJJ,EAqHM,OArHN,GAqHM,CAjHJ,EAcM,OAdN,GAcM,CAbJ,EAYM,OAZN,GAYM,CAXJ,EAIE,EAAA,EAAA,GAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;UAER,EAKE,SAAA;8CAJoB,QAAA;KACpB,MAAK;KACJ,aAAa,EAAA,CAAA,CAAM,CAAC,QAAQ;KAC7B,OAAM;0BAHG,EAAA,KAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAS1B,EA+FM,OA/FN,GA+FM,CA7FI,EAAA,MAAgB,SAAM,KAAA,EAAA,GAD9B,EA0EM,OA1EN,GA0EM,EAAA,EAAA,EAAA,GAtEJ,EAqES,GAAA,MAAA,EApEO,EAAA,QAAP,YADT,EAqES,UAAA;KAnEN,KAAK,EAAI;KACV,MAAK;KACJ,gBAAc,EAAA,UAAqB,EAAI;KACxC,OAAM;KACL,OAAK,GAAA;mBAAuD,EAAA,UAAqB,EAAI,KAAA,uBAAA;uBAAoJ,EAAA,UAAqB,EAAI,KAAA,6BAAA;;KAUlQ,UAAK,MAAE,EAAA,QAAmB,EAAI;QAE/B,EAgBM,OAhBN,GAgBM,CAfJ,EAIO,QAJP,GAIO,EADF,EAAI,IAAI,GAAA,CAAA,GAEb,EASO,QATP,GASO,EALH,EAAA,CAAA,CAAM,CAAC,QAAQ,WAAW,QAAA,WAAoE,OAAO,EAAI,QAAQ,MAAM,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAO7H,EAiCM,OAjCN,GAiCM;aAhCJ,EAOE,GAAA,MAAA,EALe,GAAwB,CAAG,IAAnC,YAFT,EAOE,EANK,EAAK,IAAI,GAAA;MAEb,KAAK,EAAK;MACV,MAAM;MACN,gBAAc;MACf,OAAM;;KAGA,EAAsB,CAAG,IAAA,KAAA,EAAA,GADjC,EAKO,QALP,GAGC,OACE,EAAG,EAAsB,CAAG,CAAA,GAAA,CAAA,KAAA,GAAA,IAAA,EAAA;KAGvB,EAAA,UAAoB,EAAI,MAAA,EAAA,GADhC,EAQS,UAAA;;MANN,cAAY,EAAA,CAAA,CAAM,CAAC,QAAQ;MAC5B,OAAM;MACN,OAAA,EAAA,oBAAA,cAAA;MACC,SAAK,GAAA,MAAO,GAAa,EAAI,EAAE,GAAA,CAAA,MAAA,CAAA;UAE7B,EAAA,CAAA,CAAM,CAAC,QAAQ,aAAa,GAAA,GAAA,CAAA,MAAA,EAAA,GAEjC,EAQS,UAAA;;MANP,OAAM;MACL,cAAY,EAAA,CAAA,CAAM,CAAC,QAAQ;MAC3B,OAAO,EAAA,CAAA,CAAM,CAAC,QAAQ;MACtB,SAAK,GAAA,MAAO,EAAA,QAAkB,EAAI,IAAE,CAAA,MAAA,CAAA;SAErC,EAAyC,EAAA,EAAA,GAAA;MAAhC,MAAM;MAAK,gBAAc;;oCAO1C,EAgBM,OAhBN,GAgBM,CAZJ,EAIE,EAAA,CAAA,GAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;QAER,EAMI,KANJ,GAMI,EAJA,EAAA,QAAkC,EAAA,CAAA,CAAM,CAAC,QAAQ,YAAgC,EAAA,CAAA,CAAM,CAAC,QAAQ,aAAa,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,GAUvH,EA6BM,OA7BN,GA6BM,CAzBI,EAAA,SAAA,EAAA,GADR,EAQM,OARN,IAQM,CAHJ,EAEM,OAFN,GAEM,CADJ,EAAwD,EAAA,EAAA,GAAA,EAAlC,QAAQ,EAAA,MAAe,QAAA,GAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,EAAA,GAKjD,EAcM,OAdN,IAcM,CAVJ,EAIE,EAAA,CAAA,GAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;QAER,EAII,KAJJ,IAII,EADC,EAAA,CAAA,CAAM,CAAC,QAAQ,eAAe,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;IAOzC,EAuCM,OAvCN,IAuCM,CApCJ,EAkBM,OAlBN,IAkBM,CAjBJ,EAIQ,SAJR,IAIQ,EADH,EAAA,CAAA,CAAM,CAAC,QAAQ,cAAc,GAAA,CAAA,GAAA,EAElC,EAWS,UAAA;8CAVgB,QAAA;KACvB,OAAM;gBAEN,EAMS,GAAA,MAAA,EALO,GAAA,QAAP,YADT,EAMS,UAAA;KAJN,KAAK,EAAI;KACT,OAAO,EAAI;SAET,EAAI,KAAK,GAAA,GAAA,EAAA,yBARL,EAAA,KAAc,CAAA,CAAA,CAAA,CAAA,GAY3B,EAgBM,OAhBN,IAgBM,CAfJ,EAMS,UAAA;KALP,MAAK;KACL,OAAM;KACL,SAAO;SAEL,EAAA,CAAA,CAAM,CAAC,QAAQ,KAAK,GAAA,CAAA,GAEzB,EAOS,UAAA;KANP,MAAK;KACL,OAAM;KACL,UAAQ,CAAG,EAAA;KACX,SAAO;SAEL,EAAA,CAAA,CAAM,CAAC,QAAQ,MAAM,GAAA,GAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ModuleBrowserModal-Dz-I5zfj.js","names":[],"sources":["../../../src/cloud/components/ModuleBrowserModal.vue","../../../src/cloud/components/ModuleBrowserModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"../../components/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 \"../../components/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-Bm6k0Op0.js → ModulePreviewCanvas-BfinyuAN.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-Bci-fq8y.js";
-import { B as p, H as m, J as h, K as g, L as _, M as v, N as y, Nt as b, P as x, U as S, V as C, Vt as w, j as T, q as E, z as D } from "./features-DU6lA8l1.js";
+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-kG-D5Xsm.js";
+import { B as p, H as m, Ht as h, J as g, K as _, L as v, M as y, N as b, P as x, Pt as S, U as C, V as w, j as T, q as E, z as D } from "./features-Dpczf9Su.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: _,
-			paragraph: C,
-			image: S,
+			title: v,
+			paragraph: w,
+			image: C,
 			video: T,
-			button: b,
+			button: S,
 			divider: E,
 			social: x,
 			menu: m,
-			table: v,
-			spacer: y,
-			html: g,
-			custom: h
-		}, j = f, M = i(w, null), N = a(() => {
+			table: y,
+			spacer: b,
+			html: _,
+			custom: g
+		}, j = f, M = i(h, null), N = a(() => {
 			switch (j.block.columns) {
 				case "2": return ["50%", "50%"];
 				case "3": return [
@@ -74,20 +74,20 @@ 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(h), l = {
 			section: A,
-			title: _,
-			paragraph: C,
-			image: S,
+			title: v,
+			paragraph: w,
+			image: C,
 			video: T,
-			button: b,
+			button: S,
 			divider: E,
 			social: x,
 			menu: m,
-			table: v,
-			spacer: y,
-			html: g,
-			custom: h
+			table: y,
+			spacer: b,
+			html: _,
+			custom: g
 		};
 		function f(e) {
 			return p(e, a, l);
@@ -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-Bm6k0Op0.js.map
+//# sourceMappingURL=ModulePreviewCanvas-BfinyuAN.js.map

package/dist/cdn/chunks/{ModulePreviewCanvas-Bm6k0Op0.js.map → ModulePreviewCanvas-BfinyuAN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ModulePreviewCanvas-Bm6k0Op0.js","names":[],"sources":["../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/cloud/components/ModulePreviewCanvas.vue","../../../src/cloud/components/ModulePreviewCanvas.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"../../components/blocks/ButtonBlock.vue\";\nimport CustomBlock from \"../../components/blocks/CustomBlock.vue\";\nimport DividerBlock from \"../../components/blocks/DividerBlock.vue\";\nimport HtmlBlock from \"../../components/blocks/HtmlBlock.vue\";\nimport ImageBlock from \"../../components/blocks/ImageBlock.vue\";\nimport MenuBlock from \"../../components/blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"../../components/blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"../../components/blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"../../components/blocks/SpacerBlock.vue\";\nimport TableBlock from \"../../components/blocks/TableBlock.vue\";\nimport TitleBlock from \"../../components/blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"../../components/blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"../../components/blocks/VideoBlock.vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type { Block } from \"@templatical/types\";\nimport { inject, type Component } from \"vue\";\n\ndefineProps<{\n  blocks: Block[];\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\n\nconst modulePreviewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, modulePreviewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg\"\n    style=\"\n      background-color: var(--tpl-canvas-bg);\n      box-shadow: var(--tpl-shadow-sm);\n    \"\n  >\n    <div\n      v-for=\"block in blocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        viewport=\"desktop\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"../../components/blocks/ButtonBlock.vue\";\nimport CustomBlock from \"../../components/blocks/CustomBlock.vue\";\nimport DividerBlock from \"../../components/blocks/DividerBlock.vue\";\nimport HtmlBlock from \"../../components/blocks/HtmlBlock.vue\";\nimport ImageBlock from \"../../components/blocks/ImageBlock.vue\";\nimport MenuBlock from \"../../components/blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"../../components/blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"../../components/blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"../../components/blocks/SpacerBlock.vue\";\nimport TableBlock from \"../../components/blocks/TableBlock.vue\";\nimport TitleBlock from \"../../components/blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"../../components/blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"../../components/blocks/VideoBlock.vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type { Block } from \"@templatical/types\";\nimport { inject, type Component } from \"vue\";\n\ndefineProps<{\n  blocks: Block[];\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\n\nconst modulePreviewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, modulePreviewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg\"\n    style=\"\n      background-color: var(--tpl-canvas-bg);\n      box-shadow: var(--tpl-shadow-sm);\n    \"\n  >\n    <div\n      v-for=\"block in blocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        viewport=\"desktop\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAwBA,IAAM,IAAsD;GAC1D,OAAO;GACP,WAAW;GACX,OAAO;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;EACV,GAEM,IAAQ,GAOR,IAAgB,EAAO,GAAoB,IAAI,GAE/C,IAAe,QAAe;GAClC,QAAQ,EAAM,MAAM,SAApB;IACE,KAAK,KACH,OAAO,CAAC,OAAO,KAAK;IACtB,KAAK,KACH,OAAO;KAAC;KAAU;KAAU;IAAQ;IACtC,KAAK,OACH,OAAO,CAAC,UAAU,QAAQ;IAC5B,KAAK,OACH,OAAO,CAAC,UAAU,QAAQ;IAC5B,SACE,OAAO,CAAC,MAAM;GAClB;EACF,CAAC,GAEK,IAAU,QAAe;GAC7B,IAAM,IAAQ,EAAa,MAAM,QAC3B,IAAW,CAAC,GAAG,EAAM,MAAM,QAAQ;GACzC,OAAO,EAAS,SAAS,IACvB,EAAS,KAAK,CAAC,CAAC;GAElB,OAAO,EAAS,MAAM,GAAG,CAAK;EAChC,CAAC;EAED,SAAS,EAAgB,GAA2B;GAClD,OAAO,EAAQ,MAAM,MAAa,CAAC;EACrC;EAEA,SAAS,EAAkB,GAAgC;GACzD,OAAO,EAAsB,GAAO,GAAe,CAAwB;EAC7E;;;eAIE,EA2BM,OA3BN,GA2BM,CA1BJ,EAyBM,OAzBN,GAyBM,EAAA,EAAA,EAAA,GAxBJ,EAuBM,GAAA,MAAA,EAtBoB,EAAA,QAAhB,GAAG,YADb,EAuBM,OAAA;IArBH,KAAK;IACL,OAAK,EAAA,EAAA,OAAW,EAAA,MAAa,GAAQ,CAAA;eAEtC,EAiBM,GAAA,MAAA,EAhBiB,EAAgB,CAAQ,IAAtC,YADT,EAiBM,OAAA;IAfH,KAAK,EAAW;IAChB,OAAK,EAAE,EAAA,CAAA,CAAoB,CAAC,CAAU,CAAA;OAI/B,EAAW,SAAI,aAAA,EAAA,GADvB,EAIE,GAAA;;IAFC,OAAO;IACR,UAAS;mCAEX,EAKE,EAJK,EAAkB,CAAU,CAAA,GAAA;;IAEhC,OAAO;IACR,UAAS;;;;;;;;;;;;;;EE9ErB,IAAM,IAAgB,EAAO,CAAkB,GAEzC,IAAuD;GAC3D,SAAS;GACT,OAAO;GACP,WAAW;GACX,OAAO;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;EACV;EAEA,SAAS,EAAkB,GAAgC;GACzD,OAAO,EAAsB,GAAO,GAAe,CAAyB;EAC9E;yBAIE,EAkBM,OAlBN,GAkBM,EAAA,EAAA,EAAA,GAXJ,EAUM,GAAA,MAAA,EATY,EAAA,SAAT,YADT,EAUM,OAAA;GARH,KAAK,EAAM;GACX,OAAK,EAAE,EAAA,CAAA,CAAoB,CAAC,CAAK,CAAA;YAElC,EAIE,EAHK,EAAkB,CAAK,CAAA,GAAA;GACpB;GACR,UAAS"}
+{"version":3,"file":"ModulePreviewCanvas-BfinyuAN.js","names":[],"sources":["../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/cloud/components/ModulePreviewCanvas.vue","../../../src/cloud/components/ModulePreviewCanvas.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"../../components/blocks/ButtonBlock.vue\";\nimport CustomBlock from \"../../components/blocks/CustomBlock.vue\";\nimport DividerBlock from \"../../components/blocks/DividerBlock.vue\";\nimport HtmlBlock from \"../../components/blocks/HtmlBlock.vue\";\nimport ImageBlock from \"../../components/blocks/ImageBlock.vue\";\nimport MenuBlock from \"../../components/blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"../../components/blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"../../components/blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"../../components/blocks/SpacerBlock.vue\";\nimport TableBlock from \"../../components/blocks/TableBlock.vue\";\nimport TitleBlock from \"../../components/blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"../../components/blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"../../components/blocks/VideoBlock.vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type { Block } from \"@templatical/types\";\nimport { inject, type Component } from \"vue\";\n\ndefineProps<{\n  blocks: Block[];\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\n\nconst modulePreviewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, modulePreviewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg\"\n    style=\"\n      background-color: var(--tpl-canvas-bg);\n      box-shadow: var(--tpl-shadow-sm);\n    \"\n  >\n    <div\n      v-for=\"block in blocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        viewport=\"desktop\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"../../components/blocks/ButtonBlock.vue\";\nimport CustomBlock from \"../../components/blocks/CustomBlock.vue\";\nimport DividerBlock from \"../../components/blocks/DividerBlock.vue\";\nimport HtmlBlock from \"../../components/blocks/HtmlBlock.vue\";\nimport ImageBlock from \"../../components/blocks/ImageBlock.vue\";\nimport MenuBlock from \"../../components/blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"../../components/blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"../../components/blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"../../components/blocks/SpacerBlock.vue\";\nimport TableBlock from \"../../components/blocks/TableBlock.vue\";\nimport TitleBlock from \"../../components/blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"../../components/blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"../../components/blocks/VideoBlock.vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type { Block } from \"@templatical/types\";\nimport { inject, type Component } from \"vue\";\n\ndefineProps<{\n  blocks: Block[];\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\n\nconst modulePreviewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, modulePreviewComponentMap);\n}\n</script>\n\n<template>\n  <div\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg\"\n    style=\"\n      background-color: var(--tpl-canvas-bg);\n      box-shadow: var(--tpl-shadow-sm);\n    \"\n  >\n    <div\n      v-for=\"block in blocks\"\n      :key=\"block.id\"\n      :style=\"getBlockWrapperStyle(block)\"\n    >\n      <component\n        :is=\"getBlockComponent(block)\"\n        :block=\"block\"\n        viewport=\"desktop\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAwBA,IAAM,IAAsD;GAC1D,OAAO;GACP,WAAW;GACX,OAAO;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;EACV,GAEM,IAAQ,GAOR,IAAgB,EAAO,GAAoB,IAAI,GAE/C,IAAe,QAAe;GAClC,QAAQ,EAAM,MAAM,SAApB;IACE,KAAK,KACH,OAAO,CAAC,OAAO,KAAK;IACtB,KAAK,KACH,OAAO;KAAC;KAAU;KAAU;IAAQ;IACtC,KAAK,OACH,OAAO,CAAC,UAAU,QAAQ;IAC5B,KAAK,OACH,OAAO,CAAC,UAAU,QAAQ;IAC5B,SACE,OAAO,CAAC,MAAM;GAClB;EACF,CAAC,GAEK,IAAU,QAAe;GAC7B,IAAM,IAAQ,EAAa,MAAM,QAC3B,IAAW,CAAC,GAAG,EAAM,MAAM,QAAQ;GACzC,OAAO,EAAS,SAAS,IACvB,EAAS,KAAK,CAAC,CAAC;GAElB,OAAO,EAAS,MAAM,GAAG,CAAK;EAChC,CAAC;EAED,SAAS,EAAgB,GAA2B;GAClD,OAAO,EAAQ,MAAM,MAAa,CAAC;EACrC;EAEA,SAAS,EAAkB,GAAgC;GACzD,OAAO,EAAsB,GAAO,GAAe,CAAwB;EAC7E;;;eAIE,EA2BM,OA3BN,GA2BM,CA1BJ,EAyBM,OAzBN,GAyBM,EAAA,EAAA,EAAA,GAxBJ,EAuBM,GAAA,MAAA,EAtBoB,EAAA,QAAhB,GAAG,YADb,EAuBM,OAAA;IArBH,KAAK;IACL,OAAK,EAAA,EAAA,OAAW,EAAA,MAAa,GAAQ,CAAA;eAEtC,EAiBM,GAAA,MAAA,EAhBiB,EAAgB,CAAQ,IAAtC,YADT,EAiBM,OAAA;IAfH,KAAK,EAAW;IAChB,OAAK,EAAE,EAAA,CAAA,CAAoB,CAAC,CAAU,CAAA;OAI/B,EAAW,SAAI,aAAA,EAAA,GADvB,EAIE,GAAA;;IAFC,OAAO;IACR,UAAS;mCAEX,EAKE,EAJK,EAAkB,CAAU,CAAA,GAAA;;IAEhC,OAAO;IACR,UAAS;;;;;;;;;;;;;;EE9ErB,IAAM,IAAgB,EAAO,CAAkB,GAEzC,IAAuD;GAC3D,SAAS;GACT,OAAO;GACP,WAAW;GACX,OAAO;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;EACV;EAEA,SAAS,EAAkB,GAAgC;GACzD,OAAO,EAAsB,GAAO,GAAe,CAAyB;EAC9E;yBAIE,EAkBM,OAlBN,GAkBM,EAAA,EAAA,EAAA,GAXJ,EAUM,GAAA,MAAA,EATY,EAAA,SAAT,YADT,EAUM,OAAA;GARH,KAAK,EAAM;GACX,OAAK,EAAE,EAAA,CAAA,CAAoB,CAAC,CAAK,CAAA;YAElC,EAIE,EAHK,EAAkB,CAAK,CAAA,GAAA;GACpB;GACR,UAAS"}

package/dist/cdn/chunks/{NumberWithSuffix-HTbuD3VJ.js → NumberWithSuffix-CDjEa08X.js}

@@ -1,5 +1,5 @@
-import { F as e, L as t, M as n, P as r, V as i, Z as a, c as o, ct as s, f as c, g as l, h as u, it as d, m as f, n as p, ot as m, p as h, st as g, u as _, x as v, y } from "./draggable-Bci-fq8y.js";
-import { It as ee, ot as te, sn as ne } from "./features-DU6lA8l1.js";
+import { F as e, L as t, M as n, P as r, V as i, Z as a, c as o, ct as s, f as c, g as l, h as u, it as d, m as f, n as p, ot as m, p as h, st as g, u as _, x as v, y } from "./draggable-kG-D5Xsm.js";
+import { Lt as ee, st as te, un as ne } from "./features-Dpczf9Su.js";
 import { h as b, m as x, p as S, u as re } from "./styleConstants-lGobwiLH.js";
 //#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
 var C = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, w = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
@@ -73,7 +73,7 @@ var T = (e) => ae(E(e)), E = (e) => (e[0] === "#" && (e = e.substring(1)), e.len
 	if (e === t) return !0;
 	for (let n in e) if (e[n] !== t[n]) return !1;
 	return !0;
-}, N = (e, t) => e.toLowerCase() === t.toLowerCase() ? !0 : M(E(e), E(t)), P = {}, F = (e) => {
+}, N = (e, t) => e.toLowerCase() === t.toLowerCase() || M(E(e), E(t)), P = {}, F = (e) => {
 	let t = P[e];
 	return t || (t = document.createElement("template"), t.innerHTML = e, P[e] = t), t;
 }, I = (e, t, n) => {
@@ -441,4 +441,4 @@ var de = [
 //#endregion
 export { he as i, be as n, ve as r, Ce as t };
 
-//# sourceMappingURL=NumberWithSuffix-HTbuD3VJ.js.map
+//# sourceMappingURL=NumberWithSuffix-CDjEa08X.js.map