@templatical/editor 0.38.0 → 0.39.1

package/dist/cdn/chunks/AiChatSidebar-dyqqHAcI.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AiChatSidebar-dyqqHAcI.js","names":[],"sources":["../../../src/cloud/components/AiChatSidebar.vue","../../../src/cloud/components/AiChatSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport { useAiChat } from \"@templatical/core/cloud\";\nimport {\n  CLOUD_TRANSLATIONS_KEY,\n  EDITOR_KEY,\n  AUTH_MANAGER_KEY,\n  MERGE_TAGS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport { useAliveFlag } from \"../../composables/useAliveFlag\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  LoaderCircle,\n  Redo2,\n  Send,\n  Sparkles,\n  Trash2,\n  Undo2,\n  X,\n} from \"@lucide/vue\";\nimport { inject, nextTick, ref, watch } from \"vue\";\nimport { useIntervalFn, useTimeoutFn } from \"@vueuse/core\";\n\nconst props = defineProps<{\n  visible: boolean;\n  onApply?: (content: TemplateContent) => void;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst cloudTranslations = requireInject(\n  CLOUD_TRANSLATIONS_KEY,\n  \"AiChatSidebar\",\n);\nconst editor = requireInject(EDITOR_KEY, \"AiChatSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"AiChatSidebar\");\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst aliveFlag = useAliveFlag();\n\nconst aiChat = useAiChat({\n  authManager,\n  getTemplateId: () => editor.state.template?.id ?? null,\n  onApply: props.onApply,\n  onError: undefined,\n});\n\nconst promptInput = ref(\"\");\nconst messagesContainer = ref<HTMLElement | null>(null);\nconst historyLoaded = ref(false);\nconst visibleSuggestionCount = ref(0);\n\nconst { pause: pauseReveal, resume: resumeReveal } = useIntervalFn(\n  () => {\n    const count = aiChat.suggestions.value?.length ?? 0;\n    if (visibleSuggestionCount.value < count) {\n      visibleSuggestionCount.value++;\n    } else {\n      pauseReveal();\n    }\n  },\n  150,\n  { immediate: false },\n);\n\nconst { start: startRevealTimeout } = useTimeoutFn(() => resumeReveal(), 100, {\n  immediate: false,\n});\n\nwatch(\n  () => aiChat.suggestions.value?.length ?? 0,\n  (count) => {\n    pauseReveal();\n    if (count === 0) {\n      visibleSuggestionCount.value = 0;\n      return;\n    }\n\n    visibleSuggestionCount.value = 0;\n    startRevealTimeout();\n  },\n);\n\nfunction scrollToBottom(): void {\n  nextTick(() => {\n    if (messagesContainer.value) {\n      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;\n    }\n  });\n}\n\nwatch(\n  () => aiChat.messages.value?.length ?? 0,\n  () => scrollToBottom(),\n);\n\nwatch(\n  () => props.visible,\n  async (isVisible) => {\n    if (isVisible && !historyLoaded.value) {\n      historyLoaded.value = true;\n      await aiChat.loadConversation();\n      if (!aliveFlag.alive) return;\n\n      if (\n        (aiChat.messages.value?.length ?? 0) === 0 &&\n        editor.content.value.blocks.length === 0\n      ) {\n        aiChat.loadSuggestions(editor.content.value, mergeTags);\n      }\n    }\n  },\n);\n\nasync function handleSend(): Promise<void> {\n  const prompt = promptInput.value.trim();\n  if (!prompt || aiChat.isGenerating.value) {\n    return;\n  }\n\n  promptInput.value = \"\";\n  aiChat.error.value = null;\n  aiChat.failedPrompt.value = null;\n  scrollToBottom();\n\n  await aiChat.sendPrompt(prompt, editor.content.value, mergeTags);\n  if (!aliveFlag.alive) return;\n\n  if (aiChat.failedPrompt.value) {\n    promptInput.value = aiChat.failedPrompt.value;\n  }\n\n  scrollToBottom();\n}\n\nfunction stripJsonBlock(text: string): string {\n  return text\n    .replace(/```json[\\s\\S]*?```/g, \"\")\n    .replace(/```json[\\s\\S]*/g, \"\")\n    .trim();\n}\n\nfunction handleSuggestionClick(suggestion: string): void {\n  pauseReveal();\n  promptInput.value = suggestion;\n  handleSend();\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-ai-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-ai-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-ai-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <Sparkles :size=\"13\" :stroke-width=\"2\" />\n          <span>\n            {{ cloudTranslations.aiChat.title }}\n          </span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"(aiChat.messages.value?.length ?? 0) > 0\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            :title=\"cloudTranslations.aiChat.clear\"\n            @click=\"aiChat.clearChat()\"\n          >\n            <Trash2 :size=\"14\" :stroke-width=\"2\" />\n          </button>\n          <button\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"14\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n\n      <!-- Messages wrapper -->\n      <div class=\"tpl:relative tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col\">\n        <!-- Messages -->\n        <div\n          ref=\"messagesContainer\"\n          class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\"\n        >\n          <!-- Loading history state -->\n          <div\n            v-if=\"aiChat.isLoadingHistory.value\"\n            class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n          >\n            <LoaderCircle\n              class=\"tpl-spinner tpl:text-[var(--tpl-text-muted)]\"\n              :size=\"24\"\n              :stroke-width=\"2\"\n            />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudTranslations.aiChat.loadingHistory }}\n            </p>\n          </div>\n\n          <!-- Empty state -->\n          <div\n            v-else-if=\"(aiChat.messages.value?.length ?? 0) === 0\"\n            class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n          >\n            <Sparkles\n              :size=\"32\"\n              :stroke-width=\"1.5\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudTranslations.aiChat.placeholder }}\n            </p>\n          </div>\n\n          <!-- Message list -->\n          <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n            <div\n              v-for=\"(message, index) in aiChat.messages.value\"\n              :key=\"message.id\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-2\"\n            >\n              <!-- User message -->\n              <div\n                v-if=\"message.role === 'user'\"\n                class=\"tpl:self-end tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm\"\n                style=\"\n                  background-color: var(--tpl-primary-light);\n                  color: var(--tpl-text);\n                  max-width: 85%;\n                  box-shadow: var(--tpl-shadow);\n                \"\n              >\n                {{ message.content }}\n              </div>\n\n              <!-- Assistant message -->\n              <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n                <LoadingTrack\n                  v-if=\"\n                    !stripJsonBlock(message.content) &&\n                    aiChat.isGenerating.value &&\n                    index === (aiChat.messages.value?.length ?? 0) - 1\n                  \"\n                />\n                <div\n                  v-else\n                  class=\"tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm tpl:whitespace-pre-wrap\"\n                  style=\"\n                    max-width: 85%;\n                    background-color: var(--tpl-bg);\n                    color: var(--tpl-text);\n                    box-shadow: var(--tpl-shadow);\n                  \"\n                >\n                  {{\n                    stripJsonBlock(message.content) ||\n                    cloudTranslations.aiChat.applied\n                  }}\n                </div>\n                <button\n                  v-if=\"\n                    message.id === aiChat.lastApplyMessageId.value &&\n                    !aiChat.isGenerating.value\n                  \"\n                  class=\"tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n                  style=\"\n                    border-color: var(--tpl-border);\n                    color: var(--tpl-text-muted);\n                    background-color: transparent;\n                  \"\n                  @click=\"aiChat.toggleLastRevert()\"\n                >\n                  <template v-if=\"aiChat.isLastChangeReverted.value\">\n                    <Redo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.reapply }}\n                  </template>\n                  <template v-else>\n                    <Undo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.revert }}\n                  </template>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Error message -->\n        <div\n          v-if=\"aiChat.error.value\"\n          class=\"tpl:mx-3 tpl:mb-2 tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs\"\n          style=\"\n            background-color: var(--tpl-danger-light);\n            color: var(--tpl-danger);\n          \"\n        >\n          <CircleAlert\n            :size=\"14\"\n            :stroke-width=\"2\"\n            class=\"tpl:mt-0.5 tpl:shrink-0\"\n          />\n          <span>{{\n            aiChat.error.value === \"ai_apply_failed\"\n              ? cloudTranslations.aiChat.applyFailed\n              : cloudTranslations.aiChat.error\n          }}</span>\n        </div>\n\n        <!-- Suggestions (overlay) -->\n        <div\n          v-if=\"(aiChat.suggestions.value?.length ?? 0) > 0\"\n          class=\"tpl:absolute tpl:right-0 tpl:bottom-0 tpl:left-0 tpl:z-10 tpl:px-3 tpl:pb-3\"\n          style=\"\n            background-color: color-mix(\n              in srgb,\n              var(--tpl-bg) 50%,\n              transparent\n            );\n            backdrop-filter: blur(2px);\n          \"\n        >\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <button\n              v-for=\"(suggestion, index) in aiChat.suggestions.value ?? []\"\n              :key=\"index\"\n              class=\"tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out\"\n              :class=\"\n                (aiChat.suggestions.value?.length ?? 0) - 1 - index <\n                visibleSuggestionCount\n                  ? 'tpl:translate-y-0 tpl:opacity-100'\n                  : 'tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0'\n              \"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-primary);\n                background-color: var(--tpl-bg);\n                box-shadow: var(--tpl-shadow);\n              \"\n              @click=\"handleSuggestionClick(suggestion)\"\n            >\n              {{ suggestion }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Input area -->\n      <div class=\"tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]\">\n        <div\n          class=\"tpl-ai-input-wrapper tpl-focus-ring-host tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n        >\n          <textarea\n            v-model=\"promptInput\"\n            class=\"tpl:max-h-32 tpl:min-h-[64px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-sm tpl:outline-none tpl:text-[var(--tpl-text)]\"\n            :placeholder=\"cloudTranslations.aiChat.inputPlaceholder\"\n            :disabled=\"aiChat.isGenerating.value\"\n            rows=\"3\"\n            @keydown=\"handleKeydown\"\n          />\n          <button\n            class=\"tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n            :disabled=\"!promptInput.trim() || aiChat.isGenerating.value\"\n            @click=\"handleSend\"\n          >\n            <Send :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudTranslations.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-ai-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-input-wrapper:focus-within {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-ai-send-btn:not(:disabled):hover {\n  transform: scale(1.05);\n}\n\n.tpl-suggestion-btn:hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport { useAiChat } from \"@templatical/core/cloud\";\nimport {\n  CLOUD_TRANSLATIONS_KEY,\n  EDITOR_KEY,\n  AUTH_MANAGER_KEY,\n  MERGE_TAGS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport { useAliveFlag } from \"../../composables/useAliveFlag\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  LoaderCircle,\n  Redo2,\n  Send,\n  Sparkles,\n  Trash2,\n  Undo2,\n  X,\n} from \"@lucide/vue\";\nimport { inject, nextTick, ref, watch } from \"vue\";\nimport { useIntervalFn, useTimeoutFn } from \"@vueuse/core\";\n\nconst props = defineProps<{\n  visible: boolean;\n  onApply?: (content: TemplateContent) => void;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst cloudTranslations = requireInject(\n  CLOUD_TRANSLATIONS_KEY,\n  \"AiChatSidebar\",\n);\nconst editor = requireInject(EDITOR_KEY, \"AiChatSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"AiChatSidebar\");\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst aliveFlag = useAliveFlag();\n\nconst aiChat = useAiChat({\n  authManager,\n  getTemplateId: () => editor.state.template?.id ?? null,\n  onApply: props.onApply,\n  onError: undefined,\n});\n\nconst promptInput = ref(\"\");\nconst messagesContainer = ref<HTMLElement | null>(null);\nconst historyLoaded = ref(false);\nconst visibleSuggestionCount = ref(0);\n\nconst { pause: pauseReveal, resume: resumeReveal } = useIntervalFn(\n  () => {\n    const count = aiChat.suggestions.value?.length ?? 0;\n    if (visibleSuggestionCount.value < count) {\n      visibleSuggestionCount.value++;\n    } else {\n      pauseReveal();\n    }\n  },\n  150,\n  { immediate: false },\n);\n\nconst { start: startRevealTimeout } = useTimeoutFn(() => resumeReveal(), 100, {\n  immediate: false,\n});\n\nwatch(\n  () => aiChat.suggestions.value?.length ?? 0,\n  (count) => {\n    pauseReveal();\n    if (count === 0) {\n      visibleSuggestionCount.value = 0;\n      return;\n    }\n\n    visibleSuggestionCount.value = 0;\n    startRevealTimeout();\n  },\n);\n\nfunction scrollToBottom(): void {\n  nextTick(() => {\n    if (messagesContainer.value) {\n      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;\n    }\n  });\n}\n\nwatch(\n  () => aiChat.messages.value?.length ?? 0,\n  () => scrollToBottom(),\n);\n\nwatch(\n  () => props.visible,\n  async (isVisible) => {\n    if (isVisible && !historyLoaded.value) {\n      historyLoaded.value = true;\n      await aiChat.loadConversation();\n      if (!aliveFlag.alive) return;\n\n      if (\n        (aiChat.messages.value?.length ?? 0) === 0 &&\n        editor.content.value.blocks.length === 0\n      ) {\n        aiChat.loadSuggestions(editor.content.value, mergeTags);\n      }\n    }\n  },\n);\n\nasync function handleSend(): Promise<void> {\n  const prompt = promptInput.value.trim();\n  if (!prompt || aiChat.isGenerating.value) {\n    return;\n  }\n\n  promptInput.value = \"\";\n  aiChat.error.value = null;\n  aiChat.failedPrompt.value = null;\n  scrollToBottom();\n\n  await aiChat.sendPrompt(prompt, editor.content.value, mergeTags);\n  if (!aliveFlag.alive) return;\n\n  if (aiChat.failedPrompt.value) {\n    promptInput.value = aiChat.failedPrompt.value;\n  }\n\n  scrollToBottom();\n}\n\nfunction stripJsonBlock(text: string): string {\n  return text\n    .replace(/```json[\\s\\S]*?```/g, \"\")\n    .replace(/```json[\\s\\S]*/g, \"\")\n    .trim();\n}\n\nfunction handleSuggestionClick(suggestion: string): void {\n  pauseReveal();\n  promptInput.value = suggestion;\n  handleSend();\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-ai-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-ai-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-ai-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <Sparkles :size=\"13\" :stroke-width=\"2\" />\n          <span>\n            {{ cloudTranslations.aiChat.title }}\n          </span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"(aiChat.messages.value?.length ?? 0) > 0\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            :title=\"cloudTranslations.aiChat.clear\"\n            @click=\"aiChat.clearChat()\"\n          >\n            <Trash2 :size=\"14\" :stroke-width=\"2\" />\n          </button>\n          <button\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"14\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n\n      <!-- Messages wrapper -->\n      <div class=\"tpl:relative tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col\">\n        <!-- Messages -->\n        <div\n          ref=\"messagesContainer\"\n          class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\"\n        >\n          <!-- Loading history state -->\n          <div\n            v-if=\"aiChat.isLoadingHistory.value\"\n            class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n          >\n            <LoaderCircle\n              class=\"tpl-spinner tpl:text-[var(--tpl-text-muted)]\"\n              :size=\"24\"\n              :stroke-width=\"2\"\n            />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudTranslations.aiChat.loadingHistory }}\n            </p>\n          </div>\n\n          <!-- Empty state -->\n          <div\n            v-else-if=\"(aiChat.messages.value?.length ?? 0) === 0\"\n            class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n          >\n            <Sparkles\n              :size=\"32\"\n              :stroke-width=\"1.5\"\n              class=\"tpl:text-[var(--tpl-text-dim)]\"\n            />\n            <p\n              class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudTranslations.aiChat.placeholder }}\n            </p>\n          </div>\n\n          <!-- Message list -->\n          <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n            <div\n              v-for=\"(message, index) in aiChat.messages.value\"\n              :key=\"message.id\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-2\"\n            >\n              <!-- User message -->\n              <div\n                v-if=\"message.role === 'user'\"\n                class=\"tpl:self-end tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm\"\n                style=\"\n                  background-color: var(--tpl-primary-light);\n                  color: var(--tpl-text);\n                  max-width: 85%;\n                  box-shadow: var(--tpl-shadow);\n                \"\n              >\n                {{ message.content }}\n              </div>\n\n              <!-- Assistant message -->\n              <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n                <LoadingTrack\n                  v-if=\"\n                    !stripJsonBlock(message.content) &&\n                    aiChat.isGenerating.value &&\n                    index === (aiChat.messages.value?.length ?? 0) - 1\n                  \"\n                />\n                <div\n                  v-else\n                  class=\"tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm tpl:whitespace-pre-wrap\"\n                  style=\"\n                    max-width: 85%;\n                    background-color: var(--tpl-bg);\n                    color: var(--tpl-text);\n                    box-shadow: var(--tpl-shadow);\n                  \"\n                >\n                  {{\n                    stripJsonBlock(message.content) ||\n                    cloudTranslations.aiChat.applied\n                  }}\n                </div>\n                <button\n                  v-if=\"\n                    message.id === aiChat.lastApplyMessageId.value &&\n                    !aiChat.isGenerating.value\n                  \"\n                  class=\"tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all\"\n                  style=\"\n                    border-color: var(--tpl-border);\n                    color: var(--tpl-text-muted);\n                    background-color: transparent;\n                  \"\n                  @click=\"aiChat.toggleLastRevert()\"\n                >\n                  <template v-if=\"aiChat.isLastChangeReverted.value\">\n                    <Redo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.reapply }}\n                  </template>\n                  <template v-else>\n                    <Undo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.revert }}\n                  </template>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Error message -->\n        <div\n          v-if=\"aiChat.error.value\"\n          class=\"tpl:mx-3 tpl:mb-2 tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs\"\n          style=\"\n            background-color: var(--tpl-danger-light);\n            color: var(--tpl-danger);\n          \"\n        >\n          <CircleAlert\n            :size=\"14\"\n            :stroke-width=\"2\"\n            class=\"tpl:mt-0.5 tpl:shrink-0\"\n          />\n          <span>{{\n            aiChat.error.value === \"ai_apply_failed\"\n              ? cloudTranslations.aiChat.applyFailed\n              : cloudTranslations.aiChat.error\n          }}</span>\n        </div>\n\n        <!-- Suggestions (overlay) -->\n        <div\n          v-if=\"(aiChat.suggestions.value?.length ?? 0) > 0\"\n          class=\"tpl:absolute tpl:right-0 tpl:bottom-0 tpl:left-0 tpl:z-10 tpl:px-3 tpl:pb-3\"\n          style=\"\n            background-color: color-mix(\n              in srgb,\n              var(--tpl-bg) 50%,\n              transparent\n            );\n            backdrop-filter: blur(2px);\n          \"\n        >\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <button\n              v-for=\"(suggestion, index) in aiChat.suggestions.value ?? []\"\n              :key=\"index\"\n              class=\"tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out\"\n              :class=\"\n                (aiChat.suggestions.value?.length ?? 0) - 1 - index <\n                visibleSuggestionCount\n                  ? 'tpl:translate-y-0 tpl:opacity-100'\n                  : 'tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0'\n              \"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-primary);\n                background-color: var(--tpl-bg);\n                box-shadow: var(--tpl-shadow);\n              \"\n              @click=\"handleSuggestionClick(suggestion)\"\n            >\n              {{ suggestion }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Input area -->\n      <div class=\"tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]\">\n        <div\n          class=\"tpl-ai-input-wrapper tpl-focus-ring-host tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n        >\n          <textarea\n            v-model=\"promptInput\"\n            class=\"tpl:max-h-32 tpl:min-h-[64px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-sm tpl:outline-none tpl:text-[var(--tpl-text)]\"\n            :placeholder=\"cloudTranslations.aiChat.inputPlaceholder\"\n            :disabled=\"aiChat.isGenerating.value\"\n            rows=\"3\"\n            @keydown=\"handleKeydown\"\n          />\n          <button\n            class=\"tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n            :disabled=\"!promptInput.trim() || aiChat.isGenerating.value\"\n            @click=\"handleSend\"\n          >\n            <Send :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudTranslations.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-ai-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-input-wrapper:focus-within {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-ai-send-btn:not(:disabled):hover {\n  transform: scale(1.05);\n}\n\n.tpl-suggestion-btn:hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,IAAM,IAAQ,GAKR,KAAO,GAIP,IAAoB,EACxB,IACA,eACF,GACM,IAAS,EAAc,IAAY,eAAe,GAClD,KAAc,EAAc,IAAkB,eAAe,GAC7D,IAAY,EAAO,IAAgB,CAAC,CAAC,GACrC,IAAY,EAAa,GAEzB,IAAS,EAAU;GACvB;GACA,qBAAqB,EAAO,MAAM,UAAU,MAAM;GAClD,SAAS,EAAM;GACf,SAAS,KAAA;EACX,CAAC,GAEK,IAAc,EAAI,EAAE,GACpB,IAAoB,EAAwB,IAAI,GAChD,IAAgB,EAAI,EAAK,GACzB,IAAyB,EAAI,CAAC,GAE9B,EAAE,OAAO,GAAa,QAAQ,OAAiB,SAC7C;GAEJ,AAAI,EAAuB,SADb,EAAO,YAAY,OAAO,UAAU,KAEhD,EAAuB,UAEvB,EAAY;EAEhB,GACA,KACA,EAAE,WAAW,GAAM,CACrB,GAEM,EAAE,OAAO,OAAuB,QAAmB,GAAa,GAAG,KAAK,EAC5E,WAAW,GACb,CAAC;EAED,QACQ,EAAO,YAAY,OAAO,UAAU,IACzC,MAAU;GAET,IADA,EAAY,GACR,MAAU,GAAG;IACf,EAAuB,QAAQ;IAC/B;GACF;GAGA,AADA,EAAuB,QAAQ,GAC/B,GAAmB;EACrB,CACF;EAEA,SAAS,IAAuB;GAC9B,SAAe;IACb,AAAI,EAAkB,UACpB,EAAkB,MAAM,YAAY,EAAkB,MAAM;GAEhE,CAAC;EACH;EAOA,AALA,QACQ,EAAO,SAAS,OAAO,UAAU,SACjC,EAAe,CACvB,GAEA,QACQ,EAAM,SACZ,OAAO,MAAc;GACnB,IAAI,KAAa,CAAC,EAAc,OAAO;IAGrC,IAFA,EAAc,QAAQ,IACtB,MAAM,EAAO,iBAAiB,GAC1B,CAAC,EAAU,OAAO;IAEtB,CACG,EAAO,SAAS,OAAO,UAAU,OAAO,KACzC,EAAO,QAAQ,MAAM,OAAO,WAAW,KAEvC,EAAO,gBAAgB,EAAO,QAAQ,OAAO,CAAS;GAE1D;EACF,CACF;EAEA,eAAe,IAA4B;GACzC,IAAM,IAAS,EAAY,MAAM,KAAK;GAClC,AAAC,KAAU,GAAO,aAAa,UAInC,EAAY,QAAQ,IACpB,EAAO,MAAM,QAAQ,MACrB,EAAO,aAAa,QAAQ,MAC5B,EAAe,GAEf,MAAM,EAAO,WAAW,GAAQ,EAAO,QAAQ,OAAO,CAAS,GAC1D,EAAU,UAEX,EAAO,aAAa,UACtB,EAAY,QAAQ,EAAO,aAAa,QAG1C,EAAe;EACjB;EAEA,SAAS,EAAe,GAAsB;GAC5C,OAAO,EACJ,QAAQ,uBAAuB,EAAE,CAAA,CACjC,QAAQ,mBAAmB,EAAE,CAAA,CAC7B,KAAK;EACV;EAEA,SAAS,GAAsB,GAA0B;GAGvD,AAFA,EAAY,GACZ,EAAY,QAAQ,GACpB,EAAW;EACb;EAEA,SAAS,GAAc,GAA4B;GACjD,AAAI,EAAM,QAAQ,WAAW,CAAC,EAAM,aAClC,EAAM,eAAe,GACrB,EAAW;EAEf;oBAIE,EAAA,GAAA,EAkPa,GAAA;GAjPX,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;GACf,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;;GAEf,SAAA,SAyOM,CAxOE,EAAA,WADR,EAAA,GAAA,EAyOM,OAzON,GAyOM;IApOJ,EA2BM,OA3BN,GA2BM,CAxBJ,EAOM,OAPN,GAOM,CAJJ,EAAyC,EAAA,CAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;IACpC,CAAA,GAAA,EAEO,QAAA,MAAA,EADF,EAAA,CAAA,CAAiB,CAAC,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,GAGrC,EAeM,OAfN,GAeM,EAbK,EAAA,CAAA,CAAM,CAAC,SAAS,OAAO,UAAM,KAAA,KADtC,EAAA,GAAA,EAOS,UAAA;;KALP,OAAM;KACL,OAAO,EAAA,CAAA,CAAiB,CAAC,OAAO;KAChC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAM,CAAC,UAAS;IAExB,GAAA,CAAA,EAAuC,EAAA,EAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;IAEpC,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAKS,UAAA;KAJP,OAAM;KACL,SAAK,AAAA,EAAA,QAAA,MAAE,GAAI,OAAA;IAEZ,GAAA,CAAA,EAAkC,EAAA,CAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;;IAMnC,EAuKM,OAvKN,GAuKM;KArKJ,EA0GM,OAAA;MAzGA,SAAA;MAAJ,KAAI;MACJ,OAAM;KAIE,GAAA,CAAA,EAAA,CAAA,CAAM,CAAC,iBAAiB,SADhC,EAAA,GAAA,EAYM,OAZN,GAYM,CARJ,EAIE,EAAA,CAAA,GAAA;MAHA,OAAM;MACL,MAAM;MACN,gBAAc;KAEjB,CAAA,GAAA,EAEI,KAFJ,GAEI,EADC,EAAA,CAAA,CAAiB,CAAC,OAAO,cAAc,GAAA,CAAA,CAAA,CAAA,MAMhC,EAAA,CAAA,CAAM,CAAC,SAAS,OAAO,UAAM,OAAA,KAD3C,EAAA,GAAA,EAcM,OAdN,GAcM,CAVJ,EAIE,EAAA,CAAA,GAAA;MAHC,MAAM;MACN,gBAAc;MACf,OAAM;KAER,CAAA,GAAA,EAII,KAJJ,GAII,EADC,EAAA,CAAA,CAAiB,CAAC,OAAO,WAAW,GAAA,CAAA,CAAA,CAAA,MAK3C,EAAA,GAAA,EAoEM,OApEN,GAoEM,EAnEJ,EAAA,EAAA,GAAA,EAkEM,GAAA,MAAA,EAjEuB,EAAA,CAAA,CAAM,CAAC,SAAS,QAAnC,GAAS,OADnB,EAAA,GAAA,EAkEM,OAAA;MAhEH,KAAK,EAAQ;MACd,OAAM;KAIE,GAAA,CAAA,EAAQ,SAAI,UADpB,EAAA,GAAA,EAWM,OAXN,GAWM,EADD,EAAQ,OAAO,GAAA,CAAA,MAIpB,EAAA,GAAA,EA6CM,OA7CN,GA6CM,CA3C0B,CAAA,EAAe,EAAQ,OAAO,KAAyB,EAAA,CAAA,CAAM,CAAC,aAAa,SAA6B,OAAW,EAAA,CAAA,CAAM,CAAC,SAAS,OAAO,UAAM,KAAA,KAD9K,EAAA,GAAA,EAME,GAAA,EAAA,KAAA,EAAA,CAAA,MACF,EAAA,GAAA,EAcM,OAdN,GAcM,EAHF,EAAe,EAAQ,OAAO,KAAyB,EAAA,CAAA,CAAiB,CAAC,OAAO,OAAO,GAAA,CAAA,IAK9D,EAAQ,OAAO,EAAA,CAAA,CAAM,CAAC,mBAAmB,SAA8B,CAAA,EAAA,CAAA,CAAM,CAAC,aAAa,SADxH,EAAA,GAAA,EAqBS,UAAA;;MAhBP,OAAM;MACN,OAAA;OAAA,gBAAA;OAAA,OAAA;OAAA,oBAAA;MAAA;MAKC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAM,CAAC,iBAAgB;KAEf,GAAA,CAAA,EAAA,CAAA,CAAM,CAAC,qBAAqB,SAA5C,EAAA,GAAA,EAGW,GAAA,EAAA,KAAA,EAAA,GAAA,CAFT,EAAsC,EAAA,EAAA,GAAA;MAA9B,MAAM;MAAK,gBAAc;KAAK,CAAA,GAAA,EAAA,MACtC,EAAG,EAAA,CAAA,CAAiB,CAAC,OAAO,OAAO,GAAA,CAAA,CAAA,GAAA,EAAA,MAErC,EAAA,GAAA,EAGW,GAAA,EAAA,KAAA,EAAA,GAAA,CAFT,EAAsC,EAAA,EAAA,GAAA;MAA9B,MAAM;MAAK,gBAAc;KAAK,CAAA,GAAA,EAAA,MACtC,EAAG,EAAA,CAAA,CAAiB,CAAC,OAAO,MAAM,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,CAAA;KAUtC,EAAA,CAAA,CAAM,CAAC,MAAM,SADrB,EAAA,GAAA,EAkBM,OAlBN,GAkBM,CAVJ,EAIE,EAAA,EAAA,GAAA;MAHC,MAAM;MACN,gBAAc;MACf,OAAM;KAER,CAAA,GAAA,EAIS,QAAA,MAAA,EAHP,EAAA,CAAA,CAAM,CAAC,MAAM,UAAK,oBAAuC,EAAA,CAAA,CAAiB,CAAC,OAAO,cAA4B,EAAA,CAAA,CAAiB,CAAC,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;MAQvI,EAAA,CAAA,CAAM,CAAC,YAAY,OAAO,UAAM,KAAA,KADzC,EAAA,GAAA,EAkCM,OAlCN,IAkCM,CAtBJ,EAqBM,OArBN,IAqBM,EApBJ,EAAA,EAAA,GAAA,EAmBS,GAAA,MAAA,EAlBuB,EAAA,CAAA,CAAM,CAAC,YAAY,SAAK,CAAA,IAA9C,GAAY,OADtB,EAAA,GAAA,EAmBS,UAAA;MAjBN,KAAK;MACN,OAAK,GAAA,CAAC,sMACoB,EAAA,CAAA,CAAM,CAAC,YAAY,OAAO,UAAM,KAAA,IAAa,IAAwB,EAAA,QAAA,sCAAA,0DAAA,CAAA;MAM/F,OAAA;OAAA,gBAAA;OAAA,OAAA;OAAA,oBAAA;OAAA,cAAA;MAAA;MAMC,UAAK,MAAE,GAAsB,CAAU;KAErC,GAAA,EAAA,CAAU,GAAA,IAAA,EAAA;;IAOrB,EA2BM,OA3BN,IA2BM,CA1BJ,EAkBM,OAlBN,IAkBM,CAfJ,GAAA,EAOE,YAAA;KANS,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAW,QAAA;KACpB,OAAM;KACL,aAAa,EAAA,CAAA,CAAiB,CAAC,OAAO;KACtC,UAAU,EAAA,CAAA,CAAM,CAAC,aAAa;KAC/B,MAAK;KACJ,WAAS;IALD,GAAA,MAAA,IAAA,EAAA,GAAA,CAAA,CAAA,IAAA,EAAA,KAAW,CAAA,CAAA,GAOtB,EAMS,UAAA;KALP,OAAM;KACL,UAAQ,CAAG,EAAA,MAAY,KAAI,KAAM,EAAA,CAAA,CAAM,CAAC,aAAa;KACrD,SAAO;IAER,GAAA,CAAA,EAAqC,EAAA,EAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;IAKpC,CAAA,CAAA,GAAA,GAAA,EAAA,CAAA,CAAA,GAAA,EAII,KAJJ,IAII,EADC,EAAA,CAAA,CAAiB,CAAC,OAAO,UAAU,GAAA,CAAA,CAAA,CAAA"}

