@sqlrooms/cosmos 0.4.2 → 0.5.0

package/dist/CosmosGraph.d.ts

@@ -19,7 +19,7 @@ export type CosmosGraphProps = {
     /** Optional index of the point to focus on */
     focusedPointIndex?: number | undefined;
     /** Optional function to render custom tooltip content for a point */
-    getPointTooltip?: (index: number) => React.ReactNode;
+    renderPointTooltip?: (index: number) => React.ReactNode;
     /** Optional child elements to render inside the graph container */
     children?: React.ReactNode;
 };
@@ -30,7 +30,7 @@ export type CosmosGraphProps = {
  * - Renders points and optional links in a WebGL canvas
  * - Supports point hovering with customizable tooltips
  * - Handles point focusing
- * - Provides graph context to child components
+ * - Provides graph state to child components through zustand store
  *
  * @example
  * ```tsx
@@ -51,7 +51,7 @@ export type CosmosGraphProps = {
  *         pointPositions={new Float32Array([0, 0, 1, 1])}
  *         pointColors={new Float32Array([1, 0, 0, 1, 0, 1, 0, 1])}
  *         pointSizes={new Float32Array([5, 5])}
- *         getPointTooltip={(index) => `Point ${index}`}
+ *         renderPointTooltip={(index) => `Point ${index}`}
  *       >
  *         <GraphControls />
  *       </CosmosGraph>

package/dist/CosmosGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CosmosGraph.d.ts","sourceRoot":"","sources":["../src/CosmosGraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAC,EAAE,EAAS,MAAM,OAAO,CAAC;AAIjC;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4EAA4E;IAC5E,MAAM,EAAE,oBAAoB,CAAC;IAC7B,kFAAkF;IAClF,cAAc,EAAE,YAAY,CAAC;IAC7B,6EAA6E;IAC7E,UAAU,EAAE,YAAY,CAAC;IACzB,8EAA8E;IAC9E,WAAW,EAAE,YAAY,CAAC;IAC1B,6EAA6E;IAC7E,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,qFAAqF;IACrF,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,qEAAqE;IACrE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,mEAAmE;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA6D5C,CAAC"}
+{"version":3,"file":"CosmosGraph.d.ts","sourceRoot":"","sources":["../src/CosmosGraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAC,EAAE,EAAoB,MAAM,OAAO,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4EAA4E;IAC5E,MAAM,EAAE,oBAAoB,CAAC;IAC7B,kFAAkF;IAClF,cAAc,EAAE,YAAY,CAAC;IAC7B,6EAA6E;IAC7E,UAAU,EAAE,YAAY,CAAC;IACzB,8EAA8E;IAC9E,WAAW,EAAE,YAAY,CAAC;IAC1B,6EAA6E;IAC7E,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,qFAAqF;IACrF,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,mEAAmE;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAoF5C,CAAC"}

package/dist/CosmosGraph.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, useRelativeCoordinates } from '@sqlrooms/ui';
-import { useRef } from 'react';
-import { CosmosGraphProvider } from './CosmosGraphContext';
-import { useGraph, useHoverState, useGraphConfig } from './hooks';
+import { useEffect, useRef } from 'react';
+import { useStoreWithCosmos } from './CosmosSlice';
+import { useHoverState } from './hooks/useHoverState';
 /**
  * A React component that renders an interactive graph visualization using Cosmos.
  *
@@ -10,7 +10,7 @@ import { useGraph, useHoverState, useGraphConfig } from './hooks';
  * - Renders points and optional links in a WebGL canvas
  * - Supports point hovering with customizable tooltips
  * - Handles point focusing
- * - Provides graph context to child components
+ * - Provides graph state to child components through zustand store
  *
  * @example
  * ```tsx
@@ -31,7 +31,7 @@ import { useGraph, useHoverState, useGraphConfig } from './hooks';
  *         pointPositions={new Float32Array([0, 0, 1, 1])}
  *         pointColors={new Float32Array([1, 0, 0, 1, 0, 1, 0, 1])}
  *         pointSizes={new Float32Array([5, 5])}
- *         getPointTooltip={(index) => `Point ${index}`}
+ *         renderPointTooltip={(index) => `Point ${index}`}
  *       >
  *         <GraphControls />
  *       </CosmosGraph>
@@ -40,15 +40,53 @@ import { useGraph, useHoverState, useGraphConfig } from './hooks';
  * };
  * ```
  */
-export const CosmosGraph = ({ config, pointPositions, pointSizes, pointColors, linkIndexes, linkColors, focusedPointIndex, getPointTooltip, children, }) => {
+export const CosmosGraph = ({ config, pointPositions, pointSizes, pointColors, linkIndexes, linkColors, focusedPointIndex, renderPointTooltip, children, }) => {
     const containerRef = useRef(null);
     const calcRelativeCoordinates = useRelativeCoordinates(containerRef);
-    const { hoveredPoint, onPointMouseOver, clearHoverState } = useHoverState(calcRelativeCoordinates);
-    const configWithCallbacks = useGraphConfig(config, onPointMouseOver, clearHoverState);
-    const graphRef = useGraph(containerRef, configWithCallbacks, pointPositions, pointColors, pointSizes, linkIndexes, linkColors, focusedPointIndex);
-    return (_jsx(CosmosGraphProvider, { graphRef: graphRef, children: _jsxs("div", { className: "relative w-full h-full", children: [_jsx("div", { ref: containerRef, className: "absolute w-full h-full" }), getPointTooltip ? (_jsx("div", { className: cn('absolute z-50 max-w-xs', 'bg-white/90 dark:bg-gray-800/90 rounded-md shadow-lg p-2', 'text-xs flex gap-2 items-center pointer-events-none transition-opacity duration-150', hoveredPoint ? 'opacity-100' : 'opacity-0'), style: {
-                        transform: `translate(${hoveredPoint?.position?.[0] ?? 0}px, ${hoveredPoint?.position?.[1] ?? 0}px) translate(-50%, 5px)`,
-                        visibility: hoveredPoint ? 'visible' : 'hidden',
-                    }, children: _jsx("div", { children: getPointTooltip?.(hoveredPoint?.index ?? 0) }) })) : null, children] }) }));
+    const { hoveredPoint, eventHandlers } = useHoverState(calcRelativeCoordinates);
+    const createGraph = useStoreWithCosmos((s) => s.cosmos.createGraph);
+    const destroyGraph = useStoreWithCosmos((s) => s.cosmos.destroyGraph);
+    const updateGraphConfig = useStoreWithCosmos((s) => s.cosmos.updateGraphConfig);
+    const updateGraphData = useStoreWithCosmos((s) => s.cosmos.updateGraphData);
+    const setFocusedPoint = useStoreWithCosmos((s) => s.cosmos.setFocusedPoint);
+    // Create graph instance and clean up on unmount
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        createGraph(containerRef.current);
+        return () => destroyGraph();
+    }, [createGraph, destroyGraph]);
+    // Update graph config when it changes
+    useEffect(() => {
+        updateGraphConfig({
+            ...config,
+            ...eventHandlers,
+        });
+    }, [config, eventHandlers, updateGraphConfig]);
+    // Update graph data when props change
+    useEffect(() => {
+        updateGraphData({
+            pointPositions,
+            pointColors,
+            pointSizes,
+            linkIndexes,
+            linkColors,
+        });
+    }, [
+        updateGraphData,
+        pointPositions,
+        pointColors,
+        pointSizes,
+        linkIndexes,
+        linkColors,
+    ]);
+    // Update focus when it changes
+    useEffect(() => {
+        setFocusedPoint(focusedPointIndex);
+    }, [setFocusedPoint, focusedPointIndex]);
+    return (_jsxs("div", { className: "relative w-full h-full", children: [_jsx("div", { ref: containerRef, className: "absolute w-full h-full" }), renderPointTooltip ? (_jsx("div", { className: cn('absolute z-50 max-w-xs', 'bg-white/90 dark:bg-gray-800/90 rounded-md shadow-lg p-2', 'text-xs flex gap-2 items-center pointer-events-none transition-opacity duration-150', hoveredPoint ? 'opacity-100' : 'opacity-0'), style: {
+                    transform: `translate(${hoveredPoint?.position?.[0] ?? 0}px, ${hoveredPoint?.position?.[1] ?? 0}px) translate(-50%, 5px)`,
+                    visibility: hoveredPoint ? 'visible' : 'hidden',
+                }, children: _jsx("div", { children: renderPointTooltip?.(hoveredPoint?.index ?? 0) }) })) : null, children] }));
 };
 //# sourceMappingURL=CosmosGraph.js.map

package/dist/CosmosGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"CosmosGraph.js","sourceRoot":"","sources":["../src/CosmosGraph.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,EAAE,EAAE,sBAAsB,EAAC,MAAM,cAAc,CAAC;AACxD,OAAO,EAAK,MAAM,EAAC,MAAM,OAAO,CAAC;AACjC,OAAO,EAAC,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AA0BhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,MAAM,EACN,cAAc,EACd,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,uBAAuB,GAAG,sBAAsB,CAAC,YAAY,CAAC,CAAC;IAErE,MAAM,EAAC,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAC,GAAG,aAAa,CACrE,uBAAuB,CACxB,CAAC;IAEF,MAAM,mBAAmB,GAAG,cAAc,CACxC,MAAM,EACN,gBAAgB,EAChB,eAAe,CAChB,CAAC;IAEF,MAAM,QAAQ,GAAG,QAAQ,CACvB,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,WAAW,EACX,UAAU,EACV,WAAW,EACX,UAAU,EACV,iBAAiB,CAClB,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,IAAC,QAAQ,EAAE,QAAQ,YACrC,eAAK,SAAS,EAAC,wBAAwB,aACrC,cAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAC,wBAAwB,GAAG,EAC5D,eAAe,CAAC,CAAC,CAAC,CACjB,cACE,SAAS,EAAE,EAAE,CACX,wBAAwB,EACxB,0DAA0D,EAC1D,qFAAqF,EACrF,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAC3C,EACD,KAAK,EAAE;wBACL,SAAS,EAAE,aAAa,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OACtD,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CACjC,0BAA0B;wBAC1B,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;qBAChD,YAED,wBAAM,eAAe,EAAE,CAAC,YAAY,EAAE,KAAK,IAAI,CAAC,CAAC,GAAO,GACpD,CACP,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,IACL,GACc,CACvB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"CosmosGraph.js","sourceRoot":"","sources":["../src/CosmosGraph.tsx"],"names":[],"mappings":"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"}

package/dist/CosmosGraphControls.d.ts

@@ -13,7 +13,7 @@ interface CosmosGraphControlsProps {
 }
 /**
  * A flexible control panel component for CosmosGraph that provides view controls.
- * Must be used within a CosmosGraph component as it relies on the CosmosGraphContext.
+ * Must be used within a CosmosGraph component as it relies on the graph state from the store.
  *
  * The component shows the default fit view control and allows adding custom controls as children.
  * For simulation controls, use the CosmosSimulationControls component.

package/dist/CosmosGraphControls.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, cn } from '@sqlrooms/ui';
 import { Maximize2 } from 'lucide-react';
-import { useCosmosGraph } from './CosmosGraphContext';
+import { useStoreWithCosmos } from './CosmosSlice';
 /**
  * A flexible control panel component for CosmosGraph that provides view controls.
- * Must be used within a CosmosGraph component as it relies on the CosmosGraphContext.
+ * Must be used within a CosmosGraph component as it relies on the graph state from the store.
  *
  * The component shows the default fit view control and allows adding custom controls as children.
  * For simulation controls, use the CosmosSimulationControls component.
@@ -35,7 +35,7 @@ import { useCosmosGraph } from './CosmosGraphContext';
  * ```
  */
 export const CosmosGraphControls = ({ className, children }) => {
-    const { handleFitView } = useCosmosGraph();
-    return (_jsxs("div", { className: cn('absolute top-1 left-1 flex gap-2', className), children: [_jsx(Button, { onClick: handleFitView, variant: "outline", size: "sm", children: _jsx(Maximize2, { className: "h-4 w-4" }) }), children] }));
+    const { fitView } = useStoreWithCosmos((s) => s.cosmos);
+    return (_jsxs("div", { className: cn('absolute top-1 left-1 flex gap-2', className), children: [_jsx(Button, { onClick: fitView, variant: "outline", size: "sm", children: _jsx(Maximize2, { className: "h-4 w-4" }) }), children] }));
 };
 //# sourceMappingURL=CosmosGraphControls.js.map

