@react-fabric/graph 1.0.0-beta.63 → 1.0.1

package/dist/esm/utils/node.js

@@ -0,0 +1,92 @@
+'use client';
+
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { isArray, isObject } from '@react-fabric/utilities';
+import { DEFAULT_STYLES } from 'sigma/types';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PIE_PALETTE = ["#2ad4ac", "#ea5353", "#39a1e6", "#f8a850", "#B64E84", "#92c652", "#ac7dc4", "#2c91bd", "#f8d653", "#D16082", "#52c8d7", "#475065"];
+function nodeReducer(_, node, attrs) {
+  var _attrs$segments;
+  if (isArray(attrs.segments) && (_attrs$segments = attrs.segments) !== null && _attrs$segments !== void 0 && _attrs$segments.length) {
+    // @ts-expect-error ignore
+    node.pieSize = 0.25;
+    attrs.segments.forEach(function (seg, i) {
+      if (typeof seg === "string") {
+        // @ts-expect-error ignore
+        node["slice_".concat(i)] = 1 / attrs.segments.length;
+        // @ts-expect-error ignore
+        node["color_".concat(i)] = seg;
+      }
+      if (typeof seg === "number") {
+        // @ts-expect-error ignore
+        node["slice_".concat(i)] = seg;
+        // @ts-expect-error ignore
+        node["color_".concat(i)] = PIE_PALETTE[i];
+      }
+    });
+  }
+  if (isObject(attrs.segments)) {
+    // @ts-expect-error ignore
+    node.pieSize = 0.25;
+    Object.entries(attrs.segments).forEach(function (_ref, i) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        color = _ref2[0],
+        size = _ref2[1];
+      // @ts-expect-error ignore
+      node["slice_".concat(i)] = size;
+      // @ts-expect-error ignore
+      node["color_".concat(i)] = color;
+    });
+  }
+  if (attrs.group) {
+    // @ts-expect-error ignore
+    node.shape = "folder";
+  }
+  return node;
+}
+function defaultNodeStyles() {
+  var isDark = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return [DEFAULT_STYLES.nodes, _objectSpread(_objectSpread({
+    size: {
+      attribute: "size",
+      defaultValue: 8
+    },
+    shape: {
+      attribute: "shape",
+      defaultValue: "circle"
+    },
+    color: {
+      attribute: "color",
+      defaultValue: isDark ? "#1e293b" : "#e2e8f0"
+    },
+    border: {
+      attribute: "border",
+      defaultValue: 0
+    },
+    borderColor: {
+      attribute: "borderColor",
+      defaultValue: "#64748b"
+    },
+    image: {
+      attribute: "image",
+      defaultValue: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+    },
+    pieSize: 0
+  }, Object.assign.apply(Object, [{}].concat(_toConsumableArray(Array.from({
+    length: 12
+  }).fill(0).map(function (_, i) {
+    return _defineProperty(_defineProperty({}, "slice_".concat(i), i === 0 ? 1 : 0), "color_".concat(i), "#888");
+  }))))), {}, {
+    labelPosition: "below",
+    labelColor: isDark ? "#fff" : "#333",
+    fillColor: isDark ? "#111" : "#fff",
+    backdropColor: isDark ? "#333" : "#fff",
+    backdropShadowColor: isDark ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.3)"
+  })];
+}
+
+export { defaultNodeStyles, nodeReducer };

package/dist/esm/utils/sdfFolder.js

