@xenolithengine/graph-react 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,56 @@
+# @xenolithengine/graph-react
+
+[![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)
+
+React adapter for XenolithGraph — `<XenolithGraph>` component, `useEditor` / `useNodes` / `useEdges` hooks, in-editor panels.
+
+> **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-react pixi.js
+```
+
+Peer deps: `react >= 18`, `react-dom >= 18`, `pixi.js@^8.6.0`. WebGL/client-only — render the component only in the browser (the entry is marked `'use client'` for Next.js App Router).
+
+## Usage
+
+```tsx
+import { XenolithGraph, XenolithControls, XenolithMiniMap } from '@xenolithengine/graph-react'
+
+export function Editor() {
+  return (
+    <XenolithGraph
+      style={{ width: '100%', height: '100vh' }}
+      graph={savedGraph}
+      minimap
+      onNodeClick={({ nodeId }) => console.log(nodeId)}
+      onSelectionChange={({ nodeIds }) => console.log(nodeIds)}
+      onReady={(editor) => editor.fitView()}
+    >
+      <XenolithControls position="bottom-left" />
+      <XenolithMiniMap position="bottom-right" />
+    </XenolithGraph>
+  )
+}
+```
+
+## What's exported
+
+- `<XenolithGraph>` — main component (props extend `XenolithProps` + `EventCallbacks`)
+- In-editor panels: `<XenolithPanel>`, `<XenolithButton>`, `<XenolithControls>`, `<XenolithMiniMap>`
+- Hooks: `useEditor`, `useXenolithEditor`, `useNodes`, `useEdges`, `useSelection`, `useViewport`, `useGraphJSON`, `useEditorEvent`, `useUndoRedo`
+- Lower-level: `useXenolith(hostRef, props)`, `XenolithContext`, `EVENT_PROP`
+- Custom widgets: `reactWidget`, `WidgetProps`
+
+## Docs
+
+- [React guide](https://xenolithengine.github.io/xenolith-graph/guides/react/)
+- [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/components.d.ts

@@ -0,0 +1,43 @@
+import type { CSSProperties, ReactNode, ReactElement, ReactPortal, ButtonHTMLAttributes } from 'react';
+import type { MinimapPosition, ControlsOptions } from '@xenolithengine/graph-editor';
+export type PanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface XenolithPanelProps {
+    position?: PanelPosition;
+    /** Drop the default frosted card chrome and only anchor the children. */
+    bare?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/**
+ * An absolutely-positioned overlay anchored inside the editor (React Flow's `<Panel>` analogue).
+ * Renders into the editor's screen-anchored overlay layer via a portal, so debug readouts, controls,
+ * legends — any React UI — live *inside* the graph. Inherits the theme's `--xeno-*` vars from the host.
+ */
+export declare function XenolithPanel({ position, bare, className, style, children }: XenolithPanelProps): ReactPortal | null;
+export interface XenolithButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Render in the accent colour (filled) instead of the neutral control surface. */
+    active?: boolean;
+}
+/**
+ * A control button themed from the editor's `--xeno-*` vars, so it tracks the active theme (gold in
+ * Xen, cyan in Liquid Glass) for free. Use inside a `<XenolithPanel>` / `<XenolithControls>`.
+ */
+export declare function XenolithButton({ active, style, children, disabled, ...rest }: XenolithButtonProps): ReactElement;
+export type XenolithControlsProps = ControlsOptions;
+/**
+ * Built-in viewport controls (zoom / fit / reset / undo·redo / save / lock). Declarative wrapper over
+ * the editor's vanilla `setControls` — the toolbar itself is rendered by the CORE in `overlayRoot`
+ * (shared by every framework, themed via `--xeno-*`), so this component renders no DOM of its own.
+ */
+export declare function XenolithControls(props: XenolithControlsProps): null;
+export interface XenolithMiniMapProps {
+    position?: MinimapPosition;
+}
+/**
+ * Declarative minimap toggle (React Flow's `<MiniMap>` analogue). The minimap itself is rendered in
+ * WebGL by the editor; mounting this component enables it and sets its anchor, and unmounting hides
+ * it. Renders no DOM of its own.
+ */
+export declare function XenolithMiniMap({ position }: XenolithMiniMapProps): null;
+//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AACtG,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAGpF,MAAM,MAAM,aAAa,GACrB,UAAU,GAAG,YAAY,GAAG,WAAW,GACvC,aAAa,GAAG,eAAe,GAAG,cAAc,CAAA;AAWpD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,yEAAyE;IACzE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAqB,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAuBjI;AAED,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAClF,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,GAAG,YAAY,CAwBhH;AAED,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAA;AAEnD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAUnE;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,eAAe,CAAA;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAyB,EAAE,EAAE,oBAAoB,GAAG,IAAI,CASzF"}

package/dist/components.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useXenolithEditor } from './context.js';
+const POS = {
+    'top-left': { top: 12, left: 12 },
+    'top-center': { top: 12, left: '50%', transform: 'translateX(-50%)' },
+    'top-right': { top: 12, right: 12 },
+    'bottom-left': { bottom: 12, left: 12 },
+    'bottom-center': { bottom: 12, left: '50%', transform: 'translateX(-50%)' },
+    'bottom-right': { bottom: 12, right: 12 },
+};
+/**
+ * An absolutely-positioned overlay anchored inside the editor (React Flow's `<Panel>` analogue).
+ * Renders into the editor's screen-anchored overlay layer via a portal, so debug readouts, controls,
+ * legends — any React UI — live *inside* the graph. Inherits the theme's `--xeno-*` vars from the host.
+ */
+export function XenolithPanel({ position = 'top-left', bare, className, style, children }) {
+    const editor = useXenolithEditor();
+    if (!editor)
+        return null;
+    const chrome = bare ? {} : {
+        background: 'var(--xeno-panel)',
+        border: '1px solid var(--xeno-border)',
+        borderRadius: 10,
+        padding: 10,
+        color: 'var(--xeno-text)',
+        boxShadow: '0 6px 24px rgba(0,0,0,0.35)',
+        fontFamily: 'system-ui, sans-serif',
+        fontSize: 13,
+    };
+    return createPortal(_jsx("div", { "data-xeno-panel": "", className: className, style: { position: 'absolute', pointerEvents: 'auto', ...POS[position], ...chrome, ...style }, children: children }), editor.overlayRoot);
+}
+/**
+ * A control button themed from the editor's `--xeno-*` vars, so it tracks the active theme (gold in
+ * Xen, cyan in Liquid Glass) for free. Use inside a `<XenolithPanel>` / `<XenolithControls>`.
+ */
+export function XenolithButton({ active, style, children, disabled, ...rest }) {
+    return (_jsx("button", { type: "button", "data-xeno-button": "", disabled: disabled, style: {
+            font: 'inherit',
+            fontSize: 13,
+            lineHeight: 1,
+            padding: '7px 12px',
+            cursor: disabled ? 'default' : 'pointer',
+            opacity: disabled ? 0.4 : 1,
+            borderRadius: 8,
+            border: `1px solid ${active ? 'var(--xeno-accent)' : 'var(--xeno-border)'}`,
+            background: active ? 'var(--xeno-accent)' : 'var(--xeno-elevated)',
+            color: active ? 'var(--xeno-canvas)' : 'var(--xeno-text)',
+            ...style,
+        }, ...rest, children: children }));
+}
+/**
+ * Built-in viewport controls (zoom / fit / reset / undo·redo / save / lock). Declarative wrapper over
+ * the editor's vanilla `setControls` — the toolbar itself is rendered by the CORE in `overlayRoot`
+ * (shared by every framework, themed via `--xeno-*`), so this component renders no DOM of its own.
+ */
+export function XenolithControls(props) {
+    const editor = useXenolithEditor();
+    const key = JSON.stringify(props);
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setControls(props);
+        return () => editor.setControls(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editor, key]);
+    return null;
+}
+/**
+ * Declarative minimap toggle (React Flow's `<MiniMap>` analogue). The minimap itself is rendered in
+ * WebGL by the editor; mounting this component enables it and sets its anchor, and unmounting hides
+ * it. Renders no DOM of its own.
+ */
+export function XenolithMiniMap({ position = 'bottom-right' }) {
+    const editor = useXenolithEditor();
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setMinimapVisible(true);
+        editor.setMinimapPosition(position);
+        return () => { editor.setMinimapVisible(false); };
+    }, [editor, position]);
+    return null;
+}
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

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

package/dist/context.d.ts

@@ -0,0 +1,15 @@
+import type { XenolithEditor } from '@xenolithengine/graph-editor';
+/** The live editor for the enclosing `<XenolithGraph>`, or `null` until it has mounted. In-editor
+ *  components (`<XenolithPanel>`, `<XenolithControls>`, hooks) read it from here. */
+export declare const XenolithContext: import("react").Context<XenolithEditor | null>;
+/** The editor instance from the nearest `<XenolithGraph>` ancestor — `null` until it has mounted
+ *  OR if the component is rendered outside any `<XenolithGraph>`. Use `useEditor()` when the
+ *  component is GUARANTEED to live inside an editor — that variant throws on misuse rather than
+ *  leaking nulls into your render. */
+export declare function useXenolithEditor(): XenolithEditor | null;
+/** Strict variant: returns the live editor, throwing if the component is rendered outside a
+ *  `<XenolithGraph>` ancestor or before the editor has finished mounting. Prefer this when
+ *  writing in-editor components — removes null-check noise at every call site and turns a
+ *  misuse from a silent bug into a clear error. */
+export declare function useEditor(): XenolithEditor;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAElE;qFACqF;AACrF,eAAO,MAAM,eAAe,gDAA6C,CAAA;AAEzE;;;sCAGsC;AACtC,wBAAgB,iBAAiB,IAAI,cAAc,GAAG,IAAI,CAEzD;AAED;;;mDAGmD;AACnD,wBAAgB,SAAS,IAAI,cAAc,CAI1C"}

package/dist/context.js

@@ -0,0 +1,23 @@
+'use client';
+import { createContext, useContext } from 'react';
+/** The live editor for the enclosing `<XenolithGraph>`, or `null` until it has mounted. In-editor
+ *  components (`<XenolithPanel>`, `<XenolithControls>`, hooks) read it from here. */
+export const XenolithContext = createContext(null);
+/** The editor instance from the nearest `<XenolithGraph>` ancestor — `null` until it has mounted
+ *  OR if the component is rendered outside any `<XenolithGraph>`. Use `useEditor()` when the
+ *  component is GUARANTEED to live inside an editor — that variant throws on misuse rather than
+ *  leaking nulls into your render. */
+export function useXenolithEditor() {
+    return useContext(XenolithContext);
+}
+/** Strict variant: returns the live editor, throwing if the component is rendered outside a
+ *  `<XenolithGraph>` ancestor or before the editor has finished mounting. Prefer this when
+ *  writing in-editor components — removes null-check noise at every call site and turns a
+ *  misuse from a silent bug into a clear error. */
+export function useEditor() {
+    const editor = useContext(XenolithContext);
+    if (!editor)
+        throw new Error('useEditor() called outside <XenolithGraph> or before the editor mounted. Use useXenolithEditor() if a null result is expected here.');
+    return editor;
+}
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGjD;qFACqF;AACrF,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAwB,IAAI,CAAC,CAAA;AAEzE;;;sCAGsC;AACtC,MAAM,UAAU,iBAAiB;IAC/B,OAAO,UAAU,CAAC,eAAe,CAAC,CAAA;AACpC,CAAC;AAED;;;mDAGmD;AACnD,MAAM,UAAU,SAAS;IACvB,MAAM,MAAM,GAAG,UAAU,CAAC,eAAe,CAAC,CAAA;IAC1C,IAAI,CAAC,MAAM;QAAE,MAAM,IAAI,KAAK,CAAC,qIAAqI,CAAC,CAAA;IACnK,OAAO,MAAM,CAAA;AACf,CAAC"}

package/dist/events-map.d.ts

@@ -0,0 +1,33 @@
+import type { EditorEvents } from '@xenolithengine/graph-editor';
+/** Maps each public editor event to its idiomatic React callback prop name. */
+export declare const EVENT_PROP: {
+    readonly 'node:added': "onNodeAdded";
+    readonly 'node:removed': "onNodeRemoved";
+    readonly 'node:removing': "onNodeRemoving";
+    readonly 'node:moved': "onNodeMoved";
+    readonly 'node:click': "onNodeClick";
+    readonly 'node:clicking': "onNodeClicking";
+    readonly 'node:drop': "onNodeDrop";
+    readonly 'edge:connected': "onEdgeConnected";
+    readonly 'edge:disconnected': "onEdgeDisconnected";
+    readonly 'edge:connecting': "onEdgeConnecting";
+    readonly 'edge:disconnecting': "onEdgeDisconnecting";
+    readonly 'selection:changed': "onSelectionChange";
+    readonly 'viewport:changed': "onViewportChange";
+    readonly 'widget:changed': "onWidgetChange";
+    readonly 'widget:action': "onWidgetAction";
+    readonly 'graph:loaded': "onGraphLoad";
+    readonly 'history:changed': "onHistoryChange";
+    readonly 'dive:changed': "onDiveChange";
+    readonly 'sidebar:opened': "onSidebarOpen";
+    readonly 'sidebar:closed': "onSidebarClose";
+    readonly 'livemode:changed': "onLiveModeChange";
+    readonly 'node:contextmenu': "onNodeContextMenu";
+    readonly 'edge:contextmenu': "onEdgeContextMenu";
+    readonly 'canvas:contextmenu': "onCanvasContextMenu";
+};
+/** The React callback props derived from {@link EVENT_PROP} — one optional handler per event. */
+export type EventCallbacks = {
+    [E in keyof EditorEvents as (typeof EVENT_PROP)[E]]?: (payload: EditorEvents[E]) => void;
+};
+//# sourceMappingURL=events-map.d.ts.map

package/dist/events-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events-map.d.ts","sourceRoot":"","sources":["../src/events-map.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEhE,+EAA+E;AAC/E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;CAyBgC,CAAA;AAEvD,iGAAiG;AACjG,MAAM,MAAM,cAAc,GAAG;KAC1B,CAAC,IAAI,MAAM,YAAY,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACzF,CAAA"}

package/dist/events-map.js

@@ -0,0 +1,28 @@
+/** Maps each public editor event to its idiomatic React callback prop name. */
+export const EVENT_PROP = {
+    'node:added': 'onNodeAdded',
+    'node:removed': 'onNodeRemoved',
+    'node:removing': 'onNodeRemoving',
+    'node:moved': 'onNodeMoved',
+    'node:click': 'onNodeClick',
+    'node:clicking': 'onNodeClicking',
+    'node:drop': 'onNodeDrop',
+    'edge:connected': 'onEdgeConnected',
+    'edge:disconnected': 'onEdgeDisconnected',
+    'edge:connecting': 'onEdgeConnecting',
+    'edge:disconnecting': 'onEdgeDisconnecting',
+    'selection:changed': 'onSelectionChange',
+    'viewport:changed': 'onViewportChange',
+    'widget:changed': 'onWidgetChange',
+    'widget:action': 'onWidgetAction',
+    'graph:loaded': 'onGraphLoad',
+    'history:changed': 'onHistoryChange',
+    'dive:changed': 'onDiveChange',
+    'sidebar:opened': 'onSidebarOpen',
+    'sidebar:closed': 'onSidebarClose',
+    'livemode:changed': 'onLiveModeChange',
+    'node:contextmenu': 'onNodeContextMenu',
+    'edge:contextmenu': 'onEdgeContextMenu',
+    'canvas:contextmenu': 'onCanvasContextMenu',
+};
+//# sourceMappingURL=events-map.js.map

package/dist/events-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events-map.js","sourceRoot":"","sources":["../src/events-map.ts"],"names":[],"mappings":"AAEA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY,EAAE,aAAa;IAC3B,cAAc,EAAE,eAAe;IAC/B,eAAe,EAAE,gBAAgB;IACjC,YAAY,EAAE,aAAa;IAC3B,YAAY,EAAE,aAAa;IAC3B,eAAe,EAAE,gBAAgB;IACjC,WAAW,EAAE,YAAY;IACzB,gBAAgB,EAAE,iBAAiB;IACnC,mBAAmB,EAAE,oBAAoB;IACzC,iBAAiB,EAAE,kBAAkB;IACrC,oBAAoB,EAAE,qBAAqB;IAC3C,mBAAmB,EAAE,mBAAmB;IACxC,kBAAkB,EAAE,kBAAkB;IACtC,gBAAgB,EAAE,gBAAgB;IAClC,eAAe,EAAE,gBAAgB;IACjC,cAAc,EAAE,aAAa;IAC7B,iBAAiB,EAAE,iBAAiB;IACpC,cAAc,EAAE,cAAc;IAC9B,gBAAgB,EAAE,eAAe;IACjC,gBAAgB,EAAE,gBAAgB;IAClC,kBAAkB,EAAE,kBAAkB;IACtC,kBAAkB,EAAI,mBAAmB;IACzC,kBAAkB,EAAI,mBAAmB;IACzC,oBAAoB,EAAE,qBAAqB;CACU,CAAA"}

package/dist/hooks.d.ts

@@ -0,0 +1,37 @@
+import type { EditorEvents, ViewportState, Node, Edge, NodeId, XenolithGraphV1 } from '@xenolithengine/graph-editor';
+/** Live array of nodes; re-renders on add/remove/move, load and undo/redo. */
+export declare const useNodes: () => readonly Node[];
+/** Live array of edges; re-renders on connect/disconnect, node removal, load and undo/redo. */
+export declare const useEdges: () => readonly Edge[];
+/** Live selection (node ids); re-renders on selection change. */
+export declare const useSelection: () => readonly NodeId[];
+/** Live viewport (`x`, `y`, `zoom`); re-renders on pan/zoom. */
+export declare const useViewport: () => ViewportState;
+/** Live serialized graph (xenolith.v1); recomputes on any graph mutation, load and undo/redo. */
+export declare const useGraphJSON: () => XenolithGraphV1 | null;
+/**
+ * Subscribe to a single editor event from a React component. Handler is auto-rebound when the
+ * editor changes; unsubscribed on unmount. Use this for events that don't have a dedicated hook —
+ * `node:click`, `edge:disconnected`, `sidebar:opened`, `livemode:changed`, `node:drop`, the four
+ * preventable `*-ing` events, etc.
+ *
+ * The handler is captured by closure each render — no deps array needed; the latest closure is
+ * always called. This matches `useSyncExternalStore` semantics and avoids stale-closure footguns.
+ *
+ * @example
+ *   useEditorEvent('node:removing', (p) => { if (p.nodeId === lockedId) p.cancel() })
+ *   useEditorEvent('widget:changed', (p) => setLocalCopy(p.value))
+ */
+export declare function useEditorEvent<E extends keyof EditorEvents>(event: E, handler: (payload: EditorEvents[E]) => void): void;
+/**
+ * `{ canUndo, canRedo, undo, redo }` — live undo/redo state + stable callable handles. Use for
+ * toolbars: `<button disabled={!canUndo} onClick={undo}>Undo</button>`. Re-renders whenever the
+ * editor's undo/redo log changes.
+ */
+export declare function useUndoRedo(): {
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => boolean;
+    redo: () => boolean;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAkB,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAoEpI,8EAA8E;AAC9E,eAAO,MAAM,QAAQ,EAAE,MAAM,SAAS,IAAI,EAIzC,CAAA;AAED,+FAA+F;AAC/F,eAAO,MAAM,QAAQ,EAAE,MAAM,SAAS,IAAI,EAIzC,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,MAAM,SAAS,MAAM,EAI/C,CAAA;AAED,gEAAgE;AAChE,eAAO,MAAM,WAAW,EAAE,MAAM,aAI/B,CAAA;AAED,iGAAiG;AACjG,eAAO,MAAM,YAAY,EAAE,MAAM,eAAe,GAAG,IAIlD,CAAA;AAID;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,YAAY,EACzD,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,GAC1C,IAAI,CAQN;AAID;;;;GAIG;AACH,wBAAgB,WAAW,IAAI;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,OAAO,CAAA;CAAE,CAa9G"}

package/dist/hooks.js

@@ -0,0 +1,112 @@
+'use client';
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+import { useXenolithEditor } from './context.js';
+// Canonical pattern: subscribe to an external (non-React) mutable store via `useSyncExternalStore`.
+// Replaces the prior `useState + useEffect + subscribe` shape, which the React docs flag as the
+// anti-pattern it explicitly fixes. See:
+//   - https://react.dev/reference/react/useSyncExternalStore
+//   - https://www.epicreact.dev/use-sync-external-store-demystified-for-practical-react-development-w5ac0
+// Contract: `getSnapshot` MUST return the same reference if the underlying data hasn't changed —
+// otherwise React tears down and re-renders forever. We cache by editor identity in a ref and
+// only mutate the cache when an editor event actually fires.
+function makeEditorStoreHook(events, compute, fallback) {
+    return function useEditorStore() {
+        const editor = useXenolithEditor();
+        const cacheRef = useRef({ editor: null, value: fallback });
+        const subscribe = useCallback((onChange) => {
+            if (!editor)
+                return () => { };
+            // Refresh the cache on subscribe so the first getSnapshot read returns up-to-date data.
+            cacheRef.current = { editor, value: compute(editor) };
+            // Coalesce a burst of events (e.g. a 1000-node transaction firing node:added 1000×) into
+            // ONE recompute + ONE React notification. Without this, the hook re-walks the graph on every
+            // event and a `+1000` button costs ~1M ops just for the snapshot, before React even renders.
+            let scheduled = false;
+            const update = () => {
+                if (scheduled)
+                    return;
+                scheduled = true;
+                queueMicrotask(() => {
+                    scheduled = false;
+                    if (cacheRef.current.editor !== editor)
+                        return; // unsubscribed mid-flight
+                    cacheRef.current = { editor, value: compute(editor) };
+                    onChange();
+                });
+            };
+            const offs = events.map((ev) => editor.on(ev, update));
+            return () => { for (const off of offs)
+                off(); };
+        }, [editor]);
+        const getSnapshot = useCallback(() => {
+            // Rebuild the cache only when the editor identity itself changes (null → instance, swap),
+            // OR (rare) the editor cleared its cache mid-flight. Identity-stable otherwise.
+            if (cacheRef.current.editor !== editor) {
+                cacheRef.current = { editor, value: editor ? compute(editor) : fallback };
+            }
+            return cacheRef.current.value;
+        }, [editor]);
+        return useSyncExternalStore(subscribe, getSnapshot, () => fallback);
+    };
+}
+const NODE_EVENTS = ['node:added', 'node:removed', 'node:moved', 'graph:loaded', 'history:changed'];
+const EDGE_EVENTS = ['edge:connected', 'edge:disconnected', 'node:removed', 'graph:loaded', 'history:changed'];
+const GRAPH_EVENTS = [
+    'node:added', 'node:removed', 'node:moved', 'edge:connected', 'edge:disconnected',
+    'widget:changed', 'graph:loaded', 'history:changed',
+];
+const EMPTY_NODES = Object.freeze([]);
+const EMPTY_EDGES = Object.freeze([]);
+const EMPTY_SELECTION = Object.freeze([]);
+const DEFAULT_VIEWPORT = Object.freeze({ x: 0, y: 0, zoom: 1 });
+/** Live array of nodes; re-renders on add/remove/move, load and undo/redo. */
+export const useNodes = makeEditorStoreHook(NODE_EVENTS, (e) => Object.freeze(Array.from(e.graph.nodes())), EMPTY_NODES);
+/** Live array of edges; re-renders on connect/disconnect, node removal, load and undo/redo. */
+export const useEdges = makeEditorStoreHook(EDGE_EVENTS, (e) => Object.freeze(Array.from(e.graph.edges())), EMPTY_EDGES);
+/** Live selection (node ids); re-renders on selection change. */
+export const useSelection = makeEditorStoreHook(['selection:changed'], (e) => Object.freeze([...e.selection.ids()]), EMPTY_SELECTION);
+/** Live viewport (`x`, `y`, `zoom`); re-renders on pan/zoom. */
+export const useViewport = makeEditorStoreHook(['viewport:changed'], (e) => e.viewport, DEFAULT_VIEWPORT);
+/** Live serialized graph (xenolith.v1); recomputes on any graph mutation, load and undo/redo. */
+export const useGraphJSON = makeEditorStoreHook(GRAPH_EVENTS, (e) => e.toJSON(), null);
+import { useEffect } from 'react';
+/**
+ * Subscribe to a single editor event from a React component. Handler is auto-rebound when the
+ * editor changes; unsubscribed on unmount. Use this for events that don't have a dedicated hook —
+ * `node:click`, `edge:disconnected`, `sidebar:opened`, `livemode:changed`, `node:drop`, the four
+ * preventable `*-ing` events, etc.
+ *
+ * The handler is captured by closure each render — no deps array needed; the latest closure is
+ * always called. This matches `useSyncExternalStore` semantics and avoids stale-closure footguns.
+ *
+ * @example
+ *   useEditorEvent('node:removing', (p) => { if (p.nodeId === lockedId) p.cancel() })
+ *   useEditorEvent('widget:changed', (p) => setLocalCopy(p.value))
+ */
+export function useEditorEvent(event, handler) {
+    const editor = useXenolithEditor();
+    const handlerRef = useRef(handler);
+    handlerRef.current = handler;
+    useEffect(() => {
+        if (!editor)
+            return;
+        return editor.on(event, (payload) => handlerRef.current(payload));
+    }, [editor, event]);
+}
+const UNDO_REDO_EVENTS = ['history:changed'];
+/**
+ * `{ canUndo, canRedo, undo, redo }` — live undo/redo state + stable callable handles. Use for
+ * toolbars: `<button disabled={!canUndo} onClick={undo}>Undo</button>`. Re-renders whenever the
+ * editor's undo/redo log changes.
+ */
+export function useUndoRedo() {
+    const editor = useXenolithEditor();
+    const state = makeEditorStoreHook(UNDO_REDO_EVENTS, (e) => ({ canUndo: e.history.canUndo, canRedo: e.history.canRedo }), { canUndo: false, canRedo: false })();
+    return {
+        canUndo: state.canUndo,
+        canRedo: state.canRedo,
+        undo: useCallback(() => editor?.history.undo() ?? false, [editor]),
+        redo: useCallback(() => editor?.history.redo() ?? false, [editor]),
+    };
+}
+//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type XenolithProps } from '@xenolithengine/graph-adapter-core';
+import type { XenolithEditor } from '@xenolithengine/graph-editor';
+import { type EventCallbacks } from './events-map.js';
+export type { EventCallbacks } from './events-map.js';
+export { EVENT_PROP } from './events-map.js';
+export { XenolithContext, useXenolithEditor, useEditor } from './context.js';
+export { XenolithPanel, XenolithButton, XenolithControls, XenolithMiniMap, type PanelPosition, type XenolithPanelProps, type XenolithButtonProps, type XenolithControlsProps, type XenolithMiniMapProps, } from './components.js';
+export { useNodes, useEdges, useSelection, useViewport, useGraphJSON, useEditorEvent, useUndoRedo } from './hooks.js';
+export { reactWidget, type WidgetProps } from './react-widget.js';
+export interface XenolithGraphProps extends XenolithProps, EventCallbacks {
+    className?: string;
+    style?: CSSProperties;
+    /** Called once the editor is mounted and ready. */
+    onReady?: (editor: XenolithEditor) => void;
+    /** Forwarded to the host div, e.g. to grab the editor imperatively. */
+    containerRef?: Ref<HTMLDivElement>;
+    /** In-editor overlay UI: `<XenolithPanel>`, `<XenolithControls>`, or any component using the hooks. */
+    children?: ReactNode;
+}
+/**
+ * `<XenolithGraph>` — idiomatic React wrapper. Pass editor props (`theme`, `graph`, `minimap`, …)
+ * and `on*` event callbacks; the component mounts the editor into its div, keeps props in sync, and
+ * tears it down on unmount. The editor is WebGL/client-only — render it only in the browser.
+ */
+export declare function XenolithGraph(props: XenolithGraphProps): ReactElement;
+/** Lower-level hook: mount a XenolithGraph editor into `hostRef` and return the binding ref. */
+export declare function useXenolith(hostRef: Ref<HTMLDivElement>, props?: XenolithProps): {
+    editorRef: {
+        current: XenolithEditor | null;
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AACpH,OAAO,EAA2C,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAChH,OAAO,KAAK,EAAgB,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAChF,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGjE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC5E,OAAO,EACL,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,eAAe,EAChE,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,mBAAmB,EACrE,KAAK,qBAAqB,EAAE,KAAK,oBAAoB,GACtD,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACrH,OAAO,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,cAAc;IACvE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,mDAAmD;IACnD,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAA;IAC1C,uEAAuE;IACvE,YAAY,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IAClC,uGAAuG;IACvG,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAUD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAyDrE;AAED,gGAAgG;AAChG,wBAAgB,WAAW,CACzB,OAAO,EAAE,GAAG,CAAC,cAAc,CAAC,EAC5B,KAAK,GAAE,aAAkB,GACxB;IAAE,SAAS,EAAE;QAAE,OAAO,EAAE,cAAc,GAAG,IAAI,CAAA;KAAE,CAAA;CAAE,CAqBnD"}

package/dist/index.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+// `'use client'` is REQUIRED — Xenolith is WebGL/PIXI; cannot run as a React Server Component. Without
+// this directive, Next.js App Router fails at the first import. Same applies to react-widget.tsx,
+// hooks.ts, components.tsx, context.ts.
+import { useEffect, useRef, useState } from 'react';
+import { createEditorBinding } from '@xenolithengine/graph-adapter-core';
+import { EVENT_PROP } from './events-map.js';
+import { XenolithContext } from './context.js';
+export { EVENT_PROP } from './events-map.js';
+export { XenolithContext, useXenolithEditor, useEditor } from './context.js';
+export { XenolithPanel, XenolithButton, XenolithControls, XenolithMiniMap, } from './components.js';
+export { useNodes, useEdges, useSelection, useViewport, useGraphJSON, useEditorEvent, useUndoRedo } from './hooks.js';
+export { reactWidget } from './react-widget.js';
+const EDITOR_KEYS = ['theme', 'graph', 'zoomBounds', 'minimap', 'disableGrid', 'snap', 'resizeToWindow', 'fitOnLoad', 'isValidConnection'];
+function pickEditorProps(props) {
+    const out = {};
+    for (const k of EDITOR_KEYS)
+        if (props[k] !== undefined)
+            out[k] = props[k];
+    return out;
+}
+/**
+ * `<XenolithGraph>` — idiomatic React wrapper. Pass editor props (`theme`, `graph`, `minimap`, …)
+ * and `on*` event callbacks; the component mounts the editor into its div, keeps props in sync, and
+ * tears it down on unmount. The editor is WebGL/client-only — render it only in the browser.
+ */
+export function XenolithGraph(props) {
+    const hostRef = useRef(null);
+    const bindingRef = useRef(null);
+    // Editor lives in state so overlay children (panels/controls/hooks) render once it's ready.
+    const [editor, setEditor] = useState(null);
+    // Latest callbacks, read by the stable subscriptions so changing a handler never re-subscribes.
+    const cbRef = useRef(props);
+    cbRef.current = props;
+    // Mount once. Subscriptions read the live cbRef, so they survive prop changes.
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return;
+        let disposed = false;
+        const offs = [];
+        void createEditorBinding(host, pickEditorProps(cbRef.current)).then((binding) => {
+            if (disposed) {
+                binding.destroy();
+                return;
+            }
+            bindingRef.current = binding;
+            cbRef.current.onReady?.(binding.editor);
+            setEditor(binding.editor);
+            for (const [event, prop] of Object.entries(EVENT_PROP)) {
+                offs.push(binding.on(event, (payload) => {
+                    ;
+                    cbRef.current[prop]?.(payload);
+                }));
+            }
+        });
+        return () => {
+            disposed = true;
+            for (const off of offs)
+                off();
+            bindingRef.current?.destroy();
+            bindingRef.current = null;
+            setEditor(null);
+        };
+    }, []);
+    // Sync editor props on every render (reference-diffed inside the binding).
+    useEffect(() => { bindingRef.current?.setProps(pickEditorProps(props)); });
+    return (_jsx("div", { ref: (el) => {
+            hostRef.current = el;
+            if (typeof props.containerRef === 'function')
+                props.containerRef(el);
+            else if (props.containerRef)
+                props.containerRef.current = el;
+        }, className: props.className, style: props.style, children: _jsx(XenolithContext.Provider, { value: editor, children: editor ? props.children : null }) }));
+}
+/** Lower-level hook: mount a XenolithGraph editor into `hostRef` and return the binding ref. */
+export function useXenolith(hostRef, props = {}) {
+    const editorRef = useRef(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const bindingRef = useRef(null);
+    useEffect(() => {
+        const el = hostRef.current;
+        if (!el)
+            return;
+        let disposed = false;
+        void createEditorBinding(el, propsRef.current).then((binding) => {
+            if (disposed) {
+                binding.destroy();
+                return;
+            }
+            bindingRef.current = binding;
+            editorRef.current = binding.editor;
+        });
+        return () => { disposed = true; bindingRef.current?.destroy(); bindingRef.current = null; editorRef.current = null; };
+    }, []);
+    useEffect(() => { bindingRef.current?.setProps(props); });
+    return { editorRef };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/react-widget.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { DomWidgetController } from '@xenolithengine/graph-editor';
+/** Props every React-component widget receives. `value` is the widget's stored value (node.state),
+ *  `setValue` commits a change (undoable). `accent`/`text`/`muted` come from the active theme. */
+export interface WidgetProps {
+    value: unknown;
+    setValue: (v: unknown) => void;
+    accent: string;
+    text: string;
+    muted: string;
+    width: number;
+    height: number;
+}
+/** Bridge a React component into a XenolithGraph custom widget. This is the heart of "bring your
+ *  own UI": `editor.registerWidget('name', reactWidget(MyComponent))` renders `MyComponent` as the
+ *  node's widget, with full React state/hooks/libraries available. */
+export declare function reactWidget(Component: (props: WidgetProps) => ReactNode): DomWidgetController;
+//# sourceMappingURL=react-widget.d.ts.map

package/dist/react-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-widget.d.ts","sourceRoot":"","sources":["../src/react-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAEvE;kGACkG;AAClG,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;sEAEsE;AACtE,wBAAgB,WAAW,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,SAAS,GAAG,mBAAmB,CAe7F"}

package/dist/react-widget.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+/** Bridge a React component into a XenolithGraph custom widget. This is the heart of "bring your
+ *  own UI": `editor.registerWidget('name', reactWidget(MyComponent))` renders `MyComponent` as the
+ *  node's widget, with full React state/hooks/libraries available. */
+export function reactWidget(Component) {
+    let root = null;
+    let setValue = () => { };
+    const toProps = (c) => ({ value: c.value, setValue, accent: c.accent, text: c.text, muted: c.muted, width: c.width, height: c.height });
+    return {
+        mount(el, c) {
+            setValue = c.setValue;
+            root = createRoot(el);
+            root.render(_jsx(Component, { ...toProps(c) }));
+            return () => { root?.unmount(); root = null; };
+        },
+        update(c) { root?.render(_jsx(Component, { ...toProps(c) })); },
+    };
+}
+//# sourceMappingURL=react-widget.js.map

package/dist/react-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-widget.js","sourceRoot":"","sources":["../src/react-widget.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAO,EAAE,UAAU,EAAa,MAAM,kBAAkB,CAAA;AAgBxD;;sEAEsE;AACtE,MAAM,UAAU,WAAW,CAAC,SAA4C;IACtE,IAAI,IAAI,GAAgB,IAAI,CAAA;IAC5B,IAAI,QAAQ,GAAyB,GAAG,EAAE,GAAE,CAAC,CAAA;IAC7C,MAAM,OAAO,GAAG,CAAC,CAAiG,EAAe,EAAE,CACjI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAA;IAElH,OAAO;QACL,KAAK,CAAC,EAAE,EAAE,CAAC;YACT,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAA;YACrB,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC,CAAA;YACrB,IAAI,CAAC,MAAM,CAAC,KAAC,SAAS,OAAK,OAAO,CAAC,CAAC,CAAC,GAAI,CAAC,CAAA;YAC1C,OAAO,GAAG,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,IAAI,GAAG,IAAI,CAAA,CAAC,CAAC,CAAA;QAC/C,CAAC;QACD,MAAM,CAAC,CAAC,IAAI,IAAI,EAAE,MAAM,CAAC,KAAC,SAAS,OAAK,OAAO,CAAC,CAAC,CAAC,GAAI,CAAC,CAAA,CAAC,CAAC;KAC1D,CAAA;AACH,CAAC"}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@xenolithengine/graph-react",
+  "version": "0.7.0-beta.0",
+  "description": "React adapter for XenolithGraph — <XenolithGraph> component + useXenolith hook.",
+  "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": false,
+  "dependencies": {
+    "@xenolithengine/graph-adapter-core": "0.7.0-beta.0",
+    "@xenolithengine/graph-editor": "0.7.0-beta.0"
+  },
+  "peerDependencies": {
+    "pixi.js": "^8.6.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19",
+    "jsdom": "^25.0.0",
+    "pixi.js": "^8.6.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "keywords": [
+    "react",
+    "node-editor",
+    "node-graph",
+    "react-flow-alternative",
+    "blueprint",
+    "flow",
+    "graph-editor"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XenolithEngine/xenolith-graph.git",
+    "directory": "packages/react"
+  },
+  "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"
+  }
+}