@biki-dev/okve 0.1.0

package/dist/components/KnowledgeGraph/KnowledgeGraph.d.ts

@@ -0,0 +1,2 @@
+import { KnowledgeGraphProps } from '../../types';
+export declare function KnowledgeGraph({ data, width, height, onNodeClick, onEdgeClick, }: KnowledgeGraphProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/KnowledgeGraph/index.d.ts

@@ -0,0 +1 @@
+export { KnowledgeGraph } from './KnowledgeGraph';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { KnowledgeGraph } from './components/KnowledgeGraph';
+export type { GraphData, GraphEdge, GraphNode, KnowledgeGraphProps } from './types';

package/dist/okve.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let l=require(`react`),u=require(`d3`);u=c(u);function d(e,t,n){let r=Math.max(e.length,1),i=Math.max(Math.min(t,n)*.28,120),a=t/2,o=n/2;return e.map((e,t)=>{let n=t/r*Math.PI*2-Math.PI/2;return{...e,x:a+Math.cos(n)*i,y:o+Math.sin(n)*i,vx:0,vy:0}})}function f(e,t){let n=new Set,r=new Set;return t?(n.add(t),e.edges.forEach(e=>{(e.source===t||e.target===t)&&(r.add(e.id),n.add(e.source),n.add(e.target))}),{highlightedNodeIds:n,highlightedEdgeIds:r}):(e.nodes.forEach(e=>n.add(e.id)),e.edges.forEach(e=>r.add(e.id)),{highlightedNodeIds:n,highlightedEdgeIds:r})}var p=o((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),m=o((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,`key`,{get:n,configurable:!0})}function l(){var e=t(this.type);return P[e]||(P[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,`ref`,{enumerable:!1,value:null}):Object.defineProperty(e,`ref`,{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,`validated`,{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,`_debugInfo`,{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,`_debugStack`,{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,`_debugTask`,{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`);else f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require(`react`),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),h=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=p():t.exports=m()}))(),g=960,_=640,v=18,y=`okve-arrowhead`;function b(e){let[t,n]=(0,l.useState)({width:g,height:_});return(0,l.useEffect)(()=>{let t=e.current;if(!t)return;let r=()=>{let{width:e,height:r}=t.getBoundingClientRect();n({width:e||g,height:r||_})};r();let i=new ResizeObserver(()=>{r()});return i.observe(t),()=>{i.disconnect()}},[e]),t}function x(e,t){(0,l.useEffect)(()=>{let n=e.current,r=t.current;if(!n||!r)return;let i=u.zoom().scaleExtent([.5,4]).on(`zoom`,e=>{u.select(r).attr(`transform`,e.transform.toString())}),a=u.select(n);return a.call(i),()=>{a.on(`.zoom`,null)}},[t,e])}function S(e,t,n){let[r,i]=(0,l.useState)({nodes:[],edges:[]});return(0,l.useEffect)(()=>{if(e.nodes.length===0){i({nodes:[],edges:[]});return}let r=d(e.nodes,t,n).map(e=>({...e})),a=e.edges.map(e=>({...e})),o=u.forceSimulation(r).force(`link`,u.forceLink(a).id(e=>e.id).distance(e=>e.weight?Math.max(100,180-e.weight*16):170).strength(.2)).force(`charge`,u.forceManyBody().strength(-360)).force(`center`,u.forceCenter(t/2,n/2)).force(`collision`,u.forceCollide(v*2.2)),s=()=>{i({nodes:r.map(e=>({...e})),edges:a.map(e=>({...e}))})};return o.on(`tick`,s),s(),()=>{o.stop()}},[e,n,t]),r}function C(...e){return e.filter(Boolean).join(` `)}function w({data:e,width:t=`100%`,height:n=640,onNodeClick:r,onEdgeClick:i}){let a=(0,l.useRef)(null),o=(0,l.useRef)(null),s=(0,l.useRef)(null),[c,u]=(0,l.useState)(null),{width:d,height:p}=b(a),m=S(e,d,p),g=(0,l.useMemo)(()=>f(e,c),[e,c]),_=(0,l.useMemo)(()=>new Map(e.nodes.map(e=>[e.id,e])),[e.nodes]),w=(0,l.useMemo)(()=>new Map(e.edges.map(e=>[e.id,e])),[e.edges]);return x(o,s),(0,h.jsx)(`div`,{ref:a,className:`okve-graph`,style:{width:t,height:n},children:(0,h.jsxs)(`svg`,{ref:o,className:`okve-graph__svg`,width:`100%`,height:`100%`,viewBox:`0 0 ${d} ${p}`,preserveAspectRatio:`xMidYMid meet`,role:`img`,"aria-label":`Interactive knowledge graph`,children:[(0,h.jsx)(`defs`,{children:(0,h.jsx)(`marker`,{id:y,markerWidth:`10`,markerHeight:`10`,refX:`8`,refY:`5`,orient:`auto`,markerUnits:`strokeWidth`,children:(0,h.jsx)(`path`,{d:`M 0 0 L 10 5 L 0 10 z`})})}),(0,h.jsxs)(`g`,{ref:s,className:`okve-graph__content`,children:[m.edges.map(e=>{let t=typeof e.source==`string`?e.source:e.source.id,n=typeof e.target==`string`?e.target:e.target.id,r=m.nodes.find(e=>e.id===t),a=m.nodes.find(e=>e.id===n);if(!r||!a)return null;let o=c?g.highlightedEdgeIds.has(e.id):!0;return(0,h.jsx)(`line`,{className:C(`okve-edge`,o&&`okve-edge--highlighted`,(c?!o:!1)&&`okve-edge--dimmed`),x1:r.x??0,y1:r.y??0,x2:a.x??0,y2:a.y??0,strokeWidth:e.weight?1.5+Math.min(e.weight,4)*.75:1.5,markerEnd:e.directed?`url(#${y})`:void 0,onClick:()=>{i?.(w.get(e.id)??e)}},e.id)}),m.nodes.map(e=>{let t=_.get(e.id)??e,n=c?g.highlightedNodeIds.has(e.id):!0,i=c?!n:!1;return(0,h.jsxs)(`g`,{className:C(`okve-node-group`,i&&`okve-node-group--dimmed`),transform:`translate(${e.x??0}, ${e.y??0})`,onMouseEnter:()=>{u(e.id)},onMouseLeave:()=>{u(null)},onClick:()=>{r?.(t)},children:[(0,h.jsx)(`circle`,{r:v,className:C(`okve-node`,c===e.id&&`okve-node--hovered`,i&&`okve-node--dimmed`)}),(0,h.jsx)(`text`,{className:C(`okve-label`,c===e.id&&`okve-label--hovered`,i&&`okve-label--dimmed`),x:v+10,y:0,dominantBaseline:`middle`,children:t.label}),(0,h.jsx)(`title`,{children:t.label})]},e.id)})]})]})})}exports.KnowledgeGraph=w;

package/dist/okve.css

@@ -0,0 +1,2 @@
+.okve-graph{color:#e2e8f0;background:radial-gradient(circle at top,#4f8ef738,#0000 36%),linear-gradient(#0f1117 0%,#0b0d12 100%);border-radius:16px;position:relative;overflow:hidden;box-shadow:0 24px 80px #01040c73}.okve-graph__svg{display:block}.okve-graph__content{cursor:grab}.okve-graph__content:active{cursor:grabbing}.okve-edge{stroke:var(--okve-edge-color,#4a5568);stroke-linecap:round;opacity:.85;transition:stroke .16s,opacity .16s}.okve-edge--highlighted{stroke:var(--okve-edge-highlight-color,#f7c94f);opacity:1}.okve-edge--dimmed{opacity:.12}.okve-node{fill:var(--okve-node-color,#4f8ef7);stroke:#ffffff1a;stroke-width:1px;cursor:pointer;transition:fill .16s,transform .16s,opacity .16s}.okve-node--hovered{fill:var(--okve-node-hover-color,#f7c94f)}.okve-node--dimmed{opacity:.15}.okve-label{fill:#e2e8f0;letter-spacing:.01em;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:600}.okve-label--hovered{fill:#fff2bf}.okve-label--dimmed{opacity:.2}.okve-node-group{transition:opacity .16s}.okve-node-group--dimmed{opacity:.15}
+/*$vite$:1*/

package/dist/okve.js

@@ -0,0 +1,361 @@
+import { useEffect as e, useMemo as t, useRef as n, useState as r } from "react";
+import * as i from "d3";
+//#region \0rolldown/runtime.js
+var a = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), o = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+});
+//#endregion
+//#region src/utils/graphLayout.ts
+function s(e, t, n) {
+	let r = Math.max(e.length, 1), i = Math.max(Math.min(t, n) * .28, 120), a = t / 2, o = n / 2;
+	return e.map((e, t) => {
+		let n = t / r * Math.PI * 2 - Math.PI / 2;
+		return {
+			...e,
+			x: a + Math.cos(n) * i,
+			y: o + Math.sin(n) * i,
+			vx: 0,
+			vy: 0
+		};
+	});
+}
+function c(e, t) {
+	let n = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set();
+	return t ? (n.add(t), e.edges.forEach((e) => {
+		(e.source === t || e.target === t) && (r.add(e.id), n.add(e.source), n.add(e.target));
+	}), {
+		highlightedNodeIds: n,
+		highlightedEdgeIds: r
+	}) : (e.nodes.forEach((e) => n.add(e.id)), e.edges.forEach((e) => r.add(e.id)), {
+		highlightedNodeIds: n,
+		highlightedEdgeIds: r
+	});
+}
+//#endregion
+//#region ../../node_modules/react/cjs/react-jsx-runtime.production.js
+var l = /* @__PURE__ */ a(((e) => {
+	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+	function r(e, n, r) {
+		var i = null;
+		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
+		else r = n;
+		return n = r.ref, {
+			$$typeof: t,
+			type: e,
+			key: i,
+			ref: n === void 0 ? null : n,
+			props: r
+		};
+	}
+	e.Fragment = n, e.jsx = r, e.jsxs = r;
+})), u = /* @__PURE__ */ a(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		function t(e) {
+			if (e == null) return null;
+			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
+			if (typeof e == "string") return e;
+			switch (e) {
+				case v: return "Fragment";
+				case b: return "Profiler";
+				case y: return "StrictMode";
+				case w: return "Suspense";
+				case T: return "SuspenseList";
+				case O: return "Activity";
+			}
+			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
+				case _: return "Portal";
+				case S: return e.displayName || "Context";
+				case x: return (e._context.displayName || "Context") + ".Consumer";
+				case C:
+					var n = e.render;
+					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
+				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
+				case D:
+					n = e._payload, e = e._init;
+					try {
+						return t(e(n));
+					} catch {}
+			}
+			return null;
+		}
+		function n(e) {
+			return "" + e;
+		}
+		function r(e) {
+			try {
+				n(e);
+				var t = !1;
+			} catch {
+				t = !0;
+			}
+			if (t) {
+				t = console;
+				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
+			}
+		}
+		function i(e) {
+			if (e === v) return "<>";
+			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
+			try {
+				var n = t(e);
+				return n ? "<" + n + ">" : "<...>";
+			} catch {
+				return "<...>";
+			}
+		}
+		function a() {
+			var e = A.A;
+			return e === null ? null : e.getOwner();
+		}
+		function s() {
+			return Error("react-stack-top-frame");
+		}
+		function c(e) {
+			if (j.call(e, "key")) {
+				var t = Object.getOwnPropertyDescriptor(e, "key").get;
+				if (t && t.isReactWarning) return !1;
+			}
+			return e.key !== void 0;
+		}
+		function l(e, t) {
+			function n() {
+				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+			}
+			n.isReactWarning = !0, Object.defineProperty(e, "key", {
+				get: n,
+				configurable: !0
+			});
+		}
+		function u() {
+			var e = t(this.type);
+			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+		}
+		function d(e, t, n, r, i, a) {
+			var o = n.ref;
+			return e = {
+				$$typeof: g,
+				type: e,
+				key: t,
+				props: n,
+				_owner: r
+			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				value: null
+			}) : Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				get: u
+			}), e._store = {}, Object.defineProperty(e._store, "validated", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: 0
+			}), Object.defineProperty(e, "_debugInfo", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: null
+			}), Object.defineProperty(e, "_debugStack", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: i
+			}), Object.defineProperty(e, "_debugTask", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: a
+			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+		}
+		function f(e, n, i, o, s, u) {
+			var f = n.children;
+			if (f !== void 0) if (o) if (M(f)) {
+				for (o = 0; o < f.length; o++) p(f[o]);
+				Object.freeze && Object.freeze(f);
+			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+			else p(f);
+			if (j.call(n, "key")) {
+				f = t(e);
+				var m = Object.keys(n).filter(function(e) {
+					return e !== "key";
+				});
+				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, f, m, f), R[f + o] = !0);
+			}
+			if (f = null, i !== void 0 && (r(i), f = "" + i), c(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
+			else i = n;
+			return f && l(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, a(), s, u);
+		}
+		function p(e) {
+			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+		}
+		function m(e) {
+			return typeof e == "object" && !!e && e.$$typeof === g;
+		}
+		var h = o("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		h = { react_stack_bottom_frame: function(e) {
+			return e();
+		} };
+		var P, F = {}, I = h.react_stack_bottom_frame.bind(h, s)(), L = N(i(s)), R = {};
+		e.Fragment = v, e.jsx = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
+		}, e.jsxs = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
+		};
+	})();
+})), d = (/* @__PURE__ */ a(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = l() : t.exports = u();
+})))(), f = 960, p = 640, m = 18, h = "okve-arrowhead";
+function g(t) {
+	let [n, i] = r({
+		width: f,
+		height: p
+	});
+	return e(() => {
+		let e = t.current;
+		if (!e) return;
+		let n = () => {
+			let { width: t, height: n } = e.getBoundingClientRect();
+			i({
+				width: t || f,
+				height: n || p
+			});
+		};
+		n();
+		let r = new ResizeObserver(() => {
+			n();
+		});
+		return r.observe(e), () => {
+			r.disconnect();
+		};
+	}, [t]), n;
+}
+function _(t, n) {
+	e(() => {
+		let e = t.current, r = n.current;
+		if (!e || !r) return;
+		let a = i.zoom().scaleExtent([.5, 4]).on("zoom", (e) => {
+			i.select(r).attr("transform", e.transform.toString());
+		}), o = i.select(e);
+		return o.call(a), () => {
+			o.on(".zoom", null);
+		};
+	}, [n, t]);
+}
+function v(t, n, a) {
+	let [o, c] = r({
+		nodes: [],
+		edges: []
+	});
+	return e(() => {
+		if (t.nodes.length === 0) {
+			c({
+				nodes: [],
+				edges: []
+			});
+			return;
+		}
+		let e = s(t.nodes, n, a).map((e) => ({ ...e })), r = t.edges.map((e) => ({ ...e })), o = i.forceSimulation(e).force("link", i.forceLink(r).id((e) => e.id).distance((e) => e.weight ? Math.max(100, 180 - e.weight * 16) : 170).strength(.2)).force("charge", i.forceManyBody().strength(-360)).force("center", i.forceCenter(n / 2, a / 2)).force("collision", i.forceCollide(m * 2.2)), l = () => {
+			c({
+				nodes: e.map((e) => ({ ...e })),
+				edges: r.map((e) => ({ ...e }))
+			});
+		};
+		return o.on("tick", l), l(), () => {
+			o.stop();
+		};
+	}, [
+		t,
+		a,
+		n
+	]), o;
+}
+function y(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function b({ data: e, width: i = "100%", height: a = 640, onNodeClick: o, onEdgeClick: s }) {
+	let l = n(null), u = n(null), f = n(null), [p, b] = r(null), { width: x, height: S } = g(l), C = v(e, x, S), w = t(() => c(e, p), [e, p]), T = t(() => new Map(e.nodes.map((e) => [e.id, e])), [e.nodes]), E = t(() => new Map(e.edges.map((e) => [e.id, e])), [e.edges]);
+	return _(u, f), /* @__PURE__ */ (0, d.jsx)("div", {
+		ref: l,
+		className: "okve-graph",
+		style: {
+			width: i,
+			height: a
+		},
+		children: /* @__PURE__ */ (0, d.jsxs)("svg", {
+			ref: u,
+			className: "okve-graph__svg",
+			width: "100%",
+			height: "100%",
+			viewBox: `0 0 ${x} ${S}`,
+			preserveAspectRatio: "xMidYMid meet",
+			role: "img",
+			"aria-label": "Interactive knowledge graph",
+			children: [/* @__PURE__ */ (0, d.jsx)("defs", { children: /* @__PURE__ */ (0, d.jsx)("marker", {
+				id: h,
+				markerWidth: "10",
+				markerHeight: "10",
+				refX: "8",
+				refY: "5",
+				orient: "auto",
+				markerUnits: "strokeWidth",
+				children: /* @__PURE__ */ (0, d.jsx)("path", { d: "M 0 0 L 10 5 L 0 10 z" })
+			}) }), /* @__PURE__ */ (0, d.jsxs)("g", {
+				ref: f,
+				className: "okve-graph__content",
+				children: [C.edges.map((e) => {
+					let t = typeof e.source == "string" ? e.source : e.source.id, n = typeof e.target == "string" ? e.target : e.target.id, r = C.nodes.find((e) => e.id === t), i = C.nodes.find((e) => e.id === n);
+					if (!r || !i) return null;
+					let a = p ? w.highlightedEdgeIds.has(e.id) : !0;
+					return /* @__PURE__ */ (0, d.jsx)("line", {
+						className: y("okve-edge", a && "okve-edge--highlighted", (p ? !a : !1) && "okve-edge--dimmed"),
+						x1: r.x ?? 0,
+						y1: r.y ?? 0,
+						x2: i.x ?? 0,
+						y2: i.y ?? 0,
+						strokeWidth: e.weight ? 1.5 + Math.min(e.weight, 4) * .75 : 1.5,
+						markerEnd: e.directed ? `url(#${h})` : void 0,
+						onClick: () => {
+							s?.(E.get(e.id) ?? e);
+						}
+					}, e.id);
+				}), C.nodes.map((e) => {
+					let t = T.get(e.id) ?? e, n = p ? w.highlightedNodeIds.has(e.id) : !0, r = p ? !n : !1;
+					return /* @__PURE__ */ (0, d.jsxs)("g", {
+						className: y("okve-node-group", r && "okve-node-group--dimmed"),
+						transform: `translate(${e.x ?? 0}, ${e.y ?? 0})`,
+						onMouseEnter: () => {
+							b(e.id);
+						},
+						onMouseLeave: () => {
+							b(null);
+						},
+						onClick: () => {
+							o?.(t);
+						},
+						children: [
+							/* @__PURE__ */ (0, d.jsx)("circle", {
+								r: m,
+								className: y("okve-node", p === e.id && "okve-node--hovered", r && "okve-node--dimmed")
+							}),
+							/* @__PURE__ */ (0, d.jsx)("text", {
+								className: y("okve-label", p === e.id && "okve-label--hovered", r && "okve-label--dimmed"),
+								x: m + 10,
+								y: 0,
+								dominantBaseline: "middle",
+								children: t.label
+							}),
+							/* @__PURE__ */ (0, d.jsx)("title", { children: t.label })
+						]
+					}, e.id);
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { b as KnowledgeGraph };

package/dist/types/index.d.ts

@@ -0,0 +1,24 @@
+export interface GraphNode {
+    id: string;
+    label: string;
+    group?: string;
+    metadata?: Record<string, unknown>;
+}
+export interface GraphEdge {
+    id: string;
+    source: string;
+    target: string;
+    directed?: boolean;
+    weight?: number;
+}
+export interface GraphData {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+}
+export interface KnowledgeGraphProps {
+    data: GraphData;
+    width?: number | string;
+    height?: number | string;
+    onNodeClick?: (node: GraphNode) => void;
+    onEdgeClick?: (edge: GraphEdge) => void;
+}

package/dist/utils/graphLayout.d.ts

@@ -0,0 +1,9 @@
+import { SimulationNodeDatum } from 'd3';
+import { GraphData, GraphNode } from '../types';
+export type PositionedGraphNode = GraphNode & SimulationNodeDatum;
+export interface HighlightState {
+    highlightedNodeIds: Set<string>;
+    highlightedEdgeIds: Set<string>;
+}
+export declare function seedNodePositions(nodes: GraphNode[], width: number, height: number): PositionedGraphNode[];
+export declare function buildHighlightState(data: GraphData, hoveredNodeId: string | null): HighlightState;

package/package.json

@@ -0,0 +1,42 @@
+{
+	"name": "@biki-dev/okve",
+	"version": "0.1.0",
+	"private": false,
+	"type": "module",
+	"description": "Open Knowledge Visualization Engine, a reusable React knowledge graph component.",
+	"main": "./dist/okve.cjs",
+	"module": "./dist/okve.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/okve.js",
+			"require": "./dist/okve.cjs"
+		}
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": ["dist"],
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite",
+		"prepublishOnly": "npm run build"
+	},
+	"dependencies": {
+		"d3": "^7.9.0"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"devDependencies": {
+		"@types/d3": "^7.4.3",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
+		"@vitejs/plugin-react": "^6.0.1",
+		"typescript": "^5.9.3",
+		"vite": "^8.0.1",
+		"vite-plugin-dts": "^4.5.4"
+	}
+}