@contractspec/example.learning-journey-ui-shared 1.44.0

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,33 @@
+//#region src/example.d.ts
+declare const example: {
+  readonly id: "learning-journey-ui-shared";
+  readonly title: "Learning Journey UI — Shared";
+  readonly summary: "Shared UI components and hooks for learning journey mini-apps.";
+  readonly tags: readonly ["learning", "ui", "shared"];
+  readonly kind: "ui";
+  readonly visibility: "public";
+  readonly docs: {
+    readonly rootDocId: "docs.examples.learning-journey-ui-shared";
+  };
+  readonly entrypoints: {
+    readonly packageName: "@contractspec/example.learning-journey-ui-shared";
+    readonly docs: "./docs";
+  };
+  readonly surfaces: {
+    readonly templates: true;
+    readonly sandbox: {
+      readonly enabled: true;
+      readonly modes: readonly ["playground", "markdown"];
+    };
+    readonly studio: {
+      readonly enabled: true;
+      readonly installable: true;
+    };
+    readonly mcp: {
+      readonly enabled: true;
+    };
+  };
+};
+//#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":";cAAM;EAAA,SAAA,EAoBI,EAAA,4BAAA"}

package/dist/example.js

@@ -0,0 +1,35 @@
+//#region src/example.ts
+const example = {
+	id: "learning-journey-ui-shared",
+	title: "Learning Journey UI — Shared",
+	summary: "Shared UI components and hooks for learning journey mini-apps.",
+	tags: [
+		"learning",
+		"ui",
+		"shared"
+	],
+	kind: "ui",
+	visibility: "public",
+	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":["const example = {\n  id: 'learning-journey-ui-shared',\n  title: 'Learning Journey UI — Shared',\n  summary: 'Shared UI components and hooks for learning journey mini-apps.',\n  tags: ['learning', 'ui', 'shared'],\n  kind: 'ui',\n  visibility: 'public',\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} as const;\n\nexport default example;\n"],"mappings":";AAAA,MAAM,UAAU;CACd,IAAI;CACJ,OAAO;CACP,SAAS;CACT,MAAM;EAAC;EAAY;EAAM;EAAS;CAClC,MAAM;CACN,YAAY;CACZ,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;AAED,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,75 @@
+{
+  "name": "@contractspec/example.learning-journey-ui-shared",
+  "version": "1.44.0",
+  "description": "Shared UI components and hooks for learning journey mini-apps.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "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.schema": "1.44.0",
+    "@contractspec/lib.contracts": "1.44.0",
+    "@contractspec/module.learning-journey": "1.44.0",
+    "@contractspec/lib.design-system": "1.44.0",
+    "@contractspec/lib.ui-kit-web": "1.44.0",
+    "react": "19.2.3"
+  },
+  "devDependencies": {
+    "@contractspec/tool.tsdown": "1.44.0",
+    "@contractspec/tool.typescript": "1.44.0",
+    "@types/react": "^19.1.6",
+    "tsdown": "^0.18.3",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3"
+  },
+  "module": "./dist/index.js",
+  "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>
+  );
+}

package/src/components/StreakCounter.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import type { StreakCounterProps } from '../types';
+
+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',
+  },
+};
+
+export function StreakCounter({
+  days,
+  isActive = true,
+  size = 'md',
+}: StreakCounterProps) {
+  const styles = sizeStyles[size];
+
+  return (
+    <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'
+      )}
+    >
+      <span className={styles.icon} role="img" aria-label="streak">
+        🔥
+      </span>
+      <span className={styles.text}>
+        {days} {days === 1 ? 'day' : 'days'}
+      </span>
+    </div>
+  );
+}

package/src/components/ViewTabs.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Button } from '@contractspec/lib.design-system';
+import type { ViewTabsProps, LearningView } from '../types';
+
+const VIEW_LABELS: Record<LearningView, { label: string; icon: string }> = {
+  overview: { label: 'Overview', icon: '📊' },
+  steps: { label: 'Steps', icon: '📝' },
+  progress: { label: 'Progress', icon: '📈' },
+  timeline: { label: 'Timeline', icon: '📅' },
+};
+
+const DEFAULT_VIEWS: LearningView[] = [
+  'overview',
+  'steps',
+  'progress',
+  'timeline',
+];
+
+export function ViewTabs({
+  currentView,
+  onViewChange,
+  availableViews = DEFAULT_VIEWS,
+}: ViewTabsProps) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {availableViews.map((view) => {
+        const { label, icon } = VIEW_LABELS[view];
+        const isActive = currentView === view;
+
+        return (
+          <Button
+            key={view}
+            variant={isActive ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => onViewChange(view)}
+            className="gap-1.5"
+          >
+            <span>{icon}</span>
+            <span>{label}</span>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/XpBar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Progress } from '@contractspec/lib.ui-kit-web/ui/progress';
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+import type { XpBarProps } from '../types';
+
+const sizeStyles = {
+  sm: 'h-2',
+  md: 'h-3',
+  lg: 'h-4',
+};
+
+const labelSizeStyles = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+export function XpBar({
+  current,
+  max,
+  level,
+  showLabel = true,
+  size = 'md',
+}: XpBarProps) {
+  const percentage = max > 0 ? Math.min((current / max) * 100, 100) : 0;
+
+  return (
+    <div className="w-full space-y-1">
+      {showLabel && (
+        <div
+          className={cn(
+            'flex items-center justify-between',
+            labelSizeStyles[size]
+          )}
+        >
+          <span className="text-muted-foreground font-medium">
+            {level !== undefined && (
+              <span className="text-primary mr-1">Lvl {level}</span>
+            )}
+            XP
+          </span>
+          <span className="font-semibold">
+            {current.toLocaleString()} / {max.toLocaleString()}
+          </span>
+        </div>
+      )}
+      <Progress
+        value={percentage}
+        className={cn('bg-muted', sizeStyles[size])}
+      />
+    </div>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { XpBar } from './XpBar';
+export { StreakCounter } from './StreakCounter';
+export { BadgeDisplay } from './BadgeDisplay';
+export { ViewTabs } from './ViewTabs';

package/src/docs/index.ts

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