@sqlrooms/cosmos 0.4.2

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright 2025 Ilya Boyandin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/CosmosGraph.d.ts

@@ -0,0 +1,64 @@
+import { GraphConfigInterface } from '@cosmograph/cosmos';
+import { FC } from 'react';
+/**
+ * Props for the CosmosGraph component.
+ */
+export type CosmosGraphProps = {
+    /** Configuration object for the graph's visual and behavioral properties */
+    config: GraphConfigInterface;
+    /** Float32Array containing x,y coordinates for each point (2 values per point) */
+    pointPositions: Float32Array;
+    /** Float32Array containing size values for each point (1 value per point) */
+    pointSizes: Float32Array;
+    /** Float32Array containing RGBA values for each point (4 values per point) */
+    pointColors: Float32Array;
+    /** Optional Float32Array containing pairs of point indices defining links */
+    linkIndexes?: Float32Array;
+    /** Optional Float32Array containing RGBA values for each link (4 values per link) */
+    linkColors?: Float32Array;
+    /** 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;
+    /** Optional child elements to render inside the graph container */
+    children?: React.ReactNode;
+};
+/**
+ * A React component that renders an interactive graph visualization using Cosmos.
+ *
+ * Features:
+ * - Renders points and optional links in a WebGL canvas
+ * - Supports point hovering with customizable tooltips
+ * - Handles point focusing
+ * - Provides graph context to child components
+ *
+ * @example
+ * ```tsx
+ * const MyGraph = () => {
+ *   const config = {
+ *     backgroundColor: '#ffffff',
+ *     nodeSize: 5,
+ *     simulation: {
+ *       repulsion: 0.5,
+ *       gravity: 0.1,
+ *     },
+ *   };
+ *
+ *   return (
+ *     <div style={{ width: '800px', height: '600px' }}>
+ *       <CosmosGraph
+ *         config={config}
+ *         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}`}
+ *       >
+ *         <GraphControls />
+ *       </CosmosGraph>
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+export declare const CosmosGraph: FC<CosmosGraphProps>;
+//# sourceMappingURL=CosmosGraph.d.ts.map

package/dist/CosmosGraph.d.ts.map

@@ -0,0 +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"}

package/dist/CosmosGraph.js

@@ -0,0 +1,54 @@
+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';
+/**
+ * A React component that renders an interactive graph visualization using Cosmos.
+ *
+ * Features:
+ * - Renders points and optional links in a WebGL canvas
+ * - Supports point hovering with customizable tooltips
+ * - Handles point focusing
+ * - Provides graph context to child components
+ *
+ * @example
+ * ```tsx
+ * const MyGraph = () => {
+ *   const config = {
+ *     backgroundColor: '#ffffff',
+ *     nodeSize: 5,
+ *     simulation: {
+ *       repulsion: 0.5,
+ *       gravity: 0.1,
+ *     },
+ *   };
+ *
+ *   return (
+ *     <div style={{ width: '800px', height: '600px' }}>
+ *       <CosmosGraph
+ *         config={config}
+ *         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}`}
+ *       >
+ *         <GraphControls />
+ *       </CosmosGraph>
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+export const CosmosGraph = ({ config, pointPositions, pointSizes, pointColors, linkIndexes, linkColors, focusedPointIndex, getPointTooltip, 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] }) }));
+};
+//# sourceMappingURL=CosmosGraph.js.map

package/dist/CosmosGraph.js.map

@@ -0,0 +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"}

package/dist/CosmosGraphContext.d.ts

@@ -0,0 +1,76 @@
+import { Graph } from '@cosmograph/cosmos';
+/**
+ * The shape of the context value provided by CosmosGraphContext.
+ */
+interface CosmosGraphContextValue {
+    /** Whether the graph simulation is currently running */
+    isSimulationRunning: boolean;
+    /** Reference to the Cosmos Graph instance */
+    graphRef: React.MutableRefObject<Graph | null> | null;
+    /** Function to toggle the simulation state between running and paused */
+    handleToggleSimulation: () => void;
+    /** Function to fit the graph view to show all nodes */
+    handleFitView: () => void;
+    /** Function to start simulation with an energy push */
+    handleStartWithEnergy: () => void;
+}
+/**
+ * Hook to access the CosmosGraph context.
+ *
+ * Provides access to:
+ * - Graph simulation state
+ * - Graph instance reference
+ * - Control functions for simulation and view
+ *
+ * @example
+ * ```tsx
+ * const CustomControl = () => {
+ *   const { isSimulationRunning, handleToggleSimulation } = useCosmosGraph();
+ *
+ *   return (
+ *     <button onClick={handleToggleSimulation}>
+ *       {isSimulationRunning ? 'Pause' : 'Start'}
+ *     </button>
+ *   );
+ * };
+ * ```
+ *
+ * @throws {Error} If used outside of a CosmosGraphProvider
+ * @returns The graph context value
+ */
+export declare const useCosmosGraph: () => CosmosGraphContextValue;
+/**
+ * Props for the CosmosGraphProvider component.
+ */
+interface CosmosGraphProviderProps {
+    /** Child components that will have access to the graph context */
+    children: React.ReactNode;
+    /** Reference to the Cosmos Graph instance */
+    graphRef: React.MutableRefObject<Graph | null>;
+}
+/**
+ * Provider component that makes graph state and controls available to its children.
+ *
+ * Manages:
+ * - Simulation running state
+ * - Graph instance reference
+ * - Control functions for simulation and view
+ *
+ * @example
+ * ```tsx
+ * const MyGraph = () => {
+ *   const graphRef = useRef<Graph | null>(null);
+ *
+ *   return (
+ *     <CosmosGraphProvider graphRef={graphRef}>
+ *       <CosmosGraph {...graphProps} />
+ *       <CosmosGraphControls />
+ *       <CustomControls />
+ *     </CosmosGraphProvider>
+ *   );
+ * };
+ * ```
+ */
+export declare const CosmosGraphProvider: React.FC<CosmosGraphProviderProps>;
+export {};
+//# sourceMappingURL=CosmosGraphContext.d.ts.map

