@lssm/example.learning-journey-ui-onboarding 0.0.0-canary-20251212210835

package/.turbo/turbo-build.log

@@ -0,0 +1,22 @@
+$ bun build:bundle && bun build:types
+$ tsdown
+ℹ tsdown v0.17.0 powered by rolldown v1.0.0-beta.53
+ℹ config file: /home/runner/work/contractspec/contractspec/packages/examples/learning-journey-ui-onboarding/tsdown.config.js 
+ℹ entry: src/index.ts, src/views/index.ts, src/components/index.ts
+ℹ target: esnext
+ℹ tsconfig: tsconfig.json
+ℹ Build start
+ℹ dist/index.mjs                 2.40 kB │ gzip: 0.84 kB
+ℹ dist/views/index.mjs           0.20 kB │ gzip: 0.15 kB
+ℹ dist/components/index.mjs      0.20 kB │ gzip: 0.15 kB
+ℹ dist/views-DBF-jKGQ.mjs       20.13 kB │ gzip: 3.57 kB
+ℹ dist/JourneyMap-C6APUTsI.mjs   5.20 kB │ gzip: 1.53 kB
+ℹ dist/components-Cd2J4qQ5.mjs   1.59 kB │ gzip: 0.67 kB
+ℹ dist/index.d.mts               0.84 kB │ gzip: 0.42 kB
+ℹ dist/views/index.d.mts         0.16 kB │ gzip: 0.13 kB
+ℹ dist/components/index.d.mts    0.14 kB │ gzip: 0.13 kB
+ℹ dist/index-jaGULFWy.d.mts      1.22 kB │ gzip: 0.46 kB
+ℹ dist/index-v1pn71sC.d.mts      0.93 kB │ gzip: 0.34 kB
+ℹ 11 files, total: 33.01 kB
+✔ Build complete in 7707ms
+$ tsc --noEmit

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @lssm/example.learning-journey-ui-onboarding
+
+## 0.0.0-canary-20251212210835
+
+### Patch Changes
+
+- Updated dependencies [3086383]
+  - @lssm/lib.design-system@0.0.0-canary-20251212210835
+  - @lssm/lib.ui-kit-web@0.0.0-canary-20251212210835
+  - @lssm/example.learning-journey-ui-shared@0.0.0-canary-20251212210835
+  - @lssm/example.learning-journey.platform-tour@0.0.0-canary-20251212210835
+  - @lssm/example.learning-journey.studio-onboarding@0.0.0-canary-20251212210835
+  - @lssm/module.learning-journey@0.0.0-canary-20251212210835

package/README.md

@@ -0,0 +1,33 @@
+# @lssm/example.learning-journey-ui-onboarding
+
+Developer onboarding UI with checklists and journey maps.
+
+## Features
+
+- **Overview**: Welcome banner with progress summary and "Get Started" CTA
+- **Steps**: Accordion-style checklist with expandable instructions
+- **Progress**: Circular progress indicator, XP bar, and step breakdown
+- **Timeline**: Journey map with surface icons and detailed step timeline
+
+## Usage
+
+```tsx
+import { OnboardingMiniApp } from '@lssm/example.learning-journey-ui-onboarding';
+import { studioGettingStartedTrack } from '@lssm/example.learning-journey.studio-onboarding/track';
+
+function MyApp() {
+  return (
+    <OnboardingMiniApp
+      track={studioGettingStartedTrack}
+      initialView="overview"
+    />
+  );
+}
+```
+
+## Components
+
+- **StepChecklist** - Expandable accordion step with completion action
+- **CodeSnippet** - Inline code display with copy button
+- **JourneyMap** - Horizontal connected node journey visualization
+

