@templatical/editor 0.25.1 → 0.25.2

package/dist/cdn/chunks/{CommentsSidebar-FPbg-FuU.js → CommentsSidebar-B9bWvvbl.js}

@@ -1,9 +1,9 @@
-import { H as e, M as t, O as n, P as r, V as i, Z as a, ct as o, f as s, g as c, h as l, it as u, m as d, n as f, o as p, ot as m, p as h, st as ee, u as g, v as te, x as _, y as v, z as y } from "./draggable-BRF_Q_jB.js";
-import { G as b, d as ne, g as re, i as ie } from "./keys-CZOBuCQd.js";
-import { t as ae } from "./useI18n-aRMtgYRj.js";
-import { It as oe, Lt as se, N as x, Nt as ce, R as le, at as S, d as C, jt as ue, n as w, nt as de, q as T } from "./icons-DN008liP.js";
+import { H as e, M as t, O as n, P as r, V as i, Z as a, ct as o, f as s, g as c, h as l, it as u, m as d, n as f, o as p, ot as m, p as h, st as ee, u as g, v as te, x as _, y as v, z as y } from "./draggable-Z4XXmbPC.js";
+import { G as b, d as ne, g as re, i as ie } from "./keys-DsoX52o_.js";
+import { t as ae } from "./useI18n-BvcEYzrI.js";
+import { It as oe, K as x, L as se, Lt as ce, M as S, Nt as le, d as C, it as w, jt as ue, n as de, tt as T } from "./icons-C_kRN0_C.js";
 import { t as E } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { n as fe } from "./useCloudI18n-CML0BxqX.js";
