@templatical/editor 0.6.4 → 0.6.5

package/dist/cdn/chunks/{CollaboratorBar--nO7TX6b.js → CollaboratorBar-Btzom8dY.js}

@@ -1,51 +1,51 @@
-import { F as e, N as t, S as n, _ as r, at as i, ct as a, d as o, g as s, h as c, lt as l, m as u, p as d } from "./draggable-Bcb86AsV.js";
-import { $ as f } from "./features-DEMb13KS.js";
-import { n as p, r as m } from "./icons-CsLTcirh.js";
+import { M as e, P as t, f as n, g as r, h as i, m as a, ot as o, p as s, rt as c, st as l, u, x as d } from "./draggable-CNhyCGIO.js";
+import { $ as f } from "./features-B4tNvoi4.js";
+import { n as p, r as m } from "./icons-B5nBFtvb.js";
 import { t as h } from "./readableTextColor-DhoK4XiZ.js";
 //#region src/cloud/components/CollaboratorBar.vue?vue&type=script&setup=true&lang.ts
 var g = { class: "tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2" }, _ = ["title"], v = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:-space-x-1.5"
-}, y = ["title"], b = ["title"], x = 3, S = /* @__PURE__ */ n({
+}, y = ["title"], b = ["title"], x = 3, S = /* @__PURE__ */ d({
 	__name: "CollaboratorBar",
 	props: {
 		collaborators: {},
 		isConnected: { type: Boolean }
 	},
-	setup(n) {
-		let S = n, { t: C } = f(), w = d(() => S.collaborators.slice(0, x)), T = d(() => S.collaborators.slice(x)), E = d(() => T.value.length), D = d(() => T.value.map((e) => e.name).join("\n"));
+	setup(d) {
+		let S = d, { t: C } = f(), w = n(() => S.collaborators.slice(0, x)), T = n(() => S.collaborators.slice(x)), E = n(() => T.value.length), D = n(() => T.value.map((e) => e.name).join("\n"));
 		function O(e) {
 			let t = e.trim().split(/\s+/);
 			return t.length >= 2 ? (t[0].charAt(0) + t[t.length - 1].charAt(0)).toUpperCase() : e.charAt(0).toUpperCase();
 		}
-		return (d, f) => (t(), r("div", g, [u("div", {
+		return (n, f) => (e(), r("div", g, [s("div", {
 			class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-[11px]",
-			style: a({ color: n.isConnected ? "var(--tpl-success)" : "var(--tpl-text-muted)" }),
-			title: n.isConnected ? i(C).collaboration.connected : i(C).collaboration.disconnected
-		}, [n.isConnected ? (t(), c(i(p), {
+			style: o({ color: d.isConnected ? "var(--tpl-success)" : "var(--tpl-text-muted)" }),
+			title: d.isConnected ? c(C).collaboration.connected : c(C).collaboration.disconnected
+		}, [d.isConnected ? (e(), a(c(p), {
 			key: 0,
 			size: 12,
 			"stroke-width": 2
-		})) : (t(), c(i(m), {
+		})) : (e(), a(c(m), {
 			key: 1,
 			size: 12,
 			"stroke-width": 2
-		}))], 12, _), n.collaborators.length > 0 ? (t(), r("div", v, [(t(!0), r(o, null, e(w.value, (e) => (t(), r("div", {
-			key: e.id,
+		}))], 12, _), d.collaborators.length > 0 ? (e(), r("div", v, [(e(!0), r(u, null, t(w.value, (t) => (e(), r("div", {
+			key: t.id,
 			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:duration-150 tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]",
-			style: a({
-				backgroundColor: e.color,
-				color: i(h)(e.color)
+			style: o({
+				backgroundColor: t.color,
+				color: c(h)(t.color)
 			}),
-			title: e.name
-		}, l(O(e.name)), 13, y))), 128)), E.value > 0 ? (t(), r("div", {
+			title: t.name
+		}, l(O(t.name)), 13, y))), 128)), E.value > 0 ? (e(), r("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)]",
 			title: D.value
-		}, " +" + l(E.value), 9, b)) : s("", !0)])) : s("", !0)]));
+		}, " +" + l(E.value), 9, b)) : i("", !0)])) : i("", !0)]));
 	}
 });
 //#endregion
 export { S as default };
 
-//# sourceMappingURL=CollaboratorBar--nO7TX6b.js.map
+//# sourceMappingURL=CollaboratorBar-Btzom8dY.js.map

package/dist/cdn/chunks/{CollaboratorBar--nO7TX6b.js.map → CollaboratorBar-Btzom8dY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CollaboratorBar--nO7TX6b.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-[11px]\"\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:duration-150 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-[9px] 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-[11px]\"\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:duration-150 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-[9px] 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,GAAoB,EAIpC,IAAuB,QAC3B,EAAM,cAAc,MAAM,GAAG,EAAW,CACzC,EAEK,IAAwB,QAC5B,EAAM,cAAc,MAAM,EAAW,CACtC,EAEK,IAAgB,QAAe,EAAsB,MAAM,OAAO,EAElE,IAAgB,QACpB,EAAsB,MAAM,KAAK,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,CAC1D;EAED,SAAS,EAAY,GAAsB;GACzC,IAAM,IAAQ,EAAK,MAAM,CAAC,MAAM,MAAM;AAMtC,UALI,EAAM,UAAU,KAEhB,EAAM,GAAG,OAAO,EAAE,GAAG,EAAM,EAAM,SAAS,GAAG,OAAO,EAAC,EACrD,aAAa,GAEV,EAAK,OAAO,EAAE,CAAC,aAAa;;yBAKnC,EA0CM,OA1CN,GA0CM,CAxCJ,EAaM,OAAA;GAZJ,OAAM;GACL,OAAK,EAAA,EAAA,OAAmB,EAAA,cAAW,uBAAA,yBAAA,CAAA;GAGnC,OAAgB,EAAA,cAAwB,EAAA,EAAM,CAAC,cAAc,YAAsB,EAAA,EAAM,CAAC,cAAc;MAM7F,EAAA,eAAA,GAAA,EAAZ,EAAwD,EAAA,EAAA,EAAA;;GAA9B,MAAM;GAAK,gBAAc;cACnD,EAA+C,EAAA,EAAA,EAAA;;GAA9B,MAAM;GAAK,gBAAc;gBAKpC,EAAA,cAAc,SAAM,KAAA,GAAA,EAD5B,EAuBM,OAvBN,GAuBM,EAAA,EAAA,GAAA,EAnBJ,EAWM,GAAA,MAAA,EAVmB,EAAA,QAAhB,YADT,EAWM,OAAA;GATH,KAAK,EAAa;GACnB,OAAM;GACL,OAAK,EAAA;qBAA+B,EAAa;WAAwB,EAAA,EAAiB,CAAC,EAAa,MAAK;;GAI7G,OAAO,EAAa;OAElB,EAAY,EAAa,KAAI,CAAA,EAAA,IAAA,EAAA,WAG1B,EAAA,QAAa,KAAA,GAAA,EADrB,EAMM,OAAA;;GAJJ,OAAM;GACL,OAAO,EAAA;KACT,OACE,EAAG,EAAA,MAAa,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"CollaboratorBar-Btzom8dY.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-[11px]\"\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:duration-150 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-[9px] 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-[11px]\"\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:duration-150 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-[9px] 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,GAAoB,EAIpC,IAAuB,QAC3B,EAAM,cAAc,MAAM,GAAG,EAAW,CACzC,EAEK,IAAwB,QAC5B,EAAM,cAAc,MAAM,EAAW,CACtC,EAEK,IAAgB,QAAe,EAAsB,MAAM,OAAO,EAElE,IAAgB,QACpB,EAAsB,MAAM,KAAK,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,CAC1D;EAED,SAAS,EAAY,GAAsB;GACzC,IAAM,IAAQ,EAAK,MAAM,CAAC,MAAM,MAAM;AAMtC,UALI,EAAM,UAAU,KAEhB,EAAM,GAAG,OAAO,EAAE,GAAG,EAAM,EAAM,SAAS,GAAG,OAAO,EAAC,EACrD,aAAa,GAEV,EAAK,OAAO,EAAE,CAAC,aAAa;;yBAKnC,EA0CM,OA1CN,GA0CM,CAxCJ,EAaM,OAAA;GAZJ,OAAM;GACL,OAAK,EAAA,EAAA,OAAmB,EAAA,cAAW,uBAAA,yBAAA,CAAA;GAGnC,OAAgB,EAAA,cAAwB,EAAA,EAAM,CAAC,cAAc,YAAsB,EAAA,EAAM,CAAC,cAAc;MAM7F,EAAA,eAAA,GAAA,EAAZ,EAAwD,EAAA,EAAA,EAAA;;GAA9B,MAAM;GAAK,gBAAc;cACnD,EAA+C,EAAA,EAAA,EAAA;;GAA9B,MAAM;GAAK,gBAAc;gBAKpC,EAAA,cAAc,SAAM,KAAA,GAAA,EAD5B,EAuBM,OAvBN,GAuBM,EAAA,EAAA,GAAA,EAnBJ,EAWM,GAAA,MAAA,EAVmB,EAAA,QAAhB,YADT,EAWM,OAAA;GATH,KAAK,EAAa;GACnB,OAAM;GACL,OAAK,EAAA;qBAA+B,EAAa;WAAwB,EAAA,EAAiB,CAAC,EAAa,MAAK;;GAI7G,OAAO,EAAa;OAElB,EAAY,EAAa,KAAI,CAAA,EAAA,IAAA,EAAA,WAG1B,EAAA,QAAa,KAAA,GAAA,EADrB,EAMM,OAAA;;GAJJ,OAAM;GACL,OAAO,EAAA;KACT,OACE,EAAG,EAAA,MAAa,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/cdn/chunks/CountdownBlock-BJSAJlJ1.js

@@ -0,0 +1,93 @@
+import { n as e } from "./rolldown-runtime-C266TIVP.js";
+import { M as t, P as n, Z as r, f as i, g as a, h as o, ot as s, p as c, rt as l, st as u, u as d, x as f } from "./draggable-CNhyCGIO.js";
+import { Nt as p, cn as m } from "./features-B4tNvoi4.js";
+//#region src/components/blocks/CountdownBlock.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	key: 0,
+	class: "tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]"
+}, g = {
+	key: 1,
+	class: "tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50"
+}, _ = { class: "tpl:text-center" }, v = /* @__PURE__ */ f({
+	__name: "CountdownBlock",
+	props: {
+		block: {},
+		viewport: {}
+	},
+	setup(e) {
+		let f = e, { t: v } = p(), y = r(Date.now());
+		m(() => {
+			y.value = Date.now();
+		}, 1e3);
+		let b = i(() => {
+			if (!f.block.targetDate) return null;
+			let e = new Date(f.block.targetDate);
+			return isNaN(e.getTime()) ? null : e.getTime();
+		}), x = i(() => b.value ? y.value >= b.value : !1), S = i(() => {
+			if (!b.value || x.value) return {
+				days: 0,
+				hours: 0,
+				minutes: 0,
+				seconds: 0
+			};
+			let e = b.value - y.value, t = Math.floor(e / 1e3);
+			return {
+				days: Math.floor(t / 86400),
+				hours: Math.floor(t % 86400 / 3600),
+				minutes: Math.floor(t % 3600 / 60),
+				seconds: t % 60
+			};
+		}), C = i(() => {
+			let e = [];
+			return f.block.showDays && e.push({
+				value: String(S.value.days).padStart(2, "0"),
+				label: f.block.labelDays
+			}), f.block.showHours && e.push({
+				value: String(S.value.hours).padStart(2, "0"),
+				label: f.block.labelHours
+			}), f.block.showMinutes && e.push({
+				value: String(S.value.minutes).padStart(2, "0"),
+				label: f.block.labelMinutes
+			}), f.block.showSeconds && e.push({
+				value: String(S.value.seconds).padStart(2, "0"),
+				label: f.block.labelSeconds
+			}), e;
+		}), w = i(() => ({
+			backgroundColor: f.block.backgroundColor,
+			fontFamily: f.block.fontFamily || "inherit"
+		})), T = i(() => ({
+			fontSize: `${f.block.digitFontSize}px`,
+			fontWeight: "bold",
+			color: f.block.digitColor,
+			lineHeight: "1.2"
+		})), E = i(() => ({
+			fontSize: `${f.block.labelFontSize}px`,
+			color: f.block.labelColor,
+			marginTop: "4px"
+		})), D = i(() => ({
+			fontSize: `${f.block.digitFontSize}px`,
+			color: f.block.digitColor,
+			fontFamily: f.block.fontFamily || "inherit"
+		}));
+		return (r, i) => e.block.targetDate ? x.value && e.block.hideOnExpiry ? (t(), a("div", g, u(l(v).countdown.hidden), 1)) : x.value ? (t(), a("div", {
+			key: 2,
+			style: s(w.value),
+			class: "tpl:py-4 tpl:text-center"
+		}, [c("span", { style: s({
+			fontSize: `${e.block.digitFontSize}px`,
+			color: e.block.digitColor
+		}) }, u(e.block.expiredMessage), 5)], 4)) : (t(), a("div", {
+			key: 3,
+			style: s(w.value),
+			class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4"
+		}, [(t(!0), a(d, null, n(C.value, (n, r) => (t(), a(d, { key: n.label }, [r > 0 ? (t(), a("span", {
+			key: 0,
+			style: s(D.value),
+			class: "tpl:self-start"
+		}, u(e.block.separator), 5)) : o("", !0), c("div", _, [c("div", { style: s(T.value) }, u(n.value), 5), c("div", { style: s(E.value) }, u(n.label), 5)])], 64))), 128))], 4)) : (t(), a("div", h, u(l(v).countdown.setDate), 1));
+	}
+}), y = /* @__PURE__ */ e({ default: () => b }), b = v;
+//#endregion
+export { y as n, b as t };
+
+//# sourceMappingURL=CountdownBlock-BJSAJlJ1.js.map

package/dist/cdn/chunks/{CountdownBlock-5YdT1uUu.js.map → CountdownBlock-BJSAJlJ1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CountdownBlock-5YdT1uUu.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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"}
+{"version":3,"file":"CountdownBlock-BJSAJlJ1.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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"}

package/dist/cdn/chunks/CountdownToolbar-DbknNrIi.js

@@ -0,0 +1,212 @@
+import { M as e, P as t, V as n, at as r, f as i, g as a, m as o, p as s, rt as c, st as l, u, v as d, x as f, y as p } from "./draggable-CNhyCGIO.js";
+import { Nt as m } from "./features-B4tNvoi4.js";
+import { f as h } from "./styleConstants-DP1VOca8.js";
+import { i as g, n as _, r as v, t as y } from "./NumberWithSuffix-CVfo9ztG.js";
+//#region src/components/toolbar/CheckboxItem.vue?vue&type=script&setup=true&lang.ts
+var b = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, x = ["checked"], S = /* @__PURE__ */ f({
+	__name: "CheckboxItem",
+	props: {
+		modelValue: { type: Boolean },
+		label: {}
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: n }) {
+		let r = n;
+		return (n, i) => (e(), a("label", b, [s("input", {
+			type: "checkbox",
+			class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
+			checked: t.modelValue,
+			onChange: i[0] ||= (e) => r("update:modelValue", e.target.checked)
+		}, null, 40, x), d(" " + l(t.label), 1)]));
+	}
+}), C = ["value"], w = ["value"], T = ["value"], E = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, D = ["value"], O = { value: "" }, k = ["value"], A = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, j = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, M = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, N = [
+	"value",
+	"placeholder",
+	"onInput"
+], P = ["value", "placeholder"], F = ["value"], I = /* @__PURE__ */ f({
+	__name: "CountdownToolbar",
+	props: {
+		block: {},
+		fontFamilies: {}
+	},
+	emits: ["update"],
+	setup(d, { emit: f }) {
+		let b = f, { t: x } = m(), I = [
+			"UTC",
+			"America/New_York",
+			"America/Chicago",
+			"America/Denver",
+			"America/Los_Angeles",
+			"Europe/London",
+			"Europe/Berlin",
+			"Europe/Paris",
+			"Europe/Moscow",
+			"Asia/Dubai",
+			"Asia/Kolkata",
+			"Asia/Shanghai",
+			"Asia/Tokyo",
+			"Australia/Sydney",
+			"Pacific/Auckland"
+		], L = [
+			{
+				value: ":",
+				label: ":"
+			},
+			{
+				value: "-",
+				label: "-"
+			},
+			{
+				value: " ",
+				label: "␣"
+			}
+		], R = [
+			"Days",
+			"Hours",
+			"Minutes",
+			"Seconds"
+		], z = i(() => R.map((e) => ({
+			unit: e,
+			showKey: `show${e}`,
+			labelKey: `label${e}`,
+			translationKey: e.toLowerCase()
+		})));
+		function B(e, t) {
+			b("update", { [e]: t });
+		}
+		return (i, f) => (e(), a(u, null, [
+			p(_, { label: c(x).countdown.targetDate }, {
+				default: n(() => [s("input", {
+					type: "datetime-local",
+					class: r(c(h)),
+					value: d.block.targetDate,
+					onInput: f[0] ||= (e) => B("targetDate", e.target.value)
+				}, null, 42, C)]),
+				_: 1
+			}, 8, ["label"]),
+			p(_, { label: c(x).countdown.timezone }, {
+				default: n(() => [s("select", {
+					class: r(c(h)),
+					value: d.block.timezone,
+					onChange: f[1] ||= (e) => B("timezone", e.target.value)
+				}, [(e(), a(u, null, t(I, (e) => s("option", {
+					key: e,
+					value: e
+				}, l(e), 9, T)), 64))], 42, w)]),
+				_: 1
+			}, 8, ["label"]),
+			p(_, { label: c(x).countdown.display }, {
+				default: n(() => [s("div", E, [(e(!0), a(u, null, t(z.value, (t) => (e(), o(S, {
+					key: t.unit,
+					"model-value": d.block[t.showKey],
+					label: c(x).countdown[t.translationKey],
+					"onUpdate:modelValue": (e) => B(t.showKey, e)
+				}, null, 8, [
+					"model-value",
+					"label",
+					"onUpdate:modelValue"
+				]))), 128))])]),
+				_: 1
+			}, 8, ["label"]),
+			p(_, { label: c(x).countdown.separator }, {
+				default: n(() => [p(v, {
+					options: L,
+					"model-value": d.block.separator,
+					"onUpdate:modelValue": f[2] ||= (e) => B("separator", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			p(_, { label: c(x).countdown.fontFamily }, {
+				default: n(() => [s("select", {
+					class: r(c(h)),
+					value: d.block.fontFamily || "",
+					onChange: f[3] ||= (e) => B("fontFamily", e.target.value || void 0)
+				}, [s("option", O, l(c(x).countdown.inheritFont), 1), (e(!0), a(u, null, t(d.fontFamilies, (t) => (e(), a("option", {
+					key: t.value,
+					value: t.value
+				}, l(t.label), 9, k))), 128))], 42, D)]),
+				_: 1
+			}, 8, ["label"]),
+			s("div", A, [p(_, { label: c(x).countdown.digitFontSize }, {
+				default: n(() => [p(y, {
+					"model-value": d.block.digitFontSize,
+					min: 12,
+					max: 72,
+					suffix: "px",
+					"onUpdate:modelValue": f[4] ||= (e) => B("digitFontSize", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]), p(_, { label: c(x).countdown.labelFontSize }, {
+				default: n(() => [p(y, {
+					"model-value": d.block.labelFontSize,
+					min: 8,
+					max: 24,
+					suffix: "px",
+					"onUpdate:modelValue": f[5] ||= (e) => B("labelFontSize", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"])]),
+			s("div", j, [p(_, { label: c(x).countdown.digitColor }, {
+				default: n(() => [p(g, {
+					"model-value": d.block.digitColor,
+					"onUpdate:modelValue": f[6] ||= (e) => B("digitColor", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]), p(_, { label: c(x).countdown.labelColor }, {
+				default: n(() => [p(g, {
+					"model-value": d.block.labelColor,
+					"onUpdate:modelValue": f[7] ||= (e) => B("labelColor", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"])]),
+			p(_, { label: c(x).countdown.background }, {
+				default: n(() => [p(g, {
+					"model-value": d.block.backgroundColor,
+					"onUpdate:modelValue": f[8] ||= (e) => B("backgroundColor", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			p(_, { label: c(x).countdown.labels }, {
+				default: n(() => [s("div", M, [(e(!0), a(u, null, t(z.value, (t) => (e(), a("input", {
+					key: t.unit,
+					type: "text",
+					class: r(c(h)),
+					value: d.block[t.labelKey],
+					placeholder: c(x).countdown[t.translationKey],
+					onInput: (e) => B(t.labelKey, e.target.value)
+				}, null, 42, N))), 128))])]),
+				_: 1
+			}, 8, ["label"]),
+			p(_, { label: c(x).countdown.expiry }, {
+				default: n(() => [s("input", {
+					type: "text",
+					class: r(c(h)),
+					value: d.block.expiredMessage,
+					placeholder: c(x).countdown.expiredMessagePlaceholder,
+					onInput: f[9] ||= (e) => B("expiredMessage", e.target.value)
+				}, null, 42, P)]),
+				_: 1
+			}, 8, ["label"]),
+			p(_, { label: c(x).countdown.expiredImageUrl }, {
+				default: n(() => [s("input", {
+					type: "url",
+					class: r(c(h)),
+					value: d.block.expiredImageUrl,
+					placeholder: "https://...",
+					onInput: f[10] ||= (e) => B("expiredImageUrl", e.target.value)
+				}, null, 42, F)]),
+				_: 1
+			}, 8, ["label"]),
+			p(S, {
+				"model-value": d.block.hideOnExpiry,
+				label: c(x).countdown.hideOnExpiry,
+				class: "tpl:mb-3.5",
+				"onUpdate:modelValue": f[11] ||= (e) => B("hideOnExpiry", e)
+			}, null, 8, ["model-value", "label"])
+		], 64));
+	}
+});
+//#endregion
+export { I as default };
+
+//# sourceMappingURL=CountdownToolbar-DbknNrIi.js.map

package/dist/cdn/chunks/{CountdownToolbar-DXPXrbAA.js.map → CountdownToolbar-DbknNrIi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CountdownToolbar-DXPXrbAA.js","names":[],"sources":["../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CountdownToolbar.vue","../../../src/components/toolbar/CountdownToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      | \"days\"\n      | \"hours\"\n      | \"minutes\"\n      | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      | \"days\"\n      | \"hours\"\n      | \"minutes\"\n      | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"CountdownToolbar-DbknNrIi.js","names":[],"sources":["../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CountdownToolbar.vue","../../../src/components/toolbar/CountdownToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      | \"days\"\n      | \"hours\"\n      | \"minutes\"\n      | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      | \"days\"\n      | \"hours\"\n      | \"minutes\"\n      | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n"],"mappings":"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"}