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

package/dist/browser/index.js

@@ -1,1133 +1,8 @@
-// src/views/Overview.tsx
-import { XpBar } from "@contractspec/example.learning-journey-ui-shared";
-import { Button } from "@contractspec/lib.design-system";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle
-} from "@contractspec/lib.ui-kit-web/ui/card";
-import { Progress } from "@contractspec/lib.ui-kit-web/ui/progress";
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-function Overview({
-  track,
-  progress,
-  onStart
-}) {
-  const totalSteps = track.steps.length;
-  const completedSteps = progress.completedStepIds.length;
-  const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
-  const isComplete = completedSteps === totalSteps;
-  const remainingSteps = totalSteps - completedSteps;
-  const estimatedMinutes = remainingSteps * 5;
-  const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV(Card, {
-        className: "overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",
-        children: /* @__PURE__ */ jsxDEV(CardContent, {
-          className: "p-8",
-          children: /* @__PURE__ */ jsxDEV("div", {
-            className: "flex flex-col items-center gap-6 text-center md:flex-row md:text-left",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg",
-                children: isComplete ? "\uD83C\uDF89" : "\uD83D\uDE80"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex-1",
-                children: [
-                  /* @__PURE__ */ jsxDEV("h1", {
-                    className: "font-bold text-2xl",
-                    children: track.name
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("p", {
-                    className: "mt-1 max-w-2xl text-muted-foreground",
-                    children: track.description
-                  }, undefined, false, undefined, this),
-                  !isComplete && /* @__PURE__ */ jsxDEV("p", {
-                    className: "mt-3 text-muted-foreground text-sm",
-                    children: [
-                      "⏱️ Estimated time:",
-                      " ",
-                      estimatedMinutes > 0 ? `~${estimatedMinutes} minutes` : "Less than a minute"
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              !isComplete && /* @__PURE__ */ jsxDEV(Button, {
-                size: "lg",
-                onClick: onStart,
-                children: completedSteps > 0 ? "Continue" : "Get Started"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "grid gap-4 md:grid-cols-3",
-        children: [
-          /* @__PURE__ */ jsxDEV(Card, {
-            children: [
-              /* @__PURE__ */ jsxDEV(CardHeader, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV(CardTitle, {
-                  className: "font-medium text-muted-foreground text-sm",
-                  children: "Progress"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(CardContent, {
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "font-bold text-3xl",
-                    children: [
-                      Math.round(percentComplete),
-                      "%"
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV(Progress, {
-                    value: percentComplete,
-                    className: "mt-2 h-2"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("p", {
-                    className: "mt-2 text-muted-foreground text-sm",
-                    children: [
-                      completedSteps,
-                      " of ",
-                      totalSteps,
-                      " steps completed"
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV(Card, {
-            children: [
-              /* @__PURE__ */ jsxDEV(CardHeader, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV(CardTitle, {
-                  className: "font-medium text-muted-foreground text-sm",
-                  children: "XP Earned"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(CardContent, {
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "font-bold text-3xl text-blue-500",
-                    children: progress.xpEarned
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV(XpBar, {
-                    current: progress.xpEarned,
-                    max: totalXp,
-                    showLabel: false,
-                    size: "sm"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV(Card, {
-            children: [
-              /* @__PURE__ */ jsxDEV(CardHeader, {
-                className: "pb-2",
-                children: /* @__PURE__ */ jsxDEV(CardTitle, {
-                  className: "font-medium text-muted-foreground text-sm",
-                  children: "Time Remaining"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(CardContent, {
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "font-bold text-3xl",
-                    children: isComplete ? "✓" : `~${estimatedMinutes}m`
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("p", {
-                    className: "mt-2 text-muted-foreground text-sm",
-                    children: isComplete ? "All done!" : `${remainingSteps} steps to go`
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV(Card, {
-        children: [
-          /* @__PURE__ */ jsxDEV(CardHeader, {
-            children: /* @__PURE__ */ jsxDEV(CardTitle, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "\uD83D\uDCCB"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("span", {
-                  children: "Your Journey"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(CardContent, {
-            children: /* @__PURE__ */ jsxDEV("div", {
-              className: "space-y-3",
-              children: track.steps.map((step, index) => {
-                const isStepCompleted = progress.completedStepIds.includes(step.id);
-                const isCurrent = !isStepCompleted && track.steps.slice(0, index).every((s) => progress.completedStepIds.includes(s.id));
-                return /* @__PURE__ */ jsxDEV("div", {
-                  className: "flex items-center gap-4 rounded-lg border p-3",
-                  children: [
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${isStepCompleted ? "bg-green-500 text-white" : isCurrent ? "bg-blue-500 text-white" : "bg-muted text-muted-foreground"}`,
-                      children: isStepCompleted ? "✓" : index + 1
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "min-w-0 flex-1",
-                      children: /* @__PURE__ */ jsxDEV("p", {
-                        className: `font-medium ${isStepCompleted ? "text-green-500" : isCurrent ? "text-foreground" : "text-muted-foreground"}`,
-                        children: step.title
-                      }, undefined, false, undefined, this)
-                    }, undefined, false, undefined, this),
-                    step.xpReward && /* @__PURE__ */ jsxDEV("span", {
-                      className: "text-muted-foreground text-sm",
-                      children: [
-                        "+",
-                        step.xpReward,
-                        " XP"
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, step.id, true, undefined, this);
-              })
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      isComplete && /* @__PURE__ */ jsxDEV(Card, {
-        className: "border-green-500/50 bg-green-500/5",
-        children: /* @__PURE__ */ jsxDEV(CardContent, {
-          className: "flex items-center gap-4 p-6",
-          children: [
-            /* @__PURE__ */ jsxDEV("div", {
-              className: "text-4xl",
-              children: "\uD83C\uDF89"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("div", {
-              children: [
-                /* @__PURE__ */ jsxDEV("h3", {
-                  className: "font-semibold text-green-500 text-lg",
-                  children: "Onboarding Complete!"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("p", {
-                  className: "text-muted-foreground",
-                  children: [
-                    "You've completed all ",
-                    totalSteps,
-                    " steps. Welcome aboard!"
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/views/Progress.tsx
-import {
-  BadgeDisplay,
-  XpBar as XpBar2
-} from "@contractspec/example.learning-journey-ui-shared";
-import {
-  Card as Card2,
-  CardContent as CardContent2,
-  CardHeader as CardHeader2,
-  CardTitle as CardTitle2
-} from "@contractspec/lib.ui-kit-web/ui/card";
-import { Progress as Progress2 } from "@contractspec/lib.ui-kit-web/ui/progress";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-"use client";
-function ProgressView({ track, progress }) {
-  const totalSteps = track.steps.length;
-  const completedSteps = progress.completedStepIds.length;
-  const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
-  const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
-  const remainingSteps = totalSteps - completedSteps;
-  const estimatedMinutes = remainingSteps * 5;
-  return /* @__PURE__ */ jsxDEV2("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV2(Card2, {
-        children: [
-          /* @__PURE__ */ jsxDEV2(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV2(CardTitle2, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "\uD83D\uDCC8"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "Your Progress"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(CardContent2, {
-            className: "space-y-6",
-            children: [
-              /* @__PURE__ */ jsxDEV2("div", {
-                className: "flex items-center justify-center",
-                children: /* @__PURE__ */ jsxDEV2("div", {
-                  className: "relative flex h-40 w-40 items-center justify-center",
-                  children: [
-                    /* @__PURE__ */ jsxDEV2("svg", {
-                      className: "absolute h-full w-full -rotate-90",
-                      viewBox: "0 0 100 100",
-                      children: [
-                        /* @__PURE__ */ jsxDEV2("circle", {
-                          cx: "50",
-                          cy: "50",
-                          r: "45",
-                          fill: "none",
-                          strokeWidth: "8",
-                          className: "stroke-muted"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV2("circle", {
-                          cx: "50",
-                          cy: "50",
-                          r: "45",
-                          fill: "none",
-                          strokeWidth: "8",
-                          strokeLinecap: "round",
-                          strokeDasharray: `${percentComplete * 2.83} 283`,
-                          className: "stroke-blue-500 transition-all duration-500"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV2("div", {
-                      className: "text-center",
-                      children: [
-                        /* @__PURE__ */ jsxDEV2("div", {
-                          className: "font-bold text-3xl",
-                          children: [
-                            Math.round(percentComplete),
-                            "%"
-                          ]
-                        }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV2("div", {
-                          className: "text-muted-foreground text-sm",
-                          children: "Complete"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("div", {
-                className: "grid grid-cols-3 gap-4 text-center",
-                children: [
-                  /* @__PURE__ */ jsxDEV2("div", {
-                    children: [
-                      /* @__PURE__ */ jsxDEV2("div", {
-                        className: "font-bold text-2xl text-green-500",
-                        children: completedSteps
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("div", {
-                        className: "text-muted-foreground text-sm",
-                        children: "Completed"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("div", {
-                    children: [
-                      /* @__PURE__ */ jsxDEV2("div", {
-                        className: "font-bold text-2xl text-orange-500",
-                        children: remainingSteps
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("div", {
-                        className: "text-muted-foreground text-sm",
-                        children: "Remaining"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("div", {
-                    children: [
-                      /* @__PURE__ */ jsxDEV2("div", {
-                        className: "font-bold text-2xl",
-                        children: [
-                          estimatedMinutes,
-                          "m"
-                        ]
-                      }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("div", {
-                        className: "text-muted-foreground text-sm",
-                        children: "Est. Time"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV2(Card2, {
-        children: [
-          /* @__PURE__ */ jsxDEV2(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV2(CardTitle2, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "⚡"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "Experience Points"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(CardContent2, {
-            className: "space-y-4",
-            children: [
-              /* @__PURE__ */ jsxDEV2("div", {
-                className: "flex items-baseline gap-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV2("span", {
-                    className: "font-bold text-3xl text-blue-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(XpBar2, {
-                current: progress.xpEarned,
-                max: totalXp,
-                showLabel: false,
-                size: "lg"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV2(Card2, {
-        children: [
-          /* @__PURE__ */ jsxDEV2(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV2(CardTitle2, {
-              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(CardContent2, {
-            children: [
-              /* @__PURE__ */ jsxDEV2(BadgeDisplay, {
-                badges: progress.badges,
-                size: "lg"
-              }, undefined, false, undefined, this),
-              progress.badges.length === 0 && track.completionRewards?.badgeKey && /* @__PURE__ */ jsxDEV2("p", {
-                className: "text-muted-foreground text-sm",
-                children: [
-                  'Complete all steps to earn the "',
-                  track.completionRewards.badgeKey,
-                  '" badge!'
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV2(Card2, {
-        children: [
-          /* @__PURE__ */ jsxDEV2(CardHeader2, {
-            children: /* @__PURE__ */ jsxDEV2(CardTitle2, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "\uD83D\uDCCB"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "Step Details"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(CardContent2, {
-            children: /* @__PURE__ */ jsxDEV2("div", {
-              className: "space-y-3",
-              children: track.steps.map((step, index) => {
-                const isCompleted = progress.completedStepIds.includes(step.id);
-                const stepProgress = isCompleted ? 100 : 0;
-                return /* @__PURE__ */ jsxDEV2("div", {
-                  className: "space-y-1",
-                  children: [
-                    /* @__PURE__ */ jsxDEV2("div", {
-                      className: "flex items-center justify-between text-sm",
-                      children: [
-                        /* @__PURE__ */ jsxDEV2("span", {
-                          className: isCompleted ? "text-green-500" : "text-foreground",
-                          children: [
-                            index + 1,
-                            ". ",
-                            step.title
-                          ]
-                        }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV2("span", {
-                          className: isCompleted ? "text-green-500" : "text-muted-foreground",
-                          children: isCompleted ? "✓" : "Pending"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV2(Progress2, {
-                      value: stepProgress,
-                      className: "h-1"
-                    }, 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/components/StepChecklist.tsx
-import { Button as Button2 } from "@contractspec/lib.design-system";
-import { cn } from "@contractspec/lib.ui-kit-core";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-"use client";
-function StepChecklist({
-  step,
-  stepNumber,
-  isCompleted,
-  isCurrent,
-  isExpanded,
-  onToggle,
-  onComplete
-}) {
-  return /* @__PURE__ */ jsxDEV3("div", {
-    className: cn("rounded-xl border transition-all", isCompleted && "border-green-500/50 bg-green-500/5", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/5", !isCompleted && !isCurrent && "border-border"),
-    children: [
-      /* @__PURE__ */ jsxDEV3("button", {
-        type: "button",
-        className: "flex w-full items-center gap-4 p-4 text-left",
-        onClick: onToggle,
-        children: [
-          /* @__PURE__ */ jsxDEV3("div", {
-            className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors", isCompleted && "border-green-500 bg-green-500 text-white", isCurrent && !isCompleted && "border-violet-500 text-violet-500", !isCompleted && !isCurrent && "border-muted-foreground text-muted-foreground"),
-            children: isCompleted ? "✓" : stepNumber
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3("div", {
-            className: "min-w-0 flex-1",
-            children: [
-              /* @__PURE__ */ jsxDEV3("h4", {
-                className: cn("font-semibold", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-foreground", !isCompleted && !isCurrent && "text-muted-foreground"),
-                children: step.title
-              }, undefined, false, undefined, this),
-              !isExpanded && step.description && /* @__PURE__ */ jsxDEV3("p", {
-                className: "truncate text-muted-foreground text-sm",
-                children: step.description
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          step.xpReward && /* @__PURE__ */ jsxDEV3("span", {
-            className: cn("shrink-0 rounded-full px-2 py-1 font-semibold text-xs", isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"),
-            children: [
-              "+",
-              step.xpReward,
-              " XP"
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV3("span", {
-            className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
-            children: "▼"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      isExpanded && /* @__PURE__ */ jsxDEV3("div", {
-        className: "border-t px-4 py-4",
-        children: [
-          step.description && /* @__PURE__ */ jsxDEV3("p", {
-            className: "mb-4 text-muted-foreground",
-            children: step.description
-          }, undefined, false, undefined, this),
-          step.instructions && /* @__PURE__ */ jsxDEV3("div", {
-            className: "mb-4 rounded-lg bg-muted p-4",
-            children: [
-              /* @__PURE__ */ jsxDEV3("p", {
-                className: "mb-2 font-medium text-sm",
-                children: "Instructions:"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3("p", {
-                className: "text-muted-foreground text-sm",
-                children: step.instructions
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV3("div", {
-            className: "flex flex-wrap gap-2",
-            children: [
-              step.actionUrl && /* @__PURE__ */ jsxDEV3(Button2, {
-                variant: "outline",
-                size: "sm",
-                onClick: () => window.open(step.actionUrl, "_blank"),
-                children: step.actionLabel ?? "Try it"
-              }, undefined, false, undefined, this),
-              !isCompleted && /* @__PURE__ */ jsxDEV3(Button2, {
-                size: "sm",
-                onClick: onComplete,
-                children: "Mark as Complete"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/views/Steps.tsx
-import { Progress as Progress3 } from "@contractspec/lib.ui-kit-web/ui/progress";
-import { useState } from "react";
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
-"use client";
-function Steps({ track, progress, onStepComplete }) {
-  const [expandedStepId, setExpandedStepId] = useState(() => {
-    const firstIncomplete = track.steps.find((s) => !progress.completedStepIds.includes(s.id));
-    return firstIncomplete?.id ?? null;
-  });
-  const completedSteps = progress.completedStepIds.length;
-  const totalSteps = track.steps.length;
-  const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
-  const currentStepIndex = track.steps.findIndex((s) => !progress.completedStepIds.includes(s.id));
-  return /* @__PURE__ */ jsxDEV4("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV4("div", {
-        className: "space-y-2",
-        children: [
-          /* @__PURE__ */ jsxDEV4("div", {
-            className: "flex items-center justify-between",
-            children: [
-              /* @__PURE__ */ jsxDEV4("h2", {
-                className: "font-bold text-xl",
-                children: "Complete Each Step"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV4("span", {
-                className: "text-muted-foreground text-sm",
-                children: [
-                  completedSteps,
-                  " / ",
-                  totalSteps,
-                  " completed"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV4(Progress3, {
-            value: percentComplete,
-            className: "h-2"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4("div", {
-        className: "space-y-3",
-        children: track.steps.map((step, index) => {
-          const isCompleted = progress.completedStepIds.includes(step.id);
-          const isCurrent = index === currentStepIndex;
-          return /* @__PURE__ */ jsxDEV4(StepChecklist, {
-            step,
-            stepNumber: index + 1,
-            isCompleted,
-            isCurrent,
-            isExpanded: expandedStepId === step.id,
-            onToggle: () => setExpandedStepId(expandedStepId === step.id ? null : step.id),
-            onComplete: () => {
-              onStepComplete?.(step.id);
-              const nextStep = track.steps[index + 1];
-              if (nextStep && !progress.completedStepIds.includes(nextStep.id)) {
-                setExpandedStepId(nextStep.id);
-              }
-            }
-          }, step.id, false, undefined, this);
-        })
-      }, undefined, false, undefined, this),
-      track.completionRewards && percentComplete < 100 && /* @__PURE__ */ jsxDEV4("div", {
-        className: "rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",
-        children: /* @__PURE__ */ jsxDEV4("p", {
-          className: "text-sm",
-          children: [
-            "\uD83C\uDF81 Complete all steps to unlock:",
-            track.completionRewards.xpBonus && /* @__PURE__ */ jsxDEV4("span", {
-              className: "ml-2 font-semibold text-blue-500",
-              children: [
-                "+",
-                track.completionRewards.xpBonus,
-                " XP bonus"
-              ]
-            }, undefined, true, undefined, this),
-            track.completionRewards.badgeKey && /* @__PURE__ */ jsxDEV4("span", {
-              className: "ml-2 font-semibold text-amber-500",
-              children: [
-                '+ "',
-                track.completionRewards.badgeKey,
-                '" badge'
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/JourneyMap.tsx
-import { cn as cn2 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
-"use client";
-var SURFACE_ICONS = {
-  templates: "\uD83D\uDCCB",
-  "spec-editor": "✏️",
-  regenerator: "\uD83D\uDD04",
-  playground: "\uD83C\uDFAE",
-  evolution: "\uD83E\uDD16",
-  dashboard: "\uD83D\uDCCA",
-  settings: "⚙️",
-  default: "\uD83D\uDCCD"
-};
-function JourneyMap({
-  steps,
-  completedStepIds,
-  currentStepId
-}) {
-  return /* @__PURE__ */ jsxDEV5("div", {
-    className: "relative overflow-x-auto pb-4",
-    children: /* @__PURE__ */ jsxDEV5("div", {
-      className: "flex min-w-max items-center gap-2",
-      children: steps.map((step, index) => {
-        const isCompleted = completedStepIds.includes(step.id);
-        const isCurrent = step.id === currentStepId;
-        const surface = step.metadata?.surface ?? "default";
-        const icon = SURFACE_ICONS[surface] ?? SURFACE_ICONS.default;
-        return /* @__PURE__ */ jsxDEV5("div", {
-          className: "flex items-center",
-          children: [
-            /* @__PURE__ */ jsxDEV5("div", {
-              className: "flex flex-col items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV5("div", {
-                  className: cn2("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all", isCompleted && "border-green-500 bg-green-500/10", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20", !isCompleted && !isCurrent && "border-muted bg-muted/50"),
-                  children: isCompleted ? "✓" : icon
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("div", {
-                  className: "text-center",
-                  children: /* @__PURE__ */ jsxDEV5("p", {
-                    className: cn2("max-w-[100px] truncate font-medium text-xs", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-violet-500", !isCompleted && !isCurrent && "text-muted-foreground"),
-                    children: step.title
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            index < steps.length - 1 && /* @__PURE__ */ jsxDEV5("div", {
-              className: cn2("mx-2 h-1 w-8 rounded-full transition-colors", completedStepIds.includes(steps[index + 1]?.id ?? "") ? "bg-green-500" : isCompleted ? "bg-green-500/50" : "bg-muted")
-            }, undefined, false, undefined, this)
-          ]
-        }, step.id, true, undefined, this);
-      })
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/views/Timeline.tsx
-import {
-  Card as Card3,
-  CardContent as CardContent3,
-  CardHeader as CardHeader3,
-  CardTitle as CardTitle3
-} from "@contractspec/lib.ui-kit-web/ui/card";
-import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
-"use client";
-function Timeline({ track, progress }) {
-  const currentStepId = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.id ?? null;
-  return /* @__PURE__ */ jsxDEV6("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV6("div", {
-        className: "text-center",
-        children: [
-          /* @__PURE__ */ jsxDEV6("h2", {
-            className: "font-bold text-xl",
-            children: "Your Learning Journey"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6("p", {
-            className: "text-muted-foreground",
-            children: "Follow the path through each surface and feature"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV6(Card3, {
-        children: [
-          /* @__PURE__ */ jsxDEV6(CardHeader3, {
-            children: /* @__PURE__ */ jsxDEV6(CardTitle3, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV6("span", {
-                  children: "\uD83D\uDDFA️"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV6("span", {
-                  children: "Journey Map"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(CardContent3, {
-            children: /* @__PURE__ */ jsxDEV6(JourneyMap, {
-              steps: track.steps,
-              completedStepIds: progress.completedStepIds,
-              currentStepId
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV6(Card3, {
-        children: [
-          /* @__PURE__ */ jsxDEV6(CardHeader3, {
-            children: /* @__PURE__ */ jsxDEV6(CardTitle3, {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV6("span", {
-                  children: "\uD83D\uDCCD"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV6("span", {
-                  children: "Step by Step"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(CardContent3, {
-            children: /* @__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-6",
-                  children: track.steps.map((step, index) => {
-                    const isCompleted = progress.completedStepIds.includes(step.id);
-                    const isCurrent = step.id === currentStepId;
-                    const surface = step.metadata?.surface ?? "general";
-                    return /* @__PURE__ */ jsxDEV6("div", {
-                      className: "relative flex gap-4 pl-2",
-                      children: [
-                        /* @__PURE__ */ jsxDEV6("div", {
-                          className: `relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${isCompleted ? "border-green-500 bg-green-500 text-white" : isCurrent ? "border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20" : "border-border bg-background text-muted-foreground"}`,
-                          children: isCompleted ? "✓" : index + 1
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV6("div", {
-                          className: "flex-1 pb-2",
-                          children: /* @__PURE__ */ jsxDEV6("div", {
-                            className: "rounded-lg border p-4",
-                            children: [
-                              /* @__PURE__ */ jsxDEV6("div", {
-                                className: "flex items-start justify-between gap-2",
-                                children: [
-                                  /* @__PURE__ */ jsxDEV6("div", {
-                                    children: [
-                                      /* @__PURE__ */ jsxDEV6("div", {
-                                        className: "flex items-center gap-2",
-                                        children: [
-                                          /* @__PURE__ */ jsxDEV6("h4", {
-                                            className: `font-semibold ${isCompleted ? "text-green-500" : isCurrent ? "text-blue-500" : "text-foreground"}`,
-                                            children: step.title
-                                          }, undefined, false, undefined, this),
-                                          /* @__PURE__ */ jsxDEV6("span", {
-                                            className: "rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",
-                                            children: surface
-                                          }, undefined, false, undefined, this)
-                                        ]
-                                      }, undefined, true, undefined, this),
-                                      /* @__PURE__ */ jsxDEV6("p", {
-                                        className: "mt-1 text-muted-foreground text-sm",
-                                        children: step.description
-                                      }, undefined, false, undefined, this)
-                                    ]
-                                  }, undefined, true, undefined, this),
-                                  step.xpReward && /* @__PURE__ */ jsxDEV6("span", {
-                                    className: `shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"}`,
-                                    children: [
-                                      "+",
-                                      step.xpReward,
-                                      " XP"
-                                    ]
-                                  }, undefined, true, undefined, this)
-                                ]
-                              }, undefined, true, undefined, this),
-                              /* @__PURE__ */ jsxDEV6("div", {
-                                className: "mt-3 text-xs",
-                                children: isCompleted ? /* @__PURE__ */ jsxDEV6("span", {
-                                  className: "text-green-500",
-                                  children: "✓ Completed"
-                                }, undefined, false, undefined, this) : isCurrent ? /* @__PURE__ */ jsxDEV6("span", {
-                                  className: "text-blue-500",
-                                  children: "→ In Progress"
-                                }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV6("span", {
-                                  className: "text-muted-foreground",
-                                  children: "○ Not Started"
-                                }, undefined, false, undefined, this)
-                              }, undefined, false, undefined, this)
-                            ]
-                          }, undefined, true, undefined, this)
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, step.id, true, undefined, this);
-                  })
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/OnboardingMiniApp.tsx
-import {
-  useLearningProgress,
-  ViewTabs
-} from "@contractspec/example.learning-journey-ui-shared";
-import { Card as Card4, CardContent as CardContent4 } from "@contractspec/lib.ui-kit-web/ui/card";
-import { useCallback, useState as useState2 } from "react";
-import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
-"use client";
-function OnboardingMiniApp({
-  track,
-  progress: externalProgress,
-  onStepComplete: externalOnStepComplete,
-  onViewChange,
-  initialView = "overview"
-}) {
-  const [currentView, setCurrentView] = useState2(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__ */ jsxDEV7(Overview, {
-          ...viewProps,
-          onStart: handleStartFromOverview
-        }, undefined, false, undefined, this);
-      case "steps":
-        return /* @__PURE__ */ jsxDEV7(Steps, {
-          ...viewProps
-        }, undefined, false, undefined, this);
-      case "progress":
-        return /* @__PURE__ */ jsxDEV7(ProgressView, {
-          ...viewProps
-        }, undefined, false, undefined, this);
-      case "timeline":
-        return /* @__PURE__ */ jsxDEV7(Timeline, {
-          ...viewProps
-        }, undefined, false, undefined, this);
-      default:
-        return /* @__PURE__ */ jsxDEV7(Overview, {
-          ...viewProps,
-          onStart: handleStartFromOverview
-        }, undefined, false, undefined, this);
-    }
-  };
-  return /* @__PURE__ */ jsxDEV7("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV7(Card4, {
-        children: /* @__PURE__ */ jsxDEV7(CardContent4, {
-          className: "p-4",
-          children: /* @__PURE__ */ jsxDEV7(ViewTabs, {
-            currentView,
-            onViewChange: handleViewChange
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      renderView()
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/CodeSnippet.tsx
-import { Button as Button3 } from "@contractspec/lib.design-system";
-import { useState as useState3 } from "react";
-import { jsxDEV as jsxDEV8, Fragment } from "react/jsx-dev-runtime";
-"use client";
-function CodeSnippet({
-  code,
-  language = "typescript",
-  title
-}) {
-  const [copied, setCopied] = useState3(false);
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-  return /* @__PURE__ */ jsxDEV8("div", {
-    className: "overflow-hidden rounded-lg border bg-muted/50",
-    children: [
-      /* @__PURE__ */ jsxDEV8("div", {
-        className: "flex items-center justify-between border-b bg-muted px-4 py-2",
-        children: [
-          /* @__PURE__ */ jsxDEV8("div", {
-            className: "flex items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsxDEV8("span", {
-                className: "font-medium text-muted-foreground text-xs uppercase",
-                children: language
-              }, undefined, false, undefined, this),
-              title && /* @__PURE__ */ jsxDEV8(Fragment, {
-                children: [
-                  /* @__PURE__ */ jsxDEV8("span", {
-                    className: "text-muted-foreground",
-                    children: "•"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV8("span", {
-                    className: "text-sm",
-                    children: title
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV8(Button3, {
-            variant: "ghost",
-            size: "sm",
-            onClick: handleCopy,
-            className: "h-7 text-xs",
-            children: copied ? "✓ Copied" : "Copy"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV8("pre", {
-        className: "overflow-x-auto p-4",
-        children: /* @__PURE__ */ jsxDEV8("code", {
-          className: "text-sm",
-          children: code
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-// src/docs/learning-journey-ui-onboarding.docblock.ts
-import { registerDocBlocks } from "@contractspec/lib.contracts-spec/docs";
-var blocks = [
-  {
-    id: "docs.examples.learning-journey-ui-onboarding",
-    title: "Learning Journey UI — Onboarding",
-    summary: "UI mini-app components for onboarding: checklists, snippets, and journey mapping.",
-    kind: "reference",
-    visibility: "public",
-    route: "/docs/examples/learning-journey-ui-onboarding",
-    tags: ["learning", "ui", "onboarding"],
-    body: `## Includes
+import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as E,CardHeader as O,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as K}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,q=y.completedStepIds.length,v=N>0?q/N*100:0,h=q===N,U=N-q,R=U*5,Q=f.totalXp??f.steps.reduce((G,Z)=>G+(Z.xpReward??0),0)+(f.completionRewards?.xpBonus??0);return K("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(E,{className:"p-8",children:K("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("div",{className:"flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg",children:h?"\uD83C\uDF89":"\uD83D\uDE80"}),K("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!h&&K("p",{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",R>0?`~${R} minutes`:"Less than a minute"]})]}),!h&&z(Nf,{size:"lg",onClick:b,children:q>0?"Continue":"Get Started"})]})})}),K("div",{className:"grid gap-4 md:grid-cols-3",children:[K(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),K(E,{children:[K("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),K("p",{className:"mt-2 text-muted-foreground text-sm",children:[q," of ",N," steps completed"]})]})]}),K(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),K(E,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:Q,showLabel:!1,size:"sm"})]})]}),K(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),K(E,{children:[z("div",{className:"font-bold text-3xl",children:h?"✓":`~${R}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:h?"All done!":`${U} steps to go`})]})]})]}),K(M,{children:[z(O,{children:K(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(E,{children:z("div",{className:"space-y-3",children:f.steps.map((G,Z)=>{let $=y.completedStepIds.includes(G.id),D=!$&&f.steps.slice(0,Z).every((W)=>y.completedStepIds.includes(W.id));return K("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${$?"bg-green-500 text-white":D?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:$?"✓":Z+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${$?"text-green-500":D?"text-foreground":"text-muted-foreground"}`,children:G.title})}),G.xpReward&&K("span",{className:"text-muted-foreground text-sm",children:["+",G.xpReward," XP"]})]},G.id)})})})]}),h&&z(M,{className:"border-green-500/50 bg-green-500/5",children:K(E,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),K("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),K("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as L,jsxs as J}from"react/jsx-runtime";function l({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,q=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((R,Q)=>R+(Q.xpReward??0),0)+(f.completionRewards?.xpBonus??0),h=b-N,U=h*5;return J("div",{className:"space-y-6",children:[J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"\uD83D\uDCC8"}),L("span",{children:"Your Progress"})]})}),J(w,{className:"space-y-6",children:[L("div",{className:"flex items-center justify-center",children:J("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[J("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[L("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),L("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${q*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),J("div",{className:"text-center",children:[J("div",{className:"font-bold text-3xl",children:[Math.round(q),"%"]}),L("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),J("div",{className:"grid grid-cols-3 gap-4 text-center",children:[J("div",{children:[L("div",{className:"font-bold text-2xl text-green-500",children:N}),L("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),J("div",{children:[L("div",{className:"font-bold text-2xl text-orange-500",children:h}),L("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),J("div",{children:[J("div",{className:"font-bold text-2xl",children:[U,"m"]}),L("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"⚡"}),L("span",{children:"Experience Points"})]})}),J(w,{className:"space-y-4",children:[J("div",{className:"flex items-baseline gap-2",children:[L("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),J("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),L(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"\uD83C\uDFC5"}),L("span",{children:"Achievements"})]})}),J(w,{children:[L(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&J("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),J(I,{children:[L(g,{children:J(o,{className:"flex items-center gap-2",children:[L("span",{children:"\uD83D\uDCCB"}),L("span",{children:"Step Details"})]})}),L(w,{children:L("div",{className:"space-y-3",children:f.steps.map((R,Q)=>{let G=y.completedStepIds.includes(R.id),Z=G?100:0;return J("div",{className:"space-y-1",children:[J("div",{className:"flex items-center justify-between text-sm",children:[J("span",{className:G?"text-green-500":"text-foreground",children:[Q+1,". ",R.title]}),L("span",{className:G?"text-green-500":"text-muted-foreground",children:G?"✓":"Pending"})]}),L(zf,{value:Z,className:"h-1"})]},R.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as _,jsxs as A}from"react/jsx-runtime";function S({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:q,onToggle:v,onComplete:h}){return A("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[A("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[_("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"✓":y}),A("div",{className:"min-w-0 flex-1",children:[_("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!q&&f.description&&_("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&A("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),_("span",{className:P("shrink-0 transition-transform",q&&"rotate-180"),children:"▼"})]}),q&&A("div",{className:"border-t px-4 py-4",children:[f.description&&_("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&A("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[_("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),_("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),A("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&_(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&_(C,{size:"sm",onClick:h,children:"Mark as Complete"})]})]})]})}import{Progress as Lf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as hf}from"react";import{jsx as m,jsxs as X}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,q]=hf(()=>{return f.steps.find((G)=>!y.completedStepIds.includes(G.id))?.id??null}),v=y.completedStepIds.length,h=f.steps.length,U=h>0?v/h*100:0,R=f.steps.findIndex((Q)=>!y.completedStepIds.includes(Q.id));return X("div",{className:"space-y-6",children:[X("div",{className:"space-y-2",children:[X("div",{className:"flex items-center justify-between",children:[m("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),X("span",{className:"text-muted-foreground text-sm",children:[v," / ",h," completed"]})]}),m(Lf,{value:U,className:"h-2"})]}),m("div",{className:"space-y-3",children:f.steps.map((Q,G)=>{let Z=y.completedStepIds.includes(Q.id),$=G===R;return m(S,{step:Q,stepNumber:G+1,isCompleted:Z,isCurrent:$,isExpanded:N===Q.id,onToggle:()=>q(N===Q.id?null:Q.id),onComplete:()=>{b?.(Q.id);let D=f.steps[G+1];if(D&&!y.completedStepIds.includes(D.id))q(D.id)}},Q.id)})}),f.completionRewards&&U<100&&m("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:X("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xpBonus&&X("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xpBonus," XP bonus"]}),f.completionRewards.badgeKey&&X("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as F,jsxs as p}from"react/jsx-runtime";var x={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function n({steps:f,completedStepIds:y,currentStepId:b}){return F("div",{className:"relative overflow-x-auto pb-4",children:F("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,q)=>{let v=y.includes(N.id),h=N.id===b,U=N.metadata?.surface??"default",R=x[U]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[F("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",h&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!h&&"border-muted bg-muted/50"),children:v?"✓":R}),F("div",{className:"text-center",children:F("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",h&&!v&&"text-violet-500",!v&&!h&&"text-muted-foreground"),children:N.title})})]}),q<f.length-1&&F("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[q+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as B,jsxs as Y}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return Y("div",{className:"space-y-6",children:[Y("div",{className:"text-center",children:[B("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),B("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),Y(j,{children:[B(t,{children:Y(e,{className:"flex items-center gap-2",children:[B("span",{children:"\uD83D\uDDFA️"}),B("span",{children:"Journey Map"})]})}),B(r,{children:B(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),Y(j,{children:[B(t,{children:Y(e,{className:"flex items-center gap-2",children:[B("span",{children:"\uD83D\uDCCD"}),B("span",{children:"Step by Step"})]})}),B(r,{children:Y("div",{className:"relative",children:[B("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),B("div",{className:"space-y-6",children:f.steps.map((N,q)=>{let v=y.completedStepIds.includes(N.id),h=N.id===b,U=N.metadata?.surface??"general";return Y("div",{className:"relative flex gap-4 pl-2",children:[B("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":h?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"✓":q+1}),B("div",{className:"flex-1 pb-2",children:Y("div",{className:"rounded-lg border p-4",children:[Y("div",{className:"flex items-start justify-between gap-2",children:[Y("div",{children:[Y("div",{className:"flex items-center gap-2",children:[B("h4",{className:`font-semibold ${v?"text-green-500":h?"text-blue-500":"text-foreground"}`,children:N.title}),B("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:U})]}),B("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&Y("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),B("div",{className:"mt-3 text-xs",children:v?B("span",{className:"text-green-500",children:"✓ Completed"}):h?B("span",{className:"text-blue-500",children:"→ In Progress"}):B("span",{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as Jf,ViewTabs as qf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Bf,CardContent as Gf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Kf}from"react";import{jsx as u,jsxs as Rf}from"react/jsx-runtime";function Qf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:q="overview"}){let[v,h]=Kf(q),{progress:U,completeStep:R}=Jf(f),Q=y??U,G=a((W)=>{h(W),N?.(W)},[N]),Z=a((W)=>{if(b)b(W);else R(W)},[b,R]),$=a(()=>{h("steps"),N?.("steps")},[N]);return Rf("div",{className:"space-y-6",children:[u(Bf,{children:u(Gf,{className:"p-4",children:u(qf,{currentView:v,onViewChange:G})})}),(()=>{let W={track:f,progress:Q,onStepComplete:Z};switch(v){case"overview":return u(H,{...W,onStart:$});case"steps":return u(k,{...W});case"progress":return u(l,{...W});case"timeline":return u(d,{...W});default:return u(H,{...W,onStart:$})}})()]})}import{Button as Uf}from"@contractspec/lib.design-system";import{useState as Wf}from"react";import{jsx as T,jsxs as c,Fragment as Yf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,q]=Wf(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[T("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Yf,{children:[T("span",{className:"text-muted-foreground",children:"•"}),T("span",{className:"text-sm",children:b})]})]}),T(Uf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),q(!0),setTimeout(()=>q(!1),2000)},className:"h-7 text-xs",children:N?"✓ Copied":"Copy"})]}),T("pre",{className:"overflow-x-auto p-4",children:T("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as Zf}from"@contractspec/lib.contracts-spec/docs";var $f=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI — Onboarding",summary:"UI mini-app components for onboarding: checklists, snippets, and journey mapping.",kind:"reference",visibility:"public",route:"/docs/examples/learning-journey-ui-onboarding",tags:["learning","ui","onboarding"],body:`## Includes
 - Onboarding mini-app shell
 - Views: overview, steps, progress, timeline
 - Components: step checklist, code snippet, journey map
 
 ## Notes
 - Compose with design system components.
-- Ensure accessible labels and keyboard navigation.`
-  }
-];
-registerDocBlocks(blocks);
-// src/example.ts
-import { defineExample } from "@contractspec/lib.contracts-spec";
-var example = defineExample({
-  meta: {
-    key: "learning-journey-ui-onboarding",
-    version: "1.0.0",
-    title: "Learning Journey UI — Onboarding",
-    description: "UI mini-app for onboarding patterns: checklists, code snippets, journey map.",
-    kind: "ui",
-    visibility: "public",
-    stability: "experimental",
-    owners: ["@platform.core"],
-    tags: ["learning", "ui", "onboarding"]
-  },
-  docs: {
-    rootDocId: "docs.examples.learning-journey-ui-onboarding"
-  },
-  entrypoints: {
-    packageName: "@contractspec/example.learning-journey-ui-onboarding",
-    docs: "./docs"
-  },
-  surfaces: {
-    templates: true,
-    sandbox: { enabled: true, modes: ["playground", "markdown"] },
-    studio: { enabled: true, installable: true },
-    mcp: { enabled: true }
-  }
-});
-var example_default = example;
-
-// src/learning-journey-ui-onboarding.feature.ts
-import { defineFeature } from "@contractspec/lib.contracts-spec";
-var LearningJourneyUiOnboardingFeature = defineFeature({
-  meta: {
-    key: "learning-journey-ui-onboarding",
-    version: "1.0.0",
-    title: "Learning Journey UI: Onboarding",
-    description: "Developer onboarding UI with checklists, journey maps, and step-by-step progress",
-    domain: "learning-journey",
-    owners: ["@examples"],
-    tags: ["learning", "ui", "onboarding", "checklists"],
-    stability: "experimental"
-  },
-  docs: ["docs.examples.learning-journey-ui-onboarding"]
-});
-export {
-  example_default as example,
-  Timeline,
-  Steps,
-  StepChecklist,
-  ProgressView as Progress,
-  Overview,
-  OnboardingMiniApp,
-  LearningJourneyUiOnboardingFeature,
-  JourneyMap,
-  CodeSnippet
-};
+- Ensure accessible labels and keyboard navigation.`}];Zf($f);import{defineExample as _f}from"@contractspec/lib.contracts-spec";var uf=_f({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI — Onboarding",description:"UI mini-app for onboarding patterns: checklists, code snippets, journey map.",kind:"ui",visibility:"public",stability:"experimental",owners:["@platform.core"],tags:["learning","ui","onboarding"]},docs:{rootDocId:"docs.examples.learning-journey-ui-onboarding"},entrypoints:{packageName:"@contractspec/example.learning-journey-ui-onboarding",docs:"./docs"},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","markdown"]},studio:{enabled:!0,installable:!0},mcp:{enabled:!0}}}),Df=uf;import{defineFeature as Af}from"@contractspec/lib.contracts-spec";var _0=Af({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI: Onboarding",description:"Developer onboarding UI with checklists, journey maps, and step-by-step progress",domain:"learning-journey",owners:["@examples"],tags:["learning","ui","onboarding","checklists"],stability:"experimental"},docs:["docs.examples.learning-journey-ui-onboarding"]});export{Df as example,d as Timeline,k as Steps,S as StepChecklist,l as Progress,H as Overview,Qf as OnboardingMiniApp,_0 as LearningJourneyUiOnboardingFeature,n as JourneyMap,s as CodeSnippet};