@sqlrooms/cosmos 0.4.2 → 0.5.0

package/dist/CosmosSliceConfig.d.ts

@@ -0,0 +1,209 @@
+import { z } from 'zod';
+/**
+ * Zod schema for validating and configuring the Cosmos graph visualization.
+ * This schema defines all available configuration options and their types.
+ *
+ * The configuration is divided into several categories:
+ *
+ * Node Appearance:
+ * - `pointSizeScale`: Controls the size of nodes
+ * - `scalePointsOnZoom`: Enables dynamic node sizing based on zoom level
+ *
+ * Link Appearance:
+ * - `renderLinks`: Toggles link visibility
+ * - `linkWidthScale`: Controls link thickness
+ * - `linkArrows`: Toggles directional arrows
+ * - `linkArrowsSizeScale`: Controls arrow size
+ * - `curvedLinks`: Toggles curved/straight links
+ *
+ * Physics Simulation:
+ * - `simulationGravity`: Central gravitational force (0.25)
+ * - `simulationRepulsion`: Node repulsion force (1.0)
+ * - `simulationLinkSpring`: Link spring force (1.0)
+ * - `simulationLinkDistance`: Natural link length (10)
+ * - `simulationFriction`: Movement damping (0.85)
+ * - `simulationDecay`: Simulation cooling rate (1000)
+ *
+ * @example Basic configuration
+ * ```typescript
+ * const config: CosmosSliceConfig = {
+ *   cosmos: {
+ *     pointSizeScale: 1.2,
+ *     scalePointsOnZoom: true,
+ *     renderLinks: true,
+ *     linkWidthScale: 1.5,
+ *     simulationGravity: 0.25
+ *   }
+ * };
+ * ```
+ *
+ * @example Directed graph with curved links
+ * ```typescript
+ * const directedGraphConfig: CosmosSliceConfig = {
+ *   cosmos: {
+ *     linkArrows: true,
+ *     linkArrowsSizeScale: 1.2,
+ *     curvedLinks: true,
+ *     simulationLinkDistance: 15,
+ *     simulationLinkSpring: 1.2
+ *   }
+ * };
+ * ```
+ *
+ * @example High-performance configuration for large graphs
+ * ```typescript
+ * const largeGraphConfig: CosmosSliceConfig = {
+ *   cosmos: {
+ *     simulationGravity: 0.1,
+ *     simulationRepulsion: 0.8,
+ *     simulationFriction: 0.9,
+ *     simulationDecay: 2000,
+ *     scalePointsOnZoom: false
+ *   }
+ * };
+ * ```
+ */
+export declare const CosmosSliceConfig: z.ZodObject<{
+    cosmos: z.ZodObject<{
+        /**
+         * Scale factor for point (node) sizes in the graph.
+         * Values > 1 make nodes larger, values < 1 make them smaller.
+         * @default 1.1
+         */
+        pointSizeScale: z.ZodNumber;
+        /**
+         * When true, nodes will dynamically resize based on the current zoom level.
+         * This helps maintain visual clarity at different zoom levels.
+         * @default true
+         */
+        scalePointsOnZoom: z.ZodBoolean;
+        /**
+         * Controls whether links (edges) between nodes are displayed.
+         * @default true
+         */
+        renderLinks: z.ZodBoolean;
+        /**
+         * Scale factor for link (edge) width.
+         * Values > 1 make links thicker, values < 1 make them thinner.
+         * @default 1
+         */
+        linkWidthScale: z.ZodNumber;
+        /**
+         * Scale factor for the size of directional arrows on links.
+         * Only applies when linkArrows is true.
+         * @default 1
+         */
+        linkArrowsSizeScale: z.ZodNumber;
+        /**
+         * When true, displays arrows indicating link direction.
+         * Useful for directed graphs.
+         * @default false
+         */
+        linkArrows: z.ZodBoolean;
+        /**
+         * When true, links are rendered as curved Bezier paths.
+         * When false, links are straight lines.
+         * @default false
+         */
+        curvedLinks: z.ZodBoolean;
+        /**
+         * Controls the strength of the central gravitational force.
+         * Higher values pull nodes more strongly toward the center.
+         * @default 0.25
+         */
+        simulationGravity: z.ZodNumber;
+        /**
+         * Controls how strongly nodes repel each other.
+         * Higher values create more space between unconnected nodes.
+         * @default 1.0
+         */
+        simulationRepulsion: z.ZodNumber;
+        /**
+         * Controls the strength of the spring force between linked nodes.
+         * Higher values pull connected nodes more tightly together.
+         * @default 1.0
+         */
+        simulationLinkSpring: z.ZodNumber;
+        /**
+         * The natural or resting length of links between nodes.
+         * Higher values create more spacing between connected nodes.
+         * @default 10
+         */
+        simulationLinkDistance: z.ZodNumber;
+        /**
+         * Controls how quickly node movement decays.
+         * Higher values (closer to 1) create more damped movement.
+         * @default 0.85
+         */
+        simulationFriction: z.ZodNumber;
+        /**
+         * Controls how quickly the simulation stabilizes.
+         * Lower values result in longer, smoother transitions.
+         * @default 1000
+         */
+        simulationDecay: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        pointSizeScale: number;
+        renderLinks: boolean;
+        linkWidthScale: number;
+        curvedLinks: boolean;
+        linkArrows: boolean;
+        linkArrowsSizeScale: number;
+        simulationDecay: number;
+        simulationGravity: number;
+        simulationRepulsion: number;
+        simulationLinkSpring: number;
+        simulationLinkDistance: number;
+        simulationFriction: number;
+        scalePointsOnZoom: boolean;
+    }, {
+        pointSizeScale: number;
+        renderLinks: boolean;
+        linkWidthScale: number;
+        curvedLinks: boolean;
+        linkArrows: boolean;
+        linkArrowsSizeScale: number;
+        simulationDecay: number;
+        simulationGravity: number;
+        simulationRepulsion: number;
+        simulationLinkSpring: number;
+        simulationLinkDistance: number;
+        simulationFriction: number;
+        scalePointsOnZoom: boolean;
+    }>;
+}, "strip", z.ZodTypeAny, {
+    cosmos: {
+        pointSizeScale: number;
+        renderLinks: boolean;
+        linkWidthScale: number;
+        curvedLinks: boolean;
+        linkArrows: boolean;
+        linkArrowsSizeScale: number;
+        simulationDecay: number;
+        simulationGravity: number;
+        simulationRepulsion: number;
+        simulationLinkSpring: number;
+        simulationLinkDistance: number;
+        simulationFriction: number;
+        scalePointsOnZoom: boolean;
+    };
+}, {
+    cosmos: {
+        pointSizeScale: number;
+        renderLinks: boolean;
+        linkWidthScale: number;
+        curvedLinks: boolean;
+        linkArrows: boolean;
+        linkArrowsSizeScale: number;
+        simulationDecay: number;
+        simulationGravity: number;
+        simulationRepulsion: number;
+        simulationLinkSpring: number;
+        simulationLinkDistance: number;
+        simulationFriction: number;
+        scalePointsOnZoom: boolean;
+    };
+}>;
+export type CosmosSliceConfig = z.infer<typeof CosmosSliceConfig>;
+export declare function createDefaultCosmosConfig(): CosmosSliceConfig;
+//# sourceMappingURL=CosmosSliceConfig.d.ts.map