package/dist/CosmosGraphContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CosmosGraphContext.d.ts","sourceRoot":"","sources":["../src/CosmosGraphContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC;;GAEG;AACH,UAAU,uBAAuB;IAC/B,wDAAwD;IACxD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IACtD,yEAAyE;IACzE,sBAAsB,EAAE,MAAM,IAAI,CAAC;IACnC,uDAAuD;IACvD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,uDAAuD;IACvD,qBAAqB,EAAE,MAAM,IAAI,CAAC;CACnC;AAQD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,cAAc,+BAM1B,CAAC;AAEF;;GAEG;AACH,UAAU,wBAAwB;IAChC,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyClE,CAAC"}

package/dist/CosmosGraphContext.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useState } from 'react';
+/**
+ * Context for sharing graph state and controls across components.
+ * @internal
+ */
+const CosmosGraphContext = createContext(null);
+/**
+ * Hook to access the CosmosGraph context.
+ *
+ * Provides access to:
+ * - Graph simulation state
+ * - Graph instance reference
+ * - Control functions for simulation and view
+ *
+ * @example
+ * ```tsx
+ * const CustomControl = () => {
+ *   const { isSimulationRunning, handleToggleSimulation } = useCosmosGraph();
+ *
+ *   return (
+ *     <button onClick={handleToggleSimulation}>
+ *       {isSimulationRunning ? 'Pause' : 'Start'}
+ *     </button>
+ *   );
+ * };
+ * ```
+ *
+ * @throws {Error} If used outside of a CosmosGraphProvider
+ * @returns The graph context value
+ */
+export const useCosmosGraph = () => {
+    const context = useContext(CosmosGraphContext);
+    if (!context) {
+        throw new Error('useCosmosGraph must be used within a CosmosGraphProvider');
+    }
+    return context;
+};
+/**
+ * Provider component that makes graph state and controls available to its children.
+ *
+ * Manages:
+ * - Simulation running state
+ * - Graph instance reference
+ * - Control functions for simulation and view
+ *
+ * @example
+ * ```tsx
+ * const MyGraph = () => {
+ *   const graphRef = useRef<Graph | null>(null);
+ *
+ *   return (
+ *     <CosmosGraphProvider graphRef={graphRef}>
+ *       <CosmosGraph {...graphProps} />
+ *       <CosmosGraphControls />
+ *       <CustomControls />
+ *     </CosmosGraphProvider>
+ *   );
+ * };
+ * ```
+ */
+export const CosmosGraphProvider = ({ children, graphRef, }) => {
+    const [isSimulationRunning, setIsSimulationRunning] = useState(true);
+    const handleStartWithEnergy = useCallback(() => {
+        if (!graphRef.current)
+            return;
+        graphRef.current.start(1);
+        setIsSimulationRunning(true);
+    }, [graphRef]);
+    const handleToggleSimulation = useCallback(() => {
+        if (!graphRef.current)
+            return;
+        if (graphRef.current.isSimulationRunning) {
+            graphRef.current.pause();
+            setIsSimulationRunning(false);
+        }
+        else {
+            graphRef.current.restart();
+            setIsSimulationRunning(true);
+        }
+    }, [graphRef]);
+    const handleFitView = useCallback(() => {
+        if (!graphRef.current)
+            return;
+        graphRef.current.fitView();
+    }, [graphRef]);
+    return (_jsx(CosmosGraphContext.Provider, { value: {
+            isSimulationRunning,
+            graphRef,
+            handleToggleSimulation,
+            handleFitView,
+            handleStartWithEnergy,
+        }, children: children }));
+};
+//# sourceMappingURL=CosmosGraphContext.js.map

