@templatical/editor 0.39.1 → 0.39.3

package/dist/cdn/chunks/{CollaboratorBar-DgqcaGGI.js → CollaboratorBar-B8ttqAqX.js}

@@ -1,5 +1,5 @@
 import { F as e, N as t, S as n, at as r, f as i, g as a, h as o, lt as s, m as c, p as l, u, ut as d } from "./draggable-IB4x6w2O.js";
-import "./useEditorCore-BHmIp1hW.js";
+import "./useEditorCore-CXYI14ux.js";
 import { a as f, i as p } from "./icons-BKkJ-5xF.js";
 import { n as m } from "./useCloudI18n-C09JcFS0.js";
 import { t as h } from "./readableTextColor-f8Kykfnh.js";
@@ -20,7 +20,7 @@ var g = { class: "tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2" }, _
 			return t.length >= 2 ? (t[0].charAt(0) + t[t.length - 1].charAt(0)).toUpperCase() : e.charAt(0).toUpperCase();
 		}
 		return (i, m) => (t(), a("div", g, [l("div", {
-			class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-[11px]",
+			class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-xs",
 			style: s({ color: n.isConnected ? "var(--tpl-success)" : "var(--tpl-text-muted)" }),
 			title: n.isConnected ? r(C).collaboration.connected : r(C).collaboration.disconnected
 		}, [n.isConnected ? (t(), c(r(p), {
@@ -41,7 +41,7 @@ var g = { class: "tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2" }, _
 			title: e.name
 		}, d(O(e.name)), 13, y))), 128)), E.value > 0 ? (t(), a("div", {
 			key: 0,
-			class: "tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[9px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]",
+			class: "tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]",
 			title: D.value
 		}, " +" + d(E.value), 9, b)) : o("", !0)])) : o("", !0)]));
 	}
@@ -49,4 +49,4 @@ var g = { class: "tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2" }, _
 //#endregion
 export { S as default };
 
-//# sourceMappingURL=CollaboratorBar-DgqcaGGI.js.map
+//# sourceMappingURL=CollaboratorBar-B8ttqAqX.js.map

