@doki-land/live2d-element 0.0.0 → 0.0.23

package/README.md

@@ -1,3 +1,37 @@
-# @doki-land/live2d-element
+# `@doki-land/live2d-element`
 
-Placeholder package (0.0.0). Reserved for doki-land/live2d.ts.
+Official `<live-2d>` Custom Element — thin host over `@doki-land/live2d` with Stage-owned RAF.
+
+## Status (Developer Preview)
+
+v0.0.22 thin gate: pure TypeScript `customElements.define('live-2d', …)`. Zero VMZ runtime dependency on this package or on `@doki-land/live2d*`.
+
+HTML Custom Elements require a hyphen; the registered tag is **`live-2d`** (not unhyphenated `live2d`). Design `01` still targets eventual `vmz build --target custom-element` when that CLI target ships.
+
+## Install
+
+```bash
+pnpm add @doki-land/live2d-element
+```
+
+## Usage
+
+```html
+<script type="module">
+  import "@doki-land/live2d-element";
+</script>
+<live-2d
+  model="/models/Wanko/Wanko.model3.json"
+  renderer="auto"
+  width="320"
+  height="320"
+  autoplay
+></live-2d>
+<script type="module">
+  const el = document.querySelector("live-2d");
+  el.addEventListener("live2d-ready", () => console.log("ready"));
+  el.addEventListener("live2d-error", (e) => console.error(e.detail));
+</script>
+```
+
+See `fixtures/index.html` for a native HTML dogfood page.

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import { Live2DRuntime } from '@doki-land/live2d';
+
+/** Idempotent `customElements.define('live-2d', …)`. */
+declare function defineLive2dElement(): void;
+
+declare const LIVE2D_ELEMENT_TAG: "live-2d";
+type Live2dElementRenderer = "auto" | "webgpu" | "webgl2" | "canvas2d";
+/**
+ * Thin `<live-2d>` host: attribute → createLive2D → Stage RAF → live2d-* events.
+ */
+declare class Live2dElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    get model(): string;
+    set model(value: string);
+    get renderer(): Live2dElementRenderer;
+    set renderer(value: Live2dElementRenderer);
+    get width(): number;
+    set width(value: number);
+    get height(): number;
+    set height(value: number);
+    get autoplay(): boolean;
+    set autoplay(value: boolean);
+    get runtime(): Live2DRuntime | null;
+    /** Imperative reload (also used when `model` attribute changes). */
+    loadModel(source?: string): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+}
+
+export { LIVE2D_ELEMENT_TAG, Live2dElement, type Live2dElementRenderer, defineLive2dElement };

package/dist/index.js

