@nesso-how/graph 0.1.0-alpha.26 → 0.1.0-alpha.28

package/README.md

@@ -13,8 +13,7 @@ npm install @nesso-how/graph
 ```tsx
 import { NessoGraph } from '@nesso-how/graph'
 import '@xyflow/react/dist/style.css'
-
-<NessoGraph
+;<NessoGraph
   nodes={nodes}
   edges={edges}
   display={{ edgeEncoding: 'full', curveStyle: 'straight' }}
@@ -23,19 +22,24 @@ import '@xyflow/react/dist/style.css'
 ```
 
 `nodes`/`edges` (or a full `graph: NessoGraphFile`) render read-only by default —
-no drag, connect, or selection. Pass `display`/`palette` to control how categories,
-glyphs, and curves are drawn; pass any other [`ReactFlow`](https://reactflow.dev/api-reference/react-flow)
-prop through `reactFlowProps`.
+no drag, connect, or selection. Default `nodeTypes`/`edgeTypes` use `ConceptNode` and
+`NessoEdge` from this package (display settings via `GraphDisplayContext`).
+
+Pass `display`/`palette` to control categories, glyphs, and curves. Use
+`categoryColorMode: 'css'` when `--cat-*` CSS variables are set on the page (the main
+app); embeds default to `palette` (hex from `PALETTES`). Optional `getRelationLabel`
+and `isItemSelected` customize labels and selection. Pass any other
+[`ReactFlow`](https://reactflow.dev/api-reference/react-flow) prop through `reactFlowProps`.
 
 ### Interactivity
 
 Turn on `nodesDraggable`/`nodesConnectable`/`elementsSelectable` as needed. How you
 provide nodes determines who owns their state:
 
-- `nodes`/`edges` — *controlled*: you own the state and must also pass
+- `nodes`/`edges` — _controlled_: you own the state and must also pass
   `onNodesChange`/`onEdgesChange`/`onConnect` to apply updates (e.g. the main app,
   where positions live in its own store).
-- `defaultNodes`/`defaultEdges` — *uncontrolled*: React Flow seeds its internal
+- `defaultNodes`/`defaultEdges` — _uncontrolled_: React Flow seeds its internal
   state once and manages drag/connect/selection itself — no wiring needed, the
   right choice for decorative or one-off embeds.
 

package/dist/{ReadOnlyConceptNode.d.ts → ConceptNode.d.ts}

@@ -1,5 +1,5 @@
 import type { Node, NodeProps } from '@xyflow/react';
 import type { ConceptNodeData } from '@nesso-how/types';
 type ConceptNodeType = Node<ConceptNodeData>;
-export declare function ReadOnlyConceptNode({ data, selected }: NodeProps<ConceptNodeType>): import("react/jsx-runtime").JSX.Element;
+export declare function ConceptNode({ data, selected }: NodeProps<ConceptNodeType>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ConceptNode.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+import { Handle, Position } from '@xyflow/react';
+import { ConceptNodeBody } from './ConceptNodeBody.js';
+import { useGraphDisplay } from './context.js';
+const HIDDEN_HANDLE = {
+    width: 1,
+    height: 1,
+    minWidth: 0,
+    background: 'transparent',
+    border: 'none',
+    borderRadius: 0,
+    opacity: 0,
+    pointerEvents: 'none',
+};
+export function ConceptNode({ data, selected }) {
+    const { showHeatmap, showConfidence } = useGraphDisplay();
+    return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx(ConceptNodeBody, { text: data.text, selected: selected, showHeatmap: showHeatmap, showConfidence: showConfidence, lastRating: data.lastRating ?? 0, reps: data.reps, due: data.due }), _jsx(Handle, { id: "out", type: "source", position: Position.Right, style: HIDDEN_HANDLE }), _jsx(Handle, { id: "in", type: "target", position: Position.Left, style: HIDDEN_HANDLE })] }));
+}