+import { n as fe } from "./useCloudI18n-D4JpHTPk.js";
 import { t as pe } from "./formatRelativeTime-CtUU-QZ8.js";
 //#region src/cloud/components/CommentsSidebar.vue?vue&type=script&setup=true&lang.ts
 var me = {
@@ -168,7 +168,7 @@ var me = {
 		}, {
 			default: i(() => [_.visible ? (t(), c("div", me, [
 				h("div", he, [h("div", ge, [
-					v(u(de), {
+					v(u(T), {
 						size: 13,
 						"stroke-width": 2
 					}),
@@ -177,7 +177,7 @@ var me = {
 				]), h("button", {
 					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
 					onClick: a[0] ||= (e) => O("close")
-				}, [v(u(w), {
+				}, [v(u(de), {
 					size: 14,
 					"stroke-width": 2
 				})])]),
@@ -196,11 +196,11 @@ var me = {
 						onClick: a[3] ||= (e) => W("block", u(j).state.selectedBlockId ?? void 0)
 					}, o(u(A).comments.filterBlock), 3)) : l("", !0)
 				]),
-				h("div", ye, [u(M).isLoading.value ? (t(), c("div", be, [v(u(S), {
+				h("div", ye, [u(M).isLoading.value ? (t(), c("div", be, [v(u(w), {
 					class: "tpl-spinner tpl:text-[var(--tpl-text-muted)]",
 					size: 24,
 					"stroke-width": 2
-				})])) : U.value.length === 0 ? (t(), c("div", xe, [v(u(de), {
+				})])) : U.value.length === 0 ? (t(), c("div", xe, [v(u(T), {
 					size: 32,
 					"stroke-width": 1.5,
 					class: "tpl:text-[var(--tpl-text-dim)]"
@@ -229,7 +229,7 @@ var me = {
 								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150",
 								title: u(A).comments.edit,
 								onClick: (e) => G(n)
-							}, [v(u(T), {
+							}, [v(u(x), {
 								size: 12,
 								"stroke-width": 2
 							})], 8, Me)) : l("", !0),
@@ -244,7 +244,7 @@ var me = {
 							})], 8, Ne)) : l("", !0)
 						])]),
 						v(f, { name: "tpl-resolve" }, {
-							default: i(() => [n.resolved_at ? (t(), c("div", Pe, [v(u(se), {
+							default: i(() => [n.resolved_at ? (t(), c("div", Pe, [v(u(ce), {
 								size: 10,
 								"stroke-width": 2.5
 							}), h("span", null, o(u(k)(u(A).comments.resolvedBy, { name: n.resolved_by_name ?? "" })), 1)])) : l("", !0)]),
@@ -283,7 +283,7 @@ var me = {
 							class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150",
 							title: u(A).comments.reply,
 							onClick: (e) => kt(n.id)
-						}, [v(u(le), {
+						}, [v(u(se), {
 							size: 13,
 							"stroke-width": 2,
 							class: "tpl:text-[var(--tpl-primary)]"
@@ -291,7 +291,7 @@ var me = {
 							key: 0,
 							class: "tpl:flex tpl:items-center tpl:gap-0.5 tpl:text-[11px] tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
 							onClick: (e) => Ot(n.id)
-						}, [B.value.has(n.id) ? (t(), d(u(ce), {
+						}, [B.value.has(n.id) ? (t(), d(u(le), {
 							key: 0,
 							size: 11,
 							"stroke-width": 2
@@ -315,7 +315,7 @@ var me = {
 								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150",
 								title: u(A).comments.edit,
 								onClick: (e) => G(r)
-							}, [v(u(T), {
+							}, [v(u(x), {
 								size: 11,
 								"stroke-width": 2
 							})], 8, tt)) : l("", !0), $(r) ? (t(), c("button", {
@@ -365,13 +365,13 @@ var me = {
 							class: "tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
 							disabled: !L.value.trim() || u(M).isSubmitting.value,
 							onClick: (e) => X(n.id)
-						}, [v(u(x), {
+						}, [v(u(S), {
 							size: 14,
 							"stroke-width": 2
 						})], 8, ht), h("button", {
 							class: "tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
 							onClick: a[11] ||= (e) => At()
-						}, [v(u(w), {
+						}, [v(u(de), {
 							size: 14,
 							"stroke-width": 2
 						})])])])])) : l("", !0)]),
@@ -391,12 +391,12 @@ var me = {
 					class: "tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
 					disabled: !F.value.trim() || u(M).isSubmitting.value,
 					onClick: Y
-				}, [u(M).isSubmitting.value ? (t(), d(u(S), {
+				}, [u(M).isSubmitting.value ? (t(), d(u(w), {
 					key: 0,
 					class: "tpl-spinner",
 					size: 16,
 					"stroke-width": 2
-				})) : (t(), d(u(x), {
+				})) : (t(), d(u(S), {
 					key: 1,
 					size: 16,
 					"stroke-width": 2
@@ -409,4 +409,4 @@ var me = {
 //#endregion
 export { D as default };
 
-//# sourceMappingURL=CommentsSidebar-FPbg-FuU.js.map
+//# sourceMappingURL=CommentsSidebar-B9bWvvbl.js.map

package/dist/cdn/chunks/{CommentsSidebar-FPbg-FuU.js.map → CommentsSidebar-B9bWvvbl.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CommentsSidebar-FPbg-FuU.js","names":[],"sources":["../../../src/cloud/components/CommentsSidebar.vue","../../../src/cloud/components/CommentsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { formatRelativeTime } from \"../../utils/formatRelativeTime\";\nimport {\n  EDITOR_KEY,\n  AUTH_MANAGER_KEY,\n  COMMENTS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { Comment } from \"@templatical/types\";\nimport {\n  Check,\n  CircleCheck,\n  ChevronDown,\n  ChevronUp,\n  LoaderCircle,\n  MessageCircle,\n  Pencil,\n  Reply,\n  Send,\n  Trash2,\n  X,\n} from \"@lucide/vue\";\nimport { computed, nextTick, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"filterBlock\", blockId: string | null): void;\n}>();\n\nconst { format } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"CommentsSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"CommentsSidebar\");\nconst comments = requireInject(COMMENTS_KEY, \"CommentsSidebar\");\n\ntype FilterMode = \"all\" | \"unresolved\" | \"block\";\nconst filterMode = ref<FilterMode>(\"unresolved\");\nconst filterBlockId = ref<string | null>(null);\n\nconst newCommentBody = ref(\"\");\nconst replyingTo = ref<string | null>(null);\nconst replyBody = ref(\"\");\nconst editingId = ref<string | null>(null);\nconst editBody = ref(\"\");\nconst expandedThreads = ref<Set<string>>(new Set());\nconst deletingId = ref<string | null>(null);\nconst newCommentInput = ref<HTMLTextAreaElement | null>(null);\n\nconst currentUserId = computed(() => authManager.userConfig?.id ?? null);\n\nconst allBlockIds = computed<Set<string>>(() => {\n  const ids = new Set<string>();\n  for (const block of editor.content.value.blocks) {\n    ids.add(block.id);\n    if (block.type === \"section\") {\n      for (const column of block.children) {\n        for (const child of column) {\n          ids.add(child.id);\n        }\n      }\n    }\n  }\n  return ids;\n});\n\nfunction isBlockMissing(blockId: string | null): boolean {\n  if (!blockId) {\n    return false;\n  }\n  return !allBlockIds.value.has(blockId);\n}\n\nconst isBlockFilterUnsaved = computed(() => {\n  if (filterMode.value !== \"block\" || !filterBlockId.value) {\n    return false;\n  }\n  return !(editor.savedBlockIds?.value.has(filterBlockId.value) ?? true);\n});\n\nconst filteredComments = computed(() => {\n  let items = comments.comments.value;\n\n  if (filterMode.value === \"unresolved\") {\n    items = items.filter((c) => !c.resolved_at);\n  } else if (filterMode.value === \"block\" && filterBlockId.value) {\n    items = items.filter((c) => c.block_id === filterBlockId.value);\n  }\n\n  return items;\n});\n\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (isVisible) {\n      comments.loadComments();\n    }\n  },\n);\n\nwatch(\n  () => editor.state.selectedBlockId,\n  (newBlockId) => {\n    if (filterMode.value === \"block\" && newBlockId) {\n      filterBlockId.value = newBlockId;\n    }\n  },\n);\n\nfunction setFilter(mode: FilterMode, blockId?: string): void {\n  filterMode.value = mode;\n  filterBlockId.value = mode === \"block\" ? (blockId ?? null) : null;\n}\n\nfunction filterByBlock(blockId: string): void {\n  setFilter(\"block\", blockId);\n  emit(\"filterBlock\", blockId);\n}\n\nfunction toggleThread(threadId: string): void {\n  if (expandedThreads.value.has(threadId)) {\n    expandedThreads.value.delete(threadId);\n  } else {\n    expandedThreads.value.add(threadId);\n  }\n}\n\nfunction startReply(threadId: string): void {\n  replyingTo.value = threadId;\n  replyBody.value = \"\";\n  editingId.value = null;\n\n  if (!expandedThreads.value.has(threadId)) {\n    expandedThreads.value.add(threadId);\n  }\n}\n\nfunction cancelReply(): void {\n  replyingTo.value = null;\n  replyBody.value = \"\";\n}\n\nfunction startEdit(comment: Comment): void {\n  editingId.value = comment.id;\n  editBody.value = comment.body;\n  replyingTo.value = null;\n}\n\nfunction cancelEdit(): void {\n  editingId.value = null;\n  editBody.value = \"\";\n}\n\nfunction confirmDelete(commentId: string): void {\n  deletingId.value = commentId;\n}\n\nfunction cancelDelete(): void {\n  deletingId.value = null;\n}\n\nasync function handleAddComment(): Promise<void> {\n  const body = newCommentBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  const blockId =\n    filterMode.value === \"block\" ? filterBlockId.value : undefined;\n  await comments.addComment(body, blockId ?? undefined);\n  newCommentBody.value = \"\";\n}\n\nasync function handleReply(parentId: string): Promise<void> {\n  const body = replyBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  const parent = comments.comments.value.find((c) => c.id === parentId);\n  await comments.addComment(body, parent?.block_id ?? undefined, parentId);\n  replyingTo.value = null;\n  replyBody.value = \"\";\n}\n\nasync function handleEdit(commentId: string): Promise<void> {\n  const body = editBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  await comments.editComment(commentId, body);\n  editingId.value = null;\n  editBody.value = \"\";\n}\n\nasync function handleDelete(commentId: string): Promise<void> {\n  await comments.removeComment(commentId);\n  deletingId.value = null;\n}\n\nasync function handleResolve(commentId: string): Promise<void> {\n  await comments.toggleResolve(commentId);\n}\n\nfunction isOwnComment(comment: Comment): boolean {\n  return comment.author_identifier === currentUserId.value;\n}\n\nfunction formatTime(dateString: string): string {\n  return formatRelativeTime(dateString, cloudT.snapshotHistory) ?? dateString;\n}\n\nfunction handleNewCommentKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleAddComment();\n  }\n}\n\nfunction handleReplyKeydown(event: KeyboardEvent, parentId: string): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleReply(parentId);\n  }\n}\n\nfunction handleEditKeydown(event: KeyboardEvent, commentId: string): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleEdit(commentId);\n  }\n  if (event.key === \"Escape\") {\n    cancelEdit();\n  }\n}\n\nfunction focusNewComment(): void {\n  nextTick(() => {\n    newCommentInput.value?.focus();\n  });\n}\n\ndefineExpose({ filterByBlock, focusNewComment });\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-comments-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-comments-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-comments-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\"\n        >\n          <MessageCircle :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.comments.title }}</span>\n          <span\n            v-if=\"comments.unresolvedCount.value > 0\"\n            class=\"tpl:ml-1 tpl:inline-flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[10px] tpl:font-semibold tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          >\n            {{ comments.unresolvedCount.value }}\n          </span>\n        </div>\n        <button\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Filter bar -->\n      <div\n        class=\"tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-2\"\n      >\n        <button\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"\n            filterMode === 'unresolved' ? 'tpl-comment-filter--active' : ''\n          \"\n          @click=\"setFilter('unresolved')\"\n        >\n          {{ cloudT.comments.filterUnresolved }}\n        </button>\n        <button\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"filterMode === 'all' ? 'tpl-comment-filter--active' : ''\"\n          @click=\"setFilter('all')\"\n        >\n          {{ cloudT.comments.filterAll }}\n        </button>\n        <button\n          v-if=\"editor.state.selectedBlockId\"\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"filterMode === 'block' ? 'tpl-comment-filter--active' : ''\"\n          @click=\"setFilter('block', editor.state.selectedBlockId ?? undefined)\"\n        >\n          {{ cloudT.comments.filterBlock }}\n        </button>\n      </div>\n\n      <!-- Thread list -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto\">\n        <!-- Loading state -->\n        <div\n          v-if=\"comments.isLoading.value\"\n          class=\"tpl:flex tpl:h-full tpl:items-center tpl:justify-center\"\n        >\n          <LoaderCircle\n            class=\"tpl-spinner tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"24\"\n            :stroke-width=\"2\"\n          />\n        </div>\n\n        <!-- Empty state -->\n        <div\n          v-else-if=\"filteredComments.length === 0\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:px-6 tpl:text-center\"\n        >\n          <MessageCircle\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-text-dim)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{\n              filterMode === \"all\"\n                ? cloudT.comments.noCommentsHint\n                : cloudT.comments.noComments\n            }}\n          </p>\n        </div>\n\n        <!-- Comment threads -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-3 tpl:p-3\">\n          <div\n            v-for=\"thread in filteredComments\"\n            :key=\"thread.id\"\n            class=\"tpl-comment-thread\"\n          >\n            <!-- Root comment card -->\n            <div\n              class=\"tpl-comment-card tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-3\"\n            >\n              <!-- Comment header -->\n              <div\n                class=\"tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n              >\n                <div class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n                  <span\n                    class=\"tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{\n                      isOwnComment(thread)\n                        ? cloudT.comments.ownedByYou\n                        : thread.author_name\n                    }}\n                  </span>\n                  <span class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\">\n                    {{ formatTime(thread.created_at) }}\n                  </span>\n                  <span\n                    v-if=\"thread.updated_at !== thread.created_at\"\n                    class=\"tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]\"\n                  >\n                    ({{ cloudT.comments.edited }})\n                  </span>\n                </div>\n                <div class=\"tpl:flex tpl:items-center tpl:gap-0.5\">\n                  <!-- Resolve toggle -->\n                  <button\n                    class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"\n                      thread.resolved_at\n                        ? cloudT.comments.unresolve\n                        : cloudT.comments.resolve\n                    \"\n                    @click=\"handleResolve(thread.id)\"\n                  >\n                    <CircleCheck\n                      :size=\"13\"\n                      :stroke-width=\"2\"\n                      class=\"tpl-resolve-icon\"\n                      :style=\"{\n                        color: thread.resolved_at\n                          ? 'var(--tpl-primary)'\n                          : undefined,\n                      }\"\n                    />\n                  </button>\n                  <!-- Edit (own only) -->\n                  <button\n                    v-if=\"isOwnComment(thread)\"\n                    class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"cloudT.comments.edit\"\n                    @click=\"startEdit(thread)\"\n                  >\n                    <Pencil :size=\"12\" :stroke-width=\"2\" />\n                  </button>\n                  <!-- Delete (own only) -->\n                  <button\n                    v-if=\"isOwnComment(thread)\"\n                    class=\"tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"cloudT.comments.delete\"\n                    @click=\"confirmDelete(thread.id)\"\n                  >\n                    <Trash2 :size=\"12\" :stroke-width=\"2\" />\n                  </button>\n                </div>\n              </div>\n\n              <!-- Resolved badge -->\n              <Transition name=\"tpl-resolve\">\n                <div\n                  v-if=\"thread.resolved_at\"\n                  class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1 tpl:text-[10px] tpl:text-[var(--tpl-primary)]\"\n                >\n                  <Check :size=\"10\" :stroke-width=\"2.5\" />\n                  <span>\n                    {{\n                      format(cloudT.comments.resolvedBy, {\n                        name: thread.resolved_by_name ?? \"\",\n                      })\n                    }}\n                  </span>\n                </div>\n              </Transition>\n\n              <!-- Block anchor indicator -->\n              <span\n                v-if=\"thread.block_id && isBlockMissing(thread.block_id)\"\n                class=\"tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]\"\n              >\n                {{ cloudT.comments.missingBlock }}\n              </span>\n              <button\n                v-else-if=\"thread.block_id\"\n                class=\"tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                @click=\"editor.selectBlock(thread.block_id ?? '')\"\n              >\n                Block\n              </button>\n\n              <!-- Comment body (or edit mode) -->\n              <div v-if=\"editingId === thread.id\" class=\"tpl:mt-2\">\n                <textarea\n                  v-model=\"editBody\"\n                  class=\"tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                  rows=\"3\"\n                  @keydown=\"handleEditKeydown($event, thread.id)\"\n                />\n                <div class=\"tpl:mt-1.5 tpl:flex tpl:gap-1.5\">\n                  <button\n                    class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n                    :disabled=\"!editBody.trim() || comments.isSubmitting.value\"\n                    @click=\"handleEdit(thread.id)\"\n                  >\n                    {{ cloudT.comments.save }}\n                  </button>\n                  <button\n                    class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                    @click=\"cancelEdit()\"\n                  >\n                    {{ cloudT.comments.cancel }}\n                  </button>\n                </div>\n              </div>\n              <p\n                v-else\n                class=\"tpl:mt-1.5 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]\"\n              >\n                {{ thread.body }}\n              </p>\n\n              <!-- Delete confirmation -->\n              <div\n                v-if=\"deletingId === thread.id\"\n                class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n              >\n                <span class=\"tpl:flex-1\">\n                  {{ cloudT.comments.deleteConfirm }}\n                </span>\n                <button\n                  class=\"tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]\"\n                  @click=\"handleDelete(thread.id)\"\n                >\n                  {{ cloudT.comments.delete }}\n                </button>\n                <button\n                  class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                  @click=\"cancelDelete()\"\n                >\n                  {{ cloudT.comments.cancel }}\n                </button>\n              </div>\n\n              <!-- Thread actions -->\n              <div\n                v-if=\"editingId !== thread.id && deletingId !== thread.id\"\n                class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2\"\n              >\n                <button\n                  class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                  :title=\"cloudT.comments.reply\"\n                  @click=\"startReply(thread.id)\"\n                >\n                  <Reply\n                    :size=\"13\"\n                    :stroke-width=\"2\"\n                    class=\"tpl:text-[var(--tpl-primary)]\"\n                  />\n                </button>\n                <button\n                  v-if=\"(thread.replies?.length ?? 0) > 0\"\n                  class=\"tpl:flex tpl:items-center tpl:gap-0.5 tpl:text-[11px] tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                  @click=\"toggleThread(thread.id)\"\n                >\n                  <template v-if=\"expandedThreads.has(thread.id)\">\n                    <ChevronUp :size=\"11\" :stroke-width=\"2\" />\n                  </template>\n                  <template v-else>\n                    <ChevronDown :size=\"11\" :stroke-width=\"2\" />\n                  </template>\n                  {{\n                    (thread.replies?.length ?? 0) === 1\n                      ? format(cloudT.comments.replyOne, {\n                          count: String(thread.replies?.length ?? 0),\n                        })\n                      : format(cloudT.comments.replyMany, {\n                          count: String(thread.replies?.length ?? 0),\n                        })\n                  }}\n                </button>\n              </div>\n            </div>\n\n            <!-- Replies -->\n            <Transition name=\"tpl-replies\">\n              <div\n                v-if=\"\n                  expandedThreads.has(thread.id) &&\n                  (thread.replies?.length ?? 0) > 0\n                \"\n                class=\"tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2\"\n              >\n                <div\n                  v-for=\"(reply, index) in thread.replies\"\n                  :key=\"reply.id\"\n                  class=\"tpl-comment-reply-card tpl:relative tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-2.5\"\n                  :class=\"\n                    index < (thread.replies?.length ?? 0) - 1 ? 'tpl:mb-2' : ''\n                  \"\n                >\n                  <div\n                    class=\"tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n                  >\n                    <div class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n                      <span\n                        class=\"tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                      >\n                        {{\n                          isOwnComment(reply)\n                            ? cloudT.comments.ownedByYou\n                            : reply.author_name\n                        }}\n                      </span>\n                      <span\n                        class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                      >\n                        {{ formatTime(reply.created_at) }}\n                      </span>\n                      <span\n                        v-if=\"reply.updated_at !== reply.created_at\"\n                        class=\"tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]\"\n                      >\n                        ({{ cloudT.comments.edited }})\n                      </span>\n                    </div>\n                    <div class=\"tpl:flex tpl:items-center tpl:gap-0.5\">\n                      <button\n                        v-if=\"isOwnComment(reply)\"\n                        class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                        :title=\"cloudT.comments.edit\"\n                        @click=\"startEdit(reply)\"\n                      >\n                        <Pencil :size=\"11\" :stroke-width=\"2\" />\n                      </button>\n                      <button\n                        v-if=\"isOwnComment(reply)\"\n                        class=\"tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                        :title=\"cloudT.comments.delete\"\n                        @click=\"confirmDelete(reply.id)\"\n                      >\n                        <Trash2 :size=\"11\" :stroke-width=\"2\" />\n                      </button>\n                    </div>\n                  </div>\n\n                  <!-- Reply body (or edit mode) -->\n                  <div v-if=\"editingId === reply.id\" class=\"tpl:mt-1.5\">\n                    <textarea\n                      v-model=\"editBody\"\n                      class=\"tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                      rows=\"2\"\n                      @keydown=\"handleEditKeydown($event, reply.id)\"\n                    />\n                    <div class=\"tpl:mt-1.5 tpl:flex tpl:gap-1.5\">\n                      <button\n                        class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n                        :disabled=\"\n                          !editBody.trim() || comments.isSubmitting.value\n                        \"\n                        @click=\"handleEdit(reply.id)\"\n                      >\n                        {{ cloudT.comments.save }}\n                      </button>\n                      <button\n                        class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                        @click=\"cancelEdit()\"\n                      >\n                        {{ cloudT.comments.cancel }}\n                      </button>\n                    </div>\n                  </div>\n                  <p\n                    v-else\n                    class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{ reply.body }}\n                  </p>\n\n                  <!-- Delete confirmation for reply -->\n                  <div\n                    v-if=\"deletingId === reply.id\"\n                    class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n                  >\n                    <span class=\"tpl:flex-1\">\n                      {{ cloudT.comments.deleteConfirm }}\n                    </span>\n                    <button\n                      class=\"tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]\"\n                      @click=\"handleDelete(reply.id)\"\n                    >\n                      {{ cloudT.comments.delete }}\n                    </button>\n                    <button\n                      class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                      @click=\"cancelDelete()\"\n                    >\n                      {{ cloudT.comments.cancel }}\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </Transition>\n\n            <!-- Reply input -->\n            <Transition name=\"tpl-replies\">\n              <div\n                v-if=\"replyingTo === thread.id\"\n                class=\"tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2\"\n              >\n                <div class=\"tpl:flex tpl:items-end tpl:gap-2\">\n                  <textarea\n                    v-model=\"replyBody\"\n                    class=\"tpl:flex-1 tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    :placeholder=\"cloudT.comments.replyPlaceholder\"\n                    rows=\"2\"\n                    @keydown=\"handleReplyKeydown($event, thread.id)\"\n                  />\n                  <div class=\"tpl:flex tpl:shrink-0 tpl:flex-col tpl:gap-1\">\n                    <button\n                      class=\"tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n                      :disabled=\"\n                        !replyBody.trim() || comments.isSubmitting.value\n                      \"\n                      @click=\"handleReply(thread.id)\"\n                    >\n                      <Send :size=\"14\" :stroke-width=\"2\" />\n                    </button>\n                    <button\n                      class=\"tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                      @click=\"cancelReply()\"\n                    >\n                      <X :size=\"14\" :stroke-width=\"2\" />\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </Transition>\n          </div>\n        </div>\n      </div>\n\n      <!-- New comment input -->\n      <div class=\"tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]\">\n        <div\n          v-if=\"isBlockFilterUnsaved\"\n          class=\"tpl:flex tpl:min-h-[68px] tpl:items-center tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]\"\n        >\n          {{ cloudT.comments.saveTemplateFirst }}\n        </div>\n        <div\n          v-else\n          class=\"tpl-comments-input-wrapper tpl:flex tpl:min-h-[68px] tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n        >\n          <textarea\n            ref=\"newCommentInput\"\n            v-model=\"newCommentBody\"\n            class=\"tpl:max-h-24 tpl:min-h-[48px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-xs tpl:outline-none tpl:text-[var(--tpl-text)]\"\n            :placeholder=\"cloudT.comments.placeholder\"\n            :disabled=\"comments.isSubmitting.value\"\n            rows=\"2\"\n            @keydown=\"handleNewCommentKeydown\"\n          />\n          <button\n            class=\"tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n            :disabled=\"!newCommentBody.trim() || comments.isSubmitting.value\"\n            @click=\"handleAddComment\"\n          >\n            <LoaderCircle\n              v-if=\"comments.isSubmitting.value\"\n              class=\"tpl-spinner\"\n              :size=\"16\"\n              :stroke-width=\"2\"\n            />\n            <Send v-else :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-comments-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-comments-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-comments-input-wrapper:focus-within {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-comments-send-btn:not(:disabled):hover {\n  transform: scale(1.05);\n}\n\n.tpl-comment-filter {\n  color: var(--tpl-text-muted);\n  background-color: transparent;\n}\n\n.tpl-comment-filter:hover {\n  background-color: var(--tpl-bg-hover);\n  color: var(--tpl-text);\n}\n\n.tpl-comment-filter--active {\n  background-color: var(--tpl-primary-light);\n  color: var(--tpl-primary);\n}\n\n.tpl-comment-action {\n  color: var(--tpl-text-dim);\n  background-color: transparent;\n}\n\n.tpl-comment-action:hover {\n  background-color: var(--tpl-bg-hover);\n  color: var(--tpl-text);\n}\n\n.tpl-comment-delete:hover {\n  background-color: var(--tpl-danger-light);\n  color: var(--tpl-danger);\n}\n\n.tpl-comment-card {\n  border-color: var(--tpl-border);\n  background-color: var(--tpl-bg);\n}\n\n.tpl-comment-reply-card {\n  border-color: var(--tpl-border);\n  background-color: var(--tpl-bg);\n}\n\n.tpl-resolve-enter-active,\n.tpl-resolve-leave-active {\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease;\n}\n\n.tpl-resolve-enter-from,\n.tpl-resolve-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n.tpl-resolve-icon {\n  transition:\n    color 0.3s ease,\n    transform 0.2s ease;\n}\n\n.tpl-resolve-icon:active {\n  transform: scale(1.3);\n}\n\n.tpl-replies-enter-active,\n.tpl-replies-leave-active {\n  transition:\n    opacity 0.25s ease,\n    transform 0.25s ease;\n}\n\n.tpl-replies-enter-from,\n.tpl-replies-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { formatRelativeTime } from \"../../utils/formatRelativeTime\";\nimport {\n  EDITOR_KEY,\n  AUTH_MANAGER_KEY,\n  COMMENTS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { Comment } from \"@templatical/types\";\nimport {\n  Check,\n  CircleCheck,\n  ChevronDown,\n  ChevronUp,\n  LoaderCircle,\n  MessageCircle,\n  Pencil,\n  Reply,\n  Send,\n  Trash2,\n  X,\n} from \"@lucide/vue\";\nimport { computed, nextTick, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"filterBlock\", blockId: string | null): void;\n}>();\n\nconst { format } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"CommentsSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"CommentsSidebar\");\nconst comments = requireInject(COMMENTS_KEY, \"CommentsSidebar\");\n\ntype FilterMode = \"all\" | \"unresolved\" | \"block\";\nconst filterMode = ref<FilterMode>(\"unresolved\");\nconst filterBlockId = ref<string | null>(null);\n\nconst newCommentBody = ref(\"\");\nconst replyingTo = ref<string | null>(null);\nconst replyBody = ref(\"\");\nconst editingId = ref<string | null>(null);\nconst editBody = ref(\"\");\nconst expandedThreads = ref<Set<string>>(new Set());\nconst deletingId = ref<string | null>(null);\nconst newCommentInput = ref<HTMLTextAreaElement | null>(null);\n\nconst currentUserId = computed(() => authManager.userConfig?.id ?? null);\n\nconst allBlockIds = computed<Set<string>>(() => {\n  const ids = new Set<string>();\n  for (const block of editor.content.value.blocks) {\n    ids.add(block.id);\n    if (block.type === \"section\") {\n      for (const column of block.children) {\n        for (const child of column) {\n          ids.add(child.id);\n        }\n      }\n    }\n  }\n  return ids;\n});\n\nfunction isBlockMissing(blockId: string | null): boolean {\n  if (!blockId) {\n    return false;\n  }\n  return !allBlockIds.value.has(blockId);\n}\n\nconst isBlockFilterUnsaved = computed(() => {\n  if (filterMode.value !== \"block\" || !filterBlockId.value) {\n    return false;\n  }\n  return !(editor.savedBlockIds?.value.has(filterBlockId.value) ?? true);\n});\n\nconst filteredComments = computed(() => {\n  let items = comments.comments.value;\n\n  if (filterMode.value === \"unresolved\") {\n    items = items.filter((c) => !c.resolved_at);\n  } else if (filterMode.value === \"block\" && filterBlockId.value) {\n    items = items.filter((c) => c.block_id === filterBlockId.value);\n  }\n\n  return items;\n});\n\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (isVisible) {\n      comments.loadComments();\n    }\n  },\n);\n\nwatch(\n  () => editor.state.selectedBlockId,\n  (newBlockId) => {\n    if (filterMode.value === \"block\" && newBlockId) {\n      filterBlockId.value = newBlockId;\n    }\n  },\n);\n\nfunction setFilter(mode: FilterMode, blockId?: string): void {\n  filterMode.value = mode;\n  filterBlockId.value = mode === \"block\" ? (blockId ?? null) : null;\n}\n\nfunction filterByBlock(blockId: string): void {\n  setFilter(\"block\", blockId);\n  emit(\"filterBlock\", blockId);\n}\n\nfunction toggleThread(threadId: string): void {\n  if (expandedThreads.value.has(threadId)) {\n    expandedThreads.value.delete(threadId);\n  } else {\n    expandedThreads.value.add(threadId);\n  }\n}\n\nfunction startReply(threadId: string): void {\n  replyingTo.value = threadId;\n  replyBody.value = \"\";\n  editingId.value = null;\n\n  if (!expandedThreads.value.has(threadId)) {\n    expandedThreads.value.add(threadId);\n  }\n}\n\nfunction cancelReply(): void {\n  replyingTo.value = null;\n  replyBody.value = \"\";\n}\n\nfunction startEdit(comment: Comment): void {\n  editingId.value = comment.id;\n  editBody.value = comment.body;\n  replyingTo.value = null;\n}\n\nfunction cancelEdit(): void {\n  editingId.value = null;\n  editBody.value = \"\";\n}\n\nfunction confirmDelete(commentId: string): void {\n  deletingId.value = commentId;\n}\n\nfunction cancelDelete(): void {\n  deletingId.value = null;\n}\n\nasync function handleAddComment(): Promise<void> {\n  const body = newCommentBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  const blockId =\n    filterMode.value === \"block\" ? filterBlockId.value : undefined;\n  await comments.addComment(body, blockId ?? undefined);\n  newCommentBody.value = \"\";\n}\n\nasync function handleReply(parentId: string): Promise<void> {\n  const body = replyBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  const parent = comments.comments.value.find((c) => c.id === parentId);\n  await comments.addComment(body, parent?.block_id ?? undefined, parentId);\n  replyingTo.value = null;\n  replyBody.value = \"\";\n}\n\nasync function handleEdit(commentId: string): Promise<void> {\n  const body = editBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  await comments.editComment(commentId, body);\n  editingId.value = null;\n  editBody.value = \"\";\n}\n\nasync function handleDelete(commentId: string): Promise<void> {\n  await comments.removeComment(commentId);\n  deletingId.value = null;\n}\n\nasync function handleResolve(commentId: string): Promise<void> {\n  await comments.toggleResolve(commentId);\n}\n\nfunction isOwnComment(comment: Comment): boolean {\n  return comment.author_identifier === currentUserId.value;\n}\n\nfunction formatTime(dateString: string): string {\n  return formatRelativeTime(dateString, cloudT.snapshotHistory) ?? dateString;\n}\n\nfunction handleNewCommentKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleAddComment();\n  }\n}\n\nfunction handleReplyKeydown(event: KeyboardEvent, parentId: string): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleReply(parentId);\n  }\n}\n\nfunction handleEditKeydown(event: KeyboardEvent, commentId: string): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleEdit(commentId);\n  }\n  if (event.key === \"Escape\") {\n    cancelEdit();\n  }\n}\n\nfunction focusNewComment(): void {\n  nextTick(() => {\n    newCommentInput.value?.focus();\n  });\n}\n\ndefineExpose({ filterByBlock, focusNewComment });\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-comments-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-comments-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-comments-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\"\n        >\n          <MessageCircle :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.comments.title }}</span>\n          <span\n            v-if=\"comments.unresolvedCount.value > 0\"\n            class=\"tpl:ml-1 tpl:inline-flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[10px] tpl:font-semibold tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          >\n            {{ comments.unresolvedCount.value }}\n          </span>\n        </div>\n        <button\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Filter bar -->\n      <div\n        class=\"tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-2\"\n      >\n        <button\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"\n            filterMode === 'unresolved' ? 'tpl-comment-filter--active' : ''\n          \"\n          @click=\"setFilter('unresolved')\"\n        >\n          {{ cloudT.comments.filterUnresolved }}\n        </button>\n        <button\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"filterMode === 'all' ? 'tpl-comment-filter--active' : ''\"\n          @click=\"setFilter('all')\"\n        >\n          {{ cloudT.comments.filterAll }}\n        </button>\n        <button\n          v-if=\"editor.state.selectedBlockId\"\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"filterMode === 'block' ? 'tpl-comment-filter--active' : ''\"\n          @click=\"setFilter('block', editor.state.selectedBlockId ?? undefined)\"\n        >\n          {{ cloudT.comments.filterBlock }}\n        </button>\n      </div>\n\n      <!-- Thread list -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto\">\n        <!-- Loading state -->\n        <div\n          v-if=\"comments.isLoading.value\"\n          class=\"tpl:flex tpl:h-full tpl:items-center tpl:justify-center\"\n        >\n          <LoaderCircle\n            class=\"tpl-spinner tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"24\"\n            :stroke-width=\"2\"\n          />\n        </div>\n\n        <!-- Empty state -->\n        <div\n          v-else-if=\"filteredComments.length === 0\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:px-6 tpl:text-center\"\n        >\n          <MessageCircle\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-text-dim)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{\n              filterMode === \"all\"\n                ? cloudT.comments.noCommentsHint\n                : cloudT.comments.noComments\n            }}\n          </p>\n        </div>\n\n        <!-- Comment threads -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-3 tpl:p-3\">\n          <div\n            v-for=\"thread in filteredComments\"\n            :key=\"thread.id\"\n            class=\"tpl-comment-thread\"\n          >\n            <!-- Root comment card -->\n            <div\n              class=\"tpl-comment-card tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-3\"\n            >\n              <!-- Comment header -->\n              <div\n                class=\"tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n              >\n                <div class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n                  <span\n                    class=\"tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{\n                      isOwnComment(thread)\n                        ? cloudT.comments.ownedByYou\n                        : thread.author_name\n                    }}\n                  </span>\n                  <span class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\">\n                    {{ formatTime(thread.created_at) }}\n                  </span>\n                  <span\n                    v-if=\"thread.updated_at !== thread.created_at\"\n                    class=\"tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]\"\n                  >\n                    ({{ cloudT.comments.edited }})\n                  </span>\n                </div>\n                <div class=\"tpl:flex tpl:items-center tpl:gap-0.5\">\n                  <!-- Resolve toggle -->\n                  <button\n                    class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"\n                      thread.resolved_at\n                        ? cloudT.comments.unresolve\n                        : cloudT.comments.resolve\n                    \"\n                    @click=\"handleResolve(thread.id)\"\n                  >\n                    <CircleCheck\n                      :size=\"13\"\n                      :stroke-width=\"2\"\n                      class=\"tpl-resolve-icon\"\n                      :style=\"{\n                        color: thread.resolved_at\n                          ? 'var(--tpl-primary)'\n                          : undefined,\n                      }\"\n                    />\n                  </button>\n                  <!-- Edit (own only) -->\n                  <button\n                    v-if=\"isOwnComment(thread)\"\n                    class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"cloudT.comments.edit\"\n                    @click=\"startEdit(thread)\"\n                  >\n                    <Pencil :size=\"12\" :stroke-width=\"2\" />\n                  </button>\n                  <!-- Delete (own only) -->\n                  <button\n                    v-if=\"isOwnComment(thread)\"\n                    class=\"tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"cloudT.comments.delete\"\n                    @click=\"confirmDelete(thread.id)\"\n                  >\n                    <Trash2 :size=\"12\" :stroke-width=\"2\" />\n                  </button>\n                </div>\n              </div>\n\n              <!-- Resolved badge -->\n              <Transition name=\"tpl-resolve\">\n                <div\n                  v-if=\"thread.resolved_at\"\n                  class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1 tpl:text-[10px] tpl:text-[var(--tpl-primary)]\"\n                >\n                  <Check :size=\"10\" :stroke-width=\"2.5\" />\n                  <span>\n                    {{\n                      format(cloudT.comments.resolvedBy, {\n                        name: thread.resolved_by_name ?? \"\",\n                      })\n                    }}\n                  </span>\n                </div>\n              </Transition>\n\n              <!-- Block anchor indicator -->\n              <span\n                v-if=\"thread.block_id && isBlockMissing(thread.block_id)\"\n                class=\"tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]\"\n              >\n                {{ cloudT.comments.missingBlock }}\n              </span>\n              <button\n                v-else-if=\"thread.block_id\"\n                class=\"tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                @click=\"editor.selectBlock(thread.block_id ?? '')\"\n              >\n                Block\n              </button>\n\n              <!-- Comment body (or edit mode) -->\n              <div v-if=\"editingId === thread.id\" class=\"tpl:mt-2\">\n                <textarea\n                  v-model=\"editBody\"\n                  class=\"tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                  rows=\"3\"\n                  @keydown=\"handleEditKeydown($event, thread.id)\"\n                />\n                <div class=\"tpl:mt-1.5 tpl:flex tpl:gap-1.5\">\n                  <button\n                    class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n                    :disabled=\"!editBody.trim() || comments.isSubmitting.value\"\n                    @click=\"handleEdit(thread.id)\"\n                  >\n                    {{ cloudT.comments.save }}\n                  </button>\n                  <button\n                    class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                    @click=\"cancelEdit()\"\n                  >\n                    {{ cloudT.comments.cancel }}\n                  </button>\n                </div>\n              </div>\n              <p\n                v-else\n                class=\"tpl:mt-1.5 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]\"\n              >\n                {{ thread.body }}\n              </p>\n\n              <!-- Delete confirmation -->\n              <div\n                v-if=\"deletingId === thread.id\"\n                class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n              >\n                <span class=\"tpl:flex-1\">\n                  {{ cloudT.comments.deleteConfirm }}\n                </span>\n                <button\n                  class=\"tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]\"\n                  @click=\"handleDelete(thread.id)\"\n                >\n                  {{ cloudT.comments.delete }}\n                </button>\n                <button\n                  class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                  @click=\"cancelDelete()\"\n                >\n                  {{ cloudT.comments.cancel }}\n                </button>\n              </div>\n\n              <!-- Thread actions -->\n              <div\n                v-if=\"editingId !== thread.id && deletingId !== thread.id\"\n                class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2\"\n              >\n                <button\n                  class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                  :title=\"cloudT.comments.reply\"\n                  @click=\"startReply(thread.id)\"\n                >\n                  <Reply\n                    :size=\"13\"\n                    :stroke-width=\"2\"\n                    class=\"tpl:text-[var(--tpl-primary)]\"\n                  />\n                </button>\n                <button\n                  v-if=\"(thread.replies?.length ?? 0) > 0\"\n                  class=\"tpl:flex tpl:items-center tpl:gap-0.5 tpl:text-[11px] tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                  @click=\"toggleThread(thread.id)\"\n                >\n                  <template v-if=\"expandedThreads.has(thread.id)\">\n                    <ChevronUp :size=\"11\" :stroke-width=\"2\" />\n                  </template>\n                  <template v-else>\n                    <ChevronDown :size=\"11\" :stroke-width=\"2\" />\n                  </template>\n                  {{\n                    (thread.replies?.length ?? 0) === 1\n                      ? format(cloudT.comments.replyOne, {\n                          count: String(thread.replies?.length ?? 0),\n                        })\n                      : format(cloudT.comments.replyMany, {\n                          count: String(thread.replies?.length ?? 0),\n                        })\n                  }}\n                </button>\n              </div>\n            </div>\n\n            <!-- Replies -->\n            <Transition name=\"tpl-replies\">\n              <div\n                v-if=\"\n                  expandedThreads.has(thread.id) &&\n                  (thread.replies?.length ?? 0) > 0\n                \"\n                class=\"tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2\"\n              >\n                <div\n                  v-for=\"(reply, index) in thread.replies\"\n                  :key=\"reply.id\"\n                  class=\"tpl-comment-reply-card tpl:relative tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-2.5\"\n                  :class=\"\n                    index < (thread.replies?.length ?? 0) - 1 ? 'tpl:mb-2' : ''\n                  \"\n                >\n                  <div\n                    class=\"tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n                  >\n                    <div class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n                      <span\n                        class=\"tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                      >\n                        {{\n                          isOwnComment(reply)\n                            ? cloudT.comments.ownedByYou\n                            : reply.author_name\n                        }}\n                      </span>\n                      <span\n                        class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                      >\n                        {{ formatTime(reply.created_at) }}\n                      </span>\n                      <span\n                        v-if=\"reply.updated_at !== reply.created_at\"\n                        class=\"tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]\"\n                      >\n                        ({{ cloudT.comments.edited }})\n                      </span>\n                    </div>\n                    <div class=\"tpl:flex tpl:items-center tpl:gap-0.5\">\n                      <button\n                        v-if=\"isOwnComment(reply)\"\n                        class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                        :title=\"cloudT.comments.edit\"\n                        @click=\"startEdit(reply)\"\n                      >\n                        <Pencil :size=\"11\" :stroke-width=\"2\" />\n                      </button>\n                      <button\n                        v-if=\"isOwnComment(reply)\"\n                        class=\"tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                        :title=\"cloudT.comments.delete\"\n                        @click=\"confirmDelete(reply.id)\"\n                      >\n                        <Trash2 :size=\"11\" :stroke-width=\"2\" />\n                      </button>\n                    </div>\n                  </div>\n\n                  <!-- Reply body (or edit mode) -->\n                  <div v-if=\"editingId === reply.id\" class=\"tpl:mt-1.5\">\n                    <textarea\n                      v-model=\"editBody\"\n                      class=\"tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                      rows=\"2\"\n                      @keydown=\"handleEditKeydown($event, reply.id)\"\n                    />\n                    <div class=\"tpl:mt-1.5 tpl:flex tpl:gap-1.5\">\n                      <button\n                        class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n                        :disabled=\"\n                          !editBody.trim() || comments.isSubmitting.value\n                        \"\n                        @click=\"handleEdit(reply.id)\"\n                      >\n                        {{ cloudT.comments.save }}\n                      </button>\n                      <button\n                        class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                        @click=\"cancelEdit()\"\n                      >\n                        {{ cloudT.comments.cancel }}\n                      </button>\n                    </div>\n                  </div>\n                  <p\n                    v-else\n                    class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{ reply.body }}\n                  </p>\n\n                  <!-- Delete confirmation for reply -->\n                  <div\n                    v-if=\"deletingId === reply.id\"\n                    class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n                  >\n                    <span class=\"tpl:flex-1\">\n                      {{ cloudT.comments.deleteConfirm }}\n                    </span>\n                    <button\n                      class=\"tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]\"\n                      @click=\"handleDelete(reply.id)\"\n                    >\n                      {{ cloudT.comments.delete }}\n                    </button>\n                    <button\n                      class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                      @click=\"cancelDelete()\"\n                    >\n                      {{ cloudT.comments.cancel }}\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </Transition>\n\n            <!-- Reply input -->\n            <Transition name=\"tpl-replies\">\n              <div\n                v-if=\"replyingTo === thread.id\"\n                class=\"tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2\"\n              >\n                <div class=\"tpl:flex tpl:items-end tpl:gap-2\">\n                  <textarea\n                    v-model=\"replyBody\"\n                    class=\"tpl:flex-1 tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    :placeholder=\"cloudT.comments.replyPlaceholder\"\n                    rows=\"2\"\n                    @keydown=\"handleReplyKeydown($event, thread.id)\"\n                  />\n                  <div class=\"tpl:flex tpl:shrink-0 tpl:flex-col tpl:gap-1\">\n                    <button\n                      class=\"tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n                      :disabled=\"\n                        !replyBody.trim() || comments.isSubmitting.value\n                      \"\n                      @click=\"handleReply(thread.id)\"\n                    >\n                      <Send :size=\"14\" :stroke-width=\"2\" />\n                    </button>\n                    <button\n                      class=\"tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                      @click=\"cancelReply()\"\n                    >\n                      <X :size=\"14\" :stroke-width=\"2\" />\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </Transition>\n          </div>\n        </div>\n      </div>\n\n      <!-- New comment input -->\n      <div class=\"tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]\">\n        <div\n          v-if=\"isBlockFilterUnsaved\"\n          class=\"tpl:flex tpl:min-h-[68px] tpl:items-center tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]\"\n        >\n          {{ cloudT.comments.saveTemplateFirst }}\n        </div>\n        <div\n          v-else\n          class=\"tpl-comments-input-wrapper tpl:flex tpl:min-h-[68px] tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n        >\n          <textarea\n            ref=\"newCommentInput\"\n            v-model=\"newCommentBody\"\n            class=\"tpl:max-h-24 tpl:min-h-[48px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-xs tpl:outline-none tpl:text-[var(--tpl-text)]\"\n            :placeholder=\"cloudT.comments.placeholder\"\n            :disabled=\"comments.isSubmitting.value\"\n            rows=\"2\"\n            @keydown=\"handleNewCommentKeydown\"\n          />\n          <button\n            class=\"tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n            :disabled=\"!newCommentBody.trim() || comments.isSubmitting.value\"\n            @click=\"handleAddComment\"\n          >\n            <LoaderCircle\n              v-if=\"comments.isSubmitting.value\"\n              class=\"tpl-spinner\"\n              :size=\"16\"\n              :stroke-width=\"2\"\n            />\n            <Send v-else :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-comments-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-comments-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-comments-input-wrapper:focus-within {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-comments-send-btn:not(:disabled):hover {\n  transform: scale(1.05);\n}\n\n.tpl-comment-filter {\n  color: var(--tpl-text-muted);\n  background-color: transparent;\n}\n\n.tpl-comment-filter:hover {\n  background-color: var(--tpl-bg-hover);\n  color: var(--tpl-text);\n}\n\n.tpl-comment-filter--active {\n  background-color: var(--tpl-primary-light);\n  color: var(--tpl-primary);\n}\n\n.tpl-comment-action {\n  color: var(--tpl-text-dim);\n  background-color: transparent;\n}\n\n.tpl-comment-action:hover {\n  background-color: var(--tpl-bg-hover);\n  color: var(--tpl-text);\n}\n\n.tpl-comment-delete:hover {\n  background-color: var(--tpl-danger-light);\n  color: var(--tpl-danger);\n}\n\n.tpl-comment-card {\n  border-color: var(--tpl-border);\n  background-color: var(--tpl-bg);\n}\n\n.tpl-comment-reply-card {\n  border-color: var(--tpl-border);\n  background-color: var(--tpl-bg);\n}\n\n.tpl-resolve-enter-active,\n.tpl-resolve-leave-active {\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease;\n}\n\n.tpl-resolve-enter-from,\n.tpl-resolve-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n.tpl-resolve-icon {\n  transition:\n    color 0.3s ease,\n    transform 0.2s ease;\n}\n\n.tpl-resolve-icon:active {\n  transform: scale(1.3);\n}\n\n.tpl-replies-enter-active,\n.tpl-replies-leave-active {\n  transition:\n    opacity 0.25s ease,\n    transform 0.25s ease;\n}\n\n.tpl-replies-enter-from,\n.tpl-replies-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"CommentsSidebar-B9bWvvbl.js","names":[],"sources":["../../../src/cloud/components/CommentsSidebar.vue","../../../src/cloud/components/CommentsSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { formatRelativeTime } from \"../../utils/formatRelativeTime\";\nimport {\n  EDITOR_KEY,\n  AUTH_MANAGER_KEY,\n  COMMENTS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { Comment } from \"@templatical/types\";\nimport {\n  Check,\n  CircleCheck,\n  ChevronDown,\n  ChevronUp,\n  LoaderCircle,\n  MessageCircle,\n  Pencil,\n  Reply,\n  Send,\n  Trash2,\n  X,\n} from \"@lucide/vue\";\nimport { computed, nextTick, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"filterBlock\", blockId: string | null): void;\n}>();\n\nconst { format } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"CommentsSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"CommentsSidebar\");\nconst comments = requireInject(COMMENTS_KEY, \"CommentsSidebar\");\n\ntype FilterMode = \"all\" | \"unresolved\" | \"block\";\nconst filterMode = ref<FilterMode>(\"unresolved\");\nconst filterBlockId = ref<string | null>(null);\n\nconst newCommentBody = ref(\"\");\nconst replyingTo = ref<string | null>(null);\nconst replyBody = ref(\"\");\nconst editingId = ref<string | null>(null);\nconst editBody = ref(\"\");\nconst expandedThreads = ref<Set<string>>(new Set());\nconst deletingId = ref<string | null>(null);\nconst newCommentInput = ref<HTMLTextAreaElement | null>(null);\n\nconst currentUserId = computed(() => authManager.userConfig?.id ?? null);\n\nconst allBlockIds = computed<Set<string>>(() => {\n  const ids = new Set<string>();\n  for (const block of editor.content.value.blocks) {\n    ids.add(block.id);\n    if (block.type === \"section\") {\n      for (const column of block.children) {\n        for (const child of column) {\n          ids.add(child.id);\n        }\n      }\n    }\n  }\n  return ids;\n});\n\nfunction isBlockMissing(blockId: string | null): boolean {\n  if (!blockId) {\n    return false;\n  }\n  return !allBlockIds.value.has(blockId);\n}\n\nconst isBlockFilterUnsaved = computed(() => {\n  if (filterMode.value !== \"block\" || !filterBlockId.value) {\n    return false;\n  }\n  return !(editor.savedBlockIds?.value.has(filterBlockId.value) ?? true);\n});\n\nconst filteredComments = computed(() => {\n  let items = comments.comments.value;\n\n  if (filterMode.value === \"unresolved\") {\n    items = items.filter((c) => !c.resolved_at);\n  } else if (filterMode.value === \"block\" && filterBlockId.value) {\n    items = items.filter((c) => c.block_id === filterBlockId.value);\n  }\n\n  return items;\n});\n\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (isVisible) {\n      comments.loadComments();\n    }\n  },\n);\n\nwatch(\n  () => editor.state.selectedBlockId,\n  (newBlockId) => {\n    if (filterMode.value === \"block\" && newBlockId) {\n      filterBlockId.value = newBlockId;\n    }\n  },\n);\n\nfunction setFilter(mode: FilterMode, blockId?: string): void {\n  filterMode.value = mode;\n  filterBlockId.value = mode === \"block\" ? (blockId ?? null) : null;\n}\n\nfunction filterByBlock(blockId: string): void {\n  setFilter(\"block\", blockId);\n  emit(\"filterBlock\", blockId);\n}\n\nfunction toggleThread(threadId: string): void {\n  if (expandedThreads.value.has(threadId)) {\n    expandedThreads.value.delete(threadId);\n  } else {\n    expandedThreads.value.add(threadId);\n  }\n}\n\nfunction startReply(threadId: string): void {\n  replyingTo.value = threadId;\n  replyBody.value = \"\";\n  editingId.value = null;\n\n  if (!expandedThreads.value.has(threadId)) {\n    expandedThreads.value.add(threadId);\n  }\n}\n\nfunction cancelReply(): void {\n  replyingTo.value = null;\n  replyBody.value = \"\";\n}\n\nfunction startEdit(comment: Comment): void {\n  editingId.value = comment.id;\n  editBody.value = comment.body;\n  replyingTo.value = null;\n}\n\nfunction cancelEdit(): void {\n  editingId.value = null;\n  editBody.value = \"\";\n}\n\nfunction confirmDelete(commentId: string): void {\n  deletingId.value = commentId;\n}\n\nfunction cancelDelete(): void {\n  deletingId.value = null;\n}\n\nasync function handleAddComment(): Promise<void> {\n  const body = newCommentBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  const blockId =\n    filterMode.value === \"block\" ? filterBlockId.value : undefined;\n  await comments.addComment(body, blockId ?? undefined);\n  newCommentBody.value = \"\";\n}\n\nasync function handleReply(parentId: string): Promise<void> {\n  const body = replyBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  const parent = comments.comments.value.find((c) => c.id === parentId);\n  await comments.addComment(body, parent?.block_id ?? undefined, parentId);\n  replyingTo.value = null;\n  replyBody.value = \"\";\n}\n\nasync function handleEdit(commentId: string): Promise<void> {\n  const body = editBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  await comments.editComment(commentId, body);\n  editingId.value = null;\n  editBody.value = \"\";\n}\n\nasync function handleDelete(commentId: string): Promise<void> {\n  await comments.removeComment(commentId);\n  deletingId.value = null;\n}\n\nasync function handleResolve(commentId: string): Promise<void> {\n  await comments.toggleResolve(commentId);\n}\n\nfunction isOwnComment(comment: Comment): boolean {\n  return comment.author_identifier === currentUserId.value;\n}\n\nfunction formatTime(dateString: string): string {\n  return formatRelativeTime(dateString, cloudT.snapshotHistory) ?? dateString;\n}\n\nfunction handleNewCommentKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleAddComment();\n  }\n}\n\nfunction handleReplyKeydown(event: KeyboardEvent, parentId: string): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleReply(parentId);\n  }\n}\n\nfunction handleEditKeydown(event: KeyboardEvent, commentId: string): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleEdit(commentId);\n  }\n  if (event.key === \"Escape\") {\n    cancelEdit();\n  }\n}\n\nfunction focusNewComment(): void {\n  nextTick(() => {\n    newCommentInput.value?.focus();\n  });\n}\n\ndefineExpose({ filterByBlock, focusNewComment });\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-comments-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-comments-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-comments-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\"\n        >\n          <MessageCircle :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.comments.title }}</span>\n          <span\n            v-if=\"comments.unresolvedCount.value > 0\"\n            class=\"tpl:ml-1 tpl:inline-flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[10px] tpl:font-semibold tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          >\n            {{ comments.unresolvedCount.value }}\n          </span>\n        </div>\n        <button\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Filter bar -->\n      <div\n        class=\"tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-2\"\n      >\n        <button\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"\n            filterMode === 'unresolved' ? 'tpl-comment-filter--active' : ''\n          \"\n          @click=\"setFilter('unresolved')\"\n        >\n          {{ cloudT.comments.filterUnresolved }}\n        </button>\n        <button\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"filterMode === 'all' ? 'tpl-comment-filter--active' : ''\"\n          @click=\"setFilter('all')\"\n        >\n          {{ cloudT.comments.filterAll }}\n        </button>\n        <button\n          v-if=\"editor.state.selectedBlockId\"\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"filterMode === 'block' ? 'tpl-comment-filter--active' : ''\"\n          @click=\"setFilter('block', editor.state.selectedBlockId ?? undefined)\"\n        >\n          {{ cloudT.comments.filterBlock }}\n        </button>\n      </div>\n\n      <!-- Thread list -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto\">\n        <!-- Loading state -->\n        <div\n          v-if=\"comments.isLoading.value\"\n          class=\"tpl:flex tpl:h-full tpl:items-center tpl:justify-center\"\n        >\n          <LoaderCircle\n            class=\"tpl-spinner tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"24\"\n            :stroke-width=\"2\"\n          />\n        </div>\n\n        <!-- Empty state -->\n        <div\n          v-else-if=\"filteredComments.length === 0\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:px-6 tpl:text-center\"\n        >\n          <MessageCircle\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-text-dim)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{\n              filterMode === \"all\"\n                ? cloudT.comments.noCommentsHint\n                : cloudT.comments.noComments\n            }}\n          </p>\n        </div>\n\n        <!-- Comment threads -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-3 tpl:p-3\">\n          <div\n            v-for=\"thread in filteredComments\"\n            :key=\"thread.id\"\n            class=\"tpl-comment-thread\"\n          >\n            <!-- Root comment card -->\n            <div\n              class=\"tpl-comment-card tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-3\"\n            >\n              <!-- Comment header -->\n              <div\n                class=\"tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n              >\n                <div class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n                  <span\n                    class=\"tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{\n                      isOwnComment(thread)\n                        ? cloudT.comments.ownedByYou\n                        : thread.author_name\n                    }}\n                  </span>\n                  <span class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\">\n                    {{ formatTime(thread.created_at) }}\n                  </span>\n                  <span\n                    v-if=\"thread.updated_at !== thread.created_at\"\n                    class=\"tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]\"\n                  >\n                    ({{ cloudT.comments.edited }})\n                  </span>\n                </div>\n                <div class=\"tpl:flex tpl:items-center tpl:gap-0.5\">\n                  <!-- Resolve toggle -->\n                  <button\n                    class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"\n                      thread.resolved_at\n                        ? cloudT.comments.unresolve\n                        : cloudT.comments.resolve\n                    \"\n                    @click=\"handleResolve(thread.id)\"\n                  >\n                    <CircleCheck\n                      :size=\"13\"\n                      :stroke-width=\"2\"\n                      class=\"tpl-resolve-icon\"\n                      :style=\"{\n                        color: thread.resolved_at\n                          ? 'var(--tpl-primary)'\n                          : undefined,\n                      }\"\n                    />\n                  </button>\n                  <!-- Edit (own only) -->\n                  <button\n                    v-if=\"isOwnComment(thread)\"\n                    class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"cloudT.comments.edit\"\n                    @click=\"startEdit(thread)\"\n                  >\n                    <Pencil :size=\"12\" :stroke-width=\"2\" />\n                  </button>\n                  <!-- Delete (own only) -->\n                  <button\n                    v-if=\"isOwnComment(thread)\"\n                    class=\"tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"cloudT.comments.delete\"\n                    @click=\"confirmDelete(thread.id)\"\n                  >\n                    <Trash2 :size=\"12\" :stroke-width=\"2\" />\n                  </button>\n                </div>\n              </div>\n\n              <!-- Resolved badge -->\n              <Transition name=\"tpl-resolve\">\n                <div\n                  v-if=\"thread.resolved_at\"\n                  class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1 tpl:text-[10px] tpl:text-[var(--tpl-primary)]\"\n                >\n                  <Check :size=\"10\" :stroke-width=\"2.5\" />\n                  <span>\n                    {{\n                      format(cloudT.comments.resolvedBy, {\n                        name: thread.resolved_by_name ?? \"\",\n                      })\n                    }}\n                  </span>\n                </div>\n              </Transition>\n\n              <!-- Block anchor indicator -->\n              <span\n                v-if=\"thread.block_id && isBlockMissing(thread.block_id)\"\n                class=\"tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]\"\n              >\n                {{ cloudT.comments.missingBlock }}\n              </span>\n              <button\n                v-else-if=\"thread.block_id\"\n                class=\"tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                @click=\"editor.selectBlock(thread.block_id ?? '')\"\n              >\n                Block\n              </button>\n\n              <!-- Comment body (or edit mode) -->\n              <div v-if=\"editingId === thread.id\" class=\"tpl:mt-2\">\n                <textarea\n                  v-model=\"editBody\"\n                  class=\"tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                  rows=\"3\"\n                  @keydown=\"handleEditKeydown($event, thread.id)\"\n                />\n                <div class=\"tpl:mt-1.5 tpl:flex tpl:gap-1.5\">\n                  <button\n                    class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n                    :disabled=\"!editBody.trim() || comments.isSubmitting.value\"\n                    @click=\"handleEdit(thread.id)\"\n                  >\n                    {{ cloudT.comments.save }}\n                  </button>\n                  <button\n                    class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                    @click=\"cancelEdit()\"\n                  >\n                    {{ cloudT.comments.cancel }}\n                  </button>\n                </div>\n              </div>\n              <p\n                v-else\n                class=\"tpl:mt-1.5 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]\"\n              >\n                {{ thread.body }}\n              </p>\n\n              <!-- Delete confirmation -->\n              <div\n                v-if=\"deletingId === thread.id\"\n                class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n              >\n                <span class=\"tpl:flex-1\">\n                  {{ cloudT.comments.deleteConfirm }}\n                </span>\n                <button\n                  class=\"tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]\"\n                  @click=\"handleDelete(thread.id)\"\n                >\n                  {{ cloudT.comments.delete }}\n                </button>\n                <button\n                  class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                  @click=\"cancelDelete()\"\n                >\n                  {{ cloudT.comments.cancel }}\n                </button>\n              </div>\n\n              <!-- Thread actions -->\n              <div\n                v-if=\"editingId !== thread.id && deletingId !== thread.id\"\n                class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2\"\n              >\n                <button\n                  class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                  :title=\"cloudT.comments.reply\"\n                  @click=\"startReply(thread.id)\"\n                >\n                  <Reply\n                    :size=\"13\"\n                    :stroke-width=\"2\"\n                    class=\"tpl:text-[var(--tpl-primary)]\"\n                  />\n                </button>\n                <button\n                  v-if=\"(thread.replies?.length ?? 0) > 0\"\n                  class=\"tpl:flex tpl:items-center tpl:gap-0.5 tpl:text-[11px] tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                  @click=\"toggleThread(thread.id)\"\n                >\n                  <template v-if=\"expandedThreads.has(thread.id)\">\n                    <ChevronUp :size=\"11\" :stroke-width=\"2\" />\n                  </template>\n                  <template v-else>\n                    <ChevronDown :size=\"11\" :stroke-width=\"2\" />\n                  </template>\n                  {{\n                    (thread.replies?.length ?? 0) === 1\n                      ? format(cloudT.comments.replyOne, {\n                          count: String(thread.replies?.length ?? 0),\n                        })\n                      : format(cloudT.comments.replyMany, {\n                          count: String(thread.replies?.length ?? 0),\n                        })\n                  }}\n                </button>\n              </div>\n            </div>\n\n            <!-- Replies -->\n            <Transition name=\"tpl-replies\">\n              <div\n                v-if=\"\n                  expandedThreads.has(thread.id) &&\n                  (thread.replies?.length ?? 0) > 0\n                \"\n                class=\"tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2\"\n              >\n                <div\n                  v-for=\"(reply, index) in thread.replies\"\n                  :key=\"reply.id\"\n                  class=\"tpl-comment-reply-card tpl:relative tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-2.5\"\n                  :class=\"\n                    index < (thread.replies?.length ?? 0) - 1 ? 'tpl:mb-2' : ''\n                  \"\n                >\n                  <div\n                    class=\"tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n                  >\n                    <div class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n                      <span\n                        class=\"tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                      >\n                        {{\n                          isOwnComment(reply)\n                            ? cloudT.comments.ownedByYou\n                            : reply.author_name\n                        }}\n                      </span>\n                      <span\n                        class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                      >\n                        {{ formatTime(reply.created_at) }}\n                      </span>\n                      <span\n                        v-if=\"reply.updated_at !== reply.created_at\"\n                        class=\"tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]\"\n                      >\n                        ({{ cloudT.comments.edited }})\n                      </span>\n                    </div>\n                    <div class=\"tpl:flex tpl:items-center tpl:gap-0.5\">\n                      <button\n                        v-if=\"isOwnComment(reply)\"\n                        class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                        :title=\"cloudT.comments.edit\"\n                        @click=\"startEdit(reply)\"\n                      >\n                        <Pencil :size=\"11\" :stroke-width=\"2\" />\n                      </button>\n                      <button\n                        v-if=\"isOwnComment(reply)\"\n                        class=\"tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                        :title=\"cloudT.comments.delete\"\n                        @click=\"confirmDelete(reply.id)\"\n                      >\n                        <Trash2 :size=\"11\" :stroke-width=\"2\" />\n                      </button>\n                    </div>\n                  </div>\n\n                  <!-- Reply body (or edit mode) -->\n                  <div v-if=\"editingId === reply.id\" class=\"tpl:mt-1.5\">\n                    <textarea\n                      v-model=\"editBody\"\n                      class=\"tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                      rows=\"2\"\n                      @keydown=\"handleEditKeydown($event, reply.id)\"\n                    />\n                    <div class=\"tpl:mt-1.5 tpl:flex tpl:gap-1.5\">\n                      <button\n                        class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n                        :disabled=\"\n                          !editBody.trim() || comments.isSubmitting.value\n                        \"\n                        @click=\"handleEdit(reply.id)\"\n                      >\n                        {{ cloudT.comments.save }}\n                      </button>\n                      <button\n                        class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                        @click=\"cancelEdit()\"\n                      >\n                        {{ cloudT.comments.cancel }}\n                      </button>\n                    </div>\n                  </div>\n                  <p\n                    v-else\n                    class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{ reply.body }}\n                  </p>\n\n                  <!-- Delete confirmation for reply -->\n                  <div\n                    v-if=\"deletingId === reply.id\"\n                    class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n                  >\n                    <span class=\"tpl:flex-1\">\n                      {{ cloudT.comments.deleteConfirm }}\n                    </span>\n                    <button\n                      class=\"tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]\"\n                      @click=\"handleDelete(reply.id)\"\n                    >\n                      {{ cloudT.comments.delete }}\n                    </button>\n                    <button\n                      class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                      @click=\"cancelDelete()\"\n                    >\n                      {{ cloudT.comments.cancel }}\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </Transition>\n\n            <!-- Reply input -->\n            <Transition name=\"tpl-replies\">\n              <div\n                v-if=\"replyingTo === thread.id\"\n                class=\"tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2\"\n              >\n                <div class=\"tpl:flex tpl:items-end tpl:gap-2\">\n                  <textarea\n                    v-model=\"replyBody\"\n                    class=\"tpl:flex-1 tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    :placeholder=\"cloudT.comments.replyPlaceholder\"\n                    rows=\"2\"\n                    @keydown=\"handleReplyKeydown($event, thread.id)\"\n                  />\n                  <div class=\"tpl:flex tpl:shrink-0 tpl:flex-col tpl:gap-1\">\n                    <button\n                      class=\"tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n                      :disabled=\"\n                        !replyBody.trim() || comments.isSubmitting.value\n                      \"\n                      @click=\"handleReply(thread.id)\"\n                    >\n                      <Send :size=\"14\" :stroke-width=\"2\" />\n                    </button>\n                    <button\n                      class=\"tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                      @click=\"cancelReply()\"\n                    >\n                      <X :size=\"14\" :stroke-width=\"2\" />\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </Transition>\n          </div>\n        </div>\n      </div>\n\n      <!-- New comment input -->\n      <div class=\"tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]\">\n        <div\n          v-if=\"isBlockFilterUnsaved\"\n          class=\"tpl:flex tpl:min-h-[68px] tpl:items-center tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]\"\n        >\n          {{ cloudT.comments.saveTemplateFirst }}\n        </div>\n        <div\n          v-else\n          class=\"tpl-comments-input-wrapper tpl:flex tpl:min-h-[68px] tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n        >\n          <textarea\n            ref=\"newCommentInput\"\n            v-model=\"newCommentBody\"\n            class=\"tpl:max-h-24 tpl:min-h-[48px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-xs tpl:outline-none tpl:text-[var(--tpl-text)]\"\n            :placeholder=\"cloudT.comments.placeholder\"\n            :disabled=\"comments.isSubmitting.value\"\n            rows=\"2\"\n            @keydown=\"handleNewCommentKeydown\"\n          />\n          <button\n            class=\"tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n            :disabled=\"!newCommentBody.trim() || comments.isSubmitting.value\"\n            @click=\"handleAddComment\"\n          >\n            <LoaderCircle\n              v-if=\"comments.isSubmitting.value\"\n              class=\"tpl-spinner\"\n              :size=\"16\"\n              :stroke-width=\"2\"\n            />\n            <Send v-else :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-comments-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-comments-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-comments-input-wrapper:focus-within {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-comments-send-btn:not(:disabled):hover {\n  transform: scale(1.05);\n}\n\n.tpl-comment-filter {\n  color: var(--tpl-text-muted);\n  background-color: transparent;\n}\n\n.tpl-comment-filter:hover {\n  background-color: var(--tpl-bg-hover);\n  color: var(--tpl-text);\n}\n\n.tpl-comment-filter--active {\n  background-color: var(--tpl-primary-light);\n  color: var(--tpl-primary);\n}\n\n.tpl-comment-action {\n  color: var(--tpl-text-dim);\n  background-color: transparent;\n}\n\n.tpl-comment-action:hover {\n  background-color: var(--tpl-bg-hover);\n  color: var(--tpl-text);\n}\n\n.tpl-comment-delete:hover {\n  background-color: var(--tpl-danger-light);\n  color: var(--tpl-danger);\n}\n\n.tpl-comment-card {\n  border-color: var(--tpl-border);\n  background-color: var(--tpl-bg);\n}\n\n.tpl-comment-reply-card {\n  border-color: var(--tpl-border);\n  background-color: var(--tpl-bg);\n}\n\n.tpl-resolve-enter-active,\n.tpl-resolve-leave-active {\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease;\n}\n\n.tpl-resolve-enter-from,\n.tpl-resolve-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n.tpl-resolve-icon {\n  transition:\n    color 0.3s ease,\n    transform 0.2s ease;\n}\n\n.tpl-resolve-icon:active {\n  transform: scale(1.3);\n}\n\n.tpl-replies-enter-active,\n.tpl-replies-leave-active {\n  transition:\n    opacity 0.25s ease,\n    transform 0.25s ease;\n}\n\n.tpl-replies-enter-from,\n.tpl-replies-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { formatRelativeTime } from \"../../utils/formatRelativeTime\";\nimport {\n  EDITOR_KEY,\n  AUTH_MANAGER_KEY,\n  COMMENTS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { Comment } from \"@templatical/types\";\nimport {\n  Check,\n  CircleCheck,\n  ChevronDown,\n  ChevronUp,\n  LoaderCircle,\n  MessageCircle,\n  Pencil,\n  Reply,\n  Send,\n  Trash2,\n  X,\n} from \"@lucide/vue\";\nimport { computed, nextTick, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"filterBlock\", blockId: string | null): void;\n}>();\n\nconst { format } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"CommentsSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"CommentsSidebar\");\nconst comments = requireInject(COMMENTS_KEY, \"CommentsSidebar\");\n\ntype FilterMode = \"all\" | \"unresolved\" | \"block\";\nconst filterMode = ref<FilterMode>(\"unresolved\");\nconst filterBlockId = ref<string | null>(null);\n\nconst newCommentBody = ref(\"\");\nconst replyingTo = ref<string | null>(null);\nconst replyBody = ref(\"\");\nconst editingId = ref<string | null>(null);\nconst editBody = ref(\"\");\nconst expandedThreads = ref<Set<string>>(new Set());\nconst deletingId = ref<string | null>(null);\nconst newCommentInput = ref<HTMLTextAreaElement | null>(null);\n\nconst currentUserId = computed(() => authManager.userConfig?.id ?? null);\n\nconst allBlockIds = computed<Set<string>>(() => {\n  const ids = new Set<string>();\n  for (const block of editor.content.value.blocks) {\n    ids.add(block.id);\n    if (block.type === \"section\") {\n      for (const column of block.children) {\n        for (const child of column) {\n          ids.add(child.id);\n        }\n      }\n    }\n  }\n  return ids;\n});\n\nfunction isBlockMissing(blockId: string | null): boolean {\n  if (!blockId) {\n    return false;\n  }\n  return !allBlockIds.value.has(blockId);\n}\n\nconst isBlockFilterUnsaved = computed(() => {\n  if (filterMode.value !== \"block\" || !filterBlockId.value) {\n    return false;\n  }\n  return !(editor.savedBlockIds?.value.has(filterBlockId.value) ?? true);\n});\n\nconst filteredComments = computed(() => {\n  let items = comments.comments.value;\n\n  if (filterMode.value === \"unresolved\") {\n    items = items.filter((c) => !c.resolved_at);\n  } else if (filterMode.value === \"block\" && filterBlockId.value) {\n    items = items.filter((c) => c.block_id === filterBlockId.value);\n  }\n\n  return items;\n});\n\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (isVisible) {\n      comments.loadComments();\n    }\n  },\n);\n\nwatch(\n  () => editor.state.selectedBlockId,\n  (newBlockId) => {\n    if (filterMode.value === \"block\" && newBlockId) {\n      filterBlockId.value = newBlockId;\n    }\n  },\n);\n\nfunction setFilter(mode: FilterMode, blockId?: string): void {\n  filterMode.value = mode;\n  filterBlockId.value = mode === \"block\" ? (blockId ?? null) : null;\n}\n\nfunction filterByBlock(blockId: string): void {\n  setFilter(\"block\", blockId);\n  emit(\"filterBlock\", blockId);\n}\n\nfunction toggleThread(threadId: string): void {\n  if (expandedThreads.value.has(threadId)) {\n    expandedThreads.value.delete(threadId);\n  } else {\n    expandedThreads.value.add(threadId);\n  }\n}\n\nfunction startReply(threadId: string): void {\n  replyingTo.value = threadId;\n  replyBody.value = \"\";\n  editingId.value = null;\n\n  if (!expandedThreads.value.has(threadId)) {\n    expandedThreads.value.add(threadId);\n  }\n}\n\nfunction cancelReply(): void {\n  replyingTo.value = null;\n  replyBody.value = \"\";\n}\n\nfunction startEdit(comment: Comment): void {\n  editingId.value = comment.id;\n  editBody.value = comment.body;\n  replyingTo.value = null;\n}\n\nfunction cancelEdit(): void {\n  editingId.value = null;\n  editBody.value = \"\";\n}\n\nfunction confirmDelete(commentId: string): void {\n  deletingId.value = commentId;\n}\n\nfunction cancelDelete(): void {\n  deletingId.value = null;\n}\n\nasync function handleAddComment(): Promise<void> {\n  const body = newCommentBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  const blockId =\n    filterMode.value === \"block\" ? filterBlockId.value : undefined;\n  await comments.addComment(body, blockId ?? undefined);\n  newCommentBody.value = \"\";\n}\n\nasync function handleReply(parentId: string): Promise<void> {\n  const body = replyBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  const parent = comments.comments.value.find((c) => c.id === parentId);\n  await comments.addComment(body, parent?.block_id ?? undefined, parentId);\n  replyingTo.value = null;\n  replyBody.value = \"\";\n}\n\nasync function handleEdit(commentId: string): Promise<void> {\n  const body = editBody.value.trim();\n  if (!body) {\n    return;\n  }\n\n  await comments.editComment(commentId, body);\n  editingId.value = null;\n  editBody.value = \"\";\n}\n\nasync function handleDelete(commentId: string): Promise<void> {\n  await comments.removeComment(commentId);\n  deletingId.value = null;\n}\n\nasync function handleResolve(commentId: string): Promise<void> {\n  await comments.toggleResolve(commentId);\n}\n\nfunction isOwnComment(comment: Comment): boolean {\n  return comment.author_identifier === currentUserId.value;\n}\n\nfunction formatTime(dateString: string): string {\n  return formatRelativeTime(dateString, cloudT.snapshotHistory) ?? dateString;\n}\n\nfunction handleNewCommentKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleAddComment();\n  }\n}\n\nfunction handleReplyKeydown(event: KeyboardEvent, parentId: string): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleReply(parentId);\n  }\n}\n\nfunction handleEditKeydown(event: KeyboardEvent, commentId: string): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleEdit(commentId);\n  }\n  if (event.key === \"Escape\") {\n    cancelEdit();\n  }\n}\n\nfunction focusNewComment(): void {\n  nextTick(() => {\n    newCommentInput.value?.focus();\n  });\n}\n\ndefineExpose({ filterByBlock, focusNewComment });\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-comments-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-comments-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-comments-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\"\n        >\n          <MessageCircle :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.comments.title }}</span>\n          <span\n            v-if=\"comments.unresolvedCount.value > 0\"\n            class=\"tpl:ml-1 tpl:inline-flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[10px] tpl:font-semibold tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          >\n            {{ comments.unresolvedCount.value }}\n          </span>\n        </div>\n        <button\n          class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n          @click=\"emit('close')\"\n        >\n          <X :size=\"14\" :stroke-width=\"2\" />\n        </button>\n      </div>\n\n      <!-- Filter bar -->\n      <div\n        class=\"tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-2\"\n      >\n        <button\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"\n            filterMode === 'unresolved' ? 'tpl-comment-filter--active' : ''\n          \"\n          @click=\"setFilter('unresolved')\"\n        >\n          {{ cloudT.comments.filterUnresolved }}\n        </button>\n        <button\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"filterMode === 'all' ? 'tpl-comment-filter--active' : ''\"\n          @click=\"setFilter('all')\"\n        >\n          {{ cloudT.comments.filterAll }}\n        </button>\n        <button\n          v-if=\"editor.state.selectedBlockId\"\n          class=\"tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150\"\n          :class=\"filterMode === 'block' ? 'tpl-comment-filter--active' : ''\"\n          @click=\"setFilter('block', editor.state.selectedBlockId ?? undefined)\"\n        >\n          {{ cloudT.comments.filterBlock }}\n        </button>\n      </div>\n\n      <!-- Thread list -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto\">\n        <!-- Loading state -->\n        <div\n          v-if=\"comments.isLoading.value\"\n          class=\"tpl:flex tpl:h-full tpl:items-center tpl:justify-center\"\n        >\n          <LoaderCircle\n            class=\"tpl-spinner tpl:text-[var(--tpl-text-muted)]\"\n            :size=\"24\"\n            :stroke-width=\"2\"\n          />\n        </div>\n\n        <!-- Empty state -->\n        <div\n          v-else-if=\"filteredComments.length === 0\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:px-6 tpl:text-center\"\n        >\n          <MessageCircle\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-text-dim)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{\n              filterMode === \"all\"\n                ? cloudT.comments.noCommentsHint\n                : cloudT.comments.noComments\n            }}\n          </p>\n        </div>\n\n        <!-- Comment threads -->\n        <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-3 tpl:p-3\">\n          <div\n            v-for=\"thread in filteredComments\"\n            :key=\"thread.id\"\n            class=\"tpl-comment-thread\"\n          >\n            <!-- Root comment card -->\n            <div\n              class=\"tpl-comment-card tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-3\"\n            >\n              <!-- Comment header -->\n              <div\n                class=\"tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n              >\n                <div class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n                  <span\n                    class=\"tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{\n                      isOwnComment(thread)\n                        ? cloudT.comments.ownedByYou\n                        : thread.author_name\n                    }}\n                  </span>\n                  <span class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\">\n                    {{ formatTime(thread.created_at) }}\n                  </span>\n                  <span\n                    v-if=\"thread.updated_at !== thread.created_at\"\n                    class=\"tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]\"\n                  >\n                    ({{ cloudT.comments.edited }})\n                  </span>\n                </div>\n                <div class=\"tpl:flex tpl:items-center tpl:gap-0.5\">\n                  <!-- Resolve toggle -->\n                  <button\n                    class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"\n                      thread.resolved_at\n                        ? cloudT.comments.unresolve\n                        : cloudT.comments.resolve\n                    \"\n                    @click=\"handleResolve(thread.id)\"\n                  >\n                    <CircleCheck\n                      :size=\"13\"\n                      :stroke-width=\"2\"\n                      class=\"tpl-resolve-icon\"\n                      :style=\"{\n                        color: thread.resolved_at\n                          ? 'var(--tpl-primary)'\n                          : undefined,\n                      }\"\n                    />\n                  </button>\n                  <!-- Edit (own only) -->\n                  <button\n                    v-if=\"isOwnComment(thread)\"\n                    class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"cloudT.comments.edit\"\n                    @click=\"startEdit(thread)\"\n                  >\n                    <Pencil :size=\"12\" :stroke-width=\"2\" />\n                  </button>\n                  <!-- Delete (own only) -->\n                  <button\n                    v-if=\"isOwnComment(thread)\"\n                    class=\"tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                    :title=\"cloudT.comments.delete\"\n                    @click=\"confirmDelete(thread.id)\"\n                  >\n                    <Trash2 :size=\"12\" :stroke-width=\"2\" />\n                  </button>\n                </div>\n              </div>\n\n              <!-- Resolved badge -->\n              <Transition name=\"tpl-resolve\">\n                <div\n                  v-if=\"thread.resolved_at\"\n                  class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1 tpl:text-[10px] tpl:text-[var(--tpl-primary)]\"\n                >\n                  <Check :size=\"10\" :stroke-width=\"2.5\" />\n                  <span>\n                    {{\n                      format(cloudT.comments.resolvedBy, {\n                        name: thread.resolved_by_name ?? \"\",\n                      })\n                    }}\n                  </span>\n                </div>\n              </Transition>\n\n              <!-- Block anchor indicator -->\n              <span\n                v-if=\"thread.block_id && isBlockMissing(thread.block_id)\"\n                class=\"tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]\"\n              >\n                {{ cloudT.comments.missingBlock }}\n              </span>\n              <button\n                v-else-if=\"thread.block_id\"\n                class=\"tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n                @click=\"editor.selectBlock(thread.block_id ?? '')\"\n              >\n                Block\n              </button>\n\n              <!-- Comment body (or edit mode) -->\n              <div v-if=\"editingId === thread.id\" class=\"tpl:mt-2\">\n                <textarea\n                  v-model=\"editBody\"\n                  class=\"tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                  rows=\"3\"\n                  @keydown=\"handleEditKeydown($event, thread.id)\"\n                />\n                <div class=\"tpl:mt-1.5 tpl:flex tpl:gap-1.5\">\n                  <button\n                    class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n                    :disabled=\"!editBody.trim() || comments.isSubmitting.value\"\n                    @click=\"handleEdit(thread.id)\"\n                  >\n                    {{ cloudT.comments.save }}\n                  </button>\n                  <button\n                    class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                    @click=\"cancelEdit()\"\n                  >\n                    {{ cloudT.comments.cancel }}\n                  </button>\n                </div>\n              </div>\n              <p\n                v-else\n                class=\"tpl:mt-1.5 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]\"\n              >\n                {{ thread.body }}\n              </p>\n\n              <!-- Delete confirmation -->\n              <div\n                v-if=\"deletingId === thread.id\"\n                class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n              >\n                <span class=\"tpl:flex-1\">\n                  {{ cloudT.comments.deleteConfirm }}\n                </span>\n                <button\n                  class=\"tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]\"\n                  @click=\"handleDelete(thread.id)\"\n                >\n                  {{ cloudT.comments.delete }}\n                </button>\n                <button\n                  class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                  @click=\"cancelDelete()\"\n                >\n                  {{ cloudT.comments.cancel }}\n                </button>\n              </div>\n\n              <!-- Thread actions -->\n              <div\n                v-if=\"editingId !== thread.id && deletingId !== thread.id\"\n                class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2\"\n              >\n                <button\n                  class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                  :title=\"cloudT.comments.reply\"\n                  @click=\"startReply(thread.id)\"\n                >\n                  <Reply\n                    :size=\"13\"\n                    :stroke-width=\"2\"\n                    class=\"tpl:text-[var(--tpl-primary)]\"\n                  />\n                </button>\n                <button\n                  v-if=\"(thread.replies?.length ?? 0) > 0\"\n                  class=\"tpl:flex tpl:items-center tpl:gap-0.5 tpl:text-[11px] tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                  @click=\"toggleThread(thread.id)\"\n                >\n                  <template v-if=\"expandedThreads.has(thread.id)\">\n                    <ChevronUp :size=\"11\" :stroke-width=\"2\" />\n                  </template>\n                  <template v-else>\n                    <ChevronDown :size=\"11\" :stroke-width=\"2\" />\n                  </template>\n                  {{\n                    (thread.replies?.length ?? 0) === 1\n                      ? format(cloudT.comments.replyOne, {\n                          count: String(thread.replies?.length ?? 0),\n                        })\n                      : format(cloudT.comments.replyMany, {\n                          count: String(thread.replies?.length ?? 0),\n                        })\n                  }}\n                </button>\n              </div>\n            </div>\n\n            <!-- Replies -->\n            <Transition name=\"tpl-replies\">\n              <div\n                v-if=\"\n                  expandedThreads.has(thread.id) &&\n                  (thread.replies?.length ?? 0) > 0\n                \"\n                class=\"tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2\"\n              >\n                <div\n                  v-for=\"(reply, index) in thread.replies\"\n                  :key=\"reply.id\"\n                  class=\"tpl-comment-reply-card tpl:relative tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-2.5\"\n                  :class=\"\n                    index < (thread.replies?.length ?? 0) - 1 ? 'tpl:mb-2' : ''\n                  \"\n                >\n                  <div\n                    class=\"tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n                  >\n                    <div class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n                      <span\n                        class=\"tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n                      >\n                        {{\n                          isOwnComment(reply)\n                            ? cloudT.comments.ownedByYou\n                            : reply.author_name\n                        }}\n                      </span>\n                      <span\n                        class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n                      >\n                        {{ formatTime(reply.created_at) }}\n                      </span>\n                      <span\n                        v-if=\"reply.updated_at !== reply.created_at\"\n                        class=\"tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]\"\n                      >\n                        ({{ cloudT.comments.edited }})\n                      </span>\n                    </div>\n                    <div class=\"tpl:flex tpl:items-center tpl:gap-0.5\">\n                      <button\n                        v-if=\"isOwnComment(reply)\"\n                        class=\"tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                        :title=\"cloudT.comments.edit\"\n                        @click=\"startEdit(reply)\"\n                      >\n                        <Pencil :size=\"11\" :stroke-width=\"2\" />\n                      </button>\n                      <button\n                        v-if=\"isOwnComment(reply)\"\n                        class=\"tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150\"\n                        :title=\"cloudT.comments.delete\"\n                        @click=\"confirmDelete(reply.id)\"\n                      >\n                        <Trash2 :size=\"11\" :stroke-width=\"2\" />\n                      </button>\n                    </div>\n                  </div>\n\n                  <!-- Reply body (or edit mode) -->\n                  <div v-if=\"editingId === reply.id\" class=\"tpl:mt-1.5\">\n                    <textarea\n                      v-model=\"editBody\"\n                      class=\"tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                      rows=\"2\"\n                      @keydown=\"handleEditKeydown($event, reply.id)\"\n                    />\n                    <div class=\"tpl:mt-1.5 tpl:flex tpl:gap-1.5\">\n                      <button\n                        class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n                        :disabled=\"\n                          !editBody.trim() || comments.isSubmitting.value\n                        \"\n                        @click=\"handleEdit(reply.id)\"\n                      >\n                        {{ cloudT.comments.save }}\n                      </button>\n                      <button\n                        class=\"tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                        @click=\"cancelEdit()\"\n                      >\n                        {{ cloudT.comments.cancel }}\n                      </button>\n                    </div>\n                  </div>\n                  <p\n                    v-else\n                    class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]\"\n                  >\n                    {{ reply.body }}\n                  </p>\n\n                  <!-- Delete confirmation for reply -->\n                  <div\n                    v-if=\"deletingId === reply.id\"\n                    class=\"tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n                  >\n                    <span class=\"tpl:flex-1\">\n                      {{ cloudT.comments.deleteConfirm }}\n                    </span>\n                    <button\n                      class=\"tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]\"\n                      @click=\"handleDelete(reply.id)\"\n                    >\n                      {{ cloudT.comments.delete }}\n                    </button>\n                    <button\n                      class=\"tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n                      @click=\"cancelDelete()\"\n                    >\n                      {{ cloudT.comments.cancel }}\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </Transition>\n\n            <!-- Reply input -->\n            <Transition name=\"tpl-replies\">\n              <div\n                v-if=\"replyingTo === thread.id\"\n                class=\"tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2\"\n              >\n                <div class=\"tpl:flex tpl:items-end tpl:gap-2\">\n                  <textarea\n                    v-model=\"replyBody\"\n                    class=\"tpl:flex-1 tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n                    :placeholder=\"cloudT.comments.replyPlaceholder\"\n                    rows=\"2\"\n                    @keydown=\"handleReplyKeydown($event, thread.id)\"\n                  />\n                  <div class=\"tpl:flex tpl:shrink-0 tpl:flex-col tpl:gap-1\">\n                    <button\n                      class=\"tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n                      :disabled=\"\n                        !replyBody.trim() || comments.isSubmitting.value\n                      \"\n                      @click=\"handleReply(thread.id)\"\n                    >\n                      <Send :size=\"14\" :stroke-width=\"2\" />\n                    </button>\n                    <button\n                      class=\"tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n                      @click=\"cancelReply()\"\n                    >\n                      <X :size=\"14\" :stroke-width=\"2\" />\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </Transition>\n          </div>\n        </div>\n      </div>\n\n      <!-- New comment input -->\n      <div class=\"tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]\">\n        <div\n          v-if=\"isBlockFilterUnsaved\"\n          class=\"tpl:flex tpl:min-h-[68px] tpl:items-center tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]\"\n        >\n          {{ cloudT.comments.saveTemplateFirst }}\n        </div>\n        <div\n          v-else\n          class=\"tpl-comments-input-wrapper tpl:flex tpl:min-h-[68px] tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n        >\n          <textarea\n            ref=\"newCommentInput\"\n            v-model=\"newCommentBody\"\n            class=\"tpl:max-h-24 tpl:min-h-[48px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-xs tpl:outline-none tpl:text-[var(--tpl-text)]\"\n            :placeholder=\"cloudT.comments.placeholder\"\n            :disabled=\"comments.isSubmitting.value\"\n            rows=\"2\"\n            @keydown=\"handleNewCommentKeydown\"\n          />\n          <button\n            class=\"tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n            :disabled=\"!newCommentBody.trim() || comments.isSubmitting.value\"\n            @click=\"handleAddComment\"\n          >\n            <LoaderCircle\n              v-if=\"comments.isSubmitting.value\"\n              class=\"tpl-spinner\"\n              :size=\"16\"\n              :stroke-width=\"2\"\n            />\n            <Send v-else :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-comments-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-comments-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-comments-input-wrapper:focus-within {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-comments-send-btn:not(:disabled):hover {\n  transform: scale(1.05);\n}\n\n.tpl-comment-filter {\n  color: var(--tpl-text-muted);\n  background-color: transparent;\n}\n\n.tpl-comment-filter:hover {\n  background-color: var(--tpl-bg-hover);\n  color: var(--tpl-text);\n}\n\n.tpl-comment-filter--active {\n  background-color: var(--tpl-primary-light);\n  color: var(--tpl-primary);\n}\n\n.tpl-comment-action {\n  color: var(--tpl-text-dim);\n  background-color: transparent;\n}\n\n.tpl-comment-action:hover {\n  background-color: var(--tpl-bg-hover);\n  color: var(--tpl-text);\n}\n\n.tpl-comment-delete:hover {\n  background-color: var(--tpl-danger-light);\n  color: var(--tpl-danger);\n}\n\n.tpl-comment-card {\n  border-color: var(--tpl-border);\n  background-color: var(--tpl-bg);\n}\n\n.tpl-comment-reply-card {\n  border-color: var(--tpl-border);\n  background-color: var(--tpl-bg);\n}\n\n.tpl-resolve-enter-active,\n.tpl-resolve-leave-active {\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease;\n}\n\n.tpl-resolve-enter-from,\n.tpl-resolve-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n.tpl-resolve-icon {\n  transition:\n    color 0.3s ease,\n    transform 0.2s ease;\n}\n\n.tpl-resolve-icon:active {\n  transform: scale(1.3);\n}\n\n.tpl-replies-enter-active,\n.tpl-replies-leave-active {\n  transition:\n    opacity 0.25s ease,\n    transform 0.25s ease;\n}\n\n.tpl-replies-enter-from,\n.tpl-replies-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n</style>\n"],"mappings":"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"}

package/dist/cdn/chunks/{CountdownBlock-D2Oth7YY.js → CountdownBlock-BTpRd0Hn.js}

@@ -1,6 +1,6 @@
-import { M as e, P as t, Z as n, ct as r, f as i, g as a, h as o, it as s, p as c, st as l, u, x as d } from "./draggable-BRF_Q_jB.js";
-import { g as f } from "./dist-Dp46rwVY.js";
-import { t as p } from "./useI18n-aRMtgYRj.js";
+import { M as e, P as t, Z as n, ct as r, f as i, g as a, h as o, it as s, p as c, st as l, u, x as d } from "./draggable-Z4XXmbPC.js";
+import { g as f } from "./dist-B4VIlp1g.js";
+import { t as p } from "./useI18n-BvcEYzrI.js";
 //#region src/components/blocks/CountdownBlock.vue?vue&type=script&setup=true&lang.ts
 var m = {
 	key: 0,
@@ -90,4 +90,4 @@ var m = {
 //#endregion
 export { _ as default };
 
-//# sourceMappingURL=CountdownBlock-D2Oth7YY.js.map
+//# sourceMappingURL=CountdownBlock-BTpRd0Hn.js.map

package/dist/cdn/chunks/{CountdownBlock-D2Oth7YY.js.map → CountdownBlock-BTpRd0Hn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CountdownBlock-D2Oth7YY.js","names":[],"sources":["../../../src/components/blocks/CountdownBlock.vue","../../../src/components/blocks/CountdownBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  CountdownBlock as CountdownBlockType,\n  ViewportSize,\n} from \"@templatical/types\";\nimport { useIntervalFn } from \"@vueuse/core\";\nimport { computed, ref } from \"vue\";\nimport { useI18n } from \"../../composables/useI18n\";\n\nconst props = defineProps<{\n  block: CountdownBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst { t } = useI18n();\n\nconst now = ref(Date.now());\nuseIntervalFn(() => {\n  now.value = Date.now();\n}, 1000);\n\nconst targetTime = computed(() => {\n  if (!props.block.targetDate) return null;\n  const date = new Date(props.block.targetDate);\n  return isNaN(date.getTime()) ? null : date.getTime();\n});\n\nconst isExpired = computed(() => {\n  if (!targetTime.value) return false;\n  return now.value >= targetTime.value;\n});\n\nconst remaining = computed(() => {\n  if (!targetTime.value || isExpired.value) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n  }\n  const diff = targetTime.value - now.value;\n  const totalSeconds = Math.floor(diff / 1000);\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  };\n});\n\nconst segments = computed(() => {\n  const result: Array<{ value: string; label: string }> = [];\n  if (props.block.showDays) {\n    result.push({\n      value: String(remaining.value.days).padStart(2, \"0\"),\n      label: props.block.labelDays,\n    });\n  }\n  if (props.block.showHours) {\n    result.push({\n      value: String(remaining.value.hours).padStart(2, \"0\"),\n      label: props.block.labelHours,\n    });\n  }\n  if (props.block.showMinutes) {\n    result.push({\n      value: String(remaining.value.minutes).padStart(2, \"0\"),\n      label: props.block.labelMinutes,\n    });\n  }\n  if (props.block.showSeconds) {\n    result.push({\n      value: String(remaining.value.seconds).padStart(2, \"0\"),\n      label: props.block.labelSeconds,\n    });\n  }\n  return result;\n});\n\nconst containerStyle = computed(() => ({\n  backgroundColor: props.block.backgroundColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n\nconst digitStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  fontWeight: \"bold\" as const,\n  color: props.block.digitColor,\n  lineHeight: \"1.2\",\n}));\n\nconst labelStyle = computed(() => ({\n  fontSize: `${props.block.labelFontSize}px`,\n  color: props.block.labelColor,\n  marginTop: \"4px\",\n}));\n\nconst separatorStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  color: props.block.digitColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n</script>\n\n<template>\n  <!-- Empty state: no target date -->\n  <div\n    v-if=\"!block.targetDate\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n  >\n    {{ t.countdown.setDate }}\n  </div>\n\n  <!-- Expired + hidden -->\n  <div\n    v-else-if=\"isExpired && block.hideOnExpiry\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50\"\n  >\n    {{ t.countdown.hidden }}\n  </div>\n\n  <!-- Expired with message -->\n  <div\n    v-else-if=\"isExpired\"\n    :style=\"containerStyle\"\n    class=\"tpl:py-4 tpl:text-center\"\n  >\n    <span\n      :style=\"{\n        fontSize: `${block.digitFontSize}px`,\n        color: block.digitColor,\n      }\"\n    >\n      {{ block.expiredMessage }}\n    </span>\n  </div>\n\n  <!-- Active countdown -->\n  <div\n    v-else\n    :style=\"containerStyle\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4\"\n  >\n    <template v-for=\"(segment, index) in segments\" :key=\"segment.label\">\n      <span v-if=\"index > 0\" :style=\"separatorStyle\" class=\"tpl:self-start\">\n        {{ block.separator }}\n      </span>\n      <div class=\"tpl:text-center\">\n        <div :style=\"digitStyle\">{{ segment.value }}</div>\n        <div :style=\"labelStyle\">{{ segment.label }}</div>\n      </div>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type {\n  CountdownBlock as CountdownBlockType,\n  ViewportSize,\n} from \"@templatical/types\";\nimport { useIntervalFn } from \"@vueuse/core\";\nimport { computed, ref } from \"vue\";\nimport { useI18n } from \"../../composables/useI18n\";\n\nconst props = defineProps<{\n  block: CountdownBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst { t } = useI18n();\n\nconst now = ref(Date.now());\nuseIntervalFn(() => {\n  now.value = Date.now();\n}, 1000);\n\nconst targetTime = computed(() => {\n  if (!props.block.targetDate) return null;\n  const date = new Date(props.block.targetDate);\n  return isNaN(date.getTime()) ? null : date.getTime();\n});\n\nconst isExpired = computed(() => {\n  if (!targetTime.value) return false;\n  return now.value >= targetTime.value;\n});\n\nconst remaining = computed(() => {\n  if (!targetTime.value || isExpired.value) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n  }\n  const diff = targetTime.value - now.value;\n  const totalSeconds = Math.floor(diff / 1000);\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  };\n});\n\nconst segments = computed(() => {\n  const result: Array<{ value: string; label: string }> = [];\n  if (props.block.showDays) {\n    result.push({\n      value: String(remaining.value.days).padStart(2, \"0\"),\n      label: props.block.labelDays,\n    });\n  }\n  if (props.block.showHours) {\n    result.push({\n      value: String(remaining.value.hours).padStart(2, \"0\"),\n      label: props.block.labelHours,\n    });\n  }\n  if (props.block.showMinutes) {\n    result.push({\n      value: String(remaining.value.minutes).padStart(2, \"0\"),\n      label: props.block.labelMinutes,\n    });\n  }\n  if (props.block.showSeconds) {\n    result.push({\n      value: String(remaining.value.seconds).padStart(2, \"0\"),\n      label: props.block.labelSeconds,\n    });\n  }\n  return result;\n});\n\nconst containerStyle = computed(() => ({\n  backgroundColor: props.block.backgroundColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n\nconst digitStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  fontWeight: \"bold\" as const,\n  color: props.block.digitColor,\n  lineHeight: \"1.2\",\n}));\n\nconst labelStyle = computed(() => ({\n  fontSize: `${props.block.labelFontSize}px`,\n  color: props.block.labelColor,\n  marginTop: \"4px\",\n}));\n\nconst separatorStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  color: props.block.digitColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n</script>\n\n<template>\n  <!-- Empty state: no target date -->\n  <div\n    v-if=\"!block.targetDate\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n  >\n    {{ t.countdown.setDate }}\n  </div>\n\n  <!-- Expired + hidden -->\n  <div\n    v-else-if=\"isExpired && block.hideOnExpiry\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50\"\n  >\n    {{ t.countdown.hidden }}\n  </div>\n\n  <!-- Expired with message -->\n  <div\n    v-else-if=\"isExpired\"\n    :style=\"containerStyle\"\n    class=\"tpl:py-4 tpl:text-center\"\n  >\n    <span\n      :style=\"{\n        fontSize: `${block.digitFontSize}px`,\n        color: block.digitColor,\n      }\"\n    >\n      {{ block.expiredMessage }}\n    </span>\n  </div>\n\n  <!-- Active countdown -->\n  <div\n    v-else\n    :style=\"containerStyle\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4\"\n  >\n    <template v-for=\"(segment, index) in segments\" :key=\"segment.label\">\n      <span v-if=\"index > 0\" :style=\"separatorStyle\" class=\"tpl:self-start\">\n        {{ block.separator }}\n      </span>\n      <div class=\"tpl:text-center\">\n        <div :style=\"digitStyle\">{{ segment.value }}</div>\n        <div :style=\"labelStyle\">{{ segment.label }}</div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EASA,IAAM,IAAQ,GAKR,EAAE,SAAM,EAAQ,GAEhB,IAAM,EAAI,KAAK,IAAI,CAAC;EAC1B,QAAoB;GAClB,EAAI,QAAQ,KAAK,IAAI;EACvB,GAAG,GAAI;EAEP,IAAM,IAAa,QAAe;GAChC,IAAI,CAAC,EAAM,MAAM,YAAY,OAAO;GACpC,IAAM,IAAO,IAAI,KAAK,EAAM,MAAM,UAAU;GAC5C,OAAO,MAAM,EAAK,QAAQ,CAAC,IAAI,OAAO,EAAK,QAAQ;EACrD,CAAC,GAEK,IAAY,QACX,EAAW,QACT,EAAI,SAAS,EAAW,QADD,EAE/B,GAEK,IAAY,QAAe;GAC/B,IAAI,CAAC,EAAW,SAAS,EAAU,OACjC,OAAO;IAAE,MAAM;IAAG,OAAO;IAAG,SAAS;IAAG,SAAS;GAAE;GAErD,IAAM,IAAO,EAAW,QAAQ,EAAI,OAC9B,IAAe,KAAK,MAAM,IAAO,GAAI;GAC3C,OAAO;IACL,MAAM,KAAK,MAAM,IAAe,KAAK;IACrC,OAAO,KAAK,MAAO,IAAe,QAAS,IAAI;IAC/C,SAAS,KAAK,MAAO,IAAe,OAAQ,EAAE;IAC9C,SAAS,IAAe;GAC1B;EACF,CAAC,GAEK,IAAW,QAAe;GAC9B,IAAM,IAAkD,CAAC;GAyBzD,OAxBI,EAAM,MAAM,YACd,EAAO,KAAK;IACV,OAAO,OAAO,EAAU,MAAM,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;IACnD,OAAO,EAAM,MAAM;GACrB,CAAC,GAEC,EAAM,MAAM,aACd,EAAO,KAAK;IACV,OAAO,OAAO,EAAU,MAAM,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;IACpD,OAAO,EAAM,MAAM;GACrB,CAAC,GAEC,EAAM,MAAM,eACd,EAAO,KAAK;IACV,OAAO,OAAO,EAAU,MAAM,OAAO,CAAC,CAAC,SAAS,GAAG,GAAG;IACtD,OAAO,EAAM,MAAM;GACrB,CAAC,GAEC,EAAM,MAAM,eACd,EAAO,KAAK;IACV,OAAO,OAAO,EAAU,MAAM,OAAO,CAAC,CAAC,SAAS,GAAG,GAAG;IACtD,OAAO,EAAM,MAAM;GACrB,CAAC,GAEI;EACT,CAAC,GAEK,IAAiB,SAAgB;GACrC,iBAAiB,EAAM,MAAM;GAC7B,YAAY,EAAM,MAAM,cAAc;EACxC,EAAE,GAEI,IAAa,SAAgB;GACjC,UAAU,GAAG,EAAM,MAAM,cAAc;GACvC,YAAY;GACZ,OAAO,EAAM,MAAM;GACnB,YAAY;EACd,EAAE,GAEI,IAAa,SAAgB;GACjC,UAAU,GAAG,EAAM,MAAM,cAAc;GACvC,OAAO,EAAM,MAAM;GACnB,WAAW;EACb,EAAE,GAEI,IAAiB,SAAgB;GACrC,UAAU,GAAG,EAAM,MAAM,cAAc;GACvC,OAAO,EAAM,MAAM;GACnB,YAAY,EAAM,MAAM,cAAc;EACxC,EAAE;mBAMS,EAAA,MAAM,aAQF,EAAA,SAAa,EAAA,MAAM,gBADhC,EAAA,GAAA,EAKM,OALN,GAKM,EADD,EAAA,CAAA,CAAC,CAAC,UAAU,MAAM,GAAA,CAAA,KAKV,EAAA,SADb,EAAA,GAAA,EAaM,OAAA;;GAXH,OAAK,EAAE,EAAA,KAAc;GACtB,OAAM;EAEN,GAAA,CAAA,EAOO,QAAA,EANJ,OAAK,EAAA;GAAyB,UAAA,GAAA,EAAA,MAAM,cAAa;GAAqB,OAAA,EAAA,MAAM;EAK1E,CAAA,EAAA,GAAA,EAAA,EAAA,MAAM,cAAc,GAAA,CAAA,CAAA,GAAA,CAAA,MAK3B,EAAA,GAAA,EAcM,OAAA;;GAZH,OAAK,EAAE,EAAA,KAAc;GACtB,OAAM;EAEN,GAAA,EAAA,EAAA,EAAA,GAAA,EAQW,GAAA,MAAA,EAR0B,EAAA,QAAnB,GAAS,OAA0B,EAAA,GAAA,EAAA,GAAA,EAAA,KAAA,EAAQ,MAAA,GAAA,CAC/C,IAAK,KAAjB,EAAA,GAAA,EAEO,QAAA;;GAFiB,OAAK,EAAE,EAAA,KAAc;GAAE,OAAM;EAChD,GAAA,EAAA,EAAA,MAAM,SAAS,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAEpB,EAGM,OAHN,GAGM,CAFJ,EAAkD,OAAA,EAA5C,OAAK,EAAE,EAAA,KAAU,EAAK,GAAA,EAAA,EAAQ,KAAK,GAAA,CAAA,GACzC,EAAkD,OAAA,EAA5C,OAAK,EAAE,EAAA,KAAU,EAAK,GAAA,EAAA,EAAQ,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,oBA3C/C,EAAA,GAAA,EAKM,OALN,GAKM,EADD,EAAA,CAAA,CAAC,CAAC,UAAU,OAAO,GAAA,CAAA"}
+{"version":3,"file":"CountdownBlock-BTpRd0Hn.js","names":[],"sources":["../../../src/components/blocks/CountdownBlock.vue","../../../src/components/blocks/CountdownBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  CountdownBlock as CountdownBlockType,\n  ViewportSize,\n} from \"@templatical/types\";\nimport { useIntervalFn } from \"@vueuse/core\";\nimport { computed, ref } from \"vue\";\nimport { useI18n } from \"../../composables/useI18n\";\n\nconst props = defineProps<{\n  block: CountdownBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst { t } = useI18n();\n\nconst now = ref(Date.now());\nuseIntervalFn(() => {\n  now.value = Date.now();\n}, 1000);\n\nconst targetTime = computed(() => {\n  if (!props.block.targetDate) return null;\n  const date = new Date(props.block.targetDate);\n  return isNaN(date.getTime()) ? null : date.getTime();\n});\n\nconst isExpired = computed(() => {\n  if (!targetTime.value) return false;\n  return now.value >= targetTime.value;\n});\n\nconst remaining = computed(() => {\n  if (!targetTime.value || isExpired.value) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n  }\n  const diff = targetTime.value - now.value;\n  const totalSeconds = Math.floor(diff / 1000);\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  };\n});\n\nconst segments = computed(() => {\n  const result: Array<{ value: string; label: string }> = [];\n  if (props.block.showDays) {\n    result.push({\n      value: String(remaining.value.days).padStart(2, \"0\"),\n      label: props.block.labelDays,\n    });\n  }\n  if (props.block.showHours) {\n    result.push({\n      value: String(remaining.value.hours).padStart(2, \"0\"),\n      label: props.block.labelHours,\n    });\n  }\n  if (props.block.showMinutes) {\n    result.push({\n      value: String(remaining.value.minutes).padStart(2, \"0\"),\n      label: props.block.labelMinutes,\n    });\n  }\n  if (props.block.showSeconds) {\n    result.push({\n      value: String(remaining.value.seconds).padStart(2, \"0\"),\n      label: props.block.labelSeconds,\n    });\n  }\n  return result;\n});\n\nconst containerStyle = computed(() => ({\n  backgroundColor: props.block.backgroundColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n\nconst digitStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  fontWeight: \"bold\" as const,\n  color: props.block.digitColor,\n  lineHeight: \"1.2\",\n}));\n\nconst labelStyle = computed(() => ({\n  fontSize: `${props.block.labelFontSize}px`,\n  color: props.block.labelColor,\n  marginTop: \"4px\",\n}));\n\nconst separatorStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  color: props.block.digitColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n</script>\n\n<template>\n  <!-- Empty state: no target date -->\n  <div\n    v-if=\"!block.targetDate\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n  >\n    {{ t.countdown.setDate }}\n  </div>\n\n  <!-- Expired + hidden -->\n  <div\n    v-else-if=\"isExpired && block.hideOnExpiry\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50\"\n  >\n    {{ t.countdown.hidden }}\n  </div>\n\n  <!-- Expired with message -->\n  <div\n    v-else-if=\"isExpired\"\n    :style=\"containerStyle\"\n    class=\"tpl:py-4 tpl:text-center\"\n  >\n    <span\n      :style=\"{\n        fontSize: `${block.digitFontSize}px`,\n        color: block.digitColor,\n      }\"\n    >\n      {{ block.expiredMessage }}\n    </span>\n  </div>\n\n  <!-- Active countdown -->\n  <div\n    v-else\n    :style=\"containerStyle\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4\"\n  >\n    <template v-for=\"(segment, index) in segments\" :key=\"segment.label\">\n      <span v-if=\"index > 0\" :style=\"separatorStyle\" class=\"tpl:self-start\">\n        {{ block.separator }}\n      </span>\n      <div class=\"tpl:text-center\">\n        <div :style=\"digitStyle\">{{ segment.value }}</div>\n        <div :style=\"labelStyle\">{{ segment.label }}</div>\n      </div>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type {\n  CountdownBlock as CountdownBlockType,\n  ViewportSize,\n} from \"@templatical/types\";\nimport { useIntervalFn } from \"@vueuse/core\";\nimport { computed, ref } from \"vue\";\nimport { useI18n } from \"../../composables/useI18n\";\n\nconst props = defineProps<{\n  block: CountdownBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst { t } = useI18n();\n\nconst now = ref(Date.now());\nuseIntervalFn(() => {\n  now.value = Date.now();\n}, 1000);\n\nconst targetTime = computed(() => {\n  if (!props.block.targetDate) return null;\n  const date = new Date(props.block.targetDate);\n  return isNaN(date.getTime()) ? null : date.getTime();\n});\n\nconst isExpired = computed(() => {\n  if (!targetTime.value) return false;\n  return now.value >= targetTime.value;\n});\n\nconst remaining = computed(() => {\n  if (!targetTime.value || isExpired.value) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n  }\n  const diff = targetTime.value - now.value;\n  const totalSeconds = Math.floor(diff / 1000);\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  };\n});\n\nconst segments = computed(() => {\n  const result: Array<{ value: string; label: string }> = [];\n  if (props.block.showDays) {\n    result.push({\n      value: String(remaining.value.days).padStart(2, \"0\"),\n      label: props.block.labelDays,\n    });\n  }\n  if (props.block.showHours) {\n    result.push({\n      value: String(remaining.value.hours).padStart(2, \"0\"),\n      label: props.block.labelHours,\n    });\n  }\n  if (props.block.showMinutes) {\n    result.push({\n      value: String(remaining.value.minutes).padStart(2, \"0\"),\n      label: props.block.labelMinutes,\n    });\n  }\n  if (props.block.showSeconds) {\n    result.push({\n      value: String(remaining.value.seconds).padStart(2, \"0\"),\n      label: props.block.labelSeconds,\n    });\n  }\n  return result;\n});\n\nconst containerStyle = computed(() => ({\n  backgroundColor: props.block.backgroundColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n\nconst digitStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  fontWeight: \"bold\" as const,\n  color: props.block.digitColor,\n  lineHeight: \"1.2\",\n}));\n\nconst labelStyle = computed(() => ({\n  fontSize: `${props.block.labelFontSize}px`,\n  color: props.block.labelColor,\n  marginTop: \"4px\",\n}));\n\nconst separatorStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  color: props.block.digitColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n</script>\n\n<template>\n  <!-- Empty state: no target date -->\n  <div\n    v-if=\"!block.targetDate\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n  >\n    {{ t.countdown.setDate }}\n  </div>\n\n  <!-- Expired + hidden -->\n  <div\n    v-else-if=\"isExpired && block.hideOnExpiry\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50\"\n  >\n    {{ t.countdown.hidden }}\n  </div>\n\n  <!-- Expired with message -->\n  <div\n    v-else-if=\"isExpired\"\n    :style=\"containerStyle\"\n    class=\"tpl:py-4 tpl:text-center\"\n  >\n    <span\n      :style=\"{\n        fontSize: `${block.digitFontSize}px`,\n        color: block.digitColor,\n      }\"\n    >\n      {{ block.expiredMessage }}\n    </span>\n  </div>\n\n  <!-- Active countdown -->\n  <div\n    v-else\n    :style=\"containerStyle\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4\"\n  >\n    <template v-for=\"(segment, index) in segments\" :key=\"segment.label\">\n      <span v-if=\"index > 0\" :style=\"separatorStyle\" class=\"tpl:self-start\">\n        {{ block.separator }}\n      </span>\n      <div class=\"tpl:text-center\">\n        <div :style=\"digitStyle\">{{ segment.value }}</div>\n        <div :style=\"labelStyle\">{{ segment.label }}</div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}