package/dist/CosmosGraphContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CosmosGraphContext.js","sourceRoot":"","sources":["../src/CosmosGraphContext.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAkBvE;;;GAGG;AACH,MAAM,kBAAkB,GAAG,aAAa,CAAiC,IAAI,CAAC,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAYF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,QAAQ,EACR,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAErE,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1B,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,sBAAsB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9C,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,IAAI,QAAQ,CAAC,OAAO,CAAC,mBAAmB,EAAE,CAAC;YACzC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YACzB,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YAC3B,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;IAC7B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACL,mBAAmB;YACnB,QAAQ;YACR,sBAAsB;YACtB,aAAa;YACb,qBAAqB;SACtB,YAEA,QAAQ,GACmB,CAC/B,CAAC;AACJ,CAAC,CAAC"}

package/dist/CosmosGraphControls.d.ts

@@ -0,0 +1,48 @@
+import { FC, PropsWithChildren } from 'react';
+interface CosmosGraphControlsProps {
+    /**
+     * Optional className to override the default positioning and styling of the controls container.
+     * By default, controls are positioned at the top-left corner.
+     * @example
+     * ```tsx
+     * // Position controls at the bottom-right
+     * <CosmosGraphControls className="absolute bottom-4 right-4" />
+     * ```
+     */
+    className?: string;
+}
+/**
+ * A flexible control panel component for CosmosGraph that provides view controls.
+ * Must be used within a CosmosGraph component as it relies on the CosmosGraphContext.
+ *
+ * The component shows the default fit view control and allows adding custom controls as children.
+ * For simulation controls, use the CosmosSimulationControls component.
+ *
+ * @example Default usage
+ * ```tsx
+ * <CosmosGraph {...graphProps}>
+ *   <CosmosGraphControls />
+ * </CosmosGraph>
+ * ```
+ *
+ * @example Custom positioning
+ * ```tsx
+ * <CosmosGraph {...graphProps}>
+ *   <CosmosGraphControls className="absolute bottom-4 right-4" />
+ * </CosmosGraph>
+ * ```
+ *
+ * @example Adding custom controls
+ * ```tsx
+ * <CosmosGraph {...graphProps}>
+ *   <CosmosGraphControls>
+ *     <Button onClick={handleExport}>
+ *       <Download className="h-4 w-4" />
+ *     </Button>
+ *   </CosmosGraphControls>
+ * </CosmosGraph>
+ * ```
+ */
+export declare const CosmosGraphControls: FC<PropsWithChildren<CosmosGraphControlsProps>>;
+export {};
+//# sourceMappingURL=CosmosGraphControls.d.ts.map

