sweet-diagram
Version:
A modern and intuitive diagram editor component for React applications with advanced auto-connect features, Sankey diagrams, Stack functionality, vertical text support, animation effects, and comprehensive component library
1 lines • 152 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("react"),n=require("lucide-react"),r=e.createContext(),o=()=>{const t=e.useContext(r);if(!t)throw new Error("useDiagram must be used within a DiagramProvider");return t},a=e.createContext(null),s=()=>e.useContext(a);exports.Arrow=({direction:e="right",length:n=100,strokeWidth:r=2,startPoint:o={x:0,y:0},endPoint:a=null,className:s="text-blue-600 hover:text-blue-700 transition-colors duration-200",arrowSize:i=8,showStartArrow:l=!1,showEndArrow:c=!0,onClick:u=null})=>{const d={x:"number"!=typeof o?.x||isNaN(o.x)?0:o.x,y:"number"!=typeof o?.y||isNaN(o.y)?0:o.y},x="number"!=typeof n||isNaN(n)?100:n,f="number"!=typeof i||isNaN(i)?8:i,h="number"!=typeof r||isNaN(r)?2:r,p=(()=>{if(a&&"number"==typeof a.x&&"number"==typeof a.y&&!isNaN(a.x)&&!isNaN(a.y))return a;const t={right:{x:d.x+x,y:d.y},left:{x:d.x-x,y:d.y},up:{x:d.x,y:d.y-x},down:{x:d.x,y:d.y+x},"up-right":{x:d.x+.7*x,y:d.y-.7*x},"down-right":{x:d.x+.7*x,y:d.y+.7*x},"up-left":{x:d.x-.7*x,y:d.y-.7*x},"down-left":{x:d.x-.7*x,y:d.y+.7*x}};return t[e]||t.right})(),y=c?(()=>{const t=Math.atan2(p.y-d.y,p.x-d.x);return{arrowHead1:{x:p.x-f*Math.cos(t-Math.PI/6),y:p.y-f*Math.sin(t-Math.PI/6)},arrowHead2:{x:p.x-f*Math.cos(t+Math.PI/6),y:p.y-f*Math.sin(t+Math.PI/6)}}})():null,b=l?(()=>{const t=Math.atan2(d.y-p.y,d.x-p.x);return{arrowHead1:{x:d.x-f*Math.cos(t-Math.PI/6),y:d.y-f*Math.sin(t-Math.PI/6)},arrowHead2:{x:d.x-f*Math.cos(t+Math.PI/6),y:d.y-f*Math.sin(t+Math.PI/6)}}})():null,m=t=>{u&&u(t,{startPoint:d,endPoint:p,arrowSize:f})};return t.jsxs("svg",{className:`absolute ${u?"cursor-pointer":"pointer-events-none"} ${s}`,style:{left:Math.min(d.x,p.x)-f,top:Math.min(d.y,p.y)-f,width:Math.abs(p.x-d.x)+2*f,height:Math.abs(p.y-d.y)+2*f},onClick:u?m:void 0,onKeyDown:u?t=>{"Enter"!==t.key&&" "!==t.key||m(t)}:void 0,tabIndex:u?0:void 0,role:u?"button":void 0,"aria-label":u?"화살표":void 0,children:[t.jsx("line",{x1:d.x-Math.min(d.x,p.x)+f,y1:d.y-Math.min(d.y,p.y)+f,x2:p.x-Math.min(d.x,p.x)+f,y2:p.y-Math.min(d.y,p.y)+f,strokeWidth:h,className:"stroke-current",strokeLinecap:"round"}),c&&y&&t.jsx("polygon",{points:`${p.x-Math.min(d.x,p.x)+f},${p.y-Math.min(d.y,p.y)+f} ${y.arrowHead1.x-Math.min(d.x,p.x)+f},${y.arrowHead1.y-Math.min(d.y,p.y)+f} ${y.arrowHead2.x-Math.min(d.x,p.x)+f},${y.arrowHead2.y-Math.min(d.y,p.y)+f}`,className:"fill-current"}),l&&b&&t.jsx("polygon",{points:`${d.x-Math.min(d.x,p.x)+f},${d.y-Math.min(d.y,p.y)+f} ${b.arrowHead1.x-Math.min(d.x,p.x)+f},${b.arrowHead1.y-Math.min(d.y,p.y)+f} ${b.arrowHead2.x-Math.min(d.x,p.x)+f},${b.arrowHead2.y-Math.min(d.y,p.y)+f}`,className:"fill-current"})]})},exports.Box=({id:n="",text:r="",width:a=120,height:i=60,x:l=0,y:c=0,textDirection:u="horizontal",verticalDirection:d="lr",className:x="bg-[#0066ff] text-white border-blue-800 border-2 rounded-lg text-sm",containerClassName:f="",textClassName:h="",borderClassName:p="",backgroundClassName:y="",shadowClassName:b="",opacity:m=1,zIndex:g=10,priority:w=null,maintainPriority:v=!1,onClick:A=null,enableAutoConnect:P=!0,is3D:N=!1,threeDColor:z="#0044aa",threeDDepth:j=8,threeDDirection:M="right-down"})=>{const[k,O]=e.useState({x:l,y:c}),W=e.useRef({x:l,y:c}),H=e.useRef(!1),C=e.useRef(!1);let V,X,B,L,S,D,T,I,q;try{const t=o();V=t.registerBox,X=t.unregisterBox,B=t.startAutoConnect,L=t.isAutoConnectMode,S=t.autoConnectStartBox,D=t.boxes,T=t.getBoxZIndex,I=t.bringBoxToFront,q=t.setBoxZIndex}catch{V=null,X=null,B=null,L=!1,S=null,D=null,T=null,I=null,q=null}const E=s();e.useEffect(()=>{n&&q&&!C.current&&(q(n,null!==w?w:g),C.current=!0)},[n,w,g,q]),e.useEffect(()=>{n&&q&&C.current&&q(n,null!==w?w:g)},[w,g,n,q]),e.useEffect(()=>{(l!==W.current.x||c!==W.current.y)&&(O({x:l,y:c}),W.current={x:l,y:c},n&&V)&&V(n,{id:n,x:l,y:c,width:a,height:i})},[l,c,n,V,a,i]),e.useEffect(()=>{if(D&&n&&!H.current){const t=D.get(n);!t||t.x===k.x&&t.y===k.y||(H.current=!0,O({x:t.x,y:t.y}),W.current={x:t.x,y:t.y},setTimeout(()=>{H.current=!1},0))}},[D,n]),e.useEffect(()=>{n&&(V&&V(n,{id:n,x:k.x,y:k.y,width:a,height:i}),E?.registerBox&&E.registerBox({id:n,x:k.x,y:k.y,width:a,height:i}))},[n]),e.useEffect(()=>()=>{n&&X&&X(n),n&&E?.unregisterBox&&E.unregisterBox(n)},[n]);const Y=t=>{if(n&&I&&!v&&I(n),A&&A(t,{id:n,x:k.x,y:k.y,width:a,height:i,groupId:E?.groupId,currentZIndex:T?T(n):null!==w?w:g,priority:w,maintainPriority:v}),P&&B&&t.shiftKey&&n){t.stopPropagation();const e=t.currentTarget,r=(e.closest(".auto-connect-manager")||e.parentElement).getBoundingClientRect();B(n,{x:t.clientX-r.left,y:t.clientY-r.top})}},Z={top:{x:k.x+a/2,y:k.y},right:{x:k.x+a,y:k.y+i/2},bottom:{x:k.x+a/2,y:k.y+i},left:{x:k.x,y:k.y+i/2}},{additionalClasses:G,additionalStyles:F}=(()=>{let t="",e={};return L&&(S?.boxId||S)===n?(t=" ring-4 ring-purple-400 ring-opacity-75 shadow-lg shadow-purple-500/50",e.animation="autoConnectPulse 2s ease-in-out infinite"):L&&(t=" ring-2 ring-purple-200 ring-opacity-50"),N&&(t+=" shadow-xl"),E?.groupId&&(t+=" group-member",E?.isDragging&&(t+=" transition-transform duration-75",e.pointerEvents="none")),{additionalClasses:t,additionalStyles:e}})(),{mainBoxOffset:Q}=(()=>{if(!N)return{threeDElements:null,mainBoxOffset:{}};const t=M.includes("right")?j:-j,e=M.includes("down")?j:-j;return{threeDElements:null,mainBoxOffset:{position:"relative",zIndex:1,boxShadow:`\n ${t}px ${e}px 0px ${z},\n ${t+1}px ${e+1}px 0px rgba(0,0,0,${.2*m}),\n ${t+3}px ${e+3}px 8px rgba(0,0,0,${.15*m})\n `,border:`2px solid rgba(0,0,0,${.1*m})`,opacity:m}}})(),R=T?T(n):null!==w?w:g;return t.jsxs("div",{className:`absolute ${x}${G} ${f} ${b}`,style:{left:`${k.x}px`,top:`${k.y}px`,width:`${a}px`,height:`${i}px`,zIndex:R,transform:"translate3d(0,0,0)",...F},"data-box-id":n,"data-group-id":E?.groupId,onClick:Y,onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||Y(t)},tabIndex:"0",role:"button","aria-label":`Box component: ${r} ${n?`(ID: ${n})`:""}${E?.groupId?` (그룹: ${E.groupId})`:""}${L?" (자동 연결 모드)":""}`,children:[t.jsx("div",{className:`flex items-center justify-center w-full h-full cursor-pointer select-none transition-all duration-200 hover:shadow-lg hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 relative z-10 rounded-lg ${y} ${p}`,style:Q,children:t.jsx("span",{className:`font-medium px-2 leading-tight ${h}`,style:"vertical"===u?{writingMode:`vertical-${d}`,textOrientation:"mixed",textAlign:"center"}:{textAlign:"center"},children:r})}),Object.entries(Z).map(([e,r])=>t.jsx("div",{className:"absolute w-2 h-2 bg-[#0066ff] rounded-full opacity-0 hover:opacity-100 transition-all duration-200 cursor-crosshair hover:scale-150 hover:bg-[#0066ff] z-20",style:{left:r.x-k.x-4+"px",top:r.y-k.y-4+"px"},"data-connection-point":e,"data-box-id":n,"data-x":r.x,"data-y":r.y,title:`${n?`${n} - `:""}${e} connection point`},e)),L&&(S?.boxId||S)===n&&t.jsx("div",{className:"absolute -top-8 left-1/2 transform -translate-x-1/2 bg-purple-600 text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg z-30",children:"시작점"})]})},exports.CircularSegment=({id:e="",centerX:n=150,centerY:r=150,radius:o=100,startAngle:a=0,endAngle:s=60,title:i="",subtitle:l="",icon:c="",color:u="#0066ff",darkColor:d="#0044aa",textColor:x="white",opacity:f=1,onClick:h=null,className:p="",segmentClassName:y="",shadowClassName:b="",titleClassName:m="",subtitleClassName:g="",iconClassName:w=""})=>{const v=a%360*Math.PI/180,A=s%360*Math.PI/180,P=s-a>180?1:0,N=n+o*Math.cos(v),z=r+o*Math.sin(v),j=n+o*Math.cos(A),M=r+o*Math.sin(A),k=.45*o,O=n+k*Math.cos(v),W=r+k*Math.sin(v),H=n+k*Math.cos(A),C=r+k*Math.sin(A),V=[`M ${N} ${z}`,`A ${o} ${o} 0 ${P} 1 ${j} ${M}`,`L ${H} ${C}`,`A ${k} ${k} 0 ${P} 0 ${O} ${W}`,"Z"].join(" "),X=(a+s)/2*Math.PI/180,B=(o+k)/2,L=n+B*Math.cos(X),S=r+B*Math.sin(X),D=[`M ${N+4} ${z+4}`,`A ${o} ${o} 0 ${P} 1 ${j+4} ${M+4}`,`L ${H+4} ${C+4}`,`A ${k} ${k} 0 ${P} 0 ${O+4} ${W+4}`,"Z"].join(" ");return t.jsxs("g",{className:`cursor-pointer transition-all duration-300 hover:scale-105 ${p}`,onClick:t=>{h&&h(t,{id:e,title:i,subtitle:l})},"data-segment-id":e,children:[t.jsx("path",{d:D,fill:d,opacity:Math.min(.4,.6*f),className:b}),t.jsx("path",{d:V,fill:u,stroke:"white",strokeWidth:"2",opacity:f,className:`hover:brightness-110 transition-all duration-300 ${y}`}),c&&t.jsx("text",{x:L,y:S-10,textAnchor:"middle",fill:x,fontSize:"16",className:`pointer-events-none ${w}`,children:c}),i&&t.jsx("text",{x:L,y:S+5,textAnchor:"middle",fill:x,fontSize:"10",fontWeight:"bold",className:`pointer-events-none uppercase tracking-wide ${m}`,children:i}),l&&t.jsx("text",{x:L,y:S+16,textAnchor:"middle",fill:x,fontSize:"7",className:`pointer-events-none ${g}`,children:l})]})},exports.Connector=({startPoint:e=null,endPoint:n=null,fromBox:r=null,toBox:a=null,fromCustomPoint:s=null,toCustomPoint:i=null,fromBoxCustom:l=null,toBoxCustom:c=null,connectionType:u="straight",strokeWidth:d=2,animated:x=!1,animationType:f="dash",animationSpeed:h=2,className:p="",arrowSize:y=8,arrowDirection:b="forward",arrowColor:m="current",arrowShape:g="triangle",showArrow:w=null,showStartArrow:v=null,bendPoints:A,cornerRadius:P=0,orthogonalDirection:N="auto",stepOffset:z=50,junctionPoints:j=null})=>{let M=null;try{const t=o();M=t.getBox}catch{M=null}const k=Array.isArray(A)?A:void 0,O=(()=>{if(null!==w||null!==v){const t=null===w||w,e=null!==v&&v;return t&&e?"both":t&&!e?"forward":!t&&e?"backward":"none"}return b})(),W="none"!==O&&("forward"===O||"both"===O),H="none"!==O&&("backward"===O||"both"===O),C=()=>"current"===m?"fill-current":{red:"fill-red-500",blue:"fill-blue-500",green:"fill-green-500",yellow:"fill-yellow-500",purple:"fill-purple-500",pink:"fill-pink-500",indigo:"fill-indigo-500",gray:"fill-gray-500",black:"fill-black",white:"fill-white"}[m]||`fill-${m}`||"fill-current",V=(t,e,n,r,o,a,s)=>{switch(g){case"triangle":default:return`${t},${e} ${n},${r} ${o},${a}`;case"diamond":{const o=Math.atan2(r-e,n-t),a=t-.6*s*Math.cos(o),i=e-.6*s*Math.sin(o),l=t+.6*s*Math.cos(o),c=e+.6*s*Math.sin(o);return`${a},${i} ${t+.4*s*Math.cos(o+Math.PI/2)},${e+.4*s*Math.sin(o+Math.PI/2)} ${l},${c} ${t+.4*s*Math.cos(o-Math.PI/2)},${e+.4*s*Math.sin(o-Math.PI/2)}`}case"circle":return null;case"square":{const n=.8*s/2;return`${t-n},${e-n} ${t+n},${e-n} ${t+n},${e+n} ${t-n},${e+n}`}}},X=(e,n,r,o)=>"circle"!==g?null:t.jsx("circle",{cx:e-r,cy:n-o,r:.6*q,className:C()}),B=(t,e,n={x:0,y:0})=>{if(!t||"number"!=typeof t.x||"number"!=typeof t.y)return null;const{x:r,y:o,width:a,height:s}=t;let i={x:0,y:0};switch(e){case"top":i={x:r+a/2,y:o};break;case"right":i={x:r+a,y:o+s/2};break;case"bottom":i={x:r+a/2,y:o+s};break;case"left":i={x:r,y:o+s/2};break;default:i={x:r+a/2,y:o+s/2}}return{x:i.x+(n?.x||0),y:i.y+(n?.y||0)}},L=t=>{if(!M)return null;const e=M(t.id);if(!e)return null;const{x:n,y:r,width:o,height:a}=e,{customPoint:s}=t;return{x:n+o*Math.max(0,Math.min(1,s.x)),y:r+a*Math.max(0,Math.min(1,s.y))}},{actualStartPoint:S,actualEndPoint:D}=(()=>{let t=e,o=n;if(s&&i)t=s,o=i;else if(l&&c&&M){const e=L(l),n=L(c);e&&n&&(t=e,o=n)}else if((r||l)&&(a||c||s||i)){if(l&&M)t=L(l);else if(r&&r.id&&M){const e=M(r.id);e&&(t=B(e,r.position,r.offset))}else s&&(t=s);if(c&&M)o=L(c);else if(a&&a.id&&M){const t=M(a.id);t&&(o=B(t,a.position,a.offset))}else i&&(o=i)}else if(r&&a&&r.id&&a.id&&M){const e=M(r.id),n=M(a.id);if(e&&n){const s=B(e,r.position,r.offset),i=B(n,a.position,a.offset);s&&i&&(t=s,o=i)}else k&&k.length>=2&&(t=k[0],o=k[k.length-1])}return{actualStartPoint:t,actualEndPoint:o}})(),T={x:S?.x??100,y:S?.y??100},I={x:D?.x??300,y:D?.y??200},q="number"!=typeof y||isNaN(y)?8:y,E="number"!=typeof d||isNaN(d)?2:d,Y=(()=>{if(!j||!Array.isArray(j))return[];const{x:t,y:e}=T,{x:n,y:r}=I;return j.map(o=>{const{id:a,position:s,positionType:i="absolute",showJunction:l=!0,junctionSize:c=4,junctionShape:u="circle",branches:x=[]}=o;let f;if("relative"===i){const o="number"==typeof s?s:.5;f={x:t+(n-t)*o,y:e+(r-e)*o}}else f={x:s?.x||t,y:s?.y||e};const h=x.map(t=>{const{id:e,to:n,arrowDirection:r="forward",arrowSize:o=y,className:a="",strokeWidth:s=d,connectionType:i="straight"}=t;let l;return n?.boxId&&M?M(n.boxId)?l=B({},n.position||"left"):(void 0,l={x:f.x+50,y:f.y}):l={x:n?.x||f.x+50,y:n?.y||f.y},{id:e,startPoint:f,endPoint:l,arrowDirection:r,arrowSize:o,className:a,strokeWidth:s,connectionType:i}});return{id:a,point:f,showJunction:l,junctionSize:c,junctionShape:u,branches:h}})})(),Z=(e,n,r)=>{const{point:o,showJunction:a,junctionSize:s,junctionShape:i}=e;if(!a)return null;const l=o.x-n,c=o.y-r;switch(i){case"circle":default:return t.jsx("circle",{cx:l,cy:c,r:s,className:"fill-current"},`junction-${e.id}`);case"square":return t.jsx("rect",{x:l-s,y:c-s,width:2*s,height:2*s,className:"fill-current"},`junction-${e.id}`);case"diamond":return t.jsx("polygon",{points:`${l},${c-s} ${l+s},${c} ${l},${c+s} ${l-s},${c}`,className:"fill-current"},`junction-${e.id}`)}},G=(()=>{if("custom"===u&&(!k||0===k.length))return void 0,"straight";if("auto"!==u)return u;if(r&&a&&r.position&&a.position){const{position:t}=r;return"right"===t&&"left"===a.position||"left"===t&&"right"===a.position||"top"===t&&"bottom"===a.position||"bottom"===t&&"top"===a.position?"straight":"orthogonal"}return"straight"})(),{arrowHead1:F,arrowHead2:Q}=W?(()=>{const{x:t,y:e}=T,{x:n,y:o}=I;if(a&&a.position&&r){const{position:r}=a;let s;switch(r){case"left":s=0;break;case"right":s=Math.PI;break;case"top":s=Math.PI/2;break;case"bottom":s=-Math.PI/2;break;default:s=Math.atan2(o-e,n-t)}return{arrowHead1:{x:n-q*Math.cos(s-Math.PI/6),y:o-q*Math.sin(s-Math.PI/6)},arrowHead2:{x:n-q*Math.cos(s+Math.PI/6),y:o-q*Math.sin(s+Math.PI/6)}}}let s=t,i=e,l=n,c=o;if("custom"===G&&k&&k.length>0){const t=k[k.length-1];t&&"number"==typeof t.x&&"number"==typeof t.y&&(s=t.x,i=t.y)}else"orthogonal"===G&&(Math.abs(n-t)>Math.abs(o-e)?i=o:s=n);const u=Math.atan2(c-i,l-s);return{arrowHead1:{x:n-q*Math.cos(u-Math.PI/6),y:o-q*Math.sin(u-Math.PI/6)},arrowHead2:{x:n-q*Math.cos(u+Math.PI/6),y:o-q*Math.sin(u+Math.PI/6)}}})():{arrowHead1:null,arrowHead2:null},{startArrowHead1:R,startArrowHead2:K}=H?(()=>{const{x:t,y:e}=T,{x:n,y:o}=I;if(r&&r.position&&a){const{position:a}=r;let s;switch(a){case"right":s=0;break;case"left":s=Math.PI;break;case"bottom":s=Math.PI/2;break;case"top":s=-Math.PI/2;break;default:s=Math.atan2(o-e,n-t)}return{startArrowHead1:{x:t+q*Math.cos(s-Math.PI/6),y:e+q*Math.sin(s-Math.PI/6)},startArrowHead2:{x:t+q*Math.cos(s+Math.PI/6),y:e+q*Math.sin(s+Math.PI/6)}}}let s=t,i=e,l=n,c=o;if("custom"===G&&k&&k.length>0){const t=k[0];t&&"number"==typeof t.x&&"number"==typeof t.y&&(l=t.x,c=t.y)}else"orthogonal"===G&&(Math.abs(n-t)>Math.abs(o-e)?c=e:l=t);const u=Math.atan2(c-i,l-s);return{startArrowHead1:{x:t+q*Math.cos(u-Math.PI/6),y:e+q*Math.sin(u-Math.PI/6)},startArrowHead2:{x:t+q*Math.cos(u+Math.PI/6),y:e+q*Math.sin(u+Math.PI/6)}}})():{startArrowHead1:null,startArrowHead2:null},U=k?k.filter(t=>t&&"number"==typeof t.x&&"number"==typeof t.y&&!isNaN(t.x)&&!isNaN(t.y)):[],J=[];Y.forEach(t=>{J.push(t.point),t.branches.forEach(t=>{J.push(t.endPoint)})});const $=[T,I,...U,...J],_=Math.min(...$.map(t=>t.x))-q,tt=Math.min(...$.map(t=>t.y))-q,et=Math.max(...$.map(t=>t.x))+q,nt=Math.max(...$.map(t=>t.y))+q;return t.jsxs("svg",{className:`absolute pointer-events-none z-10 ${p}`,style:{left:_,top:tt,width:et-_,height:nt-tt},children:[x&&t.jsx("defs",{children:t.jsx("style",{children:(()=>{if(!x)return"";const t=h||2;switch(f){case"electric":return`\n .electric-path {\n stroke-dasharray: 8, 4, 2, 4;\n animation: electricFlow ${.9*t}s linear infinite, electricGlow ${2*t}s ease-in-out infinite alternate;\n filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.7));\n stroke-linecap: round;\n }\n @keyframes electricFlow {\n 0% { \n stroke-dashoffset: 0; \n opacity: 0.8;\n }\n 25% { \n opacity: 1;\n }\n 50% { \n opacity: 0.9;\n }\n 75% { \n opacity: 1;\n }\n 100% { \n stroke-dashoffset: -14; \n opacity: 0.8;\n }\n }\n @keyframes electricGlow {\n 0% { \n filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.7));\n }\n 100% { \n filter: drop-shadow(0 0 12px rgba(59, 130, 246, 1)) drop-shadow(0 0 20px rgba(96, 165, 250, 0.6));\n }\n }\n\n `;case"water":return`\n .water-path {\n stroke-dasharray: 12, 6, 4, 6;\n animation: waterFlow ${1.1*t}s ease-in-out infinite, waterWave ${2*t}s ease-in-out infinite;\n filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));\n stroke-linecap: round;\n }\n @keyframes waterFlow {\n 0% { \n stroke-dashoffset: 0; \n opacity: 0.7;\n }\n 25% { \n opacity: 0.9;\n }\n 50% { \n opacity: 1;\n }\n 75% { \n opacity: 0.8;\n }\n 100% { \n stroke-dashoffset: -16; \n opacity: 0.7;\n }\n }\n @keyframes waterWave {\n 0% { \n filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));\n }\n 50% { \n filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 14px rgba(14, 165, 233, 0.5));\n }\n 100% { \n filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));\n }\n }\n\n `;case"wind":return`\n .wind-path {\n stroke-dasharray: 6, 10, 4, 8;\n animation: windFlow ${.8*t}s ease-in-out infinite, windGust ${2.2*t}s ease-in-out infinite;\n filter: drop-shadow(0 0 3px rgba(156, 163, 175, 0.5));\n stroke-linecap: round;\n }\n @keyframes windFlow {\n 0% { \n stroke-dashoffset: 0; \n opacity: 0.5;\n }\n 20% { \n opacity: 0.7;\n }\n 40% { \n opacity: 0.4;\n }\n 60% { \n opacity: 0.8;\n }\n 80% { \n opacity: 0.6;\n }\n 100% { \n stroke-dashoffset: -18; \n opacity: 0.5;\n }\n }\n @keyframes windGust {\n 0% { \n filter: drop-shadow(0 0 3px rgba(156, 163, 175, 0.5));\n }\n 50% { \n filter: drop-shadow(0 0 6px rgba(156, 163, 175, 0.7)) drop-shadow(0 0 12px rgba(107, 114, 128, 0.4));\n }\n 100% { \n filter: drop-shadow(0 0 3px rgba(156, 163, 175, 0.5));\n }\n }\n\n `;case"gas":return`\n .gas-path {\n stroke-dasharray: 6, 8, 4, 6;\n animation: gasFlow ${1.2*t}s ease-in-out infinite, gasDiffusion ${2.5*t}s ease-in-out infinite;\n filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));\n stroke-linecap: round;\n }\n @keyframes gasFlow {\n 0% { \n stroke-dashoffset: 0; \n opacity: 0.6;\n }\n 20% { \n opacity: 0.8;\n }\n 40% { \n opacity: 0.5;\n }\n 60% { \n opacity: 0.9;\n }\n 80% { \n opacity: 0.7;\n }\n 100% { \n stroke-dashoffset: -14; \n opacity: 0.6;\n }\n }\n @keyframes gasDiffusion {\n 0% { \n filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));\n }\n 50% { \n filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 15px rgba(245, 158, 11, 0.5));\n }\n 100% { \n filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));\n }\n }\n\n `;case"data":return`\n .data-path {\n stroke-dasharray: 4, 3, 2, 3;\n animation: dataTransfer ${.9*t}s linear infinite, dataGlow ${2*t}s ease-in-out infinite;\n filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.7));\n stroke-linecap: round;\n }\n @keyframes dataTransfer {\n 0% { \n stroke-dashoffset: 0; \n opacity: 0.8;\n }\n 25% { \n opacity: 1;\n }\n 50% { \n opacity: 0.9;\n }\n 75% { \n opacity: 1;\n }\n 100% { \n stroke-dashoffset: -12; \n opacity: 0.8;\n }\n }\n @keyframes dataGlow {\n 0% { \n filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.7));\n }\n 50% { \n filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.9)) drop-shadow(0 0 18px rgba(16, 185, 129, 0.6));\n }\n 100% { \n filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.7));\n }\n }\n .data-packets {\n animation: dataPacket ${.6*t}s linear infinite;\n }\n @keyframes dataPacket {\n 0% { \n opacity: 0; \n r: 1;\n fill: #22c55e;\n }\n 20% { \n opacity: 0.7; \n r: 1.5;\n fill: #10b981;\n }\n 40% { \n opacity: 1; \n r: 2;\n fill: #059669;\n }\n 60% { \n opacity: 0.8; \n r: 1.8;\n fill: #047857;\n }\n 80% { \n opacity: 0.4; \n r: 1.2;\n fill: #065f46;\n }\n 100% { \n opacity: 0; \n r: 1;\n fill: #22c55e;\n }\n }\n `;default:return`\n .dash-path {\n stroke-dasharray: 8, 4;\n animation: dashFlow ${t}s linear infinite;\n stroke-linecap: round;\n opacity: 0.8;\n }\n @keyframes dashFlow {\n 0% { \n stroke-dashoffset: 0; \n }\n 100% { \n stroke-dashoffset: -12; \n }\n }\n `}})()})}),t.jsx("path",{d:(()=>{const t=(()=>{switch(G){case"curved":return(()=>{const{x:t,y:e}=T,{x:n,y:o}=I,s=n-t,i=o-e;if(r&&a&&r.position&&a.position){const{position:l}=r;let c=t,u=e,d=n,x=o;return"right"===l?c=t+.5*Math.abs(s):"left"===l?c=t-.5*Math.abs(s):"bottom"===l?u=e+.5*Math.abs(i):"top"===l&&(u=e-.5*Math.abs(i)),"left"===a.position?d=n-.5*Math.abs(s):"right"===a.position?d=n+.5*Math.abs(s):"top"===a.position?x=o-.5*Math.abs(i):"bottom"===a.position&&(x=o+.5*Math.abs(i)),`M ${t} ${e} C ${c} ${u} ${d} ${x} ${n} ${o}`}const l=Math.sqrt(s*s+i*i),c=Math.min(.3*l,100);return`M ${t} ${e} C ${t+c} ${e} ${n-c} ${o} ${n} ${o}`})();case"orthogonal":return(()=>{const{x:t,y:e}=T,{x:n,y:o}=I;let s=`M ${t} ${e}`;if(r&&a&&r.position&&a.position){const{position:a}=r;if("right"===a||"left"===a){const r="right"===a?t+z:t-z;s+=` L ${r} ${e} L ${r} ${o} L ${n} ${o}`}else{const r="bottom"===a?e+z:e-z;s+=` L ${t} ${r} L ${n} ${r} L ${n} ${o}`}}else if("horizontal-first"===N){const r=t+z;s+=` L ${r} ${e} L ${r} ${o} L ${n} ${o}`}else if("vertical-first"===N){const r=e+z;s+=` L ${t} ${r} L ${n} ${r} L ${n} ${o}`}else if(Math.abs(n-t)>Math.abs(o-e)){const r=t+.5*(n-t);s+=` L ${r} ${e} L ${r} ${o} L ${n} ${o}`}else{const r=e+.5*(o-e);s+=` L ${t} ${r} L ${n} ${r} L ${n} ${o}`}return s})();case"stepped":return(()=>{const{x:t,y:e}=T,{x:n,y:r}=I,o=(n-t)/3,a=(r-e)/3;let s=`M ${t} ${e}`;for(let i=1;i<=3;i++){const n=t+o*i;s+=` L ${n} ${e+a*(i-1)} L ${n} ${e+a*i}`}return s})();case"custom":return(()=>{const{x:t,y:e}=T,{x:n,y:r}=I;let o=`M ${t} ${e}`;if(k&&k.length>0){k.forEach(t=>{t&&"number"==typeof t.x&&"number"==typeof t.y&&(o+=` L ${t.x} ${t.y}`)});const t=k[k.length-1];!t||t.x===n&&t.y===r||(o+=` L ${n} ${r}`)}else o+=` L ${n} ${r}`;return o})();default:return(()=>{const{x:t,y:e}=T,{x:n,y:r}=I;return`M ${t} ${e} L ${n} ${r}`})()}})();return P<=0||"curved"===G||"orthogonal"===G,t})(),strokeWidth:E,fill:"none",className:"stroke-current "+(x?`${f}-path`:""),transform:`translate(${-_}, ${-tt})`,strokeLinecap:"round",strokeLinejoin:"round"}),null,W&&F&&Q&&t.jsx(t.Fragment,{children:"circle"===g?X(I.x,I.y,_,tt):t.jsx("polygon",{points:V(I.x,I.y,F.x,F.y,Q.x,Q.y,q),className:C(),transform:`translate(${-_}, ${-tt})`})}),H&&R&&K&&t.jsx(t.Fragment,{children:"circle"===g?X(T.x,T.y,_,tt):t.jsx("polygon",{points:V(T.x,T.y,R.x,R.y,K.x,K.y,q),className:C(),transform:`translate(${-_}, ${-tt})`})}),Y.map(e=>t.jsxs("g",{children:[Z(e,_,tt),e.branches.map(e=>{const n=(t=>{const{startPoint:e,endPoint:n,connectionType:r}=t;switch(r){case"curved":{const t=n.x-e.x,r=n.y-e.y,o=Math.sqrt(t*t+r*r),a=Math.min(.3*o,50);return`M ${e.x} ${e.y} C ${e.x+a} ${e.y} ${n.x-a} ${n.y} ${n.x} ${n.y}`}case"orthogonal":{const t=e.x+.5*(n.x-e.x);return`M ${e.x} ${e.y} L ${t} ${e.y} L ${t} ${n.y} L ${n.x} ${n.y}`}default:return`M ${e.x} ${e.y} L ${n.x} ${n.y}`}})(e),r=(t=>{const{startPoint:e,endPoint:n,arrowDirection:r,arrowSize:o}=t,a=Math.atan2(n.y-e.y,n.x-e.x),s={x:n.x-o*Math.cos(a-Math.PI/6),y:n.y-o*Math.sin(a-Math.PI/6)},i={x:n.x-o*Math.cos(a+Math.PI/6),y:n.y-o*Math.sin(a+Math.PI/6)};return"forward"===r||"both"===r?{arrowHead1:s,arrowHead2:i}:null})(e);return t.jsxs("g",{children:[t.jsx("path",{d:n,strokeWidth:e.strokeWidth,fill:"none",className:`stroke-current ${e.className}`,transform:`translate(${-_}, ${-tt})`,strokeLinecap:"round",strokeLinejoin:"round"}),r&&t.jsx("polygon",{points:V(e.endPoint.x,e.endPoint.y,r.arrowHead1.x,r.arrowHead1.y,r.arrowHead2.x,r.arrowHead2.y,e.arrowSize),className:C(),transform:`translate(${-_}, ${-tt})`})]},`branch-${e.id}`)})]},`junction-group-${e.id}`))]})},exports.DiagramProvider=({children:n,className:o="",style:a={},width:s=null,height:i=null})=>{const[l,c]=e.useState(new Map),[u,d]=e.useState([]),[x,f]=e.useState(null),[h,p]=e.useState(new Set),[y,b]=e.useState(!1),[m,g]=e.useState(!1),[w,v]=e.useState(null),[A,P]=e.useState([]),[N,z]=e.useState(-1),[j,M]=e.useState(1),[k,O]=e.useState({x:0,y:0}),[W,H]=e.useState(new Map),[C,V]=e.useState([]),[X,B]=e.useState(!1),[L,S]=e.useState(null),[D,T]=e.useState({connectionType:"smart",color:"purple",strokeWidth:3,arrowShape:"triangle",arrowSize:10,animationType:"flow",animationSpeed:2,curveStrength:.3,opacity:1,showShadow:!0,showConnectionPoints:!0,autoCleanup:!1,maxConnections:20,smartSnap:!0}),[I,q]=e.useState(new Map),[E,Y]=e.useState(1e3),[Z,G]=e.useState(new Map),F=e.useRef(null),Q=e.useRef(!1);e.useEffect(()=>{if(!Q.current){const t={boxes:new Map,connections:[],dynamicBoxes:new Map,timestamp:Date.now()};P([t]),z(0),Q.current=!0}},[]);const R=e.useCallback((t,e)=>{c(n=>{const r=new Map(n),o={id:t,x:e.x,y:e.y,width:e.width,height:e.height,element:e.element,...e};return r.set(t,o),r})},[]),K=e.useCallback(t=>{const e=t.id||`dynamic-box-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,n={id:e,x:t.x||400*Math.random()+50,y:t.y||300*Math.random()+50,width:t.width||120,height:t.height||80,text:t.text||`박스 ${e}`,className:t.className||"bg-blue-500 text-white border-blue-600 border-2 rounded-lg",...t};return H(t=>{const r=new Map(t);return r.set(e,n),r}),c(t=>{const r=new Map(t);return r.set(e,n),r}),e},[]),U=e.useCallback(t=>{H(e=>{const n=new Map(e);return n.delete(t),n}),c(e=>{const n=new Map(e);return n.delete(t),n}),d(e=>e.filter(e=>e.fromBox?.id!==t&&e.toBox?.id!==t)),p(e=>{const n=new Set(e);return n.delete(t),n}),q(e=>{const n=new Map(e);for(const[r,o]of n.entries())if(o.boxIds.includes(t)){const e=o.boxIds.filter(e=>e!==t);0===e.length?n.delete(r):n.set(r,{...o,boxIds:e,updatedAt:(new Date).toISOString()})}return n})},[]),J=e.useCallback((t,e)=>{c(n=>{const r=new Map(n),o=r.get(t);if(o&&(o.x!==e.x||o.y!==e.y)){const n={...o,...e};return r.set(t,n),r}return n}),H(n=>{const r=new Map(n);if(r.has(t)){const n=r.get(t);if(n&&(n.x!==e.x||n.y!==e.y)){const o={...n,...e};return r.set(t,o),r}}return n})},[]),$=e.useCallback(t=>{c(e=>{const n=new Map(e);return n.delete(t),n}),d(e=>e.filter(e=>e.fromBox?.id!==t&&e.toBox?.id!==t)),p(e=>{const n=new Set(e);return n.delete(t),n}),q(e=>{const n=new Map(e);for(const[r,o]of n.entries())if(o.boxIds.includes(t)){const e=o.boxIds.filter(e=>e!==t);0===e.length?n.delete(r):n.set(r,{...o,boxIds:e,updatedAt:(new Date).toISOString()})}return n})},[]),_=e.useCallback(t=>l.get(t),[l]),tt=e.useCallback(()=>Array.from(l.values()),[l]),et=e.useCallback((t,e=!1)=>{p(n=>{const r=new Set;return e?(r.add(...n),n.has(t)?r.delete(t):r.add(t)):n.has(t)&&1===n.size||r.add(t),r})},[]),nt=e.useCallback(()=>{p(new Set)},[]),rt=e.useCallback(t=>{const e={id:`conn_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,...t};return d(t=>[...t,e]),e.id},[]),ot=e.useCallback(t=>{d(e=>e.filter(e=>e.id!==t))},[]),at=e.useCallback((t,e)=>{d(n=>n.map(n=>n.id===t?{...n,...e}:n))},[]),st=e.useCallback((t,e)=>{const n=l.get(t),r=l.get(e);if(!n||!r)return null;const o=r.x+r.width/2-(n.x+n.width/2),a=r.y+r.height/2-(n.y+n.height/2);let s,i;return Math.abs(o)>Math.abs(a)?o>0?(s="right",i="left"):(s="left",i="right"):a>0?(s="bottom",i="top"):(s="top",i="bottom"),{fromPosition:s,toPosition:i}},[l]),it=e.useCallback(()=>{P(t=>{const e={boxes:new Map(l),connections:[...u],dynamicBoxes:new Map(W),timestamp:Date.now()},n=t.slice(0,N+1);return n.push(e),n.slice(-50)}),z(t=>Math.min(t+1,49))},[l,u,W,N]),lt=e.useCallback(()=>{if(N>0){const t=A[N-1];c(new Map(t.boxes)),d([...t.connections]),H(new Map(t.dynamicBoxes||new Map)),z(t=>t-1)}},[A,N]),ct=e.useCallback(()=>{if(N<A.length-1){const t=A[N+1];c(new Map(t.boxes)),d([...t.connections]),H(new Map(t.dynamicBoxes||new Map)),z(t=>t+1)}},[A,N]),ut=e.useCallback(()=>{c(new Map),d([]),H(new Map),p(new Set),f(null);const t={boxes:new Map,connections:[],dynamicBoxes:new Map,timestamp:Date.now()};P(e=>{const n=e.slice(0,N+1);return n.push(t),n.slice(-50)}),z(t=>Math.min(t+1,49))},[N]),dt=e.useCallback(()=>{M(t=>Math.min(1.2*t,3))},[]),xt=e.useCallback(()=>{M(t=>Math.max(t/1.2,.1))},[]),ft=e.useCallback(()=>{M(1),O({x:0,y:0})},[]),ht=e.useCallback(()=>({boxCount:l.size,connectionCount:u.length,selectedBoxCount:h.size,canUndo:N>0,canRedo:N<A.length-1,scale:j,panOffset:k}),[l.size,u.length,h.size,N,A.length,j,k]),pt=e.useCallback(t=>Array.from(l.values()).filter(t),[l]),yt=e.useCallback(t=>u.filter(t),[u]),bt=e.useCallback(()=>{const t=Array.from(l.values());if(0===t.length)return;const e=new Map;t.forEach(t=>{e.set(t.id,{...t})});for(let r=0;r<50;r++){const n=new Map;t.forEach(r=>{let o=0,a=0;const s=e.get(r.id);t.forEach(t=>{if(r.id!==t.id){const n=e.get(t.id),r=s.x-n.x,i=s.y-n.y,l=Math.sqrt(r*r+i*i)||1,c=Math.min(1e3/(l*l),10);o+=r/l*c,a+=i/l*c}}),u.forEach(t=>{let n=null;if(t.fromBox?.id===r.id?n=e.get(t.toBox?.id):t.toBox?.id===r.id&&(n=e.get(t.fromBox?.id)),n){const t=n.x-s.x,e=n.y-s.y,r=Math.sqrt(t*t+e*e)||1,i=.05*(r-150);o+=t/r*i,a+=e/r*i}}),o+=.001*(400-s.x),a+=.001*(300-s.y),n.set(r.id,{fx:o,fy:a})}),t.forEach(t=>{const r=n.get(t.id),o=e.get(t.id);let a=o.x+.1*r.fx,s=o.y+.1*r.fy;a=Math.max(10,Math.min(800-o.width-10,a)),s=Math.max(10,Math.min(600-o.height-10,s)),e.set(t.id,{...o,x:a,y:s})})}c(e),H(t=>{const n=new Map(t);return e.forEach((t,e)=>{n.has(e)&&n.set(e,t)}),n});const n={boxes:new Map(e),connections:[...u],dynamicBoxes:new Map(W),timestamp:Date.now()};P(t=>{const e=t.slice(0,N+1);return e.push(n),e.slice(-50)}),z(t=>Math.min(t+1,49))},[l,u,W,N]),mt=e.useCallback((t,e=null)=>{B(!0),S({boxId:t,clickPoint:e})},[]),gt=e.useCallback(()=>{B(!1),S(null)},[]),wt=e.useCallback(t=>{if(!L)return null;const e={id:`auto-conn-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,fromBoxId:L.boxId||L,toPoint:t,userClickPoint:L.clickPoint||null,type:"auto",createdAt:(new Date).toISOString()};return V(t=>[...t,e]),B(!1),S(null),e.id},[L]),vt=e.useCallback(t=>{V(e=>e.filter(e=>e.id!==t))},[]),At=e.useCallback(()=>{V([])},[]),Pt=e.useCallback(t=>{T(e=>({...e,...t}))},[]),Nt=e.useCallback(()=>{T({connectionType:"smart",color:"purple",strokeWidth:3,arrowShape:"triangle",arrowSize:10,animationType:"flow",animationSpeed:2,curveStrength:.3,opacity:1,showShadow:!0,showConnectionPoints:!0,autoCleanup:!1,maxConnections:20,smartSnap:!0})},[]),zt=e.useCallback((t,e)=>{q(n=>{const r=new Map(n),o=r.get(t);if(o){const n=new Set([...o.boxIds,...e.boxIds]);r.set(t,{...o,...e,boxIds:Array.from(n)})}else r.set(t,{id:t,label:e.label||t,style:e.style||{},boxIds:e.boxIds||[],createdAt:(new Date).toISOString(),...e});return r})},[]),jt=e.useCallback(t=>{q(e=>{const n=new Map(e);return n.delete(t),n})},[]),Mt=e.useCallback(t=>I.get(t),[I]),kt=e.useCallback(()=>Array.from(I.values()),[I]),Ot=e.useCallback(t=>{const e=I.get(t);return e?e.boxIds.map(t=>l.get(t)).filter(Boolean):[]},[I,l]),Wt=e.useCallback((t,e)=>{q(n=>{const r=new Map(n),o=r.get(t);return o&&r.set(t,{...o,...e,updatedAt:(new Date).toISOString()}),r})},[]),Ht=e.useCallback((t,e)=>{q(n=>{const r=new Map(n),o=r.get(t);return o&&!o.boxIds.includes(e)&&r.set(t,{...o,boxIds:[...o.boxIds,e],updatedAt:(new Date).toISOString()}),r})},[]),Ct=e.useCallback((t,e)=>{q(n=>{const r=new Map(n),o=r.get(t);if(o){const n=o.boxIds.filter(t=>t!==e);0===n.length?r.delete(t):r.set(t,{...o,boxIds:n,updatedAt:(new Date).toISOString()})}return r})},[]),Vt=e.useCallback(t=>{for(const e of I.values())if(e.boxIds.includes(t))return e;return null},[I]),Xt=e.useCallback((t,e,n)=>{const r=I.get(t);r&&r.boxIds.forEach(t=>{const r=l.get(t);r&&J(t,{x:r.x+e,y:r.y+n})})},[I,l,J]),Bt=e.useCallback(t=>Z.get(t)||10,[Z]),Lt=e.useCallback(t=>{Y(e=>{const n=e+1;return G(e=>{const r=new Map(e);return r.set(t,n),r}),n})},[]),St=e.useCallback((t,e)=>{G(n=>{const r=new Map(n);return r.set(t,e),r})},[]),Dt=e.useCallback(()=>{G(new Map),Y(1e3)},[]),Tt={position:"relative",width:null!==s?`${s}px`:"100%",height:null!==i?`${i}px`:"100%",maxWidth:null!==s?`${s}px`:"none",maxHeight:null!==i?`${i}px`:"none",overflow:null!==s||null!==i?"hidden":"visible",...a};return t.jsx(r.Provider,{value:{boxes:l,registerBox:R,unregisterBox:$,updateBoxPosition:J,getBox:_,getAllBoxes:tt,selectBox:et,clearSelection:nt,selectedBoxes:h,findBoxes:pt,addDynamicBox:K,removeDynamicBox:U,dynamicBoxes:W,connections:u,addConnection:rt,removeConnection:ot,updateConnection:at,selectedConnection:x,setSelectedConnection:f,getOptimalConnectionPoints:st,findConnections:yt,isDragging:y,setIsDragging:b,isConnecting:m,setIsConnecting:g,connectionStartBox:w,setConnectionStartBox:v,undo:lt,redo:ct,saveState:it,clearDiagram:ut,historyIndex:N,scale:j,setScale:M,panOffset:k,setPanOffset:O,zoomIn:dt,zoomOut:xt,resetZoom:ft,getDiagramStats:ht,optimizeLayout:bt,autoConnections:C,isAutoConnectMode:X,autoConnectStartBox:L,startAutoConnect:mt,cancelAutoConnect:gt,addAutoConnection:wt,removeAutoConnection:vt,clearAutoConnections:At,autoConnectSettings:D,updateAutoConnectSettings:Pt,resetAutoConnectSettings:Nt,groups:I,registerGroup:zt,unregisterGroup:jt,getGroup:Mt,getAllGroups:kt,getGroupBoxes:Ot,updateGroupInfo:Wt,addBoxToGroup:Ht,removeBoxFromGroup:Ct,getBoxGroup:Vt,moveGroup:Xt,containerRef:F,getBoxZIndex:Bt,bringBoxToFront:Lt,setBoxZIndex:St,resetZIndexes:Dt},children:t.jsx("div",{ref:F,className:`sweet-diagram-provider diagram-container ${o}`,style:Tt,children:n})})},exports.Diamond=({id:n="",text:r="",size:a=100,width:s=null,height:i=null,x:l=0,y:c=0,textDirection:u="horizontal",verticalDirection:d="lr",className:x="text-cyan-600 hover:text-cyan-700 transition-colors duration-200",onClick:f=null,enableAutoConnect:h=!0})=>{let p,y,b,m,g;try{const t=o();p=t.registerBox,y=t.unregisterBox,b=t.startAutoConnect,m=t.isAutoConnectMode,g=t.autoConnectStartBox}catch{p=null,y=null,b=null,m=!1,g=null}const w=null!==s?s:a,v=null!==i?i:a;e.useEffect(()=>{n&&p&&p(n,{id:n,x:l,y:c,width:w,height:v})},[n,l,c,w,v,p]),e.useEffect(()=>()=>{n&&y&&y(n)},[n,y]);const A=t=>{if(f&&f(t,{id:n,x:l,y:c,width:w,height:v,size:a}),h&&b&&t.shiftKey&&n){t.stopPropagation();const e=t.currentTarget,r=(e.closest(".auto-connect-manager")||e.parentElement).getBoundingClientRect();b(n,{x:t.clientX-r.left,y:t.clientY-r.top})}},P=(()=>{const t=w/2,e=v/2;return{top:{x:l+t,y:c},right:{x:l+w,y:c+e},bottom:{x:l+t,y:c+v},left:{x:l,y:c+e}}})(),{additionalClasses:N,additionalStyles:z}=(()=>{let t="",e={};return m&&(g?.boxId||g)===n?(t=" ring-4 ring-purple-400 ring-opacity-75 shadow-lg shadow-purple-500/50",e.animation="autoConnectPulse 2s ease-in-out infinite"):m&&(t=" ring-2 ring-purple-200 ring-opacity-50"),{additionalClasses:t,additionalStyles:e}})();return t.jsxs("div",{className:`absolute ${x}${N}`,style:{left:`${l}px`,top:`${c}px`,...z},"data-box-id":n,children:[t.jsxs("svg",{width:w,height:v,className:`cursor-pointer transition-all duration-200 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50 ${x}`,onClick:A,onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||A(t)},tabIndex:"0",role:"button","aria-label":`Diamond component: ${r} ${n?`(ID: ${n})`:""}${m?" (자동 연결 모드)":""}`,children:[t.jsx("polygon",{points:(()=>{const t=w/2,e=v/2;return`${t},0 ${w},${e} ${t},${v} 0,${e}`})(),className:"fill-current stroke-current stroke-2 transition-colors duration-200 hover:opacity-80",fill:"currentColor",fillOpacity:"0.1"}),t.jsx("foreignObject",{x:"0",y:"0",width:w,height:v,className:"pointer-events-none",children:t.jsx("div",{className:"flex items-center justify-center w-full h-full text-center",style:{fontSize:`${Math.max(10,.12*Math.min(w,v))}px`,lineHeight:"1.2",..."vertical"===u?{writingMode:`vertical-${d}`,textOrientation:"mixed",textAlign:"center"}:{textAlign:"center"}},children:t.jsx("span",{className:"font-medium px-2 select-none leading-tight",children:r})})})]}),Object.entries(P).map(([e,r])=>t.jsx("div",{className:"absolute w-2 h-2 bg-cyan-600 rounded-full opacity-0 hover:opacity-100 transition-all duration-200 cursor-crosshair hover:scale-150 hover:bg-cyan-500 z-20",style:{left:r.x-l-4+"px",top:r.y-c-4+"px"},"data-connection-point":e,"data-box-id":n,"data-x":r.x,"data-y":r.y,title:`${n?`${n} - `:""}${e} connection point`},e)),m&&(g?.boxId||g)===n&&t.jsx("div",{className:"absolute -top-8 left-1/2 transform -translate-x-1/2 bg-purple-600 text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg z-30",children:"시작점"})]})},exports.DraggableBox=({id:n,initialX:r=0,initialY:a=0,width:s=120,height:i=80,title:l,color:c="blue",children:u,onDrag:d,...x})=>{let f,h,p,y,b,m;try{const t=o();f=t.registerBox,h=t.unregisterBox,p=t.updateBoxPosition,y=t.saveState,b=t.boxes,m=t.historyIndex}catch(I){void 0,f=null,h=null,p=null,y=null,b=null,m=null}const g=e.useRef(null),[w,v]=e.useState(!1),[A,P]=e.useState({x:0,y:0}),[N,z]=e.useState({x:Number(r)||0,y:Number(a)||0}),[j,M]=e.useState({x:0,y:0}),k=e.useRef(!1),O=e.useRef({x:r,y:a}),W=e.useRef({x:0,y:0}),H=e.useRef({x:void 0,y:void 0});e.useEffect(()=>{const t=Number(r)||0,e=Number(a)||0;z({x:t,y:e}),O.current={x:t,y:e}},[r,a,n,s,i]);const C=b?.get(n),V=C?.x,X=C?.y;e.useEffect(()=>{if(w||!b)return;const t=b.get(n);if(!t)return;const{x:e,y:r}=t;if("number"==typeof e&&"number"==typeof r){const t=O.current;Math.abs(e-t.x)+Math.abs(r-t.y)>.1&&(z({x:e,y:r}),O.current={x:e,y:r},H.current={x:e,y:r},g.current&&(g.current.style.left=`${e}px`,g.current.style.top=`${r}px`))}},[b,w,n]),e.useEffect(()=>{if(!w&&"number"==typeof V&&"number"==typeof X){const t=O.current;Math.abs(V-t.x)+Math.abs(X-t.y)>.1&&(z({x:V,y:X}),O.current={x:V,y:X})}},[V,X,w,n]),e.useEffect(()=>{if(w||!b||null===m)return;const t=b.get(n);if(t&&"number"==typeof t.x&&"number"==typeof t.y){const e=O.current;Math.abs(t.x-e.x)+Math.abs(t.y-e.y)>.1&&(z({x:t.x,y:t.y}),O.current={x:t.x,y:t.y},g.current&&(g.current.style.left=`${t.x}px`,g.current.style.top=`${t.y}px`))}},[m,w,n,b]),e.useEffect(()=>{O.current={x:N.x,y:N.y}},[N.x,N.y]),e.useEffect(()=>{const t=setTimeout(()=>{g.current&&f&&n&&!k.current&&(f(n,{x:N.x,y:N.y,width:s,height:i,element:g.current,title:l,color:c}),k.current=!0,O.current={x:N.x,y:N.y})},10);return()=>{clearTimeout(t),h&&n&&k.current&&(h(n),k.current=!1)}},[n,f,h,N.x,N.y,s,i,l,c,p]),e.useEffect(()=>{f&&n&&k.current&&g.current&&f(n,{x:N.x,y:N.y,width:s,height:i,element:g.current,title:l,color:c})},[s,i,l,c,N.x,N.y,f,n]),e.useEffect(()=>{!w&&p&&n&&k.current&&(O.current.x===N.x&&O.current.y===N.y||(O.current={x:N.x,y:N.y},p(n,{x:N.x,y:N.y})))},[N.x,N.y,w,n,p]);const B=e.useCallback(t=>{t.preventDefault(),y&&y(),v(!0),W.current={x:N.x,y:N.y};const e=g.current.getBoundingClientRect();P({x:t.clientX-e.left,y:t.clientY-e.top}),M({x:0,y:0})},[N.x,N.y,y]),L=e.useCallback(t=>{if(!w)return;const e=g.current.parentElement;if(!e)return;const r=e.getBoundingClientRect(),o=t.clientY-r.top-A.y,a=e.clientHeight-i,l=Math.max(0,Math.min(e.clientWidth-s,t.clientX-r.left-A.x)),c=Math.max(0,Math.min(a,o));M({x:l-N.x,y:c-N.y}),p&&k.current&&requestAnimationFrame(()=>{p(n,{x:l,y:c})}),d&&d({x:l,y:c})},[w,A,N,s,i,n,d,p]),S=e.useCallback(()=>{if(!w)return;v(!1);const t=N.x+j.x,e=N.y+j.y,n=Math.abs(t-W.current.x)>1||Math.abs(e-W.current.y)>1;z({x:t,y:e}),M({x:0,y:0}),n&&y&&setTimeout(()=>{y()},10)},[w,N,j,y]);e.useEffect(()=>{if(w)return document.addEventListener("mousemove",L),document.addEventListener("mouseup",S),()=>{document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",S)}},[w,L,S]);const D={blue:"bg-blue-100 border-blue-300 text-blue-800 hover:bg-blue-200",green:"bg-green-100 border-green-300 text-green-800 hover:bg-green-200",red:"bg-red-100 border-red-300 text-red-800 hover:bg-red-200",yellow:"bg-yellow-100 border-yellow-300 text-yellow-800 hover:bg-yellow-200",purple:"bg-purple-100 border-purple-300 text-purple-800 hover:bg-purple-200",indigo:"bg-indigo-100 border-indigo-300 text-indigo-800 hover:bg-indigo-200",primary:"bg-[#0066ff] border-[#0052cc] text-white hover:bg-[#0052cc] shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-105",secondary:"bg-white border-[#0066ff] text-[#0066ff] hover:bg-[#0066ff] hover:text-white hover:shadow-lg transition-all duration-300 hover:scale-105",dark:"bg-black border-gray-800 text-white hover:bg-gray-800 shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-105",light:"bg-white border-black text-black hover:bg-gray-50 shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-105"},T={left:`${N.x}px`,top:`${N.y}px`,width:`${s}px`,height:`${i}px`,position:"absolute",...w?{transform:`translate(${j.x}px, ${j.y}px)`}:{}};return t.jsxs("div",{ref:g,className:`absolute border-2 rounded-xl shadow-md cursor-move select-none ${D[c]||D.primary} ${w?"scale-110 shadow-2xl z-50 rotate-1":"z-10 transition-all duration-300"}`,style:T,"data-box-id":n,onMouseDown:B,...x,children:[t.jsxs("div",{className:"h-full flex flex-col items-center justify-center w-full",children:[l&&t.jsx("div",{className:"text-sm font-bold text-center leading-tight",children:l}),u&&t.jsx("div",{className:"text-xs text-center opacity-80 mt-1",children:u}),t.jsx("div",{className:"text-xs opacity-60 mt-1 font-mono",children:n})]}),t.jsxs("div",{className:"opacity-0 hover:opacity-100 transition-opacity duration-300",children:[t.jsx("div",{className:"absolute w-3 h-3 bg-[#0066ff] rounded-full -top-1.5 left-1/2 transform -translate-x-1/2 border-2 border-white shadow-lg hover:scale-125 transition-transform"}),t.jsx("div",{className:"absolute w-3 h-3 bg-[#0066ff] rounded-full -right-1.5 top-1/2 transform -translate-y-1/2 border-2 border-white shadow-lg hover:scale-125 transition-transform"}),t.jsx("div",{className:"absolute w-3 h-3 bg-[#0066ff] rounded-full -bottom-1.5 left-1/2 transform -translate-x-1/2 border-2 border-white shadow-lg hover:scale-125 transition-transform"}),t.jsx("div",{className:"absolute w-3 h-3 bg-[#0066ff] rounded-full -left-1.5 top-1/2 transform -translate-y-1/2 border-2 border-white shadow-lg hover:scale-125 transition-transform"})]})]})},exports.ImageBox=({id:n="",text:r="",textPosition:a="bottom",textClassName:i="text-xs text-gray-700 font-medium",textSpacing:l=6,textMaxWidth:c=null,textAlign:u="center",icon:d="data:image/png;base64,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