@nesso-how/graph 0.1.0-alpha.26

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Omar Desogus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# @nesso-how/graph
+
+Embeddable read-only Nesso knowledge graph React component, built on [React Flow](https://reactflow.dev).
+
+## Install
+
+```bash
+npm install @nesso-how/graph
+```
+
+## Usage
+
+```tsx
+import { NessoGraph } from '@nesso-how/graph'
+import '@xyflow/react/dist/style.css'
+
+<NessoGraph
+  nodes={nodes}
+  edges={edges}
+  display={{ edgeEncoding: 'full', curveStyle: 'straight' }}
+  style={{ width: '100%', height: 400 }}
+/>
+```
+
+`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`.
+
+### 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
+  `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
+  state once and manages drag/connect/selection itself — no wiring needed, the
+  right choice for decorative or one-off embeds.
+
+```tsx
+<NessoGraph
+  defaultNodes={nodes}
+  defaultEdges={edges}
+  nodesDraggable
+  style={{ width: '100%', height: 400 }}
+/>
+```
+
+## License
+
+MIT

package/dist/GlyphSVG.d.ts

@@ -0,0 +1,9 @@
+import type { GlyphKind } from '@nesso-how/relation-types';
+interface Props {
+    kind: GlyphKind;
+    color?: string;
+    size?: number;
+}
+/** Renders a relation glyph from `@nesso-how/relation-types`' framework-agnostic SVG data. */
+export declare function GlyphSVG({ kind, color, size }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/GlyphSVG.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+import { GLYPH_PATHS } from '@nesso-how/relation-types';
+/** Renders a relation glyph from `@nesso-how/relation-types`' framework-agnostic SVG data. */
+export function GlyphSVG({ kind, color = 'currentColor', size = 14 }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 14 14", style: { color }, strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", stroke: "currentColor", dangerouslySetInnerHTML: { __html: GLYPH_PATHS[kind] } }));
+}

package/dist/NessoGraph.d.ts

@@ -0,0 +1,41 @@
+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 { ConceptNodeData, NessoEdgeData, GraphDisplaySettings, CategoryPalette } from '@nesso-how/types';
+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;
+    nodes?: Node[];
+    defaultNodes?: Node[];
+    edges?: Edge[];
+    defaultEdges?: Edge[];
+    display?: Partial<GraphDisplaySettings>;
+    palette?: CategoryPalette;
+    showConfidence?: boolean;
+    nodeTypes?: NodeTypes;
+    edgeTypes?: EdgeTypes;
+    nodesDraggable?: boolean;
+    nodesConnectable?: boolean;
+    elementsSelectable?: boolean;
+    panOnDrag?: boolean;
+    zoomOnScroll?: boolean;
+    onNodesChange?: OnNodesChange;
+    onEdgesChange?: OnEdgesChange;
+    onConnect?: OnConnect;
+    onConnectStart?: OnConnectStart;
+    onConnectEnd?: OnConnectEnd;
+    onSelectionChange?: ReactFlowProps['onSelectionChange'];
+    onMoveEnd?: OnMoveEnd;
+    onNodeClick?: (id: string, data: ConceptNodeData) => void;
+    onEdgeClick?: (id: string, data: NessoEdgeData) => void;
+    fitView?: boolean;
+    defaultViewport?: Viewport;
+    minZoom?: number;
+    maxZoom?: number;
+    reactFlowProps?: Omit<ReactFlowProps, PassthroughKeys>;
+    style?: React.CSSProperties;
+    className?: string;
+    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 {};

package/dist/NessoGraph.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+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, }) {
+    const controlledNodes = nodesProp ?? graph?.nodes;
+    const controlledEdges = (edgesProp ?? graph?.edges);
+    // Controlled (`nodes`/`graph`) takes precedence; otherwise fall back to ReactFlow's
+    // own uncontrolled mode via `defaultNodes`/`defaultEdges` — see prop docs above.
+    const nodesProps = controlledNodes !== undefined
+        ? { nodes: controlledNodes }
+        : { defaultNodes: defaultNodes ?? [] };
+    const edgesProps = controlledEdges !== undefined
+        ? { edges: controlledEdges }
+        : { defaultEdges: defaultEdges ?? [] };
+    const ctx = useMemo(() => ({
+        edgeEncoding: display?.edgeEncoding ?? graph?.display?.edgeEncoding ?? 'full',
+        showHeatmap: display?.showHeatmap ?? graph?.display?.showHeatmap ?? true,
+        curveStyle: display?.curveStyle ?? graph?.display?.curveStyle ?? 'arc',
+        autoCurveFlip: display?.autoCurveFlip ?? graph?.display?.autoCurveFlip ?? true,
+        palette,
+        showConfidence,
+    }), [display, graph?.display, palette, showConfidence]);
+    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, {})] })) }) }) }));
+}

package/dist/ReadOnlyConceptNode.d.ts

@@ -0,0 +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 {};

package/dist/ReadOnlyConceptNode.js

@@ -0,0 +1,65 @@
+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);
+    const confColor = showConfidence ? heatTint : 'var(--ink, #1a1a1a)';
+    const isStale = data.reps > 0 && data.due <= Date.now();
+    return (_jsxs("div", { 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',
+            minWidth: 60,
+        }, children: [showHeatmap && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: 999,
+                    background: heatTint,
+                    opacity: 0.14,
+                    pointerEvents: 'none',
+                } })), selected && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: -6,
+                    borderRadius: 999,
+                    border: '1px dashed var(--accent, #3b82f6)',
+                    opacity: 0.7,
+                    pointerEvents: 'none',
+                } })), _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: {
+                    position: 'absolute',
+                    bottom: 5,
+                    left: 16,
+                    right: 16,
+                    height: selected ? 1.4 : 0.8,
+                    background: isStale && showConfidence
+                        ? `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

@@ -0,0 +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 {};

package/dist/ReadOnlyNessoEdge.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+import { useState } from 'react';
+import { useStore } from '@xyflow/react';
+import { PALETTES, RELATION_TYPES } from '@nesso-how/relation-types';
+import { GlyphSVG } from './GlyphSVG.js';
+import { useGraphDisplay } from './context.js';
+import { effectiveCurveFlip, flowNodeCenterX, flowNodeCenterY, nessoArcPath, rectExit, } from './geometry.js';
+function asEdgeTypeName(value, fallback = 'causes') {
+    return typeof value === 'string' && value in RELATION_TYPES ? value : fallback;
+}
+function EdgePathElement({ d, color, lineStyle, width = 1.5, opacity = 0.78, }) {
+    const base = {
+        fill: 'none',
+        stroke: color,
+        strokeWidth: width,
+        opacity,
+        strokeLinecap: 'round',
+    };
+    if (lineStyle === 'double') {
+        return (_jsxs("g", { children: [_jsx("path", { d: d, fill: "none", stroke: "var(--paper, #ffffff)", strokeWidth: width + 3, opacity: 1 }), _jsx("path", { d: d, ...base, strokeWidth: width * 2.6 }), _jsx("path", { d: d, fill: "none", stroke: "var(--paper, #ffffff)", strokeWidth: width * 0.7, opacity: 1 })] }));
+    }
+    if (lineStyle === 'wavy') {
+        return _jsx("path", { d: d, ...base, strokeDasharray: "1 4", strokeWidth: width * 1.2 });
+    }
+    if (lineStyle === 'dashed')
+        return _jsx("path", { d: d, ...base, strokeDasharray: "6 5" });
+    if (lineStyle === 'dotted')
+        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, }) {
+    const [hovered, setHovered] = useState(false);
+    const { edgeEncoding, curveStyle, autoCurveFlip, palette } = 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');
+    const lineStyle = edgeEncoding === 'minimal' ? 'solid' : T.line;
+    const showLabel = edgeEncoding === 'full' || (edgeEncoding !== 'minimal' && (hovered || selected));
+    const straight = curveStyle === 'straight';
+    if (!sourceNode || !targetNode)
+        return null;
+    const sw = sourceNode.measured?.width ?? 80;
+    const sh = sourceNode.measured?.height ?? 32;
+    const tw = targetNode.measured?.width ?? 80;
+    const th = targetNode.measured?.height ?? 32;
+    const scx = sourceNode.internals.positionAbsolute.x + sw / 2;
+    const scy = flowNodeCenterY(sourceNode);
+    const tcx = targetNode.internals.positionAbsolute.x + tw / 2;
+    const tcy = flowNodeCenterY(targetNode);
+    const curveFlip = effectiveCurveFlip(autoCurveFlip, data?.curveFlipPinned, data?.curveFlip, flowNodeCenterX(sourceNode), scy, flowNodeCenterX(targetNode), tcy);
+    const pad = 6;
+    const flipSign = curveFlip ? -1 : 1;
+    const { a, b } = (() => {
+        if (straight) {
+            return {
+                a: rectExit(scx, scy, sw + pad * 2, sh + pad * 2, tcx, tcy),
+                b: rectExit(tcx, tcy, tw + pad * 2, th + pad * 2, scx, scy),
+            };
+        }
+        const dx = tcx - scx, dy = tcy - scy;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+        const nx = -dy / dist, ny = dx / dist;
+        const sibOff = (data?.siblingIdx ?? 0) * 14;
+        const bend = (Math.min(dist * 0.22, 90) + sibOff * 0.5) * flipSign;
+        const cpx = (scx + tcx) / 2 + nx * bend;
+        const cpy = (scy + tcy) / 2 + ny * bend;
+        return {
+            a: rectExit(scx, scy, sw + pad * 2, sh + pad * 2, cpx, cpy),
+            b: rectExit(tcx, tcy, tw + pad * 2, th + pad * 2, cpx, cpy),
+        };
+    })();
+    const { path, labelX, labelY, arrowAngle } = nessoArcPath(a.x, a.y, b.x, b.y, data?.siblingIdx ?? 0, straight, curveFlip);
+    const arrowSize = 7;
+    const a1 = arrowAngle + Math.PI - 0.45;
+    const a2 = arrowAngle + Math.PI + 0.45;
+    const ax1 = b.x + Math.cos(a1) * arrowSize;
+    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 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',
+                        background: 'var(--paper, #ffffff)',
+                        border: '0.5px solid var(--line, #d0d0d0)',
+                        borderRadius: 4,
+                        padding: '1px 6px',
+                        font: "500 10px 'JetBrains Mono', ui-monospace",
+                        color,
+                        letterSpacing: '0.02em',
+                        whiteSpace: 'nowrap',
+                        lineHeight: '16px',
+                    }, children: T.label }) }))] }));
+}

