@lssm/example.learning-journey-ui-gamified 0.0.0-canary-20251217073102 → 0.0.0-canary-20251217083314

package/dist/components/DayCalendar.js

@@ -0,0 +1,32 @@
+'use client';
+
+import { cn } from "../libs/ui-kit-web/dist/ui/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/DayCalendar.tsx
+function DayCalendar({ totalDays, currentDay, completedDays }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-7 gap-2",
+		children: Array.from({ length: totalDays }, (_, i) => i + 1).map((day) => {
+			const isCompleted = completedDays.includes(day);
+			const isCurrent = day === currentDay;
+			const isLocked = day > currentDay;
+			return /* @__PURE__ */ jsx("div", {
+				className: cn("flex h-12 w-12 flex-col items-center justify-center rounded-lg border text-sm font-medium transition-all", isCompleted && "border-green-500 bg-green-500/10 text-green-500", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 text-violet-500 ring-2 ring-violet-500/50", isLocked && "border-muted bg-muted/50 text-muted-foreground", !isCompleted && !isCurrent && !isLocked && "border-border bg-card"),
+				children: isCompleted ? /* @__PURE__ */ jsx("span", {
+					className: "text-lg",
+					children: "✓"
+				}) : isLocked ? /* @__PURE__ */ jsx("span", {
+					className: "text-lg",
+					children: "🔒"
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs",
+					children: "Day"
+				}), /* @__PURE__ */ jsx("span", { children: day })] })
+			}, day);
+		})
+	});
+}
+
+//#endregion
+export { DayCalendar };

package/dist/components/FlashCard.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { LearningJourneyStepSpec } from "@lssm/module.learning-journey/track-spec";
+
+//#region src/components/FlashCard.d.ts
+interface FlashCardProps {
+  step: LearningJourneyStepSpec;
+  isCompleted: boolean;
+  isCurrent: boolean;
+  onComplete?: () => void;
+}
+declare function FlashCard({
+  step,
+  isCompleted,
+  isCurrent,
+  onComplete
+}: FlashCardProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+export { FlashCard };

package/dist/components/FlashCard.js

@@ -0,0 +1,79 @@
+'use client';
+
+import { Card, CardContent } from "../libs/ui-kit-web/dist/ui/card.js";
+import { Button$1 } from "../libs/design-system/dist/components/atoms/Button.js";
+import { cn } from "../libs/ui-kit-web/dist/ui/utils.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/FlashCard.tsx
+function FlashCard({ step, isCompleted, isCurrent, onComplete }) {
+	const [isFlipped, setIsFlipped] = useState(false);
+	return /* @__PURE__ */ jsx(Card, {
+		className: cn("relative cursor-pointer overflow-hidden transition-all duration-300", isCurrent && "ring-primary ring-2", isCompleted && "opacity-60"),
+		onClick: () => !isCompleted && setIsFlipped(!isFlipped),
+		children: /* @__PURE__ */ jsxs(CardContent, {
+			className: "p-6",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn("space-y-4 transition-opacity duration-200", isFlipped ? "opacity-0" : "opacity-100"),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-start justify-between",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex-1",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "text-lg font-semibold",
+								children: step.title
+							}), step.description && /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground mt-1 text-sm",
+								children: step.description
+							})]
+						}), step.xpReward && /* @__PURE__ */ jsxs("span", {
+							className: "rounded-full bg-green-500/10 px-2 py-1 text-xs font-semibold text-green-500",
+							children: [
+								"+",
+								step.xpReward,
+								" XP"
+							]
+						})]
+					}),
+					isCompleted && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 text-green-500",
+						children: [/* @__PURE__ */ jsx("span", { children: "✓" }), /* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium",
+							children: "Completed"
+						})]
+					}),
+					isCurrent && !isCompleted && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: "Tap to reveal action"
+					})
+				]
+			}), isFlipped && !isCompleted && /* @__PURE__ */ jsxs("div", {
+				className: "absolute inset-0 flex flex-col items-center justify-center gap-4 bg-gradient-to-br from-violet-500/10 to-violet-600/10 p-6",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-center text-sm",
+					children: step.instructions ?? "Complete this step to earn XP"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx(Button$1, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => setIsFlipped(false),
+						children: "Back"
+					}), /* @__PURE__ */ jsx(Button$1, {
+						size: "sm",
+						onClick: (e) => {
+							e.stopPropagation();
+							onComplete?.();
+						},
+						children: "Mark Complete"
+					})]
+				})]
+			})]
+		})
+	});
+}
+
+//#endregion
+export { FlashCard };

