@doki-land/live2d-element 0.0.25 → 0.0.26

package/README.md

@@ -28,6 +28,7 @@ pnpm add @doki-land/live2d-element
   width="320"
   height="320"
   autoplay
+  autosway
   interactive
   tracking="pointer"
 ></live-2d>
@@ -35,7 +36,10 @@ pnpm add @doki-land/live2d-element
   const el = document.querySelector("live-2d");
   el.addEventListener("live2d-ready", () => console.log("ready"));
   el.addEventListener("live2d-hit", (e) => console.log(e.detail));
+  el.addEventListener("live2d-progress", (e) => console.log(e.detail));
+  el.addEventListener("live2d-profile", (e) => console.log(e.detail));
   el.addEventListener("live2d-error", (e) => console.error(e.detail));
+  // Properties: source / renderOptions (complex ModelSource + prefer order)
   // Methods: loadModel / playMotion / setExpression / lookAt / pause / resume
 </script>
 ```

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Live2dRuntime, PlayMotionOptions } from '@doki-land/live2d';
+import { ModelSource, RendererKind, Live2dRuntime, PlayMotionOptions } from '@doki-land/live2d';
 
 /** Idempotent `customElements.define('live-2d', …)`. */
 declare function defineLive2dElement(): void;
@@ -10,6 +10,9 @@ declare function defineLive2dElements(): void;
 declare const LIVE2D_ELEMENT_TAG: "live-2d";
 type Live2dElementRenderer = "auto" | "webgpu" | "webgl2" | "canvas2d";
 type Live2dElementTracking = "pointer" | "none";
+interface Live2dElementRenderOptions {
+    prefer?: RendererKind[];
+}
 /**
  * Thin `<live-2d>` host: attribute → createLive2d → Stage RAF → live2d-* events.
  */
@@ -18,6 +21,11 @@ declare class Live2dElement extends HTMLElement {
     static get observedAttributes(): string[];
     get model(): string;
     set model(value: string);
+    /** Structured model source (property-only; not reflected to attributes). */
+    get source(): ModelSource | null;
+    set source(value: ModelSource | null);
+    get renderOptions(): Live2dElementRenderOptions | null;
+    set renderOptions(value: Live2dElementRenderOptions | null);
     get renderer(): Live2dElementRenderer;
     set renderer(value: Live2dElementRenderer);
     get width(): number;
@@ -26,13 +34,15 @@ declare class Live2dElement extends HTMLElement {
     set height(value: number);
     get autoplay(): boolean;
     set autoplay(value: boolean);
+    get autosway(): boolean;
+    set autosway(value: boolean);
     get interactive(): boolean;
     set interactive(value: boolean);
     get tracking(): Live2dElementTracking;
     set tracking(value: Live2dElementTracking);
     get runtime(): Live2dRuntime | null;
-    /** Imperative reload (also used when `model` attribute changes). */
-    loadModel(source?: string, opts?: {
+    /** Imperative reload (also used when `model` / `source` changes). */
+    loadModel(source?: ModelSource | string, opts?: {
         signal?: AbortSignal;
     }): Promise<void>;
     playMotion(group: string, index?: number, options?: PlayMotionOptions): Promise<boolean>;
@@ -72,4 +82,4 @@ declare class Live2dWidgetElement extends HTMLElement {
     attributeChangedCallback(): void;
 }
 
-export { LIVE2D_ELEMENT_TAG, LIVE2D_WIDGET_ELEMENT_TAG, Live2dElement, type Live2dElementRenderer, type Live2dElementTracking, Live2dWidgetElement, defineLive2dElement, defineLive2dElements, defineLive2dWidgetElement };
+export { LIVE2D_ELEMENT_TAG, LIVE2D_WIDGET_ELEMENT_TAG, Live2dElement, type Live2dElementRenderOptions, type Live2dElementRenderer, type Live2dElementTracking, Live2dWidgetElement, defineLive2dElement, defineLive2dElements, defineLive2dWidgetElement };

package/dist/index.js

@@ -9,6 +9,7 @@ var OBSERVED = [
   "width",
   "height",
   "autoplay",
+  "autosway",
   "interactive",
   "tracking"
 ];
@@ -25,6 +26,18 @@ function parseBoolAttr(el, name, fallback) {
   if (v === "false" || v === "0") return false;
   return true;
 }
+function sourceLabel(source) {
+  if (typeof source === "string") return source;
+  if (source.kind === "url") return source.url;
+  if (source.kind === "npm") {
+    const path = source.path.replace(/^\/+/, "");
+    return `npm:${source.package}/${path}`;
+  }
+  return source.baseUrl;
+}
+function swayAngleX(binding, normalized) {
+  return normalized >= 0 ? binding.defaultValue + (binding.max - binding.defaultValue) * normalized : binding.defaultValue + (binding.defaultValue - binding.min) * normalized;
+}
 var Live2dElement = class extends HTMLElement {
   static get observedAttributes() {
     return [...OBSERVED];
@@ -33,23 +46,44 @@ var Live2dElement = class extends HTMLElement {
   #canvas = null;
   #mountGen = 0;
   #model = "";
+  #sourceProperty = null;
+  #renderOptions = null;
   #renderer = "auto";
   #width = 320;
   #height = 320;
   #autoplay = true;
+  #autosway = false;
   #interactive = false;
   #tracking = "none";
   #connected = false;
   #boundPointer = null;
   #unsubs = [];
+  #unsubFrame = null;
+  #swayPhase = 0;
   get model() {
     return this.#model;
   }
   set model(value) {
     const next = String(value ?? "");
+    this.#sourceProperty = null;
     if (next) this.setAttribute("model", next);
     else this.removeAttribute("model");
   }
+  /** Structured model source (property-only; not reflected to attributes). */
+  get source() {
+    return this.#sourceProperty;
+  }
+  set source(value) {
+    this.#sourceProperty = value;
+    if (this.#connected) void this.#boot();
+  }
+  get renderOptions() {
+    return this.#renderOptions;
+  }
+  set renderOptions(value) {
+    this.#renderOptions = value;
+    if (this.#connected && this.#resolveLoadSource()) void this.#boot();
+  }
   get renderer() {
     return this.#renderer;
   }
@@ -75,6 +109,13 @@ var Live2dElement = class extends HTMLElement {
     if (value) this.setAttribute("autoplay", "");
     else this.removeAttribute("autoplay");
   }
+  get autosway() {
+    return this.#autosway;
+  }
+  set autosway(value) {
+    if (value) this.setAttribute("autosway", "");
+    else this.removeAttribute("autosway");
+  }
   get interactive() {
     return this.#interactive;
   }
@@ -91,10 +132,14 @@ var Live2dElement = class extends HTMLElement {
   get runtime() {
     return this.#runtime;
   }
-  /** Imperative reload (also used when `model` attribute changes). */
+  /** Imperative reload (also used when `model` / `source` changes). */
   async loadModel(source, opts) {
     if (source !== void 0) {
-      this.model = String(source);
+      if (typeof source === "string") {
+        this.model = source;
+      } else {
+        this.#sourceProperty = source;
+      }
     }
     await this.#boot(opts?.signal);
   }
@@ -136,6 +181,7 @@ var Live2dElement = class extends HTMLElement {
   attributeChangedCallback(name, _old, value) {
     if (name === "model") {
       this.#model = value ?? "";
+      this.#sourceProperty = null;
       if (this.#connected) void this.#boot();
       return;
     }
@@ -162,6 +208,11 @@ var Live2dElement = class extends HTMLElement {
       }
       return;
     }
+    if (name === "autosway") {
+      this.#autosway = parseBoolAttr(this, "autosway", false);
+      this.#syncAutosway(this.#runtime, this.#mountGen);
+      return;
+    }
     if (name === "interactive") {
       this.#interactive = parseBoolAttr(this, "interactive", false);
       this.#syncPointer();
@@ -192,9 +243,20 @@ var Live2dElement = class extends HTMLElement {
       );
     }
     this.#autoplay = parseBoolAttr(this, "autoplay", true);
+    this.#autosway = parseBoolAttr(this, "autosway", false);
     this.#interactive = parseBoolAttr(this, "interactive", false);
     this.#tracking = this.getAttribute("tracking") === "pointer" ? "pointer" : "none";
   }
+  #resolveLoadSource() {
+    if (this.#sourceProperty != null) return this.#sourceProperty;
+    const model = this.#model.trim();
+    return model ? model : null;
+  }
+  #resolvePrefer() {
+    const prefer = this.#renderOptions?.prefer;
+    if (prefer?.length) return [...prefer];
+    return preferFromRenderer(this.#renderer);
+  }
   #ensureCanvas() {
     if (this.#canvas?.isConnected) return this.#canvas;
     this.replaceChildren();
@@ -232,6 +294,23 @@ var Live2dElement = class extends HTMLElement {
     }
     this.#boundPointer = null;
   }
+  #syncAutosway(runtime, gen) {
+    this.#unsubFrame?.();
+    this.#unsubFrame = null;
+    if (!runtime || !this.#autosway) return;
+    this.#swayPhase = 0;
+    this.#unsubFrame = runtime.stage.onFrame((dt) => {
+      if (gen !== this.#mountGen) return;
+      this.#swayPhase += dt;
+      const binding = runtime.actor.parameterMap().get("PARAM_ANGLE_X");
+      if (!binding) return;
+      const normalized = Math.sin(this.#swayPhase) * 0.25;
+      runtime.setParameter(
+        "PARAM_ANGLE_X",
+        swayAngleX(binding, normalized)
+      );
+    });
+  }
   #syncPointer() {
     this.#detachPointer();
     const canvas = this.#canvas;
@@ -271,6 +350,8 @@ var Live2dElement = class extends HTMLElement {
   }
   #destroyRuntime() {
     this.#clearUnsubs();
+    this.#unsubFrame?.();
+    this.#unsubFrame = null;
     this.#detachPointer();
     try {
       this.#runtime?.stage.stop?.();
@@ -283,8 +364,8 @@ var Live2dElement = class extends HTMLElement {
   }
   async #boot(signal) {
     if (!this.#connected) return;
-    const model = this.#model.trim();
-    if (!model) return;
+    const source = this.#resolveLoadSource();
+    if (!source) return;
     const gen = ++this.#mountGen;
     this.#destroyRuntime();
     if (signal?.aborted) {
@@ -297,11 +378,12 @@ var Live2dElement = class extends HTMLElement {
     };
     signal?.addEventListener("abort", onAbort, { once: true });
     const canvas = this.#ensureCanvas();
+    const sourceLabelText = sourceLabel(source);
     this.setAttribute("data-phase", "loading");
     this.setAttribute("aria-busy", "true");
     try {
       const runtime = createLive2d({
-        prefer: preferFromRenderer(this.#renderer),
+        prefer: this.#resolvePrefer(),
         updateMode: "auto"
       });
       if (gen !== this.#mountGen) {
@@ -319,12 +401,13 @@ var Live2dElement = class extends HTMLElement {
             } catch {
             }
           }
+          this.#syncAutosway(runtime, gen);
           this.#syncPointer();
           this.dispatchEvent(
             new CustomEvent("live2d-ready", {
               bubbles: true,
               composed: true,
-              detail: { model }
+              detail: { model: sourceLabelText }
             })
           );
         })
@@ -335,6 +418,30 @@ var Live2dElement = class extends HTMLElement {
           this.#emitError(payload?.error ?? "load error");
         })
       );
+      this.#unsubs.push(
+        runtime.events.on("progress", (payload) => {
+          if (gen !== this.#mountGen) return;
+          this.dispatchEvent(
+            new CustomEvent("live2d-progress", {
+              bubbles: true,
+              composed: true,
+              detail: payload
+            })
+          );
+        })
+      );
+      this.#unsubs.push(
+        runtime.events.on("profile", (payload) => {
+          if (gen !== this.#mountGen) return;
+          this.dispatchEvent(
+            new CustomEvent("live2d-profile", {
+              bubbles: true,
+              composed: true,
+              detail: payload
+            })
+          );
+        })
+      );
       this.#unsubs.push(
         runtime.events.on("motion:start", (payload) => {
           if (gen !== this.#mountGen) return;
@@ -360,12 +467,13 @@ var Live2dElement = class extends HTMLElement {
         })
       );
       runtime.mount(canvas);
-      await runtime.loadModel(model, void 0, { signal });
+      await runtime.loadModel(source, void 0, { signal });
       if (gen !== this.#mountGen) {
         runtime.destroy();
         return;
       }
       this.#runtime = runtime;
+      this.#syncAutosway(runtime, gen);
       this.#syncPointer();
     } catch (err) {
       if (gen !== this.#mountGen) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doki-land/live2d-element",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Official <live-2d> Custom Element — thin host over @doki-land/live2d (Stage-owned RAF).",
   "type": "module",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "test": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@doki-land/live2d": "0.0.25"
+    "@doki-land/live2d": "0.0.26"
   },
   "sideEffects": [
     "./src/index.ts",

package/src/index.ts

@@ -15,6 +15,7 @@ export {
     LIVE2D_ELEMENT_TAG,
     Live2dElement,
     type Live2dElementRenderer,
+    type Live2dElementRenderOptions,
     type Live2dElementTracking,
 } from "./live2d-element.js";
 export {

package/src/live2d-element.ts

@@ -1,7 +1,9 @@
 import {
     createLive2d,
     type Live2dRuntime,
+    type ModelSource,
     type PlayMotionOptions,
+    type RendererKind,
 } from "@doki-land/live2d";
 
 export const LIVE2D_ELEMENT_TAG = "live-2d" as const;
@@ -9,12 +11,17 @@ export const LIVE2D_ELEMENT_TAG = "live-2d" as const;
 export type Live2dElementRenderer = "auto" | "webgpu" | "webgl2" | "canvas2d";
 export type Live2dElementTracking = "pointer" | "none";
 
+export interface Live2dElementRenderOptions {
+    prefer?: RendererKind[];
+}
+
 const OBSERVED = [
     "model",
     "renderer",
     "width",
     "height",
     "autoplay",
+    "autosway",
     "interactive",
     "tracking",
 ] as const;
@@ -40,6 +47,31 @@ function parseBoolAttr(
     return true;
 }
 
+function sourceLabel(source: ModelSource): string {
+    if (typeof source === "string") return source;
+    if (source.kind === "url") return source.url;
+    if (source.kind === "npm") {
+        const path = source.path.replace(/^\/+/, "");
+        return `npm:${source.package}/${path}`;
+    }
+    return source.baseUrl;
+}
+
+function swayAngleX(
+    binding: {
+        defaultValue: number;
+        min: number;
+        max: number;
+    },
+    normalized: number,
+): number {
+    return normalized >= 0
+        ? binding.defaultValue +
+              (binding.max - binding.defaultValue) * normalized
+        : binding.defaultValue +
+              (binding.defaultValue - binding.min) * normalized;
+}
+
 /**
  * Thin `<live-2d>` host: attribute → createLive2d → Stage RAF → live2d-* events.
  */
@@ -52,25 +84,48 @@ export class Live2dElement extends HTMLElement {
     #canvas: HTMLCanvasElement | null = null;
     #mountGen = 0;
     #model = "";
+    #sourceProperty: ModelSource | null = null;
+    #renderOptions: Live2dElementRenderOptions | null = null;
     #renderer: Live2dElementRenderer = "auto";
     #width = 320;
     #height = 320;
     #autoplay = true;
+    #autosway = false;
     #interactive = false;
     #tracking: Live2dElementTracking = "none";
     #connected = false;
     #boundPointer: ((event: PointerEvent) => void) | null = null;
     #unsubs: Array<() => void> = [];
+    #unsubFrame: (() => void) | null = null;
+    #swayPhase = 0;
 
     get model(): string {
         return this.#model;
     }
     set model(value: string) {
         const next = String(value ?? "");
+        this.#sourceProperty = null;
         if (next) this.setAttribute("model", next);
         else this.removeAttribute("model");
     }
 
+    /** Structured model source (property-only; not reflected to attributes). */
+    get source(): ModelSource | null {
+        return this.#sourceProperty;
+    }
+    set source(value: ModelSource | null) {
+        this.#sourceProperty = value;
+        if (this.#connected) void this.#boot();
+    }
+
+    get renderOptions(): Live2dElementRenderOptions | null {
+        return this.#renderOptions;
+    }
+    set renderOptions(value: Live2dElementRenderOptions | null) {
+        this.#renderOptions = value;
+        if (this.#connected && this.#resolveLoadSource()) void this.#boot();
+    }
+
     get renderer(): Live2dElementRenderer {
         return this.#renderer;
     }
@@ -100,6 +155,14 @@ export class Live2dElement extends HTMLElement {
         else this.removeAttribute("autoplay");
     }
 
+    get autosway(): boolean {
+        return this.#autosway;
+    }
+    set autosway(value: boolean) {
+        if (value) this.setAttribute("autosway", "");
+        else this.removeAttribute("autosway");
+    }
+
     get interactive(): boolean {
         return this.#interactive;
     }
@@ -119,13 +182,17 @@ export class Live2dElement extends HTMLElement {
         return this.#runtime;
     }
 
-    /** Imperative reload (also used when `model` attribute changes). */
+    /** Imperative reload (also used when `model` / `source` changes). */
     async loadModel(
-        source?: string,
+        source?: ModelSource | string,
         opts?: { signal?: AbortSignal },
     ): Promise<void> {
         if (source !== undefined) {
-            this.model = String(source);
+            if (typeof source === "string") {
+                this.model = source;
+            } else {
+                this.#sourceProperty = source;
+            }
         }
         await this.#boot(opts?.signal);
     }
@@ -187,6 +254,7 @@ export class Live2dElement extends HTMLElement {
     ): void {
         if (name === "model") {
             this.#model = value ?? "";
+            this.#sourceProperty = null;
             if (this.#connected) void this.#boot();
             return;
         }
@@ -213,6 +281,11 @@ export class Live2dElement extends HTMLElement {
             }
             return;
         }
+        if (name === "autosway") {
+            this.#autosway = parseBoolAttr(this, "autosway", false);
+            this.#syncAutosway(this.#runtime, this.#mountGen);
+            return;
+        }
         if (name === "interactive") {
             this.#interactive = parseBoolAttr(this, "interactive", false);
             this.#syncPointer();
@@ -245,11 +318,24 @@ export class Live2dElement extends HTMLElement {
             );
         }
         this.#autoplay = parseBoolAttr(this, "autoplay", true);
+        this.#autosway = parseBoolAttr(this, "autosway", false);
         this.#interactive = parseBoolAttr(this, "interactive", false);
         this.#tracking =
             this.getAttribute("tracking") === "pointer" ? "pointer" : "none";
     }
 
+    #resolveLoadSource(): ModelSource | null {
+        if (this.#sourceProperty != null) return this.#sourceProperty;
+        const model = this.#model.trim();
+        return model ? model : null;
+    }
+
+    #resolvePrefer(): RendererKind[] {
+        const prefer = this.#renderOptions?.prefer;
+        if (prefer?.length) return [...prefer];
+        return preferFromRenderer(this.#renderer);
+    }
+
     #ensureCanvas(): HTMLCanvasElement {
         if (this.#canvas?.isConnected) return this.#canvas;
         this.replaceChildren();
@@ -295,6 +381,24 @@ export class Live2dElement extends HTMLElement {
         this.#boundPointer = null;
     }
 
+    #syncAutosway(runtime: Live2dRuntime | null, gen: number): void {
+        this.#unsubFrame?.();
+        this.#unsubFrame = null;
+        if (!runtime || !this.#autosway) return;
+        this.#swayPhase = 0;
+        this.#unsubFrame = runtime.stage.onFrame((dt) => {
+            if (gen !== this.#mountGen) return;
+            this.#swayPhase += dt;
+            const binding = runtime.actor.parameterMap().get("PARAM_ANGLE_X");
+            if (!binding) return;
+            const normalized = Math.sin(this.#swayPhase) * 0.25;
+            runtime.setParameter(
+                "PARAM_ANGLE_X",
+                swayAngleX(binding, normalized),
+            );
+        });
+    }
+
     #syncPointer(): void {
         this.#detachPointer();
         const canvas = this.#canvas;
@@ -336,6 +440,8 @@ export class Live2dElement extends HTMLElement {
 
     #destroyRuntime(): void {
         this.#clearUnsubs();
+        this.#unsubFrame?.();
+        this.#unsubFrame = null;
         this.#detachPointer();
         try {
             this.#runtime?.stage.stop?.();
@@ -350,8 +456,8 @@ export class Live2dElement extends HTMLElement {
 
     async #boot(signal?: AbortSignal): Promise<void> {
         if (!this.#connected) return;
-        const model = this.#model.trim();
-        if (!model) return;
+        const source = this.#resolveLoadSource();
+        if (!source) return;
 
         const gen = ++this.#mountGen;
         this.#destroyRuntime();
@@ -368,12 +474,13 @@ export class Live2dElement extends HTMLElement {
         signal?.addEventListener("abort", onAbort, { once: true });
 
         const canvas = this.#ensureCanvas();
+        const sourceLabelText = sourceLabel(source);
         this.setAttribute("data-phase", "loading");
         this.setAttribute("aria-busy", "true");
 
         try {
             const runtime = createLive2d({
-                prefer: preferFromRenderer(this.#renderer),
+                prefer: this.#resolvePrefer(),
                 updateMode: "auto",
             });
             if (gen !== this.#mountGen) {
@@ -393,12 +500,13 @@ export class Live2dElement extends HTMLElement {
                             /* already running */
                         }
                     }
+                    this.#syncAutosway(runtime, gen);
                     this.#syncPointer();
                     this.dispatchEvent(
                         new CustomEvent("live2d-ready", {
                             bubbles: true,
                             composed: true,
-                            detail: { model },
+                            detail: { model: sourceLabelText },
                         }),
                     );
                 }),
@@ -411,6 +519,32 @@ export class Live2dElement extends HTMLElement {
                 }),
             );
 
+            this.#unsubs.push(
+                runtime.events.on("progress", (payload) => {
+                    if (gen !== this.#mountGen) return;
+                    this.dispatchEvent(
+                        new CustomEvent("live2d-progress", {
+                            bubbles: true,
+                            composed: true,
+                            detail: payload,
+                        }),
+                    );
+                }),
+            );
+
+            this.#unsubs.push(
+                runtime.events.on("profile", (payload) => {
+                    if (gen !== this.#mountGen) return;
+                    this.dispatchEvent(
+                        new CustomEvent("live2d-profile", {
+                            bubbles: true,
+                            composed: true,
+                            detail: payload,
+                        }),
+                    );
+                }),
+            );
+
             this.#unsubs.push(
                 runtime.events.on("motion:start", (payload) => {
                     if (gen !== this.#mountGen) return;
@@ -438,12 +572,13 @@ export class Live2dElement extends HTMLElement {
             );
 
             runtime.mount(canvas);
-            await runtime.loadModel(model, undefined, { signal });
+            await runtime.loadModel(source, undefined, { signal });
             if (gen !== this.#mountGen) {
                 runtime.destroy();
                 return;
             }
             this.#runtime = runtime;
+            this.#syncAutosway(runtime, gen);
             this.#syncPointer();
         } catch (err) {
             if (gen !== this.#mountGen) return;