@lssm/example.learning-journey-ui-onboarding 1.43.4 → 6.0.2

package/dist/node/index.js

@@ -0,0 +1,8 @@
+import{Button as be}from"@lssm/lib.design-system";import{Box as se}from"@lssm/lib.design-system/layout";import{Text as L}from"@lssm/lib.design-system/typography";import{useState as Ne}from"react";import{jsx as S,jsxs as F,Fragment as Ce}from"react/jsx-runtime";function me({code:e,language:n="typescript",title:s}){let[t,m]=Ne(!1);return F(se,{className:"overflow-hidden rounded-lg border bg-muted/50",children:[F(se,{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[F(se,{className:"flex items-center gap-2",children:[S(L,{className:"font-medium text-muted-foreground text-xs uppercase",children:n}),s&&F(Ce,{children:[S(L,{className:"text-muted-foreground",children:"•"}),S(L,{className:"text-sm",children:s})]})]}),S(be,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(e),m(!0),setTimeout(()=>m(!1),2000)},className:"h-7 text-xs",children:S(L,{asChild:!0,children:S(L,{children:t?"✓ Copied":"Copy"})})})]}),S("pre",{className:"overflow-x-auto p-4",children:S("code",{className:"text-sm",children:S(L,{asChild:!0,children:S(L,{children:e})})})})]})}import{Box as H}from"@lssm/lib.design-system/layout";import{P as ye,Text as Te}from"@lssm/lib.design-system/typography";import{cn as ne}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as j,jsxs as ce}from"react/jsx-runtime";var de={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function K({steps:e,completedStepIds:n,currentStepId:s}){return j(H,{className:"relative overflow-x-auto pb-4",children:j(H,{className:"flex min-w-max items-center gap-2",children:e.map((t,m)=>{let a=n.includes(t.id),l=t.id===s,C=t.metadata?.surface??"default",b=de[C]??de.default;return ce(H,{className:"flex items-center",children:[ce(H,{className:"flex flex-col items-center gap-2",children:[j(H,{className:ne("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",a&&"border-green-500 bg-green-500/10",l&&!a&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!a&&!l&&"border-muted bg-muted/50"),children:j(Te,{children:a?"✓":b})}),j(H,{className:"text-center",children:j(ye,{className:ne("max-w-[100px] truncate font-medium text-xs",a&&"text-green-500",l&&!a&&"text-violet-500",!a&&!l&&"text-muted-foreground"),children:t.title})})]}),m<e.length-1&&j(H,{className:ne("mx-2 h-1 w-8 rounded-full transition-colors",n.includes(e[m+1]?.id??"")?"bg-green-500":a?"bg-green-500/50":"bg-muted")})]},t.id)})})})}import{Button as ae}from"@lssm/lib.design-system";import{Box as M}from"@lssm/lib.design-system/layout";import{H4 as he,P as Y,Text as X}from"@lssm/lib.design-system/typography";import{cn as U}from"@lssm/lib.ui-kit-core";import{jsx as w,jsxs as R}from"react/jsx-runtime";function W({step:e,stepNumber:n,isCompleted:s,isCurrent:t,isExpanded:m,onToggle:a,onComplete:l}){return R(M,{className:U("rounded-xl border transition-all",s&&"border-green-500/50 bg-green-500/5",t&&!s&&"border-violet-500 bg-violet-500/5",!s&&!t&&"border-border"),children:[R(ae,{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:a,children:[w(M,{className:U("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",s&&"border-green-500 bg-green-500 text-white",t&&!s&&"border-violet-500 text-violet-500",!s&&!t&&"border-muted-foreground text-muted-foreground"),children:w(X,{children:s?"✓":n})}),R(M,{className:"min-w-0 flex-1",children:[w(he,{className:U("font-semibold",s&&"text-green-500",t&&!s&&"text-foreground",!s&&!t&&"text-muted-foreground"),children:e.title}),!m&&e.description&&w(Y,{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&R(X,{className:U("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",s?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),w(X,{className:U("shrink-0 transition-transform",m&&"rotate-180"),children:"▼"})]}),m&&R(M,{className:"border-t px-4 py-4",children:[e.description&&w(Y,{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&R(M,{className:"mb-4 rounded-lg bg-muted p-4",children:[w(Y,{className:"mb-2 font-medium text-sm",children:"Instructions:"}),w(Y,{className:"text-muted-foreground text-sm",children:e.instructions})]}),R(M,{className:"flex flex-wrap gap-2",children:[e.actionUrl&&w(ae,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!s&&w(ae,{size:"sm",onClick:l,children:w(X,{asChild:!0,children:w(X,{children:"Mark as Complete"})})})]})]})]})}import{defineExample as we}from"@lssm/lib.contracts-spec/examples";var Be=we({meta:{key:"examples.learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey Ui Onboarding",description:"Developer onboarding UI with checklists and journey maps.",kind:"template",visibility:"experimental",stability:"experimental",owners:["@contractspec-core"],tags:["package","examples","learning-journey-ui-onboarding"]},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","specs"]},studio:{enabled:!1,installable:!1},mcp:{enabled:!1}},entrypoints:{packageName:"@lssm/example.learning-journey-ui-onboarding"}}),Se=Be;import{defineFeature as Pe}from"@lssm/lib.contracts-spec/features";var ht=Pe({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI: Onboarding",description:"Developer onboarding UI with checklists, journey maps, and step-by-step progress",domain:"learning-journey",owners:["@examples"],tags:["learning","ui","onboarding","checklists"],stability:"experimental"},docs:["docs.examples.learning-journey-ui-onboarding"]});import{useLearningProgress as $e,ViewTabs as ze}from"@lssm/example.learning-journey-ui-shared";import{Box as De}from"@lssm/lib.design-system/layout";import{Card as Fe,CardContent as Ke}from"@lssm/lib.ui-kit-web/ui/card";import{useCallback as ie,useState as Ye}from"react";import{XpBar as ve}from"@lssm/example.learning-journey-ui-shared";import{Button as Ie}from"@lssm/lib.design-system";import{Box as N}from"@lssm/lib.design-system/layout";import{H1 as ke,H3 as Le,P as J,Text as f}from"@lssm/lib.design-system/typography";import{Card as V,CardContent as E,CardHeader as _,CardTitle as G}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as He}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as o,jsxs as x}from"react/jsx-runtime";function A({track:e,progress:n,onStart:s}){let t=e.steps.length,m=n.completedStepIds.length,a=t>0?m/t*100:0,l=m===t,C=t-m,b=C*5,g=e.totalXp??e.steps.reduce((p,B)=>p+(B.xpReward??0),0)+(e.completionRewards?.xp??0);return x(N,{className:"space-y-6",children:[o(V,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:o(E,{className:"p-8",children:x(N,{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[o(N,{className:"flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg",children:o(f,{children:l?"\uD83C\uDF89":"\uD83D\uDE80"})}),x(N,{className:"flex-1",children:[o(ke,{className:"font-bold text-2xl",children:e.name}),o(J,{className:"mt-1 max-w-2xl text-muted-foreground",children:e.description}),!l&&x(J,{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",b>0?`~${b} minutes`:"Less than a minute"]})]}),!l&&o(Ie,{size:"lg",onClick:s,children:o(f,{asChild:!0,children:o(f,{children:m>0?"Continue":"Get Started"})})})]})})}),x(N,{className:"grid gap-4 md:grid-cols-3",children:[x(V,{children:[o(_,{className:"pb-2",children:o(G,{className:"font-medium text-muted-foreground text-sm",children:o(f,{asChild:!0,children:o(f,{children:"Progress"})})})}),x(E,{children:[x(N,{className:"font-bold text-3xl",children:[Math.round(a),o(f,{asChild:!0,children:o(f,{children:"%"})})]}),o(He,{value:a,className:"mt-2 h-2"}),x(J,{className:"mt-2 text-muted-foreground text-sm",children:[m," of ",t," steps completed"]})]})]}),x(V,{children:[o(_,{className:"pb-2",children:o(G,{className:"font-medium text-muted-foreground text-sm",children:o(f,{asChild:!0,children:o(f,{children:"XP Earned"})})})}),x(E,{children:[o(N,{className:"font-bold text-3xl text-blue-500",children:o(f,{children:n.xpEarned})}),o(ve,{current:n.xpEarned,max:g,showLabel:!1,size:"sm"})]})]}),x(V,{children:[o(_,{className:"pb-2",children:o(G,{className:"font-medium text-muted-foreground text-sm",children:o(f,{asChild:!0,children:o(f,{children:"Time Remaining"})})})}),x(E,{children:[o(N,{className:"font-bold text-3xl",children:o(f,{children:l?"✓":`~${b}m`})}),o(J,{className:"mt-2 text-muted-foreground text-sm",children:l?"All done!":`${C} steps to go`})]})]})]}),x(V,{children:[o(_,{children:x(G,{className:"flex items-center gap-2",children:[o(f,{children:"\uD83D\uDCCB"}),o(f,{children:"Your Journey"})]})}),o(E,{children:o(N,{className:"space-y-3",children:e.steps.map((p,B)=>{let v=n.completedStepIds.includes(p.id),k=!v&&e.steps.slice(0,B).every((y)=>n.completedStepIds.includes(y.id));return x(N,{className:"flex items-center gap-4 rounded-lg border p-3",children:[o(N,{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${v?"bg-green-500 text-white":k?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:o(f,{children:v?"✓":B+1})}),o(N,{className:"min-w-0 flex-1",children:o(J,{className:`font-medium ${v?"text-green-500":k?"text-foreground":"text-muted-foreground"}`,children:p.title})}),p.xpReward&&x(f,{className:"text-muted-foreground text-sm",children:["+",p.xpReward," XP"]})]},p.id)})})})]}),l&&o(V,{className:"border-green-500/50 bg-green-500/5",children:x(E,{className:"flex items-center gap-4 p-6",children:[o(N,{className:"text-4xl",children:o(f,{children:"\uD83C\uDF89"})}),x(N,{children:[o(Le,{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),x(J,{className:"text-muted-foreground",children:["You've completed all ",t," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as je,XpBar as Re}from"@lssm/example.learning-journey-ui-shared";import{Box as u}from"@lssm/lib.design-system/layout";import{P as Oe,Text as c}from"@lssm/lib.design-system/typography";import{Card as q,CardContent as Q,CardHeader as Z,CardTitle as ee}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as Me}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as r,jsxs as i}from"react/jsx-runtime";function te({track:e,progress:n}){let s=e.steps.length,t=n.completedStepIds.length,m=s>0?t/s*100:0,a=e.totalXp??e.steps.reduce((b,g)=>b+(g.xpReward??0),0)+(e.completionRewards?.xp??0),l=s-t,C=l*5;return i(u,{className:"space-y-6",children:[i(q,{children:[r(Z,{children:i(ee,{className:"flex items-center gap-2",children:[r(c,{children:"\uD83D\uDCC8"}),r(c,{children:"Your Progress"})]})}),i(Q,{className:"space-y-6",children:[r(u,{className:"flex items-center justify-center",children:i(u,{className:"relative flex h-40 w-40 items-center justify-center",children:[i("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[r("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),r("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${m*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),i(u,{className:"text-center",children:[i(u,{className:"font-bold text-3xl",children:[Math.round(m),r(c,{asChild:!0,children:r(c,{children:"%"})})]}),r(u,{className:"text-muted-foreground text-sm",children:r(c,{children:"Complete"})})]})]})}),i(u,{className:"grid grid-cols-3 gap-4 text-center",children:[i(u,{children:[r(u,{className:"font-bold text-2xl text-green-500",children:r(c,{children:t})}),r(u,{className:"text-muted-foreground text-sm",children:r(c,{children:"Completed"})})]}),i(u,{children:[r(u,{className:"font-bold text-2xl text-orange-500",children:r(c,{children:l})}),r(u,{className:"text-muted-foreground text-sm",children:r(c,{children:"Remaining"})})]}),i(u,{children:[r(u,{className:"font-bold text-2xl",children:i(c,{children:[C,"m"]})}),r(u,{className:"text-muted-foreground text-sm",children:r(c,{children:"Est. Time"})})]})]})]})]}),i(q,{children:[r(Z,{children:i(ee,{className:"flex items-center gap-2",children:[r(c,{children:"⚡"}),r(c,{children:"Experience Points"})]})}),i(Q,{className:"space-y-4",children:[i(u,{className:"flex items-baseline gap-2",children:[r(c,{className:"font-bold text-3xl text-blue-500",children:n.xpEarned}),i(c,{className:"text-muted-foreground",children:["/ ",a," XP"]})]}),r(Re,{current:n.xpEarned,max:a,showLabel:!1,size:"lg"})]})]}),i(q,{children:[r(Z,{children:i(ee,{className:"flex items-center gap-2",children:[r(c,{children:"\uD83C\uDFC5"}),r(c,{children:"Achievements"})]})}),i(Q,{children:[r(je,{badges:n.badges,size:"lg"}),n.badges.length===0&&e.completionRewards?.badgeKey&&i(Oe,{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',e.completionRewards.badgeKey,'" badge!']})]})]}),i(q,{children:[r(Z,{children:i(ee,{className:"flex items-center gap-2",children:[r(c,{children:"\uD83D\uDCCB"}),r(c,{children:"Step Details"})]})}),r(Q,{children:r(u,{className:"space-y-3",children:e.steps.map((b,g)=>{let p=n.completedStepIds.includes(b.id),B=p?100:0;return i(u,{className:"space-y-1",children:[i(u,{className:"flex items-center justify-between text-sm",children:[i(c,{className:p?"text-green-500":"text-foreground",children:[g+1,". ",b.title]}),r(c,{className:p?"text-green-500":"text-muted-foreground",children:p?"✓":"Pending"})]}),r(Me,{value:B,className:"h-1"})]},b.id)})})})]})]})}import{Box as z}from"@lssm/lib.design-system/layout";import{H2 as Je,P as Ve,Text as le}from"@lssm/lib.design-system/typography";import{Progress as Ee}from"@lssm/lib.ui-kit-web/ui/progress";import{useState as Xe}from"react";import{jsx as D,jsxs as O}from"react/jsx-runtime";function oe({track:e,progress:n,onStepComplete:s}){let[t,m]=Xe(()=>e.steps.find((p)=>!n.completedStepIds.includes(p.id))?.id??null),a=n.completedStepIds.length,l=e.steps.length,C=l>0?a/l*100:0,b=e.steps.findIndex((g)=>!n.completedStepIds.includes(g.id));return O(z,{className:"space-y-6",children:[O(z,{className:"space-y-2",children:[O(z,{className:"flex items-center justify-between",children:[D(Je,{className:"font-bold text-xl",children:"Complete Each Step"}),O(le,{className:"text-muted-foreground text-sm",children:[a," / ",l," completed"]})]}),D(Ee,{value:C,className:"h-2"})]}),D(z,{className:"space-y-3",children:e.steps.map((g,p)=>{let B=n.completedStepIds.includes(g.id),v=p===b;return D(W,{step:g,stepNumber:p+1,isCompleted:B,isCurrent:v,isExpanded:t===g.id,onToggle:()=>m(t===g.id?null:g.id),onComplete:()=>{s?.(g.id);let k=e.steps[p+1];if(k&&!n.completedStepIds.includes(k.id))m(k.id)}},g.id)})}),e.completionRewards&&C<100&&D(z,{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:O(Ve,{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",e.completionRewards.xp&&O(le,{className:"ml-2 font-semibold text-blue-500",children:["+",e.completionRewards.xp," XP bonus"]}),e.completionRewards.badgeKey&&O(le,{className:"ml-2 font-semibold text-amber-500",children:['+ "',e.completionRewards.badgeKey,'" badge']})]})})]})}import{Box as T}from"@lssm/lib.design-system/layout";import{H2 as Ue,H4 as Ae,P as pe,Text as P}from"@lssm/lib.design-system/typography";import{Card as xe,CardContent as ue,CardHeader as ge,CardTitle as fe}from"@lssm/lib.ui-kit-web/ui/card";import{jsx as d,jsxs as h}from"react/jsx-runtime";function re({track:e,progress:n}){let s=e.steps.find((t)=>!n.completedStepIds.includes(t.id))?.id??null;return h(T,{className:"space-y-6",children:[h(T,{className:"text-center",children:[d(Ue,{className:"font-bold text-xl",children:"Your Learning Journey"}),d(pe,{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),h(xe,{children:[d(ge,{children:h(fe,{className:"flex items-center gap-2",children:[d(P,{children:"\uD83D\uDDFA️"}),d(P,{children:"Journey Map"})]})}),d(ue,{children:d(K,{steps:e.steps,completedStepIds:n.completedStepIds,currentStepId:s})})]}),h(xe,{children:[d(ge,{children:h(fe,{className:"flex items-center gap-2",children:[d(P,{children:"\uD83D\uDCCD"}),d(P,{children:"Step by Step"})]})}),d(ue,{children:h(T,{className:"relative",children:[d(T,{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),d(T,{className:"space-y-6",children:e.steps.map((t,m)=>{let a=n.completedStepIds.includes(t.id),l=t.id===s,C=t.metadata?.surface??"general";return h(T,{className:"relative flex gap-4 pl-2",children:[d(T,{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${a?"border-green-500 bg-green-500 text-white":l?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:d(P,{children:a?"✓":m+1})}),d(T,{className:"flex-1 pb-2",children:h(T,{className:"rounded-lg border p-4",children:[h(T,{className:"flex items-start justify-between gap-2",children:[h(T,{children:[h(T,{className:"flex items-center gap-2",children:[d(Ae,{className:`font-semibold ${a?"text-green-500":l?"text-blue-500":"text-foreground"}`,children:t.title}),d(P,{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:C})]}),d(pe,{className:"mt-1 text-muted-foreground text-sm",children:t.description})]}),t.xpReward&&h(P,{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${a?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",t.xpReward," XP"]})]}),d(T,{className:"mt-3 text-xs",children:a?d(P,{className:"text-green-500",children:"✓ Completed"}):l?d(P,{className:"text-blue-500",children:"→ In Progress"}):d(P,{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},t.id)})})]})})]})]})}import{jsx as I,jsxs as _e}from"react/jsx-runtime";function We({track:e,progress:n,onStepComplete:s,onViewChange:t,initialView:m="overview"}){let[a,l]=Ye(m),{progress:C,completeStep:b}=$e(e),g=n??C,p=ie((y)=>{l(y),t?.(y)},[t]),B=ie((y)=>{if(s)s(y);else b(y)},[s,b]),v=ie(()=>{l("steps"),t?.("steps")},[t]);return _e(De,{className:"space-y-6",children:[I(Fe,{children:I(Ke,{className:"p-4",children:I(ze,{currentView:a,onViewChange:p})})}),(()=>{let y={track:e,progress:g,onStepComplete:B};switch(a){case"overview":return I(A,{...y,onStart:v});case"steps":return I(oe,{...y});case"progress":return I(te,{...y});case"timeline":return I(re,{...y});default:return I(A,{...y,onStart:v})}})()]})}import{registerDocBlocks as Ge}from"@lssm/lib.contracts-spec/docs";var qe=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI — Onboarding",summary:"UI mini-app components for onboarding: checklists, snippets, and journey mapping.",kind:"reference",visibility:"public",route:"/docs/examples/learning-journey-ui-onboarding",tags:["learning","ui","onboarding"],body:`## Includes
+- Onboarding mini-app shell
+- Views: overview, steps, progress, timeline
+- Components: step checklist, code snippet, journey map
+
+## Notes
+- Compose with design system components.
+- Ensure accessible labels and keyboard navigation.`}];Ge(qe);export{me as CodeSnippet,Be as ExamplesLearningJourneyUiOnboardingExample,K as JourneyMap,ht as LearningJourneyUiOnboardingFeature,We as OnboardingMiniApp,A as Overview,te as Progress,W as StepChecklist,oe as Steps,re as Timeline,Se as example};

package/dist/node/learning-journey-ui-onboarding.feature.js

@@ -0,0 +1 @@
+import{defineFeature as e}from"@lssm/lib.contracts-spec/features";var r=e({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI: Onboarding",description:"Developer onboarding UI with checklists, journey maps, and step-by-step progress",domain:"learning-journey",owners:["@examples"],tags:["learning","ui","onboarding","checklists"],stability:"experimental"},docs:["docs.examples.learning-journey-ui-onboarding"]});export{r as LearningJourneyUiOnboardingFeature};

package/dist/node/views/Overview.js

@@ -0,0 +1,2 @@
+'use client';
+import{XpBar as P}from"@lssm/example.learning-journey-ui-shared";import{Button as v}from"@lssm/lib.design-system";import{Box as a}from"@lssm/lib.design-system/layout";import{H1 as y,H3 as H,P as l,Text as o}from"@lssm/lib.design-system/typography";import{Card as n,CardContent as x,CardHeader as f,CardTitle as g}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as S}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as e,jsxs as t}from"react/jsx-runtime";function j({track:s,progress:i,onStart:h}){let m=s.steps.length,c=i.completedStepIds.length,N=m>0?c/m*100:0,d=c===m,b=m-c,C=b*5,w=s.totalXp??s.steps.reduce((r,u)=>r+(u.xpReward??0),0)+(s.completionRewards?.xp??0);return t(a,{className:"space-y-6",children:[e(n,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:e(x,{className:"p-8",children:t(a,{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[e(a,{className:"flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg",children:e(o,{children:d?"\uD83C\uDF89":"\uD83D\uDE80"})}),t(a,{className:"flex-1",children:[e(y,{className:"font-bold text-2xl",children:s.name}),e(l,{className:"mt-1 max-w-2xl text-muted-foreground",children:s.description}),!d&&t(l,{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",C>0?`~${C} minutes`:"Less than a minute"]})]}),!d&&e(v,{size:"lg",onClick:h,children:e(o,{asChild:!0,children:e(o,{children:c>0?"Continue":"Get Started"})})})]})})}),t(a,{className:"grid gap-4 md:grid-cols-3",children:[t(n,{children:[e(f,{className:"pb-2",children:e(g,{className:"font-medium text-muted-foreground text-sm",children:e(o,{asChild:!0,children:e(o,{children:"Progress"})})})}),t(x,{children:[t(a,{className:"font-bold text-3xl",children:[Math.round(N),e(o,{asChild:!0,children:e(o,{children:"%"})})]}),e(S,{value:N,className:"mt-2 h-2"}),t(l,{className:"mt-2 text-muted-foreground text-sm",children:[c," of ",m," steps completed"]})]})]}),t(n,{children:[e(f,{className:"pb-2",children:e(g,{className:"font-medium text-muted-foreground text-sm",children:e(o,{asChild:!0,children:e(o,{children:"XP Earned"})})})}),t(x,{children:[e(a,{className:"font-bold text-3xl text-blue-500",children:e(o,{children:i.xpEarned})}),e(P,{current:i.xpEarned,max:w,showLabel:!1,size:"sm"})]})]}),t(n,{children:[e(f,{className:"pb-2",children:e(g,{className:"font-medium text-muted-foreground text-sm",children:e(o,{asChild:!0,children:e(o,{children:"Time Remaining"})})})}),t(x,{children:[e(a,{className:"font-bold text-3xl",children:e(o,{children:d?"✓":`~${C}m`})}),e(l,{className:"mt-2 text-muted-foreground text-sm",children:d?"All done!":`${b} steps to go`})]})]})]}),t(n,{children:[e(f,{children:t(g,{className:"flex items-center gap-2",children:[e(o,{children:"\uD83D\uDCCB"}),e(o,{children:"Your Journey"})]})}),e(x,{children:e(a,{className:"space-y-3",children:s.steps.map((r,u)=>{let p=i.completedStepIds.includes(r.id),T=!p&&s.steps.slice(0,u).every((B)=>i.completedStepIds.includes(B.id));return t(a,{className:"flex items-center gap-4 rounded-lg border p-3",children:[e(a,{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${p?"bg-green-500 text-white":T?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:e(o,{children:p?"✓":u+1})}),e(a,{className:"min-w-0 flex-1",children:e(l,{className:`font-medium ${p?"text-green-500":T?"text-foreground":"text-muted-foreground"}`,children:r.title})}),r.xpReward&&t(o,{className:"text-muted-foreground text-sm",children:["+",r.xpReward," XP"]})]},r.id)})})})]}),d&&e(n,{className:"border-green-500/50 bg-green-500/5",children:t(x,{className:"flex items-center gap-4 p-6",children:[e(a,{className:"text-4xl",children:e(o,{children:"\uD83C\uDF89"})}),t(a,{children:[e(H,{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),t(l,{className:"text-muted-foreground",children:["You've completed all ",m," steps. Welcome aboard!"]})]})]})})]})}export{j as Overview};

package/dist/node/views/Progress.js

@@ -0,0 +1,2 @@
+'use client';
+import{BadgeDisplay as B,XpBar as b}from"@lssm/example.learning-journey-ui-shared";import{Box as a}from"@lssm/lib.design-system/layout";import{P as y,Text as s}from"@lssm/lib.design-system/typography";import{Card as n,CardContent as m,CardHeader as d,CardTitle as c}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as h}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as e,jsxs as t}from"react/jsx-runtime";function R({track:o,progress:r}){let i=o.steps.length,p=r.completedStepIds.length,u=i>0?p/i*100:0,f=o.totalXp??o.steps.reduce((l,g)=>l+(g.xpReward??0),0)+(o.completionRewards?.xp??0),N=i-p,C=N*5;return t(a,{className:"space-y-6",children:[t(n,{children:[e(d,{children:t(c,{className:"flex items-center gap-2",children:[e(s,{children:"\uD83D\uDCC8"}),e(s,{children:"Your Progress"})]})}),t(m,{className:"space-y-6",children:[e(a,{className:"flex items-center justify-center",children:t(a,{className:"relative flex h-40 w-40 items-center justify-center",children:[t("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[e("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),e("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${u*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),t(a,{className:"text-center",children:[t(a,{className:"font-bold text-3xl",children:[Math.round(u),e(s,{asChild:!0,children:e(s,{children:"%"})})]}),e(a,{className:"text-muted-foreground text-sm",children:e(s,{children:"Complete"})})]})]})}),t(a,{className:"grid grid-cols-3 gap-4 text-center",children:[t(a,{children:[e(a,{className:"font-bold text-2xl text-green-500",children:e(s,{children:p})}),e(a,{className:"text-muted-foreground text-sm",children:e(s,{children:"Completed"})})]}),t(a,{children:[e(a,{className:"font-bold text-2xl text-orange-500",children:e(s,{children:N})}),e(a,{className:"text-muted-foreground text-sm",children:e(s,{children:"Remaining"})})]}),t(a,{children:[e(a,{className:"font-bold text-2xl",children:t(s,{children:[C,"m"]})}),e(a,{className:"text-muted-foreground text-sm",children:e(s,{children:"Est. Time"})})]})]})]})]}),t(n,{children:[e(d,{children:t(c,{className:"flex items-center gap-2",children:[e(s,{children:"⚡"}),e(s,{children:"Experience Points"})]})}),t(m,{className:"space-y-4",children:[t(a,{className:"flex items-baseline gap-2",children:[e(s,{className:"font-bold text-3xl text-blue-500",children:r.xpEarned}),t(s,{className:"text-muted-foreground",children:["/ ",f," XP"]})]}),e(b,{current:r.xpEarned,max:f,showLabel:!1,size:"lg"})]})]}),t(n,{children:[e(d,{children:t(c,{className:"flex items-center gap-2",children:[e(s,{children:"\uD83C\uDFC5"}),e(s,{children:"Achievements"})]})}),t(m,{children:[e(B,{badges:r.badges,size:"lg"}),r.badges.length===0&&o.completionRewards?.badgeKey&&t(y,{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',o.completionRewards.badgeKey,'" badge!']})]})]}),t(n,{children:[e(d,{children:t(c,{className:"flex items-center gap-2",children:[e(s,{children:"\uD83D\uDCCB"}),e(s,{children:"Step Details"})]})}),e(m,{children:e(a,{className:"space-y-3",children:o.steps.map((l,g)=>{let x=r.completedStepIds.includes(l.id),T=x?100:0;return t(a,{className:"space-y-1",children:[t(a,{className:"flex items-center justify-between text-sm",children:[t(s,{className:x?"text-green-500":"text-foreground",children:[g+1,". ",l.title]}),e(s,{className:x?"text-green-500":"text-muted-foreground",children:x?"✓":"Pending"})]}),e(h,{value:T,className:"h-1"})]},l.id)})})})]})]})}export{R as Progress,R as ProgressView};

package/dist/node/views/Steps.js

@@ -0,0 +1,2 @@
+'use client';
+import{Box as x}from"@lssm/lib.design-system/layout";import{H2 as v,P as R,Text as y}from"@lssm/lib.design-system/typography";import{Progress as k}from"@lssm/lib.ui-kit-web/ui/progress";import{useState as C}from"react";import{Button as S}from"@lssm/lib.design-system";import{Box as i}from"@lssm/lib.design-system/layout";import{H4 as I,P as g,Text as p}from"@lssm/lib.design-system/typography";import{cn as u}from"@lssm/lib.ui-kit-core";import{jsx as o,jsxs as l}from"react/jsx-runtime";function w({step:e,stepNumber:s,isCompleted:t,isCurrent:r,isExpanded:d,onToggle:b,onComplete:a}){return l(i,{className:u("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",r&&!t&&"border-violet-500 bg-violet-500/5",!t&&!r&&"border-border"),children:[l(S,{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:b,children:[o(i,{className:u("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",t&&"border-green-500 bg-green-500 text-white",r&&!t&&"border-violet-500 text-violet-500",!t&&!r&&"border-muted-foreground text-muted-foreground"),children:o(p,{children:t?"✓":s})}),l(i,{className:"min-w-0 flex-1",children:[o(I,{className:u("font-semibold",t&&"text-green-500",r&&!t&&"text-foreground",!t&&!r&&"text-muted-foreground"),children:e.title}),!d&&e.description&&o(g,{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&l(p,{className:u("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",t?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),o(p,{className:u("shrink-0 transition-transform",d&&"rotate-180"),children:"▼"})]}),d&&l(i,{className:"border-t px-4 py-4",children:[e.description&&o(g,{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&l(i,{className:"mb-4 rounded-lg bg-muted p-4",children:[o(g,{className:"mb-2 font-medium text-sm",children:"Instructions:"}),o(g,{className:"text-muted-foreground text-sm",children:e.instructions})]}),l(i,{className:"flex flex-wrap gap-2",children:[e.actionUrl&&o(S,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&o(S,{size:"sm",onClick:a,children:o(p,{asChild:!0,children:o(p,{children:"Mark as Complete"})})})]})]})]})}import{jsx as f,jsxs as m}from"react/jsx-runtime";function _({track:e,progress:s,onStepComplete:t}){let[r,d]=C(()=>e.steps.find((c)=>!s.completedStepIds.includes(c.id))?.id??null),b=s.completedStepIds.length,a=e.steps.length,h=a>0?b/a*100:0,B=e.steps.findIndex((n)=>!s.completedStepIds.includes(n.id));return m(x,{className:"space-y-6",children:[m(x,{className:"space-y-2",children:[m(x,{className:"flex items-center justify-between",children:[f(v,{className:"font-bold text-xl",children:"Complete Each Step"}),m(y,{className:"text-muted-foreground text-sm",children:[b," / ",a," completed"]})]}),f(k,{value:h,className:"h-2"})]}),f(x,{className:"space-y-3",children:e.steps.map((n,c)=>{let P=s.completedStepIds.includes(n.id),T=c===B;return f(w,{step:n,stepNumber:c+1,isCompleted:P,isCurrent:T,isExpanded:r===n.id,onToggle:()=>d(r===n.id?null:n.id),onComplete:()=>{t?.(n.id);let N=e.steps[c+1];if(N&&!s.completedStepIds.includes(N.id))d(N.id)}},n.id)})}),e.completionRewards&&h<100&&f(x,{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:m(R,{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",e.completionRewards.xp&&m(y,{className:"ml-2 font-semibold text-blue-500",children:["+",e.completionRewards.xp," XP bonus"]}),e.completionRewards.badgeKey&&m(y,{className:"ml-2 font-semibold text-amber-500",children:['+ "',e.completionRewards.badgeKey,'" badge']})]})})]})}export{_ as Steps};

package/dist/node/views/Timeline.js

@@ -0,0 +1,2 @@
+'use client';
+import{Box as o}from"@lssm/lib.design-system/layout";import{H2 as P,H4 as v,P as N,Text as s}from"@lssm/lib.design-system/typography";import{Card as y,CardContent as C,CardHeader as B,CardTitle as h}from"@lssm/lib.ui-kit-web/ui/card";import{Box as d}from"@lssm/lib.design-system/layout";import{P as S,Text as w}from"@lssm/lib.design-system/typography";import{cn as p}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as m,jsxs as f}from"react/jsx-runtime";var g={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function b({steps:l,completedStepIds:i,currentStepId:c}){return m(d,{className:"relative overflow-x-auto pb-4",children:m(d,{className:"flex min-w-max items-center gap-2",children:l.map((t,x)=>{let r=i.includes(t.id),n=t.id===c,u=t.metadata?.surface??"default",T=g[u]??g.default;return f(d,{className:"flex items-center",children:[f(d,{className:"flex flex-col items-center gap-2",children:[m(d,{className:p("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",r&&"border-green-500 bg-green-500/10",n&&!r&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!r&&!n&&"border-muted bg-muted/50"),children:m(w,{children:r?"✓":T})}),m(d,{className:"text-center",children:m(S,{className:p("max-w-[100px] truncate font-medium text-xs",r&&"text-green-500",n&&!r&&"text-violet-500",!r&&!n&&"text-muted-foreground"),children:t.title})})]}),x<l.length-1&&m(d,{className:p("mx-2 h-1 w-8 rounded-full transition-colors",i.includes(l[x+1]?.id??"")?"bg-green-500":r?"bg-green-500/50":"bg-muted")})]},t.id)})})})}import{jsx as e,jsxs as a}from"react/jsx-runtime";function V({track:l,progress:i}){let c=l.steps.find((t)=>!i.completedStepIds.includes(t.id))?.id??null;return a(o,{className:"space-y-6",children:[a(o,{className:"text-center",children:[e(P,{className:"font-bold text-xl",children:"Your Learning Journey"}),e(N,{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),a(y,{children:[e(B,{children:a(h,{className:"flex items-center gap-2",children:[e(s,{children:"\uD83D\uDDFA️"}),e(s,{children:"Journey Map"})]})}),e(C,{children:e(b,{steps:l.steps,completedStepIds:i.completedStepIds,currentStepId:c})})]}),a(y,{children:[e(B,{children:a(h,{className:"flex items-center gap-2",children:[e(s,{children:"\uD83D\uDCCD"}),e(s,{children:"Step by Step"})]})}),e(C,{children:a(o,{className:"relative",children:[e(o,{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),e(o,{className:"space-y-6",children:l.steps.map((t,x)=>{let r=i.completedStepIds.includes(t.id),n=t.id===c,u=t.metadata?.surface??"general";return a(o,{className:"relative flex gap-4 pl-2",children:[e(o,{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${r?"border-green-500 bg-green-500 text-white":n?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:e(s,{children:r?"✓":x+1})}),e(o,{className:"flex-1 pb-2",children:a(o,{className:"rounded-lg border p-4",children:[a(o,{className:"flex items-start justify-between gap-2",children:[a(o,{children:[a(o,{className:"flex items-center gap-2",children:[e(v,{className:`font-semibold ${r?"text-green-500":n?"text-blue-500":"text-foreground"}`,children:t.title}),e(s,{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:u})]}),e(N,{className:"mt-1 text-muted-foreground text-sm",children:t.description})]}),t.xpReward&&a(s,{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${r?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",t.xpReward," XP"]})]}),e(o,{className:"mt-3 text-xs",children:r?e(s,{className:"text-green-500",children:"✓ Completed"}):n?e(s,{className:"text-blue-500",children:"→ In Progress"}):e(s,{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},t.id)})})]})})]})]})}export{V as Timeline};

package/dist/node/views/index.js

@@ -0,0 +1 @@
+import{XpBar as ne}from"@lssm/example.learning-journey-ui-shared";import{Button as le}from"@lssm/lib.design-system";import{Box as b}from"@lssm/lib.design-system/layout";import{H1 as me,H3 as de,P as L,Text as f}from"@lssm/lib.design-system/typography";import{Card as X,CardContent as E,CardHeader as k,CardTitle as z}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as ie}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as t,jsxs as c}from"react/jsx-runtime";function xe({track:e,progress:s,onStart:n}){let o=e.steps.length,x=s.completedStepIds.length,l=o>0?x/o*100:0,m=x===o,h=o-x,N=h*5,g=e.totalXp??e.steps.reduce((p,w)=>p+(w.xpReward??0),0)+(e.completionRewards?.xp??0);return c(b,{className:"space-y-6",children:[t(X,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:t(E,{className:"p-8",children:c(b,{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[t(b,{className:"flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg",children:t(f,{children:m?"\uD83C\uDF89":"\uD83D\uDE80"})}),c(b,{className:"flex-1",children:[t(me,{className:"font-bold text-2xl",children:e.name}),t(L,{className:"mt-1 max-w-2xl text-muted-foreground",children:e.description}),!m&&c(L,{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",N>0?`~${N} minutes`:"Less than a minute"]})]}),!m&&t(le,{size:"lg",onClick:n,children:t(f,{asChild:!0,children:t(f,{children:x>0?"Continue":"Get Started"})})})]})})}),c(b,{className:"grid gap-4 md:grid-cols-3",children:[c(X,{children:[t(k,{className:"pb-2",children:t(z,{className:"font-medium text-muted-foreground text-sm",children:t(f,{asChild:!0,children:t(f,{children:"Progress"})})})}),c(E,{children:[c(b,{className:"font-bold text-3xl",children:[Math.round(l),t(f,{asChild:!0,children:t(f,{children:"%"})})]}),t(ie,{value:l,className:"mt-2 h-2"}),c(L,{className:"mt-2 text-muted-foreground text-sm",children:[x," of ",o," steps completed"]})]})]}),c(X,{children:[t(k,{className:"pb-2",children:t(z,{className:"font-medium text-muted-foreground text-sm",children:t(f,{asChild:!0,children:t(f,{children:"XP Earned"})})})}),c(E,{children:[t(b,{className:"font-bold text-3xl text-blue-500",children:t(f,{children:s.xpEarned})}),t(ne,{current:s.xpEarned,max:g,showLabel:!1,size:"sm"})]})]}),c(X,{children:[t(k,{className:"pb-2",children:t(z,{className:"font-medium text-muted-foreground text-sm",children:t(f,{asChild:!0,children:t(f,{children:"Time Remaining"})})})}),c(E,{children:[t(b,{className:"font-bold text-3xl",children:t(f,{children:m?"✓":`~${N}m`})}),t(L,{className:"mt-2 text-muted-foreground text-sm",children:m?"All done!":`${h} steps to go`})]})]})]}),c(X,{children:[t(k,{children:c(z,{className:"flex items-center gap-2",children:[t(f,{children:"\uD83D\uDCCB"}),t(f,{children:"Your Journey"})]})}),t(E,{children:t(b,{className:"space-y-3",children:e.steps.map((p,w)=>{let H=s.completedStepIds.includes(p.id),R=!H&&e.steps.slice(0,w).every((ae)=>s.completedStepIds.includes(ae.id));return c(b,{className:"flex items-center gap-4 rounded-lg border p-3",children:[t(b,{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${H?"bg-green-500 text-white":R?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:t(f,{children:H?"✓":w+1})}),t(b,{className:"min-w-0 flex-1",children:t(L,{className:`font-medium ${H?"text-green-500":R?"text-foreground":"text-muted-foreground"}`,children:p.title})}),p.xpReward&&c(f,{className:"text-muted-foreground text-sm",children:["+",p.xpReward," XP"]})]},p.id)})})})]}),m&&t(X,{className:"border-green-500/50 bg-green-500/5",children:c(E,{className:"flex items-center gap-4 p-6",children:[t(b,{className:"text-4xl",children:t(f,{children:"\uD83C\uDF89"})}),c(b,{children:[t(de,{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),c(L,{className:"text-muted-foreground",children:["You've completed all ",o," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as ce,XpBar as ue}from"@lssm/example.learning-journey-ui-shared";import{Box as u}from"@lssm/lib.design-system/layout";import{P as pe,Text as i}from"@lssm/lib.design-system/typography";import{Card as K,CardContent as Y,CardHeader as A,CardTitle as D}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as fe}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as r,jsxs as a}from"react/jsx-runtime";function ge({track:e,progress:s}){let n=e.steps.length,o=s.completedStepIds.length,x=n>0?o/n*100:0,l=e.totalXp??e.steps.reduce((N,g)=>N+(g.xpReward??0),0)+(e.completionRewards?.xp??0),m=n-o,h=m*5;return a(u,{className:"space-y-6",children:[a(K,{children:[r(A,{children:a(D,{className:"flex items-center gap-2",children:[r(i,{children:"\uD83D\uDCC8"}),r(i,{children:"Your Progress"})]})}),a(Y,{className:"space-y-6",children:[r(u,{className:"flex items-center justify-center",children:a(u,{className:"relative flex h-40 w-40 items-center justify-center",children:[a("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[r("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),r("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${x*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),a(u,{className:"text-center",children:[a(u,{className:"font-bold text-3xl",children:[Math.round(x),r(i,{asChild:!0,children:r(i,{children:"%"})})]}),r(u,{className:"text-muted-foreground text-sm",children:r(i,{children:"Complete"})})]})]})}),a(u,{className:"grid grid-cols-3 gap-4 text-center",children:[a(u,{children:[r(u,{className:"font-bold text-2xl text-green-500",children:r(i,{children:o})}),r(u,{className:"text-muted-foreground text-sm",children:r(i,{children:"Completed"})})]}),a(u,{children:[r(u,{className:"font-bold text-2xl text-orange-500",children:r(i,{children:m})}),r(u,{className:"text-muted-foreground text-sm",children:r(i,{children:"Remaining"})})]}),a(u,{children:[r(u,{className:"font-bold text-2xl",children:a(i,{children:[h,"m"]})}),r(u,{className:"text-muted-foreground text-sm",children:r(i,{children:"Est. Time"})})]})]})]})]}),a(K,{children:[r(A,{children:a(D,{className:"flex items-center gap-2",children:[r(i,{children:"⚡"}),r(i,{children:"Experience Points"})]})}),a(Y,{className:"space-y-4",children:[a(u,{className:"flex items-baseline gap-2",children:[r(i,{className:"font-bold text-3xl text-blue-500",children:s.xpEarned}),a(i,{className:"text-muted-foreground",children:["/ ",l," XP"]})]}),r(ue,{current:s.xpEarned,max:l,showLabel:!1,size:"lg"})]})]}),a(K,{children:[r(A,{children:a(D,{className:"flex items-center gap-2",children:[r(i,{children:"\uD83C\uDFC5"}),r(i,{children:"Achievements"})]})}),a(Y,{children:[r(ce,{badges:s.badges,size:"lg"}),s.badges.length===0&&e.completionRewards?.badgeKey&&a(pe,{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',e.completionRewards.badgeKey,'" badge!']})]})]}),a(K,{children:[r(A,{children:a(D,{className:"flex items-center gap-2",children:[r(i,{children:"\uD83D\uDCCB"}),r(i,{children:"Step Details"})]})}),r(Y,{children:r(u,{className:"space-y-3",children:e.steps.map((N,g)=>{let p=s.completedStepIds.includes(N.id),w=p?100:0;return a(u,{className:"space-y-1",children:[a(u,{className:"flex items-center justify-between text-sm",children:[a(i,{className:p?"text-green-500":"text-foreground",children:[g+1,". ",N.title]}),r(i,{className:p?"text-green-500":"text-muted-foreground",children:p?"✓":"Pending"})]}),r(fe,{value:w,className:"h-1"})]},N.id)})})})]})]})}import{Box as V}from"@lssm/lib.design-system/layout";import{H2 as Ne,P as Ce,Text as F}from"@lssm/lib.design-system/typography";import{Progress as Te}from"@lssm/lib.ui-kit-web/ui/progress";import{useState as Be}from"react";import{Button as W}from"@lssm/lib.design-system";import{Box as J}from"@lssm/lib.design-system/layout";import{H4 as be,P as U,Text as j}from"@lssm/lib.design-system/typography";import{cn as M}from"@lssm/lib.ui-kit-core";import{jsx as B,jsxs as S}from"react/jsx-runtime";function G({step:e,stepNumber:s,isCompleted:n,isCurrent:o,isExpanded:x,onToggle:l,onComplete:m}){return S(J,{className:M("rounded-xl border transition-all",n&&"border-green-500/50 bg-green-500/5",o&&!n&&"border-violet-500 bg-violet-500/5",!n&&!o&&"border-border"),children:[S(W,{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:l,children:[B(J,{className:M("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",n&&"border-green-500 bg-green-500 text-white",o&&!n&&"border-violet-500 text-violet-500",!n&&!o&&"border-muted-foreground text-muted-foreground"),children:B(j,{children:n?"✓":s})}),S(J,{className:"min-w-0 flex-1",children:[B(be,{className:M("font-semibold",n&&"text-green-500",o&&!n&&"text-foreground",!n&&!o&&"text-muted-foreground"),children:e.title}),!x&&e.description&&B(U,{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&S(j,{className:M("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",n?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),B(j,{className:M("shrink-0 transition-transform",x&&"rotate-180"),children:"▼"})]}),x&&S(J,{className:"border-t px-4 py-4",children:[e.description&&B(U,{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&S(J,{className:"mb-4 rounded-lg bg-muted p-4",children:[B(U,{className:"mb-2 font-medium text-sm",children:"Instructions:"}),B(U,{className:"text-muted-foreground text-sm",children:e.instructions})]}),S(J,{className:"flex flex-wrap gap-2",children:[e.actionUrl&&B(W,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!n&&B(W,{size:"sm",onClick:m,children:B(j,{asChild:!0,children:B(j,{children:"Mark as Complete"})})})]})]})]})}import{jsx as O,jsxs as P}from"react/jsx-runtime";function he({track:e,progress:s,onStepComplete:n}){let[o,x]=Be(()=>e.steps.find((p)=>!s.completedStepIds.includes(p.id))?.id??null),l=s.completedStepIds.length,m=e.steps.length,h=m>0?l/m*100:0,N=e.steps.findIndex((g)=>!s.completedStepIds.includes(g.id));return P(V,{className:"space-y-6",children:[P(V,{className:"space-y-2",children:[P(V,{className:"flex items-center justify-between",children:[O(Ne,{className:"font-bold text-xl",children:"Complete Each Step"}),P(F,{className:"text-muted-foreground text-sm",children:[l," / ",m," completed"]})]}),O(Te,{value:h,className:"h-2"})]}),O(V,{className:"space-y-3",children:e.steps.map((g,p)=>{let w=s.completedStepIds.includes(g.id),H=p===N;return O(G,{step:g,stepNumber:p+1,isCompleted:w,isCurrent:H,isExpanded:o===g.id,onToggle:()=>x(o===g.id?null:g.id),onComplete:()=>{n?.(g.id);let R=e.steps[p+1];if(R&&!s.completedStepIds.includes(R.id))x(R.id)}},g.id)})}),e.completionRewards&&h<100&&O(V,{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:P(Ce,{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",e.completionRewards.xp&&P(F,{className:"ml-2 font-semibold text-blue-500",children:["+",e.completionRewards.xp," XP bonus"]}),e.completionRewards.badgeKey&&P(F,{className:"ml-2 font-semibold text-amber-500",children:['+ "',e.completionRewards.badgeKey,'" badge']})]})})]})}import{Box as C}from"@lssm/lib.design-system/layout";import{H2 as Se,H4 as Pe,P as ee,Text as y}from"@lssm/lib.design-system/typography";import{Card as te,CardContent as oe,CardHeader as re,CardTitle as se}from"@lssm/lib.ui-kit-web/ui/card";import{Box as v}from"@lssm/lib.design-system/layout";import{P as ye,Text as we}from"@lssm/lib.design-system/typography";import{cn as _}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as I,jsxs as Q}from"react/jsx-runtime";var q={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function Z({steps:e,completedStepIds:s,currentStepId:n}){return I(v,{className:"relative overflow-x-auto pb-4",children:I(v,{className:"flex min-w-max items-center gap-2",children:e.map((o,x)=>{let l=s.includes(o.id),m=o.id===n,h=o.metadata?.surface??"default",N=q[h]??q.default;return Q(v,{className:"flex items-center",children:[Q(v,{className:"flex flex-col items-center gap-2",children:[I(v,{className:_("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",l&&"border-green-500 bg-green-500/10",m&&!l&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!l&&!m&&"border-muted bg-muted/50"),children:I(we,{children:l?"✓":N})}),I(v,{className:"text-center",children:I(ye,{className:_("max-w-[100px] truncate font-medium text-xs",l&&"text-green-500",m&&!l&&"text-violet-500",!l&&!m&&"text-muted-foreground"),children:o.title})})]}),x<e.length-1&&I(v,{className:_("mx-2 h-1 w-8 rounded-full transition-colors",s.includes(e[x+1]?.id??"")?"bg-green-500":l?"bg-green-500/50":"bg-muted")})]},o.id)})})})}import{jsx as d,jsxs as T}from"react/jsx-runtime";function ve({track:e,progress:s}){let n=e.steps.find((o)=>!s.completedStepIds.includes(o.id))?.id??null;return T(C,{className:"space-y-6",children:[T(C,{className:"text-center",children:[d(Se,{className:"font-bold text-xl",children:"Your Learning Journey"}),d(ee,{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),T(te,{children:[d(re,{children:T(se,{className:"flex items-center gap-2",children:[d(y,{children:"\uD83D\uDDFA️"}),d(y,{children:"Journey Map"})]})}),d(oe,{children:d(Z,{steps:e.steps,completedStepIds:s.completedStepIds,currentStepId:n})})]}),T(te,{children:[d(re,{children:T(se,{className:"flex items-center gap-2",children:[d(y,{children:"\uD83D\uDCCD"}),d(y,{children:"Step by Step"})]})}),d(oe,{children:T(C,{className:"relative",children:[d(C,{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),d(C,{className:"space-y-6",children:e.steps.map((o,x)=>{let l=s.completedStepIds.includes(o.id),m=o.id===n,h=o.metadata?.surface??"general";return T(C,{className:"relative flex gap-4 pl-2",children:[d(C,{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${l?"border-green-500 bg-green-500 text-white":m?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:d(y,{children:l?"✓":x+1})}),d(C,{className:"flex-1 pb-2",children:T(C,{className:"rounded-lg border p-4",children:[T(C,{className:"flex items-start justify-between gap-2",children:[T(C,{children:[T(C,{className:"flex items-center gap-2",children:[d(Pe,{className:`font-semibold ${l?"text-green-500":m?"text-blue-500":"text-foreground"}`,children:o.title}),d(y,{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:h})]}),d(ee,{className:"mt-1 text-muted-foreground text-sm",children:o.description})]}),o.xpReward&&T(y,{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${l?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",o.xpReward," XP"]})]}),d(C,{className:"mt-3 text-xs",children:l?d(y,{className:"text-green-500",children:"✓ Completed"}):m?d(y,{className:"text-blue-500",children:"→ In Progress"}):d(y,{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},o.id)})})]})})]})]})}export{xe as Overview,ge as Progress,he as Steps,ve as Timeline};

package/dist/views/Overview.d.ts

@@ -1,15 +1,6 @@
-import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
-
-//#region src/views/Overview.d.ts
+import type { LearningViewProps } from '@lssm/example.learning-journey-ui-shared';
 interface OnboardingOverviewProps extends LearningViewProps {
-  onStart?: () => void;
+    onStart?: () => void;
 }
-declare function Overview({
-  track,
-  progress,
-  onStart
-}: OnboardingOverviewProps): react_jsx_runtime3.JSX.Element;
-//#endregion
-export { Overview };
-//# sourceMappingURL=Overview.d.ts.map
+export declare function Overview({ track, progress, onStart, }: OnboardingOverviewProps): import("react").JSX.Element;
+export {};

package/dist/views/Overview.js

@@ -1,180 +1,3 @@
 'use client';
-
-import { Card, CardContent, CardHeader, CardTitle } from "@lssm/lib.ui-kit-web/ui/card";
-import { XpBar } from "@lssm/example.learning-journey-ui-shared";
-import { Button } from "@lssm/lib.design-system";
-import { Progress } from "@lssm/lib.ui-kit-web/ui/progress";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/views/Overview.tsx
-function Overview({ track, progress, onStart }) {
-	const totalSteps = track.steps.length;
-	const completedSteps = progress.completedStepIds.length;
-	const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
-	const isComplete = completedSteps === totalSteps;
-	const remainingSteps = totalSteps - completedSteps;
-	const estimatedMinutes = remainingSteps * 5;
-	const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-6",
-		children: [
-			/* @__PURE__ */ jsx(Card, {
-				className: "overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",
-				children: /* @__PURE__ */ jsx(CardContent, {
-					className: "p-8",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col items-center gap-6 text-center md:flex-row md:text-left",
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: "flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg",
-								children: isComplete ? "🎉" : "🚀"
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: "flex-1",
-								children: [
-									/* @__PURE__ */ jsx("h1", {
-										className: "text-2xl font-bold",
-										children: track.name
-									}),
-									/* @__PURE__ */ jsx("p", {
-										className: "text-muted-foreground mt-1 max-w-2xl",
-										children: track.description
-									}),
-									!isComplete && /* @__PURE__ */ jsxs("p", {
-										className: "text-muted-foreground mt-3 text-sm",
-										children: [
-											"⏱️ Estimated time:",
-											" ",
-											estimatedMinutes > 0 ? `~${estimatedMinutes} minutes` : "Less than a minute"
-										]
-									})
-								]
-							}),
-							!isComplete && /* @__PURE__ */ jsx(Button, {
-								size: "lg",
-								onClick: onStart,
-								children: completedSteps > 0 ? "Continue" : "Get Started"
-							})
-						]
-					})
-				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "grid gap-4 md:grid-cols-3",
-				children: [
-					/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
-						className: "pb-2",
-						children: /* @__PURE__ */ jsx(CardTitle, {
-							className: "text-muted-foreground text-sm font-medium",
-							children: "Progress"
-						})
-					}), /* @__PURE__ */ jsxs(CardContent, { children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "text-3xl font-bold",
-							children: [Math.round(percentComplete), "%"]
-						}),
-						/* @__PURE__ */ jsx(Progress, {
-							value: percentComplete,
-							className: "mt-2 h-2"
-						}),
-						/* @__PURE__ */ jsxs("p", {
-							className: "text-muted-foreground mt-2 text-sm",
-							children: [
-								completedSteps,
-								" of ",
-								totalSteps,
-								" steps completed"
-							]
-						})
-					] })] }),
-					/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
-						className: "pb-2",
-						children: /* @__PURE__ */ jsx(CardTitle, {
-							className: "text-muted-foreground text-sm font-medium",
-							children: "XP Earned"
-						})
-					}), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx("div", {
-						className: "text-3xl font-bold text-blue-500",
-						children: progress.xpEarned
-					}), /* @__PURE__ */ jsx(XpBar, {
-						current: progress.xpEarned,
-						max: totalXp,
-						showLabel: false,
-						size: "sm"
-					})] })] }),
-					/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
-						className: "pb-2",
-						children: /* @__PURE__ */ jsx(CardTitle, {
-							className: "text-muted-foreground text-sm font-medium",
-							children: "Time Remaining"
-						})
-					}), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx("div", {
-						className: "text-3xl font-bold",
-						children: isComplete ? "✓" : `~${estimatedMinutes}m`
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground mt-2 text-sm",
-						children: isComplete ? "All done!" : `${remainingSteps} steps to go`
-					})] })] })
-				]
-			}),
-			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", { children: "📋" }), /* @__PURE__ */ jsx("span", { children: "Your Journey" })]
-			}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
-				className: "space-y-3",
-				children: track.steps.map((step, index) => {
-					const isStepCompleted = progress.completedStepIds.includes(step.id);
-					const isCurrent = !isStepCompleted && track.steps.slice(0, index).every((s) => progress.completedStepIds.includes(s.id));
-					return /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-4 rounded-lg border p-3",
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-semibold ${isStepCompleted ? "bg-green-500 text-white" : isCurrent ? "bg-blue-500 text-white" : "bg-muted text-muted-foreground"}`,
-								children: isStepCompleted ? "✓" : index + 1
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "min-w-0 flex-1",
-								children: /* @__PURE__ */ jsx("p", {
-									className: `font-medium ${isStepCompleted ? "text-green-500" : isCurrent ? "text-foreground" : "text-muted-foreground"}`,
-									children: step.title
-								})
-							}),
-							step.xpReward && /* @__PURE__ */ jsxs("span", {
-								className: "text-muted-foreground text-sm",
-								children: [
-									"+",
-									step.xpReward,
-									" XP"
-								]
-							})
-						]
-					}, step.id);
-				})
-			}) })] }),
-			isComplete && /* @__PURE__ */ jsx(Card, {
-				className: "border-green-500/50 bg-green-500/5",
-				children: /* @__PURE__ */ jsxs(CardContent, {
-					className: "flex items-center gap-4 p-6",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "text-4xl",
-						children: "🎉"
-					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
-						className: "text-lg font-semibold text-green-500",
-						children: "Onboarding Complete!"
-					}), /* @__PURE__ */ jsxs("p", {
-						className: "text-muted-foreground",
-						children: [
-							"You've completed all ",
-							totalSteps,
-							" steps. Welcome aboard!"
-						]
-					})] })]
-				})
-			})
-		]
-	});
-}
-
-//#endregion
-export { Overview };
-//# sourceMappingURL=Overview.js.map
+// @bun
+import{XpBar as P}from"@lssm/example.learning-journey-ui-shared";import{Button as v}from"@lssm/lib.design-system";import{Box as a}from"@lssm/lib.design-system/layout";import{H1 as y,H3 as H,P as l,Text as o}from"@lssm/lib.design-system/typography";import{Card as n,CardContent as x,CardHeader as f,CardTitle as g}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as S}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as e,jsxs as t}from"react/jsx-runtime";function j({track:s,progress:i,onStart:h}){let m=s.steps.length,c=i.completedStepIds.length,N=m>0?c/m*100:0,d=c===m,b=m-c,C=b*5,w=s.totalXp??s.steps.reduce((r,u)=>r+(u.xpReward??0),0)+(s.completionRewards?.xp??0);return t(a,{className:"space-y-6",children:[e(n,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:e(x,{className:"p-8",children:t(a,{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[e(a,{className:"flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg",children:e(o,{children:d?"\uD83C\uDF89":"\uD83D\uDE80"})}),t(a,{className:"flex-1",children:[e(y,{className:"font-bold text-2xl",children:s.name}),e(l,{className:"mt-1 max-w-2xl text-muted-foreground",children:s.description}),!d&&t(l,{className:"mt-3 text-muted-foreground text-sm",children:["\u23F1\uFE0F Estimated time:"," ",C>0?`~${C} minutes`:"Less than a minute"]})]}),!d&&e(v,{size:"lg",onClick:h,children:e(o,{asChild:!0,children:e(o,{children:c>0?"Continue":"Get Started"})})})]})})}),t(a,{className:"grid gap-4 md:grid-cols-3",children:[t(n,{children:[e(f,{className:"pb-2",children:e(g,{className:"font-medium text-muted-foreground text-sm",children:e(o,{asChild:!0,children:e(o,{children:"Progress"})})})}),t(x,{children:[t(a,{className:"font-bold text-3xl",children:[Math.round(N),e(o,{asChild:!0,children:e(o,{children:"%"})})]}),e(S,{value:N,className:"mt-2 h-2"}),t(l,{className:"mt-2 text-muted-foreground text-sm",children:[c," of ",m," steps completed"]})]})]}),t(n,{children:[e(f,{className:"pb-2",children:e(g,{className:"font-medium text-muted-foreground text-sm",children:e(o,{asChild:!0,children:e(o,{children:"XP Earned"})})})}),t(x,{children:[e(a,{className:"font-bold text-3xl text-blue-500",children:e(o,{children:i.xpEarned})}),e(P,{current:i.xpEarned,max:w,showLabel:!1,size:"sm"})]})]}),t(n,{children:[e(f,{className:"pb-2",children:e(g,{className:"font-medium text-muted-foreground text-sm",children:e(o,{asChild:!0,children:e(o,{children:"Time Remaining"})})})}),t(x,{children:[e(a,{className:"font-bold text-3xl",children:e(o,{children:d?"\u2713":`~${C}m`})}),e(l,{className:"mt-2 text-muted-foreground text-sm",children:d?"All done!":`${b} steps to go`})]})]})]}),t(n,{children:[e(f,{children:t(g,{className:"flex items-center gap-2",children:[e(o,{children:"\uD83D\uDCCB"}),e(o,{children:"Your Journey"})]})}),e(x,{children:e(a,{className:"space-y-3",children:s.steps.map((r,u)=>{let p=i.completedStepIds.includes(r.id),T=!p&&s.steps.slice(0,u).every((B)=>i.completedStepIds.includes(B.id));return t(a,{className:"flex items-center gap-4 rounded-lg border p-3",children:[e(a,{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${p?"bg-green-500 text-white":T?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:e(o,{children:p?"\u2713":u+1})}),e(a,{className:"min-w-0 flex-1",children:e(l,{className:`font-medium ${p?"text-green-500":T?"text-foreground":"text-muted-foreground"}`,children:r.title})}),r.xpReward&&t(o,{className:"text-muted-foreground text-sm",children:["+",r.xpReward," XP"]})]},r.id)})})})]}),d&&e(n,{className:"border-green-500/50 bg-green-500/5",children:t(x,{className:"flex items-center gap-4 p-6",children:[e(a,{className:"text-4xl",children:e(o,{children:"\uD83C\uDF89"})}),t(a,{children:[e(H,{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),t(l,{className:"text-muted-foreground",children:["You've completed all ",m," steps. Welcome aboard!"]})]})]})})]})}export{j as Overview};

package/dist/views/Progress.d.ts

@@ -1,11 +1,3 @@
-import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
-
-//#region src/views/Progress.d.ts
-declare function ProgressView({
-  track,
-  progress
-}: LearningViewProps): react_jsx_runtime4.JSX.Element;
-//#endregion
-export { ProgressView as Progress, ProgressView };
-//# sourceMappingURL=Progress.d.ts.map
+import type { LearningViewProps } from '@lssm/example.learning-journey-ui-shared';
+export declare function ProgressView({ track, progress }: LearningViewProps): import("react").JSX.Element;
+export { ProgressView as Progress };

package/dist/views/Progress.js

@@ -1,161 +1,3 @@
 'use client';
-
-import { Card, CardContent, CardHeader, CardTitle } from "@lssm/lib.ui-kit-web/ui/card";
-import { BadgeDisplay, XpBar } from "@lssm/example.learning-journey-ui-shared";
-import { Progress } from "@lssm/lib.ui-kit-web/ui/progress";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/views/Progress.tsx
-function ProgressView({ track, progress }) {
-	const totalSteps = track.steps.length;
-	const completedSteps = progress.completedStepIds.length;
-	const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
-	const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
-	const remainingSteps = totalSteps - completedSteps;
-	const estimatedMinutes = remainingSteps * 5;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-6",
-		children: [
-			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", { children: "📈" }), /* @__PURE__ */ jsx("span", { children: "Your Progress" })]
-			}) }), /* @__PURE__ */ jsxs(CardContent, {
-				className: "space-y-6",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex items-center justify-center",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "relative flex h-40 w-40 items-center justify-center",
-						children: [/* @__PURE__ */ jsxs("svg", {
-							className: "absolute h-full w-full -rotate-90",
-							viewBox: "0 0 100 100",
-							children: [/* @__PURE__ */ jsx("circle", {
-								cx: "50",
-								cy: "50",
-								r: "45",
-								fill: "none",
-								strokeWidth: "8",
-								className: "stroke-muted"
-							}), /* @__PURE__ */ jsx("circle", {
-								cx: "50",
-								cy: "50",
-								r: "45",
-								fill: "none",
-								strokeWidth: "8",
-								strokeLinecap: "round",
-								strokeDasharray: `${percentComplete * 2.83} 283`,
-								className: "stroke-blue-500 transition-all duration-500"
-							})]
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "text-center",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "text-3xl font-bold",
-								children: [Math.round(percentComplete), "%"]
-							}), /* @__PURE__ */ jsx("div", {
-								className: "text-muted-foreground text-sm",
-								children: "Complete"
-							})]
-						})]
-					})
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "grid grid-cols-3 gap-4 text-center",
-					children: [
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-							className: "text-2xl font-bold text-green-500",
-							children: completedSteps
-						}), /* @__PURE__ */ jsx("div", {
-							className: "text-muted-foreground text-sm",
-							children: "Completed"
-						})] }),
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-							className: "text-2xl font-bold text-orange-500",
-							children: remainingSteps
-						}), /* @__PURE__ */ jsx("div", {
-							className: "text-muted-foreground text-sm",
-							children: "Remaining"
-						})] }),
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-							className: "text-2xl font-bold",
-							children: [estimatedMinutes, "m"]
-						}), /* @__PURE__ */ jsx("div", {
-							className: "text-muted-foreground text-sm",
-							children: "Est. Time"
-						})] })
-					]
-				})]
-			})] }),
-			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", { children: "⚡" }), /* @__PURE__ */ jsx("span", { children: "Experience Points" })]
-			}) }), /* @__PURE__ */ jsxs(CardContent, {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-baseline gap-2",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-3xl font-bold text-blue-500",
-						children: progress.xpEarned
-					}), /* @__PURE__ */ jsxs("span", {
-						className: "text-muted-foreground",
-						children: [
-							"/ ",
-							totalXp,
-							" XP"
-						]
-					})]
-				}), /* @__PURE__ */ jsx(XpBar, {
-					current: progress.xpEarned,
-					max: totalXp,
-					showLabel: false,
-					size: "lg"
-				})]
-			})] }),
-			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", { children: "🏅" }), /* @__PURE__ */ jsx("span", { children: "Achievements" })]
-			}) }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx(BadgeDisplay, {
-				badges: progress.badges,
-				size: "lg"
-			}), progress.badges.length === 0 && track.completionRewards?.badgeKey && /* @__PURE__ */ jsxs("p", {
-				className: "text-muted-foreground text-sm",
-				children: [
-					"Complete all steps to earn the \"",
-					track.completionRewards.badgeKey,
-					"\" badge!"
-				]
-			})] })] }),
-			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", { children: "📋" }), /* @__PURE__ */ jsx("span", { children: "Step Details" })]
-			}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
-				className: "space-y-3",
-				children: track.steps.map((step, index) => {
-					const isCompleted = progress.completedStepIds.includes(step.id);
-					const stepProgress = isCompleted ? 100 : 0;
-					return /* @__PURE__ */ jsxs("div", {
-						className: "space-y-1",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center justify-between text-sm",
-							children: [/* @__PURE__ */ jsxs("span", {
-								className: isCompleted ? "text-green-500" : "text-foreground",
-								children: [
-									index + 1,
-									". ",
-									step.title
-								]
-							}), /* @__PURE__ */ jsx("span", {
-								className: isCompleted ? "text-green-500" : "text-muted-foreground",
-								children: isCompleted ? "✓" : "Pending"
-							})]
-						}), /* @__PURE__ */ jsx(Progress, {
-							value: stepProgress,
-							className: "h-1"
-						})]
-					}, step.id);
-				})
-			}) })] })
-		]
-	});
-}
-
-//#endregion
-export { ProgressView as Progress, ProgressView };
-//# sourceMappingURL=Progress.js.map
+// @bun
+import{BadgeDisplay as B,XpBar as b}from"@lssm/example.learning-journey-ui-shared";import{Box as a}from"@lssm/lib.design-system/layout";import{P as y,Text as s}from"@lssm/lib.design-system/typography";import{Card as n,CardContent as m,CardHeader as d,CardTitle as c}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as h}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as e,jsxs as t}from"react/jsx-runtime";function R({track:o,progress:r}){let i=o.steps.length,p=r.completedStepIds.length,u=i>0?p/i*100:0,f=o.totalXp??o.steps.reduce((l,g)=>l+(g.xpReward??0),0)+(o.completionRewards?.xp??0),N=i-p,C=N*5;return t(a,{className:"space-y-6",children:[t(n,{children:[e(d,{children:t(c,{className:"flex items-center gap-2",children:[e(s,{children:"\uD83D\uDCC8"}),e(s,{children:"Your Progress"})]})}),t(m,{className:"space-y-6",children:[e(a,{className:"flex items-center justify-center",children:t(a,{className:"relative flex h-40 w-40 items-center justify-center",children:[t("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[e("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),e("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${u*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),t(a,{className:"text-center",children:[t(a,{className:"font-bold text-3xl",children:[Math.round(u),e(s,{asChild:!0,children:e(s,{children:"%"})})]}),e(a,{className:"text-muted-foreground text-sm",children:e(s,{children:"Complete"})})]})]})}),t(a,{className:"grid grid-cols-3 gap-4 text-center",children:[t(a,{children:[e(a,{className:"font-bold text-2xl text-green-500",children:e(s,{children:p})}),e(a,{className:"text-muted-foreground text-sm",children:e(s,{children:"Completed"})})]}),t(a,{children:[e(a,{className:"font-bold text-2xl text-orange-500",children:e(s,{children:N})}),e(a,{className:"text-muted-foreground text-sm",children:e(s,{children:"Remaining"})})]}),t(a,{children:[e(a,{className:"font-bold text-2xl",children:t(s,{children:[C,"m"]})}),e(a,{className:"text-muted-foreground text-sm",children:e(s,{children:"Est. Time"})})]})]})]})]}),t(n,{children:[e(d,{children:t(c,{className:"flex items-center gap-2",children:[e(s,{children:"\u26A1"}),e(s,{children:"Experience Points"})]})}),t(m,{className:"space-y-4",children:[t(a,{className:"flex items-baseline gap-2",children:[e(s,{className:"font-bold text-3xl text-blue-500",children:r.xpEarned}),t(s,{className:"text-muted-foreground",children:["/ ",f," XP"]})]}),e(b,{current:r.xpEarned,max:f,showLabel:!1,size:"lg"})]})]}),t(n,{children:[e(d,{children:t(c,{className:"flex items-center gap-2",children:[e(s,{children:"\uD83C\uDFC5"}),e(s,{children:"Achievements"})]})}),t(m,{children:[e(B,{badges:r.badges,size:"lg"}),r.badges.length===0&&o.completionRewards?.badgeKey&&t(y,{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',o.completionRewards.badgeKey,'" badge!']})]})]}),t(n,{children:[e(d,{children:t(c,{className:"flex items-center gap-2",children:[e(s,{children:"\uD83D\uDCCB"}),e(s,{children:"Step Details"})]})}),e(m,{children:e(a,{className:"space-y-3",children:o.steps.map((l,g)=>{let x=r.completedStepIds.includes(l.id),T=x?100:0;return t(a,{className:"space-y-1",children:[t(a,{className:"flex items-center justify-between text-sm",children:[t(s,{className:x?"text-green-500":"text-foreground",children:[g+1,". ",l.title]}),e(s,{className:x?"text-green-500":"text-muted-foreground",children:x?"\u2713":"Pending"})]}),e(h,{value:T,className:"h-1"})]},l.id)})})})]})]})}export{R as Progress,R as ProgressView};

package/dist/views/Steps.d.ts

@@ -1,12 +1,2 @@
-import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
-
-//#region src/views/Steps.d.ts
-declare function Steps({
-  track,
-  progress,
-  onStepComplete
-}: LearningViewProps): react_jsx_runtime5.JSX.Element;
-//#endregion
-export { Steps };
-//# sourceMappingURL=Steps.d.ts.map
+import type { LearningViewProps } from '@lssm/example.learning-journey-ui-shared';
+export declare function Steps({ track, progress, onStepComplete }: LearningViewProps): import("react").JSX.Element;