@templatical/editor 0.16.2 → 0.16.3

package/dist/cdn/chunks/{CollaboratorBar-Dyrab63H.js → CollaboratorBar-DCc5SL0P.js}

@@ -1,6 +1,6 @@
 import { M as e, P as t, ct as n, f as r, g as i, h as a, it as o, m as s, p as c, st as l, u, x as d } from "./draggable-D840DIZB.js";
-import { it as f } from "./features-C-cjT_8L.js";
-import { n as p, r as m } from "./icons-ay0_fN-T.js";
+import { at as f } from "./features-Dwb5aTLg.js";
+import { n as p, r as m } from "./icons-Dhqh5lYQ.js";
 import { t as h } from "./readableTextColor-f8Kykfnh.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 = {
@@ -48,4 +48,4 @@ var g = { class: "tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2" }, _
 //#endregion
 export { S as default };
 
-//# sourceMappingURL=CollaboratorBar-Dyrab63H.js.map
+//# sourceMappingURL=CollaboratorBar-DCc5SL0P.js.map

package/dist/cdn/chunks/{CollaboratorBar-Dyrab63H.js.map → CollaboratorBar-DCc5SL0P.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CollaboratorBar-Dyrab63H.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,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;yBAIE,EA0CM,OA1CN,GA0CM,CAxCJ,EAaM,OAAA;GAZJ,OAAM;GACL,OAAK,EAAA,EAAA,OAAmB,EAAA,cAAW,uBAAA,wBAAA,CAAA;GAGnC,OAAgB,EAAA,cAAwB,EAAA,CAAA,CAAM,CAAC,cAAc,YAAsB,EAAA,CAAA,CAAM,CAAC,cAAc;MAM7F,EAAA,eAAA,EAAA,GAAZ,EAAwD,EAAA,CAAA,GAAA;;GAA9B,MAAM;GAAK,gBAAc;cACnD,EAA+C,EAAA,CAAA,GAAA;;GAA9B,MAAM;GAAK,gBAAc;gBAKpC,EAAA,cAAc,SAAM,KAAA,EAAA,GAD5B,EAuBM,OAvBN,GAuBM,EAAA,EAAA,EAAA,GAnBJ,EAWM,GAAA,MAAA,EAVmB,EAAA,QAAhB,YADT,EAWM,OAAA;GATH,KAAK,EAAa;GACnB,OAAM;GACL,OAAK,EAAA;qBAA+B,EAAa;WAAwB,EAAA,CAAA,CAAiB,CAAC,EAAa,KAAK;;GAI7G,OAAO,EAAa;OAElB,EAAY,EAAa,IAAI,CAAA,GAAA,IAAA,CAAA,YAG1B,EAAA,QAAa,KAAA,EAAA,GADrB,EAMM,OAAA;;GAJJ,OAAM;GACL,OAAO,EAAA;KACT,OACE,EAAG,EAAA,KAAa,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"CollaboratorBar-DCc5SL0P.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,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;yBAIE,EA0CM,OA1CN,GA0CM,CAxCJ,EAaM,OAAA;GAZJ,OAAM;GACL,OAAK,EAAA,EAAA,OAAmB,EAAA,cAAW,uBAAA,wBAAA,CAAA;GAGnC,OAAgB,EAAA,cAAwB,EAAA,CAAA,CAAM,CAAC,cAAc,YAAsB,EAAA,CAAA,CAAM,CAAC,cAAc;MAM7F,EAAA,eAAA,EAAA,GAAZ,EAAwD,EAAA,CAAA,GAAA;;GAA9B,MAAM;GAAK,gBAAc;cACnD,EAA+C,EAAA,CAAA,GAAA;;GAA9B,MAAM;GAAK,gBAAc;gBAKpC,EAAA,cAAc,SAAM,KAAA,EAAA,GAD5B,EAuBM,OAvBN,GAuBM,EAAA,EAAA,EAAA,GAnBJ,EAWM,GAAA,MAAA,EAVmB,EAAA,QAAhB,YADT,EAWM,OAAA;GATH,KAAK,EAAa;GACnB,OAAM;GACL,OAAK,EAAA;qBAA+B,EAAa;WAAwB,EAAA,CAAA,CAAiB,CAAC,EAAa,KAAK;;GAI7G,OAAO,EAAa;OAElB,EAAY,EAAa,IAAI,CAAA,GAAA,IAAA,CAAA,YAG1B,EAAA,QAAa,KAAA,EAAA,GADrB,EAMM,OAAA;;GAJJ,OAAM;GACL,OAAO,EAAA;KACT,OACE,EAAG,EAAA,KAAa,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/cdn/chunks/ColorPicker-Pi-1fR8c.js

@@ -0,0 +1,471 @@
+import { M as e, T as t, V as n, Z as r, c as i, d as a, f as o, g as s, h as c, it as l, l as ee, m as te, n as ne, ot as u, p as d, st as f, x as p, y as m } from "./draggable-D840DIZB.js";
+import { Q as h, cn as re, fn as ie, k as ae, lt as g, un as oe, zt as se } from "./features-Dwb5aTLg.js";
+//#region src/constants/styleConstants.ts
+var _ = "tpl:block tpl:mb-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]", v = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", y = "tpl:w-full tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-sm tpl:border tpl:rounded-l-[var(--tpl-radius-sm)] tpl:rounded-r-none tpl:border-r-0 tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)] placeholder:tpl:text-[var(--tpl-text-dim)]", b = "tpl:flex tpl:items-center tpl:px-2.5 tpl:text-xs tpl:border tpl:border-l-0 tpl:text-[var(--tpl-text-dim)] tpl:bg-[var(--tpl-bg-hover)] tpl:border-[var(--tpl-border)] tpl:rounded-r-[var(--tpl-radius-sm)]", x = "tpl:flex-1 tpl:h-10 tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-mono tpl:border tpl:rounded-[var(--tpl-radius-sm)] tpl:shadow-xs tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:outline-none focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)]", S = "tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-4 tpl:border tpl:border-[var(--tpl-border)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)]", C = "tpl:flex tpl:size-8 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]", w = "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:border-[var(--tpl-primary)] tpl:hover:text-[var(--tpl-primary)]", T = "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2.5 tpl:py-2 tpl:font-mono tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none tpl:transition-all tpl:duration-150 tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]", E = "tpl-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3.5 tpl:py-2 tpl:text-sm tpl:font-medium tpl:whitespace-nowrap tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-primary)] hover:tpl:text-[var(--tpl-bg)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50", D = [
+	"10px",
+	"12px",
+	"14px",
+	"16px",
+	"18px",
+	"20px",
+	"24px",
+	"28px",
+	"32px",
+	"36px",
+	"48px",
+	"64px"
+], O = [
+	"1",
+	"1.2",
+	"1.4",
+	"1.5",
+	"1.6",
+	"1.8",
+	"2",
+	"2.5"
+], k = [
+	{
+		label: "Normal",
+		value: "normal"
+	},
+	{
+		label: "-0.5px",
+		value: "-0.5px"
+	},
+	{
+		label: "0.5px",
+		value: "0.5px"
+	},
+	{
+		label: "1px",
+		value: "1px"
+	},
+	{
+		label: "1.5px",
+		value: "1.5px"
+	},
+	{
+		label: "2px",
+		value: "2px"
+	},
+	{
+		label: "3px",
+		value: "3px"
+	}
+], A = "#000000", j = "#ffffff", M = "#ffff00", N = "#f2f2f2", P = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, F = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
+360 / (Math.PI * 2);
+var I = (e) => ue(L(e)), L = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+	r: parseInt(e[0] + e[0], 16),
+	g: parseInt(e[1] + e[1], 16),
+	b: parseInt(e[2] + e[2], 16),
+	a: e.length === 4 ? F(parseInt(e[3] + e[3], 16) / 255, 2) : 1
+} : {
+	r: parseInt(e.substring(0, 2), 16),
+	g: parseInt(e.substring(2, 4), 16),
+	b: parseInt(e.substring(4, 6), 16),
+	a: e.length === 8 ? F(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
+}), R = (e) => le(ce(e)), z = ({ h: e, s: t, v: n, a: r }) => {
+	let i = (200 - t) * n / 100;
+	return {
+		h: F(e),
+		s: F(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
+		l: F(i / 2),
+		a: F(r, 2)
+	};
+}, B = (e) => {
+	let { h: t, s: n, l: r } = z(e);
+	return `hsl(${t}, ${n}%, ${r}%)`;
+}, ce = ({ h: e, s: t, v: n, a: r }) => {
+	e = e / 360 * 6, t /= 100, n /= 100;
+	let i = Math.floor(e), a = n * (1 - t), o = n * (1 - (e - i) * t), s = n * (1 - (1 - e + i) * t), c = i % 6;
+	return {
+		r: F([
+			n,
+			o,
+			a,
+			a,
+			s,
+			n
+		][c] * 255),
+		g: F([
+			s,
+			n,
+			n,
+			o,
+			a,
+			a
+		][c] * 255),
+		b: F([
+			a,
+			a,
+			s,
+			n,
+			n,
+			o
+		][c] * 255),
+		a: F(r, 2)
+	};
+}, V = (e) => {
+	let t = e.toString(16);
+	return t.length < 2 ? "0" + t : t;
+}, le = ({ r: e, g: t, b: n, a: r }) => {
+	let i = r < 1 ? V(F(r * 255)) : "";
+	return "#" + V(e) + V(t) + V(n) + i;
+}, ue = ({ r: e, g: t, b: n, a: r }) => {
+	let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = a ? i === e ? (t - n) / a : i === t ? 2 + (n - e) / a : 4 + (e - t) / a : 0;
+	return {
+		h: F(60 * (o < 0 ? o + 6 : o)),
+		s: F(i ? a / i * 100 : 0),
+		v: F(i / 255 * 100),
+		a: r
+	};
+}, H = (e, t) => {
+	if (e === t) return !0;
+	for (let n in e) if (e[n] !== t[n]) return !1;
+	return !0;
+}, de = (e, t) => e.toLowerCase() === t.toLowerCase() || H(L(e), L(t)), U = {}, W = (e) => {
+	let t = U[e];
+	return t || (t = document.createElement("template"), t.innerHTML = e, U[e] = t), t;
+}, G = (e, t, n) => {
+	e.dispatchEvent(new CustomEvent(t, {
+		bubbles: !0,
+		detail: n
+	}));
+}, K = !1, q = (e) => "touches" in e, fe = (e) => K && !q(e) ? !1 : (K ||= q(e), !0), J = (e, t) => {
+	let n = q(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
+	G(e.el, "move", e.getMove({
+		x: P((n.pageX - (r.left + window.pageXOffset)) / r.width),
+		y: P((n.pageY - (r.top + window.pageYOffset)) / r.height)
+	}));
+}, pe = (e, t) => {
+	let n = t.keyCode;
+	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), G(e.el, "move", e.getMove({
+		x: n === 39 ? .01 : n === 37 ? -.01 : n === 34 ? .05 : n === 33 ? -.05 : n === 35 ? 1 : n === 36 ? -1 : 0,
+		y: n === 40 ? .01 : n === 38 ? -.01 : 0
+	}, !0)));
+}, Y = class {
+	constructor(e, t, n, r) {
+		let i = W(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
+		e.appendChild(i.content.cloneNode(!0));
+		let a = e.querySelector(`[part=${t}]`);
+		a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = r, this.nodes = [a.firstChild, a];
+	}
+	set dragging(e) {
+		let t = e ? document.addEventListener : document.removeEventListener;
+		t(K ? "touchmove" : "mousemove", this), t(K ? "touchend" : "mouseup", this);
+	}
+	handleEvent(e) {
+		switch (e.type) {
+			case "mousedown":
+			case "touchstart":
+				if (e.preventDefault(), !fe(e) || !K && e.button != 0) return;
+				this.el.focus(), J(this, e), this.dragging = !0;
+				break;
+			case "mousemove":
+			case "touchmove":
+				e.preventDefault(), J(this, e);
+				break;
+			case "mouseup":
+			case "touchend":
+				this.dragging = !1;
+				break;
+			case "keydown":
+				pe(this, e);
+				break;
+		}
+	}
+	style(e) {
+		e.forEach((e, t) => {
+			for (let n in e) this.nodes[t].style.setProperty(n, e[n]);
+		});
+	}
+}, me = class extends Y {
+	constructor(e) {
+		super(e, "hue", "aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"", !1);
+	}
+	update({ h: e }) {
+		this.h = e, this.style([{
+			left: `${e / 360 * 100}%`,
+			color: B({
+				h: e,
+				s: 100,
+				v: 100,
+				a: 1
+			})
+		}]), this.el.setAttribute("aria-valuenow", `${F(e)}`);
+	}
+	getMove(e, t) {
+		return { h: t ? P(this.h + e.x * 360, 0, 360) : 360 * e.x };
+	}
+}, he = class extends Y {
+	constructor(e) {
+		super(e, "saturation", "aria-label=\"Color\"", !0);
+	}
+	update(e) {
+		this.hsva = e, this.style([{
+			top: `${100 - e.v}%`,
+			left: `${e.s}%`,
+			color: B(e)
+		}, { "background-color": B({
+			h: e.h,
+			s: 100,
+			v: 100,
+			a: 1
+		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${F(e.s)}%, Brightness ${F(e.v)}%`);
+	}
+	getMove(e, t) {
+		return {
+			s: t ? P(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
+			v: t ? P(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
+		};
+	}
+}, ge = ":host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}", _e = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", ve = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", X = Symbol("same"), Z = Symbol("color"), Q = Symbol("hsva"), $ = Symbol("update"), ye = Symbol("parts"), be = Symbol("css"), xe = Symbol("sliders"), Se = class extends HTMLElement {
+	static get observedAttributes() {
+		return ["color"];
+	}
+	get [be]() {
+		return [
+			ge,
+			_e,
+			ve
+		];
+	}
+	get [xe]() {
+		return [he, me];
+	}
+	get color() {
+		return this[Z];
+	}
+	set color(e) {
+		if (!this[X](e)) {
+			let t = this.colorModel.toHsva(e);
+			this[$](t), this[Z] = e;
+		}
+	}
+	constructor() {
+		super();
+		let e = W(`<style>${this[be].join("")}</style>`), t = this.attachShadow({ mode: "open" });
+		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[ye] = this[xe].map((e) => new e(t));
+	}
+	connectedCallback() {
+		if (this.hasOwnProperty("color")) {
+			let e = this.color;
+			delete this.color, this.color = e;
+		} else this.color ||= this.colorModel.defaultColor;
+	}
+	attributeChangedCallback(e, t, n) {
+		let r = this.colorModel.fromAttr(n);
+		this[X](r) || (this.color = r);
+	}
+	handleEvent(e) {
+		let t = this[Q], n = {
+			...t,
+			...e.detail
+		};
+		this[$](n);
+		let r;
+		!H(n, t) && !this[X](r = this.colorModel.fromHsva(n)) && (this[Z] = r, G(this, "color-changed", { value: r }));
+	}
+	[X](e) {
+		return this.color && this.colorModel.equal(e, this.color);
+	}
+	[$](e) {
+		this[Q] = e, this[ye].forEach((t) => t.update(e));
+	}
+}, Ce = {
+	defaultColor: "#000",
+	toHsva: I,
+	fromHsva: ({ h: e, s: t, v: n }) => R({
+		h: e,
+		s: t,
+		v: n,
+		a: 1
+	}),
+	equal: de,
+	fromAttr: (e) => e
+}, we = class extends Se {
+	get colorModel() {
+		return Ce;
+	}
+};
+customElements.define("hex-color-picker", class extends we {});
+//#endregion
+//#region src/components/ColorPicker.vue?vue&type=script&setup=true&lang.ts
+var Te = [
+	"disabled",
+	"aria-label",
+	"title",
+	"aria-expanded"
+], Ee = {
+	key: 0,
+	class: "tpl:relative tpl:flex-1"
+}, De = [
+	"value",
+	"placeholder",
+	"disabled",
+	"aria-label"
+], Oe = ["aria-label", "title"], ke = ["data-tpl-theme"], Ae = ["color", "aria-label"], je = {
+	key: 0,
+	class: "tpl:relative tpl:mt-2"
+}, Me = [
+	"value",
+	"placeholder",
+	"disabled",
+	"aria-label"
+], Ne = ["aria-label", "title"], Pe = /* @__PURE__ */ p({
+	__name: "ColorPicker",
+	props: {
+		modelValue: {},
+		placeholder: { default: "" },
+		seedColor: { default: "#ffffff" },
+		swatchOnly: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" },
+		ariaLabel: { default: "" }
+	},
+	emits: ["update:modelValue"],
+	setup(p, { emit: _ }) {
+		let v = p, y = _, { t: b } = se(), S = r(!1), C = r(), w = r(), T = r(!1);
+		ie(C, () => {
+			S.value = !1;
+		}, { ignore: [w] });
+		let E = o(() => !v.modelValue), D = o(() => h(v.modelValue)), O = o(() => h(v.modelValue || v.seedColor)), k = o(() => !v.disabled && !E.value);
+		function A(e) {
+			T.value = !0, y("update:modelValue", e.detail.value);
+		}
+		function j() {
+			T.value = !1;
+		}
+		function M() {
+			!T.value && E.value && y("update:modelValue", O.value);
+		}
+		function N(e) {
+			y("update:modelValue", e.target.value);
+		}
+		function P() {
+			y("update:modelValue", "");
+		}
+		let F = ae(), I = t(re, null), L = t(oe, null), R = r({
+			top: 0,
+			left: 0
+		});
+		function z() {
+			if (!v.disabled) {
+				if (!S.value) {
+					let e = w.value?.getBoundingClientRect();
+					if (e) {
+						let t = e.bottom + 8 + 240 <= window.innerHeight;
+						R.value = {
+							top: t ? e.bottom + 8 : Math.max(8, e.top - 240 - 8),
+							left: e.left
+						};
+					}
+				}
+				S.value = !S.value;
+			}
+		}
+		return (t, r) => (e(), s("div", { class: u(["tpl:flex tpl:items-center tpl:gap-2 tpl:relative", p.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
+			d("button", {
+				ref_key: "swatchRef",
+				ref: w,
+				type: "button",
+				disabled: p.disabled,
+				"aria-label": p.ariaLabel || l(b).colorPicker.pickColor,
+				title: p.ariaLabel || void 0,
+				"aria-expanded": S.value,
+				class: u([
+					"tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
+					p.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
+					S.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !p.disabled && "hover:tpl:border-[var(--tpl-text-dim)]",
+					p.size === "sm" ? "tpl:size-8" : "tpl:size-10"
+				]),
+				onClick: z
+			}, [d("span", {
+				class: u(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": E.value }]),
+				style: f(E.value ? void 0 : { backgroundColor: D.value })
+			}, null, 6)], 10, Te),
+			p.swatchOnly ? c("", !0) : (e(), s("div", Ee, [d("input", {
+				type: "text",
+				class: u([l(x), "tpl:w-full"]),
+				style: f(k.value ? { paddingRight: "2.25rem" } : void 0),
+				value: D.value,
+				placeholder: p.placeholder || l(b).colorPicker.notSet,
+				disabled: p.disabled,
+				"aria-label": l(b).colorPicker.hexValue,
+				onInput: N
+			}, null, 46, De), k.value ? (e(), s("button", {
+				key: 0,
+				type: "button",
+				"aria-label": l(b).colorPicker.clear,
+				title: l(b).colorPicker.clear,
+				class: "tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)]",
+				onClick: P
+			}, [m(l(g), {
+				size: 14,
+				"stroke-width": 1.5
+			})], 8, Oe)) : c("", !0)])),
+			(e(), te(a, {
+				to: l(F),
+				disabled: !l(F)
+			}, [m(ne, {
+				"enter-active-class": "tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
+				"enter-from-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1",
+				"enter-to-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
+				"leave-active-class": "tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
+				"leave-from-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
+				"leave-to-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1"
+			}, {
+				default: n(() => [S.value ? (e(), s("div", {
+					key: 0,
+					ref_key: "popoverRef",
+					ref: C,
+					"data-tpl-theme": l(L),
+					class: "tpl-color-popover tpl:fixed tpl:z-modal tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg",
+					style: f({
+						top: `${R.value.top}px`,
+						left: `${R.value.left}px`,
+						...l(I)
+					})
+				}, [d("hex-color-picker", {
+					color: O.value,
+					"aria-label": l(b).colorPicker.pickColor,
+					onColorChanged: A,
+					onPointerdown: j,
+					onPointerup: M,
+					onKeydown: r[0] ||= i((e) => S.value = !1, ["escape"])
+				}, null, 40, Ae), p.swatchOnly ? (e(), s("div", je, [d("input", {
+					type: "text",
+					class: u([l(x), "tpl:w-full"]),
+					style: f(k.value ? { paddingRight: "2.25rem" } : void 0),
+					value: D.value,
+					placeholder: p.placeholder || l(b).colorPicker.notSet,
+					disabled: p.disabled,
+					"aria-label": l(b).colorPicker.hexValue,
+					onChange: N,
+					onKeydown: r[1] ||= i(ee((e) => e.target.blur(), ["prevent"]), ["enter"])
+				}, null, 46, Me), k.value ? (e(), s("button", {
+					key: 0,
+					type: "button",
+					"aria-label": l(b).colorPicker.clear,
+					title: l(b).colorPicker.clear,
+					class: "tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)]",
+					onClick: P
+				}, [m(l(g), {
+					size: 14,
+					"stroke-width": 1.5
+				})], 8, Ne)) : c("", !0)])) : c("", !0)], 12, ke)) : c("", !0)]),
+				_: 1
+			})], 8, ["to", "disabled"]))
+		], 2));
+	}
+});
+//#endregion
+export { C as _, A as a, O as c, E as d, v as f, T as g, _ as h, N as i, w as l, b as m, j as n, D as o, y as p, M as r, k as s, Pe as t, S as u };
+
+//# sourceMappingURL=ColorPicker-Pi-1fR8c.js.map