@medicine-wheel/graph-viz 0.3.0 → 0.4.1

package/dist/interactive/DirectionQuadrant.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @medicine-wheel/graph-viz — Direction quadrant backdrop
+ *
+ * Draws the four medicine-wheel direction sectors (East/South/West/North)
+ * behind the nodes, in flow coordinates, so the backdrop pans and zooms
+ * with the canvas. Reuses `getQuadrantGeometries` + `quadrantArcPath`.
+ *
+ * The entire backdrop is `pointer-events: none` so it never steals drag /
+ * pan gestures from React Flow.
+ */
+import React from 'react';
+import type { WheelLayoutConfig } from '../types.js';
+export interface DirectionQuadrantProps {
+    layout?: Partial<WheelLayoutConfig>;
+    showLabels?: boolean;
+}
+export declare function DirectionQuadrant({ layout, showLabels, }: DirectionQuadrantProps): React.JSX.Element;
+//# sourceMappingURL=DirectionQuadrant.d.ts.map

package/dist/interactive/DirectionQuadrant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionQuadrant.d.ts","sourceRoot":"","sources":["../../src/interactive/DirectionQuadrant.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAErD,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,UAAiB,GAClB,EAAE,sBAAsB,qBA0ExB"}

package/dist/interactive/DirectionQuadrant.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectionQuadrant = DirectionQuadrant;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@xyflow/react");
+const layout_js_1 = require("../layout.js");
+function DirectionQuadrant({ layout, showLabels = true, }) {
+    const cfg = { ...layout_js_1.DEFAULT_LAYOUT, ...layout };
+    const quadrants = (0, layout_js_1.getQuadrantGeometries)(cfg);
+    const { centerX, centerY, radius, innerRadius = 60 } = cfg;
+    return ((0, jsx_runtime_1.jsx)(react_1.ViewportPortal, { children: (0, jsx_runtime_1.jsx)("svg", { style: {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                overflow: 'visible',
+                pointerEvents: 'none',
+            }, children: (0, jsx_runtime_1.jsxs)("g", { pointerEvents: "none", children: [quadrants.map((q) => ((0, jsx_runtime_1.jsx)("path", { d: (0, layout_js_1.quadrantArcPath)(centerX, centerY, radius, innerRadius, q.startAngle, q.endAngle), fill: q.color, opacity: 0.08, stroke: q.color, strokeOpacity: 0.25, strokeWidth: 1, pointerEvents: "none" }, q.direction))), showLabels &&
+                        quadrants.map((q) => {
+                            const pos = (0, layout_js_1.directionLabelPosition)(centerX, centerY, radius, q.direction);
+                            return ((0, jsx_runtime_1.jsxs)("text", { x: pos.x, y: pos.y, textAnchor: pos.anchor, fill: q.color, fontSize: 14, fontWeight: 700, opacity: 0.7, pointerEvents: "none", children: [q.label, (0, jsx_runtime_1.jsx)("tspan", { x: pos.x, dy: 16, fontSize: 11, fontWeight: 400, opacity: 0.8, children: q.ojibwe })] }, `label-${q.direction}`));
+                        })] }) }) }));
+}
+//# sourceMappingURL=DirectionQuadrant.js.map