package/dist/cdn/chunks/CollaboratorBar-B8ttqAqX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollaboratorBar-B8ttqAqX.js","names":[],"sources":["../../../src/cloud/components/CollaboratorBar.vue","../../../src/cloud/components/CollaboratorBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Collaborator } from \"@templatical/types\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { Wifi, WifiOff } from \"@lucide/vue\";\nimport { computed } from \"vue\";\nimport { readableTextColor } from \"../../utils/readableTextColor\";\n\nconst props = defineProps<{\n  collaborators: Collaborator[];\n  isConnected: boolean;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst maxVisible = 3;\n\nconst visibleCollaborators = computed(() =>\n  props.collaborators.slice(0, maxVisible),\n);\n\nconst overflowCollaborators = computed(() =>\n  props.collaborators.slice(maxVisible),\n);\n\nconst overflowCount = computed(() => overflowCollaborators.value.length);\n\nconst overflowNames = computed(() =>\n  overflowCollaborators.value.map((c) => c.name).join(\"\\n\"),\n);\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length >= 2) {\n    return (\n      parts[0].charAt(0) + parts[parts.length - 1].charAt(0)\n    ).toUpperCase();\n  }\n  return name.charAt(0).toUpperCase();\n}\n</script>\n\n<template>\n  <div class=\"tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2\">\n    <!-- Connection indicator -->\n    <div\n      class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:text-xs\"\n      :style=\"{\n        color: isConnected ? 'var(--tpl-success)' : 'var(--tpl-text-muted)',\n      }\"\n      :title=\"\n        isConnected\n          ? cloudT.collaboration.connected\n          : cloudT.collaboration.disconnected\n      \"\n    >\n      <Wifi v-if=\"isConnected\" :size=\"12\" :stroke-width=\"2\" />\n      <WifiOff v-else :size=\"12\" :stroke-width=\"2\" />\n    </div>\n\n    <!-- Avatar stack -->\n    <div\n      v-if=\"collaborators.length > 0\"\n      class=\"tpl:flex tpl:items-center tpl:-space-x-1.5\"\n    >\n      <div\n        v-for=\"collaborator in visibleCollaborators\"\n        :key=\"collaborator.id\"\n        class=\"tpl-collaborator-avatar tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:transition-transform tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]\"\n        :style=\"{\n          backgroundColor: collaborator.color,\n          color: readableTextColor(collaborator.color),\n        }\"\n        :title=\"collaborator.name\"\n      >\n        {{ getInitials(collaborator.name) }}\n      </div>\n      <div\n        v-if=\"overflowCount > 0\"\n        class=\"tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"overflowNames\"\n      >\n        +{{ overflowCount }}\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Collaborator } from \"@templatical/types\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { Wifi, WifiOff } from \"@lucide/vue\";\nimport { computed } from \"vue\";\nimport { readableTextColor } from \"../../utils/readableTextColor\";\n\nconst props = defineProps<{\n  collaborators: Collaborator[];\n  isConnected: boolean;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst maxVisible = 3;\n\nconst visibleCollaborators = computed(() =>\n  props.collaborators.slice(0, maxVisible),\n);\n\nconst overflowCollaborators = computed(() =>\n  props.collaborators.slice(maxVisible),\n);\n\nconst overflowCount = computed(() => overflowCollaborators.value.length);\n\nconst overflowNames = computed(() =>\n  overflowCollaborators.value.map((c) => c.name).join(\"\\n\"),\n);\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length >= 2) {\n    return (\n      parts[0].charAt(0) + parts[parts.length - 1].charAt(0)\n    ).toUpperCase();\n  }\n  return name.charAt(0).toUpperCase();\n}\n</script>\n\n<template>\n  <div class=\"tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2\">\n    <!-- Connection indicator -->\n    <div\n      class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:text-xs\"\n      :style=\"{\n        color: isConnected ? 'var(--tpl-success)' : 'var(--tpl-text-muted)',\n      }\"\n      :title=\"\n        isConnected\n          ? cloudT.collaboration.connected\n          : cloudT.collaboration.disconnected\n      \"\n    >\n      <Wifi v-if=\"isConnected\" :size=\"12\" :stroke-width=\"2\" />\n      <WifiOff v-else :size=\"12\" :stroke-width=\"2\" />\n    </div>\n\n    <!-- Avatar stack -->\n    <div\n      v-if=\"collaborators.length > 0\"\n      class=\"tpl:flex tpl:items-center tpl:-space-x-1.5\"\n    >\n      <div\n        v-for=\"collaborator in visibleCollaborators\"\n        :key=\"collaborator.id\"\n        class=\"tpl-collaborator-avatar tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:transition-transform tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]\"\n        :style=\"{\n          backgroundColor: collaborator.color,\n          color: readableTextColor(collaborator.color),\n        }\"\n        :title=\"collaborator.name\"\n      >\n        {{ getInitials(collaborator.name) }}\n      </div>\n      <div\n        v-if=\"overflowCount > 0\"\n        class=\"tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"overflowNames\"\n      >\n        +{{ overflowCount }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;iCAcM,IAAa;;;;;;;EAPnB,IAAM,IAAQ,GAKR,EAAE,GAAG,MAAW,EAAmB,GAInC,IAAuB,QAC3B,EAAM,cAAc,MAAM,GAAG,CAAU,CACzC,GAEM,IAAwB,QAC5B,EAAM,cAAc,MAAM,CAAU,CACtC,GAEM,IAAgB,QAAe,EAAsB,MAAM,MAAM,GAEjE,IAAgB,QACpB,EAAsB,MAAM,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI,CAC1D;EAEA,SAAS,EAAY,GAAsB;GACzC,IAAM,IAAQ,EAAK,KAAK,CAAC,CAAC,MAAM,KAAK;GAMrC,OALI,EAAM,UAAU,KAEhB,EAAM,EAAE,CAAC,OAAO,CAAC,IAAI,EAAM,EAAM,SAAS,EAAE,CAAC,OAAO,CAAC,EAAA,CACrD,YAAY,IAET,EAAK,OAAO,CAAC,CAAC,CAAC,YAAY;EACpC;oBAIE,EAAA,GAAA,EA0CM,OA1CN,GA0CM,CAxCJ,EAaM,OAAA;GAZJ,OAAM;GACL,OAAK,EAAA,EAAmB,OAAA,EAAA,cAAW,uBAAA,wBAAA,CAAA;GAGnC,OAAgB,EAAA,cAAwB,EAAA,CAAA,CAAM,CAAC,cAAc,YAAsB,EAAA,CAAA,CAAM,CAAC,cAAc;EAM7F,GAAA,CAAA,EAAA,eAAZ,EAAA,GAAA,EAAwD,EAAA,CAAA,GAAA;;GAA9B,MAAM;GAAK,gBAAc;EACnD,CAAA,MAAA,EAAA,GAAA,EAA+C,EAAA,CAAA,GAAA;;GAA9B,MAAM;GAAK,gBAAc;EAKpC,CAAA,EAAA,GAAA,IAAA,CAAA,GAAA,EAAA,cAAc,SAAM,KAD5B,EAAA,GAAA,EAuBM,OAvBN,GAuBM,EAnBJ,EAAA,EAAA,GAAA,EAWM,GAAA,MAAA,EAVmB,EAAA,QAAhB,OADT,EAAA,GAAA,EAWM,OAAA;GATH,KAAK,EAAa;GACnB,OAAM;GACL,OAAK,EAAA;IAA+B,iBAAA,EAAa;IAAwB,OAAA,EAAA,CAAA,CAAiB,CAAC,EAAa,KAAK;;GAI7G,OAAO,EAAa;EAElB,GAAA,EAAA,EAAY,EAAa,IAAI,CAAA,GAAA,IAAA,CAAA,EAG1B,GAAA,GAAA,IAAA,EAAA,QAAa,KADrB,EAAA,GAAA,EAMM,OAAA;;GAJJ,OAAM;GACL,OAAO,EAAA;EACT,GAAA,OACE,EAAG,EAAA,KAAa,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/cdn/chunks/{CommentsPanel-Cy4TlTHC.js → CommentsPanel-C8ibhaiK.js}