package/dist/CosmosSliceConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CosmosSliceConfig.d.ts","sourceRoot":"","sources":["../src/CosmosSliceConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAuBtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,eAAO,MAAM,iBAAiB;;QAE1B;;;;WAIG;;QAGH;;;;WAIG;;QAKH;;;WAGG;;QAGH;;;;WAIG;;QAGH;;;;WAIG;;QAKH;;;;WAIG;;QAKH;;;;WAIG;;QAOH;;;;WAIG;;QAGH;;;;WAIG;;QAGH;;;;WAIG;;QAKH;;;;WAIG;;QAKH;;;;WAIG;;QAKH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOL,CAAC;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAElE,wBAAgB,yBAAyB,IAAI,iBAAiB,CAI7D"}

package/dist/CosmosSliceConfig.js

@@ -0,0 +1,187 @@
+import { z } from 'zod';
+/**
+ * Default configuration values for the Cosmos graph visualization.
+ * These values provide a balanced starting point for most graph visualizations.
+ */
+const DEFAULT_COSMOS_CONFIG = {
+    pointSizeScale: 1.1,
+    scalePointsOnZoom: true,
+    simulationGravity: 0.25,
+    simulationRepulsion: 1.0,
+    simulationLinkSpring: 1.0,
+    simulationLinkDistance: 10,
+    simulationFriction: 0.85,
+    simulationDecay: 1000,
+    renderLinks: true,
+    linkArrows: false,
+    curvedLinks: false,
+    linkWidthScale: 1,
+    linkArrowsSizeScale: 1,
+};
+/**
+ * Zod schema for validating and configuring the Cosmos graph visualization.
+ * This schema defines all available configuration options and their types.
+ *
+ * The configuration is divided into several categories:
+ *
+ * Node Appearance:
+ * - `pointSizeScale`: Controls the size of nodes
+ * - `scalePointsOnZoom`: Enables dynamic node sizing based on zoom level
+ *
+ * Link Appearance:
+ * - `renderLinks`: Toggles link visibility
+ * - `linkWidthScale`: Controls link thickness
+ * - `linkArrows`: Toggles directional arrows
+ * - `linkArrowsSizeScale`: Controls arrow size
+ * - `curvedLinks`: Toggles curved/straight links
+ *
+ * Physics Simulation:
+ * - `simulationGravity`: Central gravitational force (0.25)
+ * - `simulationRepulsion`: Node repulsion force (1.0)
+ * - `simulationLinkSpring`: Link spring force (1.0)
+ * - `simulationLinkDistance`: Natural link length (10)
+ * - `simulationFriction`: Movement damping (0.85)
+ * - `simulationDecay`: Simulation cooling rate (1000)
+ *
+ * @example Basic configuration
+ * ```typescript
+ * const config: CosmosSliceConfig = {
+ *   cosmos: {
+ *     pointSizeScale: 1.2,
+ *     scalePointsOnZoom: true,
+ *     renderLinks: true,
+ *     linkWidthScale: 1.5,
+ *     simulationGravity: 0.25
+ *   }
+ * };
+ * ```
+ *
+ * @example Directed graph with curved links
+ * ```typescript
+ * const directedGraphConfig: CosmosSliceConfig = {
+ *   cosmos: {
+ *     linkArrows: true,
+ *     linkArrowsSizeScale: 1.2,
+ *     curvedLinks: true,
+ *     simulationLinkDistance: 15,
+ *     simulationLinkSpring: 1.2
+ *   }
+ * };
+ * ```
+ *
+ * @example High-performance configuration for large graphs
+ * ```typescript
+ * const largeGraphConfig: CosmosSliceConfig = {
+ *   cosmos: {
+ *     simulationGravity: 0.1,
+ *     simulationRepulsion: 0.8,
+ *     simulationFriction: 0.9,
+ *     simulationDecay: 2000,
+ *     scalePointsOnZoom: false
+ *   }
+ * };
+ * ```
+ */
+export const CosmosSliceConfig = z.object({
+    cosmos: z.object({
+        /**
+         * Scale factor for point (node) sizes in the graph.
+         * Values > 1 make nodes larger, values < 1 make them smaller.
+         * @default 1.1
+         */
+        pointSizeScale: z.number().describe('Scale factor for point sizes'),
+        /**
+         * When true, nodes will dynamically resize based on the current zoom level.
+         * This helps maintain visual clarity at different zoom levels.
+         * @default true
+         */
+        scalePointsOnZoom: z
+            .boolean()
+            .describe('Dynamically resize points based on zoom level'),
+        /**
+         * Controls whether links (edges) between nodes are displayed.
+         * @default true
+         */
+        renderLinks: z.boolean().describe('Control links displaying'),
+        /**
+         * Scale factor for link (edge) width.
+         * Values > 1 make links thicker, values < 1 make them thinner.
+         * @default 1
+         */
+        linkWidthScale: z.number().describe('Scale factor for link width'),
+        /**
+         * Scale factor for the size of directional arrows on links.
+         * Only applies when linkArrows is true.
+         * @default 1
+         */
+        linkArrowsSizeScale: z
+            .number()
+            .describe('Scale factor for link arrows size'),
+        /**
+         * When true, displays arrows indicating link direction.
+         * Useful for directed graphs.
+         * @default false
+         */
+        linkArrows: z
+            .boolean()
+            .describe('Control displaying link direction arrows'),
+        /**
+         * When true, links are rendered as curved Bezier paths.
+         * When false, links are straight lines.
+         * @default false
+         */
+        curvedLinks: z
+            .boolean()
+            .describe('Render links as curved bezier paths instead of straight lines'),
+        /**
+         * Controls the strength of the central gravitational force.
+         * Higher values pull nodes more strongly toward the center.
+         * @default 0.25
+         */
+        simulationGravity: z.number().describe('Gravity force in the simulation'),
+        /**
+         * Controls how strongly nodes repel each other.
+         * Higher values create more space between unconnected nodes.
+         * @default 1.0
+         */
+        simulationRepulsion: z.number().describe('Repulsion force between nodes'),
+        /**
+         * Controls the strength of the spring force between linked nodes.
+         * Higher values pull connected nodes more tightly together.
+         * @default 1.0
+         */
+        simulationLinkSpring: z
+            .number()
+            .describe('Spring force for links between nodes'),
+        /**
+         * The natural or resting length of links between nodes.
+         * Higher values create more spacing between connected nodes.
+         * @default 10
+         */
+        simulationLinkDistance: z
+            .number()
+            .describe('Target distance between linked nodes'),
+        /**
+         * Controls how quickly node movement decays.
+         * Higher values (closer to 1) create more damped movement.
+         * @default 0.85
+         */
+        simulationFriction: z
+            .number()
+            .describe('Friction coefficient in the simulation'),
+        /**
+         * Controls how quickly the simulation stabilizes.
+         * Lower values result in longer, smoother transitions.
+         * @default 1000
+         */
+        simulationDecay: z
+            .number()
+            .describe('Decay coefficient in the simulation. Use smaller values if you want the simulation to "cool down" slower.'),
+    }),
+});
+export function createDefaultCosmosConfig() {
+    return {
+        cosmos: DEFAULT_COSMOS_CONFIG,
+    };
+}
+//# sourceMappingURL=CosmosSliceConfig.js.map

