@neoloopy/cld-canvas 0.1.1 → 0.1.2

package/LICENSE

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

package/README.md

@@ -115,6 +115,83 @@ Use `Camera.panBy`, `Camera.zoomAt`, `Camera.setScaleAt`, and
 `Camera.centerOn` to wire your own pointer, wheel, trackpad, minimap, or toolbar
 controls.
 
+## Using It in React (or any framework)
+
+There is no framework-specific component — `paint` only needs a `<canvas>` 2D
+context, so a thin wrapper is all it takes. A minimal React component that turns
+a spec into a rendered diagram:
+
+```tsx
+import { useEffect, useRef } from "react";
+import { parse } from "yaml";
+import {
+  MemoryStorage,
+  NativeEngine,
+  Camera,
+  SceneCache,
+  paint,
+  LIGHT,
+} from "@neoloopy/cld-canvas";
+import type { BuildSpec } from "@neoloopy/cld-canvas";
+
+export function CldCanvas({ spec }: { spec: BuildSpec }) {
+  const ref = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      const engine = new NativeEngine(new MemoryStorage(), parse, {
+        modelsRoot: "Models",
+      });
+      const model = await engine.createModel("model");
+      await engine.buildModel(model.folder, spec);
+      const graph = await engine.loadGraph(model.folder);
+
+      const canvas = ref.current;
+      const ctx = canvas?.getContext("2d");
+      if (!alive || !canvas || !ctx) return;
+
+      const dpr = window.devicePixelRatio || 1;
+      const w = canvas.clientWidth;
+      const h = canvas.clientHeight;
+      canvas.width = Math.floor(w * dpr);
+      canvas.height = Math.floor(h * dpr);
+
+      const camera = new Camera();
+      const sceneCache = new SceneCache();
+      const scene = sceneCache.build(graph, new Map(), new Map());
+      if (!scene) return;
+      sceneCache.fit(camera, w, h);
+
+      paint(ctx, scene, camera, LIGHT, {
+        cssWidth: w,
+        cssHeight: h,
+        dpr,
+        selectedNodeId: null,
+        selectedEdgeId: null,
+        selectedLoopKey: null,
+        liveNodeIds: new Set(),
+        linkPreview: null,
+        connectNodeId: null,
+        loopHighlight: null,
+        pulsePhase: 0,
+        flowPhase: 0,
+      });
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [spec]);
+
+  return <canvas ref={ref} style={{ width: "100%", height: 400 }} />;
+}
+```
+
+To make it interactive, keep one `Camera` and one `SceneCache` across renders,
+wire `Camera.panBy` / `Camera.zoomAt` to pointer and wheel events, and repaint.
+The same wrapper shape works in Vue, Svelte, or plain DOM — only the lifecycle
+hook changes.
+
 ## Engine Concepts
 
 ### Storage

package/package.json

@@ -1,14 +1,34 @@
 {
   "name": "@neoloopy/cld-canvas",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "neoloopy",
   "license": "MIT",
   "description": "Framework-agnostic CLD canvas renderer + in-memory edit engine (shared by the neoloopy Obsidian plugin and neoloopy.com).",
+  "keywords": [
+    "cld",
+    "causal-loop-diagram",
+    "systems-thinking",
+    "system-dynamics",
+    "feedback-loops",
+    "canvas",
+    "diagram",
+    "visualization",
+    "graph",
+    "neoloopy"
+  ],
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" } },
+  "sideEffects": false,
   "files": ["dist"],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/frozenabe/neoloopy-obsidian.git",
+    "directory": "packages/cld-canvas"
+  },
+  "homepage": "https://github.com/frozenabe/neoloopy-obsidian/tree/main/packages/cld-canvas#readme",
+  "bugs": { "url": "https://github.com/frozenabe/neoloopy-obsidian/issues" },
   "scripts": { "build": "tsc -p tsconfig.json" }
 }