package/dist/JourneyMap-C6APUTsI.mjs

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { Button } from "@lssm/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
+
+//#region src/components/StepChecklist.tsx
+function StepChecklist({ step, stepNumber, isCompleted, isCurrent, isExpanded, onToggle, onComplete }) {
+	return /* @__PURE__ */ jsxs("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__ */ jsxs("button", {
+			type: "button",
+			className: "flex w-full items-center gap-4 p-4 text-left",
+			onClick: onToggle,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold 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
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("h4", {
+						className: cn("font-semibold", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-foreground", !isCompleted && !isCurrent && "text-muted-foreground"),
+						children: step.title
+					}), !isExpanded && step.description && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground truncate text-sm",
+						children: step.description
+					})]
+				}),
+				step.xpReward && /* @__PURE__ */ jsxs("span", {
+					className: cn("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("span", {
+					className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
+					children: "▼"
+				})
+			]
+		}), isExpanded && /* @__PURE__ */ jsxs("div", {
+			className: "border-t px-4 py-4",
+			children: [
+				step.description && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mb-4",
+					children: step.description
+				}),
+				step.instructions && /* @__PURE__ */ jsxs("div", {
+					className: "bg-muted mb-4 rounded-lg p-4",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "mb-2 text-sm font-medium",
+						children: "Instructions:"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm",
+						children: step.instructions
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-2",
+					children: [step.actionUrl && /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => window.open(step.actionUrl, "_blank"),
+						children: step.actionLabel ?? "Try it"
+					}), !isCompleted && /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: onComplete,
+						children: "Mark as Complete"
+					})]
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/JourneyMap.tsx
+const SURFACE_ICONS = {
+	templates: "📋",
+	"spec-editor": "✏️",
+	regenerator: "🔄",
+	playground: "🎮",
+	evolution: "🤖",
+	dashboard: "📊",
+	settings: "⚙️",
+	default: "📍"
+};
+function JourneyMap({ steps, completedStepIds, currentStepId }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative overflow-x-auto pb-4",
+		children: /* @__PURE__ */ jsx("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 icon = SURFACE_ICONS[step.metadata?.surface ?? "default"] ?? SURFACE_ICONS.default;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-center gap-2",
+						children: [/* @__PURE__ */ jsx("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
+						}), /* @__PURE__ */ jsx("div", {
+							className: "text-center",
+							children: /* @__PURE__ */ jsx("p", {
+								className: cn("max-w-[100px] truncate text-xs font-medium", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-violet-500", !isCompleted && !isCurrent && "text-muted-foreground"),
+								children: step.title
+							})
+						})]
+					}), index < steps.length - 1 && /* @__PURE__ */ jsx("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") })]
+				}, step.id);
+			})
+		})
+	});
+}
+
+//#endregion
+export { StepChecklist as n, JourneyMap as t };

package/dist/components/index.d.mts

@@ -0,0 +1,2 @@
+import { n as CodeSnippet, r as StepChecklist, t as JourneyMap } from "../index-jaGULFWy.mjs";
+export { CodeSnippet, JourneyMap, StepChecklist };

package/dist/components/index.mjs

@@ -0,0 +1,4 @@
+import { n as StepChecklist, t as JourneyMap } from "../JourneyMap-C6APUTsI.mjs";
+import { t as CodeSnippet } from "../components-Cd2J4qQ5.mjs";
+
+export { CodeSnippet, JourneyMap, StepChecklist };

package/dist/components-Cd2J4qQ5.mjs

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { Button } from "@lssm/lib.design-system";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
+
+//#region src/components/CodeSnippet.tsx
+function CodeSnippet({ code, language = "typescript", title }) {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = async () => {
+		await navigator.clipboard.writeText(code);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-muted/50 overflow-hidden rounded-lg border",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "bg-muted flex items-center justify-between border-b px-4 py-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs font-medium uppercase",
+					children: language
+				}), title && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "•"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-sm",
+					children: title
+				})] })]
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: handleCopy,
+				className: "h-7 text-xs",
+				children: copied ? "✓ Copied" : "Copy"
+			})]
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "overflow-x-auto p-4",
+			children: /* @__PURE__ */ jsx("code", {
+				className: "text-sm",
+				children: code
+			})
+		})]
+	});
+}
+
+//#endregion
+export { CodeSnippet as t };

package/dist/index-jaGULFWy.d.mts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+import { LearningJourneyStepSpec } from "@lssm/module.learning-journey/track-spec";
+
+//#region src/components/StepChecklist.d.ts
+interface StepChecklistProps {
+  step: LearningJourneyStepSpec;
+  stepNumber: number;
+  isCompleted: boolean;
+  isCurrent: boolean;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onComplete?: () => void;
+}
+declare function StepChecklist({
+  step,
+  stepNumber,
+  isCompleted,
+  isCurrent,
+  isExpanded,
+  onToggle,
+  onComplete
+}: StepChecklistProps): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/components/CodeSnippet.d.ts
+interface CodeSnippetProps {
+  code: string;
+  language?: string;
+  title?: string;
+}
+declare function CodeSnippet({
+  code,
+  language,
+  title
+}: CodeSnippetProps): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/components/JourneyMap.d.ts
+interface JourneyMapProps {
+  steps: LearningJourneyStepSpec[];
+  completedStepIds: string[];
+  currentStepId?: string | null;
+}
+declare function JourneyMap({
+  steps,
+  completedStepIds,
+  currentStepId
+}: JourneyMapProps): react_jsx_runtime4.JSX.Element;
+//#endregion
+export { CodeSnippet as n, StepChecklist as r, JourneyMap as t };

package/dist/index-v1pn71sC.d.mts