@@ -0,0 +1,107 @@
+'use client';
+
+import { GLSL_ROTATE_2D } from 'sigma/rendering';
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+
+/**
+ * Options for the {@link sdfFolder} shape.
+ *
+ * @property cornerRadius - Corner rounding as a fraction of the node size.
+ *    `0` gives sharp corners; larger values round the body and the tab. May
+ *   also be a per-node attribute via `{ attribute, default }`.
+ * @property rotation - Rotation of the folder, in radians, applied before the
+ *   distance field is evaluated. May also be a per-node attribute via
+ *    `{ attribute, default }`.
+ */
+
+/**
+ * Resolves a {@link ValueSource} to a plain number, falling back to
+ * `defaultValue` when the value is attribute-sourced or missing.
+ */
+function resolveNumber(value, defaultValue) {
+  return typeof value === "number" ? value : defaultValue;
+}
+
+/**
+ * Creates a folder SDF shape.
+ *
+ * The outline is the union of two rounded rectangles: a wide **body** and a
+ * smaller **tab** flap that rises above the body's top-left corner — the shape
+ * of a classic manila folder. Each panel is an Inigo Quilez rounded-box
+ * distance field (https://iquilezles.org/articles/distfunctions2d/) and the
+ * union is the closer of the two distances.
+ *
+ * @param options - Configuration for the folder
+ * @returns Folder SDF shape definition
+ *
+ * @example
+ * ```typescript
+ * // Sharp folder with a top-left tab
+ * const folder = sdfFolder();
+ *
+ * // Rounded folder
+ * const rounded = sdfFolder({ cornerRadius: 0.12 });
+ *
+ * // Per-node folder, driven by attributes
+ * const perNode = sdfFolder({
+ *   cornerRadius: { attribute: "folderCorner" },
+ *   rotation: { attribute: "folderRotation" },
+ * });
+ * ```
+ */
+function sdfFolder(options) {
+  var _ref = {},
+    cornerRadius = _ref.cornerRadius,
+    rotation = _ref.rotation;
+  var cornerRadiusValue = resolveNumber(cornerRadius, 0);
+  var rotationValue = resolveNumber(rotation, 0);
+
+  // SDF for a folder: the union of a wide body panel and a top-left tab flap,
+  // each an Inigo Quilez rounded box. The GLSL_ROTATE_2D helper is prepended so
+  // `rotation` can be applied; the framework deduplicates it across shapes.
+  var glsl = "".concat(GLSL_ROTATE_2D, "\nfloat sdf_folder(vec2 uv, float size, float cornerRadius, float rotation) {\n    // Apply rotation if needed\n  vec2 p = uv;\n  if (rotation != 0.0) {\n    p = rotate2D(rotation) * p;\n    }\n\n    // A folder is the union of a wide body panel and a smaller tab flap that\n    // rises above the body's top-left. Each panel is a rounded box; the union is\n    // the closer of the two distances.\n  float s = size;\n  float cr = cornerRadius * s;\n\n    // Body: the main panel, wide and sitting just below the origin.\n  vec2 bodyD = abs(p - vec2(0.0, -0.05 * s)) - vec2(0.72 * s, 0.50 * s) + cr;\n  float body = length(max(bodyD, 0.0)) + min(max(bodyD.x, bodyD.y), 0.0) - cr;\n\n    // Tab: the top-left flap, its top edge poking above the body.\n  vec2 tabD = abs(p - vec2(-0.43 * s, 0.44 * s)) - vec2(0.29 * s, 0.20 * s) + cr;\n  float tab = length(max(tabD, 0.0)) + min(max(tabD.x, tabD.y), 0.0) - cr;\n\n    // Union of the two panels.\n  return min(body, tab);\n}\n");
+  return {
+    name: "folder",
+    glsl: glsl,
+    uniforms: [{
+      name: "u_cornerRadius",
+      type: "float",
+      value: cornerRadiusValue
+    }, {
+      name: "u_rotation",
+      type: "float",
+      value: rotationValue
+    }],
+    // The outline reaches out to the tab's top-left corner (circumradius
+    // ~0.96 of the node size); SQRT1_2 keeps the bounding quad comfortably
+    // larger, matching the square and diamond shapes.
+    inradiusFactor: Math.SQRT1_2
+  };
+}
+
+export { sdfFolder };

package/dist/esm/viewer/Graph.js

