@lssm/example.learning-journey-ui-onboarding 1.43.4 → 6.0.2

package/dist/views/Steps.js

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

package/dist/views/Timeline.d.ts

@@ -1,11 +1,2 @@
-import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
-
-//#region src/views/Timeline.d.ts
-declare function Timeline({
-  track,
-  progress
-}: LearningViewProps): react_jsx_runtime6.JSX.Element;
-//#endregion
-export { Timeline };
-//# sourceMappingURL=Timeline.d.ts.map
+import type { LearningViewProps } from '@lssm/example.learning-journey-ui-shared';
+export declare function Timeline({ track, progress }: LearningViewProps): import("react").JSX.Element;

package/dist/views/Timeline.js

@@ -1,98 +1,3 @@
 'use client';
-
-import { JourneyMap } from "../components/JourneyMap.js";
-import { Card, CardContent, CardHeader, CardTitle } from "@lssm/lib.ui-kit-web/ui/card";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/views/Timeline.tsx
-function Timeline({ track, progress }) {
-	const currentStepId = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.id ?? null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-6",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "text-center",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-bold",
-					children: "Your Learning Journey"
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground",
-					children: "Follow the path through each surface and feature"
-				})]
-			}),
-			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", { children: "🗺️" }), /* @__PURE__ */ jsx("span", { children: "Journey Map" })]
-			}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(JourneyMap, {
-				steps: track.steps,
-				completedStepIds: progress.completedStepIds,
-				currentStepId
-			}) })] }),
-			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", { children: "📍" }), /* @__PURE__ */ jsx("span", { children: "Step by Step" })]
-			}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", {
-				className: "relative",
-				children: [/* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 left-4 h-full w-0.5" }), /* @__PURE__ */ jsx("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__ */ jsxs("div", {
-							className: "relative flex gap-4 pl-2",
-							children: [/* @__PURE__ */ jsx("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
-							}), /* @__PURE__ */ jsx("div", {
-								className: "flex-1 pb-2",
-								children: /* @__PURE__ */ jsxs("div", {
-									className: "rounded-lg border p-4",
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "flex items-start justify-between gap-2",
-										children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ jsx("h4", {
-												className: `font-semibold ${isCompleted ? "text-green-500" : isCurrent ? "text-blue-500" : "text-foreground"}`,
-												children: step.title
-											}), /* @__PURE__ */ jsx("span", {
-												className: "bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs",
-												children: surface
-											})]
-										}), /* @__PURE__ */ jsx("p", {
-											className: "text-muted-foreground mt-1 text-sm",
-											children: step.description
-										})] }), step.xpReward && /* @__PURE__ */ jsxs("span", {
-											className: `shrink-0 rounded-full px-2 py-1 text-xs font-semibold ${isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"}`,
-											children: [
-												"+",
-												step.xpReward,
-												" XP"
-											]
-										})]
-									}), /* @__PURE__ */ jsx("div", {
-										className: "mt-3 text-xs",
-										children: isCompleted ? /* @__PURE__ */ jsx("span", {
-											className: "text-green-500",
-											children: "✓ Completed"
-										}) : isCurrent ? /* @__PURE__ */ jsx("span", {
-											className: "text-blue-500",
-											children: "→ In Progress"
-										}) : /* @__PURE__ */ jsx("span", {
-											className: "text-muted-foreground",
-											children: "○ Not Started"
-										})
-									})]
-								})
-							})]
-						}, step.id);
-					})
-				})]
-			}) })] })
-		]
-	});
-}
-
-//#endregion
-export { Timeline };
-//# sourceMappingURL=Timeline.js.map
+// @bun
+import{Box as o}from"@lssm/lib.design-system/layout";import{H2 as P,H4 as v,P as N,Text as s}from"@lssm/lib.design-system/typography";import{Card as y,CardContent as C,CardHeader as B,CardTitle as h}from"@lssm/lib.ui-kit-web/ui/card";import{Box as d}from"@lssm/lib.design-system/layout";import{P as S,Text as w}from"@lssm/lib.design-system/typography";import{cn as p}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as m,jsxs as f}from"react/jsx-runtime";var g={templates:"\uD83D\uDCCB","spec-editor":"\u270F\uFE0F",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"\u2699\uFE0F",default:"\uD83D\uDCCD"};function b({steps:l,completedStepIds:i,currentStepId:c}){return m(d,{className:"relative overflow-x-auto pb-4",children:m(d,{className:"flex min-w-max items-center gap-2",children:l.map((t,x)=>{let r=i.includes(t.id),n=t.id===c,u=t.metadata?.surface??"default",T=g[u]??g.default;return f(d,{className:"flex items-center",children:[f(d,{className:"flex flex-col items-center gap-2",children:[m(d,{className:p("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",r&&"border-green-500 bg-green-500/10",n&&!r&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!r&&!n&&"border-muted bg-muted/50"),children:m(w,{children:r?"\u2713":T})}),m(d,{className:"text-center",children:m(S,{className:p("max-w-[100px] truncate font-medium text-xs",r&&"text-green-500",n&&!r&&"text-violet-500",!r&&!n&&"text-muted-foreground"),children:t.title})})]}),x<l.length-1&&m(d,{className:p("mx-2 h-1 w-8 rounded-full transition-colors",i.includes(l[x+1]?.id??"")?"bg-green-500":r?"bg-green-500/50":"bg-muted")})]},t.id)})})})}import{jsx as e,jsxs as a}from"react/jsx-runtime";function V({track:l,progress:i}){let c=l.steps.find((t)=>!i.completedStepIds.includes(t.id))?.id??null;return a(o,{className:"space-y-6",children:[a(o,{className:"text-center",children:[e(P,{className:"font-bold text-xl",children:"Your Learning Journey"}),e(N,{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),a(y,{children:[e(B,{children:a(h,{className:"flex items-center gap-2",children:[e(s,{children:"\uD83D\uDDFA\uFE0F"}),e(s,{children:"Journey Map"})]})}),e(C,{children:e(b,{steps:l.steps,completedStepIds:i.completedStepIds,currentStepId:c})})]}),a(y,{children:[e(B,{children:a(h,{className:"flex items-center gap-2",children:[e(s,{children:"\uD83D\uDCCD"}),e(s,{children:"Step by Step"})]})}),e(C,{children:a(o,{className:"relative",children:[e(o,{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),e(o,{className:"space-y-6",children:l.steps.map((t,x)=>{let r=i.completedStepIds.includes(t.id),n=t.id===c,u=t.metadata?.surface??"general";return a(o,{className:"relative flex gap-4 pl-2",children:[e(o,{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${r?"border-green-500 bg-green-500 text-white":n?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:e(s,{children:r?"\u2713":x+1})}),e(o,{className:"flex-1 pb-2",children:a(o,{className:"rounded-lg border p-4",children:[a(o,{className:"flex items-start justify-between gap-2",children:[a(o,{children:[a(o,{className:"flex items-center gap-2",children:[e(v,{className:`font-semibold ${r?"text-green-500":n?"text-blue-500":"text-foreground"}`,children:t.title}),e(s,{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:u})]}),e(N,{className:"mt-1 text-muted-foreground text-sm",children:t.description})]}),t.xpReward&&a(s,{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${r?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",t.xpReward," XP"]})]}),e(o,{className:"mt-3 text-xs",children:r?e(s,{className:"text-green-500",children:"\u2713 Completed"}):n?e(s,{className:"text-blue-500",children:"\u2192 In Progress"}):e(s,{className:"text-muted-foreground",children:"\u25CB Not Started"})})]})})]},t.id)})})]})})]})]})}export{V as Timeline};

package/dist/views/index.d.ts

@@ -1,5 +1,4 @@
-import { Overview } from "./Overview.js";
-import { Steps } from "./Steps.js";
-import { Progress as ProgressView } from "./Progress.js";
-import { Timeline } from "./Timeline.js";
-export { Overview, ProgressView as Progress, Steps, Timeline };
+export { Overview } from './Overview.js';
+export { Progress } from './Progress.js';
+export { Steps } from './Steps.js';
+export { Timeline } from './Timeline.js';

package/dist/views/index.js

@@ -1,6 +1,2 @@
-import { Overview } from "./Overview.js";
-import { Steps } from "./Steps.js";
-import { Progress as ProgressView } from "./Progress.js";
-import { Timeline } from "./Timeline.js";
-
-export { Overview, ProgressView as Progress, Steps, Timeline };
+// @bun
+import{XpBar as ne}from"@lssm/example.learning-journey-ui-shared";import{Button as le}from"@lssm/lib.design-system";import{Box as b}from"@lssm/lib.design-system/layout";import{H1 as me,H3 as de,P as L,Text as f}from"@lssm/lib.design-system/typography";import{Card as X,CardContent as E,CardHeader as k,CardTitle as z}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as ie}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as t,jsxs as c}from"react/jsx-runtime";function xe({track:e,progress:s,onStart:n}){let o=e.steps.length,x=s.completedStepIds.length,l=o>0?x/o*100:0,m=x===o,h=o-x,N=h*5,g=e.totalXp??e.steps.reduce((p,w)=>p+(w.xpReward??0),0)+(e.completionRewards?.xp??0);return c(b,{className:"space-y-6",children:[t(X,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:t(E,{className:"p-8",children:c(b,{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[t(b,{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:t(f,{children:m?"\uD83C\uDF89":"\uD83D\uDE80"})}),c(b,{className:"flex-1",children:[t(me,{className:"font-bold text-2xl",children:e.name}),t(L,{className:"mt-1 max-w-2xl text-muted-foreground",children:e.description}),!m&&c(L,{className:"mt-3 text-muted-foreground text-sm",children:["\u23F1\uFE0F Estimated time:"," ",N>0?`~${N} minutes`:"Less than a minute"]})]}),!m&&t(le,{size:"lg",onClick:n,children:t(f,{asChild:!0,children:t(f,{children:x>0?"Continue":"Get Started"})})})]})})}),c(b,{className:"grid gap-4 md:grid-cols-3",children:[c(X,{children:[t(k,{className:"pb-2",children:t(z,{className:"font-medium text-muted-foreground text-sm",children:t(f,{asChild:!0,children:t(f,{children:"Progress"})})})}),c(E,{children:[c(b,{className:"font-bold text-3xl",children:[Math.round(l),t(f,{asChild:!0,children:t(f,{children:"%"})})]}),t(ie,{value:l,className:"mt-2 h-2"}),c(L,{className:"mt-2 text-muted-foreground text-sm",children:[x," of ",o," steps completed"]})]})]}),c(X,{children:[t(k,{className:"pb-2",children:t(z,{className:"font-medium text-muted-foreground text-sm",children:t(f,{asChild:!0,children:t(f,{children:"XP Earned"})})})}),c(E,{children:[t(b,{className:"font-bold text-3xl text-blue-500",children:t(f,{children:s.xpEarned})}),t(ne,{current:s.xpEarned,max:g,showLabel:!1,size:"sm"})]})]}),c(X,{children:[t(k,{className:"pb-2",children:t(z,{className:"font-medium text-muted-foreground text-sm",children:t(f,{asChild:!0,children:t(f,{children:"Time Remaining"})})})}),c(E,{children:[t(b,{className:"font-bold text-3xl",children:t(f,{children:m?"\u2713":`~${N}m`})}),t(L,{className:"mt-2 text-muted-foreground text-sm",children:m?"All done!":`${h} steps to go`})]})]})]}),c(X,{children:[t(k,{children:c(z,{className:"flex items-center gap-2",children:[t(f,{children:"\uD83D\uDCCB"}),t(f,{children:"Your Journey"})]})}),t(E,{children:t(b,{className:"space-y-3",children:e.steps.map((p,w)=>{let H=s.completedStepIds.includes(p.id),R=!H&&e.steps.slice(0,w).every((ae)=>s.completedStepIds.includes(ae.id));return c(b,{className:"flex items-center gap-4 rounded-lg border p-3",children:[t(b,{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${H?"bg-green-500 text-white":R?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:t(f,{children:H?"\u2713":w+1})}),t(b,{className:"min-w-0 flex-1",children:t(L,{className:`font-medium ${H?"text-green-500":R?"text-foreground":"text-muted-foreground"}`,children:p.title})}),p.xpReward&&c(f,{className:"text-muted-foreground text-sm",children:["+",p.xpReward," XP"]})]},p.id)})})})]}),m&&t(X,{className:"border-green-500/50 bg-green-500/5",children:c(E,{className:"flex items-center gap-4 p-6",children:[t(b,{className:"text-4xl",children:t(f,{children:"\uD83C\uDF89"})}),c(b,{children:[t(de,{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),c(L,{className:"text-muted-foreground",children:["You've completed all ",o," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as ce,XpBar as ue}from"@lssm/example.learning-journey-ui-shared";import{Box as u}from"@lssm/lib.design-system/layout";import{P as pe,Text as i}from"@lssm/lib.design-system/typography";import{Card as K,CardContent as Y,CardHeader as A,CardTitle as D}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as fe}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as r,jsxs as a}from"react/jsx-runtime";function ge({track:e,progress:s}){let n=e.steps.length,o=s.completedStepIds.length,x=n>0?o/n*100:0,l=e.totalXp??e.steps.reduce((N,g)=>N+(g.xpReward??0),0)+(e.completionRewards?.xp??0),m=n-o,h=m*5;return a(u,{className:"space-y-6",children:[a(K,{children:[r(A,{children:a(D,{className:"flex items-center gap-2",children:[r(i,{children:"\uD83D\uDCC8"}),r(i,{children:"Your Progress"})]})}),a(Y,{className:"space-y-6",children:[r(u,{className:"flex items-center justify-center",children:a(u,{className:"relative flex h-40 w-40 items-center justify-center",children:[a("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[r("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),r("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${x*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),a(u,{className:"text-center",children:[a(u,{className:"font-bold text-3xl",children:[Math.round(x),r(i,{asChild:!0,children:r(i,{children:"%"})})]}),r(u,{className:"text-muted-foreground text-sm",children:r(i,{children:"Complete"})})]})]})}),a(u,{className:"grid grid-cols-3 gap-4 text-center",children:[a(u,{children:[r(u,{className:"font-bold text-2xl text-green-500",children:r(i,{children:o})}),r(u,{className:"text-muted-foreground text-sm",children:r(i,{children:"Completed"})})]}),a(u,{children:[r(u,{className:"font-bold text-2xl text-orange-500",children:r(i,{children:m})}),r(u,{className:"text-muted-foreground text-sm",children:r(i,{children:"Remaining"})})]}),a(u,{children:[r(u,{className:"font-bold text-2xl",children:a(i,{children:[h,"m"]})}),r(u,{className:"text-muted-foreground text-sm",children:r(i,{children:"Est. Time"})})]})]})]})]}),a(K,{children:[r(A,{children:a(D,{className:"flex items-center gap-2",children:[r(i,{children:"\u26A1"}),r(i,{children:"Experience Points"})]})}),a(Y,{className:"space-y-4",children:[a(u,{className:"flex items-baseline gap-2",children:[r(i,{className:"font-bold text-3xl text-blue-500",children:s.xpEarned}),a(i,{className:"text-muted-foreground",children:["/ ",l," XP"]})]}),r(ue,{current:s.xpEarned,max:l,showLabel:!1,size:"lg"})]})]}),a(K,{children:[r(A,{children:a(D,{className:"flex items-center gap-2",children:[r(i,{children:"\uD83C\uDFC5"}),r(i,{children:"Achievements"})]})}),a(Y,{children:[r(ce,{badges:s.badges,size:"lg"}),s.badges.length===0&&e.completionRewards?.badgeKey&&a(pe,{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',e.completionRewards.badgeKey,'" badge!']})]})]}),a(K,{children:[r(A,{children:a(D,{className:"flex items-center gap-2",children:[r(i,{children:"\uD83D\uDCCB"}),r(i,{children:"Step Details"})]})}),r(Y,{children:r(u,{className:"space-y-3",children:e.steps.map((N,g)=>{let p=s.completedStepIds.includes(N.id),w=p?100:0;return a(u,{className:"space-y-1",children:[a(u,{className:"flex items-center justify-between text-sm",children:[a(i,{className:p?"text-green-500":"text-foreground",children:[g+1,". ",N.title]}),r(i,{className:p?"text-green-500":"text-muted-foreground",children:p?"\u2713":"Pending"})]}),r(fe,{value:w,className:"h-1"})]},N.id)})})})]})]})}import{Box as V}from"@lssm/lib.design-system/layout";import{H2 as Ne,P as Ce,Text as F}from"@lssm/lib.design-system/typography";import{Progress as Te}from"@lssm/lib.ui-kit-web/ui/progress";import{useState as Be}from"react";import{Button as W}from"@lssm/lib.design-system";import{Box as J}from"@lssm/lib.design-system/layout";import{H4 as be,P as U,Text as j}from"@lssm/lib.design-system/typography";import{cn as M}from"@lssm/lib.ui-kit-core";import{jsx as B,jsxs as S}from"react/jsx-runtime";function G({step:e,stepNumber:s,isCompleted:n,isCurrent:o,isExpanded:x,onToggle:l,onComplete:m}){return S(J,{className:M("rounded-xl border transition-all",n&&"border-green-500/50 bg-green-500/5",o&&!n&&"border-violet-500 bg-violet-500/5",!n&&!o&&"border-border"),children:[S(W,{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:l,children:[B(J,{className:M("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",n&&"border-green-500 bg-green-500 text-white",o&&!n&&"border-violet-500 text-violet-500",!n&&!o&&"border-muted-foreground text-muted-foreground"),children:B(j,{children:n?"\u2713":s})}),S(J,{className:"min-w-0 flex-1",children:[B(be,{className:M("font-semibold",n&&"text-green-500",o&&!n&&"text-foreground",!n&&!o&&"text-muted-foreground"),children:e.title}),!x&&e.description&&B(U,{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&S(j,{className:M("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",n?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),B(j,{className:M("shrink-0 transition-transform",x&&"rotate-180"),children:"\u25BC"})]}),x&&S(J,{className:"border-t px-4 py-4",children:[e.description&&B(U,{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&S(J,{className:"mb-4 rounded-lg bg-muted p-4",children:[B(U,{className:"mb-2 font-medium text-sm",children:"Instructions:"}),B(U,{className:"text-muted-foreground text-sm",children:e.instructions})]}),S(J,{className:"flex flex-wrap gap-2",children:[e.actionUrl&&B(W,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!n&&B(W,{size:"sm",onClick:m,children:B(j,{asChild:!0,children:B(j,{children:"Mark as Complete"})})})]})]})]})}import{jsx as O,jsxs as P}from"react/jsx-runtime";function he({track:e,progress:s,onStepComplete:n}){let[o,x]=Be(()=>e.steps.find((p)=>!s.completedStepIds.includes(p.id))?.id??null),l=s.completedStepIds.length,m=e.steps.length,h=m>0?l/m*100:0,N=e.steps.findIndex((g)=>!s.completedStepIds.includes(g.id));return P(V,{className:"space-y-6",children:[P(V,{className:"space-y-2",children:[P(V,{className:"flex items-center justify-between",children:[O(Ne,{className:"font-bold text-xl",children:"Complete Each Step"}),P(F,{className:"text-muted-foreground text-sm",children:[l," / ",m," completed"]})]}),O(Te,{value:h,className:"h-2"})]}),O(V,{className:"space-y-3",children:e.steps.map((g,p)=>{let w=s.completedStepIds.includes(g.id),H=p===N;return O(G,{step:g,stepNumber:p+1,isCompleted:w,isCurrent:H,isExpanded:o===g.id,onToggle:()=>x(o===g.id?null:g.id),onComplete:()=>{n?.(g.id);let R=e.steps[p+1];if(R&&!s.completedStepIds.includes(R.id))x(R.id)}},g.id)})}),e.completionRewards&&h<100&&O(V,{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:P(Ce,{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",e.completionRewards.xp&&P(F,{className:"ml-2 font-semibold text-blue-500",children:["+",e.completionRewards.xp," XP bonus"]}),e.completionRewards.badgeKey&&P(F,{className:"ml-2 font-semibold text-amber-500",children:['+ "',e.completionRewards.badgeKey,'" badge']})]})})]})}import{Box as C}from"@lssm/lib.design-system/layout";import{H2 as Se,H4 as Pe,P as ee,Text as y}from"@lssm/lib.design-system/typography";import{Card as te,CardContent as oe,CardHeader as re,CardTitle as se}from"@lssm/lib.ui-kit-web/ui/card";import{Box as v}from"@lssm/lib.design-system/layout";import{P as ye,Text as we}from"@lssm/lib.design-system/typography";import{cn as _}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as I,jsxs as Q}from"react/jsx-runtime";var q={templates:"\uD83D\uDCCB","spec-editor":"\u270F\uFE0F",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"\u2699\uFE0F",default:"\uD83D\uDCCD"};function Z({steps:e,completedStepIds:s,currentStepId:n}){return I(v,{className:"relative overflow-x-auto pb-4",children:I(v,{className:"flex min-w-max items-center gap-2",children:e.map((o,x)=>{let l=s.includes(o.id),m=o.id===n,h=o.metadata?.surface??"default",N=q[h]??q.default;return Q(v,{className:"flex items-center",children:[Q(v,{className:"flex flex-col items-center gap-2",children:[I(v,{className:_("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",l&&"border-green-500 bg-green-500/10",m&&!l&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!l&&!m&&"border-muted bg-muted/50"),children:I(we,{children:l?"\u2713":N})}),I(v,{className:"text-center",children:I(ye,{className:_("max-w-[100px] truncate font-medium text-xs",l&&"text-green-500",m&&!l&&"text-violet-500",!l&&!m&&"text-muted-foreground"),children:o.title})})]}),x<e.length-1&&I(v,{className:_("mx-2 h-1 w-8 rounded-full transition-colors",s.includes(e[x+1]?.id??"")?"bg-green-500":l?"bg-green-500/50":"bg-muted")})]},o.id)})})})}import{jsx as d,jsxs as T}from"react/jsx-runtime";function ve({track:e,progress:s}){let n=e.steps.find((o)=>!s.completedStepIds.includes(o.id))?.id??null;return T(C,{className:"space-y-6",children:[T(C,{className:"text-center",children:[d(Se,{className:"font-bold text-xl",children:"Your Learning Journey"}),d(ee,{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),T(te,{children:[d(re,{children:T(se,{className:"flex items-center gap-2",children:[d(y,{children:"\uD83D\uDDFA\uFE0F"}),d(y,{children:"Journey Map"})]})}),d(oe,{children:d(Z,{steps:e.steps,completedStepIds:s.completedStepIds,currentStepId:n})})]}),T(te,{children:[d(re,{children:T(se,{className:"flex items-center gap-2",children:[d(y,{children:"\uD83D\uDCCD"}),d(y,{children:"Step by Step"})]})}),d(oe,{children:T(C,{className:"relative",children:[d(C,{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),d(C,{className:"space-y-6",children:e.steps.map((o,x)=>{let l=s.completedStepIds.includes(o.id),m=o.id===n,h=o.metadata?.surface??"general";return T(C,{className:"relative flex gap-4 pl-2",children:[d(C,{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${l?"border-green-500 bg-green-500 text-white":m?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:d(y,{children:l?"\u2713":x+1})}),d(C,{className:"flex-1 pb-2",children:T(C,{className:"rounded-lg border p-4",children:[T(C,{className:"flex items-start justify-between gap-2",children:[T(C,{children:[T(C,{className:"flex items-center gap-2",children:[d(Pe,{className:`font-semibold ${l?"text-green-500":m?"text-blue-500":"text-foreground"}`,children:o.title}),d(y,{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:h})]}),d(ee,{className:"mt-1 text-muted-foreground text-sm",children:o.description})]}),o.xpReward&&T(y,{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${l?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",o.xpReward," XP"]})]}),d(C,{className:"mt-3 text-xs",children:l?d(y,{className:"text-green-500",children:"\u2713 Completed"}):m?d(y,{className:"text-blue-500",children:"\u2192 In Progress"}):d(y,{className:"text-muted-foreground",children:"\u25CB Not Started"})})]})})]},o.id)})})]})})]})]})}export{xe as Overview,ge as Progress,he as Steps,ve as Timeline};