package/dist/interactive/DirectionQuadrant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionQuadrant.js","sourceRoot":"","sources":["../../src/interactive/DirectionQuadrant.tsx"],"names":[],"mappings":";;AA2BA,8CA6EC;;AA5FD,yCAA+C;AAE/C,4CAKsB;AAQtB,SAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,UAAU,GAAG,IAAI,GACM;IACvB,MAAM,GAAG,GAAsB,EAAE,GAAG,0BAAc,EAAE,GAAG,MAAM,EAAE,CAAC;IAChE,MAAM,SAAS,GAAG,IAAA,iCAAqB,EAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,GAAG,EAAE,EAAE,GAAG,GAAG,CAAC;IAE3D,OAAO,CACL,uBAAC,sBAAc,cACb,gCACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,CAAC;gBACP,GAAG,EAAE,CAAC;gBACN,QAAQ,EAAE,SAAS;gBACnB,aAAa,EAAE,MAAM;aACtB,YAED,+BAAG,aAAa,EAAC,MAAM,aACpB,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACpB,iCAEE,CAAC,EAAE,IAAA,2BAAe,EAChB,OAAO,EACP,OAAO,EACP,MAAM,EACN,WAAW,EACX,CAAC,CAAC,UAAU,EACZ,CAAC,CAAC,QAAQ,CACX,EACD,IAAI,EAAE,CAAC,CAAC,KAAK,EACb,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,CAAC,CAAC,KAAK,EACf,aAAa,EAAE,IAAI,EACnB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,MAAM,IAdf,CAAC,CAAC,SAAS,CAehB,CACH,CAAC,EAED,UAAU;wBACT,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;4BAClB,MAAM,GAAG,GAAG,IAAA,kCAAsB,EAChC,OAAO,EACP,OAAO,EACP,MAAM,EACN,CAAC,CAAC,SAAS,CACZ,CAAC;4BACF,OAAO,CACL,kCAEE,CAAC,EAAE,GAAG,CAAC,CAAC,EACR,CAAC,EAAE,GAAG,CAAC,CAAC,EACR,UAAU,EAAE,GAAG,CAAC,MAAM,EACtB,IAAI,EAAE,CAAC,CAAC,KAAK,EACb,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,GAAG,EACf,OAAO,EAAE,GAAG,EACZ,aAAa,EAAC,MAAM,aAEnB,CAAC,CAAC,KAAK,EACR,kCACE,CAAC,EAAE,GAAG,CAAC,CAAC,EACR,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,GAAG,EACf,OAAO,EAAE,GAAG,YAEX,CAAC,CAAC,MAAM,GACH,KAnBH,SAAS,CAAC,CAAC,SAAS,EAAE,CAoBtB,CACR,CAAC;wBACJ,CAAC,CAAC,IACF,GACA,GACS,CAClB,CAAC;AACJ,CAAC"}

package/dist/interactive/MedicineWheelFlowGraph.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @medicine-wheel/graph-viz — Interactive React Flow renderer
+ *
+ * `<MedicineWheelFlowGraph>` is the interactive output strategy for the
+ * Medicine Wheel relational web. It reuses the renderer-agnostic
+ * `applyWheelLayout` to seed node positions, then hands control to React
+ * Flow for drag / pan / zoom / minimap while preserving the four-direction
+ * circular semantics (drawn by `<DirectionQuadrant>`).
+ *
+ * Ship behind the `./interactive` subpath export. `@xyflow/react` is an
+ * optional peer — static/server consumers importing from the package root
+ * never pull it.
+ *
+ * The consumer is responsible for importing the React Flow stylesheet once
+ * at the app level:  `import '@xyflow/react/dist/style.css'`.
+ */
+import React from 'react';
+import type { MWGraphData, MWGraphNode, WheelLayoutConfig } from '../types.js';
+export interface MedicineWheelFlowGraphProps {
+    /** Graph data (nodes + links). Re-layout happens whenever this changes. */
+    data: MWGraphData;
+    /** Layout configuration passed to `applyWheelLayout`. */
+    layout?: Partial<WheelLayoutConfig>;
+    /** Canvas height (CSS). Width fills the container. Default: 600. */
+    height?: number | string;
+    /** Dark mode styling. Default: true. */
+    darkMode?: boolean;
+    /** Show node labels. Default: true. */
+    showNodeLabels?: boolean;
+    /** Show OCAP® indicators. Default: true. */
+    showOcapIndicators?: boolean;
+    /** Show Wilson alignment halos. Default: true. */
+    showWilsonHalos?: boolean;
+    /** Show the four direction-quadrant backdrop. Default: true. */
+    showQuadrants?: boolean;
+    /** Show direction labels (East/South/West/North + Ojibwe). Default: true. */
+    showDirectionLabels?: boolean;
+    /** Show the minimap. Default: true. */
+    showMiniMap?: boolean;
+    /** Show pan/zoom controls. Default: true. */
+    showControls?: boolean;
+    /** Custom CSS class on the wrapper. */
+    className?: string;
+    /** Fired when a node is clicked, with the original MWGraphNode. */
+    onNodeClick?: (node: MWGraphNode) => void;
+}
+/**
+ * Interactive Medicine Wheel graph. Self-contained: wraps its own
+ * `<ReactFlowProvider>` so it is safe to mount anywhere (including via
+ * `next/dynamic` with `ssr: false`).
+ */
+export declare function MedicineWheelFlowGraph(props: MedicineWheelFlowGraphProps): React.JSX.Element;
+//# sourceMappingURL=MedicineWheelFlowGraph.d.ts.map