package/dist/CosmosGraphControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"CosmosGraphControls.js","sourceRoot":"","sources":["../src/CosmosGraphControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AAepD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAE5B,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC5B,MAAM,EAAC,aAAa,EAAC,GAAG,cAAc,EAAE,CAAC;IAEzC,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,aAC/D,KAAC,MAAM,IAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,YACzD,KAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,GAC1B,EACR,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"CosmosGraphControls.js","sourceRoot":"","sources":["../src/CosmosGraphControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAejD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAE5B,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC5B,MAAM,EAAC,OAAO,EAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAEtD,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,aAC/D,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,YACnD,KAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,GAC1B,EACR,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/CosmosSimulationControls.d.ts

@@ -17,7 +17,7 @@ interface CosmosSimulationControlsProps {
 }
 /**
  * A component that provides fine-grained controls for adjusting 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 all simulation parameters
@@ -40,11 +40,9 @@ interface CosmosSimulationControlsProps {
  *
  * const MyGraph = () => {
  *   return (
- *     <div style={{ width: '800px', height: '600px' }}>
  *       <CosmosGraph {...graphProps}>
  *         <CosmosSimulationControls />
  *       </CosmosGraph>
- *     </div>
  *   );
  * };
  * ```
@@ -55,12 +53,10 @@ interface CosmosSimulationControlsProps {
  *
  * const MyGraph = () => {
  *   return (
- *     <div style={{ width: '800px', height: '600px' }}>
  *       <CosmosGraph {...graphProps}>
  *         <CosmosGraphControls className="absolute top-4 left-4" />
  *         <CosmosSimulationControls className="absolute top-4 right-4" />
  *       </CosmosGraph>
- *     </div>
  *   );
  * };
  * ```

package/dist/CosmosSimulationControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CosmosSimulationControls.d.ts","sourceRoot":"","sources":["../src/CosmosSimulationControls.tsx"],"names":[],"mappings":"AASA,OAAO,EAAC,EAAE,EAAW,MAAM,OAAO,CAAC;AAMnC;;GAEG;AACH,UAAU,6BAA6B;IACrC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CA4GtE,CAAC"}
+{"version":3,"file":"CosmosSimulationControls.d.ts","sourceRoot":"","sources":["../src/CosmosSimulationControls.tsx"],"names":[],"mappings":"AASA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAKzB;;GAEG;AACH,UAAU,6BAA6B;IACrC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CA+FtE,CAAC"}

package/dist/CosmosSimulationControls.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, Slider, Label, Tooltip, TooltipContent, TooltipTrigger, Button, } from '@sqlrooms/ui';
-import { useState } from 'react';
-import { useCosmosGraph } from './CosmosGraphContext';
 import { Info, Pause, Play, Wind } from 'lucide-react';
-import { CosmosSimulationConfigSchema } from './config';
+import { useStoreWithCosmos } from './CosmosSlice';
+import { CosmosSliceConfig } from './CosmosSliceConfig';
 /**
  * Configuration for each simulation parameter slider.
  * These values define the range and step size for each parameter.
@@ -17,7 +16,6 @@ const simulationSliders = [
         min: 0,
         max: 0.5,
         step: 0.01,
-        default: 0.25,
     },
     {
         key: 'simulationRepulsion',
@@ -25,7 +23,6 @@ const simulationSliders = [
         min: 0,
         max: 2,
         step: 0.01,
-        default: 1.0,
     },
     {
         key: 'simulationLinkSpring',
@@ -33,7 +30,6 @@ const simulationSliders = [
         min: 0,
         max: 2,
         step: 0.01,
-        default: 1,
     },
     {
         key: 'simulationLinkDistance',
@@ -41,7 +37,6 @@ const simulationSliders = [
         min: 1,
         max: 20,
         step: 1,
-        default: 10,
     },
     {
         key: 'simulationFriction',
@@ -49,7 +44,6 @@ const simulationSliders = [
         min: 0,
         max: 1,
         step: 0.01,
-        default: 0.85,
     },
     {
         key: 'simulationDecay',
@@ -57,12 +51,11 @@ const simulationSliders = [
         min: 100,
         max: 10000,
         step: 100,
-        default: 1000,
     },
 ];
 /**
  * A component that provides fine-grained controls for adjusting 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 all simulation parameters
@@ -85,11 +78,9 @@ const simulationSliders = [
  *
  * const MyGraph = () => {
  *   return (
- *     <div style={{ width: '800px', height: '600px' }}>
  *       <CosmosGraph {...graphProps}>
  *         <CosmosSimulationControls />
  *       </CosmosGraph>
- *     </div>
  *   );
  * };
  * ```
@@ -100,12 +91,10 @@ const simulationSliders = [
  *
  * const MyGraph = () => {
  *   return (
- *     <div style={{ width: '800px', height: '600px' }}>
  *       <CosmosGraph {...graphProps}>
  *         <CosmosGraphControls className="absolute top-4 left-4" />
  *         <CosmosSimulationControls className="absolute top-4 right-4" />
  *       </CosmosGraph>
- *     </div>
  *   );
  * };
  * ```
@@ -120,21 +109,11 @@ const simulationSliders = [
  * ```
  */
 export const CosmosSimulationControls = ({ className, }) => {
-    const { graphRef, isSimulationRunning, handleToggleSimulation, handleStartWithEnergy, } = useCosmosGraph();
-    const [values, setValues] = useState(() => Object.fromEntries(simulationSliders.map(({ key, default: defaultValue }) => [
-        key,
-        defaultValue,
-    ])));
+    const { isSimulationRunning, toggleSimulation, startWithEnergy, updateSimulationConfig, } = useStoreWithCosmos((s) => s.cosmos);
+    const config = useStoreWithCosmos((s) => s.project.config.cosmos);
     const handleParameterChange = (paramKey, value) => {
-        if (!graphRef?.current)
-            return;
-        const newValues = { ...values, [paramKey]: value[0] };
-        setValues(newValues);
-        const config = {
-            [paramKey]: value[0],
-        };
-        graphRef.current.setConfig(config);
+        updateSimulationConfig({ [paramKey]: value[0] });
     };
-    return (_jsxs("div", { className: cn('absolute top-1 right-1 w-48 bg-card/90 dark:bg-card/90 rounded-lg shadow-lg p-3 space-y-4', className), children: [_jsxs("div", { className: "flex gap-2", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { onClick: handleToggleSimulation, variant: "outline", size: "sm", className: "flex-1", children: isSimulationRunning ? (_jsx(Pause, { className: "h-4 w-4" })) : (_jsx(Play, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "bottom", children: isSimulationRunning ? 'Pause simulation' : 'Start simulation' })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { onClick: handleStartWithEnergy, variant: "outline", size: "sm", className: "flex-1", children: _jsx(Wind, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: "Push energy into simulation" })] })] }), simulationSliders.map(({ key, label, min, max, step }) => (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Label, { htmlFor: key, className: "text-xs font-medium flex items-center gap-1 cursor-help", children: [label, _jsx(Info, { className: "w-3 h-3 text-muted-foreground" })] }) }), _jsx(TooltipContent, { side: "left", className: "max-w-[200px]", children: CosmosSimulationConfigSchema.shape[key].description })] }), _jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: values[key].toFixed(2) })] }), _jsx(Slider, { id: key, min: min, max: max, step: step, value: [values[key]], onValueChange: (value) => handleParameterChange(key, value), className: "w-full" })] }, key)))] }));
+    return (_jsxs("div", { className: cn('w-48 bg-card/90 dark:bg-card/90 rounded-lg shadow-lg p-3 space-y-4', className), children: [_jsxs("div", { className: "flex gap-2", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { onClick: toggleSimulation, variant: "outline", size: "sm", className: "flex-1", children: isSimulationRunning ? (_jsx(Pause, { className: "h-4 w-4" })) : (_jsx(Play, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "bottom", children: isSimulationRunning ? 'Pause simulation' : 'Start simulation' })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { onClick: startWithEnergy, variant: "outline", size: "sm", className: "flex-1", children: _jsx(Wind, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: "Push energy into simulation" })] })] }), simulationSliders.map(({ key, label, min, max, step }) => (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Label, { htmlFor: key, className: "text-xs font-medium flex items-center gap-1 cursor-help", children: [_jsx(Info, { className: "w-3 h-3 text-muted-foreground/50" }), label] }) }), _jsx(TooltipContent, { side: "left", className: "max-w-[200px]", children: CosmosSliceConfig.shape.cosmos.shape[key].description })] }), _jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: config[key].toFixed(2) })] }), _jsx(Slider, { id: key, min: min, max: max, step: step, value: [config[key]], onValueChange: (value) => handleParameterChange(key, value), className: "w-full" })] }, key)))] }));
 };
 //# sourceMappingURL=CosmosSimulationControls.js.map

