@cascivo/flow 1.1.0 → 1.2.0

package/dist/index.js

@@ -1,3 +1,3 @@
 "use client";
 import './flow.css';
-import{cn as e,useComputed as t,useControllableSignal as n,useDraggable as r,useEffectPropSignal as i,useResizeObserver as a,useSignal as o,useSignalEffect as s,useSignals as c}from"@cascivo/core";import{useId as l,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{cn as m}from"@cascivo/core/pure";import{builtin as h,t as g}from"@cascivo/i18n";var _={width:150,height:40},v={x:0,y:0,zoom:1};function y(e={}){let[t,r]=n({value:e.nodes,defaultValue:e.defaultNodes??[],onChange:e.onNodesChange}),[i,a]=n({value:e.edges,defaultValue:e.defaultEdges??[],onChange:e.onEdgesChange}),[o,s]=n({value:e.viewport,defaultValue:e.defaultViewport??v,onChange:e.onViewportChange});return{nodes:t,edges:i,viewport:o,setNodes:r,updateNode:(e,n)=>{r(t.value.map(t=>t.id===e?{...t,...n}:t))},setEdges:a,addEdge:e=>{a([...i.value,e])},setViewport:s}}function b(e,t=.2,n=2){return Math.min(n,Math.max(t,e))}function x(e,t){return{x:(e.x-t.x)/t.zoom,y:(e.y-t.y)/t.zoom}}function S(e,t){return{x:e.x*t.zoom+t.x,y:e.y*t.zoom+t.y}}function C(e){return{width:e.width??_.width,height:e.height??_.height}}function w(e){let{width:t,height:n}=C(e);return{x:e.position.x,y:e.position.y,width:t,height:n}}function T(e,t){let{x:n,y:r,width:i,height:a}=w(e);switch(t){case`top`:return{x:n+i/2,y:r};case`right`:return{x:n+i,y:r+a/2};case`bottom`:return{x:n+i/2,y:r+a};case`left`:return{x:n,y:r+a/2}}}function E(e){if(e.length===0)return null;let t=1/0,n=1/0,r=-1/0,i=-1/0;for(let a of e){let e=w(a);t=Math.min(t,e.x),n=Math.min(n,e.y),r=Math.max(r,e.x+e.width),i=Math.max(i,e.y+e.height)}return{x:t,y:n,width:r-t,height:i-n}}function D(e,t,n={}){let{padding:r=.1,minZoom:i=.2,maxZoom:a=2}=n;if(e.width<=0||e.height<=0||t.width<=0||t.height<=0)return{x:t.width/2-e.x,y:t.height/2-e.y,zoom:1};let o=t.width/(e.width*(1+r*2)),s=t.height/(e.height*(1+r*2)),c=b(Math.min(o,s),i,a);return{x:t.width/2-(e.x+e.width/2)*c,y:t.height/2-(e.y+e.height/2)*c,zoom:c}}var O=e=>Number.isInteger(e)?String(e):e.toFixed(2).replace(/\.?0+$/,``),k=(e,t)=>({x:(e.x+t.x)/2,y:(e.y+t.y)/2});function A(e){switch(e){case`top`:return{x:0,y:-1};case`bottom`:return{x:0,y:1};case`left`:return{x:-1,y:0};case`right`:return{x:1,y:0}}}function j({source:e,target:t}){return{d:`M${O(e.x)},${O(e.y)} L${O(t.x)},${O(t.y)}`,mid:k(e,t)}}function M(e){let{source:t,target:n,curvature:r=.25}=e,i=e.sourcePosition??`right`,a=e.targetPosition??`left`,o=Math.hypot(n.x-t.x,n.y-t.y),s=Math.max(r*o,20),c=A(i),l=A(a),u={x:t.x+c.x*s,y:t.y+c.y*s},d={x:n.x+l.x*s,y:n.y+l.y*s},f={x:(t.x+3*u.x+3*d.x+n.x)/8,y:(t.y+3*u.y+3*d.y+n.y)/8};return{d:`M${O(t.x)},${O(t.y)} C${O(u.x)},${O(u.y)} ${O(d.x)},${O(d.y)} ${O(n.x)},${O(n.y)}`,mid:f}}function N(e,t){return Math.hypot(t.x-e.x,t.y-e.y)}function P(e,t,n){let r=N(e,t)||1;return{x:e.x+(t.x-e.x)/r*n,y:e.y+(t.y-e.y)/r*n}}function F(e,t){if(e.length<2)return``;let n=e[0],r=`M${O(n.x)},${O(n.y)}`;for(let n=1;n<e.length-1;n++){let i=e[n-1],a=e[n],o=e[n+1],s=Math.min(t,N(i,a)/2,N(a,o)/2),c=P(a,i,s),l=P(a,o,s);r+=` L${O(c.x)},${O(c.y)} Q${O(a.x)},${O(a.y)} ${O(l.x)},${O(l.y)}`}let i=e[e.length-1];return r+=` L${O(i.x)},${O(i.y)}`,r}function I(e){let{source:t,target:n,borderRadius:r=8}=e,i=e.sourcePosition??`right`,a=i===`left`||i===`right`,o=[t];if(a){let e=(t.x+n.x)/2;o.push({x:e,y:t.y},{x:e,y:n.y})}else{let e=(t.y+n.y)/2;o.push({x:t.x,y:e},{x:n.x,y:e})}return o.push(n),{d:F(o,r),mid:k(t,n)}}function L(e,t){switch(e){case`straight`:return j(t);case`smoothstep`:return I(t);case`bezier`:return M(t)}}function R(e,t={}){let n=t.gap??40,r=t.nodeWidth??_.width,i=t.nodeHeight??_.height,a=t.columns??Math.max(1,Math.ceil(Math.sqrt(e.length)));return e.map((e,t)=>{let o=t%a,s=Math.floor(t/a);return{...e,position:{x:o*(r+n),y:s*(i+n)}}})}function z(e,t,n={}){let r=n.direction??`LR`,i=n.gap??60,a=n.nodeWidth??_.width,o=n.nodeHeight??_.height,s=new Set(e.map(e=>e.id)),c=new Map,l=new Map;for(let t of e)l.set(t.id,0);for(let e of t)!s.has(e.source)||!s.has(e.target)||(c.set(e.source,[...c.get(e.source)??[],e.target]),l.set(e.target,(l.get(e.target)??0)+1));let u=new Map,d=e.filter(e=>(l.get(e.id)??0)===0).map(e=>e.id);for(let e of d)u.set(e,0);let f=new Map(l);for(;d.length>0;){let e=[];for(let t of d){let n=u.get(t)??0;for(let r of c.get(t)??[])u.set(r,Math.max(u.get(r)??0,n+1)),f.set(r,(f.get(r)??0)-1),(f.get(r)??0)===0&&e.push(r)}d=e}for(let t of e)u.has(t.id)||u.set(t.id,0);let p=new Map,m=new Map;for(let t of e){let e=u.get(t.id)??0,n=m.get(e)??0;p.set(t.id,n),m.set(e,n+1)}return e.map(e=>{let t=u.get(e.id)??0,n=p.get(e.id)??0,s=r===`LR`?{x:t*(a+i),y:n*(o+i)}:{x:n*(a+i),y:t*(o+i)};return{...e,position:s}})}function B(e,t,n){return n===`grid`?R(e):n===`layered`?z(e,t):n(e,t)}function V(e){return`edge`in e}function ee(e,t){let n={label:e.label,description:e.description,duration:e.duration};if(V(e)){let r=t.find(t=>t.id===e.edge);if(!r)throw Error(`FlowStory: step references unknown edge "${e.edge}"`);return{edgeId:r.id,direction:e.reverse?`reverse`:`forward`,...n}}let r=t.find(t=>t.source===e.from&&t.target===e.to);if(r)return{edgeId:r.id,direction:`forward`,...n};let i=t.find(t=>t.source===e.to&&t.target===e.from);if(i)return{edgeId:i.id,direction:`reverse`,...n};throw Error(`FlowStory: no edge connects "${e.from}" and "${e.to}"`)}function te(e,t){return e.map(e=>ee(e,t))}var H=1.2;function U(e,t={}){let{minZoom:n=.2,maxZoom:i=2,panOnDrag:o=!0,zoomOnScroll:c=!0,fitPadding:l=.1,fitOnInit:d=!1}=t,{viewport:f,setViewport:p}=e,{ref:m,size:h}=a(),{handleRef:g,offset:_,isDragging:v}=r({isDisabled:!o}),y=(e,t)=>{let n=f.peek();p({x:n.x+e,y:n.y+t,zoom:n.zoom})},S=(e,t)=>{let r=f.peek(),a=b(e,n,i);if(!t){p({x:r.x,y:r.y,zoom:a});return}let o=x(t,r);p({x:t.x-o.x*a,y:t.y-o.y*a,zoom:a})},C=()=>{let e=m.current;if(e)return{x:e.clientWidth/2,y:e.clientHeight/2}},w=()=>S(f.peek().zoom*H,C()),T=()=>S(f.peek().zoom/H,C()),O=()=>{let e=h.peek();if(e&&e.width>0&&e.height>0)return e;let t=m.current;return t&&t.clientWidth>0?{width:t.clientWidth,height:t.clientHeight}:null},k=t=>{let r=E(e.nodes.peek());if(!r)return;let a=t??O();a&&p(D(r,a,{padding:l,minZoom:n,maxZoom:i}))},A=u(null);s(()=>{let e=v.value,t=_.value;if(!o)return;if(!e){A.current=null;return}A.current||={vp:f.peek(),off:t};let n=A.current;p({x:n.vp.x+(t.x-n.off.x),y:n.vp.y+(t.y-n.off.y),zoom:n.vp.zoom})}),s(()=>{if(!c||typeof window>`u`)return;let e=m.current;if(!e)return;let t=t=>{t.preventDefault();let n=e.getBoundingClientRect(),r={x:t.clientX-n.left,y:t.clientY-n.top},i=t.deltaY<0?H:1/H;S(f.peek().zoom*i,r)};return e.addEventListener(`wheel`,t,{passive:!1}),()=>e.removeEventListener(`wheel`,t)});let j=u(!1);return s(()=>{if(!d||j.current)return;let e=h.value;!e||e.width===0||(j.current=!0,k(e))}),{containerRef:m,panHandleRef:g,viewport:f,pan:y,zoomTo:S,zoomIn:w,zoomOut:T,fitView:k}}var ne=`[data-flow-handle][data-handle-type="source"]`,re=`[data-flow-handle][data-handle-type="target"]`;function ie(e){let{containerRef:t}=e,n=o(null),r=u(e.onConnect);r.current=e.onConnect;let a=u(e.isValid);a.current=e.isValid;let c=u(e.clientToFlow);c.current=e.clientToFlow;let l=i(e.enabled??!0);return s(()=>{if(!l.value||typeof window>`u`)return;let e=t.current;if(!e)return;let i=e=>{let t=n.peek();t&&(n.value={...t,to:c.current(e.clientX,e.clientY)})},o=e=>{let t=n.peek();if(window.removeEventListener(`pointermove`,i),window.removeEventListener(`pointerup`,o),n.value=null,!t)return;let s=e.target,c=s instanceof Element?s.closest(re):null,l=c?.closest(`[data-node-id]`);if(!l)return;let u={source:t.source,target:l.getAttribute(`data-node-id`)??``,sourceHandle:t.sourceHandle,targetHandle:c?.getAttribute(`data-handle-id`)??void 0};!u.target||u.source===u.target||a.current&&!a.current(u)||r.current?.(u)},s=e=>{let t=e.target;if(!(t instanceof Element))return;let r=t.closest(ne);if(!r)return;let a=r.closest(`[data-node-id]`);if(!a)return;e.stopPropagation();let s=r.getBoundingClientRect();n.value={source:a.getAttribute(`data-node-id`)??``,sourceHandle:r.getAttribute(`data-handle-id`)??void 0,from:c.current(s.left+s.width/2,s.top+s.height/2),to:c.current(e.clientX,e.clientY)},window.addEventListener(`pointermove`,i),window.addEventListener(`pointerup`,o)};return e.addEventListener(`pointerdown`,s),()=>{e.removeEventListener(`pointerdown`,s),window.removeEventListener(`pointermove`,i),window.removeEventListener(`pointerup`,o)}}),{connection:n}}var ae=1500;function oe(e){let{steps:r,loop:i=!0,stepDuration:a=ae,stepGap:o=0}=e,[c,l]=n({value:e.currentStep,defaultValue:e.defaultCurrentStep??0,onChange:e.onStepChange}),[d,f]=n({value:e.playing,defaultValue:e.defaultPlaying??!0,onChange:e.onPlayingChange}),p=t(()=>r[c.value]??null),m=u(e.clock);m.current=e.clock;let h=u(r);h.current=r;let g=()=>m.current??{setTimeout:(e,t)=>window.setTimeout(e,t),clearTimeout:e=>window.clearTimeout(e)},_=e=>{let t=h.current.length;if(t===0)return;let n=c.peek()+e;l(i?(n%t+t)%t:Math.max(0,Math.min(t-1,n)))};return s(()=>{if(!d.value)return;let e=c.value,t=r.length;if(t===0||typeof window>`u`&&!m.current)return;let n=(r[e]?.duration??a)+o,s=g(),u=s.setTimeout(()=>{let n=e+1;n>=t?i?l(0):f(!1):l(n)},n);return()=>s.clearTimeout(u)}),{currentStep:c,playing:d,activeStep:p,play:()=>f(!0),pause:()=>f(!1),toggle:()=>f(!d.peek()),next:()=>_(1),prev:()=>_(-1),restart:()=>{l(0),f(!0)}}}var W={canvas:`_canvas_6fiig_2`,pane:`_pane_6fiig_13`,panSurface:`_panSurface_6fiig_24`};function se({children:t,flow:n,viewport:r,defaultViewport:i,onViewportChange:a,minZoom:o,maxZoom:s,panOnDrag:l=!0,zoomOnScroll:u=!0,fitView:d=!1,controller:m,chrome:h,className:g,role:_=`application`,...v}){c();let b=y({viewport:r,defaultViewport:i,onViewportChange:a}),x=n??b,S=U(x,{minZoom:o,maxZoom:s,panOnDrag:l,zoomOnScroll:u,fitOnInit:d}),C=m??S,w=x.viewport.value;return p(`div`,{ref:C.containerRef,className:e(W.canvas,g),role:_,...v,children:[p(`div`,{className:W.pane,style:{"--flow-tx":`${w.x}px`,"--flow-ty":`${w.y}px`,"--flow-scale":String(w.zoom)},children:[f(`div`,{ref:C.panHandleRef,className:W.panSurface,"aria-hidden":`true`}),t]}),h]})}var ce={background:`_background_1pu9x_2`};function le({variant:e=`dots`,gap:t=20,size:n=1,color:r,className:i,style:a,...o}){return f(`div`,{"data-variant":e,"aria-hidden":`true`,className:m(ce.background,i),style:{"--flow-bg-gap":`${t}px`,"--flow-bg-size":`${n}px`,"--flow-bg-thick":`${Math.max(1,n)}px`,...r?{"--flow-bg-color":r}:{},...a},...o})}var ue={node:`_node_9zyg4_2`};function de({id:t,position:i,defaultPosition:a,onPositionChange:o,onMeasure:l,zoom:d=1,selected:p=!1,draggable:m=!0,interactive:h=!0,onSelect:g,children:_,className:v,onClick:y,onKeyDown:b,...x}){c();let S=m&&h,[C,w]=n({value:i,defaultValue:a??i??{x:0,y:0},onChange:o}),{handleRef:T,targetRef:E,offset:D,isDragging:O}=r({isDisabled:!S}),k=u(null),A=e=>{k.current=e,T.current=e,E.current=e},j=u(l);j.current=l,s(()=>{let e=k.current;if(!e||typeof ResizeObserver>`u`)return;let t=()=>{let t=e.offsetWidth,n=e.offsetHeight;t>0&&n>0&&j.current?.({width:t,height:n})};t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()});let M=u(d);M.current=d;let N=u(null);s(()=>{let e=O.value,t=D.value;if(!S)return;if(!e){N.current=null;return}N.current||={pos:C.peek(),off:t};let n=N.current,r=M.current||1;w({x:n.pos.x+(t.x-n.off.x)/r,y:n.pos.y+(t.y-n.off.y)/r})});let P=C.value;return f(`div`,{ref:A,"data-node-id":t,"data-selected":p||void 0,"data-dragging":O.value||void 0,"data-static":!h||void 0,role:`group`,tabIndex:h?0:void 0,className:e(ue.node,v),style:{"--flow-x":`${P.x}px`,"--flow-y":`${P.y}px`},onClick:e=>{h&&g?.(t),y?.(e)},onKeyDown:e=>{h&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),g?.(t)),b?.(e)},...x,children:_})}var G={handle:`_handle_8a1xa_2`,dot:`_dot_8a1xa_41`};function fe(e){return e===`source`?`right`:`left`}function K({type:e,position:t,id:n,isConnectable:r=!0,className:i,...a}){return f(`div`,{"data-handle-type":e,"data-handle-pos":t??fe(e),"data-handle-id":n,"data-connectable":r||void 0,"data-flow-handle":``,tabIndex:r?0:-1,className:m(G.handle,i),...a,children:f(`span`,{className:G.dot,"aria-hidden":`true`})})}var q={edgeSvg:`_edgeSvg_789n0_2`,edgePath:`_edgePath_789n0_11`,hit:`_hit_789n0_18`,arrow:`_arrow_789n0_26`,"cascivo-flow-dash":`_cascivo-flow-dash_789n0_1`,label:`_label_789n0_64`};function J({id:t,sourceX:n,sourceY:r,targetX:i,targetY:a,sourcePosition:o=`right`,targetPosition:s=`left`,type:c=`bezier`,animated:u=!1,label:m,selected:h=!1,markerStart:g=!1,markerEnd:_=!0,direction:v=`forward`,active:y,className:b}){let x=l(),S=`flow-arrow-${t??x}`,C=g||_,{d:w,mid:T}=L(c,{source:{x:n,y:r},target:{x:i,y:a},sourcePosition:o,targetPosition:s});return p(d,{children:[p(`svg`,{className:e(q.edgeSvg,b),"data-edge-id":t,"data-animated":u||void 0,"data-selected":h||void 0,"data-active":y||void 0,"data-direction":v,"aria-hidden":`true`,children:[C&&f(`defs`,{children:f(`marker`,{id:S,viewBox:`0 0 10 10`,refX:`9`,refY:`5`,markerWidth:`7`,markerHeight:`7`,orient:`auto-start-reverse`,children:f(`path`,{className:q.arrow,d:`M0,0 L10,5 L0,10 z`})})}),f(`path`,{className:q.hit,d:w}),f(`path`,{className:q.edgePath,d:w,markerStart:g?`url(#${S})`:void 0,markerEnd:_?`url(#${S})`:void 0})]}),m!=null&&f(`div`,{className:q.label,style:{"--flow-label-x":`${T.x}px`,"--flow-label-y":`${T.y}px`},children:m})]})}var Y={controls:`_controls_s32im_2`,button:`_button_s32im_32`},X={width:18,height:18,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":!0};function pe({position:t=`bottom-left`,showZoom:n=!0,showFitView:r=!0,onZoomIn:i,onZoomOut:a,onFitView:o,labels:s,className:l,...u}){return c(),p(`div`,{"data-position":t,className:e(Y.controls,l),...u,children:[n&&p(d,{children:[f(`button`,{type:`button`,className:Y.button,"aria-label":s?.zoomIn??g(h.flow.zoomIn),onClick:i,children:f(`svg`,{...X,children:f(`path`,{d:`M12 5v14M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),f(`button`,{type:`button`,className:Y.button,"aria-label":s?.zoomOut??g(h.flow.zoomOut),onClick:a,children:f(`svg`,{...X,children:f(`path`,{d:`M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})})]}),r&&f(`button`,{type:`button`,className:Y.button,"aria-label":s?.fitView??g(h.flow.fitView),onClick:o,children:f(`svg`,{...X,children:f(`path`,{d:`M4 9V5a1 1 0 0 1 1-1h4M15 4h4a1 1 0 0 1 1 1v4M20 15v4a1 1 0 0 1-1 1h-4M9 20H5a1 1 0 0 1-1-1v-4`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})})]})}var Z={minimap:`_minimap_rdahv_2`,node:`_node_rdahv_28`,viewport:`_viewport_rdahv_32`};function me({nodes:t,viewport:n,containerWidth:i,containerHeight:a,width:o=200,height:l=150,position:d=`bottom-right`,nodeColor:m,onViewportChange:_,label:v,ariaLabel:y,className:b}){c();let S=E(t)??{x:0,y:0,width:1,height:1},C=S.width||1,T=S.height||1,D=C*.1,O=T*.1,k={x:S.x-D,y:S.y-O,width:C+D*2,height:T+O*2},A=Math.min(o/k.width,l/k.height),j=-k.x*A+(o-k.width*A)/2,M=-k.y*A+(l-k.height*A)/2,N=e=>({x:e.x*A+j,y:e.y*A+M}),P=null;if(i&&a){let e=x({x:0,y:0},n),t=x({x:i,y:a},n),r=N(e);P={x:r.x,y:r.y,w:(t.x-e.x)*A,h:(t.y-e.y)*A}}let{handleRef:F,offset:I,isDragging:L}=r({isDisabled:!_}),R=u(null),z=e=>{R.current=e,F.current=e},B=u(_);B.current=_;let V=u(null);return s(()=>{let e=L.value,t=I.value;if(!B.current)return;if(!e){V.current=null;return}V.current||={vp:n,off:t};let r=V.current,i=r.vp.zoom;B.current({x:r.vp.x-(t.x-r.off.x)/A*i,y:r.vp.y-(t.y-r.off.y)/A*i,zoom:i})}),p(`svg`,{"data-position":d,className:e(Z.minimap,b),width:o,height:l,role:`img`,"aria-label":y??v??g(h.flow.minimap),children:[t.map(e=>{let t=w(e),n=N({x:t.x,y:t.y});return f(`rect`,{"data-node-id":e.id,className:Z.node,x:n.x,y:n.y,width:t.width*A,height:t.height*A,fill:m},e.id)}),P&&f(`rect`,{ref:z,"data-viewport":``,className:Z.viewport,x:P.x,y:P.y,width:P.w,height:P.h})]})}var he={panel:`_panel_l0cix_2`};function ge({position:e=`top-right`,children:t,className:n,...r}){return f(`div`,{"data-position":e,className:m(he.panel,n),...r,children:t})}var _e={flow:`_flow_vejge_2`},ve=0;function ye({nodes:t,edges:n,onNodesChange:r,onEdgesChange:i,onConnect:a,nodeTypes:s,fitView:l=!0,background:u=!1,controls:m=!1,minimap:h=!1,layout:g,minZoom:_,maxZoom:v,interactive:b=!0,activeEdgeId:S,activeDirection:C,className:w,style:E}){c();let D=y({defaultNodes:g?B(t,n,g):t,defaultEdges:n,onNodesChange:r,onEdgesChange:i}),O=U(D,{minZoom:_,maxZoom:v,fitOnInit:l}),{connection:k}=ie({containerRef:O.containerRef,clientToFlow:(e,t)=>{let n=O.containerRef.current?.getBoundingClientRect();return x({x:e-(n?.left??0),y:t-(n?.top??0)},D.viewport.peek())},enabled:b,onConnect:e=>{D.addEdge({id:`e-${++ve}`,source:e.source,target:e.target}),a?.(e)}}),A=e=>{D.setNodes(D.nodes.value.map(t=>({...t,selected:t.id===e})))},j=o({}),M=(e,t)=>{let n=j.peek()[e];n&&n.width===t.width&&n.height===t.height||(j.value={...j.peek(),[e]:t})},N=D.nodes.value,P=D.edges.value,F=D.viewport.value.zoom,I=j.value,L=new Map(N.map(e=>{let t=I[e.id];return[e.id,t?{...e,width:t.width,height:t.height}:e]})),R=k.value;return p(se,{flow:D,controller:O,minZoom:_,maxZoom:v,chrome:p(d,{children:[m&&f(pe,{onZoomIn:O.zoomIn,onZoomOut:O.zoomOut,onFitView:()=>O.fitView()}),h&&f(me,{nodes:N,viewport:D.viewport.value,containerWidth:O.containerRef.current?.clientWidth,containerHeight:O.containerRef.current?.clientHeight,onViewportChange:D.setViewport})]}),className:e(_e.flow,w),style:E,children:[u&&f(le,{...typeof u==`object`?u:{}}),P.map(e=>{let t=L.get(e.source),n=L.get(e.target);if(!t||!n)return null;let r=T(t,`right`),i=T(n,`left`),a=S===e.id,o=a?C:void 0,s=o===`reverse`?!0:o===`forward`?!1:e.markerStart??!1,c=o===`reverse`?!1:o===`forward`?!0:e.markerEnd??!0;return f(J,{id:e.id,sourceX:r.x,sourceY:r.y,targetX:i.x,targetY:i.y,type:e.type??`bezier`,animated:e.animated||a,active:a,direction:o,markerStart:s,markerEnd:c,label:e.label,selected:e.selected},e.id)}),R&&f(J,{sourceX:R.from.x,sourceY:R.from.y,targetX:R.to.x,targetY:R.to.y,markerEnd:!1}),N.map(e=>f(de,{id:e.id,position:e.position,zoom:F,interactive:b,selected:e.selected??!1,onSelect:b?A:void 0,onMeasure:t=>M(e.id,t),onPositionChange:t=>D.updateNode(e.id,{position:t}),children:s&&e.type&&s[e.type]?s[e.type]({node:e}):p(d,{children:[f(`span`,{children:String(e.data?.label??e.id)}),b&&f(K,{type:`target`,position:`left`}),b&&f(K,{type:`source`,position:`right`})]})},e.id))]})}var Q={story:`_story_btt88_2`,overlay:`_overlay_btt88_7`,caption:`_caption_btt88_20`,captionText:`_captionText_btt88_36`,captionDesc:`_captionDesc_btt88_48`,controls:`_controls_btt88_52`,button:`_button_btt88_64`,indicator:`_indicator_btt88_93`},$={width:18,height:18,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":!0};function be({nodes:t,edges:n,script:r,loop:i=!0,stepDuration:a=1500,stepGap:o=0,playing:s,currentStep:l,onStepChange:u,controls:d=!0,autoPlay:m=!0,background:_=!0,interactive:v=!1,labels:y,clock:b,className:x,style:S}){c();let C=te(r,n),w=oe({steps:C,loop:i,stepDuration:a,stepGap:o,playing:s,defaultPlaying:m,currentStep:l,defaultCurrentStep:0,onStepChange:u,clock:b}),T=w.activeStep.value,E=w.currentStep.value,D=w.playing.value;return p(`div`,{className:e(Q.story,x),style:S,children:[f(ye,{nodes:t,edges:n,background:_,interactive:v,activeEdgeId:T?.edgeId,activeDirection:T?.direction}),p(`div`,{className:Q.overlay,children:[f(`div`,{className:Q.caption,"aria-live":`polite`,children:T?.label&&p(`span`,{className:Q.captionText,children:[f(`strong`,{children:T.label}),T.description&&p(`span`,{className:Q.captionDesc,children:[` — `,T.description]})]},E)}),d&&p(`div`,{className:Q.controls,children:[f(`button`,{type:`button`,className:Q.button,"aria-label":y?.previous??g(h.flow.previous),onClick:w.prev,children:f(`svg`,{...$,children:f(`path`,{d:`M15 6 9 12l6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),f(`button`,{type:`button`,className:Q.button,"aria-label":D?y?.pause??g(h.flow.pause):y?.play??g(h.flow.play),"aria-pressed":D,onClick:w.toggle,children:D?f(`svg`,{...$,children:f(`path`,{d:`M7 5h3v14H7zM14 5h3v14h-3z`})}):f(`svg`,{...$,children:f(`path`,{d:`M7 5l11 7-11 7z`})})}),f(`button`,{type:`button`,className:Q.button,"aria-label":y?.next??g(h.flow.next),onClick:w.next,children:f(`svg`,{...$,children:f(`path`,{d:`M9 6l6 6-6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),f(`span`,{className:Q.indicator,children:g(h.flow.step,{current:E+1,total:C.length})})]})]})]})}export{_ as DEFAULT_NODE_SIZE,ye as Flow,le as FlowBackground,se as FlowCanvas,pe as FlowControls,J as FlowEdge,K as FlowHandle,me as FlowMiniMap,de as FlowNode,ge as FlowPanel,be as FlowStory,B as applyLayout,M as bezierPath,b as clampZoom,L as edgePath,D as fitViewport,S as flowToScreen,E as graphBounds,R as gridLayout,T as handleAnchor,z as layeredLayout,w as nodeBounds,C as nodeSize,te as resolveScript,ee as resolveStep,x as screenToFlow,I as smoothStepPath,j as straightPath,ie as useConnection,y as useFlow,oe as useStory,U as useViewport};
+import{cn as e,useComputed as t,useControllableSignal as r,useDraggable as i,useEffectPropSignal as a,useResizeObserver as o,useSignal as s,useSignalEffect as c,useSignals as l}from"@cascivo/core";import{useId as u,useRef as d}from"react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{cn as h}from"@cascivo/core/pure";import{builtin as g,t as _}from"@cascivo/i18n";var v={width:150,height:40},y={x:0,y:0,zoom:1};function useFlow(e={}){let[t,i]=r({value:e.nodes,defaultValue:e.defaultNodes??[],onChange:e.onNodesChange}),[a,o]=r({value:e.edges,defaultValue:e.defaultEdges??[],onChange:e.onEdgesChange}),[s,c]=r({value:e.viewport,defaultValue:e.defaultViewport??y,onChange:e.onViewportChange});return{nodes:t,edges:a,viewport:s,setNodes:i,updateNode:(e,r)=>{i(t.value.map(t=>t.id===e?{...t,...r}:t))},setEdges:o,addEdge:e=>{o([...a.value,e])},setViewport:c}}function clampZoom(e,t=.2,r=2){return Math.min(r,Math.max(t,e))}function screenToFlow(e,t){return{x:(e.x-t.x)/t.zoom,y:(e.y-t.y)/t.zoom}}function flowToScreen(e,t){return{x:e.x*t.zoom+t.x,y:e.y*t.zoom+t.y}}function nodeSize(e){return{width:e.width??v.width,height:e.height??v.height}}function nodeBounds(e){let{width:t,height:r}=nodeSize(e);return{x:e.position.x,y:e.position.y,width:t,height:r}}function handleAnchor(e,t){let{x:r,y:i,width:a,height:o}=nodeBounds(e);switch(t){case`top`:return{x:r+a/2,y:i};case`right`:return{x:r+a,y:i+o/2};case`bottom`:return{x:r+a/2,y:i+o};case`left`:return{x:r,y:i+o/2}}}function graphBounds(e){if(e.length===0)return null;let t=1/0,r=1/0,i=-1/0,a=-1/0;for(let o of e){let e=nodeBounds(o);t=Math.min(t,e.x),r=Math.min(r,e.y),i=Math.max(i,e.x+e.width),a=Math.max(a,e.y+e.height)}return{x:t,y:r,width:i-t,height:a-r}}function fitViewport(e,t,r={}){let{padding:i=.1,minZoom:a=.2,maxZoom:o=2}=r;if(e.width<=0||e.height<=0||t.width<=0||t.height<=0)return{x:t.width/2-e.x,y:t.height/2-e.y,zoom:1};let s=t.width/(e.width*(1+i*2)),c=t.height/(e.height*(1+i*2)),l=clampZoom(Math.min(s,c),a,o);return{x:t.width/2-(e.x+e.width/2)*l,y:t.height/2-(e.y+e.height/2)*l,zoom:l}}var n=e=>Number.isInteger(e)?String(e):e.toFixed(2).replace(/\.?0+$/,``),midpoint=(e,t)=>({x:(e.x+t.x)/2,y:(e.y+t.y)/2});function normal(e){switch(e){case`top`:return{x:0,y:-1};case`bottom`:return{x:0,y:1};case`left`:return{x:-1,y:0};case`right`:return{x:1,y:0}}}function straightPath({source:e,target:t}){return{d:`M${n(e.x)},${n(e.y)} L${n(t.x)},${n(t.y)}`,mid:midpoint(e,t)}}function bezierPath(e){let{source:t,target:r,curvature:i=.25}=e,a=e.sourcePosition??`right`,o=e.targetPosition??`left`,s=Math.hypot(r.x-t.x,r.y-t.y),c=Math.max(i*s,20),l=normal(a),u=normal(o),d={x:t.x+l.x*c,y:t.y+l.y*c},f={x:r.x+u.x*c,y:r.y+u.y*c},p={x:(t.x+3*d.x+3*f.x+r.x)/8,y:(t.y+3*d.y+3*f.y+r.y)/8};return{d:`M${n(t.x)},${n(t.y)} C${n(d.x)},${n(d.y)} ${n(f.x)},${n(f.y)} ${n(r.x)},${n(r.y)}`,mid:p}}function len(e,t){return Math.hypot(t.x-e.x,t.y-e.y)}function towards(e,t,r){let i=len(e,t)||1;return{x:e.x+(t.x-e.x)/i*r,y:e.y+(t.y-e.y)/i*r}}function roundedPath(e,t){if(e.length<2)return``;let r=e[0],i=`M${n(r.x)},${n(r.y)}`;for(let r=1;r<e.length-1;r++){let a=e[r-1],o=e[r],s=e[r+1],c=Math.min(t,len(a,o)/2,len(o,s)/2),l=towards(o,a,c),u=towards(o,s,c);i+=` L${n(l.x)},${n(l.y)} Q${n(o.x)},${n(o.y)} ${n(u.x)},${n(u.y)}`}let a=e[e.length-1];return i+=` L${n(a.x)},${n(a.y)}`,i}function smoothStepPath(e){let{source:t,target:r,borderRadius:i=8}=e,a=e.sourcePosition??`right`,o=a===`left`||a===`right`,s=[t];if(o){let e=(t.x+r.x)/2;s.push({x:e,y:t.y},{x:e,y:r.y})}else{let e=(t.y+r.y)/2;s.push({x:t.x,y:e},{x:r.x,y:e})}return s.push(r),{d:roundedPath(s,i),mid:midpoint(t,r)}}function edgePath(e,t){switch(e){case`straight`:return straightPath(t);case`smoothstep`:return smoothStepPath(t);case`bezier`:return bezierPath(t)}}function gridLayout(e,t={}){let r=t.gap??40,i=t.nodeWidth??v.width,a=t.nodeHeight??v.height,o=t.columns??Math.max(1,Math.ceil(Math.sqrt(e.length)));return e.map((e,t)=>{let s=t%o,c=Math.floor(t/o);return{...e,position:{x:s*(i+r),y:c*(a+r)}}})}function layeredLayout(e,t,r={}){let i=r.direction??`LR`,a=r.gap??60,o=r.nodeWidth??v.width,s=r.nodeHeight??v.height,c=new Set(e.map(e=>e.id)),l=new Map,u=new Map;for(let t of e)u.set(t.id,0);for(let e of t)!c.has(e.source)||!c.has(e.target)||(l.set(e.source,[...l.get(e.source)??[],e.target]),u.set(e.target,(u.get(e.target)??0)+1));let d=new Map,f=e.filter(e=>(u.get(e.id)??0)===0).map(e=>e.id);for(let e of f)d.set(e,0);let p=new Map(u);for(;f.length>0;){let e=[];for(let t of f){let r=d.get(t)??0;for(let i of l.get(t)??[])d.set(i,Math.max(d.get(i)??0,r+1)),p.set(i,(p.get(i)??0)-1),(p.get(i)??0)===0&&e.push(i)}f=e}for(let t of e)d.has(t.id)||d.set(t.id,0);let m=new Map,h=new Map;for(let t of e){let e=d.get(t.id)??0,r=h.get(e)??0;m.set(t.id,r),h.set(e,r+1)}return e.map(e=>{let t=d.get(e.id)??0,r=m.get(e.id)??0,c=i===`LR`?{x:t*(o+a),y:r*(s+a)}:{x:r*(o+a),y:t*(s+a)};return{...e,position:c}})}function applyLayout(e,t,r){return r===`grid`?gridLayout(e):r===`layered`?layeredLayout(e,t):r(e,t)}function isEdgeStep(e){return`edge`in e}function resolveStep(e,t){let r={label:e.label,description:e.description,duration:e.duration};if(isEdgeStep(e)){let i=t.find(t=>t.id===e.edge);if(!i)throw Error(`FlowStory: step references unknown edge "${e.edge}"`);return{edgeId:i.id,direction:e.reverse?`reverse`:`forward`,...r}}let i=t.find(t=>t.source===e.from&&t.target===e.to);if(i)return{edgeId:i.id,direction:`forward`,...r};let a=t.find(t=>t.source===e.to&&t.target===e.from);if(a)return{edgeId:a.id,direction:`reverse`,...r};throw Error(`FlowStory: no edge connects "${e.from}" and "${e.to}"`)}function resolveScript(e,t){return e.map(e=>resolveStep(e,t))}var b=1.2;function useViewport(e,t={}){let{minZoom:r=.2,maxZoom:a=2,panOnDrag:s=!0,zoomOnScroll:l=!0,fitPadding:u=.1,fitOnInit:f=!1}=t,{viewport:p,setViewport:m}=e,{ref:h,size:g}=o(),{handleRef:_,offset:v,isDragging:y}=i({isDisabled:!s}),pan=(e,t)=>{let r=p.peek();m({x:r.x+e,y:r.y+t,zoom:r.zoom})},zoomTo=(e,t)=>{let i=p.peek(),o=clampZoom(e,r,a);if(!t){m({x:i.x,y:i.y,zoom:o});return}let s=screenToFlow(t,i);m({x:t.x-s.x*o,y:t.y-s.y*o,zoom:o})},containerCenter=()=>{let e=h.current;if(e)return{x:e.clientWidth/2,y:e.clientHeight/2}},zoomIn=()=>zoomTo(p.peek().zoom*b,containerCenter()),zoomOut=()=>zoomTo(p.peek().zoom/b,containerCenter()),measuredSize=()=>{let e=g.peek();if(e&&e.width>0&&e.height>0)return e;let t=h.current;return t&&t.clientWidth>0?{width:t.clientWidth,height:t.clientHeight}:null},fitView=t=>{let i=graphBounds(e.nodes.peek());if(!i)return;let o=t??measuredSize();o&&m(fitViewport(i,o,{padding:u,minZoom:r,maxZoom:a}))},x=d(null);c(()=>{let e=y.value,t=v.value;if(!s)return;if(!e){x.current=null;return}x.current||={vp:p.peek(),off:t};let r=x.current;m({x:r.vp.x+(t.x-r.off.x),y:r.vp.y+(t.y-r.off.y),zoom:r.vp.zoom})}),c(()=>{if(!l||typeof window>`u`)return;let e=h.current;if(!e)return;let onWheel=t=>{t.preventDefault();let r=e.getBoundingClientRect(),i={x:t.clientX-r.left,y:t.clientY-r.top},a=t.deltaY<0?b:1/b;zoomTo(p.peek().zoom*a,i)};return e.addEventListener(`wheel`,onWheel,{passive:!1}),()=>e.removeEventListener(`wheel`,onWheel)});let S=d(!1);return c(()=>{if(!f||S.current)return;let e=g.value;!e||e.width===0||(S.current=!0,fitView(e))}),{containerRef:h,panHandleRef:_,viewport:p,pan,zoomTo,zoomIn,zoomOut,fitView}}var x=`[data-flow-handle][data-handle-type="source"]`,S=`[data-flow-handle][data-handle-type="target"]`;function useConnection(e){let{containerRef:t}=e,r=s(null),i=d(e.onConnect);i.current=e.onConnect;let o=d(e.isValid);o.current=e.isValid;let l=d(e.clientToFlow);l.current=e.clientToFlow;let u=a(e.enabled??!0);return c(()=>{if(!u.value||typeof window>`u`)return;let e=t.current;if(!e)return;let onMove=e=>{let t=r.peek();t&&(r.value={...t,to:l.current(e.clientX,e.clientY)})},onUp=e=>{let t=r.peek();if(window.removeEventListener(`pointermove`,onMove),window.removeEventListener(`pointerup`,onUp),r.value=null,!t)return;let a=e.target,s=a instanceof Element?a.closest(S):null,c=s?.closest(`[data-node-id]`);if(!c)return;let l={source:t.source,target:c.getAttribute(`data-node-id`)??``,sourceHandle:t.sourceHandle,targetHandle:s?.getAttribute(`data-handle-id`)??void 0};!l.target||l.source===l.target||o.current&&!o.current(l)||i.current?.(l)},onDown=e=>{let t=e.target;if(!(t instanceof Element))return;let i=t.closest(x);if(!i)return;let a=i.closest(`[data-node-id]`);if(!a)return;e.stopPropagation();let o=i.getBoundingClientRect();r.value={source:a.getAttribute(`data-node-id`)??``,sourceHandle:i.getAttribute(`data-handle-id`)??void 0,from:l.current(o.left+o.width/2,o.top+o.height/2),to:l.current(e.clientX,e.clientY)},window.addEventListener(`pointermove`,onMove),window.addEventListener(`pointerup`,onUp)};return e.addEventListener(`pointerdown`,onDown),()=>{e.removeEventListener(`pointerdown`,onDown),window.removeEventListener(`pointermove`,onMove),window.removeEventListener(`pointerup`,onUp)}}),{connection:r}}var C=1500;function useStory(e){let{steps:i,loop:a=!0,stepDuration:o=C,stepGap:s=0}=e,[l,u]=r({value:e.currentStep,defaultValue:e.defaultCurrentStep??0,onChange:e.onStepChange}),[f,p]=r({value:e.playing,defaultValue:e.defaultPlaying??!0,onChange:e.onPlayingChange}),m=t(()=>i[l.value]??null),h=d(e.clock);h.current=e.clock;let g=d(i);g.current=i;let clock=()=>h.current??{setTimeout:(e,t)=>window.setTimeout(e,t),clearTimeout:e=>window.clearTimeout(e)},advance=e=>{let t=g.current.length;if(t===0)return;let r=l.peek()+e;u(a?(r%t+t)%t:Math.max(0,Math.min(t-1,r)))};return c(()=>{if(!f.value)return;let e=l.value,t=i.length;if(t===0||typeof window>`u`&&!h.current)return;let r=(i[e]?.duration??o)+s,c=clock(),d=c.setTimeout(()=>{let r=e+1;r>=t?a?u(0):p(!1):u(r)},r);return()=>c.clearTimeout(d)}),{currentStep:l,playing:f,activeStep:m,play:()=>p(!0),pause:()=>p(!1),toggle:()=>p(!f.peek()),next:()=>advance(1),prev:()=>advance(-1),restart:()=>{u(0),p(!0)}}}var w={canvas:`_canvas_6fiig_2`,pane:`_pane_6fiig_13`,panSurface:`_panSurface_6fiig_24`};function FlowCanvas({children:t,flow:r,viewport:i,defaultViewport:a,onViewportChange:o,minZoom:s,maxZoom:c,panOnDrag:u=!0,zoomOnScroll:d=!0,fitView:f=!1,controller:h,chrome:g,className:_,role:v=`application`,...y}){l();let b=useFlow({viewport:i,defaultViewport:a,onViewportChange:o}),x=r??b,S=useViewport(x,{minZoom:s,maxZoom:c,panOnDrag:u,zoomOnScroll:d,fitOnInit:f}),C=h??S,T=x.viewport.value;return m(`div`,{ref:C.containerRef,className:e(w.canvas,_),role:v,...y,children:[m(`div`,{className:w.pane,style:{"--flow-tx":`${T.x}px`,"--flow-ty":`${T.y}px`,"--flow-scale":String(T.zoom)},children:[p(`div`,{ref:C.panHandleRef,className:w.panSurface,"aria-hidden":`true`}),t]}),g]})}var T={background:`_background_1pu9x_2`};function FlowBackground({variant:e=`dots`,gap:t=20,size:r=1,color:i,className:a,style:o,...s}){return p(`div`,{"data-variant":e,"aria-hidden":`true`,className:h(T.background,a),style:{"--flow-bg-gap":`${t}px`,"--flow-bg-size":`${r}px`,"--flow-bg-thick":`${Math.max(1,r)}px`,...i?{"--flow-bg-color":i}:{},...o},...s})}var E={node:`_node_9zyg4_2`};function FlowNode({id:t,position:a,defaultPosition:o,onPositionChange:s,onMeasure:u,zoom:f=1,selected:m=!1,draggable:h=!0,interactive:g=!0,onSelect:_,children:v,className:y,onClick:b,onKeyDown:x,...S}){l();let C=h&&g,[w,T]=r({value:a,defaultValue:o??a??{x:0,y:0},onChange:s}),{handleRef:D,targetRef:O,offset:k,isDragging:A}=i({isDisabled:!C}),j=d(null),setRefs=e=>{j.current=e,D.current=e,O.current=e},M=d(u);M.current=u,c(()=>{let e=j.current;if(!e||typeof ResizeObserver>`u`)return;let report=()=>{let t=e.offsetWidth,r=e.offsetHeight;t>0&&r>0&&M.current?.({width:t,height:r})};report();let t=new ResizeObserver(report);return t.observe(e),()=>t.disconnect()});let N=d(f);N.current=f;let P=d(null);c(()=>{let e=A.value,t=k.value;if(!C)return;if(!e){P.current=null;return}P.current||={pos:w.peek(),off:t};let r=P.current,i=N.current||1;T({x:r.pos.x+(t.x-r.off.x)/i,y:r.pos.y+(t.y-r.off.y)/i})});let F=w.value;return p(`div`,{ref:setRefs,"data-node-id":t,"data-selected":m||void 0,"data-dragging":A.value||void 0,"data-static":!g||void 0,role:`group`,tabIndex:g?0:void 0,className:e(E.node,y),style:{"--flow-x":`${F.x}px`,"--flow-y":`${F.y}px`},onClick:e=>{g&&_?.(t),b?.(e)},onKeyDown:e=>{g&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),_?.(t)),x?.(e)},...S,children:v})}var D={handle:`_handle_8a1xa_2`,dot:`_dot_8a1xa_41`};function defaultPosition(e){return e===`source`?`right`:`left`}function FlowHandle({type:e,position:t,id:r,isConnectable:i=!0,className:a,...o}){return p(`div`,{"data-handle-type":e,"data-handle-pos":t??defaultPosition(e),"data-handle-id":r,"data-connectable":i||void 0,"data-flow-handle":``,tabIndex:i?0:-1,className:h(D.handle,a),...o,children:p(`span`,{className:D.dot,"aria-hidden":`true`})})}var O={edgeSvg:`_edgeSvg_789n0_2`,edgePath:`_edgePath_789n0_11`,hit:`_hit_789n0_18`,arrow:`_arrow_789n0_26`,"cascivo-flow-dash":`_cascivo-flow-dash_789n0_1`,label:`_label_789n0_64`};function FlowEdge({id:t,sourceX:r,sourceY:i,targetX:a,targetY:o,sourcePosition:s=`right`,targetPosition:c=`left`,type:l=`bezier`,animated:d=!1,label:h,selected:g=!1,markerStart:_=!1,markerEnd:v=!0,direction:y=`forward`,active:b,className:x}){let S=u(),C=`flow-arrow-${t??S}`,w=_||v,{d:T,mid:E}=edgePath(l,{source:{x:r,y:i},target:{x:a,y:o},sourcePosition:s,targetPosition:c});return m(f,{children:[m(`svg`,{className:e(O.edgeSvg,x),"data-edge-id":t,"data-animated":d||void 0,"data-selected":g||void 0,"data-active":b||void 0,"data-direction":y,"aria-hidden":`true`,children:[w&&p(`defs`,{children:p(`marker`,{id:C,viewBox:`0 0 10 10`,refX:`9`,refY:`5`,markerWidth:`7`,markerHeight:`7`,orient:`auto-start-reverse`,children:p(`path`,{className:O.arrow,d:`M0,0 L10,5 L0,10 z`})})}),p(`path`,{className:O.hit,d:T}),p(`path`,{className:O.edgePath,d:T,markerStart:_?`url(#${C})`:void 0,markerEnd:v?`url(#${C})`:void 0})]}),h!=null&&p(`div`,{className:O.label,style:{"--flow-label-x":`${E.x}px`,"--flow-label-y":`${E.y}px`},children:h})]})}var k={controls:`_controls_s32im_2`,button:`_button_s32im_32`},A={width:18,height:18,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":!0};function FlowControls({position:t=`bottom-left`,showZoom:r=!0,showFitView:i=!0,onZoomIn:a,onZoomOut:o,onFitView:s,labels:c,className:u,...d}){return l(),m(`div`,{"data-position":t,className:e(k.controls,u),...d,children:[r&&m(f,{children:[p(`button`,{type:`button`,className:k.button,"aria-label":c?.zoomIn??_(g.flow.zoomIn),onClick:a,children:p(`svg`,{...A,children:p(`path`,{d:`M12 5v14M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),p(`button`,{type:`button`,className:k.button,"aria-label":c?.zoomOut??_(g.flow.zoomOut),onClick:o,children:p(`svg`,{...A,children:p(`path`,{d:`M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})})]}),i&&p(`button`,{type:`button`,className:k.button,"aria-label":c?.fitView??_(g.flow.fitView),onClick:s,children:p(`svg`,{...A,children:p(`path`,{d:`M4 9V5a1 1 0 0 1 1-1h4M15 4h4a1 1 0 0 1 1 1v4M20 15v4a1 1 0 0 1-1 1h-4M9 20H5a1 1 0 0 1-1-1v-4`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})})]})}var j={minimap:`_minimap_rdahv_2`,node:`_node_rdahv_28`,viewport:`_viewport_rdahv_32`};function FlowMiniMap({nodes:t,viewport:r,containerWidth:a,containerHeight:o,width:s=200,height:u=150,position:f=`bottom-right`,nodeColor:h,onViewportChange:v,label:y,ariaLabel:b,className:x}){l();let S=graphBounds(t)??{x:0,y:0,width:1,height:1},C=S.width||1,w=S.height||1,T=C*.1,E=w*.1,D={x:S.x-T,y:S.y-E,width:C+T*2,height:w+E*2},O=Math.min(s/D.width,u/D.height),k=-D.x*O+(s-D.width*O)/2,A=-D.y*O+(u-D.height*O)/2,toMM=e=>({x:e.x*O+k,y:e.y*O+A}),M=null;if(a&&o){let e=screenToFlow({x:0,y:0},r),t=screenToFlow({x:a,y:o},r),i=toMM(e);M={x:i.x,y:i.y,w:(t.x-e.x)*O,h:(t.y-e.y)*O}}let{handleRef:N,offset:P,isDragging:F}=i({isDisabled:!v}),I=d(null),setRectRef=e=>{I.current=e,N.current=e},L=d(v);L.current=v;let R=d(null);return c(()=>{let e=F.value,t=P.value;if(!L.current)return;if(!e){R.current=null;return}R.current||={vp:r,off:t};let i=R.current,a=i.vp.zoom;L.current({x:i.vp.x-(t.x-i.off.x)/O*a,y:i.vp.y-(t.y-i.off.y)/O*a,zoom:a})}),m(`svg`,{"data-position":f,className:e(j.minimap,x),width:s,height:u,role:`img`,"aria-label":b??y??_(g.flow.minimap),children:[t.map(e=>{let t=nodeBounds(e),r=toMM({x:t.x,y:t.y});return p(`rect`,{"data-node-id":e.id,className:j.node,x:r.x,y:r.y,width:t.width*O,height:t.height*O,fill:h},e.id)}),M&&p(`rect`,{ref:setRectRef,"data-viewport":``,className:j.viewport,x:M.x,y:M.y,width:M.w,height:M.h})]})}var M={panel:`_panel_l0cix_2`};function FlowPanel({position:e=`top-right`,children:t,className:r,...i}){return p(`div`,{"data-position":e,className:h(M.panel,r),...i,children:t})}var N={flow:`_flow_vejge_2`},P=0;function Flow({nodes:t,edges:r,onNodesChange:i,onEdgesChange:a,onConnect:o,nodeTypes:c,fitView:u=!0,background:d=!1,controls:h=!1,minimap:g=!1,layout:_,minZoom:v,maxZoom:y,interactive:b=!0,activeEdgeId:x,activeDirection:S,className:C,style:w}){l();let T=useFlow({defaultNodes:_?applyLayout(t,r,_):t,defaultEdges:r,onNodesChange:i,onEdgesChange:a}),E=useViewport(T,{minZoom:v,maxZoom:y,fitOnInit:u}),{connection:D}=useConnection({containerRef:E.containerRef,clientToFlow:(e,t)=>{let r=E.containerRef.current?.getBoundingClientRect();return screenToFlow({x:e-(r?.left??0),y:t-(r?.top??0)},T.viewport.peek())},enabled:b,onConnect:e=>{T.addEdge({id:`e-${++P}`,source:e.source,target:e.target}),o?.(e)}}),select=e=>{T.setNodes(T.nodes.value.map(t=>({...t,selected:t.id===e})))},O=s({}),measure=(e,t)=>{let r=O.peek()[e];r&&r.width===t.width&&r.height===t.height||(O.value={...O.peek(),[e]:t})},k=T.nodes.value,A=T.edges.value,j=T.viewport.value.zoom,M=O.value,F=new Map(k.map(e=>{let t=M[e.id];return[e.id,t?{...e,width:t.width,height:t.height}:e]})),I=D.value;return m(FlowCanvas,{flow:T,controller:E,minZoom:v,maxZoom:y,chrome:m(f,{children:[h&&p(FlowControls,{onZoomIn:E.zoomIn,onZoomOut:E.zoomOut,onFitView:()=>E.fitView()}),g&&p(FlowMiniMap,{nodes:k,viewport:T.viewport.value,containerWidth:E.containerRef.current?.clientWidth,containerHeight:E.containerRef.current?.clientHeight,onViewportChange:T.setViewport})]}),className:e(N.flow,C),style:w,children:[d&&p(FlowBackground,{...typeof d==`object`?d:{}}),A.map(e=>{let t=F.get(e.source),r=F.get(e.target);if(!t||!r)return null;let i=handleAnchor(t,`right`),a=handleAnchor(r,`left`),o=x===e.id,s=o?S:void 0,c=s===`reverse`?!0:s===`forward`?!1:e.markerStart??!1,l=s===`reverse`?!1:s===`forward`?!0:e.markerEnd??!0;return p(FlowEdge,{id:e.id,sourceX:i.x,sourceY:i.y,targetX:a.x,targetY:a.y,type:e.type??`bezier`,animated:e.animated||o,active:o,direction:s,markerStart:c,markerEnd:l,label:e.label,selected:e.selected},e.id)}),I&&p(FlowEdge,{sourceX:I.from.x,sourceY:I.from.y,targetX:I.to.x,targetY:I.to.y,markerEnd:!1}),k.map(e=>p(FlowNode,{id:e.id,position:e.position,zoom:j,interactive:b,selected:e.selected??!1,onSelect:b?select:void 0,onMeasure:t=>measure(e.id,t),onPositionChange:t=>T.updateNode(e.id,{position:t}),children:c&&e.type&&c[e.type]?c[e.type]({node:e}):m(f,{children:[p(`span`,{children:String(e.data?.label??e.id)}),b&&p(FlowHandle,{type:`target`,position:`left`}),b&&p(FlowHandle,{type:`source`,position:`right`})]})},e.id))]})}var F={story:`_story_btt88_2`,overlay:`_overlay_btt88_7`,caption:`_caption_btt88_20`,captionText:`_captionText_btt88_36`,captionDesc:`_captionDesc_btt88_48`,controls:`_controls_btt88_52`,button:`_button_btt88_64`,indicator:`_indicator_btt88_93`},I={width:18,height:18,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":!0};function FlowStory({nodes:t,edges:r,script:i,loop:a=!0,stepDuration:o=1500,stepGap:s=0,playing:c,currentStep:u,onStepChange:d,controls:f=!0,autoPlay:h=!0,background:v=!0,interactive:y=!1,labels:b,clock:x,className:S,style:C}){l();let w=resolveScript(i,r),T=useStory({steps:w,loop:a,stepDuration:o,stepGap:s,playing:c,defaultPlaying:h,currentStep:u,defaultCurrentStep:0,onStepChange:d,clock:x}),E=T.activeStep.value,D=T.currentStep.value,O=T.playing.value;return m(`div`,{className:e(F.story,S),style:C,children:[p(Flow,{nodes:t,edges:r,background:v,interactive:y,activeEdgeId:E?.edgeId,activeDirection:E?.direction}),m(`div`,{className:F.overlay,children:[p(`div`,{className:F.caption,"aria-live":`polite`,children:E?.label&&m(`span`,{className:F.captionText,children:[p(`strong`,{children:E.label}),E.description&&m(`span`,{className:F.captionDesc,children:[` — `,E.description]})]},D)}),f&&m(`div`,{className:F.controls,children:[p(`button`,{type:`button`,className:F.button,"aria-label":b?.previous??_(g.flow.previous),onClick:T.prev,children:p(`svg`,{...I,children:p(`path`,{d:`M15 6 9 12l6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),p(`button`,{type:`button`,className:F.button,"aria-label":O?b?.pause??_(g.flow.pause):b?.play??_(g.flow.play),"aria-pressed":O,onClick:T.toggle,children:O?p(`svg`,{...I,children:p(`path`,{d:`M7 5h3v14H7zM14 5h3v14h-3z`})}):p(`svg`,{...I,children:p(`path`,{d:`M7 5l11 7-11 7z`})})}),p(`button`,{type:`button`,className:F.button,"aria-label":b?.next??_(g.flow.next),onClick:T.next,children:p(`svg`,{...I,children:p(`path`,{d:`M9 6l6 6-6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),p(`span`,{className:F.indicator,children:_(g.flow.step,{current:D+1,total:w.length})})]})]})]})}export{v as DEFAULT_NODE_SIZE,Flow,FlowBackground,FlowCanvas,FlowControls,FlowEdge,FlowHandle,FlowMiniMap,FlowNode,FlowPanel,FlowStory,applyLayout,bezierPath,clampZoom,edgePath,fitViewport,flowToScreen,graphBounds,gridLayout,handleAnchor,layeredLayout,nodeBounds,nodeSize,resolveScript,resolveStep,screenToFlow,smoothStepPath,straightPath,useConnection,useFlow,useStory,useViewport};

package/dist/node/index.js

@@ -1 +1 @@
-"use client";import{cn as e,useComputed as t,useControllableSignal as n,useDraggable as r,useEffectPropSignal as i,useResizeObserver as a,useSignal as o,useSignalEffect as s,useSignals as c}from"@cascivo/core";import{useId as l,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{cn as m}from"@cascivo/core/pure";import{builtin as h,t as g}from"@cascivo/i18n";var _={width:150,height:40},v={x:0,y:0,zoom:1};function y(e={}){let[t,r]=n({value:e.nodes,defaultValue:e.defaultNodes??[],onChange:e.onNodesChange}),[i,a]=n({value:e.edges,defaultValue:e.defaultEdges??[],onChange:e.onEdgesChange}),[o,s]=n({value:e.viewport,defaultValue:e.defaultViewport??v,onChange:e.onViewportChange});return{nodes:t,edges:i,viewport:o,setNodes:r,updateNode:(e,n)=>{r(t.value.map(t=>t.id===e?{...t,...n}:t))},setEdges:a,addEdge:e=>{a([...i.value,e])},setViewport:s}}function b(e,t=.2,n=2){return Math.min(n,Math.max(t,e))}function x(e,t){return{x:(e.x-t.x)/t.zoom,y:(e.y-t.y)/t.zoom}}function S(e,t){return{x:e.x*t.zoom+t.x,y:e.y*t.zoom+t.y}}function C(e){return{width:e.width??_.width,height:e.height??_.height}}function w(e){let{width:t,height:n}=C(e);return{x:e.position.x,y:e.position.y,width:t,height:n}}function T(e,t){let{x:n,y:r,width:i,height:a}=w(e);switch(t){case`top`:return{x:n+i/2,y:r};case`right`:return{x:n+i,y:r+a/2};case`bottom`:return{x:n+i/2,y:r+a};case`left`:return{x:n,y:r+a/2}}}function E(e){if(e.length===0)return null;let t=1/0,n=1/0,r=-1/0,i=-1/0;for(let a of e){let e=w(a);t=Math.min(t,e.x),n=Math.min(n,e.y),r=Math.max(r,e.x+e.width),i=Math.max(i,e.y+e.height)}return{x:t,y:n,width:r-t,height:i-n}}function D(e,t,n={}){let{padding:r=.1,minZoom:i=.2,maxZoom:a=2}=n;if(e.width<=0||e.height<=0||t.width<=0||t.height<=0)return{x:t.width/2-e.x,y:t.height/2-e.y,zoom:1};let o=t.width/(e.width*(1+r*2)),s=t.height/(e.height*(1+r*2)),c=b(Math.min(o,s),i,a);return{x:t.width/2-(e.x+e.width/2)*c,y:t.height/2-(e.y+e.height/2)*c,zoom:c}}var O=e=>Number.isInteger(e)?String(e):e.toFixed(2).replace(/\.?0+$/,``),k=(e,t)=>({x:(e.x+t.x)/2,y:(e.y+t.y)/2});function A(e){switch(e){case`top`:return{x:0,y:-1};case`bottom`:return{x:0,y:1};case`left`:return{x:-1,y:0};case`right`:return{x:1,y:0}}}function j({source:e,target:t}){return{d:`M${O(e.x)},${O(e.y)} L${O(t.x)},${O(t.y)}`,mid:k(e,t)}}function M(e){let{source:t,target:n,curvature:r=.25}=e,i=e.sourcePosition??`right`,a=e.targetPosition??`left`,o=Math.hypot(n.x-t.x,n.y-t.y),s=Math.max(r*o,20),c=A(i),l=A(a),u={x:t.x+c.x*s,y:t.y+c.y*s},d={x:n.x+l.x*s,y:n.y+l.y*s},f={x:(t.x+3*u.x+3*d.x+n.x)/8,y:(t.y+3*u.y+3*d.y+n.y)/8};return{d:`M${O(t.x)},${O(t.y)} C${O(u.x)},${O(u.y)} ${O(d.x)},${O(d.y)} ${O(n.x)},${O(n.y)}`,mid:f}}function N(e,t){return Math.hypot(t.x-e.x,t.y-e.y)}function P(e,t,n){let r=N(e,t)||1;return{x:e.x+(t.x-e.x)/r*n,y:e.y+(t.y-e.y)/r*n}}function F(e,t){if(e.length<2)return``;let n=e[0],r=`M${O(n.x)},${O(n.y)}`;for(let n=1;n<e.length-1;n++){let i=e[n-1],a=e[n],o=e[n+1],s=Math.min(t,N(i,a)/2,N(a,o)/2),c=P(a,i,s),l=P(a,o,s);r+=` L${O(c.x)},${O(c.y)} Q${O(a.x)},${O(a.y)} ${O(l.x)},${O(l.y)}`}let i=e[e.length-1];return r+=` L${O(i.x)},${O(i.y)}`,r}function I(e){let{source:t,target:n,borderRadius:r=8}=e,i=e.sourcePosition??`right`,a=i===`left`||i===`right`,o=[t];if(a){let e=(t.x+n.x)/2;o.push({x:e,y:t.y},{x:e,y:n.y})}else{let e=(t.y+n.y)/2;o.push({x:t.x,y:e},{x:n.x,y:e})}return o.push(n),{d:F(o,r),mid:k(t,n)}}function L(e,t){switch(e){case`straight`:return j(t);case`smoothstep`:return I(t);case`bezier`:return M(t)}}function R(e,t={}){let n=t.gap??40,r=t.nodeWidth??_.width,i=t.nodeHeight??_.height,a=t.columns??Math.max(1,Math.ceil(Math.sqrt(e.length)));return e.map((e,t)=>{let o=t%a,s=Math.floor(t/a);return{...e,position:{x:o*(r+n),y:s*(i+n)}}})}function z(e,t,n={}){let r=n.direction??`LR`,i=n.gap??60,a=n.nodeWidth??_.width,o=n.nodeHeight??_.height,s=new Set(e.map(e=>e.id)),c=new Map,l=new Map;for(let t of e)l.set(t.id,0);for(let e of t)!s.has(e.source)||!s.has(e.target)||(c.set(e.source,[...c.get(e.source)??[],e.target]),l.set(e.target,(l.get(e.target)??0)+1));let u=new Map,d=e.filter(e=>(l.get(e.id)??0)===0).map(e=>e.id);for(let e of d)u.set(e,0);let f=new Map(l);for(;d.length>0;){let e=[];for(let t of d){let n=u.get(t)??0;for(let r of c.get(t)??[])u.set(r,Math.max(u.get(r)??0,n+1)),f.set(r,(f.get(r)??0)-1),(f.get(r)??0)===0&&e.push(r)}d=e}for(let t of e)u.has(t.id)||u.set(t.id,0);let p=new Map,m=new Map;for(let t of e){let e=u.get(t.id)??0,n=m.get(e)??0;p.set(t.id,n),m.set(e,n+1)}return e.map(e=>{let t=u.get(e.id)??0,n=p.get(e.id)??0,s=r===`LR`?{x:t*(a+i),y:n*(o+i)}:{x:n*(a+i),y:t*(o+i)};return{...e,position:s}})}function B(e,t,n){return n===`grid`?R(e):n===`layered`?z(e,t):n(e,t)}function V(e){return`edge`in e}function ee(e,t){let n={label:e.label,description:e.description,duration:e.duration};if(V(e)){let r=t.find(t=>t.id===e.edge);if(!r)throw Error(`FlowStory: step references unknown edge "${e.edge}"`);return{edgeId:r.id,direction:e.reverse?`reverse`:`forward`,...n}}let r=t.find(t=>t.source===e.from&&t.target===e.to);if(r)return{edgeId:r.id,direction:`forward`,...n};let i=t.find(t=>t.source===e.to&&t.target===e.from);if(i)return{edgeId:i.id,direction:`reverse`,...n};throw Error(`FlowStory: no edge connects "${e.from}" and "${e.to}"`)}function te(e,t){return e.map(e=>ee(e,t))}var H=1.2;function U(e,t={}){let{minZoom:n=.2,maxZoom:i=2,panOnDrag:o=!0,zoomOnScroll:c=!0,fitPadding:l=.1,fitOnInit:d=!1}=t,{viewport:f,setViewport:p}=e,{ref:m,size:h}=a(),{handleRef:g,offset:_,isDragging:v}=r({isDisabled:!o}),y=(e,t)=>{let n=f.peek();p({x:n.x+e,y:n.y+t,zoom:n.zoom})},S=(e,t)=>{let r=f.peek(),a=b(e,n,i);if(!t){p({x:r.x,y:r.y,zoom:a});return}let o=x(t,r);p({x:t.x-o.x*a,y:t.y-o.y*a,zoom:a})},C=()=>{let e=m.current;if(e)return{x:e.clientWidth/2,y:e.clientHeight/2}},w=()=>S(f.peek().zoom*H,C()),T=()=>S(f.peek().zoom/H,C()),O=()=>{let e=h.peek();if(e&&e.width>0&&e.height>0)return e;let t=m.current;return t&&t.clientWidth>0?{width:t.clientWidth,height:t.clientHeight}:null},k=t=>{let r=E(e.nodes.peek());if(!r)return;let a=t??O();a&&p(D(r,a,{padding:l,minZoom:n,maxZoom:i}))},A=u(null);s(()=>{let e=v.value,t=_.value;if(!o)return;if(!e){A.current=null;return}A.current||={vp:f.peek(),off:t};let n=A.current;p({x:n.vp.x+(t.x-n.off.x),y:n.vp.y+(t.y-n.off.y),zoom:n.vp.zoom})}),s(()=>{if(!c||typeof window>`u`)return;let e=m.current;if(!e)return;let t=t=>{t.preventDefault();let n=e.getBoundingClientRect(),r={x:t.clientX-n.left,y:t.clientY-n.top},i=t.deltaY<0?H:1/H;S(f.peek().zoom*i,r)};return e.addEventListener(`wheel`,t,{passive:!1}),()=>e.removeEventListener(`wheel`,t)});let j=u(!1);return s(()=>{if(!d||j.current)return;let e=h.value;!e||e.width===0||(j.current=!0,k(e))}),{containerRef:m,panHandleRef:g,viewport:f,pan:y,zoomTo:S,zoomIn:w,zoomOut:T,fitView:k}}var ne=`[data-flow-handle][data-handle-type="source"]`,re=`[data-flow-handle][data-handle-type="target"]`;function ie(e){let{containerRef:t}=e,n=o(null),r=u(e.onConnect);r.current=e.onConnect;let a=u(e.isValid);a.current=e.isValid;let c=u(e.clientToFlow);c.current=e.clientToFlow;let l=i(e.enabled??!0);return s(()=>{if(!l.value||typeof window>`u`)return;let e=t.current;if(!e)return;let i=e=>{let t=n.peek();t&&(n.value={...t,to:c.current(e.clientX,e.clientY)})},o=e=>{let t=n.peek();if(window.removeEventListener(`pointermove`,i),window.removeEventListener(`pointerup`,o),n.value=null,!t)return;let s=e.target,c=s instanceof Element?s.closest(re):null,l=c?.closest(`[data-node-id]`);if(!l)return;let u={source:t.source,target:l.getAttribute(`data-node-id`)??``,sourceHandle:t.sourceHandle,targetHandle:c?.getAttribute(`data-handle-id`)??void 0};!u.target||u.source===u.target||a.current&&!a.current(u)||r.current?.(u)},s=e=>{let t=e.target;if(!(t instanceof Element))return;let r=t.closest(ne);if(!r)return;let a=r.closest(`[data-node-id]`);if(!a)return;e.stopPropagation();let s=r.getBoundingClientRect();n.value={source:a.getAttribute(`data-node-id`)??``,sourceHandle:r.getAttribute(`data-handle-id`)??void 0,from:c.current(s.left+s.width/2,s.top+s.height/2),to:c.current(e.clientX,e.clientY)},window.addEventListener(`pointermove`,i),window.addEventListener(`pointerup`,o)};return e.addEventListener(`pointerdown`,s),()=>{e.removeEventListener(`pointerdown`,s),window.removeEventListener(`pointermove`,i),window.removeEventListener(`pointerup`,o)}}),{connection:n}}var ae=1500;function oe(e){let{steps:r,loop:i=!0,stepDuration:a=ae,stepGap:o=0}=e,[c,l]=n({value:e.currentStep,defaultValue:e.defaultCurrentStep??0,onChange:e.onStepChange}),[d,f]=n({value:e.playing,defaultValue:e.defaultPlaying??!0,onChange:e.onPlayingChange}),p=t(()=>r[c.value]??null),m=u(e.clock);m.current=e.clock;let h=u(r);h.current=r;let g=()=>m.current??{setTimeout:(e,t)=>window.setTimeout(e,t),clearTimeout:e=>window.clearTimeout(e)},_=e=>{let t=h.current.length;if(t===0)return;let n=c.peek()+e;l(i?(n%t+t)%t:Math.max(0,Math.min(t-1,n)))};return s(()=>{if(!d.value)return;let e=c.value,t=r.length;if(t===0||typeof window>`u`&&!m.current)return;let n=(r[e]?.duration??a)+o,s=g(),u=s.setTimeout(()=>{let n=e+1;n>=t?i?l(0):f(!1):l(n)},n);return()=>s.clearTimeout(u)}),{currentStep:c,playing:d,activeStep:p,play:()=>f(!0),pause:()=>f(!1),toggle:()=>f(!d.peek()),next:()=>_(1),prev:()=>_(-1),restart:()=>{l(0),f(!0)}}}var W={canvas:`_canvas_6fiig_2`,pane:`_pane_6fiig_13`,panSurface:`_panSurface_6fiig_24`};function se({children:t,flow:n,viewport:r,defaultViewport:i,onViewportChange:a,minZoom:o,maxZoom:s,panOnDrag:l=!0,zoomOnScroll:u=!0,fitView:d=!1,controller:m,chrome:h,className:g,role:_=`application`,...v}){c();let b=y({viewport:r,defaultViewport:i,onViewportChange:a}),x=n??b,S=U(x,{minZoom:o,maxZoom:s,panOnDrag:l,zoomOnScroll:u,fitOnInit:d}),C=m??S,w=x.viewport.value;return p(`div`,{ref:C.containerRef,className:e(W.canvas,g),role:_,...v,children:[p(`div`,{className:W.pane,style:{"--flow-tx":`${w.x}px`,"--flow-ty":`${w.y}px`,"--flow-scale":String(w.zoom)},children:[f(`div`,{ref:C.panHandleRef,className:W.panSurface,"aria-hidden":`true`}),t]}),h]})}var ce={background:`_background_1pu9x_2`};function le({variant:e=`dots`,gap:t=20,size:n=1,color:r,className:i,style:a,...o}){return f(`div`,{"data-variant":e,"aria-hidden":`true`,className:m(ce.background,i),style:{"--flow-bg-gap":`${t}px`,"--flow-bg-size":`${n}px`,"--flow-bg-thick":`${Math.max(1,n)}px`,...r?{"--flow-bg-color":r}:{},...a},...o})}var ue={node:`_node_9zyg4_2`};function de({id:t,position:i,defaultPosition:a,onPositionChange:o,onMeasure:l,zoom:d=1,selected:p=!1,draggable:m=!0,interactive:h=!0,onSelect:g,children:_,className:v,onClick:y,onKeyDown:b,...x}){c();let S=m&&h,[C,w]=n({value:i,defaultValue:a??i??{x:0,y:0},onChange:o}),{handleRef:T,targetRef:E,offset:D,isDragging:O}=r({isDisabled:!S}),k=u(null),A=e=>{k.current=e,T.current=e,E.current=e},j=u(l);j.current=l,s(()=>{let e=k.current;if(!e||typeof ResizeObserver>`u`)return;let t=()=>{let t=e.offsetWidth,n=e.offsetHeight;t>0&&n>0&&j.current?.({width:t,height:n})};t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()});let M=u(d);M.current=d;let N=u(null);s(()=>{let e=O.value,t=D.value;if(!S)return;if(!e){N.current=null;return}N.current||={pos:C.peek(),off:t};let n=N.current,r=M.current||1;w({x:n.pos.x+(t.x-n.off.x)/r,y:n.pos.y+(t.y-n.off.y)/r})});let P=C.value;return f(`div`,{ref:A,"data-node-id":t,"data-selected":p||void 0,"data-dragging":O.value||void 0,"data-static":!h||void 0,role:`group`,tabIndex:h?0:void 0,className:e(ue.node,v),style:{"--flow-x":`${P.x}px`,"--flow-y":`${P.y}px`},onClick:e=>{h&&g?.(t),y?.(e)},onKeyDown:e=>{h&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),g?.(t)),b?.(e)},...x,children:_})}var G={handle:`_handle_8a1xa_2`,dot:`_dot_8a1xa_41`};function fe(e){return e===`source`?`right`:`left`}function K({type:e,position:t,id:n,isConnectable:r=!0,className:i,...a}){return f(`div`,{"data-handle-type":e,"data-handle-pos":t??fe(e),"data-handle-id":n,"data-connectable":r||void 0,"data-flow-handle":``,tabIndex:r?0:-1,className:m(G.handle,i),...a,children:f(`span`,{className:G.dot,"aria-hidden":`true`})})}var q={edgeSvg:`_edgeSvg_789n0_2`,edgePath:`_edgePath_789n0_11`,hit:`_hit_789n0_18`,arrow:`_arrow_789n0_26`,"cascivo-flow-dash":`_cascivo-flow-dash_789n0_1`,label:`_label_789n0_64`};function J({id:t,sourceX:n,sourceY:r,targetX:i,targetY:a,sourcePosition:o=`right`,targetPosition:s=`left`,type:c=`bezier`,animated:u=!1,label:m,selected:h=!1,markerStart:g=!1,markerEnd:_=!0,direction:v=`forward`,active:y,className:b}){let x=l(),S=`flow-arrow-${t??x}`,C=g||_,{d:w,mid:T}=L(c,{source:{x:n,y:r},target:{x:i,y:a},sourcePosition:o,targetPosition:s});return p(d,{children:[p(`svg`,{className:e(q.edgeSvg,b),"data-edge-id":t,"data-animated":u||void 0,"data-selected":h||void 0,"data-active":y||void 0,"data-direction":v,"aria-hidden":`true`,children:[C&&f(`defs`,{children:f(`marker`,{id:S,viewBox:`0 0 10 10`,refX:`9`,refY:`5`,markerWidth:`7`,markerHeight:`7`,orient:`auto-start-reverse`,children:f(`path`,{className:q.arrow,d:`M0,0 L10,5 L0,10 z`})})}),f(`path`,{className:q.hit,d:w}),f(`path`,{className:q.edgePath,d:w,markerStart:g?`url(#${S})`:void 0,markerEnd:_?`url(#${S})`:void 0})]}),m!=null&&f(`div`,{className:q.label,style:{"--flow-label-x":`${T.x}px`,"--flow-label-y":`${T.y}px`},children:m})]})}var Y={controls:`_controls_s32im_2`,button:`_button_s32im_32`},X={width:18,height:18,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":!0};function pe({position:t=`bottom-left`,showZoom:n=!0,showFitView:r=!0,onZoomIn:i,onZoomOut:a,onFitView:o,labels:s,className:l,...u}){return c(),p(`div`,{"data-position":t,className:e(Y.controls,l),...u,children:[n&&p(d,{children:[f(`button`,{type:`button`,className:Y.button,"aria-label":s?.zoomIn??g(h.flow.zoomIn),onClick:i,children:f(`svg`,{...X,children:f(`path`,{d:`M12 5v14M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),f(`button`,{type:`button`,className:Y.button,"aria-label":s?.zoomOut??g(h.flow.zoomOut),onClick:a,children:f(`svg`,{...X,children:f(`path`,{d:`M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})})]}),r&&f(`button`,{type:`button`,className:Y.button,"aria-label":s?.fitView??g(h.flow.fitView),onClick:o,children:f(`svg`,{...X,children:f(`path`,{d:`M4 9V5a1 1 0 0 1 1-1h4M15 4h4a1 1 0 0 1 1 1v4M20 15v4a1 1 0 0 1-1 1h-4M9 20H5a1 1 0 0 1-1-1v-4`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})})]})}var Z={minimap:`_minimap_rdahv_2`,node:`_node_rdahv_28`,viewport:`_viewport_rdahv_32`};function me({nodes:t,viewport:n,containerWidth:i,containerHeight:a,width:o=200,height:l=150,position:d=`bottom-right`,nodeColor:m,onViewportChange:_,label:v,ariaLabel:y,className:b}){c();let S=E(t)??{x:0,y:0,width:1,height:1},C=S.width||1,T=S.height||1,D=C*.1,O=T*.1,k={x:S.x-D,y:S.y-O,width:C+D*2,height:T+O*2},A=Math.min(o/k.width,l/k.height),j=-k.x*A+(o-k.width*A)/2,M=-k.y*A+(l-k.height*A)/2,N=e=>({x:e.x*A+j,y:e.y*A+M}),P=null;if(i&&a){let e=x({x:0,y:0},n),t=x({x:i,y:a},n),r=N(e);P={x:r.x,y:r.y,w:(t.x-e.x)*A,h:(t.y-e.y)*A}}let{handleRef:F,offset:I,isDragging:L}=r({isDisabled:!_}),R=u(null),z=e=>{R.current=e,F.current=e},B=u(_);B.current=_;let V=u(null);return s(()=>{let e=L.value,t=I.value;if(!B.current)return;if(!e){V.current=null;return}V.current||={vp:n,off:t};let r=V.current,i=r.vp.zoom;B.current({x:r.vp.x-(t.x-r.off.x)/A*i,y:r.vp.y-(t.y-r.off.y)/A*i,zoom:i})}),p(`svg`,{"data-position":d,className:e(Z.minimap,b),width:o,height:l,role:`img`,"aria-label":y??v??g(h.flow.minimap),children:[t.map(e=>{let t=w(e),n=N({x:t.x,y:t.y});return f(`rect`,{"data-node-id":e.id,className:Z.node,x:n.x,y:n.y,width:t.width*A,height:t.height*A,fill:m},e.id)}),P&&f(`rect`,{ref:z,"data-viewport":``,className:Z.viewport,x:P.x,y:P.y,width:P.w,height:P.h})]})}var he={panel:`_panel_l0cix_2`};function ge({position:e=`top-right`,children:t,className:n,...r}){return f(`div`,{"data-position":e,className:m(he.panel,n),...r,children:t})}var _e={flow:`_flow_vejge_2`},ve=0;function ye({nodes:t,edges:n,onNodesChange:r,onEdgesChange:i,onConnect:a,nodeTypes:s,fitView:l=!0,background:u=!1,controls:m=!1,minimap:h=!1,layout:g,minZoom:_,maxZoom:v,interactive:b=!0,activeEdgeId:S,activeDirection:C,className:w,style:E}){c();let D=y({defaultNodes:g?B(t,n,g):t,defaultEdges:n,onNodesChange:r,onEdgesChange:i}),O=U(D,{minZoom:_,maxZoom:v,fitOnInit:l}),{connection:k}=ie({containerRef:O.containerRef,clientToFlow:(e,t)=>{let n=O.containerRef.current?.getBoundingClientRect();return x({x:e-(n?.left??0),y:t-(n?.top??0)},D.viewport.peek())},enabled:b,onConnect:e=>{D.addEdge({id:`e-${++ve}`,source:e.source,target:e.target}),a?.(e)}}),A=e=>{D.setNodes(D.nodes.value.map(t=>({...t,selected:t.id===e})))},j=o({}),M=(e,t)=>{let n=j.peek()[e];n&&n.width===t.width&&n.height===t.height||(j.value={...j.peek(),[e]:t})},N=D.nodes.value,P=D.edges.value,F=D.viewport.value.zoom,I=j.value,L=new Map(N.map(e=>{let t=I[e.id];return[e.id,t?{...e,width:t.width,height:t.height}:e]})),R=k.value;return p(se,{flow:D,controller:O,minZoom:_,maxZoom:v,chrome:p(d,{children:[m&&f(pe,{onZoomIn:O.zoomIn,onZoomOut:O.zoomOut,onFitView:()=>O.fitView()}),h&&f(me,{nodes:N,viewport:D.viewport.value,containerWidth:O.containerRef.current?.clientWidth,containerHeight:O.containerRef.current?.clientHeight,onViewportChange:D.setViewport})]}),className:e(_e.flow,w),style:E,children:[u&&f(le,{...typeof u==`object`?u:{}}),P.map(e=>{let t=L.get(e.source),n=L.get(e.target);if(!t||!n)return null;let r=T(t,`right`),i=T(n,`left`),a=S===e.id,o=a?C:void 0,s=o===`reverse`?!0:o===`forward`?!1:e.markerStart??!1,c=o===`reverse`?!1:o===`forward`?!0:e.markerEnd??!0;return f(J,{id:e.id,sourceX:r.x,sourceY:r.y,targetX:i.x,targetY:i.y,type:e.type??`bezier`,animated:e.animated||a,active:a,direction:o,markerStart:s,markerEnd:c,label:e.label,selected:e.selected},e.id)}),R&&f(J,{sourceX:R.from.x,sourceY:R.from.y,targetX:R.to.x,targetY:R.to.y,markerEnd:!1}),N.map(e=>f(de,{id:e.id,position:e.position,zoom:F,interactive:b,selected:e.selected??!1,onSelect:b?A:void 0,onMeasure:t=>M(e.id,t),onPositionChange:t=>D.updateNode(e.id,{position:t}),children:s&&e.type&&s[e.type]?s[e.type]({node:e}):p(d,{children:[f(`span`,{children:String(e.data?.label??e.id)}),b&&f(K,{type:`target`,position:`left`}),b&&f(K,{type:`source`,position:`right`})]})},e.id))]})}var Q={story:`_story_btt88_2`,overlay:`_overlay_btt88_7`,caption:`_caption_btt88_20`,captionText:`_captionText_btt88_36`,captionDesc:`_captionDesc_btt88_48`,controls:`_controls_btt88_52`,button:`_button_btt88_64`,indicator:`_indicator_btt88_93`},$={width:18,height:18,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":!0};function be({nodes:t,edges:n,script:r,loop:i=!0,stepDuration:a=1500,stepGap:o=0,playing:s,currentStep:l,onStepChange:u,controls:d=!0,autoPlay:m=!0,background:_=!0,interactive:v=!1,labels:y,clock:b,className:x,style:S}){c();let C=te(r,n),w=oe({steps:C,loop:i,stepDuration:a,stepGap:o,playing:s,defaultPlaying:m,currentStep:l,defaultCurrentStep:0,onStepChange:u,clock:b}),T=w.activeStep.value,E=w.currentStep.value,D=w.playing.value;return p(`div`,{className:e(Q.story,x),style:S,children:[f(ye,{nodes:t,edges:n,background:_,interactive:v,activeEdgeId:T?.edgeId,activeDirection:T?.direction}),p(`div`,{className:Q.overlay,children:[f(`div`,{className:Q.caption,"aria-live":`polite`,children:T?.label&&p(`span`,{className:Q.captionText,children:[f(`strong`,{children:T.label}),T.description&&p(`span`,{className:Q.captionDesc,children:[` — `,T.description]})]},E)}),d&&p(`div`,{className:Q.controls,children:[f(`button`,{type:`button`,className:Q.button,"aria-label":y?.previous??g(h.flow.previous),onClick:w.prev,children:f(`svg`,{...$,children:f(`path`,{d:`M15 6 9 12l6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),f(`button`,{type:`button`,className:Q.button,"aria-label":D?y?.pause??g(h.flow.pause):y?.play??g(h.flow.play),"aria-pressed":D,onClick:w.toggle,children:D?f(`svg`,{...$,children:f(`path`,{d:`M7 5h3v14H7zM14 5h3v14h-3z`})}):f(`svg`,{...$,children:f(`path`,{d:`M7 5l11 7-11 7z`})})}),f(`button`,{type:`button`,className:Q.button,"aria-label":y?.next??g(h.flow.next),onClick:w.next,children:f(`svg`,{...$,children:f(`path`,{d:`M9 6l6 6-6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),f(`span`,{className:Q.indicator,children:g(h.flow.step,{current:E+1,total:C.length})})]})]})]})}export{_ as DEFAULT_NODE_SIZE,ye as Flow,le as FlowBackground,se as FlowCanvas,pe as FlowControls,J as FlowEdge,K as FlowHandle,me as FlowMiniMap,de as FlowNode,ge as FlowPanel,be as FlowStory,B as applyLayout,M as bezierPath,b as clampZoom,L as edgePath,D as fitViewport,S as flowToScreen,E as graphBounds,R as gridLayout,T as handleAnchor,z as layeredLayout,w as nodeBounds,C as nodeSize,te as resolveScript,ee as resolveStep,x as screenToFlow,I as smoothStepPath,j as straightPath,ie as useConnection,y as useFlow,oe as useStory,U as useViewport};
+"use client";import{cn as e,useComputed as t,useControllableSignal as r,useDraggable as i,useEffectPropSignal as a,useResizeObserver as o,useSignal as s,useSignalEffect as c,useSignals as l}from"@cascivo/core";import{useId as u,useRef as d}from"react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{cn as h}from"@cascivo/core/pure";import{builtin as g,t as _}from"@cascivo/i18n";var v={width:150,height:40},y={x:0,y:0,zoom:1};function useFlow(e={}){let[t,i]=r({value:e.nodes,defaultValue:e.defaultNodes??[],onChange:e.onNodesChange}),[a,o]=r({value:e.edges,defaultValue:e.defaultEdges??[],onChange:e.onEdgesChange}),[s,c]=r({value:e.viewport,defaultValue:e.defaultViewport??y,onChange:e.onViewportChange});return{nodes:t,edges:a,viewport:s,setNodes:i,updateNode:(e,r)=>{i(t.value.map(t=>t.id===e?{...t,...r}:t))},setEdges:o,addEdge:e=>{o([...a.value,e])},setViewport:c}}function clampZoom(e,t=.2,r=2){return Math.min(r,Math.max(t,e))}function screenToFlow(e,t){return{x:(e.x-t.x)/t.zoom,y:(e.y-t.y)/t.zoom}}function flowToScreen(e,t){return{x:e.x*t.zoom+t.x,y:e.y*t.zoom+t.y}}function nodeSize(e){return{width:e.width??v.width,height:e.height??v.height}}function nodeBounds(e){let{width:t,height:r}=nodeSize(e);return{x:e.position.x,y:e.position.y,width:t,height:r}}function handleAnchor(e,t){let{x:r,y:i,width:a,height:o}=nodeBounds(e);switch(t){case`top`:return{x:r+a/2,y:i};case`right`:return{x:r+a,y:i+o/2};case`bottom`:return{x:r+a/2,y:i+o};case`left`:return{x:r,y:i+o/2}}}function graphBounds(e){if(e.length===0)return null;let t=1/0,r=1/0,i=-1/0,a=-1/0;for(let o of e){let e=nodeBounds(o);t=Math.min(t,e.x),r=Math.min(r,e.y),i=Math.max(i,e.x+e.width),a=Math.max(a,e.y+e.height)}return{x:t,y:r,width:i-t,height:a-r}}function fitViewport(e,t,r={}){let{padding:i=.1,minZoom:a=.2,maxZoom:o=2}=r;if(e.width<=0||e.height<=0||t.width<=0||t.height<=0)return{x:t.width/2-e.x,y:t.height/2-e.y,zoom:1};let s=t.width/(e.width*(1+i*2)),c=t.height/(e.height*(1+i*2)),l=clampZoom(Math.min(s,c),a,o);return{x:t.width/2-(e.x+e.width/2)*l,y:t.height/2-(e.y+e.height/2)*l,zoom:l}}var n=e=>Number.isInteger(e)?String(e):e.toFixed(2).replace(/\.?0+$/,``),midpoint=(e,t)=>({x:(e.x+t.x)/2,y:(e.y+t.y)/2});function normal(e){switch(e){case`top`:return{x:0,y:-1};case`bottom`:return{x:0,y:1};case`left`:return{x:-1,y:0};case`right`:return{x:1,y:0}}}function straightPath({source:e,target:t}){return{d:`M${n(e.x)},${n(e.y)} L${n(t.x)},${n(t.y)}`,mid:midpoint(e,t)}}function bezierPath(e){let{source:t,target:r,curvature:i=.25}=e,a=e.sourcePosition??`right`,o=e.targetPosition??`left`,s=Math.hypot(r.x-t.x,r.y-t.y),c=Math.max(i*s,20),l=normal(a),u=normal(o),d={x:t.x+l.x*c,y:t.y+l.y*c},f={x:r.x+u.x*c,y:r.y+u.y*c},p={x:(t.x+3*d.x+3*f.x+r.x)/8,y:(t.y+3*d.y+3*f.y+r.y)/8};return{d:`M${n(t.x)},${n(t.y)} C${n(d.x)},${n(d.y)} ${n(f.x)},${n(f.y)} ${n(r.x)},${n(r.y)}`,mid:p}}function len(e,t){return Math.hypot(t.x-e.x,t.y-e.y)}function towards(e,t,r){let i=len(e,t)||1;return{x:e.x+(t.x-e.x)/i*r,y:e.y+(t.y-e.y)/i*r}}function roundedPath(e,t){if(e.length<2)return``;let r=e[0],i=`M${n(r.x)},${n(r.y)}`;for(let r=1;r<e.length-1;r++){let a=e[r-1],o=e[r],s=e[r+1],c=Math.min(t,len(a,o)/2,len(o,s)/2),l=towards(o,a,c),u=towards(o,s,c);i+=` L${n(l.x)},${n(l.y)} Q${n(o.x)},${n(o.y)} ${n(u.x)},${n(u.y)}`}let a=e[e.length-1];return i+=` L${n(a.x)},${n(a.y)}`,i}function smoothStepPath(e){let{source:t,target:r,borderRadius:i=8}=e,a=e.sourcePosition??`right`,o=a===`left`||a===`right`,s=[t];if(o){let e=(t.x+r.x)/2;s.push({x:e,y:t.y},{x:e,y:r.y})}else{let e=(t.y+r.y)/2;s.push({x:t.x,y:e},{x:r.x,y:e})}return s.push(r),{d:roundedPath(s,i),mid:midpoint(t,r)}}function edgePath(e,t){switch(e){case`straight`:return straightPath(t);case`smoothstep`:return smoothStepPath(t);case`bezier`:return bezierPath(t)}}function gridLayout(e,t={}){let r=t.gap??40,i=t.nodeWidth??v.width,a=t.nodeHeight??v.height,o=t.columns??Math.max(1,Math.ceil(Math.sqrt(e.length)));return e.map((e,t)=>{let s=t%o,c=Math.floor(t/o);return{...e,position:{x:s*(i+r),y:c*(a+r)}}})}function layeredLayout(e,t,r={}){let i=r.direction??`LR`,a=r.gap??60,o=r.nodeWidth??v.width,s=r.nodeHeight??v.height,c=new Set(e.map(e=>e.id)),l=new Map,u=new Map;for(let t of e)u.set(t.id,0);for(let e of t)!c.has(e.source)||!c.has(e.target)||(l.set(e.source,[...l.get(e.source)??[],e.target]),u.set(e.target,(u.get(e.target)??0)+1));let d=new Map,f=e.filter(e=>(u.get(e.id)??0)===0).map(e=>e.id);for(let e of f)d.set(e,0);let p=new Map(u);for(;f.length>0;){let e=[];for(let t of f){let r=d.get(t)??0;for(let i of l.get(t)??[])d.set(i,Math.max(d.get(i)??0,r+1)),p.set(i,(p.get(i)??0)-1),(p.get(i)??0)===0&&e.push(i)}f=e}for(let t of e)d.has(t.id)||d.set(t.id,0);let m=new Map,h=new Map;for(let t of e){let e=d.get(t.id)??0,r=h.get(e)??0;m.set(t.id,r),h.set(e,r+1)}return e.map(e=>{let t=d.get(e.id)??0,r=m.get(e.id)??0,c=i===`LR`?{x:t*(o+a),y:r*(s+a)}:{x:r*(o+a),y:t*(s+a)};return{...e,position:c}})}function applyLayout(e,t,r){return r===`grid`?gridLayout(e):r===`layered`?layeredLayout(e,t):r(e,t)}function isEdgeStep(e){return`edge`in e}function resolveStep(e,t){let r={label:e.label,description:e.description,duration:e.duration};if(isEdgeStep(e)){let i=t.find(t=>t.id===e.edge);if(!i)throw Error(`FlowStory: step references unknown edge "${e.edge}"`);return{edgeId:i.id,direction:e.reverse?`reverse`:`forward`,...r}}let i=t.find(t=>t.source===e.from&&t.target===e.to);if(i)return{edgeId:i.id,direction:`forward`,...r};let a=t.find(t=>t.source===e.to&&t.target===e.from);if(a)return{edgeId:a.id,direction:`reverse`,...r};throw Error(`FlowStory: no edge connects "${e.from}" and "${e.to}"`)}function resolveScript(e,t){return e.map(e=>resolveStep(e,t))}var b=1.2;function useViewport(e,t={}){let{minZoom:r=.2,maxZoom:a=2,panOnDrag:s=!0,zoomOnScroll:l=!0,fitPadding:u=.1,fitOnInit:f=!1}=t,{viewport:p,setViewport:m}=e,{ref:h,size:g}=o(),{handleRef:_,offset:v,isDragging:y}=i({isDisabled:!s}),pan=(e,t)=>{let r=p.peek();m({x:r.x+e,y:r.y+t,zoom:r.zoom})},zoomTo=(e,t)=>{let i=p.peek(),o=clampZoom(e,r,a);if(!t){m({x:i.x,y:i.y,zoom:o});return}let s=screenToFlow(t,i);m({x:t.x-s.x*o,y:t.y-s.y*o,zoom:o})},containerCenter=()=>{let e=h.current;if(e)return{x:e.clientWidth/2,y:e.clientHeight/2}},zoomIn=()=>zoomTo(p.peek().zoom*b,containerCenter()),zoomOut=()=>zoomTo(p.peek().zoom/b,containerCenter()),measuredSize=()=>{let e=g.peek();if(e&&e.width>0&&e.height>0)return e;let t=h.current;return t&&t.clientWidth>0?{width:t.clientWidth,height:t.clientHeight}:null},fitView=t=>{let i=graphBounds(e.nodes.peek());if(!i)return;let o=t??measuredSize();o&&m(fitViewport(i,o,{padding:u,minZoom:r,maxZoom:a}))},x=d(null);c(()=>{let e=y.value,t=v.value;if(!s)return;if(!e){x.current=null;return}x.current||={vp:p.peek(),off:t};let r=x.current;m({x:r.vp.x+(t.x-r.off.x),y:r.vp.y+(t.y-r.off.y),zoom:r.vp.zoom})}),c(()=>{if(!l||typeof window>`u`)return;let e=h.current;if(!e)return;let onWheel=t=>{t.preventDefault();let r=e.getBoundingClientRect(),i={x:t.clientX-r.left,y:t.clientY-r.top},a=t.deltaY<0?b:1/b;zoomTo(p.peek().zoom*a,i)};return e.addEventListener(`wheel`,onWheel,{passive:!1}),()=>e.removeEventListener(`wheel`,onWheel)});let S=d(!1);return c(()=>{if(!f||S.current)return;let e=g.value;!e||e.width===0||(S.current=!0,fitView(e))}),{containerRef:h,panHandleRef:_,viewport:p,pan,zoomTo,zoomIn,zoomOut,fitView}}var x=`[data-flow-handle][data-handle-type="source"]`,S=`[data-flow-handle][data-handle-type="target"]`;function useConnection(e){let{containerRef:t}=e,r=s(null),i=d(e.onConnect);i.current=e.onConnect;let o=d(e.isValid);o.current=e.isValid;let l=d(e.clientToFlow);l.current=e.clientToFlow;let u=a(e.enabled??!0);return c(()=>{if(!u.value||typeof window>`u`)return;let e=t.current;if(!e)return;let onMove=e=>{let t=r.peek();t&&(r.value={...t,to:l.current(e.clientX,e.clientY)})},onUp=e=>{let t=r.peek();if(window.removeEventListener(`pointermove`,onMove),window.removeEventListener(`pointerup`,onUp),r.value=null,!t)return;let a=e.target,s=a instanceof Element?a.closest(S):null,c=s?.closest(`[data-node-id]`);if(!c)return;let l={source:t.source,target:c.getAttribute(`data-node-id`)??``,sourceHandle:t.sourceHandle,targetHandle:s?.getAttribute(`data-handle-id`)??void 0};!l.target||l.source===l.target||o.current&&!o.current(l)||i.current?.(l)},onDown=e=>{let t=e.target;if(!(t instanceof Element))return;let i=t.closest(x);if(!i)return;let a=i.closest(`[data-node-id]`);if(!a)return;e.stopPropagation();let o=i.getBoundingClientRect();r.value={source:a.getAttribute(`data-node-id`)??``,sourceHandle:i.getAttribute(`data-handle-id`)??void 0,from:l.current(o.left+o.width/2,o.top+o.height/2),to:l.current(e.clientX,e.clientY)},window.addEventListener(`pointermove`,onMove),window.addEventListener(`pointerup`,onUp)};return e.addEventListener(`pointerdown`,onDown),()=>{e.removeEventListener(`pointerdown`,onDown),window.removeEventListener(`pointermove`,onMove),window.removeEventListener(`pointerup`,onUp)}}),{connection:r}}var C=1500;function useStory(e){let{steps:i,loop:a=!0,stepDuration:o=C,stepGap:s=0}=e,[l,u]=r({value:e.currentStep,defaultValue:e.defaultCurrentStep??0,onChange:e.onStepChange}),[f,p]=r({value:e.playing,defaultValue:e.defaultPlaying??!0,onChange:e.onPlayingChange}),m=t(()=>i[l.value]??null),h=d(e.clock);h.current=e.clock;let g=d(i);g.current=i;let clock=()=>h.current??{setTimeout:(e,t)=>window.setTimeout(e,t),clearTimeout:e=>window.clearTimeout(e)},advance=e=>{let t=g.current.length;if(t===0)return;let r=l.peek()+e;u(a?(r%t+t)%t:Math.max(0,Math.min(t-1,r)))};return c(()=>{if(!f.value)return;let e=l.value,t=i.length;if(t===0||typeof window>`u`&&!h.current)return;let r=(i[e]?.duration??o)+s,c=clock(),d=c.setTimeout(()=>{let r=e+1;r>=t?a?u(0):p(!1):u(r)},r);return()=>c.clearTimeout(d)}),{currentStep:l,playing:f,activeStep:m,play:()=>p(!0),pause:()=>p(!1),toggle:()=>p(!f.peek()),next:()=>advance(1),prev:()=>advance(-1),restart:()=>{u(0),p(!0)}}}var w={canvas:`_canvas_6fiig_2`,pane:`_pane_6fiig_13`,panSurface:`_panSurface_6fiig_24`};function FlowCanvas({children:t,flow:r,viewport:i,defaultViewport:a,onViewportChange:o,minZoom:s,maxZoom:c,panOnDrag:u=!0,zoomOnScroll:d=!0,fitView:f=!1,controller:h,chrome:g,className:_,role:v=`application`,...y}){l();let b=useFlow({viewport:i,defaultViewport:a,onViewportChange:o}),x=r??b,S=useViewport(x,{minZoom:s,maxZoom:c,panOnDrag:u,zoomOnScroll:d,fitOnInit:f}),C=h??S,T=x.viewport.value;return m(`div`,{ref:C.containerRef,className:e(w.canvas,_),role:v,...y,children:[m(`div`,{className:w.pane,style:{"--flow-tx":`${T.x}px`,"--flow-ty":`${T.y}px`,"--flow-scale":String(T.zoom)},children:[p(`div`,{ref:C.panHandleRef,className:w.panSurface,"aria-hidden":`true`}),t]}),g]})}var T={background:`_background_1pu9x_2`};function FlowBackground({variant:e=`dots`,gap:t=20,size:r=1,color:i,className:a,style:o,...s}){return p(`div`,{"data-variant":e,"aria-hidden":`true`,className:h(T.background,a),style:{"--flow-bg-gap":`${t}px`,"--flow-bg-size":`${r}px`,"--flow-bg-thick":`${Math.max(1,r)}px`,...i?{"--flow-bg-color":i}:{},...o},...s})}var E={node:`_node_9zyg4_2`};function FlowNode({id:t,position:a,defaultPosition:o,onPositionChange:s,onMeasure:u,zoom:f=1,selected:m=!1,draggable:h=!0,interactive:g=!0,onSelect:_,children:v,className:y,onClick:b,onKeyDown:x,...S}){l();let C=h&&g,[w,T]=r({value:a,defaultValue:o??a??{x:0,y:0},onChange:s}),{handleRef:D,targetRef:O,offset:k,isDragging:A}=i({isDisabled:!C}),j=d(null),setRefs=e=>{j.current=e,D.current=e,O.current=e},M=d(u);M.current=u,c(()=>{let e=j.current;if(!e||typeof ResizeObserver>`u`)return;let report=()=>{let t=e.offsetWidth,r=e.offsetHeight;t>0&&r>0&&M.current?.({width:t,height:r})};report();let t=new ResizeObserver(report);return t.observe(e),()=>t.disconnect()});let N=d(f);N.current=f;let P=d(null);c(()=>{let e=A.value,t=k.value;if(!C)return;if(!e){P.current=null;return}P.current||={pos:w.peek(),off:t};let r=P.current,i=N.current||1;T({x:r.pos.x+(t.x-r.off.x)/i,y:r.pos.y+(t.y-r.off.y)/i})});let F=w.value;return p(`div`,{ref:setRefs,"data-node-id":t,"data-selected":m||void 0,"data-dragging":A.value||void 0,"data-static":!g||void 0,role:`group`,tabIndex:g?0:void 0,className:e(E.node,y),style:{"--flow-x":`${F.x}px`,"--flow-y":`${F.y}px`},onClick:e=>{g&&_?.(t),b?.(e)},onKeyDown:e=>{g&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),_?.(t)),x?.(e)},...S,children:v})}var D={handle:`_handle_8a1xa_2`,dot:`_dot_8a1xa_41`};function defaultPosition(e){return e===`source`?`right`:`left`}function FlowHandle({type:e,position:t,id:r,isConnectable:i=!0,className:a,...o}){return p(`div`,{"data-handle-type":e,"data-handle-pos":t??defaultPosition(e),"data-handle-id":r,"data-connectable":i||void 0,"data-flow-handle":``,tabIndex:i?0:-1,className:h(D.handle,a),...o,children:p(`span`,{className:D.dot,"aria-hidden":`true`})})}var O={edgeSvg:`_edgeSvg_789n0_2`,edgePath:`_edgePath_789n0_11`,hit:`_hit_789n0_18`,arrow:`_arrow_789n0_26`,"cascivo-flow-dash":`_cascivo-flow-dash_789n0_1`,label:`_label_789n0_64`};function FlowEdge({id:t,sourceX:r,sourceY:i,targetX:a,targetY:o,sourcePosition:s=`right`,targetPosition:c=`left`,type:l=`bezier`,animated:d=!1,label:h,selected:g=!1,markerStart:_=!1,markerEnd:v=!0,direction:y=`forward`,active:b,className:x}){let S=u(),C=`flow-arrow-${t??S}`,w=_||v,{d:T,mid:E}=edgePath(l,{source:{x:r,y:i},target:{x:a,y:o},sourcePosition:s,targetPosition:c});return m(f,{children:[m(`svg`,{className:e(O.edgeSvg,x),"data-edge-id":t,"data-animated":d||void 0,"data-selected":g||void 0,"data-active":b||void 0,"data-direction":y,"aria-hidden":`true`,children:[w&&p(`defs`,{children:p(`marker`,{id:C,viewBox:`0 0 10 10`,refX:`9`,refY:`5`,markerWidth:`7`,markerHeight:`7`,orient:`auto-start-reverse`,children:p(`path`,{className:O.arrow,d:`M0,0 L10,5 L0,10 z`})})}),p(`path`,{className:O.hit,d:T}),p(`path`,{className:O.edgePath,d:T,markerStart:_?`url(#${C})`:void 0,markerEnd:v?`url(#${C})`:void 0})]}),h!=null&&p(`div`,{className:O.label,style:{"--flow-label-x":`${E.x}px`,"--flow-label-y":`${E.y}px`},children:h})]})}var k={controls:`_controls_s32im_2`,button:`_button_s32im_32`},A={width:18,height:18,viewBox:`0 0 24 24`,fill:`none`,"aria-hidden":!0};function FlowControls({position:t=`bottom-left`,showZoom:r=!0,showFitView:i=!0,onZoomIn:a,onZoomOut:o,onFitView:s,labels:c,className:u,...d}){return l(),m(`div`,{"data-position":t,className:e(k.controls,u),...d,children:[r&&m(f,{children:[p(`button`,{type:`button`,className:k.button,"aria-label":c?.zoomIn??_(g.flow.zoomIn),onClick:a,children:p(`svg`,{...A,children:p(`path`,{d:`M12 5v14M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),p(`button`,{type:`button`,className:k.button,"aria-label":c?.zoomOut??_(g.flow.zoomOut),onClick:o,children:p(`svg`,{...A,children:p(`path`,{d:`M5 12h14`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})})]}),i&&p(`button`,{type:`button`,className:k.button,"aria-label":c?.fitView??_(g.flow.fitView),onClick:s,children:p(`svg`,{...A,children:p(`path`,{d:`M4 9V5a1 1 0 0 1 1-1h4M15 4h4a1 1 0 0 1 1 1v4M20 15v4a1 1 0 0 1-1 1h-4M9 20H5a1 1 0 0 1-1-1v-4`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})})]})}var j={minimap:`_minimap_rdahv_2`,node:`_node_rdahv_28`,viewport:`_viewport_rdahv_32`};function FlowMiniMap({nodes:t,viewport:r,containerWidth:a,containerHeight:o,width:s=200,height:u=150,position:f=`bottom-right`,nodeColor:h,onViewportChange:v,label:y,ariaLabel:b,className:x}){l();let S=graphBounds(t)??{x:0,y:0,width:1,height:1},C=S.width||1,w=S.height||1,T=C*.1,E=w*.1,D={x:S.x-T,y:S.y-E,width:C+T*2,height:w+E*2},O=Math.min(s/D.width,u/D.height),k=-D.x*O+(s-D.width*O)/2,A=-D.y*O+(u-D.height*O)/2,toMM=e=>({x:e.x*O+k,y:e.y*O+A}),M=null;if(a&&o){let e=screenToFlow({x:0,y:0},r),t=screenToFlow({x:a,y:o},r),i=toMM(e);M={x:i.x,y:i.y,w:(t.x-e.x)*O,h:(t.y-e.y)*O}}let{handleRef:N,offset:P,isDragging:F}=i({isDisabled:!v}),I=d(null),setRectRef=e=>{I.current=e,N.current=e},L=d(v);L.current=v;let R=d(null);return c(()=>{let e=F.value,t=P.value;if(!L.current)return;if(!e){R.current=null;return}R.current||={vp:r,off:t};let i=R.current,a=i.vp.zoom;L.current({x:i.vp.x-(t.x-i.off.x)/O*a,y:i.vp.y-(t.y-i.off.y)/O*a,zoom:a})}),m(`svg`,{"data-position":f,className:e(j.minimap,x),width:s,height:u,role:`img`,"aria-label":b??y??_(g.flow.minimap),children:[t.map(e=>{let t=nodeBounds(e),r=toMM({x:t.x,y:t.y});return p(`rect`,{"data-node-id":e.id,className:j.node,x:r.x,y:r.y,width:t.width*O,height:t.height*O,fill:h},e.id)}),M&&p(`rect`,{ref:setRectRef,"data-viewport":``,className:j.viewport,x:M.x,y:M.y,width:M.w,height:M.h})]})}var M={panel:`_panel_l0cix_2`};function FlowPanel({position:e=`top-right`,children:t,className:r,...i}){return p(`div`,{"data-position":e,className:h(M.panel,r),...i,children:t})}var N={flow:`_flow_vejge_2`},P=0;function Flow({nodes:t,edges:r,onNodesChange:i,onEdgesChange:a,onConnect:o,nodeTypes:c,fitView:u=!0,background:d=!1,controls:h=!1,minimap:g=!1,layout:_,minZoom:v,maxZoom:y,interactive:b=!0,activeEdgeId:x,activeDirection:S,className:C,style:w}){l();let T=useFlow({defaultNodes:_?applyLayout(t,r,_):t,defaultEdges:r,onNodesChange:i,onEdgesChange:a}),E=useViewport(T,{minZoom:v,maxZoom:y,fitOnInit:u}),{connection:D}=useConnection({containerRef:E.containerRef,clientToFlow:(e,t)=>{let r=E.containerRef.current?.getBoundingClientRect();return screenToFlow({x:e-(r?.left??0),y:t-(r?.top??0)},T.viewport.peek())},enabled:b,onConnect:e=>{T.addEdge({id:`e-${++P}`,source:e.source,target:e.target}),o?.(e)}}),select=e=>{T.setNodes(T.nodes.value.map(t=>({...t,selected:t.id===e})))},O=s({}),measure=(e,t)=>{let r=O.peek()[e];r&&r.width===t.width&&r.height===t.height||(O.value={...O.peek(),[e]:t})},k=T.nodes.value,A=T.edges.value,j=T.viewport.value.zoom,M=O.value,F=new Map(k.map(e=>{let t=M[e.id];return[e.id,t?{...e,width:t.width,height:t.height}:e]})),I=D.value;return m(FlowCanvas,{flow:T,controller:E,minZoom:v,maxZoom:y,chrome:m(f,{children:[h&&p(FlowControls,{onZoomIn:E.zoomIn,onZoomOut:E.zoomOut,onFitView:()=>E.fitView()}),g&&p(FlowMiniMap,{nodes:k,viewport:T.viewport.value,containerWidth:E.containerRef.current?.clientWidth,containerHeight:E.containerRef.current?.clientHeight,onViewportChange:T.setViewport})]}),className:e(N.flow,C),style:w,children:[d&&p(FlowBackground,{...typeof d==`object`?d:{}}),A.map(e=>{let t=F.get(e.source),r=F.get(e.target);if(!t||!r)return null;let i=handleAnchor(t,`right`),a=handleAnchor(r,`left`),o=x===e.id,s=o?S:void 0,c=s===`reverse`?!0:s===`forward`?!1:e.markerStart??!1,l=s===`reverse`?!1:s===`forward`?!0:e.markerEnd??!0;return p(FlowEdge,{id:e.id,sourceX:i.x,sourceY:i.y,targetX:a.x,targetY:a.y,type:e.type??`bezier`,animated:e.animated||o,active:o,direction:s,markerStart:c,markerEnd:l,label:e.label,selected:e.selected},e.id)}),I&&p(FlowEdge,{sourceX:I.from.x,sourceY:I.from.y,targetX:I.to.x,targetY:I.to.y,markerEnd:!1}),k.map(e=>p(FlowNode,{id:e.id,position:e.position,zoom:j,interactive:b,selected:e.selected??!1,onSelect:b?select:void 0,onMeasure:t=>measure(e.id,t),onPositionChange:t=>T.updateNode(e.id,{position:t}),children:c&&e.type&&c[e.type]?c[e.type]({node:e}):m(f,{children:[p(`span`,{children:String(e.data?.label??e.id)}),b&&p(FlowHandle,{type:`target`,position:`left`}),b&&p(FlowHandle,{type:`source`,position:`right`})]})},e.id))]})}var F={story:`_story_btt88_2`,overlay:`_overlay_btt88_7`,caption:`_caption_btt88_20`,captionText:`_captionText_btt88_36`,captionDesc:`_captionDesc_btt88_48`,controls:`_controls_btt88_52`,button:`_button_btt88_64`,indicator:`_indicator_btt88_93`},I={width:18,height:18,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":!0};function FlowStory({nodes:t,edges:r,script:i,loop:a=!0,stepDuration:o=1500,stepGap:s=0,playing:c,currentStep:u,onStepChange:d,controls:f=!0,autoPlay:h=!0,background:v=!0,interactive:y=!1,labels:b,clock:x,className:S,style:C}){l();let w=resolveScript(i,r),T=useStory({steps:w,loop:a,stepDuration:o,stepGap:s,playing:c,defaultPlaying:h,currentStep:u,defaultCurrentStep:0,onStepChange:d,clock:x}),E=T.activeStep.value,D=T.currentStep.value,O=T.playing.value;return m(`div`,{className:e(F.story,S),style:C,children:[p(Flow,{nodes:t,edges:r,background:v,interactive:y,activeEdgeId:E?.edgeId,activeDirection:E?.direction}),m(`div`,{className:F.overlay,children:[p(`div`,{className:F.caption,"aria-live":`polite`,children:E?.label&&m(`span`,{className:F.captionText,children:[p(`strong`,{children:E.label}),E.description&&m(`span`,{className:F.captionDesc,children:[` — `,E.description]})]},D)}),f&&m(`div`,{className:F.controls,children:[p(`button`,{type:`button`,className:F.button,"aria-label":b?.previous??_(g.flow.previous),onClick:T.prev,children:p(`svg`,{...I,children:p(`path`,{d:`M15 6 9 12l6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),p(`button`,{type:`button`,className:F.button,"aria-label":O?b?.pause??_(g.flow.pause):b?.play??_(g.flow.play),"aria-pressed":O,onClick:T.toggle,children:O?p(`svg`,{...I,children:p(`path`,{d:`M7 5h3v14H7zM14 5h3v14h-3z`})}):p(`svg`,{...I,children:p(`path`,{d:`M7 5l11 7-11 7z`})})}),p(`button`,{type:`button`,className:F.button,"aria-label":b?.next??_(g.flow.next),onClick:T.next,children:p(`svg`,{...I,children:p(`path`,{d:`M9 6l6 6-6 6`,stroke:`currentColor`,strokeWidth:`2`,fill:`none`})})}),p(`span`,{className:F.indicator,children:_(g.flow.step,{current:D+1,total:w.length})})]})]})]})}export{v as DEFAULT_NODE_SIZE,Flow,FlowBackground,FlowCanvas,FlowControls,FlowEdge,FlowHandle,FlowMiniMap,FlowNode,FlowPanel,FlowStory,applyLayout,bezierPath,clampZoom,edgePath,fitViewport,flowToScreen,graphBounds,gridLayout,handleAnchor,layeredLayout,nodeBounds,nodeSize,resolveScript,resolveStep,screenToFlow,smoothStepPath,straightPath,useConnection,useFlow,useStory,useViewport};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/flow",
-  "version": "1.1.0",
+  "version": "1.2.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": [
@@ -47,8 +47,8 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^1.1.0",
-    "@cascivo/i18n": "^1.1.0"
+    "@cascivo/core": "^1.2.0",
+    "@cascivo/i18n": "^1.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",