@vpxa/aikit 0.1.123 → 0.1.124

package/scaffold/general/viewers/dist/tour-viewer.html

@@ -23,7 +23,7 @@ Error generating stack: `+e.message+`
 `,`
 +`).split(`
 `));return[t,t.reduce((e,t)=>e.concat(...t),[])]}return[[],[]]},[e]);return(0,y.useEffect)(()=>{let n=t?.target??qc,c=t?.actInsideInputWithModifier??!0;if(e!==null){let e=e=>{if(i.current=e.ctrlKey||e.metaKey||e.shiftKey||e.altKey,(!i.current||i.current&&!c)&&So(e))return!1;let n=Xc(e.code,s);if(a.current.add(e[n]),Yc(o,a.current,!1)){let n=e.composedPath?.()?.[0]||e.target,a=n?.nodeName===`BUTTON`||n?.nodeName===`A`;t.preventDefault!==!1&&(i.current||!a)&&e.preventDefault(),r(!0)}},l=e=>{let t=Xc(e.code,s);Yc(o,a.current,!0)?(r(!1),a.current.clear()):a.current.delete(e[t]),e.key===`Meta`&&a.current.clear(),i.current=!1},u=()=>{a.current.clear(),r(!1)};return n?.addEventListener(`keydown`,e),n?.addEventListener(`keyup`,l),window.addEventListener(`blur`,u),window.addEventListener(`contextmenu`,u),()=>{n?.removeEventListener(`keydown`,e),n?.removeEventListener(`keyup`,l),window.removeEventListener(`blur`,u),window.removeEventListener(`contextmenu`,u)}}},[e,r]),n}function Yc(e,t,n){return e.filter(e=>n||e.length===t.size).some(e=>e.every(e=>t.has(e)))}function Xc(e,t){return t.includes(e)?`code`:`key`}var Zc=()=>{let e=bc();return(0,y.useMemo)(()=>({zoomIn:t=>{let{panZoom:n}=e.getState();return n?n.scaleBy(1.2,t):Promise.resolve(!1)},zoomOut:t=>{let{panZoom:n}=e.getState();return n?n.scaleBy(1/1.2,t):Promise.resolve(!1)},zoomTo:(t,n)=>{let{panZoom:r}=e.getState();return r?r.scaleTo(t,n):Promise.resolve(!1)},getZoom:()=>e.getState().transform[2],setViewport:async(t,n)=>{let{transform:[r,i,a],panZoom:o}=e.getState();return o?(await o.setViewport({x:t.x??r,y:t.y??i,zoom:t.zoom??a},n),Promise.resolve(!0)):Promise.resolve(!1)},getViewport:()=>{let[t,n,r]=e.getState().transform;return{x:t,y:n,zoom:r}},setCenter:async(t,n,r)=>e.getState().setCenter(t,n,r),fitBounds:async(t,n)=>{let{width:r,height:i,minZoom:a,maxZoom:o,panZoom:s}=e.getState(),c=U(t,r,i,a,o,n?.padding??.1);return s?(await s.setViewport(c,{duration:n?.duration,ease:n?.ease,interpolate:n?.interpolate}),Promise.resolve(!0)):Promise.resolve(!1)},screenToFlowPosition:(t,n={})=>{let{transform:r,snapGrid:i,snapToGrid:a,domNode:o}=e.getState();if(!o)return t;let{x:s,y:c}=o.getBoundingClientRect(),l={x:t.x-s,y:t.y-c},u=n.snapGrid??i;return oo(l,r,n.snapToGrid??a,u)},flowToScreenPosition:t=>{let{transform:n,domNode:r}=e.getState();if(!r)return t;let{x:i,y:a}=r.getBoundingClientRect(),o=so(t,n);return{x:o.x+i,y:o.y+a}}}),[])};function Qc(e,t){let n=[],r=new Map,i=[];for(let t of e)if(t.type===`add`){i.push(t);continue}else if(t.type===`remove`||t.type===`replace`)r.set(t.id,[t]);else{let e=r.get(t.id);e?e.push(t):r.set(t.id,[t])}for(let e of t){let t=r.get(e.id);if(!t){n.push(e);continue}if(t[0].type===`remove`)continue;if(t[0].type===`replace`){n.push({...t[0].item});continue}let i={...e};for(let e of t)$c(e,i);n.push(i)}return i.length&&i.forEach(e=>{e.index===void 0?n.push({...e.item}):n.splice(e.index,0,{...e.item})}),n}function $c(e,t){switch(e.type){case`select`:t.selected=e.selected;break;case`position`:e.position!==void 0&&(t.position=e.position),e.dragging!==void 0&&(t.dragging=e.dragging);break;case`dimensions`:e.dimensions!==void 0&&(t.measured={...e.dimensions},e.setAttributes&&((e.setAttributes===!0||e.setAttributes===`width`)&&(t.width=e.dimensions.width),(e.setAttributes===!0||e.setAttributes===`height`)&&(t.height=e.dimensions.height))),typeof e.resizing==`boolean`&&(t.resizing=e.resizing);break}}function el(e,t){return Qc(e,t)}function tl(e,t){return Qc(e,t)}function nl(e,t){return{id:e,type:`select`,selected:t}}function rl(e,t=new Set,n=!1){let r=[];for(let[i,a]of e){let e=t.has(i);!(a.selected===void 0&&!e)&&a.selected!==e&&(n&&(a.selected=e),r.push(nl(a.id,e)))}return r}function il({items:e=[],lookup:t}){let n=[],r=new Map(e.map(e=>[e.id,e]));for(let[r,i]of e.entries()){let e=t.get(i.id),a=e?.internals?.userNode??e;a!==void 0&&a!==i&&n.push({id:i.id,item:i,type:`replace`}),a===void 0&&n.push({item:i,type:`add`,index:r})}for(let[e]of t)r.get(e)===void 0&&n.push({id:e,type:`remove`});return n}function al(e){return{id:e.id,type:`remove`}}var ol=e=>Na(e),sl=e=>Ma(e);function cl(e){return(0,y.forwardRef)(e)}function ll(e){let[t,n]=(0,y.useState)(BigInt(0)),[r]=(0,y.useState)(()=>ul(()=>n(e=>e+BigInt(1))));return Rc(()=>{let t=r.get();t.length&&(e(t),r.reset())},[t]),r}function ul(e){let t=[];return{get:()=>t,reset:()=>{t=[]},push:n=>{t.push(n),e()}}}var dl=(0,y.createContext)(null);function fl({children:e}){let t=bc(),n=ll((0,y.useCallback)(e=>{let{nodes:n=[],setNodes:r,hasDefaultNodes:i,onNodesChange:a,nodeLookup:o,fitViewQueued:s,onNodesChangeMiddlewareMap:c}=t.getState(),l=n;for(let t of e)l=typeof t==`function`?t(l):t;let u=il({items:l,lookup:o});for(let e of c.values())u=e(u);i&&r(l),u.length>0?a?.(u):s&&window.requestAnimationFrame(()=>{let{fitViewQueued:e,nodes:n,setNodes:r}=t.getState();e&&r(n)})},[])),r=ll((0,y.useCallback)(e=>{let{edges:n=[],setEdges:r,hasDefaultEdges:i,onEdgesChange:a,edgeLookup:o}=t.getState(),s=n;for(let t of e)s=typeof t==`function`?t(s):t;i?r(s):a&&a(il({items:s,lookup:o}))},[])),i=(0,y.useMemo)(()=>({nodeQueue:n,edgeQueue:r}),[]);return(0,x.jsx)(dl.Provider,{value:i,children:e})}function pl(){let e=(0,y.useContext)(dl);if(!e)throw Error(`useBatchContext must be used within a BatchProvider`);return e}var ml=e=>!!e.panZoom;function hl(){let e=Zc(),t=bc(),n=pl(),r=G(ml),i=(0,y.useMemo)(()=>{let e=e=>t.getState().nodeLookup.get(e),r=e=>{n.nodeQueue.push(e)},i=e=>{n.edgeQueue.push(e)},a=e=>{let{nodeLookup:n,nodeOrigin:r}=t.getState(),i=ol(e)?e:n.get(e.id),a=i.parentId?mo(i.position,i.measured,i.parentId,n,r):i.position;return Qa({...i,position:a,width:i.measured?.width??i.width,height:i.measured?.height??i.height})},o=(e,t,n={replace:!1})=>{r(r=>r.map(r=>{if(r.id===e){let e=typeof t==`function`?t(r):t;return n.replace&&ol(e)?e:{...r,...e}}return r}))},s=(e,t,n={replace:!1})=>{i(r=>r.map(r=>{if(r.id===e){let e=typeof t==`function`?t(r):t;return n.replace&&sl(e)?e:{...r,...e}}return r}))};return{getNodes:()=>t.getState().nodes.map(e=>({...e})),getNode:t=>e(t)?.internals.userNode,getInternalNode:e,getEdges:()=>{let{edges:e=[]}=t.getState();return e.map(e=>({...e}))},getEdge:e=>t.getState().edgeLookup.get(e),setNodes:r,setEdges:i,addNodes:e=>{let t=Array.isArray(e)?e:[e];n.nodeQueue.push(e=>[...e,...t])},addEdges:e=>{let t=Array.isArray(e)?e:[e];n.edgeQueue.push(e=>[...e,...t])},toObject:()=>{let{nodes:e=[],edges:n=[],transform:r}=t.getState(),[i,a,o]=r;return{nodes:e.map(e=>({...e})),edges:n.map(e=>({...e})),viewport:{x:i,y:a,zoom:o}}},deleteElements:async({nodes:e=[],edges:n=[]})=>{let{nodes:r,edges:i,onNodesDelete:a,onEdgesDelete:o,triggerNodeChanges:s,triggerEdgeChanges:c,onDelete:l,onBeforeDelete:u}=t.getState(),{nodes:d,edges:f}=await Ua({nodesToRemove:e,edgesToRemove:n,nodes:r,edges:i,onBeforeDelete:u}),p=f.length>0,m=d.length>0;if(p){let e=f.map(al);o?.(f),c(e)}if(m){let e=d.map(al);a?.(d),s(e)}return(m||p)&&l?.({nodes:d,edges:f}),{deletedNodes:d,deletedEdges:f}},getIntersectingNodes:(e,n=!0,r)=>{let i=no(e),o=i?e:a(e),s=r!==void 0;return o?(r||t.getState().nodes).filter(r=>{let a=t.getState().nodeLookup.get(r.id);if(a&&!i&&(r.id===e.id||!a.internals.positionAbsolute))return!1;let c=Qa(s?r:a),l=to(c,o);return n&&l>0||l>=c.width*c.height||l>=o.width*o.height}):[]},isNodeIntersecting:(e,t,n=!0)=>{let r=no(e)?e:a(e);if(!r)return!1;let i=to(r,t);return n&&i>0||i>=t.width*t.height||i>=r.width*r.height},updateNode:o,updateNodeData:(e,t,n={replace:!1})=>{o(e,e=>{let r=typeof t==`function`?t(e):t;return n.replace?{...e,data:r}:{...e,data:{...e.data,...r}}},n)},updateEdge:s,updateEdgeData:(e,t,n={replace:!1})=>{s(e,e=>{let r=typeof t==`function`?t(e):t;return n.replace?{...e,data:r}:{...e,data:{...e.data,...r}}},n)},getNodesBounds:e=>{let{nodeLookup:n,nodeOrigin:r}=t.getState();return Ia(e,{nodeLookup:n,nodeOrigin:r})},getHandleConnections:({type:e,id:n,nodeId:r})=>Array.from(t.getState().connectionLookup.get(`${r}-${e}${n?`-${n}`:``}`)?.values()??[]),getNodeConnections:({type:e,handleId:n,nodeId:r})=>Array.from(t.getState().connectionLookup.get(`${r}${e?n?`-${e}-${n}`:`-${e}`:``}`)?.values()??[]),fitView:async e=>{let r=t.getState().fitViewResolver??go();return t.setState({fitViewQueued:!0,fitViewOptions:e,fitViewResolver:r}),n.nodeQueue.push(e=>[...e]),r.promise}}},[]);return(0,y.useMemo)(()=>({...i,...e,viewportInitialized:r}),[r])}var gl=e=>e.selected,_l=typeof window<`u`?window:void 0;function vl({deleteKeyCode:e,multiSelectionKeyCode:t}){let n=bc(),{deleteElements:r}=hl(),i=Jc(e,{actInsideInputWithModifier:!1}),a=Jc(t,{target:_l});(0,y.useEffect)(()=>{if(i){let{edges:e,nodes:t}=n.getState();r({nodes:t.filter(gl),edges:e.filter(gl)}),n.setState({nodesSelectionActive:!1})}},[i]),(0,y.useEffect)(()=>{n.setState({multiSelectionActive:a})},[a])}function yl(e){let t=bc();(0,y.useEffect)(()=>{let n=()=>{if(!e.current||!(e.current.checkVisibility?.()??!0))return!1;let n=yo(e.current);(n.height===0||n.width===0)&&t.getState().onError?.(`004`,ba.error004()),t.setState({width:n.width||500,height:n.height||500})};if(e.current){n(),window.addEventListener(`resize`,n);let t=new ResizeObserver(()=>n());return t.observe(e.current),()=>{window.removeEventListener(`resize`,n),t&&e.current&&t.unobserve(e.current)}}},[])}var bl={position:`absolute`,width:`100%`,height:`100%`,top:0,left:0},xl=e=>({userSelectionActive:e.userSelectionActive,lib:e.lib,connectionInProgress:e.connection.inProgress});function Sl({onPaneContextMenu:e,zoomOnScroll:t=!0,zoomOnPinch:n=!0,panOnScroll:r=!1,panOnScrollSpeed:i=.5,panOnScrollMode:a=Ta.Free,zoomOnDoubleClick:o=!0,panOnDrag:s=!0,defaultViewport:c,translateExtent:l,minZoom:u,maxZoom:d,zoomActivationKeyCode:f,preventScrolling:p=!0,children:m,noWheelClassName:h,noPanClassName:g,onViewportChange:_,isControlledViewport:v,paneClickDistance:b,selectionOnDrag:S}){let C=bc(),w=(0,y.useRef)(null),{userSelectionActive:T,lib:E,connectionInProgress:D}=G(xl,gc),O=Jc(f),k=(0,y.useRef)();yl(w);let A=(0,y.useCallback)(e=>{_?.({x:e[0],y:e[1],zoom:e[2]}),v||C.setState({transform:e})},[_,v]);return(0,y.useEffect)(()=>{if(w.current){k.current=Ws({domNode:w.current,minZoom:u,maxZoom:d,translateExtent:l,viewport:c,onDraggingChange:e=>C.setState(t=>t.paneDragging===e?t:{paneDragging:e}),onPanZoomStart:(e,t)=>{let{onViewportChangeStart:n,onMoveStart:r}=C.getState();r?.(e,t),n?.(t)},onPanZoom:(e,t)=>{let{onViewportChange:n,onMove:r}=C.getState();r?.(e,t),n?.(t)},onPanZoomEnd:(e,t)=>{let{onViewportChangeEnd:n,onMoveEnd:r}=C.getState();r?.(e,t),n?.(t)}});let{x:e,y:t,zoom:n}=k.current.getViewport();return C.setState({panZoom:k.current,transform:[e,t,n],domNode:w.current.closest(`.react-flow`)}),()=>{k.current?.destroy()}}},[]),(0,y.useEffect)(()=>{k.current?.update({onPaneContextMenu:e,zoomOnScroll:t,zoomOnPinch:n,panOnScroll:r,panOnScrollSpeed:i,panOnScrollMode:a,zoomOnDoubleClick:o,panOnDrag:s,zoomActivationKeyPressed:O,preventScrolling:p,noPanClassName:g,userSelectionActive:T,noWheelClassName:h,lib:E,onTransformChange:A,connectionInProgress:D,selectionOnDrag:S,paneClickDistance:b})},[e,t,n,r,i,a,o,s,O,p,g,T,h,E,A,D,S,b]),(0,x.jsx)(`div`,{className:`react-flow__renderer`,ref:w,style:bl,children:m})}var Cl=e=>({userSelectionActive:e.userSelectionActive,userSelectionRect:e.userSelectionRect});function wl(){let{userSelectionActive:e,userSelectionRect:t}=G(Cl,gc);return e&&t?(0,x.jsx)(`div`,{className:`react-flow__selection react-flow__container`,style:{width:t.width,height:t.height,transform:`translate(${t.x}px, ${t.y}px)`}}):null}var Tl=(e,t)=>n=>{n.target===t.current&&e?.(n)},El=e=>({userSelectionActive:e.userSelectionActive,elementsSelectable:e.elementsSelectable,connectionInProgress:e.connection.inProgress,dragging:e.paneDragging});function Dl({isSelecting:e,selectionKeyPressed:t,selectionMode:n=Ea.Full,panOnDrag:r,paneClickDistance:i,selectionOnDrag:a,onSelectionStart:o,onSelectionEnd:s,onPaneClick:c,onPaneContextMenu:l,onPaneScroll:u,onPaneMouseEnter:d,onPaneMouseMove:f,onPaneMouseLeave:p,children:m}){let h=bc(),{userSelectionActive:g,elementsSelectable:_,dragging:v,connectionInProgress:b}=G(El,gc),C=_&&(e||g),w=(0,y.useRef)(null),T=(0,y.useRef)(),E=(0,y.useRef)(new Set),D=(0,y.useRef)(new Set),O=(0,y.useRef)(!1),k=e=>{if(O.current||b){O.current=!1;return}c?.(e),h.getState().resetSelectedElements(),h.setState({nodesSelectionActive:!1})},A=e=>{if(Array.isArray(r)&&r?.includes(2)){e.preventDefault();return}l?.(e)},j=u?e=>u(e):void 0;return(0,x.jsxs)(`div`,{className:S([`react-flow__pane`,{draggable:r===!0||Array.isArray(r)&&r.includes(0),dragging:v,selection:e}]),onClick:C?void 0:Tl(k,w),onContextMenu:Tl(A,w),onWheel:Tl(j,w),onPointerEnter:C?void 0:d,onPointerMove:C?e=>{let{userSelectionRect:r,transform:a,nodeLookup:s,edgeLookup:c,connectionLookup:l,triggerNodeChanges:u,triggerEdgeChanges:d,defaultEdgeOptions:f,resetSelectedElements:p}=h.getState();if(!T.current||!r)return;let{x:m,y:g}=wo(e.nativeEvent,T.current),{startX:_,startY:v}=r;if(!O.current){let n=t?0:i;if(Math.hypot(m-_,g-v)<=n)return;p(),o?.(e)}O.current=!0;let y={startX:_,startY:v,x:m<_?m:_,y:g<v?g:v,width:Math.abs(m-_),height:Math.abs(g-v)},b=E.current,x=D.current;E.current=new Set(Ra(s,y,a,n===Ea.Partial,!0).map(e=>e.id)),D.current=new Set;let S=f?.selectable??!0;for(let e of E.current){let t=l.get(e);if(t)for(let{edgeId:e}of t.values()){let t=c.get(e);t&&(t.selectable??S)&&D.current.add(e)}}ho(b,E.current)||u(rl(s,E.current,!0)),ho(x,D.current)||d(rl(c,D.current)),h.setState({userSelectionRect:y,userSelectionActive:!0,nodesSelectionActive:!1})}:f,onPointerUp:C?e=>{e.button===0&&(e.target?.releasePointerCapture?.(e.pointerId),!g&&e.target===w.current&&h.getState().userSelectionRect&&k?.(e),h.setState({userSelectionActive:!1,userSelectionRect:null}),O.current&&(s?.(e),h.setState({nodesSelectionActive:E.current.size>0})))}:void 0,onPointerDownCapture:C?n=>{let{domNode:r}=h.getState();if(T.current=r?.getBoundingClientRect(),!T.current)return;let i=n.target===w.current;if(!i&&n.target.closest(`.nokey`)||!e||!(a&&i||t)||n.button!==0||!n.isPrimary)return;n.target?.setPointerCapture?.(n.pointerId),O.current=!1;let{x:o,y:s}=wo(n.nativeEvent,T.current);h.setState({userSelectionRect:{width:0,height:0,startX:o,startY:s,x:o,y:s}}),i||(n.stopPropagation(),n.preventDefault())}:void 0,onClickCapture:C?e=>{O.current&&=(e.stopPropagation(),!1)}:void 0,onPointerLeave:p,ref:w,style:bl,children:[m,(0,x.jsx)(wl,{})]})}function Ol({id:e,store:t,unselect:n=!1,nodeRef:r}){let{addSelectedNodes:i,unselectNodesAndEdges:a,multiSelectionActive:o,nodeLookup:s,onError:c}=t.getState(),l=s.get(e);if(!l){c?.(`012`,ba.error012(e));return}t.setState({nodesSelectionActive:!1}),l.selected?(n||l.selected&&o)&&(a({nodes:[l],edges:[]}),requestAnimationFrame(()=>r?.current?.blur())):i([e])}function kl({nodeRef:e,disabled:t=!1,noDragClassName:n,handleSelector:r,nodeId:i,isSelectable:a,nodeClickDistance:o}){let s=bc(),[c,l]=(0,y.useState)(!1),u=(0,y.useRef)();return(0,y.useEffect)(()=>{u.current=ys({getStoreItems:()=>s.getState(),onNodeMouseDown:t=>{Ol({id:t,store:s,nodeRef:e})},onDragStart:()=>{l(!0)},onDragStop:()=>{l(!1)}})},[]),(0,y.useEffect)(()=>{if(!(t||!e.current||!u.current))return u.current.update({noDragClassName:n,handleSelector:r,domNode:e.current,isSelectable:a,nodeId:i,nodeClickDistance:o}),()=>{u.current?.destroy()}},[n,r,t,a,e,i,o]),c}var Al=e=>t=>t.selected&&(t.draggable||e&&t.draggable===void 0);function jl(){let e=bc();return(0,y.useCallback)(t=>{let{nodeExtent:n,snapToGrid:r,snapGrid:i,nodesDraggable:a,onError:o,updateNodePositions:s,nodeLookup:c,nodeOrigin:l}=e.getState(),u=new Map,d=Al(a),f=r?i[0]:5,p=r?i[1]:5,m=t.direction.x*f*t.factor,h=t.direction.y*p*t.factor;for(let[,e]of c){if(!d(e))continue;let t={x:e.internals.positionAbsolute.x+m,y:e.internals.positionAbsolute.y+h};r&&(t=ao(t,i));let{position:a,positionAbsolute:s}=Ha({nodeId:e.id,nextPosition:t,nodeLookup:c,nodeExtent:n,nodeOrigin:l,onError:o});e.position=a,e.internals.positionAbsolute=s,u.set(e.id,e)}s(u)},[])}var Ml=(0,y.createContext)(null),Nl=Ml.Provider;Ml.Consumer;var Pl=()=>(0,y.useContext)(Ml),Fl=e=>({connectOnClick:e.connectOnClick,noPanClassName:e.noPanClassName,rfId:e.rfId}),Il=(e,t,n)=>r=>{let{connectionClickStartHandle:i,connectionMode:a,connection:o}=r,{fromHandle:s,toHandle:c,isValid:l}=o,u=c?.nodeId===e&&c?.id===t&&c?.type===n;return{connectingFrom:s?.nodeId===e&&s?.id===t&&s?.type===n,connectingTo:u,clickConnecting:i?.nodeId===e&&i?.id===t&&i?.type===n,isPossibleEndHandle:a===wa.Strict?s?.type!==n:e!==s?.nodeId||t!==s?.id,connectionInProcess:!!s,clickConnectionInProcess:!!i,valid:u&&l}};function Ll({type:e=`source`,position:t=V.Top,isValidConnection:n,isConnectable:r=!0,isConnectableStart:i=!0,isConnectableEnd:a=!0,id:o,onConnect:s,children:c,className:l,onMouseDown:u,onTouchStart:d,...f},p){let m=o||null,h=e===`target`,g=bc(),_=Pl(),{connectOnClick:v,noPanClassName:y,rfId:b}=G(Fl,gc),{connectingFrom:C,connectingTo:w,clickConnecting:T,isPossibleEndHandle:E,connectionInProcess:D,clickConnectionInProcess:O,valid:k}=G(Il(_,m,e),gc);_||g.getState().onError?.(`010`,ba.error010());let A=e=>{let{defaultEdgeOptions:t,onConnect:n,hasDefaultEdges:r}=g.getState(),i={...t,...e};if(r){let{edges:e,setEdges:t}=g.getState();t(Fo(i,e))}n?.(i),s?.(i)},j=e=>{if(!_)return;let t=Co(e.nativeEvent);if(i&&(t&&e.button===0||!t)){let t=g.getState();ks.onPointerDown(e.nativeEvent,{handleDomNode:e.currentTarget,autoPanOnConnect:t.autoPanOnConnect,connectionMode:t.connectionMode,connectionRadius:t.connectionRadius,domNode:t.domNode,nodeLookup:t.nodeLookup,lib:t.lib,isTarget:h,handleId:m,nodeId:_,flowId:t.rfId,panBy:t.panBy,cancelConnection:t.cancelConnection,onConnectStart:t.onConnectStart,onConnectEnd:(...e)=>g.getState().onConnectEnd?.(...e),updateConnection:t.updateConnection,onConnect:A,isValidConnection:n||((...e)=>g.getState().isValidConnection?.(...e)??!0),getTransform:()=>g.getState().transform,getFromHandle:()=>g.getState().connection.fromHandle,autoPanSpeed:t.autoPanSpeed,dragThreshold:t.connectionDragThreshold})}t?u?.(e):d?.(e)};return(0,x.jsx)(`div`,{"data-handleid":m,"data-nodeid":_,"data-handlepos":t,"data-id":`${b}-${_}-${m}-${e}`,className:S([`react-flow__handle`,`react-flow__handle-${t}`,`nodrag`,y,l,{source:!h,target:h,connectable:r,connectablestart:i,connectableend:a,clickconnecting:T,connectingfrom:C,connectingto:w,valid:k,connectionindicator:r&&(!D||E)&&(D||O?a:i)}]),onMouseDown:j,onTouchStart:j,onClick:v?t=>{let{onClickConnectStart:r,onClickConnectEnd:a,connectionClickStartHandle:o,connectionMode:s,isValidConnection:c,lib:l,rfId:u,nodeLookup:d,connection:f}=g.getState();if(!_||!o&&!i)return;if(!o){r?.(t.nativeEvent,{nodeId:_,handleId:m,handleType:e}),g.setState({connectionClickStartHandle:{nodeId:_,type:e,id:m}});return}let p=bo(t.target),h=n||c,{connection:v,isValid:y}=ks.isValid(t.nativeEvent,{handle:{nodeId:_,id:m,type:e},connectionMode:s,fromNodeId:o.nodeId,fromHandleId:o.id||null,fromType:o.type,isValidConnection:h,flowId:u,doc:p,lib:l,nodeLookup:d});y&&v&&A(v);let b=structuredClone(f);delete b.inProgress,b.toPosition=b.toHandle?b.toHandle.position:null,a?.(t,b),g.setState({connectionClickStartHandle:null})}:void 0,ref:p,...f,children:c})}var Rl=(0,y.memo)(cl(Ll));function K({data:e,isConnectable:t,sourcePosition:n=V.Bottom}){return(0,x.jsxs)(x.Fragment,{children:[e?.label,(0,x.jsx)(Rl,{type:`source`,position:n,isConnectable:t})]})}function q({data:e,isConnectable:t,targetPosition:n=V.Top,sourcePosition:r=V.Bottom}){return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(Rl,{type:`target`,position:n,isConnectable:t}),e?.label,(0,x.jsx)(Rl,{type:`source`,position:r,isConnectable:t})]})}function J(){return null}function Y({data:e,isConnectable:t,targetPosition:n=V.Top}){return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(Rl,{type:`target`,position:n,isConnectable:t}),e?.label]})}var X={ArrowUp:{x:0,y:-1},ArrowDown:{x:0,y:1},ArrowLeft:{x:-1,y:0},ArrowRight:{x:1,y:0}},zl={input:K,default:q,output:Y,group:J};function Bl(e){return e.internals.handleBounds===void 0?{width:e.width??e.initialWidth??e.style?.width,height:e.height??e.initialHeight??e.style?.height}:{width:e.width??e.style?.width,height:e.height??e.style?.height}}var Vl=e=>{let{width:t,height:n,x:r,y:i}=La(e.nodeLookup,{filter:e=>!!e.selected});return{width:ro(t)?t:null,height:ro(n)?n:null,userSelectionActive:e.userSelectionActive,transformString:`translate(${e.transform[0]}px,${e.transform[1]}px) scale(${e.transform[2]}) translate(${r}px,${i}px)`}};function Hl({onSelectionContextMenu:e,noPanClassName:t,disableKeyboardA11y:n}){let r=bc(),{width:i,height:a,transformString:o,userSelectionActive:s}=G(Vl,gc),c=jl(),l=(0,y.useRef)(null);(0,y.useEffect)(()=>{n||l.current?.focus({preventScroll:!0})},[n]);let u=!s&&i!==null&&a!==null;if(kl({nodeRef:l,disabled:!u}),!u)return null;let d=e?t=>{e(t,r.getState().nodes.filter(e=>e.selected))}:void 0;return(0,x.jsx)(`div`,{className:S([`react-flow__nodesselection`,`react-flow__container`,t]),style:{transform:o},children:(0,x.jsx)(`div`,{ref:l,className:`react-flow__nodesselection-rect`,onContextMenu:d,tabIndex:n?void 0:-1,onKeyDown:n?void 0:e=>{Object.prototype.hasOwnProperty.call(X,e.key)&&(e.preventDefault(),c({direction:X[e.key],factor:e.shiftKey?4:1}))},style:{width:i,height:a}})})}var Ul=typeof window<`u`?window:void 0,Wl=e=>({nodesSelectionActive:e.nodesSelectionActive,userSelectionActive:e.userSelectionActive});function Gl({children:e,onPaneClick:t,onPaneMouseEnter:n,onPaneMouseMove:r,onPaneMouseLeave:i,onPaneContextMenu:a,onPaneScroll:o,paneClickDistance:s,deleteKeyCode:c,selectionKeyCode:l,selectionOnDrag:u,selectionMode:d,onSelectionStart:f,onSelectionEnd:p,multiSelectionKeyCode:m,panActivationKeyCode:h,zoomActivationKeyCode:g,elementsSelectable:_,zoomOnScroll:v,zoomOnPinch:y,panOnScroll:b,panOnScrollSpeed:S,panOnScrollMode:C,zoomOnDoubleClick:w,panOnDrag:T,defaultViewport:E,translateExtent:D,minZoom:O,maxZoom:k,preventScrolling:A,onSelectionContextMenu:j,noWheelClassName:M,noPanClassName:ee,disableKeyboardA11y:N,onViewportChange:te,isControlledViewport:P}){let{nodesSelectionActive:F,userSelectionActive:ne}=G(Wl,gc),re=Jc(l,{target:Ul}),ie=Jc(h,{target:Ul}),I=ie||T,L=ie||b,R=u&&I!==!0,ae=re||ne||R;return vl({deleteKeyCode:c,multiSelectionKeyCode:m}),(0,x.jsx)(Sl,{onPaneContextMenu:a,elementsSelectable:_,zoomOnScroll:v,zoomOnPinch:y,panOnScroll:L,panOnScrollSpeed:S,panOnScrollMode:C,zoomOnDoubleClick:w,panOnDrag:!re&&I,defaultViewport:E,translateExtent:D,minZoom:O,maxZoom:k,zoomActivationKeyCode:g,preventScrolling:A,noWheelClassName:M,noPanClassName:ee,onViewportChange:te,isControlledViewport:P,paneClickDistance:s,selectionOnDrag:R,children:(0,x.jsxs)(Dl,{onSelectionStart:f,onSelectionEnd:p,onPaneClick:t,onPaneMouseEnter:n,onPaneMouseMove:r,onPaneMouseLeave:i,onPaneContextMenu:a,onPaneScroll:o,panOnDrag:I,isSelecting:!!ae,selectionMode:d,selectionKeyPressed:re,paneClickDistance:s,selectionOnDrag:R,children:[e,F&&(0,x.jsx)(Hl,{onSelectionContextMenu:j,noPanClassName:ee,disableKeyboardA11y:N})]})})}Gl.displayName=`FlowRenderer`;var Kl=(0,y.memo)(Gl),ql=e=>t=>e?Ra(t.nodeLookup,{x:0,y:0,width:t.width,height:t.height},t.transform,!0).map(e=>e.id):Array.from(t.nodeLookup.keys());function Jl(e){return G((0,y.useCallback)(ql(e),[e]),gc)}var Yl=e=>e.updateNodeInternals;function Xl(){let e=G(Yl),[t]=(0,y.useState)(()=>typeof ResizeObserver>`u`?null:new ResizeObserver(t=>{let n=new Map;t.forEach(e=>{let t=e.target.getAttribute(`data-id`);n.set(t,{id:t,nodeElement:e.target,force:!0})}),e(n)}));return(0,y.useEffect)(()=>()=>{t?.disconnect()},[t]),t}function Zl({node:e,nodeType:t,hasDimensions:n,resizeObserver:r}){let i=bc(),a=(0,y.useRef)(null),o=(0,y.useRef)(null),s=(0,y.useRef)(e.sourcePosition),c=(0,y.useRef)(e.targetPosition),l=(0,y.useRef)(t),u=n&&!!e.internals.handleBounds;return(0,y.useEffect)(()=>{a.current&&!e.hidden&&(!u||o.current!==a.current)&&(o.current&&r?.unobserve(o.current),r?.observe(a.current),o.current=a.current)},[u,e.hidden]),(0,y.useEffect)(()=>()=>{o.current&&=(r?.unobserve(o.current),null)},[]),(0,y.useEffect)(()=>{if(a.current){let n=l.current!==t,r=s.current!==e.sourcePosition,o=c.current!==e.targetPosition;(n||r||o)&&(l.current=t,s.current=e.sourcePosition,c.current=e.targetPosition,i.getState().updateNodeInternals(new Map([[e.id,{id:e.id,nodeElement:a.current,force:!0}]])))}},[e.id,t,e.sourcePosition,e.targetPosition]),a}function Ql({id:e,onClick:t,onMouseEnter:n,onMouseMove:r,onMouseLeave:i,onContextMenu:a,onDoubleClick:o,nodesDraggable:s,elementsSelectable:c,nodesConnectable:l,nodesFocusable:u,resizeObserver:d,noDragClassName:f,noPanClassName:p,disableKeyboardA11y:m,rfId:h,nodeTypes:g,nodeClickDistance:_,onError:v}){let{node:y,internals:b,isParent:C}=G(t=>{let n=t.nodeLookup.get(e),r=t.parentLookup.has(e);return{node:n,internals:n.internals,isParent:r}},gc),w=y.type||`default`,T=g?.[w]||zl[w];T===void 0&&(v?.(`003`,ba.error003(w)),w=`default`,T=g?.default||zl.default);let E=!!(y.draggable||s&&y.draggable===void 0),D=!!(y.selectable||c&&y.selectable===void 0),O=!!(y.connectable||l&&y.connectable===void 0),k=!!(y.focusable||u&&y.focusable===void 0),A=bc(),j=po(y),M=Zl({node:y,nodeType:w,hasDimensions:j,resizeObserver:d}),ee=kl({nodeRef:M,disabled:y.hidden||!E,noDragClassName:f,handleSelector:y.dragHandle,nodeId:e,isSelectable:D,nodeClickDistance:_}),N=jl();if(y.hidden)return null;let te=fo(y),P=Bl(y),F=D||E||t||n||r||i,ne=n?e=>n(e,{...b.userNode}):void 0,re=r?e=>r(e,{...b.userNode}):void 0,ie=i?e=>i(e,{...b.userNode}):void 0,I=a?e=>a(e,{...b.userNode}):void 0,L=o?e=>o(e,{...b.userNode}):void 0,R=n=>{let{selectNodesOnDrag:r,nodeDragThreshold:i}=A.getState();D&&(!r||!E||i>0)&&Ol({id:e,store:A,nodeRef:M}),t&&t(n,{...b.userNode})},ae=t=>{if(!(So(t.nativeEvent)||m)){if(Sa.includes(t.key)&&D)Ol({id:e,store:A,unselect:t.key===`Escape`,nodeRef:M});else if(E&&y.selected&&Object.prototype.hasOwnProperty.call(X,t.key)){t.preventDefault();let{ariaLabelConfig:e}=A.getState();A.setState({ariaLiveMessage:e[`node.a11yDescription.ariaLiveMessage`]({direction:t.key.replace(`Arrow`,``).toLowerCase(),x:~~b.positionAbsolute.x,y:~~b.positionAbsolute.y})}),N({direction:X[t.key],factor:t.shiftKey?4:1})}}},oe=()=>{if(m||!M.current?.matches(`:focus-visible`))return;let{transform:t,width:n,height:r,autoPanOnNodeFocus:i,setCenter:a}=A.getState();i&&(Ra(new Map([[e,y]]),{x:0,y:0,width:n,height:r},t,!0).length>0||a(y.position.x+te.width/2,y.position.y+te.height/2,{zoom:t[2]}))};return(0,x.jsx)(`div`,{className:S([`react-flow__node`,`react-flow__node-${w}`,{[p]:E},y.className,{selected:y.selected,selectable:D,parent:C,draggable:E,dragging:ee}]),ref:M,style:{zIndex:b.z,transform:`translate(${b.positionAbsolute.x}px,${b.positionAbsolute.y}px)`,pointerEvents:F?`all`:`none`,visibility:j?`visible`:`hidden`,...y.style,...P},"data-id":e,"data-testid":`rf__node-${e}`,onMouseEnter:ne,onMouseMove:re,onMouseLeave:ie,onContextMenu:I,onClick:R,onDoubleClick:L,onKeyDown:k?ae:void 0,tabIndex:k?0:void 0,onFocus:k?oe:void 0,role:y.ariaRole??(k?`group`:void 0),"aria-roledescription":`node`,"aria-describedby":m?void 0:`${Cc}-${h}`,"aria-label":y.ariaLabel,...y.domAttributes,children:(0,x.jsx)(Nl,{value:e,children:(0,x.jsx)(T,{id:e,data:y.data,type:w,positionAbsoluteX:b.positionAbsolute.x,positionAbsoluteY:b.positionAbsolute.y,selected:y.selected??!1,selectable:D,draggable:E,deletable:y.deletable??!0,isConnectable:O,sourcePosition:y.sourcePosition,targetPosition:y.targetPosition,dragging:ee,dragHandle:y.dragHandle,zIndex:b.z,parentId:y.parentId,...te})})})}var $l=(0,y.memo)(Ql),eu=e=>({nodesDraggable:e.nodesDraggable,nodesConnectable:e.nodesConnectable,nodesFocusable:e.nodesFocusable,elementsSelectable:e.elementsSelectable,onError:e.onError});function tu(e){let{nodesDraggable:t,nodesConnectable:n,nodesFocusable:r,elementsSelectable:i,onError:a}=G(eu,gc),o=Jl(e.onlyRenderVisibleElements),s=Xl();return(0,x.jsx)(`div`,{className:`react-flow__nodes`,style:bl,children:o.map(o=>(0,x.jsx)($l,{id:o,nodeTypes:e.nodeTypes,nodeExtent:e.nodeExtent,onClick:e.onNodeClick,onMouseEnter:e.onNodeMouseEnter,onMouseMove:e.onNodeMouseMove,onMouseLeave:e.onNodeMouseLeave,onContextMenu:e.onNodeContextMenu,onDoubleClick:e.onNodeDoubleClick,noDragClassName:e.noDragClassName,noPanClassName:e.noPanClassName,rfId:e.rfId,disableKeyboardA11y:e.disableKeyboardA11y,resizeObserver:s,nodesDraggable:t,nodesConnectable:n,nodesFocusable:r,elementsSelectable:i,nodeClickDistance:e.nodeClickDistance,onError:a},o))})}tu.displayName=`NodeRenderer`;var nu=(0,y.memo)(tu);function ru(e){return G((0,y.useCallback)(t=>{if(!e)return t.edges.map(e=>e.id);let n=[];if(t.width&&t.height)for(let e of t.edges){let r=t.nodeLookup.get(e.source),i=t.nodeLookup.get(e.target);r&&i&&Mo({sourceNode:r,targetNode:i,width:t.width,height:t.height,transform:t.transform})&&n.push(e.id)}return n},[e]),gc)}var iu=({color:e=`none`,strokeWidth:t=1})=>(0,x.jsx)(`polyline`,{className:`arrow`,style:{strokeWidth:t,...e&&{stroke:e}},strokeLinecap:`round`,fill:`none`,strokeLinejoin:`round`,points:`-5,-4 0,0 -5,4`}),au=({color:e=`none`,strokeWidth:t=1})=>(0,x.jsx)(`polyline`,{className:`arrowclosed`,style:{strokeWidth:t,...e&&{stroke:e,fill:e}},strokeLinecap:`round`,strokeLinejoin:`round`,points:`-5,-4 0,0 -5,4 -5,-4`}),ou={[ka.Arrow]:iu,[ka.ArrowClosed]:au};function su(e){let t=bc();return(0,y.useMemo)(()=>Object.prototype.hasOwnProperty.call(ou,e)?ou[e]:(t.getState().onError?.(`009`,ba.error009(e)),null),[e])}var cu=({id:e,type:t,color:n,width:r=12.5,height:i=12.5,markerUnits:a=`strokeWidth`,strokeWidth:o,orient:s=`auto-start-reverse`})=>{let c=su(t);return c?(0,x.jsx)(`marker`,{className:`react-flow__arrowhead`,id:e,markerWidth:`${r}`,markerHeight:`${i}`,viewBox:`-10 -10 20 20`,markerUnits:a,orient:s,refX:`0`,refY:`0`,children:(0,x.jsx)(c,{color:n,strokeWidth:o})}):null},lu=({defaultColor:e,rfId:t})=>{let n=G(e=>e.edges),r=G(e=>e.defaultEdgeOptions),i=(0,y.useMemo)(()=>Yo(n,{id:t,defaultColor:e,defaultMarkerStart:r?.markerStart,defaultMarkerEnd:r?.markerEnd}),[n,r,t,e]);return i.length?(0,x.jsx)(`svg`,{className:`react-flow__marker`,"aria-hidden":`true`,children:(0,x.jsx)(`defs`,{children:i.map(e=>(0,x.jsx)(cu,{id:e.id,type:e.type,color:e.color,width:e.width,height:e.height,markerUnits:e.markerUnits,strokeWidth:e.strokeWidth,orient:e.orient},e.id))})}):null};lu.displayName=`MarkerDefinitions`;var uu=(0,y.memo)(lu);function du({x:e,y:t,label:n,labelStyle:r,labelShowBg:i=!0,labelBgStyle:a,labelBgPadding:o=[2,4],labelBgBorderRadius:s=2,children:c,className:l,...u}){let[d,f]=(0,y.useState)({x:1,y:0,width:0,height:0}),p=S([`react-flow__edge-textwrapper`,l]),m=(0,y.useRef)(null);return(0,y.useEffect)(()=>{if(m.current){let e=m.current.getBBox();f({x:e.x,y:e.y,width:e.width,height:e.height})}},[n]),n?(0,x.jsxs)(`g`,{transform:`translate(${e-d.width/2} ${t-d.height/2})`,className:p,visibility:d.width?`visible`:`hidden`,...u,children:[i&&(0,x.jsx)(`rect`,{width:d.width+2*o[0],x:-o[0],y:-o[1],height:d.height+2*o[1],className:`react-flow__edge-textbg`,style:a,rx:s,ry:s}),(0,x.jsx)(`text`,{className:`react-flow__edge-text`,y:d.height/2,dy:`0.3em`,ref:m,style:r,children:n}),c]}):null}du.displayName=`EdgeText`;var fu=(0,y.memo)(du);function pu({path:e,labelX:t,labelY:n,label:r,labelStyle:i,labelShowBg:a,labelBgStyle:o,labelBgPadding:s,labelBgBorderRadius:c,interactionWidth:l=20,...u}){return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(`path`,{...u,d:e,fill:`none`,className:S([`react-flow__edge-path`,u.className])}),l?(0,x.jsx)(`path`,{d:e,fill:`none`,strokeOpacity:0,strokeWidth:l,className:`react-flow__edge-interaction`}):null,r&&ro(t)&&ro(n)?(0,x.jsx)(fu,{x:t,y:n,label:r,labelStyle:i,labelShowBg:a,labelBgStyle:o,labelBgPadding:s,labelBgBorderRadius:c}):null]})}function mu({pos:e,x1:t,y1:n,x2:r,y2:i}){return e===V.Left||e===V.Right?[.5*(t+r),n]:[t,.5*(n+i)]}function hu({sourceX:e,sourceY:t,sourcePosition:n=V.Bottom,targetX:r,targetY:i,targetPosition:a=V.Top}){let[o,s]=mu({pos:n,x1:e,y1:t,x2:r,y2:i}),[c,l]=mu({pos:a,x1:r,y1:i,x2:e,y2:t}),[u,d,f,p]=Eo({sourceX:e,sourceY:t,targetX:r,targetY:i,sourceControlX:o,sourceControlY:s,targetControlX:c,targetControlY:l});return[`M${e},${t} C${o},${s} ${c},${l} ${r},${i}`,u,d,f,p]}function gu(e){return(0,y.memo)(({id:t,sourceX:n,sourceY:r,targetX:i,targetY:a,sourcePosition:o,targetPosition:s,label:c,labelStyle:l,labelShowBg:u,labelBgStyle:d,labelBgPadding:f,labelBgBorderRadius:p,style:m,markerEnd:h,markerStart:g,interactionWidth:_})=>{let[v,y,b]=hu({sourceX:n,sourceY:r,sourcePosition:o,targetX:i,targetY:a,targetPosition:s});return(0,x.jsx)(pu,{id:e.isInternal?void 0:t,path:v,labelX:y,labelY:b,label:c,labelStyle:l,labelShowBg:u,labelBgStyle:d,labelBgPadding:f,labelBgBorderRadius:p,style:m,markerEnd:h,markerStart:g,interactionWidth:_})})}var _u=gu({isInternal:!1}),vu=gu({isInternal:!0});_u.displayName=`SimpleBezierEdge`,vu.displayName=`SimpleBezierEdgeInternal`;function yu(e){return(0,y.memo)(({id:t,sourceX:n,sourceY:r,targetX:i,targetY:a,label:o,labelStyle:s,labelShowBg:c,labelBgStyle:l,labelBgPadding:u,labelBgBorderRadius:d,style:f,sourcePosition:p=V.Bottom,targetPosition:m=V.Top,markerEnd:h,markerStart:g,pathOptions:_,interactionWidth:v})=>{let[y,b,S]=Ho({sourceX:n,sourceY:r,sourcePosition:p,targetX:i,targetY:a,targetPosition:m,borderRadius:_?.borderRadius,offset:_?.offset,stepPosition:_?.stepPosition});return(0,x.jsx)(pu,{id:e.isInternal?void 0:t,path:y,labelX:b,labelY:S,label:o,labelStyle:s,labelShowBg:c,labelBgStyle:l,labelBgPadding:u,labelBgBorderRadius:d,style:f,markerEnd:h,markerStart:g,interactionWidth:v})})}var bu=yu({isInternal:!1}),xu=yu({isInternal:!0});bu.displayName=`SmoothStepEdge`,xu.displayName=`SmoothStepEdgeInternal`;function Su(e){return(0,y.memo)(({id:t,...n})=>{let r=e.isInternal?void 0:t;return(0,x.jsx)(bu,{...n,id:r,pathOptions:(0,y.useMemo)(()=>({borderRadius:0,offset:n.pathOptions?.offset}),[n.pathOptions?.offset])})})}var Cu=Su({isInternal:!1}),wu=Su({isInternal:!0});Cu.displayName=`StepEdge`,wu.displayName=`StepEdgeInternal`;function Tu(e){return(0,y.memo)(({id:t,sourceX:n,sourceY:r,targetX:i,targetY:a,label:o,labelStyle:s,labelShowBg:c,labelBgStyle:l,labelBgPadding:u,labelBgBorderRadius:d,style:f,markerEnd:p,markerStart:m,interactionWidth:h})=>{let[g,_,v]=Io({sourceX:n,sourceY:r,targetX:i,targetY:a});return(0,x.jsx)(pu,{id:e.isInternal?void 0:t,path:g,labelX:_,labelY:v,label:o,labelStyle:s,labelShowBg:c,labelBgStyle:l,labelBgPadding:u,labelBgBorderRadius:d,style:f,markerEnd:p,markerStart:m,interactionWidth:h})})}var Eu=Tu({isInternal:!1}),Du=Tu({isInternal:!0});Eu.displayName=`StraightEdge`,Du.displayName=`StraightEdgeInternal`;function Ou(e){return(0,y.memo)(({id:t,sourceX:n,sourceY:r,targetX:i,targetY:a,sourcePosition:o=V.Bottom,targetPosition:s=V.Top,label:c,labelStyle:l,labelShowBg:u,labelBgStyle:d,labelBgPadding:f,labelBgBorderRadius:p,style:m,markerEnd:h,markerStart:g,pathOptions:_,interactionWidth:v})=>{let[y,b,S]=ko({sourceX:n,sourceY:r,sourcePosition:o,targetX:i,targetY:a,targetPosition:s,curvature:_?.curvature});return(0,x.jsx)(pu,{id:e.isInternal?void 0:t,path:y,labelX:b,labelY:S,label:c,labelStyle:l,labelShowBg:u,labelBgStyle:d,labelBgPadding:f,labelBgBorderRadius:p,style:m,markerEnd:h,markerStart:g,interactionWidth:v})})}var ku=Ou({isInternal:!1}),Au=Ou({isInternal:!0});ku.displayName=`BezierEdge`,Au.displayName=`BezierEdgeInternal`;var ju={default:Au,straight:Du,step:wu,smoothstep:xu,simplebezier:vu},Mu={sourceX:null,sourceY:null,targetX:null,targetY:null,sourcePosition:null,targetPosition:null},Nu=(e,t,n)=>n===V.Left?e-t:n===V.Right?e+t:e,Pu=(e,t,n)=>n===V.Top?e-t:n===V.Bottom?e+t:e,Fu=`react-flow__edgeupdater`;function Iu({position:e,centerX:t,centerY:n,radius:r=10,onMouseDown:i,onMouseEnter:a,onMouseOut:o,type:s}){return(0,x.jsx)(`circle`,{onMouseDown:i,onMouseEnter:a,onMouseOut:o,className:S([Fu,`${Fu}-${s}`]),cx:Nu(t,r,e),cy:Pu(n,r,e),r,stroke:`transparent`,fill:`transparent`})}function Lu({isReconnectable:e,reconnectRadius:t,edge:n,sourceX:r,sourceY:i,targetX:a,targetY:o,sourcePosition:s,targetPosition:c,onReconnect:l,onReconnectStart:u,onReconnectEnd:d,setReconnecting:f,setUpdateHover:p}){let m=bc(),h=(e,t)=>{if(e.button!==0)return;let{autoPanOnConnect:r,domNode:i,connectionMode:a,connectionRadius:o,lib:s,onConnectStart:c,cancelConnection:p,nodeLookup:h,rfId:g,panBy:_,updateConnection:v}=m.getState(),y=t.type===`target`;ks.onPointerDown(e.nativeEvent,{autoPanOnConnect:r,connectionMode:a,connectionRadius:o,domNode:i,handleId:t.id,nodeId:t.nodeId,nodeLookup:h,isTarget:y,edgeUpdaterType:t.type,lib:s,flowId:g,cancelConnection:p,panBy:_,isValidConnection:(...e)=>m.getState().isValidConnection?.(...e)??!0,onConnect:e=>l?.(n,e),onConnectStart:(r,i)=>{f(!0),u?.(e,n,t.type),c?.(r,i)},onConnectEnd:(...e)=>m.getState().onConnectEnd?.(...e),onReconnectEnd:(e,r)=>{f(!1),d?.(e,n,t.type,r)},updateConnection:v,getTransform:()=>m.getState().transform,getFromHandle:()=>m.getState().connection.fromHandle,dragThreshold:m.getState().connectionDragThreshold,handleDomNode:e.currentTarget})},g=e=>h(e,{nodeId:n.target,id:n.targetHandle??null,type:`target`}),_=e=>h(e,{nodeId:n.source,id:n.sourceHandle??null,type:`source`}),v=()=>p(!0),y=()=>p(!1);return(0,x.jsxs)(x.Fragment,{children:[(e===!0||e===`source`)&&(0,x.jsx)(Iu,{position:s,centerX:r,centerY:i,radius:t,onMouseDown:g,onMouseEnter:v,onMouseOut:y,type:`source`}),(e===!0||e===`target`)&&(0,x.jsx)(Iu,{position:c,centerX:a,centerY:o,radius:t,onMouseDown:_,onMouseEnter:v,onMouseOut:y,type:`target`})]})}function Ru({id:e,edgesFocusable:t,edgesReconnectable:n,elementsSelectable:r,onClick:i,onDoubleClick:a,onContextMenu:o,onMouseEnter:s,onMouseMove:c,onMouseLeave:l,reconnectRadius:u,onReconnect:d,onReconnectStart:f,onReconnectEnd:p,rfId:m,edgeTypes:h,noPanClassName:g,onError:_,disableKeyboardA11y:v}){let b=G(t=>t.edgeLookup.get(e)),C=G(e=>e.defaultEdgeOptions);b=C?{...C,...b}:b;let w=b.type||`default`,T=h?.[w]||ju[w];T===void 0&&(_?.(`011`,ba.error011(w)),w=`default`,T=h?.default||ju.default);let E=!!(b.focusable||t&&b.focusable===void 0),D=d!==void 0&&(b.reconnectable||n&&b.reconnectable===void 0),O=!!(b.selectable||r&&b.selectable===void 0),k=(0,y.useRef)(null),[A,j]=(0,y.useState)(!1),[M,ee]=(0,y.useState)(!1),N=bc(),{zIndex:te,sourceX:P,sourceY:F,targetX:ne,targetY:re,sourcePosition:ie,targetPosition:I}=G((0,y.useCallback)(t=>{let n=t.nodeLookup.get(b.source),r=t.nodeLookup.get(b.target);if(!n||!r)return{zIndex:b.zIndex,...Mu};let i=Wo({id:e,sourceNode:n,targetNode:r,sourceHandle:b.sourceHandle||null,targetHandle:b.targetHandle||null,connectionMode:t.connectionMode,onError:_});return{zIndex:jo({selected:b.selected,zIndex:b.zIndex,sourceNode:n,targetNode:r,elevateOnSelect:t.elevateEdgesOnSelect,zIndexMode:t.zIndexMode}),...i||Mu}},[b.source,b.target,b.sourceHandle,b.targetHandle,b.selected,b.zIndex]),gc),L=(0,y.useMemo)(()=>b.markerStart?`url('#${Jo(b.markerStart,m)}')`:void 0,[b.markerStart,m]),R=(0,y.useMemo)(()=>b.markerEnd?`url('#${Jo(b.markerEnd,m)}')`:void 0,[b.markerEnd,m]);if(b.hidden||P===null||F===null||ne===null||re===null)return null;let ae=t=>{let{addSelectedEdges:n,unselectNodesAndEdges:r,multiSelectionActive:a}=N.getState();O&&(N.setState({nodesSelectionActive:!1}),b.selected&&a?(r({nodes:[],edges:[b]}),k.current?.blur()):n([e])),i&&i(t,b)},oe=a?e=>{a(e,{...b})}:void 0,se=o?e=>{o(e,{...b})}:void 0,ce=s?e=>{s(e,{...b})}:void 0,le=c?e=>{c(e,{...b})}:void 0,ue=l?e=>{l(e,{...b})}:void 0;return(0,x.jsx)(`svg`,{style:{zIndex:te},children:(0,x.jsxs)(`g`,{className:S([`react-flow__edge`,`react-flow__edge-${w}`,b.className,g,{selected:b.selected,animated:b.animated,inactive:!O&&!i,updating:A,selectable:O}]),onClick:ae,onDoubleClick:oe,onContextMenu:se,onMouseEnter:ce,onMouseMove:le,onMouseLeave:ue,onKeyDown:E?t=>{if(!v&&Sa.includes(t.key)&&O){let{unselectNodesAndEdges:n,addSelectedEdges:r}=N.getState();t.key===`Escape`?(k.current?.blur(),n({edges:[b]})):r([e])}}:void 0,tabIndex:E?0:void 0,role:b.ariaRole??(E?`group`:`img`),"aria-roledescription":`edge`,"data-id":e,"data-testid":`rf__edge-${e}`,"aria-label":b.ariaLabel===null?void 0:b.ariaLabel||`Edge from ${b.source} to ${b.target}`,"aria-describedby":E?`${wc}-${m}`:void 0,ref:k,...b.domAttributes,children:[!M&&(0,x.jsx)(T,{id:e,source:b.source,target:b.target,type:b.type,selected:b.selected,animated:b.animated,selectable:O,deletable:b.deletable??!0,label:b.label,labelStyle:b.labelStyle,labelShowBg:b.labelShowBg,labelBgStyle:b.labelBgStyle,labelBgPadding:b.labelBgPadding,labelBgBorderRadius:b.labelBgBorderRadius,sourceX:P,sourceY:F,targetX:ne,targetY:re,sourcePosition:ie,targetPosition:I,data:b.data,style:b.style,sourceHandleId:b.sourceHandle,targetHandleId:b.targetHandle,markerStart:L,markerEnd:R,pathOptions:`pathOptions`in b?b.pathOptions:void 0,interactionWidth:b.interactionWidth}),D&&(0,x.jsx)(Lu,{edge:b,isReconnectable:D,reconnectRadius:u,onReconnect:d,onReconnectStart:f,onReconnectEnd:p,sourceX:P,sourceY:F,targetX:ne,targetY:re,sourcePosition:ie,targetPosition:I,setUpdateHover:j,setReconnecting:ee})]})})}var zu=(0,y.memo)(Ru),Bu=e=>({edgesFocusable:e.edgesFocusable,edgesReconnectable:e.edgesReconnectable,elementsSelectable:e.elementsSelectable,connectionMode:e.connectionMode,onError:e.onError});function Vu({defaultMarkerColor:e,onlyRenderVisibleElements:t,rfId:n,edgeTypes:r,noPanClassName:i,onReconnect:a,onEdgeContextMenu:o,onEdgeMouseEnter:s,onEdgeMouseMove:c,onEdgeMouseLeave:l,onEdgeClick:u,reconnectRadius:d,onEdgeDoubleClick:f,onReconnectStart:p,onReconnectEnd:m,disableKeyboardA11y:h}){let{edgesFocusable:g,edgesReconnectable:_,elementsSelectable:v,onError:y}=G(Bu,gc),b=ru(t);return(0,x.jsxs)(`div`,{className:`react-flow__edges`,children:[(0,x.jsx)(uu,{defaultColor:e,rfId:n}),b.map(e=>(0,x.jsx)(zu,{id:e,edgesFocusable:g,edgesReconnectable:_,elementsSelectable:v,noPanClassName:i,onReconnect:a,onContextMenu:o,onMouseEnter:s,onMouseMove:c,onMouseLeave:l,onClick:u,reconnectRadius:d,onDoubleClick:f,onReconnectStart:p,onReconnectEnd:m,rfId:n,onError:y,edgeTypes:r,disableKeyboardA11y:h},e))]})}Vu.displayName=`EdgeRenderer`;var Hu=(0,y.memo)(Vu),Uu=e=>`translate(${e.transform[0]}px,${e.transform[1]}px) scale(${e.transform[2]})`;function Wu({children:e}){return(0,x.jsx)(`div`,{className:`react-flow__viewport xyflow__viewport react-flow__container`,style:{transform:G(Uu)},children:e})}function Z(e){let t=hl(),n=(0,y.useRef)(!1);(0,y.useEffect)(()=>{!n.current&&t.viewportInitialized&&e&&(setTimeout(()=>e(t),1),n.current=!0)},[e,t.viewportInitialized])}var Gu=e=>e.panZoom?.syncViewport;function Ku(e){let t=G(Gu),n=bc();return(0,y.useEffect)(()=>{e&&(t?.(e),n.setState({transform:[e.x,e.y,e.zoom]}))},[e,t]),null}function qu(e){return e.connection.inProgress?{...e.connection,to:oo(e.connection.to,e.transform)}:{...e.connection}}function Ju(e){return e?t=>e(qu(t)):qu}function Yu(e){return G(Ju(e),gc)}var Xu=e=>({nodesConnectable:e.nodesConnectable,isValid:e.connection.isValid,inProgress:e.connection.inProgress,width:e.width,height:e.height});function Zu({containerStyle:e,style:t,type:n,component:r}){let{nodesConnectable:i,width:a,height:o,isValid:s,inProgress:c}=G(Xu,gc);return a&&i&&c?(0,x.jsx)(`svg`,{style:e,width:a,height:o,className:`react-flow__connectionline react-flow__container`,children:(0,x.jsx)(`g`,{className:S([`react-flow__connection`,ja(s)]),children:(0,x.jsx)(Qu,{style:t,type:n,CustomComponent:r,isValid:s})})}):null}var Qu=({style:e,type:t=Oa.Bezier,CustomComponent:n,isValid:r})=>{let{inProgress:i,from:a,fromNode:o,fromHandle:s,fromPosition:c,to:l,toNode:u,toHandle:d,toPosition:f,pointer:p}=Yu();if(!i)return;if(n)return(0,x.jsx)(n,{connectionLineType:t,connectionLineStyle:e,fromNode:o,fromHandle:s,fromX:a.x,fromY:a.y,toX:l.x,toY:l.y,fromPosition:c,toPosition:f,connectionStatus:ja(r),toNode:u,toHandle:d,pointer:p});let m=``,h={sourceX:a.x,sourceY:a.y,sourcePosition:c,targetX:l.x,targetY:l.y,targetPosition:f};switch(t){case Oa.Bezier:[m]=ko(h);break;case Oa.SimpleBezier:[m]=hu(h);break;case Oa.Step:[m]=Ho({...h,borderRadius:0});break;case Oa.SmoothStep:[m]=Ho(h);break;default:[m]=Io(h)}return(0,x.jsx)(`path`,{d:m,fill:`none`,className:`react-flow__connection-path`,style:e})};Qu.displayName=`ConnectionLine`;var $u={};function ed(e=$u){(0,y.useRef)(e),bc(),(0,y.useEffect)(()=>{},[e])}function td(){bc(),(0,y.useRef)(!1),(0,y.useEffect)(()=>{},[])}function nd({nodeTypes:e,edgeTypes:t,onInit:n,onNodeClick:r,onEdgeClick:i,onNodeDoubleClick:a,onEdgeDoubleClick:o,onNodeMouseEnter:s,onNodeMouseMove:c,onNodeMouseLeave:l,onNodeContextMenu:u,onSelectionContextMenu:d,onSelectionStart:f,onSelectionEnd:p,connectionLineType:m,connectionLineStyle:h,connectionLineComponent:g,connectionLineContainerStyle:_,selectionKeyCode:v,selectionOnDrag:y,selectionMode:b,multiSelectionKeyCode:S,panActivationKeyCode:C,zoomActivationKeyCode:w,deleteKeyCode:T,onlyRenderVisibleElements:E,elementsSelectable:D,defaultViewport:O,translateExtent:k,minZoom:A,maxZoom:j,preventScrolling:M,defaultMarkerColor:ee,zoomOnScroll:N,zoomOnPinch:te,panOnScroll:P,panOnScrollSpeed:F,panOnScrollMode:ne,zoomOnDoubleClick:re,panOnDrag:ie,onPaneClick:I,onPaneMouseEnter:L,onPaneMouseMove:R,onPaneMouseLeave:ae,onPaneScroll:oe,onPaneContextMenu:se,paneClickDistance:ce,nodeClickDistance:le,onEdgeContextMenu:ue,onEdgeMouseEnter:de,onEdgeMouseMove:fe,onEdgeMouseLeave:pe,reconnectRadius:me,onReconnect:he,onReconnectStart:ge,onReconnectEnd:_e,noDragClassName:ve,noWheelClassName:ye,noPanClassName:be,disableKeyboardA11y:xe,nodeExtent:Se,rfId:Ce,viewport:we,onViewportChange:Te}){return ed(e),ed(t),td(),Z(n),Ku(we),(0,x.jsx)(Kl,{onPaneClick:I,onPaneMouseEnter:L,onPaneMouseMove:R,onPaneMouseLeave:ae,onPaneContextMenu:se,onPaneScroll:oe,paneClickDistance:ce,deleteKeyCode:T,selectionKeyCode:v,selectionOnDrag:y,selectionMode:b,onSelectionStart:f,onSelectionEnd:p,multiSelectionKeyCode:S,panActivationKeyCode:C,zoomActivationKeyCode:w,elementsSelectable:D,zoomOnScroll:N,zoomOnPinch:te,zoomOnDoubleClick:re,panOnScroll:P,panOnScrollSpeed:F,panOnScrollMode:ne,panOnDrag:ie,defaultViewport:O,translateExtent:k,minZoom:A,maxZoom:j,onSelectionContextMenu:d,preventScrolling:M,noDragClassName:ve,noWheelClassName:ye,noPanClassName:be,disableKeyboardA11y:xe,onViewportChange:Te,isControlledViewport:!!we,children:(0,x.jsxs)(Wu,{children:[(0,x.jsx)(Hu,{edgeTypes:t,onEdgeClick:i,onEdgeDoubleClick:o,onReconnect:he,onReconnectStart:ge,onReconnectEnd:_e,onlyRenderVisibleElements:E,onEdgeContextMenu:ue,onEdgeMouseEnter:de,onEdgeMouseMove:fe,onEdgeMouseLeave:pe,reconnectRadius:me,defaultMarkerColor:ee,noPanClassName:be,disableKeyboardA11y:xe,rfId:Ce}),(0,x.jsx)(Zu,{style:h,type:m,component:g,containerStyle:_}),(0,x.jsx)(`div`,{className:`react-flow__edgelabel-renderer`}),(0,x.jsx)(nu,{nodeTypes:e,onNodeClick:r,onNodeDoubleClick:a,onNodeMouseEnter:s,onNodeMouseMove:c,onNodeMouseLeave:l,onNodeContextMenu:u,nodeClickDistance:le,onlyRenderVisibleElements:E,noPanClassName:be,noDragClassName:ve,disableKeyboardA11y:xe,nodeExtent:Se,rfId:Ce}),(0,x.jsx)(`div`,{className:`react-flow__viewport-portal`})]})})}nd.displayName=`GraphView`;var rd=(0,y.memo)(nd),id=({nodes:e,edges:t,defaultNodes:n,defaultEdges:r,width:i,height:a,fitView:o,fitViewOptions:s,minZoom:c=.5,maxZoom:l=2,nodeOrigin:u,nodeExtent:d,zIndexMode:f=`basic`}={})=>{let p=new Map,m=new Map,h=new Map,g=new Map,_=r??t??[],v=n??e??[],y=u??[0,0],b=d??xa;ps(h,g,_);let{nodesInitialized:x}=is(v,p,m,{nodeOrigin:y,nodeExtent:b,zIndexMode:f}),S=[0,0,1];if(o&&i&&a){let{x:e,y:t,zoom:n}=U(La(p,{filter:e=>!!((e.width||e.initialWidth)&&(e.height||e.initialHeight))}),i,a,c,l,s?.padding??.1);S=[e,t,n]}return{rfId:`1`,width:i??0,height:a??0,transform:S,nodes:v,nodesInitialized:x,nodeLookup:p,parentLookup:m,edges:_,edgeLookup:g,connectionLookup:h,onNodesChange:null,onEdgesChange:null,hasDefaultNodes:n!==void 0,hasDefaultEdges:r!==void 0,panZoom:null,minZoom:c,maxZoom:l,translateExtent:xa,nodeExtent:b,nodesSelectionActive:!1,userSelectionActive:!1,userSelectionRect:null,connectionMode:wa.Strict,domNode:null,paneDragging:!1,noPanClassName:`nopan`,nodeOrigin:y,nodeDragThreshold:1,connectionDragThreshold:1,snapGrid:[15,15],snapToGrid:!1,nodesDraggable:!0,nodesConnectable:!0,nodesFocusable:!0,edgesFocusable:!0,edgesReconnectable:!0,elementsSelectable:!0,elevateNodesOnSelect:!0,elevateEdgesOnSelect:!0,selectNodesOnDrag:!0,multiSelectionActive:!1,fitViewQueued:o??!1,fitViewOptions:s,fitViewResolver:null,connection:{...Da},connectionClickStartHandle:null,connectOnClick:!0,ariaLiveMessage:``,autoPanOnConnect:!0,autoPanOnNodeDrag:!0,autoPanOnNodeFocus:!0,autoPanSpeed:15,connectionRadius:20,onError:io,isValidConnection:void 0,onSelectionChangeHandlers:[],lib:`react`,debug:!1,ariaLabelConfig:Ca,zIndexMode:f,onNodesChangeMiddlewareMap:new Map,onEdgesChangeMiddlewareMap:new Map}},ad=({nodes:e,edges:t,defaultNodes:n,defaultEdges:r,width:i,height:a,fitView:o,fitViewOptions:s,minZoom:c,maxZoom:l,nodeOrigin:u,nodeExtent:d,zIndexMode:f})=>hc((p,m)=>{async function h(){let{nodeLookup:e,panZoom:t,fitViewOptions:n,fitViewResolver:r,width:i,height:a,minZoom:o,maxZoom:s}=m();t&&(await Va({nodes:e,width:i,height:a,panZoom:t,minZoom:o,maxZoom:s},n),r?.resolve(!0),p({fitViewResolver:null}))}return{...id({nodes:e,edges:t,width:i,height:a,fitView:o,fitViewOptions:s,minZoom:c,maxZoom:l,nodeOrigin:u,nodeExtent:d,defaultNodes:n,defaultEdges:r,zIndexMode:f}),setNodes:e=>{let{nodeLookup:t,parentLookup:n,nodeOrigin:r,elevateNodesOnSelect:i,fitViewQueued:a,zIndexMode:o,nodesSelectionActive:s}=m(),{nodesInitialized:c,hasSelectedNodes:l}=is(e,t,n,{nodeOrigin:r,nodeExtent:d,elevateNodesOnSelect:i,checkEquality:!0,zIndexMode:o}),u=s&&l;a&&c?(h(),p({nodes:e,nodesInitialized:c,fitViewQueued:!1,fitViewOptions:void 0,nodesSelectionActive:u})):p({nodes:e,nodesInitialized:c,nodesSelectionActive:u})},setEdges:e=>{let{connectionLookup:t,edgeLookup:n}=m();ps(t,n,e),p({edges:e})},setDefaultNodesAndEdges:(e,t)=>{if(e){let{setNodes:t}=m();t(e),p({hasDefaultNodes:!0})}if(t){let{setEdges:e}=m();e(t),p({hasDefaultEdges:!0})}},updateNodeInternals:e=>{let{triggerNodeChanges:t,nodeLookup:n,parentLookup:r,domNode:i,nodeOrigin:a,nodeExtent:o,debug:s,fitViewQueued:c,zIndexMode:l}=m(),{changes:u,updatedInternals:d}=us(e,n,r,i,a,o,l);d&&(ts(n,r,{nodeOrigin:a,nodeExtent:o,zIndexMode:l}),c?(h(),p({fitViewQueued:!1,fitViewOptions:void 0})):p({}),u?.length>0&&(s&&console.log(`React Flow: trigger node changes`,u),t?.(u)))},updateNodePositions:(e,t=!1)=>{let n=[],r=[],{nodeLookup:i,triggerNodeChanges:a,connection:o,updateConnection:s,onNodesChangeMiddlewareMap:c}=m();for(let[a,c]of e){let e=i.get(a),l=!!(e?.expandParent&&e?.parentId&&c?.position),u={id:a,type:`position`,position:l?{x:Math.max(0,c.position.x),y:Math.max(0,c.position.y)}:c.position,dragging:t};if(e&&o.inProgress&&o.fromNode.id===e.id){let t=Ko(e,o.fromHandle,V.Left,!0);s({...o,from:t})}l&&e.parentId&&n.push({id:a,parentId:e.parentId,rect:{...c.internals.positionAbsolute,width:c.measured.width??0,height:c.measured.height??0}}),r.push(u)}if(n.length>0){let{parentLookup:e,nodeOrigin:t}=m(),a=ls(n,i,e,t);r.push(...a)}for(let e of c.values())r=e(r);a(r)},triggerNodeChanges:e=>{let{onNodesChange:t,setNodes:n,nodes:r,hasDefaultNodes:i,debug:a}=m();e?.length&&(i&&n(el(e,r)),a&&console.log(`React Flow: trigger node changes`,e),t?.(e))},triggerEdgeChanges:e=>{let{onEdgesChange:t,setEdges:n,edges:r,hasDefaultEdges:i,debug:a}=m();e?.length&&(i&&n(tl(e,r)),a&&console.log(`React Flow: trigger edge changes`,e),t?.(e))},addSelectedNodes:e=>{let{multiSelectionActive:t,edgeLookup:n,nodeLookup:r,triggerNodeChanges:i,triggerEdgeChanges:a}=m();if(t){i(e.map(e=>nl(e,!0)));return}i(rl(r,new Set([...e]),!0)),a(rl(n))},addSelectedEdges:e=>{let{multiSelectionActive:t,edgeLookup:n,nodeLookup:r,triggerNodeChanges:i,triggerEdgeChanges:a}=m();if(t){a(e.map(e=>nl(e,!0)));return}a(rl(n,new Set([...e]))),i(rl(r,new Set,!0))},unselectNodesAndEdges:({nodes:e,edges:t}={})=>{let{edges:n,nodes:r,nodeLookup:i,triggerNodeChanges:a,triggerEdgeChanges:o}=m(),s=e||r,c=t||n,l=[];for(let e of s){if(!e.selected)continue;let t=i.get(e.id);t&&(t.selected=!1),l.push(nl(e.id,!1))}let u=[];for(let e of c)e.selected&&u.push(nl(e.id,!1));a(l),o(u)},setMinZoom:e=>{let{panZoom:t,maxZoom:n}=m();t?.setScaleExtent([e,n]),p({minZoom:e})},setMaxZoom:e=>{let{panZoom:t,minZoom:n}=m();t?.setScaleExtent([n,e]),p({maxZoom:e})},setTranslateExtent:e=>{m().panZoom?.setTranslateExtent(e),p({translateExtent:e})},resetSelectedElements:()=>{let{edges:e,nodes:t,triggerNodeChanges:n,triggerEdgeChanges:r,elementsSelectable:i}=m();if(!i)return;let a=t.reduce((e,t)=>t.selected?[...e,nl(t.id,!1)]:e,[]),o=e.reduce((e,t)=>t.selected?[...e,nl(t.id,!1)]:e,[]);n(a),r(o)},setNodeExtent:e=>{let{nodes:t,nodeLookup:n,parentLookup:r,nodeOrigin:i,elevateNodesOnSelect:a,nodeExtent:o,zIndexMode:s}=m();e[0][0]===o[0][0]&&e[0][1]===o[0][1]&&e[1][0]===o[1][0]&&e[1][1]===o[1][1]||(is(t,n,r,{nodeOrigin:i,nodeExtent:e,elevateNodesOnSelect:a,checkEquality:!1,zIndexMode:s}),p({nodeExtent:e}))},panBy:e=>{let{transform:t,width:n,height:r,panZoom:i,translateExtent:a}=m();return ds({delta:e,panZoom:i,transform:t,translateExtent:a,width:n,height:r})},setCenter:async(e,t,n)=>{let{width:r,height:i,maxZoom:a,panZoom:o}=m();if(!o)return Promise.resolve(!1);let s=n?.zoom===void 0?a:n.zoom;return await o.setViewport({x:r/2-e*s,y:i/2-t*s,zoom:s},{duration:n?.duration,ease:n?.ease,interpolate:n?.interpolate}),Promise.resolve(!0)},cancelConnection:()=>{p({connection:{...Da}})},updateConnection:e=>{p({connection:e})},reset:()=>p({...id()})}},Object.is);function od({initialNodes:e,initialEdges:t,defaultNodes:n,defaultEdges:r,initialWidth:i,initialHeight:a,initialMinZoom:o,initialMaxZoom:s,initialFitViewOptions:c,fitView:l,nodeOrigin:u,nodeExtent:d,zIndexMode:f,children:p}){let[m]=(0,y.useState)(()=>ad({nodes:e,edges:t,defaultNodes:n,defaultEdges:r,width:i,height:a,fitView:l,minZoom:o,maxZoom:s,fitViewOptions:c,nodeOrigin:u,nodeExtent:d,zIndexMode:f}));return(0,x.jsx)(vc,{value:m,children:(0,x.jsx)(fl,{children:p})})}function sd({children:e,nodes:t,edges:n,defaultNodes:r,defaultEdges:i,width:a,height:o,fitView:s,fitViewOptions:c,minZoom:l,maxZoom:u,nodeOrigin:d,nodeExtent:f,zIndexMode:p}){return(0,y.useContext)(_c)?(0,x.jsx)(x.Fragment,{children:e}):(0,x.jsx)(od,{initialNodes:t,initialEdges:n,defaultNodes:r,defaultEdges:i,initialWidth:a,initialHeight:o,fitView:s,initialFitViewOptions:c,initialMinZoom:l,initialMaxZoom:u,nodeOrigin:d,nodeExtent:f,zIndexMode:p,children:e})}var cd={width:`100%`,height:`100%`,overflow:`hidden`,position:`relative`,zIndex:0};function ld({nodes:e,edges:t,defaultNodes:n,defaultEdges:r,className:i,nodeTypes:a,edgeTypes:o,onNodeClick:s,onEdgeClick:c,onInit:l,onMove:u,onMoveStart:d,onMoveEnd:f,onConnect:p,onConnectStart:m,onConnectEnd:h,onClickConnectStart:g,onClickConnectEnd:_,onNodeMouseEnter:v,onNodeMouseMove:b,onNodeMouseLeave:C,onNodeContextMenu:w,onNodeDoubleClick:T,onNodeDragStart:E,onNodeDrag:D,onNodeDragStop:O,onNodesDelete:k,onEdgesDelete:A,onDelete:j,onSelectionChange:M,onSelectionDragStart:ee,onSelectionDrag:N,onSelectionDragStop:te,onSelectionContextMenu:P,onSelectionStart:F,onSelectionEnd:ne,onBeforeDelete:re,connectionMode:ie,connectionLineType:I=Oa.Bezier,connectionLineStyle:L,connectionLineComponent:R,connectionLineContainerStyle:ae,deleteKeyCode:oe=`Backspace`,selectionKeyCode:se=`Shift`,selectionOnDrag:ce=!1,selectionMode:le=Ea.Full,panActivationKeyCode:ue=`Space`,multiSelectionKeyCode:de=W()?`Meta`:`Control`,zoomActivationKeyCode:fe=W()?`Meta`:`Control`,snapToGrid:pe,snapGrid:me,onlyRenderVisibleElements:he=!1,selectNodesOnDrag:ge,nodesDraggable:_e,autoPanOnNodeFocus:ve,nodesConnectable:ye,nodesFocusable:be,nodeOrigin:xe=zc,edgesFocusable:Se,edgesReconnectable:Ce,elementsSelectable:we=!0,defaultViewport:Te=Bc,minZoom:Ee=.5,maxZoom:De=2,translateExtent:Oe=xa,preventScrolling:ke=!0,nodeExtent:Ae,defaultMarkerColor:je=`#b1b1b7`,zoomOnScroll:Me=!0,zoomOnPinch:Ne=!0,panOnScroll:Pe=!1,panOnScrollSpeed:Fe=.5,panOnScrollMode:Ie=Ta.Free,zoomOnDoubleClick:Le=!0,panOnDrag:Re=!0,onPaneClick:ze,onPaneMouseEnter:Be,onPaneMouseMove:Ve,onPaneMouseLeave:He,onPaneScroll:Ue,onPaneContextMenu:We,paneClickDistance:Ge=1,nodeClickDistance:Ke=0,children:qe,onReconnect:Je,onReconnectStart:Ye,onReconnectEnd:Xe,onEdgeContextMenu:Ze,onEdgeDoubleClick:Qe,onEdgeMouseEnter:$e,onEdgeMouseMove:et,onEdgeMouseLeave:tt,reconnectRadius:nt=10,onNodesChange:rt,onEdgesChange:it,noDragClassName:at=`nodrag`,noWheelClassName:ot=`nowheel`,noPanClassName:st=`nopan`,fitView:ct,fitViewOptions:lt,connectOnClick:ut,attributionPosition:dt,proOptions:ft,defaultEdgeOptions:pt,elevateNodesOnSelect:mt=!0,elevateEdgesOnSelect:ht=!1,disableKeyboardA11y:gt=!1,autoPanOnConnect:_t,autoPanOnNodeDrag:vt,autoPanSpeed:yt,connectionRadius:bt,isValidConnection:xt,onError:St,style:Ct,id:wt,nodeDragThreshold:Tt,connectionDragThreshold:Et,viewport:Dt,onViewportChange:Ot,width:kt,height:At,colorMode:jt=`light`,debug:Mt,onScroll:Nt,ariaLabelConfig:Pt,zIndexMode:Ft=`basic`,...It},Lt){let Rt=wt||`1`,zt=Kc(jt),Bt=(0,y.useCallback)(e=>{e.currentTarget.scrollTo({top:0,left:0,behavior:`instant`}),Nt?.(e)},[Nt]);return(0,x.jsx)(`div`,{"data-testid":`rf__wrapper`,...It,onScroll:Bt,style:{...Ct,...cd},ref:Lt,className:S([`react-flow`,i,zt]),id:wt,role:`application`,children:(0,x.jsxs)(sd,{nodes:e,edges:t,width:kt,height:At,fitView:ct,fitViewOptions:lt,minZoom:Ee,maxZoom:De,nodeOrigin:xe,nodeExtent:Ae,zIndexMode:Ft,children:[(0,x.jsx)(Wc,{nodes:e,edges:t,defaultNodes:n,defaultEdges:r,onConnect:p,onConnectStart:m,onConnectEnd:h,onClickConnectStart:g,onClickConnectEnd:_,nodesDraggable:_e,autoPanOnNodeFocus:ve,nodesConnectable:ye,nodesFocusable:be,edgesFocusable:Se,edgesReconnectable:Ce,elementsSelectable:we,elevateNodesOnSelect:mt,elevateEdgesOnSelect:ht,minZoom:Ee,maxZoom:De,nodeExtent:Ae,onNodesChange:rt,onEdgesChange:it,snapToGrid:pe,snapGrid:me,connectionMode:ie,translateExtent:Oe,connectOnClick:ut,defaultEdgeOptions:pt,fitView:ct,fitViewOptions:lt,onNodesDelete:k,onEdgesDelete:A,onDelete:j,onNodeDragStart:E,onNodeDrag:D,onNodeDragStop:O,onSelectionDrag:N,onSelectionDragStart:ee,onSelectionDragStop:te,onMove:u,onMoveStart:d,onMoveEnd:f,noPanClassName:st,nodeOrigin:xe,rfId:Rt,autoPanOnConnect:_t,autoPanOnNodeDrag:vt,autoPanSpeed:yt,onError:St,connectionRadius:bt,isValidConnection:xt,selectNodesOnDrag:ge,nodeDragThreshold:Tt,connectionDragThreshold:Et,onBeforeDelete:re,debug:Mt,ariaLabelConfig:Pt,zIndexMode:Ft}),(0,x.jsx)(rd,{onInit:l,onNodeClick:s,onEdgeClick:c,onNodeMouseEnter:v,onNodeMouseMove:b,onNodeMouseLeave:C,onNodeContextMenu:w,onNodeDoubleClick:T,nodeTypes:a,edgeTypes:o,connectionLineType:I,connectionLineStyle:L,connectionLineComponent:R,connectionLineContainerStyle:ae,selectionKeyCode:se,selectionOnDrag:ce,selectionMode:le,deleteKeyCode:oe,multiSelectionKeyCode:de,panActivationKeyCode:ue,zoomActivationKeyCode:fe,onlyRenderVisibleElements:he,defaultViewport:Te,translateExtent:Oe,minZoom:Ee,maxZoom:De,preventScrolling:ke,zoomOnScroll:Me,zoomOnPinch:Ne,zoomOnDoubleClick:Le,panOnScroll:Pe,panOnScrollSpeed:Fe,panOnScrollMode:Ie,panOnDrag:Re,onPaneClick:ze,onPaneMouseEnter:Be,onPaneMouseMove:Ve,onPaneMouseLeave:He,onPaneScroll:Ue,onPaneContextMenu:We,paneClickDistance:Ge,nodeClickDistance:Ke,onSelectionContextMenu:P,onSelectionStart:F,onSelectionEnd:ne,onReconnect:Je,onReconnectStart:Ye,onReconnectEnd:Xe,onEdgeContextMenu:Ze,onEdgeDoubleClick:Qe,onEdgeMouseEnter:$e,onEdgeMouseMove:et,onEdgeMouseLeave:tt,reconnectRadius:nt,defaultMarkerColor:je,noDragClassName:at,noWheelClassName:ot,noPanClassName:st,rfId:Rt,disableKeyboardA11y:gt,nodeExtent:Ae,viewport:Dt,onViewportChange:Ot}),(0,x.jsx)(Lc,{onSelectionChange:M}),qe,(0,x.jsx)(jc,{proOptions:ft,position:dt}),(0,x.jsx)(kc,{rfId:Rt,disableKeyboardA11y:gt})]})})}var ud=cl(ld);function dd(e){let[t,n]=(0,y.useState)(e);return[t,n,(0,y.useCallback)(e=>n(t=>el(e,t)),[])]}function fd(e){let[t,n]=(0,y.useState)(e);return[t,n,(0,y.useCallback)(e=>n(t=>tl(e,t)),[])]}ba.error014();function pd({dimensions:e,lineWidth:t,variant:n,className:r}){return(0,x.jsx)(`path`,{strokeWidth:t,d:`M${e[0]/2} 0 V${e[1]} M0 ${e[1]/2} H${e[0]}`,className:S([`react-flow__background-pattern`,n,r])})}function md({radius:e,className:t}){return(0,x.jsx)(`circle`,{cx:e,cy:e,r:e,className:S([`react-flow__background-pattern`,`dots`,t])})}var hd;(function(e){e.Lines=`lines`,e.Dots=`dots`,e.Cross=`cross`})(hd||={});var gd={[hd.Dots]:1,[hd.Lines]:1,[hd.Cross]:6},_d=e=>({transform:e.transform,patternId:`pattern-${e.rfId}`});function vd({id:e,variant:t=hd.Dots,gap:n=20,size:r,lineWidth:i=1,offset:a=0,color:o,bgColor:s,style:c,className:l,patternClassName:u}){let d=(0,y.useRef)(null),{transform:f,patternId:p}=G(_d,gc),m=r||gd[t],h=t===hd.Dots,g=t===hd.Cross,_=Array.isArray(n)?n:[n,n],v=[_[0]*f[2]||1,_[1]*f[2]||1],b=m*f[2],C=Array.isArray(a)?a:[a,a],w=g?[b,b]:v,T=[C[0]*f[2]||1+w[0]/2,C[1]*f[2]||1+w[1]/2],E=`${p}${e||``}`;return(0,x.jsxs)(`svg`,{className:S([`react-flow__background`,l]),style:{...c,...bl,"--xy-background-color-props":s,"--xy-background-pattern-color-props":o},ref:d,"data-testid":`rf__background`,children:[(0,x.jsx)(`pattern`,{id:E,x:f[0]%v[0],y:f[1]%v[1],width:v[0],height:v[1],patternUnits:`userSpaceOnUse`,patternTransform:`translate(-${T[0]},-${T[1]})`,children:h?(0,x.jsx)(md,{radius:b/2,className:u}):(0,x.jsx)(pd,{dimensions:w,lineWidth:i,variant:t,className:u})}),(0,x.jsx)(`rect`,{x:`0`,y:`0`,width:`100%`,height:`100%`,fill:`url(#${E})`})]})}vd.displayName=`Background`;var yd=(0,y.memo)(vd);function Q(){return(0,x.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 32 32`,children:(0,x.jsx)(`path`,{d:`M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z`})})}function bd(){return(0,x.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 32 5`,children:(0,x.jsx)(`path`,{d:`M0 0h32v4.2H0z`})})}function xd(){return(0,x.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 32 30`,children:(0,x.jsx)(`path`,{d:`M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z`})})}function Sd(){return(0,x.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 25 32`,children:(0,x.jsx)(`path`,{d:`M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z`})})}function Cd(){return(0,x.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 25 32`,children:(0,x.jsx)(`path`,{d:`M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z`})})}function wd({children:e,className:t,...n}){return(0,x.jsx)(`button`,{type:`button`,className:S([`react-flow__controls-button`,t]),...n,children:e})}var Td=e=>({isInteractive:e.nodesDraggable||e.nodesConnectable||e.elementsSelectable,minZoomReached:e.transform[2]<=e.minZoom,maxZoomReached:e.transform[2]>=e.maxZoom,ariaLabelConfig:e.ariaLabelConfig});function Ed({style:e,showZoom:t=!0,showFitView:n=!0,showInteractive:r=!0,fitViewOptions:i,onZoomIn:a,onZoomOut:o,onFitView:s,onInteractiveChange:c,className:l,children:u,position:d=`bottom-left`,orientation:f=`vertical`,"aria-label":p}){let m=bc(),{isInteractive:h,minZoomReached:g,maxZoomReached:_,ariaLabelConfig:v}=G(Td,gc),{zoomIn:y,zoomOut:b,fitView:C}=hl();return(0,x.jsxs)(Ac,{className:S([`react-flow__controls`,f===`horizontal`?`horizontal`:`vertical`,l]),position:d,style:e,"data-testid":`rf__controls`,"aria-label":p??v[`controls.ariaLabel`],children:[t&&(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(wd,{onClick:()=>{y(),a?.()},className:`react-flow__controls-zoomin`,title:v[`controls.zoomIn.ariaLabel`],"aria-label":v[`controls.zoomIn.ariaLabel`],disabled:_,children:(0,x.jsx)(Q,{})}),(0,x.jsx)(wd,{onClick:()=>{b(),o?.()},className:`react-flow__controls-zoomout`,title:v[`controls.zoomOut.ariaLabel`],"aria-label":v[`controls.zoomOut.ariaLabel`],disabled:g,children:(0,x.jsx)(bd,{})})]}),n&&(0,x.jsx)(wd,{className:`react-flow__controls-fitview`,onClick:()=>{C(i),s?.()},title:v[`controls.fitView.ariaLabel`],"aria-label":v[`controls.fitView.ariaLabel`],children:(0,x.jsx)(xd,{})}),r&&(0,x.jsx)(wd,{className:`react-flow__controls-interactive`,onClick:()=>{m.setState({nodesDraggable:!h,nodesConnectable:!h,elementsSelectable:!h}),c?.(!h)},title:v[`controls.interactive.ariaLabel`],"aria-label":v[`controls.interactive.ariaLabel`],children:h?(0,x.jsx)(Cd,{}):(0,x.jsx)(Sd,{})}),u]})}Ed.displayName=`Controls`;var Dd=(0,y.memo)(Ed);function Od({id:e,x:t,y:n,width:r,height:i,style:a,color:o,strokeColor:s,strokeWidth:c,className:l,borderRadius:u,shapeRendering:d,selected:f,onClick:p}){let{background:m,backgroundColor:h}=a||{},g=o||m||h;return(0,x.jsx)(`rect`,{className:S([`react-flow__minimap-node`,{selected:f},l]),x:t,y:n,rx:u,ry:u,width:r,height:i,style:{fill:g,stroke:s,strokeWidth:c},shapeRendering:d,onClick:p?t=>p(t,e):void 0})}var kd=(0,y.memo)(Od),Ad=e=>e.nodes.map(e=>e.id),jd=e=>e instanceof Function?e:()=>e;function Md({nodeStrokeColor:e,nodeColor:t,nodeClassName:n=``,nodeBorderRadius:r=5,nodeStrokeWidth:i,nodeComponent:a=kd,onClick:o}){let s=G(Ad,gc),c=jd(t),l=jd(e),u=jd(n),d=typeof window>`u`||window.chrome?`crispEdges`:`geometricPrecision`;return(0,x.jsx)(x.Fragment,{children:s.map(e=>(0,x.jsx)(Nd,{id:e,nodeColorFunc:c,nodeStrokeColorFunc:l,nodeClassNameFunc:u,nodeBorderRadius:r,nodeStrokeWidth:i,NodeComponent:a,onClick:o,shapeRendering:d},e))})}function $({id:e,nodeColorFunc:t,nodeStrokeColorFunc:n,nodeClassNameFunc:r,nodeBorderRadius:i,nodeStrokeWidth:a,shapeRendering:o,NodeComponent:s,onClick:c}){let{node:l,x:u,y:d,width:f,height:p}=G(t=>{let n=t.nodeLookup.get(e);if(!n)return{node:void 0,x:0,y:0,width:0,height:0};let r=n.internals.userNode,{x:i,y:a}=n.internals.positionAbsolute,{width:o,height:s}=fo(r);return{node:r,x:i,y:a,width:o,height:s}},gc);return!l||l.hidden||!po(l)?null:(0,x.jsx)(s,{x:u,y:d,width:f,height:p,style:l.style,selected:!!l.selected,className:r(l),color:t(l),borderRadius:i,strokeColor:n(l),strokeWidth:a,shapeRendering:o,onClick:c,id:l.id})}var Nd=(0,y.memo)($),Pd=(0,y.memo)(Md),Fd=200,Id=150,Ld=e=>!e.hidden,Rd=e=>{let t={x:-e.transform[0]/e.transform[2],y:-e.transform[1]/e.transform[2],width:e.width/e.transform[2],height:e.height/e.transform[2]};return{viewBB:t,boundingRect:e.nodeLookup.size>0?eo(La(e.nodeLookup,{filter:Ld}),t):t,rfId:e.rfId,panZoom:e.panZoom,translateExtent:e.translateExtent,flowWidth:e.width,flowHeight:e.height,ariaLabelConfig:e.ariaLabelConfig}},zd=`react-flow__minimap-desc`;function Bd({style:e,className:t,nodeStrokeColor:n,nodeColor:r,nodeClassName:i=``,nodeBorderRadius:a=5,nodeStrokeWidth:o,nodeComponent:s,bgColor:c,maskColor:l,maskStrokeColor:u,maskStrokeWidth:d,position:f=`bottom-right`,onClick:p,onNodeClick:m,pannable:h=!1,zoomable:g=!1,ariaLabel:_,inversePan:v,zoomStep:b=1,offsetScale:C=5}){let w=bc(),T=(0,y.useRef)(null),{boundingRect:E,viewBB:D,rfId:O,panZoom:k,translateExtent:A,flowWidth:j,flowHeight:M,ariaLabelConfig:ee}=G(Rd,gc),N=e?.width??Fd,te=e?.height??Id,P=E.width/N,F=E.height/te,ne=Math.max(P,F),re=ne*N,ie=ne*te,I=C*ne,L=E.x-(re-E.width)/2-I,R=E.y-(ie-E.height)/2-I,ae=re+I*2,oe=ie+I*2,se=`${zd}-${O}`,ce=(0,y.useRef)(0),le=(0,y.useRef)();ce.current=ne,(0,y.useEffect)(()=>{if(T.current&&k)return le.current=As({domNode:T.current,panZoom:k,getTransform:()=>w.getState().transform,getViewScale:()=>ce.current}),()=>{le.current?.destroy()}},[k]),(0,y.useEffect)(()=>{le.current?.update({translateExtent:A,width:j,height:M,inversePan:v,pannable:h,zoomStep:b,zoomable:g})},[h,g,v,b,A,j,M]);let ue=p?e=>{let[t,n]=le.current?.pointer(e)||[0,0];p(e,{x:t,y:n})}:void 0,de=m?(0,y.useCallback)((e,t)=>{let n=w.getState().nodeLookup.get(t).internals.userNode;m(e,n)},[]):void 0,fe=_??ee[`minimap.ariaLabel`];return(0,x.jsx)(Ac,{position:f,style:{...e,"--xy-minimap-background-color-props":typeof c==`string`?c:void 0,"--xy-minimap-mask-background-color-props":typeof l==`string`?l:void 0,"--xy-minimap-mask-stroke-color-props":typeof u==`string`?u:void 0,"--xy-minimap-mask-stroke-width-props":typeof d==`number`?d*ne:void 0,"--xy-minimap-node-background-color-props":typeof r==`string`?r:void 0,"--xy-minimap-node-stroke-color-props":typeof n==`string`?n:void 0,"--xy-minimap-node-stroke-width-props":typeof o==`number`?o:void 0},className:S([`react-flow__minimap`,t]),"data-testid":`rf__minimap`,children:(0,x.jsxs)(`svg`,{width:N,height:te,viewBox:`${L} ${R} ${ae} ${oe}`,className:`react-flow__minimap-svg`,role:`img`,"aria-labelledby":se,ref:T,onClick:ue,children:[fe&&(0,x.jsx)(`title`,{id:se,children:fe}),(0,x.jsx)(Pd,{onClick:de,nodeColor:r,nodeStrokeColor:n,nodeBorderRadius:a,nodeClassName:i,nodeStrokeWidth:o,nodeComponent:s}),(0,x.jsx)(`path`,{className:`react-flow__minimap-mask`,d:`M${L-I},${R-I}h${ae+I*2}v${oe+I*2}h${-ae-I*2}z
