@vmz/plugin-live2d 0.0.0 → 0.0.17

package/README.md

@@ -1,3 +1,26 @@
 # @vmz/plugin-live2d
 
-Placeholder package (0.0.0). Reserved for doki-land/live2d.ts.
+VMZ plugin for Live2D — `<Live2dHost />` and `<Live2dStage />` over `@doki-land/live2d`.
+
+```bash
+pnpm add @vmz/plugin-live2d @vmz/ui @vmz/ui-icons
+```
+
+**App** (`vmz.config.ts`):
+
+```ts
+import { defineConfig } from '@vmz/vmz';
+import live2d from '@vmz/plugin-live2d';
+
+export default defineConfig({ plugins: [live2d] });
+```
+
+**Plugin** (`vmz.plugin.ts` in this package) uses `definePlugin` from `@vmz/plugin`.
+
+```vmz
+<Live2dHost model="/models/character.model3.json" width={480} height={480} />
+
+<Live2dStage sources={actorSources} updateMode="auto" />
+```
+
+Runtime stays in `@doki-land/live2d*`; site chrome uses `@vmz/ui` / `@vmz/ui-icons`.

package/components/Live2dHost.vmz

@@ -0,0 +1,159 @@
+<template>
+  <div class="live2d-host" style={hostStyle}>
+    <div class="live2d-host__mount" id={hostId}></div>
+    <div if={showProgress && loading} class="live2d-host__progress" role="progressbar" aria-valuenow={progressPercent} aria-valuemin="0" aria-valuemax="100">
+      <span>{progressLabel} · {progressPercent}%</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.live2d-host { position: relative; display: inline-block; }
+.live2d-host__mount { width: 100%; height: 100%; }
+.live2d-host__mount canvas { display: block; width: 100%; height: 100%; }
+.live2d-host__progress {
+  position: absolute; inset: auto 0 0; padding: 0.35rem 0.5rem;
+  background: rgba(255, 255, 255, 0.92);
+  font: 600 0.75rem/1.2 ui-monospace, monospace; color: #377ba8;
+}
+</style>
+
+<script client>
+import { createLive2D } from '@doki-land/live2d';
+
+let hostSeq = 0;
+
+export default class Live2dHost {
+  public model = null;
+  public width = 320;
+  public height = 320;
+  public prefer = ['canvas2d', 'webgl2', 'webgpu'];
+  public autoplay = true;
+  public autoSway = false;
+  public showProgress = true;
+  public exposeCaptureApi = false;
+  public capturePresetId = '';
+
+  hostId = `live2d-host-${++hostSeq}`;
+  hostStyle = '';
+  loading = false;
+  progressPercent = 0;
+  progressLabel = 'Loading…';
+  runtime = null;
+  _raf = 0;
+  _lastTs = 0;
+
+  onMount() {
+    this.hostStyle = `width:${this.width}px;height:${this.height}px`;
+    if (this.exposeCaptureApi && typeof window !== 'undefined') {
+      window.__LIVE2D_CAPTURE__ = {
+        ready: false,
+        error: null,
+        presetId: this.capturePresetId || '',
+        pngBase64: null,
+      };
+    }
+    void this.boot();
+  }
+
+  onDestroy() {
+    this.stopLoop();
+    void this.runtime?.destroy?.();
+    this.runtime = null;
+  }
+
+  stopLoop() {
+    if (this._raf) cancelAnimationFrame(this._raf);
+    this._raf = 0;
+    this._lastTs = 0;
+  }
+
+  tick(ts) {
+    if (!this.runtime) return;
+    const dt = this._lastTs ? (ts - this._lastTs) / 1000 : 0;
+    this._lastTs = ts;
+    this.runtime.update(dt);
+    this._raf = requestAnimationFrame((t) => this.tick(t));
+  }
+
+  ensureCanvas() {
+    const host = document.getElementById(this.hostId);
+    if (!host) return null;
+    host.replaceChildren();
+    const canvas = document.createElement('canvas');
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.width = Math.max(1, Math.round(this.width * dpr));
+    canvas.height = Math.max(1, Math.round(this.height * dpr));
+    canvas.style.width = `${this.width}px`;
+    canvas.style.height = `${this.height}px`;
+    host.appendChild(canvas);
+    return canvas;
+  }
+
+  async capturePng(opts = {}) {
+    if (!this.runtime) throw new Error('Live2dHost: runtime not ready');
+    return this.runtime.capturePng(opts);
+  }
+
+  async boot() {
+    if (!this.model) return;
+    this.loading = true;
+    try {
+      this.stopLoop();
+      void this.runtime?.destroy?.();
+      const canvas = this.ensureCanvas();
+      if (!canvas) return;
+      const runtime = createLive2D({ prefer: this.prefer, updateMode: 'manual' });
+      runtime.events.on('progress', (p) => this.onProgress(p));
+      runtime.events.on('ready', () => {
+        this.loading = false;
+        if (this.autoplay) {
+          this._lastTs = 0;
+          this._raf = requestAnimationFrame((t) => this.tick(t));
+        }
+        if (this.exposeCaptureApi) void this.publishCapture();
+      });
+      runtime.events.on('error', (p) => {
+        this.loading = false;
+        if (this.exposeCaptureApi && typeof window !== 'undefined') {
+          const api = window.__LIVE2D_CAPTURE__;
+          if (api) api.error = String(p?.error || 'load error');
+        }
+      });
+      await runtime.mount(canvas);
+      await runtime.load(this.model);
+      this.runtime = runtime;
+    } catch {
+      this.loading = false;
+    }
+  }
+
+  onProgress(p) {
+    const progress = p?.progress ?? 0;
+    this.progressLabel = p?.stage || 'loading';
+    this.progressPercent = Math.round(Math.min(1, Math.max(0, progress)) * 100);
+  }
+
+  async publishCapture() {
+    const api = typeof window !== 'undefined' ? window.__LIVE2D_CAPTURE__ : null;
+    if (!api) return;
+    try {
+      await new Promise((r) => setTimeout(r, 400));
+      const blob = await this.capturePng();
+      const buf = await blob.arrayBuffer();
+      const bytes = new Uint8Array(buf);
+      let binary = '';
+      const chunk = 0x8000;
+      for (let i = 0; i < bytes.length; i += chunk) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+      }
+      api.pngBase64 = btoa(binary);
+      api.ready = true;
+      api.error = null;
+    } catch (err) {
+      api.error = String(err);
+      api.ready = false;
+    }
+  }
+}
+</script>

