@fxhash/open-form-graph 0.0.2 → 0.0.3

package/dist/constants-BNPHdbBA.d.ts

@@ -0,0 +1,313 @@
+import { ColorTransform, Focus, HighlightStyle, MouseListener, Point, RGB, RawGraphData, RootNodeImageSources, SimNode, ThemeMode, Transform, TransformListener } from "./_types-CjgCTzqc.js";
+import { Dispatch, MutableRefObject, ReactNode } from "react";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as d3_scale2 from "d3-scale";
+import { EventEmitter } from "@fxhash/utils";
+
+//#region src/_interfaces.d.ts
+interface GraphConfig {
+  debug: false;
+  nodeSize: number;
+  minClusterSize: number;
+  maxClusterSize: number;
+  minZoom: number;
+  maxZoom: number;
+  theme: {
+    dark: [number, number, number];
+    light: [number, number, number];
+  };
+}
+//#endregion
+//#region src/util/color.d.ts
+interface ColorHandler {
+  (arg?: number): string;
+  (arg: ColorTransform): ColorHandler;
+  rgb: RGB;
+}
+/**
+ * Some utility functions to handle colors
+ */
+declare function color(rgb: RGB): ColorHandler;
+/**
+ * Dims a color to white or black
+ * @param color An array of 3 numbers representing RGB values (0-255)
+ * @param dimFactor A value between 0 and 1 where 0 is completely black and 1 is the original color
+ * @returns A new array with the dimmed RGB values
+ */
+declare function dim(factor?: number, white?: boolean): ColorTransform;
+//#endregion
+//#region src/sim/TransformCanvas.d.ts
+declare class TransformCanvas {
+  private canvas;
+  private transform;
+  private targetTransform;
+  private isAnimating;
+  private animationFrame;
+  private focus;
+  private offset;
+  private isDragging;
+  private dragStart;
+  private hasMoved;
+  private lastPointerPos;
+  private lastMovePos;
+  private velocity;
+  private lastDragTime;
+  private momentumFrame;
+  private touchStart;
+  private pinchStartDist;
+  private pinchStartScale;
+  private noInteraction;
+  private dpr;
+  private resizeObserver;
+  private mediaQueryList;
+  onUpdate?: TransformListener;
+  onClick?: MouseListener;
+  onMove?: MouseListener;
+  constructor(canvas: HTMLCanvasElement, options?: {
+    onUpdate?: TransformListener;
+    onClick?: MouseListener;
+    onMove?: MouseListener;
+    offset?: Point;
+  });
+  private bindEventHandlers;
+  private attachEventListeners;
+  private setupDPRMonitoring;
+  private updateDPR;
+  toCanvasCoords(clientX: number, clientY: number): Point;
+  private toCSSCoords;
+  private startMomentum;
+  private applyMomentum;
+  private lerp;
+  private animateTransform;
+  private startAnimation;
+  private stopAnimation;
+  private interruptAnimation;
+  private handleWheel;
+  private handleMouseDown;
+  private handleMouseMove;
+  private handleMouseUp;
+  private handleCanvasClick;
+  private handleTouchStart;
+  private handleTouchMove;
+  private handleTouchEnd;
+  resetZoom(): void;
+  transformTo(update: Partial<Transform>): void;
+  getTransformationFromWorld(worldX: number, worldY: number, newScale?: number): {
+    x: number;
+    y: number;
+    scale: number;
+  };
+  transformToWorld(worldX: number, worldY: number, newScale?: number): void;
+  trackCursor(): void;
+  setNoInteraction(noInteraction: boolean): void;
+  focusOn(focus: Focus | null): void;
+  resetFocus(): void;
+  destroy(): void;
+  getTransform(): Readonly<Transform>;
+  getTargetTransform(): Readonly<Transform>;
+  getFocus(): Readonly<Focus | null>;
+  setOffset(offset: Point): void;
+}
+//#endregion
+//#region src/sim/_interfaces.d.ts
+interface IOpenGraphSimulation {
+  width: number;
+  height: number;
+  config: GraphConfig;
+  rootImageSources: RootNodeImageSources;
+  canvas: HTMLCanvasElement;
+  theme: ThemeMode;
+  emitter: OpenGraphEventEmitter;
+  selectedNode: SimNode | null;
+  hoveredNode: SimNode | null;
+  highlights: HighlightStyle[];
+  transformCanvas: TransformCanvas;
+  initialize(data: RawGraphData, rootId: string): void;
+  restart(): void;
+  resize(width: number, height: number): void;
+  setTheme(theme: ThemeMode): void;
+  setHideThumbnails(hide: boolean): void;
+  setSelectedNode(node: SimNode | null): void;
+  setHighlights(highlights: HighlightStyle[]): void;
+  setNoInteraction(noInteraction: boolean): void;
+  getNodeById(nodeId: string): SimNode | null;
+  getNodeScreenPosition(node: SimNode): {
+    x: number;
+    y: number;
+  };
+  getNodeSize(nodeId: string): number;
+  destroy(): void;
+}
+type OpenGraphEventsTypemap = {
+  "transform-changed": Transform;
+  "hovered-node-changed": SimNode | null;
+  "selected-node-changed": SimNode | null;
+  draw: IOpenGraphSimulation;
+};
+declare class OpenGraphEventEmitter extends EventEmitter<OpenGraphEventsTypemap> {}
+//#endregion
+//#region src/sim/OpenGraphSimulation.d.ts
+interface OpenGraphSimulationProps {
+  width: number;
+  height: number;
+  config?: GraphConfig;
+  rootImageSources?: RootNodeImageSources;
+  canvas: HTMLCanvasElement;
+  theme?: ThemeMode;
+  loadNodeImage?: (node: SimNode) => Promise<string | undefined>;
+  translate?: {
+    x: number;
+    y: number;
+  };
+  lockedNodeId?: string;
+  highlights?: HighlightStyle[];
+}
+declare class OpenGraphSimulation implements IOpenGraphSimulation {
+  width: number;
+  height: number;
+  config: GraphConfig;
+  rootImageSources: RootNodeImageSources;
+  canvas: HTMLCanvasElement;
+  transformCanvas: TransformCanvas;
+  theme: ThemeMode;
+  private rawData?;
+  emitter: OpenGraphEventEmitter;
+  private translate;
+  private data;
+  private prunedData;
+  private subGraph;
+  private rootId;
+  private simulation;
+  private clusterSizeRange;
+  private maxDepth;
+  private isTicking;
+  private tickCount;
+  private loadNodeImage?;
+  private imageCache;
+  private rootImages;
+  private hideThumbnails;
+  private noInteraction;
+  lockedNodeId?: string;
+  selectedNode: SimNode | null;
+  hoveredNode: SimNode | null;
+  highlights: HighlightStyle[];
+  private renderLayers;
+  constructor(props: OpenGraphSimulationProps);
+  private get center();
+  private get origin();
+  private getNodeAtPosition;
+  getNodeScreenPosition: (node: SimNode) => {
+    x: number;
+    y: number;
+  };
+  getNodeCanvasPosition: (node: SimNode) => {
+    x: number;
+    y: number;
+  };
+  screenToWorld(_x: number, _y: number): {
+    x: number;
+    y: number;
+  };
+  worldToScreen(worldX: number, worldY: number): {
+    x: number;
+    y: number;
+  };
+  handleClick: (x: number, y: number) => void;
+  handleClickNode: (node: SimNode | null, options?: {
+    noToggle?: boolean;
+    triggerFocus?: boolean;
+  }) => void;
+  updateScene: () => void;
+  handleMove: (x: number, y: number) => void;
+  handleTransform: (t: Transform) => void;
+  updateHighlights: () => void;
+  initialize: (data: RawGraphData, rootId: string) => void;
+  get lockedNode(): SimNode | null;
+  triggerSelected: (triggerFocus?: boolean) => void;
+  restart: (alpha?: number) => void;
+  get rootNode(): SimNode | null;
+  handleTick: () => void;
+  setTranslate({
+    x,
+    y
+  }: {
+    x: number;
+    y: number;
+  }): void;
+  get visiblityScale(): d3_scale2.ScaleLogarithmic<number, number, never>;
+  get color(): ColorHandler;
+  get colorContrast(): ColorHandler;
+  getNodeSize: (nodeId: string) => number;
+  private updateRenderLayers;
+  private renderLink;
+  private renderNode;
+  private renderSessionNode;
+  private renderRootNode;
+  private renderCollapsedNode;
+  private renderExpandedNode;
+  onDraw: () => void;
+  private drawDebug;
+  private drawDebugDepthCircles;
+  private onEnd;
+  private loadNodeImages;
+  destroy: () => void;
+  resize: (width: number, height: number) => void;
+  setTheme: (theme: ThemeMode) => void;
+  setHideThumbnails: (hide: boolean) => void;
+  setSelectedNode: (node: SimNode | null) => void;
+  private _highlightHash?;
+  setHighlights: (highlights: HighlightStyle[]) => void;
+  setNoInteraction: (noInteraction: boolean) => void;
+  getNodeById: (nodeId: string) => SimNode | null;
+  setLockedNodeId: (nodeId?: string | null) => void;
+  handleClickDebug: (x: number, y: number) => void;
+  circles: Array<Point>;
+  onDrawDebug: () => void;
+}
+//#endregion
+//#region src/context/provider.d.ts
+interface OpenFormGraphProviderProps {
+  rootId: string;
+  rootImageSources: RootNodeImageSources;
+  theme: ThemeMode;
+  children: ReactNode;
+  config?: GraphConfig;
+  data: RawGraphData;
+  onSelectedNodeChange?: (node: SimNode | null) => void;
+  onHoveredNodeChange?: (node: SimNode | null) => void;
+  lockedNodeId?: string;
+}
+interface OpenFormGraphApi {
+  rootId: string;
+  rootImageSources: RootNodeImageSources;
+  setSelectedNode: Dispatch<SimNode | null>;
+  setHoveredNode: Dispatch<SimNode | null>;
+  theme: ThemeMode;
+  hideThumbnails: boolean;
+  setHideThumbnails: Dispatch<boolean>;
+  config: GraphConfig;
+  data: RawGraphData;
+  simulation: MutableRefObject<OpenGraphSimulation | null>;
+  selectedNode: SimNode | null;
+  hoveredNode: SimNode | null;
+  setSelectedNodeById: (nodeId: string) => void;
+  lockedNodeId?: string;
+}
+declare function OpenFormGraphProvider({
+  theme,
+  rootId,
+  children,
+  rootImageSources,
+  config,
+  data,
+  lockedNodeId
+}: OpenFormGraphProviderProps): react_jsx_runtime1.JSX.Element;
+declare function useOpenFormGraph(): OpenFormGraphApi;
+//#endregion
+//#region src/context/constants.d.ts
+declare const VOID_ROOT_ID = "void-root";
+declare const VOID_DETACH_ID = "void-detach";
+declare const DEFAULT_GRAPH_CONFIG: GraphConfig;
+//#endregion
+export { ColorHandler, DEFAULT_GRAPH_CONFIG as DEFAULT_GRAPH_CONFIG$1, GraphConfig, IOpenGraphSimulation, OpenFormGraphApi, OpenFormGraphProvider as OpenFormGraphProvider$1, OpenGraphEventEmitter as OpenGraphEventEmitter$1, OpenGraphEventsTypemap, OpenGraphSimulation as OpenGraphSimulation$1, TransformCanvas as TransformCanvas$1, VOID_DETACH_ID as VOID_DETACH_ID$1, VOID_ROOT_ID as VOID_ROOT_ID$1, color as color$1, dim as dim$1, useOpenFormGraph as useOpenFormGraph$1 };
+//# sourceMappingURL=constants-BNPHdbBA.d.ts.map

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-import { OpenFormGraph$1 as OpenFormGraph } from "./OpenFormGraph-0EqYrhjv.js";
-import { ColorHandler, ColorTransform, DEFAULT_GRAPH_CONFIG$1 as DEFAULT_GRAPH_CONFIG, GraphConfig, GraphData, Link, NestedRawNode, Node, NodeState, OpenFormGraphApi, OpenFormGraphProvider$1 as OpenFormGraphProvider, RGB, RawGraphData, RawLink, RawNode, RootNodeImageSources, SimLink, SimNode, ThemeMode, VOID_ROOT_ID$1 as VOID_ROOT_ID, color$1 as color, dim$1 as dim, useOpenFormGraph$1 as useOpenFormGraph } from "./constants-DU_wYtaU.js";
-import * as d3_force2 from "d3-force";
+import { ColorTransform, CustomHighlight, Focus, GraphData, HighlightStyle, Link, MouseListener, NestedRawNode, Node, NodeState, Point, RGB, RawGraphData, RawLink, RawNode, RootNodeImageSources, SimLink, SimNode, SimpleHighlight, ThemeMode, Transform, TransformListener } from "./_types-CjgCTzqc.js";
+import { OpenFormGraph$1 as OpenFormGraph } from "./OpenFormGraph-CdcWNN86.js";
+import { ColorHandler, DEFAULT_GRAPH_CONFIG$1 as DEFAULT_GRAPH_CONFIG, GraphConfig, IOpenGraphSimulation, OpenFormGraphApi, OpenFormGraphProvider$1 as OpenFormGraphProvider, OpenGraphEventEmitter$1 as OpenGraphEventEmitter, OpenGraphEventsTypemap, OpenGraphSimulation$1 as OpenGraphSimulation, TransformCanvas$1 as TransformCanvas, VOID_DETACH_ID$1 as VOID_DETACH_ID, VOID_ROOT_ID$1 as VOID_ROOT_ID, color$1 as color, dim$1 as dim, useOpenFormGraph$1 as useOpenFormGraph } from "./constants-BNPHdbBA.js";
+import * as d3_force5 from "d3-force";
 
 //#region src/util/canvas.d.ts
 