package/dist/components/MasteryRing.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/components/MasteryRing.d.ts
+interface MasteryRingProps {
+  label: string;
+  percentage: number;
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'green' | 'blue' | 'violet' | 'orange';
+}
+declare function MasteryRing({
+  label,
+  percentage,
+  size,
+  color
+}: MasteryRingProps): react_jsx_runtime4.JSX.Element;
+//#endregion
+export { MasteryRing };

package/dist/components/MasteryRing.js

@@ -0,0 +1,81 @@
+'use client';
+
+import { cn } from "../libs/ui-kit-web/dist/ui/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/MasteryRing.tsx
+const sizeStyles = {
+	sm: {
+		container: "h-16 w-16",
+		text: "text-xs",
+		ring: 48,
+		stroke: 4
+	},
+	md: {
+		container: "h-24 w-24",
+		text: "text-sm",
+		ring: 72,
+		stroke: 6
+	},
+	lg: {
+		container: "h-32 w-32",
+		text: "text-base",
+		ring: 96,
+		stroke: 8
+	}
+};
+const colorStyles = {
+	green: "stroke-green-500",
+	blue: "stroke-blue-500",
+	violet: "stroke-violet-500",
+	orange: "stroke-orange-500"
+};
+function MasteryRing({ label, percentage, size = "md", color = "violet" }) {
+	const styles = sizeStyles[size];
+	const radius = (styles.ring - styles.stroke) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const strokeDashoffset = circumference - percentage / 100 * circumference;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-col items-center gap-1", styles.container),
+		children: [
+			/* @__PURE__ */ jsxs("svg", {
+				className: "absolute -rotate-90",
+				width: styles.ring,
+				height: styles.ring,
+				viewBox: `0 0 ${styles.ring} ${styles.ring}`,
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: styles.ring / 2,
+					cy: styles.ring / 2,
+					r: radius,
+					fill: "none",
+					strokeWidth: styles.stroke,
+					className: "stroke-muted"
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: styles.ring / 2,
+					cy: styles.ring / 2,
+					r: radius,
+					fill: "none",
+					strokeWidth: styles.stroke,
+					strokeLinecap: "round",
+					strokeDasharray: circumference,
+					strokeDashoffset,
+					className: cn("transition-all duration-500", colorStyles[color])
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-full flex-col items-center justify-center",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: cn("font-bold", styles.text),
+					children: [Math.round(percentage), "%"]
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-muted-foreground mt-1 truncate", styles.text),
+				children: label
+			})
+		]
+	});
+}
+
+//#endregion
+export { MasteryRing };

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+import { DayCalendar } from "./DayCalendar.js";
+import { FlashCard } from "./FlashCard.js";
+import { MasteryRing } from "./MasteryRing.js";
+export { DayCalendar, FlashCard, MasteryRing };

package/dist/components/index.js

@@ -0,0 +1,5 @@
+import { FlashCard } from "./FlashCard.js";
+import { MasteryRing } from "./MasteryRing.js";
+import { DayCalendar } from "./DayCalendar.js";
+
+export { DayCalendar, FlashCard, MasteryRing };

package/dist/docs/index.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/docs/index.js

@@ -0,0 +1 @@
+import "./learning-journey-ui-gamified.docblock.js";

package/dist/docs/learning-journey-ui-gamified.docblock.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/docs/learning-journey-ui-gamified.docblock.js

@@ -0,0 +1,20 @@
+import { registerDocBlocks } from "../libs/contracts/dist/docs/registry.js";
+import "../libs/contracts/dist/docs/index.js";
+
+//#region src/docs/learning-journey-ui-gamified.docblock.ts
+registerDocBlocks([{
+	id: "docs.examples.learning-journey-ui-gamified",
+	title: "Learning Journey UI — Gamified",
+	summary: "UI mini-app components for gamified learning: flashcards, mastery, streak/calendar.",
+	kind: "reference",
+	visibility: "public",
+	route: "/docs/examples/learning-journey-ui-gamified",
+	tags: [
+		"learning",
+		"ui",
+		"gamified"
+	],
+	body: `## Includes\n- Gamified mini-app shell\n- Views: overview, steps, progress, timeline\n- Components: flash card, mastery ring, day calendar\n\n## Notes\n- Compose with design system components.\n- Respect prefers-reduced-motion; keep tap targets large.`
+}]);
+
+//#endregion