package/dist/CosmosGraphControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CosmosGraphControls.d.ts","sourceRoot":"","sources":["../src/CosmosGraphControls.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG5C,UAAU,wBAAwB;IAChC;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAClC,iBAAiB,CAAC,wBAAwB,CAAC,CAY5C,CAAC"}

package/dist/CosmosGraphControls.js

@@ -0,0 +1,41 @@
+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';
+/**
+ * A flexible control panel component for CosmosGraph that provides view controls.
+ * Must be used within a CosmosGraph component as it relies on the CosmosGraphContext.
+ *
+ * The component shows the default fit view control and allows adding custom controls as children.
+ * For simulation controls, use the CosmosSimulationControls component.
+ *
+ * @example Default usage
+ * ```tsx
+ * <CosmosGraph {...graphProps}>
+ *   <CosmosGraphControls />
+ * </CosmosGraph>
+ * ```
+ *
+ * @example Custom positioning
+ * ```tsx
+ * <CosmosGraph {...graphProps}>
+ *   <CosmosGraphControls className="absolute bottom-4 right-4" />
+ * </CosmosGraph>
+ * ```
+ *
+ * @example Adding custom controls
+ * ```tsx
+ * <CosmosGraph {...graphProps}>
+ *   <CosmosGraphControls>
+ *     <Button onClick={handleExport}>
+ *       <Download className="h-4 w-4" />
+ *     </Button>
+ *   </CosmosGraphControls>
+ * </CosmosGraph>
+ * ```
+ */
+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] }));
+};
+//# sourceMappingURL=CosmosGraphControls.js.map

package/dist/CosmosGraphControls.js.map

@@ -0,0 +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"}

package/dist/CosmosSimulationControls.d.ts

@@ -0,0 +1,79 @@
+import { FC } from 'react';
+/**
+ * Props for the CosmosSimulationControls component.
+ */
+interface CosmosSimulationControlsProps {
+    /**
+     * Optional className to override the default positioning and styling of the controls container.
+     * By default, controls are positioned at the top-right corner.
+     *
+     * @example
+     * ```tsx
+     * // Position controls at the bottom-right
+     * <CosmosSimulationControls className="absolute bottom-4 right-4" />
+     * ```
+     */
+    className?: string;
+}
+/**
+ * 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.
+ *
+ * Features:
+ * - Slider controls for all simulation parameters
+ * - Real-time parameter adjustment
+ * - Tooltips with parameter descriptions
+ * - Customizable positioning
+ * - Default values optimized for common use cases
+ *
+ * Available parameters:
+ * - Gravity (0-0.5): Controls how strongly nodes are pulled toward the center
+ * - Repulsion (0-2): Controls how strongly nodes push away from each other
+ * - Link Strength (0-2): Controls the spring force between connected nodes
+ * - Link Distance (1-20): Sets the natural length of links between nodes
+ * - Friction (0-1): Controls how quickly node movement decays
+ * - Decay (100-10000): Controls how quickly the simulation "cools down"
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { CosmosGraph, CosmosSimulationControls } from '@sqlrooms/cosmos';
+ *
+ * const MyGraph = () => {
+ *   return (
+ *     <div style={{ width: '800px', height: '600px' }}>
+ *       <CosmosGraph {...graphProps}>
+ *         <CosmosSimulationControls />
+ *       </CosmosGraph>
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * @example Custom positioning with other controls
+ * ```tsx
+ * import { CosmosGraph, CosmosGraphControls, CosmosSimulationControls } from '@sqlrooms/cosmos';
+ *
+ * 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>
+ *   );
+ * };
+ * ```
+ *
+ * @example With custom styling
+ * ```tsx
+ * <CosmosGraph {...graphProps}>
+ *   <CosmosSimulationControls
+ *     className="absolute bottom-4 right-4 bg-opacity-75 backdrop-blur-sm"
+ *   />
+ * </CosmosGraph>
+ * ```
+ */
+export declare const CosmosSimulationControls: FC<CosmosSimulationControlsProps>;
+export {};
+//# sourceMappingURL=CosmosSimulationControls.d.ts.map

package/dist/CosmosSimulationControls.d.ts.map

