@xenolithengine/graph-wc 0.7.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 strelok2012
+
+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,53 @@
+# @xenolithengine/graph-wc
+
+[![BETA](https://img.shields.io/badge/status-BETA-FCB400?style=flat-square)](https://github.com/XenolithEngine/xenolith-graph#status)
+[![MIT](https://img.shields.io/badge/license-MIT-FCB400?style=flat-square)](https://github.com/XenolithEngine/xenolith-graph/blob/main/LICENSE)
+
+`<xenolith-graph>` Web Component — the universal adapter. Works in Angular, Vue, Svelte, Solid, Lit, Astro, and vanilla.
+
+> **Beta** — public API in `STABLE-API.md` is the surface we plan to freeze, but it is **NOT frozen yet** — breaking changes can land at any point before v1.0. If you adopt now, pin an exact version.
+
+Part of [XenolithGraph](https://github.com/XenolithEngine/xenolith-graph) — an AI-native, embeddable node-graph editor for the web with its own visual design language (Xen).
+
+## Install
+
+```bash
+pnpm add @xenolithengine/graph-wc pixi.js
+```
+
+Peer dependency: `pixi.js@^8.6.0`. WebGL/client-only.
+
+## Usage
+
+```ts
+import { register } from '@xenolithengine/graph-wc'
+register()                       // default tag <xenolith-graph>
+// register('my-graph')          // or with a custom tag
+```
+
+```html
+<xenolith-graph style="width:100%;height:100vh" minimap></xenolith-graph>
+
+<script type="module">
+  import { register } from '@xenolithengine/graph-wc'
+  register()
+
+  const el = document.querySelector('xenolith-graph')
+  el.addEventListener('node:click', (e) => console.log(e.detail.nodeId))
+</script>
+```
+
+Registration is **explicit** (the import is side-effect-free); call `register()` once at startup.
+
+## What's exported
+
+- `register(tag?)` — define the custom element (idempotent; default tag `xenolith-graph`)
+- `XenolithGraphElement` — the `HTMLElement` class (if you want to register it yourself)
+- `readAttributes`, `FORWARDED_EVENTS` — used internally; exported for advanced hosts
+
+## Docs
+
+- [API reference](https://xenolithengine.github.io/xenolith-graph/guides/api/) — every method exposed by `XenolithEditor`
+- [GitHub](https://github.com/XenolithEngine/xenolith-graph)
+
+MIT © XenolithEngine

package/dist/attrs.d.ts

@@ -0,0 +1,8 @@
+import type { XenolithProps } from '@xenolithengine/graph-adapter-core';
+/** Parse the declarative (string) attributes of <xenolith-graph> into props. Complex props
+ *  (theme object, graph data) arrive via JS properties, not attributes. */
+export declare function readAttributes(el: HTMLElement): Partial<XenolithProps>;
+/** Every public editor event is re-dispatched off the element as a same-named CustomEvent whose
+ *  `detail` is the event payload. */
+export declare const FORWARDED_EVENTS: readonly ["node:added", "node:removed", "node:moved", "node:click", "edge:connected", "edge:disconnected", "selection:changed", "viewport:changed", "widget:changed", "widget:action", "graph:loaded", "history:changed", "dive:changed"];
+//# sourceMappingURL=attrs.d.ts.map

package/dist/attrs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrs.d.ts","sourceRoot":"","sources":["../src/attrs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAQvE;2EAC2E;AAC3E,wBAAgB,cAAc,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,CAAC,aAAa,CAAC,CAStE;AAED;qCACqC;AACrC,eAAO,MAAM,gBAAgB,2OAMnB,CAAA"}

package/dist/attrs.js

@@ -0,0 +1,31 @@
+/** A boolean HTML attribute is true when present unless its value is the string "false". */
+function boolAttr(el, name) {
+    if (!el.hasAttribute(name))
+        return undefined;
+    return el.getAttribute(name) !== 'false';
+}
+/** Parse the declarative (string) attributes of <xenolith-graph> into props. Complex props
+ *  (theme object, graph data) arrive via JS properties, not attributes. */
+export function readAttributes(el) {
+    const props = {};
+    const minimap = boolAttr(el, 'minimap');
+    if (minimap !== undefined)
+        props.minimap = minimap;
+    const fit = boolAttr(el, 'fit-on-load');
+    if (fit !== undefined)
+        props.fitOnLoad = fit;
+    const grid = boolAttr(el, 'disable-grid');
+    if (grid !== undefined)
+        props.disableGrid = grid;
+    return props;
+}
+/** Every public editor event is re-dispatched off the element as a same-named CustomEvent whose
+ *  `detail` is the event payload. */
+export const FORWARDED_EVENTS = [
+    'node:added', 'node:removed', 'node:moved', 'node:click',
+    'edge:connected', 'edge:disconnected',
+    'selection:changed', 'viewport:changed',
+    'widget:changed', 'widget:action',
+    'graph:loaded', 'history:changed', 'dive:changed',
+];
+//# sourceMappingURL=attrs.js.map

package/dist/attrs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrs.js","sourceRoot":"","sources":["../src/attrs.ts"],"names":[],"mappings":"AAEA,4FAA4F;AAC5F,SAAS,QAAQ,CAAC,EAAe,EAAE,IAAY;IAC7C,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;QAAE,OAAO,SAAS,CAAA;IAC5C,OAAO,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,OAAO,CAAA;AAC1C,CAAC;AAED;2EAC2E;AAC3E,MAAM,UAAU,cAAc,CAAC,EAAe;IAC5C,MAAM,KAAK,GAA2B,EAAE,CAAA;IACxC,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAE,EAAE,SAAS,CAAC,CAAA;IACvC,IAAI,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,OAAO,GAAG,OAAO,CAAA;IAClD,MAAM,GAAG,GAAG,QAAQ,CAAC,EAAE,EAAE,aAAa,CAAC,CAAA;IACvC,IAAI,GAAG,KAAK,SAAS;QAAE,KAAK,CAAC,SAAS,GAAG,GAAG,CAAA;IAC5C,MAAM,IAAI,GAAG,QAAQ,CAAC,EAAE,EAAE,cAAc,CAAC,CAAA;IACzC,IAAI,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,WAAW,GAAG,IAAI,CAAA;IAChD,OAAO,KAAK,CAAA;AACd,CAAC;AAED;qCACqC;AACrC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY;IACxD,gBAAgB,EAAE,mBAAmB;IACrC,mBAAmB,EAAE,kBAAkB;IACvC,gBAAgB,EAAE,eAAe;IACjC,cAAc,EAAE,iBAAiB,EAAE,cAAc;CACzC,CAAA"}

package/dist/element.d.ts

@@ -0,0 +1,21 @@
+import { type XenolithProps } from '@xenolithengine/graph-adapter-core';
+import type { XenolithEditor } from '@xenolithengine/graph-editor';
+/** `<xenolith-graph>` — the universal adapter. Declarative attributes (`minimap`, `fit-on-load`,
+ *  `disable-grid`) and JS properties (`theme`, `graph`) feed the editor; every public editor event
+ *  is re-emitted off the element as a same-named CustomEvent. Works in any framework that speaks
+ *  DOM (Angular, Vue, Svelte, Solid, Lit, Astro, vanilla). */
+export declare class XenolithGraphElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    set theme(v: XenolithProps['theme']);
+    get theme(): XenolithProps['theme'];
+    set graph(v: unknown);
+    get graph(): unknown;
+    set zoomBounds(v: XenolithProps['zoomBounds']);
+    /** The live editor instance, or null before mount / after teardown. */
+    get editor(): XenolithEditor | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+//# sourceMappingURL=element.d.ts.map

package/dist/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAChH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGlE;;;8DAG8D;AAC9D,qBAAa,oBAAqB,SAAQ,WAAW;;IACnD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAAsD;IAO/F,IAAI,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,EAA+B;IAClE,IAAI,KAAK,IAAI,aAAa,CAAC,OAAO,CAAC,CAA6B;IAChE,IAAI,KAAK,CAAC,CAAC,EAAE,OAAO,EAA+B;IACnD,IAAI,KAAK,IAAI,OAAO,CAA6B;IACjD,IAAI,UAAU,CAAC,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,EAAoC;IAEjF,uEAAuE;IACvE,IAAI,MAAM,IAAI,cAAc,GAAG,IAAI,CAAyC;IAE5E,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAO5B,wBAAwB,IAAI,IAAI;CA4BjC"}

package/dist/element.js

@@ -0,0 +1,59 @@
+import { createEditorBinding } from '@xenolithengine/graph-adapter-core';
+import { readAttributes, FORWARDED_EVENTS } from './attrs.js';
+/** `<xenolith-graph>` — the universal adapter. Declarative attributes (`minimap`, `fit-on-load`,
+ *  `disable-grid`) and JS properties (`theme`, `graph`) feed the editor; every public editor event
+ *  is re-emitted off the element as a same-named CustomEvent. Works in any framework that speaks
+ *  DOM (Angular, Vue, Svelte, Solid, Lit, Astro, vanilla). */
+export class XenolithGraphElement extends HTMLElement {
+    static get observedAttributes() { return ['minimap', 'fit-on-load', 'disable-grid']; }
+    #binding = null;
+    #props = {};
+    #offs = [];
+    #mounting = false;
+    set theme(v) { this.#patch({ theme: v }); }
+    get theme() { return this.#props.theme; }
+    set graph(v) { this.#patch({ graph: v }); }
+    get graph() { return this.#props.graph; }
+    set zoomBounds(v) { this.#patch({ zoomBounds: v }); }
+    /** The live editor instance, or null before mount / after teardown. */
+    get editor() { return this.#binding?.editor ?? null; }
+    connectedCallback() {
+        this.#props = { ...readAttributes(this), ...this.#props };
+        void this.#mount();
+    }
+    disconnectedCallback() {
+        for (const off of this.#offs)
+            off();
+        this.#offs = [];
+        this.#binding?.destroy();
+        this.#binding = null;
+    }
+    attributeChangedCallback() {
+        this.#patch(readAttributes(this));
+    }
+    async #mount() {
+        if (this.#mounting || this.#binding)
+            return;
+        this.#mounting = true;
+        let binding;
+        try {
+            binding = await createEditorBinding(this, this.#props);
+        }
+        finally {
+            this.#mounting = false;
+        }
+        if (!this.isConnected) {
+            binding.destroy();
+            return;
+        } // detached while awaiting init
+        this.#binding = binding;
+        for (const name of FORWARDED_EVENTS) {
+            this.#offs.push(binding.on(name, (detail) => this.dispatchEvent(new CustomEvent(name, { detail, bubbles: false }))));
+        }
+    }
+    #patch(partial) {
+        this.#props = { ...this.#props, ...partial };
+        this.#binding?.setProps(this.#props);
+    }
+}
+//# sourceMappingURL=element.js.map

package/dist/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export { XenolithGraphElement } from './element.js';
+export { readAttributes, FORWARDED_EVENTS } from './attrs.js';
+/** Register the custom element (default tag `xenolith-graph`). Idempotent — safe to call multiple
+ *  times and across modules.
+ *
+ *  Call this EXPLICITLY after import:
+ *
+ *      import { register } from '@xenolithengine/graph-wc'
+ *      register()                       // default tag <xenolith-graph>
+ *      register('my-graph')             // custom tag
+ *
+ *  Pre-v0.7 BETA: `import '@xenolithengine/graph-wc'` auto-registered. That was a side-effect import which
+ *  (a) makes the package non-tree-shakeable, (b) collides on tag-name conflicts before the host
+ *  has a chance to choose. Now explicit. Migration: add a one-liner `register()` after import. */
+export declare function register(tag?: string): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAE7D;;;;;;;;;;;kGAWkG;AAClG,wBAAgB,QAAQ,CAAC,GAAG,SAAmB,GAAG,IAAI,CAGrD"}

package/dist/index.js

@@ -0,0 +1,22 @@
+import { XenolithGraphElement } from './element.js';
+export { XenolithGraphElement } from './element.js';
+export { readAttributes, FORWARDED_EVENTS } from './attrs.js';
+/** Register the custom element (default tag `xenolith-graph`). Idempotent — safe to call multiple
+ *  times and across modules.
+ *
+ *  Call this EXPLICITLY after import:
+ *
+ *      import { register } from '@xenolithengine/graph-wc'
+ *      register()                       // default tag <xenolith-graph>
+ *      register('my-graph')             // custom tag
+ *
+ *  Pre-v0.7 BETA: `import '@xenolithengine/graph-wc'` auto-registered. That was a side-effect import which
+ *  (a) makes the package non-tree-shakeable, (b) collides on tag-name conflicts before the host
+ *  has a chance to choose. Now explicit. Migration: add a one-liner `register()` after import. */
+export function register(tag = 'xenolith-graph') {
+    if (typeof customElements === 'undefined')
+        return;
+    if (!customElements.get(tag))
+        customElements.define(tag, XenolithGraphElement);
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAE7D;;;;;;;;;;;kGAWkG;AAClG,MAAM,UAAU,QAAQ,CAAC,GAAG,GAAG,gBAAgB;IAC7C,IAAI,OAAO,cAAc,KAAK,WAAW;QAAE,OAAM;IACjD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,oBAAoB,CAAC,CAAA;AAChF,CAAC"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@xenolithengine/graph-wc",
+  "version": "0.7.0-beta.0",
+  "description": "<xenolith-graph> Web Component — the universal adapter. Works in Angular, Vue, Svelte, Solid, Lit, Astro, and vanilla.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./dist/register.js"
+  ],
+  "dependencies": {
+    "@xenolithengine/graph-adapter-core": "0.7.0-beta.0",
+    "@xenolithengine/graph-editor": "0.7.0-beta.0"
+  },
+  "peerDependencies": {
+    "pixi.js": "^8.6.0"
+  },
+  "devDependencies": {
+    "jsdom": "^25.0.0",
+    "pixi.js": "^8.6.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "node-editor",
+    "node-graph"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XenolithEngine/xenolith-graph.git",
+    "directory": "packages/wc"
+  },
+  "homepage": "https://xenolithengine.github.io/xenolith-graph/",
+  "bugs": {
+    "url": "https://github.com/XenolithEngine/xenolith-graph/issues"
+  },
+  "author": "XenolithEngine",
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "tsc -b --watch",
+    "test": "vitest run --passWithNoTests",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit"
+  }
+}