@contractspec/example.learning-journey-ui-shared 0.0.0-canary-20260113170453

package/dist/components/StreakCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreakCounter.js","names":[],"sources":["../../src/components/StreakCounter.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport type { StreakCounterProps } from '../types';\n\nconst sizeStyles = {\n  sm: {\n    container: 'gap-1 px-2 py-1',\n    icon: 'text-base',\n    text: 'text-xs',\n  },\n  md: {\n    container: 'gap-1.5 px-3 py-1.5',\n    icon: 'text-lg',\n    text: 'text-sm',\n  },\n  lg: {\n    container: 'gap-2 px-4 py-2',\n    icon: 'text-xl',\n    text: 'text-base',\n  },\n};\n\nexport function StreakCounter({\n  days,\n  isActive = true,\n  size = 'md',\n}: StreakCounterProps) {\n  const styles = sizeStyles[size];\n\n  return (\n    <div\n      className={cn(\n        'inline-flex items-center rounded-full font-semibold',\n        styles.container,\n        isActive\n          ? 'bg-orange-500/10 text-orange-500'\n          : 'bg-muted text-muted-foreground'\n      )}\n    >\n      <span className={styles.icon} role=\"img\" aria-label=\"streak\">\n        🔥\n      </span>\n      <span className={styles.text}>\n        {days} {days === 1 ? 'day' : 'days'}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,MAAM,aAAa;CACjB,IAAI;EACF,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACD,IAAI;EACF,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACD,IAAI;EACF,WAAW;EACX,MAAM;EACN,MAAM;EACP;CACF;AAED,SAAgB,cAAc,EAC5B,MACA,WAAW,MACX,OAAO,QACc;CACrB,MAAM,SAAS,WAAW;AAE1B,QACE,qBAAC;EACC,WAAW,GACT,uDACA,OAAO,WACP,WACI,qCACA,iCACL;aAED,oBAAC;GAAK,WAAW,OAAO;GAAM,MAAK;GAAM,cAAW;aAAS;IAEtD,EACP,qBAAC;GAAK,WAAW,OAAO;;IACrB;IAAK;IAAE,SAAS,IAAI,QAAQ;;IACxB;GACH"}

package/dist/components/ViewTabs.d.ts

@@ -0,0 +1,12 @@
+import { ViewTabsProps } from "../types.js";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/components/ViewTabs.d.ts
+declare function ViewTabs({
+  currentView,
+  onViewChange,
+  availableViews
+}: ViewTabsProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+export { ViewTabs };
+//# sourceMappingURL=ViewTabs.d.ts.map

package/dist/components/ViewTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewTabs.d.ts","names":[],"sources":["../../src/components/ViewTabs.tsx"],"sourcesContent":[],"mappings":";;;;iBAmBgB,QAAA;;;;GAIb,gBAAa,kBAAA,CAAA,GAAA,CAAA"}

package/dist/components/ViewTabs.js

@@ -0,0 +1,49 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@contractspec/lib.design-system";
+
+//#region src/components/ViewTabs.tsx
+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, {
+				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 };
+//# sourceMappingURL=ViewTabs.js.map

package/dist/components/ViewTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewTabs.js","names":[],"sources":["../../src/components/ViewTabs.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@contractspec/lib.design-system';\nimport type { ViewTabsProps, LearningView } from '../types';\n\nconst VIEW_LABELS: Record<LearningView, { label: string; icon: string }> = {\n  overview: { label: 'Overview', icon: '📊' },\n  steps: { label: 'Steps', icon: '📝' },\n  progress: { label: 'Progress', icon: '📈' },\n  timeline: { label: 'Timeline', icon: '📅' },\n};\n\nconst DEFAULT_VIEWS: LearningView[] = [\n  'overview',\n  'steps',\n  'progress',\n  'timeline',\n];\n\nexport function ViewTabs({\n  currentView,\n  onViewChange,\n  availableViews = DEFAULT_VIEWS,\n}: ViewTabsProps) {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      {availableViews.map((view) => {\n        const { label, icon } = VIEW_LABELS[view];\n        const isActive = currentView === view;\n\n        return (\n          <Button\n            key={view}\n            variant={isActive ? 'default' : 'outline'}\n            size=\"sm\"\n            onClick={() => onViewChange(view)}\n            className=\"gap-1.5\"\n          >\n            <span>{icon}</span>\n            <span>{label}</span>\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,MAAM,cAAqE;CACzE,UAAU;EAAE,OAAO;EAAY,MAAM;EAAM;CAC3C,OAAO;EAAE,OAAO;EAAS,MAAM;EAAM;CACrC,UAAU;EAAE,OAAO;EAAY,MAAM;EAAM;CAC3C,UAAU;EAAE,OAAO;EAAY,MAAM;EAAM;CAC5C;AAED,MAAM,gBAAgC;CACpC;CACA;CACA;CACA;CACD;AAED,SAAgB,SAAS,EACvB,aACA,cACA,iBAAiB,iBACD;AAChB,QACE,oBAAC;EAAI,WAAU;YACZ,eAAe,KAAK,SAAS;GAC5B,MAAM,EAAE,OAAO,SAAS,YAAY;AAGpC,UACE,qBAAC;IAEC,SALa,gBAAgB,OAKT,YAAY;IAChC,MAAK;IACL,eAAe,aAAa,KAAK;IACjC,WAAU;eAEV,oBAAC,oBAAM,OAAY,EACnB,oBAAC,oBAAM,QAAa;MAPf,KAQE;IAEX;GACE"}

package/dist/components/XpBar.d.ts

@@ -0,0 +1,14 @@
+import { XpBarProps } from "../types.js";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/components/XpBar.d.ts
+declare function XpBar({
+  current,
+  max,
+  level,
+  showLabel,
+  size
+}: XpBarProps): react_jsx_runtime2.JSX.Element;
+//#endregion
+export { XpBar };
+//# sourceMappingURL=XpBar.d.ts.map

package/dist/components/XpBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XpBar.d.ts","names":[],"sources":["../../src/components/XpBar.tsx"],"sourcesContent":[],"mappings":";;;;iBAkBgB,KAAA;;;;;;GAMb,aAAU,kBAAA,CAAA,GAAA,CAAA"}

package/dist/components/XpBar.js

@@ -0,0 +1,47 @@
+'use client';
+
+import { Progress } from "@contractspec/lib.ui-kit-web/ui/progress";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/XpBar.tsx
+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 };
+//# sourceMappingURL=XpBar.js.map

package/dist/components/XpBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XpBar.js","names":[],"sources":["../../src/components/XpBar.tsx"],"sourcesContent":["'use client';\n\nimport { Progress } from '@contractspec/lib.ui-kit-web/ui/progress';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport type { XpBarProps } from '../types';\n\nconst sizeStyles = {\n  sm: 'h-2',\n  md: 'h-3',\n  lg: 'h-4',\n};\n\nconst labelSizeStyles = {\n  sm: 'text-xs',\n  md: 'text-sm',\n  lg: 'text-base',\n};\n\nexport function XpBar({\n  current,\n  max,\n  level,\n  showLabel = true,\n  size = 'md',\n}: XpBarProps) {\n  const percentage = max > 0 ? Math.min((current / max) * 100, 100) : 0;\n\n  return (\n    <div className=\"w-full space-y-1\">\n      {showLabel && (\n        <div\n          className={cn(\n            'flex items-center justify-between',\n            labelSizeStyles[size]\n          )}\n        >\n          <span className=\"text-muted-foreground font-medium\">\n            {level !== undefined && (\n              <span className=\"text-primary mr-1\">Lvl {level}</span>\n            )}\n            XP\n          </span>\n          <span className=\"font-semibold\">\n            {current.toLocaleString()} / {max.toLocaleString()}\n          </span>\n        </div>\n      )}\n      <Progress\n        value={percentage}\n        className={cn('bg-muted', sizeStyles[size])}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAMA,MAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAgB,MAAM,EACpB,SACA,KACA,OACA,YAAY,MACZ,OAAO,QACM;CACb,MAAM,aAAa,MAAM,IAAI,KAAK,IAAK,UAAU,MAAO,KAAK,IAAI,GAAG;AAEpE,QACE,qBAAC;EAAI,WAAU;aACZ,aACC,qBAAC;GACC,WAAW,GACT,qCACA,gBAAgB,MACjB;cAED,qBAAC;IAAK,WAAU;eACb,UAAU,UACT,qBAAC;KAAK,WAAU;gBAAoB,QAAK;MAAa,EACtD;KAEG,EACP,qBAAC;IAAK,WAAU;;KACb,QAAQ,gBAAgB;KAAC;KAAI,IAAI,gBAAgB;;KAC7C;IACH,EAER,oBAAC;GACC,OAAO;GACP,WAAW,GAAG,YAAY,WAAW,MAAM;IAC3C;GACE"}

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/docs/index.d.ts

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

package/dist/docs/index.js

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

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

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

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

@@ -0,0 +1,20 @@
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+
+//#region src/docs/learning-journey-ui-shared.docblock.ts
+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
+//# sourceMappingURL=learning-journey-ui-shared.docblock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"learning-journey-ui-shared.docblock.js","names":[],"sources":["../../src/docs/learning-journey-ui-shared.docblock.ts"],"sourcesContent":["import type { DocBlock } from '@contractspec/lib.contracts/docs';\nimport { registerDocBlocks } from '@contractspec/lib.contracts/docs';\n\nconst blocks: DocBlock[] = [\n  {\n    id: 'docs.examples.learning-journey-ui-shared',\n    title: 'Learning Journey UI — Shared',\n    summary: 'Shared UI components and hooks for learning journey mini-apps.',\n    kind: 'reference',\n    visibility: 'public',\n    route: '/docs/examples/learning-journey-ui-shared',\n    tags: ['learning', 'ui', 'shared'],\n    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.`,\n  },\n];\n\nregisterDocBlocks(blocks);\n"],"mappings":";;;AAgBA,kBAb2B,CACzB;CACE,IAAI;CACJ,OAAO;CACP,SAAS;CACT,MAAM;CACN,YAAY;CACZ,OAAO;CACP,MAAM;EAAC;EAAY;EAAM;EAAS;CAClC,MAAM;CACP,CACF,CAEwB"}

package/dist/example.d.ts

@@ -0,0 +1,7 @@
+import * as _contractspec_lib_contracts0 from "@contractspec/lib.contracts";
+
+//#region src/example.d.ts
+declare const example: _contractspec_lib_contracts0.ExampleSpec;
+//#endregion
+export { example as default };
+//# sourceMappingURL=example.d.ts.map

package/dist/example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"example.d.ts","names":[],"sources":["../src/example.ts"],"sourcesContent":[],"mappings":";;;cAEM,SA0BJ,4BAAA,CA1BW"}

package/dist/example.js

@@ -0,0 +1,42 @@
+import { defineExample } from "@contractspec/lib.contracts";
+
+//#region src/example.ts
+const example = defineExample({
+	meta: {
+		key: "learning-journey-ui-shared",
+		version: "1.0.0",
+		title: "Learning Journey UI — Shared",
+		description: "Shared UI components and hooks for learning journey mini-apps.",
+		kind: "ui",
+		visibility: "public",
+		stability: "experimental",
+		owners: ["@platform.core"],
+		tags: [
+			"learning",
+			"ui",
+			"shared"
+		]
+	},
+	docs: { rootDocId: "docs.examples.learning-journey-ui-shared" },
+	entrypoints: {
+		packageName: "@contractspec/example.learning-journey-ui-shared",
+		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 };
+//# sourceMappingURL=example.js.map

package/dist/example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example.js","names":[],"sources":["../src/example.ts"],"sourcesContent":["import { defineExample } from '@contractspec/lib.contracts';\n\nconst example = defineExample({\n  meta: {\n    key: 'learning-journey-ui-shared',\n    version: '1.0.0',\n    title: 'Learning Journey UI — Shared',\n    description:\n      'Shared UI components and hooks for learning journey mini-apps.',\n    kind: 'ui',\n    visibility: 'public',\n    stability: 'experimental',\n    owners: ['@platform.core'],\n    tags: ['learning', 'ui', 'shared'],\n  },\n  docs: {\n    rootDocId: 'docs.examples.learning-journey-ui-shared',\n  },\n  entrypoints: {\n    packageName: '@contractspec/example.learning-journey-ui-shared',\n    docs: './docs',\n  },\n  surfaces: {\n    templates: true,\n    sandbox: { enabled: true, modes: ['playground', 'markdown'] },\n    studio: { enabled: true, installable: true },\n    mcp: { enabled: true },\n  },\n});\n\nexport default example;\n"],"mappings":";;;AAEA,MAAM,UAAU,cAAc;CAC5B,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aACE;EACF,MAAM;EACN,YAAY;EACZ,WAAW;EACX,QAAQ,CAAC,iBAAiB;EAC1B,MAAM;GAAC;GAAY;GAAM;GAAS;EACnC;CACD,MAAM,EACJ,WAAW,4CACZ;CACD,aAAa;EACX,aAAa;EACb,MAAM;EACP;CACD,UAAU;EACR,WAAW;EACX,SAAS;GAAE,SAAS;GAAM,OAAO,CAAC,cAAc,WAAW;GAAE;EAC7D,QAAQ;GAAE,SAAS;GAAM,aAAa;GAAM;EAC5C,KAAK,EAAE,SAAS,MAAM;EACvB;CACF,CAAC;AAEF,sBAAe"}

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

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

package/dist/hooks/useLearningProgress.d.ts

@@ -0,0 +1,22 @@
+import { LearningProgressState } from "../types.js";
+import { LearningJourneyTrackSpec } from "@contractspec/module.learning-journey/track-spec";
+
+//#region src/hooks/useLearningProgress.d.ts
+/** Hook for managing learning progress state */
+declare function useLearningProgress(track: LearningJourneyTrackSpec): {
+  progress: LearningProgressState;
+  stats: {
+    totalSteps: number;
+    completedSteps: number;
+    remainingSteps: number;
+    percentComplete: number;
+    totalXp: number;
+    isComplete: boolean;
+  };
+  completeStep: (stepId: string) => void;
+  resetProgress: () => void;
+  incrementStreak: () => void;
+};
+//#endregion
+export { useLearningProgress };
+//# sourceMappingURL=useLearningProgress.d.ts.map

package/dist/hooks/useLearningProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLearningProgress.d.ts","names":[],"sources":["../../src/hooks/useLearningProgress.ts"],"sourcesContent":[],"mappings":";;;;;iBAoBgB,mBAAA,QAA2B;EAA3B,QAAA,EAA2B,qBAAR"}

package/dist/hooks/useLearningProgress.js

@@ -0,0 +1,74 @@
+'use client';
+
+import { useCallback, useMemo, useState } from "react";
+
+//#region src/hooks/useLearningProgress.ts
+/** 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 };
+//# sourceMappingURL=useLearningProgress.js.map

package/dist/hooks/useLearningProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLearningProgress.js","names":[],"sources":["../../src/hooks/useLearningProgress.ts"],"sourcesContent":["'use client';\n\nimport { useState, useCallback, useMemo } from 'react';\nimport type { LearningJourneyTrackSpec } from '@contractspec/module.learning-journey/track-spec';\nimport type { LearningProgressState } from '../types';\n\n/** Default progress state for a new track */\nfunction createDefaultProgress(trackId: string): LearningProgressState {\n  return {\n    trackId,\n    completedStepIds: [],\n    currentStepId: null,\n    xpEarned: 0,\n    streakDays: 0,\n    lastActivityDate: null,\n    badges: [],\n  };\n}\n\n/** Hook for managing learning progress state */\nexport function useLearningProgress(track: LearningJourneyTrackSpec) {\n  const [progress, setProgress] = useState<LearningProgressState>(() =>\n    createDefaultProgress(track.id)\n  );\n\n  const completeStep = useCallback(\n    (stepId: string) => {\n      const step = track.steps.find((s) => s.id === stepId);\n      if (!step || progress.completedStepIds.includes(stepId)) return;\n\n      setProgress((prev) => {\n        const newCompletedIds = [...prev.completedStepIds, stepId];\n        const xpReward = step.xpReward ?? 0;\n\n        // Find next incomplete step\n        const nextStep = track.steps.find(\n          (s) => !newCompletedIds.includes(s.id)\n        );\n\n        // Check if track is complete\n        const isTrackComplete = newCompletedIds.length === track.steps.length;\n        const completionBonus = isTrackComplete\n          ? (track.completionRewards?.xpBonus ?? 0)\n          : 0;\n\n        return {\n          ...prev,\n          completedStepIds: newCompletedIds,\n          currentStepId: nextStep?.id ?? null,\n          xpEarned: prev.xpEarned + xpReward + completionBonus,\n          lastActivityDate: new Date().toISOString(),\n          badges:\n            isTrackComplete && track.completionRewards?.badgeKey\n              ? [...prev.badges, track.completionRewards.badgeKey]\n              : prev.badges,\n        };\n      });\n    },\n    [track, progress.completedStepIds]\n  );\n\n  const resetProgress = useCallback(() => {\n    setProgress(createDefaultProgress(track.id));\n  }, [track.id]);\n\n  const incrementStreak = useCallback(() => {\n    setProgress((prev) => ({\n      ...prev,\n      streakDays: prev.streakDays + 1,\n      lastActivityDate: new Date().toISOString(),\n    }));\n  }, []);\n\n  const stats = useMemo(() => {\n    const totalSteps = track.steps.length;\n    const completedSteps = progress.completedStepIds.length;\n    const percentComplete =\n      totalSteps > 0 ? Math.round((completedSteps / totalSteps) * 100) : 0;\n    const totalXp =\n      track.totalXp ??\n      track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) +\n        (track.completionRewards?.xpBonus ?? 0);\n\n    return {\n      totalSteps,\n      completedSteps,\n      remainingSteps: totalSteps - completedSteps,\n      percentComplete,\n      totalXp,\n      isComplete: completedSteps === totalSteps,\n    };\n  }, [track, progress.completedStepIds]);\n\n  return {\n    progress,\n    stats,\n    completeStep,\n    resetProgress,\n    incrementStreak,\n  };\n}\n"],"mappings":";;;;;;AAOA,SAAS,sBAAsB,SAAwC;AACrE,QAAO;EACL;EACA,kBAAkB,EAAE;EACpB,eAAe;EACf,UAAU;EACV,YAAY;EACZ,kBAAkB;EAClB,QAAQ,EAAE;EACX;;;AAIH,SAAgB,oBAAoB,OAAiC;CACnE,MAAM,CAAC,UAAU,eAAe,eAC9B,sBAAsB,MAAM,GAAG,CAChC;CAED,MAAM,eAAe,aAClB,WAAmB;EAClB,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM,EAAE,OAAO,OAAO;AACrD,MAAI,CAAC,QAAQ,SAAS,iBAAiB,SAAS,OAAO,CAAE;AAEzD,eAAa,SAAS;GACpB,MAAM,kBAAkB,CAAC,GAAG,KAAK,kBAAkB,OAAO;GAC1D,MAAM,WAAW,KAAK,YAAY;GAGlC,MAAM,WAAW,MAAM,MAAM,MAC1B,MAAM,CAAC,gBAAgB,SAAS,EAAE,GAAG,CACvC;GAGD,MAAM,kBAAkB,gBAAgB,WAAW,MAAM,MAAM;GAC/D,MAAM,kBAAkB,kBACnB,MAAM,mBAAmB,WAAW,IACrC;AAEJ,UAAO;IACL,GAAG;IACH,kBAAkB;IAClB,eAAe,UAAU,MAAM;IAC/B,UAAU,KAAK,WAAW,WAAW;IACrC,mCAAkB,IAAI,MAAM,EAAC,aAAa;IAC1C,QACE,mBAAmB,MAAM,mBAAmB,WACxC,CAAC,GAAG,KAAK,QAAQ,MAAM,kBAAkB,SAAS,GAClD,KAAK;IACZ;IACD;IAEJ,CAAC,OAAO,SAAS,iBAAiB,CACnC;CAED,MAAM,gBAAgB,kBAAkB;AACtC,cAAY,sBAAsB,MAAM,GAAG,CAAC;IAC3C,CAAC,MAAM,GAAG,CAAC;CAEd,MAAM,kBAAkB,kBAAkB;AACxC,eAAa,UAAU;GACrB,GAAG;GACH,YAAY,KAAK,aAAa;GAC9B,mCAAkB,IAAI,MAAM,EAAC,aAAa;GAC3C,EAAE;IACF,EAAE,CAAC;AAsBN,QAAO;EACL;EACA,OAtBY,cAAc;GAC1B,MAAM,aAAa,MAAM,MAAM;GAC/B,MAAM,iBAAiB,SAAS,iBAAiB;GACjD,MAAM,kBACJ,aAAa,IAAI,KAAK,MAAO,iBAAiB,aAAc,IAAI,GAAG;GACrE,MAAM,UACJ,MAAM,WACN,MAAM,MAAM,QAAQ,KAAK,MAAM,OAAO,EAAE,YAAY,IAAI,EAAE,IACvD,MAAM,mBAAmB,WAAW;AAEzC,UAAO;IACL;IACA;IACA,gBAAgB,aAAa;IAC7B;IACA;IACA,YAAY,mBAAmB;IAChC;KACA,CAAC,OAAO,SAAS,iBAAiB,CAAC;EAKpC;EACA;EACA;EACD"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { BadgeDisplayProps, LearningMiniAppProps, LearningProgressState, LearningView, LearningViewProps, StreakCounterProps, ViewTabsProps, XpBarProps } from "./types.js";
+import { BadgeDisplay } from "./components/BadgeDisplay.js";
+import { StreakCounter } from "./components/StreakCounter.js";
+import { ViewTabs } from "./components/ViewTabs.js";
+import { XpBar } from "./components/XpBar.js";
+import "./components/index.js";
+import example from "./example.js";
+import { useLearningProgress } from "./hooks/useLearningProgress.js";
+export { BadgeDisplay, type BadgeDisplayProps, type LearningMiniAppProps, type LearningProgressState, type LearningView, type LearningViewProps, StreakCounter, type StreakCounterProps, ViewTabs, type ViewTabsProps, XpBar, type XpBarProps, example, useLearningProgress };

package/dist/index.js

@@ -0,0 +1,11 @@
+import example_default from "./example.js";
+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";
+
+export { BadgeDisplay, StreakCounter, ViewTabs, XpBar, example_default as example, useLearningProgress };

package/dist/types.d.ts

@@ -0,0 +1,58 @@
+import { LearningJourneyTrackSpec } from "@contractspec/module.learning-journey/track-spec";
+
+//#region src/types.d.ts
+/** View types for learning mini-apps */
+type LearningView = 'overview' | 'steps' | 'progress' | 'timeline';
+/** Progress state for a learning track */
+interface LearningProgressState {
+  trackId: string;
+  completedStepIds: string[];
+  currentStepId: string | null;
+  xpEarned: number;
+  streakDays: number;
+  lastActivityDate: string | null;
+  badges: string[];
+}
+/** Props for mini-app components */
+interface LearningMiniAppProps {
+  track: LearningJourneyTrackSpec;
+  progress: LearningProgressState;
+  onStepComplete?: (stepId: string) => void;
+  onViewChange?: (view: LearningView) => void;
+  initialView?: LearningView;
+}
+/** Props for view components */
+interface LearningViewProps {
+  track: LearningJourneyTrackSpec;
+  progress: LearningProgressState;
+  onStepComplete?: (stepId: string) => void;
+}
+/** XP bar props */
+interface XpBarProps {
+  current: number;
+  max: number;
+  level?: number;
+  showLabel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+/** Streak counter props */
+interface StreakCounterProps {
+  days: number;
+  isActive?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+/** Badge display props */
+interface BadgeDisplayProps {
+  badges: string[];
+  maxVisible?: number;
+  size?: 'sm' | 'md' | 'lg';
+}
+/** View tabs props */
+interface ViewTabsProps {
+  currentView: LearningView;
+  onViewChange: (view: LearningView) => void;
+  availableViews?: LearningView[];
+}
+//#endregion
+export { BadgeDisplayProps, LearningMiniAppProps, LearningProgressState, LearningView, LearningViewProps, StreakCounterProps, ViewTabsProps, XpBarProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../src/types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,YAAA;AAAZ;AAGiB,UAAA,qBAAA,CAAqB;EAWrB,OAAA,EAAA,MAAA;EACR,gBAAA,EAAA,MAAA,EAAA;EACG,aAAA,EAAA,MAAA,GAAA,IAAA;EAEY,QAAA,EAAA,MAAA;EACR,UAAA,EAAA,MAAA;EAAY,gBAAA,EAAA,MAAA,GAAA,IAAA;EAIX,MAAA,EAAA,MAAA,EAAA;AAOjB;AASA;AAOiB,UAhCA,oBAAA,CAgCiB;EAOjB,KAAA,EAtCR,wBAsCqB;EACf,QAAA,EAtCH,qBAsCG;EACQ,cAAA,CAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EACJ,YAAA,CAAA,EAAA,CAAA,IAAA,EAtCK,YAsCL,EAAA,GAAA,IAAA;EAAY,WAAA,CAAA,EArCf,YAqCe;;;UAjCd,iBAAA;SACR;YACG;;;;UAKK,UAAA;;;;;;;;UASA,kBAAA;;;;;;UAOA,iBAAA;;;;;;UAOA,aAAA;eACF;uBACQ;mBACJ"}

package/example.ts

@@ -0,0 +1 @@
+export { default } from './src/example';

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@contractspec/example.learning-journey-ui-shared",
+  "version": "0.0.0-canary-20260113170453",
+  "description": "Shared UI components and hooks for learning journey mini-apps.",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./components": "./dist/components/index.js",
+    "./components/BadgeDisplay": "./dist/components/BadgeDisplay.js",
+    "./components/StreakCounter": "./dist/components/StreakCounter.js",
+    "./components/ViewTabs": "./dist/components/ViewTabs.js",
+    "./components/XpBar": "./dist/components/XpBar.js",
+    "./docs": "./dist/docs/index.js",
+    "./docs/learning-journey-ui-shared.docblock": "./dist/docs/learning-journey-ui-shared.docblock.js",
+    "./example": "./dist/example.js",
+    "./hooks": "./dist/hooks/index.js",
+    "./hooks/useLearningProgress": "./dist/hooks/useLearningProgress.js",
+    "./types": "./dist/types.js",
+    "./*": "./*"
+  },
+  "scripts": {
+    "publish:pkg": "bun publish --tolerate-republish --ignore-scripts --verbose",
+    "publish:pkg:canary": "bun publish:pkg --tag canary",
+    "build": "bun build:types && bun build:bundle",
+    "build:bundle": "tsdown",
+    "build:types": "tsc --noEmit",
+    "dev": "bun build:bundle --watch",
+    "clean": "rimraf dist .turbo",
+    "lint": "bun lint:fix",
+    "lint:fix": "eslint src --fix",
+    "lint:check": "eslint src",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@contractspec/lib.contracts": "0.0.0-canary-20260113170453",
+    "@contractspec/module.learning-journey": "0.0.0-canary-20260113170453",
+    "@contractspec/lib.design-system": "0.0.0-canary-20260113170453",
+    "@contractspec/lib.ui-kit-web": "0.0.0-canary-20260113170453",
+    "react": "19.2.3"
+  },
+  "devDependencies": {
+    "@contractspec/tool.tsdown": "0.0.0-canary-20260113170453",
+    "@contractspec/tool.typescript": "0.0.0-canary-20260113170453",
+    "@types/react": "^19.2.8",
+    "tsdown": "^0.19.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.js",
+      "./example": "./dist/example.js",
+      "./docs": "./dist/docs/index.js",
+      "./hooks": "./dist/hooks/index.js",
+      "./components": "./dist/components/index.js",
+      "./types": "./dist/types.js",
+      "./*": "./*"
+    },
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lssm-tech/contractspec.git",
+    "directory": "packages/examples/learning-journey-ui-shared"
+  },
+  "homepage": "https://contractspec.io"
+}

package/src/components/BadgeDisplay.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import type { BadgeDisplayProps } from '../types';
+
+const BADGE_ICONS: Record<string, string> = {
+  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',
+};
+
+export function BadgeDisplay({
+  badges,
+  maxVisible = 5,
+  size = 'md',
+}: BadgeDisplayProps) {
+  const visibleBadges = badges.slice(0, maxVisible);
+  const hiddenCount = badges.length - maxVisible;
+
+  if (badges.length === 0) {
+    return (
+      <div className="text-muted-foreground text-sm">No badges earned yet</div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      {visibleBadges.map((badge) => (
+        <div
+          key={badge}
+          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, ' ')}
+        >
+          {BADGE_ICONS[badge] ?? BADGE_ICONS.default}
+        </div>
+      ))}
+      {hiddenCount > 0 && (
+        <div
+          className={cn(
+            'text-muted-foreground bg-muted flex items-center justify-center rounded-full',
+            sizeStyles[size],
+            'text-xs font-medium'
+          )}
+        >
+          +{hiddenCount}
+        </div>
+      )}
+    </div>
+  );
+}