@@ -5,7 +5,7 @@ var o = /* @__PURE__ */ t({
 	__name: "CommentsPanel",
 	props: { feature: {} },
 	setup(t) {
-		let o = a(() => import("./CommentsSidebar-C7oAP3Mx.js"));
+		let o = a(() => import("./CommentsSidebar-CybWfZ3V.js"));
 		return (a, s) => t.feature.isOpen.value ? (e(), i(n(o), {
 			key: 0,
 			visible: t.feature.isOpen.value,
@@ -17,4 +17,4 @@ var o = /* @__PURE__ */ t({
 //#endregion
 export { o as default };
 
-//# sourceMappingURL=CommentsPanel-Cy4TlTHC.js.map
+//# sourceMappingURL=CommentsPanel-C8ibhaiK.js.map

package/dist/cdn/chunks/{CommentsPanel-Cy4TlTHC.js.map → CommentsPanel-C8ibhaiK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CommentsPanel-Cy4TlTHC.js","names":[],"sources":["../../../src/components/CommentsPanel.vue","../../../src/components/CommentsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Mount point for the comments sidebar, shared by both entry points.\n *\n * The sidebar is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens the panel. `Editor.vue` in\n * turn lazy-loads *this* wrapper and renders it only when a `CommentsProvider` and\n * a `user` are configured, so a consumer with neither downloads none of it —\n * the `TestEmailPanel` / `SavedBlocksPanels` shape.\n *\n * Never static-import `CommentsSidebar` into `Editor.vue`: that collapses the\n * whole panel into the main entry for every consumer. Guarded by\n * `tests/cdn-chunk-granularity.test.ts`.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseCommentsFeatureReturn } from \"../composables/useCommentsFeature\";\n\ndefineProps<{\n  feature: UseCommentsFeatureReturn;\n}>();\n\nconst CommentsSidebar = defineAsyncComponent(\n  () => import(\"./CommentsSidebar.vue\"),\n);\n</script>\n\n<template>\n  <CommentsSidebar\n    v-if=\"feature.isOpen.value\"\n    :visible=\"feature.isOpen.value\"\n    :feature=\"feature\"\n    @close=\"feature.close()\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Mount point for the comments sidebar, shared by both entry points.\n *\n * The sidebar is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens the panel. `Editor.vue` in\n * turn lazy-loads *this* wrapper and renders it only when a `CommentsProvider` and\n * a `user` are configured, so a consumer with neither downloads none of it —\n * the `TestEmailPanel` / `SavedBlocksPanels` shape.\n *\n * Never static-import `CommentsSidebar` into `Editor.vue`: that collapses the\n * whole panel into the main entry for every consumer. Guarded by\n * `tests/cdn-chunk-granularity.test.ts`.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseCommentsFeatureReturn } from \"../composables/useCommentsFeature\";\n\ndefineProps<{\n  feature: UseCommentsFeatureReturn;\n}>();\n\nconst CommentsSidebar = defineAsyncComponent(\n  () => import(\"./CommentsSidebar.vue\"),\n);\n</script>\n\n<template>\n  <CommentsSidebar\n    v-if=\"feature.isOpen.value\"\n    :visible=\"feature.isOpen.value\"\n    :feature=\"feature\"\n    @close=\"feature.close()\"\n  />\n</template>\n"],"mappings":";;;;;;;EAqBA,IAAM,IAAkB,QAChB,OAAO,gCACf;mBAKU,EAAA,QAAQ,OAAO,SADvB,EAAA,GAAA,EAKE,EAAA,CAAA,GAAA;;GAHC,SAAS,EAAA,QAAQ,OAAO;GACxB,SAAS,EAAA;GACT,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,MAAK"}
+{"version":3,"file":"CommentsPanel-C8ibhaiK.js","names":[],"sources":["../../../src/components/CommentsPanel.vue","../../../src/components/CommentsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Mount point for the comments sidebar, shared by both entry points.\n *\n * The sidebar is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens the panel. `Editor.vue` in\n * turn lazy-loads *this* wrapper and renders it only when a `CommentsProvider` and\n * a `user` are configured, so a consumer with neither downloads none of it —\n * the `TestEmailPanel` / `SavedBlocksPanels` shape.\n *\n * Never static-import `CommentsSidebar` into `Editor.vue`: that collapses the\n * whole panel into the main entry for every consumer. Guarded by\n * `tests/cdn-chunk-granularity.test.ts`.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseCommentsFeatureReturn } from \"../composables/useCommentsFeature\";\n\ndefineProps<{\n  feature: UseCommentsFeatureReturn;\n}>();\n\nconst CommentsSidebar = defineAsyncComponent(\n  () => import(\"./CommentsSidebar.vue\"),\n);\n</script>\n\n<template>\n  <CommentsSidebar\n    v-if=\"feature.isOpen.value\"\n    :visible=\"feature.isOpen.value\"\n    :feature=\"feature\"\n    @close=\"feature.close()\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Mount point for the comments sidebar, shared by both entry points.\n *\n * The sidebar is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens the panel. `Editor.vue` in\n * turn lazy-loads *this* wrapper and renders it only when a `CommentsProvider` and\n * a `user` are configured, so a consumer with neither downloads none of it —\n * the `TestEmailPanel` / `SavedBlocksPanels` shape.\n *\n * Never static-import `CommentsSidebar` into `Editor.vue`: that collapses the\n * whole panel into the main entry for every consumer. Guarded by\n * `tests/cdn-chunk-granularity.test.ts`.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseCommentsFeatureReturn } from \"../composables/useCommentsFeature\";\n\ndefineProps<{\n  feature: UseCommentsFeatureReturn;\n}>();\n\nconst CommentsSidebar = defineAsyncComponent(\n  () => import(\"./CommentsSidebar.vue\"),\n);\n</script>\n\n<template>\n  <CommentsSidebar\n    v-if=\"feature.isOpen.value\"\n    :visible=\"feature.isOpen.value\"\n    :feature=\"feature\"\n    @close=\"feature.close()\"\n  />\n</template>\n"],"mappings":";;;;;;;EAqBA,IAAM,IAAkB,QAChB,OAAO,gCACf;mBAKU,EAAA,QAAQ,OAAO,SADvB,EAAA,GAAA,EAKE,EAAA,CAAA,GAAA;;GAHC,SAAS,EAAA,QAAQ,OAAO;GACxB,SAAS,EAAA;GACT,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,MAAK"}

package/dist/cdn/chunks/{CommentsSidebar-C7oAP3Mx.js → CommentsSidebar-CybWfZ3V.js}

@@ -5,71 +5,67 @@ import { It as oe, K as y, L as se, Lt as ce, M as b, Nt as le, d as x, it as S,
 import { t as T } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as de } from "./formatRelativeTime-CtUU-QZ8.js";
 //#region src/components/CommentsSidebar.vue?vue&type=script&setup=true&lang.ts
-var fe = {
-	key: 0,
-	"data-testid": "comments-sidebar",
-	class: "tpl-comments-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]"
-}, pe = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, me = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]" }, he = {
+var fe = ["aria-label"], pe = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, me = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]" }, he = {
 	key: 0,
 	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-on-primary)]"
-}, ge = { class: "tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-2" }, _e = { class: "tpl:flex-1 tpl:overflow-y-auto" }, ve = {
+}, ge = ["aria-label"], _e = { class: "tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-2" }, ve = ["aria-pressed"], ye = ["aria-pressed"], be = ["aria-pressed"], xe = { class: "tpl:flex-1 tpl:overflow-y-auto" }, Se = {
 	key: 0,
 	class: "tpl:flex tpl:h-full tpl:items-center tpl:justify-center"
-}, ye = {
+}, Ce = {
 	key: 1,
 	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:px-6 tpl:text-center"
-}, be = { class: "tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, xe = {
+}, we = { class: "tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, Te = {
 	key: 2,
 	class: "tpl:flex tpl:flex-col tpl:gap-3 tpl:p-3"
-}, Se = { class: "tpl-comment-card tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-3" }, Ce = { class: "tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, we = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, Te = { class: "tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Ee = { class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, De = {
+}, Ee = { class: "tpl-comment-card tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-3" }, De = { class: "tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, Oe = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, ke = { class: "tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Ae = { class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, je = {
 	key: 0,
 	class: "tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]"
-}, Oe = { class: "tpl:flex tpl:items-center tpl:gap-0.5" }, ke = ["title", "onClick"], Ae = ["title", "onClick"], je = ["title", "onClick"], Me = {
+}, Me = { class: "tpl:flex tpl:items-center tpl:gap-0.5" }, Ne = ["title", "onClick"], Pe = ["title", "onClick"], Fe = ["title", "onClick"], Ie = {
 	key: 0,
 	class: "tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1 tpl:text-[10px] tpl:text-[var(--tpl-primary)]"
-}, Ne = {
+}, Le = {
 	key: 0,
 	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)]"
-}, Pe = ["onClick"], Fe = {
+}, Re = ["onClick"], ze = {
 	key: 2,
 	class: "tpl:mt-2"
-}, Ie = ["onKeydown"], Le = { class: "tpl:mt-1.5 tpl:flex tpl:gap-1.5" }, Re = ["disabled", "onClick"], ze = {
+}, Be = ["onKeydown"], Ve = { class: "tpl:mt-1.5 tpl:flex tpl:gap-1.5" }, He = ["disabled", "onClick"], Ue = {
 	key: 3,
 	class: "tpl:mt-1.5 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]"
-}, Be = {
+}, We = {
 	key: 4,
 	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)]"
-}, Ve = { class: "tpl:flex-1" }, He = ["onClick"], Ue = {
+}, Ge = { class: "tpl:flex-1" }, Ke = ["onClick"], qe = {
 	key: 5,
 	class: "tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2"
-}, We = ["title", "onClick"], Ge = ["onClick"], Ke = {
+}, Je = ["title", "onClick"], Ye = ["onClick"], Xe = {
 	key: 0,
 	class: "tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2"
-}, qe = { class: "tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, Je = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, Ye = { class: "tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Xe = { class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, Ze = {
+}, Ze = { class: "tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, Qe = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, $e = { class: "tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, et = { class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, tt = {
 	key: 0,
 	class: "tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]"
-}, Qe = { class: "tpl:flex tpl:items-center tpl:gap-0.5" }, $e = ["title", "onClick"], et = ["title", "onClick"], tt = {
+}, nt = { class: "tpl:flex tpl:items-center tpl:gap-0.5" }, rt = ["title", "onClick"], it = ["title", "onClick"], at = {
 	key: 0,
 	class: "tpl:mt-1.5"
-}, nt = ["onKeydown"], rt = { class: "tpl:mt-1.5 tpl:flex tpl:gap-1.5" }, it = ["disabled", "onClick"], at = {
+}, ot = ["onKeydown"], st = { class: "tpl:mt-1.5 tpl:flex tpl:gap-1.5" }, ct = ["disabled", "onClick"], lt = {
 	key: 1,
 	class: "tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]"
-}, ot = {
+}, ut = {
 	key: 2,
 	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)]"
-}, st = { class: "tpl:flex-1" }, ct = ["onClick"], lt = {
+}, dt = { class: "tpl:flex-1" }, ft = ["onClick"], pt = {
 	key: 0,
 	class: "tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2"
-}, ut = { class: "tpl-comments-input-wrapper tpl-focus-ring-host tpl:flex 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)]" }, dt = ["placeholder", "onKeydown"], ft = ["disabled", "onClick"], pt = {
+}, mt = { class: "tpl-comments-input-wrapper tpl-focus-ring-host tpl:flex 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)]" }, ht = ["placeholder", "onKeydown"], gt = ["disabled", "onClick"], _t = {
 	key: 0,
 	class: "tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]"
-}, mt = {
+}, vt = {
 	key: 0,
 	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)]"
-}, ht = {
+}, yt = {
 	key: 1,
 	class: "tpl-comments-input-wrapper tpl-focus-ring-host 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)]"
-}, gt = ["placeholder", "disabled"], _t = ["disabled"], E = /*#__PURE__*/ T(/* @__PURE__ */ a({
+}, bt = ["placeholder", "disabled"], xt = ["disabled"], E = /*#__PURE__*/ T(/* @__PURE__ */ a({
 	__name: "CommentsSidebar",
 	props: {
 		visible: { type: Boolean },
@@ -77,19 +73,19 @@ var fe = {
 	},
 	emits: ["close"],
 	setup(a, { expose: T, emit: E }) {
-		let D = a, vt = E, { t: O, format: k } = ae(), A = re(ie, "CommentsSidebar"), j = u(() => D.feature.headless), M = i("unresolved"), N = i(""), P = i(null), F = i(""), I = i(null), L = i(""), R = i(/* @__PURE__ */ new Set()), z = i(null), B = i(null), V = u(() => D.feature.filterBlockId.value);
+		let D = a, St = E, { t: O, format: k } = ae(), A = re(ie, "CommentsSidebar"), j = u(() => D.feature.headless), M = i("unresolved"), N = i(""), P = i(null), F = i(""), I = i(null), L = i(""), R = i(/* @__PURE__ */ new Set()), z = i(null), B = i(null), V = u(() => D.feature.filterBlockId.value);
 		e(V, (e) => {
 			e && (M.value = "block");
 		}, { immediate: !0 });
-		let yt = u(() => j.value.isLoading.value && j.value.comments.value.length === 0), bt = u(() => {
+		let Ct = u(() => j.value.isLoading.value && j.value.comments.value.length === 0), wt = u(() => {
 			let e = /* @__PURE__ */ new Set();
 			for (let t of A.content.value.blocks) if (e.add(t.id), t.type === "section") for (let n of t.children) for (let t of n) e.add(t.id);
 			return e;
 		});
-		function xt(e) {
-			return e ? !bt.value.has(e) : !1;
+		function Tt(e) {
+			return e ? !wt.value.has(e) : !1;
 		}
-		let St = u(() => M.value !== "block" || !V.value ? !1 : D.feature.capability.isBlockSaved(V.value) === !1), H = u(() => {
+		let Et = u(() => M.value !== "block" || !V.value ? !1 : D.feature.capability.isBlockSaved(V.value) === !1), H = u(() => {
 			let e = j.value.comments.value;
 			return M.value === "unresolved" ? e = e.filter((e) => !e.resolvedAt) : M.value === "block" && V.value && (e = e.filter((e) => e.blockId === V.value)), e;
 		});
@@ -99,16 +95,16 @@ var fe = {
 		function U(e, t) {
 			M.value = e, D.feature.filterBlockId.value = e === "block" ? t ?? null : null;
 		}
-		function Ct(e) {
+		function Dt(e) {
 			U("block", e);
 		}
-		function wt(e) {
+		function Ot(e) {
 			R.value.has(e) ? R.value.delete(e) : R.value.add(e);
 		}
-		function Tt(e) {
+		function kt(e) {
 			P.value = e, F.value = "", I.value = null, R.value.has(e) || R.value.add(e);
 		}
-		function Et() {
+		function At() {
 			P.value = null, F.value = "";
 		}
 		function W(e) {
@@ -158,7 +154,7 @@ var fe = {
 			} catch {}
 			z.value = null;
 		}
-		async function Dt(e) {
+		async function jt(e) {
 			try {
 				await j.value.setResolved(e.id, !e.resolvedAt);
 			} catch {}
@@ -166,29 +162,29 @@ var fe = {
 		function Q(e) {
 			return j.value.canUpdate.value && j.value.isOwn(e);
 		}
-		function Ot(e) {
+		function Mt(e) {
 			return j.value.canDelete.value && j.value.isOwn(e);
 		}
-		function kt(e) {
+		function Nt(e) {
 			return de(e, O.time) ?? e;
 		}
-		function At(e) {
+		function Pt(e) {
 			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), J());
 		}
-		function jt(e, t) {
+		function Ft(e, t) {
 			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Y(t));
 		}
 		function $(e, t) {
 			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), X(t)), e.key === "Escape" && G();
 		}
-		function Mt() {
+		function It() {
 			ee(() => {
 				B.value?.focus();
 			});
 		}
 		return T({
-			filterByBlock: Ct,
-			focusNewComment: Mt
+			filterByBlock: Dt,
+			focusNewComment: It
 		}), (e, i) => (r(), p(m, {
 			"enter-active-class": "tpl-comments-slide-enter-active",
 			"enter-from-class": "tpl:translate-x-full",
@@ -197,7 +193,13 @@ var fe = {
 			"leave-from-class": "tpl:translate-x-0",
 			"leave-to-class": "tpl:translate-x-full"
 		}, {
-			default: n(() => [a.visible ? (r(), d("div", fe, [
+			default: n(() => [a.visible ? (r(), d("div", {
+				key: 0,
+				role: "complementary",
+				"aria-label": s(O).comments.title,
+				"data-testid": "comments-sidebar",
+				class: "tpl-comments-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]"
+			}, [
 				g("div", pe, [g("div", me, [
 					c(s(w), {
 						size: 13,
@@ -206,60 +208,68 @@ var fe = {
 					g("span", null, v(s(O).comments.title), 1),
 					a.feature.unresolvedCount.value > 0 ? (r(), d("span", he, v(a.feature.unresolvedCount.value), 1)) : f("", !0)
 				]), g("button", {
+					type: "button",
 					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
-					onClick: i[0] ||= (e) => vt("close")
+					"aria-label": s(O).comments.close,
+					onClick: i[0] ||= (e) => St("close")
 				}, [c(s(C), {
 					size: 14,
 					"stroke-width": 2
-				})])]),
-				g("div", ge, [
+				})], 8, ge)]),
+				g("div", _e, [
 					g("button", {
+						type: "button",
 						class: l(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors", M.value === "unresolved" ? "tpl-comment-filter--active" : ""]),
+						"aria-pressed": M.value === "unresolved",
 						"data-testid": "comments-filter-unresolved",
 						onClick: i[1] ||= (e) => U("unresolved")
-					}, v(s(O).comments.filterUnresolved), 3),
+					}, v(s(O).comments.filterUnresolved), 11, ve),
 					g("button", {
+						type: "button",
 						class: l(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors", M.value === "all" ? "tpl-comment-filter--active" : ""]),
+						"aria-pressed": M.value === "all",
 						"data-testid": "comments-filter-all",
 						onClick: i[2] ||= (e) => U("all")
-					}, v(s(O).comments.filterAll), 3),
+					}, v(s(O).comments.filterAll), 11, ye),
 					s(A).state.selectedBlockId ? (r(), d("button", {
 						key: 0,
+						type: "button",
 						class: l(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors", M.value === "block" ? "tpl-comment-filter--active" : ""]),
+						"aria-pressed": M.value === "block",
 						onClick: i[3] ||= (e) => U("block", s(A).state.selectedBlockId ?? void 0)
-					}, v(s(O).comments.filterBlock), 3)) : f("", !0)
+					}, v(s(O).comments.filterBlock), 11, be)) : f("", !0)
 				]),
-				g("div", _e, [yt.value ? (r(), d("div", ve, [c(s(S), {
+				g("div", xe, [Ct.value ? (r(), d("div", Se, [c(s(S), {
 					class: "tpl-spinner tpl:text-[var(--tpl-text-muted)]",
 					size: 24,
 					"stroke-width": 2
-				})])) : H.value.length === 0 ? (r(), d("div", ye, [c(s(w), {
+				})])) : H.value.length === 0 ? (r(), d("div", Ce, [c(s(w), {
 					size: 32,
 					"stroke-width": 1.5,
 					class: "tpl:text-[var(--tpl-text-dim)]"
-				}), g("p", be, v(M.value === "all" ? s(O).comments.noCommentsHint : s(O).comments.noComments), 1)])) : (r(), d("div", xe, [(r(!0), d(_, null, t(H.value, (e) => (r(), d("div", {
+				}), g("p", we, v(M.value === "all" ? s(O).comments.noCommentsHint : s(O).comments.noComments), 1)])) : (r(), d("div", Te, [(r(!0), d(_, null, t(H.value, (e) => (r(), d("div", {
 					key: e.id,
 					class: "tpl-comment-thread",
 					"data-testid": "comment-thread"
 				}, [
-					g("div", Se, [
-						g("div", Ce, [g("div", we, [
-							g("span", Te, v(j.value.isOwn(e) ? s(O).comments.ownedByYou : e.author.name), 1),
-							g("span", Ee, v(kt(e.createdAt)), 1),
-							e.updatedAt ? (r(), d("span", De, " (" + v(s(O).comments.edited) + ") ", 1)) : f("", !0)
-						]), g("div", Oe, [
+					g("div", Ee, [
+						g("div", De, [g("div", Oe, [
+							g("span", ke, v(j.value.isOwn(e) ? s(O).comments.ownedByYou : e.author.name), 1),
+							g("span", Ae, v(Nt(e.createdAt)), 1),
+							e.updatedAt ? (r(), d("span", je, " (" + v(s(O).comments.edited) + ") ", 1)) : f("", !0)
+						]), g("div", Me, [
 							j.value.canResolve.value ? (r(), d("button", {
 								key: 0,
 								"data-testid": "comment-resolve",
 								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
 								title: e.resolvedAt ? s(O).comments.unresolve : s(O).comments.resolve,
-								onClick: (t) => Dt(e)
+								onClick: (t) => jt(e)
 							}, [c(s(ue), {
 								size: 13,
 								"stroke-width": 2,
 								class: "tpl-resolve-icon",
 								style: te({ color: e.resolvedAt ? "var(--tpl-primary)" : void 0 })
-							}, null, 8, ["style"])], 8, ke)) : f("", !0),
+							}, null, 8, ["style"])], 8, Ne)) : f("", !0),
 							Q(e) ? (r(), d("button", {
 								key: 1,
 								"data-testid": "comment-edit",
@@ -269,8 +279,8 @@ var fe = {
 							}, [c(s(y), {
 								size: 12,
 								"stroke-width": 2
-							})], 8, Ae)) : f("", !0),
-							Ot(e) ? (r(), d("button", {
+							})], 8, Pe)) : f("", !0),
+							Mt(e) ? (r(), d("button", {
 								key: 2,
 								"data-testid": "comment-delete",
 								class: "tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors",
@@ -279,59 +289,59 @@ var fe = {
 							}, [c(s(x), {
 								size: 12,
 								"stroke-width": 2
-							})], 8, je)) : f("", !0)
+							})], 8, Fe)) : f("", !0)
 						])]),
 						c(m, { name: "tpl-resolve" }, {
-							default: n(() => [e.resolvedAt ? (r(), d("div", Me, [c(s(ce), {
+							default: n(() => [e.resolvedAt ? (r(), d("div", Ie, [c(s(ce), {
 								size: 10,
 								"stroke-width": 2.5
 							}), g("span", null, v(s(k)(s(O).comments.resolvedBy, { name: e.resolvedBy?.name ?? "" })), 1)])) : f("", !0)]),
 							_: 2
 						}, 1024),
-						e.blockId && xt(e.blockId) ? (r(), d("span", Ne, v(s(O).comments.missingBlock), 1)) : e.blockId ? (r(), d("button", {
+						e.blockId && Tt(e.blockId) ? (r(), d("span", Le, v(s(O).comments.missingBlock), 1)) : e.blockId ? (r(), d("button", {
 							key: 1,
 							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:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]",
 							onClick: (t) => s(A).selectBlock(e.blockId ?? "")
-						}, v(s(O).comments.jumpToBlock), 9, Pe)) : f("", !0),
-						I.value === e.id ? (r(), d("div", Fe, [o(g("textarea", {
+						}, v(s(O).comments.jumpToBlock), 9, Re)) : f("", !0),
+						I.value === e.id ? (r(), d("div", ze, [o(g("textarea", {
 							"onUpdate:modelValue": i[4] ||= (e) => L.value = e,
-							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)]",
+							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)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)]",
 							rows: "3",
 							onKeydown: (t) => $(t, e.id)
-						}, null, 40, Ie), [[h, L.value]]), g("div", Le, [g("button", {
+						}, null, 40, Be), [[h, L.value]]), g("div", Ve, [g("button", {
 							class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]",
 							disabled: !L.value.trim() || j.value.isSubmitting.value,
 							onClick: (t) => X(e.id)
-						}, v(s(O).comments.save), 9, Re), g("button", {
+						}, v(s(O).comments.save), 9, He), g("button", {
 							class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
 							onClick: i[5] ||= (e) => G()
-						}, v(s(O).comments.cancel), 1)])])) : (r(), d("p", ze, v(e.body), 1)),
-						z.value === e.id ? (r(), d("div", Be, [
-							g("span", Ve, v(s(O).comments.deleteConfirm), 1),
+						}, v(s(O).comments.cancel), 1)])])) : (r(), d("p", Ue, v(e.body), 1)),
+						z.value === e.id ? (r(), d("div", We, [
+							g("span", Ge, v(s(O).comments.deleteConfirm), 1),
 							g("button", {
 								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)]",
 								"data-testid": "comment-delete-confirm",
 								onClick: (t) => Z(e.id)
-							}, v(s(O).comments.delete), 9, He),
+							}, v(s(O).comments.delete), 9, Ke),
 							g("button", {
 								class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
 								onClick: i[6] ||= (e) => q()
 							}, v(s(O).comments.cancel), 1)
 						])) : f("", !0),
-						I.value !== e.id && z.value !== e.id ? (r(), d("div", Ue, [j.value.canCreate.value ? (r(), d("button", {
+						I.value !== e.id && z.value !== e.id ? (r(), d("div", qe, [j.value.canCreate.value ? (r(), d("button", {
 							key: 0,
 							"data-testid": "comment-reply",
 							class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
 							title: s(O).comments.reply,
-							onClick: (t) => Tt(e.id)
+							onClick: (t) => kt(e.id)
 						}, [c(s(se), {
 							size: 13,
 							"stroke-width": 2,
 							class: "tpl:text-[var(--tpl-primary)]"
-						})], 8, We)) : f("", !0), (e.replies?.length ?? 0) > 0 ? (r(), d("button", {
+						})], 8, Je)) : f("", !0), (e.replies?.length ?? 0) > 0 ? (r(), d("button", {
 							key: 1,
-							class: "tpl:flex tpl:items-center tpl:gap-0.5 tpl:text-[11px] tpl:font-medium tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
-							onClick: (t) => wt(e.id)
+							class: "tpl:flex tpl:items-center tpl:gap-0.5 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
+							onClick: (t) => Ot(e.id)
 						}, [R.value.has(e.id) ? (r(), p(s(le), {
 							key: 0,
 							size: 11,
@@ -340,18 +350,18 @@ var fe = {
 							key: 1,
 							size: 11,
 							"stroke-width": 2
-						})), ne(" " + v((e.replies?.length ?? 0) === 1 ? s(k)(s(O).comments.replyOne, { count: String(e.replies?.length ?? 0) }) : s(k)(s(O).comments.replyMany, { count: String(e.replies?.length ?? 0) })), 1)], 8, Ge)) : f("", !0)])) : f("", !0)
+						})), ne(" " + v((e.replies?.length ?? 0) === 1 ? s(k)(s(O).comments.replyOne, { count: String(e.replies?.length ?? 0) }) : s(k)(s(O).comments.replyMany, { count: String(e.replies?.length ?? 0) })), 1)], 8, Ye)) : f("", !0)])) : f("", !0)
 					]),
 					c(m, { name: "tpl-replies" }, {
-						default: n(() => [R.value.has(e.id) && (e.replies?.length ?? 0) > 0 ? (r(), d("div", Ke, [(r(!0), d(_, null, t(e.replies, (t, n) => (r(), d("div", {
+						default: n(() => [R.value.has(e.id) && (e.replies?.length ?? 0) > 0 ? (r(), d("div", Xe, [(r(!0), d(_, null, t(e.replies, (t, n) => (r(), d("div", {
 							key: t.id,
 							class: l(["tpl-comment-reply-card tpl:relative tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-2.5", n < (e.replies?.length ?? 0) - 1 ? "tpl:mb-2" : ""])
 						}, [
-							g("div", qe, [g("div", Je, [
-								g("span", Ye, v(j.value.isOwn(t) ? s(O).comments.ownedByYou : t.author.name), 1),
-								g("span", Xe, v(kt(t.createdAt)), 1),
-								t.updatedAt ? (r(), d("span", Ze, " (" + v(s(O).comments.edited) + ") ", 1)) : f("", !0)
-							]), g("div", Qe, [Q(t) ? (r(), d("button", {
+							g("div", Ze, [g("div", Qe, [
+								g("span", $e, v(j.value.isOwn(t) ? s(O).comments.ownedByYou : t.author.name), 1),
+								g("span", et, v(Nt(t.createdAt)), 1),
+								t.updatedAt ? (r(), d("span", tt, " (" + v(s(O).comments.edited) + ") ", 1)) : f("", !0)
+							]), g("div", nt, [Q(t) ? (r(), d("button", {
 								key: 0,
 								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
 								title: s(O).comments.edit,
@@ -359,7 +369,7 @@ var fe = {
 							}, [c(s(y), {
 								size: 11,
 								"stroke-width": 2
-							})], 8, $e)) : f("", !0), Ot(t) ? (r(), d("button", {
+							})], 8, rt)) : f("", !0), Mt(t) ? (r(), d("button", {
 								key: 1,
 								class: "tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors",
 								title: s(O).comments.delete,
@@ -367,27 +377,27 @@ var fe = {
 							}, [c(s(x), {
 								size: 11,
 								"stroke-width": 2
-							})], 8, et)) : f("", !0)])]),
-							I.value === t.id ? (r(), d("div", tt, [o(g("textarea", {
+							})], 8, it)) : f("", !0)])]),
+							I.value === t.id ? (r(), d("div", at, [o(g("textarea", {
 								"onUpdate:modelValue": i[7] ||= (e) => L.value = e,
-								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)]",
+								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)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)]",
 								rows: "2",
 								onKeydown: (e) => $(e, t.id)
-							}, null, 40, nt), [[h, L.value]]), g("div", rt, [g("button", {
+							}, null, 40, ot), [[h, L.value]]), g("div", st, [g("button", {
 								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-on-primary)]",
 								disabled: !L.value.trim() || j.value.isSubmitting.value,
 								onClick: (e) => X(t.id)
-							}, v(s(O).comments.save), 9, it), g("button", {
+							}, v(s(O).comments.save), 9, ct), g("button", {
 								class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
 								onClick: i[8] ||= (e) => G()
-							}, v(s(O).comments.cancel), 1)])])) : (r(), d("p", at, v(t.body), 1)),
-							z.value === t.id ? (r(), d("div", ot, [
-								g("span", st, v(s(O).comments.deleteConfirm), 1),
+							}, v(s(O).comments.cancel), 1)])])) : (r(), d("p", lt, v(t.body), 1)),
+							z.value === t.id ? (r(), d("div", ut, [
+								g("span", dt, v(s(O).comments.deleteConfirm), 1),
 								g("button", {
 									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)]",
 									"data-testid": "comment-delete-confirm",
 									onClick: (e) => Z(t.id)
-								}, v(s(O).comments.delete), 9, ct),
+								}, v(s(O).comments.delete), 9, ft),
 								g("button", {
 									class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
 									onClick: i[9] ||= (e) => q()
@@ -397,14 +407,14 @@ var fe = {
 						_: 2
 					}, 1024),
 					c(m, { name: "tpl-replies" }, {
-						default: n(() => [P.value === e.id ? (r(), d("div", lt, [g("div", ut, [
+						default: n(() => [P.value === e.id ? (r(), d("div", pt, [g("div", mt, [
 							o(g("textarea", {
 								"onUpdate:modelValue": i[10] ||= (e) => F.value = e,
 								class: "tpl:max-h-24 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)]",
 								placeholder: s(O).comments.replyPlaceholder,
 								rows: "2",
-								onKeydown: (t) => jt(t, e.id)
-							}, null, 40, dt), [[h, F.value]]),
+								onKeydown: (t) => Ft(t, e.id)
+							}, null, 40, ht), [[h, F.value]]),
 							g("button", {
 								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:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
 								disabled: !F.value.trim() || j.value.isSubmitting.value,
@@ -412,10 +422,10 @@ var fe = {
 							}, [c(s(b), {
 								size: 14,
 								"stroke-width": 2
-							})], 8, ft),
+							})], 8, gt),
 							g("button", {
 								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:text-[var(--tpl-text-muted)]",
-								onClick: i[11] ||= (e) => Et()
+								onClick: i[11] ||= (e) => At()
 							}, [c(s(C), {
 								size: 14,
 								"stroke-width": 2
@@ -424,7 +434,7 @@ var fe = {
 						_: 2
 					}, 1024)
 				]))), 128))]))]),
-				j.value.canCreate.value ? (r(), d("div", pt, [St.value ? (r(), d("div", mt, v(s(O).comments.saveTemplateFirst), 1)) : (r(), d("div", ht, [o(g("textarea", {
+				j.value.canCreate.value ? (r(), d("div", _t, [Et.value ? (r(), d("div", vt, v(s(O).comments.saveTemplateFirst), 1)) : (r(), d("div", yt, [o(g("textarea", {
 					ref_key: "newCommentInput",
 					ref: B,
 					"onUpdate:modelValue": i[12] ||= (e) => N.value = e,
@@ -433,8 +443,8 @@ var fe = {
 					placeholder: s(O).comments.placeholder,
 					disabled: j.value.isSubmitting.value,
 					rows: "2",
-					onKeydown: At
-				}, null, 40, gt), [[h, N.value]]), g("button", {
+					onKeydown: Pt
+				}, null, 40, bt), [[h, N.value]]), g("button", {
 					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:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
 					"data-testid": "comments-send",
 					disabled: !N.value.trim() || j.value.isSubmitting.value,
@@ -448,13 +458,13 @@ var fe = {
 					key: 1,
 					size: 16,
 					"stroke-width": 2
-				}))], 8, _t)]))])) : f("", !0)
-			])) : f("", !0)]),
+				}))], 8, xt)]))])) : f("", !0)
+			], 8, fe)) : f("", !0)]),
 			_: 1
 		}));
 	}
-}), [["__scopeId", "data-v-3692da54"]]);
+}), [["__scopeId", "data-v-32af5912"]]);
 //#endregion
 export { E as default };
 
-//# sourceMappingURL=CommentsSidebar-C7oAP3Mx.js.map
+//# sourceMappingURL=CommentsSidebar-CybWfZ3V.js.map