@contractspec/example.learning-journey-ui-onboarding 3.7.6 → 3.7.10

package/dist/node/views/index.js

@@ -1,4 +1,5 @@
 // src/views/Overview.tsx
+import { XpBar } from "@contractspec/example.learning-journey-ui-shared";
 import { Button } from "@contractspec/lib.design-system";
 import {
   Card,
@@ -7,7 +8,6 @@ import {
   CardTitle
 } from "@contractspec/lib.ui-kit-web/ui/card";
 import { Progress } from "@contractspec/lib.ui-kit-web/ui/progress";
-import { XpBar } from "@contractspec/example.learning-journey-ui-shared";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Overview({
@@ -40,15 +40,15 @@ function Overview({
                 className: "flex-1",
                 children: [
                   /* @__PURE__ */ jsxDEV("h1", {
-                    className: "text-2xl font-bold",
+                    className: "font-bold text-2xl",
                     children: track.name
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-muted-foreground mt-1 max-w-2xl",
+                    className: "mt-1 max-w-2xl text-muted-foreground",
                     children: track.description
                   }, undefined, false, undefined, this),
                   !isComplete && /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-muted-foreground mt-3 text-sm",
+                    className: "mt-3 text-muted-foreground text-sm",
                     children: [
                       "⏱️ Estimated time:",
                       " ",
@@ -74,14 +74,14 @@ function Overview({
               /* @__PURE__ */ jsxDEV(CardHeader, {
                 className: "pb-2",
                 children: /* @__PURE__ */ jsxDEV(CardTitle, {
-                  className: "text-muted-foreground text-sm font-medium",
+                  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: "text-3xl font-bold",
+                    className: "font-bold text-3xl",
                     children: [
                       Math.round(percentComplete),
                       "%"
@@ -92,7 +92,7 @@ function Overview({
                     className: "mt-2 h-2"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-muted-foreground mt-2 text-sm",
+                    className: "mt-2 text-muted-foreground text-sm",
                     children: [
                       completedSteps,
                       " of ",
@@ -109,14 +109,14 @@ function Overview({
               /* @__PURE__ */ jsxDEV(CardHeader, {
                 className: "pb-2",
                 children: /* @__PURE__ */ jsxDEV(CardTitle, {
-                  className: "text-muted-foreground text-sm font-medium",
+                  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: "text-3xl font-bold text-blue-500",
+                    className: "font-bold text-3xl text-blue-500",
                     children: progress.xpEarned
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV(XpBar, {
@@ -134,18 +134,18 @@ function Overview({
               /* @__PURE__ */ jsxDEV(CardHeader, {
                 className: "pb-2",
                 children: /* @__PURE__ */ jsxDEV(CardTitle, {
-                  className: "text-muted-foreground text-sm font-medium",
+                  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: "text-3xl font-bold",
+                    className: "font-bold text-3xl",
                     children: isComplete ? "✓" : `~${estimatedMinutes}m`
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-muted-foreground mt-2 text-sm",
+                    className: "mt-2 text-muted-foreground text-sm",
                     children: isComplete ? "All done!" : `${remainingSteps} steps to go`
                   }, undefined, false, undefined, this)
                 ]
@@ -179,7 +179,7 @@ function Overview({
                   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 text-sm font-semibold ${isStepCompleted ? "bg-green-500 text-white" : isCurrent ? "bg-blue-500 text-white" : "bg-muted text-muted-foreground"}`,
+                      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", {
@@ -216,7 +216,7 @@ function Overview({
             /* @__PURE__ */ jsxDEV("div", {
               children: [
                 /* @__PURE__ */ jsxDEV("h3", {
-                  className: "text-lg font-semibold text-green-500",
+                  className: "font-semibold text-green-500 text-lg",
                   children: "Onboarding Complete!"
                 }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV("p", {
@@ -236,209 +236,19 @@ function Overview({
   }, undefined, true, undefined, this);
 }
 
-// src/components/StepChecklist.tsx
-import { Button as Button2 } from "@contractspec/lib.design-system";
-import { cn } from "@contractspec/lib.ui-kit-core";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-"use client";
-function StepChecklist({
-  step,
-  stepNumber,
-  isCompleted,
-  isCurrent,
-  isExpanded,
-  onToggle,
-  onComplete
-}) {
-  return /* @__PURE__ */ jsxDEV2("div", {
-    className: cn("rounded-xl border transition-all", isCompleted && "border-green-500/50 bg-green-500/5", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/5", !isCompleted && !isCurrent && "border-border"),
-    children: [
-      /* @__PURE__ */ jsxDEV2("button", {
-        type: "button",
-        className: "flex w-full items-center gap-4 p-4 text-left",
-        onClick: onToggle,
-        children: [
-          /* @__PURE__ */ jsxDEV2("div", {
-            className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors", isCompleted && "border-green-500 bg-green-500 text-white", isCurrent && !isCompleted && "border-violet-500 text-violet-500", !isCompleted && !isCurrent && "border-muted-foreground text-muted-foreground"),
-            children: isCompleted ? "✓" : stepNumber
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2("div", {
-            className: "min-w-0 flex-1",
-            children: [
-              /* @__PURE__ */ jsxDEV2("h4", {
-                className: cn("font-semibold", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-foreground", !isCompleted && !isCurrent && "text-muted-foreground"),
-                children: step.title
-              }, undefined, false, undefined, this),
-              !isExpanded && step.description && /* @__PURE__ */ jsxDEV2("p", {
-                className: "text-muted-foreground truncate text-sm",
-                children: step.description
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          step.xpReward && /* @__PURE__ */ jsxDEV2("span", {
-            className: cn("shrink-0 rounded-full px-2 py-1 text-xs font-semibold", isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"),
-            children: [
-              "+",
-              step.xpReward,
-              " XP"
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV2("span", {
-            className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
-            children: "▼"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      isExpanded && /* @__PURE__ */ jsxDEV2("div", {
-        className: "border-t px-4 py-4",
-        children: [
-          step.description && /* @__PURE__ */ jsxDEV2("p", {
-            className: "text-muted-foreground mb-4",
-            children: step.description
-          }, undefined, false, undefined, this),
-          step.instructions && /* @__PURE__ */ jsxDEV2("div", {
-            className: "bg-muted mb-4 rounded-lg p-4",
-            children: [
-              /* @__PURE__ */ jsxDEV2("p", {
-                className: "mb-2 text-sm font-medium",
-                children: "Instructions:"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("p", {
-                className: "text-muted-foreground text-sm",
-                children: step.instructions
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV2("div", {
-            className: "flex flex-wrap gap-2",
-            children: [
-              step.actionUrl && /* @__PURE__ */ jsxDEV2(Button2, {
-                variant: "outline",
-                size: "sm",
-                onClick: () => window.open(step.actionUrl, "_blank"),
-                children: step.actionLabel ?? "Try it"
-              }, undefined, false, undefined, this),
-              !isCompleted && /* @__PURE__ */ jsxDEV2(Button2, {
-                size: "sm",
-                onClick: onComplete,
-                children: "Mark as Complete"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/views/Steps.tsx
-import { useState } from "react";
-import { Progress as Progress2 } from "@contractspec/lib.ui-kit-web/ui/progress";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-"use client";
-function Steps({ track, progress, onStepComplete }) {
-  const [expandedStepId, setExpandedStepId] = useState(() => {
-    const firstIncomplete = track.steps.find((s) => !progress.completedStepIds.includes(s.id));
-    return firstIncomplete?.id ?? null;
-  });
-  const completedSteps = progress.completedStepIds.length;
-  const totalSteps = track.steps.length;
-  const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
-  const currentStepIndex = track.steps.findIndex((s) => !progress.completedStepIds.includes(s.id));
-  return /* @__PURE__ */ jsxDEV3("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "space-y-2",
-        children: [
-          /* @__PURE__ */ jsxDEV3("div", {
-            className: "flex items-center justify-between",
-            children: [
-              /* @__PURE__ */ jsxDEV3("h2", {
-                className: "text-xl font-bold",
-                children: "Complete Each Step"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3("span", {
-                className: "text-muted-foreground text-sm",
-                children: [
-                  completedSteps,
-                  " / ",
-                  totalSteps,
-                  " completed"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV3(Progress2, {
-            value: percentComplete,
-            className: "h-2"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "space-y-3",
-        children: track.steps.map((step, index) => {
-          const isCompleted = progress.completedStepIds.includes(step.id);
-          const isCurrent = index === currentStepIndex;
-          return /* @__PURE__ */ jsxDEV3(StepChecklist, {
-            step,
-            stepNumber: index + 1,
-            isCompleted,
-            isCurrent,
-            isExpanded: expandedStepId === step.id,
-            onToggle: () => setExpandedStepId(expandedStepId === step.id ? null : step.id),
-            onComplete: () => {
-              onStepComplete?.(step.id);
-              const nextStep = track.steps[index + 1];
-              if (nextStep && !progress.completedStepIds.includes(nextStep.id)) {
-                setExpandedStepId(nextStep.id);
-              }
-            }
-          }, step.id, false, undefined, this);
-        })
-      }, undefined, false, undefined, this),
-      track.completionRewards && percentComplete < 100 && /* @__PURE__ */ jsxDEV3("div", {
-        className: "rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",
-        children: /* @__PURE__ */ jsxDEV3("p", {
-          className: "text-sm",
-          children: [
-            "\uD83C\uDF81 Complete all steps to unlock:",
-            track.completionRewards.xpBonus && /* @__PURE__ */ jsxDEV3("span", {
-              className: "ml-2 font-semibold text-blue-500",
-              children: [
-                "+",
-                track.completionRewards.xpBonus,
-                " XP bonus"
-              ]
-            }, undefined, true, undefined, this),
-            track.completionRewards.badgeKey && /* @__PURE__ */ jsxDEV3("span", {
-              className: "ml-2 font-semibold text-amber-500",
-              children: [
-                '+ "',
-                track.completionRewards.badgeKey,
-                '" badge'
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
 // src/views/Progress.tsx
+import {
+  BadgeDisplay,
+  XpBar as XpBar2
+} from "@contractspec/example.learning-journey-ui-shared";
 import {
   Card as Card2,
   CardContent as CardContent2,
   CardHeader as CardHeader2,
   CardTitle as CardTitle2
 } from "@contractspec/lib.ui-kit-web/ui/card";
-import { Progress as Progress3 } from "@contractspec/lib.ui-kit-web/ui/progress";
-import {
-  XpBar as XpBar2,
-  BadgeDisplay
-} from "@contractspec/example.learning-journey-ui-shared";
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+import { Progress as Progress2 } from "@contractspec/lib.ui-kit-web/ui/progress";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function ProgressView({ track, progress }) {
   const totalSteps = track.steps.length;
@@ -447,37 +257,37 @@ function ProgressView({ track, progress }) {
   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__ */ jsxDEV4("div", {
+  return /* @__PURE__ */ jsxDEV2("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV4(Card2, {
+      /* @__PURE__ */ jsxDEV2(Card2, {
         children: [
-          /* @__PURE__ */ jsxDEV4(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
+          /* @__PURE__ */ jsxDEV2(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV2(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV4("span", {
+                /* @__PURE__ */ jsxDEV2("span", {
                   children: "\uD83D\uDCC8"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("span", {
+                /* @__PURE__ */ jsxDEV2("span", {
                   children: "Your Progress"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(CardContent2, {
+          /* @__PURE__ */ jsxDEV2(CardContent2, {
             className: "space-y-6",
             children: [
-              /* @__PURE__ */ jsxDEV4("div", {
+              /* @__PURE__ */ jsxDEV2("div", {
                 className: "flex items-center justify-center",
-                children: /* @__PURE__ */ jsxDEV4("div", {
+                children: /* @__PURE__ */ jsxDEV2("div", {
                   className: "relative flex h-40 w-40 items-center justify-center",
                   children: [
-                    /* @__PURE__ */ jsxDEV4("svg", {
+                    /* @__PURE__ */ jsxDEV2("svg", {
                       className: "absolute h-full w-full -rotate-90",
                       viewBox: "0 0 100 100",
                       children: [
-                        /* @__PURE__ */ jsxDEV4("circle", {
+                        /* @__PURE__ */ jsxDEV2("circle", {
                           cx: "50",
                           cy: "50",
                           r: "45",
@@ -485,7 +295,7 @@ function ProgressView({ track, progress }) {
                           strokeWidth: "8",
                           className: "stroke-muted"
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV4("circle", {
+                        /* @__PURE__ */ jsxDEV2("circle", {
                           cx: "50",
                           cy: "50",
                           r: "45",
@@ -497,17 +307,17 @@ function ProgressView({ track, progress }) {
                         }, undefined, false, undefined, this)
                       ]
                     }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV4("div", {
+                    /* @__PURE__ */ jsxDEV2("div", {
                       className: "text-center",
                       children: [
-                        /* @__PURE__ */ jsxDEV4("div", {
-                          className: "text-3xl font-bold",
+                        /* @__PURE__ */ jsxDEV2("div", {
+                          className: "font-bold text-3xl",
                           children: [
                             Math.round(percentComplete),
                             "%"
                           ]
                         }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV4("div", {
+                        /* @__PURE__ */ jsxDEV2("div", {
                           className: "text-muted-foreground text-sm",
                           children: "Complete"
                         }, undefined, false, undefined, this)
@@ -516,43 +326,43 @@ function ProgressView({ track, progress }) {
                   ]
                 }, undefined, true, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV4("div", {
+              /* @__PURE__ */ jsxDEV2("div", {
                 className: "grid grid-cols-3 gap-4 text-center",
                 children: [
-                  /* @__PURE__ */ jsxDEV4("div", {
+                  /* @__PURE__ */ jsxDEV2("div", {
                     children: [
-                      /* @__PURE__ */ jsxDEV4("div", {
-                        className: "text-2xl font-bold text-green-500",
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "font-bold text-2xl text-green-500",
                         children: completedSteps
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV4("div", {
+                      /* @__PURE__ */ jsxDEV2("div", {
                         className: "text-muted-foreground text-sm",
                         children: "Completed"
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("div", {
+                  /* @__PURE__ */ jsxDEV2("div", {
                     children: [
-                      /* @__PURE__ */ jsxDEV4("div", {
-                        className: "text-2xl font-bold text-orange-500",
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "font-bold text-2xl text-orange-500",
                         children: remainingSteps
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV4("div", {
+                      /* @__PURE__ */ jsxDEV2("div", {
                         className: "text-muted-foreground text-sm",
                         children: "Remaining"
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("div", {
+                  /* @__PURE__ */ jsxDEV2("div", {
                     children: [
-                      /* @__PURE__ */ jsxDEV4("div", {
-                        className: "text-2xl font-bold",
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "font-bold text-2xl",
                         children: [
                           estimatedMinutes,
                           "m"
                         ]
                       }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV4("div", {
+                      /* @__PURE__ */ jsxDEV2("div", {
                         className: "text-muted-foreground text-sm",
                         children: "Est. Time"
                       }, undefined, false, undefined, this)
@@ -564,32 +374,32 @@ function ProgressView({ track, progress }) {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4(Card2, {
+      /* @__PURE__ */ jsxDEV2(Card2, {
         children: [
-          /* @__PURE__ */ jsxDEV4(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
+          /* @__PURE__ */ jsxDEV2(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV2(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV4("span", {
+                /* @__PURE__ */ jsxDEV2("span", {
                   children: "⚡"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("span", {
+                /* @__PURE__ */ jsxDEV2("span", {
                   children: "Experience Points"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(CardContent2, {
+          /* @__PURE__ */ jsxDEV2(CardContent2, {
             className: "space-y-4",
             children: [
-              /* @__PURE__ */ jsxDEV4("div", {
+              /* @__PURE__ */ jsxDEV2("div", {
                 className: "flex items-baseline gap-2",
                 children: [
-                  /* @__PURE__ */ jsxDEV4("span", {
-                    className: "text-3xl font-bold text-blue-500",
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "font-bold text-3xl text-blue-500",
                     children: progress.xpEarned
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("span", {
+                  /* @__PURE__ */ jsxDEV2("span", {
                     className: "text-muted-foreground",
                     children: [
                       "/ ",
@@ -599,7 +409,7 @@ function ProgressView({ track, progress }) {
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV4(XpBar2, {
+              /* @__PURE__ */ jsxDEV2(XpBar2, {
                 current: progress.xpEarned,
                 max: totalXp,
                 showLabel: false,
@@ -609,28 +419,28 @@ function ProgressView({ track, progress }) {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4(Card2, {
+      /* @__PURE__ */ jsxDEV2(Card2, {
         children: [
-          /* @__PURE__ */ jsxDEV4(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
+          /* @__PURE__ */ jsxDEV2(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV2(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV4("span", {
+                /* @__PURE__ */ jsxDEV2("span", {
                   children: "\uD83C\uDFC5"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("span", {
+                /* @__PURE__ */ jsxDEV2("span", {
                   children: "Achievements"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(CardContent2, {
+          /* @__PURE__ */ jsxDEV2(CardContent2, {
             children: [
-              /* @__PURE__ */ jsxDEV4(BadgeDisplay, {
+              /* @__PURE__ */ jsxDEV2(BadgeDisplay, {
                 badges: progress.badges,
                 size: "lg"
               }, undefined, false, undefined, this),
-              progress.badges.length === 0 && track.completionRewards?.badgeKey && /* @__PURE__ */ jsxDEV4("p", {
+              progress.badges.length === 0 && track.completionRewards?.badgeKey && /* @__PURE__ */ jsxDEV2("p", {
                 className: "text-muted-foreground text-sm",
                 children: [
                   'Complete all steps to earn the "',
@@ -642,34 +452,34 @@ function ProgressView({ track, progress }) {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4(Card2, {
+      /* @__PURE__ */ jsxDEV2(Card2, {
         children: [
-          /* @__PURE__ */ jsxDEV4(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
+          /* @__PURE__ */ jsxDEV2(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV2(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV4("span", {
+                /* @__PURE__ */ jsxDEV2("span", {
                   children: "\uD83D\uDCCB"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("span", {
+                /* @__PURE__ */ jsxDEV2("span", {
                   children: "Step Details"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(CardContent2, {
-            children: /* @__PURE__ */ jsxDEV4("div", {
+          /* @__PURE__ */ jsxDEV2(CardContent2, {
+            children: /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV4("div", {
+                return /* @__PURE__ */ jsxDEV2("div", {
                   className: "space-y-1",
                   children: [
-                    /* @__PURE__ */ jsxDEV4("div", {
+                    /* @__PURE__ */ jsxDEV2("div", {
                       className: "flex items-center justify-between text-sm",
                       children: [
-                        /* @__PURE__ */ jsxDEV4("span", {
+                        /* @__PURE__ */ jsxDEV2("span", {
                           className: isCompleted ? "text-green-500" : "text-foreground",
                           children: [
                             index + 1,
@@ -677,13 +487,13 @@ function ProgressView({ track, progress }) {
                             step.title
                           ]
                         }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV4("span", {
+                        /* @__PURE__ */ jsxDEV2("span", {
                           className: isCompleted ? "text-green-500" : "text-muted-foreground",
                           children: isCompleted ? "✓" : "Pending"
                         }, undefined, false, undefined, this)
                       ]
                     }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV4(Progress3, {
+                    /* @__PURE__ */ jsxDEV2(Progress2, {
                       value: stepProgress,
                       className: "h-1"
                     }, undefined, false, undefined, this)
@@ -697,6 +507,196 @@ function ProgressView({ track, progress }) {
     ]
   }, undefined, true, undefined, this);
 }
+// src/components/StepChecklist.tsx
+import { Button as Button2 } from "@contractspec/lib.design-system";
+import { cn } from "@contractspec/lib.ui-kit-core";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function StepChecklist({
+  step,
+  stepNumber,
+  isCompleted,
+  isCurrent,
+  isExpanded,
+  onToggle,
+  onComplete
+}) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: cn("rounded-xl border transition-all", isCompleted && "border-green-500/50 bg-green-500/5", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/5", !isCompleted && !isCurrent && "border-border"),
+    children: [
+      /* @__PURE__ */ jsxDEV3("button", {
+        type: "button",
+        className: "flex w-full items-center gap-4 p-4 text-left",
+        onClick: onToggle,
+        children: [
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors", isCompleted && "border-green-500 bg-green-500 text-white", isCurrent && !isCompleted && "border-violet-500 text-violet-500", !isCompleted && !isCurrent && "border-muted-foreground text-muted-foreground"),
+            children: isCompleted ? "✓" : stepNumber
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "min-w-0 flex-1",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h4", {
+                className: cn("font-semibold", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-foreground", !isCompleted && !isCurrent && "text-muted-foreground"),
+                children: step.title
+              }, undefined, false, undefined, this),
+              !isExpanded && step.description && /* @__PURE__ */ jsxDEV3("p", {
+                className: "truncate text-muted-foreground text-sm",
+                children: step.description
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          step.xpReward && /* @__PURE__ */ jsxDEV3("span", {
+            className: cn("shrink-0 rounded-full px-2 py-1 font-semibold text-xs", isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"),
+            children: [
+              "+",
+              step.xpReward,
+              " XP"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("span", {
+            className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
+            children: "▼"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      isExpanded && /* @__PURE__ */ jsxDEV3("div", {
+        className: "border-t px-4 py-4",
+        children: [
+          step.description && /* @__PURE__ */ jsxDEV3("p", {
+            className: "mb-4 text-muted-foreground",
+            children: step.description
+          }, undefined, false, undefined, this),
+          step.instructions && /* @__PURE__ */ jsxDEV3("div", {
+            className: "mb-4 rounded-lg bg-muted p-4",
+            children: [
+              /* @__PURE__ */ jsxDEV3("p", {
+                className: "mb-2 font-medium text-sm",
+                children: "Instructions:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("p", {
+                className: "text-muted-foreground text-sm",
+                children: step.instructions
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "flex flex-wrap gap-2",
+            children: [
+              step.actionUrl && /* @__PURE__ */ jsxDEV3(Button2, {
+                variant: "outline",
+                size: "sm",
+                onClick: () => window.open(step.actionUrl, "_blank"),
+                children: step.actionLabel ?? "Try it"
+              }, undefined, false, undefined, this),
+              !isCompleted && /* @__PURE__ */ jsxDEV3(Button2, {
+                size: "sm",
+                onClick: onComplete,
+                children: "Mark as Complete"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/views/Steps.tsx
+import { Progress as Progress3 } from "@contractspec/lib.ui-kit-web/ui/progress";
+import { useState } from "react";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function Steps({ track, progress, onStepComplete }) {
+  const [expandedStepId, setExpandedStepId] = useState(() => {
+    const firstIncomplete = track.steps.find((s) => !progress.completedStepIds.includes(s.id));
+    return firstIncomplete?.id ?? null;
+  });
+  const completedSteps = progress.completedStepIds.length;
+  const totalSteps = track.steps.length;
+  const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
+  const currentStepIndex = track.steps.findIndex((s) => !progress.completedStepIds.includes(s.id));
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "flex items-center justify-between",
+            children: [
+              /* @__PURE__ */ jsxDEV4("h2", {
+                className: "font-bold text-xl",
+                children: "Complete Each Step"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("span", {
+                className: "text-muted-foreground text-sm",
+                children: [
+                  completedSteps,
+                  " / ",
+                  totalSteps,
+                  " completed"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Progress3, {
+            value: percentComplete,
+            className: "h-2"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-3",
+        children: track.steps.map((step, index) => {
+          const isCompleted = progress.completedStepIds.includes(step.id);
+          const isCurrent = index === currentStepIndex;
+          return /* @__PURE__ */ jsxDEV4(StepChecklist, {
+            step,
+            stepNumber: index + 1,
+            isCompleted,
+            isCurrent,
+            isExpanded: expandedStepId === step.id,
+            onToggle: () => setExpandedStepId(expandedStepId === step.id ? null : step.id),
+            onComplete: () => {
+              onStepComplete?.(step.id);
+              const nextStep = track.steps[index + 1];
+              if (nextStep && !progress.completedStepIds.includes(nextStep.id)) {
+                setExpandedStepId(nextStep.id);
+              }
+            }
+          }, step.id, false, undefined, this);
+        })
+      }, undefined, false, undefined, this),
+      track.completionRewards && percentComplete < 100 && /* @__PURE__ */ jsxDEV4("div", {
+        className: "rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",
+        children: /* @__PURE__ */ jsxDEV4("p", {
+          className: "text-sm",
+          children: [
+            "\uD83C\uDF81 Complete all steps to unlock:",
+            track.completionRewards.xpBonus && /* @__PURE__ */ jsxDEV4("span", {
+              className: "ml-2 font-semibold text-blue-500",
+              children: [
+                "+",
+                track.completionRewards.xpBonus,
+                " XP bonus"
+              ]
+            }, undefined, true, undefined, this),
+            track.completionRewards.badgeKey && /* @__PURE__ */ jsxDEV4("span", {
+              className: "ml-2 font-semibold text-amber-500",
+              children: [
+                '+ "',
+                track.completionRewards.badgeKey,
+                '" badge'
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/components/JourneyMap.tsx
 import { cn as cn2 } from "@contractspec/lib.ui-kit-web/ui/utils";
 import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
@@ -738,7 +738,7 @@ function JourneyMap({
                 /* @__PURE__ */ jsxDEV5("div", {
                   className: "text-center",
                   children: /* @__PURE__ */ jsxDEV5("p", {
-                    className: cn2("max-w-[100px] truncate text-xs font-medium", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-violet-500", !isCompleted && !isCurrent && "text-muted-foreground"),
+                    className: cn2("max-w-[100px] truncate font-medium text-xs", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-violet-500", !isCompleted && !isCurrent && "text-muted-foreground"),
                     children: step.title
                   }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this)
@@ -772,7 +772,7 @@ function Timeline({ track, progress }) {
         className: "text-center",
         children: [
           /* @__PURE__ */ jsxDEV6("h2", {
-            className: "text-xl font-bold",
+            className: "font-bold text-xl",
             children: "Your Learning Journey"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV6("p", {
@@ -825,7 +825,7 @@ function Timeline({ track, progress }) {
               className: "relative",
               children: [
                 /* @__PURE__ */ jsxDEV6("div", {
-                  className: "bg-border absolute top-0 left-4 h-full w-0.5"
+                  className: "absolute top-0 left-4 h-full w-0.5 bg-border"
                 }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV6("div", {
                   className: "space-y-6",
@@ -858,19 +858,19 @@ function Timeline({ track, progress }) {
                                             children: step.title
                                           }, undefined, false, undefined, this),
                                           /* @__PURE__ */ jsxDEV6("span", {
-                                            className: "bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs",
+                                            className: "rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",
                                             children: surface
                                           }, undefined, false, undefined, this)
                                         ]
                                       }, undefined, true, undefined, this),
                                       /* @__PURE__ */ jsxDEV6("p", {
-                                        className: "text-muted-foreground mt-1 text-sm",
+                                        className: "mt-1 text-muted-foreground text-sm",
                                         children: step.description
                                       }, undefined, false, undefined, this)
                                     ]
                                   }, undefined, true, undefined, this),
                                   step.xpReward && /* @__PURE__ */ jsxDEV6("span", {
-                                    className: `shrink-0 rounded-full px-2 py-1 text-xs font-semibold ${isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"}`,
+                                    className: `shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"}`,
                                     children: [
                                       "+",
                                       step.xpReward,