package/dist/CosmosSliceConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CosmosSliceConfig.js","sourceRoot":"","sources":["../src/CosmosSliceConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAGtB;;;GAGG;AACH,MAAM,qBAAqB,GAAgC;IACzD,cAAc,EAAE,GAAG;IACnB,iBAAiB,EAAE,IAAI;IACvB,iBAAiB,EAAE,IAAI;IACvB,mBAAmB,EAAE,GAAG;IACxB,oBAAoB,EAAE,GAAG;IACzB,sBAAsB,EAAE,EAAE;IAC1B,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,IAAI;IACrB,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,KAAK;IAClB,cAAc,EAAE,CAAC;IACjB,mBAAmB,EAAE,CAAC;CAC0B,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC,MAAM,CAAC;IACxC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC;QACf;;;;WAIG;QACH,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,8BAA8B,CAAC;QAEnE;;;;WAIG;QACH,iBAAiB,EAAE,CAAC;aACjB,OAAO,EAAE;aACT,QAAQ,CAAC,+CAA+C,CAAC;QAE5D;;;WAGG;QACH,WAAW,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,0BAA0B,CAAC;QAE7D;;;;WAIG;QACH,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,6BAA6B,CAAC;QAElE;;;;WAIG;QACH,mBAAmB,EAAE,CAAC;aACnB,MAAM,EAAE;aACR,QAAQ,CAAC,mCAAmC,CAAC;QAEhD;;;;WAIG;QACH,UAAU,EAAE,CAAC;aACV,OAAO,EAAE;aACT,QAAQ,CAAC,0CAA0C,CAAC;QAEvD;;;;WAIG;QACH,WAAW,EAAE,CAAC;aACX,OAAO,EAAE;aACT,QAAQ,CACP,+DAA+D,CAChE;QAEH;;;;WAIG;QACH,iBAAiB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,iCAAiC,CAAC;QAEzE;;;;WAIG;QACH,mBAAmB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,+BAA+B,CAAC;QAEzE;;;;WAIG;QACH,oBAAoB,EAAE,CAAC;aACpB,MAAM,EAAE;aACR,QAAQ,CAAC,sCAAsC,CAAC;QAEnD;;;;WAIG;QACH,sBAAsB,EAAE,CAAC;aACtB,MAAM,EAAE;aACR,QAAQ,CAAC,sCAAsC,CAAC;QAEnD;;;;WAIG;QACH,kBAAkB,EAAE,CAAC;aAClB,MAAM,EAAE;aACR,QAAQ,CAAC,wCAAwC,CAAC;QAErD;;;;WAIG;QACH,eAAe,EAAE,CAAC;aACf,MAAM,EAAE;aACR,QAAQ,CACP,2GAA2G,CAC5G;KAC2D,CAAC;CAClE,CAAC,CAAC;AAGH,MAAM,UAAU,yBAAyB;IACvC,OAAO;QACL,MAAM,EAAE,qBAAqB;KAC9B,CAAC;AACJ,CAAC"}