package/dist/context.d.ts

@@ -0,0 +1,11 @@
+import type { EdgeEncoding, CurveStyle, CategoryPalette } from '@nesso-how/types';
+export interface NessoGraphDisplayContext {
+    edgeEncoding: EdgeEncoding;
+    showHeatmap: boolean;
+    curveStyle: CurveStyle;
+    autoCurveFlip: boolean;
+    palette: CategoryPalette;
+    showConfidence: boolean;
+}
+export declare const GraphDisplayContext: import("react").Context<NessoGraphDisplayContext>;
+export declare function useGraphDisplay(): NessoGraphDisplayContext;

package/dist/context.js

@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { createContext, useContext } from 'react';
+const defaultContext = {
+    edgeEncoding: 'full',
+    showHeatmap: true,
+    curveStyle: 'arc',
+    autoCurveFlip: true,
+    palette: 'default',
+    showConfidence: false,
+};
+export const GraphDisplayContext = createContext(defaultContext);
+export function useGraphDisplay() {
+    return useContext(GraphDisplayContext);
+}

package/dist/geometry.d.ts

@@ -0,0 +1,48 @@
+export declare function defaultCurveFlip(sourceCenterX: number, sourceCenterY: number, targetCenterX: number, targetCenterY: number): boolean;
+export declare function nodeCenterX(node: {
+    position: {
+        x: number;
+    };
+    measured?: {
+        width?: number;
+    };
+}): number;
+export declare function nodeCenterY(node: {
+    position: {
+        y: number;
+    };
+    measured?: {
+        height?: number;
+    };
+}): number;
+export declare function flowNodeCenterX(node: {
+    internals: {
+        positionAbsolute: {
+            x: number;
+        };
+    };
+    measured?: {
+        width?: number;
+    };
+}): number;
+export declare function flowNodeCenterY(node: {
+    internals: {
+        positionAbsolute: {
+            y: number;
+        };
+    };
+    measured?: {
+        height?: number;
+    };
+}): number;
+export declare function effectiveCurveFlip(auto: boolean, pinned: boolean | undefined, storedFlip: boolean | undefined, sourceCenterX: number, sourceCenterY: number, targetCenterX: number, targetCenterY: number): boolean;
+export declare function rectExit(cx: number, cy: number, w: number, h: number, tx: number, ty: number): {
+    x: number;
+    y: number;
+};
+export declare function nessoArcPath(sx: number, sy: number, tx: number, ty: number, siblingIdx?: number, straight?: boolean, curveFlip?: boolean): {
+    path: string;
+    labelX: number;
+    labelY: number;
+    arrowAngle: number;
+};

