@bruno00o/graph 0.1.0 → 0.3.0

package/dist/{mount-graph-B88WGOQu.d.ts → mount-graph-DQLST9-_.d.ts}

@@ -1,4 +1,4 @@
-import { O as Point, _ as Key, f as FreeState, m as GraphDefinition, z as View } from "./types-D6b86Rt1.js";
+import { B as View, _ as Key, f as FreeState, k as Point, m as GraphDefinition } from "./types-BaflHDaf.js";
 import { ReadonlyStore } from "@tanstack/store";
 interface Endpoints {
   readonly source: Key;
@@ -40,6 +40,9 @@ interface GraphDragEvent {
   readonly world: Point;
   readonly originalEvent: PointerEvent;
 }
+interface GraphFocusEvent {
+  readonly target: GraphTarget | null;
+}
 type PositionOrigin = "drag" | "api";
 interface GraphPositionEvent {
   readonly origin: PositionOrigin;
@@ -56,6 +59,7 @@ interface GraphEvents {
   readonly dragend: GraphDragEvent;
   readonly positionchange: GraphPositionEvent;
   readonly selectionchange: ElementKeys;
+  readonly focuschange: GraphFocusEvent;
   readonly viewchange: {
     readonly view: View;
   };
@@ -67,6 +71,7 @@ interface GraphState<S extends string = string> {
   readonly width: number;
   readonly height: number;
   readonly hovered: GraphTarget | null;
+  readonly focused: GraphTarget | null;
   readonly selection: ElementKeys;
   readonly states: { readonly [K in FreeState<S>]: ElementKeys; };
   readonly positionsVersion: number;
@@ -95,6 +100,10 @@ interface GraphSelection {
   set(keys: ElementKeysInput): void;
   clear(): void;
 }
+interface GraphFocus {
+  get(): GraphTarget | null;
+  set(element: GraphElement | null): void;
+}
 interface GraphStates<N extends string = string> {
   set(name: N, keys: ElementKeysInput): void;
   add(name: N, keys: ElementKeysInput): void;
@@ -117,6 +126,7 @@ interface GraphInstance<S extends string = string> {
   readonly store: GraphStore<S>;
   readonly view: GraphView;
   readonly selection: GraphSelection;
+  readonly focus: GraphFocus;
   readonly states: GraphStates<FreeState<S>>;
   readonly positions: GraphPositions;
   readonly element: HTMLElement;
@@ -129,5 +139,5 @@ interface GraphInstance<S extends string = string> {
   destroy(): void;
 }
 declare function mountGraph<S extends string = string>(container: HTMLElement, options: MountGraphOptions<S>): GraphInstance<S>;
-export { PositionOrigin as C, GraphTargetEvent as S, GraphEventName as _, GraphSelection as a, GraphPositionEvent as b, GraphStore as c, ViewOptions as d, mountGraph as f, GraphEventHandler as g, GraphDragEvent as h, GraphPositions as i, GraphView as l, ElementKeysInput as m, GraphElement as n, GraphState as o, ElementKeys as p, GraphInstance as r, GraphStates as s, FitOptions as t, MountGraphOptions as u, GraphEvents as v, GraphTarget as x, GraphPointerEvent as y };
-//# sourceMappingURL=mount-graph-B88WGOQu.d.ts.map
+export { GraphTarget as C, GraphPositionEvent as S, PositionOrigin as T, GraphEventHandler as _, GraphPositions as a, GraphFocusEvent as b, GraphStates as c, MountGraphOptions as d, ViewOptions as f, GraphDragEvent as g, ElementKeysInput as h, GraphInstance as i, GraphStore as l, ElementKeys as m, GraphElement as n, GraphSelection as o, mountGraph as p, GraphFocus as r, GraphState as s, FitOptions as t, GraphView as u, GraphEventName as v, GraphTargetEvent as w, GraphPointerEvent as x, GraphEvents as y };
+//# sourceMappingURL=mount-graph-DQLST9-_.d.ts.map

package/dist/query.d.ts

@@ -1,4 +1,4 @@
-import { _ as Key, x as LiveSource } from "./types-D6b86Rt1.js";
+import { _ as Key, x as LiveSource } from "./types-BaflHDaf.js";
 import { ReadonlyStore } from "@tanstack/store";
 import { DefaultError, QueryClient, QueryKey, QueryObserverOptions } from "@tanstack/query-core";
 export interface ExplorationData<TNode, TEdge> {

package/dist/react.d.ts

@@ -1,5 +1,5 @@
-import { _ as GraphEventName, c as GraphStore, g as GraphEventHandler, m as ElementKeysInput, o as GraphState, r as GraphInstance } from "./mount-graph-B88WGOQu.js";
-import { m as GraphDefinition, z as View } from "./types-D6b86Rt1.js";
+import { _ as GraphEventHandler, h as ElementKeysInput, i as GraphInstance, l as GraphStore, s as GraphState, v as GraphEventName } from "./mount-graph-DQLST9-_.js";
+import { B as View, m as GraphDefinition } from "./types-BaflHDaf.js";
 import { CSSProperties, JSX, ReactNode, Ref } from "react";
 export interface GraphEventProps {
   readonly onClick?: GraphEventHandler<"click">;
@@ -12,6 +12,7 @@ export interface GraphEventProps {
   readonly onDragEnd?: GraphEventHandler<"dragend">;
   readonly onPositionChange?: GraphEventHandler<"positionchange">;
   readonly onSelectionChange?: GraphEventHandler<"selectionchange">;
+  readonly onFocusChange?: GraphEventHandler<"focuschange">;
   readonly onViewChange?: GraphEventHandler<"viewchange">;
 }
 export interface GraphProps<S extends string = string> extends GraphEventProps {

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as mountGraph } from "./mount-graph-BHwq3LOr.js";
+import { t as mountGraph } from "./mount-graph-CzVfiIte.js";
 import { createContext, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/react/index.tsx
@@ -13,6 +13,7 @@ const eventProps = {
 	dragend: "onDragEnd",
 	positionchange: "onPositionChange",
 	selectionchange: "onSelectionChange",
+	focuschange: "onFocusChange",
 	viewchange: "onViewChange"
 };
 const GraphContext = createContext(null);

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","names":[],"sources":["../src/react/index.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  createContext,\n  type JSX,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport type {\n  ElementKeysInput,\n  GraphEventHandler,\n  GraphEventName,\n  GraphEvents,\n} from '../host/events'\nimport {\n  type GraphInstance,\n  type GraphState,\n  type GraphStore,\n  mountGraph,\n} from '../host/mount-graph'\nimport type { GraphDefinition, View } from '../types'\n\nexport interface GraphEventProps {\n  readonly onClick?: GraphEventHandler<'click'>\n  readonly onDoubleClick?: GraphEventHandler<'doubleclick'>\n  readonly onContextMenu?: GraphEventHandler<'contextmenu'>\n  readonly onPointerEnter?: GraphEventHandler<'pointerenter'>\n  readonly onPointerLeave?: GraphEventHandler<'pointerleave'>\n  readonly onDragStart?: GraphEventHandler<'dragstart'>\n  readonly onDrag?: GraphEventHandler<'drag'>\n  readonly onDragEnd?: GraphEventHandler<'dragend'>\n  readonly onPositionChange?: GraphEventHandler<'positionchange'>\n  readonly onSelectionChange?: GraphEventHandler<'selectionchange'>\n  readonly onViewChange?: GraphEventHandler<'viewchange'>\n}\n\nconst eventProps: Readonly<Record<GraphEventName, keyof GraphEventProps>> = {\n  click: 'onClick',\n  doubleclick: 'onDoubleClick',\n  contextmenu: 'onContextMenu',\n  pointerenter: 'onPointerEnter',\n  pointerleave: 'onPointerLeave',\n  dragstart: 'onDragStart',\n  drag: 'onDrag',\n  dragend: 'onDragEnd',\n  positionchange: 'onPositionChange',\n  selectionchange: 'onSelectionChange',\n  viewchange: 'onViewChange',\n}\n\nexport interface GraphProps<S extends string = string> extends GraphEventProps {\n  readonly definition: GraphDefinition<S>\n  readonly ariaLabel: string\n  readonly initialView?: View\n  readonly selection?: ElementKeysInput\n  readonly className?: string\n  readonly style?: CSSProperties\n  readonly ref?: Ref<GraphInstance<S> | null>\n  readonly children?: ReactNode\n}\n\nconst GraphContext = createContext<GraphInstance | null>(null)\n\nconst fill: CSSProperties = { position: 'absolute', inset: 0 }\n\nfunction useLatest<T>(value: T): { readonly current: T } {\n  const latest = useRef(value)\n  useLayoutEffect(() => {\n    latest.current = value\n  })\n  return latest\n}\n\nexport function Graph<S extends string = string>(props: GraphProps<S>): JSX.Element {\n  const { definition, ariaLabel, selection, className, style, ref, children } = props\n  const host = useRef<HTMLDivElement>(null)\n  const [graph, setGraph] = useState<GraphInstance<S> | null>(null)\n  const latest = useLatest(props)\n\n  useLayoutEffect(() => {\n    const element = host.current\n    if (!element) return\n    const initial = latest.current\n    const instance = mountGraph(element, {\n      definition: initial.definition,\n      ariaLabel: initial.ariaLabel,\n      ...(initial.initialView ? { initialView: initial.initialView } : {}),\n      ...(initial.selection !== undefined\n        ? {\n            selection: initial.selection,\n            onSelectionChange: (next) => latest.current.onSelectionChange?.(next),\n          }\n        : {}),\n    })\n    setGraph(instance)\n    return () => {\n      instance.destroy()\n      setGraph(null)\n    }\n  }, [latest])\n\n  useLayoutEffect(() => {\n    graph?.update({ definition, ariaLabel, ...(selection !== undefined ? { selection } : {}) })\n  }, [graph, definition, ariaLabel, selection])\n\n  useEffect(() => {\n    if (!graph) return\n    const stops = (Object.keys(eventProps) as GraphEventName[]).map((name) =>\n      graph.on(name, (event) => {\n        if (name === 'selectionchange' && latest.current.selection !== undefined) return\n        const handler = latest.current[eventProps[name]] as ((event: unknown) => void) | undefined\n        handler?.(event)\n      }),\n    )\n    return () => {\n      for (const stop of stops) stop()\n    }\n  }, [graph, latest])\n\n  useImperativeHandle<GraphInstance<S> | null, GraphInstance<S> | null>(ref, () => graph, [graph])\n\n  return (\n    <div className={className} style={{ position: 'relative', ...style }}>\n      <div ref={host} style={fill} />\n      {graph ? <GraphContext value={graph}>{children}</GraphContext> : null}\n    </div>\n  )\n}\n\nexport function useGraph(): GraphInstance {\n  const graph = useContext(GraphContext)\n  if (!graph) throw new Error('useGraph: call it inside <Graph>')\n  return graph\n}\n\ninterface Selected<T> {\n  readonly state: GraphState\n  readonly selector: (state: GraphState) => T\n  readonly value: T\n}\n\nexport interface UseGraphStateOptions<T> {\n  readonly compare?: (a: T, b: T) => boolean\n}\n\nexport function useGraphState<T>(\n  selector: (state: GraphState) => T,\n  options: UseGraphStateOptions<T> = {},\n): T {\n  const compare = options.compare ?? Object.is\n  const graph = useGraph()\n  const cache = useRef<Selected<T> | null>(null)\n  const subscribe = useCallback(\n    (notify: () => void) => {\n      const subscription = graph.store.subscribe(() => notify())\n      return () => subscription.unsubscribe()\n    },\n    [graph],\n  )\n  const snapshot = (): T => {\n    const state = graph.store.get()\n    const cached = cache.current\n    if (cached && cached.state === state && cached.selector === selector) return cached.value\n    const value = selector(state)\n    const kept = cached && compare(cached.value, value) ? cached.value : value\n    cache.current = { state, selector, value: kept }\n    return kept\n  }\n  return useSyncExternalStore(subscribe, snapshot, snapshot)\n}\n\nexport function useGraphEvent<K extends GraphEventName>(\n  name: K,\n  handler: GraphEventHandler<K>,\n): void {\n  const graph = useGraph()\n  const latest = useLatest(handler)\n  useEffect(\n    () => graph.on(name, (event: GraphEvents[K]) => latest.current(event)),\n    [graph, name, latest],\n  )\n}\n\nexport type { GraphInstance, GraphState, GraphStore }\n"],"mappings":";;;;AA2CA,MAAM,aAAsE;CAC1E,OAAO;CACP,aAAa;CACb,aAAa;CACb,cAAc;CACd,cAAc;CACd,WAAW;CACX,MAAM;CACN,SAAS;CACT,gBAAgB;CAChB,iBAAiB;CACjB,YAAY;AACd;AAaA,MAAM,eAAe,cAAoC,IAAI;AAE7D,MAAM,OAAsB;CAAE,UAAU;CAAY,OAAO;AAAE;AAE7D,SAAS,UAAa,OAAmC;CACvD,MAAM,SAAS,OAAO,KAAK;CAC3B,sBAAsB;EACpB,OAAO,UAAU;CACnB,CAAC;CACD,OAAO;AACT;AAEA,SAAgB,MAAiC,OAAmC;CAClF,MAAM,EAAE,YAAY,WAAW,WAAW,WAAW,OAAO,KAAK,aAAa;CAC9E,MAAM,OAAO,OAAuB,IAAI;CACxC,MAAM,CAAC,OAAO,YAAY,SAAkC,IAAI;CAChE,MAAM,SAAS,UAAU,KAAK;CAE9B,sBAAsB;EACpB,MAAM,UAAU,KAAK;EACrB,IAAI,CAAC,SAAS;EACd,MAAM,UAAU,OAAO;EACvB,MAAM,WAAW,WAAW,SAAS;GACnC,YAAY,QAAQ;GACpB,WAAW,QAAQ;GACnB,GAAI,QAAQ,cAAc,EAAE,aAAa,QAAQ,YAAY,IAAI,CAAC;GAClE,GAAI,QAAQ,cAAc,KAAA,IACtB;IACE,WAAW,QAAQ;IACnB,oBAAoB,SAAS,OAAO,QAAQ,oBAAoB,IAAI;GACtE,IACA,CAAC;EACP,CAAC;EACD,SAAS,QAAQ;EACjB,aAAa;GACX,SAAS,QAAQ;GACjB,SAAS,IAAI;EACf;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,sBAAsB;EACpB,OAAO,OAAO;GAAE;GAAY;GAAW,GAAI,cAAc,KAAA,IAAY,EAAE,UAAU,IAAI,CAAC;EAAG,CAAC;CAC5F,GAAG;EAAC;EAAO;EAAY;EAAW;CAAS,CAAC;CAE5C,gBAAgB;EACd,IAAI,CAAC,OAAO;EACZ,MAAM,QAAS,OAAO,KAAK,UAAU,CAAC,CAAsB,KAAK,SAC/D,MAAM,GAAG,OAAO,UAAU;GACxB,IAAI,SAAS,qBAAqB,OAAO,QAAQ,cAAc,KAAA,GAAW;GAC1E,MAAM,UAAU,OAAO,QAAQ,WAAW;GAC1C,UAAU,KAAK;EACjB,CAAC,CACH;EACA,aAAa;GACX,KAAK,MAAM,QAAQ,OAAO,KAAK;EACjC;CACF,GAAG,CAAC,OAAO,MAAM,CAAC;CAElB,oBAAsE,WAAW,OAAO,CAAC,KAAK,CAAC;CAE/F,OACE,qBAAC,OAAD;EAAgB;EAAW,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EAAnE,UAAA,CACE,oBAAC,OAAD;GAAK,KAAK;GAAM,OAAO;EAAO,CAAA,GAC7B,QAAQ,oBAAC,cAAD;GAAc,OAAO;GAAQ;EAAuB,CAAA,IAAI,IAC9D;;AAET;AAEA,SAAgB,WAA0B;CACxC,MAAM,QAAQ,WAAW,YAAY;CACrC,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,kCAAkC;CAC9D,OAAO;AACT;AAYA,SAAgB,cACd,UACA,UAAmC,CAAC,GACjC;CACH,MAAM,UAAU,QAAQ,WAAW,OAAO;CAC1C,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,OAA2B,IAAI;CAC7C,MAAM,YAAY,aACf,WAAuB;EACtB,MAAM,eAAe,MAAM,MAAM,gBAAgB,OAAO,CAAC;EACzD,aAAa,aAAa,YAAY;CACxC,GACA,CAAC,KAAK,CACR;CACA,MAAM,iBAAoB;EACxB,MAAM,QAAQ,MAAM,MAAM,IAAI;EAC9B,MAAM,SAAS,MAAM;EACrB,IAAI,UAAU,OAAO,UAAU,SAAS,OAAO,aAAa,UAAU,OAAO,OAAO;EACpF,MAAM,QAAQ,SAAS,KAAK;EAC5B,MAAM,OAAO,UAAU,QAAQ,OAAO,OAAO,KAAK,IAAI,OAAO,QAAQ;EACrE,MAAM,UAAU;GAAE;GAAO;GAAU,OAAO;EAAK;EAC/C,OAAO;CACT;CACA,OAAO,qBAAqB,WAAW,UAAU,QAAQ;AAC3D;AAEA,SAAgB,cACd,MACA,SACM;CACN,MAAM,QAAQ,SAAS;CACvB,MAAM,SAAS,UAAU,OAAO;CAChC,gBACQ,MAAM,GAAG,OAAO,UAA0B,OAAO,QAAQ,KAAK,CAAC,GACrE;EAAC;EAAO;EAAM;CAAM,CACtB;AACF"}
+{"version":3,"file":"react.js","names":[],"sources":["../src/react/index.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  createContext,\n  type JSX,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport type {\n  ElementKeysInput,\n  GraphEventHandler,\n  GraphEventName,\n  GraphEvents,\n} from '../host/events'\nimport {\n  type GraphInstance,\n  type GraphState,\n  type GraphStore,\n  mountGraph,\n} from '../host/mount-graph'\nimport type { GraphDefinition, View } from '../types'\n\nexport interface GraphEventProps {\n  readonly onClick?: GraphEventHandler<'click'>\n  readonly onDoubleClick?: GraphEventHandler<'doubleclick'>\n  readonly onContextMenu?: GraphEventHandler<'contextmenu'>\n  readonly onPointerEnter?: GraphEventHandler<'pointerenter'>\n  readonly onPointerLeave?: GraphEventHandler<'pointerleave'>\n  readonly onDragStart?: GraphEventHandler<'dragstart'>\n  readonly onDrag?: GraphEventHandler<'drag'>\n  readonly onDragEnd?: GraphEventHandler<'dragend'>\n  readonly onPositionChange?: GraphEventHandler<'positionchange'>\n  readonly onSelectionChange?: GraphEventHandler<'selectionchange'>\n  readonly onFocusChange?: GraphEventHandler<'focuschange'>\n  readonly onViewChange?: GraphEventHandler<'viewchange'>\n}\n\nconst eventProps: Readonly<Record<GraphEventName, keyof GraphEventProps>> = {\n  click: 'onClick',\n  doubleclick: 'onDoubleClick',\n  contextmenu: 'onContextMenu',\n  pointerenter: 'onPointerEnter',\n  pointerleave: 'onPointerLeave',\n  dragstart: 'onDragStart',\n  drag: 'onDrag',\n  dragend: 'onDragEnd',\n  positionchange: 'onPositionChange',\n  selectionchange: 'onSelectionChange',\n  focuschange: 'onFocusChange',\n  viewchange: 'onViewChange',\n}\n\nexport interface GraphProps<S extends string = string> extends GraphEventProps {\n  readonly definition: GraphDefinition<S>\n  readonly ariaLabel: string\n  readonly initialView?: View\n  readonly selection?: ElementKeysInput\n  readonly className?: string\n  readonly style?: CSSProperties\n  readonly ref?: Ref<GraphInstance<S> | null>\n  readonly children?: ReactNode\n}\n\nconst GraphContext = createContext<GraphInstance | null>(null)\n\nconst fill: CSSProperties = { position: 'absolute', inset: 0 }\n\nfunction useLatest<T>(value: T): { readonly current: T } {\n  const latest = useRef(value)\n  useLayoutEffect(() => {\n    latest.current = value\n  })\n  return latest\n}\n\nexport function Graph<S extends string = string>(props: GraphProps<S>): JSX.Element {\n  const { definition, ariaLabel, selection, className, style, ref, children } = props\n  const host = useRef<HTMLDivElement>(null)\n  const [graph, setGraph] = useState<GraphInstance<S> | null>(null)\n  const latest = useLatest(props)\n\n  useLayoutEffect(() => {\n    const element = host.current\n    if (!element) return\n    const initial = latest.current\n    const instance = mountGraph(element, {\n      definition: initial.definition,\n      ariaLabel: initial.ariaLabel,\n      ...(initial.initialView ? { initialView: initial.initialView } : {}),\n      ...(initial.selection !== undefined\n        ? {\n            selection: initial.selection,\n            onSelectionChange: (next) => latest.current.onSelectionChange?.(next),\n          }\n        : {}),\n    })\n    setGraph(instance)\n    return () => {\n      instance.destroy()\n      setGraph(null)\n    }\n  }, [latest])\n\n  useLayoutEffect(() => {\n    graph?.update({ definition, ariaLabel, ...(selection !== undefined ? { selection } : {}) })\n  }, [graph, definition, ariaLabel, selection])\n\n  useEffect(() => {\n    if (!graph) return\n    const stops = (Object.keys(eventProps) as GraphEventName[]).map((name) =>\n      graph.on(name, (event) => {\n        if (name === 'selectionchange' && latest.current.selection !== undefined) return\n        const handler = latest.current[eventProps[name]] as ((event: unknown) => void) | undefined\n        handler?.(event)\n      }),\n    )\n    return () => {\n      for (const stop of stops) stop()\n    }\n  }, [graph, latest])\n\n  useImperativeHandle<GraphInstance<S> | null, GraphInstance<S> | null>(ref, () => graph, [graph])\n\n  return (\n    <div className={className} style={{ position: 'relative', ...style }}>\n      <div ref={host} style={fill} />\n      {graph ? <GraphContext value={graph}>{children}</GraphContext> : null}\n    </div>\n  )\n}\n\nexport function useGraph(): GraphInstance {\n  const graph = useContext(GraphContext)\n  if (!graph) throw new Error('useGraph: call it inside <Graph>')\n  return graph\n}\n\ninterface Selected<T> {\n  readonly state: GraphState\n  readonly selector: (state: GraphState) => T\n  readonly value: T\n}\n\nexport interface UseGraphStateOptions<T> {\n  readonly compare?: (a: T, b: T) => boolean\n}\n\nexport function useGraphState<T>(\n  selector: (state: GraphState) => T,\n  options: UseGraphStateOptions<T> = {},\n): T {\n  const compare = options.compare ?? Object.is\n  const graph = useGraph()\n  const cache = useRef<Selected<T> | null>(null)\n  const subscribe = useCallback(\n    (notify: () => void) => {\n      const subscription = graph.store.subscribe(() => notify())\n      return () => subscription.unsubscribe()\n    },\n    [graph],\n  )\n  const snapshot = (): T => {\n    const state = graph.store.get()\n    const cached = cache.current\n    if (cached && cached.state === state && cached.selector === selector) return cached.value\n    const value = selector(state)\n    const kept = cached && compare(cached.value, value) ? cached.value : value\n    cache.current = { state, selector, value: kept }\n    return kept\n  }\n  return useSyncExternalStore(subscribe, snapshot, snapshot)\n}\n\nexport function useGraphEvent<K extends GraphEventName>(\n  name: K,\n  handler: GraphEventHandler<K>,\n): void {\n  const graph = useGraph()\n  const latest = useLatest(handler)\n  useEffect(\n    () => graph.on(name, (event: GraphEvents[K]) => latest.current(event)),\n    [graph, name, latest],\n  )\n}\n\nexport type { GraphInstance, GraphState, GraphStore }\n"],"mappings":"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"}

package/dist/{types-D6b86Rt1.d.ts → types-BaflHDaf.d.ts}

@@ -33,7 +33,14 @@ type EdgeDash = "solid" | "dashed" | "dotted";
 type EdgeArrow = "none" | "source" | "target" | "both";
 type BadgeCorner = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
 interface Badge {
-  readonly text?: string;
+  readonly text?: string | number;
+  readonly fill?: string;
+  readonly color?: string;
+}
+interface NodeImage {
+  readonly src: string;
+  readonly scale?: number;
+  readonly color?: string;
 }
 interface LabelOptions<T> {
   readonly text: Channel<T, string>;
@@ -51,7 +58,7 @@ interface NodeOptions<T> {
   readonly stroke?: Style<T, string>;
   readonly strokeWidth?: Style<T, number>;
   readonly opacity?: Style<T, number>;
-  readonly image?: Style<T, string | null>;
+  readonly image?: Style<T, string | NodeImage | null>;
   readonly badges?: Readonly<Partial<Record<BadgeCorner, Accessor<T, Badge | null | undefined>>>>;
   readonly units?: "world" | "screen";
 }
@@ -152,5 +159,5 @@ interface GraphDefinition<S extends string = string> {
   readonly interaction: ResolvedInteraction;
   readonly transitions: ResolvedTransitions;
 }
-export { ResolvedTransitions as A, NodeMark as C, NumberScaleType as D, NumberScale as E, StateStyle as F, StateStyles as I, Style as L, SelectMode as M, SourceChange as N, Point as O, SourceSubscription as P, TransitionOptions as R, Mark as S, NodeShape as T, Key as _, Channel as a, LabelOptions as b, EdgeDash as c, FieldOf as d, FreeState as f, InteractionOptions as g, GraphDefinitionOptions as h, BuiltInState as i, ScalesOptions as j, ResolvedInteraction as k, EdgeMark as l, GraphDefinition as m, Badge as n, ColorScale as o, GraphData as p, BadgeCorner as r, EdgeArrow as s, Accessor as t, EdgeOptions as u, KeyChannel as v, NodeOptions as w, LiveSource as x, KeyFieldOf as y, View as z };
-//# sourceMappingURL=types-D6b86Rt1.d.ts.map
+export { ResolvedInteraction as A, View as B, NodeImage as C, NumberScale as D, NodeShape as E, SourceSubscription as F, StateStyle as I, StateStyles as L, ScalesOptions as M, SelectMode as N, NumberScaleType as O, SourceChange as P, Style as R, Mark as S, NodeOptions as T, Key as _, Channel as a, LabelOptions as b, EdgeDash as c, FieldOf as d, FreeState as f, InteractionOptions as g, GraphDefinitionOptions as h, BuiltInState as i, ResolvedTransitions as j, Point as k, EdgeMark as l, GraphDefinition as m, Badge as n, ColorScale as o, GraphData as p, BadgeCorner as r, EdgeArrow as s, Accessor as t, EdgeOptions as u, KeyChannel as v, NodeMark as w, LiveSource as x, KeyFieldOf as y, TransitionOptions as z };
+//# sourceMappingURL=types-BaflHDaf.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bruno00o/graph",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Framework-agnostic, typed graph visualization rendered with WebGL2.",
   "keywords": [
     "graph",