package/dist/hooks/useHoverState.d.ts

@@ -17,18 +17,18 @@ export type HoverState = {
  * - Track which point is currently being hovered
  * - Store the hover position coordinates
  * - Clear the hover state
+ * - Provide event handlers for hover-related graph interactions
  *
  * @example
  * ```tsx
  * const Graph = () => {
  *   const calcRelativeCoords = useRelativeCoordinates(containerRef);
- *   const { hoveredPoint, onPointMouseOver, clearHoverState } = useHoverState(calcRelativeCoords);
+ *   const { hoveredPoint, eventHandlers } = useHoverState(calcRelativeCoords);
  *
  *   return (
  *     <div ref={containerRef}>
  *       <CosmosGraph
- *         onPointMouseOver={onPointMouseOver}
- *         onPointMouseOut={clearHoverState}
+ *         config={eventHandlers}
  *       />
  *       {hoveredPoint && (
  *         <Tooltip
@@ -42,14 +42,17 @@ export type HoverState = {
  * ```
  *
  * @param calcRelativeCoordinates - A function that converts client coordinates to container-relative coordinates
- * @returns An object containing the hover state and handlers
+ * @returns An object containing the hover state and event handlers for the graph
  */
 export declare const useHoverState: (calcRelativeCoordinates: ReturnType<typeof useRelativeCoordinates>) => {
     /** The current hover state, containing the index and position of the hovered point, or null if no point is hovered */
     hoveredPoint: HoverState;
-    /** Handler to be called when a point is hovered. Updates the hover state with the point's index and position */
-    onPointMouseOver: (index: number, pointPosition: [number, number], event: MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined) => void;
-    /** Handler to clear the hover state, typically called when the mouse leaves a point */
-    clearHoverState: () => void;
+    /** Event handlers for hover-related graph interactions */
+    eventHandlers: {
+        onPointMouseOver: (index: number, pointPosition: [number, number], event: MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined) => void;
+        onPointMouseOut: () => void;
+        onZoomStart: () => void;
+        onDragStart: () => void;
+    };
 };
 //# sourceMappingURL=useHoverState.d.ts.map

package/dist/hooks/useHoverState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHoverState.d.ts","sourceRoot":"","sources":["../../src/hooks/useHoverState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,cAAc,CAAC;AAKpD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5B,GAAG,IAAI,CAAC;AAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa,4BACC,UAAU,CAAC,OAAO,sBAAsB,CAAC;IAwBhE,sHAAsH;;IAEtH,gHAAgH;;IAEhH,uFAAuF;;CAG1F,CAAC"}
+{"version":3,"file":"useHoverState.d.ts","sourceRoot":"","sources":["../../src/hooks/useHoverState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,cAAc,CAAC;AAKpD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5B,GAAG,IAAI,CAAC;AAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa,4BACC,UAAU,CAAC,OAAO,sBAAsB,CAAC;IAkChE,sHAAsH;;IAEtH,0DAA0D;;;;;;;CAG7D,CAAC"}

package/dist/hooks/useHoverState.js

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { hasClientCoordinates } from '../utils/coordinates';
 /**
  * A custom hook that manages hover state for graph points.
@@ -7,18 +7,18 @@ import { hasClientCoordinates } from '../utils/coordinates';
  * - Track which point is currently being hovered
  * - Store the hover position coordinates
  * - Clear the hover state
+ * - Provide event handlers for hover-related graph interactions
  *
  * @example
  * ```tsx
  * const Graph = () => {
  *   const calcRelativeCoords = useRelativeCoordinates(containerRef);
- *   const { hoveredPoint, onPointMouseOver, clearHoverState } = useHoverState(calcRelativeCoords);
+ *   const { hoveredPoint, eventHandlers } = useHoverState(calcRelativeCoords);
  *
  *   return (
  *     <div ref={containerRef}>
  *       <CosmosGraph
- *         onPointMouseOver={onPointMouseOver}
- *         onPointMouseOut={clearHoverState}
+ *         config={eventHandlers}
  *       />
  *       {hoveredPoint && (
  *         <Tooltip
@@ -32,7 +32,7 @@ import { hasClientCoordinates } from '../utils/coordinates';
  * ```
  *
  * @param calcRelativeCoordinates - A function that converts client coordinates to container-relative coordinates
- * @returns An object containing the hover state and handlers
+ * @returns An object containing the hover state and event handlers for the graph
  */
 export const useHoverState = (calcRelativeCoordinates) => {
     const [hoveredPoint, setHoveredPoint] = useState(null);
@@ -45,13 +45,17 @@ export const useHoverState = (calcRelativeCoordinates) => {
         }
     }, [calcRelativeCoordinates]);
     const clearHoverState = useCallback(() => setHoveredPoint(null), []);
+    const eventHandlers = useMemo(() => ({
+        onPointMouseOver,
+        onPointMouseOut: clearHoverState,
+        onZoomStart: clearHoverState,
+        onDragStart: clearHoverState,
+    }), [onPointMouseOver, clearHoverState]);
     return {
         /** The current hover state, containing the index and position of the hovered point, or null if no point is hovered */
         hoveredPoint,
-        /** Handler to be called when a point is hovered. Updates the hover state with the point's index and position */
-        onPointMouseOver,
-        /** Handler to clear the hover state, typically called when the mouse leaves a point */
-        clearHoverState,
+        /** Event handlers for hover-related graph interactions */
+        eventHandlers,
     };
 };
 //# sourceMappingURL=useHoverState.js.map