@@ -0,0 +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"}

package/dist/CosmosSimulationControls.js

@@ -0,0 +1,140 @@
+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';
+/**
+ * Configuration for each simulation parameter slider.
+ * These values define the range and step size for each parameter.
+ *
+ * @internal
+ */
+const simulationSliders = [
+    {
+        key: 'simulationGravity',
+        label: 'Gravity',
+        min: 0,
+        max: 0.5,
+        step: 0.01,
+        default: 0.25,
+    },
+    {
+        key: 'simulationRepulsion',
+        label: 'Repulsion',
+        min: 0,
+        max: 2,
+        step: 0.01,
+        default: 1.0,
+    },
+    {
+        key: 'simulationLinkSpring',
+        label: 'Link Strength',
+        min: 0,
+        max: 2,
+        step: 0.01,
+        default: 1,
+    },
+    {
+        key: 'simulationLinkDistance',
+        label: 'Link Distance',
+        min: 1,
+        max: 20,
+        step: 1,
+        default: 10,
+    },
+    {
+        key: 'simulationFriction',
+        label: 'Friction',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        default: 0.85,
+    },
+    {
+        key: 'simulationDecay',
+        label: 'Decay',
+        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.
+ *
+ * Features:
+ * - Slider controls for all simulation parameters
+ * - Real-time parameter adjustment
+ * - Tooltips with parameter descriptions
+ * - Customizable positioning
+ * - Default values optimized for common use cases
+ *
+ * Available parameters:
+ * - Gravity (0-0.5): Controls how strongly nodes are pulled toward the center
+ * - Repulsion (0-2): Controls how strongly nodes push away from each other
+ * - Link Strength (0-2): Controls the spring force between connected nodes
+ * - Link Distance (1-20): Sets the natural length of links between nodes
+ * - Friction (0-1): Controls how quickly node movement decays
+ * - Decay (100-10000): Controls how quickly the simulation "cools down"
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { CosmosGraph, CosmosSimulationControls } from '@sqlrooms/cosmos';
+ *
+ * const MyGraph = () => {
+ *   return (
+ *     <div style={{ width: '800px', height: '600px' }}>
+ *       <CosmosGraph {...graphProps}>
+ *         <CosmosSimulationControls />
+ *       </CosmosGraph>
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * @example Custom positioning with other controls
+ * ```tsx
+ * import { CosmosGraph, CosmosGraphControls, CosmosSimulationControls } from '@sqlrooms/cosmos';
+ *
+ * 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>
+ *   );
+ * };
+ * ```
+ *
+ * @example With custom styling
+ * ```tsx
+ * <CosmosGraph {...graphProps}>
+ *   <CosmosSimulationControls
+ *     className="absolute bottom-4 right-4 bg-opacity-75 backdrop-blur-sm"
+ *   />
+ * </CosmosGraph>
+ * ```
+ */
+export const CosmosSimulationControls = ({ className, }) => {
+    const { graphRef, isSimulationRunning, handleToggleSimulation, handleStartWithEnergy, } = useCosmosGraph();
+    const [values, setValues] = useState(() => Object.fromEntries(simulationSliders.map(({ key, default: defaultValue }) => [
+        key,
+        defaultValue,
+    ])));
+    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);
+    };
+    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)))] }));
+};
+//# sourceMappingURL=CosmosSimulationControls.js.map

package/dist/CosmosSimulationControls.js.map

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

package/dist/components/CosmosGraph.d.ts

@@ -0,0 +1,14 @@
+import { GraphConfigInterface } from '@cosmograph/cosmos';
+import { FC } from 'react';
+export type CosmosGraphProps = {
+    config: GraphConfigInterface;
+    pointPositions: Float32Array;
+    pointSizes: Float32Array;
+    pointColors: Float32Array;
+    linkIndexes?: Float32Array;
+    linkColors?: Float32Array;
+    focusedPointIndex?: number | undefined;
+    getPointTooltip?: (index: number) => React.ReactNode;
+};
+export declare const CosmosGraph: FC<CosmosGraphProps>;
+//# sourceMappingURL=CosmosGraph.d.ts.map