package/dist/ConceptNodeBody.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, MouseEventHandler, ReactNode, Ref } from 'react';
+export interface ConceptNodeBodyProps {
+    text: string;
+    selected: boolean;
+    showHeatmap: boolean;
+    showConfidence: boolean;
+    lastRating: number;
+    reps: number;
+    due: number;
+    cursor?: CSSProperties['cursor'];
+    userSelect?: CSSProperties['userSelect'];
+    className?: string;
+    connectionTarget?: boolean;
+    hideUnderline?: boolean;
+    rootRef?: Ref<HTMLDivElement>;
+    onDoubleClick?: MouseEventHandler<HTMLDivElement>;
+    /** Replaces the default label span (e.g. inline edit overlay). */
+    children?: ReactNode;
+}
+export declare function ConceptNodeBody({ text, selected, showHeatmap, showConfidence, lastRating, reps, due, cursor, userSelect, className, connectionTarget, hideUnderline, rootRef, onDoubleClick, children, }: ConceptNodeBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/{ReadOnlyConceptNode.js → ConceptNodeBody.js}

@@ -1,35 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// SPDX-License-Identifier: MIT
-import { Handle, Position } from '@xyflow/react';
-import { useGraphDisplay } from './context.js';
 import { ratingColor } from './ratingColor.js';
-const HIDDEN_HANDLE = {
-    width: 1,
-    height: 1,
-    minWidth: 0,
-    background: 'transparent',
-    border: 'none',
-    borderRadius: 0,
-    opacity: 0,
-    pointerEvents: 'none',
-};
-export function ReadOnlyConceptNode({ data, selected }) {
-    const { showHeatmap, showConfidence } = useGraphDisplay();
-    const heatTint = ratingColor(data.lastRating ?? 0);
+export function ConceptNodeBody({ text, selected, showHeatmap, showConfidence, lastRating, reps, due, cursor = 'default', userSelect = 'none', className, connectionTarget = false, hideUnderline = false, rootRef, onDoubleClick, children, }) {
+    const heatTint = ratingColor(lastRating);
     const confColor = showConfidence ? heatTint : 'var(--ink, #1a1a1a)';
-    const isStale = data.reps > 0 && data.due <= Date.now();
-    return (_jsxs("div", { style: {
+    const isStale = reps > 0 && due <= Date.now();
+    return (_jsxs("div", { ref: rootRef, className: className, onDoubleClick: onDoubleClick, style: {
             position: 'relative',
             padding: '6px 14px',
             borderRadius: 999,
-            background: selected || showHeatmap
-                ? 'var(--bg-card, #f5f5f5)'
-                : 'transparent',
-            border: selected || showHeatmap
-                ? '0.5px solid var(--line, #d0d0d0)'
-                : '0.5px solid transparent',
-            cursor: 'default',
-            userSelect: 'none',
+            background: selected || showHeatmap ? 'var(--bg-card, #f5f5f5)' : 'transparent',
+            border: selected || showHeatmap ? '0.5px solid var(--line, #d0d0d0)' : '0.5px solid transparent',
+            cursor,
+            userSelect,
             minWidth: 60,
         }, children: [showHeatmap && (_jsx("div", { style: {
                     position: 'absolute',
@@ -45,13 +27,19 @@ export function ReadOnlyConceptNode({ data, selected }) {
                     border: '1px dashed var(--accent, #3b82f6)',
                     opacity: 0.7,
                     pointerEvents: 'none',
-                } })), _jsx("span", { style: {
+                } })), connectionTarget && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: -4,
+                    borderRadius: 999,
+                    border: '1.5px dotted color-mix(in srgb, var(--accent, #3b82f6) 65%, transparent)',
+                    pointerEvents: 'none',
+                } })), children ?? (_jsx("span", { style: {
                     font: '500 16px Fraunces, ui-serif, Georgia, serif',
                     letterSpacing: '-0.005em',
                     color: 'var(--ink, #1a1a1a)',
                     display: 'block',
                     whiteSpace: 'pre',
-                }, children: data.text }), _jsx("div", { style: {
+                }, children: text })), !hideUnderline && (_jsx("div", { style: {
                     position: 'absolute',
                     bottom: 5,
                     left: 16,
@@ -61,5 +49,5 @@ export function ReadOnlyConceptNode({ data, selected }) {
                         ? `repeating-linear-gradient(90deg, ${confColor} 0, ${confColor} 4px, transparent 4px, transparent 8px)`
                         : confColor,
                     opacity: selected ? 0.9 : 0.55,
-                } }), _jsx(Handle, { id: "out", type: "source", position: Position.Right, style: HIDDEN_HANDLE }), _jsx(Handle, { id: "in", type: "target", position: Position.Left, style: HIDDEN_HANDLE })] }));
+                } }))] }));
 }

