@contractspec/example.learning-journey-ui-coaching 3.7.5 → 3.7.7

package/dist/node/index.js

@@ -44,7 +44,7 @@ function TipCard({
                     children: step.title
                   }, undefined, false, undefined, this),
                   step.xpReward && /* @__PURE__ */ jsxDEV("span", {
-                    className: cn("shrink-0 rounded-full px-2 py-0.5 text-xs font-semibold", isCompleted ? "bg-green-500/10 text-green-500" : "bg-amber-500/10 text-amber-500"),
+                    className: cn("shrink-0 rounded-full px-2 py-0.5 font-semibold text-xs", isCompleted ? "bg-green-500/10 text-green-500" : "bg-amber-500/10 text-amber-500"),
                     children: [
                       "+",
                       step.xpReward,
@@ -54,7 +54,7 @@ function TipCard({
                 ]
               }, undefined, true, undefined, this),
               /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground mt-1 text-sm",
+                className: "mt-1 text-muted-foreground text-sm",
                 children: step.description
               }, undefined, false, undefined, this),
               !isCompleted && /* @__PURE__ */ jsxDEV("div", {
@@ -74,7 +74,7 @@ function TipCard({
                 ]
               }, undefined, true, undefined, this),
               isCompleted && /* @__PURE__ */ jsxDEV("p", {
-                className: "mt-2 text-sm text-green-500",
+                className: "mt-2 text-green-500 text-sm",
                 children: "✓ Tip acknowledged"
               }, undefined, false, undefined, this)
             ]
