@simplex-viz/react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SimplexViz Contributors
+
+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

@@ -1,3 +1,40 @@
-# Temporary Holding Version
+# @simplex-viz/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+End-to-end type-safe React bindings, declarative JSX node renderers, and imperative controller hooks for `@simplex-viz/core` and `@simplex-viz/svg`.
+
+## Installation
+
+```bash
+npm install @simplex-viz/core @simplex-viz/svg @simplex-viz/react
+```
+
+## Quickstart
+
+```tsx
+import { SimplexTopicGraph, useSimplexGraphController } from '@simplex-viz/react';
+
+export function MyGraph({ items }: { items: readonly MyItem[] }) {
+  const { controllerRef, handle } = useSimplexGraphController<MyItem, MyContentVisual, MyClusterVisual>();
+
+  return (
+    <SimplexTopicGraph
+      controllerRef={controllerRef}
+      items={items}
+      getId={(item) => item.slug}
+      getTags={(item) => item.hashtags}
+      visualResolver={resolver}
+      renderContentNode={(item, ctx) => (
+        <g>
+          <circle r={10} fill={ctx.mixedColorHex} />
+        </g>
+      )}
+      renderClusterNode={(cluster) => (
+        <g>
+          <rect x={-50} y={-16} width={100} height={32} rx={6} fill="#0f172a" stroke={cluster.colorHex} />
+          <text textAnchor="middle" y={4} fill="#f8fafc">{cluster.code}</text>
+        </g>
+      )}
+    />
+  );
+}
+```

package/dist/ReactJsxSvgView.d.ts

@@ -0,0 +1,30 @@
+import { type ClusterDescriptor, type ContentLayoutContext, type ConvexGeometry, type NodeRenderState } from '@simplex-viz/core';
+import { type SvgNodeView } from '@simplex-viz/svg';
+import type { ReactNode } from 'react';
+export interface ContentDomainRecord<TItem, TTagMeta, TClusterMeta> {
+    readonly item: TItem;
+    readonly ctx: ContentLayoutContext<TItem, TTagMeta, TClusterMeta>;
+}
+/**
+ * Bridges a declarative React JSX render function into an `@simplex-viz/svg` `SvgNodeView`
+ * with automatic offscreen `getBBox()` convex hull measurement and cached DOM updates.
+ */
+export declare class ReactJsxSvgView<TVisual, TDomain> implements SvgNodeView<TVisual> {
+    private readonly renderFn;
+    private readonly getKey;
+    private readonly domainByKey;
+    private readonly rootsByGroup;
+    private readonly activeRoots;
+    private measureGroup;
+    constructor(params: {
+        readonly renderFn: (domain: TDomain, state: NodeRenderState<TVisual>) => ReactNode;
+        readonly getKey: (visual: TVisual) => string;
+        readonly domainByKey: ReadonlyMap<string, TDomain>;
+    });
+    measureConvexHull(visual: TVisual, measureSvg: SVGSVGElement): ConvexGeometry;
+    mountOrUpdate(groupEl: SVGGElement, visual: TVisual, state: NodeRenderState<TVisual>): void;
+    dispose(): void;
+}
+export type ContentJsxRenderFn<TItem, TContentVisual, TTagMeta, TClusterMeta> = (item: TItem, ctx: ContentLayoutContext<TItem, TTagMeta, TClusterMeta>, state: NodeRenderState<TContentVisual>) => ReactNode;
+export type ClusterJsxRenderFn<TItem, TClusterVisual, TTagMeta, TClusterMeta> = (cluster: ClusterDescriptor<TItem, TTagMeta, TClusterMeta>, state: NodeRenderState<TClusterVisual>) => ReactNode;
+//# sourceMappingURL=ReactJsxSvgView.d.ts.map

package/dist/ReactJsxSvgView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactJsxSvgView.d.ts","sourceRoot":"","sources":["../src/ReactJsxSvgView.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,mBAAmB,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY;IAChE,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,oBAAoB,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;CACnE;AAED;;;GAGG;AACH,qBAAa,eAAe,CAAC,OAAO,EAAE,OAAO,CAAE,YAAW,WAAW,CAAC,OAAO,CAAC;IAC5E,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAGV;IACf,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAmB;IAC/C,OAAO,CAAC,YAAY,CAA4B;IAEhD,YAAY,MAAM,EAAE;QAClB,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,SAAS,CAAC;QACnF,QAAQ,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC;QAC7C,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACpD,EAIA;IAED,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,GAAG,cAAc,CA2F5E;IAED,aAAa,CACX,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,GAC9B,IAAI,CAcN;IAED,OAAO,IAAI,IAAI,CASd;CACF;AAED,MAAM,MAAM,kBAAkB,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,IAAI,CAC9E,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,oBAAoB,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,EACxD,KAAK,EAAE,eAAe,CAAC,cAAc,CAAC,KACnC,SAAS,CAAC;AAEf,MAAM,MAAM,kBAAkB,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,IAAI,CAC9E,OAAO,EAAE,iBAAiB,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,EACzD,KAAK,EAAE,eAAe,CAAC,cAAc,CAAC,KACnC,SAAS,CAAC"}

package/dist/SimplexTopicGraph.d.ts