@@ -0,0 +1,253 @@
+// src/live2d-element.ts
+import { createLive2D } from "@doki-land/live2d";
+var LIVE2D_ELEMENT_TAG = "live-2d";
+var OBSERVED = ["model", "renderer", "width", "height", "autoplay"];
+function preferFromRenderer(renderer) {
+  if (renderer === "webgpu") return ["webgpu", "webgl2", "canvas2d"];
+  if (renderer === "webgl2") return ["webgl2", "canvas2d", "webgpu"];
+  if (renderer === "canvas2d") return ["canvas2d", "webgl2", "webgpu"];
+  return ["webgpu", "webgl2", "canvas2d"];
+}
+function parseBoolAttr(el, name, fallback) {
+  if (!el.hasAttribute(name)) return fallback;
+  const v = el.getAttribute(name);
+  if (v === null || v === "" || v === name) return true;
+  if (v === "false" || v === "0") return false;
+  return true;
+}
+var Live2dElement = class extends HTMLElement {
+  static get observedAttributes() {
+    return [...OBSERVED];
+  }
+  #runtime = null;
+  #canvas = null;
+  #mountGen = 0;
+  #model = "";
+  #renderer = "auto";
+  #width = 320;
+  #height = 320;
+  #autoplay = true;
+  #connected = false;
+  get model() {
+    return this.#model;
+  }
+  set model(value) {
+    const next = String(value ?? "");
+    if (next) this.setAttribute("model", next);
+    else this.removeAttribute("model");
+  }
+  get renderer() {
+    return this.#renderer;
+  }
+  set renderer(value) {
+    this.setAttribute("renderer", value || "auto");
+  }
+  get width() {
+    return this.#width;
+  }
+  set width(value) {
+    this.setAttribute("width", String(Math.max(1, Number(value) || 320)));
+  }
+  get height() {
+    return this.#height;
+  }
+  set height(value) {
+    this.setAttribute("height", String(Math.max(1, Number(value) || 320)));
+  }
+  get autoplay() {
+    return this.#autoplay;
+  }
+  set autoplay(value) {
+    if (value) this.setAttribute("autoplay", "");
+    else this.removeAttribute("autoplay");
+  }
+  get runtime() {
+    return this.#runtime;
+  }
+  /** Imperative reload (also used when `model` attribute changes). */
+  async loadModel(source) {
+    if (source !== void 0) {
+      this.model = String(source);
+    }
+    await this.#boot();
+  }
+  connectedCallback() {
+    this.#connected = true;
+    this.#ensureCanvas();
+    this.#readAttributes();
+    void this.#boot();
+  }
+  disconnectedCallback() {
+    this.#connected = false;
+    this.#mountGen += 1;
+    this.#destroyRuntime();
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "model") {
+      this.#model = value ?? "";
+      if (this.#connected) void this.#boot();
+      return;
+    }
+    if (name === "renderer") {
+      this.#renderer = value || "auto";
+      if (this.#connected) void this.#boot();
+      return;
+    }
+    if (name === "width") {
+      this.#width = Math.max(1, Number(value) || 320);
+      this.#syncCanvasSize();
+      return;
+    }
+    if (name === "height") {
+      this.#height = Math.max(1, Number(value) || 320);
+      this.#syncCanvasSize();
+      return;
+    }
+    if (name === "autoplay") {
+      this.#autoplay = parseBoolAttr(this, "autoplay", true);
+      if (this.#runtime) {
+        if (this.#autoplay) this.#runtime.stage.start();
+        else this.#runtime.stage.pause();
+      }
+    }
+  }
+  #readAttributes() {
+    if (this.hasAttribute("model")) {
+      this.#model = this.getAttribute("model") ?? "";
+    }
+    if (this.hasAttribute("renderer")) {
+      this.#renderer = this.getAttribute("renderer") || "auto";
+    }
+    if (this.hasAttribute("width")) {
+      this.#width = Math.max(
+        1,
+        Number(this.getAttribute("width")) || 320
+      );
+    }
+    if (this.hasAttribute("height")) {
+      this.#height = Math.max(
+        1,
+        Number(this.getAttribute("height")) || 320
+      );
+    }
+    this.#autoplay = parseBoolAttr(this, "autoplay", true);
+  }
+  #ensureCanvas() {
+    if (this.#canvas?.isConnected) return this.#canvas;
+    this.replaceChildren();
+    const canvas = document.createElement("canvas");
+    canvas.setAttribute("part", "canvas");
+    this.appendChild(canvas);
+    this.#canvas = canvas;
+    this.#syncCanvasSize();
+    return canvas;
+  }
+  #syncCanvasSize() {
+    const canvas = this.#canvas;
+    if (!canvas) return;
+    const dpr = typeof globalThis.devicePixelRatio === "number" ? Math.min(globalThis.devicePixelRatio, 2) : 1;
+    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`;
+    this.style.display = this.style.display || "inline-block";
+    this.#runtime?.stage.resize?.(this.#width, this.#height);
+  }
+  #destroyRuntime() {
+    try {
+      this.#runtime?.stage.stop?.();
+    } catch {
+    }
+    this.#runtime?.destroy?.();
+    this.#runtime = null;
+    this.removeAttribute("data-phase");
+    this.removeAttribute("aria-busy");
+  }
+  async #boot() {
+    if (!this.#connected) return;
+    const model = this.#model.trim();
+    if (!model) return;
+    const gen = ++this.#mountGen;
+    this.#destroyRuntime();
+    const canvas = this.#ensureCanvas();
+    this.setAttribute("data-phase", "loading");
+    this.setAttribute("aria-busy", "true");
+    try {
+      const runtime = createLive2D({
+        prefer: preferFromRenderer(this.#renderer),
+        updateMode: "auto"
+      });
+      if (gen !== this.#mountGen) {
+        runtime.destroy();
+        return;
+      }
+      runtime.events.on("ready", () => {
+        if (gen !== this.#mountGen) return;
+        this.setAttribute("data-phase", "live");
+        this.setAttribute("aria-busy", "false");
+        if (this.#autoplay) {
+          try {
+            runtime.stage.start();
+          } catch {
+          }
+        }
+        this.dispatchEvent(
+          new CustomEvent("live2d-ready", {
+            bubbles: true,
+            composed: true,
+            detail: { model }
+          })
+        );
+      });
+      runtime.events.on("error", (payload) => {
+        if (gen !== this.#mountGen) return;
+        this.#emitError(payload?.error ?? "load error");
+      });
+      runtime.mount(canvas);
+      await runtime.loadModel(model);
+      if (gen !== this.#mountGen) {
+        runtime.destroy();
+        return;
+      }
+      this.#runtime = runtime;
+    } catch (err) {
+      if (gen !== this.#mountGen) return;
+      this.#emitError(err);
+    }
+  }
+  #emitError(error) {
+    this.setAttribute("data-phase", "error");
+    this.setAttribute("aria-busy", "false");
+    this.dispatchEvent(
+      new CustomEvent("live2d-error", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          error: error instanceof Error ? error.message : String(error),
+          cause: error
+        }
+      })
+    );
+  }
+};
+
+// src/define.ts
+var defined = false;
+function defineLive2dElement() {
+  if (defined) return;
+  if (typeof customElements === "undefined") return;
+  if (customElements.get(LIVE2D_ELEMENT_TAG)) {
+    defined = true;
+    return;
+  }
+  customElements.define(LIVE2D_ELEMENT_TAG, Live2dElement);
+  defined = true;
+}
+
+// src/index.ts
+defineLive2dElement();
+export {
+  LIVE2D_ELEMENT_TAG,
+  Live2dElement,
+  defineLive2dElement
+};

package/fixtures/index.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>&lt;live-2d&gt; element fixture</title>
+    <style>
+      :root {
+        color-scheme: light;
+        font-family: "Segoe UI", system-ui, sans-serif;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-content: center;
+        gap: 1rem;
+        background: linear-gradient(160deg, #f7f3ea, #dce9f4);
+      }
+      h1 {
+        margin: 0;
+        font-size: 1.25rem;
+        font-weight: 650;
+      }
+      #log {
+        max-width: 40rem;
+        font: 0.85rem/1.4 ui-monospace, monospace;
+        white-space: pre-wrap;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>live2d.ts &lt;live-2d&gt; fixture</h1>
+    <!-- Point model at a served model3.json (homepage public models or CDN). -->
+    <live-2d
+      id="actor"
+      model="/models/samples/moc3-wanko/Wanko.model3.json"
+      renderer="auto"
+      width="320"
+      height="320"
+      autoplay
+    ></live-2d>
+    <pre id="log">waiting…</pre>
+    <script type="module">
+      // Dev: resolve via workspace package entry after `pnpm install`.
+      import "@doki-land/live2d-element";
+
+      const log = document.getElementById("log");
+      const el = document.getElementById("actor");
+      el.addEventListener("live2d-ready", (e) => {
+        log.textContent = `live2d-ready ${JSON.stringify(e.detail)}`;
+      });
+      el.addEventListener("live2d-error", (e) => {
+        log.textContent = `live2d-error ${e.detail?.error ?? e.detail}`;
+      });
+    </script>
+  </body>
+</html>

package/package.json

@@ -1,10 +1,54 @@
 {
   "name": "@doki-land/live2d-element",
-  "version": "0.0.0",
-  "description": "live2d.ts placeholder — not for production use.",
+  "version": "0.0.23",
+  "description": "Official <live-2d> Custom Element — thin host over @doki-land/live2d (Stage-owned RAF).",
+  "type": "module",
   "license": "MIT",
-  "private": false,
+  "author": "Doki Land",
+  "homepage": "https://github.com/doki-land/live2d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/doki-land/live2d.ts.git",
+    "directory": "projects/live2d-element"
+  },
+  "keywords": [
+    "live2d",
+    "custom-element",
+    "web-components",
+    "doki-land"
+  ],
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
   "files": [
+    "dist",
+    "src",
+    "fixtures",
     "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      }
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@doki-land/live2d": "0.0.23"
+  },
+  "sideEffects": [
+    "./src/index.ts",
+    "./dist/index.js"
   ]
 }

package/src/define.ts

@@ -0,0 +1,15 @@
+import { LIVE2D_ELEMENT_TAG, Live2dElement } from "./live2d-element.js";
+
+let defined = false;
+
+/** Idempotent `customElements.define('live-2d', …)`. */
+export function defineLive2dElement(): void {
+    if (defined) return;
+    if (typeof customElements === "undefined") return;
+    if (customElements.get(LIVE2D_ELEMENT_TAG)) {
+        defined = true;
+        return;
+    }
+    customElements.define(LIVE2D_ELEMENT_TAG, Live2dElement);
+    defined = true;
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+/**
+ * `@doki-land/live2d-element` — official `<live-2d>` Custom Element.
+ *
+ * v0.0.22 thin gate: pure TypeScript CE wrapping `@doki-land/live2d`
+ * (`createLive2D` + Stage-owned RAF). Zero VMZ runtime dependency.
+ * Design `01` still targets eventual `vmz build --target custom-element`
+ * when that CLI target ships in published `@vmz/vmz`; until then this
+ * package is the cross-ecosystem ABI skeleton.
+ */
+
+export { defineLive2dElement } from "./define.js";
+export {
+    LIVE2D_ELEMENT_TAG,
+    Live2dElement,
+    type Live2dElementRenderer,
+} from "./live2d-element.js";
+
+import { defineLive2dElement } from "./define.js";
+
+/** Side-effect registration for `<script type="module">` consumers. */
+defineLive2dElement();

package/src/live2d-element.ts

@@ -0,0 +1,281 @@
+import { createLive2D, type Live2DRuntime } from "@doki-land/live2d";
+
+export const LIVE2D_ELEMENT_TAG = "live-2d" as const;
+
+export type Live2dElementRenderer = "auto" | "webgpu" | "webgl2" | "canvas2d";
+
+const OBSERVED = ["model", "renderer", "width", "height", "autoplay"] as const;
+
+function preferFromRenderer(
+    renderer: Live2dElementRenderer,
+): Array<"webgpu" | "webgl2" | "canvas2d"> {
+    if (renderer === "webgpu") return ["webgpu", "webgl2", "canvas2d"];
+    if (renderer === "webgl2") return ["webgl2", "canvas2d", "webgpu"];
+    if (renderer === "canvas2d") return ["canvas2d", "webgl2", "webgpu"];
+    return ["webgpu", "webgl2", "canvas2d"];
+}
+
+function parseBoolAttr(
+    el: HTMLElement,
+    name: string,
+    fallback: boolean,
+): boolean {
+    if (!el.hasAttribute(name)) return fallback;
+    const v = el.getAttribute(name);
+    if (v === null || v === "" || v === name) return true;
+    if (v === "false" || v === "0") return false;
+    return true;
+}
+
+/**
+ * Thin `<live-2d>` host: attribute → createLive2D → Stage RAF → live2d-* events.
+ */
+export class Live2dElement extends HTMLElement {
+    static get observedAttributes(): string[] {
+        return [...OBSERVED];
+    }
+
+    #runtime: Live2DRuntime | null = null;
+    #canvas: HTMLCanvasElement | null = null;
+    #mountGen = 0;
+    #model = "";
+    #renderer: Live2dElementRenderer = "auto";
+    #width = 320;
+    #height = 320;
+    #autoplay = true;
+    #connected = false;
+
+    get model(): string {
+        return this.#model;
+    }
+    set model(value: string) {
+        const next = String(value ?? "");
+        if (next) this.setAttribute("model", next);
+        else this.removeAttribute("model");
+    }
+
+    get renderer(): Live2dElementRenderer {
+        return this.#renderer;
+    }
+    set renderer(value: Live2dElementRenderer) {
+        this.setAttribute("renderer", (value || "auto") as string);
+    }
+
+    get width(): number {
+        return this.#width;
+    }
+    set width(value: number) {
+        this.setAttribute("width", String(Math.max(1, Number(value) || 320)));
+    }
+
+    get height(): number {
+        return this.#height;
+    }
+    set height(value: number) {
+        this.setAttribute("height", String(Math.max(1, Number(value) || 320)));
+    }
+
+    get autoplay(): boolean {
+        return this.#autoplay;
+    }
+    set autoplay(value: boolean) {
+        if (value) this.setAttribute("autoplay", "");
+        else this.removeAttribute("autoplay");
+    }
+
+    get runtime(): Live2DRuntime | null {
+        return this.#runtime;
+    }
+
+    /** Imperative reload (also used when `model` attribute changes). */
+    async loadModel(source?: string): Promise<void> {
+        if (source !== undefined) {
+            this.model = String(source);
+        }
+        await this.#boot();
+    }
+
+    connectedCallback(): void {
+        this.#connected = true;
+        this.#ensureCanvas();
+        this.#readAttributes();
+        void this.#boot();
+    }
+
+    disconnectedCallback(): void {
+        this.#connected = false;
+        this.#mountGen += 1;
+        this.#destroyRuntime();
+    }
+
+    attributeChangedCallback(
+        name: string,
+        _old: string | null,
+        value: string | null,
+    ): void {
+        if (name === "model") {
+            this.#model = value ?? "";
+            if (this.#connected) void this.#boot();
+            return;
+        }
+        if (name === "renderer") {
+            this.#renderer = (value || "auto") as Live2dElementRenderer;
+            if (this.#connected) void this.#boot();
+            return;
+        }
+        if (name === "width") {
+            this.#width = Math.max(1, Number(value) || 320);
+            this.#syncCanvasSize();
+            return;
+        }
+        if (name === "height") {
+            this.#height = Math.max(1, Number(value) || 320);
+            this.#syncCanvasSize();
+            return;
+        }
+        if (name === "autoplay") {
+            this.#autoplay = parseBoolAttr(this, "autoplay", true);
+            if (this.#runtime) {
+                if (this.#autoplay) this.#runtime.stage.start();
+                else this.#runtime.stage.pause();
+            }
+        }
+    }
+
+    #readAttributes(): void {
+        if (this.hasAttribute("model")) {
+            this.#model = this.getAttribute("model") ?? "";
+        }
+        if (this.hasAttribute("renderer")) {
+            this.#renderer = (this.getAttribute("renderer") ||
+                "auto") as Live2dElementRenderer;
+        }
+        if (this.hasAttribute("width")) {
+            this.#width = Math.max(
+                1,
+                Number(this.getAttribute("width")) || 320,
+            );
+        }
+        if (this.hasAttribute("height")) {
+            this.#height = Math.max(
+                1,
+                Number(this.getAttribute("height")) || 320,
+            );
+        }
+        this.#autoplay = parseBoolAttr(this, "autoplay", true);
+    }
+
+    #ensureCanvas(): HTMLCanvasElement {
+        if (this.#canvas?.isConnected) return this.#canvas;
+        this.replaceChildren();
+        const canvas = document.createElement("canvas");
+        canvas.setAttribute("part", "canvas");
+        this.appendChild(canvas);
+        this.#canvas = canvas;
+        this.#syncCanvasSize();
+        return canvas;
+    }
+
+    #syncCanvasSize(): void {
+        const canvas = this.#canvas;
+        if (!canvas) return;
+        const dpr =
+            typeof globalThis.devicePixelRatio === "number"
+                ? Math.min(globalThis.devicePixelRatio, 2)
+                : 1;
+        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`;
+        this.style.display = this.style.display || "inline-block";
+        this.#runtime?.stage.resize?.(this.#width, this.#height);
+    }
+
+    #destroyRuntime(): void {
+        try {
+            this.#runtime?.stage.stop?.();
+        } catch {
+            /* manual / already stopped */
+        }
+        this.#runtime?.destroy?.();
+        this.#runtime = null;
+        this.removeAttribute("data-phase");
+        this.removeAttribute("aria-busy");
+    }
+
+    async #boot(): Promise<void> {
+        if (!this.#connected) return;
+        const model = this.#model.trim();
+        if (!model) return;
+
+        const gen = ++this.#mountGen;
+        this.#destroyRuntime();
+
+        const canvas = this.#ensureCanvas();
+        this.setAttribute("data-phase", "loading");
+        this.setAttribute("aria-busy", "true");
+
+        try {
+            const runtime = createLive2D({
+                prefer: preferFromRenderer(this.#renderer),
+                updateMode: "auto",
+            });
+            if (gen !== this.#mountGen) {
+                runtime.destroy();
+                return;
+            }
+
+            runtime.events.on("ready", () => {
+                if (gen !== this.#mountGen) return;
+                this.setAttribute("data-phase", "live");
+                this.setAttribute("aria-busy", "false");
+                if (this.#autoplay) {
+                    try {
+                        runtime.stage.start();
+                    } catch {
+                        /* already running */
+                    }
+                }
+                this.dispatchEvent(
+                    new CustomEvent("live2d-ready", {
+                        bubbles: true,
+                        composed: true,
+                        detail: { model },
+                    }),
+                );
+            });
+
+            runtime.events.on("error", (payload) => {
+                if (gen !== this.#mountGen) return;
+                this.#emitError(payload?.error ?? "load error");
+            });
+
+            runtime.mount(canvas);
+            await runtime.loadModel(model);
+            if (gen !== this.#mountGen) {
+                runtime.destroy();
+                return;
+            }
+            this.#runtime = runtime;
+        } catch (err) {
+            if (gen !== this.#mountGen) return;
+            this.#emitError(err);
+        }
+    }
+
+    #emitError(error: unknown): void {
+        this.setAttribute("data-phase", "error");
+        this.setAttribute("aria-busy", "false");
+        this.dispatchEvent(
+            new CustomEvent("live2d-error", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    error:
+                        error instanceof Error ? error.message : String(error),
+                    cause: error,
+                },
+            }),
+        );
+    }
+}