package/dist/{index.d.mts → example.d.ts}

@@ -1,20 +1,3 @@
-import { n as MasteryRing, r as FlashCard, t as DayCalendar } from "./index-C7CBKOil.mjs";
-import { i as Overview, n as Progress, r as Steps, t as Timeline } from "./index-DiAD2ivN.mjs";
-import { LearningMiniAppProps } from "@lssm/example.learning-journey-ui-shared";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
-
-//#region src/GamifiedMiniApp.d.ts
-type GamifiedMiniAppProps = Omit<LearningMiniAppProps, 'progress'> & {
-  progress?: LearningMiniAppProps['progress'];
-};
-declare function GamifiedMiniApp({
-  track,
-  progress: externalProgress,
-  onStepComplete: externalOnStepComplete,
-  onViewChange,
-  initialView
-}: GamifiedMiniAppProps): react_jsx_runtime2.JSX.Element;
-//#endregion
 //#region src/example.d.ts
 declare const example: {
   readonly id: "learning-journey-ui-gamified";
@@ -46,4 +29,4 @@ declare const example: {
   };
 };
 //#endregion
-export { DayCalendar, FlashCard, GamifiedMiniApp, MasteryRing, Overview, Progress, Steps, Timeline, example };
+export { example as default };

package/dist/example.js

@@ -0,0 +1,34 @@
+//#region src/example.ts
+const example = {
+	id: "learning-journey-ui-gamified",
+	title: "Learning Journey UI — Gamified",
+	summary: "UI mini-app for gamified learning: flashcards, mastery ring, calendar.",
+	tags: [
+		"learning",
+		"ui",
+		"gamified"
+	],
+	kind: "ui",
+	visibility: "public",
+	docs: { rootDocId: "docs.examples.learning-journey-ui-gamified" },
+	entrypoints: {
+		packageName: "@lssm/example.learning-journey-ui-gamified",
+		docs: "./docs"
+	},
+	surfaces: {
+		templates: true,
+		sandbox: {
+			enabled: true,
+			modes: ["playground", "markdown"]
+		},
+		studio: {
+			enabled: true,
+			installable: true
+		},
+		mcp: { enabled: true }
+	}
+};
+var example_default = example;
+
+//#endregion
+export { example_default as default };

package/dist/examples/learning-journey-ui-shared/dist/components/BadgeDisplay.js

@@ -0,0 +1,44 @@
+'use client';
+
+import { cn } from "../libs/ui-kit-web/dist/ui/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../learning-journey-ui-shared/dist/components/BadgeDisplay.js
+const BADGE_ICONS = {
+	studio_first_30m: "🎯",
+	platform_tour: "🗺️",
+	crm_first_win: "🏆",
+	drill_master: "🧠",
+	coach_listener: "👂",
+	quest_complete: "⭐",
+	streak_7: "🔥",
+	streak_30: "💎",
+	default: "🏅"
+};
+const sizeStyles = {
+	sm: "h-6 w-6 text-sm",
+	md: "h-8 w-8 text-base",
+	lg: "h-10 w-10 text-lg"
+};
+function BadgeDisplay({ badges, maxVisible = 5, size = "md" }) {
+	const visibleBadges = badges.slice(0, maxVisible);
+	const hiddenCount = badges.length - maxVisible;
+	if (badges.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "text-muted-foreground text-sm",
+		children: "No badges earned yet"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [visibleBadges.map((badge) => /* @__PURE__ */ jsx("div", {
+			className: cn("flex items-center justify-center rounded-full bg-gradient-to-br from-amber-400/20 to-amber-600/20", sizeStyles[size]),
+			title: badge.replace(/_/g, " "),
+			children: BADGE_ICONS[badge] ?? BADGE_ICONS.default
+		}, badge)), hiddenCount > 0 && /* @__PURE__ */ jsxs("div", {
+			className: cn("text-muted-foreground bg-muted flex items-center justify-center rounded-full", sizeStyles[size], "text-xs font-medium"),
+			children: ["+", hiddenCount]
+		})]
+	});
+}
+
+//#endregion
+export { BadgeDisplay };

package/dist/examples/learning-journey-ui-shared/dist/components/StreakCounter.js