@@ -0,0 +1,33 @@
+import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/views/Overview.d.ts
+interface OnboardingOverviewProps extends LearningViewProps {
+  onStart?: () => void;
+}
+declare function Overview({
+  track,
+  progress,
+  onStart
+}: OnboardingOverviewProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/views/Steps.d.ts
+declare function Steps({
+  track,
+  progress,
+  onStepComplete
+}: LearningViewProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/views/Progress.d.ts
+declare function ProgressView({
+  track,
+  progress
+}: LearningViewProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/views/Timeline.d.ts
+declare function Timeline({
+  track,
+  progress
+}: LearningViewProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+export { Overview as i, ProgressView as n, Steps as r, Timeline as t };

package/dist/index.d.mts

@@ -0,0 +1,18 @@
+import { n as CodeSnippet, r as StepChecklist, t as JourneyMap } from "./index-jaGULFWy.mjs";
+import { i as Overview, n as ProgressView, r as Steps, t as Timeline } from "./index-v1pn71sC.mjs";
+import { LearningMiniAppProps } from "@lssm/example.learning-journey-ui-shared";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/OnboardingMiniApp.d.ts
+type OnboardingMiniAppProps = Omit<LearningMiniAppProps, 'progress'> & {
+  progress?: LearningMiniAppProps['progress'];
+};
+declare function OnboardingMiniApp({
+  track,
+  progress: externalProgress,
+  onStepComplete: externalOnStepComplete,
+  onViewChange,
+  initialView
+}: OnboardingMiniAppProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CodeSnippet, JourneyMap, OnboardingMiniApp, Overview, ProgressView as Progress, StepChecklist, Steps, Timeline };

package/dist/index.mjs

@@ -0,0 +1,59 @@
+import { i as Overview, n as ProgressView, r as Steps, t as Timeline } from "./views-DBF-jKGQ.mjs";
+import { n as StepChecklist, t as JourneyMap } from "./JourneyMap-C6APUTsI.mjs";
+import { t as CodeSnippet } from "./components-Cd2J4qQ5.mjs";
+import { useCallback, useState } from "react";
+import { Card, CardContent } from "@lssm/lib.ui-kit-web/ui/card";
+import { ViewTabs, useLearningProgress } from "@lssm/example.learning-journey-ui-shared";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/OnboardingMiniApp.tsx
+function OnboardingMiniApp({ track, progress: externalProgress, onStepComplete: externalOnStepComplete, onViewChange, initialView = "overview" }) {
+	const [currentView, setCurrentView] = useState(initialView);
+	const { progress: internalProgress, completeStep: internalCompleteStep } = useLearningProgress(track);
+	const progress = externalProgress ?? internalProgress;
+	const handleViewChange = useCallback((view) => {
+		setCurrentView(view);
+		onViewChange?.(view);
+	}, [onViewChange]);
+	const handleStepComplete = useCallback((stepId) => {
+		if (externalOnStepComplete) externalOnStepComplete(stepId);
+		else internalCompleteStep(stepId);
+	}, [externalOnStepComplete, internalCompleteStep]);
+	const handleStartFromOverview = useCallback(() => {
+		setCurrentView("steps");
+		onViewChange?.("steps");
+	}, [onViewChange]);
+	const renderView = () => {
+		const viewProps = {
+			track,
+			progress,
+			onStepComplete: handleStepComplete
+		};
+		switch (currentView) {
+			case "overview": return /* @__PURE__ */ jsx(Overview, {
+				...viewProps,
+				onStart: handleStartFromOverview
+			});
+			case "steps": return /* @__PURE__ */ jsx(Steps, { ...viewProps });
+			case "progress": return /* @__PURE__ */ jsx(ProgressView, { ...viewProps });
+			case "timeline": return /* @__PURE__ */ jsx(Timeline, { ...viewProps });
+			default: return /* @__PURE__ */ jsx(Overview, {
+				...viewProps,
+				onStart: handleStartFromOverview
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, {
+			className: "p-4",
+			children: /* @__PURE__ */ jsx(ViewTabs, {
+				currentView,
+				onViewChange: handleViewChange
+			})
+		}) }), renderView()]
+	});
+}
+
+//#endregion
+export { CodeSnippet, JourneyMap, OnboardingMiniApp, Overview, ProgressView as Progress, StepChecklist, Steps, Timeline };

package/dist/views/index.d.mts

@@ -0,0 +1,2 @@
+import { i as Overview, n as ProgressView, r as Steps, t as Timeline } from "../index-v1pn71sC.mjs";
+export { Overview, ProgressView as Progress, Steps, Timeline };

package/dist/views/index.mjs

@@ -0,0 +1,4 @@
+import { i as Overview, n as ProgressView, r as Steps, t as Timeline } from "../views-DBF-jKGQ.mjs";
+import "../JourneyMap-C6APUTsI.mjs";
+
+export { Overview, ProgressView as Progress, Steps, Timeline };