@contractspec/example.learning-journey-ui-gamified 3.7.6 → 3.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/example.learning-journey-ui-gamified",
-  "version": "3.7.6",
+  "version": "3.7.7",
   "description": "Duolingo-style gamified learning UI for drills and quests.",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -120,20 +120,20 @@
     "dev": "contractspec-bun-build dev",
     "clean": "rimraf dist .turbo",
     "lint": "bun lint:fix",
-    "lint:fix": "eslint src --fix",
-    "lint:check": "eslint src",
+    "lint:fix": "biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .",
+    "lint:check": "biome check .",
     "test": "bun test --pass-with-no-tests",
     "prebuild": "contractspec-bun-build prebuild",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@contractspec/lib.contracts-spec": "3.7.6",
-    "@contractspec/example.learning-journey-ui-shared": "3.7.6",
-    "@contractspec/example.learning-journey-duo-drills": "3.7.6",
-    "@contractspec/example.learning-journey-quest-challenges": "3.7.6",
-    "@contractspec/module.learning-journey": "3.7.6",
-    "@contractspec/lib.design-system": "3.7.6",
-    "@contractspec/lib.ui-kit-web": "3.7.6",
+    "@contractspec/lib.contracts-spec": "4.0.0",
+    "@contractspec/example.learning-journey-ui-shared": "3.7.7",
+    "@contractspec/example.learning-journey-duo-drills": "3.7.7",
+    "@contractspec/example.learning-journey-quest-challenges": "3.7.7",
+    "@contractspec/module.learning-journey": "3.7.7",
+    "@contractspec/lib.design-system": "3.8.0",
+    "@contractspec/lib.ui-kit-web": "3.8.0",
     "react": "19.2.0"
   },
   "devDependencies": {

package/src/GamifiedMiniApp.tsx

@@ -1,93 +1,93 @@
 'use client';
 
-import { useState, useCallback } from 'react';
-import { Card, CardContent } from '@contractspec/lib.ui-kit-web/ui/card';
 import {
-  ViewTabs,
-  useLearningProgress,
-  type LearningView,
-  type LearningMiniAppProps,
+	type LearningMiniAppProps,
+	type LearningView,
+	useLearningProgress,
+	ViewTabs,
 } from '@contractspec/example.learning-journey-ui-shared';
+import { Card, CardContent } from '@contractspec/lib.ui-kit-web/ui/card';
+import { useCallback, useState } from 'react';
 import { Overview } from './views/Overview';
-import { Steps } from './views/Steps';
 import { Progress } from './views/Progress';
+import { Steps } from './views/Steps';
 import { Timeline } from './views/Timeline';
 
 type GamifiedMiniAppProps = Omit<LearningMiniAppProps, 'progress'> & {
-  progress?: LearningMiniAppProps['progress'];
+	progress?: LearningMiniAppProps['progress'];
 };
 
 export function GamifiedMiniApp({
-  track,
-  progress: externalProgress,
-  onStepComplete: externalOnStepComplete,
-  onViewChange,
-  initialView = 'overview',
+	track,
+	progress: externalProgress,
+	onStepComplete: externalOnStepComplete,
+	onViewChange,
+	initialView = 'overview',
 }: GamifiedMiniAppProps) {
-  const [currentView, setCurrentView] = useState<LearningView>(initialView);
+	const [currentView, setCurrentView] = useState<LearningView>(initialView);
 
-  // Use internal progress if not provided externally
-  const { progress: internalProgress, completeStep: internalCompleteStep } =
-    useLearningProgress(track);
+	// Use internal progress if not provided externally
+	const { progress: internalProgress, completeStep: internalCompleteStep } =
+		useLearningProgress(track);
 
-  const progress = externalProgress ?? internalProgress;
+	const progress = externalProgress ?? internalProgress;
 
-  const handleViewChange = useCallback(
-    (view: LearningView) => {
-      setCurrentView(view);
-      onViewChange?.(view);
-    },
-    [onViewChange]
-  );
+	const handleViewChange = useCallback(
+		(view: LearningView) => {
+			setCurrentView(view);
+			onViewChange?.(view);
+		},
+		[onViewChange]
+	);
 
-  const handleStepComplete = useCallback(
-    (stepId: string) => {
-      if (externalOnStepComplete) {
-        externalOnStepComplete(stepId);
-      } else {
-        internalCompleteStep(stepId);
-      }
-    },
-    [externalOnStepComplete, internalCompleteStep]
-  );
+	const handleStepComplete = useCallback(
+		(stepId: string) => {
+			if (externalOnStepComplete) {
+				externalOnStepComplete(stepId);
+			} else {
+				internalCompleteStep(stepId);
+			}
+		},
+		[externalOnStepComplete, internalCompleteStep]
+	);
 
-  const handleStartFromOverview = useCallback(() => {
-    setCurrentView('steps');
-    onViewChange?.('steps');
-  }, [onViewChange]);
+	const handleStartFromOverview = useCallback(() => {
+		setCurrentView('steps');
+		onViewChange?.('steps');
+	}, [onViewChange]);
 
-  const renderView = () => {
-    const viewProps = {
-      track,
-      progress,
-      onStepComplete: handleStepComplete,
-    };
+	const renderView = () => {
+		const viewProps = {
+			track,
+			progress,
+			onStepComplete: handleStepComplete,
+		};
 
-    switch (currentView) {
-      case 'overview':
-        return <Overview {...viewProps} onStart={handleStartFromOverview} />;
-      case 'steps':
-        return <Steps {...viewProps} />;
-      case 'progress':
-        return <Progress {...viewProps} />;
-      case 'timeline':
-        return <Timeline {...viewProps} />;
-      default:
-        return <Overview {...viewProps} onStart={handleStartFromOverview} />;
-    }
-  };
+		switch (currentView) {
+			case 'overview':
+				return <Overview {...viewProps} onStart={handleStartFromOverview} />;
+			case 'steps':
+				return <Steps {...viewProps} />;
+			case 'progress':
+				return <Progress {...viewProps} />;
+			case 'timeline':
+				return <Timeline {...viewProps} />;
+			default:
+				return <Overview {...viewProps} onStart={handleStartFromOverview} />;
+		}
+	};
 
-  return (
-    <div className="space-y-6">
-      {/* Navigation */}
-      <Card>
-        <CardContent className="p-4">
-          <ViewTabs currentView={currentView} onViewChange={handleViewChange} />
-        </CardContent>
-      </Card>
+	return (
+		<div className="space-y-6">
+			{/* Navigation */}
+			<Card>
+				<CardContent className="p-4">
+					<ViewTabs currentView={currentView} onViewChange={handleViewChange} />
+				</CardContent>
+			</Card>
 
-      {/* Current View */}
-      {renderView()}
-    </div>
-  );
+			{/* Current View */}
+			{renderView()}
+		</div>
+	);
 }

package/src/components/DayCalendar.tsx

@@ -3,51 +3,51 @@
 import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
 
 interface DayCalendarProps {
-  totalDays: number;
-  currentDay: number;
-  completedDays: number[];
+	totalDays: number;
+	currentDay: number;
+	completedDays: number[];
 }
 
 export function DayCalendar({
-  totalDays,
-  currentDay,
-  completedDays,
+	totalDays,
+	currentDay,
+	completedDays,
 }: DayCalendarProps) {
-  const days = Array.from({ length: totalDays }, (_, i) => i + 1);
+	const days = Array.from({ length: totalDays }, (_, i) => i + 1);
 
-  return (
-    <div className="grid grid-cols-7 gap-2">
-      {days.map((day) => {
-        const isCompleted = completedDays.includes(day);
-        const isCurrent = day === currentDay;
-        const isLocked = day > currentDay;
+	return (
+		<div className="grid grid-cols-7 gap-2">
+			{days.map((day) => {
+				const isCompleted = completedDays.includes(day);
+				const isCurrent = day === currentDay;
+				const isLocked = day > currentDay;
 
-        return (
-          <div
-            key={day}
-            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'
-            )}
-          >
-            {isCompleted ? (
-              <span className="text-lg">✓</span>
-            ) : isLocked ? (
-              <span className="text-lg">🔒</span>
-            ) : (
-              <>
-                <span className="text-muted-foreground text-xs">Day</span>
-                <span>{day}</span>
-              </>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
+				return (
+					<div
+						key={day}
+						className={cn(
+							'flex h-12 w-12 flex-col items-center justify-center rounded-lg border font-medium text-sm 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'
+						)}
+					>
+						{isCompleted ? (
+							<span className="text-lg">✓</span>
+						) : isLocked ? (
+							<span className="text-lg">🔒</span>
+						) : (
+							<>
+								<span className="text-muted-foreground text-xs">Day</span>
+								<span>{day}</span>
+							</>
+						)}
+					</div>
+				);
+			})}
+		</div>
+	);
 }

package/src/components/FlashCard.tsx

@@ -1,100 +1,100 @@
 'use client';
 
-import { useState } from 'react';
 import { Button } from '@contractspec/lib.design-system';
 import { Card, CardContent } from '@contractspec/lib.ui-kit-web/ui/card';
 import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
 import type { LearningJourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
+import { useState } from 'react';
 
 interface FlashCardProps {
-  step: LearningJourneyStepSpec;
-  isCompleted: boolean;
-  isCurrent: boolean;
-  onComplete?: () => void;
+	step: LearningJourneyStepSpec;
+	isCompleted: boolean;
+	isCurrent: boolean;
+	onComplete?: () => void;
 }
 
 export function FlashCard({
-  step,
-  isCompleted,
-  isCurrent,
-  onComplete,
+	step,
+	isCompleted,
+	isCurrent,
+	onComplete,
 }: FlashCardProps) {
-  const [isFlipped, setIsFlipped] = useState(false);
+	const [isFlipped, setIsFlipped] = useState(false);
 
-  return (
-    <Card
-      className={cn(
-        'relative cursor-pointer overflow-hidden transition-all duration-300',
-        isCurrent && 'ring-primary ring-2',
-        isCompleted && 'opacity-60'
-      )}
-      onClick={() => !isCompleted && setIsFlipped(!isFlipped)}
-    >
-      <CardContent className="p-6">
-        {/* Front of card */}
-        <div
-          className={cn(
-            'space-y-4 transition-opacity duration-200',
-            isFlipped ? 'opacity-0' : 'opacity-100'
-          )}
-        >
-          <div className="flex items-start justify-between">
-            <div className="flex-1">
-              <h3 className="text-lg font-semibold">{step.title}</h3>
-              {step.description && (
-                <p className="text-muted-foreground mt-1 text-sm">
-                  {step.description}
-                </p>
-              )}
-            </div>
-            {step.xpReward && (
-              <span className="rounded-full bg-green-500/10 px-2 py-1 text-xs font-semibold text-green-500">
-                +{step.xpReward} XP
-              </span>
-            )}
-          </div>
+	return (
+		<Card
+			className={cn(
+				'relative cursor-pointer overflow-hidden transition-all duration-300',
+				isCurrent && 'ring-2 ring-primary',
+				isCompleted && 'opacity-60'
+			)}
+			onClick={() => !isCompleted && setIsFlipped(!isFlipped)}
+		>
+			<CardContent className="p-6">
+				{/* Front of card */}
+				<div
+					className={cn(
+						'space-y-4 transition-opacity duration-200',
+						isFlipped ? 'opacity-0' : 'opacity-100'
+					)}
+				>
+					<div className="flex items-start justify-between">
+						<div className="flex-1">
+							<h3 className="font-semibold text-lg">{step.title}</h3>
+							{step.description && (
+								<p className="mt-1 text-muted-foreground text-sm">
+									{step.description}
+								</p>
+							)}
+						</div>
+						{step.xpReward && (
+							<span className="rounded-full bg-green-500/10 px-2 py-1 font-semibold text-green-500 text-xs">
+								+{step.xpReward} XP
+							</span>
+						)}
+					</div>
 
-          {isCompleted && (
-            <div className="flex items-center gap-2 text-green-500">
-              <span>✓</span>
-              <span className="text-sm font-medium">Completed</span>
-            </div>
-          )}
+					{isCompleted && (
+						<div className="flex items-center gap-2 text-green-500">
+							<span>✓</span>
+							<span className="font-medium text-sm">Completed</span>
+						</div>
+					)}
 
-          {isCurrent && !isCompleted && (
-            <p className="text-muted-foreground text-xs">
-              Tap to reveal action
-            </p>
-          )}
-        </div>
+					{isCurrent && !isCompleted && (
+						<p className="text-muted-foreground text-xs">
+							Tap to reveal action
+						</p>
+					)}
+				</div>
 
-        {/* Back of card (action) */}
-        {isFlipped && !isCompleted && (
-          <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">
-            <p className="text-center text-sm">
-              {step.instructions ?? 'Complete this step to earn XP'}
-            </p>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setIsFlipped(false)}
-              >
-                Back
-              </Button>
-              <Button
-                size="sm"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onComplete?.();
-                }}
-              >
-                Mark Complete
-              </Button>
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
+				{/* Back of card (action) */}
+				{isFlipped && !isCompleted && (
+					<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">
+						<p className="text-center text-sm">
+							{step.instructions ?? 'Complete this step to earn XP'}
+						</p>
+						<div className="flex gap-2">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => setIsFlipped(false)}
+							>
+								Back
+							</Button>
+							<Button
+								size="sm"
+								onClick={(e) => {
+									e.stopPropagation();
+									onComplete?.();
+								}}
+							>
+								Mark Complete
+							</Button>
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
 }

package/src/components/MasteryRing.tsx

@@ -3,79 +3,79 @@
 import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
 
 interface MasteryRingProps {
-  label: string;
-  percentage: number;
-  size?: 'sm' | 'md' | 'lg';
-  color?: 'green' | 'blue' | 'violet' | 'orange';
+	label: string;
+	percentage: number;
+	size?: 'sm' | 'md' | 'lg';
+	color?: 'green' | 'blue' | 'violet' | 'orange';
 }
 
 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 },
+	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',
+	green: 'stroke-green-500',
+	blue: 'stroke-blue-500',
+	violet: 'stroke-violet-500',
+	orange: 'stroke-orange-500',
 };
 
 export function MasteryRing({
-  label,
-  percentage,
-  size = 'md',
-  color = 'violet',
+	label,
+	percentage,
+	size = 'md',
+	color = 'violet',
 }: MasteryRingProps) {
-  const styles = sizeStyles[size];
-  const radius = (styles.ring - styles.stroke) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const strokeDashoffset = circumference - (percentage / 100) * circumference;
+	const styles = sizeStyles[size];
+	const radius = (styles.ring - styles.stroke) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const strokeDashoffset = circumference - (percentage / 100) * circumference;
 
-  return (
-    <div
-      className={cn(
-        'relative flex flex-col items-center gap-1',
-        styles.container
-      )}
-    >
-      <svg
-        className="absolute -rotate-90"
-        width={styles.ring}
-        height={styles.ring}
-        viewBox={`0 0 ${styles.ring} ${styles.ring}`}
-      >
-        {/* Background ring */}
-        <circle
-          cx={styles.ring / 2}
-          cy={styles.ring / 2}
-          r={radius}
-          fill="none"
-          strokeWidth={styles.stroke}
-          className="stroke-muted"
-        />
-        {/* Progress ring */}
-        <circle
-          cx={styles.ring / 2}
-          cy={styles.ring / 2}
-          r={radius}
-          fill="none"
-          strokeWidth={styles.stroke}
-          strokeLinecap="round"
-          strokeDasharray={circumference}
-          strokeDashoffset={strokeDashoffset}
-          className={cn('transition-all duration-500', colorStyles[color])}
-        />
-      </svg>
-      <div className="flex h-full flex-col items-center justify-center">
-        <span className={cn('font-bold', styles.text)}>
-          {Math.round(percentage)}%
-        </span>
-      </div>
-      <span className={cn('text-muted-foreground mt-1 truncate', styles.text)}>
-        {label}
-      </span>
-    </div>
-  );
+	return (
+		<div
+			className={cn(
+				'relative flex flex-col items-center gap-1',
+				styles.container
+			)}
+		>
+			<svg
+				className="absolute -rotate-90"
+				width={styles.ring}
+				height={styles.ring}
+				viewBox={`0 0 ${styles.ring} ${styles.ring}`}
+			>
+				{/* Background ring */}
+				<circle
+					cx={styles.ring / 2}
+					cy={styles.ring / 2}
+					r={radius}
+					fill="none"
+					strokeWidth={styles.stroke}
+					className="stroke-muted"
+				/>
+				{/* Progress ring */}
+				<circle
+					cx={styles.ring / 2}
+					cy={styles.ring / 2}
+					r={radius}
+					fill="none"
+					strokeWidth={styles.stroke}
+					strokeLinecap="round"
+					strokeDasharray={circumference}
+					strokeDashoffset={strokeDashoffset}
+					className={cn('transition-all duration-500', colorStyles[color])}
+				/>
+			</svg>
+			<div className="flex h-full flex-col items-center justify-center">
+				<span className={cn('font-bold', styles.text)}>
+					{Math.round(percentage)}%
+				</span>
+			</div>
+			<span className={cn('mt-1 truncate text-muted-foreground', styles.text)}>
+				{label}
+			</span>
+		</div>
+	);
 }

package/src/components/index.ts

@@ -1,3 +1,3 @@
+export { DayCalendar } from './DayCalendar';
 export { FlashCard } from './FlashCard';
 export { MasteryRing } from './MasteryRing';
-export { DayCalendar } from './DayCalendar';