@contractspec/example.learning-journey-ui-onboarding 3.7.16 → 3.7.18

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

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

package/dist/browser/views/Overview.js

@@ -1,240 +1 @@
-// src/views/Overview.tsx
-import { XpBar } from "@contractspec/example.learning-journey-ui-shared";
-import { Button } from "@contractspec/lib.design-system";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle
-} from "@contractspec/lib.ui-kit-web/ui/card";
-import { Progress } from "@contractspec/lib.ui-kit-web/ui/progress";
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-function Overview({
-  track,
-  progress,
-  onStart
-}) {
-  const totalSteps = track.steps.length;
-  const completedSteps = progress.completedStepIds.length;
-  const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
-  const isComplete = completedSteps === totalSteps;
-  const remainingSteps = totalSteps - completedSteps;
-  const estimatedMinutes = remainingSteps * 5;
-  const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV(Card, {
-        className: "overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",
-        children: /* @__PURE__ */ jsxDEV(CardContent, {
-          className: "p-8",
-          children: /* @__PURE__ */ jsxDEV("div", {
-            className: "flex flex-col items-center gap-6 text-center md:flex-row md:text-left",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg",
-                children: isComplete ? "\uD83C\uDF89" : "\uD83D\uDE80"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex-1",
-                children: [
-                  /* @__PURE__ */ jsxDEV("h1", {
-                    className: "font-bold text-2xl",
-                    children: track.name
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("p", {
-                    className: "mt-1 max-w-2xl text-muted-foreground",
-                    children: track.description
-                  }, undefined, false, undefined, this),
-                  !isComplete && /* @__PURE__ */ jsxDEV("p", {
-                    className: "mt-3 text-muted-foreground text-sm",
-                    children: [
-                      "⏱️ Estimated time:",
-                      " ",
-                      estimatedMinutes > 0 ? `~${estimatedMinutes} minutes` : "Less than a minute"
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              !isComplete && /* @__PURE__ */ jsxDEV(Button, {
-                size: "lg",
-                onClick: onStart,
-                children: completedSteps > 0 ? "Continue" : "Get Started"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "grid gap-4 md:grid-cols-3",
-        children: [
-          /* @__PURE__ */ jsxDEV(Card, {
-            children: [
-              /* @__PURE__ */ jsxDEV(CardHeader, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV(CardTitle, {
-                  className: "font-medium text-muted-foreground text-sm",
-                  children: "Progress"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(CardContent, {
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "font-bold text-3xl",
-                    children: [
-                      Math.round(percentComplete),
-                      "%"
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV(Progress, {
-                    value: percentComplete,
-                    className: "mt-2 h-2"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("p", {
-                    className: "mt-2 text-muted-foreground text-sm",
-                    children: [
-                      completedSteps,
-                      " of ",
-                      totalSteps,
-                      " steps completed"
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV(Card, {
-            children: [
-              /* @__PURE__ */ jsxDEV(CardHeader, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV(CardTitle, {
-                  className: "font-medium text-muted-foreground text-sm",
-                  children: "XP Earned"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(CardContent, {
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "font-bold text-3xl text-blue-500",
-                    children: progress.xpEarned
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV(XpBar, {
-                    current: progress.xpEarned,
-                    max: totalXp,
-                    showLabel: false,
-                    size: "sm"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV(Card, {
-            children: [
-              /* @__PURE__ */ jsxDEV(CardHeader, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV(CardTitle, {
-                  className: "font-medium text-muted-foreground text-sm",
-                  children: "Time Remaining"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(CardContent, {
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "font-bold text-3xl",
-                    children: isComplete ? "✓" : `~${estimatedMinutes}m`
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("p", {
-                    className: "mt-2 text-muted-foreground text-sm",
-                    children: isComplete ? "All done!" : `${remainingSteps} steps to go`
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV(Card, {
-        children: [
-          /* @__PURE__ */ jsxDEV(CardHeader, {
-            children: /* @__PURE__ */ jsxDEV(CardTitle, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "\uD83D\uDCCB"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "Your Journey"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(CardContent, {
-            children: /* @__PURE__ */ jsxDEV("div", {
-              className: "space-y-3",
-              children: track.steps.map((step, index) => {
-                const isStepCompleted = progress.completedStepIds.includes(step.id);
-                const isCurrent = !isStepCompleted && track.steps.slice(0, index).every((s) => progress.completedStepIds.includes(s.id));
-                return /* @__PURE__ */ jsxDEV("div", {
-                  className: "flex items-center gap-4 rounded-lg border p-3",
-                  children: [
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${isStepCompleted ? "bg-green-500 text-white" : isCurrent ? "bg-blue-500 text-white" : "bg-muted text-muted-foreground"}`,
-                      children: isStepCompleted ? "✓" : index + 1
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "min-w-0 flex-1",
-                      children: /* @__PURE__ */ jsxDEV("p", {
-                        className: `font-medium ${isStepCompleted ? "text-green-500" : isCurrent ? "text-foreground" : "text-muted-foreground"}`,
-                        children: step.title
-                      }, undefined, false, undefined, this)
-                    }, undefined, false, undefined, this),
-                    step.xpReward && /* @__PURE__ */ jsxDEV("span", {
-                      className: "text-muted-foreground text-sm",
-                      children: [
-                        "+",
-                        step.xpReward,
-                        " XP"
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, step.id, true, undefined, this);
-              })
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      isComplete && /* @__PURE__ */ jsxDEV(Card, {
-        className: "border-green-500/50 bg-green-500/5",
-        children: /* @__PURE__ */ jsxDEV(CardContent, {
-          className: "flex items-center gap-4 p-6",
-          children: [
-            /* @__PURE__ */ jsxDEV("div", {
-              className: "text-4xl",
-              children: "\uD83C\uDF89"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("div", {
-              children: [
-                /* @__PURE__ */ jsxDEV("h3", {
-                  className: "font-semibold text-green-500 text-lg",
-                  children: "Onboarding Complete!"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("p", {
-                  className: "text-muted-foreground",
-                  children: [
-                    "You've completed all ",
-                    totalSteps,
-                    " steps. Welcome aboard!"
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-export {
-  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?.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};

package/dist/browser/views/Progress.js

@@ -1,275 +1 @@
-// src/views/Progress.tsx
-import {
-  BadgeDisplay,
-  XpBar
-} from "@contractspec/example.learning-journey-ui-shared";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle
-} from "@contractspec/lib.ui-kit-web/ui/card";
-import { Progress } from "@contractspec/lib.ui-kit-web/ui/progress";
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-function ProgressView({ track, progress }) {
-  const totalSteps = track.steps.length;
-  const completedSteps = progress.completedStepIds.length;
-  const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
-  const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
-  const remainingSteps = totalSteps - completedSteps;
-  const estimatedMinutes = remainingSteps * 5;
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV(Card, {
-        children: [
-          /* @__PURE__ */ jsxDEV(CardHeader, {
-            children: /* @__PURE__ */ jsxDEV(CardTitle, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "\uD83D\uDCC8"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "Your Progress"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(CardContent, {
-            className: "space-y-6",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex items-center justify-center",
-                children: /* @__PURE__ */ jsxDEV("div", {
-                  className: "relative flex h-40 w-40 items-center justify-center",
-                  children: [
-                    /* @__PURE__ */ jsxDEV("svg", {
-                      className: "absolute h-full w-full -rotate-90",
-                      viewBox: "0 0 100 100",
-                      children: [
-                        /* @__PURE__ */ jsxDEV("circle", {
-                          cx: "50",
-                          cy: "50",
-                          r: "45",
-                          fill: "none",
-                          strokeWidth: "8",
-                          className: "stroke-muted"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("circle", {
-                          cx: "50",
-                          cy: "50",
-                          r: "45",
-                          fill: "none",
-                          strokeWidth: "8",
-                          strokeLinecap: "round",
-                          strokeDasharray: `${percentComplete * 2.83} 283`,
-                          className: "stroke-blue-500 transition-all duration-500"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "text-center",
-                      children: [
-                        /* @__PURE__ */ jsxDEV("div", {
-                          className: "font-bold text-3xl",
-                          children: [
-                            Math.round(percentComplete),
-                            "%"
-                          ]
-                        }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV("div", {
-                          className: "text-muted-foreground text-sm",
-                          children: "Complete"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "grid grid-cols-3 gap-4 text-center",
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    children: [
-                      /* @__PURE__ */ jsxDEV("div", {
-                        className: "font-bold text-2xl text-green-500",
-                        children: completedSteps
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("div", {
-                        className: "text-muted-foreground text-sm",
-                        children: "Completed"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV("div", {
-                    children: [
-                      /* @__PURE__ */ jsxDEV("div", {
-                        className: "font-bold text-2xl text-orange-500",
-                        children: remainingSteps
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV("div", {
-                        className: "text-muted-foreground text-sm",
-                        children: "Remaining"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV("div", {
-                    children: [
-                      /* @__PURE__ */ jsxDEV("div", {
-                        className: "font-bold text-2xl",
-                        children: [
-                          estimatedMinutes,
-                          "m"
-                        ]
-                      }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV("div", {
-                        className: "text-muted-foreground text-sm",
-                        children: "Est. Time"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV(Card, {
-        children: [
-          /* @__PURE__ */ jsxDEV(CardHeader, {
-            children: /* @__PURE__ */ jsxDEV(CardTitle, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "⚡"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "Experience Points"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(CardContent, {
-            className: "space-y-4",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex items-baseline gap-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV("span", {
-                    className: "font-bold text-3xl text-blue-500",
-                    children: progress.xpEarned
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-muted-foreground",
-                    children: [
-                      "/ ",
-                      totalXp,
-                      " XP"
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV(XpBar, {
-                current: progress.xpEarned,
-                max: totalXp,
-                showLabel: false,
-                size: "lg"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV(Card, {
-        children: [
-          /* @__PURE__ */ jsxDEV(CardHeader, {
-            children: /* @__PURE__ */ jsxDEV(CardTitle, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "\uD83C\uDFC5"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "Achievements"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(CardContent, {
-            children: [
-              /* @__PURE__ */ jsxDEV(BadgeDisplay, {
-                badges: progress.badges,
-                size: "lg"
-              }, undefined, false, undefined, this),
-              progress.badges.length === 0 && track.completionRewards?.badgeKey && /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground text-sm",
-                children: [
-                  'Complete all steps to earn the "',
-                  track.completionRewards.badgeKey,
-                  '" badge!'
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV(Card, {
-        children: [
-          /* @__PURE__ */ jsxDEV(CardHeader, {
-            children: /* @__PURE__ */ jsxDEV(CardTitle, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "\uD83D\uDCCB"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "Step Details"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(CardContent, {
-            children: /* @__PURE__ */ jsxDEV("div", {
-              className: "space-y-3",
-              children: track.steps.map((step, index) => {
-                const isCompleted = progress.completedStepIds.includes(step.id);
-                const stepProgress = isCompleted ? 100 : 0;
-                return /* @__PURE__ */ jsxDEV("div", {
-                  className: "space-y-1",
-                  children: [
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "flex items-center justify-between text-sm",
-                      children: [
-                        /* @__PURE__ */ jsxDEV("span", {
-                          className: isCompleted ? "text-green-500" : "text-foreground",
-                          children: [
-                            index + 1,
-                            ". ",
-                            step.title
-                          ]
-                        }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV("span", {
-                          className: isCompleted ? "text-green-500" : "text-muted-foreground",
-                          children: isCompleted ? "✓" : "Pending"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV(Progress, {
-                      value: stepProgress,
-                      className: "h-1"
-                    }, undefined, false, undefined, this)
-                  ]
-                }, step.id, true, undefined, this);
-              })
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-export {
-  ProgressView,
-  ProgressView 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?.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};