@@ -0,0 +1,174 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useIsDark, Layout } from '@react-fabric/core';
+import { layerBorder } from '@sigma/node-border';
+import { layerImage } from '@sigma/node-image';
+import { layerPiechart } from '@sigma/node-piechart';
+import { fitViewportToNodes } from '@sigma/utils';
+import { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { Sigma } from 'sigma';
+import { sdfCircle, sdfSquare, sdfTriangle, sdfDiamond, layerPlain, layerDashed, extremityArrow, pathLine, pathCurved, pathStepCurved, pathCurvedS } from 'sigma/rendering';
+import { Provider } from '../context/context.js';
+import { edgeReducer, defaultEdgeStyles } from '../utils/edge.js';
+import { nodeReducer, defaultNodeStyles } from '../utils/node.js';
+import { sdfFolder } from '../utils/sdfFolder.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function GraphViewer(_ref) {
+  var data = _ref.data,
+    children = _ref.children;
+  var containerRef = useRef(null);
+  var isDark = useIsDark();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    sigma = _useState2[0],
+    setSigma = _useState2[1];
+  useEffect(function () {
+    if (containerRef.current) {
+      var _sigma = new Sigma(data, containerRef.current, {
+        settings: {
+          autoRescale: false,
+          autoRescaleContent: "nodes",
+          stagePadding: 40,
+          enableNodeDrag: true,
+          enableEdgeEvents: true,
+          renderEdgeLabels: true,
+          cameraPanBoundaries: true
+        },
+        edgeReducer: edgeReducer,
+        nodeReducer: nodeReducer,
+        styles: {
+          edges: defaultEdgeStyles(isDark),
+          nodes: defaultNodeStyles(isDark)
+        },
+        primitives: {
+          edges: {
+            paths: [pathLine(), pathCurved(), pathStepCurved(), pathCurvedS()],
+            extremities: [extremityArrow()],
+            label: {
+              fontSizeMode: "fixed"
+            },
+            layers: [layerPlain({
+              color: {
+                attribute: "color"
+              }
+            }), layerDashed({
+              dashColor: {
+                attribute: "dashColor"
+              },
+              dashSize: {
+                attribute: "dashSize"
+              },
+              gapSize: {
+                attribute: "gapSize"
+              }
+            })]
+          },
+          nodes: {
+            shapes: [sdfCircle(), sdfSquare(), sdfTriangle(), sdfDiamond(), sdfFolder()],
+            layers: [layerPiechart({
+              slices: Array.from({
+                length: 12
+              }).fill(0).map(function (_, i) {
+                return {
+                  color: {
+                    attribute: "color_".concat(i)
+                  },
+                  value: {
+                    attribute: "slice_".concat(i)
+                  }
+                };
+              })
+            }), layerBorder({
+              borders: [{
+                mode: "relative",
+                size: 0,
+                color: {
+                  attribute: "color"
+                }
+              }, {
+                size: {
+                  attribute: "border"
+                },
+                color: {
+                  attribute: "borderColor"
+                }
+              }, {
+                mode: "pixels",
+                size: 1,
+                color: {
+                  attribute: "fillColor"
+                }
+              }, {
+                size: {
+                  attribute: "pieSize",
+                  "default": 0
+                },
+                color: "transparent",
+                fill: false
+              }, {
+                mode: "pixels",
+                size: 4,
+                color: {
+                  attribute: "fillColor"
+                }
+              }, {
+                color: {
+                  attribute: "color"
+                },
+                fill: true
+              }]
+            }), layerImage({
+              padding: 0.5
+            })]
+          }
+        }
+      });
+      setSigma(_sigma);
+      var fitToGraph = function fitToGraph() {
+        requestAnimationFrame(function () {
+          void fitViewportToNodes(_sigma, data.nodes(), {
+            animate: true
+          }).then(function () {
+            _sigma.getCamera().setState({
+              ratio: _sigma.getCamera().ratio * 1.15 // Multiplier adds a proportional buffer from the canvas edge
+            });
+          });
+        });
+      };
+      data.on("layoutDone", fitToGraph);
+      return function () {
+        if (_sigma) {
+          _sigma.kill();
+        }
+      };
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, []);
+  useLayoutEffect(function () {
+    if (sigma) {
+      // @ts-expect-error silent update graph styles without re-render
+      sigma.stylesDeclaration = {
+        edges: defaultEdgeStyles(isDark),
+        nodes: defaultNodeStyles(isDark)
+      };
+      sigma.refresh();
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [isDark]);
+  return /*#__PURE__*/jsx(Provider, {
+    value: {
+      data: data,
+      sigma: sigma
+    },
+    children: /*#__PURE__*/jsxs(Layout, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: "area-content overflow-hidden",
+        ref: containerRef
+      }), children]
+    })
+  });
+}
+
+export { GraphViewer };

package/dist/types/context/context.d.ts

@@ -0,0 +1,35 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+import type Sigma from "sigma";
+import type { Graph } from "../graph";
+import type { EdgeAttributes, NodeAttributes } from "../types";
+interface ContextType<N extends KeyValue = KeyValue, E extends KeyValue = KeyValue> {
+    data: Graph<N, E>;
+    sigma: Sigma<NodeAttributes<N>, EdgeAttributes<E>>;
+}
+export declare const Context: import("react").Context<ContextType<KeyValue<any>, KeyValue<any>>>;
+export declare const useGraph: <N extends KeyValue = KeyValue, E extends KeyValue = KeyValue>() => ContextType<N, E>;
+export declare const Provider: <N extends KeyValue = KeyValue, E extends KeyValue = KeyValue>(props: AnyObject) => import("react").JSX.Element;
+export {};

package/dist/types/graph/index.d.ts

