@yyc3/music-ai 0.0.0-stage → 1.0.0

package/dist/index.js

@@ -0,0 +1,2136 @@
+import { jsxs as i, Fragment as $, jsx as e } from "react/jsx-runtime";
+import { useState as u, useRef as we, useEffect as ye, useCallback as E } from "react";
+import { AnimatePresence as Q, motion as p } from "motion/react";
+import { clsx as y } from "clsx";
+import { X as re, Mic as xe, BrainCircuit as Te, ChevronDown as mt, Clock as Oe, MicOff as Ve, MessageSquare as Qe, Smile as _e, Frown as Ye, Zap as Xe, Cloud as He, Heart as et, Wand2 as We, Plus as pe, Minus as Ie, Loader2 as fe, Sparkles as je, RefreshCw as xt, Check as ee, Copy as ge, Volume2 as pt, Music as $e, ArrowLeft as bt, Settings2 as ut, Layers as Ge, FolderOpen as wt, Film as tt, ExternalLink as gt, ChevronRight as ft, Trash2 as yt, Share2 as Nt, Play as vt, Pause as kt, Camera as Ct, Maximize2 as St } from "lucide-react";
+import { useI18n as Ae, useAudioComposer as it } from "@yyc3/music-hooks";
+import { apiFetch as _ } from "@yyc3/music-utils";
+const Mt = [
+  { cmd: '"播放"', desc: "播放音乐" },
+  { cmd: '"暂停"', desc: "暂停音乐" },
+  { cmd: '"下一首"', desc: "下一首歌" },
+  { cmd: '"上一首"', desc: "上一首歌" },
+  { cmd: '"喜欢"', desc: "点赞" },
+  { cmd: '"随机播放"', desc: "切换随机" },
+  { cmd: '"音量大"', desc: "增大音量" },
+  { cmd: '"音量小"', desc: "减小音量" },
+  { cmd: '"静音"', desc: "静音切换" },
+  { cmd: '"播放列表"', desc: "打开列表" },
+  { cmd: '"创作"', desc: "AI歌词" },
+  { cmd: '"排行"', desc: "排行榜" },
+  { cmd: '"评论"', desc: "打开评论" },
+  { cmd: '"社区"', desc: "社区动态" },
+  { cmd: '"分析"', desc: "数据分析" }
+], zt = [
+  { cmd: '"play"', desc: "Play music" },
+  { cmd: '"pause"', desc: "Pause music" },
+  { cmd: '"next"', desc: "Next track" },
+  { cmd: '"previous"', desc: "Previous track" },
+  { cmd: '"like"', desc: "Like song" },
+  { cmd: '"shuffle"', desc: "Toggle shuffle" },
+  { cmd: '"volume up"', desc: "Increase volume" },
+  { cmd: '"volume down"', desc: "Decrease volume" },
+  { cmd: '"mute"', desc: "Mute toggle" },
+  { cmd: '"playlist"', desc: "Open playlist" },
+  { cmd: '"create"', desc: "AI Lyrics" },
+  { cmd: '"leaderboard"', desc: "Rankings" },
+  { cmd: '"comment"', desc: "Comments" },
+  { cmd: '"community"', desc: "Community" },
+  { cmd: '"analytics"', desc: "Analytics" }
+], Wt = ({
+  activeTips: z,
+  onDismissTip: I,
+  onExecuteAction: d,
+  isListening: g,
+  onToggleListening: J,
+  voiceSupported: a,
+  voiceFeedback: O,
+  voiceHistory: W,
+  sessionInsight: j,
+  isPlaying: S,
+  audioEnergy: T,
+  externalExpanded: K,
+  onExternalExpandedChange: s
+}) => {
+  const { t: N, lang: M } = Ae(), [f, U] = u(!1), [F, D] = u(!1), Y = we(null), B = M === "zh" ? Mt : zt;
+  ye(() => {
+    K !== void 0 && U(K);
+  }, [K]);
+  const G = (n) => {
+    U(n), s == null || s(n);
+  };
+  ye(() => {
+  }, [z.length]);
+  const A = {
+    emotion: "from-pink-500/20 to-purple-500/20 border-pink-500/30",
+    achievement: "from-yellow-500/20 to-amber-500/20 border-yellow-500/30",
+    streak: "from-orange-500/20 to-red-500/20 border-orange-500/30",
+    discovery: "from-blue-500/20 to-cyan-500/20 border-blue-500/30",
+    interaction: "from-green-500/20 to-teal-500/20 border-green-500/30",
+    voice: "from-indigo-500/20 to-violet-500/20 border-indigo-500/30",
+    system: "from-gray-500/20 to-slate-500/20 border-white/10"
+  };
+  return /* @__PURE__ */ i($, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        ref: Y,
+        className: "fixed top-20 left-4 z-[45] flex flex-col gap-2 max-w-[340px] pointer-events-none",
+        children: /* @__PURE__ */ e(Q, { mode: "popLayout", children: z.map((n) => /* @__PURE__ */ i(
+          p.div,
+          {
+            initial: { opacity: 0, x: -50, scale: 0.9 },
+            animate: { opacity: 1, x: 0, scale: 1 },
+            exit: { opacity: 0, x: -50, scale: 0.9 },
+            transition: { type: "spring", damping: 25, stiffness: 300 },
+            className: y(
+              "pointer-events-auto bg-gradient-to-r backdrop-blur-2xl rounded-xl border p-3 shadow-2xl",
+              A[n.category] || A.system
+            ),
+            children: [
+              /* @__PURE__ */ i("div", { className: "flex items-start gap-2.5", children: [
+                /* @__PURE__ */ e("span", { className: "text-lg flex-shrink-0 mt-0.5", children: n.icon }),
+                /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ e("p", { className: "text-xs text-white/80 leading-relaxed", children: n.message }),
+                  n.actionLabel && n.actionKey && /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: () => {
+                        d(n.actionKey), I(n.id);
+                      },
+                      className: "mt-2 text-[11px] font-medium px-3 py-1 rounded-full bg-white/10 hover:bg-white/20 text-white/90 transition-colors border border-white/10",
+                      children: n.actionLabel
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: () => I(n.id),
+                    className: "text-white/30 hover:text-white/60 transition-colors flex-shrink-0 p-0.5",
+                    children: /* @__PURE__ */ e(re, { className: "w-3 h-3" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                p.div,
+                {
+                  className: "absolute bottom-0 left-0 h-[2px] bg-white/20 rounded-b-xl",
+                  initial: { width: "100%" },
+                  animate: { width: "0%" },
+                  transition: { duration: 30, ease: "linear" }
+                }
+              )
+            ]
+          },
+          n.id
+        )) })
+      }
+    ),
+    /* @__PURE__ */ e(Q, { children: O && /* @__PURE__ */ e(
+      p.div,
+      {
+        initial: { opacity: 0, y: 20, scale: 0.9 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        exit: { opacity: 0, y: 20, scale: 0.9 },
+        className: "fixed bottom-32 left-1/2 -translate-x-1/2 z-[70] bg-black/70 backdrop-blur-2xl rounded-2xl px-5 py-3 border border-white/10 shadow-2xl",
+        children: /* @__PURE__ */ e("p", { className: "text-sm text-white/90 font-medium whitespace-nowrap", children: O })
+      },
+      "voice-fb"
+    ) }),
+    /* @__PURE__ */ e(Q, { children: g && /* @__PURE__ */ i(
+      p.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 z-[65] pointer-events-none flex items-center justify-center",
+        children: [
+          [0, 1, 2].map((n) => /* @__PURE__ */ e(
+            p.div,
+            {
+              className: "absolute rounded-full border border-purple-400/20",
+              animate: {
+                width: [80, 200 + n * 60],
+                height: [80, 200 + n * 60],
+                opacity: [0.4, 0]
+              },
+              transition: {
+                duration: 2,
+                repeat: 1 / 0,
+                delay: n * 0.5,
+                ease: "easeOut"
+              }
+            },
+            n
+          )),
+          /* @__PURE__ */ e(
+            p.div,
+            {
+              className: "w-20 h-20 rounded-full bg-purple-600/30 backdrop-blur-xl border border-purple-400/40 flex items-center justify-center shadow-2xl shadow-purple-500/30",
+              animate: { scale: [1, 1.1, 1] },
+              transition: { duration: 1, repeat: 1 / 0, ease: "easeInOut" },
+              children: /* @__PURE__ */ e(xe, { className: "w-8 h-8 text-purple-300" })
+            }
+          ),
+          /* @__PURE__ */ e(
+            p.p,
+            {
+              className: "absolute mt-32 text-sm text-purple-300/80 font-medium",
+              animate: { opacity: [0.5, 1, 0.5] },
+              transition: { duration: 2, repeat: 1 / 0 },
+              children: M === "zh" ? "正在聆听..." : "Listening..."
+            }
+          )
+        ]
+      },
+      "listening-overlay"
+    ) }),
+    /* @__PURE__ */ i("div", { className: "fixed bottom-[120px] md:bottom-28 left-4 z-[55] hidden md:flex flex-col items-start gap-2", children: [
+      /* @__PURE__ */ e(Q, { children: f && /* @__PURE__ */ i(
+        p.div,
+        {
+          initial: { opacity: 0, y: 20, scale: 0.9 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: 20, scale: 0.9 },
+          transition: { type: "spring", damping: 25, stiffness: 300 },
+          className: "w-72 md:w-80 bg-[#0D1235]/95 backdrop-blur-2xl rounded-2xl border border-white/10 shadow-2xl overflow-hidden",
+          children: [
+            /* @__PURE__ */ i("div", { className: "flex items-center justify-between px-4 py-3 border-b border-white/[0.06]", children: [
+              /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(Te, { className: "w-4 h-4 text-purple-400" }),
+                /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-white/90", children: M === "zh" ? "AI 助手" : "AI Assistant" })
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => G(!1),
+                  className: "p-1 rounded-lg text-white/30 hover:text-white/60 hover:bg-white/5 transition-colors",
+                  children: /* @__PURE__ */ e(mt, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ i("div", { className: "p-4 space-y-4 max-h-[50vh] overflow-y-auto", style: { scrollbarWidth: "none" }, children: [
+              /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-3 py-2 bg-white/[0.03] rounded-lg border border-white/[0.06]", children: [
+                /* @__PURE__ */ e(Oe, { className: "w-3.5 h-3.5 text-white/30 flex-shrink-0" }),
+                /* @__PURE__ */ e("p", { className: "text-[11px] text-white/50", children: j })
+              ] }),
+              /* @__PURE__ */ i("div", { children: [
+                /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-2", children: [
+                  /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider", children: M === "zh" ? "语音指令" : "Voice Commands" }),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: () => D(!F),
+                      className: "text-[10px] text-purple-400/60 hover:text-purple-400 transition-colors",
+                      children: F ? M === "zh" ? "收起" : "Hide" : M === "zh" ? "查看指令表" : "Show commands"
+                    }
+                  )
+                ] }),
+                a ? /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: J,
+                    className: y(
+                      "w-full flex items-center justify-center gap-2 py-2.5 rounded-xl border transition-all",
+                      g ? "bg-purple-600/20 border-purple-500/40 text-purple-300" : "bg-white/[0.03] border-white/[0.08] text-white/50 hover:text-white/80 hover:bg-white/[0.06]"
+                    ),
+                    children: g ? /* @__PURE__ */ i($, { children: [
+                      /* @__PURE__ */ e(
+                        p.div,
+                        {
+                          animate: { scale: [1, 1.2, 1] },
+                          transition: { duration: 1, repeat: 1 / 0 },
+                          children: /* @__PURE__ */ e(xe, { className: "w-4 h-4" })
+                        }
+                      ),
+                      /* @__PURE__ */ e("span", { className: "text-sm", children: M === "zh" ? "正在聆听..." : "Listening..." })
+                    ] }) : /* @__PURE__ */ i($, { children: [
+                      /* @__PURE__ */ e(xe, { className: "w-4 h-4" }),
+                      /* @__PURE__ */ e("span", { className: "text-sm", children: M === "zh" ? "点击说出指令" : "Tap to speak" })
+                    ] })
+                  }
+                ) : /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-3 py-2 bg-white/[0.02] rounded-lg text-white/30 text-xs", children: [
+                  /* @__PURE__ */ e(Ve, { className: "w-3.5 h-3.5" }),
+                  M === "zh" ? "当前浏览器不支持语音识别" : "Voice not supported in this browser"
+                ] }),
+                /* @__PURE__ */ e(Q, { children: F && /* @__PURE__ */ e(
+                  p.div,
+                  {
+                    initial: { height: 0, opacity: 0 },
+                    animate: { height: "auto", opacity: 1 },
+                    exit: { height: 0, opacity: 0 },
+                    className: "overflow-hidden",
+                    children: /* @__PURE__ */ e("div", { className: "mt-2 grid grid-cols-2 gap-1", children: B.map((n, v) => /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5 px-2 py-1 rounded-lg bg-white/[0.02]", children: [
+                      /* @__PURE__ */ e("span", { className: "text-[10px] text-purple-400 font-mono", children: n.cmd }),
+                      /* @__PURE__ */ e("span", { className: "text-[10px] text-white/30", children: n.desc })
+                    ] }, v)) })
+                  }
+                ) }),
+                W.length > 0 && /* @__PURE__ */ i("div", { className: "mt-2 space-y-1", children: [
+                  /* @__PURE__ */ e("p", { className: "text-[10px] text-white/25 uppercase tracking-wider", children: M === "zh" ? "最近指令" : "Recent" }),
+                  W.slice(-3).reverse().map((n, v) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-2 py-1 rounded-lg bg-white/[0.02]", children: [
+                    /* @__PURE__ */ e(Qe, { className: "w-3 h-3 text-white/20 flex-shrink-0" }),
+                    /* @__PURE__ */ i("span", { className: "text-[10px] text-white/40 truncate", children: [
+                      '"',
+                      n.transcript,
+                      '"'
+                    ] }),
+                    /* @__PURE__ */ e("span", { className: "text-[10px] text-green-400/60 ml-auto flex-shrink-0", children: "✓" })
+                  ] }, v))
+                ] })
+              ] }),
+              z.length > 0 && /* @__PURE__ */ i("div", { children: [
+                /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-2", children: M === "zh" ? "智能提示" : "AI Insights" }),
+                /* @__PURE__ */ e("div", { className: "space-y-2", children: z.map((n) => /* @__PURE__ */ i(
+                  "div",
+                  {
+                    className: y(
+                      "flex items-start gap-2 px-3 py-2 rounded-lg bg-gradient-to-r border",
+                      A[n.category] || A.system
+                    ),
+                    children: [
+                      /* @__PURE__ */ e("span", { className: "text-sm flex-shrink-0", children: n.icon }),
+                      /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
+                        /* @__PURE__ */ e("p", { className: "text-[11px] text-white/70 leading-relaxed", children: n.message }),
+                        n.actionLabel && n.actionKey && /* @__PURE__ */ e(
+                          "button",
+                          {
+                            onClick: () => {
+                              d(n.actionKey), I(n.id);
+                            },
+                            className: "mt-1 text-[10px] font-medium px-2 py-0.5 rounded-full bg-white/10 hover:bg-white/20 text-white/80 transition-colors",
+                            children: n.actionLabel
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          onClick: () => I(n.id),
+                          className: "text-white/20 hover:text-white/50 flex-shrink-0",
+                          children: /* @__PURE__ */ e(re, { className: "w-3 h-3" })
+                        }
+                      )
+                    ]
+                  },
+                  n.id
+                )) })
+              ] })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ i(
+        p.button,
+        {
+          onClick: () => G(!f),
+          whileHover: { scale: 1.05 },
+          whileTap: { scale: 0.95 },
+          className: y(
+            "relative w-12 h-12 rounded-full flex items-center justify-center shadow-2xl transition-all border",
+            g ? "bg-purple-600 border-purple-400/50 shadow-purple-500/40" : f ? "bg-[#0D1235] border-purple-500/30" : "bg-[#0D1235]/90 backdrop-blur-xl border-white/10 hover:border-purple-500/30"
+          ),
+          style: {
+            boxShadow: g ? `0 0 ${15 + T * 20}px rgba(139,92,246,0.4)` : S ? `0 0 ${8 + T * 12}px rgba(139,92,246,0.15)` : void 0
+          },
+          children: [
+            g ? /* @__PURE__ */ e(
+              p.div,
+              {
+                animate: { scale: [1, 1.2, 1] },
+                transition: { duration: 0.8, repeat: 1 / 0 },
+                children: /* @__PURE__ */ e(xe, { className: "w-5 h-5 text-white" })
+              }
+            ) : /* @__PURE__ */ e(Te, { className: "w-5 h-5 text-purple-400" }),
+            z.length > 0 && !f && /* @__PURE__ */ e(
+              p.div,
+              {
+                initial: { scale: 0 },
+                animate: { scale: 1 },
+                className: "absolute -top-1 -right-1 w-4 h-4 rounded-full bg-pink-500 text-white text-[9px] font-bold flex items-center justify-center",
+                children: z.length
+              }
+            ),
+            S && !g && /* @__PURE__ */ e(
+              p.div,
+              {
+                className: "absolute inset-0 rounded-full border border-purple-500/20",
+                animate: { scale: [1, 1.4, 1], opacity: [0.3, 0, 0.3] },
+                transition: { duration: 3, repeat: 1 / 0, ease: "easeInOut" }
+              }
+            )
+          ]
+        }
+      ),
+      a && !f && /* @__PURE__ */ e(
+        p.button,
+        {
+          onClick: J,
+          whileHover: { scale: 1.1 },
+          whileTap: { scale: 0.9 },
+          className: y(
+            "w-9 h-9 rounded-full flex items-center justify-center border transition-all",
+            g ? "bg-purple-600 border-purple-400/50 text-white" : "bg-[#0D1235]/80 backdrop-blur-xl border-white/10 text-white/40 hover:text-purple-400 hover:border-purple-500/30"
+          ),
+          children: g ? /* @__PURE__ */ e(Ve, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ e(xe, { className: "w-3.5 h-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(Q, { children: f && /* @__PURE__ */ i($, { children: [
+      /* @__PURE__ */ e(
+        p.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          className: "md:hidden fixed inset-0 z-[55] bg-black/40",
+          onClick: () => G(!1)
+        },
+        "mobile-ai-backdrop"
+      ),
+      /* @__PURE__ */ i(
+        p.div,
+        {
+          initial: { opacity: 0, y: 30 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: 30 },
+          transition: { type: "spring", damping: 25, stiffness: 300 },
+          className: "md:hidden fixed left-3 right-3 top-14 z-[56] max-h-[70vh] bg-[#0D1235]/98 backdrop-blur-2xl rounded-2xl border border-white/10 shadow-2xl overflow-hidden",
+          children: [
+            /* @__PURE__ */ i("div", { className: "flex items-center justify-between px-4 py-3 border-b border-white/[0.06]", children: [
+              /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(Te, { className: "w-4 h-4 text-purple-400" }),
+                /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-white/90", children: M === "zh" ? "AI 助手" : "AI Assistant" })
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => G(!1),
+                  className: "p-1.5 rounded-lg text-white/40 hover:text-white/70 hover:bg-white/5",
+                  children: /* @__PURE__ */ e(re, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ i("div", { className: "p-4 space-y-3 max-h-[60vh] overflow-y-auto", style: { scrollbarWidth: "none" }, children: [
+              /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-3 py-2 bg-white/[0.03] rounded-lg border border-white/[0.06]", children: [
+                /* @__PURE__ */ e(Oe, { className: "w-3.5 h-3.5 text-white/30 flex-shrink-0" }),
+                /* @__PURE__ */ e("p", { className: "text-[11px] text-white/50", children: j })
+              ] }),
+              a && /* @__PURE__ */ i(
+                "button",
+                {
+                  onClick: J,
+                  className: y(
+                    "w-full flex items-center justify-center gap-2 py-3 rounded-xl border transition-all",
+                    g ? "bg-purple-600/20 border-purple-500/40 text-purple-300" : "bg-white/[0.03] border-white/[0.08] text-white/50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ e(xe, { className: "w-5 h-5" }),
+                    /* @__PURE__ */ e("span", { className: "text-sm", children: g ? M === "zh" ? "正在聆听..." : "Listening..." : M === "zh" ? "点击说出指令" : "Tap to speak" })
+                  ]
+                }
+              ),
+              z.length > 0 && /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider", children: M === "zh" ? "智能提示" : "AI Tips" }),
+                z.map((n) => /* @__PURE__ */ i("div", { className: y("flex items-start gap-2 px-3 py-2 rounded-lg bg-gradient-to-r border", A[n.category] || A.system), children: [
+                  /* @__PURE__ */ e("span", { className: "text-sm flex-shrink-0", children: n.icon }),
+                  /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ e("p", { className: "text-[11px] text-white/70 leading-relaxed", children: n.message }),
+                    n.actionLabel && n.actionKey && /* @__PURE__ */ e("button", { onClick: () => {
+                      d(n.actionKey), I(n.id);
+                    }, className: "mt-1 text-[10px] font-medium px-2 py-0.5 rounded-full bg-white/10 text-white/80", children: n.actionLabel })
+                  ] }),
+                  /* @__PURE__ */ e("button", { onClick: () => I(n.id), className: "text-white/20", children: /* @__PURE__ */ e(re, { className: "w-3 h-3" }) })
+                ] }, n.id))
+              ] }),
+              W.length > 0 && /* @__PURE__ */ i("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ e("p", { className: "text-[10px] text-white/25 uppercase tracking-wider", children: M === "zh" ? "最近指令" : "Recent" }),
+                W.slice(-3).reverse().map((n, v) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-2 py-1 rounded-lg bg-white/[0.02]", children: [
+                  /* @__PURE__ */ e(Qe, { className: "w-3 h-3 text-white/20 flex-shrink-0" }),
+                  /* @__PURE__ */ i("span", { className: "text-[10px] text-white/40 truncate", children: [
+                    '"',
+                    n.transcript,
+                    '"'
+                  ] }),
+                  /* @__PURE__ */ e("span", { className: "text-[10px] text-green-400/60 ml-auto", children: "✓" })
+                ] }, v))
+              ] })
+            ] })
+          ]
+        },
+        "mobile-ai-overlay"
+      )
+    ] }) })
+  ] });
+}, Ue = [
+  { id: "happy", label: "Happy", labelZh: "快乐", icon: _e, color: "text-yellow-400", bg: "from-yellow-500/20 to-orange-500/20" },
+  { id: "sad", label: "Sad", labelZh: "忧伤", icon: Ye, color: "text-blue-400", bg: "from-blue-500/20 to-indigo-500/20" },
+  { id: "energetic", label: "Energetic", labelZh: "活力", icon: Xe, color: "text-red-400", bg: "from-red-500/20 to-orange-500/20" },
+  { id: "calm", label: "Calm", labelZh: "宁静", icon: He, color: "text-cyan-400", bg: "from-cyan-500/20 to-teal-500/20" },
+  { id: "love", label: "Love", labelZh: "爱情", icon: et, color: "text-pink-400", bg: "from-pink-500/20 to-red-500/20" }
+], Dt = ({
+  isOpen: z,
+  onClose: I,
+  onCreateTrack: d
+}) => {
+  const [g, J] = u("happy"), [a, O] = u([]), [W, j] = u(""), [S, T] = u(8), [K, s] = u(!1), [N, M] = u(null), [f, U] = u(!1), [F, D] = u(0), [Y, B] = u(!1), [G, A] = u("idle"), n = it(), { t: v, lang: te } = Ae(), h = E(() => {
+    const m = W.trim();
+    m && a.length < 5 && !a.includes(m) && (O((Z) => [...Z, m]), j(""));
+  }, [W, a]), l = E((m) => {
+    O((Z) => Z.filter((R) => R !== m));
+  }, []), x = E(async () => {
+    s(!0);
+    try {
+      const m = await _("/ai/lyrics", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          theme: g,
+          keywords: a,
+          lines: S
+        })
+      });
+      m != null && m.lyrics && (M(m.lyrics), D((Z) => Z + 1));
+    } catch (m) {
+      console.error("AI lyrics generation failed:", m);
+    } finally {
+      s(!1);
+    }
+  }, [g, a, S]), b = E(() => {
+    N && (navigator.clipboard.writeText(N.join(`
+`)), U(!0), setTimeout(() => U(!1), 2e3));
+  }, [N]), de = E(async () => {
+    var m, Z;
+    if (!(!N || !d)) {
+      A("composing-params");
+      try {
+        (m = navigator.vibrate) == null || m.call(navigator, 25);
+      } catch {
+      }
+      try {
+        const R = await _("/ai/compose", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            theme: g,
+            lyrics: N,
+            lineCount: S
+          })
+        });
+        if (!(R != null && R.composition)) {
+          d(N, g), B(!0), A("done"), setTimeout(() => {
+            B(!1), A("idle");
+          }, 2500);
+          return;
+        }
+        A("synthesizing");
+        const H = await n.compose(R.composition);
+        d(N, g, H, R.composition), B(!0), A("done");
+        try {
+          (Z = navigator.vibrate) == null || Z.call(navigator, [10, 30, 10, 30, 40]);
+        } catch {
+        }
+        setTimeout(() => {
+          B(!1), A("idle");
+        }, 2500);
+      } catch (R) {
+        console.error("Composition pipeline failed:", R), d(N, g), B(!0), A("done"), setTimeout(() => {
+          B(!1), A("idle");
+        }, 2500);
+      }
+    }
+  }, [N, d, g, S, n]), w = Ue.find((m) => m.id === g);
+  return /* @__PURE__ */ e(Q, { children: z && /* @__PURE__ */ i($, { children: [
+    /* @__PURE__ */ e(
+      p.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm",
+        onClick: I
+      }
+    ),
+    /* @__PURE__ */ i(
+      p.div,
+      {
+        initial: { y: "100%", opacity: 0 },
+        animate: { y: 0, opacity: 1 },
+        exit: { y: "100%", opacity: 0 },
+        transition: { type: "spring", damping: 28, stiffness: 300 },
+        className: "fixed inset-x-0 bottom-0 z-[61] max-h-[90vh] bg-[#0D1235]/95 backdrop-blur-2xl border-t border-white/10 rounded-t-3xl flex flex-col shadow-2xl md:inset-x-auto md:left-1/2 md:-translate-x-1/2 md:w-full md:max-w-lg md:bottom-auto md:top-1/2 md:-translate-y-1/2 md:rounded-2xl md:border md:max-h-[85vh]",
+        children: [
+          /* @__PURE__ */ i("div", { className: "flex items-center justify-between p-5 pb-3 border-b border-white/[0.06] flex-shrink-0", children: [
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ e("div", { className: "w-9 h-9 rounded-xl bg-gradient-to-tr from-purple-500/20 to-pink-500/20 border border-white/10 flex items-center justify-center", children: /* @__PURE__ */ e(We, { className: "w-4.5 h-4.5 text-purple-400" }) }),
+              /* @__PURE__ */ i("div", { children: [
+                /* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm leading-tight", children: v("aiLyrics.title") }),
+                /* @__PURE__ */ e("p", { className: "text-white/30 text-xs", children: v("aiLyrics.subtitle") })
+              ] })
+            ] }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: I,
+                className: "p-2 rounded-lg text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors",
+                children: /* @__PURE__ */ e(re, { className: "w-4 h-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ i("div", { className: "flex-1 overflow-y-auto p-5 space-y-5", style: { scrollbarWidth: "none" }, children: [
+            /* @__PURE__ */ i("div", { children: [
+              /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-3", children: v("aiLyrics.theme") }),
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-5 gap-2", children: Ue.map((m) => {
+                const Z = m.icon, R = g === m.id;
+                return /* @__PURE__ */ i(
+                  "button",
+                  {
+                    onClick: () => J(m.id),
+                    className: y(
+                      "p-3 rounded-xl border transition-all text-center",
+                      R ? `bg-gradient-to-br ${m.bg} border-white/15 shadow-lg` : "bg-white/[0.02] border-white/[0.06] hover:bg-white/[0.05]"
+                    ),
+                    children: [
+                      /* @__PURE__ */ e(
+                        Z,
+                        {
+                          className: y(
+                            "w-5 h-5 mx-auto mb-1",
+                            R ? m.color : "text-white/30"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ e("p", { className: y("text-[10px]", R ? "text-white/80" : "text-white/30"), children: te === "zh" ? m.labelZh : m.label })
+                    ]
+                  },
+                  m.id
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ i("div", { children: [
+              /* @__PURE__ */ i("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-3", children: [
+                v("aiLyrics.keywords"),
+                " ",
+                /* @__PURE__ */ i("span", { className: "text-white/20", children: [
+                  "(",
+                  a.length,
+                  "/5)"
+                ] })
+              ] }),
+              /* @__PURE__ */ i("div", { className: "flex gap-2 mb-2", children: [
+                /* @__PURE__ */ e(
+                  "input",
+                  {
+                    type: "text",
+                    value: W,
+                    onChange: (m) => j(m.target.value),
+                    onKeyDown: (m) => m.key === "Enter" && h(),
+                    placeholder: v("aiLyrics.enterKeyword"),
+                    className: "flex-1 bg-white/5 border border-white/10 rounded-lg py-2 px-3 text-sm text-white placeholder:text-white/20 focus:outline-none focus:border-purple-500/50"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: h,
+                    disabled: !W.trim() || a.length >= 5,
+                    className: "p-2 rounded-lg bg-white/5 border border-white/[0.08] text-white/60 hover:text-white hover:bg-white/10 transition-colors disabled:opacity-30",
+                    children: /* @__PURE__ */ e(pe, { className: "w-4 h-4" })
+                  }
+                )
+              ] }),
+              a.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: a.map((m) => /* @__PURE__ */ i(
+                p.span,
+                {
+                  initial: { scale: 0.8, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: { scale: 0.8, opacity: 0 },
+                  className: "inline-flex items-center gap-1 px-2.5 py-1 bg-purple-500/10 border border-purple-500/20 rounded-full text-xs text-purple-300",
+                  children: [
+                    m,
+                    /* @__PURE__ */ e("button", { onClick: () => l(m), className: "text-purple-400/60 hover:text-purple-300", children: /* @__PURE__ */ e(re, { className: "w-3 h-3" }) })
+                  ]
+                },
+                m
+              )) })
+            ] }),
+            /* @__PURE__ */ i("div", { children: [
+              /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-3", children: v("aiLyrics.lines") }),
+              /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: () => T(Math.max(4, S - 2)),
+                    className: "p-2 rounded-lg bg-white/5 border border-white/[0.08] text-white/60 hover:text-white transition-colors",
+                    children: /* @__PURE__ */ e(Ie, { className: "w-4 h-4" })
+                  }
+                ),
+                /* @__PURE__ */ i("div", { className: "flex-1 text-center", children: [
+                  /* @__PURE__ */ e("span", { className: "text-2xl font-bold text-white font-mono", children: S }),
+                  /* @__PURE__ */ e("span", { className: "text-xs text-white/30 ml-1", children: v("aiLyrics.linesUnit") })
+                ] }),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: () => T(Math.min(16, S + 2)),
+                    className: "p-2 rounded-lg bg-white/5 border border-white/[0.08] text-white/60 hover:text-white transition-colors",
+                    children: /* @__PURE__ */ e(pe, { className: "w-4 h-4" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ e(
+              p.button,
+              {
+                onClick: x,
+                disabled: K,
+                whileHover: { scale: 1.01 },
+                whileTap: { scale: 0.98 },
+                className: "w-full py-3 rounded-xl bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 text-white font-medium flex items-center justify-center gap-2 shadow-lg shadow-purple-500/20 disabled:opacity-50 transition-opacity",
+                children: K ? /* @__PURE__ */ i($, { children: [
+                  /* @__PURE__ */ e(fe, { className: "w-4 h-4 animate-spin" }),
+                  v("aiLyrics.generating")
+                ] }) : /* @__PURE__ */ i($, { children: [
+                  /* @__PURE__ */ e(je, { className: "w-4 h-4" }),
+                  F > 0 ? v("aiLyrics.regenerate") : v("aiLyrics.generate")
+                ] })
+              }
+            ),
+            /* @__PURE__ */ e(Q, { children: N && /* @__PURE__ */ i(
+              p.div,
+              {
+                initial: { opacity: 0, y: 20 },
+                animate: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: 20 },
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ e(w.icon, { className: y("w-4 h-4", w.color) }),
+                      /* @__PURE__ */ i("p", { className: "text-xs text-white/50", children: [
+                        v("aiLyrics.generated"),
+                        " · ",
+                        te === "zh" ? w.labelZh : w.label,
+                        " ",
+                        v("aiLyrics.themeSuffix")
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          onClick: x,
+                          disabled: K,
+                          className: "p-1.5 rounded-lg text-white/30 hover:text-white/60 hover:bg-white/5 transition-colors",
+                          title: "Regenerate",
+                          children: /* @__PURE__ */ e(xt, { className: y("w-3.5 h-3.5", K && "animate-spin") })
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          onClick: b,
+                          className: "flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/5 border border-white/[0.08] text-xs text-white/50 hover:text-white/80 transition-colors",
+                          children: f ? /* @__PURE__ */ i($, { children: [
+                            /* @__PURE__ */ e(ee, { className: "w-3 h-3 text-green-400" }),
+                            /* @__PURE__ */ e("span", { className: "text-green-400", children: v("aiLyrics.copied") })
+                          ] }) : /* @__PURE__ */ i($, { children: [
+                            /* @__PURE__ */ e(ge, { className: "w-3 h-3" }),
+                            v("aiLyrics.copy")
+                          ] })
+                        }
+                      ),
+                      d && /* @__PURE__ */ e(
+                        "button",
+                        {
+                          onClick: de,
+                          disabled: G !== "idle" && G !== "done",
+                          className: y(
+                            "flex items-center gap-1 px-2.5 py-1 rounded-lg border text-xs transition-colors",
+                            G === "idle" || G === "done" ? "bg-white/5 border-white/[0.08] text-white/50 hover:text-white/80" : "bg-purple-500/10 border-purple-500/20 text-purple-300"
+                          ),
+                          children: Y ? /* @__PURE__ */ i($, { children: [
+                            /* @__PURE__ */ e(ee, { className: "w-3 h-3 text-green-400" }),
+                            /* @__PURE__ */ e("span", { className: "text-green-400", children: v("aiLyrics.trackCreated") })
+                          ] }) : G === "composing-params" ? /* @__PURE__ */ i($, { children: [
+                            /* @__PURE__ */ e(fe, { className: "w-3 h-3 animate-spin text-purple-400" }),
+                            /* @__PURE__ */ e("span", { children: te === "zh" ? "编曲中..." : "Composing..." })
+                          ] }) : G === "synthesizing" ? /* @__PURE__ */ i($, { children: [
+                            /* @__PURE__ */ e(pt, { className: "w-3 h-3 animate-pulse text-purple-400" }),
+                            /* @__PURE__ */ e("span", { children: te === "zh" ? `合成 ${Math.round(n.progress * 100)}%` : `Synth ${Math.round(n.progress * 100)}%` })
+                          ] }) : /* @__PURE__ */ i($, { children: [
+                            /* @__PURE__ */ e($e, { className: "w-3 h-3" }),
+                            te === "zh" ? "创建歌曲" : "Create Track"
+                          ] })
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: y("rounded-xl border p-4 bg-gradient-to-br", w.bg, "border-white/[0.08]"), children: /* @__PURE__ */ e("div", { className: "space-y-2", children: N.map((m, Z) => /* @__PURE__ */ e(
+                    p.p,
+                    {
+                      initial: { opacity: 0, x: -10 },
+                      animate: { opacity: 1, x: 0 },
+                      transition: { delay: Z * 0.08 },
+                      className: "text-sm text-white/80 leading-relaxed",
+                      children: m
+                    },
+                    `${F}-${Z}`
+                  )) }) })
+                ]
+              }
+            ) })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}, Me = [
+  { id: "happy", label: "Happy", labelZh: "快乐", icon: _e, color: "text-yellow-400", bg: "from-yellow-500/20 to-orange-500/20" },
+  { id: "sad", label: "Sad", labelZh: "忧伤", icon: Ye, color: "text-blue-400", bg: "from-blue-500/20 to-indigo-500/20" },
+  { id: "energetic", label: "Energetic", labelZh: "活力", icon: Xe, color: "text-red-400", bg: "from-red-500/20 to-orange-500/20", premium: !0, spCost: 200 },
+  { id: "calm", label: "Calm", labelZh: "宁静", icon: He, color: "text-cyan-400", bg: "from-cyan-500/20 to-teal-500/20" },
+  { id: "love", label: "Love", labelZh: "爱情", icon: et, color: "text-pink-400", bg: "from-pink-500/20 to-red-500/20", premium: !0, spCost: 200 }
+], ze = [
+  {
+    id: "quick",
+    label: "Quick Song",
+    labelZh: "极简写歌",
+    icon: je,
+    desc: "AI lyrics + auto compose in seconds",
+    descZh: "一键AI写词作曲，秒出成品",
+    gradient: "from-purple-500 to-pink-500"
+  },
+  {
+    id: "master",
+    label: "Master Mode",
+    labelZh: "大师写歌",
+    icon: ut,
+    desc: "Full control over theme, structure & style",
+    descZh: "精细控制主题、结构与风格",
+    gradient: "from-indigo-500 to-blue-500"
+  },
+  {
+    id: "remix",
+    label: "Remix & Cover",
+    labelZh: "热歌改编",
+    icon: Ge,
+    desc: "Transform existing tracks with AI",
+    descZh: "AI改编翻唱热门曲目",
+    gradient: "from-orange-500 to-red-500"
+  },
+  {
+    id: "works",
+    label: "My Works",
+    labelZh: "作品管理",
+    icon: wt,
+    desc: "View & manage your creations",
+    descZh: "查看管理你的创作",
+    gradient: "from-emerald-500 to-teal-500"
+  },
+  {
+    id: "mv",
+    label: "MV Creator",
+    labelZh: "MV 创作",
+    icon: tt,
+    desc: "Visualize music with AI effects",
+    descZh: "AI驱动音乐可视化MV",
+    gradient: "from-cyan-500 to-blue-500"
+  }
+], $t = [
+  { id: "verse-chorus", label: "Verse-Chorus", labelZh: "主副歌" },
+  { id: "verse-bridge", label: "Verse-Bridge", labelZh: "主歌-桥段" },
+  { id: "aaba", label: "AABA", labelZh: "AABA经典" },
+  { id: "through", label: "Through-composed", labelZh: "通谱体" }
+], It = [
+  { id: "piano", label: "Piano", labelZh: "钢琴", emoji: "🎹" },
+  { id: "guitar", label: "Guitar", labelZh: "吉他", emoji: "🎸" },
+  { id: "synth", label: "Synth", labelZh: "合成器", emoji: "🎛️" },
+  { id: "strings", label: "Strings", labelZh: "弦乐", emoji: "🎻" },
+  { id: "drums", label: "Drums", labelZh: "鼓", emoji: "🥁" },
+  { id: "bass", label: "Bass", labelZh: "贝斯", emoji: "🎸" }
+], Gt = ({
+  isOpen: z,
+  onClose: I,
+  onCreateTrack: d,
+  playlist: g,
+  currentTrackIndex: J,
+  onHaptic: a,
+  onShareWork: O,
+  onOpenMV: W,
+  user: j,
+  starPower: S = 0,
+  onStarPowerUpdate: T
+}) => {
+  var qe, Fe;
+  const { t: K, lang: s } = Ae(), [N, M] = u(null), [f, U] = u(/* @__PURE__ */ new Set());
+  ye(() => {
+    if (!j) {
+      try {
+        const t = localStorage.getItem("dmusic-unlocked-themes");
+        t && U(new Set(JSON.parse(t)));
+      } catch {
+      }
+      return;
+    }
+    (async () => {
+      try {
+        const t = await _(`/user/${j.id}/unlocked-themes`);
+        if (t != null && t.themes && t.themes.length > 0)
+          U(new Set(t.themes));
+        else
+          try {
+            const o = localStorage.getItem("dmusic-unlocked-themes");
+            if (o) {
+              const c = JSON.parse(o);
+              if (c.length > 0) {
+                U(new Set(c));
+                for (const k of c)
+                  await _(`/user/${j.id}/unlocked-themes`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ themeId: k })
+                  });
+                localStorage.removeItem("dmusic-unlocked-themes");
+              }
+            }
+          } catch {
+          }
+      } catch {
+        try {
+          const t = localStorage.getItem("dmusic-unlocked-themes");
+          t && U(new Set(JSON.parse(t)));
+        } catch {
+        }
+      }
+    })();
+  }, [j]);
+  const F = async (t, o) => {
+    if (!(!j || S < o))
+      try {
+        const c = await _(`/starpower/${j.id}/consume`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ amount: o, purpose: "template_unlock", targetId: t })
+        });
+        if (c != null && c.success) {
+          T == null || T(c.starPower);
+          const k = new Set(f);
+          k.add(t), U(k), await _(`/user/${j.id}/unlocked-themes`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ themeId: t })
+          });
+        }
+      } catch (c) {
+        console.error("Theme unlock error:", c);
+      }
+  }, [D, Y] = u("happy"), [B, G] = u(""), [A, n] = u(!1), [v, te] = u(null), [h, l] = u("idle"), x = it(), [b, de] = u("calm"), [w, m] = u([]), [Z, R] = u(""), [H, Ne] = u(10), [ve, be] = u("verse-chorus"), [ke, r] = u(["piano", "strings"]), [L, q] = u(100), [V, C] = u(!1), [X, ie] = u(null), [P, ae] = u("idle"), [ne, lt] = u(null), [se, rt] = u("energetic"), [at, Ee] = u(!1), [Le, st] = u(null), [Ce, oe] = u("idle"), [he, Ze] = u([]), [ce, Ke] = u(null);
+  ye(() => {
+    if (z)
+      try {
+        const t = localStorage.getItem("d-music-works");
+        t && Ze(JSON.parse(t));
+      } catch {
+      }
+  }, [z]);
+  const le = E((t) => {
+    Ze((o) => {
+      const c = [t, ...o].slice(0, 50);
+      try {
+        localStorage.setItem("d-music-works", JSON.stringify(c));
+      } catch {
+      }
+      return c;
+    });
+  }, []), ot = E((t) => {
+    Ze((o) => {
+      const c = o.filter((k) => k.id !== t);
+      try {
+        localStorage.setItem("d-music-works", JSON.stringify(c));
+      } catch {
+      }
+      return c;
+    });
+  }, []), Be = E(async () => {
+    n(!0), l("lyrics"), a == null || a("medium");
+    try {
+      const t = await _("/ai/lyrics", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          theme: D,
+          keywords: B ? B.split(/[,，\s]+/).filter(Boolean) : [],
+          lines: 8
+        })
+      });
+      if (!(t != null && t.lyrics)) throw new Error("Lyrics generation failed");
+      te(t.lyrics), l("composing");
+      const o = await _("/ai/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          theme: D,
+          lyrics: t.lyrics,
+          lineCount: 8
+        })
+      });
+      if (!(o != null && o.composition)) {
+        d == null || d(t.lyrics, D), le({
+          id: `work-${Date.now()}`,
+          title: `${D} · Quick Song`,
+          theme: D,
+          lyrics: t.lyrics,
+          createdAt: Date.now(),
+          mode: "quick"
+        }), l("done"), a == null || a("success"), setTimeout(() => l("idle"), 2e3);
+        return;
+      }
+      l("synth");
+      const c = await x.compose(o.composition);
+      d == null || d(t.lyrics, D, c, o.composition), le({
+        id: `work-${Date.now()}`,
+        title: `${D} · Quick Song`,
+        theme: D,
+        lyrics: t.lyrics,
+        createdAt: Date.now(),
+        mode: "quick"
+      }), l("done"), a == null || a("success"), setTimeout(() => l("idle"), 2500);
+    } catch (t) {
+      console.error("Quick create failed:", t), v && (d == null || d(v, D)), l("idle");
+    } finally {
+      n(!1);
+    }
+  }, [D, B, d, x, a, v, le]), nt = E(async () => {
+    C(!0), ae("lyrics"), a == null || a("medium");
+    try {
+      const t = await _("/ai/lyrics", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          theme: b,
+          keywords: w,
+          lines: H
+        })
+      });
+      if (!(t != null && t.lyrics)) throw new Error("Lyrics generation failed");
+      ie(t.lyrics), ae("composing");
+      const o = await _("/ai/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          theme: b,
+          lyrics: t.lyrics,
+          lineCount: H
+        })
+      });
+      if (!(o != null && o.composition)) {
+        d == null || d(t.lyrics, b), le({
+          id: `work-${Date.now()}`,
+          title: `${b} · Master Work`,
+          theme: b,
+          lyrics: t.lyrics,
+          createdAt: Date.now(),
+          mode: "master"
+        }), ae("done"), a == null || a("success"), setTimeout(() => ae("idle"), 2e3);
+        return;
+      }
+      ae("synth");
+      const c = await x.compose(o.composition);
+      d == null || d(t.lyrics, b, c, o.composition), le({
+        id: `work-${Date.now()}`,
+        title: `${b} · Master Work`,
+        theme: b,
+        lyrics: t.lyrics,
+        createdAt: Date.now(),
+        mode: "master"
+      }), ae("done"), a == null || a("success"), setTimeout(() => ae("idle"), 2500);
+    } catch (t) {
+      console.error("Master create failed:", t), ae("idle");
+    } finally {
+      C(!1);
+    }
+  }, [b, w, H, d, x, a, le]), ct = E(async () => {
+    if (ne !== null) {
+      Ee(!0), oe("lyrics"), a == null || a("medium");
+      try {
+        const t = g[ne], o = t.lyrics.slice(1, 5).map((Pe) => Pe.text).join(" ").split(" ").filter((Pe) => Pe.length > 3).slice(0, 5), c = await _("/ai/lyrics", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            theme: se,
+            keywords: o,
+            lines: 8
+          })
+        });
+        if (!(c != null && c.lyrics)) throw new Error("Remix lyrics failed");
+        st(c.lyrics), oe("composing");
+        const k = await _("/ai/compose", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            theme: se,
+            lyrics: c.lyrics,
+            lineCount: 8
+          })
+        }), me = `Remix · ${t.title}`;
+        if (!(k != null && k.composition)) {
+          d == null || d(c.lyrics, se), le({ id: `work-${Date.now()}`, title: me, theme: se, lyrics: c.lyrics, createdAt: Date.now(), mode: "remix" }), oe("done"), a == null || a("success"), setTimeout(() => oe("idle"), 2e3);
+          return;
+        }
+        oe("synth");
+        const ue = await x.compose(k.composition);
+        d == null || d(c.lyrics, se, ue, k.composition), le({ id: `work-${Date.now()}`, title: me, theme: se, lyrics: c.lyrics, createdAt: Date.now(), mode: "remix" }), oe("done"), a == null || a("success"), setTimeout(() => oe("idle"), 2500);
+      } catch (t) {
+        console.error("Remix failed:", t), oe("idle");
+      } finally {
+        Ee(!1);
+      }
+    }
+  }, [ne, se, g, d, a, le, x]), Se = E((t, o) => {
+    navigator.clipboard.writeText(t.join(`
+`)), Ke(o), setTimeout(() => Ke(null), 2e3);
+  }, []), Je = E(() => {
+    const t = Z.trim();
+    t && w.length < 8 && !w.includes(t) && (m((o) => [...o, t]), R(""));
+  }, [Z, w]), dt = E((t) => {
+    r(
+      (o) => o.includes(t) ? o.filter((c) => c !== t) : [...o, t]
+    );
+  }, []), ht = E((t) => {
+    const o = new Date(t);
+    return `${o.getMonth() + 1}/${o.getDate()} ${o.getHours()}:${o.getMinutes().toString().padStart(2, "0")}`;
+  }, []), Re = (t) => t === "lyrics" ? s === "zh" ? "AI 写词中..." : "Generating lyrics..." : t === "composing" ? s === "zh" ? "编曲设计中..." : "Composing..." : t === "synth" ? s === "zh" ? `音频合成 ${Math.round(x.progress * 100)}%` : `Synthesizing ${Math.round(x.progress * 100)}%` : t === "done" ? s === "zh" ? "创作完成!" : "Complete!" : "";
+  return /* @__PURE__ */ e(Q, { children: z && /* @__PURE__ */ i($, { children: [
+    /* @__PURE__ */ e(
+      p.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 z-[60] bg-black/60 backdrop-blur-md",
+        onClick: I
+      }
+    ),
+    /* @__PURE__ */ i(
+      p.div,
+      {
+        initial: { y: "100%", opacity: 0 },
+        animate: { y: 0, opacity: 1 },
+        exit: { y: "100%", opacity: 0 },
+        transition: { type: "spring", damping: 28, stiffness: 300 },
+        className: "fixed inset-x-0 bottom-0 z-[61] max-h-[92vh] bg-[#0B1030]/98 backdrop-blur-2xl border-t border-white/10 rounded-t-3xl flex flex-col shadow-2xl md:inset-x-auto md:left-1/2 md:-translate-x-1/2 md:w-full md:max-w-xl md:bottom-auto md:top-1/2 md:-translate-y-1/2 md:rounded-2xl md:border md:max-h-[88vh]",
+        children: [
+          /* @__PURE__ */ i("div", { className: "flex items-center justify-between p-5 pb-3 border-b border-white/[0.06] flex-shrink-0", children: [
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
+              N && /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => {
+                    M(null), a == null || a("light");
+                  },
+                  className: "p-1.5 rounded-lg text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors mr-1",
+                  children: /* @__PURE__ */ e(bt, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "w-9 h-9 rounded-xl bg-gradient-to-tr from-purple-500/20 to-pink-500/20 border border-white/10 flex items-center justify-center", children: /* @__PURE__ */ e(We, { className: "w-4 h-4 text-purple-400" }) }),
+              /* @__PURE__ */ i("div", { children: [
+                /* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm leading-tight", children: N ? (qe = ze.find((t) => t.id === N)) == null ? void 0 : qe[s === "zh" ? "labelZh" : "label"] : s === "zh" ? "AI 创作工坊" : "AI Creation Studio" }),
+                /* @__PURE__ */ e("p", { className: "text-white/30 text-xs", children: N ? (Fe = ze.find((t) => t.id === N)) == null ? void 0 : Fe[s === "zh" ? "descZh" : "desc"] : s === "zh" ? "选择创作模式开始" : "Choose a creation mode" })
+              ] })
+            ] }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: I,
+                className: "p-2 rounded-lg text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors",
+                children: /* @__PURE__ */ e(re, { className: "w-4 h-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto", style: { scrollbarWidth: "none" }, children: /* @__PURE__ */ i(Q, { mode: "wait", children: [
+            !N && /* @__PURE__ */ i(
+              p.div,
+              {
+                initial: { opacity: 0, y: 10 },
+                animate: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: -10 },
+                className: "p-5 space-y-3",
+                children: [
+                  ze.map((t, o) => {
+                    const c = t.icon;
+                    return /* @__PURE__ */ i(
+                      p.button,
+                      {
+                        initial: { opacity: 0, x: -20 },
+                        animate: { opacity: 1, x: 0 },
+                        transition: { delay: o * 0.08 },
+                        onClick: () => {
+                          if (t.id === "mv") {
+                            W == null || W(), a == null || a("selection");
+                            return;
+                          }
+                          M(t.id), a == null || a("selection");
+                        },
+                        className: "w-full flex items-center gap-4 p-4 rounded-xl bg-white/[0.03] border border-white/[0.06] hover:bg-white/[0.06] hover:border-white/[0.12] transition-all group text-left",
+                        children: [
+                          /* @__PURE__ */ e("div", { className: y(
+                            "w-12 h-12 rounded-xl bg-gradient-to-br flex items-center justify-center flex-shrink-0",
+                            t.gradient
+                          ), children: /* @__PURE__ */ e(c, { className: "w-5 h-5 text-white" }) }),
+                          /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
+                            /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-white/90 group-hover:text-white transition-colors", children: s === "zh" ? t.labelZh : t.label }),
+                            /* @__PURE__ */ e("p", { className: "text-xs text-white/30 mt-0.5", children: s === "zh" ? t.descZh : t.desc })
+                          ] }),
+                          t.id === "mv" ? /* @__PURE__ */ e(gt, { className: "w-4 h-4 text-cyan-400/40 group-hover:text-cyan-400/70 transition-colors flex-shrink-0" }) : /* @__PURE__ */ e(ft, { className: "w-4 h-4 text-white/20 group-hover:text-white/40 transition-colors flex-shrink-0" })
+                        ]
+                      },
+                      t.id
+                    );
+                  }),
+                  /* @__PURE__ */ i("div", { className: "flex items-center justify-between mt-4 pt-4 border-t border-white/[0.04]", children: [
+                    /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5 text-white/20 text-xs", children: [
+                      /* @__PURE__ */ e($e, { className: "w-3.5 h-3.5" }),
+                      /* @__PURE__ */ e("span", { children: s === "zh" ? `${he.length} 首作品` : `${he.length} works` })
+                    ] }),
+                    /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5 text-white/20 text-xs", children: [
+                      /* @__PURE__ */ e(je, { className: "w-3.5 h-3.5" }),
+                      /* @__PURE__ */ e("span", { children: s === "zh" ? "AI驱动创作" : "AI-powered creation" })
+                    ] })
+                  ] })
+                ]
+              },
+              "hub"
+            ),
+            N === "quick" && /* @__PURE__ */ i(
+              p.div,
+              {
+                initial: { opacity: 0, x: 20 },
+                animate: { opacity: 1, x: 0 },
+                exit: { opacity: 0, x: -20 },
+                className: "p-5 space-y-5",
+                children: [
+                  /* @__PURE__ */ i("div", { children: [
+                    /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-3", children: s === "zh" ? "选择情绪主题" : "Choose Mood" }),
+                    /* @__PURE__ */ e("div", { className: "grid grid-cols-5 gap-2", children: Me.map((t) => {
+                      const o = t.icon, c = D === t.id, k = t.premium && !f.has(t.id);
+                      return /* @__PURE__ */ i(
+                        "button",
+                        {
+                          onClick: () => {
+                            if (k) {
+                              j && S >= (t.spCost || 200) && F(t.id, t.spCost || 200);
+                              return;
+                            }
+                            Y(t.id), a == null || a("selection");
+                          },
+                          className: y(
+                            "p-3 rounded-xl border transition-all text-center relative",
+                            k ? "bg-white/[0.01] border-white/[0.04] opacity-60" : c ? `bg-gradient-to-br ${t.bg} border-white/15 shadow-lg` : "bg-white/[0.02] border-white/[0.06] hover:bg-white/[0.05]"
+                          ),
+                          children: [
+                            k && /* @__PURE__ */ i("span", { className: "absolute -top-1 -right-1 text-[8px] px-1 py-0.5 rounded-full bg-yellow-500/20 text-yellow-300 border border-yellow-500/20 font-medium", children: [
+                              t.spCost,
+                              "SP"
+                            ] }),
+                            /* @__PURE__ */ e(o, { className: y("w-5 h-5 mx-auto mb-1", c ? t.color : k ? "text-white/15" : "text-white/30") }),
+                            /* @__PURE__ */ e("p", { className: y("text-[10px]", c ? "text-white/80" : "text-white/30"), children: s === "zh" ? t.labelZh : t.label })
+                          ]
+                        },
+                        t.id
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ i("div", { children: [
+                    /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-2", children: s === "zh" ? "灵感关键词（可选）" : "Inspiration Keywords (optional)" }),
+                    /* @__PURE__ */ e(
+                      "input",
+                      {
+                        type: "text",
+                        value: B,
+                        onChange: (t) => G(t.target.value),
+                        onKeyDown: (t) => t.key === "Enter" && Be(),
+                        placeholder: s === "zh" ? "输入关键词，用逗号分隔..." : "Enter keywords, comma separated...",
+                        className: "w-full bg-white/5 border border-white/10 rounded-lg py-2.5 px-3 text-sm text-white placeholder:text-white/20 focus:outline-none focus:border-purple-500/50"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(
+                    p.button,
+                    {
+                      onClick: Be,
+                      disabled: A,
+                      whileHover: { scale: 1.01 },
+                      whileTap: { scale: 0.98 },
+                      className: "w-full py-4 rounded-xl bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 text-white font-semibold flex items-center justify-center gap-3 shadow-lg shadow-purple-500/20 disabled:opacity-50 transition-opacity text-base",
+                      children: h !== "idle" && h !== "done" ? /* @__PURE__ */ i($, { children: [
+                        /* @__PURE__ */ e(fe, { className: "w-5 h-5 animate-spin" }),
+                        Re(h)
+                      ] }) : h === "done" ? /* @__PURE__ */ i($, { children: [
+                        /* @__PURE__ */ e(ee, { className: "w-5 h-5 text-green-300" }),
+                        s === "zh" ? "创作完成!" : "Complete!"
+                      ] }) : /* @__PURE__ */ i($, { children: [
+                        /* @__PURE__ */ e(je, { className: "w-5 h-5" }),
+                        s === "zh" ? "一键创作" : "Create Now"
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ e(Q, { children: v && /* @__PURE__ */ i(
+                    p.div,
+                    {
+                      initial: { opacity: 0, y: 15 },
+                      animate: { opacity: 1, y: 0 },
+                      className: "rounded-xl border border-white/[0.08] bg-gradient-to-br from-purple-500/10 to-pink-500/10 p-4",
+                      children: [
+                        /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-3", children: [
+                          /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium", children: s === "zh" ? "生成的歌词" : "Generated Lyrics" }),
+                          /* @__PURE__ */ i(
+                            "button",
+                            {
+                              onClick: () => Se(v, "quick"),
+                              className: "flex items-center gap-1 px-2 py-1 rounded-lg bg-white/5 text-xs text-white/40 hover:text-white/70 transition-colors",
+                              children: [
+                                ce === "quick" ? /* @__PURE__ */ e(ee, { className: "w-3 h-3 text-green-400" }) : /* @__PURE__ */ e(ge, { className: "w-3 h-3" }),
+                                ce === "quick" ? s === "zh" ? "已复制" : "Copied" : s === "zh" ? "复制" : "Copy"
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ e("div", { className: "space-y-1.5", children: v.map((t, o) => /* @__PURE__ */ e(
+                          p.p,
+                          {
+                            initial: { opacity: 0, x: -8 },
+                            animate: { opacity: 1, x: 0 },
+                            transition: { delay: o * 0.06 },
+                            className: "text-sm text-white/70 leading-relaxed",
+                            children: t
+                          },
+                          o
+                        )) })
+                      ]
+                    }
+                  ) })
+                ]
+              },
+              "quick"
+            ),
+            N === "master" && /* @__PURE__ */ i(
+              p.div,
+              {
+                initial: { opacity: 0, x: 20 },
+                animate: { opacity: 1, x: 0 },
+                exit: { opacity: 0, x: -20 },
+                className: "p-5 space-y-5",
+                children: [
+                  /* @__PURE__ */ i("div", { children: [
+                    /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-3", children: s === "zh" ? "情绪基调" : "Emotional Base" }),
+                    /* @__PURE__ */ e("div", { className: "grid grid-cols-5 gap-2", children: Me.map((t) => {
+                      const o = t.icon, c = b === t.id, k = t.premium && !f.has(t.id);
+                      return /* @__PURE__ */ i(
+                        "button",
+                        {
+                          onClick: () => {
+                            if (k) {
+                              j && S >= (t.spCost || 200) && F(t.id, t.spCost || 200);
+                              return;
+                            }
+                            de(t.id), a == null || a("selection");
+                          },
+                          className: y(
+                            "p-2.5 rounded-xl border transition-all text-center relative",
+                            k ? "bg-white/[0.01] border-white/[0.04] opacity-60" : c ? `bg-gradient-to-br ${t.bg} border-white/15` : "bg-white/[0.02] border-white/[0.06] hover:bg-white/[0.05]"
+                          ),
+                          children: [
+                            k && /* @__PURE__ */ i("span", { className: "absolute -top-1 -right-1 text-[8px] px-1 py-0.5 rounded-full bg-yellow-500/20 text-yellow-300 border border-yellow-500/20 font-medium", children: [
+                              t.spCost,
+                              "SP"
+                            ] }),
+                            /* @__PURE__ */ e(o, { className: y("w-4 h-4 mx-auto mb-0.5", c ? t.color : k ? "text-white/15" : "text-white/30") }),
+                            /* @__PURE__ */ e("p", { className: y("text-[9px]", c ? "text-white/80" : "text-white/30"), children: s === "zh" ? t.labelZh : t.label })
+                          ]
+                        },
+                        t.id
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ i("div", { children: [
+                    /* @__PURE__ */ i("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-2", children: [
+                      s === "zh" ? "创作关键词" : "Keywords",
+                      " ",
+                      /* @__PURE__ */ i("span", { className: "text-white/20", children: [
+                        "(",
+                        w.length,
+                        "/8)"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ i("div", { className: "flex gap-2 mb-2", children: [
+                      /* @__PURE__ */ e(
+                        "input",
+                        {
+                          type: "text",
+                          value: Z,
+                          onChange: (t) => R(t.target.value),
+                          onKeyDown: (t) => t.key === "Enter" && Je(),
+                          placeholder: s === "zh" ? "添加关键词..." : "Add keyword...",
+                          className: "flex-1 bg-white/5 border border-white/10 rounded-lg py-2 px-3 text-sm text-white placeholder:text-white/20 focus:outline-none focus:border-purple-500/50"
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          onClick: Je,
+                          disabled: !Z.trim() || w.length >= 8,
+                          className: "p-2 rounded-lg bg-white/5 border border-white/[0.08] text-white/60 hover:text-white transition-colors disabled:opacity-30",
+                          children: /* @__PURE__ */ e(pe, { className: "w-4 h-4" })
+                        }
+                      )
+                    ] }),
+                    w.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: w.map((t) => /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 bg-indigo-500/10 border border-indigo-500/20 rounded-full text-xs text-indigo-300", children: [
+                      t,
+                      /* @__PURE__ */ e("button", { onClick: () => m((o) => o.filter((c) => c !== t)), className: "text-indigo-400/60 hover:text-indigo-300", children: /* @__PURE__ */ e(re, { className: "w-3 h-3" }) })
+                    ] }, t)) })
+                  ] }),
+                  /* @__PURE__ */ i("div", { children: [
+                    /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-2", children: s === "zh" ? "歌曲结构" : "Song Structure" }),
+                    /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2", children: $t.map((t) => /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: () => be(t.id),
+                        className: y(
+                          "py-2 px-3 rounded-lg border text-xs transition-all",
+                          ve === t.id ? "bg-indigo-500/15 border-indigo-500/30 text-indigo-300" : "bg-white/[0.02] border-white/[0.06] text-white/40 hover:bg-white/[0.05]"
+                        ),
+                        children: s === "zh" ? t.labelZh : t.label
+                      },
+                      t.id
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ i("div", { children: [
+                    /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-2", children: s === "zh" ? "乐器编排" : "Instruments" }),
+                    /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-2", children: It.map((t) => /* @__PURE__ */ i(
+                      "button",
+                      {
+                        onClick: () => dt(t.id),
+                        className: y(
+                          "py-2 px-3 rounded-lg border text-xs transition-all flex items-center gap-1.5",
+                          ke.includes(t.id) ? "bg-indigo-500/15 border-indigo-500/30 text-indigo-300" : "bg-white/[0.02] border-white/[0.06] text-white/40 hover:bg-white/[0.05]"
+                        ),
+                        children: [
+                          /* @__PURE__ */ e("span", { children: t.emoji }),
+                          /* @__PURE__ */ e("span", { children: s === "zh" ? t.labelZh : t.label })
+                        ]
+                      },
+                      t.id
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ i("div", { className: "grid grid-cols-2 gap-4", children: [
+                    /* @__PURE__ */ i("div", { children: [
+                      /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-2", children: s === "zh" ? "歌词行数" : "Lines" }),
+                      /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ e(
+                          "button",
+                          {
+                            onClick: () => Ne(Math.max(4, H - 2)),
+                            className: "p-1.5 rounded-lg bg-white/5 border border-white/[0.08] text-white/60 hover:text-white transition-colors",
+                            children: /* @__PURE__ */ e(Ie, { className: "w-3.5 h-3.5" })
+                          }
+                        ),
+                        /* @__PURE__ */ e("span", { className: "text-lg font-bold text-white font-mono flex-1 text-center", children: H }),
+                        /* @__PURE__ */ e(
+                          "button",
+                          {
+                            onClick: () => Ne(Math.min(20, H + 2)),
+                            className: "p-1.5 rounded-lg bg-white/5 border border-white/[0.08] text-white/60 hover:text-white transition-colors",
+                            children: /* @__PURE__ */ e(pe, { className: "w-3.5 h-3.5" })
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ i("div", { children: [
+                      /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-2", children: s === "zh" ? "速度 BPM" : "Tempo BPM" }),
+                      /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ e(
+                          "button",
+                          {
+                            onClick: () => q(Math.max(60, L - 10)),
+                            className: "p-1.5 rounded-lg bg-white/5 border border-white/[0.08] text-white/60 hover:text-white transition-colors",
+                            children: /* @__PURE__ */ e(Ie, { className: "w-3.5 h-3.5" })
+                          }
+                        ),
+                        /* @__PURE__ */ e("span", { className: "text-lg font-bold text-white font-mono flex-1 text-center", children: L }),
+                        /* @__PURE__ */ e(
+                          "button",
+                          {
+                            onClick: () => q(Math.min(200, L + 10)),
+                            className: "p-1.5 rounded-lg bg-white/5 border border-white/[0.08] text-white/60 hover:text-white transition-colors",
+                            children: /* @__PURE__ */ e(pe, { className: "w-3.5 h-3.5" })
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e(
+                    p.button,
+                    {
+                      onClick: nt,
+                      disabled: V,
+                      whileHover: { scale: 1.01 },
+                      whileTap: { scale: 0.98 },
+                      className: "w-full py-3.5 rounded-xl bg-gradient-to-r from-indigo-600 via-blue-600 to-purple-600 text-white font-semibold flex items-center justify-center gap-2 shadow-lg shadow-indigo-500/20 disabled:opacity-50",
+                      children: P !== "idle" && P !== "done" ? /* @__PURE__ */ i($, { children: [
+                        /* @__PURE__ */ e(fe, { className: "w-5 h-5 animate-spin" }),
+                        Re(P)
+                      ] }) : P === "done" ? /* @__PURE__ */ i($, { children: [
+                        /* @__PURE__ */ e(ee, { className: "w-5 h-5 text-green-300" }),
+                        s === "zh" ? "大师之作完成!" : "Masterpiece Complete!"
+                      ] }) : /* @__PURE__ */ i($, { children: [
+                        /* @__PURE__ */ e(We, { className: "w-5 h-5" }),
+                        s === "zh" ? "开始创作" : "Start Creating"
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ e(Q, { children: X && /* @__PURE__ */ i(
+                    p.div,
+                    {
+                      initial: { opacity: 0, y: 15 },
+                      animate: { opacity: 1, y: 0 },
+                      className: "rounded-xl border border-white/[0.08] bg-gradient-to-br from-indigo-500/10 to-blue-500/10 p-4",
+                      children: [
+                        /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-3", children: [
+                          /* @__PURE__ */ e("p", { className: "text-xs text-white/40", children: s === "zh" ? "大师之作" : "Master Work" }),
+                          /* @__PURE__ */ i(
+                            "button",
+                            {
+                              onClick: () => Se(X, "master"),
+                              className: "flex items-center gap-1 px-2 py-1 rounded-lg bg-white/5 text-xs text-white/40 hover:text-white/70 transition-colors",
+                              children: [
+                                ce === "master" ? /* @__PURE__ */ e(ee, { className: "w-3 h-3 text-green-400" }) : /* @__PURE__ */ e(ge, { className: "w-3 h-3" }),
+                                ce === "master" ? s === "zh" ? "已复制" : "Copied" : s === "zh" ? "复制" : "Copy"
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ e("div", { className: "space-y-1.5", children: X.map((t, o) => /* @__PURE__ */ e(
+                          p.p,
+                          {
+                            initial: { opacity: 0, x: -8 },
+                            animate: { opacity: 1, x: 0 },
+                            transition: { delay: o * 0.05 },
+                            className: "text-sm text-white/70 leading-relaxed",
+                            children: t
+                          },
+                          o
+                        )) })
+                      ]
+                    }
+                  ) })
+                ]
+              },
+              "master"
+            ),
+            N === "remix" && /* @__PURE__ */ i(
+              p.div,
+              {
+                initial: { opacity: 0, x: 20 },
+                animate: { opacity: 1, x: 0 },
+                exit: { opacity: 0, x: -20 },
+                className: "p-5 space-y-5",
+                children: [
+                  /* @__PURE__ */ i("div", { children: [
+                    /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-3", children: s === "zh" ? "选择原曲" : "Select Source Track" }),
+                    /* @__PURE__ */ e("div", { className: "space-y-2 max-h-48 overflow-y-auto", style: { scrollbarWidth: "none" }, children: g.map((t, o) => /* @__PURE__ */ i(
+                      "button",
+                      {
+                        onClick: () => {
+                          lt(o), a == null || a("selection");
+                        },
+                        className: y(
+                          "w-full flex items-center gap-3 p-3 rounded-xl border transition-all text-left",
+                          ne === o ? "bg-orange-500/10 border-orange-500/20" : "bg-white/[0.02] border-white/[0.06] hover:bg-white/[0.05]"
+                        ),
+                        children: [
+                          /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-lg overflow-hidden flex-shrink-0", children: /* @__PURE__ */ e("img", { src: t.albumArt, alt: "", className: "w-full h-full object-cover" }) }),
+                          /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
+                            /* @__PURE__ */ e("p", { className: y("text-sm font-medium truncate", ne === o ? "text-orange-300" : "text-white/70"), children: t.title }),
+                            /* @__PURE__ */ e("p", { className: "text-xs text-white/30", children: t.artist })
+                          ] }),
+                          ne === o && /* @__PURE__ */ e("div", { className: "w-5 h-5 rounded-full bg-orange-500/30 border border-orange-500/50 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(ee, { className: "w-3 h-3 text-orange-300" }) })
+                        ]
+                      },
+                      t.id
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ i("div", { children: [
+                    /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-3", children: s === "zh" ? "改编风格" : "Target Style" }),
+                    /* @__PURE__ */ e("div", { className: "grid grid-cols-5 gap-2", children: Me.map((t) => {
+                      const o = t.icon, c = se === t.id, k = t.premium && !f.has(t.id);
+                      return /* @__PURE__ */ i(
+                        "button",
+                        {
+                          onClick: () => {
+                            if (k) {
+                              j && S >= (t.spCost || 200) && F(t.id, t.spCost || 200);
+                              return;
+                            }
+                            rt(t.id), a == null || a("selection");
+                          },
+                          className: y(
+                            "p-2.5 rounded-xl border transition-all text-center relative",
+                            k ? "bg-white/[0.01] border-white/[0.04] opacity-60" : c ? `bg-gradient-to-br ${t.bg} border-white/15` : "bg-white/[0.02] border-white/[0.06] hover:bg-white/[0.05]"
+                          ),
+                          children: [
+                            k && /* @__PURE__ */ i("span", { className: "absolute -top-1 -right-1 text-[8px] px-1 py-0.5 rounded-full bg-yellow-500/20 text-yellow-300 border border-yellow-500/20 font-medium", children: [
+                              t.spCost,
+                              "SP"
+                            ] }),
+                            /* @__PURE__ */ e(o, { className: y("w-4 h-4 mx-auto mb-0.5", c ? t.color : k ? "text-white/15" : "text-white/30") }),
+                            /* @__PURE__ */ e("p", { className: y("text-[9px]", c ? "text-white/80" : "text-white/30"), children: s === "zh" ? t.labelZh : t.label })
+                          ]
+                        },
+                        t.id
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ e(
+                    p.button,
+                    {
+                      onClick: ct,
+                      disabled: ne === null || at,
+                      whileHover: { scale: 1.01 },
+                      whileTap: { scale: 0.98 },
+                      className: "w-full py-3.5 rounded-xl bg-gradient-to-r from-orange-600 via-red-600 to-pink-600 text-white font-semibold flex items-center justify-center gap-2 shadow-lg shadow-orange-500/20 disabled:opacity-40",
+                      children: Ce !== "idle" && Ce !== "done" ? /* @__PURE__ */ i($, { children: [
+                        /* @__PURE__ */ e(fe, { className: "w-5 h-5 animate-spin" }),
+                        Re(Ce)
+                      ] }) : Ce === "done" ? /* @__PURE__ */ i($, { children: [
+                        /* @__PURE__ */ e(ee, { className: "w-5 h-5 text-green-300" }),
+                        s === "zh" ? "改编完成!" : "Remix Complete!"
+                      ] }) : /* @__PURE__ */ i($, { children: [
+                        /* @__PURE__ */ e(Ge, { className: "w-5 h-5" }),
+                        s === "zh" ? "开始改编 (含音频重合成)" : "Remix (with audio synthesis)"
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ e(Q, { children: Le && /* @__PURE__ */ i(
+                    p.div,
+                    {
+                      initial: { opacity: 0, y: 15 },
+                      animate: { opacity: 1, y: 0 },
+                      className: "rounded-xl border border-white/[0.08] bg-gradient-to-br from-orange-500/10 to-red-500/10 p-4",
+                      children: [
+                        /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-3", children: [
+                          /* @__PURE__ */ e("p", { className: "text-xs text-white/40", children: s === "zh" ? "改编歌词" : "Remixed Lyrics" }),
+                          /* @__PURE__ */ i(
+                            "button",
+                            {
+                              onClick: () => Se(Le, "remix"),
+                              className: "flex items-center gap-1 px-2 py-1 rounded-lg bg-white/5 text-xs text-white/40 hover:text-white/70 transition-colors",
+                              children: [
+                                ce === "remix" ? /* @__PURE__ */ e(ee, { className: "w-3 h-3 text-green-400" }) : /* @__PURE__ */ e(ge, { className: "w-3 h-3" }),
+                                ce === "remix" ? s === "zh" ? "已复制" : "Copied" : s === "zh" ? "复制" : "Copy"
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ e("div", { className: "space-y-1.5", children: Le.map((t, o) => /* @__PURE__ */ e(
+                          p.p,
+                          {
+                            initial: { opacity: 0, x: -8 },
+                            animate: { opacity: 1, x: 0 },
+                            transition: { delay: o * 0.06 },
+                            className: "text-sm text-white/70 leading-relaxed",
+                            children: t
+                          },
+                          o
+                        )) })
+                      ]
+                    }
+                  ) })
+                ]
+              },
+              "remix"
+            ),
+            N === "works" && /* @__PURE__ */ e(
+              p.div,
+              {
+                initial: { opacity: 0, x: 20 },
+                animate: { opacity: 1, x: 0 },
+                exit: { opacity: 0, x: -20 },
+                className: "p-5",
+                children: he.length === 0 ? /* @__PURE__ */ i("div", { className: "flex flex-col items-center justify-center py-16 gap-4", children: [
+                  /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-white/5 border border-white/10 flex items-center justify-center", children: /* @__PURE__ */ e($e, { className: "w-7 h-7 text-white/20" }) }),
+                  /* @__PURE__ */ e("p", { className: "text-white/30 text-sm text-center", children: s === "zh" ? `还没有创作作品
+去创作你的第一首歌吧!` : `No works yet
+Create your first song!` }),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: () => M("quick"),
+                      className: "px-4 py-2 rounded-lg bg-purple-500/10 border border-purple-500/20 text-purple-300 text-sm hover:bg-purple-500/20 transition-colors",
+                      children: s === "zh" ? "开始创作" : "Start Creating"
+                    }
+                  )
+                ] }) : /* @__PURE__ */ i("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ e("p", { className: "text-xs text-white/40 font-medium uppercase tracking-wider mb-3", children: s === "zh" ? `${he.length} 首作品` : `${he.length} Works` }),
+                  he.map((t, o) => {
+                    const c = Me.find((ue) => ue.id === t.theme), k = (c == null ? void 0 : c.icon) || $e, me = ze.find((ue) => ue.id === t.mode);
+                    return /* @__PURE__ */ e(
+                      p.div,
+                      {
+                        initial: { opacity: 0, y: 10 },
+                        animate: { opacity: 1, y: 0 },
+                        transition: { delay: o * 0.05 },
+                        className: "rounded-xl border border-white/[0.06] bg-white/[0.02] p-4 group",
+                        children: /* @__PURE__ */ i("div", { className: "flex items-start gap-3", children: [
+                          /* @__PURE__ */ e("div", { className: y(
+                            "w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 bg-gradient-to-br",
+                            (c == null ? void 0 : c.bg) || "from-white/5 to-white/5"
+                          ), children: /* @__PURE__ */ e(k, { className: y("w-5 h-5", (c == null ? void 0 : c.color) || "text-white/30") }) }),
+                          /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
+                            /* @__PURE__ */ i("div", { className: "flex items-center gap-2 mb-1", children: [
+                              /* @__PURE__ */ e("p", { className: "text-sm font-medium text-white/80 truncate", children: t.title }),
+                              /* @__PURE__ */ e("span", { className: "text-[9px] text-white/20 bg-white/5 px-1.5 py-0.5 rounded-full flex-shrink-0", children: me ? s === "zh" ? me.labelZh : me.label : t.mode })
+                            ] }),
+                            /* @__PURE__ */ i("p", { className: "text-xs text-white/25 flex items-center gap-1", children: [
+                              /* @__PURE__ */ e(Oe, { className: "w-3 h-3" }),
+                              ht(t.createdAt)
+                            ] }),
+                            /* @__PURE__ */ i("p", { className: "text-xs text-white/30 mt-2 line-clamp-2 italic", children: [
+                              '"',
+                              t.lyrics.slice(0, 2).join(" / "),
+                              '"'
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ i("div", { className: "flex flex-col gap-1 md:opacity-0 md:group-hover:opacity-100 transition-opacity flex-shrink-0", children: [
+                            /* @__PURE__ */ e(
+                              "button",
+                              {
+                                onClick: () => Se(t.lyrics, t.id),
+                                className: "p-1.5 rounded-lg text-white/30 hover:text-white/60 hover:bg-white/5 transition-colors",
+                                title: s === "zh" ? "复制歌词" : "Copy lyrics",
+                                children: ce === t.id ? /* @__PURE__ */ e(ee, { className: "w-3.5 h-3.5 text-green-400" }) : /* @__PURE__ */ e(ge, { className: "w-3.5 h-3.5" })
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "button",
+                              {
+                                onClick: () => ot(t.id),
+                                className: "p-1.5 rounded-lg text-white/30 hover:text-red-400/60 hover:bg-red-500/5 transition-colors",
+                                title: s === "zh" ? "删除" : "Delete",
+                                children: /* @__PURE__ */ e(yt, { className: "w-3.5 h-3.5" })
+                              }
+                            ),
+                            O && /* @__PURE__ */ e(
+                              "button",
+                              {
+                                onClick: () => O(t),
+                                className: "p-1.5 rounded-lg text-white/30 hover:text-white/60 hover:bg-white/5 transition-colors",
+                                title: s === "zh" ? "分享作品" : "Share work",
+                                children: /* @__PURE__ */ e(Nt, { className: "w-3.5 h-3.5" })
+                              }
+                            ),
+                            W && /* @__PURE__ */ e(
+                              "button",
+                              {
+                                onClick: () => W(t.lyrics),
+                                className: "p-1.5 rounded-lg text-white/30 hover:text-cyan-400/60 hover:bg-cyan-500/5 transition-colors",
+                                title: s === "zh" ? "从此作品创建MV" : "Create MV from this work",
+                                children: /* @__PURE__ */ e(tt, { className: "w-3.5 h-3.5" })
+                              }
+                            )
+                          ] })
+                        ] })
+                      },
+                      t.id
+                    );
+                  })
+                ] })
+              },
+              "works"
+            )
+          ] }) })
+        ]
+      }
+    )
+  ] }) });
+}, De = [
+  { id: "starfield", labelZh: "星空漫游", labelEn: "Starfield", emoji: "🌌", colors: ["#667eea", "#764ba2", "#fff"] },
+  { id: "neonPulse", labelZh: "霓虹脉冲", labelEn: "Neon Pulse", emoji: "💜", colors: ["#ff006e", "#8338ec", "#3a86ff"] },
+  { id: "aurora", labelZh: "极光幻境", labelEn: "Aurora", emoji: "🌈", colors: ["#00f5d4", "#7209b7", "#f72585"] },
+  { id: "inkWash", labelZh: "水墨流韵", labelEn: "Ink Wash", emoji: "🏔️", colors: ["#1a1a2e", "#e0e0e0", "#555"] },
+  { id: "cyberCity", labelZh: "赛博都市", labelEn: "Cyber City", emoji: "🌃", colors: ["#0ff", "#f0f", "#ff0"] }
+];
+function jt(z, I, d) {
+  var a;
+  const g = ((a = De.find((O) => O.id === d)) == null ? void 0 : a.colors) || ["#fff", "#aaa", "#666"], J = g[Math.floor(Math.random() * g.length)];
+  switch (d) {
+    case "starfield":
+      return {
+        x: Math.random() * z,
+        y: Math.random() * I,
+        z: Math.random() * 3 + 0.5,
+        vx: 0,
+        vy: Math.random() * 0.3 + 0.1,
+        size: Math.random() * 2.5 + 0.5,
+        alpha: Math.random() * 0.8 + 0.2,
+        color: J,
+        life: 0,
+        maxLife: 300 + Math.random() * 200
+      };
+    case "neonPulse":
+      return {
+        x: z / 2 + (Math.random() - 0.5) * z * 0.8,
+        y: I / 2 + (Math.random() - 0.5) * I * 0.8,
+        z: 1,
+        vx: (Math.random() - 0.5) * 2,
+        vy: (Math.random() - 0.5) * 2,
+        size: Math.random() * 4 + 1,
+        alpha: Math.random() * 0.6 + 0.2,
+        color: J,
+        life: 0,
+        maxLife: 150 + Math.random() * 100
+      };
+    case "aurora":
+      return {
+        x: Math.random() * z,
+        y: I * 0.2 + Math.random() * I * 0.3,
+        z: 1,
+        vx: Math.random() * 0.5 + 0.2,
+        vy: (Math.random() - 0.5) * 0.3,
+        size: Math.random() * 40 + 20,
+        alpha: Math.random() * 0.15 + 0.05,
+        color: J,
+        life: 0,
+        maxLife: 400 + Math.random() * 200
+      };
+    case "inkWash":
+      return {
+        x: Math.random() * z,
+        y: Math.random() * I,
+        z: 1,
+        vx: (Math.random() - 0.5) * 0.5,
+        vy: -Math.random() * 0.8 - 0.2,
+        size: Math.random() * 30 + 5,
+        alpha: Math.random() * 0.08 + 0.02,
+        color: J,
+        life: 0,
+        maxLife: 300 + Math.random() * 200
+      };
+    case "cyberCity":
+    default:
+      return {
+        x: Math.random() * z,
+        y: Math.random() * I,
+        z: 1,
+        vx: 0,
+        vy: Math.random() * 2 + 1,
+        size: Math.random() * 2 + 0.5,
+        alpha: Math.random() * 0.7 + 0.3,
+        color: J,
+        life: 0,
+        maxLife: 200 + Math.random() * 100
+      };
+  }
+}
+const Et = ({
+  isOpen: z,
+  onClose: I,
+  track: d,
+  isPlaying: g,
+  audioEnergy: J,
+  frequencyData: a,
+  currentTime: O,
+  emotion: W,
+  customLyrics: j,
+  onHaptic: S
+}) => {
+  const { lang: T } = Ae(), K = we(null), s = we(0), N = we([]), M = we(0), [f, U] = u("starfield"), [F, D] = u(!0), [Y, B] = u(0.7), G = j && j.length > 0 ? j.map((h, l) => ({
+    time: l * (d.duration > 0 ? d.duration / j.length : 10),
+    text: h,
+    translation: void 0
+  })) : d.lyrics, A = [...G].reverse().find((h) => h.time <= O);
+  G.find((h) => h.time > O);
+  const n = E(() => {
+    var ke;
+    const h = K.current;
+    if (!h) return;
+    const l = h.getContext("2d");
+    if (!l) return;
+    const x = h.width, b = h.height;
+    M.current += 1;
+    const de = M.current, w = J * Y, m = ((ke = De.find((r) => r.id === f)) == null ? void 0 : ke.colors) || ["#fff", "#aaa", "#666"];
+    switch (f) {
+      case "starfield": {
+        l.fillStyle = "#050816", l.fillRect(0, 0, x, b);
+        const r = l.createRadialGradient(x / 2, b / 2, 0, x / 2, b / 2, x * 0.5);
+        r.addColorStop(0, `rgba(102, 126, 234, ${0.03 + w * 0.05})`), r.addColorStop(1, "transparent"), l.fillStyle = r, l.fillRect(0, 0, x, b);
+        break;
+      }
+      case "neonPulse": {
+        l.fillStyle = `rgba(10, 5, 30, ${0.15 + (1 - w) * 0.1})`, l.fillRect(0, 0, x, b);
+        const r = l.createRadialGradient(x / 2, b / 2, 0, x / 2, b / 2, 150 + w * 200);
+        r.addColorStop(0, `rgba(131, 56, 236, ${0.1 + w * 0.15})`), r.addColorStop(0.5, `rgba(255, 0, 110, ${0.05 + w * 0.08})`), r.addColorStop(1, "transparent"), l.fillStyle = r, l.fillRect(0, 0, x, b);
+        break;
+      }
+      case "aurora": {
+        l.fillStyle = "rgba(5, 5, 20, 0.08)", l.fillRect(0, 0, x, b);
+        break;
+      }
+      case "inkWash": {
+        l.fillStyle = `rgba(15, 15, 25, ${0.05 + (1 - w) * 0.03})`, l.fillRect(0, 0, x, b), l.beginPath(), l.moveTo(0, b);
+        for (let r = 0; r <= x; r += 3) {
+          const L = b - 80 - Math.sin(r * 8e-3 + 1) * 60 - Math.sin(r * 0.015) * 30 - Math.cos(r * 3e-3 + 2) * 40;
+          l.lineTo(r, L);
+        }
+        l.lineTo(x, b), l.fillStyle = "rgba(30, 30, 50, 0.06)", l.fill();
+        break;
+      }
+      case "cyberCity": {
+        l.fillStyle = "rgba(5, 0, 15, 0.12)", l.fillRect(0, 0, x, b), l.strokeStyle = `rgba(0, 255, 255, ${0.04 + w * 0.06})`, l.lineWidth = 0.5;
+        const r = b * 0.7;
+        for (let L = 0; L < 20; L++) {
+          const q = r + L * 12;
+          l.beginPath(), l.moveTo(0, q), l.lineTo(x, q), l.stroke();
+        }
+        for (let L = 0; L < 15; L++) {
+          const q = x / 2 + (L - 7) * (40 + L * 5);
+          l.beginPath(), l.moveTo(x / 2, r), l.lineTo(q, b), l.stroke();
+        }
+        break;
+      }
+    }
+    const Z = Math.floor(50 + w * 80 * Y);
+    for (; N.current.length < Z; )
+      N.current.push(jt(x, b, f));
+    const R = [];
+    for (const r of N.current) {
+      if (r.life += 1, r.life > r.maxLife) continue;
+      r.x += r.vx + (f === "starfield" ? Math.sin(de * 0.01 + r.y * 0.01) * 0.2 : 0), r.y += r.vy * (1 + w * 0.5), r.x < -10 && (r.x = x + 10), r.x > x + 10 && (r.x = -10), r.y < -10 && (r.y = b + 10), r.y > b + 10 && (r.y = -10);
+      const L = Math.min(r.life / 20, 1), q = Math.max(1 - (r.life - r.maxLife + 30) / 30, 0), V = r.alpha * L * q * (0.5 + w * 0.5);
+      if (l.beginPath(), f === "aurora")
+        l.ellipse(r.x, r.y, r.size * (1 + w), r.size * 0.3, 0, 0, Math.PI * 2), l.fillStyle = `${r.color}${Math.floor(V * 255).toString(16).padStart(2, "0")}`, l.fill();
+      else if (f === "inkWash") {
+        const C = l.createRadialGradient(r.x, r.y, 0, r.x, r.y, r.size);
+        C.addColorStop(0, `rgba(200, 200, 210, ${V})`), C.addColorStop(1, "transparent"), l.fillStyle = C, l.arc(r.x, r.y, r.size, 0, Math.PI * 2), l.fill();
+      } else if (f === "cyberCity")
+        l.strokeStyle = `${r.color}${Math.floor(V * 200).toString(16).padStart(2, "0")}`, l.lineWidth = r.size * 0.5, l.moveTo(r.x, r.y), l.lineTo(r.x, r.y - 8 - w * 12), l.stroke();
+      else if (l.arc(r.x, r.y, r.size * (f === "neonPulse" ? 1 + w * 0.5 : 1), 0, Math.PI * 2), l.fillStyle = `${r.color}${Math.floor(V * 255).toString(16).padStart(2, "0")}`, l.fill(), f === "neonPulse" && r.size > 2) {
+        const C = l.createRadialGradient(r.x, r.y, 0, r.x, r.y, r.size * 4);
+        C.addColorStop(0, `${r.color}${Math.floor(V * 80).toString(16).padStart(2, "0")}`), C.addColorStop(1, "transparent"), l.fillStyle = C, l.beginPath(), l.arc(r.x, r.y, r.size * 4, 0, Math.PI * 2), l.fill();
+      }
+      R.push(r);
+    }
+    if (N.current = R, a.length > 0 && g) {
+      const r = Math.min(64, a.length), L = x / r, q = b * 0.25;
+      l.save(), f === "inkWash" && (l.globalAlpha = 0.15);
+      for (let V = 0; V < r; V++) {
+        const C = a[Math.floor(V * a.length / r)] / 255, X = C * q * Y, ie = V * L, P = l.createLinearGradient(ie, b, ie, b - X);
+        f === "neonPulse" ? (P.addColorStop(0, `rgba(255, 0, 110, ${0.3 + C * 0.4})`), P.addColorStop(1, `rgba(131, 56, 236, ${0.1 + C * 0.2})`)) : f === "aurora" ? (P.addColorStop(0, `rgba(0, 245, 212, ${0.2 + C * 0.3})`), P.addColorStop(1, `rgba(114, 9, 183, ${0.1 + C * 0.15})`)) : f === "cyberCity" ? (P.addColorStop(0, `rgba(0, 255, 255, ${0.3 + C * 0.5})`), P.addColorStop(1, `rgba(255, 0, 255, ${0.1 + C * 0.2})`)) : f === "inkWash" ? (P.addColorStop(0, `rgba(180, 180, 190, ${0.3 + C * 0.4})`), P.addColorStop(1, "transparent")) : (P.addColorStop(0, `rgba(102, 126, 234, ${0.2 + C * 0.4})`), P.addColorStop(1, `rgba(118, 75, 162, ${0.05 + C * 0.1})`)), l.fillStyle = P, l.fillRect(ie, b - X, L - 1, X);
+      }
+      l.restore();
+    }
+    if (f !== "inkWash") {
+      const r = 60 + w * 40;
+      l.beginPath(), l.arc(x / 2, b / 2, r, 0, Math.PI * 2), l.strokeStyle = `${m[0]}${Math.floor((0.1 + w * 0.2) * 255).toString(16).padStart(2, "0")}`, l.lineWidth = 1.5 + w * 2, l.stroke(), l.beginPath(), l.arc(x / 2, b / 2, r * 1.3 + Math.sin(de * 0.03) * 10, 0, Math.PI * 2), l.strokeStyle = `${m[1]}${Math.floor((0.05 + w * 0.1) * 255).toString(16).padStart(2, "0")}`, l.lineWidth = 0.8, l.stroke();
+    }
+    if (F && A) {
+      l.save(), l.textAlign = "center", l.font = `700 ${f === "inkWash" ? "20" : "22"}px system-ui, -apple-system, sans-serif`;
+      const r = b * 0.78;
+      f !== "inkWash" && (l.shadowColor = m[0], l.shadowBlur = 15 + w * 20), l.fillStyle = `rgba(255, 255, 255, ${0.8 + w * 0.2})`;
+      const L = x * 0.85, q = A.text;
+      if (l.measureText(q).width > L) {
+        const V = q.split(" ");
+        let C = "", X = r;
+        for (const ie of V) {
+          const P = C ? `${C} ${ie}` : ie;
+          l.measureText(P).width > L ? (l.fillText(C, x / 2, X), C = ie, X += 30) : C = P;
+        }
+        l.fillText(C, x / 2, X);
+      } else
+        l.fillText(q, x / 2, r);
+      l.shadowBlur = 0, A.translation && (l.font = "400 13px system-ui, -apple-system, sans-serif", l.fillStyle = "rgba(255, 255, 255, 0.4)", l.fillText(A.translation, x / 2, r + 28)), l.restore();
+    }
+    l.save(), l.textAlign = "left", l.fillStyle = "rgba(255, 255, 255, 0.3)", l.font = "500 11px system-ui, -apple-system, sans-serif", l.fillText(d.title, 20, 28), l.fillStyle = "rgba(255, 255, 255, 0.15)", l.font = "400 10px system-ui, -apple-system, sans-serif", l.fillText(d.artist, 20, 44), l.textAlign = "right";
+    const H = Math.floor(O / 60), Ne = Math.floor(O % 60);
+    l.fillStyle = "rgba(255, 255, 255, 0.2)", l.font = "400 10px monospace", l.fillText(`${H}:${Ne.toString().padStart(2, "0")}`, x - 20, 28), l.restore();
+    const ve = d.duration > 0 ? O / d.duration : 0;
+    l.fillStyle = "rgba(255, 255, 255, 0.06)", l.fillRect(0, b - 3, x, 3);
+    const be = l.createLinearGradient(0, 0, x * ve, 0);
+    be.addColorStop(0, m[0]), be.addColorStop(1, m[1]), l.fillStyle = be, l.fillRect(0, b - 3, x * ve, 3), s.current = requestAnimationFrame(n);
+  }, [f, J, a, g, O, F, Y, d, A, W, G]);
+  ye(() => {
+    if (z) {
+      N.current = [], M.current = 0;
+      const h = K.current;
+      if (h) {
+        const l = h.getBoundingClientRect();
+        h.width = l.width * (window.devicePixelRatio > 1 ? 2 : 1), h.height = l.height * (window.devicePixelRatio > 1 ? 2 : 1);
+      }
+      s.current = requestAnimationFrame(n);
+    }
+    return () => {
+      s.current && cancelAnimationFrame(s.current);
+    };
+  }, [z, n]);
+  const v = E(() => {
+    if (!K.current) return;
+    const h = document.createElement("a");
+    h.download = `d-music-mv-${d.title.replace(/\s+/g, "-").toLowerCase()}.png`, h.href = K.current.toDataURL("image/png"), h.click(), S == null || S("success");
+  }, [d.title, S]), te = E(() => {
+    var l;
+    const h = K.current;
+    h && (document.fullscreenElement ? document.exitFullscreen() : (l = h.requestFullscreen) == null || l.call(h).catch(() => {
+    }), S == null || S("medium"));
+  }, [S]);
+  return /* @__PURE__ */ e(Q, { children: z && /* @__PURE__ */ i($, { children: [
+    /* @__PURE__ */ e(
+      p.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 z-[62] bg-black/80 backdrop-blur-xl",
+        onClick: I
+      }
+    ),
+    /* @__PURE__ */ i(
+      p.div,
+      {
+        initial: { opacity: 0, scale: 0.92 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.92 },
+        transition: { type: "spring", damping: 25, stiffness: 280 },
+        className: "fixed z-[63] inset-4 md:inset-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:w-[90vw] md:max-w-3xl md:max-h-[88vh] bg-[#080C28]/98 backdrop-blur-2xl border border-white/10 rounded-2xl flex flex-col shadow-2xl overflow-hidden",
+        children: [
+          /* @__PURE__ */ i("div", { className: "flex items-center justify-between px-5 py-3 border-b border-white/[0.06] flex-shrink-0", children: [
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-lg bg-gradient-to-tr from-cyan-500/20 to-purple-500/20 border border-white/10 flex items-center justify-center", children: /* @__PURE__ */ e(Ge, { className: "w-4 h-4 text-cyan-400" }) }),
+              /* @__PURE__ */ i("div", { children: [
+                /* @__PURE__ */ i("h3", { className: "text-white font-semibold text-sm leading-tight flex items-center gap-1.5", children: [
+                  T === "zh" ? "MV 创作" : "MV Creator",
+                  j && j.length > 0 && /* @__PURE__ */ e("span", { className: "text-[9px] font-normal px-1.5 py-0.5 rounded-full bg-cyan-500/15 border border-cyan-500/25 text-cyan-300", children: T === "zh" ? "作品歌词" : "Work Lyrics" })
+                ] }),
+                /* @__PURE__ */ i("p", { className: "text-white/30 text-[10px]", children: [
+                  d.title,
+                  " — ",
+                  d.artist
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ i("div", { className: y(
+                "flex items-center gap-1.5 px-2 py-1 rounded-full text-[10px]",
+                g ? "bg-green-500/10 text-green-400" : "bg-white/5 text-white/30"
+              ), children: [
+                g ? /* @__PURE__ */ e(vt, { className: "w-3 h-3" }) : /* @__PURE__ */ e(kt, { className: "w-3 h-3" }),
+                g ? T === "zh" ? "播放中" : "Playing" : T === "zh" ? "已暂停" : "Paused"
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: I,
+                  className: "p-2 rounded-lg text-white/40 hover:text-white/70 hover:bg-white/5 transition-colors",
+                  children: /* @__PURE__ */ e(re, { className: "w-4 h-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ i("div", { className: "flex-1 relative min-h-0 bg-black", children: [
+            /* @__PURE__ */ e(
+              "canvas",
+              {
+                ref: K,
+                className: "w-full h-full",
+                style: { display: "block" }
+              }
+            ),
+            /* @__PURE__ */ i("div", { className: "absolute bottom-3 right-3 flex gap-1.5", children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: v,
+                  className: "p-2 rounded-lg bg-black/50 backdrop-blur-sm border border-white/10 text-white/50 hover:text-white hover:bg-black/70 transition-colors",
+                  title: T === "zh" ? "截图" : "Screenshot",
+                  children: /* @__PURE__ */ e(Ct, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: te,
+                  className: "p-2 rounded-lg bg-black/50 backdrop-blur-sm border border-white/10 text-white/50 hover:text-white hover:bg-black/70 transition-colors",
+                  title: T === "zh" ? "全屏" : "Fullscreen",
+                  children: /* @__PURE__ */ e(St, { className: "w-4 h-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "px-5 py-3 border-t border-white/[0.06] flex-shrink-0", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-4 flex-wrap", children: [
+            /* @__PURE__ */ e("div", { className: "flex items-center gap-1.5", children: De.map((h) => /* @__PURE__ */ i(
+              "button",
+              {
+                onClick: () => {
+                  U(h.id), N.current = [], S == null || S("selection");
+                },
+                className: y(
+                  "px-2.5 py-1.5 rounded-lg border text-[10px] transition-all flex items-center gap-1",
+                  f === h.id ? "bg-white/10 border-white/20 text-white" : "bg-white/[0.02] border-white/[0.06] text-white/30 hover:bg-white/[0.05] hover:text-white/50"
+                ),
+                children: [
+                  /* @__PURE__ */ e("span", { children: h.emoji }),
+                  /* @__PURE__ */ e("span", { className: "hidden sm:inline", children: T === "zh" ? h.labelZh : h.labelEn })
+                ]
+              },
+              h.id
+            )) }),
+            /* @__PURE__ */ e("div", { className: "flex-1" }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => D((h) => !h),
+                className: y(
+                  "px-2.5 py-1.5 rounded-lg border text-[10px] transition-all",
+                  F ? "bg-purple-500/15 border-purple-500/30 text-purple-300" : "bg-white/[0.02] border-white/[0.06] text-white/30"
+                ),
+                children: T === "zh" ? "歌词" : "Lyrics"
+              }
+            ),
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => B((h) => Math.max(0.2, h - 0.2)),
+                  className: "p-1 rounded text-white/30 hover:text-white/60 transition-colors",
+                  children: /* @__PURE__ */ e(Ie, { className: "w-3 h-3" })
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "w-16 h-1.5 rounded-full bg-white/10 overflow-hidden", children: /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "h-full rounded-full bg-gradient-to-r from-cyan-500 to-purple-500 transition-all",
+                  style: { width: `${Y * 100}%` }
+                }
+              ) }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => B((h) => Math.min(1, h + 0.2)),
+                  className: "p-1 rounded text-white/30 hover:text-white/60 transition-colors",
+                  children: /* @__PURE__ */ e(pe, { className: "w-3 h-3" })
+                }
+              )
+            ] })
+          ] }) })
+        ]
+      }
+    )
+  ] }) });
+};
+export {
+  Wt as AIAssistant,
+  Dt as AILyricsGenerator,
+  Gt as CreationStudio,
+  Et as MVCreator
+};
+//# sourceMappingURL=index.js.map