@@ -0,0 +1,44 @@
+import type { ClusterDescriptor, ClusterHoverEvent, ClusterMetaConfig, ContentHoverEvent, ContentLayoutContext, DefaultTaggedItem, HitTarget, ItemIdentityConfig, LayoutMetrics, LayoutSolverOptions, MeshOptions, NodeRenderState, NormalizedPointerEvent, VisualResolver, WheelBehavior } from '@simplex-viz/core';
+import { SimplexSvgController, type SvgNodeView } from '@simplex-viz/svg';
+import { type CSSProperties, type MutableRefObject, type ReactNode } from 'react';
+/**
+ * Props for `<SimplexTopicGraph />`, preserving end-to-end generic inference across
+ * `TItem`, `TContentVisual`, `TClusterVisual`, `TTagMeta`, and `TClusterMeta`.
+ */
+export type SimplexTopicGraphProps<TItem = DefaultTaggedItem, TContentVisual = unknown, TClusterVisual = unknown, TTagMeta = undefined, TClusterMeta = undefined> = ItemIdentityConfig<TItem> & ClusterMetaConfig<TItem, TTagMeta, TClusterMeta> & {
+    readonly items: readonly TItem[];
+    readonly visualResolver: VisualResolver<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta>;
+    /** Portable `@simplex-viz/svg` view plugin for content items. */
+    readonly contentView?: SvgNodeView<TContentVisual>;
+    /** Portable `@simplex-viz/svg` view plugin for topic clusters. */
+    readonly clusterView?: SvgNodeView<TClusterVisual>;
+    /** Optional declarative React JSX renderer for content items (auto-measured via `getBBox()`). */
+    readonly renderContentNode?: (item: TItem, ctx: ContentLayoutContext<TItem, TTagMeta, TClusterMeta>, state: NodeRenderState<TContentVisual>) => ReactNode;
+    /** Optional declarative React JSX renderer for topic clusters (auto-measured via `getBBox()`). */
+    readonly renderClusterNode?: (cluster: ClusterDescriptor<TItem, TTagMeta, TClusterMeta>, state: NodeRenderState<TClusterVisual>) => ReactNode;
+    readonly normalizeTag?: (rawTag: string) => string;
+    readonly resolveTagMeta?: (normalizedTag: string) => TTagMeta | undefined;
+    readonly meshOptions?: MeshOptions;
+    readonly layoutOptions?: LayoutSolverOptions;
+    readonly sizeMultiplier?: number;
+    readonly showHulls?: boolean;
+    readonly pinnedIds?: ReadonlySet<string> | readonly string[];
+    readonly highlightedIds?: ReadonlySet<string> | readonly string[];
+    readonly focusedClusterUid?: string | null;
+    readonly onContentHover?: (event: ContentHoverEvent<TItem, TContentVisual, TTagMeta, TClusterMeta> | null) => void;
+    readonly onClusterHover?: (event: ClusterHoverEvent<TItem, TClusterVisual, TTagMeta, TClusterMeta> | null) => void;
+    readonly onLeftClick?: (target: HitTarget<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta>, rawEvent: NormalizedPointerEvent) => void;
+    readonly onRightClick?: (target: HitTarget<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta>, rawEvent: NormalizedPointerEvent) => boolean | void;
+    readonly onWheel?: WheelBehavior;
+    readonly onMetricsChange?: (metrics: LayoutMetrics) => void;
+    readonly onClustersChange?: (clusters: readonly ClusterDescriptor<TItem, TTagMeta, TClusterMeta>[]) => void;
+    readonly onFpsUpdate?: (fps: number) => void;
+    readonly controllerRef?: MutableRefObject<SimplexSvgController<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta> | null>;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+};
+/**
+ * Type-safe React visualization component wrapping `@simplex-viz/core` and `@simplex-viz/svg`.
+ */
+export declare function SimplexTopicGraph<TItem = DefaultTaggedItem, TContentVisual = unknown, TClusterVisual = unknown, TTagMeta = undefined, TClusterMeta = undefined>(props: SimplexTopicGraphProps<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta>): import("react").JSX.Element;
+//# sourceMappingURL=SimplexTopicGraph.d.ts.map

