@bg-effects/debug-ui 1.0.4 → 1.0.5

package/dist/index.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.cjs","sources":["../src/components/Tabs.vue","../src/components/DraggablePanel.vue","../src/components/SettingsTab.vue","../src/components/AnimationTab.vue","../src/components/PresetsTab.vue","../src/composables/useDebugState.ts","../src/composables/useFpsMonitor.ts","../src/composables/useCodeExport.ts","../src/components/ExportTab.vue","../src/components/StatsTab.vue","../src/components/FloatingToggleButton.vue","../src/components/CopyToast.vue","../src/DebugShell.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nexport interface TabItem<T> {\n  id: T\n  label: string\n  icon?: any\n}\n\nconst props = defineProps<{\n  tabs: TabItem<T>[]\n  modelValue: T\n}>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: T]\n}>()\n\nconst handleTabClick = (tabId: T) => {\n  emit('update:modelValue', tabId)\n}\n</script>\n\n<template>\n  <div class=\"tabs-container p-1.5 gap-2 bg-gradient-to-b from-black/50 to-black/30 rounded-2xl border border-white/10 shadow-2xl backdrop-blur-xl\">\n    <div class=\"flex gap-1.5\">\n      <button\n        v-for=\"tab in tabs\"\n        :key=\"tab.id\"\n        @click=\"handleTabClick(tab.id)\"\n        class=\"flex-1 flex flex-col items-center justify-center p-2 rounded-xl transition-all duration-300 relative group/tab pointer-events-auto cursor-pointer overflow-hidden\"\n        :class=\"modelValue === tab.id \n          ? 'bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/30 scale-[1.02]' \n          : 'bg-white/[0.04] text-white/50 hover:text-white hover:bg-white/10 hover:scale-[1.01] border border-white/5'\"\n      >\n        <!-- Active indicator -->\n        <div \n          v-if=\"modelValue === tab.id\"\n          class=\"absolute inset-0 bg-gradient-to-br from-white/20 to-transparent opacity-50\"\n        />\n        \n        <component \n          v-if=\"tab.icon\" \n          :is=\"tab.icon\" \n          class=\"w-4 h-4 mb-1.5 relative z-10 transition-transform duration-300\" \n          :class=\"[\n            modelValue === tab.id ? 'text-white drop-shadow-lg' : 'text-white/30 group-hover/tab:text-white/60',\n            modelValue === tab.id ? 'scale-110' : 'group-hover/tab:scale-105'\n          ]\" \n        />\n        \n        <span class=\"text-[8px] font-black uppercase tracking-[0.15em] text-center leading-tight relative z-10\">\n          {{ tab.label }}\n        </span>\n        \n        <!-- Hover glow effect -->\n        <div \n          class=\"absolute inset-0 bg-gradient-to-t from-blue-400/0 via-blue-400/5 to-blue-400/0 opacity-0 group-hover/tab:opacity-100 transition-opacity duration-300\"\n        />\n      </button>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.tabs-container {\n  position: relative;\n}\n\n.tabs-container::before {\n  content: '';\n  position: absolute;\n  inset: -1px;\n  border-radius: 1rem;\n  padding: 1px;\n  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n  pointer-events: none;\n}\n</style>\n\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.pointer-events-auto{pointer-events:auto;}\n.absolute{position:absolute;}\n.relative{position:relative;}\n.inset-0{inset:0;}\n.z-10{z-index:10;}\n.mb-1\\.5{margin-bottom:0.375rem;}\n.h-4{height:1rem;}\n.w-4{width:1rem;}\n.flex{display:flex;}\n.flex-1{flex:1 1 0%;}\n.flex-col{flex-direction:column;}\n.scale-\\[1\\.02\\]{--un-scale-x:1.02;--un-scale-y:1.02;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.scale-110{--un-scale-x:1.1;--un-scale-y:1.1;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.group\\/tab:hover .group-hover\\/tab\\:scale-105{--un-scale-x:1.05;--un-scale-y:1.05;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.hover\\:scale-\\[1\\.01\\]:hover{--un-scale-x:1.01;--un-scale-y:1.01;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.cursor-pointer{cursor:pointer;}\n.items-center{align-items:center;}\n.justify-center{justify-content:center;}\n.gap-1\\.5{gap:0.375rem;}\n.gap-2{gap:0.5rem;}\n.overflow-hidden{overflow:hidden;}\n.border{border-width:1px;}\n.border-white\\/10{border-color:rgb(255 255 255 / 0.1);}\n.border-white\\/5{border-color:rgb(255 255 255 / 0.05);}\n.rounded-2xl{border-radius:1rem;}\n.rounded-xl{border-radius:0.75rem;}\n.bg-white\\/\\[0\\.04\\]{background-color:rgb(255 255 255 / 0.04) /* #fff */;}\n.hover\\:bg-white\\/10:hover{background-color:rgb(255 255 255 / 0.1) /* #fff */;}\n.from-black\\/50{--un-gradient-from-position:0%;--un-gradient-from:rgb(0 0 0 / 0.5) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(0 0 0 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}\n.from-blue-400\\/0{--un-gradient-from-position:0%;--un-gradient-from:rgb(96 165 250 / 0) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(96 165 250 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}\n.from-blue-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(59 130 246 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(59 130 246 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}\n.from-white\\/20{--un-gradient-from-position:0%;--un-gradient-from:rgb(255 255 255 / 0.2) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}\n.via-blue-400\\/5{--un-gradient-via-position:50%;--un-gradient-to:rgb(96 165 250 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(96 165 250 / 0.05) var(--un-gradient-via-position), var(--un-gradient-to);}\n.to-black\\/30{--un-gradient-to-position:100%;--un-gradient-to:rgb(0 0 0 / 0.3) var(--un-gradient-to-position);}\n.to-blue-400\\/0{--un-gradient-to-position:100%;--un-gradient-to:rgb(96 165 250 / 0) var(--un-gradient-to-position);}\n.to-blue-600{--un-gradient-to-position:100%;--un-gradient-to:rgb(37 99 235 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}\n.to-transparent{--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);}\n.bg-gradient-to-b{--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}\n.bg-gradient-to-br{--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}\n.bg-gradient-to-t{--un-gradient-shape:to top in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}\n.p-1\\.5{padding:0.375rem;}\n.p-2{padding:0.5rem;}\n.text-center{text-align:center;}\n.text-\\[8px\\]{font-size:8px;}\n.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}\n.text-white\\/30{color:rgb(255 255 255 / 0.3) /* #fff */;}\n.text-white\\/50{color:rgb(255 255 255 / 0.5) /* #fff */;}\n.group\\/tab:hover .group-hover\\/tab\\:text-white\\/60{color:rgb(255 255 255 / 0.6) /* #fff */;}\n.hover\\:text-white:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}\n.font-black{font-weight:900;}\n.leading-tight{line-height:1.25;}\n.tracking-\\[0\\.15em\\]{letter-spacing:0.15em;}\n.uppercase{text-transform:uppercase;}\n.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}\n.opacity-0{opacity:0;}\n.opacity-50{opacity:0.5;}\n.group\\/tab:hover .group-hover\\/tab\\:opacity-100{opacity:1;}\n.shadow-2xl{--un-shadow:var(--un-shadow-inset) 0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.shadow-blue-500\\/30{--un-shadow-color:rgb(59 130 246 / 0.3) /* #3b82f6 */;}\n.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.backdrop-blur-xl{--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}\n.drop-shadow-lg{--un-drop-shadow:drop-shadow(0 10px 8px var(--un-drop-shadow-color, rgb(0 0 0 / 0.04))) drop-shadow(0 4px 3px var(--un-drop-shadow-color, rgb(0 0 0 / 0.1)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}\n.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.duration-300{transition-duration:300ms;}</style>","<script setup lang=\"ts\">\n/**\n * DraggablePanel - 可拖拽面板容器\n */\nimport { ref } from 'vue'\nimport { useDraggable } from '@vueuse/core'\nimport { X, Languages } from 'lucide-vue-next'\n\ninterface Props {\n  isOpen: boolean\n  title: string\n  lang?: 'zh-CN' | 'en'\n}\n\nconst props = defineProps<Props>()\nconst emit = defineEmits<{\n  'update:isOpen': [value: boolean]\n  'toggleLang': []\n}>()\n\nconst el = ref<HTMLElement | null>(null)\nconst handle = ref<HTMLElement | null>(null)\n\nconst { x, y, style } = useDraggable(el, {\n  handle,\n  initialValue: { x: window.innerWidth - 320, y: 80 },\n})\n\nconst close = () => {\n  emit('update:isOpen', false)\n}\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      v-if=\"isOpen\"\n      ref=\"el\"\n      class=\"panel-base fixed z-[10000] w-80 flex flex-col text-white font-sans select-none overflow-hidden\"\n      :style=\"style\"\n    >\n      <!-- Header / Drag Handle -->\n      <div\n        ref=\"handle\"\n        class=\"panel-header h-12 flex items-center justify-between px-5 cursor-move group/handle active:cursor-grabbing border-b border-white/5 bg-white/5\"\n      >\n        <div class=\"flex items-center gap-3 overflow-hidden\">\n          <div class=\"w-1.5 h-1.5 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.6)]\" />\n          <span class=\"text-[10px] font-bold uppercase tracking-[0.2em] text-white/40 truncate\">\n            {{ title }}\n          </span>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <button\n            v-if=\"lang\"\n            class=\"w-7 h-7 flex items-center justify-center rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer\"\n            :title=\"lang === 'zh-CN' ? '切换到英文' : 'Switch to Chinese'\"\n            @click.stop=\"emit('toggleLang')\"\n          >\n            <Languages class=\"w-3.5 h-3.5 text-white/60\" />\n          </button>\n          <button\n            class=\"w-7 h-7 rounded-lg flex items-center justify-center bg-white/5 border border-white/10 text-white/30 hover:text-white hover:bg-red-500/20 hover:border-red-500/30 transition-all pointer-events-auto cursor-pointer\"\n            @click.stop=\"close\"\n          >\n            <X class=\"w-3.5 h-3.5\" />\n          </button>\n        </div>\n      </div>\n\n      <!-- Content -->\n      <slot />\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n.panel-base {\n  background: rgba(10, 10, 12, 0.85);\n  backdrop-filter: blur(32px);\n  border-radius: 1rem;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);\n  pointer-events: auto;\n}\n</style>\n\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.pointer-events-auto{pointer-events:auto;}\n.fixed{position:fixed;}\n.z-\\[10000\\]{z-index:10000;}\n.h-1\\.5{height:0.375rem;}\n.h-12{height:3rem;}\n.h-3\\.5{height:0.875rem;}\n.h-7{height:1.75rem;}\n.w-1\\.5{width:0.375rem;}\n.w-3\\.5{width:0.875rem;}\n.w-7{width:1.75rem;}\n.w-80{width:20rem;}\n.flex{display:flex;}\n.flex-col{flex-direction:column;}\n.cursor-pointer{cursor:pointer;}\n.cursor-move{cursor:move;}\n.active\\:cursor-grabbing:active{cursor:grabbing;}\n.select-none{-webkit-user-select:none;user-select:none;}\n.items-center{align-items:center;}\n.justify-center{justify-content:center;}\n.justify-between{justify-content:space-between;}\n.gap-2{gap:0.5rem;}\n.gap-3{gap:0.75rem;}\n.overflow-hidden{overflow:hidden;}\n.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}\n.border{border-width:1px;}\n.border-b{border-bottom-width:1px;}\n.border-white\\/10{border-color:rgb(255 255 255 / 0.1);}\n.border-white\\/5{border-color:rgb(255 255 255 / 0.05);}\n.hover\\:border-blue-500\\/30:hover{border-color:rgb(59 130 246 / 0.3);}\n.hover\\:border-red-500\\/30:hover{border-color:rgb(239 68 68 / 0.3);}\n.rounded-full{border-radius:9999px;}\n.rounded-lg{border-radius:0.5rem;}\n.bg-blue-500{--un-bg-opacity:1;background-color:rgb(59 130 246 / var(--un-bg-opacity)) /* #3b82f6 */;}\n.bg-white\\/5{background-color:rgb(255 255 255 / 0.05) /* #fff */;}\n.hover\\:bg-red-500\\/20:hover{background-color:rgb(239 68 68 / 0.2) /* #ef4444 */;}\n.hover\\:bg-white\\/10:hover{background-color:rgb(255 255 255 / 0.1) /* #fff */;}\n.px-5{padding-left:1.25rem;padding-right:1.25rem;}\n.text-\\[10px\\]{font-size:10px;}\n.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}\n.text-white\\/30{color:rgb(255 255 255 / 0.3) /* #fff */;}\n.text-white\\/40{color:rgb(255 255 255 / 0.4) /* #fff */;}\n.text-white\\/60{color:rgb(255 255 255 / 0.6) /* #fff */;}\n.hover\\:text-white:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}\n.font-bold{font-weight:700;}\n.tracking-\\[0\\.2em\\]{letter-spacing:0.2em;}\n.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";}\n.uppercase{text-transform:uppercase;}\n.shadow-\\[0_0_8px_rgba\\(59\\,130\\,246\\,0\\.6\\)\\]{--un-shadow:0 0 8px var(--un-shadow-color, rgba(59, 130, 246, 0.6));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.backdrop-filter{-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}\n.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}</style>","<script setup lang=\"ts\">\n/**\n * SettingsTab - 设置标签内容\n */\n\ndefineProps<{\n  configPanelRef?: any\n}>()\n</script>\n\n<template>\n  <div class=\"settings-container pointer-events-auto\">\n    <div ref=\"configPanelRef\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.settings-container :deep(input[type=\"range\"]),\n.settings-container :deep(button),\n.settings-container :deep(select) {\n  pointer-events: auto !important;\n}\n</style>\n\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.pointer-events-auto{pointer-events:auto;}</style>","<script setup lang=\"ts\">\n/**\n * AnimationTab - 动画控制标签\n */\nimport { Play, Settings, Activity } from 'lucide-vue-next'\n\ninterface Props {\n  config?: any\n  engine?: {\n    pause: () => void\n    resume: () => void\n    restart: () => void\n  }\n  isPaused: boolean\n  t: (key: string) => string\n}\n\nconst props = defineProps<Props>()\nconst emit = defineEmits<{\n  'update:config': [value: any]\n  togglePause: []\n  restart: []\n}>()\n\nconst updateTimeSpeed = (value: number) => {\n  emit('update:config', { ...props.config, timeSpeed: value })\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-6 py-2\">\n    <!-- Time Speed Control -->\n    <div v-if=\"config?.timeSpeed !== undefined\" class=\"flex flex-col gap-4\">\n      <label class=\"text-[9px] font-black uppercase tracking-[0.2em] text-white/20 px-1\">\n        {{ t('timeSpeed') || '动画速度' }}\n      </label>\n      <div class=\"flex flex-col gap-3 group/item px-1\">\n        <div class=\"flex justify-between items-center\">\n          <span class=\"text-[9px] font-mono text-white/30 group-hover/item:text-white/50 transition-colors\">\n            {{ t('timeSpeedValue') || '速度' }}\n          </span>\n          <span class=\"text-[11px] font-black font-mono text-white/40 group-hover/item:text-blue-400 transition-colors\">\n            {{ config.timeSpeed.toFixed(1) }}x\n          </span>\n        </div>\n        <input\n          :value=\"config.timeSpeed\"\n          type=\"range\"\n          min=\"0.1\"\n          max=\"5\"\n          step=\"0.1\"\n          class=\"w-full accent-blue-500 bg-white/5 hover:bg-white/10 h-1.5 rounded-full appearance-none cursor-pointer transition-all border border-white/5\"\n          @input=\"updateTimeSpeed(Number(($event.target as HTMLInputElement).value))\"\n        >\n      </div>\n    </div>\n\n    <!-- Engine Controls -->\n    <div class=\"flex flex-col gap-4\">\n      <label class=\"text-[9px] font-black uppercase tracking-[0.2em] text-white/20 px-1\">\n        {{ t('engine') }}\n      </label>\n      <div class=\"grid grid-cols-2 gap-3\">\n        <button\n          class=\"flex flex-col items-center justify-center gap-3 py-5 rounded-xl bg-white/[0.03] border border-white/5 hover:bg-white/10 transition-all text-white/30 hover:text-white pointer-events-auto shadow-sm cursor-pointer\"\n          @click=\"emit('togglePause')\"\n        >\n          <div class=\"w-10 h-10 rounded-full bg-white/5 flex items-center justify-center mb-0.5 border border-white/5 group-hover:border-white/20\">\n            <component\n              :is=\"isPaused ? Play : Settings\"\n              class=\"w-5 h-5 transition-all text-current\"\n              :class=\"{ 'animate-spin-slow text-blue-400': !isPaused }\"\n            />\n          </div>\n          <span class=\"text-[9px] font-black uppercase tracking-[0.1em]\">\n            {{ isPaused ? t('resume') : t('active') }}\n          </span>\n        </button>\n        <button\n          class=\"flex flex-col items-center justify-center gap-3 py-5 rounded-xl bg-white/[0.03] border border-white/5 hover:bg-white/10 transition-all text-white/30 hover:text-white pointer-events-auto shadow-sm cursor-pointer\"\n          @click=\"emit('restart')\"\n        >\n          <div class=\"w-10 h-10 rounded-full bg-white/5 flex items-center justify-center mb-0.5 border border-white/5\">\n            <Activity class=\"w-5 h-5 text-green-400/60\" />\n          </div>\n          <span class=\"text-[9px] font-black uppercase tracking-[0.1em]\">\n            {{ t('restart') }}\n          </span>\n        </button>\n      </div>\n    </div>\n\n    <!-- Paused Hint -->\n    <div v-if=\"isPaused\" class=\"p-4 rounded-xl bg-orange-500/5 border border-orange-500/10 shadow-inner text-center mx-1\">\n      <p class=\"text-[9px] text-orange-400/60 leading-relaxed font-medium\">\n        \"{{ t('pausedHint') }}\"\n      </p>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@keyframes spin-slow {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.animate-spin-slow {\n  animation: spin-slow 8s linear infinite;\n}\n</style>\n\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.pointer-events-auto{pointer-events:auto;}\n.grid{display:grid;}\n.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}\n.mx-1{margin-left:0.25rem;margin-right:0.25rem;}\n.mb-0\\.5{margin-bottom:0.125rem;}\n.h-1\\.5{height:0.375rem;}\n.h-10{height:2.5rem;}\n.h-5{height:1.25rem;}\n.w-10{width:2.5rem;}\n.w-5{width:1.25rem;}\n.w-full{width:100%;}\n.flex{display:flex;}\n.flex-col{flex-direction:column;}\n.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.cursor-pointer{cursor:pointer;}\n.appearance-none{-webkit-appearance:none;appearance:none;}\n.items-center{align-items:center;}\n.justify-center{justify-content:center;}\n.justify-between{justify-content:space-between;}\n.gap-3{gap:0.75rem;}\n.gap-4{gap:1rem;}\n.gap-6{gap:1.5rem;}\n.border{border-width:1px;}\n.border-orange-500\\/10{border-color:rgb(249 115 22 / 0.1);}\n.border-white\\/5{border-color:rgb(255 255 255 / 0.05);}\n.group:hover .group-hover\\:border-white\\/20{border-color:rgb(255 255 255 / 0.2);}\n.rounded-full{border-radius:9999px;}\n.rounded-xl{border-radius:0.75rem;}\n.bg-orange-500\\/5{background-color:rgb(249 115 22 / 0.05) /* #f97316 */;}\n.bg-white\\/\\[0\\.03\\]{background-color:rgb(255 255 255 / 0.03) /* #fff */;}\n.bg-white\\/5{background-color:rgb(255 255 255 / 0.05) /* #fff */;}\n.hover\\:bg-white\\/10:hover{background-color:rgb(255 255 255 / 0.1) /* #fff */;}\n.p-4{padding:1rem;}\n.px-1{padding-left:0.25rem;padding-right:0.25rem;}\n.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}\n.py-5{padding-top:1.25rem;padding-bottom:1.25rem;}\n.text-center{text-align:center;}\n.text-\\[11px\\]{font-size:11px;}\n.text-\\[9px\\]{font-size:9px;}\n.text-blue-400,\n.group\\/item:hover .group-hover\\/item\\:text-blue-400{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity)) /* #60a5fa */;}\n.text-current{color:currentColor /* currentColor */;}\n.text-green-400\\/60{color:rgb(74 222 128 / 0.6) /* #4ade80 */;}\n.text-orange-400\\/60{color:rgb(251 146 60 / 0.6) /* #fb923c */;}\n.text-white\\/20{color:rgb(255 255 255 / 0.2) /* #fff */;}\n.text-white\\/30{color:rgb(255 255 255 / 0.3) /* #fff */;}\n.text-white\\/40{color:rgb(255 255 255 / 0.4) /* #fff */;}\n.group\\/item:hover .group-hover\\/item\\:text-white\\/50{color:rgb(255 255 255 / 0.5) /* #fff */;}\n.hover\\:text-white:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}\n.font-black{font-weight:900;}\n.font-medium{font-weight:500;}\n.leading-relaxed{line-height:1.625;}\n.tracking-\\[0\\.1em\\]{letter-spacing:0.1em;}\n.tracking-\\[0\\.2em\\]{letter-spacing:0.2em;}\n.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;}\n.uppercase{text-transform:uppercase;}\n.accent-blue-500{--un-accent-opacity:1;accent-color:rgb(59 130 246 / var(--un-accent-opacity)) /* #3b82f6 */;}\n.shadow-inner{--un-shadow:inset 0 2px 4px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.shadow-sm{--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}</style>","<script setup lang=\"ts\">\n/**\n * PresetsTab - 预设标签\n */\nimport { Bookmark } from 'lucide-vue-next'\nimport type { EffectPreset } from '@bg-effects/core'\n\ninterface Props {\n  presets: EffectPreset[]\n  config: any\n  t: (key: string) => string\n  tObj: (item: Record<string, string>) => string\n}\n\nconst props = defineProps<Props>()\nconst emit = defineEmits<{\n  'update:config': [value: any]\n}>()\n\nconst applyPreset = (preset: EffectPreset) => {\n  emit('update:config', { ...props.config, ...preset.config })\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-5\">\n    <div class=\"flex flex-col gap-3\">\n      <label class=\"text-[9px] font-black uppercase tracking-widest text-white/25 px-1\">\n        {{ t('presets') }}\n      </label>\n      <div class=\"grid grid-cols-1 gap-2.5\">\n        <button\n          v-for=\"preset in presets\"\n          :key=\"preset.id\"\n          class=\"group flex flex-col p-4 rounded-xl bg-white/[0.03] hover:bg-white/10 border border-white/5 transition-all text-left relative overflow-hidden active:scale-[0.98] pointer-events-auto cursor-pointer\"\n          @click=\"applyPreset(preset)\"\n        >\n          <div class=\"flex items-center justify-between mb-2\">\n            <span class=\"text-xs font-black text-white/40 group-hover:text-white transition-colors\">\n              {{ tObj(preset.name) }}\n            </span>\n            <Bookmark class=\"w-3.5 h-3.5 text-white/10 group-hover:text-blue-400 transition-colors\" />\n          </div>\n          <div class=\"flex flex-wrap gap-1.5 opacity-20 group-hover:opacity-60 transition-opacity\">\n            <span\n              v-for=\"(val, key) in preset.config\"\n              :key=\"String(key)\"\n              class=\"text-[8px] px-1.5 py-0.5 rounded bg-white/5 text-white/50 font-mono tracking-tighter\"\n            >\n              {{ key }}:{{ typeof val === 'number' ? val.toFixed(1) : val }}\n            </span>\n          </div>\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.pointer-events-auto{pointer-events:auto;}\n.relative{position:relative;}\n.grid{display:grid;}\n.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}\n.mb-2{margin-bottom:0.5rem;}\n.h-3\\.5{height:0.875rem;}\n.w-3\\.5{width:0.875rem;}\n.flex{display:flex;}\n.flex-col{flex-direction:column;}\n.flex-wrap{flex-wrap:wrap;}\n.active\\:scale-\\[0\\.98\\]:active{--un-scale-x:0.98;--un-scale-y:0.98;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.cursor-pointer{cursor:pointer;}\n.items-center{align-items:center;}\n.justify-between{justify-content:space-between;}\n.gap-1\\.5{gap:0.375rem;}\n.gap-2\\.5{gap:0.625rem;}\n.gap-3{gap:0.75rem;}\n.gap-5{gap:1.25rem;}\n.overflow-hidden{overflow:hidden;}\n.border{border-width:1px;}\n.border-white\\/5{border-color:rgb(255 255 255 / 0.05);}\n.rounded{border-radius:0.25rem;}\n.rounded-xl{border-radius:0.75rem;}\n.bg-white\\/\\[0\\.03\\]{background-color:rgb(255 255 255 / 0.03) /* #fff */;}\n.bg-white\\/5{background-color:rgb(255 255 255 / 0.05) /* #fff */;}\n.hover\\:bg-white\\/10:hover{background-color:rgb(255 255 255 / 0.1) /* #fff */;}\n.p-4{padding:1rem;}\n.px-1{padding-left:0.25rem;padding-right:0.25rem;}\n.px-1\\.5{padding-left:0.375rem;padding-right:0.375rem;}\n.py-0\\.5{padding-top:0.125rem;padding-bottom:0.125rem;}\n.text-left{text-align:left;}\n.text-\\[8px\\]{font-size:8px;}\n.text-\\[9px\\]{font-size:9px;}\n.text-xs{font-size:0.75rem;line-height:1rem;}\n.text-white\\/10{color:rgb(255 255 255 / 0.1) /* #fff */;}\n.text-white\\/25{color:rgb(255 255 255 / 0.25) /* #fff */;}\n.text-white\\/40{color:rgb(255 255 255 / 0.4) /* #fff */;}\n.text-white\\/50{color:rgb(255 255 255 / 0.5) /* #fff */;}\n.group:hover .group-hover\\:text-blue-400{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity)) /* #60a5fa */;}\n.group:hover .group-hover\\:text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}\n.font-black{font-weight:900;}\n.tracking-tighter{letter-spacing:-0.05em;}\n.tracking-widest{letter-spacing:0.1em;}\n.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;}\n.uppercase{text-transform:uppercase;}\n.opacity-20{opacity:0.2;}\n.group:hover .group-hover\\:opacity-60{opacity:0.6;}\n.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}</style>","/**\n * useDebugState - 调试状态管理\n */\n\nimport { ref, computed } from 'vue'\nimport type { TabType } from '../types'\n\nexport function useDebugState() {\n  const isOpen = ref(true)\n  const activeTab = ref<TabType>('settings')\n  const isPaused = ref(false)\n\n  const toggleOpen = () => {\n    isOpen.value = !isOpen.value\n  }\n\n  const setTab = (tab: TabType) => {\n    activeTab.value = tab\n  }\n\n  const togglePause = (engine?: { pause: () => void; resume: () => void }) => {\n    if (!engine) return\n    \n    if (isPaused.value) {\n      engine.resume()\n      isPaused.value = false\n    } else {\n      engine.pause()\n      isPaused.value = true\n    }\n  }\n\n  const restart = (engine?: { restart: () => void; resume: () => void }) => {\n    if (!engine) return\n    \n    engine.restart()\n    if (isPaused.value) {\n      engine.resume()\n      isPaused.value = false\n    }\n  }\n\n  return {\n    isOpen,\n    activeTab,\n    isPaused,\n    toggleOpen,\n    setTab,\n    togglePause,\n    restart,\n  }\n}\n","/**\n * useFpsMonitor - FPS监控\n */\n\nimport { ref, onMounted, onUnmounted } from 'vue'\nimport { useFps } from '@vueuse/core'\n\nexport function useFpsMonitor() {\n  const fps = useFps()\n  const fpsHistory = ref<number[]>([])\n  let fpsInterval: any = null\n\n  onMounted(() => {\n    fpsInterval = setInterval(() => {\n      // Ensure fps.value is a valid number\n      const currentFps = (typeof fps.value === 'number' && !isNaN(fps.value)) ? fps.value : 0\n      fpsHistory.value.push(currentFps)\n      if (fpsHistory.value.length > 30) {\n        fpsHistory.value.shift()\n      }\n    }, 500)\n  })\n\n  onUnmounted(() => {\n    if (fpsInterval) {\n      clearInterval(fpsInterval)\n    }\n  })\n\n  return {\n    fps,\n    fpsHistory,\n  }\n}\n","/**\n * useCodeExport - 代码导出功能\n */\n\nimport { ref, onUnmounted } from 'vue'\n\nexport type ExportType = 'config' | 'sfc' | 'props'\n\nexport interface UseCodeExportOptions {\n  config: any\n  metaId: string\n  onSuccess?: (message: string) => void\n}\n\nexport function useCodeExport(options: UseCodeExportOptions) {\n  const copyToast = ref('')\n  const copyToastTimer = ref<any>(null)\n\n  const getComponentName = () => {\n    return options.metaId\n      .charAt(0).toUpperCase() + \n      options.metaId.slice(1).replace(/-([a-z])/g, (g) => g[1].toUpperCase())\n  }\n\n  const generateCode = (type: ExportType): string => {\n    const componentName = getComponentName()\n    \n    if (type === 'config') {\n      return JSON.stringify(options.config, null, 2)\n    }\n    \n    if (type === 'props') {\n      const propsStr = Object.entries(options.config || {})\n        .filter(([key]) => !['debug', 'lang', 'className'].includes(key))\n        .map(([key, value]) => {\n          if (typeof value === 'string') {\n            return `${key}=\"${value}\"`\n          }\n          return `:${key}=\"${value}\"`\n        })\n        .join('\\n  ')\n      return `<${componentName}\\n  ${propsStr}\\n/>`\n    }\n    \n    // type === 'sfc'\n    return `<script setup>\nimport { ${componentName} } from '@bg-effects/${options.metaId}'\n\nconst config = ${JSON.stringify(options.config, null, 2)}\n<\\/script>\n\n<template>\n  <${componentName} v-bind=\"config\" />\n</template>`\n  }\n\n  const copyCode = async (type: ExportType) => {\n    const code = generateCode(type)\n    \n    try {\n      await navigator.clipboard.writeText(code)\n      showCopyToast('复制成功!')\n      options.onSuccess?.('复制成功!')\n    } catch (err) {\n      console.error('复制失败:', err)\n    }\n  }\n\n  const showCopyToast = (message: string) => {\n    copyToast.value = message\n    if (copyToastTimer.value) {\n      clearTimeout(copyToastTimer.value)\n    }\n    copyToastTimer.value = setTimeout(() => {\n      copyToast.value = ''\n    }, 2000)\n  }\n\n  onUnmounted(() => {\n    if (copyToastTimer.value) {\n      clearTimeout(copyToastTimer.value)\n    }\n  })\n\n  return {\n    copyCode,\n    copyToast,\n    generateCode,\n    getComponentName,\n  }\n}\n","<script setup lang=\"ts\">\n/**\n * ExportTab - 导出代码标签\n */\nimport { Code } from 'lucide-vue-next'\nimport { useCodeExport } from '../composables'\n\ninterface Props {\n  config: any\n  metaId: string\n  t: (key: string) => string\n}\n\nconst props = defineProps<Props>()\n\nconst { copyCode, getComponentName } = useCodeExport({\n  config: props.config,\n  metaId: props.metaId,\n})\n\nconst componentName = getComponentName()\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-6\">\n    <!-- Import Statement -->\n    <div class=\"flex flex-col gap-3\">\n      <label class=\"text-[9px] font-black uppercase tracking-widest text-white/25 px-1\">\n        {{ t('vueComponent') }}\n      </label>\n      <div class=\"relative group\">\n        <pre class=\"bg-black/40 rounded-xl p-4 text-[9px] font-mono text-white/40 overflow-hidden whitespace-pre-wrap leading-relaxed border border-white/5 shadow-inner italic\">import { {{ componentName }} } from '@bg-effects/{{ metaId }}'</pre>\n        <button\n          class=\"absolute top-3 right-3 p-2 rounded-lg bg-white/5 hover:bg-blue-600 opacity-0 group-hover:opacity-100 transition-all active:bg-blue-700 pointer-events-auto border border-white/10 cursor-pointer\"\n          @click=\"copyCode('sfc')\"\n        >\n          <Code class=\"w-4 h-4\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Component Props -->\n    <div class=\"flex flex-col gap-3\">\n      <label class=\"text-[9px] font-black uppercase tracking-widest text-white/25 px-1\">\n        {{ t('componentProps') }}\n      </label>\n      <div class=\"relative group\">\n        <pre class=\"bg-black/40 rounded-xl p-4 text-[9px] font-mono text-white/30 max-h-32 overflow-y-auto custom-scrollbar border border-white/5 shadow-inner leading-relaxed\">&lt;{{ componentName }} ... /&gt;</pre>\n        <button\n          class=\"absolute top-3 right-3 p-2 rounded-lg bg-white/5 hover:bg-blue-600 opacity-0 group-hover:opacity-100 transition-all active:bg-blue-700 pointer-events-auto border border-white/10 cursor-pointer\"\n          @click=\"copyCode('props')\"\n        >\n          <Code class=\"w-4 h-4\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Config JSON -->\n    <div class=\"flex flex-col gap-3\">\n      <div class=\"flex justify-between items-center px-1\">\n        <label class=\"text-[9px] font-black uppercase tracking-widest text-white/25\">\n          {{ t('configJson') }}\n        </label>\n      </div>\n      <div class=\"relative group\">\n        <div class=\"bg-black/40 rounded-xl p-4 text-[9px] font-mono text-white/30 max-h-48 overflow-y-auto custom-scrollbar border border-white/5 shadow-inner\">\n          <pre>{{ JSON.stringify(config, null, 2) }}</pre>\n        </div>\n        <button\n          class=\"absolute top-3 right-3 p-2 rounded-lg bg-white/5 hover:bg-blue-600 opacity-0 group-hover:opacity-100 transition-all active:bg-blue-700 pointer-events-auto border border-white/10 cursor-pointer\"\n          @click=\"copyCode('config')\"\n        >\n          <Code class=\"w-4 h-4\" />\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.custom-scrollbar::-webkit-scrollbar {\n  width: 4px;\n}\n\n.custom-scrollbar::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.custom-scrollbar::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.08);\n  border-radius: 10px;\n}\n\n.custom-scrollbar::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.2);\n}\n</style>\n\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.pointer-events-auto{pointer-events:auto;}\n.absolute{position:absolute;}\n.relative{position:relative;}\n.right-3{right:0.75rem;}\n.top-3{top:0.75rem;}\n.h-4{height:1rem;}\n.max-h-32{max-height:8rem;}\n.max-h-48{max-height:12rem;}\n.w-4{width:1rem;}\n.flex{display:flex;}\n.flex-col{flex-direction:column;}\n.cursor-pointer{cursor:pointer;}\n.items-center{align-items:center;}\n.justify-between{justify-content:space-between;}\n.gap-3{gap:0.75rem;}\n.gap-6{gap:1.5rem;}\n.overflow-hidden{overflow:hidden;}\n.overflow-y-auto{overflow-y:auto;}\n.whitespace-pre-wrap{white-space:pre-wrap;}\n.border{border-width:1px;}\n.border-white\\/10{border-color:rgb(255 255 255 / 0.1);}\n.border-white\\/5{border-color:rgb(255 255 255 / 0.05);}\n.rounded-lg{border-radius:0.5rem;}\n.rounded-xl{border-radius:0.75rem;}\n.bg-black\\/40{background-color:rgb(0 0 0 / 0.4) /* #000 */;}\n.bg-white\\/5{background-color:rgb(255 255 255 / 0.05) /* #fff */;}\n.hover\\:bg-blue-600:hover{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity)) /* #2563eb */;}\n.active\\:bg-blue-700:active{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity)) /* #1d4ed8 */;}\n.p-2{padding:0.5rem;}\n.p-4{padding:1rem;}\n.px-1{padding-left:0.25rem;padding-right:0.25rem;}\n.text-\\[9px\\]{font-size:9px;}\n.text-white\\/25{color:rgb(255 255 255 / 0.25) /* #fff */;}\n.text-white\\/30{color:rgb(255 255 255 / 0.3) /* #fff */;}\n.text-white\\/40{color:rgb(255 255 255 / 0.4) /* #fff */;}\n.font-black{font-weight:900;}\n.leading-relaxed{line-height:1.625;}\n.tracking-widest{letter-spacing:0.1em;}\n.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;}\n.uppercase{text-transform:uppercase;}\n.italic{font-style:italic;}\n.opacity-0{opacity:0;}\n.group:hover .group-hover\\:opacity-100{opacity:1;}\n.shadow-inner{--un-shadow:inset 0 2px 4px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}</style>","<script setup lang=\"ts\">\n/**\n * StatsTab - 性能统计标签\n */\nimport { Monitor } from 'lucide-vue-next'\nimport { useFpsMonitor } from '../composables'\n\ninterface Props {\n  t: (key: string) => string\n}\n\ndefineProps<Props>()\n\nconst { fps, fpsHistory } = useFpsMonitor()\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-6 py-2\">\n    <!-- FPS Display -->\n    <div class=\"bg-gradient-to-br from-white/[0.05] to-white/[0.02] rounded-2xl p-6 border border-white/10 flex flex-col gap-3 items-center justify-center shadow-xl group/stat hover:from-white/[0.08] hover:to-white/[0.04] transition-all\">\n      <div class=\"flex items-center gap-3 text-blue-400/40 mb-1 group-hover/stat:text-blue-400/70 transition-colors\">\n        <Monitor class=\"w-5 h-5\" />\n        <span class=\"text-[11px] font-black uppercase tracking-[0.2em]\">\n          {{ t('frameRate') }}\n        </span>\n      </div>\n      <span\n        class=\"text-6xl font-black tracking-tighter transition-all duration-300\"\n        :class=\"\n          fps > 55\n            ? 'text-green-400 drop-shadow-[0_0_20px_rgba(34,197,94,0.5)]'\n            : fps > 30\n              ? 'text-yellow-400 drop-shadow-[0_0_20px_rgba(234,179,8,0.5)]'\n              : 'text-red-400 drop-shadow-[0_0_20px_rgba(239,68,68,0.5)]'\n        \"\n      >\n        {{ fps }}\n      </span>\n      <span class=\"text-[10px] uppercase tracking-[0.15em] text-white/30 font-bold\">\n        {{ t('framesPerSecond') }}\n      </span>\n    </div>\n\n    <!-- FPS History Chart -->\n    <div class=\"flex flex-col gap-3\">\n      <div class=\"flex justify-between items-center px-1\">\n        <label class=\"text-[9px] font-black uppercase tracking-widest text-white/25\">\n          {{ t('stats') }}\n        </label>\n        <span class=\"text-[8px] font-mono uppercase text-white/15 tracking-tighter\">\n          {{ t('rolling') }}\n        </span>\n      </div>\n      <div class=\"bg-black/40 border border-white/10 h-24 rounded-xl relative overflow-hidden flex items-end ring-1 ring-inset ring-white/5 shadow-inner\">\n        <svg class=\"w-full h-full\" viewBox=\"0 0 100 80\" preserveAspectRatio=\"none\">\n          <path\n            :d=\"`M -10 100 ${fpsHistory.map((v, i) => `L ${(i / (fpsHistory.length - 1)) * 100} ${80 - (Math.min(v, 60) / 60) * 60}`).join(' ')} L 110 100 Z`\"\n            fill=\"url(#fps-gradient)\"\n            stroke=\"none\"\n          />\n          <path\n            :d=\"fpsHistory.map((v, i) => `${i === 0 ? 'M' : 'L'} ${(i / (fpsHistory.length - 1)) * 100} ${80 - (Math.min(v, 60) / 60) * 60}`).join(' ')\"\n            fill=\"none\"\n            class=\"stroke-blue-400/40\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n          <defs>\n            <linearGradient id=\"fps-gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"rgba(59, 130, 246, 0.3)\" />\n              <stop offset=\"100%\" stop-color=\"rgba(59, 130, 246, 0)\" />\n            </linearGradient>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.relative{position:relative;}\n.mb-1{margin-bottom:0.25rem;}\n.h-24{height:6rem;}\n.h-5{height:1.25rem;}\n.h-full{height:100%;}\n.w-5{width:1.25rem;}\n.w-full{width:100%;}\n.flex{display:flex;}\n.flex-col{flex-direction:column;}\n.items-end{align-items:flex-end;}\n.items-center{align-items:center;}\n.justify-center{justify-content:center;}\n.justify-between{justify-content:space-between;}\n.gap-3{gap:0.75rem;}\n.gap-6{gap:1.5rem;}\n.overflow-hidden{overflow:hidden;}\n.border{border-width:1px;}\n.border-white\\/10{border-color:rgb(255 255 255 / 0.1);}\n.rounded-2xl{border-radius:1rem;}\n.rounded-xl{border-radius:0.75rem;}\n.bg-black\\/40{background-color:rgb(0 0 0 / 0.4) /* #000 */;}\n.from-white\\/\\[0\\.05\\]{--un-gradient-from-position:0%;--un-gradient-from:rgb(255 255 255 / 0.05) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}\n.hover\\:from-white\\/\\[0\\.08\\]:hover{--un-gradient-from-position:0%;--un-gradient-from:rgb(255 255 255 / 0.08) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}\n.to-white\\/\\[0\\.02\\]{--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0.02) var(--un-gradient-to-position);}\n.hover\\:to-white\\/\\[0\\.04\\]:hover{--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0.04) var(--un-gradient-to-position);}\n.bg-gradient-to-br{--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}\n[stroke-width~=\"\\32 \"]{stroke-width:2px;}\n.stroke-blue-400\\/40{stroke:rgb(96 165 250 / 0.4) /* #60a5fa */;}\n[stroke~=\"none\"]{stroke:none;}\n.p-6{padding:1.5rem;}\n.px-1{padding-left:0.25rem;padding-right:0.25rem;}\n.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}\n.text-\\[10px\\]{font-size:10px;}\n.text-\\[11px\\]{font-size:11px;}\n.text-\\[8px\\]{font-size:8px;}\n.text-\\[9px\\]{font-size:9px;}\n.text-6xl{font-size:3.75rem;line-height:1;}\n.text-blue-400\\/40{color:rgb(96 165 250 / 0.4) /* #60a5fa */;}\n.text-green-400{--un-text-opacity:1;color:rgb(74 222 128 / var(--un-text-opacity)) /* #4ade80 */;}\n.text-red-400{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity)) /* #f87171 */;}\n.text-white\\/15{color:rgb(255 255 255 / 0.15) /* #fff */;}\n.text-white\\/25{color:rgb(255 255 255 / 0.25) /* #fff */;}\n.text-white\\/30{color:rgb(255 255 255 / 0.3) /* #fff */;}\n.text-yellow-400{--un-text-opacity:1;color:rgb(250 204 21 / var(--un-text-opacity)) /* #facc15 */;}\n.group\\/stat:hover .group-hover\\/stat\\:text-blue-400\\/70{color:rgb(96 165 250 / 0.7) /* #60a5fa */;}\n.font-black{font-weight:900;}\n.font-bold{font-weight:700;}\n.tracking-\\[0\\.15em\\]{letter-spacing:0.15em;}\n.tracking-\\[0\\.2em\\]{letter-spacing:0.2em;}\n.tracking-tighter{letter-spacing:-0.05em;}\n.tracking-widest{letter-spacing:0.1em;}\n.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;}\n.uppercase{text-transform:uppercase;}\n.shadow-inner{--un-shadow:inset 0 2px 4px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.ring-1{--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.ring-white\\/5{--un-ring-color:rgb(255 255 255 / 0.05) /* #fff */;}\n.ring-inset{--un-ring-inset:inset;}\n.drop-shadow-\\[0_0_20px_rgba\\(234\\,179\\,8\\,0\\.5\\)\\]{--un-drop-shadow:drop-shadow(0 0 20px rgba(234,179,8,0.5));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}\n.drop-shadow-\\[0_0_20px_rgba\\(239\\,68\\,68\\,0\\.5\\)\\]{--un-drop-shadow:drop-shadow(0 0 20px rgba(239,68,68,0.5));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}\n.drop-shadow-\\[0_0_20px_rgba\\(34\\,197\\,94\\,0\\.5\\)\\]{--un-drop-shadow:drop-shadow(0 0 20px rgba(34,197,94,0.5));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}\n.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.duration-300{transition-duration:300ms;}</style>","<script setup lang=\"ts\">\n/**\n * FloatingToggleButton - 浮动切换按钮\n */\nimport { Settings } from 'lucide-vue-next'\n\ninterface Props {\n  isOpen: boolean\n  isPaused: boolean\n}\n\ndefineProps<Props>()\nconst emit = defineEmits<{\n  toggle: []\n}>()\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <button\n      class=\"fixed bottom-8 right-8 z-[10001] w-14 h-14 bg-[#121212]/90 border border-white/20 backdrop-blur-2xl rounded-full flex items-center justify-center text-white/50 hover:text-white hover:bg-black transition-all shadow-[0_20px_40px_-8px_rgba(0,0,0,0.5)] active:scale-90 group pointer-events-auto ring-4 ring-white/5\"\n      @click=\"emit('toggle')\"\n    >\n      <Settings\n        class=\"w-6 h-6 transition-transform duration-500\"\n        :class=\"{ 'rotate-180 text-blue-400 scale-110': isOpen }\"\n      />\n      <!-- Status Dot -->\n      <div\n        v-if=\"!isPaused\"\n        class=\"absolute top-3 right-3 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-[#121212] shadow-[0_0_8px_rgba(34,197,94,0.6)]\"\n      />\n    </button>\n  </Teleport>\n</template>\n\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.pointer-events-auto{pointer-events:auto;}\n.absolute{position:absolute;}\n.fixed{position:fixed;}\n.bottom-8{bottom:2rem;}\n.right-3{right:0.75rem;}\n.right-8{right:2rem;}\n.top-3{top:0.75rem;}\n.z-\\[10001\\]{z-index:10001;}\n.h-14{height:3.5rem;}\n.h-2\\.5{height:0.625rem;}\n.h-6{height:1.5rem;}\n.w-14{width:3.5rem;}\n.w-2\\.5{width:0.625rem;}\n.w-6{width:1.5rem;}\n.flex{display:flex;}\n.rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.scale-110{--un-scale-x:1.1;--un-scale-y:1.1;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.active\\:scale-90:active{--un-scale-x:0.9;--un-scale-y:0.9;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.items-center{align-items:center;}\n.justify-center{justify-content:center;}\n.border{border-width:1px;}\n.border-2{border-width:2px;}\n.border-\\[\\#121212\\]{--un-border-opacity:1;border-color:rgb(18 18 18 / var(--un-border-opacity));}\n.border-white\\/20{border-color:rgb(255 255 255 / 0.2);}\n.rounded-full{border-radius:9999px;}\n.bg-\\[\\#121212\\]\\/90{background-color:rgb(18 18 18 / 0.9) /* #121212 */;}\n.bg-green-500{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity)) /* #22c55e */;}\n.hover\\:bg-black:hover{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity)) /* #000 */;}\n.text-blue-400{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity)) /* #60a5fa */;}\n.text-white\\/50{color:rgb(255 255 255 / 0.5) /* #fff */;}\n.hover\\:text-white:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}\n.shadow-\\[0_0_8px_rgba\\(34\\,197\\,94\\,0\\.6\\)\\]{--un-shadow:0 0 8px var(--un-shadow-color, rgba(34, 197, 94, 0.6));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.shadow-\\[0_20px_40px_-8px_rgba\\(0\\,0\\,0\\,0\\.5\\)\\]{--un-shadow:0 20px 40px -8px var(--un-shadow-color, rgba(0, 0, 0, 0.5));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.ring-4{--un-ring-width:4px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.ring-white\\/5{--un-ring-color:rgb(255 255 255 / 0.05) /* #fff */;}\n.backdrop-blur-2xl{--un-backdrop-blur:blur(40px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}\n.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.duration-500{transition-duration:500ms;}</style>","<script setup lang=\"ts\">\n/**\n * CopyToast - 复制成功提示\n */\n\ninterface Props {\n  message: string\n}\n\ndefineProps<Props>()\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-active-class=\"transition-all duration-300\"\n      leave-active-class=\"transition-all duration-300\"\n      enter-from-class=\"opacity-0 translate-y-4\"\n      enter-to-class=\"opacity-100 translate-y-0\"\n      leave-from-class=\"opacity-100 translate-y-0\"\n      leave-to-class=\"opacity-0 translate-y-4\"\n    >\n      <div\n        v-if=\"message\"\n        class=\"fixed bottom-24 right-8 z-[10002] px-5 py-3 bg-green-600/90 backdrop-blur-xl rounded-xl border border-green-400/30 shadow-2xl text-white text-sm font-bold flex items-center gap-2\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n        </svg>\n        {{ message }}\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.fixed{position:fixed;}\n.bottom-24{bottom:6rem;}\n.right-8{right:2rem;}\n.z-\\[10002\\]{z-index:10002;}\n.h-4{height:1rem;}\n.w-4{width:1rem;}\n.flex{display:flex;}\n.translate-y-0{--un-translate-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.translate-y-4{--un-translate-y:1rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.items-center{align-items:center;}\n.gap-2{gap:0.5rem;}\n.border{border-width:1px;}\n.border-green-400\\/30{border-color:rgb(74 222 128 / 0.3);}\n.rounded-xl{border-radius:0.75rem;}\n.bg-green-600\\/90{background-color:rgb(22 163 74 / 0.9) /* #16a34a */;}\n[stroke-width~=\"\\32 \"]{stroke-width:2px;}\n.px-5{padding-left:1.25rem;padding-right:1.25rem;}\n.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}\n.text-sm{font-size:0.875rem;line-height:1.25rem;}\n.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}\n.font-bold{font-weight:700;}\n.opacity-0{opacity:0;}\n.opacity-100{opacity:1;}\n.shadow-2xl{--un-shadow:var(--un-shadow-inset) 0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.backdrop-blur-xl{--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}\n.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.duration-300{transition-duration:300ms;}</style>","<script setup lang=\"ts\">\n/**\n * DebugShell - 调试面板主容器\n * 职责：布局、标签切换、事件协调\n */\nimport { ref, computed } from 'vue'\nimport { Activity, Settings, Bookmark, Play, Code } from 'lucide-vue-next'\nimport type { DebugUIProps, TabType } from './types'\nimport type { EffectMeta } from '@bg-effects/core'\nimport zhCN from './locales/zh-CN.json'\nimport en from './locales/en.json'\nimport Tabs from './components/Tabs.vue'\nimport DraggablePanel from './components/DraggablePanel.vue'\nimport SettingsTab from './components/SettingsTab.vue'\nimport AnimationTab from './components/AnimationTab.vue'\nimport PresetsTab from './components/PresetsTab.vue'\nimport ExportTab from './components/ExportTab.vue'\nimport StatsTab from './components/StatsTab.vue'\nimport FloatingToggleButton from './components/FloatingToggleButton.vue'\nimport CopyToast from './components/CopyToast.vue'\nimport { useDebugState, useCodeExport } from './composables'\n\nconst props = defineProps<DebugUIProps>()\nconst emit = defineEmits(['update:config', 'update:lang', 'randomize'])\n\nconst internalLang = computed({\n  get: () => props.lang || 'zh-CN',\n  set: (value) => emit('update:lang', value)\n})\n\n// 状态管理\nconst { isOpen, activeTab, isPaused, toggleOpen, togglePause, restart } = useDebugState()\nconst configPanelRef = ref<any>(null)\n\n// 代码导出\nconst { copyToast } = useCodeExport({\n  config: props.config,\n  metaId: props.meta.id,\n})\n\n// 国际化\nconst shellI18n: Record<string, any> = {\n  'zh-CN': zhCN,\n  'en': en,\n}\n\nconst currentLang = computed(() => internalLang.value)\nconst t = (path: string) => {\n  const dict = shellI18n[currentLang.value]\n  return path.split('.').reduce((obj: any, key) => obj?.[key], dict) || path\n}\nconst tObj = (item: any) => item[currentLang.value] || item.en\n\nconst toggleLang = () => {\n  internalLang.value = internalLang.value === 'zh-CN' ? 'en' : 'zh-CN'\n}\n\n// 标签配置\ninterface TabItem {\n  id: TabType\n  icon: any\n  label: string\n}\n\nconst tabs = computed((): TabItem[] => {\n  const allTabs = [\n    { id: 'settings' as TabType, icon: Settings, label: t('tabs.settings') },\n    { id: 'presets' as TabType, icon: Bookmark, label: t('tabs.presets') },\n    { id: 'animation' as TabType, icon: Play, label: t('tabs.animation') },\n    { id: 'export' as TabType, icon: Code, label: t('tabs.export') },\n    { id: 'stats' as TabType, icon: Activity, label: t('tabs.stats') },\n  ]\n  return allTabs\n})\n\n// 事件处理\nconst handleRandomize = () => {\n  emit('randomize')\n}\n\nconst handleTogglePause = () => {\n  togglePause(props.engine)\n}\n\nconst handleRestart = () => {\n  restart(props.engine)\n}\n\nconst handleUpdateConfig = (newConfig: any) => {\n  emit('update:config', newConfig)\n}\n</script>\n\n<template>\n  <!-- 主面板 -->\n  <DraggablePanel\n    v-model:isOpen=\"isOpen\"\n    :title=\"meta.name[currentLang] || meta.name.en\"\n    :lang=\"currentLang\"\n    @toggle-lang=\"toggleLang\"\n  >\n    <!-- 标签导航 -->\n    <div class=\"px-5 py-3\">\n      <Tabs v-model=\"activeTab\" :tabs=\"tabs\" />\n    </div>\n\n    <!-- 内容区域 -->\n    <div class=\"flex-1 overflow-y-auto max-h-[480px] custom-scrollbar px-5 py-2 pointer-events-auto\">\n      <!-- 设置标签 -->\n      <SettingsTab v-if=\"activeTab === 'settings'\" :config-panel-ref=\"configPanelRef\">\n        <div ref=\"configPanelRef\">\n          <slot name=\"settings\" />\n        </div>\n      </SettingsTab>\n\n      <!-- 动画控制标签 -->\n      <AnimationTab\n        v-else-if=\"activeTab === 'animation'\"\n        :config=\"config\"\n        :engine=\"engine\"\n        :is-paused=\"isPaused\"\n        :t=\"t\"\n        @update:config=\"handleUpdateConfig\"\n        @toggle-pause=\"handleTogglePause\"\n        @restart=\"handleRestart\"\n      />\n\n      <!-- 预设标签 -->\n      <PresetsTab\n        v-else-if=\"activeTab === 'presets'\"\n        :presets=\"(meta as EffectMeta).presets\"\n        :config=\"config\"\n        :t=\"t\"\n        :t-obj=\"tObj\"\n        @update:config=\"handleUpdateConfig\"\n      />\n\n      <!-- 导出标签 -->\n      <ExportTab\n        v-else-if=\"activeTab === 'export'\"\n        :config=\"config\"\n        :meta-id=\"meta.id\"\n        :t=\"t\"\n      />\n\n      <!-- 统计标签 -->\n      <StatsTab\n        v-else-if=\"activeTab === 'stats'\"\n        :t=\"t\"\n      />\n    </div>\n\n    <!-- 底部操作按钮 -->\n    <div v-if=\"activeTab === 'settings'\" class=\"px-5 pb-5 pt-3\">\n      <button\n        class=\"w-full h-11 flex items-center justify-center gap-3 bg-white/[0.03] hover:bg-white/10 rounded-xl border border-white/5 text-[10px] font-bold uppercase tracking-[0.25em] transition-all active:scale-[0.98] pointer-events-auto shadow-sm group/btn cursor-pointer\"\n        @click=\"handleRandomize\"\n      >\n        <Activity class=\"w-3.5 h-3.5 text-white/30 group-hover/btn:text-blue-400 group-hover/btn:rotate-12 transition-all\" />\n        <span class=\"text-white/50 group-hover/btn:text-white transition-colors\">\n          {{ t('randomize') }}\n        </span>\n      </button>\n    </div>\n  </DraggablePanel>\n\n  <!-- 浮动切换按钮 -->\n  <FloatingToggleButton\n    :is-open=\"isOpen\"\n    :is-paused=\"isPaused\"\n    @toggle=\"toggleOpen\"\n  />\n\n  <!-- 复制成功提示 -->\n  <CopyToast :message=\"copyToast\" />\n</template>\n\n<style scoped>\n.custom-scrollbar::-webkit-scrollbar {\n  width: 4px;\n}\n\n.custom-scrollbar::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.custom-scrollbar::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.08);\n  border-radius: 10px;\n}\n\n.custom-scrollbar::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.2);\n}\n</style>\n\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.pointer-events-auto{pointer-events:auto;}\n.h-11{height:2.75rem;}\n.h-3\\.5{height:0.875rem;}\n.max-h-\\[480px\\]{max-height:480px;}\n.w-3\\.5{width:0.875rem;}\n.w-full{width:100%;}\n.flex{display:flex;}\n.flex-1{flex:1 1 0%;}\n.group\\/btn:hover .group-hover\\/btn\\:rotate-12{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:12deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.active\\:scale-\\[0\\.98\\]:active{--un-scale-x:0.98;--un-scale-y:0.98;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}\n.cursor-pointer{cursor:pointer;}\n.items-center{align-items:center;}\n.justify-center{justify-content:center;}\n.gap-3{gap:0.75rem;}\n.overflow-y-auto{overflow-y:auto;}\n.border{border-width:1px;}\n.border-white\\/5{border-color:rgb(255 255 255 / 0.05);}\n.rounded-xl{border-radius:0.75rem;}\n.bg-white\\/\\[0\\.03\\]{background-color:rgb(255 255 255 / 0.03) /* #fff */;}\n.hover\\:bg-white\\/10:hover{background-color:rgb(255 255 255 / 0.1) /* #fff */;}\n.px-5{padding-left:1.25rem;padding-right:1.25rem;}\n.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}\n.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}\n.pb-5{padding-bottom:1.25rem;}\n.pt-3{padding-top:0.75rem;}\n.text-\\[10px\\]{font-size:10px;}\n.text-white\\/30{color:rgb(255 255 255 / 0.3) /* #fff */;}\n.text-white\\/50{color:rgb(255 255 255 / 0.5) /* #fff */;}\n.group\\/btn:hover .group-hover\\/btn\\:text-blue-400{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity)) /* #60a5fa */;}\n.group\\/btn:hover .group-hover\\/btn\\:text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}\n.font-bold{font-weight:700;}\n.tracking-\\[0\\.25em\\]{letter-spacing:0.25em;}\n.uppercase{text-transform:uppercase;}\n.shadow-sm{--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}\n.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}\n.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}</style>"],"names":["emit","__emit","handleTabClick","tabId","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_Fragment","_renderList","__props","tab","$event","_hoisted_4","_createBlock","_resolveDynamicComponent","_hoisted_5","_toDisplayString","el","ref","handle","x","y","style","useDraggable","close","_Teleport","_unref","_hoisted_3","_createVNode","Languages","X","_renderSlot","_ctx","props","updateTimeSpeed","value","_a","_hoisted_6","_hoisted_7","_cache","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","Play","Settings","_normalizeClass","_hoisted_13","_hoisted_14","Activity","_hoisted_15","_hoisted_16","_hoisted_17","applyPreset","preset","Bookmark","_hoisted_8","val","key","useDebugState","isOpen","activeTab","isPaused","engine","useFpsMonitor","fps","useFps","fpsHistory","fpsInterval","onMounted","currentFps","onUnmounted","useCodeExport","options","copyToast","copyToastTimer","getComponentName","g","generateCode","type","componentName","propsStr","copyCode","code","showCopyToast","err","message","Code","Monitor","v","i","_Transition","_createTextVNode","internalLang","computed","toggleOpen","togglePause","restart","configPanelRef","shellI18n","zhCN","en","currentLang","t","path","dict","obj","tObj","item","toggleLang","tabs","handleRandomize","handleTogglePause","handleRestart","handleUpdateConfig","newConfig","DraggablePanel","Tabs","SettingsTab","AnimationTab","PresetsTab","ExportTab","StatsTab","FloatingToggleButton","CopyToast"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bg-effects/debug-ui",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -34,9 +34,9 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "vite-plugin-dts": "^4.5.1",
     "vue": "^3.5.27",
-    "@bg-effects/core": "1.0.2",
-    "@bg-effects/shared": "1.0.4",
-    "@bg-effects/configs": "1.0.1"
+    "@bg-effects/configs": "1.0.2",
+    "@bg-effects/core": "1.0.3",
+    "@bg-effects/shared": "1.0.5"
   },
   "scripts": {
     "build": "vite build",