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

package/.turbo/turbo-build.log

@@ -0,0 +1,24 @@
+$ 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-shared/tsdown.config.js 
+ℹ entry: src/index.ts, src/hooks/index.ts, src/components/index.ts, src/types.ts
+ℹ target: esnext
+ℹ tsconfig: tsconfig.json
+ℹ Build start
+ℹ dist/index.mjs                0.25 kB │ gzip: 0.17 kB
+ℹ dist/components/index.mjs     0.17 kB │ gzip: 0.14 kB
+ℹ dist/hooks/index.mjs          0.10 kB │ gzip: 0.09 kB
+ℹ dist/types.mjs                0.01 kB │ gzip: 0.03 kB
+ℹ dist/components-tyJAN4Ru.mjs  4.53 kB │ gzip: 1.63 kB
+ℹ dist/hooks-B-tDvppY.mjs       2.48 kB │ gzip: 0.87 kB
+ℹ dist/index.d.mts              0.65 kB │ gzip: 0.26 kB
+ℹ dist/types.d.mts              0.38 kB │ gzip: 0.19 kB
+ℹ dist/components/index.d.mts   0.16 kB │ gzip: 0.14 kB
+ℹ dist/hooks/index.d.mts        0.10 kB │ gzip: 0.09 kB
+ℹ dist/types-BMAby_Ku.d.mts     1.70 kB │ gzip: 0.60 kB
+ℹ dist/index-EWErSKip.d.mts     0.95 kB │ gzip: 0.37 kB
+ℹ dist/index-D_7WU_xm.d.mts     0.68 kB │ gzip: 0.35 kB
+ℹ 13 files, total: 12.16 kB
+✔ Build complete in 8784ms
+$ tsc --noEmit

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @lssm/example.learning-journey-ui-shared
+
+## 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/module.learning-journey@0.0.0-canary-20251212210835

package/README.md

@@ -0,0 +1,39 @@
+# @lssm/example.learning-journey-ui-shared
+
+Shared UI components and hooks for learning journey mini-apps.
+
+## Components
+
+- **XpBar** - Progress bar showing XP earned vs total
+- **StreakCounter** - Display streak days with fire icon
+- **BadgeDisplay** - Grid of earned badges
+- **ViewTabs** - Tab navigation between views
+
+## Hooks
+
+- **useLearningProgress** - Manage learning progress state for a track
+
+## Usage
+
+```tsx
+import {
+  XpBar,
+  StreakCounter,
+  BadgeDisplay,
+  ViewTabs,
+  useLearningProgress,
+} from '@lssm/example.learning-journey-ui-shared';
+
+function MyLearningApp({ track }) {
+  const { progress, stats, completeStep } = useLearningProgress(track);
+
+  return (
+    <div>
+      <XpBar current={progress.xpEarned} max={stats.totalXp} />
+      <StreakCounter days={progress.streakDays} />
+      <BadgeDisplay badges={progress.badges} />
+    </div>
+  );
+}
+```
+

package/dist/components/index.d.mts

@@ -0,0 +1,2 @@
+import { i as XpBar, n as BadgeDisplay, r as StreakCounter, t as ViewTabs } from "../index-EWErSKip.mjs";
+export { BadgeDisplay, StreakCounter, ViewTabs, XpBar };

package/dist/components/index.mjs

@@ -0,0 +1,3 @@
+import { i as XpBar, n as BadgeDisplay, r as StreakCounter, t as ViewTabs } from "../components-tyJAN4Ru.mjs";
+
+export { BadgeDisplay, StreakCounter, ViewTabs, XpBar };

package/dist/components-tyJAN4Ru.mjs