package/dist/SimplexTopicGraph.d.ts.map

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

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ReactJsxSvgView';
+export * from './useSimplexGraphController';
+export * from './SimplexTopicGraph';
+//# 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":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -0,0 +1,387 @@
+import { rectToConvexPolygon } from '@simplex-viz/core';
+import { SVG_NS, SimplexSvgController } from '@simplex-viz/svg';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { useRef, useCallback, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ReactJsxSvgView.ts
+var ReactJsxSvgView = class {
+  renderFn;
+  getKey;
+  domainByKey;
+  rootsByGroup = /* @__PURE__ */ new WeakMap();
+  activeRoots = /* @__PURE__ */ new Set();
+  measureGroup = null;
+  constructor(params) {
+    this.renderFn = params.renderFn;
+    this.getKey = params.getKey;
+    this.domainByKey = params.domainByKey;
+  }
+  measureConvexHull(visual, measureSvg) {
+    const key = this.getKey(visual);
+    const domain = this.domainByKey.get(key);
+    if (!domain) {
+      return rectToConvexPolygon(48, 28, 6);
+    }
+    const doc = measureSvg.ownerDocument;
+    let bin = measureSvg.querySelector("g.sv-measure-bin");
+    if (!bin) {
+      bin = doc.createElementNS(SVG_NS, "g");
+      bin.setAttribute("class", "sv-measure-bin");
+      bin.setAttribute("visibility", "hidden");
+      bin.setAttribute("pointer-events", "none");
+      bin.setAttribute("transform", "translate(-99999, -99999)");
+      measureSvg.appendChild(bin);
+    }
+    if (!this.measureGroup || this.measureGroup.parentNode !== bin) {
+      this.measureGroup = doc.createElementNS(SVG_NS, "g");
+      bin.appendChild(this.measureGroup);
+    }
+    const dummyState = {
+      id: "__measure__",
+      x: 0,
+      y: 0,
+      scale: 1,
+      opacity: 1,
+      visual,
+      hull: { kind: "circle", radius: 16 },
+      cacheKey: key,
+      interaction: {
+        isHovered: false,
+        isPinned: false,
+        isDimmed: false,
+        isHighlighted: false
+      },
+      transition: null
+    };
+    const jsx2 = this.renderFn(domain, dummyState);
+    const markup = renderToStaticMarkup(jsx2);
+    const wrapperSvg = doc.createElementNS(SVG_NS, "svg");
+    wrapperSvg.innerHTML = markup;
+    while (this.measureGroup.firstChild) {
+      this.measureGroup.removeChild(this.measureGroup.firstChild);
+    }
+    while (wrapperSvg.firstChild) {
+      this.measureGroup.appendChild(wrapperSvg.firstChild);
+    }
+    let width = 0;
+    let height = 0;
+    try {
+      if (typeof this.measureGroup.getBBox === "function") {
+        const bbox = this.measureGroup.getBBox();
+        width = bbox.width;
+        height = bbox.height;
+      }
+    } catch {
+    }
+    if (width <= 1 || height <= 1) {
+      let maxHalfW = 0;
+      let maxHalfH = 0;
+      this.measureGroup.querySelectorAll("rect, circle, text").forEach((el) => {
+        const tag = el.tagName.toLowerCase();
+        if (tag === "rect") {
+          const w = parseFloat(el.getAttribute("width") ?? "0");
+          const h = parseFloat(el.getAttribute("height") ?? "0");
+          maxHalfW = Math.max(maxHalfW, w / 2);
+          maxHalfH = Math.max(maxHalfH, h / 2);
+        } else if (tag === "circle") {
+          const r = parseFloat(el.getAttribute("r") ?? "0");
+          maxHalfW = Math.max(maxHalfW, r);
+          maxHalfH = Math.max(maxHalfH, r);
+        } else if (tag === "text") {
+          const len = (el.textContent ?? "").length;
+          const fs = parseFloat(el.getAttribute("font-size") ?? "11");
+          maxHalfW = Math.max(maxHalfW, len * fs * 0.56 / 2);
+          maxHalfH = Math.max(maxHalfH, fs * 0.75);
+        }
+      });
+      width = Math.max(24, maxHalfW * 2);
+      height = Math.max(20, maxHalfH * 2);
+    }
+    return rectToConvexPolygon(width + 4, height + 4, 6);
+  }
+  mountOrUpdate(groupEl, visual, state) {
+    const key = this.getKey(visual);
+    const domain = this.domainByKey.get(key);
+    if (!domain) return;
+    let root = this.rootsByGroup.get(groupEl);
+    if (!root) {
+      while (groupEl.firstChild) groupEl.removeChild(groupEl.firstChild);
+      root = createRoot(groupEl);
+      this.rootsByGroup.set(groupEl, root);
+      this.activeRoots.add(root);
+    }
+    root.render(this.renderFn(domain, state));
+  }
+  dispose() {
+    const roots = [...this.activeRoots];
+    this.activeRoots.clear();
+    this.measureGroup = null;
+    queueMicrotask(() => {
+      for (const r of roots) {
+        r.unmount();
+      }
+    });
+  }
+};
+function useSimplexGraphController() {
+  const controllerRef = useRef(null);
+  const addItems = useCallback((items) => {
+    controllerRef.current?.addItems(items);
+  }, []);
+  const removeItems = useCallback((ids) => {
+    controllerRef.current?.removeItems(ids);
+  }, []);
+  const setItems = useCallback((items) => {
+    controllerRef.current?.setItems(items);
+  }, []);
+  const resetCamera = useCallback(() => {
+    controllerRef.current?.camera.reset();
+  }, []);
+  const zoomBy = useCallback((factor) => {
+    const ctrl = controllerRef.current;
+    if (!ctrl) return;
+    const svg = ctrl.getSvgElement();
+    const rect = svg.getBoundingClientRect();
+    const cam = ctrl.camera;
+    cam.zoomToCursor(rect.width / 2, rect.height / 2, factor);
+  }, []);
+  const getMetrics = useCallback(() => {
+    return controllerRef.current?.getMetrics() ?? null;
+  }, []);
+  const getClusters = useCallback(() => {
+    return controllerRef.current?.getClusters() ?? [];
+  }, []);
+  const getRawController = useCallback(() => {
+    return controllerRef.current;
+  }, []);
+  return {
+    controllerRef,
+    handle: {
+      addItems,
+      removeItems,
+      setItems,
+      resetCamera,
+      zoomBy,
+      getMetrics,
+      getClusters,
+      getRawController
+    }
+  };
+}
+function SimplexTopicGraph(props) {
+  const containerRef = useRef(null);
+  const ctrlRef = useRef(null);
+  const contentDomainByKeyRef = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const clusterDomainByKeyRef = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const jsxContentViewRef = useRef(null);
+  const jsxClusterViewRef = useRef(null);
+  const latestPropsRef = useRef(props);
+  latestPropsRef.current = props;
+  const buildWrappedResolver = (base) => ({
+    resolveContentVisual: (item, ctx) => {
+      const visual = base.resolveContentVisual(item, ctx);
+      const key = base.getVisualCacheKey(visual);
+      contentDomainByKeyRef.current.set(key, { item, ctx });
+      return visual;
+    },
+    resolveClusterVisual: (cluster) => {
+      const visual = base.resolveClusterVisual(cluster);
+      const key = base.getVisualCacheKey(visual);
+      clusterDomainByKeyRef.current.set(key, cluster);
+      return visual;
+    },
+    getVisualCacheKey: (visual) => base.getVisualCacheKey(visual)
+  });
+  const resolveActiveViews = () => {
+    const p = latestPropsRef.current;
+    let contentView;
+    if (p.renderContentNode) {
+      const renderFn = p.renderContentNode;
+      jsxContentViewRef.current?.dispose();
+      const jsxView = new ReactJsxSvgView({
+        renderFn: (domain, state) => renderFn(domain.item, domain.ctx, state),
+        getKey: (v) => p.visualResolver.getVisualCacheKey(v),
+        domainByKey: contentDomainByKeyRef.current
+      });
+      jsxContentViewRef.current = jsxView;
+      contentView = jsxView;
+    } else if (p.contentView) {
+      jsxContentViewRef.current?.dispose();
+      jsxContentViewRef.current = null;
+      contentView = p.contentView;
+    } else {
+      contentView = {
+        measureConvexHull: () => ({ kind: "circle", radius: 10 }),
+        mountOrUpdate: (groupEl, _visual, state) => {
+          const doc = groupEl.ownerDocument;
+          let circle = groupEl.querySelector("circle");
+          if (!circle) {
+            circle = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+            circle.setAttribute("r", "9");
+            groupEl.appendChild(circle);
+          }
+          circle.setAttribute("fill", state.interaction.isHovered ? "#22d3ee" : "#64748b");
+        }
+      };
+    }
+    let clusterView;
+    if (p.renderClusterNode) {
+      const renderFn = p.renderClusterNode;
+      jsxClusterViewRef.current?.dispose();
+      const jsxView = new ReactJsxSvgView({
+        renderFn: (cluster, state) => renderFn(cluster, state),
+        getKey: (v) => p.visualResolver.getVisualCacheKey(v),
+        domainByKey: clusterDomainByKeyRef.current
+      });
+      jsxClusterViewRef.current = jsxView;
+      clusterView = jsxView;
+    } else if (p.clusterView) {
+      jsxClusterViewRef.current?.dispose();
+      jsxClusterViewRef.current = null;
+      clusterView = p.clusterView;
+    } else {
+      clusterView = {
+        measureConvexHull: () => ({ kind: "circle", radius: 22 }),
+        mountOrUpdate: (groupEl, _visual, state) => {
+          const doc = groupEl.ownerDocument;
+          let circle = groupEl.querySelector("circle");
+          if (!circle) {
+            circle = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+            circle.setAttribute("r", "20");
+            circle.setAttribute("fill", "#0f172a");
+            circle.setAttribute("stroke-width", "1.5");
+            groupEl.appendChild(circle);
+          }
+          circle.setAttribute("stroke", state.interaction.isHovered ? "#f8fafc" : "#38bdf8");
+        }
+      };
+    }
+    return { contentView, clusterView };
+  };
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const p = latestPropsRef.current;
+    const { contentView, clusterView } = resolveActiveViews();
+    const ctrl = SimplexSvgController.createFromResolved(el, {
+      items: p.items,
+      getId: p.getId,
+      getTags: p.getTags,
+      deriveClusterMeta: p.deriveClusterMeta,
+      visualResolver: buildWrappedResolver(p.visualResolver),
+      contentView,
+      clusterView,
+      normalizeTag: p.normalizeTag,
+      resolveTagMeta: p.resolveTagMeta,
+      meshOptions: p.meshOptions,
+      layoutOptions: {
+        ...p.layoutOptions,
+        sizeMultiplier: p.sizeMultiplier ?? p.layoutOptions?.sizeMultiplier ?? 1
+      },
+      showHulls: p.showHulls,
+      interactions: {
+        onContentHover: (ev) => latestPropsRef.current.onContentHover?.(ev),
+        onClusterHover: (ev) => latestPropsRef.current.onClusterHover?.(ev),
+        onLeftClick: (t, raw) => latestPropsRef.current.onLeftClick?.(t, raw),
+        onRightClick: (t, raw) => latestPropsRef.current.onRightClick?.(t, raw),
+        onWheel: (ev, cam) => {
+          const policy = latestPropsRef.current.onWheel ?? "zoom-to-cursor";
+          if (policy === "none") return;
+          if (typeof policy === "function") {
+            policy(ev, cam);
+            return;
+          }
+          if (policy === "pan-vertical") {
+            cam.panBy(-ev.deltaX, -ev.deltaY);
+            return;
+          }
+          const factor = Math.exp(-ev.deltaY * 14e-4);
+          cam.zoomToCursor(ev.screenX, ev.screenY, factor);
+        }
+      },
+      onMetricsChange: (m) => latestPropsRef.current.onMetricsChange?.(m),
+      onClustersChange: (c) => latestPropsRef.current.onClustersChange?.(c),
+      onFpsUpdate: (fps) => latestPropsRef.current.onFpsUpdate?.(fps)
+    });
+    ctrlRef.current = ctrl;
+    if (p.controllerRef) {
+      p.controllerRef.current = ctrl;
+    }
+    return () => {
+      ctrl.destroy();
+      ctrlRef.current = null;
+      if (latestPropsRef.current.controllerRef) {
+        latestPropsRef.current.controllerRef.current = null;
+      }
+      jsxContentViewRef.current?.dispose();
+      jsxClusterViewRef.current?.dispose();
+      jsxContentViewRef.current = null;
+      jsxClusterViewRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    ctrlRef.current?.setItems(props.items);
+  }, [props.items]);
+  useEffect(() => {
+    const ctrl = ctrlRef.current;
+    if (!ctrl) return;
+    const { contentView, clusterView } = resolveActiveViews();
+    ctrl.setViews({ contentView, clusterView });
+    ctrl.setVisualResolver(buildWrappedResolver(props.visualResolver));
+  }, [
+    props.visualResolver,
+    props.contentView,
+    props.clusterView,
+    props.renderContentNode,
+    props.renderClusterNode
+  ]);
+  useEffect(() => {
+    if (props.sizeMultiplier !== void 0) {
+      ctrlRef.current?.setSizeMultiplier(props.sizeMultiplier);
+    }
+  }, [props.sizeMultiplier]);
+  useEffect(() => {
+    if (props.showHulls !== void 0) {
+      ctrlRef.current?.setShowHulls(props.showHulls);
+    }
+  }, [props.showHulls]);
+  useEffect(() => {
+    if (props.pinnedIds !== void 0) {
+      ctrlRef.current?.setPinnedIds(props.pinnedIds);
+    }
+  }, [props.pinnedIds]);
+  useEffect(() => {
+    if (props.highlightedIds !== void 0) {
+      ctrlRef.current?.setHighlightedIds(props.highlightedIds);
+    }
+  }, [props.highlightedIds]);
+  useEffect(() => {
+    if (props.focusedClusterUid !== void 0) {
+      ctrlRef.current?.setFocusedClusterUid(props.focusedClusterUid);
+    }
+  }, [props.focusedClusterUid]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: props.className,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        ...props.style
+      }
+    }
+  );
+}
+
+export { ReactJsxSvgView, SimplexTopicGraph, useSimplexGraphController };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ReactJsxSvgView.ts","../src/useSimplexGraphController.ts","../src/SimplexTopicGraph.tsx"],"names":["jsx","useRef"],"mappings":"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","file":"index.js","sourcesContent":["import {\n  rectToConvexPolygon,\n  type ClusterDescriptor,\n  type ContentLayoutContext,\n  type ConvexGeometry,\n  type NodeRenderState,\n} from '@simplex-viz/core';\nimport { SVG_NS, type SvgNodeView } from '@simplex-viz/svg';\nimport type { ReactNode } from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\nimport { renderToStaticMarkup } from 'react-dom/server';\n\nexport interface ContentDomainRecord<TItem, TTagMeta, TClusterMeta> {\n  readonly item: TItem;\n  readonly ctx: ContentLayoutContext<TItem, TTagMeta, TClusterMeta>;\n}\n\n/**\n * Bridges a declarative React JSX render function into an `@simplex-viz/svg` `SvgNodeView`\n * with automatic offscreen `getBBox()` convex hull measurement and cached DOM updates.\n */\nexport class ReactJsxSvgView<TVisual, TDomain> implements SvgNodeView<TVisual> {\n  private readonly renderFn: (\n    domain: TDomain,\n    state: NodeRenderState<TVisual>,\n  ) => ReactNode;\n  private readonly getKey: (visual: TVisual) => string;\n  private readonly domainByKey: ReadonlyMap<string, TDomain>;\n  private readonly rootsByGroup = new WeakMap<SVGGElement, Root>();\n  private readonly activeRoots = new Set<Root>();\n  private measureGroup: SVGGElement | null = null;\n\n  constructor(params: {\n    readonly renderFn: (domain: TDomain, state: NodeRenderState<TVisual>) => ReactNode;\n    readonly getKey: (visual: TVisual) => string;\n    readonly domainByKey: ReadonlyMap<string, TDomain>;\n  }) {\n    this.renderFn = params.renderFn;\n    this.getKey = params.getKey;\n    this.domainByKey = params.domainByKey;\n  }\n\n  measureConvexHull(visual: TVisual, measureSvg: SVGSVGElement): ConvexGeometry {\n    const key = this.getKey(visual);\n    const domain = this.domainByKey.get(key);\n    if (!domain) {\n      return rectToConvexPolygon(48, 28, 6);\n    }\n\n    const doc = measureSvg.ownerDocument;\n    let bin = measureSvg.querySelector<SVGGElement>('g.sv-measure-bin');\n    if (!bin) {\n      bin = doc.createElementNS(SVG_NS, 'g');\n      bin.setAttribute('class', 'sv-measure-bin');\n      bin.setAttribute('visibility', 'hidden');\n      bin.setAttribute('pointer-events', 'none');\n      bin.setAttribute('transform', 'translate(-99999, -99999)');\n      measureSvg.appendChild(bin);\n    }\n\n    if (!this.measureGroup || this.measureGroup.parentNode !== bin) {\n      this.measureGroup = doc.createElementNS(SVG_NS, 'g');\n      bin.appendChild(this.measureGroup);\n    }\n\n    const dummyState: NodeRenderState<TVisual> = {\n      id: '__measure__',\n      x: 0,\n      y: 0,\n      scale: 1,\n      opacity: 1,\n      visual,\n      hull: { kind: 'circle', radius: 16 },\n      cacheKey: key,\n      interaction: {\n        isHovered: false,\n        isPinned: false,\n        isDimmed: false,\n        isHighlighted: false,\n      },\n      transition: null,\n    };\n\n    const jsx = this.renderFn(domain, dummyState);\n    const markup = renderToStaticMarkup(jsx);\n    // Parse JSX markup into SVG namespace inside the offscreen measurement group\n    const wrapperSvg = doc.createElementNS(SVG_NS, 'svg');\n    wrapperSvg.innerHTML = markup;\n    while (this.measureGroup.firstChild) {\n      this.measureGroup.removeChild(this.measureGroup.firstChild);\n    }\n    while (wrapperSvg.firstChild) {\n      this.measureGroup.appendChild(wrapperSvg.firstChild);\n    }\n\n    let width = 0;\n    let height = 0;\n    try {\n      if (typeof this.measureGroup.getBBox === 'function') {\n        const bbox = this.measureGroup.getBBox();\n        width = bbox.width;\n        height = bbox.height;\n      }\n    } catch {\n      // Headless DOM without layout engine\n    }\n\n    if (width <= 1 || height <= 1) {\n      let maxHalfW = 0;\n      let maxHalfH = 0;\n      this.measureGroup.querySelectorAll('rect, circle, text').forEach((el) => {\n        const tag = el.tagName.toLowerCase();\n        if (tag === 'rect') {\n          const w = parseFloat(el.getAttribute('width') ?? '0');\n          const h = parseFloat(el.getAttribute('height') ?? '0');\n          maxHalfW = Math.max(maxHalfW, w / 2);\n          maxHalfH = Math.max(maxHalfH, h / 2);\n        } else if (tag === 'circle') {\n          const r = parseFloat(el.getAttribute('r') ?? '0');\n          maxHalfW = Math.max(maxHalfW, r);\n          maxHalfH = Math.max(maxHalfH, r);\n        } else if (tag === 'text') {\n          const len = (el.textContent ?? '').length;\n          const fs = parseFloat(el.getAttribute('font-size') ?? '11');\n          maxHalfW = Math.max(maxHalfW, (len * fs * 0.56) / 2);\n          maxHalfH = Math.max(maxHalfH, fs * 0.75);\n        }\n      });\n      width = Math.max(24, maxHalfW * 2);\n      height = Math.max(20, maxHalfH * 2);\n    }\n\n    return rectToConvexPolygon(width + 4, height + 4, 6);\n  }\n\n  mountOrUpdate(\n    groupEl: SVGGElement,\n    visual: TVisual,\n    state: NodeRenderState<TVisual>,\n  ): void {\n    const key = this.getKey(visual);\n    const domain = this.domainByKey.get(key);\n    if (!domain) return;\n\n    let root = this.rootsByGroup.get(groupEl);\n    if (!root) {\n      while (groupEl.firstChild) groupEl.removeChild(groupEl.firstChild);\n      root = createRoot(groupEl);\n      this.rootsByGroup.set(groupEl, root);\n      this.activeRoots.add(root);\n    }\n\n    root.render(this.renderFn(domain, state));\n  }\n\n  dispose(): void {\n    const roots = [...this.activeRoots];\n    this.activeRoots.clear();\n    this.measureGroup = null;\n    queueMicrotask(() => {\n      for (const r of roots) {\n        r.unmount();\n      }\n    });\n  }\n}\n\nexport type ContentJsxRenderFn<TItem, TContentVisual, TTagMeta, TClusterMeta> = (\n  item: TItem,\n  ctx: ContentLayoutContext<TItem, TTagMeta, TClusterMeta>,\n  state: NodeRenderState<TContentVisual>,\n) => ReactNode;\n\nexport type ClusterJsxRenderFn<TItem, TClusterVisual, TTagMeta, TClusterMeta> = (\n  cluster: ClusterDescriptor<TItem, TTagMeta, TClusterMeta>,\n  state: NodeRenderState<TClusterVisual>,\n) => ReactNode;\n","import type {\n  CameraController,\n  ClusterDescriptor,\n  DefaultTaggedItem,\n  LayoutMetrics,\n} from '@simplex-viz/core';\nimport type { SimplexSvgController } from '@simplex-viz/svg';\nimport { useCallback, useRef } from 'react';\n\n/**\n * Imperative handle bound to `<SimplexTopicGraph controllerRef={...} />`.\n */\nexport interface SimplexGraphHandle<\n  TItem = DefaultTaggedItem,\n  TContentVisual = unknown,\n  TClusterVisual = unknown,\n  TTagMeta = undefined,\n  TClusterMeta = undefined,\n> {\n  addItems(items: TItem | readonly TItem[]): void;\n  removeItems(ids: string | readonly string[]): void;\n  setItems(items: readonly TItem[]): void;\n  resetCamera(): void;\n  zoomBy(factor: number): void;\n  getMetrics(): LayoutMetrics | null;\n  getClusters(): readonly ClusterDescriptor<TItem, TTagMeta, TClusterMeta>[];\n  getRawController(): SimplexSvgController<\n    TItem,\n    TContentVisual,\n    TClusterVisual,\n    TTagMeta,\n    TClusterMeta\n  > | null;\n}\n\n/**\n * React hook returning a stable `controllerRef` and imperative transaction helpers\n * (`addItems`, `removeItems`, `setItems`, camera controls, and live telemetry getters).\n */\nexport function useSimplexGraphController<\n  TItem = DefaultTaggedItem,\n  TContentVisual = unknown,\n  TClusterVisual = unknown,\n  TTagMeta = undefined,\n  TClusterMeta = undefined,\n>(): {\n  readonly controllerRef: React.MutableRefObject<SimplexSvgController<\n    TItem,\n    TContentVisual,\n    TClusterVisual,\n    TTagMeta,\n    TClusterMeta\n  > | null>;\n  readonly handle: SimplexGraphHandle<\n    TItem,\n    TContentVisual,\n    TClusterVisual,\n    TTagMeta,\n    TClusterMeta\n  >;\n} {\n  const controllerRef = useRef<SimplexSvgController<\n    TItem,\n    TContentVisual,\n    TClusterVisual,\n    TTagMeta,\n    TClusterMeta\n  > | null>(null);\n\n  const addItems = useCallback((items: TItem | readonly TItem[]) => {\n    controllerRef.current?.addItems(items);\n  }, []);\n\n  const removeItems = useCallback((ids: string | readonly string[]) => {\n    controllerRef.current?.removeItems(ids);\n  }, []);\n\n  const setItems = useCallback((items: readonly TItem[]) => {\n    controllerRef.current?.setItems(items);\n  }, []);\n\n  const resetCamera = useCallback(() => {\n    controllerRef.current?.camera.reset();\n  }, []);\n\n  const zoomBy = useCallback((factor: number) => {\n    const ctrl = controllerRef.current;\n    if (!ctrl) return;\n    const svg = ctrl.getSvgElement();\n    const rect = svg.getBoundingClientRect();\n    const cam: CameraController = ctrl.camera;\n    cam.zoomToCursor(rect.width / 2, rect.height / 2, factor);\n  }, []);\n\n  const getMetrics = useCallback(() => {\n    return controllerRef.current?.getMetrics() ?? null;\n  }, []);\n\n  const getClusters = useCallback(() => {\n    return controllerRef.current?.getClusters() ?? [];\n  }, []);\n\n  const getRawController = useCallback(() => {\n    return controllerRef.current;\n  }, []);\n\n  return {\n    controllerRef,\n    handle: {\n      addItems,\n      removeItems,\n      setItems,\n      resetCamera,\n      zoomBy,\n      getMetrics,\n      getClusters,\n      getRawController,\n    },\n  };\n}\n","import type {\n  ClusterDescriptor,\n  ClusterHoverEvent,\n  ClusterMetaConfig,\n  ContentHoverEvent,\n  ContentLayoutContext,\n  DefaultTaggedItem,\n  HitTarget,\n  ItemIdentityConfig,\n  LayoutMetrics,\n  LayoutSolverOptions,\n  MeshOptions,\n  NodeRenderState,\n  NormalizedPointerEvent,\n  VisualResolver,\n  WheelBehavior,\n} from '@simplex-viz/core';\nimport {\n  SimplexSvgController,\n  type SvgNodeView,\n} from '@simplex-viz/svg';\nimport {\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type MutableRefObject,\n  type ReactNode,\n} from 'react';\nimport {\n  ReactJsxSvgView,\n  type ContentDomainRecord,\n} from './ReactJsxSvgView';\n\n/**\n * Props for `<SimplexTopicGraph />`, preserving end-to-end generic inference across\n * `TItem`, `TContentVisual`, `TClusterVisual`, `TTagMeta`, and `TClusterMeta`.\n */\nexport type SimplexTopicGraphProps<\n  TItem = DefaultTaggedItem,\n  TContentVisual = unknown,\n  TClusterVisual = unknown,\n  TTagMeta = undefined,\n  TClusterMeta = undefined,\n> = ItemIdentityConfig<TItem> &\n  ClusterMetaConfig<TItem, TTagMeta, TClusterMeta> & {\n    readonly items: readonly TItem[];\n    readonly visualResolver: VisualResolver<\n      TItem,\n      TContentVisual,\n      TClusterVisual,\n      TTagMeta,\n      TClusterMeta\n    >;\n    /** Portable `@simplex-viz/svg` view plugin for content items. */\n    readonly contentView?: SvgNodeView<TContentVisual>;\n    /** Portable `@simplex-viz/svg` view plugin for topic clusters. */\n    readonly clusterView?: SvgNodeView<TClusterVisual>;\n    /** Optional declarative React JSX renderer for content items (auto-measured via `getBBox()`). */\n    readonly renderContentNode?: (\n      item: TItem,\n      ctx: ContentLayoutContext<TItem, TTagMeta, TClusterMeta>,\n      state: NodeRenderState<TContentVisual>,\n    ) => ReactNode;\n    /** Optional declarative React JSX renderer for topic clusters (auto-measured via `getBBox()`). */\n    readonly renderClusterNode?: (\n      cluster: ClusterDescriptor<TItem, TTagMeta, TClusterMeta>,\n      state: NodeRenderState<TClusterVisual>,\n    ) => ReactNode;\n    readonly normalizeTag?: (rawTag: string) => string;\n    readonly resolveTagMeta?: (normalizedTag: string) => TTagMeta | undefined;\n    readonly meshOptions?: MeshOptions;\n    readonly layoutOptions?: LayoutSolverOptions;\n    readonly sizeMultiplier?: number;\n    readonly showHulls?: boolean;\n    readonly pinnedIds?: ReadonlySet<string> | readonly string[];\n    readonly highlightedIds?: ReadonlySet<string> | readonly string[];\n    readonly focusedClusterUid?: string | null;\n    readonly onContentHover?: (\n      event: ContentHoverEvent<TItem, TContentVisual, TTagMeta, TClusterMeta> | null,\n    ) => void;\n    readonly onClusterHover?: (\n      event: ClusterHoverEvent<TItem, TClusterVisual, TTagMeta, TClusterMeta> | null,\n    ) => void;\n    readonly onLeftClick?: (\n      target: HitTarget<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta>,\n      rawEvent: NormalizedPointerEvent,\n    ) => void;\n    readonly onRightClick?: (\n      target: HitTarget<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta>,\n      rawEvent: NormalizedPointerEvent,\n    ) => boolean | void;\n    readonly onWheel?: WheelBehavior;\n    readonly onMetricsChange?: (metrics: LayoutMetrics) => void;\n    readonly onClustersChange?: (\n      clusters: readonly ClusterDescriptor<TItem, TTagMeta, TClusterMeta>[],\n    ) => void;\n    readonly onFpsUpdate?: (fps: number) => void;\n    readonly controllerRef?: MutableRefObject<SimplexSvgController<\n      TItem,\n      TContentVisual,\n      TClusterVisual,\n      TTagMeta,\n      TClusterMeta\n    > | null>;\n    readonly className?: string;\n    readonly style?: CSSProperties;\n  };\n\n/**\n * Type-safe React visualization component wrapping `@simplex-viz/core` and `@simplex-viz/svg`.\n */\nexport function SimplexTopicGraph<\n  TItem = DefaultTaggedItem,\n  TContentVisual = unknown,\n  TClusterVisual = unknown,\n  TTagMeta = undefined,\n  TClusterMeta = undefined,\n>(\n  props: SimplexTopicGraphProps<\n    TItem,\n    TContentVisual,\n    TClusterVisual,\n    TTagMeta,\n    TClusterMeta\n  >,\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const ctrlRef = useRef<SimplexSvgController<\n    TItem,\n    TContentVisual,\n    TClusterVisual,\n    TTagMeta,\n    TClusterMeta\n  > | null>(null);\n\n  const contentDomainByKeyRef = useRef(\n    new Map<string, ContentDomainRecord<TItem, TTagMeta, TClusterMeta>>(),\n  );\n  const clusterDomainByKeyRef = useRef(\n    new Map<string, ClusterDescriptor<TItem, TTagMeta, TClusterMeta>>(),\n  );\n  const jsxContentViewRef = useRef<ReactJsxSvgView<\n    TContentVisual,\n    ContentDomainRecord<TItem, TTagMeta, TClusterMeta>\n  > | null>(null);\n  const jsxClusterViewRef = useRef<ReactJsxSvgView<\n    TClusterVisual,\n    ClusterDescriptor<TItem, TTagMeta, TClusterMeta>\n  > | null>(null);\n\n  const latestPropsRef = useRef(props);\n  latestPropsRef.current = props;\n\n  const buildWrappedResolver = (\n    base: VisualResolver<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta>,\n  ): VisualResolver<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta> => ({\n    resolveContentVisual: (item, ctx) => {\n      const visual = base.resolveContentVisual(item, ctx);\n      const key = base.getVisualCacheKey(visual);\n      contentDomainByKeyRef.current.set(key, { item, ctx });\n      return visual;\n    },\n    resolveClusterVisual: (cluster) => {\n      const visual = base.resolveClusterVisual(cluster);\n      const key = base.getVisualCacheKey(visual);\n      clusterDomainByKeyRef.current.set(key, cluster);\n      return visual;\n    },\n    getVisualCacheKey: (visual) => base.getVisualCacheKey(visual),\n  });\n\n  const resolveActiveViews = (): {\n    contentView: SvgNodeView<TContentVisual>;\n    clusterView: SvgNodeView<TClusterVisual>;\n  } => {\n    const p = latestPropsRef.current;\n\n    let contentView: SvgNodeView<TContentVisual>;\n    if (p.renderContentNode) {\n      const renderFn = p.renderContentNode;\n      jsxContentViewRef.current?.dispose();\n      const jsxView = new ReactJsxSvgView<\n        TContentVisual,\n        ContentDomainRecord<TItem, TTagMeta, TClusterMeta>\n      >({\n        renderFn: (domain, state) => renderFn(domain.item, domain.ctx, state),\n        getKey: (v) => p.visualResolver.getVisualCacheKey(v),\n        domainByKey: contentDomainByKeyRef.current,\n      });\n      jsxContentViewRef.current = jsxView;\n      contentView = jsxView;\n    } else if (p.contentView) {\n      jsxContentViewRef.current?.dispose();\n      jsxContentViewRef.current = null;\n      contentView = p.contentView;\n    } else {\n      contentView = {\n        measureConvexHull: () => ({ kind: 'circle', radius: 10 }),\n        mountOrUpdate: (groupEl, _visual, state) => {\n          const doc = groupEl.ownerDocument;\n          let circle = groupEl.querySelector('circle');\n          if (!circle) {\n            circle = doc.createElementNS('http://www.w3.org/2000/svg', 'circle');\n            circle.setAttribute('r', '9');\n            groupEl.appendChild(circle);\n          }\n          circle.setAttribute('fill', state.interaction.isHovered ? '#22d3ee' : '#64748b');\n        },\n      };\n    }\n\n    let clusterView: SvgNodeView<TClusterVisual>;\n    if (p.renderClusterNode) {\n      const renderFn = p.renderClusterNode;\n      jsxClusterViewRef.current?.dispose();\n      const jsxView = new ReactJsxSvgView<\n        TClusterVisual,\n        ClusterDescriptor<TItem, TTagMeta, TClusterMeta>\n      >({\n        renderFn: (cluster, state) => renderFn(cluster, state),\n        getKey: (v) => p.visualResolver.getVisualCacheKey(v),\n        domainByKey: clusterDomainByKeyRef.current,\n      });\n      jsxClusterViewRef.current = jsxView;\n      clusterView = jsxView;\n    } else if (p.clusterView) {\n      jsxClusterViewRef.current?.dispose();\n      jsxClusterViewRef.current = null;\n      clusterView = p.clusterView;\n    } else {\n      clusterView = {\n        measureConvexHull: () => ({ kind: 'circle', radius: 22 }),\n        mountOrUpdate: (groupEl, _visual, state) => {\n          const doc = groupEl.ownerDocument;\n          let circle = groupEl.querySelector('circle');\n          if (!circle) {\n            circle = doc.createElementNS('http://www.w3.org/2000/svg', 'circle');\n            circle.setAttribute('r', '20');\n            circle.setAttribute('fill', '#0f172a');\n            circle.setAttribute('stroke-width', '1.5');\n            groupEl.appendChild(circle);\n          }\n          circle.setAttribute('stroke', state.interaction.isHovered ? '#f8fafc' : '#38bdf8');\n        },\n      };\n    }\n\n    return { contentView, clusterView };\n  };\n\n  // Mount controller once on container\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    const p = latestPropsRef.current;\n    const { contentView, clusterView } = resolveActiveViews();\n\n    const ctrl = SimplexSvgController.createFromResolved(el, {\n      items: p.items,\n      getId: p.getId,\n      getTags: p.getTags,\n      deriveClusterMeta: p.deriveClusterMeta,\n      visualResolver: buildWrappedResolver(p.visualResolver),\n      contentView,\n      clusterView,\n      normalizeTag: p.normalizeTag,\n      resolveTagMeta: p.resolveTagMeta,\n      meshOptions: p.meshOptions,\n      layoutOptions: {\n        ...p.layoutOptions,\n        sizeMultiplier: p.sizeMultiplier ?? p.layoutOptions?.sizeMultiplier ?? 1,\n      },\n      showHulls: p.showHulls,\n      interactions: {\n        onContentHover: (ev) => latestPropsRef.current.onContentHover?.(ev),\n        onClusterHover: (ev) => latestPropsRef.current.onClusterHover?.(ev),\n        onLeftClick: (t, raw) => latestPropsRef.current.onLeftClick?.(t, raw),\n        onRightClick: (t, raw) => latestPropsRef.current.onRightClick?.(t, raw),\n        onWheel: (ev, cam) => {\n          const policy = latestPropsRef.current.onWheel ?? 'zoom-to-cursor';\n          if (policy === 'none') return;\n          if (typeof policy === 'function') {\n            policy(ev, cam);\n            return;\n          }\n          if (policy === 'pan-vertical') {\n            cam.panBy(-ev.deltaX, -ev.deltaY);\n            return;\n          }\n          const factor = Math.exp(-ev.deltaY * 0.0014);\n          cam.zoomToCursor(ev.screenX, ev.screenY, factor);\n        },\n      },\n      onMetricsChange: (m) => latestPropsRef.current.onMetricsChange?.(m),\n      onClustersChange: (c) => latestPropsRef.current.onClustersChange?.(c),\n      onFpsUpdate: (fps) => latestPropsRef.current.onFpsUpdate?.(fps),\n    });\n    ctrlRef.current = ctrl;\n    if (p.controllerRef) {\n      p.controllerRef.current = ctrl;\n    }\n\n    return () => {\n      ctrl.destroy();\n      ctrlRef.current = null;\n      if (latestPropsRef.current.controllerRef) {\n        latestPropsRef.current.controllerRef.current = null;\n      }\n      jsxContentViewRef.current?.dispose();\n      jsxClusterViewRef.current?.dispose();\n      jsxContentViewRef.current = null;\n      jsxClusterViewRef.current = null;\n    };\n  }, []);\n\n  // Sync items\n  useEffect(() => {\n    ctrlRef.current?.setItems(props.items);\n  }, [props.items]);\n\n  // Sync views & visual resolver (triggers smooth crossfade / morph!)\n  useEffect(() => {\n    const ctrl = ctrlRef.current;\n    if (!ctrl) return;\n    const { contentView, clusterView } = resolveActiveViews();\n    ctrl.setViews({ contentView, clusterView });\n    ctrl.setVisualResolver(buildWrappedResolver(props.visualResolver));\n  }, [\n    props.visualResolver,\n    props.contentView,\n    props.clusterView,\n    props.renderContentNode,\n    props.renderClusterNode,\n  ]);\n\n  // Sync sizeMultiplier\n  useEffect(() => {\n    if (props.sizeMultiplier !== undefined) {\n      ctrlRef.current?.setSizeMultiplier(props.sizeMultiplier);\n    }\n  }, [props.sizeMultiplier]);\n\n  // Sync showHulls\n  useEffect(() => {\n    if (props.showHulls !== undefined) {\n      ctrlRef.current?.setShowHulls(props.showHulls);\n    }\n  }, [props.showHulls]);\n\n  // Sync pinned / highlighted / focused cluster\n  useEffect(() => {\n    if (props.pinnedIds !== undefined) {\n      ctrlRef.current?.setPinnedIds(props.pinnedIds);\n    }\n  }, [props.pinnedIds]);\n\n  useEffect(() => {\n    if (props.highlightedIds !== undefined) {\n      ctrlRef.current?.setHighlightedIds(props.highlightedIds);\n    }\n  }, [props.highlightedIds]);\n\n  useEffect(() => {\n    if (props.focusedClusterUid !== undefined) {\n      ctrlRef.current?.setFocusedClusterUid(props.focusedClusterUid);\n    }\n  }, [props.focusedClusterUid]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={props.className}\n      style={{\n        position: 'relative',\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n        ...props.style,\n      }}\n    />\n  );\n}\n"]}

package/dist/useSimplexGraphController.d.ts

@@ -0,0 +1,24 @@
+import type { ClusterDescriptor, DefaultTaggedItem, LayoutMetrics } from '@simplex-viz/core';
+import type { SimplexSvgController } from '@simplex-viz/svg';
+/**
+ * Imperative handle bound to `<SimplexTopicGraph controllerRef={...} />`.
+ */
+export interface SimplexGraphHandle<TItem = DefaultTaggedItem, TContentVisual = unknown, TClusterVisual = unknown, TTagMeta = undefined, TClusterMeta = undefined> {
+    addItems(items: TItem | readonly TItem[]): void;
+    removeItems(ids: string | readonly string[]): void;
+    setItems(items: readonly TItem[]): void;
+    resetCamera(): void;
+    zoomBy(factor: number): void;
+    getMetrics(): LayoutMetrics | null;
+    getClusters(): readonly ClusterDescriptor<TItem, TTagMeta, TClusterMeta>[];
+    getRawController(): SimplexSvgController<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta> | null;
+}
+/**
+ * React hook returning a stable `controllerRef` and imperative transaction helpers
+ * (`addItems`, `removeItems`, `setItems`, camera controls, and live telemetry getters).
+ */
+export declare function useSimplexGraphController<TItem = DefaultTaggedItem, TContentVisual = unknown, TClusterVisual = unknown, TTagMeta = undefined, TClusterMeta = undefined>(): {
+    readonly controllerRef: React.MutableRefObject<SimplexSvgController<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta> | null>;
+    readonly handle: SimplexGraphHandle<TItem, TContentVisual, TClusterVisual, TTagMeta, TClusterMeta>;
+};
+//# sourceMappingURL=useSimplexGraphController.d.ts.map

package/dist/useSimplexGraphController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSimplexGraphController.d.ts","sourceRoot":"","sources":["../src/useSimplexGraphController.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAG7D;;GAEG;AACH,MAAM,WAAW,kBAAkB,CACjC,KAAK,GAAG,iBAAiB,EACzB,cAAc,GAAG,OAAO,EACxB,cAAc,GAAG,OAAO,EACxB,QAAQ,GAAG,SAAS,EACpB,YAAY,GAAG,SAAS;IAExB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,EAAE,GAAG,IAAI,CAAC;IAChD,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IACnD,QAAQ,CAAC,KAAK,EAAE,SAAS,KAAK,EAAE,GAAG,IAAI,CAAC;IACxC,WAAW,IAAI,IAAI,CAAC;IACpB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,IAAI,aAAa,GAAG,IAAI,CAAC;IACnC,WAAW,IAAI,SAAS,iBAAiB,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,EAAE,CAAC;IAC3E,gBAAgB,IAAI,oBAAoB,CACtC,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,YAAY,CACb,GAAG,IAAI,CAAC;CACV;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,GAAG,iBAAiB,EACzB,cAAc,GAAG,OAAO,EACxB,cAAc,GAAG,OAAO,EACxB,QAAQ,GAAG,SAAS,EACpB,YAAY,GAAG,SAAS,KACrB;IACH,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CACjE,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,YAAY,CACb,GAAG,IAAI,CAAC,CAAC;IACV,QAAQ,CAAC,MAAM,EAAE,kBAAkB,CACjC,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,YAAY,CACb,CAAC;CACH,CA2DA"}

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@simplex-viz/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "End-to-end type-safe React bindings, declarative JSX node renderers, and hooks for @simplex-viz/core and @simplex-viz/svg.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "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",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@simplex-viz/svg": "^0.1.0",
+    "@simplex-viz/core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "keywords": [
+    "simplex",
+    "react",
+    "svg",
+    "visualization",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ghackenberg/simplex-viz.git",
+    "directory": "packages/react"
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }