@sqlrooms/cosmos 0.8.0 → 0.8.1

package/dist/CosmosGraph.js

@@ -84,7 +84,7 @@ export const CosmosGraph = ({ config, pointPositions, pointSizes, pointColors, l
     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: {
+    return (_jsxs("div", { className: "relative h-full w-full", children: [_jsx("div", { ref: containerRef, className: "absolute h-full w-full" }), renderPointTooltip ? (_jsx("div", { className: cn('absolute z-50 max-w-xs', 'rounded-md bg-white/90 p-2 shadow-lg dark:bg-gray-800/90', 'pointer-events-none flex items-center gap-2 text-xs 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] }));

package/dist/CosmosGraph.js.map

@@ -1 +1 @@
-{"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"]}
+{"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 h-full w-full\">\n      <div ref={containerRef} className=\"absolute h-full w-full\" />\n      {renderPointTooltip ? (\n        <div\n          className={cn(\n            'absolute z-50 max-w-xs',\n            'rounded-md bg-white/90 p-2 shadow-lg dark:bg-gray-800/90',\n            'pointer-events-none flex items-center gap-2 text-xs 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.js

@@ -36,6 +36,6 @@ import { useStoreWithCosmos } from './CosmosSlice';
  */
 export const CosmosGraphControls = ({ className, 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] }));
+    return (_jsxs("div", { className: cn('absolute left-1 top-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,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"]}
+{"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 left-1 top-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.js

@@ -114,6 +114,6 @@ export const CosmosSimulationControls = ({ className, }) => {
     const handleParameterChange = (paramKey, value) => {
         updateSimulationConfig({ [paramKey]: value[0] });
     };
-    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)))] }));
+    return (_jsxs("div", { className: cn('bg-card/90 dark:bg-card/90 w-48 space-y-4 rounded-lg p-3 shadow-lg', 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: "flex cursor-help items-center gap-1 text-xs font-medium", children: [_jsx(Info, { className: "text-muted-foreground/50 h-3 w-3" }), label] }) }), _jsx(TooltipContent, { side: "left", className: "max-w-[200px]", children: CosmosSliceConfig.shape.cosmos.shape[key].description })] }), _jsx("span", { className: "text-muted-foreground text-xs tabular-nums", 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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","sourcesContent":["import {\n  cn,\n  Slider,\n  Label,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  Button,\n} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport {Info, Pause, Play, Wind} from 'lucide-react';\nimport {useStoreWithCosmos} from './CosmosSlice';\nimport {CosmosSliceConfig} from './CosmosSliceConfig';\n\n/**\n * Props for the CosmosSimulationControls component.\n */\ninterface CosmosSimulationControlsProps {\n  /**\n   * Optional className to override the default positioning and styling of the controls container.\n   * By default, controls are positioned at the top-right corner.\n   *\n   * @example\n   * ```tsx\n   * // Position controls at the bottom-right\n   * <CosmosSimulationControls className=\"absolute bottom-4 right-4\" />\n   * ```\n   */\n  className?: string;\n}\n\n/**\n * Configuration for each simulation parameter slider.\n * These values define the range and step size for each parameter.\n *\n * @internal\n */\nconst simulationSliders = [\n  {\n    key: 'simulationGravity',\n    label: 'Gravity',\n    min: 0,\n    max: 0.5,\n    step: 0.01,\n  },\n  {\n    key: 'simulationRepulsion',\n    label: 'Repulsion',\n    min: 0,\n    max: 2,\n    step: 0.01,\n  },\n  {\n    key: 'simulationLinkSpring',\n    label: 'Link Strength',\n    min: 0,\n    max: 2,\n    step: 0.01,\n  },\n  {\n    key: 'simulationLinkDistance',\n    label: 'Link Distance',\n    min: 1,\n    max: 20,\n    step: 1,\n  },\n  {\n    key: 'simulationFriction',\n    label: 'Friction',\n    min: 0,\n    max: 1,\n    step: 0.01,\n  },\n  {\n    key: 'simulationDecay',\n    label: 'Decay',\n    min: 100,\n    max: 10000,\n    step: 100,\n  },\n] as const;\n\ntype SimulationKey = (typeof simulationSliders)[number]['key'];\n\n/**\n * A component that provides fine-grained controls for adjusting graph simulation parameters.\n * Uses the zustand store to access and control the graph state.\n *\n * Features:\n * - Slider controls for all simulation parameters\n * - Real-time parameter adjustment\n * - Tooltips with parameter descriptions\n * - Customizable positioning\n * - Default values optimized for common use cases\n *\n * Available parameters:\n * - Gravity (0-0.5): Controls how strongly nodes are pulled toward the center\n * - Repulsion (0-2): Controls how strongly nodes push away from each other\n * - Link Strength (0-2): Controls the spring force between connected nodes\n * - Link Distance (1-20): Sets the natural length of links between nodes\n * - Friction (0-1): Controls how quickly node movement decays\n * - Decay (100-10000): Controls how quickly the simulation \"cools down\"\n *\n * @example Basic usage\n * ```tsx\n * import { CosmosGraph, CosmosSimulationControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n *   return (\n *       <CosmosGraph {...graphProps}>\n *         <CosmosSimulationControls />\n *       </CosmosGraph>\n *   );\n * };\n * ```\n *\n * @example Custom positioning with other controls\n * ```tsx\n * import { CosmosGraph, CosmosGraphControls, CosmosSimulationControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n *   return (\n *       <CosmosGraph {...graphProps}>\n *         <CosmosGraphControls className=\"absolute top-4 left-4\" />\n *         <CosmosSimulationControls className=\"absolute top-4 right-4\" />\n *       </CosmosGraph>\n *   );\n * };\n * ```\n *\n * @example With custom styling\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosSimulationControls\n *     className=\"absolute bottom-4 right-4 bg-opacity-75 backdrop-blur-sm\"\n *   />\n * </CosmosGraph>\n * ```\n */\nexport const CosmosSimulationControls: FC<CosmosSimulationControlsProps> = ({\n  className,\n}) => {\n  const {\n    isSimulationRunning,\n    toggleSimulation,\n    startWithEnergy,\n    updateSimulationConfig,\n  } = useStoreWithCosmos((s) => s.cosmos);\n\n  const config = useStoreWithCosmos(\n    (s) => s.config.cosmos,\n  ) as CosmosSliceConfig['cosmos'];\n\n  const handleParameterChange = (paramKey: SimulationKey, value: number[]) => {\n    updateSimulationConfig({[paramKey]: value[0]});\n  };\n\n  return (\n    <div\n      className={cn(\n        'w-48 bg-card/90 dark:bg-card/90 rounded-lg shadow-lg p-3 space-y-4',\n        className,\n      )}\n    >\n      <div className=\"flex gap-2\">\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              onClick={toggleSimulation}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n            >\n              {isSimulationRunning ? (\n                <Pause className=\"h-4 w-4\" />\n              ) : (\n                <Play className=\"h-4 w-4\" />\n              )}\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">\n            {isSimulationRunning ? 'Pause simulation' : 'Start simulation'}\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              onClick={startWithEnergy}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n            >\n              <Wind className=\"h-4 w-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">\n            Push energy into simulation\n          </TooltipContent>\n        </Tooltip>\n      </div>\n      {simulationSliders.map(({key, label, min, max, step}) => (\n        <div key={key} className=\"space-y-2\">\n          <div className=\"flex items-center justify-between\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Label\n                  htmlFor={key}\n                  className=\"text-xs font-medium flex items-center gap-1 cursor-help\"\n                >\n                  <Info className=\"w-3 h-3 text-muted-foreground/50\" />\n                  {label}\n                </Label>\n              </TooltipTrigger>\n              <TooltipContent side=\"left\" className=\"max-w-[200px]\">\n                {CosmosSliceConfig.shape.cosmos.shape[key].description}\n              </TooltipContent>\n            </Tooltip>\n            <span className=\"text-xs tabular-nums text-muted-foreground\">\n              {config[key].toFixed(2)}\n            </span>\n          </div>\n          <Slider\n            id={key}\n            min={min}\n            max={max}\n            step={step}\n            value={[config[key]]}\n            onValueChange={(value) => handleParameterChange(key, value)}\n            className=\"w-full\"\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"CosmosSimulationControls.js","sourceRoot":"","sources":["../src/CosmosSimulationControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,EAAE,EACF,MAAM,EACN,KAAK,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,MAAM,GACP,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AACrD,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAmBtD;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG;IACxB;QACE,GAAG,EAAE,mBAAmB;QACxB,KAAK,EAAE,SAAS;QAChB,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,IAAI;KACX;IACD;QACE,GAAG,EAAE,qBAAqB;QAC1B,KAAK,EAAE,WAAW;QAClB,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,IAAI;KACX;IACD;QACE,GAAG,EAAE,sBAAsB;QAC3B,KAAK,EAAE,eAAe;QACtB,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,IAAI;KACX;IACD;QACE,GAAG,EAAE,wBAAwB;QAC7B,KAAK,EAAE,eAAe;QACtB,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,EAAE;QACP,IAAI,EAAE,CAAC;KACR;IACD;QACE,GAAG,EAAE,oBAAoB;QACzB,KAAK,EAAE,UAAU;QACjB,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,IAAI;KACX;IACD;QACE,GAAG,EAAE,iBAAiB;QACtB,KAAK,EAAE,OAAO;QACd,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,GAAG;KACV;CACO,CAAC;AAIX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAsC,CAAC,EAC1E,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EACJ,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,sBAAsB,GACvB,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAExC,MAAM,MAAM,GAAG,kBAAkB,CAC/B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CACQ,CAAC;IAEjC,MAAM,qBAAqB,GAAG,CAAC,QAAuB,EAAE,KAAe,EAAE,EAAE;QACzE,sBAAsB,CAAC,EAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC;IACjD,CAAC,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,oEAAoE,EACpE,SAAS,CACV,aAED,eAAK,SAAS,EAAC,YAAY,aACzB,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,KAAC,MAAM,IACL,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,QAAQ,YAEjB,mBAAmB,CAAC,CAAC,CAAC,CACrB,KAAC,KAAK,IAAC,SAAS,EAAC,SAAS,GAAG,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAG,CAC7B,GACM,GACM,EACjB,KAAC,cAAc,IAAC,IAAI,EAAC,QAAQ,YAC1B,mBAAmB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,GAC/C,IACT,EACV,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,KAAC,MAAM,IACL,OAAO,EAAE,eAAe,EACxB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,QAAQ,YAElB,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAG,GACrB,GACM,EACjB,KAAC,cAAc,IAAC,IAAI,EAAC,QAAQ,4CAEZ,IACT,IACN,EACL,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,EAAE,EAAE,CAAC,CACvD,eAAe,SAAS,EAAC,WAAW,aAClC,eAAK,SAAS,EAAC,mCAAmC,aAChD,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,MAAC,KAAK,IACJ,OAAO,EAAE,GAAG,EACZ,SAAS,EAAC,yDAAyD,aAEnE,KAAC,IAAI,IAAC,SAAS,EAAC,kCAAkC,GAAG,EACpD,KAAK,IACA,GACO,EACjB,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,eAAe,YAClD,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,WAAW,GACvC,IACT,EACV,eAAM,SAAS,EAAC,4CAA4C,YACzD,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAClB,IACH,EACN,KAAC,MAAM,IACL,EAAE,EAAE,GAAG,EACP,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EACpB,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,KAAK,CAAC,EAC3D,SAAS,EAAC,QAAQ,GAClB,KA5BM,GAAG,CA6BP,CACP,CAAC,IACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  cn,\n  Slider,\n  Label,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  Button,\n} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport {Info, Pause, Play, Wind} from 'lucide-react';\nimport {useStoreWithCosmos} from './CosmosSlice';\nimport {CosmosSliceConfig} from './CosmosSliceConfig';\n\n/**\n * Props for the CosmosSimulationControls component.\n */\ninterface CosmosSimulationControlsProps {\n  /**\n   * Optional className to override the default positioning and styling of the controls container.\n   * By default, controls are positioned at the top-right corner.\n   *\n   * @example\n   * ```tsx\n   * // Position controls at the bottom-right\n   * <CosmosSimulationControls className=\"absolute bottom-4 right-4\" />\n   * ```\n   */\n  className?: string;\n}\n\n/**\n * Configuration for each simulation parameter slider.\n * These values define the range and step size for each parameter.\n *\n * @internal\n */\nconst simulationSliders = [\n  {\n    key: 'simulationGravity',\n    label: 'Gravity',\n    min: 0,\n    max: 0.5,\n    step: 0.01,\n  },\n  {\n    key: 'simulationRepulsion',\n    label: 'Repulsion',\n    min: 0,\n    max: 2,\n    step: 0.01,\n  },\n  {\n    key: 'simulationLinkSpring',\n    label: 'Link Strength',\n    min: 0,\n    max: 2,\n    step: 0.01,\n  },\n  {\n    key: 'simulationLinkDistance',\n    label: 'Link Distance',\n    min: 1,\n    max: 20,\n    step: 1,\n  },\n  {\n    key: 'simulationFriction',\n    label: 'Friction',\n    min: 0,\n    max: 1,\n    step: 0.01,\n  },\n  {\n    key: 'simulationDecay',\n    label: 'Decay',\n    min: 100,\n    max: 10000,\n    step: 100,\n  },\n] as const;\n\ntype SimulationKey = (typeof simulationSliders)[number]['key'];\n\n/**\n * A component that provides fine-grained controls for adjusting graph simulation parameters.\n * Uses the zustand store to access and control the graph state.\n *\n * Features:\n * - Slider controls for all simulation parameters\n * - Real-time parameter adjustment\n * - Tooltips with parameter descriptions\n * - Customizable positioning\n * - Default values optimized for common use cases\n *\n * Available parameters:\n * - Gravity (0-0.5): Controls how strongly nodes are pulled toward the center\n * - Repulsion (0-2): Controls how strongly nodes push away from each other\n * - Link Strength (0-2): Controls the spring force between connected nodes\n * - Link Distance (1-20): Sets the natural length of links between nodes\n * - Friction (0-1): Controls how quickly node movement decays\n * - Decay (100-10000): Controls how quickly the simulation \"cools down\"\n *\n * @example Basic usage\n * ```tsx\n * import { CosmosGraph, CosmosSimulationControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n *   return (\n *       <CosmosGraph {...graphProps}>\n *         <CosmosSimulationControls />\n *       </CosmosGraph>\n *   );\n * };\n * ```\n *\n * @example Custom positioning with other controls\n * ```tsx\n * import { CosmosGraph, CosmosGraphControls, CosmosSimulationControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n *   return (\n *       <CosmosGraph {...graphProps}>\n *         <CosmosGraphControls className=\"absolute top-4 left-4\" />\n *         <CosmosSimulationControls className=\"absolute top-4 right-4\" />\n *       </CosmosGraph>\n *   );\n * };\n * ```\n *\n * @example With custom styling\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosSimulationControls\n *     className=\"absolute bottom-4 right-4 bg-opacity-75 backdrop-blur-sm\"\n *   />\n * </CosmosGraph>\n * ```\n */\nexport const CosmosSimulationControls: FC<CosmosSimulationControlsProps> = ({\n  className,\n}) => {\n  const {\n    isSimulationRunning,\n    toggleSimulation,\n    startWithEnergy,\n    updateSimulationConfig,\n  } = useStoreWithCosmos((s) => s.cosmos);\n\n  const config = useStoreWithCosmos(\n    (s) => s.config.cosmos,\n  ) as CosmosSliceConfig['cosmos'];\n\n  const handleParameterChange = (paramKey: SimulationKey, value: number[]) => {\n    updateSimulationConfig({[paramKey]: value[0]});\n  };\n\n  return (\n    <div\n      className={cn(\n        'bg-card/90 dark:bg-card/90 w-48 space-y-4 rounded-lg p-3 shadow-lg',\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=\"flex cursor-help items-center gap-1 text-xs font-medium\"\n                >\n                  <Info className=\"text-muted-foreground/50 h-3 w-3\" />\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-muted-foreground text-xs tabular-nums\">\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/package.json

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