package/dist/CosmosSimulationControls.js.map

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

package/dist/CosmosSlice.d.ts

@@ -0,0 +1,75 @@
+/**
+ * @fileoverview Cosmos graph visualization state management using Zustand.
+ * This module provides state management and control functions for the Cosmos graph visualization.
+ */
+import { Graph, GraphConfigInterface } from '@cosmograph/cosmos';
+import { type ProjectState } from '@sqlrooms/project-builder';
+import type { BaseProjectConfig } from '@sqlrooms/project-config';
+import type { StateCreator } from 'zustand';
+import { CosmosSliceConfig } from './CosmosSliceConfig';
+/**
+ * Core state interface for the Cosmos graph visualization.
+ * Contains the graph instance, simulation state, and all control functions.
+ */
+export type CosmosSliceState = {
+    cosmos: {
+        /** The current graph instance */
+        graph: Graph | null;
+        /** Whether the physics simulation is currently running */
+        isSimulationRunning: boolean;
+        /** Creates a new graph instance in the specified container */
+        createGraph: (container: HTMLDivElement) => void;
+        /** Toggles the physics simulation on/off */
+        toggleSimulation: () => void;
+        /** Adjusts the view to fit all nodes */
+        fitView: () => void;
+        /** Starts the simulation with initial energy */
+        startWithEnergy: () => void;
+        /** Cleans up and removes the current graph */
+        destroyGraph: () => void;
+        /** Updates the simulation configuration parameters */
+        updateSimulationConfig: (config: Partial<CosmosSliceConfig['cosmos']>) => void;
+        /** Updates the graph's visual configuration */
+        updateGraphConfig: (config: Partial<GraphConfigInterface>) => void;
+        /** Updates the graph's data (points, links, colors, etc.) */
+        updateGraphData: (data: {
+            pointPositions?: Float32Array;
+            pointColors?: Float32Array;
+            pointSizes?: Float32Array;
+            linkIndexes?: Float32Array;
+            linkColors?: Float32Array;
+        }) => void;
+        /** Sets the currently focused point by its index */
+        setFocusedPoint: (index: number | undefined) => void;
+        /** Sets the zoom level of the graph view */
+        setZoomLevel: (level: number) => void;
+    };
+};
+/**
+ * Combined type representing the full project state including Cosmos functionality.
+ * Merges the base project state with Cosmos-specific state and configuration.
+ */
+export type ProjectStateWithCosmos = ProjectState<BaseProjectConfig & CosmosSliceConfig> & CosmosSliceState;
+/**
+ * Creates a Zustand slice for managing Cosmos graph state.
+ * This slice handles graph creation, destruction, configuration, and data updates.
+ *
+ * @returns A state creator function for the Cosmos slice
+ */
+export declare function createCosmosSlice(): StateCreator<CosmosSliceState>;
+/**
+ * Hook to access the Cosmos store with proper typing.
+ * Provides type-safe access to the combined project and Cosmos state.
+ *
+ * @template T The type of the selected state slice
+ * @param selector A function that selects a portion of the state
+ * @returns The selected state portion
+ *
+ * @example
+ * ```typescript
+ * const graph = useStoreWithCosmos(state => state.cosmos.graph);
+ * const isRunning = useStoreWithCosmos(state => state.cosmos.isSimulationRunning);
+ * ```
+ */
+export declare function useStoreWithCosmos<T>(selector: (state: ProjectStateWithCosmos) => T): T;
+//# sourceMappingURL=CosmosSlice.d.ts.map