package/dist/{ReadOnlyNessoEdge.d.ts → NessoEdge.d.ts}

@@ -1,5 +1,5 @@
 import type { Edge, EdgeProps } from '@xyflow/react';
 import type { NessoEdgeData } from '@nesso-how/types';
 type NessoFlowEdge = Edge<NessoEdgeData, 'nesso'>;
-export declare function ReadOnlyNessoEdge({ source, target, data, selected, }: EdgeProps<NessoFlowEdge>): import("react/jsx-runtime").JSX.Element | null;
+export declare function NessoEdge({ id, source, target, data, selected }: EdgeProps<NessoFlowEdge>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/{ReadOnlyNessoEdge.js → NessoEdge.js}

@@ -9,6 +9,11 @@ import { effectiveCurveFlip, flowNodeCenterX, flowNodeCenterY, nessoArcPath, rec
 function asEdgeTypeName(value, fallback = 'causes') {
     return typeof value === 'string' && value in RELATION_TYPES ? value : fallback;
 }
+function categoryColor(cat, mode, palette) {
+    if (mode === 'css')
+        return `var(--cat-${cat})`;
+    return PALETTES[palette]?.[cat] ?? '#666666';
+}
 function EdgePathElement({ d, color, lineStyle, width = 1.5, opacity = 0.78, }) {
     const base = {
         fill: 'none',
@@ -29,19 +34,21 @@ function EdgePathElement({ d, color, lineStyle, width = 1.5, opacity = 0.78, })
         return _jsx("path", { d: d, ...base, strokeDasharray: "0.1 5", strokeWidth: width * 1.4 });
     return _jsx("path", { d: d, ...base });
 }
-export function ReadOnlyNessoEdge({ source, target, data, selected, }) {
+export function NessoEdge({ id, source, target, data, selected }) {
     const [hovered, setHovered] = useState(false);
-    const { edgeEncoding, curveStyle, autoCurveFlip, palette } = useGraphDisplay();
+    const { edgeEncoding, curveStyle, autoCurveFlip, palette, categoryColorMode, getRelationLabel, isItemSelected, } = useGraphDisplay();
     const sourceNode = useStore((s) => s.nodeLookup.get(source));
     const targetNode = useStore((s) => s.nodeLookup.get(target));
     const edgeType = asEdgeTypeName(data?.type);
     const T = RELATION_TYPES[edgeType];
     const color = edgeEncoding === 'minimal'
         ? 'var(--ink-3, #888888)'
-        : (PALETTES[palette]?.[T.cat] ?? '#666666');
+        : categoryColor(T.cat, categoryColorMode, palette);
     const lineStyle = edgeEncoding === 'minimal' ? 'solid' : T.line;
-    const showLabel = edgeEncoding === 'full' || (edgeEncoding !== 'minimal' && (hovered || selected));
+    const isSelected = selected || isItemSelected?.('edge', id) === true;
+    const showLabel = edgeEncoding === 'full' || (edgeEncoding !== 'minimal' && (hovered || isSelected));
     const straight = curveStyle === 'straight';
+    const label = getRelationLabel?.(edgeType) ?? T.label;
     if (!sourceNode || !targetNode)
         return null;
     const sw = sourceNode.measured?.width ?? 80;
@@ -82,8 +89,8 @@ export function ReadOnlyNessoEdge({ source, target, data, selected, }) {
     const ay1 = b.y + Math.sin(a1) * arrowSize;
     const ax2 = b.x + Math.cos(a2) * arrowSize;
     const ay2 = b.y + Math.sin(a2) * arrowSize;
-    const w = selected ? 2 : 1.4;
-    const op = selected || hovered ? 1 : 0.78;
+    const w = isSelected ? 2 : 1.4;
+    const op = isSelected || hovered ? 1 : 0.78;
     const r = 11;
     return (_jsxs("g", { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: { cursor: 'default' }, children: [_jsx("path", { d: path, stroke: "transparent", strokeWidth: 14, fill: "none" }), _jsx(EdgePathElement, { d: path, color: color, lineStyle: lineStyle, width: w, opacity: op }), T.inverse !== 'self' && edgeEncoding !== 'minimal' && (_jsx("polygon", { points: `${b.x},${b.y} ${ax1},${ay1} ${ax2},${ay2}`, fill: color, opacity: 0.85 })), edgeEncoding !== 'minimal' && (_jsxs("g", { style: { pointerEvents: 'all' }, children: [_jsx("circle", { cx: labelX, cy: labelY, r: r, fill: "var(--paper, #ffffff)", stroke: color, strokeWidth: 1.2 }), _jsx("g", { transform: `translate(${labelX - 7}, ${labelY - 7})`, children: _jsx(GlyphSVG, { kind: T.glyph, color: color, size: 14 }) })] })), showLabel && (_jsx("foreignObject", { x: labelX - 60, y: labelY + r + 2, width: 120, height: 20, style: { overflow: 'visible', pointerEvents: 'none' }, children: _jsx("div", { style: {
                         display: 'inline-block',
@@ -96,5 +103,5 @@ export function ReadOnlyNessoEdge({ source, target, data, selected, }) {
                         letterSpacing: '0.02em',
                         whiteSpace: 'nowrap',
                         lineHeight: '16px',
-                    }, children: T.label }) }))] }));
+                    }, children: label }) }))] }));
 }