@@ -0,0 +1,45 @@
+'use client';
+
+import { cn } from "../libs/ui-kit-web/dist/ui/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../learning-journey-ui-shared/dist/components/StreakCounter.js
+const sizeStyles = {
+	sm: {
+		container: "gap-1 px-2 py-1",
+		icon: "text-base",
+		text: "text-xs"
+	},
+	md: {
+		container: "gap-1.5 px-3 py-1.5",
+		icon: "text-lg",
+		text: "text-sm"
+	},
+	lg: {
+		container: "gap-2 px-4 py-2",
+		icon: "text-xl",
+		text: "text-base"
+	}
+};
+function StreakCounter({ days, isActive = true, size = "md" }) {
+	const styles = sizeStyles[size];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex items-center rounded-full font-semibold", styles.container, isActive ? "bg-orange-500/10 text-orange-500" : "bg-muted text-muted-foreground"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles.icon,
+			role: "img",
+			"aria-label": "streak",
+			children: "🔥"
+		}), /* @__PURE__ */ jsxs("span", {
+			className: styles.text,
+			children: [
+				days,
+				" ",
+				days === 1 ? "day" : "days"
+			]
+		})]
+	});
+}
+
+//#endregion
+export { StreakCounter };

package/dist/examples/learning-journey-ui-shared/dist/components/ViewTabs.js

@@ -0,0 +1,48 @@
+'use client';
+
+import { Button$1 } from "../libs/design-system/dist/components/atoms/Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../learning-journey-ui-shared/dist/components/ViewTabs.js
+const VIEW_LABELS = {
+	overview: {
+		label: "Overview",
+		icon: "📊"
+	},
+	steps: {
+		label: "Steps",
+		icon: "📝"
+	},
+	progress: {
+		label: "Progress",
+		icon: "📈"
+	},
+	timeline: {
+		label: "Timeline",
+		icon: "📅"
+	}
+};
+const DEFAULT_VIEWS = [
+	"overview",
+	"steps",
+	"progress",
+	"timeline"
+];
+function ViewTabs({ currentView, onViewChange, availableViews = DEFAULT_VIEWS }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-2",
+		children: availableViews.map((view) => {
+			const { label, icon } = VIEW_LABELS[view];
+			return /* @__PURE__ */ jsxs(Button$1, {
+				variant: currentView === view ? "default" : "outline",
+				size: "sm",
+				onClick: () => onViewChange(view),
+				className: "gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", { children: icon }), /* @__PURE__ */ jsx("span", { children: label })]
+			}, view);
+		})
+	});
+}
+
+//#endregion
+export { ViewTabs };

package/dist/examples/learning-journey-ui-shared/dist/components/XpBar.js

@@ -0,0 +1,46 @@
+'use client';
+
+import { Progress } from "../libs/ui-kit-web/dist/ui/progress.js";
+import { cn } from "../libs/ui-kit-web/dist/ui/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../learning-journey-ui-shared/dist/components/XpBar.js
+const sizeStyles = {
+	sm: "h-2",
+	md: "h-3",
+	lg: "h-4"
+};
+const labelSizeStyles = {
+	sm: "text-xs",
+	md: "text-sm",
+	lg: "text-base"
+};
+function XpBar({ current, max, level, showLabel = true, size = "md" }) {
+	const percentage = max > 0 ? Math.min(current / max * 100, 100) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full space-y-1",
+		children: [showLabel && /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center justify-between", labelSizeStyles[size]),
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground font-medium",
+				children: [level !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: "text-primary mr-1",
+					children: ["Lvl ", level]
+				}), "XP"]
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "font-semibold",
+				children: [
+					current.toLocaleString(),
+					" / ",
+					max.toLocaleString()
+				]
+			})]
+		}), /* @__PURE__ */ jsx(Progress, {
+			value: percentage,
+			className: cn("bg-muted", sizeStyles[size])
+		})]
+	});
+}
+
+//#endregion
+export { XpBar };

package/dist/examples/learning-journey-ui-shared/dist/components/index.js

@@ -0,0 +1,4 @@
+import { XpBar } from "./XpBar.js";
+import { StreakCounter } from "./StreakCounter.js";
+import { BadgeDisplay } from "./BadgeDisplay.js";
+import { ViewTabs } from "./ViewTabs.js";

package/dist/examples/learning-journey-ui-shared/dist/docs/index.js

