@doki-land/live2d 0.0.11 → 0.0.13

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-import { EventEmitter as EventEmitter2 } from "@doki-land/live2d-core";
+import { DEFAULT_ACTOR_TRANSFORM as DEFAULT_ACTOR_TRANSFORM2, EventEmitter as EventEmitter2 } from "@doki-land/live2d-core";
 import {
   DEFAULT_NPM_CDN,
   resolveModelSourceUrl as resolveModelSourceUrl2,
@@ -7,10 +7,10 @@ import {
 } from "@doki-land/live2d-loader";
 import {
   createCanvas2DRenderer,
-  createMoc2Backend as createMoc2Backend2,
-  createMoc3Backend as createMoc3Backend2,
+  createMoc2Backend as createMoc2Backend3,
+  createMoc3Backend as createMoc3Backend3,
   createQuadProgram,
-  createRenderer as createRenderer2,
+  createRenderer as createRenderer3,
   createWebGl2Renderer,
   createWebGpuRenderer,
   decodeMoc3,
@@ -21,19 +21,51 @@ import {
 } from "@doki-land/live2d-renderer";
 
 // src/create-live2d.ts
-import { EventEmitter, modelSourceUrl } from "@doki-land/live2d-core";
+import {
+  createMoc2Backend as createMoc2Backend2,
+  createMoc3Backend as createMoc3Backend2,
+  createRenderer as createRenderer2
+} from "@doki-land/live2d-renderer";
+
+// src/focus.ts
+function focusParameterUpdates(parameters, dragX, dragY) {
+  const byId = new Map(parameters.map((p) => [p.id, p]));
+  const x = clampUnit(dragX);
+  const y = clampUnit(dragY);
+  const out = [];
+  const set = (id, normalized) => {
+    const binding = byId.get(id);
+    if (!binding) return;
+    out.push({ id, value: valueFromNormalized(binding, normalized) });
+  };
+  set("PARAM_ANGLE_X", x);
+  set("PARAM_ANGLE_Y", y);
+  set("PARAM_ANGLE_Z", clampUnit(x * y * -1));
+  set("PARAM_BODY_ANGLE_X", x);
+  set("PARAM_BODY_ANGLE_Y", y);
+  set("PARAM_EYE_BALL_X", x);
+  set("PARAM_EYE_BALL_Y", y);
+  return out;
+}
+function clampUnit(n) {
+  if (n > 1) return 1;
+  if (n < -1) return -1;
+  return n;
+}
+function valueFromNormalized(binding, normalized) {
+  const n = clampUnit(normalized);
+  return n >= 0 ? binding.defaultValue + (binding.max - binding.defaultValue) * n : binding.defaultValue + (binding.defaultValue - binding.min) * n;
+}
+
+// src/stage/actor-model-slot.ts
+import { modelSourceUrl } from "@doki-land/live2d-core";
 import {
   createUrlAssetResolver,
   fetchModelJson,
   normalizeModelSettings,
   resolveModelSourceUrl
 } from "@doki-land/live2d-loader";
-import {
-  createMoc2Backend,
-  createMoc3Backend,
-  createRenderer,
-  selectModelBackend
-} from "@doki-land/live2d-renderer";
+import { selectModelBackend } from "@doki-land/live2d-renderer";
 
 // src/load-textures.ts
 function guessMime(path) {
@@ -578,116 +610,577 @@ function optionalNum(v) {
   return typeof v === "number" && Number.isFinite(v) ? v : void 0;
 }
 
-// src/create-live2d.ts
+// src/stage/actor-model-slot.ts
 function lerp(a, b, t) {
   return a + (b - a) * Math.min(1, Math.max(0, t));
 }
-function nowMs() {
-  return typeof performance !== "undefined" ? performance.now() : Date.now();
-}
-function createLive2D(options = {}) {
-  const backends = options.backends ?? [
-    createMoc2Backend(),
-    createMoc3Backend()
-  ];
-  const renderer = options.renderer ?? createRenderer({ prefer: options.prefer });
-  const events = new EventEmitter();
-  let canvas = null;
-  let model = null;
-  let activeBackend = null;
-  let drawPass = null;
-  let loadedTextures = [];
-  let initPromise = null;
-  let phase = "idle";
-  let lastError = null;
-  let generation = 0;
-  let loadGeneration = 0;
-  let fpsSmooth = 0;
-  let activeResolver = null;
-  const motionCache = /* @__PURE__ */ new Map();
-  const motionPlayer = new MotionPlayer({
-    onStart: ({ group, index, slot }) => events.emit("motion:start", { group, index, slot }),
-    onFinish: ({ group, index, slot }) => events.emit("motion:finish", { group, index, slot })
-  });
-  const applyMotionSamples = (samples) => {
-    if (!model || !activeBackend) return;
+var ActorModelSlot = class {
+  #backends;
+  #renderer;
+  #onProgress;
+  #motionPlayer;
+  #motionCache = /* @__PURE__ */ new Map();
+  #drawPass = null;
+  #model = null;
+  #backend = null;
+  #textures = [];
+  #resolver = null;
+  #loadGeneration = 0;
+  constructor(options) {
+    this.#backends = options.backends;
+    this.#renderer = options.renderer;
+    this.#onProgress = options.onProgress;
+    this.#motionPlayer = new MotionPlayer({
+      onStart: options.onMotionStart,
+      onFinish: options.onMotionFinish
+    });
+  }
+  get model() {
+    return this.#model;
+  }
+  get drawPass() {
+    return this.#drawPass;
+  }
+  ensureDrawPass() {
+    if (!this.#drawPass) {
+      this.#drawPass = this.#renderer.createModelDrawPass();
+    }
+    return this.#drawPass;
+  }
+  #report(payload) {
+    this.#onProgress?.(payload);
+  }
+  #clearTextures() {
+    if (this.#textures.length > 0) {
+      releaseTextureData(this.#textures);
+      this.#textures = [];
+    }
+    this.#drawPass?.setTextures([]);
+  }
+  #applyMotionSamples(samples) {
+    if (!this.#model || !this.#backend) return;
     for (const s of samples) {
       if (s.weight <= 0) continue;
       if (s.target === "PartOpacity") {
-        if (!activeBackend.setPartOpacity) continue;
+        if (!this.#backend.setPartOpacity) continue;
         if (s.weight >= 1) {
-          activeBackend.setPartOpacity(model, s.id, s.value);
+          this.#backend.setPartOpacity(this.#model, s.id, s.value);
         } else {
           const cur2 = 1;
-          activeBackend.setPartOpacity(
-            model,
+          this.#backend.setPartOpacity(
+            this.#model,
             s.id,
             cur2 + (s.value - cur2) * s.weight
           );
         }
         continue;
       }
-      if (s.target !== "Parameter" || !activeBackend.setParameter)
+      if (s.target !== "Parameter" || !this.#backend.setParameter)
         continue;
       if (s.weight >= 1) {
-        activeBackend.setParameter(model, s.id, s.value);
+        this.#backend.setParameter(this.#model, s.id, s.value);
         continue;
       }
-      const cur = activeBackend.listParameters?.(model).find((p) => p.id === s.id)?.value ?? s.value;
-      activeBackend.setParameter(
-        model,
+      const cur = this.#backend.listParameters?.(this.#model).find((p) => p.id === s.id)?.value ?? s.value;
+      this.#backend.setParameter(
+        this.#model,
         s.id,
         cur + (s.value - cur) * s.weight
       );
     }
-  };
-  const clearTextures = () => {
-    if (loadedTextures.length > 0) {
-      releaseTextureData(loadedTextures);
-      loadedTextures = [];
+  }
+  async load(source, resolver) {
+    const gen = ++this.#loadGeneration;
+    this.#report({
+      stage: "mounting",
+      progress: 0.01,
+      detail: "prepare draw pass"
+    });
+    const drawPass = this.ensureDrawPass();
+    this.#report({
+      stage: "resolve",
+      progress: 0.02,
+      detail: "resolve source"
+    });
+    let json;
+    let baseUrl;
+    let settingsUrl;
+    if (typeof source === "object" && source.kind === "json") {
+      json = source.json;
+      baseUrl = source.baseUrl;
+      settingsUrl = source.baseUrl;
+      this.#report({
+        stage: "settings",
+        progress: 0.2,
+        detail: "inline settings"
+      });
+    } else {
+      const raw = typeof source === "string" ? source : source.kind === "npm" ? modelSourceUrl(source) : source.url;
+      const cdnBase = typeof source === "object" && source.kind === "npm" ? source.cdnBase : void 0;
+      const fetchUrl = resolveModelSourceUrl(raw, {
+        npmCdnBase: cdnBase
+      });
+      this.#report({
+        stage: "settings",
+        progress: 0.05,
+        detail: fetchUrl
+      });
+      json = await fetchModelJson(fetchUrl, (u) => {
+        const ratio = u.bytesTotal && u.bytesTotal > 0 ? u.bytesLoaded / u.bytesTotal : 0;
+        this.#report({
+          stage: "settings",
+          progress: lerp(0.05, 0.22, ratio),
+          detail: fetchUrl,
+          bytesLoaded: u.bytesLoaded,
+          bytesTotal: u.bytesTotal
+        });
+      });
+      baseUrl = fetchUrl;
+      settingsUrl = fetchUrl;
+    }
+    if (gen !== this.#loadGeneration) {
+      throw new Error("@doki-land/live2d: load cancelled");
     }