package/dist/interactive/MedicineWheelFlowGraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MedicineWheelFlowGraph.d.ts","sourceRoot":"","sources":["../../src/interactive/MedicineWheelFlowGraph.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAA0C,MAAM,OAAO,CAAC;AAmB/D,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EAEX,iBAAiB,EAClB,MAAM,aAAa,CAAC;AASrB,MAAM,WAAW,2BAA2B;IAC1C,2EAA2E;IAC3E,IAAI,EAAE,WAAW,CAAC;IAClB,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gEAAgE;IAChE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AA2KD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBAMxE"}

package/dist/interactive/MedicineWheelFlowGraph.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MedicineWheelFlowGraph = MedicineWheelFlowGraph;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @medicine-wheel/graph-viz — Interactive React Flow renderer
+ *
+ * `<MedicineWheelFlowGraph>` is the interactive output strategy for the
+ * Medicine Wheel relational web. It reuses the renderer-agnostic
+ * `applyWheelLayout` to seed node positions, then hands control to React
+ * Flow for drag / pan / zoom / minimap while preserving the four-direction
+ * circular semantics (drawn by `<DirectionQuadrant>`).
+ *
+ * Ship behind the `./interactive` subpath export. `@xyflow/react` is an
+ * optional peer — static/server consumers importing from the package root
+ * never pull it.
+ *
+ * The consumer is responsible for importing the React Flow stylesheet once
+ * at the app level:  `import '@xyflow/react/dist/style.css'`.
+ */
+const react_1 = require("react");
+const react_2 = require("@xyflow/react");
+const ontology_core_1 = require("@medicine-wheel/ontology-core");
+const layout_js_1 = require("../layout.js");
+const MedicineWheelNode_js_1 = require("./MedicineWheelNode.js");
+const DirectionQuadrant_js_1 = require("./DirectionQuadrant.js");
+const NODE_TYPES = { medicineWheel: MedicineWheelNode_js_1.MedicineWheelNode };
+// ── Mappers ─────────────────────────────────────────────────────────────────
+function toFlowNode(node, opts) {
+    return {
+        id: node.id,
+        type: 'medicineWheel',
+        position: { x: node.x ?? 0, y: node.y ?? 0 },
+        data: {
+            node,
+            showLabel: opts.showLabel,
+            showOcap: opts.showOcap,
+            showWilson: opts.showWilson,
+            darkMode: opts.darkMode,
+        },
+    };
+}
+function linkStrokeDash(style) {
+    switch (style) {
+        case 'dashed':
+            return '6,3';
+        case 'dotted':
+            return '2,2';
+        case 'ceremony':
+            return '8,3,2,3';
+        default:
+            return undefined;
+    }
+}
+function toFlowEdge(link, index) {
+    const ceremony = link.ceremonyHonored === true;
+    const stroke = link.color ?? (ceremony ? '#FFD700' : '#777');
+    return {
+        // MWGraphLink has no id; synthesize a stable, collision-safe id so
+        // parallel edges between the same pair are preserved.
+        id: `${link.source}->${link.target}#${index}`,
+        source: link.source,
+        target: link.target,
+        label: link.label,
+        animated: ceremony,
+        style: {
+            stroke,
+            strokeWidth: link.width ?? 1 + (link.strength ?? 0.5) * 2,
+            strokeDasharray: linkStrokeDash(link.style),
+            opacity: 0.6,
+        },
+        labelStyle: { fill: '#aaa', fontSize: 10 },
+        labelBgStyle: { fill: 'transparent' },
+        data: { link },
+    };
+}
+// ── Inner (inside ReactFlowProvider) ─────────────────────────────────────────
+function FlowGraphInner({ data, layout, height = 600, darkMode = true, showNodeLabels = true, showOcapIndicators = true, showWilsonHalos = true, showQuadrants = true, showDirectionLabels = true, showMiniMap = true, showControls = true, className, onNodeClick, }) {
+    const [nodes, setNodes, onNodesChange] = (0, react_2.useNodesState)([]);
+    const [edges, setEdges, onEdgesChange] = (0, react_2.useEdgesState)([]);
+    // Re-layout whenever data or display flags change. `applyWheelLayout`
+    // mutates node.x/node.y in place, so spread each node defensively to avoid
+    // mutating objects owned by the parent's React state.
+    (0, react_1.useEffect)(() => {
+        const laidOut = (0, layout_js_1.applyWheelLayout)({ nodes: data.nodes.map((n) => ({ ...n })), links: data.links }, layout);
+        setNodes(laidOut.nodes.map((n) => toFlowNode(n, {
+            showLabel: showNodeLabels,
+            showOcap: showOcapIndicators,
+            showWilson: showWilsonHalos,
+            darkMode,
+        })));
+        setEdges(data.links.map((l, i) => toFlowEdge(l, i)));
+    }, [
+        data,
+        layout,
+        showNodeLabels,
+        showOcapIndicators,
+        showWilsonHalos,
+        darkMode,
+        setNodes,
+        setEdges,
+    ]);
+    const handleNodeClick = (0, react_1.useCallback)((_event, flowNode) => {
+        const original = flowNode.data?.node;
+        if (original && onNodeClick)
+            onNodeClick(original);
+    }, [onNodeClick]);
+    const minimapNodeColor = (0, react_1.useCallback)((flowNode) => {
+        const n = flowNode.data?.node;
+        return n?.color ?? (n ? ontology_core_1.NODE_TYPE_COLORS[n.type] : undefined) ?? '#888';
+    }, []);
+    const wrapperStyle = (0, react_1.useMemo)(() => ({ width: '100%', height }), [height]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: wrapperStyle, children: (0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: nodes, edges: edges, nodeTypes: NODE_TYPES, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onNodeClick: handleNodeClick, fitView: true, proOptions: { hideAttribution: true }, colorMode: darkMode ? 'dark' : 'light', minZoom: 0.2, maxZoom: 2.5, children: [showQuadrants && ((0, jsx_runtime_1.jsx)(DirectionQuadrant_js_1.DirectionQuadrant, { layout: layout, showLabels: showDirectionLabels })), (0, jsx_runtime_1.jsx)(react_2.Background, { variant: react_2.BackgroundVariant.Dots, gap: 24, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showInteractive: false }), showMiniMap && ((0, jsx_runtime_1.jsx)(react_2.MiniMap, { pannable: true, zoomable: true, nodeColor: minimapNodeColor, maskColor: darkMode ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.6)' }))] }) }));
+}
+// ── Public component ─────────────────────────────────────────────────────────
+/**
+ * Interactive Medicine Wheel graph. Self-contained: wraps its own
+ * `<ReactFlowProvider>` so it is safe to mount anywhere (including via
+ * `next/dynamic` with `ssr: false`).
+ */
+function MedicineWheelFlowGraph(props) {
+    return ((0, jsx_runtime_1.jsx)(react_2.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(FlowGraphInner, { ...props }) }));
+}
+//# sourceMappingURL=MedicineWheelFlowGraph.js.map

package/dist/interactive/MedicineWheelFlowGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MedicineWheelFlowGraph.js","sourceRoot":"","sources":["../../src/interactive/MedicineWheelFlowGraph.tsx"],"names":[],"mappings":";;AA6PA,wDAMC;;AAnQD;;;;;;;;;;;;;;;GAeG;AAEH,iCAA+D;AAC/D,yCAauB;AAEvB,iEAAiE;AAEjE,4CAAgE;AAOhE,iEAGgC;AAChC,iEAA2D;AAiC3D,MAAM,UAAU,GAAc,EAAE,aAAa,EAAE,wCAAiB,EAAE,CAAC;AAEnE,+EAA+E;AAE/E,SAAS,UAAU,CACjB,IAAiB,EACjB,IAKC;IAED,OAAO;QACL,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,IAAI,EAAE,eAAe;QACrB,QAAQ,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE;QAC5C,IAAI,EAAE;YACJ,IAAI;YACJ,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;KACF,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,KAA4B;IAClD,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC;QACf,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC;QACf,KAAK,UAAU;YACb,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,SAAS,CAAC;IACrB,CAAC;AACH,CAAC;AAED,SAAS,UAAU,CAAC,IAAiB,EAAE,KAAa;IAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC;IAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D,OAAO;QACL,mEAAmE;QACnE,sDAAsD;QACtD,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,IAAI,KAAK,EAAE;QAC7C,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE;YACL,MAAM;YACN,WAAW,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,GAAG,CAAC;YACzD,eAAe,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3C,OAAO,EAAE,GAAG;SACb;QACD,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC1C,YAAY,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE;QACrC,IAAI,EAAE,EAAE,IAAI,EAAE;KACf,CAAC;AACJ,CAAC;AAED,gFAAgF;AAEhF,SAAS,cAAc,CAAC,EACtB,IAAI,EACJ,MAAM,EACN,MAAM,GAAG,GAAG,EACZ,QAAQ,GAAG,IAAI,EACf,cAAc,GAAG,IAAI,EACrB,kBAAkB,GAAG,IAAI,EACzB,eAAe,GAAG,IAAI,EACtB,aAAa,GAAG,IAAI,EACpB,mBAAmB,GAAG,IAAI,EAC1B,WAAW,GAAG,IAAI,EAClB,YAAY,GAAG,IAAI,EACnB,SAAS,EACT,WAAW,GACiB;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,CAAC,GAAG,IAAA,qBAAa,EAA8B,EAAE,CAAC,CAAC;IACxF,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,CAAC,GAAG,IAAA,qBAAa,EAAO,EAAE,CAAC,CAAC;IAEjE,sEAAsE;IACtE,2EAA2E;IAC3E,sDAAsD;IACtD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,IAAA,4BAAgB,EAC9B,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAC/D,MAAM,CACP,CAAC;QACF,QAAQ,CACN,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACtB,UAAU,CAAC,CAAC,EAAE;YACZ,SAAS,EAAE,cAAc;YACzB,QAAQ,EAAE,kBAAkB;YAC5B,UAAU,EAAE,eAAe;YAC3B,QAAQ;SACT,CAAC,CACH,CACF,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC,EAAE;QACD,IAAI;QACJ,MAAM;QACN,cAAc;QACd,kBAAkB;QAClB,eAAe;QACf,QAAQ;QACR,QAAQ;QACR,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE;QACnB,MAAM,QAAQ,GAAI,QAAQ,CAAC,IAA0C,EAAE,IAAI,CAAC;QAC5E,IAAI,QAAQ,IAAI,WAAW;YAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACrD,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,CAAC,QAAc,EAAE,EAAE;QACtD,MAAM,CAAC,GAAI,QAAQ,CAAC,IAA0C,EAAE,IAAI,CAAC;QACrE,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,gCAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC;IAC1E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,IAAA,eAAO,EAC1B,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EACjC,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,OAAO,CACL,gCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,YAC5C,wBAAC,iBAAS,IACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,EACrB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,eAAe,EAC5B,OAAO,QACP,UAAU,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,EACrC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACtC,OAAO,EAAE,GAAG,EACZ,OAAO,EAAE,GAAG,aAEX,aAAa,IAAI,CAChB,uBAAC,wCAAiB,IAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,mBAAmB,GAC/B,CACH,EACD,uBAAC,kBAAU,IAAC,OAAO,EAAE,yBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,GAAI,EAChE,YAAY,IAAI,uBAAC,gBAAQ,IAAC,eAAe,EAAE,KAAK,GAAI,EACpD,WAAW,IAAI,CACd,uBAAC,eAAO,IACN,QAAQ,QACR,QAAQ,QACR,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,uBAAuB,GACjE,CACH,IACS,GACR,CACP,CAAC;AACJ,CAAC;AAED,gFAAgF;AAEhF;;;;GAIG;AACH,SAAgB,sBAAsB,CAAC,KAAkC;IACvE,OAAO,CACL,uBAAC,yBAAiB,cAChB,uBAAC,cAAc,OAAK,KAAK,GAAI,GACX,CACrB,CAAC;AACJ,CAAC"}

package/dist/interactive/MedicineWheelNode.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @medicine-wheel/graph-viz — Interactive custom node
+ *
+ * Renders a single relational node inside the React Flow canvas:
+ * direction-colored circle, OCAP® badge, Wilson alignment halo,
+ * node-type icon, and label. Carries (hidden) handles so React Flow
+ * can route edges to/from the node center.
+ */
+import React from 'react';
+import { type NodeProps } from '@xyflow/react';
+import type { MWGraphNode } from '../types.js';
+/** Data carried on each React Flow node. */
+export interface MedicineWheelNodeData extends Record<string, unknown> {
+    node: MWGraphNode;
+    showLabel: boolean;
+    showOcap: boolean;
+    showWilson: boolean;
+    darkMode: boolean;
+}
+declare function MedicineWheelNodeComponent({ data, selected }: NodeProps): React.JSX.Element;
+export declare const MedicineWheelNode: React.MemoExoticComponent<typeof MedicineWheelNodeComponent>;
+export {};
+//# sourceMappingURL=MedicineWheelNode.d.ts.map

package/dist/interactive/MedicineWheelNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MedicineWheelNode.d.ts","sourceRoot":"","sources":["../../src/interactive/MedicineWheelNode.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAOjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,4CAA4C;AAC5C,MAAM,WAAW,qBAAsB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACpE,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAQD,iBAAS,0BAA0B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,SAAS,qBA0HhE;AAED,eAAO,MAAM,iBAAiB,8DAAmC,CAAC"}

package/dist/interactive/MedicineWheelNode.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MedicineWheelNode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @medicine-wheel/graph-viz — Interactive custom node
+ *
+ * Renders a single relational node inside the React Flow canvas:
+ * direction-colored circle, OCAP® badge, Wilson alignment halo,
+ * node-type icon, and label. Carries (hidden) handles so React Flow
+ * can route edges to/from the node center.
+ */
+const react_1 = require("react");
+const react_2 = require("@xyflow/react");
+const ontology_core_1 = require("@medicine-wheel/ontology-core");
+function wilsonColor(alignment) {
+    if (alignment > 0.7)
+        return '#4a9e5c';
+    if (alignment > 0.4)
+        return '#c9a23a';
+    return '#dc143c';
+}
+function MedicineWheelNodeComponent({ data, selected }) {
+    const { node, showLabel, showOcap, showWilson, darkMode } = data;
+    const size = (node.size ?? 8) * 1.6;
+    const diameter = size * 2;
+    const color = node.color ?? ontology_core_1.NODE_TYPE_COLORS[node.type] ?? '#888';
+    const opacity = node.opacity ?? 1;
+    const icon = ontology_core_1.CEREMONY_ICONS[node.type];
+    const ringColor = showWilson && node.wilsonAlignment !== undefined
+        ? wilsonColor(node.wilsonAlignment)
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            position: 'relative',
+            width: diameter,
+            height: diameter,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, title: `${node.label} (${node.type}${node.direction ? ` · ${node.direction}` : ''})`, children: [(0, jsx_runtime_1.jsx)(react_2.Handle, { type: "target", position: react_2.Position.Left, style: { opacity: 0, left: '50%', top: '50%', border: 'none' }, isConnectable: false }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Right, style: { opacity: 0, left: '50%', top: '50%', border: 'none' }, isConnectable: false }), ringColor && ((0, jsx_runtime_1.jsx)("span", { style: {
+                    position: 'absolute',
+                    inset: -6,
+                    borderRadius: '9999px',
+                    border: `2px ${node.wilsonAlignment > 0.7 ? 'solid' : 'dashed'} ${ringColor}`,
+                    opacity: 0.6,
+                } })), selected && ((0, jsx_runtime_1.jsx)("span", { style: {
+                    position: 'absolute',
+                    inset: -9,
+                    borderRadius: '9999px',
+                    border: '2px solid #FFD700',
+                    opacity: 0.9,
+                } })), (0, jsx_runtime_1.jsx)("span", { style: {
+                    width: diameter,
+                    height: diameter,
+                    borderRadius: '9999px',
+                    background: color,
+                    opacity,
+                    border: `1.5px solid ${darkMode ? '#222' : '#fff'}`,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: Math.max(10, size * 0.9),
+                    lineHeight: 1,
+                }, children: icon ?? '' }), showOcap && node.ocapCompliant !== undefined && ((0, jsx_runtime_1.jsx)("span", { style: {
+                    position: 'absolute',
+                    top: -2,
+                    right: -2,
+                    width: 8,
+                    height: 8,
+                    borderRadius: '9999px',
+                    background: node.ocapCompliant ? '#4a9e5c' : '#dc143c',
+                    border: `1px solid ${darkMode ? '#222' : '#fff'}`,
+                } })), showLabel && ((0, jsx_runtime_1.jsx)("span", { style: {
+                    position: 'absolute',
+                    top: diameter + 2,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    whiteSpace: 'nowrap',
+                    fontSize: 11,
+                    fontFamily: 'system-ui, sans-serif',
+                    color: darkMode ? '#ccc' : '#333',
+                    pointerEvents: 'none',
+                }, children: node.label.length > 22 ? node.label.slice(0, 21) + '…' : node.label }))] }));
+}
+exports.MedicineWheelNode = (0, react_1.memo)(MedicineWheelNodeComponent);
+exports.MedicineWheelNode.displayName = 'MedicineWheelNode';
+//# sourceMappingURL=MedicineWheelNode.js.map

