sa2kit 1.6.33 → 1.6.34

package/dist/mikuFireworks3D/index.d.mts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import React__default from 'react';
+
+type FireworkKind = 'normal' | 'miku' | 'avatar';
+interface DanmakuMessage {
+    id: string;
+    userId?: string;
+    text: string;
+    color?: string;
+    timestamp: number;
+}
+interface FireworkPosition {
+    x: number;
+    y: number;
+    z: number;
+}
+interface FireworkLaunchPayload {
+    kind: FireworkKind;
+    position?: FireworkPosition;
+    color?: string;
+    avatarUrl?: string;
+    message?: DanmakuMessage;
+}
+interface FireworkEngineOptions {
+    maxParticles?: number;
+    maxActiveFireworks?: number;
+    onError?: (error: Error) => void;
+    onFpsReport?: (fps: number) => void;
+}
+interface MikuFireworks3DProps {
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    defaultKind?: FireworkKind;
+    autoLaunchOnDanmaku?: boolean;
+    maxParticles?: number;
+    maxActiveFireworks?: number;
+    defaultAvatarUrl?: string;
+    onLaunch?: (payload: FireworkLaunchPayload) => void;
+    onDanmakuSend?: (message: DanmakuMessage) => void;
+    onError?: (error: Error) => void;
+    onFpsReport?: (fps: number) => void;
+}
+interface DanmakuSendResult {
+    message: DanmakuMessage;
+    launchKind?: FireworkKind;
+}
+interface DanmakuControllerOptions {
+    onSend?: (message: DanmakuMessage) => void;
+}
+
+declare function MikuFireworks3D({ width, height, className, defaultKind, autoLaunchOnDanmaku, maxParticles, maxActiveFireworks, defaultAvatarUrl, onLaunch, onDanmakuSend, onError, onFpsReport, }: MikuFireworks3DProps): React__default.JSX.Element;
+
+interface FireworksCanvasProps {
+    canvasRef: React__default.RefObject<HTMLCanvasElement>;
+}
+declare function FireworksCanvas({ canvasRef }: FireworksCanvasProps): React__default.JSX.Element;
+
+interface FireworksControlPanelProps {
+    selectedKind: FireworkKind;
+    onKindChange: (kind: FireworkKind) => void;
+    autoLaunchOnDanmaku: boolean;
+    onAutoLaunchChange: (value: boolean) => void;
+    avatarUrl: string;
+    onAvatarUrlChange: (value: string) => void;
+    onLaunch: () => void;
+    fps: number;
+}
+declare function FireworksControlPanel({ selectedKind, onKindChange, autoLaunchOnDanmaku, onAutoLaunchChange, avatarUrl, onAvatarUrlChange, onLaunch, fps, }: FireworksControlPanelProps): React__default.JSX.Element;
+
+interface DanmakuPanelProps {
+    onSend: (text: string) => void;
+}
+declare function DanmakuPanel({ onSend }: DanmakuPanelProps): React__default.JSX.Element;
+
+interface UseFireworksEngineOptions extends FireworkEngineOptions {
+    onLaunch?: (payload: FireworkLaunchPayload) => void;
+}
+declare function useFireworksEngine(options?: UseFireworksEngineOptions): {
+    containerRef: React.RefObject<HTMLDivElement>;
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+    launch: (payload: FireworkLaunchPayload) => void;
+    fps: number;
+};
+
+interface DanmakuOverlayItem extends DanmakuMessage {
+    track: number;
+    durationMs: number;
+}
+declare function useDanmakuController(options?: DanmakuControllerOptions): {
+    items: DanmakuOverlayItem[];
+    send: (text: string, color?: string) => DanmakuSendResult | null;
+    removeItem: (id: string) => void;
+};
+
+declare const DEFAULT_MAX_PARTICLES = 5000;
+declare const DEFAULT_MAX_ACTIVE_FIREWORKS = 12;
+declare const FIREWORK_KIND_LABELS: Record<FireworkKind, string>;
+declare const MIKU_PALETTE: string[];
+declare const NORMAL_PALETTE: string[];
+declare const DANMAKU_MAX_LENGTH = 32;
+declare const DANMAKU_TRACK_COUNT = 8;
+
+export { DANMAKU_MAX_LENGTH, DANMAKU_TRACK_COUNT, DEFAULT_MAX_ACTIVE_FIREWORKS, DEFAULT_MAX_PARTICLES, type DanmakuControllerOptions, type DanmakuMessage, type DanmakuOverlayItem, DanmakuPanel, type DanmakuSendResult, FIREWORK_KIND_LABELS, type FireworkEngineOptions, type FireworkKind, type FireworkLaunchPayload, type FireworkPosition, FireworksCanvas, FireworksControlPanel, MIKU_PALETTE, MikuFireworks3D, type MikuFireworks3DProps, NORMAL_PALETTE, type UseFireworksEngineOptions, useDanmakuController, useFireworksEngine };

