@contractspec/example.learning-journey-ui-coaching 3.7.17 → 3.7.18

package/dist/node/CoachingMiniApp.js

@@ -1,1059 +1 @@
-// src/components/TipCard.tsx
-import { Button } from "@contractspec/lib.design-system";
-import { Card, CardContent } from "@contractspec/lib.ui-kit-web/ui/card";
-import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-var TIP_ICONS = {
-  cash_buffer_too_high: "\uD83D\uDCB0",
-  no_savings_goal: "\uD83C\uDFAF",
-  irregular_savings: "\uD83D\uDCC5",
-  noise_late_evening: "\uD83D\uDD07",
-  guest_frequency_high: "\uD83D\uDC65",
-  shared_space_conflicts: "\uD83C\uDFE0",
-  default: "\uD83D\uDCA1"
-};
-function TipCard({
-  step,
-  isCompleted,
-  isCurrent,
-  onComplete,
-  onDismiss
-}) {
-  const tipId = step.metadata?.tipId ?? "default";
-  const icon = TIP_ICONS[tipId] ?? TIP_ICONS.default;
-  return /* @__PURE__ */ jsxDEV(Card, {
-    className: cn("transition-all", isCompleted && "opacity-60", isCurrent && "ring-2 ring-amber-500"),
-    children: /* @__PURE__ */ jsxDEV(CardContent, {
-      className: "p-4",
-      children: /* @__PURE__ */ jsxDEV("div", {
-        className: "flex gap-4",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: cn("flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl", isCompleted ? "bg-green-500/10" : isCurrent ? "bg-amber-500/10" : "bg-muted"),
-            children: isCompleted ? "✓" : icon
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "min-w-0 flex-1",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex items-start justify-between gap-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV("h4", {
-                    className: "font-semibold",
-                    children: step.title
-                  }, undefined, false, undefined, this),
-                  step.xpReward && /* @__PURE__ */ jsxDEV("span", {
-                    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,
-                      " XP"
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "mt-1 text-muted-foreground text-sm",
-                children: step.description
-              }, undefined, false, undefined, this),
-              !isCompleted && /* @__PURE__ */ jsxDEV("div", {
-                className: "mt-3 flex flex-wrap gap-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV(Button, {
-                    size: "sm",
-                    onClick: onComplete,
-                    children: "Take Action"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV(Button, {
-                    variant: "outline",
-                    size: "sm",
-                    onClick: onDismiss,
-                    children: "Dismiss"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              isCompleted && /* @__PURE__ */ jsxDEV("p", {
-                className: "mt-2 text-green-500 text-sm",
-                children: "✓ Tip acknowledged"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// 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,
-  CardContent as CardContent2,
-  CardHeader,
-  CardTitle
-} from "@contractspec/lib.ui-kit-web/ui/card";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-"use client";
-function Overview({
-  track,
-  progress,
-  onStepComplete,
-  onStart
-}) {
-  const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
-  const completedSteps = progress.completedStepIds.length;
-  const totalSteps = track.steps.length;
-  const pendingSteps = totalSteps - completedSteps;
-  const activeTips = track.steps.filter((s) => !progress.completedStepIds.includes(s.id)).slice(0, 3);
-  return /* @__PURE__ */ jsxDEV2("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV2(Card2, {
-        className: "overflow-hidden bg-gradient-to-br from-amber-500/10 via-orange-500/10 to-red-500/10",
-        children: /* @__PURE__ */ jsxDEV2(CardContent2, {
-          className: "p-6",
-          children: /* @__PURE__ */ jsxDEV2("div", {
-            className: "flex flex-col items-center gap-4 text-center md:flex-row md:text-left",
-            children: [
-              /* @__PURE__ */ jsxDEV2("div", {
-                className: "flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 text-3xl shadow-lg",
-                children: "\uD83D\uDCA1"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("div", {
-                className: "flex-1",
-                children: [
-                  /* @__PURE__ */ jsxDEV2("h1", {
-                    className: "font-bold text-2xl",
-                    children: track.name
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("p", {
-                    className: "mt-1 text-muted-foreground",
-                    children: track.description
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV2("div", {
-                className: "flex items-center gap-4",
-                children: /* @__PURE__ */ jsxDEV2(StreakCounter, {
-                  days: progress.streakDays,
-                  size: "lg"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2("div", {
-        className: "grid gap-4 md:grid-cols-3",
-        children: [
-          /* @__PURE__ */ jsxDEV2(Card2, {
-            children: [
-              /* @__PURE__ */ jsxDEV2(CardHeader, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV2(CardTitle, {
-                  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: "font-bold text-3xl text-amber-500",
-                    children: pendingSteps
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("p", {
-                    className: "text-muted-foreground text-sm",
-                    children: "tips for you today"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV2(Card2, {
-            children: [
-              /* @__PURE__ */ jsxDEV2(CardHeader, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV2(CardTitle, {
-                  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: "font-bold text-3xl text-green-500",
-                    children: completedSteps
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("p", {
-                    className: "text-muted-foreground text-sm",
-                    children: [
-                      "out of ",
-                      totalSteps,
-                      " total"
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV2(Card2, {
-            children: [
-              /* @__PURE__ */ jsxDEV2(CardHeader, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV2(CardTitle, {
-                  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: "font-bold text-3xl text-orange-500",
-                    children: progress.xpEarned
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV2(XpBar, {
-                    current: progress.xpEarned,
-                    max: totalXp,
-                    showLabel: false,
-                    size: "sm"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      activeTips.length > 0 && /* @__PURE__ */ jsxDEV2(Card2, {
-        children: [
-          /* @__PURE__ */ jsxDEV2(CardHeader, {
-            className: "flex flex-row items-center justify-between",
-            children: [
-              /* @__PURE__ */ jsxDEV2(CardTitle, {
-                className: "flex items-center gap-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV2("span", {
-                    children: "\uD83D\uDCA1"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("span", {
-                    children: "Tips for You"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              activeTips.length < pendingSteps && /* @__PURE__ */ jsxDEV2(Button2, {
-                variant: "outline",
-                size: "sm",
-                onClick: onStart,
-                children: [
-                  "View All (",
-                  pendingSteps,
-                  ")"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV2(CardContent2, {
-            className: "space-y-3",
-            children: activeTips.map((step) => /* @__PURE__ */ jsxDEV2(TipCard, {
-              step,
-              isCompleted: false,
-              isCurrent: step.id === activeTips[0]?.id,
-              onComplete: () => onStepComplete?.(step.id)
-            }, step.id, false, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      pendingSteps === 0 && /* @__PURE__ */ jsxDEV2(Card2, {
-        className: "border-green-500/50 bg-green-500/5",
-        children: /* @__PURE__ */ jsxDEV2(CardContent2, {
-          className: "flex items-center gap-4 p-6",
-          children: [
-            /* @__PURE__ */ jsxDEV2("div", {
-              className: "text-4xl",
-              children: "\uD83C\uDF89"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV2("div", {
-              children: [
-                /* @__PURE__ */ jsxDEV2("h3", {
-                  className: "font-semibold text-green-500 text-lg",
-                  children: "All Tips Actioned!"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("p", {
-                  className: "text-muted-foreground",
-                  children: [
-                    "Great job! You've addressed all ",
-                    totalSteps,
-                    " coaching tips."
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/EngagementMeter.tsx
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-"use client";
-function EngagementMeter({
-  acknowledged,
-  actioned,
-  pending,
-  streak = 0
-}) {
-  const total = acknowledged + actioned + pending;
-  const actionedPercent = total > 0 ? actioned / total * 100 : 0;
-  const acknowledgedPercent = total > 0 ? acknowledged / total * 100 : 0;
-  return /* @__PURE__ */ jsxDEV3("div", {
-    className: "space-y-4",
-    children: [
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "flex items-center justify-center",
-        children: /* @__PURE__ */ jsxDEV3("div", {
-          className: "relative h-32 w-32",
-          children: [
-            /* @__PURE__ */ jsxDEV3("svg", {
-              className: "h-full w-full -rotate-90",
-              viewBox: "0 0 100 100",
-              children: [
-                /* @__PURE__ */ jsxDEV3("circle", {
-                  cx: "50",
-                  cy: "50",
-                  r: "40",
-                  fill: "none",
-                  strokeWidth: "12",
-                  className: "stroke-muted"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV3("circle", {
-                  cx: "50",
-                  cy: "50",
-                  r: "40",
-                  fill: "none",
-                  strokeWidth: "12",
-                  strokeLinecap: "round",
-                  strokeDasharray: `${actionedPercent * 2.51} 251`,
-                  className: "stroke-green-500 transition-all duration-500"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV3("circle", {
-                  cx: "50",
-                  cy: "50",
-                  r: "40",
-                  fill: "none",
-                  strokeWidth: "12",
-                  strokeLinecap: "round",
-                  strokeDasharray: `${acknowledgedPercent * 2.51} 251`,
-                  strokeDashoffset: `${-actionedPercent * 2.51}`,
-                  className: "stroke-amber-500 transition-all duration-500"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV3("div", {
-              className: "absolute inset-0 flex flex-col items-center justify-center",
-              children: [
-                /* @__PURE__ */ jsxDEV3("span", {
-                  className: "font-bold text-2xl",
-                  children: total
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV3("span", {
-                  className: "text-muted-foreground text-xs",
-                  children: "tips"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
-        className: "flex justify-center gap-4 text-sm",
-        children: [
-          /* @__PURE__ */ jsxDEV3("div", {
-            className: "flex items-center gap-1.5",
-            children: [
-              /* @__PURE__ */ jsxDEV3("div", {
-                className: "h-3 w-3 rounded-full bg-green-500"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3("span", {
-                children: [
-                  "Actioned (",
-                  actioned,
-                  ")"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV3("div", {
-            className: "flex items-center gap-1.5",
-            children: [
-              /* @__PURE__ */ jsxDEV3("div", {
-                className: "h-3 w-3 rounded-full bg-amber-500"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3("span", {
-                children: [
-                  "Acknowledged (",
-                  acknowledged,
-                  ")"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV3("div", {
-            className: "flex items-center gap-1.5",
-            children: [
-              /* @__PURE__ */ jsxDEV3("div", {
-                className: "h-3 w-3 rounded-full bg-muted"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3("span", {
-                children: [
-                  "Pending (",
-                  pending,
-                  ")"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      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__ */ jsxDEV3("span", {
-            className: "text-xl",
-            children: "\uD83D\uDD25"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3("span", {
-            className: "font-semibold text-orange-500",
-            children: [
-              streak,
-              " day engagement streak!"
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// 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 { 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);
-  const completedSteps = progress.completedStepIds.length;
-  const totalSteps = track.steps.length;
-  const pendingSteps = totalSteps - completedSteps;
-  const actioned = Math.floor(completedSteps * 0.7);
-  const acknowledged = completedSteps - actioned;
-  return /* @__PURE__ */ jsxDEV4("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV4(Card3, {
-        children: [
-          /* @__PURE__ */ jsxDEV4(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV4("span", {
-                  children: "\uD83D\uDCCA"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("span", {
-                  children: "Engagement Overview"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(CardContent3, {
-            children: /* @__PURE__ */ jsxDEV4(EngagementMeter, {
-              actioned,
-              acknowledged,
-              pending: pendingSteps,
-              streak: progress.streakDays
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4("div", {
-        className: "grid gap-4 md:grid-cols-2",
-        children: [
-          /* @__PURE__ */ jsxDEV4(Card3, {
-            children: [
-              /* @__PURE__ */ jsxDEV4(CardHeader2, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
-                  className: "font-medium text-muted-foreground text-sm",
-                  children: "XP Earned"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV4(CardContent3, {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsxDEV4("div", {
-                    className: "flex items-baseline gap-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV4("span", {
-                        className: "font-bold text-3xl text-orange-500",
-                        children: progress.xpEarned
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV4("span", {
-                        className: "text-muted-foreground",
-                        children: [
-                          "/ ",
-                          totalXp,
-                          " XP"
-                        ]
-                      }, undefined, true, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV4(XpBar2, {
-                    current: progress.xpEarned,
-                    max: totalXp,
-                    showLabel: false,
-                    size: "lg"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV4(Card3, {
-            children: [
-              /* @__PURE__ */ jsxDEV4(CardHeader2, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
-                  className: "font-medium text-muted-foreground text-sm",
-                  children: "Engagement Streak"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV4(CardContent3, {
-                children: /* @__PURE__ */ jsxDEV4("div", {
-                  className: "flex items-center gap-4",
-                  children: [
-                    /* @__PURE__ */ jsxDEV4(StreakCounter2, {
-                      days: progress.streakDays,
-                      size: "lg"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV4("div", {
-                      className: "text-muted-foreground text-sm",
-                      children: progress.streakDays > 0 ? "Keep going!" : "Start your streak today!"
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4(Card3, {
-        children: [
-          /* @__PURE__ */ jsxDEV4(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV4("span", {
-                  children: "\uD83C\uDFC5"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("span", {
-                  children: "Achievements"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4(CardContent3, {
-            children: [
-              /* @__PURE__ */ jsxDEV4(BadgeDisplay, {
-                badges: progress.badges,
-                size: "lg",
-                maxVisible: 10
-              }, undefined, false, undefined, this),
-              progress.badges.length === 0 && /* @__PURE__ */ jsxDEV4("p", {
-                className: "text-muted-foreground text-sm",
-                children: "Action tips to unlock achievements!"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4(Card3, {
-        children: [
-          /* @__PURE__ */ jsxDEV4(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV4(CardTitle2, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV4("span", {
-                  children: "\uD83D\uDCA1"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV4("span", {
-                  children: "Tip Status"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__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__ */ jsxDEV4("div", {
-                  className: "flex items-center justify-between rounded-lg border p-3",
-                  children: [
-                    /* @__PURE__ */ jsxDEV4("div", {
-                      className: "flex items-center gap-3",
-                      children: [
-                        /* @__PURE__ */ jsxDEV4("span", {
-                          className: isCompleted ? "text-green-500" : "text-amber-500",
-                          children: isCompleted ? "✓" : "○"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV4("span", {
-                          className: isCompleted ? "text-muted-foreground" : "text-foreground",
-                          children: step.title
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV4("span", {
-                      className: `text-sm ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
-                      children: isCompleted ? "Actioned" : "Pending"
-                    }, undefined, false, undefined, this)
-                  ]
-                }, step.id, true, undefined, this);
-              })
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-// 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";
-"use client";
-var TIP_ICONS2 = {
-  cash_buffer_too_high: "\uD83D\uDCB0",
-  no_savings_goal: "\uD83C\uDFAF",
-  irregular_savings: "\uD83D\uDCC5",
-  noise_late_evening: "\uD83D\uDD07",
-  guest_frequency_high: "\uD83D\uDC65",
-  shared_space_conflicts: "\uD83C\uDFE0",
-  default: "\uD83D\uDCA1"
-};
-function TipFeed({ items }) {
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsxDEV6("div", {
-      className: "py-8 text-center text-muted-foreground",
-      children: "No tips yet. Start engaging with coaching tips!"
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV6("div", {
-    className: "relative",
-    children: [
-      /* @__PURE__ */ jsxDEV6("div", {
-        className: "absolute top-0 left-4 h-full w-0.5 bg-border"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV6("div", {
-        className: "space-y-4",
-        children: items.map((item) => {
-          const tipId = item.step.metadata?.tipId ?? "default";
-          const icon = TIP_ICONS2[tipId] ?? TIP_ICONS2.default;
-          return /* @__PURE__ */ jsxDEV6("div", {
-            className: "relative flex gap-4 pl-2",
-            children: [
-              /* @__PURE__ */ jsxDEV6("div", {
-                className: cn2("relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm", item.isCompleted ? "bg-green-500 text-white" : "bg-muted text-muted-foreground"),
-                children: item.isCompleted ? "✓" : icon
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV6("div", {
-                className: "flex-1 rounded-lg border bg-card p-3",
-                children: [
-                  /* @__PURE__ */ jsxDEV6("div", {
-                    className: "flex items-start justify-between gap-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV6("div", {
-                        children: [
-                          /* @__PURE__ */ jsxDEV6("p", {
-                            className: "font-medium",
-                            children: item.step.title
-                          }, undefined, false, undefined, this),
-                          /* @__PURE__ */ jsxDEV6("p", {
-                            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 font-medium text-xs", item.isCompleted ? "text-green-500" : "text-muted-foreground"),
-                        children: [
-                          "+",
-                          item.step.xpReward,
-                          " XP"
-                        ]
-                      }, undefined, true, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV6("div", {
-                    className: "mt-2 flex items-center gap-2 text-muted-foreground text-xs",
-                    children: item.isCompleted ? /* @__PURE__ */ jsxDEV6("span", {
-                      className: "text-green-500",
-                      children: [
-                        "✓ Completed",
-                        item.completedAt && ` • ${item.completedAt}`
-                      ]
-                    }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV6("span", {
-                      children: "Pending action"
-                    }, undefined, false, undefined, this)
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, item.step.id, true, undefined, this);
-        })
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/views/Timeline.tsx
-import {
-  Card as Card4,
-  CardContent as CardContent4,
-  CardHeader as CardHeader3,
-  CardTitle as CardTitle3
-} from "@contractspec/lib.ui-kit-web/ui/card";
-import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
-"use client";
-function Timeline({ track, progress }) {
-  const feedItems = track.steps.map((step) => ({
-    step,
-    isCompleted: progress.completedStepIds.includes(step.id),
-    completedAt: progress.completedStepIds.includes(step.id) ? "Recently" : undefined
-  })).sort((a, b) => {
-    if (a.isCompleted && !b.isCompleted)
-      return -1;
-    if (!a.isCompleted && b.isCompleted)
-      return 1;
-    return 0;
-  });
-  const completedCount = feedItems.filter((f) => f.isCompleted).length;
-  const pendingCount = feedItems.length - completedCount;
-  return /* @__PURE__ */ jsxDEV7("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV7("div", {
-        className: "text-center",
-        children: [
-          /* @__PURE__ */ jsxDEV7("h2", {
-            className: "font-bold text-xl",
-            children: "Activity Timeline"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV7("p", {
-            className: "text-muted-foreground",
-            children: "Your coaching journey and tip history"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV7("div", {
-        className: "grid grid-cols-2 gap-4",
-        children: [
-          /* @__PURE__ */ jsxDEV7(Card4, {
-            children: /* @__PURE__ */ jsxDEV7(CardContent4, {
-              className: "p-4 text-center",
-              children: [
-                /* @__PURE__ */ jsxDEV7("div", {
-                  className: "font-bold text-2xl text-green-500",
-                  children: completedCount
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV7("div", {
-                  className: "text-muted-foreground text-sm",
-                  children: "Tips Actioned"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV7(Card4, {
-            children: /* @__PURE__ */ jsxDEV7(CardContent4, {
-              className: "p-4 text-center",
-              children: [
-                /* @__PURE__ */ jsxDEV7("div", {
-                  className: "font-bold text-2xl text-amber-500",
-                  children: pendingCount
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV7("div", {
-                  className: "text-muted-foreground text-sm",
-                  children: "Tips Pending"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV7(Card4, {
-        children: [
-          /* @__PURE__ */ jsxDEV7(CardHeader3, {
-            children: /* @__PURE__ */ jsxDEV7(CardTitle3, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV7("span", {
-                  children: "\uD83D\uDCDD"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV7("span", {
-                  children: "Coaching Feed"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV7(CardContent4, {
-            children: /* @__PURE__ */ jsxDEV7(TipFeed, {
-              items: feedItems
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV7(Card4, {
-        children: [
-          /* @__PURE__ */ jsxDEV7(CardHeader3, {
-            children: /* @__PURE__ */ jsxDEV7(CardTitle3, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV7("span", {
-                  children: "\uD83D\uDCC8"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV7("span", {
-                  children: "Journey Stats"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV7(CardContent4, {
-            children: /* @__PURE__ */ jsxDEV7("div", {
-              className: "space-y-4",
-              children: [
-                /* @__PURE__ */ jsxDEV7("div", {
-                  className: "flex items-center justify-between",
-                  children: [
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      className: "text-muted-foreground",
-                      children: "Total Tips"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      className: "font-semibold",
-                      children: track.steps.length
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV7("div", {
-                  className: "flex items-center justify-between",
-                  children: [
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      className: "text-muted-foreground",
-                      children: "Completed"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      className: "font-semibold text-green-500",
-                      children: completedCount
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV7("div", {
-                  className: "flex items-center justify-between",
-                  children: [
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      className: "text-muted-foreground",
-                      children: "XP Earned"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      className: "font-semibold text-orange-500",
-                      children: progress.xpEarned
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV7("div", {
-                  className: "flex items-center justify-between",
-                  children: [
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      className: "text-muted-foreground",
-                      children: "Current Streak"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      className: "font-semibold",
-                      children: progress.streakDays > 0 ? `\uD83D\uDD25 ${progress.streakDays} days` : "Start today!"
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/CoachingMiniApp.tsx
-import {
-  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({
-  track,
-  progress: externalProgress,
-  onStepComplete: externalOnStepComplete,
-  onViewChange,
-  initialView = "overview"
-}) {
-  const [currentView, setCurrentView] = useState(initialView);
-  const { progress: internalProgress, completeStep: internalCompleteStep } = useLearningProgress(track);
-  const progress = externalProgress ?? internalProgress;
-  const handleViewChange = useCallback((view) => {
-    setCurrentView(view);
-    onViewChange?.(view);
-  }, [onViewChange]);
-  const handleStepComplete = useCallback((stepId) => {
-    if (externalOnStepComplete) {
-      externalOnStepComplete(stepId);
-    } else {
-      internalCompleteStep(stepId);
-    }
-  }, [externalOnStepComplete, internalCompleteStep]);
-  const handleStartFromOverview = useCallback(() => {
-    setCurrentView("steps");
-    onViewChange?.("steps");
-  }, [onViewChange]);
-  const renderView = () => {
-    const viewProps = {
-      track,
-      progress,
-      onStepComplete: handleStepComplete
-    };
-    switch (currentView) {
-      case "overview":
-        return /* @__PURE__ */ jsxDEV8(Overview, {
-          ...viewProps,
-          onStart: handleStartFromOverview
-        }, undefined, false, undefined, this);
-      case "steps":
-        return /* @__PURE__ */ jsxDEV8(Steps, {
-          ...viewProps
-        }, undefined, false, undefined, this);
-      case "progress":
-        return /* @__PURE__ */ jsxDEV8(ProgressView, {
-          ...viewProps
-        }, undefined, false, undefined, this);
-      case "timeline":
-        return /* @__PURE__ */ jsxDEV8(Timeline, {
-          ...viewProps
-        }, undefined, false, undefined, this);
-      default:
-        return /* @__PURE__ */ jsxDEV8(Overview, {
-          ...viewProps,
-          onStart: handleStartFromOverview
-        }, undefined, false, undefined, this);
-    }
-  };
-  return /* @__PURE__ */ jsxDEV8("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV8(Card5, {
-        children: /* @__PURE__ */ jsxDEV8(CardContent5, {
-          className: "p-4",
-          children: /* @__PURE__ */ jsxDEV8(ViewTabs, {
-            currentView,
-            onViewChange: handleViewChange
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      renderView()
-    ]
-  }, undefined, true, undefined, this);
-}
-export {
-  CoachingMiniApp
-};
+import{Button as d}from"@contractspec/lib.design-system";import{Card as qq,CardContent as zq}from"@contractspec/lib.ui-kit-web/ui/card";import{cn as m}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as N,jsxs as V}from"react/jsx-runtime";var i={cash_buffer_too_high:"\uD83D\uDCB0",no_savings_goal:"\uD83C\uDFAF",irregular_savings:"\uD83D\uDCC5",noise_late_evening:"\uD83D\uDD07",guest_frequency_high:"\uD83D\uDC65",shared_space_conflicts:"\uD83C\uDFE0",default:"\uD83D\uDCA1"};function T({step:z,isCompleted:q,isCurrent:R,onComplete:Q,onDismiss:y}){let U=z.metadata?.tipId??"default",Z=i[U]??i.default;return N(qq,{className:m("transition-all",q&&"opacity-60",R&&"ring-2 ring-amber-500"),children:N(zq,{className:"p-4",children:V("div",{className:"flex gap-4",children:[N("div",{className:m("flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl",q?"bg-green-500/10":R?"bg-amber-500/10":"bg-muted"),children:q?"✓":Z}),V("div",{className:"min-w-0 flex-1",children:[V("div",{className:"flex items-start justify-between gap-2",children:[N("h4",{className:"font-semibold",children:z.title}),z.xpReward&&V("span",{className:m("shrink-0 rounded-full px-2 py-0.5 font-semibold text-xs",q?"bg-green-500/10 text-green-500":"bg-amber-500/10 text-amber-500"),children:["+",z.xpReward," XP"]})]}),N("p",{className:"mt-1 text-muted-foreground text-sm",children:z.description}),!q&&V("div",{className:"mt-3 flex flex-wrap gap-2",children:[N(d,{size:"sm",onClick:Q,children:"Take Action"}),N(d,{variant:"outline",size:"sm",onClick:y,children:"Dismiss"})]}),q&&N("p",{className:"mt-2 text-green-500 text-sm",children:"✓ Tip acknowledged"})]})]})})})}import{StreakCounter as Gq,XpBar as Jq}from"@contractspec/example.learning-journey-ui-shared";import{Button as Kq}from"@contractspec/lib.design-system";import{Card as f,CardContent as H,CardHeader as u,CardTitle as w}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as J,jsxs as $}from"react/jsx-runtime";function l({track:z,progress:q,onStepComplete:R,onStart:Q}){let y=z.totalXp??z.steps.reduce((W,O)=>W+(O.xpReward??0),0),U=q.completedStepIds.length,Z=z.steps.length,Y=Z-U,A=z.steps.filter((W)=>!q.completedStepIds.includes(W.id)).slice(0,3);return $("div",{className:"space-y-6",children:[J(f,{className:"overflow-hidden bg-gradient-to-br from-amber-500/10 via-orange-500/10 to-red-500/10",children:J(H,{className:"p-6",children:$("div",{className:"flex flex-col items-center gap-4 text-center md:flex-row md:text-left",children:[J("div",{className:"flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 text-3xl shadow-lg",children:"\uD83D\uDCA1"}),$("div",{className:"flex-1",children:[J("h1",{className:"font-bold text-2xl",children:z.name}),J("p",{className:"mt-1 text-muted-foreground",children:z.description})]}),J("div",{className:"flex items-center gap-4",children:J(Gq,{days:q.streakDays,size:"lg"})})]})})}),$("div",{className:"grid gap-4 md:grid-cols-3",children:[$(f,{children:[J(u,{className:"pb-2",children:J(w,{className:"font-medium text-muted-foreground text-sm",children:"Active Tips"})}),$(H,{children:[J("div",{className:"font-bold text-3xl text-amber-500",children:Y}),J("p",{className:"text-muted-foreground text-sm",children:"tips for you today"})]})]}),$(f,{children:[J(u,{className:"pb-2",children:J(w,{className:"font-medium text-muted-foreground text-sm",children:"Tips Actioned"})}),$(H,{children:[J("div",{className:"font-bold text-3xl text-green-500",children:U}),$("p",{className:"text-muted-foreground text-sm",children:["out of ",Z," total"]})]})]}),$(f,{children:[J(u,{className:"pb-2",children:J(w,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),$(H,{children:[J("div",{className:"font-bold text-3xl text-orange-500",children:q.xpEarned}),J(Jq,{current:q.xpEarned,max:y,showLabel:!1,size:"sm"})]})]})]}),A.length>0&&$(f,{children:[$(u,{className:"flex flex-row items-center justify-between",children:[$(w,{className:"flex items-center gap-2",children:[J("span",{children:"\uD83D\uDCA1"}),J("span",{children:"Tips for You"})]}),A.length<Y&&$(Kq,{variant:"outline",size:"sm",onClick:Q,children:["View All (",Y,")"]})]}),J(H,{className:"space-y-3",children:A.map((W)=>J(T,{step:W,isCompleted:!1,isCurrent:W.id===A[0]?.id,onComplete:()=>R?.(W.id)},W.id))})]}),Y===0&&J(f,{className:"border-green-500/50 bg-green-500/5",children:$(H,{className:"flex items-center gap-4 p-6",children:[J("div",{className:"text-4xl",children:"\uD83C\uDF89"}),$("div",{children:[J("h3",{className:"font-semibold text-green-500 text-lg",children:"All Tips Actioned!"}),$("p",{className:"text-muted-foreground",children:["Great job! You've addressed all ",Z," coaching tips."]})]})]})})]})}import{jsx as F,jsxs as M}from"react/jsx-runtime";function n({acknowledged:z,actioned:q,pending:R,streak:Q=0}){let y=z+q+R,U=y>0?q/y*100:0,Z=y>0?z/y*100:0;return M("div",{className:"space-y-4",children:[F("div",{className:"flex items-center justify-center",children:M("div",{className:"relative h-32 w-32",children:[M("svg",{className:"h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[F("circle",{cx:"50",cy:"50",r:"40",fill:"none",strokeWidth:"12",className:"stroke-muted"}),F("circle",{cx:"50",cy:"50",r:"40",fill:"none",strokeWidth:"12",strokeLinecap:"round",strokeDasharray:`${U*2.51} 251`,className:"stroke-green-500 transition-all duration-500"}),F("circle",{cx:"50",cy:"50",r:"40",fill:"none",strokeWidth:"12",strokeLinecap:"round",strokeDasharray:`${Z*2.51} 251`,strokeDashoffset:`${-U*2.51}`,className:"stroke-amber-500 transition-all duration-500"})]}),M("div",{className:"absolute inset-0 flex flex-col items-center justify-center",children:[F("span",{className:"font-bold text-2xl",children:y}),F("span",{className:"text-muted-foreground text-xs",children:"tips"})]})]})}),M("div",{className:"flex justify-center gap-4 text-sm",children:[M("div",{className:"flex items-center gap-1.5",children:[F("div",{className:"h-3 w-3 rounded-full bg-green-500"}),M("span",{children:["Actioned (",q,")"]})]}),M("div",{className:"flex items-center gap-1.5",children:[F("div",{className:"h-3 w-3 rounded-full bg-amber-500"}),M("span",{children:["Acknowledged (",z,")"]})]}),M("div",{className:"flex items-center gap-1.5",children:[F("div",{className:"h-3 w-3 rounded-full bg-muted"}),M("span",{children:["Pending (",R,")"]})]})]}),Q>0&&M("div",{className:"flex items-center justify-center gap-2 rounded-lg bg-orange-500/10 px-4 py-2",children:[F("span",{className:"text-xl",children:"\uD83D\uDD25"}),M("span",{className:"font-semibold text-orange-500",children:[Q," day engagement streak!"]})]})]})}import{BadgeDisplay as Qq,StreakCounter as Rq,XpBar as Uq}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as P,CardHeader as b,CardTitle as v}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as G,jsxs as E}from"react/jsx-runtime";function j({track:z,progress:q}){let R=z.totalXp??z.steps.reduce((A,W)=>A+(W.xpReward??0),0),Q=q.completedStepIds.length,U=z.steps.length-Q,Z=Math.floor(Q*0.7),Y=Q-Z;return E("div",{className:"space-y-6",children:[E(I,{children:[G(b,{children:E(v,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDCCA"}),G("span",{children:"Engagement Overview"})]})}),G(P,{children:G(n,{actioned:Z,acknowledged:Y,pending:U,streak:q.streakDays})})]}),E("div",{className:"grid gap-4 md:grid-cols-2",children:[E(I,{children:[G(b,{className:"pb-2",children:G(v,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),E(P,{className:"space-y-3",children:[E("div",{className:"flex items-baseline gap-2",children:[G("span",{className:"font-bold text-3xl text-orange-500",children:q.xpEarned}),E("span",{className:"text-muted-foreground",children:["/ ",R," XP"]})]}),G(Uq,{current:q.xpEarned,max:R,showLabel:!1,size:"lg"})]})]}),E(I,{children:[G(b,{className:"pb-2",children:G(v,{className:"font-medium text-muted-foreground text-sm",children:"Engagement Streak"})}),G(P,{children:E("div",{className:"flex items-center gap-4",children:[G(Rq,{days:q.streakDays,size:"lg"}),G("div",{className:"text-muted-foreground text-sm",children:q.streakDays>0?"Keep going!":"Start your streak today!"})]})})]})]}),E(I,{children:[G(b,{children:E(v,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83C\uDFC5"}),G("span",{children:"Achievements"})]})}),E(P,{children:[G(Qq,{badges:q.badges,size:"lg",maxVisible:10}),q.badges.length===0&&G("p",{className:"text-muted-foreground text-sm",children:"Action tips to unlock achievements!"})]})]}),E(I,{children:[G(b,{children:E(v,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDCA1"}),G("span",{children:"Tip Status"})]})}),G(P,{children:G("div",{className:"space-y-3",children:z.steps.map((A)=>{let W=q.completedStepIds.includes(A.id);return E("div",{className:"flex items-center justify-between rounded-lg border p-3",children:[E("div",{className:"flex items-center gap-3",children:[G("span",{className:W?"text-green-500":"text-amber-500",children:W?"✓":"○"}),G("span",{className:W?"text-muted-foreground":"text-foreground",children:A.title})]}),G("span",{className:`text-sm ${W?"text-green-500":"text-muted-foreground"}`,children:W?"Actioned":"Pending"})]},A.id)})})})]})]})}import{jsx as h,jsxs as S}from"react/jsx-runtime";function o({track:z,progress:q,onStepComplete:R}){let Q=q.completedStepIds.length,y=z.steps.length,U=[...z.steps].sort((Y,A)=>{let W=q.completedStepIds.includes(Y.id),O=q.completedStepIds.includes(A.id);if(W===O)return 0;return W?1:-1}),Z=z.steps.find((Y)=>!q.completedStepIds.includes(Y.id))?.id;return S("div",{className:"space-y-6",children:[S("div",{className:"text-center",children:[h("h2",{className:"font-bold text-xl",children:"Coaching Tips"}),h("p",{className:"text-muted-foreground",children:"Review and take action on personalized tips"}),S("p",{className:"mt-2 text-muted-foreground text-sm",children:[Q," of ",y," tips actioned"]})]}),h("div",{className:"space-y-3",children:U.map((Y)=>{let A=q.completedStepIds.includes(Y.id),W=Y.id===Z;return h(T,{step:Y,isCompleted:A,isCurrent:W,onComplete:()=>R?.(Y.id),onDismiss:()=>R?.(Y.id)},Y.id)})}),Q===y&&S("div",{className:"text-center text-muted-foreground",children:[h("span",{className:"text-2xl",children:"✨"}),h("p",{className:"mt-2",children:"All tips have been addressed!"})]})]})}import{cn as x}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as _,jsxs as B}from"react/jsx-runtime";var a={cash_buffer_too_high:"\uD83D\uDCB0",no_savings_goal:"\uD83C\uDFAF",irregular_savings:"\uD83D\uDCC5",noise_late_evening:"\uD83D\uDD07",guest_frequency_high:"\uD83D\uDC65",shared_space_conflicts:"\uD83C\uDFE0",default:"\uD83D\uDCA1"};function p({items:z}){if(z.length===0)return _("div",{className:"py-8 text-center text-muted-foreground",children:"No tips yet. Start engaging with coaching tips!"});return B("div",{className:"relative",children:[_("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),_("div",{className:"space-y-4",children:z.map((q)=>{let R=q.step.metadata?.tipId??"default",Q=a[R]??a.default;return B("div",{className:"relative flex gap-4 pl-2",children:[_("div",{className:x("relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm",q.isCompleted?"bg-green-500 text-white":"bg-muted text-muted-foreground"),children:q.isCompleted?"✓":Q}),B("div",{className:"flex-1 rounded-lg border bg-card p-3",children:[B("div",{className:"flex items-start justify-between gap-2",children:[B("div",{children:[_("p",{className:"font-medium",children:q.step.title}),_("p",{className:"mt-0.5 text-muted-foreground text-sm",children:q.step.description})]}),q.step.xpReward&&B("span",{className:x("shrink-0 font-medium text-xs",q.isCompleted?"text-green-500":"text-muted-foreground"),children:["+",q.step.xpReward," XP"]})]}),_("div",{className:"mt-2 flex items-center gap-2 text-muted-foreground text-xs",children:q.isCompleted?B("span",{className:"text-green-500",children:["✓ Completed",q.completedAt&&` • ${q.completedAt}`]}):_("span",{children:"Pending action"})})]})]},q.step.id)})})]})}import{Card as k,CardContent as g,CardHeader as r,CardTitle as t}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as K,jsxs as L}from"react/jsx-runtime";function e({track:z,progress:q}){let R=z.steps.map((U)=>({step:U,isCompleted:q.completedStepIds.includes(U.id),completedAt:q.completedStepIds.includes(U.id)?"Recently":void 0})).sort((U,Z)=>{if(U.isCompleted&&!Z.isCompleted)return-1;if(!U.isCompleted&&Z.isCompleted)return 1;return 0}),Q=R.filter((U)=>U.isCompleted).length,y=R.length-Q;return L("div",{className:"space-y-6",children:[L("div",{className:"text-center",children:[K("h2",{className:"font-bold text-xl",children:"Activity Timeline"}),K("p",{className:"text-muted-foreground",children:"Your coaching journey and tip history"})]}),L("div",{className:"grid grid-cols-2 gap-4",children:[K(k,{children:L(g,{className:"p-4 text-center",children:[K("div",{className:"font-bold text-2xl text-green-500",children:Q}),K("div",{className:"text-muted-foreground text-sm",children:"Tips Actioned"})]})}),K(k,{children:L(g,{className:"p-4 text-center",children:[K("div",{className:"font-bold text-2xl text-amber-500",children:y}),K("div",{className:"text-muted-foreground text-sm",children:"Tips Pending"})]})})]}),L(k,{children:[K(r,{children:L(t,{className:"flex items-center gap-2",children:[K("span",{children:"\uD83D\uDCDD"}),K("span",{children:"Coaching Feed"})]})}),K(g,{children:K(p,{items:R})})]}),L(k,{children:[K(r,{children:L(t,{className:"flex items-center gap-2",children:[K("span",{children:"\uD83D\uDCC8"}),K("span",{children:"Journey Stats"})]})}),K(g,{children:L("div",{className:"space-y-4",children:[L("div",{className:"flex items-center justify-between",children:[K("span",{className:"text-muted-foreground",children:"Total Tips"}),K("span",{className:"font-semibold",children:z.steps.length})]}),L("div",{className:"flex items-center justify-between",children:[K("span",{className:"text-muted-foreground",children:"Completed"}),K("span",{className:"font-semibold text-green-500",children:Q})]}),L("div",{className:"flex items-center justify-between",children:[K("span",{className:"text-muted-foreground",children:"XP Earned"}),K("span",{className:"font-semibold text-orange-500",children:q.xpEarned})]}),L("div",{className:"flex items-center justify-between",children:[K("span",{className:"text-muted-foreground",children:"Current Streak"}),K("span",{className:"font-semibold",children:q.streakDays>0?`\uD83D\uDD25 ${q.streakDays} days`:"Start today!"})]})]})})]})]})}import{useLearningProgress as Wq,ViewTabs as Yq}from"@contractspec/example.learning-journey-ui-shared";import{Card as Zq,CardContent as $q}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as c,useState as yq}from"react";import{jsx as X,jsxs as Aq}from"react/jsx-runtime";function rq({track:z,progress:q,onStepComplete:R,onViewChange:Q,initialView:y="overview"}){let[U,Z]=yq(y),{progress:Y,completeStep:A}=Wq(z),W=q??Y,O=c((D)=>{Z(D),Q?.(D)},[Q]),s=c((D)=>{if(R)R(D);else A(D)},[R,A]),C=c(()=>{Z("steps"),Q?.("steps")},[Q]);return Aq("div",{className:"space-y-6",children:[X(Zq,{children:X($q,{className:"p-4",children:X(Yq,{currentView:U,onViewChange:O})})}),(()=>{let D={track:z,progress:W,onStepComplete:s};switch(U){case"overview":return X(l,{...D,onStart:C});case"steps":return X(o,{...D});case"progress":return X(j,{...D});case"timeline":return X(e,{...D});default:return X(l,{...D,onStart:C})}})()]})}export{rq as CoachingMiniApp};