package/dist/hooks/useHoverState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHoverState.js","sourceRoot":"","sources":["../../src/hooks/useHoverState.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,WAAW,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAC,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAe1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,uBAAkE,EAClE,EAAE;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAa,IAAI,CAAC,CAAC;IAEnE,MAAM,gBAAgB,GACpB,WAAW,CACT,CACE,KAAa,EACb,cAAgC,EAChC,KAA8B,EAC9B,EAAE;QACF,IAAI,oBAAoB,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,eAAe,CAAC;gBACd,KAAK;gBACL,QAAQ,EAAE,uBAAuB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC;aAChE,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,uBAAuB,CAAC,CAC1B,CAAC;IAEJ,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAErE,OAAO;QACL,sHAAsH;QACtH,YAAY;QACZ,gHAAgH;QAChH,gBAAgB;QAChB,uFAAuF;QACvF,eAAe;KAChB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"useHoverState.js","sourceRoot":"","sources":["../../src/hooks/useHoverState.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAC,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAe1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,uBAAkE,EAClE,EAAE;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAa,IAAI,CAAC,CAAC;IAEnE,MAAM,gBAAgB,GACpB,WAAW,CACT,CACE,KAAa,EACb,cAAgC,EAChC,KAA8B,EAC9B,EAAE;QACF,IAAI,oBAAoB,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,eAAe,CAAC;gBACd,KAAK;gBACL,QAAQ,EAAE,uBAAuB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC;aAChE,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,uBAAuB,CAAC,CAC1B,CAAC;IAEJ,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAErE,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACL,gBAAgB;QAChB,eAAe,EAAE,eAAe;QAChC,WAAW,EAAE,eAAe;QAC5B,WAAW,EAAE,eAAe;KAC7B,CAAC,EACF,CAAC,gBAAgB,EAAE,eAAe,CAAC,CACpC,CAAC;IAEF,OAAO;QACL,sHAAsH;QACtH,YAAY;QACZ,0DAA0D;QAC1D,aAAa;KACd,CAAC;AACJ,CAAC,CAAC"}