package/dist/CosmosSlice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CosmosSlice.d.ts","sourceRoot":"","sources":["../src/CosmosSlice.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,KAAK,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAGtD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE;QACN,iCAAiC;QACjC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;QACpB,0DAA0D;QAC1D,mBAAmB,EAAE,OAAO,CAAC;QAC7B,8DAA8D;QAC9D,WAAW,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;QACjD,4CAA4C;QAC5C,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,wCAAwC;QACxC,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,gDAAgD;QAChD,eAAe,EAAE,MAAM,IAAI,CAAC;QAC5B,8CAA8C;QAC9C,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,sDAAsD;QACtD,sBAAsB,EAAE,CACtB,MAAM,EAAE,OAAO,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,KACzC,IAAI,CAAC;QACV,+CAA+C;QAC/C,iBAAiB,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;QACnE,6DAA6D;QAC7D,eAAe,EAAE,CAAC,IAAI,EAAE;YACtB,cAAc,CAAC,EAAE,YAAY,CAAC;YAC9B,WAAW,CAAC,EAAE,YAAY,CAAC;YAC3B,UAAU,CAAC,EAAE,YAAY,CAAC;YAC1B,WAAW,CAAC,EAAE,YAAY,CAAC;YAC3B,UAAU,CAAC,EAAE,YAAY,CAAC;SAC3B,KAAK,IAAI,CAAC;QACX,oDAAoD;QACpD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;QACrD,4CAA4C;QAC5C,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACvC,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAC/C,iBAAiB,GAAG,iBAAiB,CACtC,GACC,gBAAgB,CAAC;AAEnB;;;;;GAKG;AACH,wBAAgB,iBAAiB,IAAI,YAAY,CAAC,gBAAgB,CAAC,CAoJlE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,CAAC,GAC7C,CAAC,CAMH"}

