@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-skill-tree/index.cjs.js

@@ -0,0 +1,65 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);function a(e,t){return e.find(e=>e.id===t)}function o(e,t){let n=e.filter(e=>e.branch===t);if(n.length===0)return 0;let r=n.filter(e=>e.unlocked).length;return Math.round(r/n.length*100)}function s(e){let t=[`#ef4444`,`#3b82f6`,`#22c55e`,`#a855f7`,`#f59e0b`,`#06b6d4`,`#ec4899`,`#8b5cf6`];return t[e%t.length]}function c({from:e,to:n,color:r,unlocked:a,available:o,animated:s}){let c=n.x-e.x,l=n.y-e.y,u=(e.x+n.x)/2,d=(e.y+n.y)/2,f;f=Math.abs(l)>Math.abs(c)?`M ${e.x} ${e.y} C ${e.x} ${d}, ${n.x} ${d}, ${n.x} ${n.y}`:`M ${e.x} ${e.y} C ${u} ${e.y}, ${u} ${n.y}, ${n.x} ${n.y}`;let p=a?r:o?`${r}80`:`rgba(128, 128, 128, 0.3)`;return(0,i.jsxs)(`g`,{children:[a&&(0,i.jsx)(`path`,{d:f,fill:`none`,stroke:r,strokeWidth:8,strokeLinecap:`round`,opacity:.3,className:s?`animate-pulse`:``}),(0,i.jsx)(`path`,{d:f,fill:`none`,stroke:p,strokeWidth:a?4:2,strokeLinecap:`round`,strokeDasharray:!a&&o?`8 4`:`none`,className:t.cn(`transition-all duration-500`,s&&a&&`animate-flow`)}),(0,i.jsx)(`polygon`,{points:`-5,-4 0,0 -5,4`,fill:p,transform:`translate(${n.x}, ${n.y}) rotate(${Math.atan2(l,c)*180/Math.PI})`})]})}function l({skill:e,branchColor:a,onUnlock:o,onHover:s,isHovered:c,animated:l,canAfford:u}){let[d,f]=n.useState(!1),p=()=>{e.available&&!e.unlocked&&u&&(f(!0),setTimeout(()=>{o(),f(!1)},500))},m=e.available&&!e.unlocked&&u;return(0,i.jsxs)(`g`,{transform:`translate(${e.position.x}, ${e.position.y})`,onMouseEnter:()=>s(e),onMouseLeave:()=>s(null),onClick:p,className:t.cn(`cursor-pointer transition-transform duration-300`,m&&`hover:scale-110`),style:{cursor:m?`pointer`:e.unlocked?`default`:`not-allowed`},children:[e.unlocked&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`circle`,{r:42,fill:`none`,stroke:a,strokeWidth:2,opacity:.3,className:l?`animate-pulse`:``}),(0,i.jsx)(`circle`,{r:38,fill:`${a}20`,className:l?`animate-glow`:``})]}),e.available&&!e.unlocked&&(0,i.jsx)(`circle`,{r:36,fill:`none`,stroke:a,strokeWidth:2,strokeDasharray:`4 4`,className:l?`animate-spin-slow`:``}),d&&(0,i.jsx)(`circle`,{r:60/2,fill:`none`,stroke:a,strokeWidth:4,className:`animate-unlock-ring`}),(0,i.jsx)(`circle`,{r:60/2,fill:e.unlocked?`url(#gradient-${e.branch||`default`})`:e.available?`hsl(var(--background))`:`hsl(var(--muted))`,stroke:e.unlocked||e.available?a:`hsl(var(--border))`,strokeWidth:e.unlocked?3:2,className:t.cn(`transition-all duration-300`,c&&`filter drop-shadow-lg`,d&&`animate-unlock-pulse`)}),e.unlocked&&(0,i.jsx)(`circle`,{r:60/2-6,fill:`none`,stroke:`rgba(255,255,255,0.3)`,strokeWidth:1}),(0,i.jsx)(`g`,{transform:`translate(-12, -12)`,children:e.unlocked?(0,i.jsx)(`g`,{className:`text-white`,children:e.icon||(0,i.jsx)(r.Star,{className:`h-6 w-6`,fill:`currentColor`})}):e.available?(0,i.jsx)(`g`,{className:`text-${e.unlocked?`white`:`muted-foreground`}`,children:u?(0,i.jsx)(r.Unlock,{className:`h-6 w-6`,stroke:a}):(0,i.jsx)(r.Lock,{className:`h-6 w-6`,stroke:`hsl(var(--muted-foreground))`})}):(0,i.jsx)(r.Lock,{className:`h-6 w-6`,stroke:`hsl(var(--muted-foreground))`,opacity:.5})}),e.maxLevel&&e.maxLevel>1&&e.unlocked&&(0,i.jsxs)(`g`,{transform:`translate(${60/2-8}, ${60/2-8})`,children:[(0,i.jsx)(`circle`,{r:10,fill:a,stroke:`white`,strokeWidth:2}),(0,i.jsxs)(`text`,{textAnchor:`middle`,dominantBaseline:`central`,className:`fill-white text-xs font-bold`,style:{fontSize:10},children:[e.level||1,`/`,e.maxLevel]})]}),e.available&&!e.unlocked&&e.cost&&(0,i.jsxs)(`g`,{transform:`translate(0, 46)`,children:[(0,i.jsx)(`rect`,{x:-20,y:-10,width:40,height:20,rx:10,fill:u?a:`hsl(var(--muted))`,className:`transition-colors duration-300`}),(0,i.jsx)(`g`,{transform:`translate(-8, -6)`,children:(0,i.jsx)(r.Zap,{className:`h-3 w-3`,fill:`white`,stroke:`white`})}),(0,i.jsx)(`text`,{x:6,textAnchor:`middle`,dominantBaseline:`central`,className:`fill-white text-xs font-bold`,style:{fontSize:11},children:e.cost})]}),(0,i.jsx)(`text`,{y:e.available&&!e.unlocked&&e.cost?68:46,textAnchor:`middle`,className:t.cn(`text-xs font-medium pointer-events-none`,e.unlocked?`fill-foreground`:e.available?`fill-muted-foreground`:`fill-muted-foreground/50`),style:{fontSize:11},children:e.name}),d&&(0,i.jsx)(`g`,{className:`particles`,children:[...Array(8)].map((e,t)=>(0,i.jsx)(`circle`,{r:3,fill:a,className:`animate-particle`,style:{"--angle":`${t*45}deg`,animationDelay:`${t*.05}s`}},t))})]})}function u({skill:e,branchColor:n,canAfford:a}){return(0,i.jsxs)(`div`,{className:`fixed z-50 w-64 rounded-lg border bg-popover p-4 shadow-xl animate-tooltip-in`,style:{left:e.position.x+80,top:e.position.y-40,borderColor:e.unlocked?n:void 0},children:[(0,i.jsxs)(`div`,{className:`mb-2 flex items-center gap-2`,children:[(0,i.jsx)(`div`,{className:t.cn(`flex h-8 w-8 items-center justify-center rounded-full`,e.unlocked?`text-white`:`text-muted-foreground`),style:{backgroundColor:e.unlocked?n:`hsl(var(--muted))`},children:e.icon||(0,i.jsx)(r.Star,{className:`h-4 w-4`,fill:e.unlocked?`currentColor`:`none`})}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`h4`,{className:`font-semibold`,children:e.name}),e.maxLevel&&e.maxLevel>1&&(0,i.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[`Level `,e.level||+!!e.unlocked,`/`,e.maxLevel]})]})]}),(0,i.jsx)(`p`,{className:`mb-3 text-sm text-muted-foreground`,children:e.description}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between text-sm`,children:[e.unlocked?(0,i.jsxs)(`span`,{className:`flex items-center gap-1 text-green-500`,children:[(0,i.jsx)(r.Unlock,{className:`h-4 w-4`}),`Unlocked`]}):e.available?(0,i.jsx)(`span`,{className:`flex items-center gap-1`,style:{color:a?n:`hsl(var(--muted-foreground))`},children:a?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.Unlock,{className:`h-4 w-4`}),`Click to unlock`]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.Lock,{className:`h-4 w-4`}),`Not enough points`]})}):(0,i.jsxs)(`span`,{className:`flex items-center gap-1 text-muted-foreground`,children:[(0,i.jsx)(r.Lock,{className:`h-4 w-4`}),`Locked`]}),!e.unlocked&&e.cost&&(0,i.jsxs)(`span`,{className:`flex items-center gap-1 font-medium`,children:[(0,i.jsx)(r.Zap,{className:`h-4 w-4 text-amber-500`}),e.cost,` points`]})]}),e.prerequisites&&e.prerequisites.length>0&&!e.unlocked&&(0,i.jsxs)(`div`,{className:`mt-3 border-t pt-3`,children:[(0,i.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground`,children:`Requires:`}),(0,i.jsx)(`div`,{className:`mt-1 flex flex-wrap gap-1`,children:e.prerequisites.map(e=>(0,i.jsx)(`span`,{className:`rounded-full bg-muted px-2 py-0.5 text-xs`,children:e},e))})]})]})}function d({branch:e,progress:t,expanded:n,onToggle:a,skills:o}){let s=o.filter(t=>t.branch===e.id),c=s.filter(e=>e.unlocked).length;return(0,i.jsxs)(`div`,{className:`rounded-lg border bg-card p-3 transition-all duration-300`,children:[(0,i.jsxs)(`button`,{type:`button`,onClick:a,className:`flex w-full items-center justify-between`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(`div`,{className:`h-3 w-3 rounded-full`,style:{backgroundColor:e.color}}),(0,i.jsx)(`span`,{className:`font-medium`,children:e.name})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsxs)(`span`,{className:`text-sm text-muted-foreground`,children:[c,`/`,s.length]}),n?(0,i.jsx)(r.ChevronUp,{className:`h-4 w-4 text-muted-foreground`}):(0,i.jsx)(r.ChevronDown,{className:`h-4 w-4 text-muted-foreground`})]})]}),(0,i.jsx)(`div`,{className:`mt-2 h-2 w-full overflow-hidden rounded-full bg-muted`,children:(0,i.jsx)(`div`,{className:`h-full rounded-full transition-all duration-500`,style:{width:`${t}%`,backgroundColor:e.color}})}),n&&(0,i.jsx)(`div`,{className:`mt-3 space-y-1`,children:s.map(t=>(0,i.jsxs)(`div`,{className:`flex items-center gap-2 text-sm`,children:[t.unlocked?(0,i.jsx)(r.Star,{className:`h-3 w-3`,style:{color:e.color},fill:e.color}):(0,i.jsx)(r.Lock,{className:`h-3 w-3 text-muted-foreground`}),(0,i.jsx)(`span`,{className:t.unlocked?``:`text-muted-foreground`,children:t.name})]},t.id))})]})}function f({skills:e,skillPoints:f=0,onUnlock:p,onReset:m,branches:h=[],showConnections:g=!0,zoomable:_=!0,animated:v=!0,showResetButton:y=!0,showCategoryFilters:b=!0,className:x}){let S=n.useRef(null),[C,w]=n.useState(null),[T,E]=n.useState(1),[D,O]=n.useState({x:0,y:0}),[k,A]=n.useState(!1),[j,M]=n.useState({x:0,y:0}),[N,P]=n.useState(new Set),[F,I]=n.useState(new Set),[L,R]=n.useState(!1),[z,B]=n.useState(!1),V=n.useMemo(()=>e.length===0?{minX:0,maxX:800,minY:0,maxY:600}:{minX:Math.min(...e.map(e=>e.position.x))-100,maxX:Math.max(...e.map(e=>e.position.x))+100,minY:Math.min(...e.map(e=>e.position.y))-100,maxY:Math.max(...e.map(e=>e.position.y))+100},[e]),H=V.maxX-V.minX,U=V.maxY-V.minY,W=n.useMemo(()=>{if(h.length>0)return h;let t=new Set(e.map(e=>e.branch).filter(Boolean));return Array.from(t).map((e,t)=>({id:e,name:e.charAt(0).toUpperCase()+e.slice(1),color:s(t)}))},[h,e]),G=e=>W.find(t=>t.id===e.branch)?.color||`#6366f1`,K=e=>{E(t=>Math.max(.5,Math.min(2,t+e)))},q=e=>{e.button===0&&(A(!0),M({x:e.clientX-D.x,y:e.clientY-D.y}))},J=e=>{k&&O({x:e.clientX-j.x,y:e.clientY-j.y})},Y=()=>{A(!1)},X=e=>{_&&e.ctrlKey&&(e.preventDefault(),K(e.deltaY>0?-.1:.1))},Z=e=>{P(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},Q=n.useMemo(()=>{let t=[];return e.forEach(n=>{n.prerequisites&&n.prerequisites.forEach(r=>{let i=a(e,r);i&&t.push({from:i,to:n,color:G(n)})})}),t},[e,W]);return(0,i.jsxs)(`div`,{className:t.cn(`relative flex gap-4`,x),children:[(0,i.jsxs)(`div`,{className:`flex-1`,children:[(0,i.jsxs)(`div`,{className:`mb-4 flex items-center justify-between rounded-lg border bg-card p-4`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,i.jsx)(`div`,{className:`flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-amber-400 to-orange-500`,children:(0,i.jsx)(r.Zap,{className:`h-5 w-5 text-white`,fill:`white`})}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:`Available Points`}),(0,i.jsx)(`div`,{className:`text-2xl font-bold`,children:f})]})]}),_&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2 rounded-full border bg-background px-3 py-1`,children:[(0,i.jsx)(`button`,{type:`button`,onClick:()=>K(-.1),className:`rounded-full p-1 hover:bg-muted transition-colors`,disabled:T<=.5,children:(0,i.jsx)(r.ZoomOut,{className:`h-4 w-4`})}),(0,i.jsxs)(`span`,{className:`min-w-[3rem] text-center text-sm`,children:[Math.round(T*100),`%`]}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>K(.1),className:`rounded-full p-1 hover:bg-muted transition-colors`,disabled:T>=2,children:(0,i.jsx)(r.ZoomIn,{className:`h-4 w-4`})})]})]}),(0,i.jsxs)(`div`,{ref:S,className:`relative overflow-hidden rounded-lg border bg-gradient-to-br from-background to-muted/20`,style:{height:500},onMouseDown:q,onMouseMove:J,onMouseUp:Y,onMouseLeave:Y,onWheel:X,children:[(0,i.jsx)(`div`,{className:`pointer-events-none absolute inset-0 opacity-20`,style:{backgroundImage:`radial-gradient(circle at 1px 1px, hsl(var(--border)) 1px, transparent 0)`,backgroundSize:`${20*T}px ${20*T}px`}}),(0,i.jsxs)(`svg`,{className:`absolute inset-0`,style:{width:H*T,height:U*T,transform:`translate(${D.x}px, ${D.y}px) translate(${-V.minX*T}px, ${-V.minY*T}px)`,transformOrigin:`top left`},viewBox:`${V.minX} ${V.minY} ${H} ${U}`,"aria-hidden":`true`,focusable:`false`,children:[(0,i.jsxs)(`defs`,{children:[W.map(e=>(0,i.jsxs)(`radialGradient`,{id:`gradient-${e.id}`,cx:`30%`,cy:`30%`,r:`70%`,children:[(0,i.jsx)(`stop`,{offset:`0%`,stopColor:`${e.color}ff`}),(0,i.jsx)(`stop`,{offset:`100%`,stopColor:`${e.color}aa`})]},`gradient-${e.id}`)),(0,i.jsxs)(`radialGradient`,{id:`gradient-default`,cx:`30%`,cy:`30%`,r:`70%`,children:[(0,i.jsx)(`stop`,{offset:`0%`,stopColor:`#6366f1`}),(0,i.jsx)(`stop`,{offset:`100%`,stopColor:`#4f46e5`})]})]}),g&&Q.map((e,t)=>(0,i.jsx)(c,{from:e.from.position,to:e.to.position,color:e.color,unlocked:e.from.unlocked&&e.to.unlocked,available:e.from.unlocked&&e.to.available,animated:v},`${e.from.id}-${e.to.id}-${t}`)),e.map(e=>(0,i.jsx)(l,{skill:e,branchColor:G(e),onUnlock:()=>p?.(e.id),onHover:w,isHovered:C?.id===e.id,animated:v,canAfford:f>=(e.cost||1)},e.id))]}),C&&(0,i.jsx)(u,{skill:C,branchColor:G(C),canAfford:f>=(C.cost||1)}),(0,i.jsxs)(`div`,{className:`absolute bottom-4 left-4 text-xs text-muted-foreground/60`,children:[`Drag to pan `,_&&`| Ctrl+Scroll to zoom`]})]})]}),W.length>0&&(0,i.jsxs)(`div`,{className:`w-64 space-y-2`,children:[(0,i.jsx)(`h3`,{className:`mb-3 font-semibold`,children:`Skill Branches`}),W.map(t=>(0,i.jsx)(d,{branch:t,progress:o(e,t.id),expanded:N.has(t.id),onToggle:()=>Z(t.id),skills:e},t.id)),(0,i.jsxs)(`div`,{className:`mt-4 rounded-lg border bg-card p-3`,children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsx)(`span`,{className:`font-medium`,children:`Total Progress`}),(0,i.jsxs)(`span`,{className:`text-sm text-muted-foreground`,children:[e.filter(e=>e.unlocked).length,`/`,e.length]})]}),(0,i.jsx)(`div`,{className:`mt-2 h-3 w-full overflow-hidden rounded-full bg-muted`,children:(0,i.jsx)(`div`,{className:`h-full rounded-full bg-gradient-to-r from-green-400 to-emerald-500 transition-all duration-500`,style:{width:`${e.filter(e=>e.unlocked).length/e.length*100}%`}})}),(0,i.jsxs)(`div`,{className:`mt-1 text-center text-sm font-medium`,children:[Math.round(e.filter(e=>e.unlocked).length/e.length*100),`%`]})]})]}),(0,i.jsx)(`style`,{children:`
+        @keyframes spin-slow {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        @keyframes glow {
+          0%, 100% { opacity: 0.3; transform: scale(1); }
+          50% { opacity: 0.6; transform: scale(1.05); }
+        }
+        @keyframes flow {
+          0% { stroke-dashoffset: 24; }
+          100% { stroke-dashoffset: 0; }
+        }
+        @keyframes unlock-ring {
+          0% { r: 30; stroke-width: 4; opacity: 1; }
+          100% { r: 60; stroke-width: 0; opacity: 0; }
+        }
+        @keyframes unlock-pulse {
+          0% { transform: scale(1); }
+          50% { transform: scale(1.15); }
+          100% { transform: scale(1); }
+        }
+        @keyframes particle {
+          0% {
+            transform: rotate(var(--angle)) translateX(0) scale(1);
+            opacity: 1;
+          }
+          100% {
+            transform: rotate(var(--angle)) translateX(50px) scale(0);
+            opacity: 0;
+          }
+        }
+        @keyframes tooltip-in {
+          from {
+            opacity: 0;
+            transform: translateX(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        .animate-spin-slow {
+          animation: spin-slow 8s linear infinite;
+        }
+        .animate-glow {
+          animation: glow 2s ease-in-out infinite;
+        }
+        .animate-flow {
+          stroke-dasharray: 8 4;
+          animation: flow 0.5s linear infinite;
+        }
+        .animate-unlock-ring {
+          animation: unlock-ring 0.5s ease-out forwards;
+        }
+        .animate-unlock-pulse {
+          animation: unlock-pulse 0.5s ease-out;
+        }
+        .animate-particle {
+          animation: particle 0.6s ease-out forwards;
+        }
+        .animate-tooltip-in {
+          animation: tooltip-in 0.2s ease-out;
+        }
+      `})]})}function p({initialSkills:e,initialPoints:t=0,onSkillUnlock:r}){let[i,a]=n.useState(e),[o,s]=n.useState(t),c=n.useCallback(e=>e.map(t=>{if(t.unlocked)return t;let n=!t.prerequisites||t.prerequisites.every(t=>e.find(e=>e.id===t)?.unlocked);return{...t,available:n}}),[]),l=n.useCallback(e=>{a(t=>{let n=t.find(t=>t.id===e);if(!n||n.unlocked||!n.available)return t;let i=n.cost||1;if(o<i)return t;s(e=>e-i);let a=c(t.map(t=>t.id===e?{...t,unlocked:!0,level:1}:t));return r?.(n,o-i),a})},[o,c,r]),u=n.useCallback(e=>{s(t=>t+e)},[]),d=n.useCallback(()=>{let t=i.filter(e=>e.unlocked).reduce((e,t)=>e+(t.cost||1),0);a(c(e.map(e=>({...e,unlocked:!1,level:0})))),s(e=>e+t)},[i,e,c]);return n.useEffect(()=>{a(e=>c(e))},[c]),{skills:i,skillPoints:o,unlockSkill:l,addPoints:u,resetSkills:d,totalUnlocked:i.filter(e=>e.unlocked).length,totalSkills:i.length,progress:i.length>0?i.filter(e=>e.unlocked).length/i.length*100:0}}exports.WakaSkillTree=f,exports.useSkillTree=p;