package/dist/index.d.ts

@@ -3,7 +3,7 @@
  *
  * This package provides React components and hooks for creating interactive graph visualizations
  * using the Cosmograph WebGL-based graph visualization library. It includes components for
- * rendering graphs, managing graph state, and controlling graph interactions.
+ * rendering graphs, managing graph state through zustand, and controlling graph interactions.
  *
  * @example Basic usage
  * ```tsx
@@ -31,7 +31,7 @@ export { CosmosGraph } from './CosmosGraph';
 export { CosmosGraphControls } from './CosmosGraphControls';
 /**
  * A component that provides fine-grained controls for the graph simulation parameters.
- * Must be used within a CosmosGraph component as it relies on the CosmosGraphContext.
+ * Uses the zustand store to access and control the graph state.
  *
  * Features:
  * - Slider controls for gravity, repulsion, link strength, link distance, friction, and decay
@@ -55,38 +55,72 @@ export { CosmosGraphControls } from './CosmosGraphControls';
  */
 export { CosmosSimulationControls } from './CosmosSimulationControls';
 export type { CosmosGraphProps } from './CosmosGraph';
-export { useCosmosGraph } from './CosmosGraphContext';
-export { useGraph, useHoverState, useGraphConfig } from './hooks';
-export type { HoverState } from './hooks/useHoverState';
-export type { WithClientCoordinates } from './utils/coordinates';
-export { hasClientCoordinates } from './utils/coordinates';
+export { useHoverState } from './hooks/useHoverState';
+export { createCosmosSlice, useStoreWithCosmos, type CosmosSliceState, type ProjectStateWithCosmos, } from './CosmosSlice';
+export { CosmosSliceConfig, createDefaultCosmosConfig, type CosmosSliceConfig as CosmosSliceConfigType, } from './CosmosSliceConfig';
 /**
- * Zod schema for validating and describing graph simulation configuration parameters.
+ * Configuration schema for the Cosmos graph visualization system.
+ * Provides type-safe validation and configuration options for both visual and physics aspects of the graph.
  *
- * Available parameters:
- * - `simulationGravity` (number): Gravity force in the simulation. Controls how strongly nodes are pulled toward the center.
- * - `simulationRepulsion` (number): Repulsion force between nodes. Higher values make nodes push away from each other more strongly.
- * - `simulationLinkSpring` (number): Spring force for links between nodes. Higher values make connected nodes pull together more strongly.
- * - `simulationLinkDistance` (number): Target distance between linked nodes. Defines the natural length of links in the simulation.
- * - `simulationFriction` (number): Friction coefficient in the simulation. Higher values make node movement more damped.
- * - `simulationDecay` (number): Decay coefficient in the simulation. Lower values make the simulation "cool down" more slowly.
+ * Configuration Categories:
  *
- * @example
+ * 1. Visual Appearance
+ * - Node styling: size scaling and zoom behavior
+ * - Link styling: visibility, width, arrows, and curve options
+ *
+ * 2. Physics Simulation
+ * - Gravity: Central force pulling nodes toward center
+ * - Repulsion: Force pushing nodes apart
+ * - Link Forces: Spring forces and distances between connected nodes
+ * - Dynamics: Friction and decay rates for movement
+ *
+ * Key Parameters:
+ * - `pointSizeScale` (number): Base scale for node sizes (default: 1.1)
+ * - `scalePointsOnZoom` (boolean): Dynamic node sizing with zoom (default: true)
+ * - `renderLinks` (boolean): Toggle link visibility (default: true)
+ * - `linkArrows` (boolean): Show directional arrows (default: false)
+ * - `curvedLinks` (boolean): Use curved or straight links (default: false)
+ * - `simulationGravity` (number): Center attraction strength (default: 0.25)
+ * - `simulationRepulsion` (number): Node repulsion strength (default: 1.0)
+ * - `simulationLinkSpring` (number): Link elasticity (default: 1.0)
+ * - `simulationFriction` (number): Movement damping (default: 0.85)
+ * - `simulationDecay` (number): Simulation cooling rate (default: 1000)
+ *
+ * @example Typical usage with default-like values
  * ```tsx
