@aswin.dev/editor 0.8.4 → 0.8.7

package/dist/cdn/chunks/{RichTextEditorContent-ywrdsvHY.js → RichTextEditorContent-4-cNqB4H.js}

@@ -1,5 +1,5 @@
 import { C as e, D as t, G as n, O as r, P as i, V as a, _ as o, b as s, c, ct as l, d as u, dt as d, ft as f, g as p, h as m, p as h, v as g, x as _, z as v } from "./draggable-C-1_gch3.js";
-import { Vt as y, ct as b, ln as x, un as S } from "./features-BZeMkHMs.js";
+import { Vt as y, ct as b, dn as x, un as S } from "./features-BHTP4oRU.js";
 //#region src/components/blocks/RichTextLinkDialog.vue?vue&type=script&setup=true&lang.ts
 var C = ["data-tpl-theme"], w = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-5 tpl:py-4" }, T = {
 	id: "tpl-link-dialog-title",
@@ -25,7 +25,7 @@ var C = ["data-tpl-theme"], w = { class: "tpl:flex tpl:items-center tpl:justify-
 		"keydown"
 	], ["update:linkUrl", "update:dialogRef"]),
 	setup(e, { emit: r }) {
-		let s = a(e, "linkUrl"), v = a(e, "dialogRef"), N = r, P = t(x, null), F = t(S, null), { t: I } = y();
+		let s = a(e, "linkUrl"), v = a(e, "dialogRef"), N = r, P = t(S, null), F = t(x, null), { t: I } = y();
 		return (t, r) => (i(), p(h, { to: "body" }, [e.visible ? (i(), g("div", {
 			key: 0,
 			"data-tpl-theme": l(F),
@@ -103,4 +103,4 @@ var C = ["data-tpl-theme"], w = { class: "tpl:flex tpl:items-center tpl:justify-
 //#endregion
 export { N as n, L as t };
 
-//# sourceMappingURL=RichTextEditorContent-ywrdsvHY.js.map
+//# sourceMappingURL=RichTextEditorContent-4-cNqB4H.js.map

package/dist/cdn/chunks/{RichTextEditorContent-ywrdsvHY.js.map → RichTextEditorContent-4-cNqB4H.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditorContent-ywrdsvHY.js","names":[],"sources":["../../../src/components/blocks/RichTextLinkDialog.vue","../../../src/components/blocks/RichTextLinkDialog.vue","../../../src/components/blocks/RichTextEditorContent.vue","../../../src/components/blocks/RichTextEditorContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport { X } from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../../keys\";\n\ndefineProps<{\n  visible: boolean;\n  isEditingLink: boolean;\n}>();\n\nconst linkUrl = defineModel<string>(\"linkUrl\", { required: true });\nconst dialogRef = defineModel<HTMLElement | null>(\"dialogRef\", {\n  required: true,\n});\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\"): void;\n  (e: \"remove\"): void;\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      v-if=\"visible\"\n      :data-tpl-theme=\"tplUiTheme\"\n      class=\"tpl tpl-link-dialog tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center\"\n      :style=\"themeStyles\"\n      @click.self=\"emit('close')\"\n    >\n      <div\n        :ref=\"(el) => (dialogRef = el as HTMLElement | null)\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"tpl-link-dialog-title\"\n        class=\"tpl:w-[400px] tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-lg\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-5 tpl:py-4\"\n        >\n          <h4\n            id=\"tpl-link-dialog-title\"\n            class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          >\n            {{\n              isEditingLink ? t.linkDialog.editLink : t.linkDialog.insertLink\n            }}\n          </h4>\n          <button\n            type=\"button\"\n            :aria-label=\"t.linkDialog.cancel\"\n            class=\"tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n        <div class=\"tpl:p-5\">\n          <div class=\"tpl:mb-4 tpl:last:mb-0\">\n            <label\n              for=\"tpl-link-dialog-url\"\n              class=\"tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n              >{{ t.linkDialog.urlLabel }}</label\n            >\n            <input\n              id=\"tpl-link-dialog-url\"\n              v-model=\"linkUrl\"\n              type=\"url\"\n              class=\"tpl:w-full tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]\"\n              :placeholder=\"t.linkDialog.urlPlaceholder\"\n              autofocus\n              @keydown=\"emit('keydown', $event)\"\n            />\n          </div>\n        </div>\n        <div\n          class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-5 tpl:py-4\"\n        >\n          <button\n            v-if=\"isEditingLink\"\n            type=\"button\"\n            class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-danger)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-danger)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-danger-light)]\"\n            @click=\"emit('remove')\"\n          >\n            {{ t.linkDialog.removeLink }}\n          </button>\n          <div class=\"tpl:ml-auto tpl:flex tpl:gap-2\">\n            <button\n              type=\"button\"\n              class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n              @click=\"emit('close')\"\n            >\n              {{ t.linkDialog.cancel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-primary-hover)] tpl:text-[var(--tpl-bg)]\"\n              @click=\"emit('insert')\"\n            >\n              {{\n                isEditingLink\n                  ? t.linkDialog.updateLink\n                  : t.linkDialog.insertLink\n              }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport { X } from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../../keys\";\n\ndefineProps<{\n  visible: boolean;\n  isEditingLink: boolean;\n}>();\n\nconst linkUrl = defineModel<string>(\"linkUrl\", { required: true });\nconst dialogRef = defineModel<HTMLElement | null>(\"dialogRef\", {\n  required: true,\n});\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\"): void;\n  (e: \"remove\"): void;\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      v-if=\"visible\"\n      :data-tpl-theme=\"tplUiTheme\"\n      class=\"tpl tpl-link-dialog tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center\"\n      :style=\"themeStyles\"\n      @click.self=\"emit('close')\"\n    >\n      <div\n        :ref=\"(el) => (dialogRef = el as HTMLElement | null)\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"tpl-link-dialog-title\"\n        class=\"tpl:w-[400px] tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-lg\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-5 tpl:py-4\"\n        >\n          <h4\n            id=\"tpl-link-dialog-title\"\n            class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          >\n            {{\n              isEditingLink ? t.linkDialog.editLink : t.linkDialog.insertLink\n            }}\n          </h4>\n          <button\n            type=\"button\"\n            :aria-label=\"t.linkDialog.cancel\"\n            class=\"tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n        <div class=\"tpl:p-5\">\n          <div class=\"tpl:mb-4 tpl:last:mb-0\">\n            <label\n              for=\"tpl-link-dialog-url\"\n              class=\"tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n              >{{ t.linkDialog.urlLabel }}</label\n            >\n            <input\n              id=\"tpl-link-dialog-url\"\n              v-model=\"linkUrl\"\n              type=\"url\"\n              class=\"tpl:w-full tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]\"\n              :placeholder=\"t.linkDialog.urlPlaceholder\"\n              autofocus\n              @keydown=\"emit('keydown', $event)\"\n            />\n          </div>\n        </div>\n        <div\n          class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-5 tpl:py-4\"\n        >\n          <button\n            v-if=\"isEditingLink\"\n            type=\"button\"\n            class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-danger)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-danger)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-danger-light)]\"\n            @click=\"emit('remove')\"\n          >\n            {{ t.linkDialog.removeLink }}\n          </button>\n          <div class=\"tpl:ml-auto tpl:flex tpl:gap-2\">\n            <button\n              type=\"button\"\n              class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n              @click=\"emit('close')\"\n            >\n              {{ t.linkDialog.cancel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-primary-hover)] tpl:text-[var(--tpl-bg)]\"\n              @click=\"emit('insert')\"\n            >\n              {{\n                isEditingLink\n                  ? t.linkDialog.updateLink\n                  : t.linkDialog.insertLink\n              }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport type { Component } from \"vue\";\n\ndefineProps<{\n  editor: Editor | null;\n  editorContent: Component | null;\n  isLoading: boolean;\n  initError: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"retry\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"isLoading\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n  >\n    <div class=\"tpl:animate-pulse tpl:text-[var(--tpl-text-dim)]\">\n      {{ t.errors.editorLoading }}\n    </div>\n  </div>\n  <div\n    v-else-if=\"initError\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:p-2 tpl:text-center tpl:text-xs tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-text-muted)]\"\n  >\n    {{ t.errors.editorLoadFailed }}\n    <button\n      class=\"tpl:ml-1 tpl:cursor-pointer tpl:border-none tpl:bg-transparent tpl:p-0 tpl:underline tpl:text-[var(--tpl-primary)]\"\n      @click=\"emit('retry')\"\n    >\n      {{ t.errors.retry }}\n    </button>\n  </div>\n  <component\n    :is=\"editorContent\"\n    v-else-if=\"editorContent && editor\"\n    :editor=\"editor as Editor\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport type { Component } from \"vue\";\n\ndefineProps<{\n  editor: Editor | null;\n  editorContent: Component | null;\n  isLoading: boolean;\n  initError: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"retry\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"isLoading\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n  >\n    <div class=\"tpl:animate-pulse tpl:text-[var(--tpl-text-dim)]\">\n      {{ t.errors.editorLoading }}\n    </div>\n  </div>\n  <div\n    v-else-if=\"initError\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:p-2 tpl:text-center tpl:text-xs tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-text-muted)]\"\n  >\n    {{ t.errors.editorLoadFailed }}\n    <button\n      class=\"tpl:ml-1 tpl:cursor-pointer tpl:border-none tpl:bg-transparent tpl:p-0 tpl:underline tpl:text-[var(--tpl-primary)]\"\n      @click=\"emit('retry')\"\n    >\n      {{ t.errors.retry }}\n    </button>\n  </div>\n  <component\n    :is=\"editorContent\"\n    v-else-if=\"editorContent && editor\"\n    :editor=\"editor as Editor\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n  />\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RichTextEditorContent-4-cNqB4H.js","names":[],"sources":["../../../src/components/blocks/RichTextLinkDialog.vue","../../../src/components/blocks/RichTextLinkDialog.vue","../../../src/components/blocks/RichTextEditorContent.vue","../../../src/components/blocks/RichTextEditorContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport { X } from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../../keys\";\n\ndefineProps<{\n  visible: boolean;\n  isEditingLink: boolean;\n}>();\n\nconst linkUrl = defineModel<string>(\"linkUrl\", { required: true });\nconst dialogRef = defineModel<HTMLElement | null>(\"dialogRef\", {\n  required: true,\n});\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\"): void;\n  (e: \"remove\"): void;\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      v-if=\"visible\"\n      :data-tpl-theme=\"tplUiTheme\"\n      class=\"tpl tpl-link-dialog tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center\"\n      :style=\"themeStyles\"\n      @click.self=\"emit('close')\"\n    >\n      <div\n        :ref=\"(el) => (dialogRef = el as HTMLElement | null)\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"tpl-link-dialog-title\"\n        class=\"tpl:w-[400px] tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-lg\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-5 tpl:py-4\"\n        >\n          <h4\n            id=\"tpl-link-dialog-title\"\n            class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          >\n            {{\n              isEditingLink ? t.linkDialog.editLink : t.linkDialog.insertLink\n            }}\n          </h4>\n          <button\n            type=\"button\"\n            :aria-label=\"t.linkDialog.cancel\"\n            class=\"tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n        <div class=\"tpl:p-5\">\n          <div class=\"tpl:mb-4 tpl:last:mb-0\">\n            <label\n              for=\"tpl-link-dialog-url\"\n              class=\"tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n              >{{ t.linkDialog.urlLabel }}</label\n            >\n            <input\n              id=\"tpl-link-dialog-url\"\n              v-model=\"linkUrl\"\n              type=\"url\"\n              class=\"tpl:w-full tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]\"\n              :placeholder=\"t.linkDialog.urlPlaceholder\"\n              autofocus\n              @keydown=\"emit('keydown', $event)\"\n            />\n          </div>\n        </div>\n        <div\n          class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-5 tpl:py-4\"\n        >\n          <button\n            v-if=\"isEditingLink\"\n            type=\"button\"\n            class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-danger)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-danger)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-danger-light)]\"\n            @click=\"emit('remove')\"\n          >\n            {{ t.linkDialog.removeLink }}\n          </button>\n          <div class=\"tpl:ml-auto tpl:flex tpl:gap-2\">\n            <button\n              type=\"button\"\n              class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n              @click=\"emit('close')\"\n            >\n              {{ t.linkDialog.cancel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-primary-hover)] tpl:text-[var(--tpl-bg)]\"\n              @click=\"emit('insert')\"\n            >\n              {{\n                isEditingLink\n                  ? t.linkDialog.updateLink\n                  : t.linkDialog.insertLink\n              }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport { X } from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../../keys\";\n\ndefineProps<{\n  visible: boolean;\n  isEditingLink: boolean;\n}>();\n\nconst linkUrl = defineModel<string>(\"linkUrl\", { required: true });\nconst dialogRef = defineModel<HTMLElement | null>(\"dialogRef\", {\n  required: true,\n});\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"insert\"): void;\n  (e: \"remove\"): void;\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      v-if=\"visible\"\n      :data-tpl-theme=\"tplUiTheme\"\n      class=\"tpl tpl-link-dialog tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center\"\n      :style=\"themeStyles\"\n      @click.self=\"emit('close')\"\n    >\n      <div\n        :ref=\"(el) => (dialogRef = el as HTMLElement | null)\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"tpl-link-dialog-title\"\n        class=\"tpl:w-[400px] tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-lg\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-5 tpl:py-4\"\n        >\n          <h4\n            id=\"tpl-link-dialog-title\"\n            class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          >\n            {{\n              isEditingLink ? t.linkDialog.editLink : t.linkDialog.insertLink\n            }}\n          </h4>\n          <button\n            type=\"button\"\n            :aria-label=\"t.linkDialog.cancel\"\n            class=\"tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n        <div class=\"tpl:p-5\">\n          <div class=\"tpl:mb-4 tpl:last:mb-0\">\n            <label\n              for=\"tpl-link-dialog-url\"\n              class=\"tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n              >{{ t.linkDialog.urlLabel }}</label\n            >\n            <input\n              id=\"tpl-link-dialog-url\"\n              v-model=\"linkUrl\"\n              type=\"url\"\n              class=\"tpl:w-full tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]\"\n              :placeholder=\"t.linkDialog.urlPlaceholder\"\n              autofocus\n              @keydown=\"emit('keydown', $event)\"\n            />\n          </div>\n        </div>\n        <div\n          class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-5 tpl:py-4\"\n        >\n          <button\n            v-if=\"isEditingLink\"\n            type=\"button\"\n            class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-danger)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-danger)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-danger-light)]\"\n            @click=\"emit('remove')\"\n          >\n            {{ t.linkDialog.removeLink }}\n          </button>\n          <div class=\"tpl:ml-auto tpl:flex tpl:gap-2\">\n            <button\n              type=\"button\"\n              class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n              @click=\"emit('close')\"\n            >\n              {{ t.linkDialog.cancel }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-primary-hover)] tpl:text-[var(--tpl-bg)]\"\n              @click=\"emit('insert')\"\n            >\n              {{\n                isEditingLink\n                  ? t.linkDialog.updateLink\n                  : t.linkDialog.insertLink\n              }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport type { Component } from \"vue\";\n\ndefineProps<{\n  editor: Editor | null;\n  editorContent: Component | null;\n  isLoading: boolean;\n  initError: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"retry\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"isLoading\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n  >\n    <div class=\"tpl:animate-pulse tpl:text-[var(--tpl-text-dim)]\">\n      {{ t.errors.editorLoading }}\n    </div>\n  </div>\n  <div\n    v-else-if=\"initError\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:p-2 tpl:text-center tpl:text-xs tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-text-muted)]\"\n  >\n    {{ t.errors.editorLoadFailed }}\n    <button\n      class=\"tpl:ml-1 tpl:cursor-pointer tpl:border-none tpl:bg-transparent tpl:p-0 tpl:underline tpl:text-[var(--tpl-primary)]\"\n      @click=\"emit('retry')\"\n    >\n      {{ t.errors.retry }}\n    </button>\n  </div>\n  <component\n    :is=\"editorContent\"\n    v-else-if=\"editorContent && editor\"\n    :editor=\"editor as Editor\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport type { Component } from \"vue\";\n\ndefineProps<{\n  editor: Editor | null;\n  editorContent: Component | null;\n  isLoading: boolean;\n  initError: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"retry\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"isLoading\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n  >\n    <div class=\"tpl:animate-pulse tpl:text-[var(--tpl-text-dim)]\">\n      {{ t.errors.editorLoading }}\n    </div>\n  </div>\n  <div\n    v-else-if=\"initError\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:p-2 tpl:text-center tpl:text-xs tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-text-muted)]\"\n  >\n    {{ t.errors.editorLoadFailed }}\n    <button\n      class=\"tpl:ml-1 tpl:cursor-pointer tpl:border-none tpl:bg-transparent tpl:p-0 tpl:underline tpl:text-[var(--tpl-primary)]\"\n      @click=\"emit('retry')\"\n    >\n      {{ t.errors.retry }}\n    </button>\n  </div>\n  <component\n    :is=\"editorContent\"\n    v-else-if=\"editorContent && editor\"\n    :editor=\"editor as Editor\"\n    class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n  />\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{SaveModuleDialog-Ddp-HCFB.js → SaveModuleDialog-COm3ptOF.js}

@@ -1,5 +1,5 @@
 import { C as e, G as t, H as ee, I as n, P as r, W as i, _ as a, b as o, c as s, ct as c, dt as l, f as u, ft as d, g as f, h as p, m, tt as h, ut as g, v as _, x as v } from "./draggable-C-1_gch3.js";
-import { Ct as y, Vt as b, dn as x, en as te, i as ne, it as S, sn as C } from "./features-BZeMkHMs.js";
+import { Ct as y, Vt as b, cn as te, fn as x, i as ne, it as S, tn as C } from "./features-BHTP4oRU.js";
 //#region src/cloud/components/SaveModuleDialog.vue?vue&type=script&setup=true&lang.ts
 var w = ["aria-busy"], T = {
 	id: "tpl-save-module-title",
@@ -23,7 +23,7 @@ var w = ["aria-busy"], T = {
 	},
 	emits: ["close", "saved"],
 	setup(e, { emit: R }) {
-		let z = e, B = R, { t: V } = b(), { t: H } = S(), U = x(te, "SaveModuleDialog"), W = x(C, "SaveModuleDialog"), G = h(""), K = h(/* @__PURE__ */ new Set()), q = h(!1), J = h(null), Y = m(() => U.content.value.blocks);
+		let z = e, B = R, { t: V } = b(), { t: H } = S(), U = x(C, "SaveModuleDialog"), W = x(te, "SaveModuleDialog"), G = h(""), K = h(/* @__PURE__ */ new Set()), q = h(!1), J = h(null), Y = m(() => U.content.value.blocks);
 		function X(e, t) {
 			return `${V.blocks[e.type] ?? e.type} ${t + 1}`;
 		}
@@ -116,4 +116,4 @@ var w = ["aria-busy"], T = {
 //#endregion
 export { R as default };
 
-//# sourceMappingURL=SaveModuleDialog-Ddp-HCFB.js.map
+//# sourceMappingURL=SaveModuleDialog-COm3ptOF.js.map

package/dist/cdn/chunks/{SaveModuleDialog-Ddp-HCFB.js.map → SaveModuleDialog-COm3ptOF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SaveModuleDialog-Ddp-HCFB.js","names":[],"sources":["../../../src/cloud/components/SaveModuleDialog.vue","../../../src/cloud/components/SaveModuleDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport {\n  EDITOR_KEY,\n  SAVED_MODULES_HEADLESS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport type { Block } from \"@aswin.dev/types\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { computed, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  preSelectedBlockId: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"saved\"): void;\n}>();\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"SaveModuleDialog\");\nconst savedModules = requireInject(\n  SAVED_MODULES_HEADLESS_KEY,\n  \"SaveModuleDialog\",\n);\n\nconst moduleName = ref(\"\");\nconst selectedBlockIds = ref<Set<string>>(new Set());\nconst isSaving = ref(false);\nconst error = ref<string | null>(null);\n\nconst topLevelBlocks = computed(() => editor.content.value.blocks);\n\nfunction blockLabel(block: Block, index: number): string {\n  const typeKey = block.type as keyof typeof t.blocks;\n  const label = t.blocks[typeKey] ?? block.type;\n  return `${label} ${index + 1}`;\n}\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      moduleName.value = \"\";\n      error.value = null;\n      selectedBlockIds.value = new Set(\n        props.preSelectedBlockId ? [props.preSelectedBlockId] : [],\n      );\n    }\n  },\n);\n\nfunction toggleBlock(blockId: string): void {\n  const newSet = new Set(selectedBlockIds.value);\n  if (newSet.has(blockId)) {\n    newSet.delete(blockId);\n  } else {\n    newSet.add(blockId);\n  }\n  selectedBlockIds.value = newSet;\n}\n\nconst canSave = computed(\n  () =>\n    moduleName.value.trim().length > 0 &&\n    selectedBlockIds.value.size > 0 &&\n    !isSaving.value,\n);\n\nasync function handleSave(): Promise<void> {\n  if (!canSave.value) return;\n\n  isSaving.value = true;\n  error.value = null;\n\n  try {\n    const selectedBlocks = topLevelBlocks.value.filter((b) =>\n      selectedBlockIds.value.has(b.id),\n    );\n    await savedModules.createModule(moduleName.value.trim(), selectedBlocks);\n    emit(\"saved\");\n    emit(\"close\");\n  } catch (err) {\n    error.value = (err as Error).message;\n  } finally {\n    isSaving.value = false;\n  }\n}\n\nfunction handleClose(): void {\n  if (!isSaving.value) {\n    emit(\"close\");\n  }\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSave();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSaving\"\n      aria-labelledby=\"tpl-save-module-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-save-module-title\"\n        class=\"tpl:mb-4 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ cloudT.modules.saveAsModule }}\n      </h3>\n\n      <!-- Module name -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.modules.moduleName }}\n        </label>\n        <input\n          v-model=\"moduleName\"\n          type=\"text\"\n          :placeholder=\"cloudT.modules.moduleNamePlaceholder\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSaving\"\n        />\n      </div>\n\n      <!-- Block selection -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.modules.selectBlocks }}\n        </label>\n        <div\n          class=\"tpl:max-h-40 tpl:space-y-1 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:p-2 tpl:border-[var(--tpl-border)]\"\n        >\n          <label\n            v-for=\"(block, index) in topLevelBlocks\"\n            :key=\"block.id\"\n            class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:rounded-sm tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:transition-colors tpl:duration-100\"\n            :style=\"{\n              color: 'var(--tpl-text)',\n              backgroundColor: selectedBlockIds.has(block.id)\n                ? 'var(--tpl-primary-light)'\n                : 'transparent',\n            }\"\n          >\n            <input\n              type=\"checkbox\"\n              :checked=\"selectedBlockIds.has(block.id)\"\n              class=\"tpl:accent-[var(--tpl-primary)]\"\n              :disabled=\"isSaving\"\n              @change=\"toggleBlock(block.id)\"\n            />\n            {{ blockLabel(block, index) }}\n          </label>\n        </div>\n      </div>\n\n      <!-- Error message -->\n      <p\n        v-if=\"error\"\n        role=\"alert\"\n        class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ error }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSaving\"\n          :class=\"{\n            'tpl:cursor-not-allowed tpl:opacity-50': isSaving,\n          }\"\n          @click=\"handleClose\"\n        >\n          {{ cloudT.modules.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          :disabled=\"!canSave\"\n          @click=\"handleSave\"\n        >\n          <span v-if=\"isSaving\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ cloudT.modules.saving }}\n          </span>\n          <span v-else>\n            {{ cloudT.modules.save }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport {\n  EDITOR_KEY,\n  SAVED_MODULES_HEADLESS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport type { Block } from \"@aswin.dev/types\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { computed, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  preSelectedBlockId: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"saved\"): void;\n}>();\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"SaveModuleDialog\");\nconst savedModules = requireInject(\n  SAVED_MODULES_HEADLESS_KEY,\n  \"SaveModuleDialog\",\n);\n\nconst moduleName = ref(\"\");\nconst selectedBlockIds = ref<Set<string>>(new Set());\nconst isSaving = ref(false);\nconst error = ref<string | null>(null);\n\nconst topLevelBlocks = computed(() => editor.content.value.blocks);\n\nfunction blockLabel(block: Block, index: number): string {\n  const typeKey = block.type as keyof typeof t.blocks;\n  const label = t.blocks[typeKey] ?? block.type;\n  return `${label} ${index + 1}`;\n}\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      moduleName.value = \"\";\n      error.value = null;\n      selectedBlockIds.value = new Set(\n        props.preSelectedBlockId ? [props.preSelectedBlockId] : [],\n      );\n    }\n  },\n);\n\nfunction toggleBlock(blockId: string): void {\n  const newSet = new Set(selectedBlockIds.value);\n  if (newSet.has(blockId)) {\n    newSet.delete(blockId);\n  } else {\n    newSet.add(blockId);\n  }\n  selectedBlockIds.value = newSet;\n}\n\nconst canSave = computed(\n  () =>\n    moduleName.value.trim().length > 0 &&\n    selectedBlockIds.value.size > 0 &&\n    !isSaving.value,\n);\n\nasync function handleSave(): Promise<void> {\n  if (!canSave.value) return;\n\n  isSaving.value = true;\n  error.value = null;\n\n  try {\n    const selectedBlocks = topLevelBlocks.value.filter((b) =>\n      selectedBlockIds.value.has(b.id),\n    );\n    await savedModules.createModule(moduleName.value.trim(), selectedBlocks);\n    emit(\"saved\");\n    emit(\"close\");\n  } catch (err) {\n    error.value = (err as Error).message;\n  } finally {\n    isSaving.value = false;\n  }\n}\n\nfunction handleClose(): void {\n  if (!isSaving.value) {\n    emit(\"close\");\n  }\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSave();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSaving\"\n      aria-labelledby=\"tpl-save-module-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-save-module-title\"\n        class=\"tpl:mb-4 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ cloudT.modules.saveAsModule }}\n      </h3>\n\n      <!-- Module name -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.modules.moduleName }}\n        </label>\n        <input\n          v-model=\"moduleName\"\n          type=\"text\"\n          :placeholder=\"cloudT.modules.moduleNamePlaceholder\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSaving\"\n        />\n      </div>\n\n      <!-- Block selection -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.modules.selectBlocks }}\n        </label>\n        <div\n          class=\"tpl:max-h-40 tpl:space-y-1 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:p-2 tpl:border-[var(--tpl-border)]\"\n        >\n          <label\n            v-for=\"(block, index) in topLevelBlocks\"\n            :key=\"block.id\"\n            class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:rounded-sm tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:transition-colors tpl:duration-100\"\n            :style=\"{\n              color: 'var(--tpl-text)',\n              backgroundColor: selectedBlockIds.has(block.id)\n                ? 'var(--tpl-primary-light)'\n                : 'transparent',\n            }\"\n          >\n            <input\n              type=\"checkbox\"\n              :checked=\"selectedBlockIds.has(block.id)\"\n              class=\"tpl:accent-[var(--tpl-primary)]\"\n              :disabled=\"isSaving\"\n              @change=\"toggleBlock(block.id)\"\n            />\n            {{ blockLabel(block, index) }}\n          </label>\n        </div>\n      </div>\n\n      <!-- Error message -->\n      <p\n        v-if=\"error\"\n        role=\"alert\"\n        class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ error }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSaving\"\n          :class=\"{\n            'tpl:cursor-not-allowed tpl:opacity-50': isSaving,\n          }\"\n          @click=\"handleClose\"\n        >\n          {{ cloudT.modules.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          :disabled=\"!canSave\"\n          @click=\"handleSave\"\n        >\n          <span v-if=\"isSaving\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ cloudT.modules.saving }}\n          </span>\n          <span v-else>\n            {{ cloudT.modules.save }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"SaveModuleDialog-COm3ptOF.js","names":[],"sources":["../../../src/cloud/components/SaveModuleDialog.vue","../../../src/cloud/components/SaveModuleDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport {\n  EDITOR_KEY,\n  SAVED_MODULES_HEADLESS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport type { Block } from \"@aswin.dev/types\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { computed, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  preSelectedBlockId: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"saved\"): void;\n}>();\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"SaveModuleDialog\");\nconst savedModules = requireInject(\n  SAVED_MODULES_HEADLESS_KEY,\n  \"SaveModuleDialog\",\n);\n\nconst moduleName = ref(\"\");\nconst selectedBlockIds = ref<Set<string>>(new Set());\nconst isSaving = ref(false);\nconst error = ref<string | null>(null);\n\nconst topLevelBlocks = computed(() => editor.content.value.blocks);\n\nfunction blockLabel(block: Block, index: number): string {\n  const typeKey = block.type as keyof typeof t.blocks;\n  const label = t.blocks[typeKey] ?? block.type;\n  return `${label} ${index + 1}`;\n}\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      moduleName.value = \"\";\n      error.value = null;\n      selectedBlockIds.value = new Set(\n        props.preSelectedBlockId ? [props.preSelectedBlockId] : [],\n      );\n    }\n  },\n);\n\nfunction toggleBlock(blockId: string): void {\n  const newSet = new Set(selectedBlockIds.value);\n  if (newSet.has(blockId)) {\n    newSet.delete(blockId);\n  } else {\n    newSet.add(blockId);\n  }\n  selectedBlockIds.value = newSet;\n}\n\nconst canSave = computed(\n  () =>\n    moduleName.value.trim().length > 0 &&\n    selectedBlockIds.value.size > 0 &&\n    !isSaving.value,\n);\n\nasync function handleSave(): Promise<void> {\n  if (!canSave.value) return;\n\n  isSaving.value = true;\n  error.value = null;\n\n  try {\n    const selectedBlocks = topLevelBlocks.value.filter((b) =>\n      selectedBlockIds.value.has(b.id),\n    );\n    await savedModules.createModule(moduleName.value.trim(), selectedBlocks);\n    emit(\"saved\");\n    emit(\"close\");\n  } catch (err) {\n    error.value = (err as Error).message;\n  } finally {\n    isSaving.value = false;\n  }\n}\n\nfunction handleClose(): void {\n  if (!isSaving.value) {\n    emit(\"close\");\n  }\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSave();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSaving\"\n      aria-labelledby=\"tpl-save-module-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-save-module-title\"\n        class=\"tpl:mb-4 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ cloudT.modules.saveAsModule }}\n      </h3>\n\n      <!-- Module name -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.modules.moduleName }}\n        </label>\n        <input\n          v-model=\"moduleName\"\n          type=\"text\"\n          :placeholder=\"cloudT.modules.moduleNamePlaceholder\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSaving\"\n        />\n      </div>\n\n      <!-- Block selection -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.modules.selectBlocks }}\n        </label>\n        <div\n          class=\"tpl:max-h-40 tpl:space-y-1 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:p-2 tpl:border-[var(--tpl-border)]\"\n        >\n          <label\n            v-for=\"(block, index) in topLevelBlocks\"\n            :key=\"block.id\"\n            class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:rounded-sm tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:transition-colors tpl:duration-100\"\n            :style=\"{\n              color: 'var(--tpl-text)',\n              backgroundColor: selectedBlockIds.has(block.id)\n                ? 'var(--tpl-primary-light)'\n                : 'transparent',\n            }\"\n          >\n            <input\n              type=\"checkbox\"\n              :checked=\"selectedBlockIds.has(block.id)\"\n              class=\"tpl:accent-[var(--tpl-primary)]\"\n              :disabled=\"isSaving\"\n              @change=\"toggleBlock(block.id)\"\n            />\n            {{ blockLabel(block, index) }}\n          </label>\n        </div>\n      </div>\n\n      <!-- Error message -->\n      <p\n        v-if=\"error\"\n        role=\"alert\"\n        class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ error }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSaving\"\n          :class=\"{\n            'tpl:cursor-not-allowed tpl:opacity-50': isSaving,\n          }\"\n          @click=\"handleClose\"\n        >\n          {{ cloudT.modules.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          :disabled=\"!canSave\"\n          @click=\"handleSave\"\n        >\n          <span v-if=\"isSaving\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ cloudT.modules.saving }}\n          </span>\n          <span v-else>\n            {{ cloudT.modules.save }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport {\n  EDITOR_KEY,\n  SAVED_MODULES_HEADLESS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport type { Block } from \"@aswin.dev/types\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { computed, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  preSelectedBlockId: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n  (e: \"saved\"): void;\n}>();\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"SaveModuleDialog\");\nconst savedModules = requireInject(\n  SAVED_MODULES_HEADLESS_KEY,\n  \"SaveModuleDialog\",\n);\n\nconst moduleName = ref(\"\");\nconst selectedBlockIds = ref<Set<string>>(new Set());\nconst isSaving = ref(false);\nconst error = ref<string | null>(null);\n\nconst topLevelBlocks = computed(() => editor.content.value.blocks);\n\nfunction blockLabel(block: Block, index: number): string {\n  const typeKey = block.type as keyof typeof t.blocks;\n  const label = t.blocks[typeKey] ?? block.type;\n  return `${label} ${index + 1}`;\n}\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      moduleName.value = \"\";\n      error.value = null;\n      selectedBlockIds.value = new Set(\n        props.preSelectedBlockId ? [props.preSelectedBlockId] : [],\n      );\n    }\n  },\n);\n\nfunction toggleBlock(blockId: string): void {\n  const newSet = new Set(selectedBlockIds.value);\n  if (newSet.has(blockId)) {\n    newSet.delete(blockId);\n  } else {\n    newSet.add(blockId);\n  }\n  selectedBlockIds.value = newSet;\n}\n\nconst canSave = computed(\n  () =>\n    moduleName.value.trim().length > 0 &&\n    selectedBlockIds.value.size > 0 &&\n    !isSaving.value,\n);\n\nasync function handleSave(): Promise<void> {\n  if (!canSave.value) return;\n\n  isSaving.value = true;\n  error.value = null;\n\n  try {\n    const selectedBlocks = topLevelBlocks.value.filter((b) =>\n      selectedBlockIds.value.has(b.id),\n    );\n    await savedModules.createModule(moduleName.value.trim(), selectedBlocks);\n    emit(\"saved\");\n    emit(\"close\");\n  } catch (err) {\n    error.value = (err as Error).message;\n  } finally {\n    isSaving.value = false;\n  }\n}\n\nfunction handleClose(): void {\n  if (!isSaving.value) {\n    emit(\"close\");\n  }\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSave();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSaving\"\n      aria-labelledby=\"tpl-save-module-title\"\n      class=\"tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-save-module-title\"\n        class=\"tpl:mb-4 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ cloudT.modules.saveAsModule }}\n      </h3>\n\n      <!-- Module name -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.modules.moduleName }}\n        </label>\n        <input\n          v-model=\"moduleName\"\n          type=\"text\"\n          :placeholder=\"cloudT.modules.moduleNamePlaceholder\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSaving\"\n        />\n      </div>\n\n      <!-- Block selection -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.modules.selectBlocks }}\n        </label>\n        <div\n          class=\"tpl:max-h-40 tpl:space-y-1 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:p-2 tpl:border-[var(--tpl-border)]\"\n        >\n          <label\n            v-for=\"(block, index) in topLevelBlocks\"\n            :key=\"block.id\"\n            class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:rounded-sm tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:transition-colors tpl:duration-100\"\n            :style=\"{\n              color: 'var(--tpl-text)',\n              backgroundColor: selectedBlockIds.has(block.id)\n                ? 'var(--tpl-primary-light)'\n                : 'transparent',\n            }\"\n          >\n            <input\n              type=\"checkbox\"\n              :checked=\"selectedBlockIds.has(block.id)\"\n              class=\"tpl:accent-[var(--tpl-primary)]\"\n              :disabled=\"isSaving\"\n              @change=\"toggleBlock(block.id)\"\n            />\n            {{ blockLabel(block, index) }}\n          </label>\n        </div>\n      </div>\n\n      <!-- Error message -->\n      <p\n        v-if=\"error\"\n        role=\"alert\"\n        class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ error }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSaving\"\n          :class=\"{\n            'tpl:cursor-not-allowed tpl:opacity-50': isSaving,\n          }\"\n          @click=\"handleClose\"\n        >\n          {{ cloudT.modules.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          :disabled=\"!canSave\"\n          @click=\"handleSave\"\n        >\n          <span v-if=\"isSaving\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ cloudT.modules.saving }}\n          </span>\n          <span v-else>\n            {{ cloudT.modules.save }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{SlidingPillSelect-CS6N3vGq.js → SlidingPillSelect-DlgRynQN.js}

@@ -1,5 +1,5 @@
 import { C as e, I as t, L as n, P as r, W as i, _ as a, b as o, ct as s, dt as c, f as l, ft as u, g as d, h as f, m as p, n as ee, tt as m, u as h, ut as g, v as _, x as v, z as y } from "./draggable-C-1_gch3.js";
-import { Vt as te, pn as ne } from "./features-BZeMkHMs.js";
+import { Vt as te, mn as ne } from "./features-BHTP4oRU.js";
 import { h as b, i as x, m as S, p as C, u as w } from "./styleConstants-DfcU8u_r.js";
 //#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
 var T = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, E = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
@@ -436,4 +436,4 @@ var de = [
 //#endregion
 export { me as a, _e as i, Se as n, ye as r, Te as t };
 
-//# sourceMappingURL=SlidingPillSelect-CS6N3vGq.js.map
+//# sourceMappingURL=SlidingPillSelect-DlgRynQN.js.map

package/dist/cdn/chunks/{SlidingPillSelect-CS6N3vGq.js.map → SlidingPillSelect-DlgRynQN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SlidingPillSelect-CS6N3vGq.js","names":["css","hueCss","saturationCss"],"sources":["../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/convert.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/compare.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/dom.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/slider.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/hue.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/saturation.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/color-picker.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/hue.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/saturation.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/color-picker.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/entrypoints/hex.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/hex-color-picker.js","../../../src/components/ColorPicker.vue","../../../src/components/ColorPicker.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/SlidingPillSelect.vue"],"sourcesContent":["// Clamps a value between an upper and lower bound.\n// We use ternary operators because it makes the minified code\n// 2 times shorter then `Math.min(Math.max(a,b),c)`\nexport const clamp = (number, min = 0, max = 1) => {\n    return number > max ? max : number < min ? min : number;\n};\nexport const round = (number, digits = 0, base = Math.pow(10, digits)) => {\n    return Math.round(base * number) / base;\n};\n//# sourceMappingURL=math.js.map","import { round } from './math.js';\n/**\n * Valid CSS <angle> units.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/angle\n */\nconst angleUnits = {\n    grad: 360 / 400,\n    turn: 360,\n    rad: 360 / (Math.PI * 2)\n};\nexport const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));\nexport const hexToRgba = (hex) => {\n    if (hex[0] === '#')\n        hex = hex.substring(1);\n    if (hex.length < 6) {\n        return {\n            r: parseInt(hex[0] + hex[0], 16),\n            g: parseInt(hex[1] + hex[1], 16),\n            b: parseInt(hex[2] + hex[2], 16),\n            a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1\n        };\n    }\n    return {\n        r: parseInt(hex.substring(0, 2), 16),\n        g: parseInt(hex.substring(2, 4), 16),\n        b: parseInt(hex.substring(4, 6), 16),\n        a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1\n    };\n};\nexport const parseHue = (value, unit = 'deg') => {\n    return Number(value) * (angleUnits[unit] || 1);\n};\nexport const hslaStringToHsva = (hslString) => {\n    const matcher = /hsla?\\(?\\s*(-?\\d*\\.?\\d+)(deg|rad|grad|turn)?[,\\s]+(-?\\d*\\.?\\d+)%?[,\\s]+(-?\\d*\\.?\\d+)%?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n    const match = matcher.exec(hslString);\n    if (!match)\n        return { h: 0, s: 0, v: 0, a: 1 };\n    return hslaToHsva({\n        h: parseHue(match[1], match[2]),\n        s: Number(match[3]),\n        l: Number(match[4]),\n        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n    });\n};\nexport const hslStringToHsva = hslaStringToHsva;\nexport const hslaToHsva = ({ h, s, l, a }) => {\n    s *= (l < 50 ? l : 100 - l) / 100;\n    return {\n        h: h,\n        s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,\n        v: l + s,\n        a\n    };\n};\nexport const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));\nexport const hsvaToHsla = ({ h, s, v, a }) => {\n    const hh = ((200 - s) * v) / 100;\n    return {\n        h: round(h),\n        s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),\n        l: round(hh / 2),\n        a: round(a, 2)\n    };\n};\nexport const hsvaToHsvString = (hsva) => {\n    const { h, s, v } = roundHsva(hsva);\n    return `hsv(${h}, ${s}%, ${v}%)`;\n};\nexport const hsvaToHsvaString = (hsva) => {\n    const { h, s, v, a } = roundHsva(hsva);\n    return `hsva(${h}, ${s}%, ${v}%, ${a})`;\n};\nexport const hsvaToHslString = (hsva) => {\n    const { h, s, l } = hsvaToHsla(hsva);\n    return `hsl(${h}, ${s}%, ${l}%)`;\n};\nexport const hsvaToHslaString = (hsva) => {\n    const { h, s, l, a } = hsvaToHsla(hsva);\n    return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n};\nexport const hsvaToRgba = ({ h, s, v, a }) => {\n    h = (h / 360) * 6;\n    s = s / 100;\n    v = v / 100;\n    const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;\n    return {\n        r: round([v, c, b, b, d, v][module] * 255),\n        g: round([d, v, v, c, b, b][module] * 255),\n        b: round([b, b, d, v, v, c][module] * 255),\n        a: round(a, 2)\n    };\n};\nexport const hsvaToRgbString = (hsva) => {\n    const { r, g, b } = hsvaToRgba(hsva);\n    return `rgb(${r}, ${g}, ${b})`;\n};\nexport const hsvaToRgbaString = (hsva) => {\n    const { r, g, b, a } = hsvaToRgba(hsva);\n    return `rgba(${r}, ${g}, ${b}, ${a})`;\n};\nexport const hsvaStringToHsva = (hsvString) => {\n    const matcher = /hsva?\\(?\\s*(-?\\d*\\.?\\d+)(deg|rad|grad|turn)?[,\\s]+(-?\\d*\\.?\\d+)%?[,\\s]+(-?\\d*\\.?\\d+)%?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n    const match = matcher.exec(hsvString);\n    if (!match)\n        return { h: 0, s: 0, v: 0, a: 1 };\n    return roundHsva({\n        h: parseHue(match[1], match[2]),\n        s: Number(match[3]),\n        v: Number(match[4]),\n        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n    });\n};\nexport const hsvStringToHsva = hsvaStringToHsva;\nexport const rgbaStringToHsva = (rgbaString) => {\n    const matcher = /rgba?\\(?\\s*(-?\\d*\\.?\\d+)(%)?[,\\s]+(-?\\d*\\.?\\d+)(%)?[,\\s]+(-?\\d*\\.?\\d+)(%)?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n    const match = matcher.exec(rgbaString);\n    if (!match)\n        return { h: 0, s: 0, v: 0, a: 1 };\n    return rgbaToHsva({\n        r: Number(match[1]) / (match[2] ? 100 / 255 : 1),\n        g: Number(match[3]) / (match[4] ? 100 / 255 : 1),\n        b: Number(match[5]) / (match[6] ? 100 / 255 : 1),\n        a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1)\n    });\n};\nexport const rgbStringToHsva = rgbaStringToHsva;\nconst format = (number) => {\n    const hex = number.toString(16);\n    return hex.length < 2 ? '0' + hex : hex;\n};\nexport const rgbaToHex = ({ r, g, b, a }) => {\n    const alphaHex = a < 1 ? format(round(a * 255)) : '';\n    return '#' + format(r) + format(g) + format(b) + alphaHex;\n};\nexport const rgbaToHsva = ({ r, g, b, a }) => {\n    const max = Math.max(r, g, b);\n    const delta = max - Math.min(r, g, b);\n    // prettier-ignore\n    const hh = delta\n        ? max === r\n            ? (g - b) / delta\n            : max === g\n                ? 2 + (b - r) / delta\n                : 4 + (r - g) / delta\n        : 0;\n    return {\n        h: round(60 * (hh < 0 ? hh + 6 : hh)),\n        s: round(max ? (delta / max) * 100 : 0),\n        v: round((max / 255) * 100),\n        a\n    };\n};\nexport const roundHsva = (hsva) => ({\n    h: round(hsva.h),\n    s: round(hsva.s),\n    v: round(hsva.v),\n    a: round(hsva.a, 2)\n});\nexport const rgbaToRgb = ({ r, g, b }) => ({ r, g, b });\nexport const hslaToHsl = ({ h, s, l }) => ({ h, s, l });\nexport const hsvaToHsv = (hsva) => {\n    const { h, s, v } = roundHsva(hsva);\n    return { h, s, v };\n};\n//# sourceMappingURL=convert.js.map","import { hexToRgba } from './convert.js';\nexport const equalColorObjects = (first, second) => {\n    if (first === second)\n        return true;\n    for (const prop in first) {\n        // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)\n        // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)\n        // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,\n        // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if\n        // there is or not), and then as a type TS can iterate over.\n        if (first[prop] !==\n            second[prop])\n            return false;\n    }\n    return true;\n};\nexport const equalColorString = (first, second) => {\n    return first.replace(/\\s/g, '') === second.replace(/\\s/g, '');\n};\nexport const equalHex = (first, second) => {\n    if (first.toLowerCase() === second.toLowerCase())\n        return true;\n    // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects\n    return equalColorObjects(hexToRgba(first), hexToRgba(second));\n};\n//# sourceMappingURL=compare.js.map","const cache = {};\nexport const tpl = (html) => {\n    let template = cache[html];\n    if (!template) {\n        template = document.createElement('template');\n        template.innerHTML = html;\n        cache[html] = template;\n    }\n    return template;\n};\nexport const fire = (target, type, detail) => {\n    target.dispatchEvent(new CustomEvent(type, {\n        bubbles: true,\n        detail\n    }));\n};\n//# sourceMappingURL=dom.js.map","import { fire, tpl } from '../utils/dom.js';\nimport { clamp } from '../utils/math.js';\nlet hasTouched = false;\n// Check if an event was triggered by touch\nconst isTouch = (e) => 'touches' in e;\n// Prevent mobile browsers from handling mouse events (conflicting with touch ones).\n// If we detected a touch interaction before, we prefer reacting to touch events only.\nconst isValid = (event) => {\n    if (hasTouched && !isTouch(event))\n        return false;\n    if (!hasTouched)\n        hasTouched = isTouch(event);\n    return true;\n};\nconst pointerMove = (target, event) => {\n    const pointer = isTouch(event) ? event.touches[0] : event;\n    const rect = target.el.getBoundingClientRect();\n    fire(target.el, 'move', target.getMove({\n        x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),\n        y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)\n    }));\n};\nconst keyMove = (target, event) => {\n    // We use `keyCode` instead of `key` to reduce the size of the library.\n    const keyCode = event.keyCode;\n    // Ignore all keys except arrow ones, Page Up, Page Down, Home and End.\n    if (keyCode > 40 || (target.xy && keyCode < 37) || keyCode < 33)\n        return;\n    // Do not scroll page by keys when color picker element has focus.\n    event.preventDefault();\n    // Send relative offset to the parent component.\n    fire(target.el, 'move', target.getMove({\n        x: keyCode === 39 // Arrow Right\n            ? 0.01\n            : keyCode === 37 // Arrow Left\n                ? -0.01\n                : keyCode === 34 // Page Down\n                    ? 0.05\n                    : keyCode === 33 // Page Up\n                        ? -0.05\n                        : keyCode === 35 // End\n                            ? 1\n                            : keyCode === 36 // Home\n                                ? -1\n                                : 0,\n        y: keyCode === 40 // Arrow down\n            ? 0.01\n            : keyCode === 38 // Arrow Up\n                ? -0.01\n                : 0\n    }, true));\n};\nexport class Slider {\n    constructor(root, part, aria, xy) {\n        const template = tpl(`<div role=\"slider\" tabindex=\"0\" part=\"${part}\" ${aria}><div part=\"${part}-pointer\"></div></div>`);\n        root.appendChild(template.content.cloneNode(true));\n        const el = root.querySelector(`[part=${part}]`);\n        el.addEventListener('mousedown', this);\n        el.addEventListener('touchstart', this);\n        el.addEventListener('keydown', this);\n        this.el = el;\n        this.xy = xy;\n        this.nodes = [el.firstChild, el];\n    }\n    set dragging(state) {\n        const toggleEvent = state ? document.addEventListener : document.removeEventListener;\n        toggleEvent(hasTouched ? 'touchmove' : 'mousemove', this);\n        toggleEvent(hasTouched ? 'touchend' : 'mouseup', this);\n    }\n    handleEvent(event) {\n        switch (event.type) {\n            case 'mousedown':\n            case 'touchstart':\n                event.preventDefault();\n                // event.button is 0 in mousedown for left button activation\n                if (!isValid(event) || (!hasTouched && event.button != 0))\n                    return;\n                this.el.focus();\n                pointerMove(this, event);\n                this.dragging = true;\n                break;\n            case 'mousemove':\n            case 'touchmove':\n                event.preventDefault();\n                pointerMove(this, event);\n                break;\n            case 'mouseup':\n            case 'touchend':\n                this.dragging = false;\n                break;\n            case 'keydown':\n                keyMove(this, event);\n                break;\n        }\n    }\n    style(styles) {\n        styles.forEach((style, i) => {\n            for (const p in style) {\n                this.nodes[i].style.setProperty(p, style[p]);\n            }\n        });\n    }\n}\n//# sourceMappingURL=slider.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Hue extends Slider {\n    constructor(root) {\n        super(root, 'hue', 'aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"', false);\n    }\n    update({ h }) {\n        this.h = h;\n        this.style([\n            {\n                left: `${(h / 360) * 100}%`,\n                color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })\n            }\n        ]);\n        this.el.setAttribute('aria-valuenow', `${round(h)}`);\n    }\n    getMove(offset, key) {\n        // Hue measured in degrees of the color circle ranging from 0 to 360\n        return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };\n    }\n}\n//# sourceMappingURL=hue.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Saturation extends Slider {\n    constructor(root) {\n        super(root, 'saturation', 'aria-label=\"Color\"', true);\n    }\n    update(hsva) {\n        this.hsva = hsva;\n        this.style([\n            {\n                top: `${100 - hsva.v}%`,\n                left: `${hsva.s}%`,\n                color: hsvaToHslString(hsva)\n            },\n            {\n                'background-color': hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 })\n            }\n        ]);\n        this.el.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);\n    }\n    getMove(offset, key) {\n        // Saturation and brightness always fit into [0, 100] range\n        return {\n            s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,\n            v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)\n        };\n    }\n}\n//# sourceMappingURL=saturation.js.map","export default `: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)}`;\n//# sourceMappingURL=color-picker.js.map","export default `[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}`;\n//# sourceMappingURL=hue.js.map","export default `[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}`;\n//# sourceMappingURL=saturation.js.map","import { equalColorObjects } from '../utils/compare.js';\nimport { fire, tpl } from '../utils/dom.js';\nimport { Hue } from './hue.js';\nimport { Saturation } from './saturation.js';\nimport css from '../styles/color-picker.js';\nimport hueCss from '../styles/hue.js';\nimport saturationCss from '../styles/saturation.js';\nconst $isSame = Symbol('same');\nconst $color = Symbol('color');\nconst $hsva = Symbol('hsva');\nconst $update = Symbol('update');\nconst $parts = Symbol('parts');\nexport const $css = Symbol('css');\nexport const $sliders = Symbol('sliders');\nexport class ColorPicker extends HTMLElement {\n    static get observedAttributes() {\n        return ['color'];\n    }\n    get [$css]() {\n        return [css, hueCss, saturationCss];\n    }\n    get [$sliders]() {\n        return [Saturation, Hue];\n    }\n    get color() {\n        return this[$color];\n    }\n    set color(newColor) {\n        if (!this[$isSame](newColor)) {\n            const newHsva = this.colorModel.toHsva(newColor);\n            this[$update](newHsva);\n            this[$color] = newColor;\n        }\n    }\n    constructor() {\n        super();\n        const template = tpl(`<style>${this[$css].join('')}</style>`);\n        const root = this.attachShadow({ mode: 'open' });\n        root.appendChild(template.content.cloneNode(true));\n        root.addEventListener('move', this);\n        this[$parts] = this[$sliders].map((slider) => new slider(root));\n    }\n    connectedCallback() {\n        // A user may set a property on an _instance_ of an element,\n        // before its prototype has been connected to this class.\n        // If so, we need to run it through the proper class setter.\n        if (this.hasOwnProperty('color')) {\n            const value = this.color;\n            delete this['color'];\n            this.color = value;\n        }\n        else if (!this.color) {\n            this.color = this.colorModel.defaultColor;\n        }\n    }\n    attributeChangedCallback(_attr, _oldVal, newVal) {\n        const color = this.colorModel.fromAttr(newVal);\n        if (!this[$isSame](color)) {\n            this.color = color;\n        }\n    }\n    handleEvent(event) {\n        // Merge the current HSV color object with updated params.\n        const oldHsva = this[$hsva];\n        const newHsva = { ...oldHsva, ...event.detail };\n        this[$update](newHsva);\n        let newColor;\n        if (!equalColorObjects(newHsva, oldHsva) &&\n            !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) {\n            this[$color] = newColor;\n            fire(this, 'color-changed', { value: newColor });\n        }\n    }\n    [$isSame](color) {\n        return this.color && this.colorModel.equal(color, this.color);\n    }\n    [$update](hsva) {\n        this[$hsva] = hsva;\n        this[$parts].forEach((part) => part.update(hsva));\n    }\n}\n//# sourceMappingURL=color-picker.js.map","import { ColorPicker } from '../components/color-picker.js';\nimport { hexToHsva, hsvaToHex } from '../utils/convert.js';\nimport { equalHex } from '../utils/compare.js';\nconst colorModel = {\n    defaultColor: '#000',\n    toHsva: hexToHsva,\n    fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),\n    equal: equalHex,\n    fromAttr: (color) => color\n};\nexport class HexBase extends ColorPicker {\n    get colorModel() {\n        return colorModel;\n    }\n}\n//# sourceMappingURL=hex.js.map","import { HexBase } from './lib/entrypoints/hex.js';\n/**\n * A color picker custom element that uses HEX format.\n *\n * @element hex-color-picker\n *\n * @prop {string} color - Selected color in HEX format.\n * @attr {string} color - Selected color in HEX format.\n *\n * @fires color-changed - Event fired when color property changes.\n *\n * @csspart hue - A hue selector container.\n * @csspart saturation - A saturation selector container\n * @csspart hue-pointer - A hue pointer element.\n * @csspart saturation-pointer - A saturation pointer element.\n */\nexport class HexColorPicker extends HexBase {\n}\ncustomElements.define('hex-color-picker', HexColorPicker);\n//# sourceMappingURL=hex-color-picker.js.map","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n  colorTextClass,\n  DEFAULT_TEXT_COLOR,\n} from \"../constants/styleConstants\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    placeholder?: string;\n    size?: \"default\" | \"large\";\n    swatchOnly?: boolean;\n    disabled?: boolean;\n  }>(),\n  {\n    placeholder: DEFAULT_TEXT_COLOR,\n    size: \"default\",\n    swatchOnly: false,\n    disabled: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst { t } = useI18n();\n\nconst open = ref(false);\nconst popoverRef = ref<HTMLElement>();\nconst swatchRef = ref<HTMLElement>();\n\nonClickOutside(\n  popoverRef,\n  () => {\n    open.value = false;\n  },\n  { ignore: [swatchRef] },\n);\n\nconst internalColor = computed({\n  get: () => props.modelValue || DEFAULT_TEXT_COLOR,\n  set: (val) => emit(\"update:modelValue\", val),\n});\n\nfunction onPickerChange(e: Event) {\n  internalColor.value = (e as CustomEvent).detail.value;\n}\n\nfunction onTextInput(e: Event) {\n  internalColor.value = (e.target as HTMLInputElement).value;\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tpl:flex tpl:gap-2 tpl:relative tpl:w-full tpl:min-w-0',\n      disabled && 'tpl:opacity-60 tpl:cursor-not-allowed',\n    ]\"\n  >\n    <button\n      ref=\"swatchRef\"\n      type=\"button\"\n      :disabled=\"disabled\"\n      :aria-label=\"t.colorPicker.pickColor\"\n      :aria-expanded=\"open\"\n      :class=\"[\n        '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)]',\n        disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n        open\n          ? 'tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]'\n          : !disabled && 'hover:tpl:border-[var(--tpl-text-dim)]',\n        size === 'large' ? 'tpl:size-12' : 'tpl:size-10',\n      ]\"\n      @click=\"!disabled && (open = !open)\"\n    >\n      <span\n        class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n        :style=\"{ backgroundColor: internalColor }\"\n      />\n    </button>\n    <input\n      v-if=\"!swatchOnly\"\n      type=\"text\"\n      :class=\"colorTextClass\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-label=\"t.colorPicker.hexValue\"\n      @input=\"onTextInput\"\n    />\n    <Transition\n      enter-active-class=\"tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n      enter-from-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n      enter-to-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n      leave-active-class=\"tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n      leave-from-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n      leave-to-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n    >\n      <div\n        v-if=\"open\"\n        ref=\"popoverRef\"\n        class=\"tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg\"\n      >\n        <hex-color-picker\n          :color=\"internalColor\"\n          :aria-label=\"t.colorPicker.pickColor\"\n          @color-changed=\"onPickerChange\"\n          @keydown.escape=\"open = false\"\n        />\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style>\nhex-color-picker {\n  --hcp-width: 200px;\n}\n\nhex-color-picker::part(hue) {\n  border-radius: var(--tpl-radius-sm, 7px);\n}\n\nhex-color-picker::part(saturation) {\n  border-radius: var(--tpl-radius-sm, 7px) var(--tpl-radius-sm, 7px) 0 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n  colorTextClass,\n  DEFAULT_TEXT_COLOR,\n} from \"../constants/styleConstants\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    placeholder?: string;\n    size?: \"default\" | \"large\";\n    swatchOnly?: boolean;\n    disabled?: boolean;\n  }>(),\n  {\n    placeholder: DEFAULT_TEXT_COLOR,\n    size: \"default\",\n    swatchOnly: false,\n    disabled: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst { t } = useI18n();\n\nconst open = ref(false);\nconst popoverRef = ref<HTMLElement>();\nconst swatchRef = ref<HTMLElement>();\n\nonClickOutside(\n  popoverRef,\n  () => {\n    open.value = false;\n  },\n  { ignore: [swatchRef] },\n);\n\nconst internalColor = computed({\n  get: () => props.modelValue || DEFAULT_TEXT_COLOR,\n  set: (val) => emit(\"update:modelValue\", val),\n});\n\nfunction onPickerChange(e: Event) {\n  internalColor.value = (e as CustomEvent).detail.value;\n}\n\nfunction onTextInput(e: Event) {\n  internalColor.value = (e.target as HTMLInputElement).value;\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tpl:flex tpl:gap-2 tpl:relative tpl:w-full tpl:min-w-0',\n      disabled && 'tpl:opacity-60 tpl:cursor-not-allowed',\n    ]\"\n  >\n    <button\n      ref=\"swatchRef\"\n      type=\"button\"\n      :disabled=\"disabled\"\n      :aria-label=\"t.colorPicker.pickColor\"\n      :aria-expanded=\"open\"\n      :class=\"[\n        '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)]',\n        disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n        open\n          ? 'tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]'\n          : !disabled && 'hover:tpl:border-[var(--tpl-text-dim)]',\n        size === 'large' ? 'tpl:size-12' : 'tpl:size-10',\n      ]\"\n      @click=\"!disabled && (open = !open)\"\n    >\n      <span\n        class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n        :style=\"{ backgroundColor: internalColor }\"\n      />\n    </button>\n    <input\n      v-if=\"!swatchOnly\"\n      type=\"text\"\n      :class=\"colorTextClass\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-label=\"t.colorPicker.hexValue\"\n      @input=\"onTextInput\"\n    />\n    <Transition\n      enter-active-class=\"tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n      enter-from-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n      enter-to-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n      leave-active-class=\"tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n      leave-from-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n      leave-to-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n    >\n      <div\n        v-if=\"open\"\n        ref=\"popoverRef\"\n        class=\"tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg\"\n      >\n        <hex-color-picker\n          :color=\"internalColor\"\n          :aria-label=\"t.colorPicker.pickColor\"\n          @color-changed=\"onPickerChange\"\n          @keydown.escape=\"open = false\"\n        />\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style>\nhex-color-picker {\n  --hcp-width: 200px;\n}\n\nhex-color-picker::part(hue) {\n  border-radius: var(--tpl-radius-sm, 7px);\n}\n\nhex-color-picker::part(saturation) {\n  border-radius: var(--tpl-radius-sm, 7px) var(--tpl-radius-sm, 7px) 0 0;\n}\n</style>\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\">\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 { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n  label?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:mb-3.5\">\n    <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n  label?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:mb-3.5\">\n    <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  inputGroupInputClass,\n  inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n  modelValue: number;\n  min?: number;\n  max?: number;\n  suffix: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:items-stretch\">\n    <input\n      type=\"number\"\n      :class=\"inputGroupInputClass\"\n      :value=\"modelValue\"\n      :min=\"min\"\n      :max=\"max\"\n      @input=\"\n        emit(\n          'update:modelValue',\n          Number(($event.target as HTMLInputElement).value),\n        )\n      \"\n    />\n    <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  inputGroupInputClass,\n  inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n  modelValue: number;\n  min?: number;\n  max?: number;\n  suffix: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:items-stretch\">\n    <input\n      type=\"number\"\n      :class=\"inputGroupInputClass\"\n      :value=\"modelValue\"\n      :min=\"min\"\n      :max=\"max\"\n      @input=\"\n        emit(\n          'update:modelValue',\n          Number(($event.target as HTMLInputElement).value),\n        )\n      \"\n    />\n    <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n  value: string;\n  label: string;\n  icon?: Component;\n}\n\nconst props = defineProps<{\n  options: PillOption[];\n  modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n  props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n  () => `translateX(${Math.max(selectedIndex.value, 0) * 100}%)`,\n);\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill — hidden when modelValue matches no option,\n         otherwise it would silently sit on the first option and create\n         a visual mismatch with aria-checked. -->\n    <div\n      v-if=\"selectedIndex >= 0\"\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${options.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      role=\"radio\"\n      :aria-checked=\"modelValue === option.value\"\n      :aria-label=\"option.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          modelValue === option.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"option.label\"\n      @click=\"emit('update:modelValue', option.value)\"\n    >\n      <component\n        :is=\"option.icon\"\n        v-if=\"option.icon\"\n        :size=\"14\"\n        :stroke-width=\"2\"\n      />\n      <span v-else>{{ option.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n  value: string;\n  label: string;\n  icon?: Component;\n}\n\nconst props = defineProps<{\n  options: PillOption[];\n  modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n  props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n  () => `translateX(${Math.max(selectedIndex.value, 0) * 100}%)`,\n);\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill — hidden when modelValue matches no option,\n         otherwise it would silently sit on the first option and create\n         a visual mismatch with aria-checked. -->\n    <div\n      v-if=\"selectedIndex >= 0\"\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${options.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      role=\"radio\"\n      :aria-checked=\"modelValue === option.value\"\n      :aria-label=\"option.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          modelValue === option.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"option.label\"\n      @click=\"emit('update:modelValue', option.value)\"\n    >\n      <component\n        :is=\"option.icon\"\n        v-if=\"option.icon\"\n        :size=\"14\"\n        :stroke-width=\"2\"\n      />\n      <span v-else>{{ option.label }}</span>\n    </button>\n  </div>\n</template>\n"],"x_google_ignoreList":[0,1,2,3,4,5,6,7,8,9,10,11,12],"mappings":"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"}
+{"version":3,"file":"SlidingPillSelect-DlgRynQN.js","names":["css","hueCss","saturationCss"],"sources":["../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/convert.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/compare.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/dom.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/slider.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/hue.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/saturation.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/color-picker.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/hue.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/saturation.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/color-picker.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/entrypoints/hex.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/hex-color-picker.js","../../../src/components/ColorPicker.vue","../../../src/components/ColorPicker.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/SlidingPillSelect.vue"],"sourcesContent":["// Clamps a value between an upper and lower bound.\n// We use ternary operators because it makes the minified code\n// 2 times shorter then `Math.min(Math.max(a,b),c)`\nexport const clamp = (number, min = 0, max = 1) => {\n    return number > max ? max : number < min ? min : number;\n};\nexport const round = (number, digits = 0, base = Math.pow(10, digits)) => {\n    return Math.round(base * number) / base;\n};\n//# sourceMappingURL=math.js.map","import { round } from './math.js';\n/**\n * Valid CSS <angle> units.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/angle\n */\nconst angleUnits = {\n    grad: 360 / 400,\n    turn: 360,\n    rad: 360 / (Math.PI * 2)\n};\nexport const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));\nexport const hexToRgba = (hex) => {\n    if (hex[0] === '#')\n        hex = hex.substring(1);\n    if (hex.length < 6) {\n        return {\n            r: parseInt(hex[0] + hex[0], 16),\n            g: parseInt(hex[1] + hex[1], 16),\n            b: parseInt(hex[2] + hex[2], 16),\n            a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1\n        };\n    }\n    return {\n        r: parseInt(hex.substring(0, 2), 16),\n        g: parseInt(hex.substring(2, 4), 16),\n        b: parseInt(hex.substring(4, 6), 16),\n        a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1\n    };\n};\nexport const parseHue = (value, unit = 'deg') => {\n    return Number(value) * (angleUnits[unit] || 1);\n};\nexport const hslaStringToHsva = (hslString) => {\n    const matcher = /hsla?\\(?\\s*(-?\\d*\\.?\\d+)(deg|rad|grad|turn)?[,\\s]+(-?\\d*\\.?\\d+)%?[,\\s]+(-?\\d*\\.?\\d+)%?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n    const match = matcher.exec(hslString);\n    if (!match)\n        return { h: 0, s: 0, v: 0, a: 1 };\n    return hslaToHsva({\n        h: parseHue(match[1], match[2]),\n        s: Number(match[3]),\n        l: Number(match[4]),\n        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n    });\n};\nexport const hslStringToHsva = hslaStringToHsva;\nexport const hslaToHsva = ({ h, s, l, a }) => {\n    s *= (l < 50 ? l : 100 - l) / 100;\n    return {\n        h: h,\n        s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,\n        v: l + s,\n        a\n    };\n};\nexport const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));\nexport const hsvaToHsla = ({ h, s, v, a }) => {\n    const hh = ((200 - s) * v) / 100;\n    return {\n        h: round(h),\n        s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),\n        l: round(hh / 2),\n        a: round(a, 2)\n    };\n};\nexport const hsvaToHsvString = (hsva) => {\n    const { h, s, v } = roundHsva(hsva);\n    return `hsv(${h}, ${s}%, ${v}%)`;\n};\nexport const hsvaToHsvaString = (hsva) => {\n    const { h, s, v, a } = roundHsva(hsva);\n    return `hsva(${h}, ${s}%, ${v}%, ${a})`;\n};\nexport const hsvaToHslString = (hsva) => {\n    const { h, s, l } = hsvaToHsla(hsva);\n    return `hsl(${h}, ${s}%, ${l}%)`;\n};\nexport const hsvaToHslaString = (hsva) => {\n    const { h, s, l, a } = hsvaToHsla(hsva);\n    return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n};\nexport const hsvaToRgba = ({ h, s, v, a }) => {\n    h = (h / 360) * 6;\n    s = s / 100;\n    v = v / 100;\n    const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;\n    return {\n        r: round([v, c, b, b, d, v][module] * 255),\n        g: round([d, v, v, c, b, b][module] * 255),\n        b: round([b, b, d, v, v, c][module] * 255),\n        a: round(a, 2)\n    };\n};\nexport const hsvaToRgbString = (hsva) => {\n    const { r, g, b } = hsvaToRgba(hsva);\n    return `rgb(${r}, ${g}, ${b})`;\n};\nexport const hsvaToRgbaString = (hsva) => {\n    const { r, g, b, a } = hsvaToRgba(hsva);\n    return `rgba(${r}, ${g}, ${b}, ${a})`;\n};\nexport const hsvaStringToHsva = (hsvString) => {\n    const matcher = /hsva?\\(?\\s*(-?\\d*\\.?\\d+)(deg|rad|grad|turn)?[,\\s]+(-?\\d*\\.?\\d+)%?[,\\s]+(-?\\d*\\.?\\d+)%?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n    const match = matcher.exec(hsvString);\n    if (!match)\n        return { h: 0, s: 0, v: 0, a: 1 };\n    return roundHsva({\n        h: parseHue(match[1], match[2]),\n        s: Number(match[3]),\n        v: Number(match[4]),\n        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n    });\n};\nexport const hsvStringToHsva = hsvaStringToHsva;\nexport const rgbaStringToHsva = (rgbaString) => {\n    const matcher = /rgba?\\(?\\s*(-?\\d*\\.?\\d+)(%)?[,\\s]+(-?\\d*\\.?\\d+)(%)?[,\\s]+(-?\\d*\\.?\\d+)(%)?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\\)?/i;\n    const match = matcher.exec(rgbaString);\n    if (!match)\n        return { h: 0, s: 0, v: 0, a: 1 };\n    return rgbaToHsva({\n        r: Number(match[1]) / (match[2] ? 100 / 255 : 1),\n        g: Number(match[3]) / (match[4] ? 100 / 255 : 1),\n        b: Number(match[5]) / (match[6] ? 100 / 255 : 1),\n        a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1)\n    });\n};\nexport const rgbStringToHsva = rgbaStringToHsva;\nconst format = (number) => {\n    const hex = number.toString(16);\n    return hex.length < 2 ? '0' + hex : hex;\n};\nexport const rgbaToHex = ({ r, g, b, a }) => {\n    const alphaHex = a < 1 ? format(round(a * 255)) : '';\n    return '#' + format(r) + format(g) + format(b) + alphaHex;\n};\nexport const rgbaToHsva = ({ r, g, b, a }) => {\n    const max = Math.max(r, g, b);\n    const delta = max - Math.min(r, g, b);\n    // prettier-ignore\n    const hh = delta\n        ? max === r\n            ? (g - b) / delta\n            : max === g\n                ? 2 + (b - r) / delta\n                : 4 + (r - g) / delta\n        : 0;\n    return {\n        h: round(60 * (hh < 0 ? hh + 6 : hh)),\n        s: round(max ? (delta / max) * 100 : 0),\n        v: round((max / 255) * 100),\n        a\n    };\n};\nexport const roundHsva = (hsva) => ({\n    h: round(hsva.h),\n    s: round(hsva.s),\n    v: round(hsva.v),\n    a: round(hsva.a, 2)\n});\nexport const rgbaToRgb = ({ r, g, b }) => ({ r, g, b });\nexport const hslaToHsl = ({ h, s, l }) => ({ h, s, l });\nexport const hsvaToHsv = (hsva) => {\n    const { h, s, v } = roundHsva(hsva);\n    return { h, s, v };\n};\n//# sourceMappingURL=convert.js.map","import { hexToRgba } from './convert.js';\nexport const equalColorObjects = (first, second) => {\n    if (first === second)\n        return true;\n    for (const prop in first) {\n        // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)\n        // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)\n        // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,\n        // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if\n        // there is or not), and then as a type TS can iterate over.\n        if (first[prop] !==\n            second[prop])\n            return false;\n    }\n    return true;\n};\nexport const equalColorString = (first, second) => {\n    return first.replace(/\\s/g, '') === second.replace(/\\s/g, '');\n};\nexport const equalHex = (first, second) => {\n    if (first.toLowerCase() === second.toLowerCase())\n        return true;\n    // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects\n    return equalColorObjects(hexToRgba(first), hexToRgba(second));\n};\n//# sourceMappingURL=compare.js.map","const cache = {};\nexport const tpl = (html) => {\n    let template = cache[html];\n    if (!template) {\n        template = document.createElement('template');\n        template.innerHTML = html;\n        cache[html] = template;\n    }\n    return template;\n};\nexport const fire = (target, type, detail) => {\n    target.dispatchEvent(new CustomEvent(type, {\n        bubbles: true,\n        detail\n    }));\n};\n//# sourceMappingURL=dom.js.map","import { fire, tpl } from '../utils/dom.js';\nimport { clamp } from '../utils/math.js';\nlet hasTouched = false;\n// Check if an event was triggered by touch\nconst isTouch = (e) => 'touches' in e;\n// Prevent mobile browsers from handling mouse events (conflicting with touch ones).\n// If we detected a touch interaction before, we prefer reacting to touch events only.\nconst isValid = (event) => {\n    if (hasTouched && !isTouch(event))\n        return false;\n    if (!hasTouched)\n        hasTouched = isTouch(event);\n    return true;\n};\nconst pointerMove = (target, event) => {\n    const pointer = isTouch(event) ? event.touches[0] : event;\n    const rect = target.el.getBoundingClientRect();\n    fire(target.el, 'move', target.getMove({\n        x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),\n        y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)\n    }));\n};\nconst keyMove = (target, event) => {\n    // We use `keyCode` instead of `key` to reduce the size of the library.\n    const keyCode = event.keyCode;\n    // Ignore all keys except arrow ones, Page Up, Page Down, Home and End.\n    if (keyCode > 40 || (target.xy && keyCode < 37) || keyCode < 33)\n        return;\n    // Do not scroll page by keys when color picker element has focus.\n    event.preventDefault();\n    // Send relative offset to the parent component.\n    fire(target.el, 'move', target.getMove({\n        x: keyCode === 39 // Arrow Right\n            ? 0.01\n            : keyCode === 37 // Arrow Left\n                ? -0.01\n                : keyCode === 34 // Page Down\n                    ? 0.05\n                    : keyCode === 33 // Page Up\n                        ? -0.05\n                        : keyCode === 35 // End\n                            ? 1\n                            : keyCode === 36 // Home\n                                ? -1\n                                : 0,\n        y: keyCode === 40 // Arrow down\n            ? 0.01\n            : keyCode === 38 // Arrow Up\n                ? -0.01\n                : 0\n    }, true));\n};\nexport class Slider {\n    constructor(root, part, aria, xy) {\n        const template = tpl(`<div role=\"slider\" tabindex=\"0\" part=\"${part}\" ${aria}><div part=\"${part}-pointer\"></div></div>`);\n        root.appendChild(template.content.cloneNode(true));\n        const el = root.querySelector(`[part=${part}]`);\n        el.addEventListener('mousedown', this);\n        el.addEventListener('touchstart', this);\n        el.addEventListener('keydown', this);\n        this.el = el;\n        this.xy = xy;\n        this.nodes = [el.firstChild, el];\n    }\n    set dragging(state) {\n        const toggleEvent = state ? document.addEventListener : document.removeEventListener;\n        toggleEvent(hasTouched ? 'touchmove' : 'mousemove', this);\n        toggleEvent(hasTouched ? 'touchend' : 'mouseup', this);\n    }\n    handleEvent(event) {\n        switch (event.type) {\n            case 'mousedown':\n            case 'touchstart':\n                event.preventDefault();\n                // event.button is 0 in mousedown for left button activation\n                if (!isValid(event) || (!hasTouched && event.button != 0))\n                    return;\n                this.el.focus();\n                pointerMove(this, event);\n                this.dragging = true;\n                break;\n            case 'mousemove':\n            case 'touchmove':\n                event.preventDefault();\n                pointerMove(this, event);\n                break;\n            case 'mouseup':\n            case 'touchend':\n                this.dragging = false;\n                break;\n            case 'keydown':\n                keyMove(this, event);\n                break;\n        }\n    }\n    style(styles) {\n        styles.forEach((style, i) => {\n            for (const p in style) {\n                this.nodes[i].style.setProperty(p, style[p]);\n            }\n        });\n    }\n}\n//# sourceMappingURL=slider.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Hue extends Slider {\n    constructor(root) {\n        super(root, 'hue', 'aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"', false);\n    }\n    update({ h }) {\n        this.h = h;\n        this.style([\n            {\n                left: `${(h / 360) * 100}%`,\n                color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })\n            }\n        ]);\n        this.el.setAttribute('aria-valuenow', `${round(h)}`);\n    }\n    getMove(offset, key) {\n        // Hue measured in degrees of the color circle ranging from 0 to 360\n        return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };\n    }\n}\n//# sourceMappingURL=hue.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Saturation extends Slider {\n    constructor(root) {\n        super(root, 'saturation', 'aria-label=\"Color\"', true);\n    }\n    update(hsva) {\n        this.hsva = hsva;\n        this.style([\n            {\n                top: `${100 - hsva.v}%`,\n                left: `${hsva.s}%`,\n                color: hsvaToHslString(hsva)\n            },\n            {\n                'background-color': hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 })\n            }\n        ]);\n        this.el.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);\n    }\n    getMove(offset, key) {\n        // Saturation and brightness always fit into [0, 100] range\n        return {\n            s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,\n            v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)\n        };\n    }\n}\n//# sourceMappingURL=saturation.js.map","export default `: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)}`;\n//# sourceMappingURL=color-picker.js.map","export default `[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}`;\n//# sourceMappingURL=hue.js.map","export default `[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}`;\n//# sourceMappingURL=saturation.js.map","import { equalColorObjects } from '../utils/compare.js';\nimport { fire, tpl } from '../utils/dom.js';\nimport { Hue } from './hue.js';\nimport { Saturation } from './saturation.js';\nimport css from '../styles/color-picker.js';\nimport hueCss from '../styles/hue.js';\nimport saturationCss from '../styles/saturation.js';\nconst $isSame = Symbol('same');\nconst $color = Symbol('color');\nconst $hsva = Symbol('hsva');\nconst $update = Symbol('update');\nconst $parts = Symbol('parts');\nexport const $css = Symbol('css');\nexport const $sliders = Symbol('sliders');\nexport class ColorPicker extends HTMLElement {\n    static get observedAttributes() {\n        return ['color'];\n    }\n    get [$css]() {\n        return [css, hueCss, saturationCss];\n    }\n    get [$sliders]() {\n        return [Saturation, Hue];\n    }\n    get color() {\n        return this[$color];\n    }\n    set color(newColor) {\n        if (!this[$isSame](newColor)) {\n            const newHsva = this.colorModel.toHsva(newColor);\n            this[$update](newHsva);\n            this[$color] = newColor;\n        }\n    }\n    constructor() {\n        super();\n        const template = tpl(`<style>${this[$css].join('')}</style>`);\n        const root = this.attachShadow({ mode: 'open' });\n        root.appendChild(template.content.cloneNode(true));\n        root.addEventListener('move', this);\n        this[$parts] = this[$sliders].map((slider) => new slider(root));\n    }\n    connectedCallback() {\n        // A user may set a property on an _instance_ of an element,\n        // before its prototype has been connected to this class.\n        // If so, we need to run it through the proper class setter.\n        if (this.hasOwnProperty('color')) {\n            const value = this.color;\n            delete this['color'];\n            this.color = value;\n        }\n        else if (!this.color) {\n            this.color = this.colorModel.defaultColor;\n        }\n    }\n    attributeChangedCallback(_attr, _oldVal, newVal) {\n        const color = this.colorModel.fromAttr(newVal);\n        if (!this[$isSame](color)) {\n            this.color = color;\n        }\n    }\n    handleEvent(event) {\n        // Merge the current HSV color object with updated params.\n        const oldHsva = this[$hsva];\n        const newHsva = { ...oldHsva, ...event.detail };\n        this[$update](newHsva);\n        let newColor;\n        if (!equalColorObjects(newHsva, oldHsva) &&\n            !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) {\n            this[$color] = newColor;\n            fire(this, 'color-changed', { value: newColor });\n        }\n    }\n    [$isSame](color) {\n        return this.color && this.colorModel.equal(color, this.color);\n    }\n    [$update](hsva) {\n        this[$hsva] = hsva;\n        this[$parts].forEach((part) => part.update(hsva));\n    }\n}\n//# sourceMappingURL=color-picker.js.map","import { ColorPicker } from '../components/color-picker.js';\nimport { hexToHsva, hsvaToHex } from '../utils/convert.js';\nimport { equalHex } from '../utils/compare.js';\nconst colorModel = {\n    defaultColor: '#000',\n    toHsva: hexToHsva,\n    fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),\n    equal: equalHex,\n    fromAttr: (color) => color\n};\nexport class HexBase extends ColorPicker {\n    get colorModel() {\n        return colorModel;\n    }\n}\n//# sourceMappingURL=hex.js.map","import { HexBase } from './lib/entrypoints/hex.js';\n/**\n * A color picker custom element that uses HEX format.\n *\n * @element hex-color-picker\n *\n * @prop {string} color - Selected color in HEX format.\n * @attr {string} color - Selected color in HEX format.\n *\n * @fires color-changed - Event fired when color property changes.\n *\n * @csspart hue - A hue selector container.\n * @csspart saturation - A saturation selector container\n * @csspart hue-pointer - A hue pointer element.\n * @csspart saturation-pointer - A saturation pointer element.\n */\nexport class HexColorPicker extends HexBase {\n}\ncustomElements.define('hex-color-picker', HexColorPicker);\n//# sourceMappingURL=hex-color-picker.js.map","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n  colorTextClass,\n  DEFAULT_TEXT_COLOR,\n} from \"../constants/styleConstants\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    placeholder?: string;\n    size?: \"default\" | \"large\";\n    swatchOnly?: boolean;\n    disabled?: boolean;\n  }>(),\n  {\n    placeholder: DEFAULT_TEXT_COLOR,\n    size: \"default\",\n    swatchOnly: false,\n    disabled: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst { t } = useI18n();\n\nconst open = ref(false);\nconst popoverRef = ref<HTMLElement>();\nconst swatchRef = ref<HTMLElement>();\n\nonClickOutside(\n  popoverRef,\n  () => {\n    open.value = false;\n  },\n  { ignore: [swatchRef] },\n);\n\nconst internalColor = computed({\n  get: () => props.modelValue || DEFAULT_TEXT_COLOR,\n  set: (val) => emit(\"update:modelValue\", val),\n});\n\nfunction onPickerChange(e: Event) {\n  internalColor.value = (e as CustomEvent).detail.value;\n}\n\nfunction onTextInput(e: Event) {\n  internalColor.value = (e.target as HTMLInputElement).value;\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tpl:flex tpl:gap-2 tpl:relative tpl:w-full tpl:min-w-0',\n      disabled && 'tpl:opacity-60 tpl:cursor-not-allowed',\n    ]\"\n  >\n    <button\n      ref=\"swatchRef\"\n      type=\"button\"\n      :disabled=\"disabled\"\n      :aria-label=\"t.colorPicker.pickColor\"\n      :aria-expanded=\"open\"\n      :class=\"[\n        '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)]',\n        disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n        open\n          ? 'tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]'\n          : !disabled && 'hover:tpl:border-[var(--tpl-text-dim)]',\n        size === 'large' ? 'tpl:size-12' : 'tpl:size-10',\n      ]\"\n      @click=\"!disabled && (open = !open)\"\n    >\n      <span\n        class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n        :style=\"{ backgroundColor: internalColor }\"\n      />\n    </button>\n    <input\n      v-if=\"!swatchOnly\"\n      type=\"text\"\n      :class=\"colorTextClass\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-label=\"t.colorPicker.hexValue\"\n      @input=\"onTextInput\"\n    />\n    <Transition\n      enter-active-class=\"tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n      enter-from-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n      enter-to-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n      leave-active-class=\"tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n      leave-from-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n      leave-to-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n    >\n      <div\n        v-if=\"open\"\n        ref=\"popoverRef\"\n        class=\"tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg\"\n      >\n        <hex-color-picker\n          :color=\"internalColor\"\n          :aria-label=\"t.colorPicker.pickColor\"\n          @color-changed=\"onPickerChange\"\n          @keydown.escape=\"open = false\"\n        />\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style>\nhex-color-picker {\n  --hcp-width: 200px;\n}\n\nhex-color-picker::part(hue) {\n  border-radius: var(--tpl-radius-sm, 7px);\n}\n\nhex-color-picker::part(saturation) {\n  border-radius: var(--tpl-radius-sm, 7px) var(--tpl-radius-sm, 7px) 0 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n  colorTextClass,\n  DEFAULT_TEXT_COLOR,\n} from \"../constants/styleConstants\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    placeholder?: string;\n    size?: \"default\" | \"large\";\n    swatchOnly?: boolean;\n    disabled?: boolean;\n  }>(),\n  {\n    placeholder: DEFAULT_TEXT_COLOR,\n    size: \"default\",\n    swatchOnly: false,\n    disabled: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst { t } = useI18n();\n\nconst open = ref(false);\nconst popoverRef = ref<HTMLElement>();\nconst swatchRef = ref<HTMLElement>();\n\nonClickOutside(\n  popoverRef,\n  () => {\n    open.value = false;\n  },\n  { ignore: [swatchRef] },\n);\n\nconst internalColor = computed({\n  get: () => props.modelValue || DEFAULT_TEXT_COLOR,\n  set: (val) => emit(\"update:modelValue\", val),\n});\n\nfunction onPickerChange(e: Event) {\n  internalColor.value = (e as CustomEvent).detail.value;\n}\n\nfunction onTextInput(e: Event) {\n  internalColor.value = (e.target as HTMLInputElement).value;\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tpl:flex tpl:gap-2 tpl:relative tpl:w-full tpl:min-w-0',\n      disabled && 'tpl:opacity-60 tpl:cursor-not-allowed',\n    ]\"\n  >\n    <button\n      ref=\"swatchRef\"\n      type=\"button\"\n      :disabled=\"disabled\"\n      :aria-label=\"t.colorPicker.pickColor\"\n      :aria-expanded=\"open\"\n      :class=\"[\n        '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)]',\n        disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n        open\n          ? 'tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]'\n          : !disabled && 'hover:tpl:border-[var(--tpl-text-dim)]',\n        size === 'large' ? 'tpl:size-12' : 'tpl:size-10',\n      ]\"\n      @click=\"!disabled && (open = !open)\"\n    >\n      <span\n        class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n        :style=\"{ backgroundColor: internalColor }\"\n      />\n    </button>\n    <input\n      v-if=\"!swatchOnly\"\n      type=\"text\"\n      :class=\"colorTextClass\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :aria-label=\"t.colorPicker.hexValue\"\n      @input=\"onTextInput\"\n    />\n    <Transition\n      enter-active-class=\"tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n      enter-from-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n      enter-to-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n      leave-active-class=\"tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n      leave-from-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n      leave-to-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n    >\n      <div\n        v-if=\"open\"\n        ref=\"popoverRef\"\n        class=\"tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg\"\n      >\n        <hex-color-picker\n          :color=\"internalColor\"\n          :aria-label=\"t.colorPicker.pickColor\"\n          @color-changed=\"onPickerChange\"\n          @keydown.escape=\"open = false\"\n        />\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style>\nhex-color-picker {\n  --hcp-width: 200px;\n}\n\nhex-color-picker::part(hue) {\n  border-radius: var(--tpl-radius-sm, 7px);\n}\n\nhex-color-picker::part(saturation) {\n  border-radius: var(--tpl-radius-sm, 7px) var(--tpl-radius-sm, 7px) 0 0;\n}\n</style>\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\">\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 { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n  label?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:mb-3.5\">\n    <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n  label?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:mb-3.5\">\n    <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  inputGroupInputClass,\n  inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n  modelValue: number;\n  min?: number;\n  max?: number;\n  suffix: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:items-stretch\">\n    <input\n      type=\"number\"\n      :class=\"inputGroupInputClass\"\n      :value=\"modelValue\"\n      :min=\"min\"\n      :max=\"max\"\n      @input=\"\n        emit(\n          'update:modelValue',\n          Number(($event.target as HTMLInputElement).value),\n        )\n      \"\n    />\n    <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  inputGroupInputClass,\n  inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n  modelValue: number;\n  min?: number;\n  max?: number;\n  suffix: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:items-stretch\">\n    <input\n      type=\"number\"\n      :class=\"inputGroupInputClass\"\n      :value=\"modelValue\"\n      :min=\"min\"\n      :max=\"max\"\n      @input=\"\n        emit(\n          'update:modelValue',\n          Number(($event.target as HTMLInputElement).value),\n        )\n      \"\n    />\n    <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n  value: string;\n  label: string;\n  icon?: Component;\n}\n\nconst props = defineProps<{\n  options: PillOption[];\n  modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n  props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n  () => `translateX(${Math.max(selectedIndex.value, 0) * 100}%)`,\n);\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill — hidden when modelValue matches no option,\n         otherwise it would silently sit on the first option and create\n         a visual mismatch with aria-checked. -->\n    <div\n      v-if=\"selectedIndex >= 0\"\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${options.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      role=\"radio\"\n      :aria-checked=\"modelValue === option.value\"\n      :aria-label=\"option.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          modelValue === option.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"option.label\"\n      @click=\"emit('update:modelValue', option.value)\"\n    >\n      <component\n        :is=\"option.icon\"\n        v-if=\"option.icon\"\n        :size=\"14\"\n        :stroke-width=\"2\"\n      />\n      <span v-else>{{ option.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n  value: string;\n  label: string;\n  icon?: Component;\n}\n\nconst props = defineProps<{\n  options: PillOption[];\n  modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n  props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n  () => `translateX(${Math.max(selectedIndex.value, 0) * 100}%)`,\n);\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill — hidden when modelValue matches no option,\n         otherwise it would silently sit on the first option and create\n         a visual mismatch with aria-checked. -->\n    <div\n      v-if=\"selectedIndex >= 0\"\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${options.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      role=\"radio\"\n      :aria-checked=\"modelValue === option.value\"\n      :aria-label=\"option.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          modelValue === option.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"option.label\"\n      @click=\"emit('update:modelValue', option.value)\"\n    >\n      <component\n        :is=\"option.icon\"\n        v-if=\"option.icon\"\n        :size=\"14\"\n        :stroke-width=\"2\"\n      />\n      <span v-else>{{ option.label }}</span>\n    </button>\n  </div>\n</template>\n"],"x_google_ignoreList":[0,1,2,3,4,5,6,7,8,9,10,11,12],"mappings":"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"}