@cascivo/flow 0.1.0

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@cascivo/flow",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Flow & diagram components — CSS-native, signal-driven node/edge graphs with pan/zoom, draggable nodes, animated edges, and scripted storylines, zero dependencies",
+  "keywords": [
+    "cascivo",
+    "css",
+    "design-system",
+    "diagram",
+    "flow",
+    "flowchart",
+    "graph",
+    "react",
+    "signals",
+    "svg"
+  ],
+  "homepage": "https://github.com/cascivo/cascivo/tree/main/packages/flow#readme",
+  "bugs": "https://github.com/cascivo/cascivo/issues",
+  "license": "MIT",
+  "author": "urbanisierung",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cascivo/cascivo.git",
+    "directory": "packages/flow"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/flow.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "vp build && node scripts/flatten-types.mjs && node scripts/check-types-flat.mjs",
+    "check": "tsc --noEmit",
+    "test": "vp test"
+  },
+  "dependencies": {
+    "@cascivo/core": "workspace:^",
+    "@cascivo/i18n": "workspace:^"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@testing-library/user-event": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "fast-check": "catalog:",
+    "jsdom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "typescript": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "peerDependencies": {
+    "@preact/signals-react": ">=2.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  }
+}

package/readme.body.md

@@ -0,0 +1,65 @@
+CSS-native, signal-driven flow & diagram library for cascivo — render node/edge graphs (flowcharts, DAGs, pipelines, mind-maps) with pan/zoom, draggable nodes, connection handles, animated edges, controls, a minimap, and scripted `FlowStory` storylines. HTML nodes (themed cascivo content for free), SVG edges, one CSS-transform viewport. Zero runtime dependencies beyond `@cascivo/core` + `@cascivo/i18n`.
+
+## Install
+
+```sh
+pnpm add @cascivo/flow @preact/signals-react
+```
+
+`react`, `react-dom`, and `@preact/signals-react` are peer dependencies — install them in your app.
+
+## Usage
+
+The headline API is a single declarative `<Flow nodes edges />` that takes plain
+serializable data (an agent can emit it as JSON):
+
+```tsx
+import { Flow } from '@cascivo/flow'
+import '@cascivo/flow/styles.css' // required — maps to the dist `flow.css`
+import '@cascivo/themes/dark.css' // any cascivo theme drives the flow colors
+
+const nodes = [
+  { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Client' } },
+  { id: 'b', position: { x: 240, y: 0 }, data: { label: 'Gateway' } },
+  { id: 'c', position: { x: 480, y: 0 }, data: { label: 'Service' } },
+]
+const edges = [
+  { id: 'ab', source: 'a', target: 'b', animated: true },
+  { id: 'bc', source: 'b', target: 'c' },
+]
+
+export function Pipeline() {
+  return <Flow nodes={nodes} edges={edges} background controls />
+}
+```
+
+### Scripted storylines
+
+`<FlowStory>` walks the viewer through a graph step by step with fade-in
+captions — driven by a serializable `script`:
+
+```tsx
+import { FlowStory } from '@cascivo/flow'
+;<FlowStory
+  nodes={nodes}
+  edges={edges}
+  script={[
+    { from: 'a', to: 'b', label: 'Request sent' },
+    { from: 'b', to: 'a', label: 'Acknowledged' },
+    { from: 'a', to: 'b', label: 'Payload streamed' },
+    { from: 'b', to: 'c', label: 'Forwarded to Service' },
+  ]}
+  loop
+/>
+```
+
+## Scope
+
+Covers the basic set both [React Flow](https://reactflow.dev) and
+[AntV X6](https://x6.antv.antgroup.com/) share — render, pan/zoom, drag,
+handles, edges (bezier/straight/smoothstep), selection, interactive connect,
+background, controls, minimap, animated edges — plus the `FlowStory` storyline.
+It deliberately does **not** ship heavy editor surfaces (auto-layout engines,
+undo/redo, clipboard, resize/rotate, snaplines, lasso/whiteboard, sub-flows,
+multiplayer). A tiny optional dependency-free `gridLayout`/`layeredLayout`
+helper covers the common "just arrange these for me" case.