- * import { CosmosSimulationConfigSchema } from '@sqlrooms/cosmos';
+ * import { CosmosGraph, createDefaultCosmosConfig } from '@sqlrooms/cosmos';
+ *
+ * const config = createDefaultCosmosConfig();
+ *
+ * function MyGraph() {
+ *   return (
+ *     <CosmosGraph
+ *       config={config}
+ *       data={graphData}
+ *     />
+ *   );
+ * }
+ * ```
  *
+ * @example Custom configuration for directed graph
+ * ```tsx
  * const config = {
- *   simulationGravity: 0.1,
- *   simulationRepulsion: 1.0,
- *   simulationLinkSpring: 1.0,
- *   simulationLinkDistance: 10,
- *   simulationFriction: 0.85,
- *   simulationDecay: 1000
- * };
+ *   cosmos: {
+ *     // Visual settings
+ *     pointSizeScale: 1.2,
+ *     linkArrows: true,
+ *     curvedLinks: true,
  *
- * // Validate the config
- * const validConfig = CosmosSimulationConfigSchema.parse(config);
+ *     // Physics settings
+ *     simulationGravity: 0.2,
+ *     simulationLinkDistance: 15,
+ *     simulationLinkSpring: 1.2
+ *   }
+ * };
  * ```
+ *
+ * @see {@link CosmosGraph} For the main graph component
+ * @see {@link CosmosSimulationControls} For runtime control of simulation parameters
  */
-export { CosmosSimulationConfigSchema } from './config';
+export * from './CosmosSliceConfig';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AACpE,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAGpD,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAChE,YAAY,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAGtD,YAAY,EAAC,qBAAqB,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAC,4BAA4B,EAAC,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AACpE,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAGpD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACpD,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,GAC5B,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EACjB,yBAAyB,EACzB,KAAK,iBAAiB,IAAI,qBAAqB,GAChD,MAAM,qBAAqB,CAAC;AAG7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,cAAc,qBAAqB,CAAC"}