@materials3d/element 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Amir Abushanab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+<a href="https://github.com/Amir-Abushanab/materials3d"><img src="https://raw.githubusercontent.com/Amir-Abushanab/materials3d/main/brand/icon-192.png" alt="" width="64" align="right"></a>
+
+# @materials3d/element
+
+The `<materials-3d>` custom element: a drop-in Materials3D scene for Vue, Svelte or plain HTML.
+
+```bash
+pnpm add @materials3d/element three
+```
+
+```html
+<script type="module">
+  import "@materials3d/element";
+</script>
+
+<materials-3d
+  preset="skewer"
+  poster="/hero.webp"
+  min-size="520"
+  style="display:block; width:100%; height:100vh"
+></materials-3d>
+```
+
+Light DOM, `display: block`, self-registering on import (guarded, so importing under Node during
+SSR is a no-op). Poster first and lazy, with three code-split out of the initial load. `register(tag)`
+registers the class under another tag name.
+
+## Attributes
+
+| attribute                   | notes                                                                       |
+| --------------------------- | --------------------------------------------------------------------------- |
+| `preset`                    | a shipped preset name                                                       |
+| `src`                       | URL of a config JSON, for example one of the files in `gallery/`            |
+| `config`                    | inline JSON, merged one level deep over `preset` and `src`                  |
+| `transparent`               | drop the backdrop, so the scene composites over the page                    |
+| `paused`                    | live; toggles playback                                                      |
+| `poster`, `poster-fit`      | `poster-fit` is `fill` (default, matches the canvas), `cover` or `contain`  |
+| `lazy`, `webgl`, `min-size` | shell options                                                               |
+| `renderer`                  | `webgpu` selects the experimental WebGPU/TSL engine; anything else is WebGL |
+
+Boolean attributes: present means true, `"false"` or `"0"` means false, absent means the shell
+default.
+
+`poster`, `poster-fit`, `lazy`, `webgl`, `min-size` and `renderer` are read once at mount.
+Changing one on a connected element does nothing until it is disconnected and reconnected.
+`config`, `src`, `preset`, `transparent` and `paused` are live.
+
+## Properties and events
+
+The `config` property (a `Partial<SceneConfig>`) is merged last, one level deep, for framework
+bindings. The read-only `handle` is the shell's `MaterialHandle`, or `null` before connect and
+after disconnect. The element is declared in `HTMLElementTagNameMap`, so
+`document.querySelector("materials-3d")` types as `Materials3DElement` and `.handle` typechecks
+without a cast.
+
+Events: `materials3d-ready` (detail: the renderer) and `materials3d-fallback` (detail: the reason
+the scene stayed a poster).
+
+```ts
+const el = document.querySelector("materials-3d");
+if (el) {
+  el.addEventListener("materials3d-ready", async () => {
+    const blob = await el.handle?.snapshot({ time: 0 });
+  });
+}
+```
+
+Peer dependency: `three >= 0.180 < 1`. `@types/three` is an optional peer.
+
+MIT.

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import { FallbackReason, MaterialHandle, MaterialHandle as MaterialHandle$1, SceneConfig, SceneConfig as SceneConfig$1, SnapshotOptions } from "@materials3d/core";
+//#region src/index.d.ts
+declare const ElementBase: typeof HTMLElement;
+/**
+ * `<materials-3d>`: the framework-agnostic drop-in (Vue/Svelte/plain HTML). Light DOM, `display:block`.
+ *
+ * Config attributes: `config` (JSON), `src` (URL to a config JSON), `preset` (name) and
+ * `transparent` (drop the backdrop; `"false"` or `"0"` keeps it), merged in that order, each one
+ * level deep (see `mergeSceneConfig`), then the `config` property last. `paused` starts and stops
+ * playback. These are LIVE: a change after mount is pushed to the running scene. A `src` is
+ * fetched once per URL and a `preset` resolved once per name, so an update re-reads neither.
+ *
+ * Shell options: `poster`, `poster-fit` (`fill` | `cover` | `contain`), `lazy`, `webgl`
+ * (`auto` | `force` | `off`), `min-size` (CSS px) and `renderer` (`webgl`, the default, or
+ * `webgpu` for the experimental node engine, a separate bundle). Read once at mount; changing one
+ * on a live element does nothing until it is re-connected (the same contract as the React
+ * wrapper's mount-time props).
+ *
+ * Also a `config` property and a read-only `handle` getter. Emits `materials3d-ready` (detail =
+ * renderer) and `materials3d-fallback` (detail = reason).
+ */
+declare class Materials3DElement extends ElementBase {
+  #private;
+  static get observedAttributes(): string[];
+  /** The live shell handle (null before connect / after disconnect). */
+  get handle(): MaterialHandle$1 | null;
+  /** Programmatic config, merged last (over the `preset`/`src`/`config` attributes). */
+  get config(): Partial<SceneConfig$1>;
+  set config(value: Partial<SceneConfig$1>);
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: string): void;
+}
+/** Define the element (idempotent, SSR/Node-import-safe). */
+declare function register(tag?: string): void;
+declare global {
+  interface HTMLElementTagNameMap {
+    /** So `document.querySelector("materials-3d")` types as the element. */
+    "materials-3d": Materials3DElement;
+  }
+}
+//#endregion
+export { type FallbackReason, type MaterialHandle, Materials3DElement, type SceneConfig, type SnapshotOptions, register };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,163 @@
+import { createMaterials, mergeSceneConfig } from "@materials3d/core";
+//#region src/index.ts
+/** The attributes a live element answers to. The shell options are read once at mount instead. */
+const LIVE_ATTRIBUTES = [
+	"config",
+	"src",
+	"preset",
+	"transparent",
+	"paused"
+];
+const ElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : function Materials3DElementBase() {};
+/**
+* `<materials-3d>`: the framework-agnostic drop-in (Vue/Svelte/plain HTML). Light DOM, `display:block`.
+*
+* Config attributes: `config` (JSON), `src` (URL to a config JSON), `preset` (name) and
+* `transparent` (drop the backdrop; `"false"` or `"0"` keeps it), merged in that order, each one
+* level deep (see `mergeSceneConfig`), then the `config` property last. `paused` starts and stops
+* playback. These are LIVE: a change after mount is pushed to the running scene. A `src` is
+* fetched once per URL and a `preset` resolved once per name, so an update re-reads neither.
+*
+* Shell options: `poster`, `poster-fit` (`fill` | `cover` | `contain`), `lazy`, `webgl`
+* (`auto` | `force` | `off`), `min-size` (CSS px) and `renderer` (`webgl`, the default, or
+* `webgpu` for the experimental node engine, a separate bundle). Read once at mount; changing one
+* on a live element does nothing until it is re-connected (the same contract as the React
+* wrapper's mount-time props).
+*
+* Also a `config` property and a read-only `handle` getter. Emits `materials3d-ready` (detail =
+* renderer) and `materials3d-fallback` (detail = reason).
+*/
+var Materials3DElement = class extends ElementBase {
+	static get observedAttributes() {
+		return [...LIVE_ATTRIBUTES];
+	}
+	#handle = null;
+	#config = {};
+	#debounce;
+	/**
+	* Which connect the in-flight `#mount` belongs to. `#mount` awaits the config, and a
+	* disconnect + reconnect during that await queues a SECOND mount, without this check both
+	* would finish and the first handle would be overwritten undestroyed (a leaked renderer).
+	*/
+	#mountId = 0;
+	/** The preset the last build resolved, so an update to another attribute skips the import. */
+	#preset = null;
+	/** The last `src` fetched successfully; a failed fetch is not cached, so the next update retries. */
+	#src = null;
+	/** The live shell handle (null before connect / after disconnect). */
+	get handle() {
+		return this.#handle;
+	}
+	/** Programmatic config, merged last (over the `preset`/`src`/`config` attributes). */
+	get config() {
+		return this.#config;
+	}
+	set config(value) {
+		this.#config = value ?? {};
+		this.#scheduleUpdate();
+	}
+	connectedCallback() {
+		if (!this.style.display) this.style.display = "block";
+		this.#mount(++this.#mountId);
+	}
+	disconnectedCallback() {
+		this.#mountId++;
+		clearTimeout(this.#debounce);
+		this.#handle?.destroy();
+		this.#handle = null;
+	}
+	attributeChangedCallback(name) {
+		if (!this.#handle) return;
+		if (name === "paused") {
+			if (this.#boolAttr("paused")) this.#handle.pause();
+			else this.#handle.play();
+		} else this.#scheduleUpdate();
+	}
+	async #mount(id) {
+		const config = await this.#buildConfig();
+		if (id !== this.#mountId || !this.isConnected) return;
+		const minSize = Number(this.getAttribute("min-size"));
+		const options = {
+			poster: this.getAttribute("poster") ?? void 0,
+			posterFit: this.getAttribute("poster-fit") ?? void 0,
+			lazy: this.#boolAttr("lazy"),
+			webgl: this.getAttribute("webgl") ?? void 0,
+			minSizeForWebGL: Number.isFinite(minSize) && minSize > 0 ? minSize : void 0,
+			paused: this.#boolAttr("paused"),
+			renderer: this.getAttribute("renderer") === "webgpu" ? "webgpu" : void 0,
+			onReady: (renderer) => this.dispatchEvent(new CustomEvent("materials3d-ready", { detail: renderer })),
+			onFallback: (reason) => this.dispatchEvent(new CustomEvent("materials3d-fallback", { detail: reason }))
+		};
+		this.#handle = createMaterials(this, config, options);
+	}
+	/** default ← preset ← src JSON ← config attribute ← config property, one level deep each. */
+	async #buildConfig() {
+		let base = {};
+		const presetName = this.getAttribute("preset");
+		if (presetName) {
+			if (this.#preset?.name !== presetName) {
+				const { PRESETS, isPresetName } = await import("@materials3d/core/presets");
+				const make = isPresetName(presetName) ? PRESETS[presetName] : () => ({});
+				this.#preset = {
+					name: presetName,
+					make
+				};
+			}
+			base = this.#preset.make();
+		}
+		const src = this.getAttribute("src");
+		if (src) {
+			if (this.#src?.url !== src) try {
+				const json = await fetch(src).then((r) => r.json());
+				if (json && typeof json === "object" && !Array.isArray(json)) this.#src = {
+					url: src,
+					config: json
+				};
+			} catch {}
+			if (this.#src?.url === src) base = mergeSceneConfig(base, structuredClone(this.#src.config));
+		}
+		const transparent = this.#boolAttr("transparent");
+		if (transparent !== void 0) base = {
+			...base,
+			transparentBackground: transparent
+		};
+		return mergeSceneConfig(mergeSceneConfig(base, parseJson(this.getAttribute("config"))), this.#config);
+	}
+	#scheduleUpdate() {
+		clearTimeout(this.#debounce);
+		this.#debounce = setTimeout(() => {
+			this.#update();
+		}, 50);
+	}
+	async #update() {
+		const handle = this.#handle;
+		if (!handle) return;
+		const config = await this.#buildConfig();
+		if (this.#handle !== handle) return;
+		handle.set(config);
+	}
+	/** Presence = true; `"false"`/`"0"` = false; absent = undefined (shell default). */
+	#boolAttr(name) {
+		if (!this.hasAttribute(name)) return void 0;
+		const value = this.getAttribute(name);
+		return value !== "false" && value !== "0";
+	}
+};
+function parseJson(json) {
+	if (!json) return {};
+	try {
+		return JSON.parse(json);
+	} catch {
+		return {};
+	}
+}
+/** Define the element (idempotent, SSR/Node-import-safe). */
+function register(tag = "materials-3d") {
+	if (typeof window === "undefined" || typeof customElements === "undefined") return;
+	if (!customElements.get(tag)) customElements.define(tag, Materials3DElement);
+}
+register();
+//#endregion
+export { Materials3DElement, register };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["#handle","#config","#scheduleUpdate","#mount","#mountId","#debounce","#boolAttr","#buildConfig","#preset","#src","#update"],"sources":["../src/index.ts"],"sourcesContent":["import { createMaterials, mergeSceneConfig } from \"@materials3d/core\";\nimport type {\n  EngineFor,\n  RendererKind,\n  FallbackReason,\n  SceneConfig,\n  MaterialHandle,\n  MaterialOptions,\n} from \"@materials3d/core\";\n\n/** The attributes a live element answers to. The shell options are read once at mount instead. */\nconst LIVE_ATTRIBUTES = [\"config\", \"src\", \"preset\", \"transparent\", \"paused\"] as const;\n\n// SSR-safe base: `class extends HTMLElement` evaluates HTMLElement at import time, which throws\n// under Node. Fall back to a dummy base there, the element is never instantiated server-side\n// (register() is guarded), so the missing DOM methods are never called.\nconst ElementBase: typeof HTMLElement =\n  typeof HTMLElement !== \"undefined\"\n    ? HTMLElement\n    : (function Materials3DElementBase() {} as unknown as typeof HTMLElement);\n\n/**\n * `<materials-3d>`: the framework-agnostic drop-in (Vue/Svelte/plain HTML). Light DOM, `display:block`.\n *\n * Config attributes: `config` (JSON), `src` (URL to a config JSON), `preset` (name) and\n * `transparent` (drop the backdrop; `\"false\"` or `\"0\"` keeps it), merged in that order, each one\n * level deep (see `mergeSceneConfig`), then the `config` property last. `paused` starts and stops\n * playback. These are LIVE: a change after mount is pushed to the running scene. A `src` is\n * fetched once per URL and a `preset` resolved once per name, so an update re-reads neither.\n *\n * Shell options: `poster`, `poster-fit` (`fill` | `cover` | `contain`), `lazy`, `webgl`\n * (`auto` | `force` | `off`), `min-size` (CSS px) and `renderer` (`webgl`, the default, or\n * `webgpu` for the experimental node engine, a separate bundle). Read once at mount; changing one\n * on a live element does nothing until it is re-connected (the same contract as the React\n * wrapper's mount-time props).\n *\n * Also a `config` property and a read-only `handle` getter. Emits `materials3d-ready` (detail =\n * renderer) and `materials3d-fallback` (detail = reason).\n */\nexport class Materials3DElement extends ElementBase {\n  static get observedAttributes(): string[] {\n    return [...LIVE_ATTRIBUTES];\n  }\n\n  #handle: MaterialHandle | null = null;\n  #config: Partial<SceneConfig> = {};\n  #debounce?: ReturnType<typeof setTimeout>;\n  /**\n   * Which connect the in-flight `#mount` belongs to. `#mount` awaits the config, and a\n   * disconnect + reconnect during that await queues a SECOND mount, without this check both\n   * would finish and the first handle would be overwritten undestroyed (a leaked renderer).\n   */\n  #mountId = 0;\n  /** The preset the last build resolved, so an update to another attribute skips the import. */\n  #preset: { name: string; make: () => Partial<SceneConfig> } | null = null;\n  /** The last `src` fetched successfully; a failed fetch is not cached, so the next update retries. */\n  #src: { url: string; config: Partial<SceneConfig> } | null = null;\n\n  /** The live shell handle (null before connect / after disconnect). */\n  get handle(): MaterialHandle | null {\n    return this.#handle;\n  }\n\n  /** Programmatic config, merged last (over the `preset`/`src`/`config` attributes). */\n  get config(): Partial<SceneConfig> {\n    return this.#config;\n  }\n  set config(value: Partial<SceneConfig>) {\n    this.#config = value ?? {};\n    this.#scheduleUpdate();\n  }\n\n  connectedCallback(): void {\n    if (!this.style.display) this.style.display = \"block\";\n    void this.#mount(++this.#mountId);\n  }\n\n  disconnectedCallback(): void {\n    this.#mountId++; // invalidate a mount still awaiting its config\n    clearTimeout(this.#debounce);\n    this.#handle?.destroy();\n    this.#handle = null;\n  }\n\n  attributeChangedCallback(name: string): void {\n    if (!this.#handle) return;\n    if (name === \"paused\") {\n      if (this.#boolAttr(\"paused\")) this.#handle.pause();\n      else this.#handle.play();\n    } else {\n      this.#scheduleUpdate();\n    }\n  }\n\n  async #mount(id: number): Promise<void> {\n    const config = await this.#buildConfig();\n    if (id !== this.#mountId || !this.isConnected) return; // superseded while the config resolved\n    const minSize = Number(this.getAttribute(\"min-size\"));\n    const options: MaterialOptions<RendererKind> = {\n      poster: this.getAttribute(\"poster\") ?? undefined,\n      posterFit: (this.getAttribute(\"poster-fit\") as MaterialOptions[\"posterFit\"]) ?? undefined,\n      lazy: this.#boolAttr(\"lazy\"),\n      webgl: (this.getAttribute(\"webgl\") as MaterialOptions[\"webgl\"]) ?? undefined,\n      minSizeForWebGL: Number.isFinite(minSize) && minSize > 0 ? minSize : undefined,\n      paused: this.#boolAttr(\"paused\"),\n      // `renderer=\"webgpu\"` fetches the node-renderer build. Anything else, including absent, is\n      // the default WebGL engine, the option is opt-in precisely because it is a second bundle.\n      renderer: this.getAttribute(\"renderer\") === \"webgpu\" ? \"webgpu\" : undefined,\n      onReady: (renderer: EngineFor<RendererKind>) =>\n        this.dispatchEvent(new CustomEvent(\"materials3d-ready\", { detail: renderer })),\n      onFallback: (reason: FallbackReason) =>\n        this.dispatchEvent(new CustomEvent(\"materials3d-fallback\", { detail: reason })),\n    };\n    this.#handle = createMaterials<RendererKind>(this, config, options);\n  }\n\n  /** default ← preset ← src JSON ← config attribute ← config property, one level deep each. */\n  async #buildConfig(): Promise<Partial<SceneConfig>> {\n    let base: Partial<SceneConfig> = {};\n    const presetName = this.getAttribute(\"preset\");\n    if (presetName) {\n      if (this.#preset?.name !== presetName) {\n        const { PRESETS, isPresetName } = await import(\"@materials3d/core/presets\");\n        const make = isPresetName(presetName)\n          ? PRESETS[presetName]\n          : (): Partial<SceneConfig> => ({});\n        this.#preset = { name: presetName, make };\n      }\n      base = this.#preset.make();\n    }\n    const src = this.getAttribute(\"src\");\n    if (src) {\n      if (this.#src?.url !== src) {\n        try {\n          const json: unknown = await fetch(src).then((r) => r.json());\n          if (json && typeof json === \"object\" && !Array.isArray(json)) {\n            this.#src = { url: src, config: json as Partial<SceneConfig> };\n          }\n        } catch {\n          // ignore a failed/invalid config fetch; fall through to whatever we have\n        }\n      }\n      // Cloned so the cache never shares an object with a config the shell may go on to hold.\n      if (this.#src?.url === src) base = mergeSceneConfig(base, structuredClone(this.#src.config));\n    }\n    const transparent = this.#boolAttr(\"transparent\");\n    if (transparent !== undefined) base = { ...base, transparentBackground: transparent };\n    return mergeSceneConfig(\n      mergeSceneConfig(base, parseJson(this.getAttribute(\"config\"))),\n      this.#config,\n    );\n  }\n\n  #scheduleUpdate(): void {\n    clearTimeout(this.#debounce);\n    this.#debounce = setTimeout(() => {\n      void this.#update();\n    }, 50);\n  }\n\n  async #update(): Promise<void> {\n    const handle = this.#handle;\n    if (!handle) return;\n    const config = await this.#buildConfig();\n    if (this.#handle !== handle) return; // destroyed or remounted while the config resolved\n    handle.set(config);\n  }\n\n  /** Presence = true; `\"false\"`/`\"0\"` = false; absent = undefined (shell default). */\n  #boolAttr(name: string): boolean | undefined {\n    if (!this.hasAttribute(name)) return undefined;\n    const value = this.getAttribute(name);\n    return value !== \"false\" && value !== \"0\";\n  }\n}\n\nfunction parseJson(json: string | null): Partial<SceneConfig> {\n  if (!json) return {};\n  try {\n    return JSON.parse(json) as Partial<SceneConfig>;\n  } catch {\n    return {};\n  }\n}\n\n/** Define the element (idempotent, SSR/Node-import-safe). */\nexport function register(tag = \"materials-3d\"): void {\n  if (typeof window === \"undefined\" || typeof customElements === \"undefined\") return;\n  if (!customElements.get(tag)) customElements.define(tag, Materials3DElement);\n}\n\n// Self-register on import so a bare `import \"@materials3d/element\"` makes <materials-3d> work. Guarded so\n// importing under Node (SSR) is a no-op rather than a ReferenceError.\nregister();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** So `document.querySelector(\"materials-3d\")` types as the element. */\n    \"materials-3d\": Materials3DElement;\n  }\n}\n\nexport type {\n  SceneConfig,\n  MaterialHandle,\n  FallbackReason,\n  SnapshotOptions,\n} from \"@materials3d/core\";\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@materials3d/element",
+  "version": "0.1.0",
+  "description": "Drop-in Materials3D scene for Vue, Svelte, or plain HTML: the <materials-3d> custom element",
+  "keywords": [
+    "custom-elements",
+    "glass",
+    "refraction",
+    "svelte",
+    "three",
+    "vue",
+    "web-components",
+    "webgl"
+  ],
+  "homepage": "https://github.com/Amir-Abushanab/materials3d/tree/main/packages/element#readme",
+  "bugs": "https://github.com/Amir-Abushanab/materials3d/issues",
+  "license": "MIT",
+  "author": "Amir Abushanab (https://github.com/Amir-Abushanab)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Amir-Abushanab/materials3d.git",
+    "directory": "packages/element"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./src/index.ts",
+    "./dist/index.js"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@materials3d/core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "@types/three": ">=0.180",
+    "three": ">=0.180 <1"
+  },
+  "peerDependenciesMeta": {
+    "@types/three": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=20.19"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}