@@ -0,0 +1 @@
+import "./learning-journey-ui-shared.docblock.js";

package/dist/examples/learning-journey-ui-shared/dist/docs/learning-journey-ui-shared.docblock.js

@@ -0,0 +1,20 @@
+import { registerDocBlocks } from "../libs/contracts/dist/docs/registry.js";
+import "../libs/contracts/dist/docs/index.js";
+
+//#region ../learning-journey-ui-shared/dist/docs/learning-journey-ui-shared.docblock.js
+registerDocBlocks([{
+	id: "docs.examples.learning-journey-ui-shared",
+	title: "Learning Journey UI — Shared",
+	summary: "Shared UI components and hooks for learning journey mini-apps.",
+	kind: "reference",
+	visibility: "public",
+	route: "/docs/examples/learning-journey-ui-shared",
+	tags: [
+		"learning",
+		"ui",
+		"shared"
+	],
+	body: `## Includes\n- Hooks: useLearningProgress\n- Components: XpBar, StreakCounter, BadgeDisplay, ViewTabs\n\n## Notes\n- Keep components accessible (labels, focus, contrast).\n- Prefer design-system tokens and components.`
+}]);
+
+//#endregion

package/dist/examples/learning-journey-ui-shared/dist/hooks/index.js

@@ -0,0 +1 @@
+import { useLearningProgress } from "./useLearningProgress.js";

package/dist/examples/learning-journey-ui-shared/dist/hooks/useLearningProgress.js

@@ -0,0 +1,73 @@
+'use client';
+
+import { useCallback, useMemo, useState } from "react";
+
+//#region ../learning-journey-ui-shared/dist/hooks/useLearningProgress.js
+/** Default progress state for a new track */
+function createDefaultProgress(trackId) {
+	return {
+		trackId,
+		completedStepIds: [],
+		currentStepId: null,
+		xpEarned: 0,
+		streakDays: 0,
+		lastActivityDate: null,
+		badges: []
+	};
+}
+/** Hook for managing learning progress state */
+function useLearningProgress(track) {
+	const [progress, setProgress] = useState(() => createDefaultProgress(track.id));
+	const completeStep = useCallback((stepId) => {
+		const step = track.steps.find((s) => s.id === stepId);
+		if (!step || progress.completedStepIds.includes(stepId)) return;
+		setProgress((prev) => {
+			const newCompletedIds = [...prev.completedStepIds, stepId];
+			const xpReward = step.xpReward ?? 0;
+			const nextStep = track.steps.find((s) => !newCompletedIds.includes(s.id));
+			const isTrackComplete = newCompletedIds.length === track.steps.length;
+			const completionBonus = isTrackComplete ? track.completionRewards?.xpBonus ?? 0 : 0;
+			return {
+				...prev,
+				completedStepIds: newCompletedIds,
+				currentStepId: nextStep?.id ?? null,
+				xpEarned: prev.xpEarned + xpReward + completionBonus,
+				lastActivityDate: (/* @__PURE__ */ new Date()).toISOString(),
+				badges: isTrackComplete && track.completionRewards?.badgeKey ? [...prev.badges, track.completionRewards.badgeKey] : prev.badges
+			};
+		});
+	}, [track, progress.completedStepIds]);
+	const resetProgress = useCallback(() => {
+		setProgress(createDefaultProgress(track.id));
+	}, [track.id]);
+	const incrementStreak = useCallback(() => {
+		setProgress((prev) => ({
+			...prev,
+			streakDays: prev.streakDays + 1,
+			lastActivityDate: (/* @__PURE__ */ new Date()).toISOString()
+		}));
+	}, []);
+	return {
+		progress,
+		stats: useMemo(() => {
+			const totalSteps = track.steps.length;
+			const completedSteps = progress.completedStepIds.length;
+			const percentComplete = totalSteps > 0 ? Math.round(completedSteps / totalSteps * 100) : 0;
+			const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
+			return {
+				totalSteps,
+				completedSteps,
+				remainingSteps: totalSteps - completedSteps,
+				percentComplete,
+				totalXp,
+				isComplete: completedSteps === totalSteps
+			};
+		}, [track, progress.completedStepIds]),
+		completeStep,
+		resetProgress,
+		incrementStreak
+	};
+}
+
+//#endregion
+export { useLearningProgress };

package/dist/examples/learning-journey-ui-shared/dist/index.js