@@ -1,35 +1,58 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
 import Graphology from "graphology";
-import { type ForceAtlas2Settings } from "graphology-layout-forceatlas2";
-import { type GraphEvents, type GraphOptions } from "graphology-types";
-import { type EdgeAttributes, type InternalNodeAttributes, type NodeAttributes, type RawGraph } from "../types";
-interface ExtendedEvents extends GraphEvents {
+import type { GraphEvents } from "graphology-types";
+import type { EdgeAttributes, InternalEdge, InternalNode, NodeAttributes, RawGraph } from "../types";
+interface ExtendedEvents<N extends KeyValue = KeyValue, E extends KeyValue = KeyValue> extends GraphEvents<InternalNode<N>, InternalEdge<E>> {
     nodesLoaded: (nodes: string[]) => void;
     nodesDropped: (nodes: string[]) => void;
     nodesSelected: (nodes: string[]) => void;
     layoutRunning: (isRunning: boolean) => void;
     layoutDone: () => void;
 }
-export declare class Graph<N = KeyValue, E = KeyValue> extends Graphology<InternalNodeAttributes<N>, EdgeAttributes<E>, KeyValue> {
-    constructor(options?: GraphOptions);
-    on<Event extends keyof ExtendedEvents>(type: Event, listener: ExtendedEvents[Event]): this;
-    off<Event extends keyof ExtendedEvents>(type: Event, listener: ExtendedEvents[Event]): this;
-    emit<Event extends keyof ExtendedEvents>(type: Event, ...args: Parameters<ExtendedEvents[Event]>): boolean;
-    mergeNodes(key: string, nodes: string[], attributesOrNodeReducer?: NodeAttributes<N> | ((attributes: Array<NodeAttributes<N>>) => NodeAttributes<N>), edgeReducer?: (edges: RawGraph<N, E>["edges"]) => RawGraph<N, E>["edges"]): this | undefined;
-    groupNodes(key: string, nodes: string[], attributesOrNodeReducer?: NodeAttributes<N> | ((attributes: Array<NodeAttributes<N>>) => NodeAttributes<N>), edgeReducer?: (edges: RawGraph<N, E>["edges"]) => RawGraph<N, E>["edges"]): this | undefined;
-    ungroupNode(node: string): this | undefined;
-    toggleExpanded(node: string, force?: boolean): this;
-    import(data: RawGraph<N, E> | Graph<N, E>, merge?: boolean): this;
-    circularLayout(): this;
-    private _timer;
-    private _worker?;
-    forceLayout(settings?: ForceAtlas2Settings): this;
-    private elk;
-    elkLayout(type: string): Promise<void>;
-    dropNodes(nodes: string[]): void;
+export declare class Graph<N extends KeyValue = KeyValue, E extends KeyValue = KeyValue> extends Graphology<NodeAttributes<N>, EdgeAttributes<E>> {
+    constructor();
+    importGraph(data: RawGraph<N, E>, applyLayout?: boolean): this;
+    on<Event extends keyof ExtendedEvents<N, E>>(type: Event, listener: ExtendedEvents<N, E>[Event]): this;
+    off<Event extends keyof ExtendedEvents<N, E>>(type: Event, listener: ExtendedEvents<N, E>[Event]): this;
+    emit<Event extends keyof ExtendedEvents<N, E>>(type: Event, ...args: Parameters<ExtendedEvents<N, E>[Event]>): boolean;
     /**
-     * parallel edge check to be called after adding edges
+     * @deprecated
+     * use `importGraph` instead
      */
-    private getCurvature;
-    private checkParallelEdges;
+    import(): this;
+    /**
+     * @deprecated
+     * use `exportGraph` instead
+     */
+    export(): {
+        nodes: never[];
+        edges: never[];
+        attributes: {};
+        options: {};
+    };
+    private enrichNodeAttributes;
 }
 export {};

package/dist/types/index.d.ts

@@ -1,3 +1,29 @@
-export { SigmaGraph } from "./components/Viewer";
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * 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.
+ */
+export declare const GRAPH_PACKAGE = "@react-fabric/graph";
+export declare const GRAPH_VERSION = "1.0.0";
 export { Graph } from "./graph";
-export type { EdgeAttributes, GraphRef, NodeAttributes, RawGraph, } from "./types";
+export type { EdgeAttributes, InternalEdge, InternalNode, NodeAttributes, PublicEdge, PublicNode, RawGraph } from "./types";
+export { GraphViewer } from "./viewer/Graph";