@@ -0,0 +1,164 @@
+import { Progress } from "@lssm/lib.ui-kit-web/ui/progress";
+import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@lssm/lib.design-system";
+
+//#region src/components/XpBar.tsx
+const sizeStyles$2 = {
+	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$2[size])
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/StreakCounter.tsx
+const sizeStyles$1 = {
+	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$1[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
+//#region src/components/BadgeDisplay.tsx
+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
+//#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 { XpBar as i, BadgeDisplay as n, StreakCounter as r, ViewTabs as t };

package/dist/hooks/index.d.mts

@@ -0,0 +1,2 @@
+import { t as useLearningProgress } from "../index-D_7WU_xm.mjs";
+export { useLearningProgress };

package/dist/hooks/index.mjs

@@ -0,0 +1,3 @@
+import { t as useLearningProgress } from "../hooks-B-tDvppY.mjs";
+
+export { useLearningProgress };

package/dist/hooks-B-tDvppY.mjs

@@ -0,0 +1,71 @@
+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 as t };

package/dist/index-D_7WU_xm.d.mts

@@ -0,0 +1,21 @@
+import { r as LearningProgressState } from "./types-BMAby_Ku.mjs";
+import { LearningJourneyTrackSpec } from "@lssm/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 as t };

package/dist/index-EWErSKip.d.mts

@@ -0,0 +1,34 @@
+import { c as XpBarProps, o as StreakCounterProps, s as ViewTabsProps, t as BadgeDisplayProps } from "./types-BMAby_Ku.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/XpBar.d.ts
+declare function XpBar({
+  current,
+  max,
+  level,
+  showLabel,
+  size
+}: XpBarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/StreakCounter.d.ts
+declare function StreakCounter({
+  days,
+  isActive,
+  size
+}: StreakCounterProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/BadgeDisplay.d.ts
+declare function BadgeDisplay({
+  badges,
+  maxVisible,
+  size
+}: BadgeDisplayProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/ViewTabs.d.ts
+declare function ViewTabs({
+  currentView,
+  onViewChange,
+  availableViews
+}: ViewTabsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { XpBar as i, BadgeDisplay as n, StreakCounter as r, ViewTabs as t };

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+import { a as LearningViewProps, c as XpBarProps, i as LearningView, n as LearningMiniAppProps, o as StreakCounterProps, r as LearningProgressState, s as ViewTabsProps, t as BadgeDisplayProps } from "./types-BMAby_Ku.mjs";
+import { i as XpBar, n as BadgeDisplay, r as StreakCounter, t as ViewTabs } from "./index-EWErSKip.mjs";
+import { t as useLearningProgress } from "./index-D_7WU_xm.mjs";
+export { BadgeDisplay, type BadgeDisplayProps, type LearningMiniAppProps, type LearningProgressState, type LearningView, type LearningViewProps, StreakCounter, type StreakCounterProps, ViewTabs, type ViewTabsProps, XpBar, type XpBarProps, useLearningProgress };

package/dist/index.mjs

@@ -0,0 +1,4 @@
+import { t as useLearningProgress } from "./hooks-B-tDvppY.mjs";
+import { i as XpBar, n as BadgeDisplay, r as StreakCounter, t as ViewTabs } from "./components-tyJAN4Ru.mjs";
+
+export { BadgeDisplay, StreakCounter, ViewTabs, XpBar, useLearningProgress };

package/dist/types-BMAby_Ku.d.mts

@@ -0,0 +1,57 @@
+import { LearningJourneyTrackSpec } from "@lssm/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 { LearningViewProps as a, XpBarProps as c, LearningView as i, LearningMiniAppProps as n, StreakCounterProps as o, LearningProgressState as r, ViewTabsProps as s, BadgeDisplayProps as t };

package/dist/types.d.mts

@@ -0,0 +1,2 @@
+import { a as LearningViewProps, c as XpBarProps, i as LearningView, n as LearningMiniAppProps, o as StreakCounterProps, r as LearningProgressState, s as ViewTabsProps, t as BadgeDisplayProps } from "./types-BMAby_Ku.mjs";
+export { BadgeDisplayProps, LearningMiniAppProps, LearningProgressState, LearningView, LearningViewProps, StreakCounterProps, ViewTabsProps, XpBarProps };

package/dist/types.mjs

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

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@lssm/example.learning-journey-ui-shared",
+  "version": "0.0.0-canary-20251212210835",
+  "description": "Shared UI components and hooks for learning journey mini-apps.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./components": "./src/components/index.ts",
+    "./types": "./src/types.ts",
+    "./*": "./*"
+  },
+  "scripts": {
+    "build": "bun build:bundle && bun build:types",
+    "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": {
+    "@lssm/module.learning-journey": "workspace:*",
+    "@lssm/lib.design-system": "workspace:*",
+    "@lssm/lib.ui-kit-web": "workspace:*",
+    "react": "^19.1.0"
+  },
+  "devDependencies": {
+    "@lssm/tool.tsdown": "workspace:*",
+    "@lssm/tool.typescript": "workspace:*",
+    "@types/react": "^19.1.6",
+    "tsdown": "^0.17.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "module": "./dist/index.js",
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.js",
+      "./hooks": "./dist/hooks/index.js",
+      "./components": "./dist/components/index.js",
+      "./types": "./dist/types.js",
+      "./*": "./*"
+    }
+  }
+}

package/src/components/BadgeDisplay.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { cn } from '@lssm/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,50 @@
+'use client';
+
+import { cn } from '@lssm/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,47 @@
+'use client';
+
+import { Button } from '@lssm/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>
+  );
+}
+