package/dist/mikuFireworks3D/index.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import React__default from 'react';
+
+type FireworkKind = 'normal' | 'miku' | 'avatar';
+interface DanmakuMessage {
+    id: string;
+    userId?: string;
+    text: string;
+    color?: string;
+    timestamp: number;
+}
+interface FireworkPosition {
+    x: number;
+    y: number;
+    z: number;
+}
+interface FireworkLaunchPayload {
+    kind: FireworkKind;
+    position?: FireworkPosition;
+    color?: string;
+    avatarUrl?: string;
+    message?: DanmakuMessage;
+}
+interface FireworkEngineOptions {
+    maxParticles?: number;
+    maxActiveFireworks?: number;
+    onError?: (error: Error) => void;
+    onFpsReport?: (fps: number) => void;
+}
+interface MikuFireworks3DProps {
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    defaultKind?: FireworkKind;
+    autoLaunchOnDanmaku?: boolean;
+    maxParticles?: number;
+    maxActiveFireworks?: number;
+    defaultAvatarUrl?: string;
+    onLaunch?: (payload: FireworkLaunchPayload) => void;
+    onDanmakuSend?: (message: DanmakuMessage) => void;
+    onError?: (error: Error) => void;
+    onFpsReport?: (fps: number) => void;
+}
+interface DanmakuSendResult {
+    message: DanmakuMessage;
+    launchKind?: FireworkKind;
+}
+interface DanmakuControllerOptions {
+    onSend?: (message: DanmakuMessage) => void;
+}
+
+declare function MikuFireworks3D({ width, height, className, defaultKind, autoLaunchOnDanmaku, maxParticles, maxActiveFireworks, defaultAvatarUrl, onLaunch, onDanmakuSend, onError, onFpsReport, }: MikuFireworks3DProps): React__default.JSX.Element;
+
+interface FireworksCanvasProps {
+    canvasRef: React__default.RefObject<HTMLCanvasElement>;
+}
+declare function FireworksCanvas({ canvasRef }: FireworksCanvasProps): React__default.JSX.Element;
+
+interface FireworksControlPanelProps {
+    selectedKind: FireworkKind;
+    onKindChange: (kind: FireworkKind) => void;
+    autoLaunchOnDanmaku: boolean;
+    onAutoLaunchChange: (value: boolean) => void;
+    avatarUrl: string;
+    onAvatarUrlChange: (value: string) => void;
+    onLaunch: () => void;
+    fps: number;
+}
+declare function FireworksControlPanel({ selectedKind, onKindChange, autoLaunchOnDanmaku, onAutoLaunchChange, avatarUrl, onAvatarUrlChange, onLaunch, fps, }: FireworksControlPanelProps): React__default.JSX.Element;
+
+interface DanmakuPanelProps {
+    onSend: (text: string) => void;
+}
+declare function DanmakuPanel({ onSend }: DanmakuPanelProps): React__default.JSX.Element;
+
+interface UseFireworksEngineOptions extends FireworkEngineOptions {
+    onLaunch?: (payload: FireworkLaunchPayload) => void;
+}
+declare function useFireworksEngine(options?: UseFireworksEngineOptions): {
+    containerRef: React.RefObject<HTMLDivElement>;
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+    launch: (payload: FireworkLaunchPayload) => void;
+    fps: number;
+};
+
+interface DanmakuOverlayItem extends DanmakuMessage {
+    track: number;
+    durationMs: number;
+}
+declare function useDanmakuController(options?: DanmakuControllerOptions): {
+    items: DanmakuOverlayItem[];
+    send: (text: string, color?: string) => DanmakuSendResult | null;
+    removeItem: (id: string) => void;
+};
+
+declare const DEFAULT_MAX_PARTICLES = 5000;
+declare const DEFAULT_MAX_ACTIVE_FIREWORKS = 12;
+declare const FIREWORK_KIND_LABELS: Record<FireworkKind, string>;
+declare const MIKU_PALETTE: string[];
+declare const NORMAL_PALETTE: string[];
+declare const DANMAKU_MAX_LENGTH = 32;
+declare const DANMAKU_TRACK_COUNT = 8;
+
+export { DANMAKU_MAX_LENGTH, DANMAKU_TRACK_COUNT, DEFAULT_MAX_ACTIVE_FIREWORKS, DEFAULT_MAX_PARTICLES, type DanmakuControllerOptions, type DanmakuMessage, type DanmakuOverlayItem, DanmakuPanel, type DanmakuSendResult, FIREWORK_KIND_LABELS, type FireworkEngineOptions, type FireworkKind, type FireworkLaunchPayload, type FireworkPosition, FireworksCanvas, FireworksControlPanel, MIKU_PALETTE, MikuFireworks3D, type MikuFireworks3DProps, NORMAL_PALETTE, type UseFireworksEngineOptions, useDanmakuController, useFireworksEngine };