package/dist/NessoGraph.d.ts

@@ -1,6 +1,8 @@
 import type { Node, Edge, NodeTypes, EdgeTypes, ReactFlowProps, Viewport, OnNodesChange, OnEdgesChange, OnConnect, OnConnectStart, OnConnectEnd, OnMoveEnd } from '@xyflow/react';
 import type { NessoGraphFile } from '@nesso-how/formats';
+import type { EdgeTypeName } from '@nesso-how/relation-types';
 import type { ConceptNodeData, NessoEdgeData, GraphDisplaySettings, CategoryPalette } from '@nesso-how/types';
+import { type CategoryColorMode } from './context.js';
 type PassthroughKeys = 'nodes' | 'defaultNodes' | 'edges' | 'defaultEdges' | 'nodeTypes' | 'edgeTypes' | 'nodesDraggable' | 'nodesConnectable' | 'elementsSelectable' | 'onNodesChange' | 'onEdgesChange' | 'onConnect' | 'onConnectStart' | 'onConnectEnd' | 'onSelectionChange' | 'onMoveEnd' | 'onNodeClick' | 'onEdgeClick' | 'fitView' | 'defaultViewport' | 'minZoom' | 'maxZoom' | 'panOnDrag' | 'zoomOnScroll';
 export interface NessoGraphProps {
     graph?: NessoGraphFile;
@@ -11,6 +13,10 @@ export interface NessoGraphProps {
     display?: Partial<GraphDisplaySettings>;
     palette?: CategoryPalette;
     showConfidence?: boolean;
+    /** `palette` (default) for embeds; `css` when `--cat-*` vars are set on the page. */
+    categoryColorMode?: CategoryColorMode;
+    getRelationLabel?: (type: EdgeTypeName) => string;
+    isItemSelected?: (kind: 'node' | 'edge', id: string) => boolean;
     nodeTypes?: NodeTypes;
     edgeTypes?: EdgeTypes;
     nodesDraggable?: boolean;
@@ -37,5 +43,5 @@ export interface NessoGraphProps {
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     children?: React.ReactNode;
 }
-export declare function NessoGraph({ graph, nodes: nodesProp, defaultNodes, edges: edgesProp, defaultEdges, display, palette, showConfidence, nodeTypes, edgeTypes, nodesDraggable, nodesConnectable, elementsSelectable, panOnDrag, zoomOnScroll, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onSelectionChange, onMoveEnd, onNodeClick, onEdgeClick, fitView, defaultViewport, minZoom, maxZoom, reactFlowProps, style, className, onDoubleClick, children, }: NessoGraphProps): import("react/jsx-runtime").JSX.Element;
+export declare function NessoGraph({ graph, nodes: nodesProp, defaultNodes, edges: edgesProp, defaultEdges, display, palette, showConfidence, categoryColorMode, getRelationLabel, isItemSelected, nodeTypes, edgeTypes, nodesDraggable, nodesConnectable, elementsSelectable, panOnDrag, zoomOnScroll, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onSelectionChange, onMoveEnd, onNodeClick, onEdgeClick, fitView, defaultViewport, minZoom, maxZoom, reactFlowProps, style, className, onDoubleClick, children, }: NessoGraphProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/NessoGraph.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useMemo } from 'react';
 import { ReactFlow, Background, Controls } from '@xyflow/react';
 import { GraphDisplayContext } from './context.js';
-import { ReadOnlyConceptNode } from './ReadOnlyConceptNode.js';
-import { ReadOnlyNessoEdge } from './ReadOnlyNessoEdge.js';
-const DEFAULT_NODE_TYPES = { concept: ReadOnlyConceptNode };
-const DEFAULT_EDGE_TYPES = { nesso: ReadOnlyNessoEdge };
-export function NessoGraph({ graph, nodes: nodesProp, defaultNodes, edges: edgesProp, defaultEdges, display, palette = 'default', showConfidence = false, nodeTypes = DEFAULT_NODE_TYPES, edgeTypes = DEFAULT_EDGE_TYPES, nodesDraggable = false, nodesConnectable = false, elementsSelectable = true, panOnDrag = true, zoomOnScroll = true, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onSelectionChange, onMoveEnd, onNodeClick, onEdgeClick, fitView = true, defaultViewport, minZoom, maxZoom, reactFlowProps, style, className, onDoubleClick, children, }) {
+import { ConceptNode } from './ConceptNode.js';
+import { NessoEdge } from './NessoEdge.js';
+const DEFAULT_NODE_TYPES = { concept: ConceptNode };
+const DEFAULT_EDGE_TYPES = { nesso: NessoEdge };
+export function NessoGraph({ graph, nodes: nodesProp, defaultNodes, edges: edgesProp, defaultEdges, display, palette = 'default', showConfidence = false, categoryColorMode = 'palette', getRelationLabel, isItemSelected, nodeTypes = DEFAULT_NODE_TYPES, edgeTypes = DEFAULT_EDGE_TYPES, nodesDraggable = false, nodesConnectable = false, elementsSelectable = true, panOnDrag = true, zoomOnScroll = true, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onSelectionChange, onMoveEnd, onNodeClick, onEdgeClick, fitView = true, defaultViewport, minZoom, maxZoom, reactFlowProps, style, className, onDoubleClick, children, }) {
     const controlledNodes = nodesProp ?? graph?.nodes;
     const controlledEdges = (edgesProp ?? graph?.edges);
     // Controlled (`nodes`/`graph`) takes precedence; otherwise fall back to ReactFlow's
@@ -25,10 +25,19 @@ export function NessoGraph({ graph, nodes: nodesProp, defaultNodes, edges: edges
         autoCurveFlip: display?.autoCurveFlip ?? graph?.display?.autoCurveFlip ?? true,
         palette,
         showConfidence,
-    }), [display, graph?.display, palette, showConfidence]);
+        categoryColorMode,
+        getRelationLabel,
+        isItemSelected,
+    }), [
+        display,
+        graph?.display,
+        palette,
+        showConfidence,
+        categoryColorMode,
+        getRelationLabel,
+        isItemSelected,
+    ]);
     return (_jsx("div", { style: { width: '100%', height: '100%', ...style }, className: className, onDoubleClick: onDoubleClick, children: _jsx(GraphDisplayContext.Provider, { value: ctx, children: _jsx(ReactFlow, { ...nodesProps, ...edgesProps, nodeTypes: nodeTypes, edgeTypes: edgeTypes, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, elementsSelectable: elementsSelectable, panOnDrag: panOnDrag, zoomOnScroll: zoomOnScroll, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onSelectionChange: onSelectionChange, onMoveEnd: onMoveEnd, fitView: fitView, defaultViewport: defaultViewport, minZoom: minZoom, maxZoom: maxZoom, onNodeClick: onNodeClick
                     ? (_, node) => onNodeClick(node.id, node.data)
-                    : undefined, onEdgeClick: onEdgeClick
-                    ? (_, edge) => onEdgeClick(edge.id, edge.data)
-                    : undefined, ...reactFlowProps, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Background, {}), _jsx(Controls, {})] })) }) }) }));
+                    : undefined, onEdgeClick: onEdgeClick ? (_, edge) => onEdgeClick(edge.id, edge.data) : undefined, ...reactFlowProps, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Background, {}), _jsx(Controls, {})] })) }) }) }));
 }