package/dist/cdn/chunks/ColorPicker-LcrzgMoW.js

@@ -1,502 +0,0 @@
-import { E as e, F as t, H as n, N as r, Q as i, S as a, at as o, b as s, c, ct as l, d as ee, f as u, g as d, h as f, l as te, lt as p, m as ne, n as re, p as m, u as ie } from "./draggable-kbOhCgnk.js";
-import { t as ae } from "./dist-CAFTQ6Y2.js";
-import { W as oe, d as se, q as ce } from "./keys-DBFhDFng.js";
-import { t as le } from "./useI18n-Dlo7R9RA.js";
-import { a as ue, i as h, n as de, r as g, t as fe } from "./usePopoverPosition-ElP3ABaV.js";
-import { n as _ } from "./icons-BUlqGSgd.js";
-import { u as v } from "./styleConstants-C_YAPdQS.js";
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
-var y = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, b = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n;
-360 / (Math.PI * 2);
-var x = (e) => k(S(e)), S = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
-	r: parseInt(e[0] + e[0], 16),
-	g: parseInt(e[1] + e[1], 16),
-	b: parseInt(e[2] + e[2], 16),
-	a: e.length === 4 ? b(parseInt(e[3] + e[3], 16) / 255, 2) : 1
-} : {
-	r: parseInt(e.substring(0, 2), 16),
-	g: parseInt(e.substring(2, 4), 16),
-	b: parseInt(e.substring(4, 6), 16),
-	a: e.length === 8 ? b(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
-}), C = (e) => O(E(e)), w = ({ h: e, s: t, v: n, a: r }) => {
-	let i = (200 - t) * n / 100;
-	return {
-		h: b(e),
-		s: b(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0),
-		l: b(i / 2),
-		a: b(r, 2)
-	};
-}, T = (e) => {
-	let { h: t, s: n, l: r } = w(e);
-	return `hsl(${t}, ${n}%, ${r}%)`;
-}, E = ({ h: e, s: t, v: n, a: r }) => {
-	e = e / 360 * 6, t /= 100, n /= 100;
-	let i = Math.floor(e), a = n * (1 - t), o = n * (1 - (e - i) * t), s = n * (1 - (1 - e + i) * t), c = i % 6;
-	return {
-		r: b([
-			n,
-			o,
-			a,
-			a,
-			s,
-			n
-		][c] * 255),
-		g: b([
-			s,
-			n,
-			n,
-			o,
-			a,
-			a
-		][c] * 255),
-		b: b([
-			a,
-			a,
-			s,
-			n,
-			n,
-			o
-		][c] * 255),
-		a: b(r, 2)
-	};
-}, D = (e) => {
-	let t = e.toString(16);
-	return t.length < 2 ? "0" + t : t;
-}, O = ({ r: e, g: t, b: n, a: r }) => {
-	let i = r < 1 ? D(b(r * 255)) : "";
-	return "#" + D(e) + D(t) + D(n) + i;
-}, k = ({ r: e, g: t, b: n, a: r }) => {
-	let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = a ? i === e ? (t - n) / a : i === t ? 2 + (n - e) / a : 4 + (e - t) / a : 0;
-	return {
-		h: b(60 * (o < 0 ? o + 6 : o)),
-		s: b(i ? a / i * 100 : 0),
-		v: b(i / 255 * 100),
-		a: r
-	};
-}, A = (e, t) => {
-	if (e === t) return !0;
-	for (let n in e) if (e[n] !== t[n]) return !1;
-	return !0;
-}, j = (e, t) => e.toLowerCase() === t.toLowerCase() || A(S(e), S(t)), M = {}, N = (e) => {
-	let t = M[e];
-	return t || (t = document.createElement("template"), t.innerHTML = e, M[e] = t), t;
-}, P = (e, t, n) => {
-	e.dispatchEvent(new CustomEvent(t, {
-		bubbles: !0,
-		detail: n
-	}));
-}, F = !1, I = (e) => "touches" in e, L = (e) => F && !I(e) ? !1 : (F ||= I(e), !0), R = (e, t) => {
-	let n = I(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
-	P(e.el, "move", e.getMove({
-		x: y((n.pageX - (r.left + window.pageXOffset)) / r.width),
-		y: y((n.pageY - (r.top + window.pageYOffset)) / r.height)
-	}));
-}, z = (e, t) => {
-	let n = t.keyCode;
-	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), P(e.el, "move", e.getMove({
-		x: n === 39 ? .01 : n === 37 ? -.01 : n === 34 ? .05 : n === 33 ? -.05 : n === 35 ? 1 : n === 36 ? -1 : 0,
-		y: n === 40 ? .01 : n === 38 ? -.01 : 0
-	}, !0)));
-}, B = class {
-	constructor(e, t, n, r) {
-		let i = N(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
-		e.appendChild(i.content.cloneNode(!0));
-		let a = e.querySelector(`[part=${t}]`);
-		a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = r, this.nodes = [a.firstChild, a];
-	}
-	set dragging(e) {
-		let t = e ? document.addEventListener : document.removeEventListener;
-		t(F ? "touchmove" : "mousemove", this), t(F ? "touchend" : "mouseup", this);
-	}
-	handleEvent(e) {
-		switch (e.type) {
-			case "mousedown":
-			case "touchstart":
-				if (e.preventDefault(), !L(e) || !F && e.button != 0) return;
-				this.el.focus(), R(this, e), this.dragging = !0;
-				break;
-			case "mousemove":
-			case "touchmove":
-				e.preventDefault(), R(this, e);
-				break;
-			case "mouseup":
-			case "touchend":
-				this.dragging = !1;
-				break;
-			case "keydown": z(this, e);
-		}
-	}
-	style(e) {
-		e.forEach((e, t) => {
-			for (let n in e) this.nodes[t].style.setProperty(n, e[n]);
-		});
-	}
-}, V = class extends B {
-	constructor(e) {
-		super(e, "hue", "aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"", !1);
-	}
-	update({ h: e }) {
-		this.h = e, this.style([{
-			left: `${e / 360 * 100}%`,
-			color: T({
-				h: e,
-				s: 100,
-				v: 100,
-				a: 1
-			})
-		}]), this.el.setAttribute("aria-valuenow", `${b(e)}`);
-	}
-	getMove(e, t) {
-		return { h: t ? y(this.h + e.x * 360, 0, 360) : 360 * e.x };
-	}
-}, H = class extends B {
-	constructor(e) {
-		super(e, "saturation", "aria-label=\"Color\"", !0);
-	}
-	update(e) {
-		this.hsva = e, this.style([{
-			top: `${100 - e.v}%`,
-			left: `${e.s}%`,
-			color: T(e)
-		}, { "background-color": T({
-			h: e.h,
-			s: 100,
-			v: 100,
-			a: 1
-		}) }]), this.el.setAttribute("aria-valuetext", `Saturation ${b(e.s)}%, Brightness ${b(e.v)}%`);
-	}
-	getMove(e, t) {
-		return {
-			s: t ? y(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
-			v: t ? y(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
-		};
-	}
-}, U = ":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)}", W = "[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}", G = "[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}", K = Symbol("same"), q = Symbol("color"), J = Symbol("hsva"), Y = Symbol("update"), X = Symbol("parts"), Z = Symbol("css"), Q = Symbol("sliders"), pe = class extends HTMLElement {
-	static get observedAttributes() {
-		return ["color"];
-	}
-	get [Z]() {
-		return [
-			U,
-			W,
-			G
-		];
-	}
-	get [Q]() {
-		return [H, V];
-	}
-	get color() {
-		return this[q];
-	}
-	set color(e) {
-		if (!this[K](e)) {
-			let t = this.colorModel.toHsva(e);
-			this[Y](t), this[q] = e;
-		}
-	}
-	constructor() {
-		super();
-		let e = N(`<style>${this[Z].join("")}</style>`), t = this.attachShadow({ mode: "open" });
-		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[X] = this[Q].map((e) => new e(t));
-	}
-	connectedCallback() {
-		if (this.hasOwnProperty("color")) {
-			let e = this.color;
-			delete this.color, this.color = e;
-		} else this.color ||= this.colorModel.defaultColor;
-	}
-	attributeChangedCallback(e, t, n) {
-		let r = this.colorModel.fromAttr(n);
-		this[K](r) || (this.color = r);
-	}
-	handleEvent(e) {
-		let t = this[J], n = {
-			...t,
-			...e.detail
-		};
-		this[Y](n);
-		let r;
-		!A(n, t) && !this[K](r = this.colorModel.fromHsva(n)) && (this[q] = r, P(this, "color-changed", { value: r }));
-	}
-	[K](e) {
-		return this.color && this.colorModel.equal(e, this.color);
-	}
-	[Y](e) {
-		this[J] = e, this[X].forEach((t) => t.update(e));
-	}
-}, $ = {
-	defaultColor: "#000",
-	toHsva: x,
-	fromHsva: ({ h: e, s: t, v: n }) => C({
-		h: e,
-		s: t,
-		v: n,
-		a: 1
-	}),
-	equal: j,
-	fromAttr: (e) => e
-}, me = class extends pe {
-	get colorModel() {
-		return $;
-	}
-};
-customElements.define("hex-color-picker", class extends me {});
-//#endregion
-//#region src/components/ColorPicker.vue?vue&type=script&setup=true&lang.ts
-var he = [
-	"disabled",
-	"aria-label",
-	"title",
-	"aria-expanded"
-], ge = {
-	key: 0,
-	class: "tpl:relative tpl:flex-1"
-}, _e = [
-	"value",
-	"placeholder",
-	"disabled",
-	"aria-label"
-], ve = ["aria-label", "title"], ye = ["data-tpl-theme"], be = ["aria-label"], xe = [
-	"aria-label",
-	"title",
-	"aria-checked",
-	"tabindex"
-], Se = [
-	"aria-label",
-	"title",
-	"aria-checked",
-	"tabindex",
-	"onClick"
-], Ce = ["color", "aria-label"], we = {
-	key: 2,
-	class: "tpl:relative tpl:mt-2"
-}, Te = [
-	"value",
-	"placeholder",
-	"disabled",
-	"aria-label"
-], Ee = ["aria-label", "title"], De = /* @__PURE__ */ a({
-	__name: "ColorPicker",
-	props: {
-		modelValue: {},
-		placeholder: { default: "" },
-		seedColor: { default: "#ffffff" },
-		swatchOnly: {
-			type: Boolean,
-			default: !1
-		},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		size: { default: "md" },
-		ariaLabel: { default: "" },
-		presets: { default: void 0 },
-		allowCustom: {
-			type: Boolean,
-			default: void 0
-		}
-	},
-	emits: ["update:modelValue"],
-	setup(a, { emit: y }) {
-		let b = a, x = y, { t: S } = le(), C = i(!1), w = i(), T = i(), E = i(!1);
-		ae(w, () => {
-			C.value = !1;
-		}, { ignore: [T] });
-		let D = u(() => !b.modelValue), O = u(() => h(b.modelValue)), k = u(() => h(b.modelValue || b.seedColor)), A = u(() => !b.disabled && !D.value), j = e(se, ue), M = u(() => [...new Set(b.presets ?? j.presets)]), N = u(() => b.allowCustom ?? j.allowCustom), P = u(() => M.value.length > 0), F = u(() => N.value || !P.value), I = u(() => g(b.modelValue));
-		function L(e) {
-			return I.value !== "" && g(e) === I.value;
-		}
-		function R(e) {
-			x("update:modelValue", e);
-		}
-		let z = u(() => P.value && !F.value);
-		function B(e) {
-			return z.value ? e + 1 : e;
-		}
-		let V = u(() => {
-			if (z.value && D.value) return 0;
-			let e = M.value.findIndex((e) => L(e));
-			return e === -1 ? 0 : B(e);
-		});
-		function H() {
-			return V.value === 0 ? 0 : -1;
-		}
-		function U(e) {
-			return B(e) === V.value ? 0 : -1;
-		}
-		function W(e) {
-			if (![
-				"ArrowRight",
-				"ArrowDown",
-				"ArrowLeft",
-				"ArrowUp"
-			].includes(e.key)) return;
-			let t = Array.from(e.currentTarget.querySelectorAll("[role=\"radio\"]")), n = e.target.closest("[role=\"radio\"]"), r = n ? t.indexOf(n) : -1;
-			r !== -1 && (t[(r + (e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus(), e.preventDefault());
-		}
-		function G(e) {
-			E.value = !0, x("update:modelValue", e.detail.value);
-		}
-		function K() {
-			E.value = !1;
-		}
-		function q() {
-			!E.value && D.value && x("update:modelValue", k.value);
-		}
-		function J(e) {
-			x("update:modelValue", e.target.value);
-		}
-		function Y() {
-			x("update:modelValue", "");
-		}
-		let X = de(), { toLocal: Z } = fe(), Q = e(oe, null), pe = e(ce, null), $ = i({
-			top: 0,
-			left: 0
-		});
-		function me() {
-			if (!b.disabled) {
-				if (!C.value) {
-					let e = T.value?.getBoundingClientRect();
-					if (e) {
-						let t = e.bottom + 8 + 240 <= window.innerHeight ? e.bottom + 8 : Math.max(8, e.top - 240 - 8);
-						$.value = Z({
-							top: t,
-							left: e.left
-						});
-					}
-				}
-				C.value = !C.value;
-			}
-		}
-		return (e, i) => (r(), d("div", { class: l(["tpl:flex tpl:items-center tpl:gap-2 tpl:relative", a.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
-			m("button", {
-				ref_key: "swatchRef",
-				ref: T,
-				type: "button",
-				disabled: a.disabled,
-				"aria-label": a.ariaLabel || o(S).colorPicker.pickColor,
-				title: a.ariaLabel || void 0,
-				"aria-expanded": C.value,
-				class: l([
-					"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)]",
-					a.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
-					C.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !a.disabled && "tpl:hover:border-[var(--tpl-text-dim)]",
-					a.size === "sm" ? "tpl:size-8" : "tpl:size-10"
-				]),
-				onClick: me
-			}, [m("span", {
-				class: l(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": D.value }]),
-				style: p(D.value ? void 0 : { backgroundColor: O.value })
-			}, null, 6)], 10, he),
-			!a.swatchOnly && F.value ? (r(), d("div", ge, [m("input", {
-				type: "text",
-				class: l([o(v), "tpl:w-full"]),
-				style: p(A.value ? { paddingRight: "2.25rem" } : void 0),
-				value: O.value,
-				placeholder: a.placeholder || o(S).colorPicker.notSet,
-				disabled: a.disabled,
-				"aria-label": o(S).colorPicker.hexValue,
-				onInput: J
-			}, null, 46, _e), A.value ? (r(), d("button", {
-				key: 0,
-				type: "button",
-				"aria-label": o(S).colorPicker.clear,
-				title: o(S).colorPicker.clear,
-				class: "tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
-				onClick: Y
-			}, [s(o(_), {
-				size: 14,
-				"stroke-width": 1.5
-			})], 8, ve)) : f("", !0)])) : f("", !0),
-			(r(), ne(ee, {
-				to: o(X),
-				disabled: !o(X)
-			}, [s(re, {
-				"enter-active-class": "tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
-				"enter-from-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1",
-				"enter-to-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
-				"leave-active-class": "tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
-				"leave-from-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
-				"leave-to-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1"
-			}, {
-				default: n(() => [C.value ? (r(), d("div", {
-					key: 0,
-					ref_key: "popoverRef",
-					ref: w,
-					"data-tpl-theme": o(pe),
-					class: "tpl-color-popover tpl:absolute tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:shadow-[var(--tpl-shadow-lg)]",
-					style: p({
-						top: `${$.value.top}px`,
-						left: `${$.value.left}px`,
-						...o(Q)
-					})
-				}, [
-					P.value ? (r(), d("div", {
-						key: 0,
-						role: "radiogroup",
-						"aria-label": o(S).colorPicker.presetColors,
-						class: l(["tpl:flex tpl:flex-wrap tpl:gap-1.5", F.value && "tpl:mb-2"]),
-						onKeydown: W
-					}, [z.value ? (r(), d("button", {
-						key: 0,
-						type: "button",
-						role: "radio",
-						"aria-label": o(S).colorPicker.clear,
-						title: o(S).colorPicker.clear,
-						"aria-checked": D.value,
-						tabindex: H(),
-						class: l(["tpl-color-swatch-empty tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]", D.value ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
-						onClick: Y
-					}, null, 10, xe)) : f("", !0), (r(!0), d(ie, null, t(M.value, (e, t) => (r(), d("button", {
-						key: e,
-						type: "button",
-						role: "radio",
-						"aria-label": e,
-						title: e,
-						"aria-checked": L(e),
-						tabindex: U(t),
-						style: p({ backgroundColor: e }),
-						class: l(["tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]", L(e) ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
-						onClick: (t) => R(e)
-					}, null, 14, Se))), 128))], 42, be)) : f("", !0),
-					F.value ? (r(), d("hex-color-picker", {
-						key: 1,
-						color: k.value,
-						"aria-label": o(S).colorPicker.pickColor,
-						onColorChanged: G,
-						onPointerdown: K,
-						onPointerup: q,
-						onKeydown: i[0] ||= c((e) => C.value = !1, ["escape"])
-					}, null, 40, Ce)) : f("", !0),
-					a.swatchOnly && F.value ? (r(), d("div", we, [m("input", {
-						type: "text",
-						class: l([o(v), "tpl:w-full"]),
-						style: p(A.value ? { paddingRight: "2.25rem" } : void 0),
-						value: O.value,
-						placeholder: a.placeholder || o(S).colorPicker.notSet,
-						disabled: a.disabled,
-						"aria-label": o(S).colorPicker.hexValue,
-						onChange: J,
-						onKeydown: i[1] ||= c(te((e) => e.target.blur(), ["prevent"]), ["enter"])
-					}, null, 46, Te), A.value ? (r(), d("button", {
-						key: 0,
-						type: "button",
-						"aria-label": o(S).colorPicker.clear,
-						title: o(S).colorPicker.clear,
-						class: "tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
-						onClick: Y
-					}, [s(o(_), {
-						size: 14,
-						"stroke-width": 1.5
-					})], 8, Ee)) : f("", !0)])) : f("", !0)
-				], 12, ye)) : f("", !0)]),
-				_: 1
-			})], 8, ["to", "disabled"]))
-		], 2));
-	}
-});
-//#endregion
-export { De as t };
-
-//# sourceMappingURL=ColorPicker-LcrzgMoW.js.map