@contractspec/example.learning-journey-ui-gamified 3.7.6 → 3.7.7

package/dist/index.js

@@ -1,5 +1,10 @@
 // @bun
 // src/views/Overview.tsx
+import {
+  BadgeDisplay,
+  StreakCounter,
+  XpBar
+} from "@contractspec/example.learning-journey-ui-shared";
 import { Button } from "@contractspec/lib.design-system";
 import {
   Card,
@@ -7,11 +12,6 @@ import {
   CardHeader,
   CardTitle
 } from "@contractspec/lib.ui-kit-web/ui/card";
-import {
-  XpBar,
-  StreakCounter,
-  BadgeDisplay
-} from "@contractspec/example.learning-journey-ui-shared";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function Overview({ track, progress, onStart }) {
@@ -37,11 +37,11 @@ function Overview({ track, progress, onStart }) {
                 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",
+                    className: "mt-1 text-muted-foreground",
                     children: track.description
                   }, undefined, false, undefined, this)
                 ]
@@ -65,14 +65,14 @@ function Overview({ track, progress, onStart }) {
               /* @__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 Progress"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV(CardContent, {
                 children: [
                   /* @__PURE__ */ jsxDEV("div", {
-                    className: "text-3xl font-bold text-violet-500",
+                    className: "font-bold text-3xl text-violet-500",
                     children: progress.xpEarned.toLocaleString()
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV(XpBar, {
@@ -90,19 +90,19 @@ function Overview({ track, progress, onStart }) {
               /* @__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: "Steps Completed"
                 }, 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: [
                       completedSteps,
                       " ",
                       /* @__PURE__ */ jsxDEV("span", {
-                        className: "text-muted-foreground text-lg",
+                        className: "text-lg text-muted-foreground",
                         children: [
                           "/ ",
                           totalSteps
@@ -111,7 +111,7 @@ function Overview({ track, progress, onStart }) {
                     ]
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV("div", {
-                    className: "bg-muted mt-2 h-2 w-full overflow-hidden rounded-full",
+                    className: "mt-2 h-2 w-full overflow-hidden rounded-full bg-muted",
                     children: /* @__PURE__ */ jsxDEV("div", {
                       className: "h-full bg-green-500 transition-all duration-500",
                       style: { width: `${completedSteps / totalSteps * 100}%` }
@@ -126,7 +126,7 @@ function Overview({ track, progress, onStart }) {
               /* @__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: "Badges Earned"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
@@ -179,7 +179,7 @@ function Overview({ track, progress, onStart }) {
                     className: "flex items-center gap-3",
                     children: [
                       nextStep.xpReward && /* @__PURE__ */ jsxDEV("span", {
-                        className: "rounded-full bg-green-500/10 px-3 py-1 text-sm font-semibold text-green-500",
+                        className: "rounded-full bg-green-500/10 px-3 py-1 font-semibold text-green-500 text-sm",
                         children: [
                           "+",
                           nextStep.xpReward,
@@ -210,7 +210,7 @@ function Overview({ track, progress, onStart }) {
             /* @__PURE__ */ jsxDEV("div", {
               children: [
                 /* @__PURE__ */ jsxDEV("h3", {
-                  className: "text-lg font-semibold text-green-500",
+                  className: "font-semibold text-green-500 text-lg",
                   children: "Track Complete!"
                 }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV("p", {
@@ -233,165 +233,10 @@ function Overview({ track, progress, onStart }) {
   }, undefined, true, undefined, this);
 }
 
-// src/components/FlashCard.tsx
-import { useState } from "react";
-import { Button as Button2 } from "@contractspec/lib.design-system";
-import { Card as Card2, CardContent as CardContent2 } from "@contractspec/lib.ui-kit-web/ui/card";
+// src/components/MasteryRing.tsx
 import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
-function FlashCard({
-  step,
-  isCompleted,
-  isCurrent,
-  onComplete
-}) {
-  const [isFlipped, setIsFlipped] = useState(false);
-  return /* @__PURE__ */ jsxDEV2(Card2, {
-    className: cn("relative cursor-pointer overflow-hidden transition-all duration-300", isCurrent && "ring-primary ring-2", isCompleted && "opacity-60"),
-    onClick: () => !isCompleted && setIsFlipped(!isFlipped),
-    children: /* @__PURE__ */ jsxDEV2(CardContent2, {
-      className: "p-6",
-      children: [
-        /* @__PURE__ */ jsxDEV2("div", {
-          className: cn("space-y-4 transition-opacity duration-200", isFlipped ? "opacity-0" : "opacity-100"),
-          children: [
-            /* @__PURE__ */ jsxDEV2("div", {
-              className: "flex items-start justify-between",
-              children: [
-                /* @__PURE__ */ jsxDEV2("div", {
-                  className: "flex-1",
-                  children: [
-                    /* @__PURE__ */ jsxDEV2("h3", {
-                      className: "text-lg font-semibold",
-                      children: step.title
-                    }, undefined, false, undefined, this),
-                    step.description && /* @__PURE__ */ jsxDEV2("p", {
-                      className: "text-muted-foreground mt-1 text-sm",
-                      children: step.description
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                step.xpReward && /* @__PURE__ */ jsxDEV2("span", {
-                  className: "rounded-full bg-green-500/10 px-2 py-1 text-xs font-semibold text-green-500",
-                  children: [
-                    "+",
-                    step.xpReward,
-                    " XP"
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            isCompleted && /* @__PURE__ */ jsxDEV2("div", {
-              className: "flex items-center gap-2 text-green-500",
-              children: [
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "\u2713"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("span", {
-                  className: "text-sm font-medium",
-                  children: "Completed"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            isCurrent && !isCompleted && /* @__PURE__ */ jsxDEV2("p", {
-              className: "text-muted-foreground text-xs",
-              children: "Tap to reveal action"
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this),
-        isFlipped && !isCompleted && /* @__PURE__ */ jsxDEV2("div", {
-          className: "absolute inset-0 flex flex-col items-center justify-center gap-4 bg-gradient-to-br from-violet-500/10 to-violet-600/10 p-6",
-          children: [
-            /* @__PURE__ */ jsxDEV2("p", {
-              className: "text-center text-sm",
-              children: step.instructions ?? "Complete this step to earn XP"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV2("div", {
-              className: "flex gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV2(Button2, {
-                  variant: "outline",
-                  size: "sm",
-                  onClick: () => setIsFlipped(false),
-                  children: "Back"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2(Button2, {
-                  size: "sm",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onComplete?.();
-                  },
-                  children: "Mark Complete"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/views/Steps.tsx
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-"use client";
-function Steps({ track, progress, onStepComplete }) {
-  const currentStepIndex = track.steps.findIndex((s) => !progress.completedStepIds.includes(s.id));
-  return /* @__PURE__ */ jsxDEV3("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "text-center",
-        children: [
-          /* @__PURE__ */ jsxDEV3("h2", {
-            className: "text-xl font-bold",
-            children: "Complete Your Challenges"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3("p", {
-            className: "text-muted-foreground",
-            children: "Tap each card to reveal the action, then mark as complete"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "grid gap-4 md:grid-cols-2",
-        children: track.steps.map((step, index) => {
-          const isCompleted = progress.completedStepIds.includes(step.id);
-          const isCurrent = index === currentStepIndex;
-          return /* @__PURE__ */ jsxDEV3(FlashCard, {
-            step,
-            isCompleted,
-            isCurrent,
-            onComplete: () => onStepComplete?.(step.id)
-          }, step.id, false, undefined, this);
-        })
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "text-muted-foreground text-center text-sm",
-        children: [
-          progress.completedStepIds.length,
-          " of ",
-          track.steps.length,
-          " completed",
-          track.completionRewards?.xpBonus && /* @__PURE__ */ jsxDEV3("span", {
-            className: "ml-2 text-green-500",
-            children: [
-              "(+",
-              track.completionRewards.xpBonus,
-              " XP bonus on completion)"
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/MasteryRing.tsx
-import { cn as cn2 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
-"use client";
 var sizeStyles = {
   sm: { container: "h-16 w-16", text: "text-xs", ring: 48, stroke: 4 },
   md: { container: "h-24 w-24", text: "text-sm", ring: 72, stroke: 6 },
@@ -413,16 +258,16 @@ function MasteryRing({
   const radius = (styles.ring - styles.stroke) / 2;
   const circumference = 2 * Math.PI * radius;
   const strokeDashoffset = circumference - percentage / 100 * circumference;
-  return /* @__PURE__ */ jsxDEV4("div", {
-    className: cn2("relative flex flex-col items-center gap-1", styles.container),
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: cn("relative flex flex-col items-center gap-1", styles.container),
     children: [
-      /* @__PURE__ */ jsxDEV4("svg", {
+      /* @__PURE__ */ jsxDEV2("svg", {
         className: "absolute -rotate-90",
         width: styles.ring,
         height: styles.ring,
         viewBox: `0 0 ${styles.ring} ${styles.ring}`,
         children: [
-          /* @__PURE__ */ jsxDEV4("circle", {
+          /* @__PURE__ */ jsxDEV2("circle", {
             cx: styles.ring / 2,
             cy: styles.ring / 2,
             r: radius,
@@ -430,7 +275,7 @@ function MasteryRing({
             strokeWidth: styles.stroke,
             className: "stroke-muted"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("circle", {
+          /* @__PURE__ */ jsxDEV2("circle", {
             cx: styles.ring / 2,
             cy: styles.ring / 2,
             r: radius,
@@ -439,22 +284,22 @@ function MasteryRing({
             strokeLinecap: "round",
             strokeDasharray: circumference,
             strokeDashoffset,
-            className: cn2("transition-all duration-500", colorStyles[color])
+            className: cn("transition-all duration-500", colorStyles[color])
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4("div", {
+      /* @__PURE__ */ jsxDEV2("div", {
         className: "flex h-full flex-col items-center justify-center",
-        children: /* @__PURE__ */ jsxDEV4("span", {
-          className: cn2("font-bold", styles.text),
+        children: /* @__PURE__ */ jsxDEV2("span", {
+          className: cn("font-bold", styles.text),
           children: [
             Math.round(percentage),
             "%"
           ]
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4("span", {
-        className: cn2("text-muted-foreground mt-1 truncate", styles.text),
+      /* @__PURE__ */ jsxDEV2("span", {
+        className: cn("mt-1 truncate text-muted-foreground", styles.text),
         children: label
       }, undefined, false, undefined, this)
     ]
@@ -463,16 +308,16 @@ function MasteryRing({
 
 // src/views/Progress.tsx
 import {
-  Card as Card3,
-  CardContent as CardContent3,
+  BadgeDisplay as BadgeDisplay2,
+  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 {
-  XpBar as XpBar2,
-  BadgeDisplay as BadgeDisplay2
-} from "@contractspec/example.learning-journey-ui-shared";
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
 "use client";
 function Progress({ track, progress }) {
   const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
@@ -494,35 +339,35 @@ function Progress({ track, progress }) {
     "violet",
     "orange"
   ];
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV3("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV5(Card3, {
+      /* @__PURE__ */ jsxDEV3(Card2, {
         children: [
-          /* @__PURE__ */ jsxDEV5(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV5(CardTitle2, {
+          /* @__PURE__ */ jsxDEV3(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV3(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV3("span", {
                   children: "\u26A1"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV3("span", {
                   children: "Experience Points"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(CardContent3, {
+          /* @__PURE__ */ jsxDEV3(CardContent2, {
             className: "space-y-4",
             children: [
-              /* @__PURE__ */ jsxDEV5("div", {
+              /* @__PURE__ */ jsxDEV3("div", {
                 className: "flex items-baseline gap-2",
                 children: [
-                  /* @__PURE__ */ jsxDEV5("span", {
-                    className: "text-4xl font-bold text-violet-500",
+                  /* @__PURE__ */ jsxDEV3("span", {
+                    className: "font-bold text-4xl text-violet-500",
                     children: progress.xpEarned.toLocaleString()
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("span", {
+                  /* @__PURE__ */ jsxDEV3("span", {
                     className: "text-muted-foreground",
                     children: [
                       "/ ",
@@ -532,18 +377,18 @@ function Progress({ track, progress }) {
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV5(XpBar2, {
+              /* @__PURE__ */ jsxDEV3(XpBar2, {
                 current: progress.xpEarned,
                 max: totalXp,
                 showLabel: false,
                 size: "lg"
               }, undefined, false, undefined, this),
-              track.completionRewards?.xpBonus && percentComplete < 100 && /* @__PURE__ */ jsxDEV5("p", {
+              track.completionRewards?.xpBonus && percentComplete < 100 && /* @__PURE__ */ jsxDEV3("p", {
                 className: "text-muted-foreground text-sm",
                 children: [
                   "\uD83C\uDF81 Complete all steps for a",
                   " ",
-                  /* @__PURE__ */ jsxDEV5("span", {
+                  /* @__PURE__ */ jsxDEV3("span", {
                     className: "font-semibold text-green-500",
                     children: [
                       "+",
@@ -559,32 +404,32 @@ function Progress({ track, progress }) {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5(Card3, {
+      /* @__PURE__ */ jsxDEV3(Card2, {
         children: [
-          /* @__PURE__ */ jsxDEV5(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV5(CardTitle2, {
+          /* @__PURE__ */ jsxDEV3(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV3(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV3("span", {
                   children: "\uD83C\uDFAF"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV3("span", {
                   children: "Skill Mastery"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(CardContent3, {
-            children: /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV3(CardContent2, {
+            children: /* @__PURE__ */ jsxDEV3("div", {
               className: "flex flex-wrap justify-center gap-6",
               children: [
-                Array.from(surfaces.entries()).map(([surface, data], index) => /* @__PURE__ */ jsxDEV5(MasteryRing, {
+                Array.from(surfaces.entries()).map(([surface, data], index) => /* @__PURE__ */ jsxDEV3(MasteryRing, {
                   label: surface.charAt(0).toUpperCase() + surface.slice(1),
                   percentage: data.completed / data.total * 100,
                   color: surfaceColors[index % surfaceColors.length],
                   size: "lg"
                 }, surface, false, undefined, this)),
-                /* @__PURE__ */ jsxDEV5(MasteryRing, {
+                /* @__PURE__ */ jsxDEV3(MasteryRing, {
                   label: "Overall",
                   percentage: percentComplete,
                   color: "violet",
@@ -595,29 +440,29 @@ function Progress({ track, progress }) {
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5(Card3, {
+      /* @__PURE__ */ jsxDEV3(Card2, {
         children: [
-          /* @__PURE__ */ jsxDEV5(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV5(CardTitle2, {
+          /* @__PURE__ */ jsxDEV3(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV3(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV3("span", {
                   children: "\uD83C\uDFC5"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV3("span", {
                   children: "Badges Earned"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(CardContent3, {
+          /* @__PURE__ */ jsxDEV3(CardContent2, {
             children: [
-              /* @__PURE__ */ jsxDEV5(BadgeDisplay2, {
+              /* @__PURE__ */ jsxDEV3(BadgeDisplay2, {
                 badges: progress.badges,
                 size: "lg",
                 maxVisible: 10
               }, undefined, false, undefined, this),
-              progress.badges.length === 0 && /* @__PURE__ */ jsxDEV5("p", {
+              progress.badges.length === 0 && /* @__PURE__ */ jsxDEV3("p", {
                 className: "text-muted-foreground text-sm",
                 children: "Complete the track to earn your first badge!"
               }, undefined, false, undefined, this)
@@ -625,44 +470,44 @@ function Progress({ track, progress }) {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5(Card3, {
+      /* @__PURE__ */ jsxDEV3(Card2, {
         children: [
-          /* @__PURE__ */ jsxDEV5(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV5(CardTitle2, {
+          /* @__PURE__ */ jsxDEV3(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV3(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV3("span", {
                   children: "\uD83D\uDCCA"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV3("span", {
                   children: "Step Breakdown"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(CardContent3, {
-            children: /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV3(CardContent2, {
+            children: /* @__PURE__ */ jsxDEV3("div", {
               className: "space-y-2",
               children: track.steps.map((step) => {
                 const isCompleted = progress.completedStepIds.includes(step.id);
-                return /* @__PURE__ */ jsxDEV5("div", {
+                return /* @__PURE__ */ jsxDEV3("div", {
                   className: "flex items-center justify-between rounded-lg border p-3",
                   children: [
-                    /* @__PURE__ */ jsxDEV5("div", {
+                    /* @__PURE__ */ jsxDEV3("div", {
                       className: "flex items-center gap-3",
                       children: [
-                        /* @__PURE__ */ jsxDEV5("span", {
+                        /* @__PURE__ */ jsxDEV3("span", {
                           className: isCompleted ? "text-green-500" : "text-muted-foreground",
                           children: isCompleted ? "\u2713" : "\u25CB"
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV5("span", {
+                        /* @__PURE__ */ jsxDEV3("span", {
                           className: isCompleted ? "text-foreground" : "text-muted-foreground",
                           children: step.title
                         }, undefined, false, undefined, this)
                       ]
                     }, undefined, true, undefined, this),
-                    step.xpReward && /* @__PURE__ */ jsxDEV5("span", {
-                      className: `text-sm font-medium ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
+                    step.xpReward && /* @__PURE__ */ jsxDEV3("span", {
+                      className: `font-medium text-sm ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
                       children: [
                         isCompleted ? "+" : "",
                         step.xpReward,
@@ -680,6 +525,161 @@ function Progress({ track, progress }) {
   }, undefined, true, undefined, this);
 }
 
+// src/components/FlashCard.tsx
+import { Button as Button2 } from "@contractspec/lib.design-system";
+import { Card as Card3, CardContent as CardContent3 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { useState } from "react";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function FlashCard({
+  step,
+  isCompleted,
+  isCurrent,
+  onComplete
+}) {
+  const [isFlipped, setIsFlipped] = useState(false);
+  return /* @__PURE__ */ jsxDEV4(Card3, {
+    className: cn2("relative cursor-pointer overflow-hidden transition-all duration-300", isCurrent && "ring-2 ring-primary", isCompleted && "opacity-60"),
+    onClick: () => !isCompleted && setIsFlipped(!isFlipped),
+    children: /* @__PURE__ */ jsxDEV4(CardContent3, {
+      className: "p-6",
+      children: [
+        /* @__PURE__ */ jsxDEV4("div", {
+          className: cn2("space-y-4 transition-opacity duration-200", isFlipped ? "opacity-0" : "opacity-100"),
+          children: [
+            /* @__PURE__ */ jsxDEV4("div", {
+              className: "flex items-start justify-between",
+              children: [
+                /* @__PURE__ */ jsxDEV4("div", {
+                  className: "flex-1",
+                  children: [
+                    /* @__PURE__ */ jsxDEV4("h3", {
+                      className: "font-semibold text-lg",
+                      children: step.title
+                    }, undefined, false, undefined, this),
+                    step.description && /* @__PURE__ */ jsxDEV4("p", {
+                      className: "mt-1 text-muted-foreground text-sm",
+                      children: step.description
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                step.xpReward && /* @__PURE__ */ jsxDEV4("span", {
+                  className: "rounded-full bg-green-500/10 px-2 py-1 font-semibold text-green-500 text-xs",
+                  children: [
+                    "+",
+                    step.xpReward,
+                    " XP"
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            isCompleted && /* @__PURE__ */ jsxDEV4("div", {
+              className: "flex items-center gap-2 text-green-500",
+              children: [
+                /* @__PURE__ */ jsxDEV4("span", {
+                  children: "\u2713"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV4("span", {
+                  className: "font-medium text-sm",
+                  children: "Completed"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            isCurrent && !isCompleted && /* @__PURE__ */ jsxDEV4("p", {
+              className: "text-muted-foreground text-xs",
+              children: "Tap to reveal action"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        isFlipped && !isCompleted && /* @__PURE__ */ jsxDEV4("div", {
+          className: "absolute inset-0 flex flex-col items-center justify-center gap-4 bg-gradient-to-br from-violet-500/10 to-violet-600/10 p-6",
+          children: [
+            /* @__PURE__ */ jsxDEV4("p", {
+              className: "text-center text-sm",
+              children: step.instructions ?? "Complete this step to earn XP"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV4("div", {
+              className: "flex gap-2",
+              children: [
+                /* @__PURE__ */ jsxDEV4(Button2, {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => setIsFlipped(false),
+                  children: "Back"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV4(Button2, {
+                  size: "sm",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onComplete?.();
+                  },
+                  children: "Mark Complete"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/views/Steps.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function Steps({ track, progress, onStepComplete }) {
+  const currentStepIndex = track.steps.findIndex((s) => !progress.completedStepIds.includes(s.id));
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "text-center",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "font-bold text-xl",
+            children: "Complete Your Challenges"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "Tap each card to reveal the action, then mark as complete"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "grid gap-4 md:grid-cols-2",
+        children: track.steps.map((step, index) => {
+          const isCompleted = progress.completedStepIds.includes(step.id);
+          const isCurrent = index === currentStepIndex;
+          return /* @__PURE__ */ jsxDEV5(FlashCard, {
+            step,
+            isCompleted,
+            isCurrent,
+            onComplete: () => onStepComplete?.(step.id)
+          }, step.id, false, undefined, this);
+        })
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "text-center text-muted-foreground text-sm",
+        children: [
+          progress.completedStepIds.length,
+          " of ",
+          track.steps.length,
+          " completed",
+          track.completionRewards?.xpBonus && /* @__PURE__ */ jsxDEV5("span", {
+            className: "ml-2 text-green-500",
+            children: [
+              "(+",
+              track.completionRewards.xpBonus,
+              " XP bonus on completion)"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/components/DayCalendar.tsx
 import { cn as cn3 } from "@contractspec/lib.ui-kit-web/ui/utils";
 import { jsxDEV as jsxDEV6, Fragment } from "react/jsx-dev-runtime";
@@ -697,7 +697,7 @@ function DayCalendar({
       const isCurrent = day === currentDay;
       const isLocked = day > currentDay;
       return /* @__PURE__ */ jsxDEV6("div", {
-        className: cn3("flex h-12 w-12 flex-col items-center justify-center rounded-lg border text-sm font-medium transition-all", isCompleted && "border-green-500 bg-green-500/10 text-green-500", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 text-violet-500 ring-2 ring-violet-500/50", isLocked && "border-muted bg-muted/50 text-muted-foreground", !isCompleted && !isCurrent && !isLocked && "border-border bg-card"),
+        className: cn3("flex h-12 w-12 flex-col items-center justify-center rounded-lg border font-medium text-sm transition-all", isCompleted && "border-green-500 bg-green-500/10 text-green-500", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 text-violet-500 ring-2 ring-violet-500/50", isLocked && "border-muted bg-muted/50 text-muted-foreground", !isCompleted && !isCurrent && !isLocked && "border-border bg-card"),
         children: isCompleted ? /* @__PURE__ */ jsxDEV6("span", {
           className: "text-lg",
           children: "\u2713"
@@ -742,7 +742,7 @@ function Timeline({ track, progress }) {
           className: "text-center",
           children: [
             /* @__PURE__ */ jsxDEV7("h2", {
-              className: "text-xl font-bold",
+              className: "font-bold text-xl",
               children: track.name
             }, undefined, false, undefined, this),
             /* @__PURE__ */ jsxDEV7("p", {
@@ -802,7 +802,7 @@ function Timeline({ track, progress }) {
                     className: `flex items-start gap-4 rounded-lg border p-4 ${isLocked ? "opacity-50" : ""}`,
                     children: [
                       /* @__PURE__ */ jsxDEV7("div", {
-                        className: "bg-muted flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-semibold",
+                        className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted font-semibold",
                         children: isCompleted ? "\u2713" : isLocked ? "\uD83D\uDD12" : day
                       }, undefined, false, undefined, this),
                       /* @__PURE__ */ jsxDEV7("div", {
@@ -819,7 +819,7 @@ function Timeline({ track, progress }) {
                         ]
                       }, undefined, true, undefined, this),
                       step.xpReward && /* @__PURE__ */ jsxDEV7("span", {
-                        className: `text-sm font-medium ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
+                        className: `font-medium text-sm ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
                         children: [
                           "+",
                           step.xpReward,
@@ -843,7 +843,7 @@ function Timeline({ track, progress }) {
         className: "text-center",
         children: [
           /* @__PURE__ */ jsxDEV7("h2", {
-            className: "text-xl font-bold",
+            className: "font-bold text-xl",
             children: "Learning Path"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV7("p", {
@@ -859,7 +859,7 @@ function Timeline({ track, progress }) {
             className: "relative",
             children: [
               /* @__PURE__ */ jsxDEV7("div", {
-                className: "bg-border absolute top-0 left-5 h-full w-0.5"
+                className: "absolute top-0 left-5 h-full w-0.5 bg-border"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV7("div", {
                 className: "space-y-6",
@@ -885,13 +885,13 @@ function Timeline({ track, progress }) {
                                   children: step.title
                                 }, undefined, false, undefined, this),
                                 /* @__PURE__ */ jsxDEV7("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__ */ jsxDEV7("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,
@@ -914,12 +914,12 @@ function Timeline({ track, progress }) {
 }
 
 // src/GamifiedMiniApp.tsx
-import { useState as useState2, useCallback } from "react";
-import { Card as Card5, CardContent as CardContent5 } from "@contractspec/lib.ui-kit-web/ui/card";
 import {
-  ViewTabs,
-  useLearningProgress
+  useLearningProgress,
+  ViewTabs
 } from "@contractspec/example.learning-journey-ui-shared";
+import { Card as Card5, CardContent as CardContent5 } from "@contractspec/lib.ui-kit-web/ui/card";
+import { useCallback, useState as useState2 } from "react";
 import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
 "use client";
 function GamifiedMiniApp({
@@ -1045,6 +1045,7 @@ var example = defineExample({
   }
 });
 var example_default = example;
+
 // src/learning-journey-ui-gamified.feature.ts
 import { defineFeature } from "@contractspec/lib.contracts-spec";
 var LearningJourneyUiGamifiedFeature = defineFeature({