package/dist/interactive/MedicineWheelNode.js.map

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

package/dist/interactive/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @medicine-wheel/graph-viz/interactive
+ *
+ * Interactive React Flow renderer for the Medicine Wheel relational web.
+ * Imported via the `./interactive` subpath export so that static/server
+ * consumers of the package root never pull `@xyflow/react`.
+ *
+ * Peer dependency: `@xyflow/react` (>=12). Consumers must also import the
+ * stylesheet once at the app level: `import '@xyflow/react/dist/style.css'`.
+ *
+ * @packageDocumentation
+ */
+export { MedicineWheelFlowGraph, type MedicineWheelFlowGraphProps, } from './MedicineWheelFlowGraph.js';
+export { MedicineWheelNode, type MedicineWheelNodeData, } from './MedicineWheelNode.js';
+export { DirectionQuadrant, type DirectionQuadrantProps, } from './DirectionQuadrant.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/interactive/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interactive/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,6BAA6B,CAAC;AAErC,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,GAC3B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,wBAAwB,CAAC"}

package/dist/interactive/index.js

@@ -0,0 +1,22 @@
+"use strict";
+/**
+ * @medicine-wheel/graph-viz/interactive
+ *
+ * Interactive React Flow renderer for the Medicine Wheel relational web.
+ * Imported via the `./interactive` subpath export so that static/server
+ * consumers of the package root never pull `@xyflow/react`.
+ *
+ * Peer dependency: `@xyflow/react` (>=12). Consumers must also import the
+ * stylesheet once at the app level: `import '@xyflow/react/dist/style.css'`.
+ *
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectionQuadrant = exports.MedicineWheelNode = exports.MedicineWheelFlowGraph = void 0;
+var MedicineWheelFlowGraph_js_1 = require("./MedicineWheelFlowGraph.js");
+Object.defineProperty(exports, "MedicineWheelFlowGraph", { enumerable: true, get: function () { return MedicineWheelFlowGraph_js_1.MedicineWheelFlowGraph; } });
+var MedicineWheelNode_js_1 = require("./MedicineWheelNode.js");
+Object.defineProperty(exports, "MedicineWheelNode", { enumerable: true, get: function () { return MedicineWheelNode_js_1.MedicineWheelNode; } });
+var DirectionQuadrant_js_1 = require("./DirectionQuadrant.js");
+Object.defineProperty(exports, "DirectionQuadrant", { enumerable: true, get: function () { return DirectionQuadrant_js_1.DirectionQuadrant; } });
+//# sourceMappingURL=index.js.map

package/dist/interactive/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/interactive/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;;;AAEH,yEAGqC;AAFnC,mIAAA,sBAAsB,OAAA;AAIxB,+DAGgC;AAF9B,yHAAA,iBAAiB,OAAA;AAInB,+DAGgC;AAF9B,yHAAA,iBAAiB,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medicine-wheel/graph-viz",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Medicine Wheel graph visualization — circular layout with four-direction node positioning, ceremony-aware edges, and OCAP® indicators",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,6 +10,12 @@
       "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./interactive": {
+      "import": "./dist/interactive/index.js",
+      "types": "./dist/interactive/index.d.ts",
+      "require": "./dist/interactive/index.js",
+      "default": "./dist/interactive/index.js"
     }
   },
   "sideEffects": false,
@@ -36,16 +42,23 @@
   "author": "IAIP Collaborative - Shawinigan, QC",
   "license": "MIT",
   "dependencies": {
-    "@medicine-wheel/ontology-core": "^0.3.0"
+    "@medicine-wheel/ontology-core": "^0.4.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "@xyflow/react": ">=12.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@xyflow/react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/node": "^20.10.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@xyflow/react": "^12.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.3.0"