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

package/dist/views/Overview.js

@@ -1,304 +1,2 @@
 // @bun
-// 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 ? "\u2713" : 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: "\u2713 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);
-}
-export {
-  Overview
-};
+import{Button as Z}from"@contractspec/lib.design-system";import{Card as N,CardContent as O}from"@contractspec/lib.ui-kit-web/ui/card";import{cn as Y}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as A,jsxs as J}from"react/jsx-runtime";var $={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 w({step:q,isCompleted:y,isCurrent:K,onComplete:V,onDismiss:W}){let L=q.metadata?.tipId??"default",G=$[L]??$.default;return A(N,{className:Y("transition-all",y&&"opacity-60",K&&"ring-2 ring-amber-500"),children:A(O,{className:"p-4",children:J("div",{className:"flex gap-4",children:[A("div",{className:Y("flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl",y?"bg-green-500/10":K?"bg-amber-500/10":"bg-muted"),children:y?"\u2713":G}),J("div",{className:"min-w-0 flex-1",children:[J("div",{className:"flex items-start justify-between gap-2",children:[A("h4",{className:"font-semibold",children:q.title}),q.xpReward&&J("span",{className:Y("shrink-0 rounded-full px-2 py-0.5 font-semibold text-xs",y?"bg-green-500/10 text-green-500":"bg-amber-500/10 text-amber-500"),children:["+",q.xpReward," XP"]})]}),A("p",{className:"mt-1 text-muted-foreground text-sm",children:q.description}),!y&&J("div",{className:"mt-3 flex flex-wrap gap-2",children:[A(Z,{size:"sm",onClick:V,children:"Take Action"}),A(Z,{variant:"outline",size:"sm",onClick:W,children:"Dismiss"})]}),y&&A("p",{className:"mt-2 text-green-500 text-sm",children:"\u2713 Tip acknowledged"})]})]})})})}import{StreakCounter as P,XpBar as X}from"@contractspec/example.learning-journey-ui-shared";import{Button as _}from"@contractspec/lib.design-system";import{Card as E,CardContent as F,CardHeader as R,CardTitle as U}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as f,jsxs as h}from"react/jsx-runtime";function u({track:q,progress:y,onStepComplete:K,onStart:V}){let W=q.totalXp??q.steps.reduce((z,D)=>z+(D.xpReward??0),0),L=y.completedStepIds.length,G=q.steps.length,M=G-L,Q=q.steps.filter((z)=>!y.completedStepIds.includes(z.id)).slice(0,3);return h("div",{className:"space-y-6",children:[f(E,{className:"overflow-hidden bg-gradient-to-br from-amber-500/10 via-orange-500/10 to-red-500/10",children:f(F,{className:"p-6",children:h("div",{className:"flex flex-col items-center gap-4 text-center md:flex-row md:text-left",children:[f("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"}),h("div",{className:"flex-1",children:[f("h1",{className:"font-bold text-2xl",children:q.name}),f("p",{className:"mt-1 text-muted-foreground",children:q.description})]}),f("div",{className:"flex items-center gap-4",children:f(P,{days:y.streakDays,size:"lg"})})]})})}),h("div",{className:"grid gap-4 md:grid-cols-3",children:[h(E,{children:[f(R,{className:"pb-2",children:f(U,{className:"font-medium text-muted-foreground text-sm",children:"Active Tips"})}),h(F,{children:[f("div",{className:"font-bold text-3xl text-amber-500",children:M}),f("p",{className:"text-muted-foreground text-sm",children:"tips for you today"})]})]}),h(E,{children:[f(R,{className:"pb-2",children:f(U,{className:"font-medium text-muted-foreground text-sm",children:"Tips Actioned"})}),h(F,{children:[f("div",{className:"font-bold text-3xl text-green-500",children:L}),h("p",{className:"text-muted-foreground text-sm",children:["out of ",G," total"]})]})]}),h(E,{children:[f(R,{className:"pb-2",children:f(U,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),h(F,{children:[f("div",{className:"font-bold text-3xl text-orange-500",children:y.xpEarned}),f(X,{current:y.xpEarned,max:W,showLabel:!1,size:"sm"})]})]})]}),Q.length>0&&h(E,{children:[h(R,{className:"flex flex-row items-center justify-between",children:[h(U,{className:"flex items-center gap-2",children:[f("span",{children:"\uD83D\uDCA1"}),f("span",{children:"Tips for You"})]}),Q.length<M&&h(_,{variant:"outline",size:"sm",onClick:V,children:["View All (",M,")"]})]}),f(F,{className:"space-y-3",children:Q.map((z)=>f(w,{step:z,isCompleted:!1,isCurrent:z.id===Q[0]?.id,onComplete:()=>K?.(z.id)},z.id))})]}),M===0&&f(E,{className:"border-green-500/50 bg-green-500/5",children:h(F,{className:"flex items-center gap-4 p-6",children:[f("div",{className:"text-4xl",children:"\uD83C\uDF89"}),h("div",{children:[f("h3",{className:"font-semibold text-green-500 text-lg",children:"All Tips Actioned!"}),h("p",{className:"text-muted-foreground",children:["Great job! You've addressed all ",G," coaching tips."]})]})]})})]})}export{u as Overview};

package/dist/views/Progress.js

@@ -1,345 +1,2 @@
 // @bun
-// src/components/EngagementMeter.tsx
-import { jsxDEV } 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__ */ jsxDEV("div", {
-    className: "space-y-4",
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "flex items-center justify-center",
-        children: /* @__PURE__ */ jsxDEV("div", {
-          className: "relative h-32 w-32",
-          children: [
-            /* @__PURE__ */ jsxDEV("svg", {
-              className: "h-full w-full -rotate-90",
-              viewBox: "0 0 100 100",
-              children: [
-                /* @__PURE__ */ jsxDEV("circle", {
-                  cx: "50",
-                  cy: "50",
-                  r: "40",
-                  fill: "none",
-                  strokeWidth: "12",
-                  className: "stroke-muted"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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__ */ jsxDEV("div", {
-              className: "absolute inset-0 flex flex-col items-center justify-center",
-              children: [
-                /* @__PURE__ */ jsxDEV("span", {
-                  className: "font-bold text-2xl",
-                  children: total
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
-        className: "flex justify-center gap-4 text-sm",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex items-center gap-1.5",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "h-3 w-3 rounded-full bg-green-500"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
-                children: [
-                  "Actioned (",
-                  actioned,
-                  ")"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex items-center gap-1.5",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "h-3 w-3 rounded-full bg-amber-500"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
-                children: [
-                  "Acknowledged (",
-                  acknowledged,
-                  ")"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex items-center gap-1.5",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "h-3 w-3 rounded-full bg-muted"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
-                children: [
-                  "Pending (",
-                  pending,
-                  ")"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      streak > 0 && /* @__PURE__ */ jsxDEV("div", {
-        className: "flex items-center justify-center gap-2 rounded-lg bg-orange-500/10 px-4 py-2",
-        children: [
-          /* @__PURE__ */ jsxDEV("span", {
-            className: "text-xl",
-            children: "\uD83D\uDD25"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("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,
-  XpBar
-} from "@contractspec/example.learning-journey-ui-shared";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle
-} from "@contractspec/lib.ui-kit-web/ui/card";
-import { jsxDEV as jsxDEV2 } 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__ */ jsxDEV2("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV2(Card, {
-        children: [
-          /* @__PURE__ */ jsxDEV2(CardHeader, {
-            children: /* @__PURE__ */ jsxDEV2(CardTitle, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "\uD83D\uDCCA"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "Engagement Overview"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(CardContent, {
-            children: /* @__PURE__ */ jsxDEV2(EngagementMeter, {
-              actioned,
-              acknowledged,
-              pending: pendingSteps,
-              streak: progress.streakDays
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV2("div", {
-        className: "grid gap-4 md:grid-cols-2",
-        children: [
-          /* @__PURE__ */ jsxDEV2(Card, {
-            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(CardContent, {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsxDEV2("div", {
-                    className: "flex items-baseline gap-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV2("span", {
-                        className: "font-bold text-3xl text-orange-500",
-                        children: progress.xpEarned
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("span", {
-                        className: "text-muted-foreground",
-                        children: [
-                          "/ ",
-                          totalXp,
-                          " XP"
-                        ]
-                      }, undefined, true, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV2(XpBar, {
-                    current: progress.xpEarned,
-                    max: totalXp,
-                    showLabel: false,
-                    size: "lg"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV2(Card, {
-            children: [
-              /* @__PURE__ */ jsxDEV2(CardHeader, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV2(CardTitle, {
-                  className: "font-medium text-muted-foreground text-sm",
-                  children: "Engagement Streak"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2(CardContent, {
-                children: /* @__PURE__ */ jsxDEV2("div", {
-                  className: "flex items-center gap-4",
-                  children: [
-                    /* @__PURE__ */ jsxDEV2(StreakCounter, {
-                      days: progress.streakDays,
-                      size: "lg"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2(Card, {
-        children: [
-          /* @__PURE__ */ jsxDEV2(CardHeader, {
-            children: /* @__PURE__ */ jsxDEV2(CardTitle, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "\uD83C\uDFC5"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "Achievements"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(CardContent, {
-            children: [
-              /* @__PURE__ */ jsxDEV2(BadgeDisplay, {
-                badges: progress.badges,
-                size: "lg",
-                maxVisible: 10
-              }, undefined, false, undefined, this),
-              progress.badges.length === 0 && /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2(Card, {
-        children: [
-          /* @__PURE__ */ jsxDEV2(CardHeader, {
-            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: "Tip Status"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(CardContent, {
-            children: /* @__PURE__ */ jsxDEV2("div", {
-              className: "space-y-3",
-              children: track.steps.map((step) => {
-                const isCompleted = progress.completedStepIds.includes(step.id);
-                return /* @__PURE__ */ jsxDEV2("div", {
-                  className: "flex items-center justify-between rounded-lg border p-3",
-                  children: [
-                    /* @__PURE__ */ jsxDEV2("div", {
-                      className: "flex items-center gap-3",
-                      children: [
-                        /* @__PURE__ */ jsxDEV2("span", {
-                          className: isCompleted ? "text-green-500" : "text-amber-500",
-                          children: isCompleted ? "\u2713" : "\u25CB"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV2("span", {
-                          className: isCompleted ? "text-muted-foreground" : "text-foreground",
-                          children: step.title
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV2("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);
-}
-export {
-  ProgressView,
-  ProgressView as Progress
-};
+import{jsx as F,jsxs as z}from"react/jsx-runtime";function _({acknowledged:G,actioned:v,pending:N,streak:J=0}){let K=G+v+N,Y=K>0?v/K*100:0,Z=K>0?G/K*100:0;return z("div",{className:"space-y-4",children:[F("div",{className:"flex items-center justify-center",children:z("div",{className:"relative h-32 w-32",children:[z("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:`${Y*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:`${-Y*2.51}`,className:"stroke-amber-500 transition-all duration-500"})]}),z("div",{className:"absolute inset-0 flex flex-col items-center justify-center",children:[F("span",{className:"font-bold text-2xl",children:K}),F("span",{className:"text-muted-foreground text-xs",children:"tips"})]})]})}),z("div",{className:"flex justify-center gap-4 text-sm",children:[z("div",{className:"flex items-center gap-1.5",children:[F("div",{className:"h-3 w-3 rounded-full bg-green-500"}),z("span",{children:["Actioned (",v,")"]})]}),z("div",{className:"flex items-center gap-1.5",children:[F("div",{className:"h-3 w-3 rounded-full bg-amber-500"}),z("span",{children:["Acknowledged (",G,")"]})]}),z("div",{className:"flex items-center gap-1.5",children:[F("div",{className:"h-3 w-3 rounded-full bg-muted"}),z("span",{children:["Pending (",N,")"]})]})]}),J>0&&z("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"}),z("span",{className:"font-semibold text-orange-500",children:[J," day engagement streak!"]})]})]})}import{BadgeDisplay as A,StreakCounter as D,XpBar as L}from"@contractspec/example.learning-journey-ui-shared";import{Card as Q,CardContent as R,CardHeader as U,CardTitle as W}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as h,jsxs as q}from"react/jsx-runtime";function M({track:G,progress:v}){let N=G.totalXp??G.steps.reduce((O,I)=>O+(I.xpReward??0),0),J=v.completedStepIds.length,Y=G.steps.length-J,Z=Math.floor(J*0.7),$=J-Z;return q("div",{className:"space-y-6",children:[q(Q,{children:[h(U,{children:q(W,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCA"}),h("span",{children:"Engagement Overview"})]})}),h(R,{children:h(_,{actioned:Z,acknowledged:$,pending:Y,streak:v.streakDays})})]}),q("div",{className:"grid gap-4 md:grid-cols-2",children:[q(Q,{children:[h(U,{className:"pb-2",children:h(W,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),q(R,{className:"space-y-3",children:[q("div",{className:"flex items-baseline gap-2",children:[h("span",{className:"font-bold text-3xl text-orange-500",children:v.xpEarned}),q("span",{className:"text-muted-foreground",children:["/ ",N," XP"]})]}),h(L,{current:v.xpEarned,max:N,showLabel:!1,size:"lg"})]})]}),q(Q,{children:[h(U,{className:"pb-2",children:h(W,{className:"font-medium text-muted-foreground text-sm",children:"Engagement Streak"})}),h(R,{children:q("div",{className:"flex items-center gap-4",children:[h(D,{days:v.streakDays,size:"lg"}),h("div",{className:"text-muted-foreground text-sm",children:v.streakDays>0?"Keep going!":"Start your streak today!"})]})})]})]}),q(Q,{children:[h(U,{children:q(W,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83C\uDFC5"}),h("span",{children:"Achievements"})]})}),q(R,{children:[h(A,{badges:v.badges,size:"lg",maxVisible:10}),v.badges.length===0&&h("p",{className:"text-muted-foreground text-sm",children:"Action tips to unlock achievements!"})]})]}),q(Q,{children:[h(U,{children:q(W,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCA1"}),h("span",{children:"Tip Status"})]})}),h(R,{children:h("div",{className:"space-y-3",children:G.steps.map((O)=>{let I=v.completedStepIds.includes(O.id);return q("div",{className:"flex items-center justify-between rounded-lg border p-3",children:[q("div",{className:"flex items-center gap-3",children:[h("span",{className:I?"text-green-500":"text-amber-500",children:I?"\u2713":"\u25CB"}),h("span",{className:I?"text-muted-foreground":"text-foreground",children:O.title})]}),h("span",{className:`text-sm ${I?"text-green-500":"text-muted-foreground"}`,children:I?"Actioned":"Pending"})]},O.id)})})})]})]})}export{M as ProgressView,M as Progress};