@sqlrooms/cosmos 0.29.0-rc.0 → 0.29.0-rc.2

package/README.md

@@ -31,7 +31,11 @@ export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
 ## Render a graph
 
 ```tsx
-import {CosmosGraph, CosmosGraphControls, CosmosSimulationControls} from '@sqlrooms/cosmos';
+import {
+  CosmosGraph,
+  CosmosGraphControls,
+  CosmosSimulationControls,
+} from '@sqlrooms/cosmos';
 import {GraphConfigInterface} from '@cosmos.gl/graph';
 
 const config: GraphConfigInterface = {
@@ -43,20 +47,16 @@ const config: GraphConfigInterface = {
 };
 
 const pointPositions = new Float32Array([
-  0, 0, // node 0
-  1, 0, // node 1
-  0.5, 1, // node 2
+  0,
+  0, // node 0
+  1,
+  0, // node 1
+  0.5,
+  1, // node 2
 ]);
 const pointSizes = new Float32Array([5, 5, 5]);
-const pointColors = new Float32Array([
-  1, 0, 0, 1,
-  0, 1, 0, 1,
-  0, 0, 1, 1,
-]);
-const linkIndexes = new Float32Array([
-  0, 1,
-  1, 2,
-]);
+const pointColors = new Float32Array([1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1]);
+const linkIndexes = new Float32Array([0, 1, 1, 2]);
 
 export function GraphView() {
   return (
@@ -69,7 +69,7 @@ export function GraphView() {
       renderPointTooltip={(index) => `Node ${index}`}
     >
       <CosmosGraphControls />
-      <CosmosSimulationControls className="absolute right-2 top-2" />
+      <CosmosSimulationControls className="absolute top-2 right-2" />
     </CosmosGraph>
   );
 }
@@ -82,7 +82,9 @@ import {useRoomStore} from './store';
 import {Button} from '@sqlrooms/ui';
 
 function SimulationButtons() {
-  const toggleSimulation = useRoomStore((state) => state.cosmos.toggleSimulation);
+  const toggleSimulation = useRoomStore(
+    (state) => state.cosmos.toggleSimulation,
+  );
   const fitView = useRoomStore((state) => state.cosmos.fitView);
   const updateSimulationConfig = useRoomStore(
     (state) => state.cosmos.updateSimulationConfig,
@@ -92,7 +94,9 @@ function SimulationButtons() {
     <div className="flex gap-2">
       <Button onClick={toggleSimulation}>Toggle simulation</Button>
       <Button onClick={fitView}>Fit view</Button>
-      <Button onClick={() => updateSimulationConfig({simulationRepulsion: 1.5})}>
+      <Button
+        onClick={() => updateSimulationConfig({simulationRepulsion: 1.5})}
+      >
         Stronger repulsion
       </Button>
     </div>

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 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] }));
+    return (_jsxs("div", { className: cn('absolute top-1 left-1 flex gap-2', className), children: [_jsx(Button, { onClick: fitView, variant: "outline", size: "sm", children: _jsx(Maximize2, { className: "h-4 w-4" }) }), children] }));
 };
 //# sourceMappingURL=CosmosGraphControls.js.map

package/dist/CosmosGraphControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"CosmosGraphControls.js","sourceRoot":"","sources":["../src/CosmosGraphControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAC,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"]}
+{"version":3,"file":"CosmosGraphControls.js","sourceRoot":"","sources":["../src/CosmosGraphControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAejD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAE5B,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC5B,MAAM,EAAC,OAAO,EAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAEtD,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,aAC/D,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,YACnD,KAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,GAC1B,EACR,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Button, cn} from '@sqlrooms/ui';\nimport {Maximize2} from 'lucide-react';\nimport {FC, PropsWithChildren} from 'react';\nimport {useStoreWithCosmos} from './CosmosSlice';\n\ninterface CosmosGraphControlsProps {\n  /**\n   * Optional className to override the default positioning and styling of the controls container.\n   * By default, controls are positioned at the top-left corner.\n   * @example\n   * ```tsx\n   * // Position controls at the bottom-right\n   * <CosmosGraphControls className=\"absolute bottom-4 right-4\" />\n   * ```\n   */\n  className?: string;\n}\n\n/**\n * A flexible control panel component for CosmosGraph that provides view controls.\n * Must be used within a CosmosGraph component as it relies on the graph state from the store.\n *\n * The component shows the default fit view control and allows adding custom controls as children.\n * For simulation controls, use the CosmosSimulationControls component.\n *\n * @example Default usage\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosGraphControls />\n * </CosmosGraph>\n * ```\n *\n * @example Custom positioning\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosGraphControls className=\"absolute bottom-4 right-4\" />\n * </CosmosGraph>\n * ```\n *\n * @example Adding custom controls\n * ```tsx\n * <CosmosGraph {...graphProps}>\n *   <CosmosGraphControls>\n *     <Button onClick={handleExport}>\n *       <Download className=\"h-4 w-4\" />\n *     </Button>\n *   </CosmosGraphControls>\n * </CosmosGraph>\n * ```\n */\nexport const CosmosGraphControls: FC<\n  PropsWithChildren<CosmosGraphControlsProps>\n> = ({className, children}) => {\n  const {fitView} = useStoreWithCosmos((s) => s.cosmos);\n\n  return (\n    <div className={cn('absolute top-1 left-1 flex gap-2', className)}>\n      <Button onClick={fitView} variant=\"outline\" size=\"sm\">\n        <Maximize2 className=\"h-4 w-4\" />\n      </Button>\n      {children}\n    </div>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/cosmos",
-  "version": "0.29.0-rc.0",
+  "version": "0.29.0-rc.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -10,7 +10,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/sqlrooms/sqlrooms.git"
+    "url": "git+https://github.com/sqlrooms/sqlrooms.git"
   },
   "files": [
     "dist"
@@ -20,8 +20,8 @@
   },
   "dependencies": {
     "@cosmos.gl/graph": "^2.6.4",
-    "@sqlrooms/room-shell": "0.29.0-rc.0",
-    "@sqlrooms/ui": "0.29.0-rc.0",
+    "@sqlrooms/room-shell": "0.29.0-rc.2",
+    "@sqlrooms/ui": "0.29.0-rc.2",
     "immer": "^11.0.1",
     "lucide-react": "^0.556.0",
     "zod": "^4.1.8",
@@ -38,5 +38,5 @@
     "typecheck": "tsc --noEmit",
     "typedoc": "typedoc"
   },
-  "gitHead": "afdb949c9601b4cdeaae966157a25a54aea2ae54"
+  "gitHead": "5d511631992c1af8852ea79ced488867aad4a555"
 }