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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/example.learning-journey-ui-coaching",
-  "version": "3.7.6",
+  "version": "3.7.7",
   "description": "Contextual coaching UI with tip cards and engagement tracking.",
   "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-ambient-coach": "3.7.6",
-    "@contractspec/example.learning-journey-crm-onboarding": "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-ambient-coach": "3.7.7",
+    "@contractspec/example.learning-journey-crm-onboarding": "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/CoachingMiniApp.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 CoachingMiniAppProps = Omit<LearningMiniAppProps, 'progress'> & {
-  progress?: LearningMiniAppProps['progress'];
+	progress?: LearningMiniAppProps['progress'];
 };
 
 export function CoachingMiniApp({
-  track,
-  progress: externalProgress,
-  onStepComplete: externalOnStepComplete,
-  onViewChange,
-  initialView = 'overview',
+	track,
+	progress: externalProgress,
+	onStepComplete: externalOnStepComplete,
+	onViewChange,
+	initialView = 'overview',
 }: CoachingMiniAppProps) {
-  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/EngagementMeter.tsx

@@ -1,93 +1,93 @@
 'use client';
 
 interface EngagementMeterProps {
-  acknowledged: number;
-  actioned: number;
-  pending: number;
-  streak?: number;
+	acknowledged: number;
+	actioned: number;
+	pending: number;
+	streak?: number;
 }
 
 export function EngagementMeter({
-  acknowledged,
-  actioned,
-  pending,
-  streak = 0,
+	acknowledged,
+	actioned,
+	pending,
+	streak = 0,
 }: EngagementMeterProps) {
-  const total = acknowledged + actioned + pending;
-  const actionedPercent = total > 0 ? (actioned / total) * 100 : 0;
-  const acknowledgedPercent = total > 0 ? (acknowledged / total) * 100 : 0;
+	const total = acknowledged + actioned + pending;
+	const actionedPercent = total > 0 ? (actioned / total) * 100 : 0;
+	const acknowledgedPercent = total > 0 ? (acknowledged / total) * 100 : 0;
 
-  return (
-    <div className="space-y-4">
-      {/* Donut chart */}
-      <div className="flex items-center justify-center">
-        <div className="relative h-32 w-32">
-          <svg className="h-full w-full -rotate-90" viewBox="0 0 100 100">
-            {/* Background */}
-            <circle
-              cx="50"
-              cy="50"
-              r="40"
-              fill="none"
-              strokeWidth="12"
-              className="stroke-muted"
-            />
-            {/* Actioned (green) */}
-            <circle
-              cx="50"
-              cy="50"
-              r="40"
-              fill="none"
-              strokeWidth="12"
-              strokeLinecap="round"
-              strokeDasharray={`${actionedPercent * 2.51} 251`}
-              className="stroke-green-500 transition-all duration-500"
-            />
-            {/* Acknowledged (amber) - offset by actioned */}
-            <circle
-              cx="50"
-              cy="50"
-              r="40"
-              fill="none"
-              strokeWidth="12"
-              strokeLinecap="round"
-              strokeDasharray={`${acknowledgedPercent * 2.51} 251`}
-              strokeDashoffset={`${-actionedPercent * 2.51}`}
-              className="stroke-amber-500 transition-all duration-500"
-            />
-          </svg>
-          <div className="absolute inset-0 flex flex-col items-center justify-center">
-            <span className="text-2xl font-bold">{total}</span>
-            <span className="text-muted-foreground text-xs">tips</span>
-          </div>
-        </div>
-      </div>
+	return (
+		<div className="space-y-4">
+			{/* Donut chart */}
+			<div className="flex items-center justify-center">
+				<div className="relative h-32 w-32">
+					<svg className="h-full w-full -rotate-90" viewBox="0 0 100 100">
+						{/* Background */}
+						<circle
+							cx="50"
+							cy="50"
+							r="40"
+							fill="none"
+							strokeWidth="12"
+							className="stroke-muted"
+						/>
+						{/* Actioned (green) */}
+						<circle
+							cx="50"
+							cy="50"
+							r="40"
+							fill="none"
+							strokeWidth="12"
+							strokeLinecap="round"
+							strokeDasharray={`${actionedPercent * 2.51} 251`}
+							className="stroke-green-500 transition-all duration-500"
+						/>
+						{/* Acknowledged (amber) - offset by actioned */}
+						<circle
+							cx="50"
+							cy="50"
+							r="40"
+							fill="none"
+							strokeWidth="12"
+							strokeLinecap="round"
+							strokeDasharray={`${acknowledgedPercent * 2.51} 251`}
+							strokeDashoffset={`${-actionedPercent * 2.51}`}
+							className="stroke-amber-500 transition-all duration-500"
+						/>
+					</svg>
+					<div className="absolute inset-0 flex flex-col items-center justify-center">
+						<span className="font-bold text-2xl">{total}</span>
+						<span className="text-muted-foreground text-xs">tips</span>
+					</div>
+				</div>
+			</div>
 
-      {/* Legend */}
-      <div className="flex justify-center gap-4 text-sm">
-        <div className="flex items-center gap-1.5">
-          <div className="h-3 w-3 rounded-full bg-green-500" />
-          <span>Actioned ({actioned})</span>
-        </div>
-        <div className="flex items-center gap-1.5">
-          <div className="h-3 w-3 rounded-full bg-amber-500" />
-          <span>Acknowledged ({acknowledged})</span>
-        </div>
-        <div className="flex items-center gap-1.5">
-          <div className="bg-muted h-3 w-3 rounded-full" />
-          <span>Pending ({pending})</span>
-        </div>
-      </div>
+			{/* Legend */}
+			<div className="flex justify-center gap-4 text-sm">
+				<div className="flex items-center gap-1.5">
+					<div className="h-3 w-3 rounded-full bg-green-500" />
+					<span>Actioned ({actioned})</span>
+				</div>
+				<div className="flex items-center gap-1.5">
+					<div className="h-3 w-3 rounded-full bg-amber-500" />
+					<span>Acknowledged ({acknowledged})</span>
+				</div>
+				<div className="flex items-center gap-1.5">
+					<div className="h-3 w-3 rounded-full bg-muted" />
+					<span>Pending ({pending})</span>
+				</div>
+			</div>
 
-      {/* Streak */}
-      {streak > 0 && (
-        <div className="flex items-center justify-center gap-2 rounded-lg bg-orange-500/10 px-4 py-2">
-          <span className="text-xl">🔥</span>
-          <span className="font-semibold text-orange-500">
-            {streak} day engagement streak!
-          </span>
-        </div>
-      )}
-    </div>
-  );
+			{/* Streak */}
+			{streak > 0 && (
+				<div className="flex items-center justify-center gap-2 rounded-lg bg-orange-500/10 px-4 py-2">
+					<span className="text-xl">🔥</span>
+					<span className="font-semibold text-orange-500">
+						{streak} day engagement streak!
+					</span>
+				</div>
+			)}
+		</div>
+	);
 }

package/src/components/TipCard.tsx

@@ -6,96 +6,96 @@ import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
 import type { LearningJourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
 
 interface TipCardProps {
-  step: LearningJourneyStepSpec;
-  isCompleted: boolean;
-  isCurrent: boolean;
-  onComplete?: () => void;
-  onDismiss?: () => void;
+	step: LearningJourneyStepSpec;
+	isCompleted: boolean;
+	isCurrent: boolean;
+	onComplete?: () => void;
+	onDismiss?: () => void;
 }
 
 const TIP_ICONS: Record<string, string> = {
-  cash_buffer_too_high: '💰',
-  no_savings_goal: '🎯',
-  irregular_savings: '📅',
-  noise_late_evening: '🔇',
-  guest_frequency_high: '👥',
-  shared_space_conflicts: '🏠',
-  default: '💡',
+	cash_buffer_too_high: '💰',
+	no_savings_goal: '🎯',
+	irregular_savings: '📅',
+	noise_late_evening: '🔇',
+	guest_frequency_high: '👥',
+	shared_space_conflicts: '🏠',
+	default: '💡',
 };
 
 export function TipCard({
-  step,
-  isCompleted,
-  isCurrent,
-  onComplete,
-  onDismiss,
+	step,
+	isCompleted,
+	isCurrent,
+	onComplete,
+	onDismiss,
 }: TipCardProps) {
-  const tipId = (step.metadata?.tipId as string) ?? 'default';
-  const icon = TIP_ICONS[tipId] ?? TIP_ICONS.default;
+	const tipId = (step.metadata?.tipId as string) ?? 'default';
+	const icon = TIP_ICONS[tipId] ?? TIP_ICONS.default;
 
-  return (
-    <Card
-      className={cn(
-        'transition-all',
-        isCompleted && 'opacity-60',
-        isCurrent && 'ring-2 ring-amber-500'
-      )}
-    >
-      <CardContent className="p-4">
-        <div className="flex gap-4">
-          {/* Icon */}
-          <div
-            className={cn(
-              'flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl',
-              isCompleted
-                ? 'bg-green-500/10'
-                : isCurrent
-                  ? 'bg-amber-500/10'
-                  : 'bg-muted'
-            )}
-          >
-            {isCompleted ? '✓' : icon}
-          </div>
+	return (
+		<Card
+			className={cn(
+				'transition-all',
+				isCompleted && 'opacity-60',
+				isCurrent && 'ring-2 ring-amber-500'
+			)}
+		>
+			<CardContent className="p-4">
+				<div className="flex gap-4">
+					{/* Icon */}
+					<div
+						className={cn(
+							'flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl',
+							isCompleted
+								? 'bg-green-500/10'
+								: isCurrent
+									? 'bg-amber-500/10'
+									: 'bg-muted'
+						)}
+					>
+						{isCompleted ? '✓' : icon}
+					</div>
 
-          {/* Content */}
-          <div className="min-w-0 flex-1">
-            <div className="flex items-start justify-between gap-2">
-              <h4 className="font-semibold">{step.title}</h4>
-              {step.xpReward && (
-                <span
-                  className={cn(
-                    'shrink-0 rounded-full px-2 py-0.5 text-xs font-semibold',
-                    isCompleted
-                      ? 'bg-green-500/10 text-green-500'
-                      : 'bg-amber-500/10 text-amber-500'
-                  )}
-                >
-                  +{step.xpReward} XP
-                </span>
-              )}
-            </div>
-            <p className="text-muted-foreground mt-1 text-sm">
-              {step.description}
-            </p>
+					{/* Content */}
+					<div className="min-w-0 flex-1">
+						<div className="flex items-start justify-between gap-2">
+							<h4 className="font-semibold">{step.title}</h4>
+							{step.xpReward && (
+								<span
+									className={cn(
+										'shrink-0 rounded-full px-2 py-0.5 font-semibold text-xs',
+										isCompleted
+											? 'bg-green-500/10 text-green-500'
+											: 'bg-amber-500/10 text-amber-500'
+									)}
+								>
+									+{step.xpReward} XP
+								</span>
+							)}
+						</div>
+						<p className="mt-1 text-muted-foreground text-sm">
+							{step.description}
+						</p>
 
-            {/* Actions */}
-            {!isCompleted && (
-              <div className="mt-3 flex flex-wrap gap-2">
-                <Button size="sm" onClick={onComplete}>
-                  Take Action
-                </Button>
-                <Button variant="outline" size="sm" onClick={onDismiss}>
-                  Dismiss
-                </Button>
-              </div>
-            )}
+						{/* Actions */}
+						{!isCompleted && (
+							<div className="mt-3 flex flex-wrap gap-2">
+								<Button size="sm" onClick={onComplete}>
+									Take Action
+								</Button>
+								<Button variant="outline" size="sm" onClick={onDismiss}>
+									Dismiss
+								</Button>
+							</div>
+						)}
 
-            {isCompleted && (
-              <p className="mt-2 text-sm text-green-500">✓ Tip acknowledged</p>
-            )}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
+						{isCompleted && (
+							<p className="mt-2 text-green-500 text-sm">✓ Tip acknowledged</p>
+						)}
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
 }