package/dist/mikuFireworks3D/index.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var chunkB34YUZRL_js = require('../chunk-B34YUZRL.js');
+require('../chunk-DGUM43GV.js');
+
+
+
+Object.defineProperty(exports, "DANMAKU_MAX_LENGTH", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.DANMAKU_MAX_LENGTH; }
+});
+Object.defineProperty(exports, "DANMAKU_TRACK_COUNT", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.DANMAKU_TRACK_COUNT; }
+});
+Object.defineProperty(exports, "DEFAULT_MAX_ACTIVE_FIREWORKS", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.DEFAULT_MAX_ACTIVE_FIREWORKS; }
+});
+Object.defineProperty(exports, "DEFAULT_MAX_PARTICLES", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.DEFAULT_MAX_PARTICLES; }
+});
+Object.defineProperty(exports, "DanmakuPanel", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.DanmakuPanel; }
+});
+Object.defineProperty(exports, "FIREWORK_KIND_LABELS", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.FIREWORK_KIND_LABELS; }
+});
+Object.defineProperty(exports, "FireworksCanvas", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.FireworksCanvas; }
+});
+Object.defineProperty(exports, "FireworksControlPanel", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.FireworksControlPanel; }
+});
+Object.defineProperty(exports, "MIKU_PALETTE", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.MIKU_PALETTE; }
+});
+Object.defineProperty(exports, "MikuFireworks3D", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.MikuFireworks3D; }
+});
+Object.defineProperty(exports, "NORMAL_PALETTE", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.NORMAL_PALETTE; }
+});
+Object.defineProperty(exports, "useDanmakuController", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.useDanmakuController; }
+});
+Object.defineProperty(exports, "useFireworksEngine", {
+  enumerable: true,
+  get: function () { return chunkB34YUZRL_js.useFireworksEngine; }
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/mikuFireworks3D/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/mikuFireworks3D/index.mjs

@@ -0,0 +1,4 @@
+export { DANMAKU_MAX_LENGTH, DANMAKU_TRACK_COUNT, DEFAULT_MAX_ACTIVE_FIREWORKS, DEFAULT_MAX_PARTICLES, DanmakuPanel, FIREWORK_KIND_LABELS, FireworksCanvas, FireworksControlPanel, MIKU_PALETTE, MikuFireworks3D, NORMAL_PALETTE, useDanmakuController, useFireworksEngine } from '../chunk-HQ7VHIEK.mjs';
+import '../chunk-BJTO5JO5.mjs';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/mikuFireworks3D/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}

package/dist/mikuFusionGame/index.d.mts

@@ -1,6 +1,7 @@
 import React__default, { RefObject } from 'react';
 
 type MikuFusionGameStatus = 'ready' | 'playing' | 'paused' | 'gameOver';
+type OrbImageMapping = Partial<Record<number, string>>;
 interface FusionOrb {
     id: string;
     x: number;
@@ -46,11 +47,15 @@ interface MergeResult {
 interface MikuFusionGameProps extends Partial<MikuFusionGameConfig>, MikuFusionGameCallbacks {
     className?: string;
     storageKey?: string;
+    orbImageStorageKey?: string;
+    enableImageConfigPanel?: boolean;
+    presetOrbImageMapping?: OrbImageMapping;
 }
-declare function MikuFusionGame({ className, storageKey, ...options }: MikuFusionGameProps): React__default.JSX.Element;
+declare function MikuFusionGame({ className, storageKey, orbImageStorageKey, enableImageConfigPanel, presetOrbImageMapping, ...options }: MikuFusionGameProps): React__default.JSX.Element;
 
 interface UseMikuFusionGameOptions extends Partial<MikuFusionGameConfig>, MikuFusionGameCallbacks {
     storageKey?: string;
+    orbImageMapping?: OrbImageMapping;
 }
 interface UseMikuFusionGameResult {
     canvasRef: RefObject<HTMLCanvasElement>;
@@ -109,4 +114,4 @@ declare const RADIUS_STEP = 4;
 declare const LEVEL_LABEL_PREFIX = "M";
 declare const DEFAULT_MIKU_FUSION_CONFIG: MikuFusionGameConfig;
 
-export { BASE_RADIUS, DEFAULT_MIKU_FUSION_CONFIG, type FusionOrb, LEVEL_LABEL_PREFIX, type MergeResult, type MikuFusionContentRegistry, MikuFusionGame, type MikuFusionGameCallbacks, type MikuFusionGameConfig, type MikuFusionGameProps, type MikuFusionGameStatus, type MikuFusionTheme, type ProducerPack, RADIUS_STEP, type SongPack, type ThemePack, type UseMikuFusionGameOptions, type UseMikuFusionGameResult, defaultContentRegistry, useMikuFusionGame, useResponsiveCanvas };
+export { BASE_RADIUS, DEFAULT_MIKU_FUSION_CONFIG, type FusionOrb, LEVEL_LABEL_PREFIX, type MergeResult, type MikuFusionContentRegistry, MikuFusionGame, type MikuFusionGameCallbacks, type MikuFusionGameConfig, type MikuFusionGameProps, type MikuFusionGameStatus, type MikuFusionTheme, type OrbImageMapping, type ProducerPack, RADIUS_STEP, type SongPack, type ThemePack, type UseMikuFusionGameOptions, type UseMikuFusionGameResult, defaultContentRegistry, useMikuFusionGame, useResponsiveCanvas };

package/dist/mikuFusionGame/index.d.ts

@@ -1,6 +1,7 @@
 import React__default, { RefObject } from 'react';
 
 type MikuFusionGameStatus = 'ready' | 'playing' | 'paused' | 'gameOver';
+type OrbImageMapping = Partial<Record<number, string>>;
 interface FusionOrb {
     id: string;
     x: number;
@@ -46,11 +47,15 @@ interface MergeResult {
 interface MikuFusionGameProps extends Partial<MikuFusionGameConfig>, MikuFusionGameCallbacks {
     className?: string;
     storageKey?: string;
+    orbImageStorageKey?: string;
+    enableImageConfigPanel?: boolean;
+    presetOrbImageMapping?: OrbImageMapping;
 }
-declare function MikuFusionGame({ className, storageKey, ...options }: MikuFusionGameProps): React__default.JSX.Element;
+declare function MikuFusionGame({ className, storageKey, orbImageStorageKey, enableImageConfigPanel, presetOrbImageMapping, ...options }: MikuFusionGameProps): React__default.JSX.Element;
 
 interface UseMikuFusionGameOptions extends Partial<MikuFusionGameConfig>, MikuFusionGameCallbacks {
     storageKey?: string;
+    orbImageMapping?: OrbImageMapping;
 }
 interface UseMikuFusionGameResult {
     canvasRef: RefObject<HTMLCanvasElement>;
@@ -109,4 +114,4 @@ declare const RADIUS_STEP = 4;
 declare const LEVEL_LABEL_PREFIX = "M";
 declare const DEFAULT_MIKU_FUSION_CONFIG: MikuFusionGameConfig;
 
-export { BASE_RADIUS, DEFAULT_MIKU_FUSION_CONFIG, type FusionOrb, LEVEL_LABEL_PREFIX, type MergeResult, type MikuFusionContentRegistry, MikuFusionGame, type MikuFusionGameCallbacks, type MikuFusionGameConfig, type MikuFusionGameProps, type MikuFusionGameStatus, type MikuFusionTheme, type ProducerPack, RADIUS_STEP, type SongPack, type ThemePack, type UseMikuFusionGameOptions, type UseMikuFusionGameResult, defaultContentRegistry, useMikuFusionGame, useResponsiveCanvas };
+export { BASE_RADIUS, DEFAULT_MIKU_FUSION_CONFIG, type FusionOrb, LEVEL_LABEL_PREFIX, type MergeResult, type MikuFusionContentRegistry, MikuFusionGame, type MikuFusionGameCallbacks, type MikuFusionGameConfig, type MikuFusionGameProps, type MikuFusionGameStatus, type MikuFusionTheme, type OrbImageMapping, type ProducerPack, RADIUS_STEP, type SongPack, type ThemePack, type UseMikuFusionGameOptions, type UseMikuFusionGameResult, defaultContentRegistry, useMikuFusionGame, useResponsiveCanvas };

package/dist/mikuFusionGame/index.js

@@ -1,7 +1,10 @@
 'use strict';
 
+var chunkHHVDOIPV_js = require('../chunk-HHVDOIPV.js');
+require('../chunk-ZWQJSZEY.js');
 var chunkKO73EBUT_js = require('../chunk-KO73EBUT.js');
 require('../chunk-XJ7ZAGC5.js');
+require('../chunk-25OFOKNF.js');
 require('../chunk-DGUM43GV.js');
 var React3 = require('react');
 
@@ -223,7 +226,7 @@ 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) {
+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);
@@ -244,15 +247,51 @@ function drawScene(context, width, height, config, orbs, aimX, nextLevel, status
   context.lineTo(aimX, config.spawnY);
   context.stroke();
   const previewRadius = getRadiusByLevel(nextLevel);
-  context.fillStyle = getOrbColor(nextLevel, config);
+  const previewY = config.spawnY - previewRadius - 4;
+  const previewImage = imageCache[nextLevel];
   context.beginPath();
-  context.arc(aimX, config.spawnY - previewRadius - 4, previewRadius, 0, Math.PI * 2);
-  context.fill();
+  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.fillStyle = getOrbColor(orb.level, config);
     context.arc(orb.x, orb.y, orb.radius, 0, Math.PI * 2);
-    context.fill();
+    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";
@@ -291,10 +330,26 @@ function useMikuFusionGame(options = {}) {
   const config = configRef.current;
   const onScoreChangeRef = React3.useRef(options.onScoreChange);
   const onGameOverRef = React3.useRef(options.onGameOver);
+  const orbImageMappingRef = React3.useRef(options.orbImageMapping ?? {});
+  const imageCacheRef = React3.useRef({});
   React3.useEffect(() => {
     onScoreChangeRef.current = options.onScoreChange;
     onGameOverRef.current = options.onGameOver;
   }, [options.onGameOver, options.onScoreChange]);
+  React3.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] = chunkKO73EBUT_js.useLocalStorage(
     options.storageKey || "sa2kit:mikuFusionGame:bestScore",
     0
@@ -327,7 +382,8 @@ function useMikuFusionGame(options = {}) {
         orbsRef.current,
         aimXRef.current,
         nextLevel,
-        nextStatus
+        nextStatus,
+        imageCacheRef.current
       );
     },
     [config, nextLevel, status]
@@ -571,8 +627,24 @@ function GameResultModal({ open, score, bestScore, onRestart }) {
 }
 
 // src/mikuFusionGame/components/MikuFusionGame.tsx
-function MikuFusionGame({ className, storageKey, ...options }) {
+function MikuFusionGame({
+  className,
+  storageKey,
+  orbImageStorageKey = "sa2kit:mikuFusionGame:orbImages",
+  enableImageConfigPanel = true,
+  presetOrbImageMapping = {},
+  ...options
+}) {
   const containerRef = React3.useRef(null);
+  const [orbImageMapping, setOrbImageMapping] = React3.useState({});
+  const [isUserDefineMode] = React3.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,
@@ -584,7 +656,46 @@ function MikuFusionGame({ className, storageKey, ...options }) {
     handleDrop,
     togglePause,
     restart
-  } = useMikuFusionGame({ ...options, storageKey });
+  } = useMikuFusionGame({ ...options, storageKey, orbImageMapping: activeOrbImageMapping });
+  const panelItems = React3.useMemo(
+    () => Array.from({ length: config.maxLevel }, (_, index) => ({
+      id: String(index + 1),
+      label: `M${index + 1}`
+    })),
+    [config.maxLevel]
+  );
+  const panelValue = React3.useMemo(
+    () => Object.entries(orbImageMapping).reduce((acc, [key, value]) => {
+      if (value) {
+        acc[String(key)] = value;
+      }
+      return acc;
+    }, {}),
+    [orbImageMapping]
+  );
+  React3.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,
@@ -624,6 +735,16 @@ function MikuFusionGame({ className, storageKey, ...options }) {
       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__ */ React3__default.default.createElement(
     "div",
     {
@@ -657,7 +778,17 @@ function MikuFusionGame({ className, storageKey, ...options }) {
         onTogglePause: togglePause,
         onRestart: restart
       }
-    )
+    ),
+    enableImageConfigPanel && isUserDefineMode ? /* @__PURE__ */ React3__default.default.createElement(
+      chunkHHVDOIPV_js.LocalImageMappingPanel,
+      {
+        storageKey: orbImageStorageKey,
+        title: "\u7403\u4F53\u56FE\u7247\u914D\u7F6E\uFF08\u4FDD\u5B58\u5230\u672C\u5730\uFF09",
+        items: panelItems,
+        defaultValue: panelValue,
+        onValueChange: handlePanelValueChange
+      }
+    ) : null
   );
 }