@contractspec/example.learning-journey-ui-onboarding 3.7.19 → 4.0.0

package/dist/browser/views/index.js

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

package/dist/components/JourneyMap.d.ts

@@ -1,6 +1,6 @@
-import type { LearningJourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
+import type { JourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
 interface JourneyMapProps {
-    steps: LearningJourneyStepSpec[];
+    steps: JourneyStepSpec[];
     completedStepIds: string[];
     currentStepId?: string | null;
 }

package/dist/components/StepChecklist.d.ts

@@ -1,6 +1,6 @@
-import type { LearningJourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
+import type { JourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
 interface StepChecklistProps {
-    step: LearningJourneyStepSpec;
+    step: JourneyStepSpec;
     stepNumber: number;
     isCompleted: boolean;
     isCurrent: boolean;

package/dist/components/StepChecklist.js

@@ -1,2 +1,2 @@
 // @bun
-import{Button as d}from"@contractspec/lib.design-system";import{cn as a}from"@contractspec/lib.ui-kit-core";import{jsx as o,jsxs as r}from"react/jsx-runtime";function g({step:e,stepNumber:l,isCompleted:t,isCurrent:n,isExpanded:i,onToggle:c,onComplete:m}){return r("div",{className:a("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",n&&!t&&"border-violet-500 bg-violet-500/5",!t&&!n&&"border-border"),children:[r("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:c,children:[o("div",{className:a("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",n&&!t&&"border-violet-500 text-violet-500",!t&&!n&&"border-muted-foreground text-muted-foreground"),children:t?"\u2713":l}),r("div",{className:"min-w-0 flex-1",children:[o("h4",{className:a("font-semibold",t&&"text-green-500",n&&!t&&"text-foreground",!t&&!n&&"text-muted-foreground"),children:e.title}),!i&&e.description&&o("p",{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&r("span",{className:a("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("span",{className:a("shrink-0 transition-transform",i&&"rotate-180"),children:"\u25BC"})]}),i&&r("div",{className:"border-t px-4 py-4",children:[e.description&&o("p",{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&r("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[o("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),o("p",{className:"text-muted-foreground text-sm",children:e.instructions})]}),r("div",{className:"flex flex-wrap gap-2",children:[e.actionUrl&&o(d,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&o(d,{size:"sm",onClick:m,children:"Mark as Complete"})]})]})]})}export{g as StepChecklist};
+import{Button as d}from"@contractspec/lib.design-system";import{cn as a}from"@contractspec/lib.ui-kit-core";import{jsx as o,jsxs as r}from"react/jsx-runtime";function f({step:e,stepNumber:l,isCompleted:t,isCurrent:n,isExpanded:i,onToggle:c,onComplete:m}){return r("div",{className:a("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",n&&!t&&"border-violet-500 bg-violet-500/5",!t&&!n&&"border-border"),children:[r("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:c,children:[o("div",{className:a("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",n&&!t&&"border-violet-500 text-violet-500",!t&&!n&&"border-muted-foreground text-muted-foreground"),children:t?"\u2713":l}),r("div",{className:"min-w-0 flex-1",children:[o("h4",{className:a("font-semibold",t&&"text-green-500",n&&!t&&"text-foreground",!t&&!n&&"text-muted-foreground"),children:e.title}),!i&&e.description&&o("p",{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&r("span",{className:a("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("span",{className:a("shrink-0 transition-transform",i&&"rotate-180"),children:"\u25BC"})]}),i&&r("div",{className:"border-t px-4 py-4",children:[e.description&&o("p",{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&r("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[o("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),o("p",{className:"text-muted-foreground text-sm",children:e.instructions})]}),r("div",{className:"flex flex-wrap gap-2",children:[e.actionUrl&&o(d,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&o(d,{size:"sm",onClick:m,children:"Mark as Complete"})]})]})]})}export{f as StepChecklist};

package/dist/index.js

@@ -1,5 +1,5 @@
 // @bun
-import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as E,CardHeader as O,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as K}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,q=y.completedStepIds.length,v=N>0?q/N*100:0,h=q===N,U=N-q,R=U*5,Q=f.totalXp??f.steps.reduce((G,Z)=>G+(Z.xpReward??0),0)+(f.completionRewards?.xpBonus??0);return K("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(E,{className:"p-8",children:K("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("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:h?"\uD83C\uDF89":"\uD83D\uDE80"}),K("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!h&&K("p",{className:"mt-3 text-muted-foreground text-sm",children:["\u23F1\uFE0F Estimated time:"," ",R>0?`~${R} minutes`:"Less than a minute"]})]}),!h&&z(Nf,{size:"lg",onClick:b,children:q>0?"Continue":"Get Started"})]})})}),K("div",{className:"grid gap-4 md:grid-cols-3",children:[K(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),K(E,{children:[K("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),K("p",{className:"mt-2 text-muted-foreground text-sm",children:[q," of ",N," steps completed"]})]})]}),K(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),K(E,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:Q,showLabel:!1,size:"sm"})]})]}),K(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),K(E,{children:[z("div",{className:"font-bold text-3xl",children:h?"\u2713":`~${R}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:h?"All done!":`${U} steps to go`})]})]})]}),K(M,{children:[z(O,{children:K(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(E,{children:z("div",{className:"space-y-3",children:f.steps.map((G,Z)=>{let $=y.completedStepIds.includes(G.id),D=!$&&f.steps.slice(0,Z).every((W)=>y.completedStepIds.includes(W.id));return K("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${$?"bg-green-500 text-white":D?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:$?"\u2713":Z+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${$?"text-green-500":D?"text-foreground":"text-muted-foreground"}`,children:G.title})}),G.xpReward&&K("span",{className:"text-muted-foreground text-sm",children:["+",G.xpReward," XP"]})]},G.id)})})})]}),h&&z(M,{className:"border-green-500/50 bg-green-500/5",children:K(E,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),K("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),K("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as L,jsxs as J}from"react/jsx-runtime";function l({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,q=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((R,Q)=>R+(Q.xpReward??0),0)+(f.completionRewards?.xpBonus??0),h=b-N,U=h*5;return J("div",{className:"space-y-6",children:[J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"\uD83D\uDCC8"}),L("span",{children:"Your Progress"})]})}),J(w,{className:"space-y-6",children:[L("div",{className:"flex items-center justify-center",children:J("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[J("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[L("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),L("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${q*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),J("div",{className:"text-center",children:[J("div",{className:"font-bold text-3xl",children:[Math.round(q),"%"]}),L("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),J("div",{className:"grid grid-cols-3 gap-4 text-center",children:[J("div",{children:[L("div",{className:"font-bold text-2xl text-green-500",children:N}),L("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),J("div",{children:[L("div",{className:"font-bold text-2xl text-orange-500",children:h}),L("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),J("div",{children:[J("div",{className:"font-bold text-2xl",children:[U,"m"]}),L("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"\u26A1"}),L("span",{children:"Experience Points"})]})}),J(w,{className:"space-y-4",children:[J("div",{className:"flex items-baseline gap-2",children:[L("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),J("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),L(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"\uD83C\uDFC5"}),L("span",{children:"Achievements"})]})}),J(w,{children:[L(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&J("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"\uD83D\uDCCB"}),L("span",{children:"Step Details"})]})}),L(w,{children:L("div",{className:"space-y-3",children:f.steps.map((R,Q)=>{let G=y.completedStepIds.includes(R.id),Z=G?100:0;return J("div",{className:"space-y-1",children:[J("div",{className:"flex items-center justify-between text-sm",children:[J("span",{className:G?"text-green-500":"text-foreground",children:[Q+1,". ",R.title]}),L("span",{className:G?"text-green-500":"text-muted-foreground",children:G?"\u2713":"Pending"})]}),L(zf,{value:Z,className:"h-1"})]},R.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as _,jsxs as A}from"react/jsx-runtime";function S({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:q,onToggle:v,onComplete:h}){return A("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[A("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[_("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"\u2713":y}),A("div",{className:"min-w-0 flex-1",children:[_("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!q&&f.description&&_("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&A("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),_("span",{className:P("shrink-0 transition-transform",q&&"rotate-180"),children:"\u25BC"})]}),q&&A("div",{className:"border-t px-4 py-4",children:[f.description&&_("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&A("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[_("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),_("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),A("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&_(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&_(C,{size:"sm",onClick:h,children:"Mark as Complete"})]})]})]})}import{Progress as Lf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as hf}from"react";import{jsx as m,jsxs as X}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,q]=hf(()=>{return f.steps.find((G)=>!y.completedStepIds.includes(G.id))?.id??null}),v=y.completedStepIds.length,h=f.steps.length,U=h>0?v/h*100:0,R=f.steps.findIndex((Q)=>!y.completedStepIds.includes(Q.id));return X("div",{className:"space-y-6",children:[X("div",{className:"space-y-2",children:[X("div",{className:"flex items-center justify-between",children:[m("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),X("span",{className:"text-muted-foreground text-sm",children:[v," / ",h," completed"]})]}),m(Lf,{value:U,className:"h-2"})]}),m("div",{className:"space-y-3",children:f.steps.map((Q,G)=>{let Z=y.completedStepIds.includes(Q.id),$=G===R;return m(S,{step:Q,stepNumber:G+1,isCompleted:Z,isCurrent:$,isExpanded:N===Q.id,onToggle:()=>q(N===Q.id?null:Q.id),onComplete:()=>{b?.(Q.id);let D=f.steps[G+1];if(D&&!y.completedStepIds.includes(D.id))q(D.id)}},Q.id)})}),f.completionRewards&&U<100&&m("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:X("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xpBonus&&X("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xpBonus," XP bonus"]}),f.completionRewards.badgeKey&&X("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as F,jsxs as p}from"react/jsx-runtime";var x={templates:"\uD83D\uDCCB","spec-editor":"\u270F\uFE0F",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"\u2699\uFE0F",default:"\uD83D\uDCCD"};function n({steps:f,completedStepIds:y,currentStepId:b}){return F("div",{className:"relative overflow-x-auto pb-4",children:F("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,q)=>{let v=y.includes(N.id),h=N.id===b,U=N.metadata?.surface??"default",R=x[U]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[F("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",h&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!h&&"border-muted bg-muted/50"),children:v?"\u2713":R}),F("div",{className:"text-center",children:F("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",h&&!v&&"text-violet-500",!v&&!h&&"text-muted-foreground"),children:N.title})})]}),q<f.length-1&&F("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[q+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as B,jsxs as Y}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return Y("div",{className:"space-y-6",children:[Y("div",{className:"text-center",children:[B("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),B("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),Y(j,{children:[B(t,{children:Y(e,{className:"flex items-center gap-2",children:[B("span",{children:"\uD83D\uDDFA\uFE0F"}),B("span",{children:"Journey Map"})]})}),B(r,{children:B(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),Y(j,{children:[B(t,{children:Y(e,{className:"flex items-center gap-2",children:[B("span",{children:"\uD83D\uDCCD"}),B("span",{children:"Step by Step"})]})}),B(r,{children:Y("div",{className:"relative",children:[B("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),B("div",{className:"space-y-6",children:f.steps.map((N,q)=>{let v=y.completedStepIds.includes(N.id),h=N.id===b,U=N.metadata?.surface??"general";return Y("div",{className:"relative flex gap-4 pl-2",children:[B("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":h?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"\u2713":q+1}),B("div",{className:"flex-1 pb-2",children:Y("div",{className:"rounded-lg border p-4",children:[Y("div",{className:"flex items-start justify-between gap-2",children:[Y("div",{children:[Y("div",{className:"flex items-center gap-2",children:[B("h4",{className:`font-semibold ${v?"text-green-500":h?"text-blue-500":"text-foreground"}`,children:N.title}),B("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:U})]}),B("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&Y("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),B("div",{className:"mt-3 text-xs",children:v?B("span",{className:"text-green-500",children:"\u2713 Completed"}):h?B("span",{className:"text-blue-500",children:"\u2192 In Progress"}):B("span",{className:"text-muted-foreground",children:"\u25CB Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as Jf,ViewTabs as qf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Bf,CardContent as Gf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Kf}from"react";import{jsx as u,jsxs as Rf}from"react/jsx-runtime";function Qf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:q="overview"}){let[v,h]=Kf(q),{progress:U,completeStep:R}=Jf(f),Q=y??U,G=a((W)=>{h(W),N?.(W)},[N]),Z=a((W)=>{if(b)b(W);else R(W)},[b,R]),$=a(()=>{h("steps"),N?.("steps")},[N]);return Rf("div",{className:"space-y-6",children:[u(Bf,{children:u(Gf,{className:"p-4",children:u(qf,{currentView:v,onViewChange:G})})}),(()=>{let W={track:f,progress:Q,onStepComplete:Z};switch(v){case"overview":return u(H,{...W,onStart:$});case"steps":return u(k,{...W});case"progress":return u(l,{...W});case"timeline":return u(d,{...W});default:return u(H,{...W,onStart:$})}})()]})}import{Button as Uf}from"@contractspec/lib.design-system";import{useState as Wf}from"react";import{jsx as T,jsxs as c,Fragment as Yf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,q]=Wf(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[T("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Yf,{children:[T("span",{className:"text-muted-foreground",children:"\u2022"}),T("span",{className:"text-sm",children:b})]})]}),T(Uf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),q(!0),setTimeout(()=>q(!1),2000)},className:"h-7 text-xs",children:N?"\u2713 Copied":"Copy"})]}),T("pre",{className:"overflow-x-auto p-4",children:T("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as Zf}from"@contractspec/lib.contracts-spec/docs";var $f=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI \u2014 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
+import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as E,CardHeader as O,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as L}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,B=y.completedStepIds.length,v=N>0?B/N*100:0,J=B===N,U=N-B,R=U*5,Q=f.totalXp??f.steps.reduce((K,Z)=>K+(Z.xpReward??0),0)+(f.completionRewards?.xp??0);return L("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(E,{className:"p-8",children:L("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("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:J?"\uD83C\uDF89":"\uD83D\uDE80"}),L("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!J&&L("p",{className:"mt-3 text-muted-foreground text-sm",children:["\u23F1\uFE0F Estimated time:"," ",R>0?`~${R} minutes`:"Less than a minute"]})]}),!J&&z(Nf,{size:"lg",onClick:b,children:B>0?"Continue":"Get Started"})]})})}),L("div",{className:"grid gap-4 md:grid-cols-3",children:[L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),L(E,{children:[L("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),L("p",{className:"mt-2 text-muted-foreground text-sm",children:[B," of ",N," steps completed"]})]})]}),L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),L(E,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:Q,showLabel:!1,size:"sm"})]})]}),L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),L(E,{children:[z("div",{className:"font-bold text-3xl",children:J?"\u2713":`~${R}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:J?"All done!":`${U} steps to go`})]})]})]}),L(M,{children:[z(O,{children:L(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(E,{children:z("div",{className:"space-y-3",children:f.steps.map((K,Z)=>{let $=y.completedStepIds.includes(K.id),D=!$&&f.steps.slice(0,Z).every((W)=>y.completedStepIds.includes(W.id));return L("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${$?"bg-green-500 text-white":D?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:$?"\u2713":Z+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${$?"text-green-500":D?"text-foreground":"text-muted-foreground"}`,children:K.title})}),K.xpReward&&L("span",{className:"text-muted-foreground text-sm",children:["+",K.xpReward," XP"]})]},K.id)})})})]}),J&&z(M,{className:"border-green-500/50 bg-green-500/5",children:L(E,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),L("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),L("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as h,jsxs as q}from"react/jsx-runtime";function l({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,B=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((R,Q)=>R+(Q.xpReward??0),0)+(f.completionRewards?.xp??0),J=b-N,U=J*5;return q("div",{className:"space-y-6",children:[q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCC8"}),h("span",{children:"Your Progress"})]})}),q(w,{className:"space-y-6",children:[h("div",{className:"flex items-center justify-center",children:q("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[q("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${B*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),q("div",{className:"text-center",children:[q("div",{className:"font-bold text-3xl",children:[Math.round(B),"%"]}),h("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),q("div",{className:"grid grid-cols-3 gap-4 text-center",children:[q("div",{children:[h("div",{className:"font-bold text-2xl text-green-500",children:N}),h("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),q("div",{children:[h("div",{className:"font-bold text-2xl text-orange-500",children:J}),h("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),q("div",{children:[q("div",{className:"font-bold text-2xl",children:[U,"m"]}),h("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\u26A1"}),h("span",{children:"Experience Points"})]})}),q(w,{className:"space-y-4",children:[q("div",{className:"flex items-baseline gap-2",children:[h("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),q("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),h(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83C\uDFC5"}),h("span",{children:"Achievements"})]})}),q(w,{children:[h(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&q("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCB"}),h("span",{children:"Step Details"})]})}),h(w,{children:h("div",{className:"space-y-3",children:f.steps.map((R,Q)=>{let K=y.completedStepIds.includes(R.id),Z=K?100:0;return q("div",{className:"space-y-1",children:[q("div",{className:"flex items-center justify-between text-sm",children:[q("span",{className:K?"text-green-500":"text-foreground",children:[Q+1,". ",R.title]}),h("span",{className:K?"text-green-500":"text-muted-foreground",children:K?"\u2713":"Pending"})]}),h(zf,{value:Z,className:"h-1"})]},R.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as _,jsxs as A}from"react/jsx-runtime";function S({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:B,onToggle:v,onComplete:J}){return A("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[A("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[_("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"\u2713":y}),A("div",{className:"min-w-0 flex-1",children:[_("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!B&&f.description&&_("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&A("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),_("span",{className:P("shrink-0 transition-transform",B&&"rotate-180"),children:"\u25BC"})]}),B&&A("div",{className:"border-t px-4 py-4",children:[f.description&&_("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&A("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[_("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),_("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),A("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&_(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&_(C,{size:"sm",onClick:J,children:"Mark as Complete"})]})]})]})}import{Progress as hf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as Jf}from"react";import{jsx as m,jsxs as X}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,B]=Jf(()=>{return f.steps.find((K)=>!y.completedStepIds.includes(K.id))?.id??null}),v=y.completedStepIds.length,J=f.steps.length,U=J>0?v/J*100:0,R=f.steps.findIndex((Q)=>!y.completedStepIds.includes(Q.id));return X("div",{className:"space-y-6",children:[X("div",{className:"space-y-2",children:[X("div",{className:"flex items-center justify-between",children:[m("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),X("span",{className:"text-muted-foreground text-sm",children:[v," / ",J," completed"]})]}),m(hf,{value:U,className:"h-2"})]}),m("div",{className:"space-y-3",children:f.steps.map((Q,K)=>{let Z=y.completedStepIds.includes(Q.id),$=K===R;return m(S,{step:Q,stepNumber:K+1,isCompleted:Z,isCurrent:$,isExpanded:N===Q.id,onToggle:()=>B(N===Q.id?null:Q.id),onComplete:()=>{b?.(Q.id);let D=f.steps[K+1];if(D&&!y.completedStepIds.includes(D.id))B(D.id)}},Q.id)})}),f.completionRewards&&U<100&&m("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:X("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xp&&X("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xp," XP bonus"]}),f.completionRewards.badgeKey&&X("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as F,jsxs as p}from"react/jsx-runtime";var x={templates:"\uD83D\uDCCB","spec-editor":"\u270F\uFE0F",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"\u2699\uFE0F",default:"\uD83D\uDCCD"};function n({steps:f,completedStepIds:y,currentStepId:b}){return F("div",{className:"relative overflow-x-auto pb-4",children:F("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,B)=>{let v=y.includes(N.id),J=N.id===b,U=N.metadata?.surface??"default",R=x[U]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[F("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",J&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!J&&"border-muted bg-muted/50"),children:v?"\u2713":R}),F("div",{className:"text-center",children:F("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",J&&!v&&"text-violet-500",!v&&!J&&"text-muted-foreground"),children:N.title})})]}),B<f.length-1&&F("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[B+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as G,jsxs as Y}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return Y("div",{className:"space-y-6",children:[Y("div",{className:"text-center",children:[G("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),G("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),Y(j,{children:[G(t,{children:Y(e,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDDFA\uFE0F"}),G("span",{children:"Journey Map"})]})}),G(r,{children:G(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),Y(j,{children:[G(t,{children:Y(e,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDCCD"}),G("span",{children:"Step by Step"})]})}),G(r,{children:Y("div",{className:"relative",children:[G("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),G("div",{className:"space-y-6",children:f.steps.map((N,B)=>{let v=y.completedStepIds.includes(N.id),J=N.id===b,U=N.metadata?.surface??"general";return Y("div",{className:"relative flex gap-4 pl-2",children:[G("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":J?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"\u2713":B+1}),G("div",{className:"flex-1 pb-2",children:Y("div",{className:"rounded-lg border p-4",children:[Y("div",{className:"flex items-start justify-between gap-2",children:[Y("div",{children:[Y("div",{className:"flex items-center gap-2",children:[G("h4",{className:`font-semibold ${v?"text-green-500":J?"text-blue-500":"text-foreground"}`,children:N.title}),G("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:U})]}),G("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&Y("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),G("div",{className:"mt-3 text-xs",children:v?G("span",{className:"text-green-500",children:"\u2713 Completed"}):J?G("span",{className:"text-blue-500",children:"\u2192 In Progress"}):G("span",{className:"text-muted-foreground",children:"\u25CB Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as qf,ViewTabs as Bf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Gf,CardContent as Kf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Lf}from"react";import{jsx as u,jsxs as Rf}from"react/jsx-runtime";function Qf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:B="overview"}){let[v,J]=Lf(B),{progress:U,completeStep:R}=qf(f),Q=y??U,K=a((W)=>{J(W),N?.(W)},[N]),Z=a((W)=>{if(b)b(W);else R(W)},[b,R]),$=a(()=>{J("steps"),N?.("steps")},[N]);return Rf("div",{className:"space-y-6",children:[u(Gf,{children:u(Kf,{className:"p-4",children:u(Bf,{currentView:v,onViewChange:K})})}),(()=>{let W={track:f,progress:Q,onStepComplete:Z};switch(v){case"overview":return u(H,{...W,onStart:$});case"steps":return u(k,{...W});case"progress":return u(l,{...W});case"timeline":return u(d,{...W});default:return u(H,{...W,onStart:$})}})()]})}import{Button as Uf}from"@contractspec/lib.design-system";import{useState as Wf}from"react";import{jsx as T,jsxs as c,Fragment as Yf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,B]=Wf(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[T("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Yf,{children:[T("span",{className:"text-muted-foreground",children:"\u2022"}),T("span",{className:"text-sm",children:b})]})]}),T(Uf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),B(!0),setTimeout(()=>B(!1),2000)},className:"h-7 text-xs",children:N?"\u2713 Copied":"Copy"})]}),T("pre",{className:"overflow-x-auto p-4",children:T("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as Zf}from"@contractspec/lib.contracts-spec/docs";var $f=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI \u2014 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

package/dist/node/OnboardingMiniApp.js

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

package/dist/node/components/StepChecklist.js

@@ -1 +1 @@
-import{Button as d}from"@contractspec/lib.design-system";import{cn as a}from"@contractspec/lib.ui-kit-core";import{jsx as o,jsxs as r}from"react/jsx-runtime";function g({step:e,stepNumber:l,isCompleted:t,isCurrent:n,isExpanded:i,onToggle:c,onComplete:m}){return r("div",{className:a("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",n&&!t&&"border-violet-500 bg-violet-500/5",!t&&!n&&"border-border"),children:[r("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:c,children:[o("div",{className:a("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",n&&!t&&"border-violet-500 text-violet-500",!t&&!n&&"border-muted-foreground text-muted-foreground"),children:t?"✓":l}),r("div",{className:"min-w-0 flex-1",children:[o("h4",{className:a("font-semibold",t&&"text-green-500",n&&!t&&"text-foreground",!t&&!n&&"text-muted-foreground"),children:e.title}),!i&&e.description&&o("p",{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&r("span",{className:a("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("span",{className:a("shrink-0 transition-transform",i&&"rotate-180"),children:"▼"})]}),i&&r("div",{className:"border-t px-4 py-4",children:[e.description&&o("p",{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&r("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[o("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),o("p",{className:"text-muted-foreground text-sm",children:e.instructions})]}),r("div",{className:"flex flex-wrap gap-2",children:[e.actionUrl&&o(d,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&o(d,{size:"sm",onClick:m,children:"Mark as Complete"})]})]})]})}export{g as StepChecklist};
+import{Button as d}from"@contractspec/lib.design-system";import{cn as a}from"@contractspec/lib.ui-kit-core";import{jsx as o,jsxs as r}from"react/jsx-runtime";function f({step:e,stepNumber:l,isCompleted:t,isCurrent:n,isExpanded:i,onToggle:c,onComplete:m}){return r("div",{className:a("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",n&&!t&&"border-violet-500 bg-violet-500/5",!t&&!n&&"border-border"),children:[r("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:c,children:[o("div",{className:a("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",n&&!t&&"border-violet-500 text-violet-500",!t&&!n&&"border-muted-foreground text-muted-foreground"),children:t?"✓":l}),r("div",{className:"min-w-0 flex-1",children:[o("h4",{className:a("font-semibold",t&&"text-green-500",n&&!t&&"text-foreground",!t&&!n&&"text-muted-foreground"),children:e.title}),!i&&e.description&&o("p",{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&r("span",{className:a("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("span",{className:a("shrink-0 transition-transform",i&&"rotate-180"),children:"▼"})]}),i&&r("div",{className:"border-t px-4 py-4",children:[e.description&&o("p",{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&r("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[o("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),o("p",{className:"text-muted-foreground text-sm",children:e.instructions})]}),r("div",{className:"flex flex-wrap gap-2",children:[e.actionUrl&&o(d,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&o(d,{size:"sm",onClick:m,children:"Mark as Complete"})]})]})]})}export{f as StepChecklist};

package/dist/node/index.js

@@ -1,4 +1,4 @@
-import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as E,CardHeader as O,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as K}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,q=y.completedStepIds.length,v=N>0?q/N*100:0,h=q===N,U=N-q,R=U*5,Q=f.totalXp??f.steps.reduce((G,Z)=>G+(Z.xpReward??0),0)+(f.completionRewards?.xpBonus??0);return K("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(E,{className:"p-8",children:K("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("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:h?"\uD83C\uDF89":"\uD83D\uDE80"}),K("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!h&&K("p",{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",R>0?`~${R} minutes`:"Less than a minute"]})]}),!h&&z(Nf,{size:"lg",onClick:b,children:q>0?"Continue":"Get Started"})]})})}),K("div",{className:"grid gap-4 md:grid-cols-3",children:[K(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),K(E,{children:[K("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),K("p",{className:"mt-2 text-muted-foreground text-sm",children:[q," of ",N," steps completed"]})]})]}),K(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),K(E,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:Q,showLabel:!1,size:"sm"})]})]}),K(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),K(E,{children:[z("div",{className:"font-bold text-3xl",children:h?"✓":`~${R}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:h?"All done!":`${U} steps to go`})]})]})]}),K(M,{children:[z(O,{children:K(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(E,{children:z("div",{className:"space-y-3",children:f.steps.map((G,Z)=>{let $=y.completedStepIds.includes(G.id),D=!$&&f.steps.slice(0,Z).every((W)=>y.completedStepIds.includes(W.id));return K("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${$?"bg-green-500 text-white":D?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:$?"✓":Z+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${$?"text-green-500":D?"text-foreground":"text-muted-foreground"}`,children:G.title})}),G.xpReward&&K("span",{className:"text-muted-foreground text-sm",children:["+",G.xpReward," XP"]})]},G.id)})})})]}),h&&z(M,{className:"border-green-500/50 bg-green-500/5",children:K(E,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),K("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),K("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as L,jsxs as J}from"react/jsx-runtime";function l({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,q=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((R,Q)=>R+(Q.xpReward??0),0)+(f.completionRewards?.xpBonus??0),h=b-N,U=h*5;return J("div",{className:"space-y-6",children:[J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"\uD83D\uDCC8"}),L("span",{children:"Your Progress"})]})}),J(w,{className:"space-y-6",children:[L("div",{className:"flex items-center justify-center",children:J("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[J("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[L("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),L("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${q*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),J("div",{className:"text-center",children:[J("div",{className:"font-bold text-3xl",children:[Math.round(q),"%"]}),L("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),J("div",{className:"grid grid-cols-3 gap-4 text-center",children:[J("div",{children:[L("div",{className:"font-bold text-2xl text-green-500",children:N}),L("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),J("div",{children:[L("div",{className:"font-bold text-2xl text-orange-500",children:h}),L("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),J("div",{children:[J("div",{className:"font-bold text-2xl",children:[U,"m"]}),L("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"⚡"}),L("span",{children:"Experience Points"})]})}),J(w,{className:"space-y-4",children:[J("div",{className:"flex items-baseline gap-2",children:[L("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),J("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),L(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"\uD83C\uDFC5"}),L("span",{children:"Achievements"})]})}),J(w,{children:[L(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&J("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"\uD83D\uDCCB"}),L("span",{children:"Step Details"})]})}),L(w,{children:L("div",{className:"space-y-3",children:f.steps.map((R,Q)=>{let G=y.completedStepIds.includes(R.id),Z=G?100:0;return J("div",{className:"space-y-1",children:[J("div",{className:"flex items-center justify-between text-sm",children:[J("span",{className:G?"text-green-500":"text-foreground",children:[Q+1,". ",R.title]}),L("span",{className:G?"text-green-500":"text-muted-foreground",children:G?"✓":"Pending"})]}),L(zf,{value:Z,className:"h-1"})]},R.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as _,jsxs as A}from"react/jsx-runtime";function S({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:q,onToggle:v,onComplete:h}){return A("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[A("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[_("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"✓":y}),A("div",{className:"min-w-0 flex-1",children:[_("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!q&&f.description&&_("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&A("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),_("span",{className:P("shrink-0 transition-transform",q&&"rotate-180"),children:"▼"})]}),q&&A("div",{className:"border-t px-4 py-4",children:[f.description&&_("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&A("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[_("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),_("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),A("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&_(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&_(C,{size:"sm",onClick:h,children:"Mark as Complete"})]})]})]})}import{Progress as Lf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as hf}from"react";import{jsx as m,jsxs as X}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,q]=hf(()=>{return f.steps.find((G)=>!y.completedStepIds.includes(G.id))?.id??null}),v=y.completedStepIds.length,h=f.steps.length,U=h>0?v/h*100:0,R=f.steps.findIndex((Q)=>!y.completedStepIds.includes(Q.id));return X("div",{className:"space-y-6",children:[X("div",{className:"space-y-2",children:[X("div",{className:"flex items-center justify-between",children:[m("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),X("span",{className:"text-muted-foreground text-sm",children:[v," / ",h," completed"]})]}),m(Lf,{value:U,className:"h-2"})]}),m("div",{className:"space-y-3",children:f.steps.map((Q,G)=>{let Z=y.completedStepIds.includes(Q.id),$=G===R;return m(S,{step:Q,stepNumber:G+1,isCompleted:Z,isCurrent:$,isExpanded:N===Q.id,onToggle:()=>q(N===Q.id?null:Q.id),onComplete:()=>{b?.(Q.id);let D=f.steps[G+1];if(D&&!y.completedStepIds.includes(D.id))q(D.id)}},Q.id)})}),f.completionRewards&&U<100&&m("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:X("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xpBonus&&X("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xpBonus," XP bonus"]}),f.completionRewards.badgeKey&&X("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as F,jsxs as p}from"react/jsx-runtime";var x={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function n({steps:f,completedStepIds:y,currentStepId:b}){return F("div",{className:"relative overflow-x-auto pb-4",children:F("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,q)=>{let v=y.includes(N.id),h=N.id===b,U=N.metadata?.surface??"default",R=x[U]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[F("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",h&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!h&&"border-muted bg-muted/50"),children:v?"✓":R}),F("div",{className:"text-center",children:F("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",h&&!v&&"text-violet-500",!v&&!h&&"text-muted-foreground"),children:N.title})})]}),q<f.length-1&&F("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[q+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as B,jsxs as Y}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return Y("div",{className:"space-y-6",children:[Y("div",{className:"text-center",children:[B("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),B("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),Y(j,{children:[B(t,{children:Y(e,{className:"flex items-center gap-2",children:[B("span",{children:"\uD83D\uDDFA️"}),B("span",{children:"Journey Map"})]})}),B(r,{children:B(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),Y(j,{children:[B(t,{children:Y(e,{className:"flex items-center gap-2",children:[B("span",{children:"\uD83D\uDCCD"}),B("span",{children:"Step by Step"})]})}),B(r,{children:Y("div",{className:"relative",children:[B("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),B("div",{className:"space-y-6",children:f.steps.map((N,q)=>{let v=y.completedStepIds.includes(N.id),h=N.id===b,U=N.metadata?.surface??"general";return Y("div",{className:"relative flex gap-4 pl-2",children:[B("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":h?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"✓":q+1}),B("div",{className:"flex-1 pb-2",children:Y("div",{className:"rounded-lg border p-4",children:[Y("div",{className:"flex items-start justify-between gap-2",children:[Y("div",{children:[Y("div",{className:"flex items-center gap-2",children:[B("h4",{className:`font-semibold ${v?"text-green-500":h?"text-blue-500":"text-foreground"}`,children:N.title}),B("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:U})]}),B("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&Y("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),B("div",{className:"mt-3 text-xs",children:v?B("span",{className:"text-green-500",children:"✓ Completed"}):h?B("span",{className:"text-blue-500",children:"→ In Progress"}):B("span",{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as Jf,ViewTabs as qf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Bf,CardContent as Gf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Kf}from"react";import{jsx as u,jsxs as Rf}from"react/jsx-runtime";function Qf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:q="overview"}){let[v,h]=Kf(q),{progress:U,completeStep:R}=Jf(f),Q=y??U,G=a((W)=>{h(W),N?.(W)},[N]),Z=a((W)=>{if(b)b(W);else R(W)},[b,R]),$=a(()=>{h("steps"),N?.("steps")},[N]);return Rf("div",{className:"space-y-6",children:[u(Bf,{children:u(Gf,{className:"p-4",children:u(qf,{currentView:v,onViewChange:G})})}),(()=>{let W={track:f,progress:Q,onStepComplete:Z};switch(v){case"overview":return u(H,{...W,onStart:$});case"steps":return u(k,{...W});case"progress":return u(l,{...W});case"timeline":return u(d,{...W});default:return u(H,{...W,onStart:$})}})()]})}import{Button as Uf}from"@contractspec/lib.design-system";import{useState as Wf}from"react";import{jsx as T,jsxs as c,Fragment as Yf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,q]=Wf(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[T("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Yf,{children:[T("span",{className:"text-muted-foreground",children:"•"}),T("span",{className:"text-sm",children:b})]})]}),T(Uf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),q(!0),setTimeout(()=>q(!1),2000)},className:"h-7 text-xs",children:N?"✓ Copied":"Copy"})]}),T("pre",{className:"overflow-x-auto p-4",children:T("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as Zf}from"@contractspec/lib.contracts-spec/docs";var $f=[{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
+import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as E,CardHeader as O,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as L}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,B=y.completedStepIds.length,v=N>0?B/N*100:0,J=B===N,U=N-B,R=U*5,Q=f.totalXp??f.steps.reduce((K,Z)=>K+(Z.xpReward??0),0)+(f.completionRewards?.xp??0);return L("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(E,{className:"p-8",children:L("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("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:J?"\uD83C\uDF89":"\uD83D\uDE80"}),L("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!J&&L("p",{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",R>0?`~${R} minutes`:"Less than a minute"]})]}),!J&&z(Nf,{size:"lg",onClick:b,children:B>0?"Continue":"Get Started"})]})})}),L("div",{className:"grid gap-4 md:grid-cols-3",children:[L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),L(E,{children:[L("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),L("p",{className:"mt-2 text-muted-foreground text-sm",children:[B," of ",N," steps completed"]})]})]}),L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),L(E,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:Q,showLabel:!1,size:"sm"})]})]}),L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),L(E,{children:[z("div",{className:"font-bold text-3xl",children:J?"✓":`~${R}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:J?"All done!":`${U} steps to go`})]})]})]}),L(M,{children:[z(O,{children:L(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(E,{children:z("div",{className:"space-y-3",children:f.steps.map((K,Z)=>{let $=y.completedStepIds.includes(K.id),D=!$&&f.steps.slice(0,Z).every((W)=>y.completedStepIds.includes(W.id));return L("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${$?"bg-green-500 text-white":D?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:$?"✓":Z+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${$?"text-green-500":D?"text-foreground":"text-muted-foreground"}`,children:K.title})}),K.xpReward&&L("span",{className:"text-muted-foreground text-sm",children:["+",K.xpReward," XP"]})]},K.id)})})})]}),J&&z(M,{className:"border-green-500/50 bg-green-500/5",children:L(E,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),L("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),L("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as h,jsxs as q}from"react/jsx-runtime";function l({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,B=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((R,Q)=>R+(Q.xpReward??0),0)+(f.completionRewards?.xp??0),J=b-N,U=J*5;return q("div",{className:"space-y-6",children:[q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCC8"}),h("span",{children:"Your Progress"})]})}),q(w,{className:"space-y-6",children:[h("div",{className:"flex items-center justify-center",children:q("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[q("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${B*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),q("div",{className:"text-center",children:[q("div",{className:"font-bold text-3xl",children:[Math.round(B),"%"]}),h("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),q("div",{className:"grid grid-cols-3 gap-4 text-center",children:[q("div",{children:[h("div",{className:"font-bold text-2xl text-green-500",children:N}),h("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),q("div",{children:[h("div",{className:"font-bold text-2xl text-orange-500",children:J}),h("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),q("div",{children:[q("div",{className:"font-bold text-2xl",children:[U,"m"]}),h("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"⚡"}),h("span",{children:"Experience Points"})]})}),q(w,{className:"space-y-4",children:[q("div",{className:"flex items-baseline gap-2",children:[h("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),q("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),h(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83C\uDFC5"}),h("span",{children:"Achievements"})]})}),q(w,{children:[h(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&q("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCB"}),h("span",{children:"Step Details"})]})}),h(w,{children:h("div",{className:"space-y-3",children:f.steps.map((R,Q)=>{let K=y.completedStepIds.includes(R.id),Z=K?100:0;return q("div",{className:"space-y-1",children:[q("div",{className:"flex items-center justify-between text-sm",children:[q("span",{className:K?"text-green-500":"text-foreground",children:[Q+1,". ",R.title]}),h("span",{className:K?"text-green-500":"text-muted-foreground",children:K?"✓":"Pending"})]}),h(zf,{value:Z,className:"h-1"})]},R.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as _,jsxs as A}from"react/jsx-runtime";function S({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:B,onToggle:v,onComplete:J}){return A("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[A("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[_("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"✓":y}),A("div",{className:"min-w-0 flex-1",children:[_("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!B&&f.description&&_("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&A("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),_("span",{className:P("shrink-0 transition-transform",B&&"rotate-180"),children:"▼"})]}),B&&A("div",{className:"border-t px-4 py-4",children:[f.description&&_("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&A("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[_("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),_("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),A("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&_(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&_(C,{size:"sm",onClick:J,children:"Mark as Complete"})]})]})]})}import{Progress as hf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as Jf}from"react";import{jsx as m,jsxs as X}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,B]=Jf(()=>{return f.steps.find((K)=>!y.completedStepIds.includes(K.id))?.id??null}),v=y.completedStepIds.length,J=f.steps.length,U=J>0?v/J*100:0,R=f.steps.findIndex((Q)=>!y.completedStepIds.includes(Q.id));return X("div",{className:"space-y-6",children:[X("div",{className:"space-y-2",children:[X("div",{className:"flex items-center justify-between",children:[m("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),X("span",{className:"text-muted-foreground text-sm",children:[v," / ",J," completed"]})]}),m(hf,{value:U,className:"h-2"})]}),m("div",{className:"space-y-3",children:f.steps.map((Q,K)=>{let Z=y.completedStepIds.includes(Q.id),$=K===R;return m(S,{step:Q,stepNumber:K+1,isCompleted:Z,isCurrent:$,isExpanded:N===Q.id,onToggle:()=>B(N===Q.id?null:Q.id),onComplete:()=>{b?.(Q.id);let D=f.steps[K+1];if(D&&!y.completedStepIds.includes(D.id))B(D.id)}},Q.id)})}),f.completionRewards&&U<100&&m("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:X("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xp&&X("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xp," XP bonus"]}),f.completionRewards.badgeKey&&X("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as F,jsxs as p}from"react/jsx-runtime";var x={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function n({steps:f,completedStepIds:y,currentStepId:b}){return F("div",{className:"relative overflow-x-auto pb-4",children:F("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,B)=>{let v=y.includes(N.id),J=N.id===b,U=N.metadata?.surface??"default",R=x[U]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[F("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",J&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!J&&"border-muted bg-muted/50"),children:v?"✓":R}),F("div",{className:"text-center",children:F("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",J&&!v&&"text-violet-500",!v&&!J&&"text-muted-foreground"),children:N.title})})]}),B<f.length-1&&F("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[B+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as G,jsxs as Y}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return Y("div",{className:"space-y-6",children:[Y("div",{className:"text-center",children:[G("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),G("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),Y(j,{children:[G(t,{children:Y(e,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDDFA️"}),G("span",{children:"Journey Map"})]})}),G(r,{children:G(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),Y(j,{children:[G(t,{children:Y(e,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDCCD"}),G("span",{children:"Step by Step"})]})}),G(r,{children:Y("div",{className:"relative",children:[G("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),G("div",{className:"space-y-6",children:f.steps.map((N,B)=>{let v=y.completedStepIds.includes(N.id),J=N.id===b,U=N.metadata?.surface??"general";return Y("div",{className:"relative flex gap-4 pl-2",children:[G("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":J?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"✓":B+1}),G("div",{className:"flex-1 pb-2",children:Y("div",{className:"rounded-lg border p-4",children:[Y("div",{className:"flex items-start justify-between gap-2",children:[Y("div",{children:[Y("div",{className:"flex items-center gap-2",children:[G("h4",{className:`font-semibold ${v?"text-green-500":J?"text-blue-500":"text-foreground"}`,children:N.title}),G("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:U})]}),G("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&Y("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),G("div",{className:"mt-3 text-xs",children:v?G("span",{className:"text-green-500",children:"✓ Completed"}):J?G("span",{className:"text-blue-500",children:"→ In Progress"}):G("span",{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as qf,ViewTabs as Bf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Gf,CardContent as Kf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Lf}from"react";import{jsx as u,jsxs as Rf}from"react/jsx-runtime";function Qf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:B="overview"}){let[v,J]=Lf(B),{progress:U,completeStep:R}=qf(f),Q=y??U,K=a((W)=>{J(W),N?.(W)},[N]),Z=a((W)=>{if(b)b(W);else R(W)},[b,R]),$=a(()=>{J("steps"),N?.("steps")},[N]);return Rf("div",{className:"space-y-6",children:[u(Gf,{children:u(Kf,{className:"p-4",children:u(Bf,{currentView:v,onViewChange:K})})}),(()=>{let W={track:f,progress:Q,onStepComplete:Z};switch(v){case"overview":return u(H,{...W,onStart:$});case"steps":return u(k,{...W});case"progress":return u(l,{...W});case"timeline":return u(d,{...W});default:return u(H,{...W,onStart:$})}})()]})}import{Button as Uf}from"@contractspec/lib.design-system";import{useState as Wf}from"react";import{jsx as T,jsxs as c,Fragment as Yf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,B]=Wf(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[T("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Yf,{children:[T("span",{className:"text-muted-foreground",children:"•"}),T("span",{className:"text-sm",children:b})]})]}),T(Uf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),B(!0),setTimeout(()=>B(!1),2000)},className:"h-7 text-xs",children:N?"✓ Copied":"Copy"})]}),T("pre",{className:"overflow-x-auto p-4",children:T("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as Zf}from"@contractspec/lib.contracts-spec/docs";var $f=[{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

package/dist/node/views/Overview.js

@@ -1 +1 @@
-import{XpBar as W}from"@contractspec/example.learning-journey-ui-shared";import{Button as Y}from"@contractspec/lib.design-system";import{Card as A,CardContent as D,CardHeader as J,CardTitle as K}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as Z}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as f,jsxs as h}from"react/jsx-runtime";function b({track:q,progress:E,onStart:R}){let y=q.steps.length,F=E.completedStepIds.length,N=y>0?F/y*100:0,z=F===y,O=y-F,L=O*5,U=q.totalXp??q.steps.reduce((v,G)=>v+(G.xpReward??0),0)+(q.completionRewards?.xpBonus??0);return h("div",{className:"space-y-6",children:[f(A,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:f(D,{className:"p-8",children:h("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[f("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:z?"\uD83C\uDF89":"\uD83D\uDE80"}),h("div",{className:"flex-1",children:[f("h1",{className:"font-bold text-2xl",children:q.name}),f("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:q.description}),!z&&h("p",{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",L>0?`~${L} minutes`:"Less than a minute"]})]}),!z&&f(Y,{size:"lg",onClick:R,children:F>0?"Continue":"Get Started"})]})})}),h("div",{className:"grid gap-4 md:grid-cols-3",children:[h(A,{children:[f(J,{className:"pb-2",children:f(K,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),h(D,{children:[h("div",{className:"font-bold text-3xl",children:[Math.round(N),"%"]}),f(Z,{value:N,className:"mt-2 h-2"}),h("p",{className:"mt-2 text-muted-foreground text-sm",children:[F," of ",y," steps completed"]})]})]}),h(A,{children:[f(J,{className:"pb-2",children:f(K,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),h(D,{children:[f("div",{className:"font-bold text-3xl text-blue-500",children:E.xpEarned}),f(W,{current:E.xpEarned,max:U,showLabel:!1,size:"sm"})]})]}),h(A,{children:[f(J,{className:"pb-2",children:f(K,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),h(D,{children:[f("div",{className:"font-bold text-3xl",children:z?"✓":`~${L}m`}),f("p",{className:"mt-2 text-muted-foreground text-sm",children:z?"All done!":`${O} steps to go`})]})]})]}),h(A,{children:[f(J,{children:h(K,{className:"flex items-center gap-2",children:[f("span",{children:"\uD83D\uDCCB"}),f("span",{children:"Your Journey"})]})}),f(D,{children:f("div",{className:"space-y-3",children:q.steps.map((v,G)=>{let I=E.completedStepIds.includes(v.id),Q=!I&&q.steps.slice(0,G).every((V)=>E.completedStepIds.includes(V.id));return h("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[f("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${I?"bg-green-500 text-white":Q?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:I?"✓":G+1}),f("div",{className:"min-w-0 flex-1",children:f("p",{className:`font-medium ${I?"text-green-500":Q?"text-foreground":"text-muted-foreground"}`,children:v.title})}),v.xpReward&&h("span",{className:"text-muted-foreground text-sm",children:["+",v.xpReward," XP"]})]},v.id)})})})]}),z&&f(A,{className:"border-green-500/50 bg-green-500/5",children:h(D,{className:"flex items-center gap-4 p-6",children:[f("div",{className:"text-4xl",children:"\uD83C\uDF89"}),h("div",{children:[f("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),h("p",{className:"text-muted-foreground",children:["You've completed all ",y," steps. Welcome aboard!"]})]})]})})]})}export{b as Overview};
+import{XpBar as W}from"@contractspec/example.learning-journey-ui-shared";import{Button as Y}from"@contractspec/lib.design-system";import{Card as A,CardContent as D,CardHeader as J,CardTitle as K}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as Z}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as f,jsxs as h}from"react/jsx-runtime";function b({track:q,progress:E,onStart:R}){let y=q.steps.length,F=E.completedStepIds.length,N=y>0?F/y*100:0,z=F===y,O=y-F,L=O*5,U=q.totalXp??q.steps.reduce((v,G)=>v+(G.xpReward??0),0)+(q.completionRewards?.xp??0);return h("div",{className:"space-y-6",children:[f(A,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:f(D,{className:"p-8",children:h("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[f("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:z?"\uD83C\uDF89":"\uD83D\uDE80"}),h("div",{className:"flex-1",children:[f("h1",{className:"font-bold text-2xl",children:q.name}),f("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:q.description}),!z&&h("p",{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",L>0?`~${L} minutes`:"Less than a minute"]})]}),!z&&f(Y,{size:"lg",onClick:R,children:F>0?"Continue":"Get Started"})]})})}),h("div",{className:"grid gap-4 md:grid-cols-3",children:[h(A,{children:[f(J,{className:"pb-2",children:f(K,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),h(D,{children:[h("div",{className:"font-bold text-3xl",children:[Math.round(N),"%"]}),f(Z,{value:N,className:"mt-2 h-2"}),h("p",{className:"mt-2 text-muted-foreground text-sm",children:[F," of ",y," steps completed"]})]})]}),h(A,{children:[f(J,{className:"pb-2",children:f(K,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),h(D,{children:[f("div",{className:"font-bold text-3xl text-blue-500",children:E.xpEarned}),f(W,{current:E.xpEarned,max:U,showLabel:!1,size:"sm"})]})]}),h(A,{children:[f(J,{className:"pb-2",children:f(K,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),h(D,{children:[f("div",{className:"font-bold text-3xl",children:z?"✓":`~${L}m`}),f("p",{className:"mt-2 text-muted-foreground text-sm",children:z?"All done!":`${O} steps to go`})]})]})]}),h(A,{children:[f(J,{children:h(K,{className:"flex items-center gap-2",children:[f("span",{children:"\uD83D\uDCCB"}),f("span",{children:"Your Journey"})]})}),f(D,{children:f("div",{className:"space-y-3",children:q.steps.map((v,G)=>{let I=E.completedStepIds.includes(v.id),Q=!I&&q.steps.slice(0,G).every((V)=>E.completedStepIds.includes(V.id));return h("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[f("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${I?"bg-green-500 text-white":Q?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:I?"✓":G+1}),f("div",{className:"min-w-0 flex-1",children:f("p",{className:`font-medium ${I?"text-green-500":Q?"text-foreground":"text-muted-foreground"}`,children:v.title})}),v.xpReward&&h("span",{className:"text-muted-foreground text-sm",children:["+",v.xpReward," XP"]})]},v.id)})})})]}),z&&f(A,{className:"border-green-500/50 bg-green-500/5",children:h(D,{className:"flex items-center gap-4 p-6",children:[f("div",{className:"text-4xl",children:"\uD83C\uDF89"}),h("div",{children:[f("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),h("p",{className:"text-muted-foreground",children:["You've completed all ",y," steps. Welcome aboard!"]})]})]})})]})}export{b as Overview};

package/dist/node/views/Progress.js

@@ -1 +1 @@
-import{BadgeDisplay as W,XpBar as Y}from"@contractspec/example.learning-journey-ui-shared";import{Card as E,CardContent as F,CardHeader as G,CardTitle as I}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as Z}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as f,jsxs as h}from"react/jsx-runtime";function D({track:q,progress:v}){let J=q.steps.length,K=v.completedStepIds.length,N=J>0?K/J*100:0,O=q.totalXp??q.steps.reduce((z,L)=>z+(L.xpReward??0),0)+(q.completionRewards?.xpBonus??0),Q=J-K,R=Q*5;return h("div",{className:"space-y-6",children:[h(E,{children:[f(G,{children:h(I,{className:"flex items-center gap-2",children:[f("span",{children:"\uD83D\uDCC8"}),f("span",{children:"Your Progress"})]})}),h(F,{className:"space-y-6",children:[f("div",{className:"flex items-center justify-center",children:h("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[h("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[f("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),f("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${N*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),h("div",{className:"text-center",children:[h("div",{className:"font-bold text-3xl",children:[Math.round(N),"%"]}),f("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),h("div",{className:"grid grid-cols-3 gap-4 text-center",children:[h("div",{children:[f("div",{className:"font-bold text-2xl text-green-500",children:K}),f("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),h("div",{children:[f("div",{className:"font-bold text-2xl text-orange-500",children:Q}),f("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),h("div",{children:[h("div",{className:"font-bold text-2xl",children:[R,"m"]}),f("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),h(E,{children:[f(G,{children:h(I,{className:"flex items-center gap-2",children:[f("span",{children:"⚡"}),f("span",{children:"Experience Points"})]})}),h(F,{className:"space-y-4",children:[h("div",{className:"flex items-baseline gap-2",children:[f("span",{className:"font-bold text-3xl text-blue-500",children:v.xpEarned}),h("span",{className:"text-muted-foreground",children:["/ ",O," XP"]})]}),f(Y,{current:v.xpEarned,max:O,showLabel:!1,size:"lg"})]})]}),h(E,{children:[f(G,{children:h(I,{className:"flex items-center gap-2",children:[f("span",{children:"\uD83C\uDFC5"}),f("span",{children:"Achievements"})]})}),h(F,{children:[f(W,{badges:v.badges,size:"lg"}),v.badges.length===0&&q.completionRewards?.badgeKey&&h("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',q.completionRewards.badgeKey,'" badge!']})]})]}),h(E,{children:[f(G,{children:h(I,{className:"flex items-center gap-2",children:[f("span",{children:"\uD83D\uDCCB"}),f("span",{children:"Step Details"})]})}),f(F,{children:f("div",{className:"space-y-3",children:q.steps.map((z,L)=>{let A=v.completedStepIds.includes(z.id),U=A?100:0;return h("div",{className:"space-y-1",children:[h("div",{className:"flex items-center justify-between text-sm",children:[h("span",{className:A?"text-green-500":"text-foreground",children:[L+1,". ",z.title]}),f("span",{className:A?"text-green-500":"text-muted-foreground",children:A?"✓":"Pending"})]}),f(Z,{value:U,className:"h-1"})]},z.id)})})})]})]})}export{D as ProgressView,D as Progress};
+import{BadgeDisplay as W,XpBar as Y}from"@contractspec/example.learning-journey-ui-shared";import{Card as E,CardContent as F,CardHeader as G,CardTitle as I}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as Z}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as f,jsxs as h}from"react/jsx-runtime";function D({track:q,progress:v}){let J=q.steps.length,K=v.completedStepIds.length,N=J>0?K/J*100:0,O=q.totalXp??q.steps.reduce((z,L)=>z+(L.xpReward??0),0)+(q.completionRewards?.xp??0),Q=J-K,R=Q*5;return h("div",{className:"space-y-6",children:[h(E,{children:[f(G,{children:h(I,{className:"flex items-center gap-2",children:[f("span",{children:"\uD83D\uDCC8"}),f("span",{children:"Your Progress"})]})}),h(F,{className:"space-y-6",children:[f("div",{className:"flex items-center justify-center",children:h("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[h("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[f("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),f("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${N*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),h("div",{className:"text-center",children:[h("div",{className:"font-bold text-3xl",children:[Math.round(N),"%"]}),f("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),h("div",{className:"grid grid-cols-3 gap-4 text-center",children:[h("div",{children:[f("div",{className:"font-bold text-2xl text-green-500",children:K}),f("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),h("div",{children:[f("div",{className:"font-bold text-2xl text-orange-500",children:Q}),f("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),h("div",{children:[h("div",{className:"font-bold text-2xl",children:[R,"m"]}),f("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),h(E,{children:[f(G,{children:h(I,{className:"flex items-center gap-2",children:[f("span",{children:"⚡"}),f("span",{children:"Experience Points"})]})}),h(F,{className:"space-y-4",children:[h("div",{className:"flex items-baseline gap-2",children:[f("span",{className:"font-bold text-3xl text-blue-500",children:v.xpEarned}),h("span",{className:"text-muted-foreground",children:["/ ",O," XP"]})]}),f(Y,{current:v.xpEarned,max:O,showLabel:!1,size:"lg"})]})]}),h(E,{children:[f(G,{children:h(I,{className:"flex items-center gap-2",children:[f("span",{children:"\uD83C\uDFC5"}),f("span",{children:"Achievements"})]})}),h(F,{children:[f(W,{badges:v.badges,size:"lg"}),v.badges.length===0&&q.completionRewards?.badgeKey&&h("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',q.completionRewards.badgeKey,'" badge!']})]})]}),h(E,{children:[f(G,{children:h(I,{className:"flex items-center gap-2",children:[f("span",{children:"\uD83D\uDCCB"}),f("span",{children:"Step Details"})]})}),f(F,{children:f("div",{className:"space-y-3",children:q.steps.map((z,L)=>{let A=v.completedStepIds.includes(z.id),U=A?100:0;return h("div",{className:"space-y-1",children:[h("div",{className:"flex items-center justify-between text-sm",children:[h("span",{className:A?"text-green-500":"text-foreground",children:[L+1,". ",z.title]}),f("span",{className:A?"text-green-500":"text-muted-foreground",children:A?"✓":"Pending"})]}),f(Z,{value:U,className:"h-1"})]},z.id)})})})]})]})}export{D as ProgressView,D as Progress};

package/dist/node/views/Steps.js

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