@@ -75,9 +76,9 @@ declare function hexagon(ctx: CanvasRenderingContext2D, x: number, y: number, ra
 //#endregion
 //#region src/util/data.d.ts
 declare function generateTree(maxNodes: number, maxChildren: number): RawGraphData;
-declare function getPrunedData(startId: string, nodes: SimNode[], links: SimLink[]): {
+declare function getPrunedData(startId: string, nodes: SimNode[], links: SimLink[], highlights?: HighlightStyle[]): {
   nodes: SimNode[];
-  links: d3_force2.SimulationLinkDatum<SimNode>[];
+  links: d3_force5.SimulationLinkDatum<SimNode>[];
 };
 /**
  * Automatically identifies root nodes and builds a nested structure
@@ -98,8 +99,11 @@ declare function searchParents(nodeHash: string, nodes: RawNode[], links: RawLin
 //#region src/util/graph.d.ts
 declare function getNodeId(n: any): any;
 declare function getParents(id: string, links: SimLink[]): string[];
+declare function getAllParentsUntil(nodeId: string, links: SimLink[], stopAtId: string): string[];
 declare function getChildren(id: string, links: SimLink[]): string[];
 declare function getClusterSize(id: string, links: RawLink[]): number;
+declare function getNodeDepth(id: string, links: RawLink[]): number;
+declare function getRootParent(id: string, links: RawLink[], stop?: string): string | null;
 declare function hasOnlyLeafs(id: string, links: RawLink[]): boolean;
 declare function getNodeSubgraph(nodeId: string, nodes: SimNode[], links: SimLink[], rootId: string): {
   nodes: SimNode[];
@@ -107,11 +111,21 @@ declare function getNodeSubgraph(nodeId: string, nodes: SimNode[], links: SimLin
 };
 //#endregion
 //#region src/util/img.d.ts
-declare function loadImage(src: string): Promise<HTMLImageElement>;
+declare function loadHTMLImageElement(src: string): Promise<HTMLImageElement>;
+//#endregion
+//#region src/util/highlights.d.ts
+declare const red: RGB;
+declare class Highlight {
+  static owner: (id: string) => CustomHighlight;
+  static primary: (id: string) => CustomHighlight;
+  static evolved: (id: string) => CustomHighlight;
+  static minted: (id: string) => CustomHighlight;
+}
 //#endregion
 //#region src/util/types.d.ts
 declare function isSimNode(node: SimNode | string | number): node is SimNode;
 declare function isSimLink(link: SimLink): link is SimLink;
+declare function isCustomHighlight(highlight: CustomHighlight | SimpleHighlight): highlight is CustomHighlight;
 //#endregion
-export { ColorHandler, ColorTransform, DEFAULT_GRAPH_CONFIG, GraphConfig, GraphData, Link, NestedRawNode, Node, NodeState, OpenFormGraph, OpenFormGraphApi, OpenFormGraphProvider, RGB, RawGraphData, RawLink, RawNode, RootNodeImageSources, SimLink, SimNode, ThemeMode, VOID_ROOT_ID, buildTreeFromGraphData, circle, color, dim, generateTree, getChildren, getClusterSize, getNodeId, getNodeSubgraph, getParents, getPrunedData, hasOnlyLeafs, hexagon, img, isSimLink, isSimNode, loadImage, rect, searchParents, useOpenFormGraph };
+export { ColorHandler, ColorTransform, CustomHighlight, DEFAULT_GRAPH_CONFIG, Focus, GraphConfig, GraphData, Highlight, HighlightStyle, IOpenGraphSimulation, Link, MouseListener, NestedRawNode, Node, NodeState, OpenFormGraph, OpenFormGraphApi, OpenFormGraphProvider, OpenGraphEventEmitter, OpenGraphEventsTypemap, OpenGraphSimulation, Point, RGB, RawGraphData, RawLink, RawNode, RootNodeImageSources, SimLink, SimNode, SimpleHighlight, ThemeMode, Transform, TransformCanvas, TransformListener, VOID_DETACH_ID, VOID_ROOT_ID, buildTreeFromGraphData, circle, color, dim, generateTree, getAllParentsUntil, getChildren, getClusterSize, getNodeDepth, getNodeId, getNodeSubgraph, getParents, getPrunedData, getRootParent, hasOnlyLeafs, hexagon, img, isCustomHighlight, isSimLink, isSimNode, loadHTMLImageElement, rect, red, searchParents, useOpenFormGraph };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { DEFAULT_GRAPH_CONFIG, OpenFormGraphProvider, VOID_ROOT_ID, useOpenFormGraph } from "./provider-CTDz6ZQd.js";
-import { OpenFormGraph, buildTreeFromGraphData, circle, color, dim, generateTree, getChildren, getClusterSize, getNodeId, getNodeSubgraph, getParents, getPrunedData, hasOnlyLeafs, hexagon, img, isSimLink, isSimNode, loadImage, rect, searchParents } from "./OpenFormGraph-wo_Y20C6.js";
+import { DEFAULT_GRAPH_CONFIG, OpenFormGraphProvider, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph } from "./provider-PqOen2FE.js";
+import { Highlight, OpenFormGraph, OpenGraphEventEmitter, OpenGraphSimulation, TransformCanvas, buildTreeFromGraphData, circle, color, dim, generateTree, getAllParentsUntil, getChildren, getClusterSize, getNodeDepth, getNodeId, getNodeSubgraph, getParents, getPrunedData, getRootParent, hasOnlyLeafs, hexagon, img, isCustomHighlight, isSimLink, isSimNode, loadHTMLImageElement, rect, red, searchParents } from "./OpenFormGraph-i8VSTamk.js";
 
-export { DEFAULT_GRAPH_CONFIG, OpenFormGraph, OpenFormGraphProvider, VOID_ROOT_ID, buildTreeFromGraphData, circle, color, dim, generateTree, getChildren, getClusterSize, getNodeId, getNodeSubgraph, getParents, getPrunedData, hasOnlyLeafs, hexagon, img, isSimLink, isSimNode, loadImage, rect, searchParents, useOpenFormGraph };
+export { DEFAULT_GRAPH_CONFIG, Highlight, OpenFormGraph, OpenFormGraphProvider, OpenGraphEventEmitter, OpenGraphSimulation, TransformCanvas, VOID_DETACH_ID, VOID_ROOT_ID, buildTreeFromGraphData, circle, color, dim, generateTree, getAllParentsUntil, getChildren, getClusterSize, getNodeDepth, getNodeId, getNodeSubgraph, getParents, getPrunedData, getRootParent, hasOnlyLeafs, hexagon, img, isCustomHighlight, isSimLink, isSimNode, loadHTMLImageElement, rect, red, searchParents, useOpenFormGraph };

package/dist/{provider-CTDz6ZQd.js → provider-PqOen2FE.js}

@@ -3,9 +3,10 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/context/constants.ts
 const VOID_ROOT_ID = "void-root";
+const VOID_DETACH_ID = "void-detach";
 const DEFAULT_GRAPH_CONFIG = {
 	debug: false,
-	nodeSize: 15,
+	nodeSize: 20,
 	minClusterSize: 10,
 	maxClusterSize: 20,
 	minZoom: .1,
@@ -44,7 +45,7 @@ const OpenFormGraphContext = createContext({
 	simulation: { current: null },
 	setSelectedNodeById: () => {}
 });
-function OpenFormGraphProvider({ theme = "light", rootId, children, rootImageSources = [], config = DEFAULT_GRAPH_CONFIG, data }) {
+function OpenFormGraphProvider({ theme = "light", rootId, children, rootImageSources = [], config = DEFAULT_GRAPH_CONFIG, data, lockedNodeId }) {
 	const simulation = useRef(null);
 	const [selectedNode, _setSelectedNode] = useState(null);
 	const [hoveredNode, setHoveredNode] = useState(null);
@@ -71,7 +72,8 @@ function OpenFormGraphProvider({ theme = "light", rootId, children, rootImageSou
 			theme,
 			config,
 			data,
-			simulation
+			simulation,
+			lockedNodeId
 		};
 	}, [
 		rootId,
@@ -85,7 +87,8 @@ function OpenFormGraphProvider({ theme = "light", rootId, children, rootImageSou
 		rootImageSources,
 		config,
 		data,
-		simulation
+		simulation,
+		lockedNodeId
 	]);
 	return /* @__PURE__ */ jsx(OpenFormGraphContext.Provider, {
 		value: contextValue,
@@ -99,5 +102,5 @@ function useOpenFormGraph() {
 }
 
 //#endregion
-export { DEFAULT_GRAPH_CONFIG, OpenFormGraphProvider, VOID_ROOT_ID, useOpenFormGraph };
-//# sourceMappingURL=provider-CTDz6ZQd.js.map
+export { DEFAULT_GRAPH_CONFIG, OpenFormGraphProvider, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph };
+//# sourceMappingURL=provider-PqOen2FE.js.map

package/dist/provider-PqOen2FE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider-PqOen2FE.js","names":["DEFAULT_GRAPH_CONFIG: GraphConfig","node: SimNode | null","nodeId: string","contextValue: OpenFormGraphApi"],"sources":["../src/context/constants.ts","../src/context/provider.tsx"],"sourcesContent":["import { GraphConfig } from \"@/_interfaces\"\n\nexport const VOID_ROOT_ID = \"void-root\"\nexport const VOID_DETACH_ID = \"void-detach\"\n\nexport const DEFAULT_GRAPH_CONFIG: GraphConfig = {\n  debug: false,\n  nodeSize: 20,\n  minClusterSize: 10,\n  maxClusterSize: 20,\n  minZoom: 0.1,\n  maxZoom: 10,\n  theme: {\n    light: [255, 255, 255],\n    dark: [0, 0, 0],\n  },\n}\n","import {\n  createContext,\n  useContext,\n  useState,\n  ReactNode,\n  Dispatch,\n  useMemo,\n  useRef,\n  MutableRefObject,\n  useCallback,\n} from \"react\"\nimport {\n  RawGraphData,\n  RootNodeImageSources,\n  SimNode,\n  ThemeMode,\n} from \"@/_types\"\nimport { GraphConfig } from \"@/_interfaces\"\nimport { DEFAULT_GRAPH_CONFIG } from \"./constants\"\nimport { OpenGraphSimulation } from \"@/sim/OpenGraphSimulation\"\n\ninterface OpenFormGraphProviderProps {\n  rootId: string\n  rootImageSources: RootNodeImageSources\n  theme: ThemeMode\n  children: ReactNode\n  config?: GraphConfig\n  data: RawGraphData\n  onSelectedNodeChange?: (node: SimNode | null) => void\n  onHoveredNodeChange?: (node: SimNode | null) => void\n  lockedNodeId?: string\n}\n\nexport interface OpenFormGraphApi {\n  rootId: string\n  rootImageSources: RootNodeImageSources\n  setSelectedNode: Dispatch<SimNode | null>\n  setHoveredNode: Dispatch<SimNode | null>\n  theme: ThemeMode\n  hideThumbnails: boolean\n  setHideThumbnails: Dispatch<boolean>\n  config: GraphConfig\n  data: RawGraphData\n  simulation: MutableRefObject<OpenGraphSimulation | null>\n  selectedNode: SimNode | null\n  hoveredNode: SimNode | null\n  setSelectedNodeById: (nodeId: string) => void\n  lockedNodeId?: string\n}\n\nconst OpenFormGraphContext = createContext<OpenFormGraphApi>({\n  rootId: \"\",\n  rootImageSources: [],\n  setSelectedNode: () => {},\n  setHoveredNode: () => {},\n  theme: \"light\",\n  hideThumbnails: false,\n  setHideThumbnails: () => {},\n  config: DEFAULT_GRAPH_CONFIG,\n  data: { nodes: [], links: [] },\n  selectedNode: null,\n  hoveredNode: null,\n  simulation: { current: null },\n  setSelectedNodeById: () => {},\n})\n\nexport function OpenFormGraphProvider({\n  theme = \"light\",\n  rootId,\n  children,\n  rootImageSources = [],\n  config = DEFAULT_GRAPH_CONFIG,\n  data,\n  lockedNodeId,\n}: OpenFormGraphProviderProps) {\n  const simulation = useRef<OpenGraphSimulation | null>(null)\n  const [selectedNode, _setSelectedNode] = useState<SimNode | null>(null)\n  const [hoveredNode, setHoveredNode] = useState<SimNode | null>(null)\n  const [hideThumbnails, setHideThumbnails] = useState(false)\n\n  const setSelectedNode = useCallback(\n    (node: SimNode | null) => {\n      _setSelectedNode(node)\n      simulation.current?.setSelectedNode(node)\n    },\n    [_setSelectedNode]\n  )\n\n  const setSelectedNodeById = useCallback(\n    (nodeId: string) => {\n      const node = simulation.current?.getNodeById(nodeId)\n      if (node) {\n        simulation.current?.handleClickNode(node)\n      }\n    },\n    [setSelectedNode]\n  )\n\n  const contextValue: OpenFormGraphApi = useMemo(() => {\n    return {\n      rootId,\n      selectedNode,\n      setSelectedNode,\n      setSelectedNodeById,\n      hoveredNode,\n      setHoveredNode,\n      hideThumbnails,\n      setHideThumbnails,\n      rootImageSources,\n      theme,\n      config,\n      data,\n      simulation,\n      lockedNodeId,\n    }\n  }, [\n    rootId,\n    selectedNode,\n    setSelectedNode,\n    setSelectedNodeById,\n    hoveredNode,\n    setHoveredNode,\n    hideThumbnails,\n    setHideThumbnails,\n    rootImageSources,\n    config,\n    data,\n    simulation,\n    lockedNodeId,\n  ])\n\n  return (\n    <OpenFormGraphContext.Provider value={contextValue}>\n      {children}\n    </OpenFormGraphContext.Provider>\n  )\n}\n\nexport function useOpenFormGraph(): OpenFormGraphApi {\n  const context = useContext(OpenFormGraphContext)\n  if (!context) {\n    throw new Error(\n      \"useOpenFormGraph must be used within a OpenFormGraphProvider\"\n    )\n  }\n  return context\n}\n"],"mappings":";;;;AAEA,MAAa,eAAe;AAC5B,MAAa,iBAAiB;AAE9B,MAAaA,uBAAoC;CAC/C,OAAO;CACP,UAAU;CACV,gBAAgB;CAChB,gBAAgB;CAChB,SAAS;CACT,SAAS;CACT,OAAO;EACL,OAAO;GAAC;GAAK;GAAK;EAAI;EACtB,MAAM;GAAC;GAAG;GAAG;EAAE;CAChB;AACF;;;;ACkCD,MAAM,uBAAuB,cAAgC;CAC3D,QAAQ;CACR,kBAAkB,CAAE;CACpB,iBAAiB,MAAM,CAAE;CACzB,gBAAgB,MAAM,CAAE;CACxB,OAAO;CACP,gBAAgB;CAChB,mBAAmB,MAAM,CAAE;CAC3B,QAAQ;CACR,MAAM;EAAE,OAAO,CAAE;EAAE,OAAO,CAAE;CAAE;CAC9B,cAAc;CACd,aAAa;CACb,YAAY,EAAE,SAAS,KAAM;CAC7B,qBAAqB,MAAM,CAAE;AAC9B,EAAC;AAEF,SAAgB,sBAAsB,EACpC,QAAQ,SACR,QACA,UACA,mBAAmB,CAAE,GACrB,SAAS,sBACT,MACA,cAC2B,EAAE;CAC7B,MAAM,aAAa,OAAmC,KAAK;CAC3D,MAAM,CAAC,cAAc,iBAAiB,GAAG,SAAyB,KAAK;CACvE,MAAM,CAAC,aAAa,eAAe,GAAG,SAAyB,KAAK;CACpE,MAAM,CAAC,gBAAgB,kBAAkB,GAAG,SAAS,MAAM;CAE3D,MAAM,kBAAkB,YACtB,CAACC,SAAyB;AACxB,mBAAiB,KAAK;AACtB,aAAW,SAAS,gBAAgB,KAAK;CAC1C,GACD,CAAC,gBAAiB,EACnB;CAED,MAAM,sBAAsB,YAC1B,CAACC,WAAmB;EAClB,MAAM,OAAO,WAAW,SAAS,YAAY,OAAO;AACpD,MAAI,KACF,YAAW,SAAS,gBAAgB,KAAK;CAE5C,GACD,CAAC,eAAgB,EAClB;CAED,MAAMC,eAAiC,QAAQ,MAAM;AACnD,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACD;CACF,GAAE;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EAAC;AAEF,wBACE,IAAC,qBAAqB;EAAS,OAAO;EACnC;GAC6B;AAEnC;AAED,SAAgB,mBAAqC;CACnD,MAAM,UAAU,WAAW,qBAAqB;AAChD,MAAK,QACH,OAAM,IAAI,MACR;AAGJ,QAAO;AACR"}

package/dist/provider.d.ts

@@ -1,2 +1,3 @@
-import { DEFAULT_GRAPH_CONFIG$1 as DEFAULT_GRAPH_CONFIG, OpenFormGraphApi, OpenFormGraphProvider$1 as OpenFormGraphProvider, VOID_ROOT_ID$1 as VOID_ROOT_ID, useOpenFormGraph$1 as useOpenFormGraph } from "./constants-DU_wYtaU.js";
-export { DEFAULT_GRAPH_CONFIG, OpenFormGraphApi, OpenFormGraphProvider, VOID_ROOT_ID, useOpenFormGraph };
+import "./_types-CjgCTzqc.js";
+import { DEFAULT_GRAPH_CONFIG$1 as DEFAULT_GRAPH_CONFIG, OpenFormGraphApi, OpenFormGraphProvider$1 as OpenFormGraphProvider, VOID_DETACH_ID$1 as VOID_DETACH_ID, VOID_ROOT_ID$1 as VOID_ROOT_ID, useOpenFormGraph$1 as useOpenFormGraph } from "./constants-BNPHdbBA.js";
+export { DEFAULT_GRAPH_CONFIG, OpenFormGraphApi, OpenFormGraphProvider, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph };

package/dist/provider.js

@@ -1,3 +1,3 @@
-import { DEFAULT_GRAPH_CONFIG, OpenFormGraphProvider, VOID_ROOT_ID, useOpenFormGraph } from "./provider-CTDz6ZQd.js";
+import { DEFAULT_GRAPH_CONFIG, OpenFormGraphProvider, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph } from "./provider-PqOen2FE.js";
 
-export { DEFAULT_GRAPH_CONFIG, OpenFormGraphProvider, VOID_ROOT_ID, useOpenFormGraph };
+export { DEFAULT_GRAPH_CONFIG, OpenFormGraphProvider, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fxhash/open-form-graph",
   "description": "A react-force-graph visualizer for open form collections",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": "fxhash",
   "dependencies": {
     "d3-force": "3.0.0",
@@ -9,8 +9,7 @@
     "d3-scale-chromatic": "3.1.0",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
-    "three": "0.176.0",
-    "three-spritetext": "1.9.6"
+    "@fxhash/utils": "0.0.5"
   },
   "devDependencies": {
     "@types/d3-force": "3.0.10",
@@ -21,10 +20,9 @@
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/three": "0.176.0",
-    "esbuild-css-modules-plugin": "2.7.1",
     "tsdown": "0.12.2",
     "typescript": "5.8.2",
-    "@fxhash/tsconfig": "0.0.2"
+    "@fxhash/tsconfig": "0.0.3"
   },
   "exports": {
     ".": {

package/dist/OpenFormGraph-0EqYrhjv.d.ts

@@ -1,17 +0,0 @@
-import { MouseEventHandler } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
-
-//#region src/components/OpenFormGraph.d.ts
-interface OpenFormGraphProps {
-  width: number;
-  height: number;
-  highlights?: string[];
-  className?: string;
-  noInteraction?: boolean;
-  onMouseEnter?: MouseEventHandler;
-  onMouseLeave?: MouseEventHandler;
-}
-declare function OpenFormGraph(props: OpenFormGraphProps): react_jsx_runtime1.JSX.Element;
-//#endregion
-export { OpenFormGraph as OpenFormGraph$1 };
-//# sourceMappingURL=OpenFormGraph-0EqYrhjv.d.ts.map