package/dist/CosmosSlice.js

@@ -0,0 +1,153 @@
+/**
+ * @fileoverview Cosmos graph visualization state management using Zustand.
+ * This module provides state management and control functions for the Cosmos graph visualization.
+ */
+import { Graph } from '@cosmograph/cosmos';
+import { createSlice, useBaseProjectStore, } from '@sqlrooms/project-builder';
+import { produce } from 'immer';
+/**
+ * Creates a Zustand slice for managing Cosmos graph state.
+ * This slice handles graph creation, destruction, configuration, and data updates.
+ *
+ * @returns A state creator function for the Cosmos slice
+ */
+export function createCosmosSlice() {
+    return createSlice((set, get) => ({
+        cosmos: {
+            graph: null,
+            isSimulationRunning: true,
+            createGraph: (container) => {
+                // Clean up old graph if it exists
+                const oldGraph = get().cosmos.graph;
+                if (oldGraph) {
+                    oldGraph.pause();
+                    oldGraph.destroy();
+                }
+                // Create and configure new graph
+                const graph = new Graph(container);
+                const config = get().project.config.cosmos;
+                graph.setConfig(config);
+                graph.start();
+                set((state) => produce(state, (draft) => {
+                    draft.cosmos.graph = graph;
+                }));
+            },
+            toggleSimulation: () => {
+                const { graph } = get().cosmos;
+                if (!graph)
+                    return;
+                if (graph.isSimulationRunning) {
+                    graph.pause();
+                    set((state) => produce(state, (draft) => {
+                        draft.cosmos.isSimulationRunning = false;
+                    }));
+                }
+                else {
+                    graph.restart();
+                    set((state) => produce(state, (draft) => {
+                        draft.cosmos.isSimulationRunning = true;
+                    }));
+                }
+            },
+            fitView: () => {
+                const { graph } = get().cosmos;
+                if (!graph)
+                    return;
+                graph.fitView();
+            },
+            startWithEnergy: () => {
+                const { graph } = get().cosmos;
+                if (!graph)
+                    return;
+                graph.start(1);
+                set((state) => produce(state, (draft) => {
+                    draft.cosmos.isSimulationRunning = true;
+                }));
+            },
+            updateSimulationConfig: (config) => {
+                const { graph } = get().cosmos;
+                set((state) => produce(state, (draft) => {
+                    Object.assign(draft.project.config.cosmos, config);
+                    if (graph) {
+                        graph.setConfig(draft.project.config.cosmos);
+                    }
+                }));
+            },
+            updateGraphConfig: (config) => {
+                const { graph } = get().cosmos;
+                set((state) => produce(state, (draft) => {
+                    Object.assign(draft.project.config.cosmos, config);
+                    if (graph) {
+                        graph.setConfig(draft.project.config.cosmos);
+                    }
+                }));
+            },
+            updateGraphData: (data) => {
+                const { graph } = get().cosmos;
+                if (!graph)
+                    return;
+                if (data.pointPositions) {
+                    graph.setPointPositions(data.pointPositions);
+                }
+                if (data.pointColors) {
+                    graph.setPointColors(data.pointColors);
+                }
+                if (data.pointSizes) {
+                    graph.setPointSizes(data.pointSizes);
+                }
+                if (data.linkIndexes) {
+                    graph.setLinks(data.linkIndexes);
+                }
+                if (data.linkColors) {
+                    graph.setLinkColors(data.linkColors);
+                }
+                graph.render();
+            },
+            setFocusedPoint: (index) => {
+                const { graph } = get().cosmos;
+                if (!graph)
+                    return;
+                graph.setFocusedPointByIndex(index);
+            },
+            setZoomLevel: (level) => {
+                const { graph } = get().cosmos;
+                if (!graph)
+                    return;
+                graph.setZoomLevel(level);
+            },
+            destroyGraph: () => {
+                const { graph } = get().cosmos;
+                if (!graph)
+                    return;
+                // TODO: this should be happening in cosmos
+                if (graph.store.div?.firstChild) {
+                    graph.store.div.innerHTML = '';
+                }
+                graph.pause();
+                graph.destroy();
+                set((state) => produce(state, (draft) => {
+                    draft.cosmos.graph = null;
+                    draft.cosmos.isSimulationRunning = false;
+                }));
+            },
+        },
+    }));
+}
+/**
+ * Hook to access the Cosmos store with proper typing.
+ * Provides type-safe access to the combined project and Cosmos state.
+ *
+ * @template T The type of the selected state slice
+ * @param selector A function that selects a portion of the state
+ * @returns The selected state portion
+ *
+ * @example
+ * ```typescript
+ * const graph = useStoreWithCosmos(state => state.cosmos.graph);
+ * const isRunning = useStoreWithCosmos(state => state.cosmos.isSimulationRunning);
+ * ```
+ */
+export function useStoreWithCosmos(selector) {
+    return useBaseProjectStore((state) => selector(state));
+}
+//# sourceMappingURL=CosmosSlice.js.map

package/dist/CosmosSlice.js.map

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