-        M${D.x},${D.y}h${D.width}v${D.height}h${-D.width}z`,fillRule:`evenodd`,pointerEvents:`none`})]})})}Bd.displayName=`MiniMap`;var Vd=(0,y.memo)(Bd),Hd=e=>t=>e?`${Math.max(1/t.transform[2],1)}`:void 0,Ud={[Gs.Line]:`right`,[Gs.Handle]:`bottom-right`};function Wd({nodeId:e,position:t,variant:n=Gs.Handle,className:r,style:i=void 0,children:a,color:o,minWidth:s=10,minHeight:c=10,maxWidth:l=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:d=!1,resizeDirection:f,autoScale:p=!0,shouldResize:m,onResizeStart:h,onResize:g,onResizeEnd:_}){let v=Pl(),b=typeof e==`string`?e:v,C=bc(),w=(0,y.useRef)(null),T=n===Gs.Handle,E=G((0,y.useCallback)(Hd(T&&p),[T,p]),gc),D=(0,y.useRef)(null),O=t??Ud[n];return(0,y.useEffect)(()=>{if(!(!w.current||!b))return D.current||=rc({domNode:w.current,nodeId:b,getStoreItems:()=>{let{nodeLookup:e,transform:t,snapGrid:n,snapToGrid:r,nodeOrigin:i,domNode:a}=C.getState();return{nodeLookup:e,transform:t,snapGrid:n,snapToGrid:r,nodeOrigin:i,paneDomNode:a}},onChange:(e,t)=>{let{triggerNodeChanges:n,nodeLookup:r,parentLookup:i,nodeOrigin:a}=C.getState(),o=[],s={x:e.x,y:e.y},c=r.get(b);if(c&&c.expandParent&&c.parentId){let t=c.origin??a,n=e.width??c.measured.width??0,l=e.height??c.measured.height??0,u=ls([{id:c.id,parentId:c.parentId,rect:{width:n,height:l,...mo({x:e.x??c.position.x,y:e.y??c.position.y},{width:n,height:l},c.parentId,r,t)}}],r,i,a);o.push(...u),s.x=e.x?Math.max(t[0]*n,e.x):void 0,s.y=e.y?Math.max(t[1]*l,e.y):void 0}if(s.x!==void 0&&s.y!==void 0){let e={id:b,type:`position`,position:{...s}};o.push(e)}if(e.width!==void 0&&e.height!==void 0){let t={id:b,type:`dimensions`,resizing:!0,setAttributes:f?f===`horizontal`?`width`:`height`:!0,dimensions:{width:e.width,height:e.height}};o.push(t)}for(let e of t){let t={...e,type:`position`};o.push(t)}n(o)},onEnd:({width:e,height:t})=>{let n={id:b,type:`dimensions`,resizing:!1,dimensions:{width:e,height:t}};C.getState().triggerNodeChanges([n])}}),D.current.update({controlPosition:O,boundaries:{minWidth:s,minHeight:c,maxWidth:l,maxHeight:u},keepAspectRatio:d,resizeDirection:f,onResizeStart:h,onResize:g,onResizeEnd:_,shouldResize:m}),()=>{D.current?.destroy()}},[O,s,c,l,u,d,h,g,_,m]),(0,x.jsx)(`div`,{className:S([`react-flow__resize-control`,`nodrag`,...O.split(`-`),n,r]),ref:w,style:{...i,scale:E,...o&&{[T?`backgroundColor`:`borderColor`]:o}},children:a})}(0,y.memo)(Wd);function Gd(e,t){let n=new Set(t.map(e=>e.target)),r=e.filter(e=>!n.has(e.id));r.length===0&&e.length>0&&r.push(e[0]);let i=new Map,a=new Map;t.forEach(e=>{let t=a.get(e.source)||[];t.push(e.target),a.set(e.source,t)});let o=r.map(e=>({id:e.id,level:0})),s=new Set;for(;o.length>0;){let{id:e,level:t}=o.shift();s.has(e)||(s.add(e),i.set(e,t),(a.get(e)||[]).forEach(e=>{s.has(e)||o.push({id:e,level:t+1})}))}e.forEach(e=>{i.has(e.id)||i.set(e.id,i.size>0?Math.max(...i.values())+1:0)});let c=new Map;i.forEach((e,t)=>{let n=c.get(e)||[];n.push(t),c.set(e,n)});let l=new Map;return c.forEach((e,t)=>{let n=-(e.length*220+(e.length-1)*60)/2;e.forEach((e,r)=>{l.set(e,{x:n+r*280,y:t*180})})}),l}function Kd({data:e}){let t=e;return(0,x.jsxs)(`div`,{onClick:t.onClick,style:{background:t.active?`#1a5276`:`#16213e`,border:`2px solid ${t.active?`#3498db`:`#2c3e50`}`,borderRadius:8,padding:`10px 14px`,width:220,cursor:`pointer`,transition:`all 0.2s`},children:[(0,x.jsx)(Rl,{type:`target`,position:V.Top,style:{opacity:0}}),(0,x.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:8,marginBottom:4},children:[(0,x.jsx)(`span`,{style:{width:22,height:22,borderRadius:`50%`,background:t.active?`#3498db`:`#2c3e50`,display:`flex`,alignItems:`center`,justifyContent:`center`,fontSize:`11px`,fontWeight:700,flexShrink:0},children:t.step.stepNumber}),(0,x.jsx)(`span`,{style:{fontWeight:600,fontSize:`12px`,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:t.step.title})]}),(0,x.jsx)(`div`,{style:{fontSize:`10px`,opacity:.7,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:t.step.file}),(0,x.jsx)(Rl,{type:`source`,position:V.Bottom,style:{opacity:0}})]})}var qd={step:Kd};function Jd({data:e}){let[t,n,r]=dd([]),[i,a,o]=fd([]),[s,c]=(0,y.useState)(null),l=(0,y.useCallback)(t=>{if(!e.steps?.length)return;let r=Gd(e.steps,e.dependencies||[]),i=e.steps.map(e=>({id:e.id,type:`step`,position:r.get(e.id)||{x:0,y:0},data:{step:e,active:e.id===t,onClick:()=>c(e)}})),o=(e.dependencies||[]).map((e,t)=>({id:`e${t}`,source:e.source,target:e.target,animated:!0,markerEnd:{type:ka.ArrowClosed},style:{stroke:`#3498db`,strokeWidth:1.5}}));n(i),a(o)},[e]);(0,y.useEffect)(()=>{l(s?.id||null)},[e,s]);let u=s?e.steps.findIndex(e=>e.id===s.id):-1,d=u>0,f=u<e.steps.length-1;return(0,x.jsxs)(`div`,{style:{width:`100%`,height:`100%`,display:`flex`,flexDirection:`column`},children:[e.title&&(0,x.jsxs)(`div`,{style:{padding:`12px 20px`,borderBottom:`1px solid #333`,background:`#16213e`,display:`flex`,justifyContent:`space-between`,alignItems:`center`},children:[(0,x.jsxs)(`div`,{children:[(0,x.jsx)(`h1`,{style:{fontSize:`16px`,margin:0},children:e.title}),e.description&&(0,x.jsx)(`p`,{style:{fontSize:`11px`,opacity:.7,margin:`2px 0 0`},children:e.description})]}),e.estimatedTime&&(0,x.jsx)(`span`,{style:{fontSize:`11px`,opacity:.6},children:e.estimatedTime})]}),(0,x.jsx)(`div`,{style:{flex:1},children:(0,x.jsxs)(ud,{nodes:t,edges:i,onNodesChange:r,onEdgesChange:o,nodeTypes:qd,fitView:!0,minZoom:.3,maxZoom:2,proOptions:{hideAttribution:!0},children:[(0,x.jsx)(yd,{color:`#333`,gap:20}),(0,x.jsx)(Dd,{}),(0,x.jsx)(Vd,{maskColor:`rgba(0,0,0,0.7)`})]})}),s&&(0,x.jsxs)(`div`,{style:{padding:`16px 20px`,borderTop:`1px solid #333`,background:`#16213e`,maxHeight:`35%`,overflow:`auto`},children:[(0,x.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:8},children:[(0,x.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:8},children:[(0,x.jsx)(`span`,{style:{width:24,height:24,borderRadius:`50%`,background:`#3498db`,display:`flex`,alignItems:`center`,justifyContent:`center`,fontSize:`12px`,fontWeight:700},children:s.stepNumber}),(0,x.jsx)(`h2`,{style:{fontSize:`14px`,margin:0},children:s.title})]}),(0,x.jsxs)(`div`,{style:{display:`flex`,gap:8},children:[(0,x.jsx)(`button`,{disabled:!d,onClick:()=>d&&c(e.steps[u-1]),style:{padding:`4px 12px`,fontSize:`11px`,borderRadius:4,border:`1px solid #444`,background:d?`#2c3e50`:`#1a1a2e`,color:d?`#fff`:`#666`,cursor:d?`pointer`:`default`},children:`← Prev`}),(0,x.jsx)(`button`,{disabled:!f,onClick:()=>f&&c(e.steps[u+1]),style:{padding:`4px 12px`,fontSize:`11px`,borderRadius:4,border:`1px solid #444`,background:f?`#2c3e50`:`#1a1a2e`,color:f?`#fff`:`#666`,cursor:f?`pointer`:`default`},children:`Next →`})]})]}),(0,x.jsxs)(`div`,{style:{fontSize:`11px`,opacity:.7,marginBottom:8},children:[(0,x.jsxs)(`span`,{style:{marginRight:16},children:[`📁 `,s.file]}),(0,x.jsxs)(`span`,{style:{marginRight:16},children:[`💡 `,s.learnsConcept]}),(0,x.jsxs)(`span`,{children:[`⏱ `,s.duration]})]}),(0,x.jsx)(`p`,{style:{fontSize:`13px`,lineHeight:1.5,opacity:.9},children:s.explanation})]})]})}function Yd({data:e}){return(0,x.jsx)(od,{children:(0,x.jsx)(Jd,{data:e})})}var Xd=document.getElementById(`tour-data`),Zd=Xd?JSON.parse(Xd.textContent||`{}`):{};(0,b.createRoot)(document.getElementById(`root`)).render((0,x.jsx)(Yd,{data:Zd}));</script>
+        M${D.x},${D.y}h${D.width}v${D.height}h${-D.width}z`,fillRule:`evenodd`,pointerEvents:`none`})]})})}Bd.displayName=`MiniMap`;var Vd=(0,y.memo)(Bd),Hd=e=>t=>e?`${Math.max(1/t.transform[2],1)}`:void 0,Ud={[Gs.Line]:`right`,[Gs.Handle]:`bottom-right`};function Wd({nodeId:e,position:t,variant:n=Gs.Handle,className:r,style:i=void 0,children:a,color:o,minWidth:s=10,minHeight:c=10,maxWidth:l=Number.MAX_VALUE,maxHeight:u=Number.MAX_VALUE,keepAspectRatio:d=!1,resizeDirection:f,autoScale:p=!0,shouldResize:m,onResizeStart:h,onResize:g,onResizeEnd:_}){let v=Pl(),b=typeof e==`string`?e:v,C=bc(),w=(0,y.useRef)(null),T=n===Gs.Handle,E=G((0,y.useCallback)(Hd(T&&p),[T,p]),gc),D=(0,y.useRef)(null),O=t??Ud[n];return(0,y.useEffect)(()=>{if(!(!w.current||!b))return D.current||=rc({domNode:w.current,nodeId:b,getStoreItems:()=>{let{nodeLookup:e,transform:t,snapGrid:n,snapToGrid:r,nodeOrigin:i,domNode:a}=C.getState();return{nodeLookup:e,transform:t,snapGrid:n,snapToGrid:r,nodeOrigin:i,paneDomNode:a}},onChange:(e,t)=>{let{triggerNodeChanges:n,nodeLookup:r,parentLookup:i,nodeOrigin:a}=C.getState(),o=[],s={x:e.x,y:e.y},c=r.get(b);if(c&&c.expandParent&&c.parentId){let t=c.origin??a,n=e.width??c.measured.width??0,l=e.height??c.measured.height??0,u=ls([{id:c.id,parentId:c.parentId,rect:{width:n,height:l,...mo({x:e.x??c.position.x,y:e.y??c.position.y},{width:n,height:l},c.parentId,r,t)}}],r,i,a);o.push(...u),s.x=e.x?Math.max(t[0]*n,e.x):void 0,s.y=e.y?Math.max(t[1]*l,e.y):void 0}if(s.x!==void 0&&s.y!==void 0){let e={id:b,type:`position`,position:{...s}};o.push(e)}if(e.width!==void 0&&e.height!==void 0){let t={id:b,type:`dimensions`,resizing:!0,setAttributes:f?f===`horizontal`?`width`:`height`:!0,dimensions:{width:e.width,height:e.height}};o.push(t)}for(let e of t){let t={...e,type:`position`};o.push(t)}n(o)},onEnd:({width:e,height:t})=>{let n={id:b,type:`dimensions`,resizing:!1,dimensions:{width:e,height:t}};C.getState().triggerNodeChanges([n])}}),D.current.update({controlPosition:O,boundaries:{minWidth:s,minHeight:c,maxWidth:l,maxHeight:u},keepAspectRatio:d,resizeDirection:f,onResizeStart:h,onResize:g,onResizeEnd:_,shouldResize:m}),()=>{D.current?.destroy()}},[O,s,c,l,u,d,h,g,_,m]),(0,x.jsx)(`div`,{className:S([`react-flow__resize-control`,`nodrag`,...O.split(`-`),n,r]),ref:w,style:{...i,scale:E,...o&&{[T?`backgroundColor`:`borderColor`]:o}},children:a})}(0,y.memo)(Wd);function Gd(e,t){let n=new Set(t.map(e=>e.target)),r=e.filter(e=>!n.has(e.id));r.length===0&&e.length>0&&r.push(e[0]);let i=new Map,a=new Map;t.forEach(e=>{let t=a.get(e.source)||[];t.push(e.target),a.set(e.source,t)});let o=r.map(e=>({id:e.id,level:0})),s=new Set;for(;o.length>0;){let{id:e,level:t}=o.shift();s.has(e)||(s.add(e),i.set(e,t),(a.get(e)||[]).forEach(e=>{s.has(e)||o.push({id:e,level:t+1})}))}e.forEach(e=>{i.has(e.id)||i.set(e.id,i.size>0?Math.max(...i.values())+1:0)});let c=new Map;i.forEach((e,t)=>{let n=c.get(e)||[];n.push(t),c.set(e,n)});let l=new Map;return c.forEach((e,t)=>{let n=-(e.length*220+(e.length-1)*60)/2;e.forEach((e,r)=>{l.set(e,{x:n+r*280,y:t*180})})}),l}function Kd({file:e}){let t=e.split(`.`).pop()?.toLowerCase()||``,n={width:14,height:14,flexShrink:0,opacity:.7};switch(t){case`ts`:case`tsx`:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,children:[(0,x.jsx)(`rect`,{x:`1`,y:`1`,width:`12`,height:`12`,rx:`2`,fill:`#3178c6`}),(0,x.jsx)(`text`,{x:`7`,y:`10`,textAnchor:`middle`,fontSize:`7`,fill:`#fff`,fontWeight:`700`,children:`TS`})]});case`js`:case`jsx`:case`mjs`:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,children:[(0,x.jsx)(`rect`,{x:`1`,y:`1`,width:`12`,height:`12`,rx:`2`,fill:`#f7df1e`}),(0,x.jsx)(`text`,{x:`7`,y:`10`,textAnchor:`middle`,fontSize:`7`,fill:`#000`,fontWeight:`700`,children:`JS`})]});case`json`:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,stroke:`#a0a0a0`,strokeWidth:`1.2`,children:[(0,x.jsx)(`path`,{d:`M4 2c-1.5 0-2 1-2 2v2c0 1-0.5 1-1 1 0.5 0 1 0 1 1v2c0 1 0.5 2 2 2`}),(0,x.jsx)(`path`,{d:`M10 2c1.5 0 2 1 2 2v2c0 1 0.5 1 1 1-0.5 0-1 0-1 1v2c0 1-0.5 2-2 2`})]});case`css`:case`scss`:case`less`:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,children:[(0,x.jsx)(`rect`,{x:`1`,y:`1`,width:`12`,height:`12`,rx:`2`,fill:`#264de4`}),(0,x.jsx)(`text`,{x:`7`,y:`10`,textAnchor:`middle`,fontSize:`6`,fill:`#fff`,fontWeight:`700`,children:`CSS`})]});case`html`:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,children:[(0,x.jsx)(`rect`,{x:`1`,y:`1`,width:`12`,height:`12`,rx:`2`,fill:`#e34c26`}),(0,x.jsx)(`text`,{x:`7`,y:`10`,textAnchor:`middle`,fontSize:`6`,fill:`#fff`,fontWeight:`700`,children:`H`})]});case`py`:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,children:[(0,x.jsx)(`rect`,{x:`1`,y:`1`,width:`12`,height:`12`,rx:`2`,fill:`#3776ab`}),(0,x.jsx)(`text`,{x:`7`,y:`10`,textAnchor:`middle`,fontSize:`7`,fill:`#ffd43b`,fontWeight:`700`,children:`Py`})]});case`go`:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,children:[(0,x.jsx)(`rect`,{x:`1`,y:`1`,width:`12`,height:`12`,rx:`2`,fill:`#00add8`}),(0,x.jsx)(`text`,{x:`7`,y:`10`,textAnchor:`middle`,fontSize:`7`,fill:`#fff`,fontWeight:`700`,children:`Go`})]});case`rs`:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,children:[(0,x.jsx)(`rect`,{x:`1`,y:`1`,width:`12`,height:`12`,rx:`2`,fill:`#ce412b`}),(0,x.jsx)(`text`,{x:`7`,y:`10`,textAnchor:`middle`,fontSize:`7`,fill:`#fff`,fontWeight:`700`,children:`Rs`})]});case`md`:case`mdx`:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,stroke:`#a0a0a0`,strokeWidth:`1.3`,children:[(0,x.jsx)(`rect`,{x:`1`,y:`3`,width:`12`,height:`8`,rx:`1`}),(0,x.jsx)(`path`,{d:`M3 9V5l2 2 2-2v4M10 7.5l1.5-1.5M10 7.5l-1.5-1.5M10 7.5V5`})]});case`yaml`:case`yml`:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,children:[(0,x.jsx)(`rect`,{x:`1`,y:`1`,width:`12`,height:`12`,rx:`2`,fill:`#cb171e`}),(0,x.jsx)(`text`,{x:`7`,y:`10`,textAnchor:`middle`,fontSize:`5`,fill:`#fff`,fontWeight:`700`,children:`YML`})]});default:return(0,x.jsxs)(`svg`,{...n,viewBox:`0 0 14 14`,fill:`none`,stroke:`#6b7a90`,strokeWidth:`1.3`,children:[(0,x.jsx)(`path`,{d:`M4 1h4l3 3v9H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z`}),(0,x.jsx)(`path`,{d:`M8 1v3h3`})]})}}function qd({data:e}){let t=e;return(0,x.jsxs)(`div`,{onClick:t.onClick,style:{background:t.active?`#1a5276`:`#16213e`,border:`2px solid ${t.active?`#3498db`:`#2c3e50`}`,borderRadius:8,padding:`10px 14px`,width:220,cursor:`pointer`,transition:`all 0.2s`},children:[(0,x.jsx)(Rl,{type:`target`,position:V.Top,style:{opacity:0}}),(0,x.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:8,marginBottom:4},children:[(0,x.jsx)(`span`,{style:{width:22,height:22,borderRadius:`50%`,background:t.active?`#3498db`:`#2c3e50`,display:`flex`,alignItems:`center`,justifyContent:`center`,fontSize:`11px`,fontWeight:700,flexShrink:0},children:t.step.stepNumber}),(0,x.jsx)(`span`,{style:{fontWeight:600,fontSize:`12px`,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:t.step.title})]}),(0,x.jsxs)(`div`,{style:{fontSize:`10px`,opacity:.7,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`,display:`flex`,alignItems:`center`,gap:4,paddingLeft:30},children:[(0,x.jsx)(Kd,{file:t.step.file}),t.step.file]}),(0,x.jsx)(Rl,{type:`source`,position:V.Bottom,style:{opacity:0}})]})}var Jd={step:qd};function Yd({data:e}){let[t,n,r]=dd([]),[i,a,o]=fd([]),[s,c]=(0,y.useState)(e.steps?.[0]||null),l=(0,y.useCallback)(t=>{if(!e.steps?.length)return;let r=Gd(e.steps,e.dependencies||[]),i=e.steps.map(e=>({id:e.id,type:`step`,position:r.get(e.id)||{x:0,y:0},data:{step:e,active:e.id===t,onClick:()=>c(e)}})),o=(e.dependencies||[]).map((e,t)=>({id:`e${t}`,source:e.source,target:e.target,animated:!0,markerEnd:{type:ka.ArrowClosed},style:{stroke:`#3498db`,strokeWidth:1.5}}));n(i),a(o)},[e]);(0,y.useEffect)(()=>{l(s?.id||null)},[e,s]);let u=s?e.steps.findIndex(e=>e.id===s.id):-1,d=u>0,f=u<e.steps.length-1;return(0,x.jsxs)(`div`,{style:{width:`100%`,height:`100%`,display:`flex`,flexDirection:`column`},children:[e.title&&(0,x.jsxs)(`div`,{style:{padding:`12px 20px`,borderBottom:`1px solid #333`,background:`#16213e`,display:`flex`,justifyContent:`space-between`,alignItems:`center`},children:[(0,x.jsxs)(`div`,{children:[(0,x.jsx)(`h1`,{style:{fontSize:`16px`,margin:0},children:e.title}),e.description&&(0,x.jsx)(`p`,{style:{fontSize:`11px`,opacity:.7,margin:`2px 0 0`},children:e.description})]}),e.estimatedTime&&(0,x.jsx)(`span`,{style:{fontSize:`11px`,opacity:.6},children:e.estimatedTime})]}),(0,x.jsx)(`div`,{style:{flex:1},children:(0,x.jsxs)(ud,{nodes:t,edges:i,onNodesChange:r,onEdgesChange:o,nodeTypes:Jd,fitView:!0,minZoom:.3,maxZoom:2,proOptions:{hideAttribution:!0},children:[(0,x.jsx)(yd,{color:`#333`,gap:20}),(0,x.jsx)(Dd,{}),(0,x.jsx)(Vd,{maskColor:`rgba(0,0,0,0.7)`})]})}),s&&(0,x.jsxs)(`div`,{style:{padding:`16px 20px`,borderTop:`1px solid #333`,background:`#16213e`,maxHeight:`35%`,overflow:`auto`},children:[(0,x.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:8},children:[(0,x.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:8},children:[(0,x.jsx)(`span`,{style:{width:24,height:24,borderRadius:`50%`,background:`#3498db`,display:`flex`,alignItems:`center`,justifyContent:`center`,fontSize:`12px`,fontWeight:700},children:s.stepNumber}),(0,x.jsx)(`h2`,{style:{fontSize:`14px`,margin:0},children:s.title})]}),(0,x.jsxs)(`div`,{style:{display:`flex`,gap:8},children:[(0,x.jsx)(`button`,{disabled:!d,onClick:()=>d&&c(e.steps[u-1]),style:{padding:`4px 12px`,fontSize:`11px`,borderRadius:4,border:`1px solid #444`,background:d?`#2c3e50`:`#1a1a2e`,color:d?`#fff`:`#666`,cursor:d?`pointer`:`default`},children:`← Prev`}),(0,x.jsx)(`button`,{disabled:!f,onClick:()=>f&&c(e.steps[u+1]),style:{padding:`4px 12px`,fontSize:`11px`,borderRadius:4,border:`1px solid #444`,background:f?`#2c3e50`:`#1a1a2e`,color:f?`#fff`:`#666`,cursor:f?`pointer`:`default`},children:`Next →`})]})]}),(0,x.jsxs)(`div`,{style:{fontSize:`11px`,opacity:.7,marginBottom:8},children:[(0,x.jsxs)(`span`,{style:{marginRight:16},children:[`📁 `,s.file]}),(0,x.jsxs)(`span`,{style:{marginRight:16},children:[`💡 `,s.learnsConcept]}),(0,x.jsxs)(`span`,{children:[`⏱ `,s.duration]})]}),(0,x.jsx)(`p`,{style:{fontSize:`13px`,lineHeight:1.5,opacity:.9},children:s.explanation})]}),(0,x.jsxs)(`div`,{style:{position:`fixed`,bottom:8,right:8,zIndex:1e3,background:`rgba(15,23,41,0.9)`,border:`1px solid #2a3a52`,borderRadius:12,padding:`3px 10px`,fontSize:`10px`,color:`#64748b`,fontFamily:`system-ui, sans-serif`,display:`flex`,alignItems:`center`,gap:4,backdropFilter:`blur(4px)`},children:[(0,x.jsx)(`svg`,{width:`12`,height:`12`,viewBox:`0 0 16 16`,fill:`none`,children:(0,x.jsx)(`path`,{d:`M8 1l2 5h5l-4 3 1.5 5L8 11l-4.5 3L5 9 1 6h5z`,fill:`#3b82f6`})}),(0,x.jsx)(`span`,{style:{fontWeight:600,letterSpacing:`0.5px`},children:`AI Kit`})]})]})}function Xd({data:e}){return(0,x.jsx)(od,{children:(0,x.jsx)(Yd,{data:e})})}var Zd=document.getElementById(`tour-data`),Qd=Zd?JSON.parse(Zd.textContent||`{}`):{};(0,b.createRoot)(document.getElementById(`root`)).render((0,x.jsx)(Xd,{data:Qd}));</script>
   <style rel="stylesheet" crossorigin>.react-flow{--xy-edge-stroke-default:#b1b1b7;--xy-edge-stroke-width-default:1;--xy-edge-stroke-selected-default:#555;--xy-connectionline-stroke-default:#b1b1b7;--xy-connectionline-stroke-width-default:1;--xy-attribution-background-color-default:#ffffff80;--xy-minimap-background-color-default:#fff;--xy-minimap-mask-background-color-default:#f0f0f099;--xy-minimap-mask-stroke-color-default:transparent;--xy-minimap-mask-stroke-width-default:1;--xy-minimap-node-background-color-default:#e2e2e2;--xy-minimap-node-stroke-color-default:transparent;--xy-minimap-node-stroke-width-default:2;--xy-background-color-default:transparent;--xy-background-pattern-dots-color-default:#91919a;--xy-background-pattern-lines-color-default:#eee;--xy-background-pattern-cross-color-default:#e2e2e2;background-color:var(--xy-background-color,var(--xy-background-color-default));--xy-node-color-default:inherit;--xy-node-border-default:1px solid #1a192b;--xy-node-background-color-default:#fff;--xy-node-group-background-color-default:#f0f0f040;--xy-node-boxshadow-hover-default:0 1px 4px 1px #00000014;--xy-node-boxshadow-selected-default:0 0 0 .5px #1a192b;--xy-node-border-radius-default:3px;--xy-handle-background-color-default:#1a192b;--xy-handle-border-color-default:#fff;--xy-selection-background-color-default:#0059dc14;--xy-selection-border-default:1px dotted #0059dccc;--xy-controls-button-background-color-default:#fefefe;--xy-controls-button-background-color-hover-default:#f4f4f4;--xy-controls-button-color-default:inherit;--xy-controls-button-color-hover-default:inherit;--xy-controls-button-border-color-default:#eee;--xy-controls-box-shadow-default:0 0 2px 1px #00000014;--xy-edge-label-background-color-default:#fff;--xy-edge-label-color-default:inherit;--xy-resize-background-color-default:#3367d9;direction:ltr}.react-flow.dark{--xy-edge-stroke-default:#3e3e3e;--xy-edge-stroke-width-default:1;--xy-edge-stroke-selected-default:#727272;--xy-connectionline-stroke-default:#b1b1b7;--xy-connectionline-stroke-width-default:1;--xy-attribution-background-color-default:#96969640;--xy-minimap-background-color-default:#141414;--xy-minimap-mask-background-color-default:#3c3c3c99;--xy-minimap-mask-stroke-color-default:transparent;--xy-minimap-mask-stroke-width-default:1;--xy-minimap-node-background-color-default:#2b2b2b;--xy-minimap-node-stroke-color-default:transparent;--xy-minimap-node-stroke-width-default:2;--xy-background-color-default:#141414;--xy-background-pattern-dots-color-default:#777;--xy-background-pattern-lines-color-default:#777;--xy-background-pattern-cross-color-default:#777;--xy-node-color-default:#f8f8f8;--xy-node-border-default:1px solid #3c3c3c;--xy-node-background-color-default:#1e1e1e;--xy-node-group-background-color-default:#f0f0f040;--xy-node-boxshadow-hover-default:0 1px 4px 1px #ffffff14;--xy-node-boxshadow-selected-default:0 0 0 .5px #999;--xy-handle-background-color-default:#bebebe;--xy-handle-border-color-default:#1e1e1e;--xy-selection-background-color-default:#c8c8dc14;--xy-selection-border-default:1px dotted #c8c8dccc;--xy-controls-button-background-color-default:#2b2b2b;--xy-controls-button-background-color-hover-default:#3e3e3e;--xy-controls-button-color-default:#f8f8f8;--xy-controls-button-color-hover-default:#fff;--xy-controls-button-border-color-default:#5b5b5b;--xy-controls-box-shadow-default:0 0 2px 1px #00000014;--xy-edge-label-background-color-default:#141414;--xy-edge-label-color-default:#f8f8f8}.react-flow__background{background-color:var(--xy-background-color-props,var(--xy-background-color,var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{width:100%;height:100%;position:absolute;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke,var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width,var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke,var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width,var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{pointer-events:none;position:absolute;overflow:visible}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:.5s linear infinite dashdraw}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected,var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;user-select:none}.react-flow__arrowhead polyline{stroke:var(--xy-edge-stroke,var(--xy-edge-stroke-default))}.react-flow__arrowhead polyline.arrowclosed{fill:var(--xy-edge-stroke,var(--xy-edge-stroke-default))}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:.5s linear infinite dashdraw}svg.react-flow__connectionline{z-index:1001;position:absolute;overflow:visible}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{-webkit-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default;position:absolute}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:0 0;pointer-events:none}.react-flow__nodesselection-rect{pointer-events:all;cursor:grab;position:absolute}.react-flow__handle{pointer-events:none;background-color:var(--xy-handle-background-color,var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color,var(--xy-handle-border-color-default));border-radius:100%;width:6px;min-width:5px;height:6px;min-height:5px;position:absolute}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;bottom:0;left:50%;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__pane.selection .react-flow__panel{pointer-events:none}.react-flow__panel{z-index:5;margin:15px;position:absolute}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.top.center,.react-flow__panel.bottom.center{left:50%;transform:translate(-15px)translate(-50%)}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.left.center,.react-flow__panel.right.center{top:50%;transform:translateY(-15px)translateY(-50%)}.react-flow__attribution{background:var(--xy-attribution-background-color,var(--xy-attribution-background-color-default));margin:0;padding:2px 3px;font-size:10px}.react-flow__attribution a{color:#999;text-decoration:none}@keyframes dashdraw{0%{stroke-dashoffset:10px}}.react-flow__edgelabel-renderer{pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;top:0;left:0}.react-flow__viewport-portal{-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;top:0;left:0}.react-flow__minimap{background:var(--xy-minimap-background-color-props,var(--xy-minimap-background-color,var(--xy-minimap-background-color-default)))}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var(--xy-minimap-mask-background-color-props,var(--xy-minimap-mask-background-color,var(--xy-minimap-mask-background-color-default)));stroke:var(--xy-minimap-mask-stroke-color-props,var(--xy-minimap-mask-stroke-color,var(--xy-minimap-mask-stroke-color-default)));stroke-width:var(--xy-minimap-mask-stroke-width-props,var(--xy-minimap-mask-stroke-width,var(--xy-minimap-mask-stroke-width-default)))}.react-flow__minimap-node{fill:var(--xy-minimap-node-background-color-props,var(--xy-minimap-node-background-color,var(--xy-minimap-node-background-color-default)));stroke:var(--xy-minimap-node-stroke-color-props,var(--xy-minimap-node-stroke-color,var(--xy-minimap-node-stroke-color-default)));stroke-width:var(--xy-minimap-node-stroke-width-props,var(--xy-minimap-node-stroke-width,var(--xy-minimap-node-stroke-width-default)))}.react-flow__background-pattern.dots{fill:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-dots-color-default)))}.react-flow__background-pattern.lines{stroke:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-lines-color-default)))}.react-flow__background-pattern.cross{stroke:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-cross-color-default)))}.react-flow__controls{box-shadow:var(--xy-controls-box-shadow,var(--xy-controls-box-shadow-default));flex-direction:column;display:flex}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{background:var(--xy-controls-button-background-color,var(--xy-controls-button-background-color-default));border:none;border-bottom:1px solid var(--xy-controls-button-border-color-props,var(--xy-controls-button-border-color,var(--xy-controls-button-border-color-default)));width:26px;height:26px;color:var(--xy-controls-button-color-props,var(--xy-controls-button-color,var(--xy-controls-button-color-default)));cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;padding:4px;display:flex}.react-flow__controls-button svg{fill:currentColor;width:100%;max-width:12px;max-height:12px}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{border-radius:var(--xy-node-border-radius,var(--xy-node-border-radius-default));width:150px;color:var(--xy-node-color,var(--xy-node-color-default));text-align:center;border:var(--xy-node-border,var(--xy-node-border-default));background-color:var(--xy-node-background-color,var(--xy-node-background-color-default));padding:10px;font-size:12px}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover,var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected,var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color,var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color,var(--xy-selection-background-color-default));border:var(--xy-selection-border,var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var(--xy-controls-button-background-color-hover-props,var(--xy-controls-button-background-color-hover,var(--xy-controls-button-background-color-hover-default)));color:var(--xy-controls-button-color-hover-props,var(--xy-controls-button-color-hover,var(--xy-controls-button-color-hover-default)))}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__controls.horizontal .react-flow__controls-button{border-bottom:none;border-right:1px solid var(--xy-controls-button-border-color-props,var(--xy-controls-button-border-color,var(--xy-controls-button-border-color-default)))}.react-flow__controls.horizontal .react-flow__controls-button:last-child{border-right:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{background-color:var(--xy-resize-background-color,var(--xy-resize-background-color-default));border:1px solid #fff;border-radius:1px;width:5px;height:5px;translate:-50% -50%}.react-flow__resize-control.handle.left{top:50%;left:0}.react-flow__resize-control.handle.right{top:50%;left:100%}.react-flow__resize-control.handle.top{top:0;left:50%}.react-flow__resize-control.handle.bottom{top:100%;left:50%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color,var(--xy-resize-background-color-default));border-style:solid;border-width:0}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;height:100%;top:0;transform:translate(-50%)}.react-flow__resize-control.line.left{border-left-width:1px;left:0}.react-flow__resize-control.line.right{border-right-width:1px;left:100%}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{width:100%;height:1px;left:0;transform:translateY(-50%)}.react-flow__resize-control.line.top{border-top-width:1px;top:0}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color,var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color,var(--xy-edge-label-color-default))}
 /*$vite$:1*/</style>
 </head>

package/scaffold/general/viewers/src/c4/C4Viewer.tsx

@@ -7,6 +7,7 @@ import {
   MarkerType,
   useNodesState,
   useEdgesState,
+  useReactFlow,
   type Node,
   type Edge,
   type NodeProps,
@@ -30,7 +31,7 @@ interface C4Edge {
   source: string;
   target: string;
   label?: string;
-  style?: 'sync' | 'async';
+  style?: 'sync' | 'async' | 'dashed' | 'dotted' | 'solid';
 }
 
 interface C4Data {
@@ -53,7 +54,32 @@ const TYPE_COLORS: Record<string, { bg: string; border: string; text: string }>
   boundary: { bg: 'transparent', border: '#666666', text: '#cccccc' },
 };
 
-// Custom C4 Node Component
+// SVG icons per C4 type — clean, recognizable silhouettes
+function TypeIcon({ nodeType, color }: { nodeType: string; color: string }) {
+  const s = { width: 16, height: 16, flexShrink: 0 } as const;
+  switch (nodeType) {
+    case 'person':
+      return <svg {...s} viewBox="0 0 16 16" fill={color}><circle cx="8" cy="4" r="3"/><path d="M3 14a5 5 0 0 1 10 0"/></svg>;
+    case 'database':
+      return <svg {...s} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.5"><ellipse cx="8" cy="3.5" rx="5.5" ry="2.5"/><path d="M2.5 3.5v9c0 1.38 2.46 2.5 5.5 2.5s5.5-1.12 5.5-2.5v-9"/><path d="M2.5 8c0 1.38 2.46 2.5 5.5 2.5s5.5-1.12 5.5-2.5" opacity="0.5"/></svg>;
+    case 'queue':
+      return <svg {...s} viewBox="0 0 16 16" fill={color}><rect x="1" y="5" width="3" height="6" rx="0.5" opacity="0.5"/><rect x="5.5" y="5" width="3" height="6" rx="0.5" opacity="0.7"/><rect x="10" y="5" width="3" height="6" rx="0.5"/><path d="M14 8l2-1.5v3L14 8z"/></svg>;
+    case 'external':
+      return <svg {...s} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.5"><path d="M4 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" strokeDasharray="3 2"/><path d="M6 8h4M8 6v4"/></svg>;
+    case 'component':
+      return <svg {...s} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.3"><rect x="3" y="2" width="10" height="12" rx="1.5"/><rect x="1" y="5" width="4" height="2" rx="0.5"/><rect x="1" y="9" width="4" height="2" rx="0.5"/></svg>;
+    case 'container':
+      return <svg {...s} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.5"><rect x="2" y="3" width="12" height="10" rx="2"/><path d="M2 6h12"/></svg>;
+    case 'system':
+      return <svg {...s} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.5"><rect x="1.5" y="1.5" width="13" height="13" rx="2.5"/><circle cx="8" cy="8" r="3"/></svg>;
+    case 'boundary':
+      return <svg {...s} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.5" strokeDasharray="2 2"><rect x="2" y="2" width="12" height="12" rx="2"/></svg>;
+    default:
+      return <svg {...s} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.5"><rect x="2" y="2" width="12" height="12" rx="2"/></svg>;
+  }
+}
+
+// Custom C4 Node Component — clean card style matching Tour viewer
 function C4NodeComponent({ data }: NodeProps) {
   const nodeData = data as { label: string; nodeType: string; technology?: string; description?: string };
   const colors = TYPE_COLORS[nodeData.nodeType] || TYPE_COLORS.system;
@@ -62,24 +88,39 @@ function C4NodeComponent({ data }: NodeProps) {
   return (
     <div
       style={{
-        background: colors.bg,
+        background: isBoundary ? 'transparent' : '#16213e',
         border: `2px ${isBoundary ? 'dashed' : 'solid'} ${colors.border}`,
-        borderRadius: nodeData.nodeType === 'person' ? '50% 50% 8px 8px' : nodeData.nodeType === 'database' ? '4px 4px 50% 50%' : '8px',
-        padding: '12px 16px',
-        minWidth: 160,
-        maxWidth: 240,
-        textAlign: 'center',
-        color: colors.text,
+        borderRadius: 8,
+        padding: '10px 14px',
+        width: 200,
         fontSize: '12px',
+        color: '#e8ecf0',
+        transition: 'all 0.2s',
       }}
     >
       <Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
-      <div style={{ fontWeight: 700, fontSize: '13px', marginBottom: 4 }}>{nodeData.label}</div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+        <span style={{
+          width: 26, height: 26, borderRadius: '50%',
+          background: colors.bg,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          flexShrink: 0,
+        }}>
+          <TypeIcon nodeType={nodeData.nodeType} color={colors.text} />
+        </span>
+        <span style={{ fontWeight: 600, fontSize: '13px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {nodeData.label}
+        </span>
+      </div>
       {nodeData.technology && (
-        <div style={{ opacity: 0.8, fontSize: '10px', marginBottom: 2 }}>[{nodeData.technology}]</div>
+        <div style={{ fontSize: '10px', opacity: 0.7, marginBottom: 2, paddingLeft: 34 }}>
+          [{nodeData.technology}]
+        </div>
       )}
       {nodeData.description && (
-        <div style={{ opacity: 0.7, fontSize: '10px', marginTop: 4 }}>{nodeData.description}</div>
+        <div style={{ fontSize: '10px', opacity: 0.6, lineHeight: '1.3', marginTop: 4, paddingLeft: 34 }}>
+          {nodeData.description}
+        </div>
       )}
       <Handle type="source" position={Position.Bottom} style={{ opacity: 0 }} />
     </div>
@@ -108,7 +149,7 @@ async function layoutNodes(c4Nodes: C4Node[], c4Edges: C4Edge[], layout?: C4Data
     children: c4Nodes.map((n) => ({
       id: n.id,
       width: 200,
-      height: n.description ? 100 : 70,
+      height: n.description ? 90 : 60,
     })),
     edges: c4Edges.map((e, i) => ({
       id: `e${i}`,
@@ -125,6 +166,7 @@ async function layoutNodes(c4Nodes: C4Node[], c4Edges: C4Edge[], layout?: C4Data
 function C4Flow({ data }: { data: C4Data }) {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+  const { fitView } = useReactFlow();
 
   useEffect(() => {
     if (!data.nodes?.length) return;
@@ -146,22 +188,31 @@ function C4Flow({ data }: { data: C4Data }) {
         target: e.target,
         label: e.label,
         animated: e.style === 'async',
-        markerEnd: { type: MarkerType.ArrowClosed },
-        style: { stroke: '#888' },
-        labelStyle: { fill: '#ccc', fontSize: 11 },
+        markerEnd: { type: MarkerType.ArrowClosed, color: '#6b7a90' },
+        style: {
+          stroke: '#6b7a90',
+          strokeWidth: 2,
+          strokeDasharray: e.style === 'dashed' ? '6 3' : e.style === 'dotted' ? '2 3' : undefined,
+        },
+        labelStyle: { fill: '#a0b0c0', fontSize: 11, fontWeight: 500 },
+        labelBgStyle: { fill: '#0f1729', fillOpacity: 0.85 },
+        labelBgPadding: [6, 4] as [number, number],
+        labelBgBorderRadius: 4,
       }));
 
       setNodes(flowNodes);
       setEdges(flowEdges);
+      // Delay fitView to let React render nodes before fitting
+      setTimeout(() => fitView({ padding: 0.12 }), 50);
     });
-  }, [data]);
+  }, [data, fitView]);
 
   return (
     <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
       {data.title && (
-        <div style={{ padding: '12px 20px', borderBottom: '1px solid #333', background: '#16213e' }}>
-          <h1 style={{ fontSize: '18px', margin: 0 }}>{data.title}</h1>
-          {data.description && <p style={{ fontSize: '12px', opacity: 0.7, margin: '4px 0 0' }}>{data.description}</p>}
+        <div style={{ padding: '12px 20px', borderBottom: '1px solid #2a3a52', background: '#0f1729' }}>
+          <h1 style={{ fontSize: '18px', margin: 0, color: '#e8ecf0' }}>{data.title}</h1>
+          {data.description && <p style={{ fontSize: '12px', opacity: 0.7, margin: '4px 0 0', color: '#a0b0c0' }}>{data.description}</p>}
         </div>
       )}
       <div style={{ flex: 1 }}>
@@ -171,12 +222,11 @@ function C4Flow({ data }: { data: C4Data }) {
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           nodeTypes={nodeTypes}
-          fitView
           minZoom={0.2}
           maxZoom={2}
           proOptions={{ hideAttribution: true }}
         >
-          <Background color="#333" gap={20} />
+          <Background color="#1e2d45" gap={24} size={1.5} />
           <Controls />
           <MiniMap
             nodeColor={(n) => TYPE_COLORS[(n.data as any)?.nodeType]?.bg || '#666'}
@@ -185,14 +235,21 @@ function C4Flow({ data }: { data: C4Data }) {
         </ReactFlow>
       </div>
       {/* Legend */}
-      <div style={{ padding: '8px 20px', borderTop: '1px solid #333', background: '#16213e', display: 'flex', gap: 16, flexWrap: 'wrap', fontSize: '11px' }}>
+      <div style={{ padding: '8px 20px', borderTop: '1px solid #2a3a52', background: '#0f1729', display: 'flex', gap: 16, flexWrap: 'wrap', fontSize: '11px', color: '#a0b0c0' }}>
         {Object.entries(TYPE_COLORS).filter(([k]) => k !== 'boundary').map(([type, colors]) => (
           <span key={type} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-            <span style={{ width: 12, height: 12, borderRadius: 3, background: colors.bg, border: `1px solid ${colors.border}` }} />
+            <span style={{ width: 18, height: 18, borderRadius: '50%', background: colors.bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+              <TypeIcon nodeType={type} color={colors.text} />
+            </span>
             {type}
           </span>
         ))}
       </div>
+      {/* AI Kit Badge */}
+      <div style={{ position: 'fixed', bottom: 8, right: 8, zIndex: 1000, background: 'rgba(15,23,41,0.9)', border: '1px solid #2a3a52', borderRadius: 12, padding: '3px 10px', fontSize: '10px', color: '#64748b', fontFamily: 'system-ui, sans-serif', display: 'flex', alignItems: 'center', gap: 4, backdropFilter: 'blur(4px)' }}>
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M8 1l2 5h5l-4 3 1.5 5L8 11l-4.5 3L5 9 1 6h5z" fill="#3b82f6"/></svg>
+        <span style={{ fontWeight: 600, letterSpacing: '0.5px' }}>AI Kit</span>
+      </div>
     </div>
   );
 }

package/scaffold/general/viewers/src/c4/main.tsx

@@ -2,6 +2,13 @@ import { createRoot } from 'react-dom/client';
 import { C4Viewer } from './C4Viewer';
 
 const dataEl = document.getElementById('diagram-data');
-const data = dataEl ? JSON.parse(dataEl.textContent || '{}') : {};
+const raw = dataEl ? JSON.parse(dataEl.textContent || '{}') : {};
+
+// Normalize legacy field names: elements→nodes, relationships→edges
+const data = {
+  ...raw,
+  nodes: raw.nodes || raw.elements || [],
+  edges: raw.edges || raw.relationships || [],
+};
 
 createRoot(document.getElementById('root')!).render(<C4Viewer data={data} />);

package/scaffold/general/viewers/src/tour/TourViewer.tsx

@@ -98,6 +98,36 @@ function computeLayout(steps: TourStep[], deps: TourDependency[]) {
   return positions;
 }
 
+// File type icon based on extension
+function FileIcon({ file }: { file: string }) {
+  const ext = file.split('.').pop()?.toLowerCase() || '';
+  const s = { width: 14, height: 14, flexShrink: 0, opacity: 0.7 } as const;
+  switch (ext) {
+    case 'ts': case 'tsx':
+      return <svg {...s} viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="2" fill="#3178c6"/><text x="7" y="10" textAnchor="middle" fontSize="7" fill="#fff" fontWeight="700">TS</text></svg>;
+    case 'js': case 'jsx': case 'mjs':
+      return <svg {...s} viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="2" fill="#f7df1e"/><text x="7" y="10" textAnchor="middle" fontSize="7" fill="#000" fontWeight="700">JS</text></svg>;
+    case 'json':
+      return <svg {...s} viewBox="0 0 14 14" fill="none" stroke="#a0a0a0" strokeWidth="1.2"><path d="M4 2c-1.5 0-2 1-2 2v2c0 1-0.5 1-1 1 0.5 0 1 0 1 1v2c0 1 0.5 2 2 2"/><path d="M10 2c1.5 0 2 1 2 2v2c0 1 0.5 1 1 1-0.5 0-1 0-1 1v2c0 1-0.5 2-2 2"/></svg>;
+    case 'css': case 'scss': case 'less':
+      return <svg {...s} viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="2" fill="#264de4"/><text x="7" y="10" textAnchor="middle" fontSize="6" fill="#fff" fontWeight="700">CSS</text></svg>;
+    case 'html':
+      return <svg {...s} viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="2" fill="#e34c26"/><text x="7" y="10" textAnchor="middle" fontSize="6" fill="#fff" fontWeight="700">H</text></svg>;
+    case 'py':
+      return <svg {...s} viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="2" fill="#3776ab"/><text x="7" y="10" textAnchor="middle" fontSize="7" fill="#ffd43b" fontWeight="700">Py</text></svg>;
+    case 'go':
+      return <svg {...s} viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="2" fill="#00add8"/><text x="7" y="10" textAnchor="middle" fontSize="7" fill="#fff" fontWeight="700">Go</text></svg>;
+    case 'rs':
+      return <svg {...s} viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="2" fill="#ce412b"/><text x="7" y="10" textAnchor="middle" fontSize="7" fill="#fff" fontWeight="700">Rs</text></svg>;
+    case 'md': case 'mdx':
+      return <svg {...s} viewBox="0 0 14 14" fill="none" stroke="#a0a0a0" strokeWidth="1.3"><rect x="1" y="3" width="12" height="8" rx="1"/><path d="M3 9V5l2 2 2-2v4M10 7.5l1.5-1.5M10 7.5l-1.5-1.5M10 7.5V5"/></svg>;
+    case 'yaml': case 'yml':
+      return <svg {...s} viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="2" fill="#cb171e"/><text x="7" y="10" textAnchor="middle" fontSize="5" fill="#fff" fontWeight="700">YML</text></svg>;
+    default:
+      return <svg {...s} viewBox="0 0 14 14" fill="none" stroke="#6b7a90" strokeWidth="1.3"><path d="M4 1h4l3 3v9H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/><path d="M8 1v3h3"/></svg>;
+  }
+}
+
 // Step Node
 function StepNode({ data }: NodeProps) {
   const d = data as { step: TourStep; active: boolean; onClick: () => void };
@@ -128,7 +158,8 @@ function StepNode({ data }: NodeProps) {
           {d.step.title}
         </span>
       </div>
-      <div style={{ fontSize: '10px', opacity: 0.7, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+      <div style={{ fontSize: '10px', opacity: 0.7, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 4, paddingLeft: 30 }}>
+        <FileIcon file={d.step.file} />
         {d.step.file}
       </div>
       <Handle type="source" position={Position.Bottom} style={{ opacity: 0 }} />
@@ -142,7 +173,7 @@ const nodeTypes = { step: StepNode };
 function TourFlow({ data }: { data: TourData }) {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
-  const [activeStep, setActiveStep] = useState<TourStep | null>(null);
+  const [activeStep, setActiveStep] = useState<TourStep | null>(data.steps?.[0] || null);
 
   const buildGraph = useCallback((active: string | null) => {
     if (!data.steps?.length) return;
@@ -257,6 +288,11 @@ function TourFlow({ data }: { data: TourData }) {
           <p style={{ fontSize: '13px', lineHeight: 1.5, opacity: 0.9 }}>{activeStep.explanation}</p>
         </div>
       )}
+      {/* AI Kit Badge */}
+      <div style={{ position: 'fixed', bottom: 8, right: 8, zIndex: 1000, background: 'rgba(15,23,41,0.9)', border: '1px solid #2a3a52', borderRadius: 12, padding: '3px 10px', fontSize: '10px', color: '#64748b', fontFamily: 'system-ui, sans-serif', display: 'flex', alignItems: 'center', gap: 4, backdropFilter: 'blur(4px)' }}>
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M8 1l2 5h5l-4 3 1.5 5L8 11l-4.5 3L5 9 1 6h5z" fill="#3b82f6"/></svg>
+        <span style={{ fontWeight: 600, letterSpacing: '0.5px' }}>AI Kit</span>
+      </div>
     </div>
   );
 }