@@ -86,6 +86,10 @@ function TipCard({
 }
 
 // src/views/Overview.tsx
+import {
+  StreakCounter,
+  XpBar
+} from "@contractspec/example.learning-journey-ui-shared";
 import { Button as Button2 } from "@contractspec/lib.design-system";
 import {
   Card as Card2,
@@ -93,10 +97,6 @@ import {
   CardHeader,
   CardTitle
 } from "@contractspec/lib.ui-kit-web/ui/card";
-import {
-  XpBar,
-  StreakCounter
-} from "@contractspec/example.learning-journey-ui-shared";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function Overview({
@@ -128,11 +128,11 @@ function Overview({
                 className: "flex-1",
                 children: [
                   /* @__PURE__ */ jsxDEV2("h1", {
-                    className: "text-2xl font-bold",
+                    className: "font-bold text-2xl",
                     children: track.name
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV2("p", {
-                    className: "text-muted-foreground mt-1",
+                    className: "mt-1 text-muted-foreground",
                     children: track.description
                   }, undefined, false, undefined, this)
                 ]
@@ -156,14 +156,14 @@ function Overview({
               /* @__PURE__ */ jsxDEV2(CardHeader, {
                 className: "pb-2",
                 children: /* @__PURE__ */ jsxDEV2(CardTitle, {
-                  className: "text-muted-foreground text-sm font-medium",
+                  className: "font-medium text-muted-foreground text-sm",
                   children: "Active Tips"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2(CardContent2, {
                 children: [
                   /* @__PURE__ */ jsxDEV2("div", {
-                    className: "text-3xl font-bold text-amber-500",
+                    className: "font-bold text-3xl text-amber-500",
                     children: pendingSteps
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV2("p", {
@@ -179,14 +179,14 @@ function Overview({
               /* @__PURE__ */ jsxDEV2(CardHeader, {
                 className: "pb-2",
                 children: /* @__PURE__ */ jsxDEV2(CardTitle, {
-                  className: "text-muted-foreground text-sm font-medium",
+                  className: "font-medium text-muted-foreground text-sm",
                   children: "Tips Actioned"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV2(CardContent2, {
                 children: [
                   /* @__PURE__ */ jsxDEV2("div", {
-                    className: "text-3xl font-bold text-green-500",
+                    className: "font-bold text-3xl text-green-500",
                     children: completedSteps
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV2("p", {
@@ -206,14 +206,14 @@ function Overview({
               /* @__PURE__ */ jsxDEV2(CardHeader, {
                 className: "pb-2",
                 children: /* @__PURE__ */ jsxDEV2(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__ */ jsxDEV2(CardContent2, {
                 children: [
                   /* @__PURE__ */ jsxDEV2("div", {
-                    className: "text-3xl font-bold text-orange-500",
+                    className: "font-bold text-3xl text-orange-500",
                     children: progress.xpEarned
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV2(XpBar, {
@@ -279,7 +279,7 @@ function Overview({
             /* @__PURE__ */ jsxDEV2("div", {
               children: [
                 /* @__PURE__ */ jsxDEV2("h3", {
-                  className: "text-lg font-semibold text-green-500",
+                  className: "font-semibold text-green-500 text-lg",
                   children: "All Tips Actioned!"
                 }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV2("p", {
@@ -299,78 +299,8 @@ function Overview({
   }, undefined, true, undefined, this);
 }
 
-// src/views/Steps.tsx
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-"use client";
-function Steps({ track, progress, onStepComplete }) {
-  const completedSteps = progress.completedStepIds.length;
-  const totalSteps = track.steps.length;
-  const sortedSteps = [...track.steps].sort((a, b) => {
-    const aCompleted = progress.completedStepIds.includes(a.id);
-    const bCompleted = progress.completedStepIds.includes(b.id);
-    if (aCompleted === bCompleted)
-      return 0;
-    return aCompleted ? 1 : -1;
-  });
-  const currentStepId = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.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: "Coaching Tips"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3("p", {
-            className: "text-muted-foreground",
-            children: "Review and take action on personalized tips"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3("p", {
-            className: "text-muted-foreground mt-2 text-sm",
-            children: [
-              completedSteps,
-              " of ",
-              totalSteps,
-              " tips actioned"
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "space-y-3",
-        children: sortedSteps.map((step) => {
-          const isCompleted = progress.completedStepIds.includes(step.id);
-          const isCurrent = step.id === currentStepId;
-          return /* @__PURE__ */ jsxDEV3(TipCard, {
-            step,
-            isCompleted,
-            isCurrent,
-            onComplete: () => onStepComplete?.(step.id),
-            onDismiss: () => onStepComplete?.(step.id)
-          }, step.id, false, undefined, this);
-        })
-      }, undefined, false, undefined, this),
-      completedSteps === totalSteps && /* @__PURE__ */ jsxDEV3("div", {
-        className: "text-muted-foreground text-center",
-        children: [
-          /* @__PURE__ */ jsxDEV3("span", {
-            className: "text-2xl",
-            children: "✨"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3("p", {
-            className: "mt-2",
-            children: "All tips have been addressed!"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
 // src/components/EngagementMeter.tsx
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
 "use client";
 function EngagementMeter({
   acknowledged,
@@ -381,19 +311,19 @@ function EngagementMeter({
   const total = acknowledged + actioned + pending;
   const actionedPercent = total > 0 ? actioned / total * 100 : 0;
   const acknowledgedPercent = total > 0 ? acknowledged / total * 100 : 0;
-  return /* @__PURE__ */ jsxDEV4("div", {
+  return /* @__PURE__ */ jsxDEV3("div", {
     className: "space-y-4",
     children: [
-      /* @__PURE__ */ jsxDEV4("div", {
+      /* @__PURE__ */ jsxDEV3("div", {
         className: "flex items-center justify-center",
-        children: /* @__PURE__ */ jsxDEV4("div", {
+        children: /* @__PURE__ */ jsxDEV3("div", {
           className: "relative h-32 w-32",
           children: [
-            /* @__PURE__ */ jsxDEV4("svg", {
+            /* @__PURE__ */ jsxDEV3("svg", {
               className: "h-full w-full -rotate-90",
               viewBox: "0 0 100 100",
               children: [
-                /* @__PURE__ */ jsxDEV4("circle", {
+                /* @__PURE__ */ jsxDEV3("circle", {
                   cx: "50",
                   cy: "50",
                   r: "40",
@@ -401,7 +331,7 @@ function EngagementMeter({
                   strokeWidth: "12",
                   className: "stroke-muted"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("circle", {
+                /* @__PURE__ */ jsxDEV3("circle", {
                   cx: "50",
                   cy: "50",
                   r: "40",
@@ -411,7 +341,7 @@ function EngagementMeter({
                   strokeDasharray: `${actionedPercent * 2.51} 251`,
                   className: "stroke-green-500 transition-all duration-500"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("circle", {
+                /* @__PURE__ */ jsxDEV3("circle", {
                   cx: "50",
                   cy: "50",
                   r: "40",
@@ -424,14 +354,14 @@ function EngagementMeter({
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV4("div", {
+            /* @__PURE__ */ jsxDEV3("div", {
               className: "absolute inset-0 flex flex-col items-center justify-center",
               children: [
-                /* @__PURE__ */ jsxDEV4("span", {
-                  className: "text-2xl font-bold",
+                /* @__PURE__ */ jsxDEV3("span", {
+                  className: "font-bold text-2xl",
                   children: total
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("span", {
+                /* @__PURE__ */ jsxDEV3("span", {
                   className: "text-muted-foreground text-xs",
                   children: "tips"
                 }, undefined, false, undefined, this)
@@ -440,16 +370,16 @@ function EngagementMeter({
           ]
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4("div", {
+      /* @__PURE__ */ jsxDEV3("div", {
         className: "flex justify-center gap-4 text-sm",
         children: [
-          /* @__PURE__ */ jsxDEV4("div", {
+          /* @__PURE__ */ jsxDEV3("div", {
             className: "flex items-center gap-1.5",
             children: [
-              /* @__PURE__ */ jsxDEV4("div", {
+              /* @__PURE__ */ jsxDEV3("div", {
                 className: "h-3 w-3 rounded-full bg-green-500"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV4("span", {
+              /* @__PURE__ */ jsxDEV3("span", {
                 children: [
                   "Actioned (",
                   actioned,
@@ -458,13 +388,13 @@ function EngagementMeter({
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV4("div", {
+          /* @__PURE__ */ jsxDEV3("div", {
             className: "flex items-center gap-1.5",
             children: [
-              /* @__PURE__ */ jsxDEV4("div", {
+              /* @__PURE__ */ jsxDEV3("div", {
                 className: "h-3 w-3 rounded-full bg-amber-500"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV4("span", {
+              /* @__PURE__ */ jsxDEV3("span", {
                 children: [
                   "Acknowledged (",
                   acknowledged,
@@ -473,13 +403,13 @@ function EngagementMeter({
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV4("div", {
+          /* @__PURE__ */ jsxDEV3("div", {
             className: "flex items-center gap-1.5",
             children: [
-              /* @__PURE__ */ jsxDEV4("div", {
-                className: "bg-muted h-3 w-3 rounded-full"
+              /* @__PURE__ */ jsxDEV3("div", {
+                className: "h-3 w-3 rounded-full bg-muted"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV4("span", {
+              /* @__PURE__ */ jsxDEV3("span", {
                 children: [
                   "Pending (",
                   pending,
@@ -490,14 +420,14 @@ function EngagementMeter({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      streak > 0 && /* @__PURE__ */ jsxDEV4("div", {
+      streak > 0 && /* @__PURE__ */ jsxDEV3("div", {
         className: "flex items-center justify-center gap-2 rounded-lg bg-orange-500/10 px-4 py-2",
         children: [
-          /* @__PURE__ */ jsxDEV4("span", {
+          /* @__PURE__ */ jsxDEV3("span", {
             className: "text-xl",
             children: "\uD83D\uDD25"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("span", {
+          /* @__PURE__ */ jsxDEV3("span", {
             className: "font-semibold text-orange-500",
             children: [
               streak,
@@ -511,18 +441,18 @@ function EngagementMeter({
 }
 
 // src/views/Progress.tsx
+import {
+  BadgeDisplay,
+  StreakCounter as StreakCounter2,
+  XpBar as XpBar2
+} from "@contractspec/example.learning-journey-ui-shared";
 import {
   Card as Card3,
   CardContent as CardContent3,
   CardHeader as CardHeader2,
   CardTitle as CardTitle2
 } from "@contractspec/lib.ui-kit-web/ui/card";
-import {
-  XpBar as XpBar2,
-  BadgeDisplay,
-  StreakCounter as StreakCounter2
-} from "@contractspec/example.learning-journey-ui-shared";
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
 "use client";
 function ProgressView({ track, progress }) {
   const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
@@ -531,26 +461,26 @@ function ProgressView({ track, progress }) {
   const pendingSteps = totalSteps - completedSteps;
   const actioned = Math.floor(completedSteps * 0.7);
   const acknowledged = completedSteps - actioned;
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV5(Card3, {
+      /* @__PURE__ */ jsxDEV4(Card3, {
         children: [
-          /* @__PURE__ */ jsxDEV5(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV5(CardTitle2, {
+          /* @__PURE__ */ jsxDEV4(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV4("span", {
                   children: "\uD83D\uDCCA"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV4("span", {
                   children: "Engagement Overview"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(CardContent3, {
-            children: /* @__PURE__ */ jsxDEV5(EngagementMeter, {
+          /* @__PURE__ */ jsxDEV4(CardContent3, {
+            children: /* @__PURE__ */ jsxDEV4(EngagementMeter, {
               actioned,
               acknowledged,
               pending: pendingSteps,
@@ -559,29 +489,29 @@ function ProgressView({ track, progress }) {
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV4("div", {
         className: "grid gap-4 md:grid-cols-2",
         children: [
-          /* @__PURE__ */ jsxDEV5(Card3, {
+          /* @__PURE__ */ jsxDEV4(Card3, {
             children: [
-              /* @__PURE__ */ jsxDEV5(CardHeader2, {
+              /* @__PURE__ */ jsxDEV4(CardHeader2, {
                 className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV5(CardTitle2, {
-                  className: "text-muted-foreground text-sm font-medium",
+                children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
+                  className: "font-medium text-muted-foreground text-sm",
                   children: "XP Earned"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5(CardContent3, {
+              /* @__PURE__ */ jsxDEV4(CardContent3, {
                 className: "space-y-3",
                 children: [
-                  /* @__PURE__ */ jsxDEV5("div", {
+                  /* @__PURE__ */ jsxDEV4("div", {
                     className: "flex items-baseline gap-2",
                     children: [
-                      /* @__PURE__ */ jsxDEV5("span", {
-                        className: "text-3xl font-bold text-orange-500",
+                      /* @__PURE__ */ jsxDEV4("span", {
+                        className: "font-bold text-3xl text-orange-500",
                         children: progress.xpEarned
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("span", {
+                      /* @__PURE__ */ jsxDEV4("span", {
                         className: "text-muted-foreground",
                         children: [
                           "/ ",
@@ -591,7 +521,7 @@ function ProgressView({ track, progress }) {
                       }, undefined, true, undefined, this)
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV5(XpBar2, {
+                  /* @__PURE__ */ jsxDEV4(XpBar2, {
                     current: progress.xpEarned,
                     max: totalXp,
                     showLabel: false,
@@ -601,24 +531,24 @@ function ProgressView({ track, progress }) {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV5(Card3, {
+          /* @__PURE__ */ jsxDEV4(Card3, {
             children: [
-              /* @__PURE__ */ jsxDEV5(CardHeader2, {
+              /* @__PURE__ */ jsxDEV4(CardHeader2, {
                 className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV5(CardTitle2, {
-                  className: "text-muted-foreground text-sm font-medium",
+                children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
+                  className: "font-medium text-muted-foreground text-sm",
                   children: "Engagement Streak"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5(CardContent3, {
-                children: /* @__PURE__ */ jsxDEV5("div", {
+              /* @__PURE__ */ jsxDEV4(CardContent3, {
+                children: /* @__PURE__ */ jsxDEV4("div", {
                   className: "flex items-center gap-4",
                   children: [
-                    /* @__PURE__ */ jsxDEV5(StreakCounter2, {
+                    /* @__PURE__ */ jsxDEV4(StreakCounter2, {
                       days: progress.streakDays,
                       size: "lg"
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV5("div", {
+                    /* @__PURE__ */ jsxDEV4("div", {
                       className: "text-muted-foreground text-sm",
                       children: progress.streakDays > 0 ? "Keep going!" : "Start your streak today!"
                     }, undefined, false, undefined, this)
@@ -629,29 +559,29 @@ function ProgressView({ track, progress }) {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5(Card3, {
+      /* @__PURE__ */ jsxDEV4(Card3, {
         children: [
-          /* @__PURE__ */ jsxDEV5(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV5(CardTitle2, {
+          /* @__PURE__ */ jsxDEV4(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV4("span", {
                   children: "\uD83C\uDFC5"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV4("span", {
                   children: "Achievements"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(CardContent3, {
+          /* @__PURE__ */ jsxDEV4(CardContent3, {
             children: [
-              /* @__PURE__ */ jsxDEV5(BadgeDisplay, {
+              /* @__PURE__ */ jsxDEV4(BadgeDisplay, {
                 badges: progress.badges,
                 size: "lg",
                 maxVisible: 10
               }, undefined, false, undefined, this),
-              progress.badges.length === 0 && /* @__PURE__ */ jsxDEV5("p", {
+              progress.badges.length === 0 && /* @__PURE__ */ jsxDEV4("p", {
                 className: "text-muted-foreground text-sm",
                 children: "Action tips to unlock achievements!"
               }, undefined, false, undefined, this)
@@ -659,43 +589,43 @@ function ProgressView({ track, progress }) {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5(Card3, {
+      /* @__PURE__ */ jsxDEV4(Card3, {
         children: [
-          /* @__PURE__ */ jsxDEV5(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV5(CardTitle2, {
+          /* @__PURE__ */ jsxDEV4(CardHeader2, {
+            children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
               className: "flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV4("span", {
                   children: "\uD83D\uDCA1"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("span", {
+                /* @__PURE__ */ jsxDEV4("span", {
                   children: "Tip Status"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(CardContent3, {
-            children: /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV4(CardContent3, {
+            children: /* @__PURE__ */ jsxDEV4("div", {
               className: "space-y-3",
               children: track.steps.map((step) => {
                 const isCompleted = progress.completedStepIds.includes(step.id);
-                return /* @__PURE__ */ jsxDEV5("div", {
+                return /* @__PURE__ */ jsxDEV4("div", {
                   className: "flex items-center justify-between rounded-lg border p-3",
                   children: [
-                    /* @__PURE__ */ jsxDEV5("div", {
+                    /* @__PURE__ */ jsxDEV4("div", {
                       className: "flex items-center gap-3",
                       children: [
-                        /* @__PURE__ */ jsxDEV5("span", {
+                        /* @__PURE__ */ jsxDEV4("span", {
                           className: isCompleted ? "text-green-500" : "text-amber-500",
                           children: isCompleted ? "✓" : "○"
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV5("span", {
+                        /* @__PURE__ */ jsxDEV4("span", {
                           className: isCompleted ? "text-muted-foreground" : "text-foreground",
                           children: step.title
                         }, undefined, false, undefined, this)
                       ]
                     }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV5("span", {
+                    /* @__PURE__ */ jsxDEV4("span", {
                       className: `text-sm ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
                       children: isCompleted ? "Actioned" : "Pending"
                     }, undefined, false, undefined, this)
@@ -709,6 +639,76 @@ function ProgressView({ track, progress }) {
     ]
   }, undefined, true, undefined, this);
 }
+// src/views/Steps.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function Steps({ track, progress, onStepComplete }) {
+  const completedSteps = progress.completedStepIds.length;
+  const totalSteps = track.steps.length;
+  const sortedSteps = [...track.steps].sort((a, b) => {
+    const aCompleted = progress.completedStepIds.includes(a.id);
+    const bCompleted = progress.completedStepIds.includes(b.id);
+    if (aCompleted === bCompleted)
+      return 0;
+    return aCompleted ? 1 : -1;
+  });
+  const currentStepId = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.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: "Coaching Tips"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "Review and take action on personalized tips"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "mt-2 text-muted-foreground text-sm",
+            children: [
+              completedSteps,
+              " of ",
+              totalSteps,
+              " tips actioned"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-3",
+        children: sortedSteps.map((step) => {
+          const isCompleted = progress.completedStepIds.includes(step.id);
+          const isCurrent = step.id === currentStepId;
+          return /* @__PURE__ */ jsxDEV5(TipCard, {
+            step,
+            isCompleted,
+            isCurrent,
+            onComplete: () => onStepComplete?.(step.id),
+            onDismiss: () => onStepComplete?.(step.id)
+          }, step.id, false, undefined, this);
+        })
+      }, undefined, false, undefined, this),
+      completedSteps === totalSteps && /* @__PURE__ */ jsxDEV5("div", {
+        className: "text-center text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsxDEV5("span", {
+            className: "text-2xl",
+            children: "✨"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "mt-2",
+            children: "All tips have been addressed!"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/components/TipFeed.tsx
 import { cn as cn2 } from "@contractspec/lib.ui-kit-web/ui/utils";
 import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
@@ -725,7 +725,7 @@ var TIP_ICONS2 = {
 function TipFeed({ items }) {
   if (items.length === 0) {
     return /* @__PURE__ */ jsxDEV6("div", {
-      className: "text-muted-foreground py-8 text-center",
+      className: "py-8 text-center text-muted-foreground",
       children: "No tips yet. Start engaging with coaching tips!"
     }, undefined, false, undefined, this);
   }
@@ -733,7 +733,7 @@ function TipFeed({ items }) {
     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-4",
@@ -748,7 +748,7 @@ function TipFeed({ items }) {
                 children: item.isCompleted ? "✓" : icon
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV6("div", {
-                className: "bg-card flex-1 rounded-lg border p-3",
+                className: "flex-1 rounded-lg border bg-card p-3",
                 children: [
                   /* @__PURE__ */ jsxDEV6("div", {
                     className: "flex items-start justify-between gap-2",
@@ -760,13 +760,13 @@ function TipFeed({ items }) {
                             children: item.step.title
                           }, undefined, false, undefined, this),
                           /* @__PURE__ */ jsxDEV6("p", {
-                            className: "text-muted-foreground mt-0.5 text-sm",
+                            className: "mt-0.5 text-muted-foreground text-sm",
                             children: item.step.description
                           }, undefined, false, undefined, this)
                         ]
                       }, undefined, true, undefined, this),
                       item.step.xpReward && /* @__PURE__ */ jsxDEV6("span", {
-                        className: cn2("shrink-0 text-xs font-medium", item.isCompleted ? "text-green-500" : "text-muted-foreground"),
+                        className: cn2("shrink-0 font-medium text-xs", item.isCompleted ? "text-green-500" : "text-muted-foreground"),
                         children: [
                           "+",
                           item.step.xpReward,
@@ -776,7 +776,7 @@ function TipFeed({ items }) {
                     ]
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV6("div", {
-                    className: "text-muted-foreground mt-2 flex items-center gap-2 text-xs",
+                    className: "mt-2 flex items-center gap-2 text-muted-foreground text-xs",
                     children: item.isCompleted ? /* @__PURE__ */ jsxDEV6("span", {
                       className: "text-green-500",
                       children: [
@@ -827,7 +827,7 @@ function Timeline({ track, progress }) {
         className: "text-center",
         children: [
           /* @__PURE__ */ jsxDEV7("h2", {
-            className: "text-xl font-bold",
+            className: "font-bold text-xl",
             children: "Activity Timeline"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV7("p", {
@@ -844,7 +844,7 @@ function Timeline({ track, progress }) {
               className: "p-4 text-center",
               children: [
                 /* @__PURE__ */ jsxDEV7("div", {
-                  className: "text-2xl font-bold text-green-500",
+                  className: "font-bold text-2xl text-green-500",
                   children: completedCount
                 }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV7("div", {
@@ -859,7 +859,7 @@ function Timeline({ track, progress }) {
               className: "p-4 text-center",
               children: [
                 /* @__PURE__ */ jsxDEV7("div", {
-                  className: "text-2xl font-bold text-amber-500",
+                  className: "font-bold text-2xl text-amber-500",
                   children: pendingCount
                 }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV7("div", {
@@ -974,12 +974,12 @@ function Timeline({ track, progress }) {
 }
 
 // src/CoachingMiniApp.tsx
-import { useState, 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 } from "react";
 import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
 "use client";
 function CoachingMiniApp({
@@ -1105,6 +1105,7 @@ var example = defineExample({
   }
 });
 var example_default = example;
+
 // src/learning-journey-ui-coaching.feature.ts
 import { defineFeature } from "@contractspec/lib.contracts-spec";
 var LearningJourneyUiCoachingFeature = defineFeature({