@sqlrooms/cosmos 0.4.2 → 0.5.1

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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","sourcesContent":["import {GraphConfigInterface} from '@cosmograph/cosmos';\nimport {cn, useRelativeCoordinates} from '@sqlrooms/ui';\nimport {FC, useEffect, useRef} from 'react';\nimport {useStoreWithCosmos} from './CosmosSlice';\nimport {useHoverState} from './hooks/useHoverState';\n\n/**\n * Props for the CosmosGraph component.\n */\nexport type CosmosGraphProps = {\n  /** Configuration object for the graph's visual and behavioral properties */\n  config: GraphConfigInterface;\n  /** Float32Array containing x,y coordinates for each point (2 values per point) */\n  pointPositions: Float32Array;\n  /** Float32Array containing size values for each point (1 value per point) */\n  pointSizes: Float32Array;\n  /** Float32Array containing RGBA values for each point (4 values per point) */\n  pointColors: Float32Array;\n  /** Optional Float32Array containing pairs of point indices defining links */\n  linkIndexes?: Float32Array;\n  /** Optional Float32Array containing RGBA values for each link (4 values per link) */\n  linkColors?: Float32Array;\n  /** Optional index of the point to focus on */\n  focusedPointIndex?: number | undefined;\n  /** Optional function to render custom tooltip content for a point */\n  renderPointTooltip?: (index: number) => React.ReactNode;\n  /** Optional child elements to render inside the graph container */\n  children?: React.ReactNode;\n};\n\n/**\n * A React component that renders an interactive graph visualization using Cosmos.\n *\n * Features:\n * - Renders points and optional links in a WebGL canvas\n * - Supports point hovering with customizable tooltips\n * - Handles point focusing\n * - Provides graph state to child components through zustand store\n *\n * @example\n * ```tsx\n * const MyGraph = () => {\n *   const config = {\n *     backgroundColor: '#ffffff',\n *     nodeSize: 5,\n *     simulation: {\n *       repulsion: 0.5,\n *       gravity: 0.1,\n *     },\n *   };\n *\n *   return (\n *     <div style={{ width: '800px', height: '600px' }}>\n *       <CosmosGraph\n *         config={config}\n *         pointPositions={new Float32Array([0, 0, 1, 1])}\n *         pointColors={new Float32Array([1, 0, 0, 1, 0, 1, 0, 1])}\n *         pointSizes={new Float32Array([5, 5])}\n *         renderPointTooltip={(index) => `Point ${index}`}\n *       >\n *         <GraphControls />\n *       </CosmosGraph>\n *     </div>\n *   );\n * };\n * ```\n */\nexport const CosmosGraph: FC<CosmosGraphProps> = ({\n  config,\n  pointPositions,\n  pointSizes,\n  pointColors,\n  linkIndexes,\n  linkColors,\n  focusedPointIndex,\n  renderPointTooltip,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const calcRelativeCoordinates = useRelativeCoordinates(containerRef);\n  const {hoveredPoint, eventHandlers} = useHoverState(calcRelativeCoordinates);\n  const createGraph = useStoreWithCosmos((s) => s.cosmos.createGraph);\n  const destroyGraph = useStoreWithCosmos((s) => s.cosmos.destroyGraph);\n  const updateGraphConfig = useStoreWithCosmos(\n    (s) => s.cosmos.updateGraphConfig,\n  );\n  const updateGraphData = useStoreWithCosmos((s) => s.cosmos.updateGraphData);\n  const setFocusedPoint = useStoreWithCosmos((s) => s.cosmos.setFocusedPoint);\n\n  // Create graph instance and clean up on unmount\n  useEffect(() => {\n    if (!containerRef.current) return;\n    createGraph(containerRef.current);\n    return () => destroyGraph();\n  }, [createGraph, destroyGraph]);\n\n  // Update graph config when it changes\n  useEffect(() => {\n    updateGraphConfig({\n      ...config,\n      ...eventHandlers,\n    });\n  }, [config, eventHandlers, updateGraphConfig]);\n\n  // Update graph data when props change\n  useEffect(() => {\n    updateGraphData({\n      pointPositions,\n      pointColors,\n      pointSizes,\n      linkIndexes,\n      linkColors,\n    });\n  }, [\n    updateGraphData,\n    pointPositions,\n    pointColors,\n    pointSizes,\n    linkIndexes,\n    linkColors,\n  ]);\n\n  // Update focus when it changes\n  useEffect(() => {\n    setFocusedPoint(focusedPointIndex);\n  }, [setFocusedPoint, focusedPointIndex]);\n\n  return (\n    <div className=\"relative w-full h-full\">\n      <div ref={containerRef} className=\"absolute w-full h-full\" />\n      {renderPointTooltip ? (\n        <div\n          className={cn(\n            'absolute z-50 max-w-xs',\n            'bg-white/90 dark:bg-gray-800/90 rounded-md shadow-lg p-2',\n            'text-xs flex gap-2 items-center pointer-events-none transition-opacity duration-150',\n            hoveredPoint ? 'opacity-100' : 'opacity-0',\n          )}\n          style={{\n            transform: `translate(${hoveredPoint?.position?.[0] ?? 0}px, ${\n              hoveredPoint?.position?.[1] ?? 0\n            }px) translate(-50%, 5px)`,\n            visibility: hoveredPoint ? 'visible' : 'hidden',\n          }}\n        >\n          <div>{renderPointTooltip?.(hoveredPoint?.index ?? 0)}</div>\n        </div>\n      ) : null}\n      {children}\n    </div>\n  );\n};\n"]}

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","sourcesContent":["import {Button, cn} from '@sqlrooms/ui';\nimport {Maximize2} from 'lucide-react';\nimport {FC, PropsWithChildren} from 'react';\nimport {useStoreWithCosmos} from './CosmosSlice';\n\ninterface CosmosGraphControlsProps {\n  /**\n   * Optional className to override the default positioning and styling of the controls container.\n   * By default, controls are positioned at the top-left corner.\n   * @example\n   * ```tsx\n   * // Position controls at the bottom-right\n   * <CosmosGraphControls className=\"absolute bottom-4 right-4\" />\n   * ```\n   */\n  className?: string;\n}\n\n/**\n * A flexible control panel component for CosmosGraph that provides view controls.\n * Must be used within a CosmosGraph component as it relies on the graph state from the store.\n *\n * The component shows the default fit view control and allows adding custom controls as children.\n * For simulation controls, use the CosmosSimulationControls component.\n *\n * @example Default usage\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosGraphControls />\n * </CosmosGraph>\n * ```\n *\n * @example Custom positioning\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosGraphControls className=\"absolute bottom-4 right-4\" />\n * </CosmosGraph>\n * ```\n *\n * @example Adding custom controls\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosGraphControls>\n *     <Button onClick={handleExport}>\n *       <Download className=\"h-4 w-4\" />\n *     </Button>\n *   </CosmosGraphControls>\n * </CosmosGraph>\n * ```\n */\nexport const CosmosGraphControls: FC<\n  PropsWithChildren<CosmosGraphControlsProps>\n> = ({className, children}) => {\n  const {fitView} = useStoreWithCosmos((s) => s.cosmos);\n\n  return (\n    <div className={cn('absolute top-1 left-1 flex gap-2', className)}>\n      <Button onClick={fitView} variant=\"outline\" size=\"sm\">\n        <Maximize2 className=\"h-4 w-4\" />\n      </Button>\n      {children}\n    </div>\n  );\n};\n"]}

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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","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"]}

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