@sqlrooms/cosmos 0.28.0-rc.0 → 0.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -139
- package/dist/CosmosGraph.d.ts +1 -1
- package/dist/CosmosGraph.d.ts.map +1 -1
- package/dist/CosmosGraph.js.map +1 -1
- package/dist/CosmosSlice.d.ts +1 -1
- package/dist/CosmosSlice.d.ts.map +1 -1
- package/dist/CosmosSlice.js +4 -2
- package/dist/CosmosSlice.js.map +1 -1
- package/dist/CosmosSliceConfig.js.map +1 -1
- package/dist/hooks/useHoverState.d.ts +1 -1
- package/dist/hooks/useHoverState.d.ts.map +1 -1
- package/dist/hooks/useHoverState.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,168 +1,105 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
This package is built on top of the [Cosmos library](https://github.com/cosmograph-org/cosmos), a GPU-accelerated force graph layout and rendering library.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- 🌐 **Interactive Graphs**: Create dynamic, interactive graph visualizations
|
|
8
|
-
- 🚀 **WebGL Rendering**: High-performance rendering for large graphs
|
|
9
|
-
- 🧩 **React Components**: Ready-to-use components for graph visualization
|
|
10
|
-
- 🔄 **State Management**: Zustand-based state management for graph state
|
|
11
|
-
- 🎛️ **Simulation Controls**: Fine-grained control over physics simulation
|
|
12
|
-
- 🎨 **Customizable Styling**: Extensive options for visual customization
|
|
1
|
+
GPU-accelerated graph visualization components and slice for SQLRooms (powered by Cosmograph Cosmos).
|
|
13
2
|
|
|
14
3
|
## Installation
|
|
15
4
|
|
|
16
5
|
```bash
|
|
17
|
-
npm install @sqlrooms/cosmos
|
|
6
|
+
npm install @sqlrooms/cosmos @sqlrooms/room-shell @sqlrooms/ui
|
|
18
7
|
```
|
|
19
8
|
|
|
20
|
-
##
|
|
21
|
-
|
|
22
|
-
### Simple Graph Visualization
|
|
9
|
+
## Store setup
|
|
23
10
|
|
|
24
11
|
```tsx
|
|
12
|
+
import {CosmosSliceState, createCosmosSlice} from '@sqlrooms/cosmos';
|
|
25
13
|
import {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
} from '@sqlrooms/
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
{
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
{source: 'node3', target: 'node1'},
|
|
42
|
-
],
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
return (
|
|
46
|
-
<div style={{width: '800px', height: '600px'}}>
|
|
47
|
-
<CosmosGraph config={createDefaultCosmosConfig()} data={graphData}>
|
|
48
|
-
<CosmosGraphControls />
|
|
49
|
-
</CosmosGraph>
|
|
50
|
-
</div>
|
|
51
|
-
);
|
|
52
|
-
}
|
|
14
|
+
createRoomShellSlice,
|
|
15
|
+
createRoomStore,
|
|
16
|
+
RoomShellSliceState,
|
|
17
|
+
} from '@sqlrooms/room-shell';
|
|
18
|
+
|
|
19
|
+
type RoomState = RoomShellSliceState & CosmosSliceState;
|
|
20
|
+
|
|
21
|
+
export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
|
|
22
|
+
(set, get, store) => ({
|
|
23
|
+
...createRoomShellSlice({
|
|
24
|
+
config: {title: 'Cosmos Demo', dataSources: []},
|
|
25
|
+
})(set, get, store),
|
|
26
|
+
...createCosmosSlice()(set, get, store),
|
|
27
|
+
}),
|
|
28
|
+
);
|
|
53
29
|
```
|
|
54
30
|
|
|
55
|
-
|
|
31
|
+
## Render a graph
|
|
56
32
|
|
|
57
33
|
```tsx
|
|
58
|
-
import {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
34
|
+
import {CosmosGraph, CosmosGraphControls, CosmosSimulationControls} from '@sqlrooms/cosmos';
|
|
35
|
+
import {GraphConfigInterface} from '@cosmos.gl/graph';
|
|
36
|
+
|
|
37
|
+
const config: GraphConfigInterface = {
|
|
38
|
+
backgroundColor: 'transparent',
|
|
39
|
+
simulationGravity: 0.2,
|
|
40
|
+
simulationRepulsion: 1,
|
|
41
|
+
simulationLinkSpring: 1,
|
|
42
|
+
simulationLinkDistance: 10,
|
|
43
|
+
};
|
|
64
44
|
|
|
65
|
-
|
|
45
|
+
const pointPositions = new Float32Array([
|
|
46
|
+
0, 0, // node 0
|
|
47
|
+
1, 0, // node 1
|
|
48
|
+
0.5, 1, // node 2
|
|
49
|
+
]);
|
|
50
|
+
const pointSizes = new Float32Array([5, 5, 5]);
|
|
51
|
+
const pointColors = new Float32Array([
|
|
52
|
+
1, 0, 0, 1,
|
|
53
|
+
0, 1, 0, 1,
|
|
54
|
+
0, 0, 1, 1,
|
|
55
|
+
]);
|
|
56
|
+
const linkIndexes = new Float32Array([
|
|
57
|
+
0, 1,
|
|
58
|
+
1, 2,
|
|
59
|
+
]);
|
|
60
|
+
|
|
61
|
+
export function GraphView() {
|
|
66
62
|
return (
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
63
|
+
<CosmosGraph
|
|
64
|
+
config={config}
|
|
65
|
+
pointPositions={pointPositions}
|
|
66
|
+
pointSizes={pointSizes}
|
|
67
|
+
pointColors={pointColors}
|
|
68
|
+
linkIndexes={linkIndexes}
|
|
69
|
+
renderPointTooltip={(index) => `Node ${index}`}
|
|
70
|
+
>
|
|
71
|
+
<CosmosGraphControls />
|
|
72
|
+
<CosmosSimulationControls className="absolute right-2 top-2" />
|
|
73
|
+
</CosmosGraph>
|
|
73
74
|
);
|
|
74
75
|
}
|
|
75
76
|
```
|
|
76
77
|
|
|
77
|
-
|
|
78
|
+
## Update simulation programmatically
|
|
78
79
|
|
|
79
80
|
```tsx
|
|
80
|
-
import {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
cosmos: createCosmosSlice(createDefaultCosmosConfig()),
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
function GraphWithState() {
|
|
93
|
-
const {setGraphData, toggleSimulation, isSimulationRunning, zoomToFit} =
|
|
94
|
-
useStoreWithCosmos(useStore);
|
|
95
|
-
|
|
96
|
-
// Load graph data
|
|
97
|
-
useEffect(() => {
|
|
98
|
-
setGraphData(myGraphData);
|
|
99
|
-
}, []);
|
|
81
|
+
import {useRoomStore} from './store';
|
|
82
|
+
import {Button} from '@sqlrooms/ui';
|
|
83
|
+
|
|
84
|
+
function SimulationButtons() {
|
|
85
|
+
const toggleSimulation = useRoomStore((state) => state.cosmos.toggleSimulation);
|
|
86
|
+
const fitView = useRoomStore((state) => state.cosmos.fitView);
|
|
87
|
+
const updateSimulationConfig = useRoomStore(
|
|
88
|
+
(state) => state.cosmos.updateSimulationConfig,
|
|
89
|
+
);
|
|
100
90
|
|
|
101
91
|
return (
|
|
102
|
-
<div>
|
|
103
|
-
<
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<CosmosGraph store={useStore}>
|
|
109
|
-
<CosmosGraphControls />
|
|
110
|
-
</CosmosGraph>
|
|
92
|
+
<div className="flex gap-2">
|
|
93
|
+
<Button onClick={toggleSimulation}>Toggle simulation</Button>
|
|
94
|
+
<Button onClick={fitView}>Fit view</Button>
|
|
95
|
+
<Button onClick={() => updateSimulationConfig({simulationRepulsion: 1.5})}>
|
|
96
|
+
Stronger repulsion
|
|
97
|
+
</Button>
|
|
111
98
|
</div>
|
|
112
99
|
);
|
|
113
100
|
}
|
|
114
101
|
```
|
|
115
102
|
|
|
116
|
-
##
|
|
117
|
-
|
|
118
|
-
The Cosmos graph visualization system provides extensive configuration options for both visual appearance and physics simulation.
|
|
119
|
-
|
|
120
|
-
### Visual Configuration
|
|
121
|
-
|
|
122
|
-
```tsx
|
|
123
|
-
const config = {
|
|
124
|
-
pointSizeScale: 1.2, // Base scale for node sizes
|
|
125
|
-
scalePointsOnZoom: true, // Dynamic node sizing with zoom
|
|
126
|
-
renderLinks: true, // Toggle link visibility
|
|
127
|
-
linkArrows: true, // Show directional arrows
|
|
128
|
-
curvedLinks: true, // Use curved links
|
|
129
|
-
linkWidth: 1.5, // Width of links
|
|
130
|
-
linkOpacity: 0.8, // Opacity of links
|
|
131
|
-
// ... other visual options
|
|
132
|
-
};
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
### Physics Simulation Configuration
|
|
136
|
-
|
|
137
|
-
```tsx
|
|
138
|
-
const config = {
|
|
139
|
-
simulationGravity: 0.2, // Center attraction strength
|
|
140
|
-
simulationRepulsion: 1.0, // Node repulsion strength
|
|
141
|
-
simulationLinkSpring: 1.2, // Link elasticity
|
|
142
|
-
simulationLinkDistance: 15, // Preferred link distance
|
|
143
|
-
simulationFriction: 0.85, // Movement damping
|
|
144
|
-
simulationDecay: 1000, // Simulation cooling rate
|
|
145
|
-
// ... other physics options
|
|
146
|
-
};
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
## Advanced Features
|
|
150
|
-
|
|
151
|
-
- **Custom Node Rendering**: Define custom renderers for nodes
|
|
152
|
-
- **Interactive Events**: Handle click, hover, and drag events
|
|
153
|
-
- **Data Binding**: Connect graph data to your application state
|
|
154
|
-
- **Layout Algorithms**: Apply different layout algorithms
|
|
155
|
-
- **Performance Optimization**: Options for handling large graphs
|
|
156
|
-
|
|
157
|
-
For more information, visit the SQLRooms documentation.
|
|
158
|
-
|
|
159
|
-
## About Cosmograph Cosmos
|
|
160
|
-
|
|
161
|
-
This package is built on top of [Cosmograph Cosmos](https://github.com/cosmograph-org/cosmos), a GPU-accelerated force graph layout and rendering library. Cosmograph Cosmos offers:
|
|
162
|
-
|
|
163
|
-
- **GPU Acceleration**: All computations and rendering happen on the GPU in fragment and vertex shaders
|
|
164
|
-
- **High Performance**: Capable of rendering hundreds of thousands of nodes and links in real-time
|
|
165
|
-
- **WebGL-based**: Utilizes WebGL for efficient graph visualization
|
|
166
|
-
- **Advanced Physics**: Sophisticated force-directed layout algorithms
|
|
103
|
+
## Example app
|
|
167
104
|
|
|
168
|
-
|
|
105
|
+
- https://github.com/sqlrooms/examples/tree/main/cosmos
|
package/dist/CosmosGraph.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CosmosGraph.d.ts","sourceRoot":"","sources":["../src/CosmosGraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"CosmosGraph.d.ts","sourceRoot":"","sources":["../src/CosmosGraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAEtD,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.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CosmosGraph.js","sourceRoot":"","sources":["../src/CosmosGraph.tsx"],"names":[],"mappings":"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","sourcesContent":["import {GraphConfigInterface} from '@
|
|
1
|
+
{"version":3,"file":"CosmosGraph.js","sourceRoot":"","sources":["../src/CosmosGraph.tsx"],"names":[],"mappings":"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","sourcesContent":["import {GraphConfigInterface} from '@cosmos.gl/graph';\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/CosmosSlice.d.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @fileoverview Cosmos graph visualization state management using Zustand.
|
|
3
3
|
* This module provides state management and control functions for the Cosmos graph visualization.
|
|
4
4
|
*/
|
|
5
|
-
import { Graph, GraphConfigInterface } from '@
|
|
5
|
+
import { Graph, GraphConfigInterface } from '@cosmos.gl/graph';
|
|
6
6
|
import { type RoomShellSliceState } from '@sqlrooms/room-shell';
|
|
7
7
|
import type { StateCreator } from 'zustand';
|
|
8
8
|
import { CosmosSliceConfig } from './CosmosSliceConfig';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CosmosSlice.d.ts","sourceRoot":"","sources":["../src/CosmosSlice.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,KAAK,EAAE,oBAAoB,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"CosmosSlice.d.ts","sourceRoot":"","sources":["../src/CosmosSlice.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAC,KAAK,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAC1C,OAAO,EACL,iBAAiB,EAElB,MAAM,qBAAqB,CAAC;AAE7B;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE;QACN,MAAM,EAAE,iBAAiB,CAAC;QAC1B,iCAAiC;QACjC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;QACpB,0DAA0D;QAC1D,mBAAmB,EAAE,OAAO,CAAC;QAC7B,2CAA2C;QAC3C,SAAS,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;QAC/C,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,CAAC,MAAM,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACrE,+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;;;;;GAKG;AACH,wBAAgB,iBAAiB,IAAI,YAAY,CAAC,gBAAgB,CAAC,CA2JlE;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GAAG,gBAAgB,CAAC;AAEzE;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,GAC1C,CAAC,CAIH"}
|
package/dist/CosmosSlice.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @fileoverview Cosmos graph visualization state management using Zustand.
|
|
3
3
|
* This module provides state management and control functions for the Cosmos graph visualization.
|
|
4
4
|
*/
|
|
5
|
-
import { Graph } from '@
|
|
5
|
+
import { Graph } from '@cosmos.gl/graph';
|
|
6
6
|
import { createSlice, useBaseRoomShellStore, } from '@sqlrooms/room-shell';
|
|
7
7
|
import { produce } from 'immer';
|
|
8
8
|
import { createDefaultCosmosConfig, } from './CosmosSliceConfig';
|
|
@@ -114,7 +114,9 @@ export function createCosmosSlice() {
|
|
|
114
114
|
const { graph } = get().cosmos;
|
|
115
115
|
if (!graph)
|
|
116
116
|
return;
|
|
117
|
-
graph.
|
|
117
|
+
graph.setConfig({
|
|
118
|
+
focusedPointIndex: index,
|
|
119
|
+
});
|
|
118
120
|
},
|
|
119
121
|
setZoomLevel: (level) => {
|
|
120
122
|
const { graph } = get().cosmos;
|
package/dist/CosmosSlice.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CosmosSlice.js","sourceRoot":"","sources":["../src/CosmosSlice.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Cosmos graph visualization state management using Zustand.\n * This module provides state management and control functions for the Cosmos graph visualization.\n */\n\nimport {Graph, GraphConfigInterface} from '@cosmograph/cosmos';\nimport {\n createSlice,\n useBaseRoomShellStore,\n type RoomShellSliceState,\n} from '@sqlrooms/room-shell';\nimport {produce} from 'immer';\nimport type {StateCreator} from 'zustand';\nimport {\n CosmosSliceConfig,\n createDefaultCosmosConfig,\n} from './CosmosSliceConfig';\n\n/**\n * Core state interface for the Cosmos graph visualization.\n * Contains the graph instance, simulation state, and all control functions.\n */\nexport type CosmosSliceState = {\n cosmos: {\n config: CosmosSliceConfig;\n /** The current graph instance */\n graph: Graph | null;\n /** Whether the physics simulation is currently running */\n isSimulationRunning: boolean;\n /** Sets the config for the cosmos slice */\n setConfig: (config: CosmosSliceConfig) => void;\n /** Creates a new graph instance in the specified container */\n createGraph: (container: HTMLDivElement) => void;\n /** Toggles the physics simulation on/off */\n toggleSimulation: () => void;\n /** Adjusts the view to fit all nodes */\n fitView: () => void;\n /** Starts the simulation with initial energy */\n startWithEnergy: () => void;\n /** Cleans up and removes the current graph */\n destroyGraph: () => void;\n /** Updates the simulation configuration parameters */\n updateSimulationConfig: (config: Partial<CosmosSliceConfig>) => void;\n /** Updates the graph's visual configuration */\n updateGraphConfig: (config: Partial<GraphConfigInterface>) => void;\n /** Updates the graph's data (points, links, colors, etc.) */\n updateGraphData: (data: {\n pointPositions?: Float32Array;\n pointColors?: Float32Array;\n pointSizes?: Float32Array;\n linkIndexes?: Float32Array;\n linkColors?: Float32Array;\n }) => void;\n /** Sets the currently focused point by its index */\n setFocusedPoint: (index: number | undefined) => void;\n /** Sets the zoom level of the graph view */\n setZoomLevel: (level: number) => void;\n };\n};\n\n/**\n * Creates a Zustand slice for managing Cosmos graph state.\n * This slice handles graph creation, destruction, configuration, and data updates.\n *\n * @returns A state creator function for the Cosmos slice\n */\nexport function createCosmosSlice(): StateCreator<CosmosSliceState> {\n return createSlice<CosmosSliceState>((set, get) => ({\n cosmos: {\n graph: null,\n isSimulationRunning: true,\n config: createDefaultCosmosConfig(),\n\n setConfig: (config) => {\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.config = config;\n }),\n );\n },\n\n createGraph: (container: HTMLDivElement) => {\n // Clean up old graph if it exists\n const oldGraph = get().cosmos.graph;\n if (oldGraph) {\n oldGraph.pause();\n oldGraph.destroy();\n }\n\n // Create and configure new graph\n const graph = new Graph(container);\n const config = get().cosmos.config;\n graph.setConfig(config);\n graph.start();\n\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.graph = graph;\n }),\n );\n },\n\n toggleSimulation: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n\n if (graph.isSimulationRunning) {\n graph.pause();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = false;\n }),\n );\n } else {\n graph.restart();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = true;\n }),\n );\n }\n },\n\n fitView: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.fitView();\n },\n\n startWithEnergy: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.start(1);\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = true;\n }),\n );\n },\n\n updateSimulationConfig: (config: Partial<CosmosSliceConfig>) => {\n const {graph} = get().cosmos;\n\n set((state) =>\n produce(state, (draft) => {\n Object.assign(draft.cosmos.config, config);\n if (graph) {\n graph.setConfig(draft.cosmos.config);\n }\n }),\n );\n },\n\n updateGraphConfig: (config: Partial<GraphConfigInterface>) => {\n const {graph} = get().cosmos;\n\n set((state) =>\n produce(state, (draft) => {\n Object.assign(draft.cosmos.config, config);\n if (graph) {\n graph.setConfig(draft.cosmos.config);\n }\n }),\n );\n },\n\n updateGraphData: (data) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n\n if (data.pointPositions) {\n graph.setPointPositions(data.pointPositions);\n }\n if (data.pointColors) {\n graph.setPointColors(data.pointColors);\n }\n if (data.pointSizes) {\n graph.setPointSizes(data.pointSizes);\n }\n if (data.linkIndexes) {\n graph.setLinks(data.linkIndexes);\n }\n if (data.linkColors) {\n graph.setLinkColors(data.linkColors);\n }\n\n graph.render();\n },\n\n setFocusedPoint: (index) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.setFocusedPointByIndex(index);\n },\n\n setZoomLevel: (level) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.setZoomLevel(level);\n },\n\n destroyGraph: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n // TODO: this should be happening in cosmos\n if ((graph as any).store.div?.firstChild) {\n (graph as any).store.div.innerHTML = '';\n }\n graph.pause();\n graph.destroy();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.graph = null;\n draft.cosmos.isSimulationRunning = false;\n }),\n );\n },\n },\n }));\n}\n\n/**\n * Combined type representing the full room state including Cosmos functionality.\n * Merges the base room state with Cosmos-specific state and configuration.\n */\nexport type RoomStateWithCosmos = RoomShellSliceState & CosmosSliceState;\n\n/**\n * Hook to access the Cosmos store with proper typing.\n * Provides type-safe access to the combined room and Cosmos state.\n *\n * @template T The type of the selected state slice\n * @param selector A function that selects a portion of the state\n * @returns The selected state portion\n *\n * @example\n * ```typescript\n * const graph = useStoreWithCosmos(state => state.cosmos.graph);\n * const isRunning = useStoreWithCosmos(state => state.cosmos.isSimulationRunning);\n * ```\n */\nexport function useStoreWithCosmos<T>(\n selector: (state: RoomStateWithCosmos) => T,\n): T {\n return useBaseRoomShellStore<RoomStateWithCosmos, T>((state) =>\n selector(state as RoomStateWithCosmos),\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"CosmosSlice.js","sourceRoot":"","sources":["../src/CosmosSlice.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Cosmos graph visualization state management using Zustand.\n * This module provides state management and control functions for the Cosmos graph visualization.\n */\n\nimport {Graph, GraphConfigInterface} from '@cosmos.gl/graph';\nimport {\n createSlice,\n useBaseRoomShellStore,\n type RoomShellSliceState,\n} from '@sqlrooms/room-shell';\nimport {produce} from 'immer';\nimport type {StateCreator} from 'zustand';\nimport {\n CosmosSliceConfig,\n createDefaultCosmosConfig,\n} from './CosmosSliceConfig';\n\n/**\n * Core state interface for the Cosmos graph visualization.\n * Contains the graph instance, simulation state, and all control functions.\n */\nexport type CosmosSliceState = {\n cosmos: {\n config: CosmosSliceConfig;\n /** The current graph instance */\n graph: Graph | null;\n /** Whether the physics simulation is currently running */\n isSimulationRunning: boolean;\n /** Sets the config for the cosmos slice */\n setConfig: (config: CosmosSliceConfig) => void;\n /** Creates a new graph instance in the specified container */\n createGraph: (container: HTMLDivElement) => void;\n /** Toggles the physics simulation on/off */\n toggleSimulation: () => void;\n /** Adjusts the view to fit all nodes */\n fitView: () => void;\n /** Starts the simulation with initial energy */\n startWithEnergy: () => void;\n /** Cleans up and removes the current graph */\n destroyGraph: () => void;\n /** Updates the simulation configuration parameters */\n updateSimulationConfig: (config: Partial<CosmosSliceConfig>) => void;\n /** Updates the graph's visual configuration */\n updateGraphConfig: (config: Partial<GraphConfigInterface>) => void;\n /** Updates the graph's data (points, links, colors, etc.) */\n updateGraphData: (data: {\n pointPositions?: Float32Array;\n pointColors?: Float32Array;\n pointSizes?: Float32Array;\n linkIndexes?: Float32Array;\n linkColors?: Float32Array;\n }) => void;\n /** Sets the currently focused point by its index */\n setFocusedPoint: (index: number | undefined) => void;\n /** Sets the zoom level of the graph view */\n setZoomLevel: (level: number) => void;\n };\n};\n\n/**\n * Creates a Zustand slice for managing Cosmos graph state.\n * This slice handles graph creation, destruction, configuration, and data updates.\n *\n * @returns A state creator function for the Cosmos slice\n */\nexport function createCosmosSlice(): StateCreator<CosmosSliceState> {\n return createSlice<CosmosSliceState>((set, get) => ({\n cosmos: {\n graph: null,\n isSimulationRunning: true,\n config: createDefaultCosmosConfig(),\n\n setConfig: (config) => {\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.config = config;\n }),\n );\n },\n\n createGraph: (container: HTMLDivElement) => {\n // Clean up old graph if it exists\n const oldGraph = get().cosmos.graph;\n if (oldGraph) {\n oldGraph.pause();\n oldGraph.destroy();\n }\n\n // Create and configure new graph\n const graph = new Graph(container);\n const config = get().cosmos.config;\n graph.setConfig(config);\n graph.start();\n\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.graph = graph;\n }),\n );\n },\n\n toggleSimulation: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n\n if (graph.isSimulationRunning) {\n graph.pause();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = false;\n }),\n );\n } else {\n graph.restart();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = true;\n }),\n );\n }\n },\n\n fitView: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.fitView();\n },\n\n startWithEnergy: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.start(1);\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = true;\n }),\n );\n },\n\n updateSimulationConfig: (config: Partial<CosmosSliceConfig>) => {\n const {graph} = get().cosmos;\n\n set((state) =>\n produce(state, (draft) => {\n Object.assign(draft.cosmos.config, config);\n if (graph) {\n graph.setConfig(draft.cosmos.config);\n }\n }),\n );\n },\n\n updateGraphConfig: (config: Partial<GraphConfigInterface>) => {\n const {graph} = get().cosmos;\n\n set((state) =>\n produce(state, (draft) => {\n Object.assign(draft.cosmos.config, config);\n if (graph) {\n graph.setConfig(draft.cosmos.config);\n }\n }),\n );\n },\n\n updateGraphData: (data) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n\n if (data.pointPositions) {\n graph.setPointPositions(data.pointPositions);\n }\n if (data.pointColors) {\n graph.setPointColors(data.pointColors);\n }\n if (data.pointSizes) {\n graph.setPointSizes(data.pointSizes);\n }\n if (data.linkIndexes) {\n graph.setLinks(data.linkIndexes);\n }\n if (data.linkColors) {\n graph.setLinkColors(data.linkColors);\n }\n\n graph.render();\n },\n\n setFocusedPoint: (index) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.setConfig({\n focusedPointIndex: index,\n });\n },\n\n setZoomLevel: (level) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.setZoomLevel(level);\n },\n\n destroyGraph: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n // TODO: this should be happening in cosmos\n if ((graph as any).store.div?.firstChild) {\n (graph as any).store.div.innerHTML = '';\n }\n graph.pause();\n graph.destroy();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.graph = null;\n draft.cosmos.isSimulationRunning = false;\n }),\n );\n },\n },\n }));\n}\n\n/**\n * Combined type representing the full room state including Cosmos functionality.\n * Merges the base room state with Cosmos-specific state and configuration.\n */\nexport type RoomStateWithCosmos = RoomShellSliceState & CosmosSliceState;\n\n/**\n * Hook to access the Cosmos store with proper typing.\n * Provides type-safe access to the combined room and Cosmos state.\n *\n * @template T The type of the selected state slice\n * @param selector A function that selects a portion of the state\n * @returns The selected state portion\n *\n * @example\n * ```typescript\n * const graph = useStoreWithCosmos(state => state.cosmos.graph);\n * const isRunning = useStoreWithCosmos(state => state.cosmos.isSimulationRunning);\n * ```\n */\nexport function useStoreWithCosmos<T>(\n selector: (state: RoomStateWithCosmos) => T,\n): T {\n return useBaseRoomShellStore<RoomStateWithCosmos, T>((state) =>\n selector(state as RoomStateWithCosmos),\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CosmosSliceConfig.js","sourceRoot":"","sources":["../src/CosmosSliceConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAGtB;;;GAGG;AACH,MAAM,qBAAqB,GAAsB;IAC/C,cAAc,EAAE,GAAG;IACnB,iBAAiB,EAAE,IAAI;IACvB,iBAAiB,EAAE,IAAI;IACvB,mBAAmB,EAAE,GAAG;IACxB,oBAAoB,EAAE,GAAG;IACzB,sBAAsB,EAAE,EAAE;IAC1B,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,IAAI;IACrB,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,KAAK;IAClB,cAAc,EAAE,CAAC;IACjB,mBAAmB,EAAE,CAAC;CAC0B,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC,MAAM,CAAC;IACxC;;;;OAIG;IACH,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,8BAA8B,CAAC;IAEnE;;;;OAIG;IACH,iBAAiB,EAAE,CAAC;SACjB,OAAO,EAAE;SACT,QAAQ,CAAC,+CAA+C,CAAC;IAE5D;;;OAGG;IACH,WAAW,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,0BAA0B,CAAC;IAE7D;;;;OAIG;IACH,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,6BAA6B,CAAC;IAElE;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,mCAAmC,CAAC;IAE7E;;;;OAIG;IACH,UAAU,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,0CAA0C,CAAC;IAE5E;;;;OAIG;IACH,WAAW,EAAE,CAAC;SACX,OAAO,EAAE;SACT,QAAQ,CAAC,+DAA+D,CAAC;IAE5E;;;;OAIG;IACH,iBAAiB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,iCAAiC,CAAC;IAEzE;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,+BAA+B,CAAC;IAEzE;;;;OAIG;IACH,oBAAoB,EAAE,CAAC;SACpB,MAAM,EAAE;SACR,QAAQ,CAAC,sCAAsC,CAAC;IAEnD;;;;OAIG;IACH,sBAAsB,EAAE,CAAC;SACtB,MAAM,EAAE;SACR,QAAQ,CAAC,sCAAsC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,EAAE,CAAC;SAClB,MAAM,EAAE;SACR,QAAQ,CAAC,wCAAwC,CAAC;IAErD;;;;OAIG;IACH,eAAe,EAAE,CAAC;SACf,MAAM,EAAE;SACR,QAAQ,CACP,2GAA2G,CAC5G;CAC2D,CAAC,CAAC;AAGlE,MAAM,UAAU,yBAAyB;IACvC,OAAO,qBAAqB,CAAC;AAC/B,CAAC","sourcesContent":["import {z} from 'zod';\nimport {GraphConfigInterface} from '@
|
|
1
|
+
{"version":3,"file":"CosmosSliceConfig.js","sourceRoot":"","sources":["../src/CosmosSliceConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAGtB;;;GAGG;AACH,MAAM,qBAAqB,GAAsB;IAC/C,cAAc,EAAE,GAAG;IACnB,iBAAiB,EAAE,IAAI;IACvB,iBAAiB,EAAE,IAAI;IACvB,mBAAmB,EAAE,GAAG;IACxB,oBAAoB,EAAE,GAAG;IACzB,sBAAsB,EAAE,EAAE;IAC1B,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,IAAI;IACrB,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,KAAK;IAClB,cAAc,EAAE,CAAC;IACjB,mBAAmB,EAAE,CAAC;CAC0B,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC,MAAM,CAAC;IACxC;;;;OAIG;IACH,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,8BAA8B,CAAC;IAEnE;;;;OAIG;IACH,iBAAiB,EAAE,CAAC;SACjB,OAAO,EAAE;SACT,QAAQ,CAAC,+CAA+C,CAAC;IAE5D;;;OAGG;IACH,WAAW,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,0BAA0B,CAAC;IAE7D;;;;OAIG;IACH,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,6BAA6B,CAAC;IAElE;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,mCAAmC,CAAC;IAE7E;;;;OAIG;IACH,UAAU,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,0CAA0C,CAAC;IAE5E;;;;OAIG;IACH,WAAW,EAAE,CAAC;SACX,OAAO,EAAE;SACT,QAAQ,CAAC,+DAA+D,CAAC;IAE5E;;;;OAIG;IACH,iBAAiB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,iCAAiC,CAAC;IAEzE;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,+BAA+B,CAAC;IAEzE;;;;OAIG;IACH,oBAAoB,EAAE,CAAC;SACpB,MAAM,EAAE;SACR,QAAQ,CAAC,sCAAsC,CAAC;IAEnD;;;;OAIG;IACH,sBAAsB,EAAE,CAAC;SACtB,MAAM,EAAE;SACR,QAAQ,CAAC,sCAAsC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,EAAE,CAAC;SAClB,MAAM,EAAE;SACR,QAAQ,CAAC,wCAAwC,CAAC;IAErD;;;;OAIG;IACH,eAAe,EAAE,CAAC;SACf,MAAM,EAAE;SACR,QAAQ,CACP,2GAA2G,CAC5G;CAC2D,CAAC,CAAC;AAGlE,MAAM,UAAU,yBAAyB;IACvC,OAAO,qBAAqB,CAAC;AAC/B,CAAC","sourcesContent":["import {z} from 'zod';\nimport {GraphConfigInterface} from '@cosmos.gl/graph';\n\n/**\n * Default configuration values for the Cosmos graph visualization.\n * These values provide a balanced starting point for most graph visualizations.\n */\nconst DEFAULT_COSMOS_CONFIG: CosmosSliceConfig = {\n pointSizeScale: 1.1,\n scalePointsOnZoom: true,\n simulationGravity: 0.25,\n simulationRepulsion: 1.0,\n simulationLinkSpring: 1.0,\n simulationLinkDistance: 10,\n simulationFriction: 0.85,\n simulationDecay: 1000,\n renderLinks: true,\n linkArrows: false,\n curvedLinks: false,\n linkWidthScale: 1,\n linkArrowsSizeScale: 1,\n} as const satisfies Partial<GraphConfigInterface>;\n\n/**\n * Zod schema for validating and configuring the Cosmos graph visualization.\n * This schema defines all available configuration options and their types.\n *\n * The configuration is divided into several categories:\n *\n * Node Appearance:\n * - `pointSizeScale`: Controls the size of nodes\n * - `scalePointsOnZoom`: Enables dynamic node sizing based on zoom level\n *\n * Link Appearance:\n * - `renderLinks`: Toggles link visibility\n * - `linkWidthScale`: Controls link thickness\n * - `linkArrows`: Toggles directional arrows\n * - `linkArrowsSizeScale`: Controls arrow size\n * - `curvedLinks`: Toggles curved/straight links\n *\n * Physics Simulation:\n * - `simulationGravity`: Central gravitational force (0.25)\n * - `simulationRepulsion`: Node repulsion force (1.0)\n * - `simulationLinkSpring`: Link spring force (1.0)\n * - `simulationLinkDistance`: Natural link length (10)\n * - `simulationFriction`: Movement damping (0.85)\n * - `simulationDecay`: Simulation cooling rate (1000)\n *\n * @example Basic configuration\n * ```typescript\n * const config: CosmosSliceConfig = {\n * cosmos: {\n * pointSizeScale: 1.2,\n * scalePointsOnZoom: true,\n * renderLinks: true,\n * linkWidthScale: 1.5,\n * simulationGravity: 0.25\n * }\n * };\n * ```\n *\n * @example Directed graph with curved links\n * ```typescript\n * const directedGraphConfig: CosmosSliceConfig = {\n * cosmos: {\n * linkArrows: true,\n * linkArrowsSizeScale: 1.2,\n * curvedLinks: true,\n * simulationLinkDistance: 15,\n * simulationLinkSpring: 1.2\n * }\n * };\n * ```\n *\n * @example High-performance configuration for large graphs\n * ```typescript\n * const largeGraphConfig: CosmosSliceConfig = {\n * cosmos: {\n * simulationGravity: 0.1,\n * simulationRepulsion: 0.8,\n * simulationFriction: 0.9,\n * simulationDecay: 2000,\n * scalePointsOnZoom: false\n * }\n * };\n * ```\n */\nexport const CosmosSliceConfig = z.object({\n /**\n * Scale factor for point (node) sizes in the graph.\n * Values > 1 make nodes larger, values < 1 make them smaller.\n * @default 1.1\n */\n pointSizeScale: z.number().describe('Scale factor for point sizes'),\n\n /**\n * When true, nodes will dynamically resize based on the current zoom level.\n * This helps maintain visual clarity at different zoom levels.\n * @default true\n */\n scalePointsOnZoom: z\n .boolean()\n .describe('Dynamically resize points based on zoom level'),\n\n /**\n * Controls whether links (edges) between nodes are displayed.\n * @default true\n */\n renderLinks: z.boolean().describe('Control links displaying'),\n\n /**\n * Scale factor for link (edge) width.\n * Values > 1 make links thicker, values < 1 make them thinner.\n * @default 1\n */\n linkWidthScale: z.number().describe('Scale factor for link width'),\n\n /**\n * Scale factor for the size of directional arrows on links.\n * Only applies when linkArrows is true.\n * @default 1\n */\n linkArrowsSizeScale: z.number().describe('Scale factor for link arrows size'),\n\n /**\n * When true, displays arrows indicating link direction.\n * Useful for directed graphs.\n * @default false\n */\n linkArrows: z.boolean().describe('Control displaying link direction arrows'),\n\n /**\n * When true, links are rendered as curved Bezier paths.\n * When false, links are straight lines.\n * @default false\n */\n curvedLinks: z\n .boolean()\n .describe('Render links as curved bezier paths instead of straight lines'),\n\n /**\n * Controls the strength of the central gravitational force.\n * Higher values pull nodes more strongly toward the center.\n * @default 0.25\n */\n simulationGravity: z.number().describe('Gravity force in the simulation'),\n\n /**\n * Controls how strongly nodes repel each other.\n * Higher values create more space between unconnected nodes.\n * @default 1.0\n */\n simulationRepulsion: z.number().describe('Repulsion force between nodes'),\n\n /**\n * Controls the strength of the spring force between linked nodes.\n * Higher values pull connected nodes more tightly together.\n * @default 1.0\n */\n simulationLinkSpring: z\n .number()\n .describe('Spring force for links between nodes'),\n\n /**\n * The natural or resting length of links between nodes.\n * Higher values create more spacing between connected nodes.\n * @default 10\n */\n simulationLinkDistance: z\n .number()\n .describe('Target distance between linked nodes'),\n\n /**\n * Controls how quickly node movement decays.\n * Higher values (closer to 1) create more damped movement.\n * @default 0.85\n */\n simulationFriction: z\n .number()\n .describe('Friction coefficient in the simulation'),\n\n /**\n * Controls how quickly the simulation stabilizes.\n * Lower values result in longer, smoother transitions.\n * @default 1000\n */\n simulationDecay: z\n .number()\n .describe(\n 'Decay coefficient in the simulation. Use smaller values if you want the simulation to \"cool down\" slower.',\n ),\n} satisfies Partial<Record<keyof GraphConfigInterface, unknown>>);\nexport type CosmosSliceConfig = z.infer<typeof CosmosSliceConfig>;\n\nexport function createDefaultCosmosConfig(): CosmosSliceConfig {\n return DEFAULT_COSMOS_CONFIG;\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useRelativeCoordinates } from '@sqlrooms/ui';
|
|
2
|
-
import { GraphConfigInterface } from '@
|
|
2
|
+
import { GraphConfigInterface } from '@cosmos.gl/graph';
|
|
3
3
|
/**
|
|
4
4
|
* Represents the state of a hovered point in the graph.
|
|
5
5
|
* When a point is hovered, contains its index and position coordinates.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHoverState.d.ts","sourceRoot":"","sources":["../../src/hooks/useHoverState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAC,oBAAoB,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"useHoverState.d.ts","sourceRoot":"","sources":["../../src/hooks/useHoverState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAC,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAEtD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5B,GAAG,IAAI,CAAC;AAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa,GACxB,yBAAyB,UAAU,CAAC,OAAO,sBAAsB,CAAC,KACjE;IACD,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE;QACb,gBAAgB,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAC,kBAAkB,CAAC,CAAC;QACrE,eAAe,EAAE,MAAM,IAAI,CAAC;QAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,WAAW,EAAE,MAAM,IAAI,CAAC;KACzB,CAAC;CAoCH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHoverState.js","sourceRoot":"","sources":["../../src/hooks/useHoverState.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAC,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAe1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,uBAAkE,EASlE,EAAE;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAa,IAAI,CAAC,CAAC;IAEnE,MAAM,gBAAgB,GAAG,WAAW,CAGlC,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE;QAC/B,IAAI,oBAAoB,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,eAAe,CAAC;gBACd,KAAK;gBACL,QAAQ,EAAE,uBAAuB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC;aAChE,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,uBAAuB,CAAC,CAC1B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAErE,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACL,gBAAgB;QAChB,eAAe,EAAE,eAAe;QAChC,WAAW,EAAE,eAAe;QAC5B,WAAW,EAAE,eAAe;KAC7B,CAAC,EACF,CAAC,gBAAgB,EAAE,eAAe,CAAC,CACpC,CAAC;IAEF,OAAO;QACL,sHAAsH;QACtH,YAAY;QACZ,0DAA0D;QAC1D,aAAa;KACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {useRelativeCoordinates} from '@sqlrooms/ui';\nimport {useState, useCallback, useMemo} from 'react';\nimport {hasClientCoordinates} from '../utils/coordinates';\nimport {GraphConfigInterface} from '@
|
|
1
|
+
{"version":3,"file":"useHoverState.js","sourceRoot":"","sources":["../../src/hooks/useHoverState.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAC,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAe1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,uBAAkE,EASlE,EAAE;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAa,IAAI,CAAC,CAAC;IAEnE,MAAM,gBAAgB,GAAG,WAAW,CAGlC,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE;QAC/B,IAAI,oBAAoB,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,eAAe,CAAC;gBACd,KAAK;gBACL,QAAQ,EAAE,uBAAuB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC;aAChE,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,uBAAuB,CAAC,CAC1B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAErE,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACL,gBAAgB;QAChB,eAAe,EAAE,eAAe;QAChC,WAAW,EAAE,eAAe;QAC5B,WAAW,EAAE,eAAe;KAC7B,CAAC,EACF,CAAC,gBAAgB,EAAE,eAAe,CAAC,CACpC,CAAC;IAEF,OAAO;QACL,sHAAsH;QACtH,YAAY;QACZ,0DAA0D;QAC1D,aAAa;KACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {useRelativeCoordinates} from '@sqlrooms/ui';\nimport {useState, useCallback, useMemo} from 'react';\nimport {hasClientCoordinates} from '../utils/coordinates';\nimport {GraphConfigInterface} from '@cosmos.gl/graph';\n\n/**\n * Represents the state of a hovered point in the graph.\n * When a point is hovered, contains its index and position coordinates.\n * When no point is hovered, the state is null.\n */\nexport type HoverState = {\n /** The index of the hovered point in the graph data array */\n index: number;\n /** The [x, y] coordinates of the hovered point relative to the container */\n position: [number, number];\n} | null;\n\n/**\n * A custom hook that manages hover state for graph points.\n *\n * This hook provides functionality to:\n * - Track which point is currently being hovered\n * - Store the hover position coordinates\n * - Clear the hover state\n * - Provide event handlers for hover-related graph interactions\n *\n * @example\n * ```tsx\n * const Graph = () => {\n * const calcRelativeCoords = useRelativeCoordinates(containerRef);\n * const { hoveredPoint, eventHandlers } = useHoverState(calcRelativeCoords);\n *\n * return (\n * <div ref={containerRef}>\n * <CosmosGraph\n * config={eventHandlers}\n * />\n * {hoveredPoint && (\n * <Tooltip\n * x={hoveredPoint.position[0]}\n * y={hoveredPoint.position[1]}\n * />\n * )}\n * </div>\n * );\n * };\n * ```\n *\n * @param calcRelativeCoordinates - A function that converts client coordinates to container-relative coordinates\n * @returns An object containing the hover state and event handlers for the graph\n */\nexport const useHoverState = (\n calcRelativeCoordinates: ReturnType<typeof useRelativeCoordinates>,\n): {\n hoveredPoint: HoverState;\n eventHandlers: {\n onPointMouseOver: Required<GraphConfigInterface>['onPointMouseOver'];\n onPointMouseOut: () => void;\n onZoomStart: () => void;\n onDragStart: () => void;\n };\n} => {\n const [hoveredPoint, setHoveredPoint] = useState<HoverState>(null);\n\n const onPointMouseOver = useCallback<\n Required<GraphConfigInterface>['onPointMouseOver']\n >(\n (index, _pointPosition, event) => {\n if (hasClientCoordinates(event)) {\n setHoveredPoint({\n index,\n position: calcRelativeCoordinates(event.clientX, event.clientY),\n });\n }\n },\n [calcRelativeCoordinates],\n );\n\n const clearHoverState = useCallback(() => setHoveredPoint(null), []);\n\n const eventHandlers = useMemo(\n () => ({\n onPointMouseOver,\n onPointMouseOut: clearHoverState,\n onZoomStart: clearHoverState,\n onDragStart: clearHoverState,\n }),\n [onPointMouseOver, clearHoverState],\n );\n\n return {\n /** The current hover state, containing the index and position of the hovered point, or null if no point is hovered */\n hoveredPoint,\n /** Event handlers for hover-related graph interactions */\n eventHandlers,\n };\n};\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -14,4 +14,5 @@ export type { HoverState } from './hooks/useHoverState';
|
|
|
14
14
|
export { createCosmosSlice, useStoreWithCosmos } from './CosmosSlice';
|
|
15
15
|
export type { CosmosSliceState, RoomStateWithCosmos } from './CosmosSlice';
|
|
16
16
|
export { CosmosSliceConfig, createDefaultCosmosConfig, } from './CosmosSliceConfig';
|
|
17
|
+
export type { GraphConfigInterface } from '@cosmos.gl/graph';
|
|
17
18
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D;;GAEG;AACH,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAGpE,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACpD,YAAY,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAC,iBAAiB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACpE,YAAY,EAAC,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,eAAe,CAAC;AAIzE,OAAO,EACL,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D;;GAEG;AACH,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAGpE,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACpD,YAAY,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAC,iBAAiB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACpE,YAAY,EAAC,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,eAAe,CAAC;AAIzE,OAAO,EACL,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EAAC,oBAAoB,EAAC,MAAM,kBAAkB,CAAC"}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,aAAa;AACb,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D;;GAEG;AACH,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAEpE,mBAAmB;AACnB,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAC,iBAAiB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGpE,gBAAgB;AAChB,2EAA2E;AAC3E,OAAO,EACL,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\n// Components\nexport {CosmosGraph} from './CosmosGraph';\nexport type {CosmosGraphProps} from './CosmosGraph';\nexport {CosmosGraphControls} from './CosmosGraphControls';\n\n/**\n * A component that provides fine-grained controls for the graph simulation parameters.\n */\nexport {CosmosSimulationControls} from './CosmosSimulationControls';\n\n// State management\nexport {useHoverState} from './hooks/useHoverState';\nexport type {HoverState} from './hooks/useHoverState';\nexport {createCosmosSlice, useStoreWithCosmos} from './CosmosSlice';\nexport type {CosmosSliceState, RoomStateWithCosmos} from './CosmosSlice';\n\n// Configuration\n// Values also export their corresponding types automatically (Zod pattern)\nexport {\n CosmosSliceConfig,\n createDefaultCosmosConfig,\n} from './CosmosSliceConfig';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,aAAa;AACb,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D;;GAEG;AACH,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AAEpE,mBAAmB;AACnB,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAC,iBAAiB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGpE,gBAAgB;AAChB,2EAA2E;AAC3E,OAAO,EACL,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\n// Components\nexport {CosmosGraph} from './CosmosGraph';\nexport type {CosmosGraphProps} from './CosmosGraph';\nexport {CosmosGraphControls} from './CosmosGraphControls';\n\n/**\n * A component that provides fine-grained controls for the graph simulation parameters.\n */\nexport {CosmosSimulationControls} from './CosmosSimulationControls';\n\n// State management\nexport {useHoverState} from './hooks/useHoverState';\nexport type {HoverState} from './hooks/useHoverState';\nexport {createCosmosSlice, useStoreWithCosmos} from './CosmosSlice';\nexport type {CosmosSliceState, RoomStateWithCosmos} from './CosmosSlice';\n\n// Configuration\n// Values also export their corresponding types automatically (Zod pattern)\nexport {\n CosmosSliceConfig,\n createDefaultCosmosConfig,\n} from './CosmosSliceConfig';\n\nexport type {GraphConfigInterface} from '@cosmos.gl/graph';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/cosmos",
|
|
3
|
-
"version": "0.28.0
|
|
3
|
+
"version": "0.28.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"access": "public"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@
|
|
23
|
-
"@sqlrooms/room-shell": "0.28.0
|
|
24
|
-
"@sqlrooms/ui": "0.28.0
|
|
22
|
+
"@cosmos.gl/graph": "^2.6.4",
|
|
23
|
+
"@sqlrooms/room-shell": "0.28.0",
|
|
24
|
+
"@sqlrooms/ui": "0.28.0",
|
|
25
25
|
"immer": "^11.0.1",
|
|
26
26
|
"lucide-react": "^0.556.0",
|
|
27
27
|
"zod": "^4.1.8",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"typecheck": "tsc --noEmit",
|
|
39
39
|
"typedoc": "typedoc"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "dcac54f8adf77240e293c93d224a0ce9fd8142a9"
|
|
42
42
|
}
|