-    drawPass?.setTextures([]);
+    const settings = normalizeModelSettings(json, settingsUrl);
+    this.#report({
+      stage: "moc",
+      progress: 0.25,
+      detail: settings.moc
+    });
+    const assetResolver = resolver ?? createUrlAssetResolver(baseUrl, {
+      onBytesProgress: (key, u) => {
+        const isMoc = key === settings.moc;
+        const ratio = u.bytesTotal && u.bytesTotal > 0 ? u.bytesLoaded / u.bytesTotal : 0;
+        if (isMoc) {
+          this.#report({
+            stage: "moc",
+            progress: lerp(0.25, 0.8, ratio),
+            detail: key,
+            bytesLoaded: u.bytesLoaded,
+            bytesTotal: u.bytesTotal
+          });
+        } else {
+          this.#report({
+            stage: "textures",
+            progress: lerp(0.8, 0.9, ratio),
+            detail: key,
+            bytesLoaded: u.bytesLoaded,
+            bytesTotal: u.bytesTotal
+          });
+        }
+      }
+    });
+    this.#resolver = assetResolver;
+    this.#motionPlayer.clear();
+    this.#motionCache.clear();
+    const backend = selectModelBackend([...this.#backends], json);
+    this.#report({
+      stage: "decode",
+      progress: 0.85,
+      detail: `decode ${settings.format}`
+    });
+    const next = await backend.createModel(settings, {
+      renderer: this.#renderer,
+      resolver: assetResolver
+    });
+    if (gen !== this.#loadGeneration) {
+      backend.destroyModel(next);
+      throw new Error("@doki-land/live2d: load cancelled");
+    }
+    this.#clearTextures();
+    if (settings.textures.length > 0) {
+      this.#report({
+        stage: "textures",
+        progress: 0.88,
+        detail: `${settings.textures.length} textures`
+      });
+      const textures = await loadTextureData(
+        assetResolver,
+        settings.textures,
+        {
+          onProgress: (u) => {
+            const ratio = u.total > 0 ? (u.index + 1) / u.total : 1;
+            this.#report({
+              stage: "textures",
+              progress: lerp(0.88, 0.96, ratio),
+              detail: u.key,
+              bytesLoaded: u.bytesLoaded,
+              bytesTotal: u.bytesTotal
+            });
+          }
+        }
+      );
+      if (gen !== this.#loadGeneration) {
+        releaseTextureData(textures);
+        backend.destroyModel(next);
+        throw new Error("@doki-land/live2d: load cancelled");
+      }
+      this.#textures = textures;
+      drawPass.setTextures(textures);
+    }
+    if (this.#model && this.#backend) {
+      this.#backend.destroyModel(this.#model);
+    }
+    this.#model = next;
+    this.#backend = backend;
+    this.#report({
+      stage: "ready",
+      progress: 1,
+      detail: next.id
+    });
+    return next;
+  }
+  setParameter(id, value) {
+    if (!this.#model || !this.#backend?.setParameter) return;
+    this.#backend.setParameter(this.#model, id, value);
+  }
+  listParameters() {
+    if (!this.#model || !this.#backend?.listParameters) return [];
+    return this.#backend.listParameters(this.#model);
+  }
+  listMotionGroups() {
+    return this.#model?.settings.motionGroups ?? {};
+  }
+  async playMotion(group, index = 0, options = {}) {
+    if (!this.#model || !this.#resolver) return false;
+    const list = this.#model.settings.motionGroups[group];
+    const def = list?.[index];
+    if (!def) return false;
+    let clip = this.#motionCache.get(def.file);
+    if (!clip) {
+      const json = await this.#resolver.fetchJson(def.file);
+      clip = parseMotion3(json);
+      this.#motionCache.set(def.file, clip);
+    }
+    const fadeInTime = options.fadeInTime ?? def.fadeInTime ?? clip.fadeInTime;
+    const fadeOutTime = options.fadeOutTime ?? def.fadeOutTime ?? clip.fadeOutTime;
+    return this.#motionPlayer.start(group, index, clip, {
+      priority: options.priority ?? MotionPriority.normal,
+      slot: options.slot,
+      queue: options.queue,
+      loop: options.loop,
+      fadeInTime,
+      fadeOutTime
+    });
+  }
+  stopMotion(opts) {
+    this.#motionPlayer.stop(opts?.fade !== false, opts?.slot);
+  }
+  listPlayingMotions() {
+    return this.#motionPlayer.listPlaying();
+  }
+  update(deltaTimeSeconds) {
+    if (!this.#model || !this.#backend || !this.#drawPass) return null;
+    this.#applyMotionSamples(this.#motionPlayer.update(deltaTimeSeconds));
+    this.#backend.updateModel(this.#model, deltaTimeSeconds);
+    return this.#backend.getDrawables(this.#model);
+  }
+  hitTestModelCoords(modelX, modelY) {
+    if (!this.#model || !this.#backend) return null;
+    const drawables = this.#backend.getDrawables(this.#model);
+    for (let n = drawables.length - 1; n >= 0; n -= 1) {
+      const d = drawables[n];
+      if (!d.visible || d.opacity <= 0) continue;
+      const p = d.vertexPositions;
+      const idx = d.indices;
+      for (let i = 0; i + 2 < idx.length; i += 3) {
+        const a = idx[i] * 2, b = idx[i + 1] * 2, c = idx[i + 2] * 2;
+        const ax = p[a], ay = p[a + 1];
+        const bx = p[b], by = p[b + 1];
+        const cx = p[c], cy = p[c + 1];
+        const s = (ax - cx) * (modelY - cy) - (ay - cy) * (modelX - cx);
+        const s1 = (bx - ax) * (modelY - ay) - (by - ay) * (modelX - ax);
+        const s2 = (cx - bx) * (modelY - by) - (cy - by) * (modelX - bx);
+        if (s >= 0 && s1 >= 0 && s2 >= 0 || s <= 0 && s1 <= 0 && s2 <= 0) {
+          const hitArea = this.#model.settings.hitAreas.find(
+            (h) => h.id === `D_${d.index}` || h.id === `${d.index}`
+          );
+          return hitArea?.name ?? `drawable:${d.index}`;
+        }
+      }
+    }
+    return null;
+  }
+  destroy() {
+    this.#loadGeneration += 1;
+    this.#motionPlayer.clear();
+    this.#motionCache.clear();
+    this.#resolver = null;
+    if (this.#model && this.#backend) {
+      this.#backend.destroyModel(this.#model);
+    }
+    this.#model = null;
+    this.#backend = null;
+    this.#clearTextures();
+    this.#drawPass?.destroy();
+    this.#drawPass = null;
+  }
+};
+
+// src/stage/transform.ts
+import { DEFAULT_ACTOR_TRANSFORM } from "@doki-land/live2d-core";
+function resolveActorTransform(patch) {
+  const base = DEFAULT_ACTOR_TRANSFORM;
+  const scale = patch?.scale ?? base.scale ?? 1;
+  return {
+    x: patch?.x ?? base.x,
+    y: patch?.y ?? base.y,
+    scale,
+    scaleX: patch?.scaleX ?? patch?.scale ?? scale,
+    scaleY: patch?.scaleY ?? patch?.scale ?? scale,
+    rotation: patch?.rotation ?? base.rotation ?? 0,
+    anchorX: patch?.anchorX ?? base.anchorX ?? 0.5,
+    anchorY: patch?.anchorY ?? base.anchorY ?? 1
+  };
+}
+function modelNdcToStage(modelX, modelY, transform) {
+  const scaleX = transform.scaleX ?? transform.scale ?? 1;
+  const scaleY = transform.scaleY ?? transform.scale ?? 1;
+  const anchorX = transform.anchorX ?? 0.5;
+  const anchorY = transform.anchorY ?? 1;
+  const rotation = transform.rotation ?? 0;
+  const anchorModelX = -1 + anchorX * 2;
+  const anchorModelY = 1 - anchorY * 2;
+  let localX = (modelX - anchorModelX) * scaleX * 0.5;
+  let localY = (anchorModelY - modelY) * scaleY * 0.5;
+  if (rotation !== 0) {
+    const c = Math.cos(rotation);
+    const s = Math.sin(rotation);
+    const rx = localX * c - localY * s;
+    const ry = localX * s + localY * c;
+    localX = rx;
+    localY = ry;
+  }
+  return {
+    stageX: transform.x + localX,
+    stageY: transform.y + localY
+  };
+}
+function stageToModelNdc(stageX, stageY, transform) {
+  const scaleX = transform.scaleX ?? transform.scale ?? 1;
+  const scaleY = transform.scaleY ?? transform.scale ?? 1;
+  const anchorX = transform.anchorX ?? 0.5;
+  const anchorY = transform.anchorY ?? 1;
+  const anchorModelX = -1 + anchorX * 2;
+  const anchorModelY = 1 - anchorY * 2;
+  const localX = (stageX - transform.x) / (scaleX * 0.5);
+  const localY = (stageY - transform.y) / (scaleY * 0.5);
+  return {
+    modelX: localX + anchorModelX,
+    modelY: anchorModelY - localY
+  };
+}
+function clientToStage(clientX, clientY, canvas) {
+  const rect = canvas.getBoundingClientRect();
+  const x = rect.width > 0 ? (clientX - rect.left) / rect.width : 0;
+  const y = rect.height > 0 ? (clientY - rect.top) / rect.height : 0;
+  return {
+    stageX: Math.min(1, Math.max(0, x)),
+    stageY: Math.min(1, Math.max(0, y))
   };
+}
+function stageFocusDrag(stageX, stageY, transform) {
+  const dx = stageX - transform.x;
+  const dy = transform.y - stageY;
+  const dragX = Math.min(1, Math.max(-1, dx * 2));
+  const dragY = Math.min(1, Math.max(-1, dy * 2));
+  return { dragX, dragY };
+}
+function layerOrderIndex(layer, definedLayers) {
+  const idx = definedLayers.indexOf(layer);
+  return idx >= 0 ? idx : definedLayers.length;
+}
+function compareActorsForDraw(a, b, definedLayers) {
+  const la = layerOrderIndex(a.layer, definedLayers);
+  const lb = layerOrderIndex(b.layer, definedLayers);
+  return la - lb || a.order - b.order || a.creationIndex - b.creationIndex;
+}
+function compareActorsForHit(a, b, definedLayers) {
+  return compareActorsForDraw(b, a, definedLayers);
+}
+function transformDrawablesForStage(drawables, transform, opacity) {
+  const alpha = Math.min(1, Math.max(0, opacity));
+  return drawables.map((d) => {
+    if (!d.visible || alpha <= 0) return { ...d, visible: false };
+    const pos = new Float32Array(d.vertexPositions.length);
+    for (let i = 0; i < pos.length; i += 2) {
+      const { stageX, stageY } = modelNdcToStage(
+        d.vertexPositions[i],
+        d.vertexPositions[i + 1],
+        transform
+      );
+      pos[i] = stageX * 2 - 1;
+      pos[i + 1] = 1 - stageY * 2;
+    }
+    return {
+      ...d,
+      vertexPositions: pos,
+      opacity: d.opacity * alpha
+    };
+  });
+}
+
+// src/stage/actor.ts
+var nextActorId = 0;
+var Live2dActorImpl = class {
+  id;
+  creationIndex;
+  #transform;
+  #visible = true;
+  #opacity = 1;
+  #layer = "characters";
+  #order = 0;
+  #destroyed = false;
+  #lastDrawables = null;
+  #slot;
+  constructor(options, shared) {
+    this.id = options?.id ?? shared.id;
+    this.creationIndex = shared.creationIndex;
+    this.#transform = resolveActorTransform(options?.transform);
+    this.#visible = options?.visible ?? true;
+    this.#opacity = options?.opacity ?? 1;
+    this.#layer = options?.layer ?? "characters";
+    this.#order = options?.order ?? 0;
+    this.#slot = new ActorModelSlot({
+      backends: shared.backends,
+      renderer: shared.renderer
+    });
+  }
+  get model() {
+    return this.#slot.model;
+  }
+  get visible() {
+    return this.#visible;
+  }
+  set visible(value) {
+    this.#visible = value;
+  }
+  get opacity() {
+    return this.#opacity;
+  }
+  set opacity(value) {
+    this.#opacity = Math.min(1, Math.max(0, value));
+  }
+  get layer() {
+    return this.#layer;
+  }
+  set layer(value) {
+    this.#layer = value;
+  }
+  get order() {
+    return this.#order;
+  }
+  set order(value) {
+    this.#order = value;
+  }
+  getTransform() {
+    return { ...this.#transform };
+  }
+  setTransform(patch) {
+    this.#transform = resolveActorTransform({
+      ...this.#transform,
+      ...patch
+    });
+  }
+  async load(source, resolver) {
+    if (this.#destroyed) {
+      throw new Error("@doki-land/live2d: actor destroyed");
+    }
+    return await this.#slot.load(source, resolver);
+  }
+  setParameter(id, value) {
+    this.#slot.setParameter(id, value);
+  }
+  lookAt(stageX, stageY) {
+    const { dragX, dragY } = stageFocusDrag(
+      stageX,
+      stageY,
+      this.#transform
+    );
+    for (const u of focusParameterUpdates(
+      this.#slot.listParameters(),
+      dragX,
+      dragY
+    )) {
+      this.#slot.setParameter(u.id, u.value);
+    }
+  }
+  /** Internal: evaluate motion/physics and cache drawables for render. */
+  update(deltaTimeSeconds) {
+    if (!this.#visible || this.#opacity <= 0) {
+      this.#lastDrawables = null;
+      return null;
+    }
+    this.#lastDrawables = this.#slot.update(deltaTimeSeconds);
+    return this.#lastDrawables;
+  }
+  get lastDrawables() {
+    return this.#lastDrawables;
+  }
+  get slot() {
+    return this.#slot;
+  }
+  hitTestStage(stageX, stageY) {
+    if (!this.#visible || this.#opacity <= 0 || !this.#slot.model)
+      return null;
+    const { modelX, modelY } = stageToModelNdc(
+      stageX,
+      stageY,
+      this.#transform
+    );
+    const area = this.#slot.hitTestModelCoords(modelX, modelY);
+    if (!area) return null;
+    const drawableMatch = /^drawable:(\d+)$/.exec(area);
+    return {
+      actorId: this.id,
+      area,
+      drawableIndex: drawableMatch ? Number(drawableMatch[1]) : -1,
+      stageX,
+      stageY,
+      localX: modelX,
+      localY: modelY
+    };
+  }
+  destroy() {
+    if (this.#destroyed) return;
+    this.#destroyed = true;
+    this.#slot.destroy();
+  }
+};
+function allocateActorId(prefix = "actor") {
+  nextActorId += 1;
+  return `${prefix}-${nextActorId}`;
+}
+
+// src/stage/single-facade.ts
+import { EventEmitter } from "@doki-land/live2d-core";
+function nowMs() {
+  return typeof performance !== "undefined" ? performance.now() : Date.now();
+}
+function createSingleActorFacade(stage, actor, backends) {
+  const events = new EventEmitter();
+  let canvas = null;
+  let phase = "idle";
+  let lastError = null;
+  let generation = 0;
+  let fpsSmooth = 0;
   const setPhase = (next) => {
     phase = next;
     events.emit("phase", { phase, generation });
   };
-  const report = (payload) => {
-    events.emit("progress", payload);
-  };
   const state = () => ({
     phase,
     lastError,
     generation
   });
-  const ensureInitialized = async () => {
-    if (!canvas) {
-      throw new Error(
-        "@doki-land/live2d: call mount(canvas) before loadModel"
-      );
-    }
-    if (!initPromise) {
-      setPhase("mounting");
-      const gen = generation;
-      initPromise = renderer.initialize(canvas).then(() => {
-        if (gen !== generation) return;
-        drawPass = renderer.createModelDrawPass();
-        setPhase("ready");
-      }).catch((err) => {
-        lastError = err;
-        setPhase("error");
-        events.emit("error", { error: err });
-        throw err;
-      });
-    }
-    await initPromise;
-  };
   const runtime = {
     events,
     backends,
-    renderer,
+    renderer: stage.renderer,
+    stage,
+    actor,
     get model() {
-      return model;
+      return actor.model;
     },
     get state() {
       return state();
@@ -695,159 +1188,22 @@ function createLive2D(options = {}) {
     mount(target) {
       generation += 1;
       canvas = target;
-      initPromise = null;
-      clearTextures();
-      drawPass?.destroy();
-      drawPass = null;
-      setPhase("idle");
-      void ensureInitialized();
+      setPhase("mounting");
+      void stage.mount(target).then(
+        () => setPhase(actor.model ? "live" : "ready"),
+        (err) => {
+          lastError = err;
+          setPhase("error");
+          events.emit("error", { error: err });
+        }
+      );
     },
     async loadModel(source, resolver) {
-      const gen = ++loadGeneration;
       setPhase("loading");
-      report({
-        stage: "mounting",
-        progress: 0.01,
-        detail: "initialize renderer"
-      });
-      await ensureInitialized();
-      if (gen !== loadGeneration) {
-        throw new Error("@doki-land/live2d: load cancelled");
-      }
-      report({
-        stage: "resolve",
-        progress: 0.02,
-        detail: "resolve source"
-      });
       try {
-        let json;
-        let baseUrl;
-        let settingsUrl;
-        if (typeof source === "object" && source.kind === "json") {
-          json = source.json;
-          baseUrl = source.baseUrl;
-          settingsUrl = source.baseUrl;
-          report({
-            stage: "settings",
-            progress: 0.2,
-            detail: "inline settings"
-          });
-        } else {
-          const raw = typeof source === "string" ? source : source.kind === "npm" ? modelSourceUrl(source) : source.url;
-          const cdnBase = typeof source === "object" && source.kind === "npm" ? source.cdnBase : void 0;
-          const fetchUrl = resolveModelSourceUrl(raw, {
-            npmCdnBase: cdnBase
-          });
-          report({
-            stage: "settings",
-            progress: 0.05,
-            detail: fetchUrl
-          });
-          json = await fetchModelJson(fetchUrl, (u) => {
-            const ratio = u.bytesTotal && u.bytesTotal > 0 ? u.bytesLoaded / u.bytesTotal : 0;
-            report({
-              stage: "settings",
-              progress: lerp(0.05, 0.22, ratio),
-              detail: fetchUrl,
-              bytesLoaded: u.bytesLoaded,
-              bytesTotal: u.bytesTotal
-            });
-          });
-          baseUrl = fetchUrl;
-          settingsUrl = fetchUrl;
-        }
-        if (gen !== loadGeneration) {
-          throw new Error("@doki-land/live2d: load cancelled");
-        }
-        const settings = normalizeModelSettings(json, settingsUrl);
-        report({
-          stage: "moc",
-          progress: 0.25,
-          detail: settings.moc
-        });
-        const assetResolver = resolver ?? createUrlAssetResolver(baseUrl, {
-          onBytesProgress: (key, u) => {
-            const isMoc = key === settings.moc;
-            const ratio = u.bytesTotal && u.bytesTotal > 0 ? u.bytesLoaded / u.bytesTotal : 0;
-            if (isMoc) {
-              report({
-                stage: "moc",
-                progress: lerp(0.25, 0.8, ratio),
-                detail: key,
-                bytesLoaded: u.bytesLoaded,
-                bytesTotal: u.bytesTotal
-              });
-            } else {
-              report({
-                stage: "textures",
-                progress: lerp(0.8, 0.9, ratio),
-                detail: key,
-                bytesLoaded: u.bytesLoaded,
-                bytesTotal: u.bytesTotal
-              });
-            }
-          }
-        });
-        activeResolver = assetResolver;
-        motionPlayer.clear();
-        motionCache.clear();
-        const backend = selectModelBackend(backends, json);
-        report({
-          stage: "decode",
-          progress: 0.85,
-          detail: `decode ${settings.format}`
-        });
-        const next = await backend.createModel(settings, {
-          renderer,
-          resolver: assetResolver
-        });
-        if (gen !== loadGeneration) {
-          backend.destroyModel(next);
-          throw new Error("@doki-land/live2d: load cancelled");
-        }
-        clearTextures();
-        if (settings.textures.length > 0 && drawPass) {
-          report({
-            stage: "textures",
-            progress: 0.88,
-            detail: `${settings.textures.length} textures`
-          });
-          const textures = await loadTextureData(
-            assetResolver,
-            settings.textures,
-            {
-              onProgress: (u) => {
-                const ratio = u.total > 0 ? (u.index + 1) / u.total : 1;
-                report({
-                  stage: "textures",
-                  progress: lerp(0.88, 0.96, ratio),
-                  detail: u.key,
-                  bytesLoaded: u.bytesLoaded,
-                  bytesTotal: u.bytesTotal
-                });
-              }
-            }
-          );
-          if (gen !== loadGeneration) {
-            releaseTextureData(textures);
-            backend.destroyModel(next);
-            throw new Error("@doki-land/live2d: load cancelled");
-          }
-          loadedTextures = textures;
-          drawPass.setTextures(textures);
-        }
-        if (model && activeBackend) {
-          activeBackend.destroyModel(model);
-        }
-        model = next;
-        activeBackend = backend;
+        const model = await actor.load(source, resolver);
         lastError = null;
         setPhase("live");
-        report({
-          stage: "ready",
-          progress: 1,
-          detail: model.id
-        });
         events.emit("ready", { modelId: model.id });
         return model;
       } catch (err) {
@@ -858,70 +1214,32 @@ function createLive2D(options = {}) {
       }
     },
     captureFrame() {
-      if (!model || !activeBackend?.captureFrame) return null;
-      return activeBackend.captureFrame(model);
+      return null;
     },
     setParameter(id, value) {
-      if (!model || !activeBackend?.setParameter) return;
-      activeBackend.setParameter(model, id, value);
+      actor.setParameter(id, value);
     },
     hitTest(x, y) {
-      if (!model || !activeBackend) return null;
-      const drawables = activeBackend.getDrawables(model);
-      for (let n = drawables.length - 1; n >= 0; n -= 1) {
-        const d = drawables[n];
-        if (!d.visible || d.opacity <= 0) continue;
-        const p = d.vertexPositions;
-        const idx = d.indices;
-        for (let i = 0; i + 2 < idx.length; i += 3) {
-          const a = idx[i] * 2, b = idx[i + 1] * 2, c = idx[i + 2] * 2;
-          const ax = p[a], ay = p[a + 1];
-          const bx = p[b], by = p[b + 1];
-          const cx = p[c], cy = p[c + 1];
-          const s = (ax - cx) * (y - cy) - (ay - cy) * (x - cx);
-          const s1 = (bx - ax) * (y - ay) - (by - ay) * (x - ax);
-          const s2 = (cx - bx) * (y - by) - (cy - by) * (x - bx);
-          if (s >= 0 && s1 >= 0 && s2 >= 0 || s <= 0 && s1 <= 0 && s2 <= 0) {
-            return `drawable:${d.index}`;
-          }
-        }
-      }
-      return null;
+      const stageX = (x + 1) / 2;
+      const stageY = (1 - y) / 2;
+      const hit = stage.hitTest(stageX, stageY);
+      if (!hit || hit.actorId !== actor.id) return null;
+      return hit.area;
     },
     listParameters() {
-      if (!model || !activeBackend?.listParameters) return [];
-      return activeBackend.listParameters(model);
+      return actor.slot.listParameters();
     },
     listMotionGroups() {
-      return model?.settings.motionGroups ?? {};
+      return actor.slot.listMotionGroups();
     },
-    async playMotion(group, index = 0, options2 = {}) {
-      if (!model || !activeResolver) return false;
-      const list = model.settings.motionGroups[group];
-      const def = list?.[index];
-      if (!def) return false;
-      let clip = motionCache.get(def.file);
-      if (!clip) {
-        const json = await activeResolver.fetchJson(def.file);
-        clip = parseMotion3(json);
-        motionCache.set(def.file, clip);
-      }
-      const fadeInTime = options2.fadeInTime ?? def.fadeInTime ?? clip.fadeInTime;
-      const fadeOutTime = options2.fadeOutTime ?? def.fadeOutTime ?? clip.fadeOutTime;
-      return motionPlayer.start(group, index, clip, {
-        priority: options2.priority ?? MotionPriority.normal,
-        slot: options2.slot,
-        queue: options2.queue,
-        loop: options2.loop,
-        fadeInTime,
-        fadeOutTime
-      });
+    playMotion(group, index, options) {
+      return actor.slot.playMotion(group, index, options);
     },
     stopMotion(opts) {
-      motionPlayer.stop(opts?.fade !== false, opts?.slot);
+      actor.slot.stopMotion(opts);
     },
     listPlayingMotions() {
-      return motionPlayer.listPlaying();
+      return actor.slot.listPlayingMotions();
     },
     async capturePng(opts = {}) {
       if (!canvas) {
@@ -929,7 +1247,7 @@ function createLive2D(options = {}) {
           "@doki-land/live2d: mount(canvas) before capturePng"
         );
       }
-      if (phase === "live" && model && activeBackend && drawPass) {
+      if (phase === "live") {
         runtime.update(0);
       }
       const mime = opts.mimeType ?? "image/png";
@@ -950,55 +1268,35 @@ function createLive2D(options = {}) {
       });
     },
     update(deltaTimeSeconds) {
-      if (!model || !activeBackend || !drawPass) return;
-      if (phase !== "live") return;
+      if (phase !== "live" && phase !== "ready") return;
       const t0 = nowMs();
-      applyMotionSamples(motionPlayer.update(deltaTimeSeconds));
-      activeBackend.updateModel(model, deltaTimeSeconds);
-      const drawables = activeBackend.getDrawables(model);
+      stage.update(deltaTimeSeconds);
+      stage.render();
       const t1 = nowMs();
-      renderer.beginFrame();
-      drawPass.draw(drawables, new Float32Array(16));
-      renderer.endFrame();
-      const t2 = nowMs();
+      const drawables = actor.lastDrawables ?? [];
       let vertexCount = 0;
       let indexCount = 0;
       for (const d of drawables) {
         vertexCount += d.vertexPositions.length / 2;
         indexCount += d.indices.length;
       }
-      const frameMs = t2 - t0;
-      const evaluateMs = t1 - t0;
-      const drawMs = t2 - t1;
+      const frameMs = t1 - t0;
       const fps = deltaTimeSeconds > 0 ? 1 / deltaTimeSeconds : 0;
       fpsSmooth = fpsSmooth <= 0 ? fps : fpsSmooth * 0.85 + fps * 0.15;
       events.emit("profile", {
         fps,
         fpsSmooth,
         frameMs,
-        evaluateMs,
-        drawMs,
+        evaluateMs: frameMs,
+        drawMs: 0,
         drawableCount: drawables.length,
         vertexCount,
         indexCount
       });
     },
     destroy() {
-      loadGeneration += 1;
       generation += 1;
-      motionPlayer.clear();
-      motionCache.clear();
-      activeResolver = null;
-      if (model && activeBackend) {
-        activeBackend.destroyModel(model);
-      }
-      model = null;
-      activeBackend = null;
-      clearTextures();
-      drawPass?.destroy();
-      drawPass = null;
-      initPromise = null;
-      renderer.destroy();
+      stage.destroy();
       canvas = null;
       setPhase("destroyed");
       events.clear();
@@ -1007,39 +1305,339 @@ function createLive2D(options = {}) {
   return runtime;
 }
 
-// src/focus.ts
-function focusParameterUpdates(parameters, dragX, dragY) {
-  const byId = new Map(parameters.map((p) => [p.id, p]));
-  const x = clampUnit(dragX);
-  const y = clampUnit(dragY);
-  const out = [];
-  const set = (id, normalized) => {
-    const binding = byId.get(id);
-    if (!binding) return;
-    out.push({ id, value: valueFromNormalized(binding, normalized) });
-  };
-  set("PARAM_ANGLE_X", x);
-  set("PARAM_ANGLE_Y", y);
-  set("PARAM_ANGLE_Z", clampUnit(x * y * -1));
-  set("PARAM_BODY_ANGLE_X", x);
-  set("PARAM_BODY_ANGLE_Y", y);
-  set("PARAM_EYE_BALL_X", x);
-  set("PARAM_EYE_BALL_Y", y);
-  return out;
+// src/stage/stage.ts
+import {
+  createMoc2Backend,
+  createMoc3Backend,
+  createRenderer
+} from "@doki-land/live2d-renderer";
+var Live2dStageImpl = class {
+  #backends;
+  #renderer;
+  #updateMode;
+  #actors = /* @__PURE__ */ new Map();
+  #definedLayers = [
+    "background",
+    "characters-back",
+    "characters",
+    "characters-front",
+    "effects"
+  ];
+  #pointerListeners = /* @__PURE__ */ new Map([
+    ["pointerdown", /* @__PURE__ */ new Set()],
+    ["pointermove", /* @__PURE__ */ new Set()],
+    ["pointerup", /* @__PURE__ */ new Set()]
+  ]);
+  #canvas = null;
+  #initPromise = null;
+  #rafId = null;
+  #running = false;
+  #paused = false;
+  #lastFrameMs = 0;
+  #creationCounter = 0;
+  #focusedActorId = null;
+  #lastPointer = null;
+  #pointerTracking = { mode: "focused" };
+  #boundPointerDown;
+  #boundPointerMove;
+  #boundPointerUp;
+  #destroyed = false;
+  constructor(options = {}) {
+    this.#backends = options.backends ?? [
+      createMoc2Backend(),
+      createMoc3Backend()
+    ];
+    this.#renderer = options.renderer ?? createRenderer({ prefer: options.prefer });
+    this.#updateMode = options.updateMode ?? "auto";
+  }
+  get actors() {
+    return [...this.#actors.values()];
+  }
+  get pointerTracking() {
+    return this.#pointerTracking;
+  }
+  set pointerTracking(policy) {
+    this.#pointerTracking = policy;
+  }
+  get renderer() {
+    return this.#renderer;
+  }
+  async mount(canvas) {
+    if (this.#destroyed) {
+      throw new Error("@doki-land/live2d: stage destroyed");
+    }
+    this.#canvas = canvas;
+    this.#initPromise = this.#renderer.initialize(canvas);
+    await this.#initPromise;
+    this.#attachPointerListeners(canvas);
+  }
+  createActor(options) {
+    if (this.#destroyed) {
+      throw new Error("@doki-land/live2d: stage destroyed");
+    }
+    const id = options?.id ?? allocateActorId();
+    if (this.#actors.has(id)) {
+      throw new Error(`@doki-land/live2d: duplicate actor id "${id}"`);
+    }
+    const creationIndex = this.#creationCounter++;
+    const actor = new Live2dActorImpl(options, {
+      id,
+      creationIndex,
+      backends: this.#backends,
+      renderer: this.#renderer
+    });
+    this.#actors.set(id, actor);
+    if (!this.#focusedActorId) {
+      this.#focusedActorId = id;
+    }
+    return actor;
+  }
+  removeActor(actorOrId) {
+    const id = typeof actorOrId === "string" ? actorOrId : actorOrId.id;
+    const actor = this.#actors.get(id);
+    if (!actor) return;
+    actor.destroy();
+    this.#actors.delete(id);
+    if (this.#focusedActorId === id) {
+      this.#focusedActorId = this.#actors.keys().next().value ?? null;
+    }
+  }
+  defineLayers(layers) {
+    this.#definedLayers.length = 0;
+    this.#definedLayers.push(...layers);
+  }
+  update(deltaTimeSeconds) {
+    if (this.#destroyed) return;
+    for (const actor of this.#actors.values()) {
+      actor.update(deltaTimeSeconds);
+    }
+    this.#applyPointerTracking();
+  }
+  render() {
+    if (this.#destroyed || !this.#canvas) return;
+    const sorted = [...this.#actors.values()].sort(
+      (a, b) => compareActorsForDraw(a, b, this.#definedLayers)
+    );
+    this.#renderer.beginFrame();
+    for (const actor of sorted) {
+      if (!actor.visible || actor.opacity <= 0) continue;
+      const drawables = actor.lastDrawables;
+      const pass = actor.slot.drawPass;
+      if (!drawables || !pass) continue;
+      const placed = transformDrawablesForStage(
+        drawables,
+        actor.getTransform(),
+        actor.opacity
+      );
+      pass.draw(placed, new Float32Array(16));
+    }
+    this.#renderer.endFrame();
+  }
+  start() {
+    if (this.#updateMode === "manual") {
+      throw new Error(
+        "@doki-land/live2d: start() is not available when updateMode is manual"
+      );
+    }
+    if (this.#running) return;
+    this.#running = true;
+    this.#paused = false;
+    this.#lastFrameMs = nowMs2();
+    const tick = () => {
+      if (!this.#running) return;
+      if (!this.#paused) {
+        const t = nowMs2();
+        const dt = Math.min(0.1, (t - this.#lastFrameMs) / 1e3);
+        this.#lastFrameMs = t;
+        this.update(dt);
+        this.render();
+      }
+      this.#rafId = requestAnimationFrame(tick);
+    };
+    this.#rafId = requestAnimationFrame(tick);
+  }
+  pause() {
+    this.#paused = true;
+  }
+  resume() {
+    this.#paused = false;
+    this.#lastFrameMs = nowMs2();
+  }
+  stop() {
+    this.#running = false;
+    this.#paused = false;
+    if (this.#rafId !== null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+  }
+  hitTest(stageX, stageY) {
+    const hits = this.hitTestAll(stageX, stageY);
+    return hits[0] ?? null;
+  }
+  hitTestAll(stageX, stageY) {
+    const sorted = [...this.#actors.values()].sort(
+      (a, b) => compareActorsForHit(a, b, this.#definedLayers)
+    );
+    const hits = [];
+    for (const actor of sorted) {
+      const partial = actor.hitTestStage(stageX, stageY);
+      if (!partial) continue;
+      hits.push({ ...partial, actor });
+    }
+    return hits;
+  }
+  addEventListener(type, listener) {
+    this.#pointerListeners.get(type)?.add(listener);
+  }
+  removeEventListener(type, listener) {
+    this.#pointerListeners.get(type)?.delete(listener);
+  }
+  destroy() {
+    if (this.#destroyed) return;
+    this.#destroyed = true;
+    this.stop();
+    this.#detachPointerListeners();
+    for (const actor of this.#actors.values()) {
+      actor.destroy();
+    }
+    this.#actors.clear();
+    this.#renderer.destroy();
+    this.#canvas = null;
+    this.#initPromise = null;
+    for (const set of this.#pointerListeners.values()) {
+      set.clear();
+    }
+  }
+  #attachPointerListeners(canvas) {
+    this.#detachPointerListeners();
+    this.#boundPointerDown = (e) => this.#onPointer("pointerdown", e);
+    this.#boundPointerMove = (e) => this.#onPointer("pointermove", e);
+    this.#boundPointerUp = (e) => this.#onPointer("pointerup", e);
+    canvas.addEventListener("pointerdown", this.#boundPointerDown);
+    canvas.addEventListener("pointermove", this.#boundPointerMove);
+    canvas.addEventListener("pointerup", this.#boundPointerUp);
+  }
+  #detachPointerListeners() {
+    if (!this.#canvas) return;
+    if (this.#boundPointerDown) {
+      this.#canvas.removeEventListener(
+        "pointerdown",
+        this.#boundPointerDown
+      );
+    }
+    if (this.#boundPointerMove) {
+      this.#canvas.removeEventListener(
+        "pointermove",
+        this.#boundPointerMove
+      );
+    }
+    if (this.#boundPointerUp) {
+      this.#canvas.removeEventListener("pointerup", this.#boundPointerUp);
+    }
+    this.#boundPointerDown = void 0;
+    this.#boundPointerMove = void 0;
+    this.#boundPointerUp = void 0;
+  }
+  #onPointer(type, event) {
+    if (!this.#canvas) return;
+    const { stageX, stageY } = clientToStage(
+      event.clientX,
+      event.clientY,
+      this.#canvas
+    );
+    this.#lastPointer = { stageX, stageY };
+    const hit = this.hitTest(stageX, stageY);
+    if (type === "pointerdown" && hit) {
+      this.#focusedActorId = hit.actorId;
+    }
+    const payload = {
+      actor: hit?.actor ?? null,
+      actorId: hit?.actorId ?? null,
+      area: hit?.area ?? null,
+      stageX,
+      stageY,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      hit
+    };
+    for (const listener of this.#pointerListeners.get(type) ?? []) {
+      listener(payload);
+    }
+  }
+  #applyPointerTracking() {
+    if (!this.#canvas || !this.#lastPointer) return;
+    const { stageX, stageY } = this.#lastPointer;
+    const mode = this.#pointerTracking.mode;
+    if (mode === "none") return;
+    if (mode === "all") {
+      for (const actor of this.#actors.values()) {
+        actor.lookAt(stageX, stageY);
+      }
+      return;
+    }
+    if (mode === "custom" && this.#pointerTracking.targetActorId) {
+      const actor = this.#actors.get(this.#pointerTracking.targetActorId);
+      actor?.lookAt(stageX, stageY);
+      return;
+    }
+    if (mode === "hovered") {
+      for (const actor of this.#actors.values()) {
+        if (actor.hitTestStage(stageX, stageY)) {
+          actor.lookAt(stageX, stageY);
+        }
+      }
+      return;
+    }
+    if (mode === "nearest") {
+      let best = null;
+      let bestDist = Number.POSITIVE_INFINITY;
+      for (const actor of this.#actors.values()) {
+        const t = actor.getTransform();
+        const dx = t.x - stageX;
+        const dy = t.y - stageY;
+        const dist = dx * dx + dy * dy;
+        if (dist < bestDist) {
+          bestDist = dist;
+          best = actor;
+        }
+      }
+      best?.lookAt(stageX, stageY);
+      return;
+    }
+    if (mode === "focused" && this.#focusedActorId) {
+      this.#actors.get(this.#focusedActorId)?.lookAt(stageX, stageY);
+    }
+  }
+};
+function nowMs2() {
+  return typeof performance !== "undefined" ? performance.now() : Date.now();
 }
-function clampUnit(n) {
-  if (n > 1) return 1;
-  if (n < -1) return -1;
-  return n;
+function createLive2dStage(options) {
+  return new Live2dStageImpl(options);
 }
-function valueFromNormalized(binding, normalized) {
-  const n = clampUnit(normalized);
-  return n >= 0 ? binding.defaultValue + (binding.max - binding.defaultValue) * n : binding.defaultValue + (binding.defaultValue - binding.min) * n;
+
+// src/create-live2d.ts
+function createLive2D(options = {}) {
+  const backends = options.backends ?? [
+    createMoc2Backend2(),
+    createMoc3Backend2()
+  ];
+  const stage = createLive2dStage({
+    backends,
+    renderer: options.renderer ?? createRenderer2({ prefer: options.prefer }),
+    updateMode: options.updateMode ?? "manual"
+  });
+  const actor = stage.createActor({
+    id: allocateActorId("default")
+  });
+  return createSingleActorFacade(stage, actor, backends);
 }
 
 // src/index.ts
 var LIVE2D_VERSION = "0.0.0";
 export {
+  DEFAULT_ACTOR_TRANSFORM2 as DEFAULT_ACTOR_TRANSFORM,
   DEFAULT_NPM_CDN,
   EventEmitter2 as EventEmitter,
   LIVE2D_VERSION,
@@ -1048,10 +1646,11 @@ export {
   blendMotionLayers,
   createCanvas2DRenderer,
   createLive2D,
-  createMoc2Backend2 as createMoc2Backend,
-  createMoc3Backend2 as createMoc3Backend,
+  createLive2dStage,
+  createMoc2Backend3 as createMoc2Backend,
+  createMoc3Backend3 as createMoc3Backend,
   createQuadProgram,
-  createRenderer2 as createRenderer,
+  createRenderer3 as createRenderer,
   createWebGl2Renderer,
   createWebGpuRenderer,
   decodeMoc3,