sa2kit 2.0.1 → 2.0.2

package/dist/mikuFusionGame/index.mjs

@@ -0,0 +1,1195 @@
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/mikuFusionGame/components/MikuFusionGame.tsx
+function useStorage(storage, key, defaultValue) {
+  const [value, setValue] = useState(defaultValue);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    const loadValue = async () => {
+      try {
+        const stored = await storage.getItem(key);
+        if (stored !== null) {
+          setValue(JSON.parse(stored));
+        }
+      } catch (error) {
+        console.error('Error reading storage key "' + key + '":', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    void loadValue();
+  }, [storage, key]);
+  const updateValue = useCallback(
+    async (newValue) => {
+      try {
+        setValue(newValue);
+        await storage.setItem(key, JSON.stringify(newValue));
+        if ("dispatchChange" in storage && typeof storage.dispatchChange === "function") {
+          storage.dispatchChange(key, JSON.stringify(newValue));
+        }
+      } catch (error) {
+        console.error('Error setting storage key "' + key + '":', error);
+      }
+    },
+    [storage, key]
+  );
+  const removeValue = useCallback(async () => {
+    try {
+      setValue(defaultValue);
+      await storage.removeItem(key);
+      if ("dispatchChange" in storage && typeof storage.dispatchChange === "function") {
+        storage.dispatchChange(key, null);
+      }
+    } catch (error) {
+      console.error('Error removing storage key "' + key + '":', error);
+    }
+  }, [storage, key, defaultValue]);
+  useEffect(() => {
+    if (!storage.addChangeListener) {
+      return;
+    }
+    const cleanup = storage.addChangeListener((changedKey, newValue) => {
+      if (changedKey === key) {
+        try {
+          if (newValue === null) {
+            setValue(defaultValue);
+          } else {
+            setValue(JSON.parse(newValue));
+          }
+        } catch (error) {
+          console.error("Error parsing storage change event:", error);
+        }
+      }
+    });
+    return cleanup;
+  }, [storage, key, defaultValue]);
+  return [value, updateValue, removeValue, loading];
+}
+
+// src/storage/adapters/web-adapter.ts
+var isBrowser = typeof window !== "undefined" && typeof window.localStorage !== "undefined";
+var WebStorageAdapter = class {
+  async getItem(key) {
+    if (!isBrowser) {
+      return null;
+    }
+    try {
+      return localStorage.getItem(key);
+    } catch (error) {
+      console.error('[WebStorage] Error getting item "' + key + '":', error);
+      return null;
+    }
+  }
+  async setItem(key, value) {
+    if (!isBrowser) {
+      return;
+    }
+    try {
+      localStorage.setItem(key, value);
+    } catch (error) {
+      console.error('[WebStorage] Error setting item "' + key + '":', error);
+      throw error;
+    }
+  }
+  async removeItem(key) {
+    if (!isBrowser) {
+      return;
+    }
+    try {
+      localStorage.removeItem(key);
+    } catch (error) {
+      console.error('[WebStorage] Error removing item "' + key + '":', error);
+      throw error;
+    }
+  }
+  async clear() {
+    if (!isBrowser) {
+      return;
+    }
+    try {
+      localStorage.clear();
+    } catch (error) {
+      console.error("[WebStorage] Error clearing storage:", error);
+      throw error;
+    }
+  }
+  addChangeListener(callback) {
+    if (!isBrowser) {
+      return () => {
+      };
+    }
+    const handleStorageEvent = (e) => {
+      if (e.key) {
+        callback(e.key, e.newValue);
+      }
+    };
+    const handleCustomEvent = (e) => {
+      const customEvent = e;
+      callback(customEvent.detail.key, customEvent.detail.value);
+    };
+    window.addEventListener("storage", handleStorageEvent);
+    window.addEventListener("local-storage-change", handleCustomEvent);
+    return () => {
+      window.removeEventListener("storage", handleStorageEvent);
+      window.removeEventListener("local-storage-change", handleCustomEvent);
+    };
+  }
+  /**
+   * 触发自定义事件，通知同标签页的其他组件
+   */
+  dispatchChange(key, value) {
+    if (!isBrowser) {
+      return;
+    }
+    window.dispatchEvent(
+      new CustomEvent("local-storage-change", {
+        detail: { key, value }
+      })
+    );
+  }
+};
+
+// src/storage/hooks/useLocalStorage.ts
+var webStorage = new WebStorageAdapter();
+function useLocalStorage(key, defaultValue) {
+  return useStorage(webStorage, key, defaultValue);
+}
+
+// src/logger/console-adapter.ts
+var ConsoleLoggerAdapter = class {
+  constructor() {
+    this.colors = {
+      DEBUG: "\x1B[36m",
+      // Cyan
+      INFO: "\x1B[32m",
+      // Green
+      WARN: "\x1B[33m",
+      // Yellow
+      ERROR: "\x1B[31m",
+      // Red
+      RESET: "\x1B[0m"
+    };
+  }
+  log(entry) {
+    const { level, message, timestamp, data, context, error } = entry;
+    let logMessage = "";
+    if (timestamp) {
+      logMessage += "[" + this.formatTimestamp(timestamp) + "] ";
+    }
+    const levelName = this.getLevelName(level);
+    logMessage += levelName + ": ";
+    if (context) {
+      logMessage += "[" + context + "] ";
+    }
+    logMessage += message;
+    switch (level) {
+      case 0:
+        console.debug(this.colorize(logMessage, "DEBUG"), data || "");
+        break;
+      case 1:
+        console.info(this.colorize(logMessage, "INFO"), data || "");
+        break;
+      case 2:
+        console.warn(this.colorize(logMessage, "WARN"), data || "");
+        break;
+      case 3:
+        console.error(this.colorize(logMessage, "ERROR"), data || "");
+        if (error) {
+          console.error(error);
+        }
+        break;
+    }
+  }
+  formatTimestamp(date) {
+    return date.toISOString();
+  }
+  getLevelName(level) {
+    const names = ["DEBUG", "INFO", "WARN", "ERROR", "NONE"];
+    return names[level] || "UNKNOWN";
+  }
+  colorize(message, level) {
+    if (typeof process !== "undefined" && process.stdout?.isTTY) {
+      return this.colors[level] + message + this.colors.RESET;
+    }
+    return message;
+  }
+};
+
+// src/logger/Logger.ts
+var Logger = class _Logger {
+  constructor(config, context) {
+    const isProduction = typeof process !== "undefined" ? process.env.NODE_ENV === "production" : false;
+    this.config = {
+      minLevel: config?.minLevel ?? (isProduction ? 1 : 0),
+      // INFO in prod, DEBUG in dev
+      enableTimestamp: config?.enableTimestamp ?? true,
+      enableContext: config?.enableContext ?? true,
+      environment: config?.environment ?? (isProduction ? "production" : "development"),
+      adapter: config?.adapter ?? new ConsoleLoggerAdapter()
+    };
+    this.adapter = this.config.adapter;
+    this.context = context;
+  }
+  /**
+   * 创建带上下文的子 Logger
+   */
+  createChild(context) {
+    return new _Logger(this.config, context);
+  }
+  /**
+   * 调试日志
+   */
+  debug(message, data) {
+    this.log(0, message, data);
+  }
+  /**
+   * 信息日志
+   */
+  info(message, data) {
+    this.log(1, message, data);
+  }
+  /**
+   * 警告日志
+   */
+  warn(message, data) {
+    this.log(2, message, data);
+  }
+  /**
+   * 错误日志
+   */
+  error(message, error) {
+    this.log(
+      3,
+      // LogLevel.ERROR
+      message,
+      error instanceof Error ? void 0 : error,
+      error instanceof Error ? error : void 0
+    );
+  }
+  /**
+   * 核心日志方法
+   */
+  log(level, message, data, error) {
+    if (level < this.config.minLevel) {
+      return;
+    }
+    if (typeof window !== "undefined" && typeof localStorage !== "undefined") {
+      const loggerDebug = localStorage.getItem("logger-debug");
+      if (loggerDebug === "false" && level < 3) {
+        return;
+      }
+    }
+    const entry = {
+      level,
+      message,
+      timestamp: this.config.enableTimestamp ? /* @__PURE__ */ new Date() : void 0,
+      data,
+      context: this.config.enableContext ? this.context : void 0,
+      error
+    };
+    this.adapter.log(entry);
+  }
+  /**
+   * 设置日志级别
+   */
+  setLevel(level) {
+    this.config.minLevel = level;
+  }
+  /**
+   * 获取当前日志级别
+   */
+  getLevel() {
+    return this.config.minLevel;
+  }
+};
+new Logger();
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ImageMappingPanel.tsx
+function ImageMappingPanel({
+  title,
+  items,
+  value,
+  onChange,
+  className,
+  uploadLabel = "\u4E0A\u4F20\u56FE\u7247",
+  clearLabel = "\u6E05\u9664"
+}) {
+  const handleFileChange = (id, file) => {
+    if (!file) {
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64 = typeof reader.result === "string" ? reader.result : "";
+      if (!base64) {
+        return;
+      }
+      onChange({
+        ...value,
+        [id]: base64
+      });
+    };
+    reader.readAsDataURL(file);
+  };
+  const handleRemove = (id) => {
+    const next = { ...value };
+    delete next[id];
+    onChange(next);
+  };
+  return /* @__PURE__ */ React.createElement("details", { className: cn("rounded-lg border border-slate-200 bg-white/80 p-3", className) }, /* @__PURE__ */ React.createElement("summary", { className: "cursor-pointer text-sm font-semibold text-slate-700" }, title), /* @__PURE__ */ React.createElement("div", { className: "mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2" }, items.map((item) => {
+    const image = value[item.id];
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: item.id,
+        className: "flex items-center gap-2 rounded-md border border-slate-200 bg-white p-2"
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "w-16 text-xs font-semibold text-slate-600" }, item.label),
+      /* @__PURE__ */ React.createElement("label", { className: "flex-1 cursor-pointer rounded-md bg-cyan-600 px-2 py-1 text-center text-xs font-medium text-white" }, uploadLabel, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "file",
+          accept: "image/*",
+          className: "hidden",
+          onChange: (event) => {
+            handleFileChange(item.id, event.target.files?.[0]);
+            event.currentTarget.value = "";
+          }
+        }
+      )),
+      image ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: image,
+          alt: item.label,
+          className: "h-8 w-8 rounded-full border border-slate-200 object-cover"
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "rounded-md border border-red-200 px-2 py-1 text-xs text-red-600",
+          onClick: () => handleRemove(item.id)
+        },
+        clearLabel
+      )) : null
+    );
+  })));
+}
+
+// src/components/LocalImageMappingPanel.tsx
+function LocalImageMappingPanel({
+  storageKey,
+  defaultValue = {},
+  onValueChange,
+  ...panelProps
+}) {
+  const [value, setValue] = useLocalStorage(storageKey, defaultValue);
+  return /* @__PURE__ */ React.createElement(
+    ImageMappingPanel,
+    {
+      ...panelProps,
+      value,
+      onChange: (next) => {
+        setValue(next);
+        onValueChange?.(next);
+      }
+    }
+  );
+}
+
+// src/mikuFusionGame/constants.ts
+var BASE_RADIUS = 22;
+var RADIUS_STEP = 4;
+var LEVEL_LABEL_PREFIX = "M";
+var DEFAULT_MIKU_FUSION_CONFIG = {
+  width: 390,
+  height: 700,
+  gravity: 1450,
+  damping: 0.995,
+  collisionDamping: 0.92,
+  spawnY: 82,
+  lossLineY: 132,
+  maxLevel: 10,
+  maxOrbs: 90,
+  maxMergesPerTick: 6,
+  gameOverAgeThreshold: 1.1,
+  spawnWeights: [0.62, 0.28, 0.1],
+  theme: {
+    backgroundTop: "#dafaff",
+    backgroundBottom: "#86e5ef",
+    aimLine: "#14b8a6",
+    lossLine: "#ef4444",
+    orbColors: [
+      "#67e8f9",
+      "#22d3ee",
+      "#2dd4bf",
+      "#5eead4",
+      "#34d399",
+      "#a7f3d0",
+      "#99f6e4",
+      "#0ea5e9",
+      "#06b6d4",
+      "#14b8a6"
+    ]
+  }
+};
+
+// src/mikuFusionGame/engine/collision.ts
+function resolveCircleCollisions(orbs, config) {
+  const next = orbs.map((orb) => ({ ...orb }));
+  for (let i = 0; i < next.length; i += 1) {
+    for (let j = i + 1; j < next.length; j += 1) {
+      const a = next[i];
+      const b = next[j];
+      const dx = b.x - a.x;
+      const dy = b.y - a.y;
+      const distance = Math.sqrt(dx * dx + dy * dy) || 1e-4;
+      const minDistance = a.radius + b.radius;
+      if (distance >= minDistance) {
+        continue;
+      }
+      const nx = dx / distance;
+      const ny = dy / distance;
+      const overlap = minDistance - distance;
+      a.x -= nx * overlap * 0.5;
+      a.y -= ny * overlap * 0.5;
+      b.x += nx * overlap * 0.5;
+      b.y += ny * overlap * 0.5;
+      const rvx = b.vx - a.vx;
+      const rvy = b.vy - a.vy;
+      const velocityAlongNormal = rvx * nx + rvy * ny;
+      if (velocityAlongNormal > 0) {
+        continue;
+      }
+      const restitution = config.collisionDamping;
+      const impulse = -(1 + restitution) * velocityAlongNormal / 2;
+      const impulseX = impulse * nx;
+      const impulseY = impulse * ny;
+      a.vx -= impulseX;
+      a.vy -= impulseY;
+      b.vx += impulseX;
+      b.vy += impulseY;
+    }
+  }
+  return next;
+}
+
+// src/mikuFusionGame/engine/scoring.ts
+function getMergeScore(newLevel, chainIndex) {
+  const base = 10 * Math.max(1, newLevel) * Math.max(1, newLevel);
+  const chainMultiplier = 1 + Math.max(0, chainIndex - 1) * 0.15;
+  return Math.round(base * chainMultiplier);
+}
+
+// src/mikuFusionGame/engine/physics.ts
+function getRadiusByLevel(level) {
+  return BASE_RADIUS + (Math.max(1, level) - 1) * RADIUS_STEP;
+}
+function stepPhysics(orbs, config, dt) {
+  return orbs.map((orb) => {
+    const next = { ...orb };
+    next.vy += config.gravity * dt;
+    next.vx *= config.damping;
+    next.vy *= config.damping;
+    next.x += next.vx * dt;
+    next.y += next.vy * dt;
+    next.age += dt;
+    if (next.x - next.radius < 0) {
+      next.x = next.radius;
+      next.vx = Math.abs(next.vx) * config.collisionDamping;
+    } else if (next.x + next.radius > config.width) {
+      next.x = config.width - next.radius;
+      next.vx = -Math.abs(next.vx) * config.collisionDamping;
+    }
+    if (next.y + next.radius > config.height) {
+      next.y = config.height - next.radius;
+      next.vy = -Math.abs(next.vy) * config.collisionDamping;
+    }
+    return next;
+  });
+}
+
+// src/mikuFusionGame/engine/merge.ts
+function canMerge(a, b, config) {
+  if (a.level !== b.level) {
+    return false;
+  }
+  if (a.level >= config.maxLevel) {
+    return false;
+  }
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const distance = Math.sqrt(dx * dx + dy * dy);
+  const threshold = a.radius + b.radius + 0.75;
+  return distance <= threshold;
+}
+function mergeSameLevelOrbs(orbs, config) {
+  const mergedIds = /* @__PURE__ */ new Set();
+  const spawned = [];
+  let scoreGain = 0;
+  let chainIndex = 0;
+  for (let i = 0; i < orbs.length; i += 1) {
+    if (mergedIds.has(orbs[i].id)) {
+      continue;
+    }
+    for (let j = i + 1; j < orbs.length; j += 1) {
+      if (mergedIds.has(orbs[j].id)) {
+        continue;
+      }
+      const a = orbs[i];
+      const b = orbs[j];
+      if (!canMerge(a, b, config)) {
+        continue;
+      }
+      mergedIds.add(a.id);
+      mergedIds.add(b.id);
+      chainIndex += 1;
+      const nextLevel = Math.min(config.maxLevel, a.level + 1);
+      const mergedOrb = {
+        id: `orb-${a.id}-${b.id}-${chainIndex}`,
+        x: (a.x + b.x) / 2,
+        y: (a.y + b.y) / 2,
+        vx: (a.vx + b.vx) / 2 * 0.4,
+        vy: (a.vy + b.vy) / 2 * 0.4,
+        radius: getRadiusByLevel(nextLevel),
+        level: nextLevel,
+        age: Math.min(a.age, b.age)
+      };
+      spawned.push(mergedOrb);
+      scoreGain += getMergeScore(nextLevel, chainIndex);
+      if (chainIndex >= config.maxMergesPerTick) {
+        break;
+      }
+    }
+    if (chainIndex >= config.maxMergesPerTick) {
+      break;
+    }
+  }
+  if (mergedIds.size === 0) {
+    return {
+      orbs,
+      scoreGain: 0,
+      mergeCount: 0
+    };
+  }
+  const survivors = orbs.filter((orb) => !mergedIds.has(orb.id));
+  const mergedOrbs = survivors.concat(spawned);
+  return {
+    orbs: mergedOrbs,
+    scoreGain,
+    mergeCount: chainIndex
+  };
+}
+
+// src/mikuFusionGame/engine/stateMachine.ts
+var ALLOWED_TRANSITIONS = {
+  ready: ["playing"],
+  playing: ["paused", "gameOver", "ready"],
+  paused: ["playing", "ready"],
+  gameOver: ["ready", "playing"]
+};
+function canTransition(from, to) {
+  return ALLOWED_TRANSITIONS[from].includes(to);
+}
+
+// src/mikuFusionGame/hooks/useMikuFusionGame.ts
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function nextOrbLevel(weights) {
+  const random = Math.random();
+  let cumulative = 0;
+  for (let i = 0; i < weights.length; i += 1) {
+    cumulative += weights[i] ?? 0;
+    if (random <= cumulative) {
+      return i + 1;
+    }
+  }
+  return Math.max(1, weights.length);
+}
+function getOrbColor(level, config) {
+  const index = Math.max(0, Math.min(config.theme.orbColors.length - 1, level - 1));
+  return config.theme.orbColors[index] || "#22d3ee";
+}
+function drawScene(context, width, height, config, orbs, aimX, nextLevel, status, imageCache) {
+  const gradient = context.createLinearGradient(0, 0, 0, height);
+  gradient.addColorStop(0, config.theme.backgroundTop);
+  gradient.addColorStop(1, config.theme.backgroundBottom);
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, width, height);
+  context.lineWidth = 2;
+  context.strokeStyle = config.theme.lossLine;
+  context.setLineDash([6, 6]);
+  context.beginPath();
+  context.moveTo(0, config.lossLineY);
+  context.lineTo(width, config.lossLineY);
+  context.stroke();
+  context.setLineDash([]);
+  context.strokeStyle = config.theme.aimLine;
+  context.lineWidth = 1.5;
+  context.beginPath();
+  context.moveTo(aimX, 0);
+  context.lineTo(aimX, config.spawnY);
+  context.stroke();
+  const previewRadius = getRadiusByLevel(nextLevel);
+  const previewY = config.spawnY - previewRadius - 4;
+  const previewImage = imageCache[nextLevel];
+  context.beginPath();
+  context.arc(aimX, previewY, previewRadius, 0, Math.PI * 2);
+  context.closePath();
+  if (previewImage && previewImage.complete && previewImage.naturalWidth > 0) {
+    context.save();
+    context.clip();
+    context.drawImage(
+      previewImage,
+      aimX - previewRadius,
+      previewY - previewRadius,
+      previewRadius * 2,
+      previewRadius * 2
+    );
+    context.restore();
+  } else {
+    context.fillStyle = getOrbColor(nextLevel, config);
+    context.fill();
+  }
+  orbs.forEach((orb) => {
+    context.beginPath();
+    context.arc(orb.x, orb.y, orb.radius, 0, Math.PI * 2);
+    context.closePath();
+    const orbImage = imageCache[orb.level];
+    if (orbImage && orbImage.complete && orbImage.naturalWidth > 0) {
+      context.save();
+      context.clip();
+      context.drawImage(
+        orbImage,
+        orb.x - orb.radius,
+        orb.y - orb.radius,
+        orb.radius * 2,
+        orb.radius * 2
+      );
+      context.restore();
+      context.beginPath();
+      context.strokeStyle = "rgba(15, 23, 42, 0.15)";
+      context.lineWidth = 1;
+      context.arc(orb.x, orb.y, orb.radius, 0, Math.PI * 2);
+      context.stroke();
+    } else {
+      context.fillStyle = getOrbColor(orb.level, config);
+      context.fill();
+    }
+    context.fillStyle = "#0f172a";
+    context.font = "bold 12px system-ui";
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.fillText(`${LEVEL_LABEL_PREFIX}${orb.level}`, orb.x, orb.y);
+  });
+  if (status === "paused") {
+    context.fillStyle = "rgba(15, 23, 42, 0.5)";
+    context.fillRect(0, 0, width, height);
+    context.fillStyle = "#ffffff";
+    context.font = "bold 30px system-ui";
+    context.textAlign = "center";
+    context.fillText("Paused", width / 2, height / 2);
+  }
+}
+function normalizeConfig(config) {
+  const mergedTheme = {
+    ...DEFAULT_MIKU_FUSION_CONFIG.theme,
+    ...config?.theme ?? {}
+  };
+  const merged = {
+    ...DEFAULT_MIKU_FUSION_CONFIG,
+    ...config ?? {},
+    theme: mergedTheme
+  };
+  const totalWeight = merged.spawnWeights.reduce((sum, current) => sum + current, 0);
+  if (totalWeight <= 0) {
+    merged.spawnWeights = [...DEFAULT_MIKU_FUSION_CONFIG.spawnWeights];
+  } else if (Math.abs(totalWeight - 1) > 1e-3) {
+    merged.spawnWeights = merged.spawnWeights.map((weight) => weight / totalWeight);
+  }
+  return merged;
+}
+function useMikuFusionGame(options = {}) {
+  const configRef = useRef(normalizeConfig(options));
+  const config = configRef.current;
+  const onScoreChangeRef = useRef(options.onScoreChange);
+  const onGameOverRef = useRef(options.onGameOver);
+  const orbImageMappingRef = useRef(options.orbImageMapping ?? {});
+  const imageCacheRef = useRef({});
+  useEffect(() => {
+    onScoreChangeRef.current = options.onScoreChange;
+    onGameOverRef.current = options.onGameOver;
+  }, [options.onGameOver, options.onScoreChange]);
+  useEffect(() => {
+    orbImageMappingRef.current = options.orbImageMapping ?? {};
+    const nextCache = {};
+    Object.entries(orbImageMappingRef.current).forEach(([levelText, src]) => {
+      const level = Number(levelText);
+      if (!src || Number.isNaN(level)) {
+        return;
+      }
+      const image = new window.Image();
+      image.src = src;
+      nextCache[level] = image;
+    });
+    imageCacheRef.current = nextCache;
+  }, [options.orbImageMapping]);
+  const [bestScore, setBestScore] = useLocalStorage(
+    options.storageKey || "sa2kit:mikuFusionGame:bestScore",
+    0
+  );
+  const canvasRef = useRef(null);
+  const rafRef = useRef(null);
+  const lastTsRef = useRef(0);
+  const idRef = useRef(0);
+  const orbsRef = useRef([]);
+  const aimXRef = useRef(config.width / 2);
+  const scoreRef = useRef(0);
+  const [status, setStatus] = useState("ready");
+  const [score, setScore] = useState(0);
+  const [nextLevel, setNextLevel] = useState(() => nextOrbLevel(config.spawnWeights));
+  const draw = useCallback(
+    (nextStatus = status) => {
+      const canvas = canvasRef.current;
+      if (!canvas) {
+        return;
+      }
+      const context = canvas.getContext("2d");
+      if (!context) {
+        return;
+      }
+      drawScene(
+        context,
+        config.width,
+        config.height,
+        config,
+        orbsRef.current,
+        aimXRef.current,
+        nextLevel,
+        nextStatus,
+        imageCacheRef.current
+      );
+    },
+    [config, nextLevel, status]
+  );
+  const transitionStatus = useCallback((nextStatus) => {
+    setStatus((previous) => canTransition(previous, nextStatus) ? nextStatus : previous);
+  }, []);
+  const spawnOrb = useCallback(() => {
+    if (status === "paused" || status === "gameOver") {
+      return;
+    }
+    if (status === "ready") {
+      transitionStatus("playing");
+    }
+    idRef.current += 1;
+    const radius = getRadiusByLevel(nextLevel);
+    const x = clamp(aimXRef.current, radius, config.width - radius);
+    const created = {
+      id: `${idRef.current}`,
+      x,
+      y: config.spawnY,
+      vx: 0,
+      vy: 0,
+      radius,
+      level: nextLevel,
+      age: 0
+    };
+    const nextOrbs = orbsRef.current.concat(created);
+    orbsRef.current = nextOrbs.slice(-config.maxOrbs);
+    setNextLevel(nextOrbLevel(config.spawnWeights));
+  }, [config, nextLevel, status, transitionStatus]);
+  const restart = useCallback(() => {
+    orbsRef.current = [];
+    scoreRef.current = 0;
+    setScore(0);
+    setNextLevel(nextOrbLevel(config.spawnWeights));
+    transitionStatus("ready");
+    draw("ready");
+  }, [config.spawnWeights, draw, transitionStatus]);
+  const togglePause = useCallback(() => {
+    setStatus((previous) => {
+      if (previous === "playing" && canTransition(previous, "paused")) {
+        return "paused";
+      }
+      if (previous === "paused" && canTransition(previous, "playing")) {
+        return "playing";
+      }
+      return previous;
+    });
+  }, []);
+  const setAimFromClientX = useCallback((clientX, rect) => {
+    const ratio = config.width / rect.width;
+    const x = (clientX - rect.left) * ratio;
+    aimXRef.current = clamp(x, 0, config.width);
+  }, [config.width]);
+  const handleDrop = useCallback(
+    (clientX, rect) => {
+      setAimFromClientX(clientX, rect);
+      spawnOrb();
+    },
+    [setAimFromClientX, spawnOrb]
+  );
+  useEffect(() => {
+    draw(status);
+  }, [draw, status]);
+  useEffect(() => {
+    if (status !== "playing") {
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current);
+      }
+      lastTsRef.current = 0;
+      draw(status);
+      return;
+    }
+    const frame = (timestamp) => {
+      if (lastTsRef.current === 0) {
+        lastTsRef.current = timestamp;
+      }
+      const dt = Math.min((timestamp - lastTsRef.current) / 1e3, 0.033);
+      lastTsRef.current = timestamp;
+      let orbs = stepPhysics(orbsRef.current, config, dt);
+      orbs = resolveCircleCollisions(orbs, config);
+      const merged = mergeSameLevelOrbs(orbs, config);
+      orbs = merged.orbs;
+      orbsRef.current = orbs.slice(-config.maxOrbs);
+      if (merged.scoreGain > 0) {
+        scoreRef.current += merged.scoreGain;
+        setScore(scoreRef.current);
+        onScoreChangeRef.current?.(scoreRef.current);
+      }
+      const gameOver = orbs.some(
+        (orb) => orb.age > config.gameOverAgeThreshold && orb.y - orb.radius <= config.lossLineY && Math.abs(orb.vy) < 90
+      );
+      if (gameOver) {
+        transitionStatus("gameOver");
+        const latestBest = Math.max(bestScore, scoreRef.current);
+        if (latestBest !== bestScore) {
+          setBestScore(latestBest);
+        }
+        onGameOverRef.current?.(scoreRef.current, latestBest);
+        draw("gameOver");
+        return;
+      }
+      draw("playing");
+      rafRef.current = window.requestAnimationFrame(frame);
+    };
+    rafRef.current = window.requestAnimationFrame(frame);
+    return () => {
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, [
+    bestScore,
+    config,
+    draw,
+    setBestScore,
+    status,
+    transitionStatus
+  ]);
+  useEffect(() => {
+    if (score > bestScore) {
+      setBestScore(score);
+    }
+  }, [bestScore, score, setBestScore]);
+  return {
+    canvasRef,
+    status,
+    score,
+    bestScore: Math.max(bestScore, score),
+    nextLevel,
+    config,
+    setAimFromClientX,
+    handleDrop,
+    togglePause,
+    restart
+  };
+}
+function useResponsiveCanvas(logicalWidth, logicalHeight, containerRef) {
+  const [size, setSize] = useState({
+    displayWidth: logicalWidth,
+    displayHeight: logicalHeight,
+    scale: 1
+  });
+  useEffect(() => {
+    const updateSize = () => {
+      const container2 = containerRef.current;
+      if (!container2 || typeof window === "undefined") {
+        return;
+      }
+      const rect = container2.getBoundingClientRect();
+      const maxWidth = Math.max(280, rect.width);
+      const maxHeight = Math.max(420, Math.floor(window.innerHeight * 0.78));
+      const scale = Math.min(maxWidth / logicalWidth, maxHeight / logicalHeight, 1);
+      setSize({
+        displayWidth: Math.floor(logicalWidth * scale),
+        displayHeight: Math.floor(logicalHeight * scale),
+        scale
+      });
+    };
+    updateSize();
+    const container = containerRef.current;
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateSize) : null;
+    if (container && observer) {
+      observer.observe(container);
+    }
+    window.addEventListener("resize", updateSize);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", updateSize);
+    };
+  }, [containerRef, logicalWidth, logicalHeight]);
+  return size;
+}
+function GameCanvas({
+  canvasRef,
+  width,
+  height,
+  displayWidth,
+  displayHeight,
+  onPointerMove,
+  onPointerDown,
+  onPointerUp
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "canvas",
+    {
+      ref: canvasRef,
+      width,
+      height,
+      className: "rounded-xl border border-cyan-200 bg-cyan-50 shadow-sm",
+      style: {
+        width: `${displayWidth}px`,
+        height: `${displayHeight}px`,
+        maxWidth: "100%",
+        touchAction: "none"
+      },
+      onPointerMove,
+      onPointerDown,
+      onPointerUp,
+      onContextMenu: (event) => event.preventDefault()
+    }
+  );
+}
+function GameControls({ isPaused, isPlaying, onTogglePause, onRestart }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rounded-lg bg-cyan-600 px-4 py-3 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
+      onClick: onTogglePause,
+      disabled: !isPlaying
+    },
+    isPaused ? "\u7EE7\u7EED" : "\u6682\u505C"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "rounded-lg bg-emerald-600 px-4 py-3 text-sm font-semibold text-white",
+      onClick: onRestart
+    },
+    "\u91CD\u5F00"
+  ));
+}
+function GameHUD({ score, bestScore, nextLevel, statusText }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-2 rounded-lg border border-cyan-200 bg-white/80 p-3" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-slate-500" }, "\u5F53\u524D\u5206\u6570"), /* @__PURE__ */ React.createElement("div", { className: "text-xl font-bold text-cyan-700" }, score), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-slate-500" }, "\u6700\u9AD8\u5206 ", bestScore)), /* @__PURE__ */ React.createElement("div", { className: "text-right" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-slate-500" }, "\u4E0B\u4E00\u4E2A"), /* @__PURE__ */ React.createElement("div", { className: "text-base font-semibold text-emerald-700" }, "M", nextLevel), /* @__PURE__ */ React.createElement("div", { className: "text-xs font-medium text-slate-600" }, statusText)));
+}
+function GameResultModal({ open, score, bestScore, onRestart }) {
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-slate-900/50 p-4" }, /* @__PURE__ */ React.createElement("div", { className: "pointer-events-auto w-full max-w-xs rounded-xl bg-white p-5 shadow-2xl" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-slate-900" }, "\u6E38\u620F\u7ED3\u675F"), /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-slate-600" }, "\u5F53\u524D\u5206\u6570\uFF1A", score), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-600" }, "\u6700\u9AD8\u5206\uFF1A", bestScore), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "mt-4 w-full rounded-lg bg-cyan-600 px-4 py-2 text-sm font-semibold text-white",
+      onClick: onRestart
+    },
+    "\u518D\u6765\u4E00\u5C40"
+  )));
+}
+
+// src/mikuFusionGame/components/MikuFusionGame.tsx
+function MikuFusionGame({
+  className,
+  storageKey,
+  orbImageStorageKey = "sa2kit:mikuFusionGame:orbImages",
+  enableImageConfigPanel = true,
+  presetOrbImageMapping = {},
+  ...options
+}) {
+  const containerRef = useRef(null);
+  const [orbImageMapping, setOrbImageMapping] = useState({});
+  const [isUserDefineMode] = useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+    const value = new URLSearchParams(window.location.search).get("userDefine");
+    return value === "true";
+  });
+  const activeOrbImageMapping = isUserDefineMode ? orbImageMapping : presetOrbImageMapping;
+  const {
+    canvasRef,
+    status,
+    score,
+    bestScore,
+    nextLevel,
+    config,
+    setAimFromClientX,
+    handleDrop,
+    togglePause,
+    restart
+  } = useMikuFusionGame({ ...options, storageKey, orbImageMapping: activeOrbImageMapping });
+  const panelItems = useMemo(
+    () => Array.from({ length: config.maxLevel }, (_, index) => ({
+      id: String(index + 1),
+      label: `M${index + 1}`
+    })),
+    [config.maxLevel]
+  );
+  const panelValue = useMemo(
+    () => Object.entries(orbImageMapping).reduce((acc, [key, value]) => {
+      if (value) {
+        acc[String(key)] = value;
+      }
+      return acc;
+    }, {}),
+    [orbImageMapping]
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    try {
+      const raw = window.localStorage.getItem(orbImageStorageKey);
+      if (!raw) {
+        setOrbImageMapping({});
+        return;
+      }
+      const parsed = JSON.parse(raw);
+      const normalized = {};
+      Object.entries(parsed).forEach(([key, value]) => {
+        const level = Number(key);
+        if (!Number.isNaN(level) && typeof value === "string" && value) {
+          normalized[level] = value;
+        }
+      });
+      setOrbImageMapping(normalized);
+    } catch {
+      setOrbImageMapping({});
+    }
+  }, [orbImageStorageKey]);
+  const { displayWidth, displayHeight } = useResponsiveCanvas(
+    config.width,
+    config.height,
+    containerRef
+  );
+  const statusText = useMemo(() => {
+    if (status === "ready") {
+      return "\u5F85\u5F00\u59CB";
+    }
+    if (status === "playing") {
+      return "\u8FDB\u884C\u4E2D";
+    }
+    if (status === "paused") {
+      return "\u5DF2\u6682\u505C";
+    }
+    return "\u5DF2\u7ED3\u675F";
+  }, [status]);
+  const handlePointerMove = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    setAimFromClientX(event.clientX, rect);
+  };
+  const handlePointerDown = (event) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const rect = event.currentTarget.getBoundingClientRect();
+    setAimFromClientX(event.clientX, rect);
+  };
+  const handlePointerUp = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    handleDrop(event.clientX, rect);
+    event.currentTarget.releasePointerCapture(event.pointerId);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key.toLowerCase() === "r") {
+      restart();
+    }
+    if (event.key.toLowerCase() === "p") {
+      togglePause();
+    }
+  };
+  const handlePanelValueChange = (next) => {
+    const normalized = {};
+    Object.entries(next).forEach(([key, value]) => {
+      const level = Number(key);
+      if (!Number.isNaN(level) && value) {
+        normalized[level] = value;
+      }
+    });
+    setOrbImageMapping(normalized);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: containerRef,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      className: `relative mx-auto flex w-full max-w-xl flex-col gap-3 p-3 md:p-4 ${className || ""}`,
+      style: {
+        paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))"
+      }
+    },
+    /* @__PURE__ */ React.createElement(GameHUD, { score, bestScore, nextLevel, statusText }),
+    /* @__PURE__ */ React.createElement("div", { className: "relative mx-auto" }, /* @__PURE__ */ React.createElement(
+      GameCanvas,
+      {
+        canvasRef,
+        width: config.width,
+        height: config.height,
+        displayWidth,
+        displayHeight,
+        onPointerMove: handlePointerMove,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp
+      }
+    ), /* @__PURE__ */ React.createElement(GameResultModal, { open: status === "gameOver", score, bestScore, onRestart: restart })),
+    /* @__PURE__ */ React.createElement(
+      GameControls,
+      {
+        isPaused: status === "paused",
+        isPlaying: status === "playing" || status === "paused",
+        onTogglePause: togglePause,
+        onRestart: restart
+      }
+    ),
+    enableImageConfigPanel && isUserDefineMode ? /* @__PURE__ */ React.createElement(
+      LocalImageMappingPanel,
+      {
+        storageKey: orbImageStorageKey,
+        title: "\u7403\u4F53\u56FE\u7247\u914D\u7F6E\uFF08\u4FDD\u5B58\u5230\u672C\u5730\uFF09",
+        items: panelItems,
+        defaultValue: panelValue,
+        onValueChange: handlePanelValueChange
+      }
+    ) : null
+  );
+}
+
+// src/mikuFusionGame/content/index.ts
+var defaultContentRegistry = {
+  producers: [],
+  songs: [],
+  themes: []
+};
+
+export { BASE_RADIUS, DEFAULT_MIKU_FUSION_CONFIG, LEVEL_LABEL_PREFIX, MikuFusionGame, RADIUS_STEP, defaultContentRegistry, useMikuFusionGame, useResponsiveCanvas };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map