package/dist/context.d.ts

@@ -1,4 +1,6 @@
+import type { EdgeTypeName } from '@nesso-how/relation-types';
 import type { EdgeEncoding, CurveStyle, CategoryPalette } from '@nesso-how/types';
+export type CategoryColorMode = 'palette' | 'css';
 export interface NessoGraphDisplayContext {
     edgeEncoding: EdgeEncoding;
     showHeatmap: boolean;
@@ -6,6 +8,10 @@ export interface NessoGraphDisplayContext {
     autoCurveFlip: boolean;
     palette: CategoryPalette;
     showConfidence: boolean;
+    /** `palette` uses hex from PALETTES; `css` uses `var(--cat-*)` (app with live palette switching). */
+    categoryColorMode: CategoryColorMode;
+    getRelationLabel?: (type: EdgeTypeName) => string;
+    isItemSelected?: (kind: 'node' | 'edge', id: string) => boolean;
 }
 export declare const GraphDisplayContext: import("react").Context<NessoGraphDisplayContext>;
 export declare function useGraphDisplay(): NessoGraphDisplayContext;

package/dist/context.js

@@ -7,6 +7,7 @@ const defaultContext = {
     autoCurveFlip: true,
     palette: 'default',
     showConfidence: false,
+    categoryColorMode: 'palette',
 };
 export const GraphDisplayContext = createContext(defaultContext);
 export function useGraphDisplay() {

package/dist/index.d.ts

@@ -1,5 +1,11 @@
 export { NessoGraph } from './NessoGraph.js';
 export type { NessoGraphProps } from './NessoGraph.js';
+export { ConceptNode } from './ConceptNode.js';
+export { ConceptNodeBody } from './ConceptNodeBody.js';
+export type { ConceptNodeBodyProps } from './ConceptNodeBody.js';
+export { NessoEdge } from './NessoEdge.js';
+export { useGraphDisplay, GraphDisplayContext } from './context.js';
+export type { NessoGraphDisplayContext, CategoryColorMode } from './context.js';
 export { GlyphSVG } from './GlyphSVG.js';
 export { ratingColor } from './ratingColor.js';
 export { defaultCurveFlip, nodeCenterX, nodeCenterY, flowNodeCenterX, flowNodeCenterY, effectiveCurveFlip, rectExit, nessoArcPath, } from './geometry.js';

package/dist/index.js

@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 export { NessoGraph } from './NessoGraph.js';
+export { ConceptNode } from './ConceptNode.js';
+export { ConceptNodeBody } from './ConceptNodeBody.js';
+export { NessoEdge } from './NessoEdge.js';
+export { useGraphDisplay, GraphDisplayContext } from './context.js';
 // Shared canvas utilities — import from here to avoid duplication with the main app.
 export { GlyphSVG } from './GlyphSVG.js';
 export { ratingColor } from './ratingColor.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nesso-how/graph",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.28",
   "description": "Embeddable read-only Nesso knowledge graph React component",
   "license": "MIT",
   "repository": {
@@ -21,15 +21,10 @@
       "import": "./dist/index.js"
     }
   },
-  "scripts": {
-    "build": "rm -rf dist && tsc",
-    "prepublishOnly": "pnpm build",
-    "dev": "tsc --watch"
-  },
   "dependencies": {
-    "@nesso-how/formats": "workspace:*",
-    "@nesso-how/relation-types": "workspace:*",
-    "@nesso-how/types": "workspace:*"
+    "@nesso-how/formats": "0.1.0-alpha.28",
+    "@nesso-how/types": "0.1.0-alpha.28",
+    "@nesso-how/relation-types": "0.1.0-alpha.28"
   },
   "peerDependencies": {
     "@xyflow/react": "^12.6.4",
@@ -40,5 +35,9 @@
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "typescript": "~5.8.3"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc",
+    "dev": "tsc --watch"
   }
-}
+}