@cascivo/flow 0.1.0

package/README.md

@@ -0,0 +1,95 @@
+<!-- generated by scripts/readme/generate.ts — edit readme.body.md, not this file -->
+
+<div align="center">
+  <a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="72" height="72" alt="cascivo logo"></a>
+  <h1>@cascivo/flow</h1>
+  <p><strong>Flow & diagram components — CSS-native, signal-driven node/edge graphs with pan/zoom, draggable nodes, animated edges, and scripted storylines, zero dependencies</strong></p>
+
+[![npm](https://img.shields.io/npm/v/%40cascivo%2Fflow?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/flow)
+[![downloads](https://img.shields.io/npm/dm/%40cascivo%2Fflow?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/flow)
+[![license](https://img.shields.io/npm/l/%40cascivo%2Fflow?style=flat-square&color=0079bf)](https://github.com/cascivo/cascivo/blob/main/LICENSE)
+![types](https://img.shields.io/badge/types-included-0079bf?style=flat-square&logo=typescript&logoColor=white)
+
+[npm](https://www.npmjs.com/package/@cascivo/flow) · [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo)
+
+</div>
+
+---
+
+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.
+
+## Install
+
+```sh
+pnpm add @cascivo/flow
+```
+
+---
+
+[cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo) · AI agents: use [`@cascivo/mcp`](https://github.com/cascivo/cascivo/tree/main/packages/mcp) and [`registry.json`](https://github.com/cascivo/cascivo/blob/main/registry.json) · MIT
+
+<div align="center"><a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="28" height="28" alt="cascivo"></a></div>

package/dist/flow.css

@@ -0,0 +1,2 @@
+@layer cascivo.component{._canvas_6fiig_2{background-color:var(--cascivo-color-bg);border-radius:var(--cascivo-radius-surface);touch-action:none;min-block-size:20rem;inline-size:100%;position:relative;overflow:hidden}._pane_6fiig_13{transform-origin:0 0;block-size:100%;inline-size:100%;transform:translate(var(--flow-tx,0), var(--flow-ty,0)) scale(var(--flow-scale,1));position:absolute;inset-block-start:0;inset-inline-start:0}._panSurface_6fiig_24{cursor:grab;position:absolute;inset:0}._panSurface_6fiig_24:active{cursor:grabbing}._background_1pu9x_2{pointer-events:none;--flow-bg-color:var(--cascivo-color-border);position:absolute;inset:-100%}._background_1pu9x_2[data-variant=dots]{background-image:radial-gradient(circle, var(--flow-bg-color) var(--flow-bg-size), transparent var(--flow-bg-size));background-size:var(--flow-bg-gap) var(--flow-bg-gap)}._background_1pu9x_2[data-variant=grid]{background-image:linear-gradient(to right, var(--flow-bg-color) var(--flow-bg-thick), transparent var(--flow-bg-thick)), linear-gradient(to bottom, var(--flow-bg-color) var(--flow-bg-thick), transparent var(--flow-bg-thick));background-size:var(--flow-bg-gap) var(--flow-bg-gap)}._background_1pu9x_2[data-variant=cross]{--flow-bg-arm:calc(var(--flow-bg-thick) / 2);background-image:linear-gradient(to right, transparent calc(50% - var(--flow-bg-arm)), var(--flow-bg-color) calc(50% - var(--flow-bg-arm)), var(--flow-bg-color) calc(50% + var(--flow-bg-arm)), transparent calc(50% + var(--flow-bg-arm))), linear-gradient(to bottom, transparent calc(50% - var(--flow-bg-arm)), var(--flow-bg-color) calc(50% - var(--flow-bg-arm)), var(--flow-bg-color) calc(50% + var(--flow-bg-arm)), transparent calc(50% + var(--flow-bg-arm)));background-size:var(--flow-bg-gap) var(--flow-bg-gap)}._node_9zyg4_2{transform:translate(var(--flow-x,0), var(--flow-y,0));box-sizing:border-box;min-inline-size:6rem;padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-3);background-color:var(--cascivo-color-surface);color:var(--cascivo-color-text);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-md);box-shadow:var(--cascivo-shadow-sm);cursor:grab;-webkit-user-select:none;user-select:none;position:absolute;inset-block-start:0;inset-inline-start:0}._node_9zyg4_2[data-static]{cursor:default}@media (pointer:coarse){._node_9zyg4_2{min-block-size:var(--cascivo-target-min-coarse,2.75rem)}}._node_9zyg4_2:focus-visible{outline:2px solid var(--cascivo-color-focus-ring);outline-offset:2px}._node_9zyg4_2[data-dragging]{cursor:grabbing;box-shadow:var(--cascivo-shadow-md)}._node_9zyg4_2[data-selected]{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 1px var(--cascivo-color-accent)}._handle_8a1xa_2{cursor:crosshair;z-index:1;place-items:center;block-size:1.25rem;inline-size:1.25rem;display:grid;position:absolute}@media (pointer:coarse){._handle_8a1xa_2{inline-size:var(--cascivo-target-min-coarse,2.75rem);block-size:var(--cascivo-target-min-coarse,2.75rem)}}._handle_8a1xa_2[data-handle-pos=top]{inset-block-start:0;inset-inline-start:50%;transform:translate(-50%,-50%)}._handle_8a1xa_2[data-handle-pos=bottom]{inset-block-end:0;inset-inline-start:50%;transform:translate(-50%,50%)}._handle_8a1xa_2[data-handle-pos=left]{inset-block-start:50%;inset-inline-start:0;transform:translate(-50%,-50%)}._handle_8a1xa_2[data-handle-pos=right]{inset-block-start:50%;inset-inline-end:0;transform:translate(50%,-50%)}._dot_8a1xa_41{background-color:var(--cascivo-color-accent);border:1px solid var(--cascivo-color-surface);border-radius:var(--cascivo-radius-full);block-size:.5rem;inline-size:.5rem;transition:transform var(--cascivo-duration-100) var(--cascivo-ease-out)}._handle_8a1xa_2:hover ._dot_8a1xa_41,._handle_8a1xa_2:focus-visible ._dot_8a1xa_41{transform:scale(1.3)}._handle_8a1xa_2:focus-visible{outline:2px solid var(--cascivo-color-focus-ring);outline-offset:2px;border-radius:var(--cascivo-radius-full)}._edgeSvg_789n0_2{pointer-events:none;block-size:100%;inline-size:100%;position:absolute;inset:0;overflow:visible}._edgePath_789n0_11{fill:none;stroke:var(--cascivo-color-border-strong);stroke-width:1.5px;stroke-linecap:round}._hit_789n0_18{fill:none;stroke:#0000;stroke-width:12px;pointer-events:stroke;cursor:pointer}._arrow_789n0_26{fill:var(--cascivo-color-border-strong)}._edgeSvg_789n0_2[data-selected] ._edgePath_789n0_11,._edgeSvg_789n0_2[data-active] ._edgePath_789n0_11{stroke:var(--cascivo-color-accent);stroke-width:2px}._edgeSvg_789n0_2[data-selected] ._arrow_789n0_26,._edgeSvg_789n0_2[data-active] ._arrow_789n0_26{fill:var(--cascivo-color-accent)}._edgeSvg_789n0_2[data-animated] ._edgePath_789n0_11{stroke-dasharray:6 4;animation:.6s linear infinite _cascivo-flow-dash_789n0_1}._edgeSvg_789n0_2[data-animated][data-direction=reverse] ._edgePath_789n0_11{animation-direction:reverse}@keyframes _cascivo-flow-dash_789n0_1{to{stroke-dashoffset:-10px}}@media (prefers-reduced-motion:reduce){._edgeSvg_789n0_2[data-animated] ._edgePath_789n0_11{animation:none}}._label_789n0_64{transform:translate(var(--flow-label-x,0), var(--flow-label-y,0)) translate(-50%, -50%);padding-block:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);background-color:var(--cascivo-color-surface);color:var(--cascivo-color-text);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-sm);white-space:nowrap;pointer-events:none;font-size:.75rem;line-height:1.4;position:absolute;inset-block-start:0;inset-inline-start:0}._controls_c0e5r_2{z-index:4;padding:var(--cascivo-space-1);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-md);box-shadow:var(--cascivo-shadow-md);flex-direction:column;gap:1px;display:flex;position:absolute}._controls_c0e5r_2[data-position=top-left]{inset-block-start:var(--cascivo-space-3);inset-inline-start:var(--cascivo-space-3)}._controls_c0e5r_2[data-position=top-right]{inset-block-start:var(--cascivo-space-3);inset-inline-end:var(--cascivo-space-3)}._controls_c0e5r_2[data-position=bottom-left]{inset-block-end:var(--cascivo-space-3);inset-inline-start:var(--cascivo-space-3)}._controls_c0e5r_2[data-position=bottom-right]{inset-block-end:var(--cascivo-space-3);inset-inline-end:var(--cascivo-space-3)}._button_c0e5r_32{block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-sm);cursor:pointer;background:0 0;border:none;place-items:center;padding:0;display:grid}@media (pointer:coarse){._button_c0e5r_32{inline-size:var(--cascivo-target-min-coarse,2.75rem);block-size:var(--cascivo-target-min-coarse,2.75rem)}}._button_c0e5r_32:hover{background-color:var(--cascivo-color-bg-muted)}._button_c0e5r_32:focus-visible{outline:2px solid var(--cascivo-color-focus-ring);outline-offset:-2px}._minimap_rdahv_2{z-index:4;background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-md);box-shadow:var(--cascivo-shadow-md);position:absolute}._minimap_rdahv_2[data-position=top-left]{inset-block-start:var(--cascivo-space-3);inset-inline-start:var(--cascivo-space-3)}._minimap_rdahv_2[data-position=top-right]{inset-block-start:var(--cascivo-space-3);inset-inline-end:var(--cascivo-space-3)}._minimap_rdahv_2[data-position=bottom-left]{inset-block-end:var(--cascivo-space-3);inset-inline-start:var(--cascivo-space-3)}._minimap_rdahv_2[data-position=bottom-right]{inset-block-end:var(--cascivo-space-3);inset-inline-end:var(--cascivo-space-3)}._node_rdahv_28{fill:var(--cascivo-color-border-strong)}._viewport_rdahv_32{fill:var(--cascivo-color-accent-subtle);stroke:var(--cascivo-color-accent);stroke-width:2px;cursor:grab}._viewport_rdahv_32:active{cursor:grabbing}._panel_l0cix_2{z-index:4;margin:var(--cascivo-space-3);position:absolute}._panel_l0cix_2[data-position=top-left]{inset-block-start:0;inset-inline-start:0}._panel_l0cix_2[data-position=top-center]{inset-block-start:0;inset-inline-start:50%;transform:translate(-50%)}._panel_l0cix_2[data-position=top-right]{inset-block-start:0;inset-inline-end:0}._panel_l0cix_2[data-position=bottom-left]{inset-block-end:0;inset-inline-start:0}._panel_l0cix_2[data-position=bottom-center]{inset-block-end:0;inset-inline-start:50%;transform:translate(-50%)}._panel_l0cix_2[data-position=bottom-right]{inset-block-end:0;inset-inline-end:0}._flow_vejge_2{min-block-size:24rem}._story_3ojbs_2{inline-size:100%;position:relative}._overlay_3ojbs_7{z-index:5;gap:var(--cascivo-space-2);padding:var(--cascivo-space-4);pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;inset-block-end:0;inset-inline:0}._caption_3ojbs_20{min-block-size:1.5rem;max-inline-size:min(40rem,90%);padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-4);text-align:center;color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-md);box-shadow:var(--cascivo-shadow-md)}._captionText_3ojbs_34{opacity:1;transition:opacity var(--cascivo-duration-300,.3s) var(--cascivo-ease-out);display:inline-block}@starting-style{._captionText_3ojbs_34{opacity:0}}._captionDesc_3ojbs_46{color:var(--cascivo-color-text-muted)}._controls_3ojbs_50{gap:var(--cascivo-space-1);padding:var(--cascivo-space-1);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-full);box-shadow:var(--cascivo-shadow-md);pointer-events:auto;align-items:center;display:flex}._button_3ojbs_62{block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-full);cursor:pointer;background:0 0;border:none;place-items:center;padding:0;display:grid}@media (pointer:coarse){._button_3ojbs_62{inline-size:var(--cascivo-target-min-coarse,2.75rem);block-size:var(--cascivo-target-min-coarse,2.75rem)}}._button_3ojbs_62:hover{background-color:var(--cascivo-color-bg-muted)}._button_3ojbs_62:focus-visible{outline:2px solid var(--cascivo-color-focus-ring);outline-offset:-2px}._indicator_3ojbs_91{padding-inline:var(--cascivo-space-2);color:var(--cascivo-color-text-muted);font-variant-numeric:tabular-nums;font-size:.8125rem}@media (prefers-reduced-motion:reduce){._captionText_3ojbs_34{transition:none}}}
+/*$vite$:1*/