@sqlrooms/cosmos 0.6.0 → 0.8.0

package/README.md

@@ -0,0 +1,168 @@
+A powerful graph visualization package for SQLRooms applications. This package provides React components and hooks for creating interactive graph visualizations using a WebGL-based graph rendering engine, with state management through Zustand.
+
+This package is built on top of the [Cosmos library](https://github.com/cosmograph-org/cosmos), a GPU-accelerated force graph layout and rendering library.
+
+## Features
+
+- 🌐 **Interactive Graphs**: Create dynamic, interactive graph visualizations
+- 🚀 **WebGL Rendering**: High-performance rendering for large graphs
+- 🧩 **React Components**: Ready-to-use components for graph visualization
+- 🔄 **State Management**: Zustand-based state management for graph state
+- 🎛️ **Simulation Controls**: Fine-grained control over physics simulation
+- 🎨 **Customizable Styling**: Extensive options for visual customization
+
+## Installation
+
+```bash
+npm install @sqlrooms/cosmos
+```
+
+## Basic Usage
+
+### Simple Graph Visualization
+
+```tsx
+import {
+  CosmosGraph,
+  CosmosGraphControls,
+  createDefaultCosmosConfig,
+} from '@sqlrooms/cosmos';
+
+function MyGraph() {
+  const graphData = {
+    nodes: [
+      {id: 'node1', label: 'Node 1'},
+      {id: 'node2', label: 'Node 2'},
+      {id: 'node3', label: 'Node 3'},
+    ],
+    links: [
+      {source: 'node1', target: 'node2'},
+      {source: 'node2', target: 'node3'},
+      {source: 'node3', target: 'node1'},
+    ],
+  };
+
+  return (
+    <div style={{width: '800px', height: '600px'}}>
+      <CosmosGraph config={createDefaultCosmosConfig()} data={graphData}>
+        <CosmosGraphControls />
+      </CosmosGraph>
+    </div>
+  );
+}
+```
+
+### With Simulation Controls
+
+```tsx
+import {
+  CosmosGraph,
+  CosmosGraphControls,
+  CosmosSimulationControls,
+  createDefaultCosmosConfig,
+} from '@sqlrooms/cosmos';
+
+function AdvancedGraph() {
+  return (
+    <div style={{width: '800px', height: '600px', position: 'relative'}}>
+      <CosmosGraph config={createDefaultCosmosConfig()} data={graphData}>
+        <CosmosGraphControls />
+        <CosmosSimulationControls className="absolute bottom-4 left-4" />
+      </CosmosGraph>
+    </div>
+  );
+}
+```
+
+### Using with Zustand Store
+
+```tsx
+import {
+  createCosmosSlice,
+  useStoreWithCosmos,
+  createDefaultCosmosConfig,
+} from '@sqlrooms/cosmos';
+import {createProjectStore} from '@sqlrooms/project-builder';
+
+// Create a project store with cosmos capabilities
+const useStore = createProjectStore({
+  cosmos: createCosmosSlice(createDefaultCosmosConfig()),
+});
+
+function GraphWithState() {
+  const {setGraphData, toggleSimulation, isSimulationRunning, zoomToFit} =
+    useStoreWithCosmos(useStore);
+
+  // Load graph data
+  useEffect(() => {
+    setGraphData(myGraphData);
+  }, []);
+
+  return (
+    <div>
+      <button onClick={toggleSimulation}>
+        {isSimulationRunning ? 'Pause' : 'Resume'} Simulation
+      </button>
+      <button onClick={zoomToFit}>Zoom to Fit</button>
+
+      <CosmosGraph store={useStore}>
+        <CosmosGraphControls />
+      </CosmosGraph>
+    </div>
+  );
+}
+```
+
+## Configuration
+
+The Cosmos graph visualization system provides extensive configuration options for both visual appearance and physics simulation.
+
+### Visual Configuration
+
+```tsx
+const config = {
+  pointSizeScale: 1.2, // Base scale for node sizes
+  scalePointsOnZoom: true, // Dynamic node sizing with zoom
+  renderLinks: true, // Toggle link visibility
+  linkArrows: true, // Show directional arrows
+  curvedLinks: true, // Use curved links
+  linkWidth: 1.5, // Width of links
+  linkOpacity: 0.8, // Opacity of links
+  // ... other visual options
+};
+```
+
+### Physics Simulation Configuration
+
+```tsx
+const config = {
+  simulationGravity: 0.2, // Center attraction strength
+  simulationRepulsion: 1.0, // Node repulsion strength
+  simulationLinkSpring: 1.2, // Link elasticity
+  simulationLinkDistance: 15, // Preferred link distance
+  simulationFriction: 0.85, // Movement damping
+  simulationDecay: 1000, // Simulation cooling rate
+  // ... other physics options
+};
+```
+
+## Advanced Features
+
+- **Custom Node Rendering**: Define custom renderers for nodes
+- **Interactive Events**: Handle click, hover, and drag events
+- **Data Binding**: Connect graph data to your application state
+- **Layout Algorithms**: Apply different layout algorithms
+- **Performance Optimization**: Options for handling large graphs
+
+For more information, visit the SQLRooms documentation.
+
+## About Cosmograph Cosmos
+
+This package is built on top of [Cosmograph Cosmos](https://github.com/cosmograph-org/cosmos), a GPU-accelerated force graph layout and rendering library. Cosmograph Cosmos offers:
+
+- **GPU Acceleration**: All computations and rendering happen on the GPU in fragment and vertex shaders
+- **High Performance**: Capable of rendering hundreds of thousands of nodes and links in real-time
+- **WebGL-based**: Utilizes WebGL for efficient graph visualization
+- **Advanced Physics**: Sophisticated force-directed layout algorithms
+
+For more information about the underlying library, visit the [Cosmograph Cosmos GitHub repository](https://github.com/cosmograph-org/cosmos) or the [official documentation](https://cosmograph-org.github.io/cosmos/).

package/dist/CosmosSimulationControls.js

@@ -110,7 +110,7 @@ const simulationSliders = [
  */
 export const CosmosSimulationControls = ({ className, }) => {
     const { isSimulationRunning, toggleSimulation, startWithEnergy, updateSimulationConfig, } = useStoreWithCosmos((s) => s.cosmos);
-    const config = useStoreWithCosmos((s) => s.project.config.cosmos);
+    const config = useStoreWithCosmos((s) => s.config.cosmos);
     const handleParameterChange = (paramKey, value) => {
         updateSimulationConfig({ [paramKey]: value[0] });
     };

package/dist/CosmosSimulationControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"CosmosSimulationControls.js","sourceRoot":"","sources":["../src/CosmosSimulationControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  cn,\n  Slider,\n  Label,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  Button,\n} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport {Info, Pause, Play, Wind} from 'lucide-react';\nimport {useStoreWithCosmos} from './CosmosSlice';\nimport {CosmosSliceConfig} from './CosmosSliceConfig';\n\n/**\n * Props for the CosmosSimulationControls component.\n */\ninterface CosmosSimulationControlsProps {\n  /**\n   * Optional className to override the default positioning and styling of the controls container.\n   * By default, controls are positioned at the top-right corner.\n   *\n   * @example\n   * ```tsx\n   * // Position controls at the bottom-right\n   * <CosmosSimulationControls className=\"absolute bottom-4 right-4\" />\n   * ```\n   */\n  className?: string;\n}\n\n/**\n * Configuration for each simulation parameter slider.\n * These values define the range and step size for each parameter.\n *\n * @internal\n */\nconst simulationSliders = [\n  {\n    key: 'simulationGravity',\n    label: 'Gravity',\n    min: 0,\n    max: 0.5,\n    step: 0.01,\n  },\n  {\n    key: 'simulationRepulsion',\n    label: 'Repulsion',\n    min: 0,\n    max: 2,\n    step: 0.01,\n  },\n  {\n    key: 'simulationLinkSpring',\n    label: 'Link Strength',\n    min: 0,\n    max: 2,\n    step: 0.01,\n  },\n  {\n    key: 'simulationLinkDistance',\n    label: 'Link Distance',\n    min: 1,\n    max: 20,\n    step: 1,\n  },\n  {\n    key: 'simulationFriction',\n    label: 'Friction',\n    min: 0,\n    max: 1,\n    step: 0.01,\n  },\n  {\n    key: 'simulationDecay',\n    label: 'Decay',\n    min: 100,\n    max: 10000,\n    step: 100,\n  },\n] as const;\n\ntype SimulationKey = (typeof simulationSliders)[number]['key'];\n\n/**\n * A component that provides fine-grained controls for adjusting graph simulation parameters.\n * Uses the zustand store to access and control the graph state.\n *\n * Features:\n * - Slider controls for all simulation parameters\n * - Real-time parameter adjustment\n * - Tooltips with parameter descriptions\n * - Customizable positioning\n * - Default values optimized for common use cases\n *\n * Available parameters:\n * - Gravity (0-0.5): Controls how strongly nodes are pulled toward the center\n * - Repulsion (0-2): Controls how strongly nodes push away from each other\n * - Link Strength (0-2): Controls the spring force between connected nodes\n * - Link Distance (1-20): Sets the natural length of links between nodes\n * - Friction (0-1): Controls how quickly node movement decays\n * - Decay (100-10000): Controls how quickly the simulation \"cools down\"\n *\n * @example Basic usage\n * ```tsx\n * import { CosmosGraph, CosmosSimulationControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n *   return (\n *       <CosmosGraph {...graphProps}>\n *         <CosmosSimulationControls />\n *       </CosmosGraph>\n *   );\n * };\n * ```\n *\n * @example Custom positioning with other controls\n * ```tsx\n * import { CosmosGraph, CosmosGraphControls, CosmosSimulationControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n *   return (\n *       <CosmosGraph {...graphProps}>\n *         <CosmosGraphControls className=\"absolute top-4 left-4\" />\n *         <CosmosSimulationControls className=\"absolute top-4 right-4\" />\n *       </CosmosGraph>\n *   );\n * };\n * ```\n *\n * @example With custom styling\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosSimulationControls\n *     className=\"absolute bottom-4 right-4 bg-opacity-75 backdrop-blur-sm\"\n *   />\n * </CosmosGraph>\n * ```\n */\nexport const CosmosSimulationControls: FC<CosmosSimulationControlsProps> = ({\n  className,\n}) => {\n  const {\n    isSimulationRunning,\n    toggleSimulation,\n    startWithEnergy,\n    updateSimulationConfig,\n  } = useStoreWithCosmos((s) => s.cosmos);\n\n  const config = useStoreWithCosmos(\n    (s) => s.project.config.cosmos,\n  ) as CosmosSliceConfig['cosmos'];\n\n  const handleParameterChange = (paramKey: SimulationKey, value: number[]) => {\n    updateSimulationConfig({[paramKey]: value[0]});\n  };\n\n  return (\n    <div\n      className={cn(\n        'w-48 bg-card/90 dark:bg-card/90 rounded-lg shadow-lg p-3 space-y-4',\n        className,\n      )}\n    >\n      <div className=\"flex gap-2\">\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              onClick={toggleSimulation}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n            >\n              {isSimulationRunning ? (\n                <Pause className=\"h-4 w-4\" />\n              ) : (\n                <Play className=\"h-4 w-4\" />\n              )}\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">\n            {isSimulationRunning ? 'Pause simulation' : 'Start simulation'}\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              onClick={startWithEnergy}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n            >\n              <Wind className=\"h-4 w-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">\n            Push energy into simulation\n          </TooltipContent>\n        </Tooltip>\n      </div>\n      {simulationSliders.map(({key, label, min, max, step}) => (\n        <div key={key} className=\"space-y-2\">\n          <div className=\"flex items-center justify-between\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Label\n                  htmlFor={key}\n                  className=\"text-xs font-medium flex items-center gap-1 cursor-help\"\n                >\n                  <Info className=\"w-3 h-3 text-muted-foreground/50\" />\n                  {label}\n                </Label>\n              </TooltipTrigger>\n              <TooltipContent side=\"left\" className=\"max-w-[200px]\">\n                {CosmosSliceConfig.shape.cosmos.shape[key].description}\n              </TooltipContent>\n            </Tooltip>\n            <span className=\"text-xs tabular-nums text-muted-foreground\">\n              {config[key].toFixed(2)}\n            </span>\n          </div>\n          <Slider\n            id={key}\n            min={min}\n            max={max}\n            step={step}\n            value={[config[key]]}\n            onValueChange={(value) => handleParameterChange(key, value)}\n            className=\"w-full\"\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"CosmosSimulationControls.js","sourceRoot":"","sources":["../src/CosmosSimulationControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  cn,\n  Slider,\n  Label,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  Button,\n} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport {Info, Pause, Play, Wind} from 'lucide-react';\nimport {useStoreWithCosmos} from './CosmosSlice';\nimport {CosmosSliceConfig} from './CosmosSliceConfig';\n\n/**\n * Props for the CosmosSimulationControls component.\n */\ninterface CosmosSimulationControlsProps {\n  /**\n   * Optional className to override the default positioning and styling of the controls container.\n   * By default, controls are positioned at the top-right corner.\n   *\n   * @example\n   * ```tsx\n   * // Position controls at the bottom-right\n   * <CosmosSimulationControls className=\"absolute bottom-4 right-4\" />\n   * ```\n   */\n  className?: string;\n}\n\n/**\n * Configuration for each simulation parameter slider.\n * These values define the range and step size for each parameter.\n *\n * @internal\n */\nconst simulationSliders = [\n  {\n    key: 'simulationGravity',\n    label: 'Gravity',\n    min: 0,\n    max: 0.5,\n    step: 0.01,\n  },\n  {\n    key: 'simulationRepulsion',\n    label: 'Repulsion',\n    min: 0,\n    max: 2,\n    step: 0.01,\n  },\n  {\n    key: 'simulationLinkSpring',\n    label: 'Link Strength',\n    min: 0,\n    max: 2,\n    step: 0.01,\n  },\n  {\n    key: 'simulationLinkDistance',\n    label: 'Link Distance',\n    min: 1,\n    max: 20,\n    step: 1,\n  },\n  {\n    key: 'simulationFriction',\n    label: 'Friction',\n    min: 0,\n    max: 1,\n    step: 0.01,\n  },\n  {\n    key: 'simulationDecay',\n    label: 'Decay',\n    min: 100,\n    max: 10000,\n    step: 100,\n  },\n] as const;\n\ntype SimulationKey = (typeof simulationSliders)[number]['key'];\n\n/**\n * A component that provides fine-grained controls for adjusting graph simulation parameters.\n * Uses the zustand store to access and control the graph state.\n *\n * Features:\n * - Slider controls for all simulation parameters\n * - Real-time parameter adjustment\n * - Tooltips with parameter descriptions\n * - Customizable positioning\n * - Default values optimized for common use cases\n *\n * Available parameters:\n * - Gravity (0-0.5): Controls how strongly nodes are pulled toward the center\n * - Repulsion (0-2): Controls how strongly nodes push away from each other\n * - Link Strength (0-2): Controls the spring force between connected nodes\n * - Link Distance (1-20): Sets the natural length of links between nodes\n * - Friction (0-1): Controls how quickly node movement decays\n * - Decay (100-10000): Controls how quickly the simulation \"cools down\"\n *\n * @example Basic usage\n * ```tsx\n * import { CosmosGraph, CosmosSimulationControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n *   return (\n *       <CosmosGraph {...graphProps}>\n *         <CosmosSimulationControls />\n *       </CosmosGraph>\n *   );\n * };\n * ```\n *\n * @example Custom positioning with other controls\n * ```tsx\n * import { CosmosGraph, CosmosGraphControls, CosmosSimulationControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n *   return (\n *       <CosmosGraph {...graphProps}>\n *         <CosmosGraphControls className=\"absolute top-4 left-4\" />\n *         <CosmosSimulationControls className=\"absolute top-4 right-4\" />\n *       </CosmosGraph>\n *   );\n * };\n * ```\n *\n * @example With custom styling\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosSimulationControls\n *     className=\"absolute bottom-4 right-4 bg-opacity-75 backdrop-blur-sm\"\n *   />\n * </CosmosGraph>\n * ```\n */\nexport const CosmosSimulationControls: FC<CosmosSimulationControlsProps> = ({\n  className,\n}) => {\n  const {\n    isSimulationRunning,\n    toggleSimulation,\n    startWithEnergy,\n    updateSimulationConfig,\n  } = useStoreWithCosmos((s) => s.cosmos);\n\n  const config = useStoreWithCosmos(\n    (s) => s.config.cosmos,\n  ) as CosmosSliceConfig['cosmos'];\n\n  const handleParameterChange = (paramKey: SimulationKey, value: number[]) => {\n    updateSimulationConfig({[paramKey]: value[0]});\n  };\n\n  return (\n    <div\n      className={cn(\n        'w-48 bg-card/90 dark:bg-card/90 rounded-lg shadow-lg p-3 space-y-4',\n        className,\n      )}\n    >\n      <div className=\"flex gap-2\">\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              onClick={toggleSimulation}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n            >\n              {isSimulationRunning ? (\n                <Pause className=\"h-4 w-4\" />\n              ) : (\n                <Play className=\"h-4 w-4\" />\n              )}\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">\n            {isSimulationRunning ? 'Pause simulation' : 'Start simulation'}\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              onClick={startWithEnergy}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n            >\n              <Wind className=\"h-4 w-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">\n            Push energy into simulation\n          </TooltipContent>\n        </Tooltip>\n      </div>\n      {simulationSliders.map(({key, label, min, max, step}) => (\n        <div key={key} className=\"space-y-2\">\n          <div className=\"flex items-center justify-between\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Label\n                  htmlFor={key}\n                  className=\"text-xs font-medium flex items-center gap-1 cursor-help\"\n                >\n                  <Info className=\"w-3 h-3 text-muted-foreground/50\" />\n                  {label}\n                </Label>\n              </TooltipTrigger>\n              <TooltipContent side=\"left\" className=\"max-w-[200px]\">\n                {CosmosSliceConfig.shape.cosmos.shape[key].description}\n              </TooltipContent>\n            </Tooltip>\n            <span className=\"text-xs tabular-nums text-muted-foreground\">\n              {config[key].toFixed(2)}\n            </span>\n          </div>\n          <Slider\n            id={key}\n            min={min}\n            max={max}\n            step={step}\n            value={[config[key]]}\n            onValueChange={(value) => handleParameterChange(key, value)}\n            className=\"w-full\"\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/CosmosSlice.js

@@ -25,7 +25,7 @@ export function createCosmosSlice() {
                 }
                 // Create and configure new graph
                 const graph = new Graph(container);
-                const config = get().project.config.cosmos;
+                const config = get().config.cosmos;
                 graph.setConfig(config);
                 graph.start();
                 set((state) => produce(state, (draft) => {
@@ -67,18 +67,18 @@ export function createCosmosSlice() {
             updateSimulationConfig: (config) => {
                 const { graph } = get().cosmos;
                 set((state) => produce(state, (draft) => {
-                    Object.assign(draft.project.config.cosmos, config);
+                    Object.assign(draft.config.cosmos, config);
                     if (graph) {
-                        graph.setConfig(draft.project.config.cosmos);
+                        graph.setConfig(draft.config.cosmos);
                     }
                 }));
             },
             updateGraphConfig: (config) => {
                 const { graph } = get().cosmos;
                 set((state) => produce(state, (draft) => {
-                    Object.assign(draft.project.config.cosmos, config);
+                    Object.assign(draft.config.cosmos, config);
                     if (graph) {
-                        graph.setConfig(draft.project.config.cosmos);
+                        graph.setConfig(draft.config.cosmos);
                     }
                 }));
             },

package/dist/CosmosSlice.js.map

@@ -1 +1 @@
-{"version":3,"file":"CosmosSlice.js","sourceRoot":"","sources":["../src/CosmosSlice.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Cosmos graph visualization state management using Zustand.\n * This module provides state management and control functions for the Cosmos graph visualization.\n */\n\nimport {Graph, GraphConfigInterface} from '@cosmograph/cosmos';\nimport {\n  createSlice,\n  useBaseProjectStore,\n  type ProjectState,\n} from '@sqlrooms/project-builder';\nimport type {BaseProjectConfig} from '@sqlrooms/project-config';\nimport type {StateCreator} from 'zustand';\nimport {CosmosSliceConfig} from './CosmosSliceConfig';\nimport {produce} from 'immer';\n\n/**\n * Core state interface for the Cosmos graph visualization.\n * Contains the graph instance, simulation state, and all control functions.\n */\nexport type CosmosSliceState = {\n  cosmos: {\n    /** The current graph instance */\n    graph: Graph | null;\n    /** Whether the physics simulation is currently running */\n    isSimulationRunning: boolean;\n    /** Creates a new graph instance in the specified container */\n    createGraph: (container: HTMLDivElement) => void;\n    /** Toggles the physics simulation on/off */\n    toggleSimulation: () => void;\n    /** Adjusts the view to fit all nodes */\n    fitView: () => void;\n    /** Starts the simulation with initial energy */\n    startWithEnergy: () => void;\n    /** Cleans up and removes the current graph */\n    destroyGraph: () => void;\n    /** Updates the simulation configuration parameters */\n    updateSimulationConfig: (\n      config: Partial<CosmosSliceConfig['cosmos']>,\n    ) => void;\n    /** Updates the graph's visual configuration */\n    updateGraphConfig: (config: Partial<GraphConfigInterface>) => void;\n    /** Updates the graph's data (points, links, colors, etc.) */\n    updateGraphData: (data: {\n      pointPositions?: Float32Array;\n      pointColors?: Float32Array;\n      pointSizes?: Float32Array;\n      linkIndexes?: Float32Array;\n      linkColors?: Float32Array;\n    }) => void;\n    /** Sets the currently focused point by its index */\n    setFocusedPoint: (index: number | undefined) => void;\n    /** Sets the zoom level of the graph view */\n    setZoomLevel: (level: number) => void;\n  };\n};\n\n/**\n * Combined type representing the full project state including Cosmos functionality.\n * Merges the base project state with Cosmos-specific state and configuration.\n */\nexport type ProjectStateWithCosmos = ProjectState<\n  BaseProjectConfig & CosmosSliceConfig\n> &\n  CosmosSliceState;\n\n/**\n * Creates a Zustand slice for managing Cosmos graph state.\n * This slice handles graph creation, destruction, configuration, and data updates.\n *\n * @returns A state creator function for the Cosmos slice\n */\nexport function createCosmosSlice(): StateCreator<CosmosSliceState> {\n  return createSlice<BaseProjectConfig & CosmosSliceConfig, CosmosSliceState>(\n    (set, get) => ({\n      cosmos: {\n        graph: null,\n        isSimulationRunning: true,\n\n        createGraph: (container: HTMLDivElement) => {\n          // Clean up old graph if it exists\n          const oldGraph = get().cosmos.graph;\n          if (oldGraph) {\n            oldGraph.pause();\n            oldGraph.destroy();\n          }\n\n          // Create and configure new graph\n          const graph = new Graph(container);\n          const config = get().project.config.cosmos;\n          graph.setConfig(config);\n          graph.start();\n\n          set((state) =>\n            produce(state, (draft) => {\n              draft.cosmos.graph = graph;\n            }),\n          );\n        },\n\n        toggleSimulation: () => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n\n          if (graph.isSimulationRunning) {\n            graph.pause();\n            set((state) =>\n              produce(state, (draft) => {\n                draft.cosmos.isSimulationRunning = false;\n              }),\n            );\n          } else {\n            graph.restart();\n            set((state) =>\n              produce(state, (draft) => {\n                draft.cosmos.isSimulationRunning = true;\n              }),\n            );\n          }\n        },\n\n        fitView: () => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n          graph.fitView();\n        },\n\n        startWithEnergy: () => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n          graph.start(1);\n          set((state) =>\n            produce(state, (draft) => {\n              draft.cosmos.isSimulationRunning = true;\n            }),\n          );\n        },\n\n        updateSimulationConfig: (\n          config: Partial<CosmosSliceConfig['cosmos']>,\n        ) => {\n          const {graph} = get().cosmos;\n\n          set((state) =>\n            produce(state, (draft) => {\n              Object.assign(draft.project.config.cosmos, config);\n              if (graph) {\n                graph.setConfig(draft.project.config.cosmos);\n              }\n            }),\n          );\n        },\n\n        updateGraphConfig: (config: Partial<GraphConfigInterface>) => {\n          const {graph} = get().cosmos;\n\n          set((state) =>\n            produce(state, (draft) => {\n              Object.assign(draft.project.config.cosmos, config);\n              if (graph) {\n                graph.setConfig(draft.project.config.cosmos);\n              }\n            }),\n          );\n        },\n\n        updateGraphData: (data) => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n\n          if (data.pointPositions) {\n            graph.setPointPositions(data.pointPositions);\n          }\n          if (data.pointColors) {\n            graph.setPointColors(data.pointColors);\n          }\n          if (data.pointSizes) {\n            graph.setPointSizes(data.pointSizes);\n          }\n          if (data.linkIndexes) {\n            graph.setLinks(data.linkIndexes);\n          }\n          if (data.linkColors) {\n            graph.setLinkColors(data.linkColors);\n          }\n\n          graph.render();\n        },\n\n        setFocusedPoint: (index) => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n          graph.setFocusedPointByIndex(index);\n        },\n\n        setZoomLevel: (level) => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n          graph.setZoomLevel(level);\n        },\n\n        destroyGraph: () => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n          // TODO: this should be happening in cosmos\n          if ((graph as any).store.div?.firstChild) {\n            (graph as any).store.div.innerHTML = '';\n          }\n          graph.pause();\n          graph.destroy();\n          set((state) =>\n            produce(state, (draft) => {\n              draft.cosmos.graph = null;\n              draft.cosmos.isSimulationRunning = false;\n            }),\n          );\n        },\n      },\n    }),\n  );\n}\n\n/**\n * Hook to access the Cosmos store with proper typing.\n * Provides type-safe access to the combined project and Cosmos state.\n *\n * @template T The type of the selected state slice\n * @param selector A function that selects a portion of the state\n * @returns The selected state portion\n *\n * @example\n * ```typescript\n * const graph = useStoreWithCosmos(state => state.cosmos.graph);\n * const isRunning = useStoreWithCosmos(state => state.cosmos.isSimulationRunning);\n * ```\n */\nexport function useStoreWithCosmos<T>(\n  selector: (state: ProjectStateWithCosmos) => T,\n): T {\n  return useBaseProjectStore<\n    BaseProjectConfig & CosmosSliceConfig,\n    ProjectStateWithCosmos,\n    T\n  >((state) => selector(state as ProjectStateWithCosmos));\n}\n"]}
+{"version":3,"file":"CosmosSlice.js","sourceRoot":"","sources":["../src/CosmosSlice.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Cosmos graph visualization state management using Zustand.\n * This module provides state management and control functions for the Cosmos graph visualization.\n */\n\nimport {Graph, GraphConfigInterface} from '@cosmograph/cosmos';\nimport {\n  createSlice,\n  useBaseProjectStore,\n  type ProjectState,\n} from '@sqlrooms/project-builder';\nimport type {BaseProjectConfig} from '@sqlrooms/project-config';\nimport type {StateCreator} from 'zustand';\nimport {CosmosSliceConfig} from './CosmosSliceConfig';\nimport {produce} from 'immer';\n\n/**\n * Core state interface for the Cosmos graph visualization.\n * Contains the graph instance, simulation state, and all control functions.\n */\nexport type CosmosSliceState = {\n  cosmos: {\n    /** The current graph instance */\n    graph: Graph | null;\n    /** Whether the physics simulation is currently running */\n    isSimulationRunning: boolean;\n    /** Creates a new graph instance in the specified container */\n    createGraph: (container: HTMLDivElement) => void;\n    /** Toggles the physics simulation on/off */\n    toggleSimulation: () => void;\n    /** Adjusts the view to fit all nodes */\n    fitView: () => void;\n    /** Starts the simulation with initial energy */\n    startWithEnergy: () => void;\n    /** Cleans up and removes the current graph */\n    destroyGraph: () => void;\n    /** Updates the simulation configuration parameters */\n    updateSimulationConfig: (\n      config: Partial<CosmosSliceConfig['cosmos']>,\n    ) => void;\n    /** Updates the graph's visual configuration */\n    updateGraphConfig: (config: Partial<GraphConfigInterface>) => void;\n    /** Updates the graph's data (points, links, colors, etc.) */\n    updateGraphData: (data: {\n      pointPositions?: Float32Array;\n      pointColors?: Float32Array;\n      pointSizes?: Float32Array;\n      linkIndexes?: Float32Array;\n      linkColors?: Float32Array;\n    }) => void;\n    /** Sets the currently focused point by its index */\n    setFocusedPoint: (index: number | undefined) => void;\n    /** Sets the zoom level of the graph view */\n    setZoomLevel: (level: number) => void;\n  };\n};\n\n/**\n * Combined type representing the full project state including Cosmos functionality.\n * Merges the base project state with Cosmos-specific state and configuration.\n */\nexport type ProjectStateWithCosmos = ProjectState<\n  BaseProjectConfig & CosmosSliceConfig\n> &\n  CosmosSliceState;\n\n/**\n * Creates a Zustand slice for managing Cosmos graph state.\n * This slice handles graph creation, destruction, configuration, and data updates.\n *\n * @returns A state creator function for the Cosmos slice\n */\nexport function createCosmosSlice(): StateCreator<CosmosSliceState> {\n  return createSlice<BaseProjectConfig & CosmosSliceConfig, CosmosSliceState>(\n    (set, get) => ({\n      cosmos: {\n        graph: null,\n        isSimulationRunning: true,\n\n        createGraph: (container: HTMLDivElement) => {\n          // Clean up old graph if it exists\n          const oldGraph = get().cosmos.graph;\n          if (oldGraph) {\n            oldGraph.pause();\n            oldGraph.destroy();\n          }\n\n          // Create and configure new graph\n          const graph = new Graph(container);\n          const config = get().config.cosmos;\n          graph.setConfig(config);\n          graph.start();\n\n          set((state) =>\n            produce(state, (draft) => {\n              draft.cosmos.graph = graph;\n            }),\n          );\n        },\n\n        toggleSimulation: () => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n\n          if (graph.isSimulationRunning) {\n            graph.pause();\n            set((state) =>\n              produce(state, (draft) => {\n                draft.cosmos.isSimulationRunning = false;\n              }),\n            );\n          } else {\n            graph.restart();\n            set((state) =>\n              produce(state, (draft) => {\n                draft.cosmos.isSimulationRunning = true;\n              }),\n            );\n          }\n        },\n\n        fitView: () => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n          graph.fitView();\n        },\n\n        startWithEnergy: () => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n          graph.start(1);\n          set((state) =>\n            produce(state, (draft) => {\n              draft.cosmos.isSimulationRunning = true;\n            }),\n          );\n        },\n\n        updateSimulationConfig: (\n          config: Partial<CosmosSliceConfig['cosmos']>,\n        ) => {\n          const {graph} = get().cosmos;\n\n          set((state) =>\n            produce(state, (draft) => {\n              Object.assign(draft.config.cosmos, config);\n              if (graph) {\n                graph.setConfig(draft.config.cosmos);\n              }\n            }),\n          );\n        },\n\n        updateGraphConfig: (config: Partial<GraphConfigInterface>) => {\n          const {graph} = get().cosmos;\n\n          set((state) =>\n            produce(state, (draft) => {\n              Object.assign(draft.config.cosmos, config);\n              if (graph) {\n                graph.setConfig(draft.config.cosmos);\n              }\n            }),\n          );\n        },\n\n        updateGraphData: (data) => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n\n          if (data.pointPositions) {\n            graph.setPointPositions(data.pointPositions);\n          }\n          if (data.pointColors) {\n            graph.setPointColors(data.pointColors);\n          }\n          if (data.pointSizes) {\n            graph.setPointSizes(data.pointSizes);\n          }\n          if (data.linkIndexes) {\n            graph.setLinks(data.linkIndexes);\n          }\n          if (data.linkColors) {\n            graph.setLinkColors(data.linkColors);\n          }\n\n          graph.render();\n        },\n\n        setFocusedPoint: (index) => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n          graph.setFocusedPointByIndex(index);\n        },\n\n        setZoomLevel: (level) => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n          graph.setZoomLevel(level);\n        },\n\n        destroyGraph: () => {\n          const {graph} = get().cosmos;\n          if (!graph) return;\n          // TODO: this should be happening in cosmos\n          if ((graph as any).store.div?.firstChild) {\n            (graph as any).store.div.innerHTML = '';\n          }\n          graph.pause();\n          graph.destroy();\n          set((state) =>\n            produce(state, (draft) => {\n              draft.cosmos.graph = null;\n              draft.cosmos.isSimulationRunning = false;\n            }),\n          );\n        },\n      },\n    }),\n  );\n}\n\n/**\n * Hook to access the Cosmos store with proper typing.\n * Provides type-safe access to the combined project and Cosmos state.\n *\n * @template T The type of the selected state slice\n * @param selector A function that selects a portion of the state\n * @returns The selected state portion\n *\n * @example\n * ```typescript\n * const graph = useStoreWithCosmos(state => state.cosmos.graph);\n * const isRunning = useStoreWithCosmos(state => state.cosmos.isSimulationRunning);\n * ```\n */\nexport function useStoreWithCosmos<T>(\n  selector: (state: ProjectStateWithCosmos) => T,\n): T {\n  return useBaseProjectStore<\n    BaseProjectConfig & CosmosSliceConfig,\n    ProjectStateWithCosmos,\n    T\n  >((state) => selector(state as ProjectStateWithCosmos));\n}\n"]}

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;IAkChE,sHAAsH;;IAEtH,0DAA0D;;;;;;;CAG7D,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,GACxB,yBAAyB,UAAU,CAAC,OAAO,sBAAsB,CAAC;IAkChE,sHAAsH;;IAEtH,0DAA0D;;;;;;;CAG7D,CAAC"}

package/dist/index.d.ts

@@ -1,126 +1,16 @@
 /**
- * @sqlrooms/cosmos - A React wrapper for the Cosmograph visualization library
- *
- * 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 through zustand, and controlling graph interactions.
- *
- * @example Basic usage
- * ```tsx
- * import { CosmosGraph, CosmosGraphControls } from '@sqlrooms/cosmos';
- *
- * const MyGraph = () => {
- *   return (
- *     <div style={{ width: '800px', height: '600px' }}>
- *       <CosmosGraph
- *         config={graphConfig}
- *         pointPositions={positions}
- *         pointColors={colors}
- *         pointSizes={sizes}
- *       >
- *         <CosmosGraphControls />
- *       </CosmosGraph>
- *     </div>
- *   );
- * };
- * ```
- *
+ * {@include ../README.md}
  * @packageDocumentation
  */
 export { CosmosGraph } from './CosmosGraph';
 export { CosmosGraphControls } from './CosmosGraphControls';
 /**
  * A component that provides fine-grained controls for the graph simulation parameters.
- * Uses the zustand store to access and control the graph state.
- *
- * Features:
- * - Slider controls for gravity, repulsion, link strength, link distance, friction, and decay
- * - Real-time parameter adjustment with immediate visual feedback
- * - Tooltips with parameter descriptions
- * - Customizable positioning
- *
- * @example Basic usage
- * ```tsx
- * <CosmosGraph {...graphProps}>
- *   <CosmosSimulationControls />
- * </CosmosGraph>
- * ```
- *
- * @example Custom positioning
- * ```tsx
- * <CosmosGraph {...graphProps}>
- *   <CosmosSimulationControls className="absolute bottom-4 left-4" />
- * </CosmosGraph>
- * ```
  */
 export { CosmosSimulationControls } from './CosmosSimulationControls';
 export type { CosmosGraphProps } from './CosmosGraph';
 export { useHoverState } from './hooks/useHoverState';
 export { createCosmosSlice, useStoreWithCosmos, type CosmosSliceState, type ProjectStateWithCosmos, } from './CosmosSlice';
 export { CosmosSliceConfig, createDefaultCosmosConfig, type CosmosSliceConfig as CosmosSliceConfigType, } from './CosmosSliceConfig';
-/**
- * Configuration schema for the Cosmos graph visualization system.
- * Provides type-safe validation and configuration options for both visual and physics aspects of the graph.
- *
- * Configuration Categories:
- *
- * 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 { 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 = {
- *   cosmos: {
- *     // Visual settings
- *     pointSizeScale: 1.2,
- *     linkArrows: true,
- *     curvedLinks: true,
- *
- *     // 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 * 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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D;;GAEG;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,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -1,30 +1,5 @@
 /**
- * @sqlrooms/cosmos - A React wrapper for the Cosmograph visualization library
- *
- * 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 through zustand, and controlling graph interactions.
- *
- * @example Basic usage
- * ```tsx
- * import { CosmosGraph, CosmosGraphControls } from '@sqlrooms/cosmos';
- *
- * const MyGraph = () => {
- *   return (
- *     <div style={{ width: '800px', height: '600px' }}>
- *       <CosmosGraph
- *         config={graphConfig}
- *         pointPositions={positions}
- *         pointColors={colors}
- *         pointSizes={sizes}
- *       >
- *         <CosmosGraphControls />
- *       </CosmosGraph>
- *     </div>
- *   );
- * };
- * ```
- *
+ * {@include ../README.md}
  * @packageDocumentation
  */
 // Components
@@ -32,27 +7,6 @@ export { CosmosGraph } from './CosmosGraph';
 export { CosmosGraphControls } from './CosmosGraphControls';
 /**
  * A component that provides fine-grained controls for the graph simulation parameters.
- * Uses the zustand store to access and control the graph state.
- *
- * Features:
- * - Slider controls for gravity, repulsion, link strength, link distance, friction, and decay
- * - Real-time parameter adjustment with immediate visual feedback
- * - Tooltips with parameter descriptions
- * - Customizable positioning
- *
- * @example Basic usage
- * ```tsx
- * <CosmosGraph {...graphProps}>
- *   <CosmosSimulationControls />
- * </CosmosGraph>
- * ```
- *
- * @example Custom positioning
- * ```tsx
- * <CosmosGraph {...graphProps}>
- *   <CosmosSimulationControls className="absolute bottom-4 left-4" />
- * </CosmosGraph>
- * ```
  */
 export { CosmosSimulationControls } from './CosmosSimulationControls';
 // State management
@@ -60,69 +14,5 @@ export { useHoverState } from './hooks/useHoverState';
 export { createCosmosSlice, useStoreWithCosmos, } from './CosmosSlice';
 export { CosmosSliceConfig, createDefaultCosmosConfig, } from './CosmosSliceConfig';
 // Configuration
-/**
- * Configuration schema for the Cosmos graph visualization system.
- * Provides type-safe validation and configuration options for both visual and physics aspects of the graph.
- *
- * Configuration Categories:
- *
- * 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 { 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 = {
- *   cosmos: {
- *     // Visual settings
- *     pointSizeScale: 1.2,
- *     linkArrows: true,
- *     curvedLinks: true,
- *
- *     // 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 * from './CosmosSliceConfig';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,aAAa;AACb,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;AAGpE,mBAAmB;AACnB,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACpD,OAAO,EACL,iBAAiB,EACjB,kBAAkB,GAGnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EACjB,yBAAyB,GAE1B,MAAM,qBAAqB,CAAC;AAE7B,gBAAgB;AAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,cAAc,qBAAqB,CAAC","sourcesContent":["/**\n * @sqlrooms/cosmos - A React wrapper for the Cosmograph visualization library\n *\n * This package provides React components and hooks for creating interactive graph visualizations\n * using the Cosmograph WebGL-based graph visualization library. It includes components for\n * rendering graphs, managing graph state through zustand, and controlling graph interactions.\n *\n * @example Basic usage\n * ```tsx\n * import { CosmosGraph, CosmosGraphControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n *   return (\n *     <div style={{ width: '800px', height: '600px' }}>\n *       <CosmosGraph\n *         config={graphConfig}\n *         pointPositions={positions}\n *         pointColors={colors}\n *         pointSizes={sizes}\n *       >\n *         <CosmosGraphControls />\n *       </CosmosGraph>\n *     </div>\n *   );\n * };\n * ```\n *\n * @packageDocumentation\n */\n\n// Components\nexport {CosmosGraph} from './CosmosGraph';\nexport {CosmosGraphControls} from './CosmosGraphControls';\n\n/**\n * A component that provides fine-grained controls for the graph simulation parameters.\n * Uses the zustand store to access and control the graph state.\n *\n * Features:\n * - Slider controls for gravity, repulsion, link strength, link distance, friction, and decay\n * - Real-time parameter adjustment with immediate visual feedback\n * - Tooltips with parameter descriptions\n * - Customizable positioning\n *\n * @example Basic usage\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosSimulationControls />\n * </CosmosGraph>\n * ```\n *\n * @example Custom positioning\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosSimulationControls className=\"absolute bottom-4 left-4\" />\n * </CosmosGraph>\n * ```\n */\nexport {CosmosSimulationControls} from './CosmosSimulationControls';\nexport type {CosmosGraphProps} from './CosmosGraph';\n\n// State management\nexport {useHoverState} from './hooks/useHoverState';\nexport {\n  createCosmosSlice,\n  useStoreWithCosmos,\n  type CosmosSliceState,\n  type ProjectStateWithCosmos,\n} from './CosmosSlice';\nexport {\n  CosmosSliceConfig,\n  createDefaultCosmosConfig,\n  type CosmosSliceConfig as CosmosSliceConfigType,\n} from './CosmosSliceConfig';\n\n// Configuration\n/**\n * Configuration schema for the Cosmos graph visualization system.\n * Provides type-safe validation and configuration options for both visual and physics aspects of the graph.\n *\n * Configuration Categories:\n *\n * 1. Visual Appearance\n * - Node styling: size scaling and zoom behavior\n * - Link styling: visibility, width, arrows, and curve options\n *\n * 2. Physics Simulation\n * - Gravity: Central force pulling nodes toward center\n * - Repulsion: Force pushing nodes apart\n * - Link Forces: Spring forces and distances between connected nodes\n * - Dynamics: Friction and decay rates for movement\n *\n * Key Parameters:\n * - `pointSizeScale` (number): Base scale for node sizes (default: 1.1)\n * - `scalePointsOnZoom` (boolean): Dynamic node sizing with zoom (default: true)\n * - `renderLinks` (boolean): Toggle link visibility (default: true)\n * - `linkArrows` (boolean): Show directional arrows (default: false)\n * - `curvedLinks` (boolean): Use curved or straight links (default: false)\n * - `simulationGravity` (number): Center attraction strength (default: 0.25)\n * - `simulationRepulsion` (number): Node repulsion strength (default: 1.0)\n * - `simulationLinkSpring` (number): Link elasticity (default: 1.0)\n * - `simulationFriction` (number): Movement damping (default: 0.85)\n * - `simulationDecay` (number): Simulation cooling rate (default: 1000)\n *\n * @example Typical usage with default-like values\n * ```tsx\n * import { CosmosGraph, createDefaultCosmosConfig } from '@sqlrooms/cosmos';\n *\n * const config = createDefaultCosmosConfig();\n *\n * function MyGraph() {\n *   return (\n *     <CosmosGraph\n *       config={config}\n *       data={graphData}\n *     />\n *   );\n * }\n * ```\n *\n * @example Custom configuration for directed graph\n * ```tsx\n * const config = {\n *   cosmos: {\n *     // Visual settings\n *     pointSizeScale: 1.2,\n *     linkArrows: true,\n *     curvedLinks: true,\n *\n *     // Physics settings\n *     simulationGravity: 0.2,\n *     simulationLinkDistance: 15,\n *     simulationLinkSpring: 1.2\n *   }\n * };\n * ```\n *\n * @see {@link CosmosGraph} For the main graph component\n * @see {@link CosmosSimulationControls} For runtime control of simulation parameters\n */\nexport * from './CosmosSliceConfig';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,aAAa;AACb,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D;;GAEG;AACH,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAGpE,mBAAmB;AACnB,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACpD,OAAO,EACL,iBAAiB,EACjB,kBAAkB,GAGnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EACjB,yBAAyB,GAE1B,MAAM,qBAAqB,CAAC;AAE7B,gBAAgB;AAChB,cAAc,qBAAqB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\n// Components\nexport {CosmosGraph} from './CosmosGraph';\nexport {CosmosGraphControls} from './CosmosGraphControls';\n\n/**\n * A component that provides fine-grained controls for the graph simulation parameters.\n */\nexport {CosmosSimulationControls} from './CosmosSimulationControls';\nexport type {CosmosGraphProps} from './CosmosGraph';\n\n// State management\nexport {useHoverState} from './hooks/useHoverState';\nexport {\n  createCosmosSlice,\n  useStoreWithCosmos,\n  type CosmosSliceState,\n  type ProjectStateWithCosmos,\n} from './CosmosSlice';\nexport {\n  CosmosSliceConfig,\n  createDefaultCosmosConfig,\n  type CosmosSliceConfig as CosmosSliceConfigType,\n} from './CosmosSliceConfig';\n\n// Configuration\nexport * from './CosmosSliceConfig';\n"]}

package/dist/utils/coordinates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"coordinates.d.ts","sourceRoot":"","sources":["../../src/utils/coordinates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,oBAAoB,UACxB,OAAO,KACb,KAAK,IAAI,qBASX,CAAC"}
+{"version":3,"file":"coordinates.d.ts","sourceRoot":"","sources":["../../src/utils/coordinates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,OAAO,KACb,KAAK,IAAI,qBASX,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/cosmos",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -20,9 +20,9 @@
   },
   "dependencies": {
     "@cosmograph/cosmos": "2.0.0-beta.22",
-    "@sqlrooms/project-builder": "0.6.0",
-    "@sqlrooms/project-config": "0.6.0",
-    "@sqlrooms/ui": "0.6.0",
+    "@sqlrooms/project-builder": "0.8.0",
+    "@sqlrooms/project-config": "0.8.0",
+    "@sqlrooms/ui": "0.8.0",
     "immer": "^10.1.1",
     "lucide-react": "^0.474.0",
     "zod": "^3.24.1",
@@ -38,5 +38,5 @@
     "lint": "eslint .",
     "typedoc": "typedoc"
   },
-  "gitHead": "f46dfe6b5d135e1a039b49b3ba71cda7150eab0f"
+  "gitHead": "99b46a96ab900e6b005bcd30cfbfe7b3c9d51f8d"
 }