package/components/Live2dStage.vmz

@@ -0,0 +1,96 @@
+<template>
+  <div class="live2d-stage" id={hostId}></div>
+</template>
+
+<style>
+.live2d-stage {
+  position: relative;
+  width: 100%;
+  min-height: 320px;
+  height: 100%;
+  background: color-mix(in srgb, var(--vmz-surface-page, #f5f9fc) 88%, #fff);
+  border: 1px solid var(--vmz-line-default, rgba(0, 0, 0, 0.08));
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.live2d-stage canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<script client>
+import { createLive2dStage } from '@doki-land/live2d';
+
+let stageSeq = 0;
+
+export default class Live2dStage {
+  /** Append-only model sources; new entries spawn actors on the stage. */
+  public sources = [];
+  public updateMode = 'auto';
+  public prefer = ['canvas2d', 'webgl2', 'webgpu'];
+
+  hostId = `live2d-stage-${++stageSeq}`;
+  stage = null;
+  _canvas = null;
+  _applied = 0;
+  _syncTimer = 0;
+
+  onMount() {
+    void this.boot();
+    this._syncTimer = window.setInterval(() => this.syncSources(), 150);
+  }
+
+  onDestroy() {
+    if (this._syncTimer) clearInterval(this._syncTimer);
+    this._syncTimer = 0;
+    void this.stage?.destroy?.();
+    this.stage = null;
+    this._canvas = null;
+  }
+
+  ensureCanvas(host) {
+    host.replaceChildren();
+    const canvas = document.createElement('canvas');
+    const rect = host.getBoundingClientRect();
+    const w = Math.max(320, Math.round(rect.width || 640));
+    const h = Math.max(320, Math.round(rect.height || 480));
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.width = Math.max(1, Math.round(w * dpr));
+    canvas.height = Math.max(1, Math.round(h * dpr));
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    host.appendChild(canvas);
+    this._canvas = canvas;
+    return canvas;
+  }
+
+  async boot() {
+    const host = document.getElementById(this.hostId);
+    if (!host) return;
+    const canvas = this.ensureCanvas(host);
+    const stage = createLive2dStage({ updateMode: this.updateMode, prefer: this.prefer });
+    await stage.mount(canvas);
+    this.stage = stage;
+    await this.syncSources();
+  }
+
+  async syncSources() {
+    if (!this.stage) return;
+    const list = Array.isArray(this.sources) ? this.sources : [];
+    while (this._applied < list.length) {
+      const src = list[this._applied];
+      this._applied += 1;
+      if (!src) continue;
+      try {
+        const actor = this.stage.createActor();
+        await actor.load(src);
+      } catch {
+        /* skip failed actor; keep stage usable */
+      }
+    }
+  }
+}
+</script>

package/package.json

@@ -1,10 +1,42 @@
 {
   "name": "@vmz/plugin-live2d",
-  "version": "0.0.0",
-  "description": "live2d.ts placeholder — not for production use.",
+  "version": "0.0.17",
+  "description": "VMZ Live2D adapter — <Live2dHost> for @doki-land/live2d in VMZ applications",
+  "type": "module",
   "license": "MIT",
-  "private": false,
+  "homepage": "https://github.com/doki-land/live2d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/doki-land/live2d.ts.git",
+    "directory": "projects/adaptors/vmz-plugin-live2d"
+  },
+  "keywords": [
+    "vmz",
+    "plugin",
+    "live2d",
+    "doki-land"
+  ],
+  "main": "./vmz.plugin.ts",
+  "types": "./vmz.plugin.ts",
+  "exports": {
+    ".": {
+      "types": "./vmz.plugin.ts",
+      "default": "./vmz.plugin.ts"
+    }
+  },
   "files": [
+    "components",
+    "vmz.plugin.ts",
     "README.md"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@doki-land/live2d": "0.0.17",
+    "@vmz/plugin": "^0.1.8"
+  }
 }

package/vmz.plugin.ts

@@ -0,0 +1,71 @@
+import { definePlugin, loadPluginSource } from "@vmz/plugin";
+
+const hostSource = loadPluginSource(
+    import.meta.url,
+    "components/Live2dHost.vmz",
+);
+const stageSource = loadPluginSource(
+    import.meta.url,
+    "components/Live2dStage.vmz",
+);
+
+export default definePlugin({
+    name: "@vmz/plugin-live2d",
+    version: "0.1.0",
+    protocol: "0.1.0",
+    stages: ["workspace_resolve", "analyzer"],
+    deterministic: true,
+    async contribute(ctx) {
+        if (ctx.stage === "workspace_resolve") {
+            return {
+                stage: "workspace_resolve",
+                cacheKey: `@vmz/plugin-live2d:${hostSource.contentHash.slice(0, 8)}:${stageSource.contentHash.slice(0, 8)}`,
+                items: [
+                    {
+                        id: "component-live2d-host",
+                        kind: "source",
+                        path: "src/components/Live2dHost.vmz",
+                        content: hostSource.content,
+                        contentHash: hostSource.contentHash,
+                        materialize: true,
+                    },
+                    {
+                        id: "component-live2d-stage",
+                        kind: "source",
+                        path: "src/components/Live2dStage.vmz",
+                        content: stageSource.content,
+                        contentHash: stageSource.contentHash,
+                        materialize: true,
+                    },
+                ],
+            };
+        }
+        if (ctx.stage === "analyzer") {
+            return {
+                stage: "analyzer",
+                cacheKey: "@vmz/plugin-live2d:analyzer",
+                items: [
+                    {
+                        id: "component-live2d-host-online",
+                        kind: "analyzer",
+                        path: "src/components/Live2dHost.vmz",
+                        severity: "advice",
+                        message:
+                            "Live2dHost component online (@doki-land/live2d)",
+                        code: "vmz.plugin.live2d.host",
+                    },
+                    {
+                        id: "component-live2d-stage-online",
+                        kind: "analyzer",
+                        path: "src/components/Live2dStage.vmz",
+                        severity: "advice",
+                        message:
+                            "Live2dStage component online (@doki-land/live2d)",
+                        code: "vmz.plugin.live2d.stage",
+                    },
+                ],
+            };
+        }
+        return { stage: ctx.stage, items: [] };
+    },
+});