package/dist/geometry.js

@@ -0,0 +1,65 @@
+// SPDX-License-Identifier: MIT
+// Shared path math for Nesso edges — adapted from src/geometry/nessoEdgeGeometry.ts.
+export function defaultCurveFlip(sourceCenterX, sourceCenterY, targetCenterX, targetCenterY) {
+    const targetAbove = targetCenterY < sourceCenterY;
+    const targetLeft = targetCenterX < sourceCenterX;
+    return targetAbove !== targetLeft;
+}
+export function nodeCenterX(node) {
+    const w = node.measured?.width ?? 80;
+    return node.position.x + w / 2;
+}
+export function nodeCenterY(node) {
+    const h = node.measured?.height ?? 32;
+    return node.position.y + h / 2;
+}
+export function flowNodeCenterX(node) {
+    const w = node.measured?.width ?? 80;
+    return node.internals.positionAbsolute.x + w / 2;
+}
+export function flowNodeCenterY(node) {
+    const h = node.measured?.height ?? 32;
+    return node.internals.positionAbsolute.y + h / 2;
+}
+export function effectiveCurveFlip(auto, pinned, storedFlip, sourceCenterX, sourceCenterY, targetCenterX, targetCenterY) {
+    if (auto && !pinned)
+        return defaultCurveFlip(sourceCenterX, sourceCenterY, targetCenterX, targetCenterY);
+    return Boolean(storedFlip);
+}
+export function rectExit(cx, cy, w, h, tx, ty) {
+    const dx = tx - cx, dy = ty - cy;
+    if (dx === 0 && dy === 0)
+        return { x: cx, y: cy };
+    const hx = w / 2, hy = h / 2;
+    const sx = dx === 0 ? Infinity : hx / Math.abs(dx);
+    const sy = dy === 0 ? Infinity : hy / Math.abs(dy);
+    const s = Math.min(sx, sy);
+    return { x: cx + dx * s, y: cy + dy * s };
+}
+export function nessoArcPath(sx, sy, tx, ty, siblingIdx = 0, straight = false, curveFlip = false) {
+    if (straight) {
+        const lx = (sx + tx) / 2;
+        const ly = (sy + ty) / 2;
+        return {
+            path: `M ${sx} ${sy} L ${tx} ${ty}`,
+            labelX: lx,
+            labelY: ly,
+            arrowAngle: Math.atan2(ty - sy, tx - sx),
+        };
+    }
+    const dx = tx - sx;
+    const dy = ty - sy;
+    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+    const nx = -dy / dist;
+    const ny = dx / dist;
+    const off = siblingIdx * 14;
+    const sign = curveFlip ? -1 : 1;
+    const bend = (Math.min(dist * 0.22, 90) + off * 0.5) * sign;
+    const cpx = (sx + tx) / 2 + nx * bend;
+    const cpy = (sy + ty) / 2 + ny * bend;
+    const path = `M ${sx} ${sy} Q ${cpx} ${cpy} ${tx} ${ty}`;
+    const labelX = cpx * 0.5 + (sx + tx) * 0.25;
+    const labelY = cpy * 0.5 + (sy + ty) * 0.25;
+    const arrowAngle = Math.atan2(ty - cpy, tx - cpx);
+    return { path, labelX, labelY, arrowAngle };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { NessoGraph } from './NessoGraph.js';
+export type { NessoGraphProps } from './NessoGraph.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

@@ -0,0 +1,6 @@
+// SPDX-License-Identifier: MIT
+export { NessoGraph } from './NessoGraph.js';
+// Shared canvas utilities — import from here to avoid duplication with the main app.
+export { GlyphSVG } from './GlyphSVG.js';
+export { ratingColor } from './ratingColor.js';
+export { defaultCurveFlip, nodeCenterX, nodeCenterY, flowNodeCenterX, flowNodeCenterY, effectiveCurveFlip, rectExit, nessoArcPath, } from './geometry.js';

package/dist/ratingColor.d.ts

@@ -0,0 +1 @@
+export declare function ratingColor(rating: number, unratedFallback?: string): string;

package/dist/ratingColor.js

@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+const RATING_COLORS = [
+    'var(--ink, #1a1a1a)',
+    'var(--conf-1, #ef4444)',
+    'var(--conf-2, #f97316)',
+    'var(--conf-4, #22c55e)',
+    'var(--conf-5, #3b82f6)',
+];
+export function ratingColor(rating, unratedFallback = 'var(--ink, #1a1a1a)') {
+    const idx = Math.max(0, Math.min(4, rating));
+    return idx === 0 ? unratedFallback : RATING_COLORS[idx];
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@nesso-how/graph",
+  "version": "0.1.0-alpha.26",
+  "description": "Embeddable read-only Nesso knowledge graph React component",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nesso-how/nesso",
+    "directory": "packages/graph"
+  },
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "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:*"
+  },
+  "peerDependencies": {
+    "@xyflow/react": "^12.6.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "typescript": "~5.8.3"
+  }
+}