@@ -0,0 +1,8 @@
+import { useLearningProgress } from "./hooks/useLearningProgress.js";
+import "./hooks/index.js";
+import { XpBar } from "./components/XpBar.js";
+import { StreakCounter } from "./components/StreakCounter.js";
+import { BadgeDisplay } from "./components/BadgeDisplay.js";
+import { ViewTabs } from "./components/ViewTabs.js";
+import "./components/index.js";
+import "./docs/index.js";

package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/PUBLISHING.docblock.js

@@ -0,0 +1,15 @@
+import { registerDocBlocks } from "./registry.js";
+
+//#region ../learning-journey-ui-shared/dist/libs/contracts/dist/docs/PUBLISHING.docblock.js
+registerDocBlocks([{
+	id: "docs.PUBLISHING",
+	title: "Publishing ContractSpec Libraries",
+	summary: "This guide describes how we release the ContractSpec libraries to npm. We use a dual-track release system: **Stable** (manual) and **Canary** (automatic).",
+	kind: "reference",
+	visibility: "public",
+	route: "/docs/PUBLISHING",
+	tags: ["PUBLISHING"],
+	body: "# Publishing ContractSpec Libraries\n\nThis guide describes how we release the ContractSpec libraries to npm. We use a dual-track release system: **Stable** (manual) and **Canary** (automatic).\n\n## Release Tracks\n\n| Track | Branch | npm Tag | Frequency | Versioning | Use Case |\n|-------|--------|---------|-----------|------------|----------|\n| **Stable** | `release` | `latest` | Manual | SemVer (e.g., `1.7.4`) | Production, external users |\n| **Canary** | `main` | `canary` | Every Push | Snapshot (e.g., `1.7.4-canary...`) | Dev, internal testing |\n\n## Prerequisites\n\n- ✅ `NPM_TOKEN` secret is configured in GitHub (owner or automation token with _publish_ scope).\n- ✅ `GITHUB_TOKEN` (built-in) has permissions to create PRs (enabled by default in new repos).\n- ✅ For stable releases: `release` branch exists and is protected.\n\n## Canary Workflow (Automatic)\n\nEvery commit pushed to `main` triggers the `.github/workflows/publish-canary.yml` workflow.\n\n1. **Trigger**: Push to `main`.\n2. **Versioning**: Runs `changeset version --snapshot canary` to generate a temporary snapshot version.\n3. **Publish**: Packages are published to npm with the `canary` tag using `changeset publish --tag canary`.\n\n### Consuming Canary Builds\n\nTo install the latest bleeding-edge version:\n\n```bash\nnpm install @lssm/lib.contracts@canary\n# or\nbun add @lssm/lib.contracts@canary\n```\n\n## Stable Release Workflow (Manual)\n\nStable releases are managed via the `release` branch using the standard [Changesets Action](https://github.com/changesets/action).\n\n1. **Develop on `main`**: Create features and fixes.\n2. **Add Changesets**: Run `bun changeset` to document changes and impact (major/minor/patch).\n3. **Merge to `release`**: When ready to ship, open a PR from `main` to `release` or merge manually.\n4. **\"Version Packages\" PR**:\n   - The GitHub Action detects new changesets and automatically creates a Pull Request titled **\"Version Packages\"**.\n   - This PR contains the version bumps and updated `CHANGELOG.md` files.\n5. **Merge & Publish**:\n   - Review and merge the \"Version Packages\" PR.\n   - The Action runs again, detects the versions have been bumped, builds the libraries, and publishes them to npm with the `latest` tag.\n\n### Publishing Steps\n\n1. Ensure all changesets are present on `main`.\n2. Merge `main` into `release`:\n   ```bash\n   git checkout release\n   git pull origin release\n   git merge main\n   git push origin release\n   ```\n3. Go to GitHub Pull Requests. You will see a **\"Version Packages\"** PR created by the bot.\n4. Merge that PR.\n5. The release is now live on npm!\n\n## Manual Verification (Optional)\n\nBefore publishing a new version you can run:\n\n```bash\nbun run build:not-apps\nnpx npm-packlist --json packages/libs/contracts\n```\n\n## Rollback\n\nIf a publish fails mid-way, re-run the workflow once the issue is fixed. Already published packages are skipped automatically. Use `npm deprecate <package>@<version>` if we need to warn consumers about a broken release.\n"
+}]);
+
+//#endregion