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

package/dist/browser/views/Steps.js

@@ -1,192 +1 @@
-// src/components/StepChecklist.tsx
-import { Button } from "@contractspec/lib.design-system";
-import { cn } from "@contractspec/lib.ui-kit-core";
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-function StepChecklist({
-  step,
-  stepNumber,
-  isCompleted,
-  isCurrent,
-  isExpanded,
-  onToggle,
-  onComplete
-}) {
-  return /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("button", {
-        type: "button",
-        className: "flex w-full items-center gap-4 p-4 text-left",
-        onClick: onToggle,
-        children: [
-          /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
-            className: "min-w-0 flex-1",
-            children: [
-              /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("p", {
-                className: "truncate text-muted-foreground text-sm",
-                children: step.description
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          step.xpReward && /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("span", {
-            className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
-            children: "▼"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      isExpanded && /* @__PURE__ */ jsxDEV("div", {
-        className: "border-t px-4 py-4",
-        children: [
-          step.description && /* @__PURE__ */ jsxDEV("p", {
-            className: "mb-4 text-muted-foreground",
-            children: step.description
-          }, undefined, false, undefined, this),
-          step.instructions && /* @__PURE__ */ jsxDEV("div", {
-            className: "mb-4 rounded-lg bg-muted p-4",
-            children: [
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "mb-2 font-medium text-sm",
-                children: "Instructions:"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground text-sm",
-                children: step.instructions
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex flex-wrap gap-2",
-            children: [
-              step.actionUrl && /* @__PURE__ */ jsxDEV(Button, {
-                variant: "outline",
-                size: "sm",
-                onClick: () => window.open(step.actionUrl, "_blank"),
-                children: step.actionLabel ?? "Try it"
-              }, undefined, false, undefined, this),
-              !isCompleted && /* @__PURE__ */ jsxDEV(Button, {
-                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 } from "@contractspec/lib.ui-kit-web/ui/progress";
-import { useState } from "react";
-import { jsxDEV as jsxDEV2 } 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__ */ jsxDEV2("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV2("div", {
-        className: "space-y-2",
-        children: [
-          /* @__PURE__ */ jsxDEV2("div", {
-            className: "flex items-center justify-between",
-            children: [
-              /* @__PURE__ */ jsxDEV2("h2", {
-                className: "font-bold text-xl",
-                children: "Complete Each Step"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("span", {
-                className: "text-muted-foreground text-sm",
-                children: [
-                  completedSteps,
-                  " / ",
-                  totalSteps,
-                  " completed"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV2(Progress, {
-            value: percentComplete,
-            className: "h-2"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV2("div", {
-        className: "space-y-3",
-        children: track.steps.map((step, index) => {
-          const isCompleted = progress.completedStepIds.includes(step.id);
-          const isCurrent = index === currentStepIndex;
-          return /* @__PURE__ */ jsxDEV2(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__ */ jsxDEV2("div", {
-        className: "rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",
-        children: /* @__PURE__ */ jsxDEV2("p", {
-          className: "text-sm",
-          children: [
-            "\uD83C\uDF81 Complete all steps to unlock:",
-            track.completionRewards.xpBonus && /* @__PURE__ */ jsxDEV2("span", {
-              className: "ml-2 font-semibold text-blue-500",
-              children: [
-                "+",
-                track.completionRewards.xpBonus,
-                " XP bonus"
-              ]
-            }, undefined, true, undefined, this),
-            track.completionRewards.badgeKey && /* @__PURE__ */ jsxDEV2("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);
-}
-export {
-  Steps
-};
+import{Button as c}from"@contractspec/lib.design-system";import{cn as e}from"@contractspec/lib.ui-kit-core";import{jsx as u,jsxs as m}from"react/jsx-runtime";function y({step:n,stepNumber:r,isCompleted:o,isCurrent:l,isExpanded:a,onToggle:g,onComplete:f}){return m("div",{className:e("rounded-xl border transition-all",o&&"border-green-500/50 bg-green-500/5",l&&!o&&"border-violet-500 bg-violet-500/5",!o&&!l&&"border-border"),children:[m("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:g,children:[u("div",{className:e("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",o&&"border-green-500 bg-green-500 text-white",l&&!o&&"border-violet-500 text-violet-500",!o&&!l&&"border-muted-foreground text-muted-foreground"),children:o?"✓":r}),m("div",{className:"min-w-0 flex-1",children:[u("h4",{className:e("font-semibold",o&&"text-green-500",l&&!o&&"text-foreground",!o&&!l&&"text-muted-foreground"),children:n.title}),!a&&n.description&&u("p",{className:"truncate text-muted-foreground text-sm",children:n.description})]}),n.xpReward&&m("span",{className:e("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",o?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",n.xpReward," XP"]}),u("span",{className:e("shrink-0 transition-transform",a&&"rotate-180"),children:"▼"})]}),a&&m("div",{className:"border-t px-4 py-4",children:[n.description&&u("p",{className:"mb-4 text-muted-foreground",children:n.description}),n.instructions&&m("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[u("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),u("p",{className:"text-muted-foreground text-sm",children:n.instructions})]}),m("div",{className:"flex flex-wrap gap-2",children:[n.actionUrl&&u(c,{variant:"outline",size:"sm",onClick:()=>window.open(n.actionUrl,"_blank"),children:n.actionLabel??"Try it"}),!o&&u(c,{size:"sm",onClick:f,children:"Mark as Complete"})]})]})]})}import{Progress as L}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as z}from"react";import{jsx as v,jsxs as b}from"react/jsx-runtime";function _({track:n,progress:r,onStepComplete:o}){let[l,a]=z(()=>{return n.steps.find((d)=>!r.completedStepIds.includes(d.id))?.id??null}),g=r.completedStepIds.length,f=n.steps.length,N=f>0?g/f*100:0,h=n.steps.findIndex((i)=>!r.completedStepIds.includes(i.id));return b("div",{className:"space-y-6",children:[b("div",{className:"space-y-2",children:[b("div",{className:"flex items-center justify-between",children:[v("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),b("span",{className:"text-muted-foreground text-sm",children:[g," / ",f," completed"]})]}),v(L,{value:N,className:"h-2"})]}),v("div",{className:"space-y-3",children:n.steps.map((i,d)=>{let w=r.completedStepIds.includes(i.id),B=d===h;return v(y,{step:i,stepNumber:d+1,isCompleted:w,isCurrent:B,isExpanded:l===i.id,onToggle:()=>a(l===i.id?null:i.id),onComplete:()=>{o?.(i.id);let t=n.steps[d+1];if(t&&!r.completedStepIds.includes(t.id))a(t.id)}},i.id)})}),n.completionRewards&&N<100&&v("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:b("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",n.completionRewards.xpBonus&&b("span",{className:"ml-2 font-semibold text-blue-500",children:["+",n.completionRewards.xpBonus," XP bonus"]}),n.completionRewards.badgeKey&&b("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',n.completionRewards.badgeKey,'" badge']})]})})]})}export{_ as Steps};

package/dist/browser/views/Timeline.js

@@ -1,213 +1 @@
-// src/components/JourneyMap.tsx
-import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { jsxDEV } 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__ */ jsxDEV("div", {
-    className: "relative overflow-x-auto pb-4",
-    children: /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("div", {
-          className: "flex items-center",
-          children: [
-            /* @__PURE__ */ jsxDEV("div", {
-              className: "flex flex-col items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsxDEV("div", {
-                  className: cn("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__ */ jsxDEV("div", {
-                  className: "text-center",
-                  children: /* @__PURE__ */ jsxDEV("p", {
-                    className: cn("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__ */ jsxDEV("div", {
-              className: cn("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,
-  CardContent,
-  CardHeader,
-  CardTitle
-} from "@contractspec/lib.ui-kit-web/ui/card";
-import { jsxDEV as jsxDEV2 } 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__ */ jsxDEV2("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV2("div", {
-        className: "text-center",
-        children: [
-          /* @__PURE__ */ jsxDEV2("h2", {
-            className: "font-bold text-xl",
-            children: "Your Learning Journey"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2("p", {
-            className: "text-muted-foreground",
-            children: "Follow the path through each surface and feature"
-          }, undefined, false, 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\uDDFA️"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "Journey Map"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(CardContent, {
-            children: /* @__PURE__ */ jsxDEV2(JourneyMap, {
-              steps: track.steps,
-              completedStepIds: progress.completedStepIds,
-              currentStepId
-            }, undefined, false, undefined, this)
-          }, undefined, false, 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\uDCCD"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("span", {
-                  children: "Step by Step"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(CardContent, {
-            children: /* @__PURE__ */ jsxDEV2("div", {
-              className: "relative",
-              children: [
-                /* @__PURE__ */ jsxDEV2("div", {
-                  className: "absolute top-0 left-4 h-full w-0.5 bg-border"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2("div", {
-                      className: "relative flex gap-4 pl-2",
-                      children: [
-                        /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2("div", {
-                          className: "flex-1 pb-2",
-                          children: /* @__PURE__ */ jsxDEV2("div", {
-                            className: "rounded-lg border p-4",
-                            children: [
-                              /* @__PURE__ */ jsxDEV2("div", {
-                                className: "flex items-start justify-between gap-2",
-                                children: [
-                                  /* @__PURE__ */ jsxDEV2("div", {
-                                    children: [
-                                      /* @__PURE__ */ jsxDEV2("div", {
-                                        className: "flex items-center gap-2",
-                                        children: [
-                                          /* @__PURE__ */ jsxDEV2("h4", {
-                                            className: `font-semibold ${isCompleted ? "text-green-500" : isCurrent ? "text-blue-500" : "text-foreground"}`,
-                                            children: step.title
-                                          }, undefined, false, undefined, this),
-                                          /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2("p", {
-                                        className: "mt-1 text-muted-foreground text-sm",
-                                        children: step.description
-                                      }, undefined, false, undefined, this)
-                                    ]
-                                  }, undefined, true, undefined, this),
-                                  step.xpReward && /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2("div", {
-                                className: "mt-3 text-xs",
-                                children: isCompleted ? /* @__PURE__ */ jsxDEV2("span", {
-                                  className: "text-green-500",
-                                  children: "✓ Completed"
-                                }, undefined, false, undefined, this) : isCurrent ? /* @__PURE__ */ jsxDEV2("span", {
-                                  className: "text-blue-500",
-                                  children: "→ In Progress"
-                                }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("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);
-}
-export {
-  Timeline
-};
+import{cn as V}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as K,jsxs as X}from"react/jsx-runtime";var W={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function Y({steps:D,completedStepIds:G,currentStepId:L}){return K("div",{className:"relative overflow-x-auto pb-4",children:K("div",{className:"flex min-w-max items-center gap-2",children:D.map((q,P)=>{let v=G.includes(q.id),B=q.id===L,Q=q.metadata?.surface??"default",y=W[Q]??W.default;return X("div",{className:"flex items-center",children:[X("div",{className:"flex flex-col items-center gap-2",children:[K("div",{className:V("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",B&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!B&&"border-muted bg-muted/50"),children:v?"✓":y}),K("div",{className:"text-center",children:K("p",{className:V("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",B&&!v&&"text-violet-500",!v&&!B&&"text-muted-foreground"),children:q.title})})]}),P<D.length-1&&K("div",{className:V("mx-2 h-1 w-8 rounded-full transition-colors",G.includes(D[P+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},q.id)})})})}import{Card as Z,CardContent as $,CardHeader as f,CardTitle as w}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as h,jsxs as z}from"react/jsx-runtime";function M({track:D,progress:G}){let L=D.steps.find((q)=>!G.completedStepIds.includes(q.id))?.id??null;return z("div",{className:"space-y-6",children:[z("div",{className:"text-center",children:[h("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),h("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),z(Z,{children:[h(f,{children:z(w,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDDFA️"}),h("span",{children:"Journey Map"})]})}),h($,{children:h(Y,{steps:D.steps,completedStepIds:G.completedStepIds,currentStepId:L})})]}),z(Z,{children:[h(f,{children:z(w,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCD"}),h("span",{children:"Step by Step"})]})}),h($,{children:z("div",{className:"relative",children:[h("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),h("div",{className:"space-y-6",children:D.steps.map((q,P)=>{let v=G.completedStepIds.includes(q.id),B=q.id===L,Q=q.metadata?.surface??"general";return z("div",{className:"relative flex gap-4 pl-2",children:[h("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":B?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"✓":P+1}),h("div",{className:"flex-1 pb-2",children:z("div",{className:"rounded-lg border p-4",children:[z("div",{className:"flex items-start justify-between gap-2",children:[z("div",{children:[z("div",{className:"flex items-center gap-2",children:[h("h4",{className:`font-semibold ${v?"text-green-500":B?"text-blue-500":"text-foreground"}`,children:q.title}),h("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:Q})]}),h("p",{className:"mt-1 text-muted-foreground text-sm",children:q.description})]}),q.xpReward&&z("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:["+",q.xpReward," XP"]})]}),h("div",{className:"mt-3 text-xs",children:v?h("span",{className:"text-green-500",children:"✓ Completed"}):B?h("span",{className:"text-blue-500",children:"→ In Progress"}):h("span",{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},q.id)})})]})})]})]})}export{M as Timeline};