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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/example.learning-journey-ui-onboarding",
-  "version": "3.7.6",
+  "version": "3.7.7",
   "description": "Developer onboarding UI with checklists and journey maps.",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -120,21 +120,21 @@
     "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.ui-kit-core": "3.7.6",
-    "@contractspec/lib.contracts-spec": "3.7.6",
-    "@contractspec/example.learning-journey-ui-shared": "3.7.6",
-    "@contractspec/example.learning-journey-studio-onboarding": "3.7.6",
-    "@contractspec/example.learning-journey-platform-tour": "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-studio-onboarding": "3.7.7",
+    "@contractspec/example.learning-journey-platform-tour": "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/OnboardingMiniApp.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 OnboardingMiniAppProps = Omit<LearningMiniAppProps, 'progress'> & {
-  progress?: LearningMiniAppProps['progress'];
+	progress?: LearningMiniAppProps['progress'];
 };
 
 export function OnboardingMiniApp({
-  track,
-  progress: externalProgress,
-  onStepComplete: externalOnStepComplete,
-  onViewChange,
-  initialView = 'overview',
+	track,
+	progress: externalProgress,
+	onStepComplete: externalOnStepComplete,
+	onViewChange,
+	initialView = 'overview',
 }: OnboardingMiniAppProps) {
-  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/CodeSnippet.tsx

@@ -1,56 +1,56 @@
 'use client';
 
-import { useState } from 'react';
 import { Button } from '@contractspec/lib.design-system';
+import { useState } from 'react';
 
 interface CodeSnippetProps {
-  code: string;
-  language?: string;
-  title?: string;
+	code: string;
+	language?: string;
+	title?: string;
 }
 
 export function CodeSnippet({
-  code,
-  language = 'typescript',
-  title,
+	code,
+	language = 'typescript',
+	title,
 }: CodeSnippetProps) {
-  const [copied, setCopied] = useState(false);
+	const [copied, setCopied] = useState(false);
 
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
+	const handleCopy = async () => {
+		await navigator.clipboard.writeText(code);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
 
-  return (
-    <div className="bg-muted/50 overflow-hidden rounded-lg border">
-      {/* Header */}
-      <div className="bg-muted flex items-center justify-between border-b px-4 py-2">
-        <div className="flex items-center gap-2">
-          <span className="text-muted-foreground text-xs font-medium uppercase">
-            {language}
-          </span>
-          {title && (
-            <>
-              <span className="text-muted-foreground">•</span>
-              <span className="text-sm">{title}</span>
-            </>
-          )}
-        </div>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleCopy}
-          className="h-7 text-xs"
-        >
-          {copied ? '✓ Copied' : 'Copy'}
-        </Button>
-      </div>
+	return (
+		<div className="overflow-hidden rounded-lg border bg-muted/50">
+			{/* Header */}
+			<div className="flex items-center justify-between border-b bg-muted px-4 py-2">
+				<div className="flex items-center gap-2">
+					<span className="font-medium text-muted-foreground text-xs uppercase">
+						{language}
+					</span>
+					{title && (
+						<>
+							<span className="text-muted-foreground">•</span>
+							<span className="text-sm">{title}</span>
+						</>
+					)}
+				</div>
+				<Button
+					variant="ghost"
+					size="sm"
+					onClick={handleCopy}
+					className="h-7 text-xs"
+				>
+					{copied ? '✓ Copied' : 'Copy'}
+				</Button>
+			</div>
 
-      {/* Code */}
-      <pre className="overflow-x-auto p-4">
-        <code className="text-sm">{code}</code>
-      </pre>
-    </div>
-  );
+			{/* Code */}
+			<pre className="overflow-x-auto p-4">
+				<code className="text-sm">{code}</code>
+			</pre>
+		</div>
+	);
 }

package/src/components/JourneyMap.tsx

@@ -4,83 +4,83 @@ import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
 import type { LearningJourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
 
 interface JourneyMapProps {
-  steps: LearningJourneyStepSpec[];
-  completedStepIds: string[];
-  currentStepId?: string | null;
+	steps: LearningJourneyStepSpec[];
+	completedStepIds: string[];
+	currentStepId?: string | null;
 }
 
 const SURFACE_ICONS: Record<string, string> = {
-  templates: '📋',
-  'spec-editor': '✏️',
-  regenerator: '🔄',
-  playground: '🎮',
-  evolution: '🤖',
-  dashboard: '📊',
-  settings: '⚙️',
-  default: '📍',
+	templates: '📋',
+	'spec-editor': '✏️',
+	regenerator: '🔄',
+	playground: '🎮',
+	evolution: '🤖',
+	dashboard: '📊',
+	settings: '⚙️',
+	default: '📍',
 };
 
 export function JourneyMap({
-  steps,
-  completedStepIds,
-  currentStepId,
+	steps,
+	completedStepIds,
+	currentStepId,
 }: JourneyMapProps) {
-  return (
-    <div className="relative overflow-x-auto pb-4">
-      <div className="flex min-w-max items-center gap-2">
-        {steps.map((step, index) => {
-          const isCompleted = completedStepIds.includes(step.id);
-          const isCurrent = step.id === currentStepId;
-          const surface = (step.metadata?.surface as string) ?? 'default';
-          const icon = SURFACE_ICONS[surface] ?? SURFACE_ICONS.default;
+	return (
+		<div className="relative overflow-x-auto pb-4">
+			<div className="flex min-w-max items-center gap-2">
+				{steps.map((step, index) => {
+					const isCompleted = completedStepIds.includes(step.id);
+					const isCurrent = step.id === currentStepId;
+					const surface = (step.metadata?.surface as string) ?? 'default';
+					const icon = SURFACE_ICONS[surface] ?? SURFACE_ICONS.default;
 
-          return (
-            <div key={step.id} className="flex items-center">
-              {/* Node */}
-              <div className="flex flex-col items-center gap-2">
-                <div
-                  className={cn(
-                    'flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all',
-                    isCompleted && 'border-green-500 bg-green-500/10',
-                    isCurrent &&
-                      !isCompleted &&
-                      'border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20',
-                    !isCompleted && !isCurrent && 'border-muted bg-muted/50'
-                  )}
-                >
-                  {isCompleted ? '✓' : icon}
-                </div>
-                <div className="text-center">
-                  <p
-                    className={cn(
-                      'max-w-[100px] truncate text-xs font-medium',
-                      isCompleted && 'text-green-500',
-                      isCurrent && !isCompleted && 'text-violet-500',
-                      !isCompleted && !isCurrent && 'text-muted-foreground'
-                    )}
-                  >
-                    {step.title}
-                  </p>
-                </div>
-              </div>
+					return (
+						<div key={step.id} className="flex items-center">
+							{/* Node */}
+							<div className="flex flex-col items-center gap-2">
+								<div
+									className={cn(
+										'flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all',
+										isCompleted && 'border-green-500 bg-green-500/10',
+										isCurrent &&
+											!isCompleted &&
+											'border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20',
+										!isCompleted && !isCurrent && 'border-muted bg-muted/50'
+									)}
+								>
+									{isCompleted ? '✓' : icon}
+								</div>
+								<div className="text-center">
+									<p
+										className={cn(
+											'max-w-[100px] truncate font-medium text-xs',
+											isCompleted && 'text-green-500',
+											isCurrent && !isCompleted && 'text-violet-500',
+											!isCompleted && !isCurrent && 'text-muted-foreground'
+										)}
+									>
+										{step.title}
+									</p>
+								</div>
+							</div>
 
-              {/* Connector */}
-              {index < steps.length - 1 && (
-                <div
-                  className={cn(
-                    'mx-2 h-1 w-8 rounded-full transition-colors',
-                    completedStepIds.includes(steps[index + 1]?.id ?? '')
-                      ? 'bg-green-500'
-                      : isCompleted
-                        ? 'bg-green-500/50'
-                        : 'bg-muted'
-                  )}
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
+							{/* Connector */}
+							{index < steps.length - 1 && (
+								<div
+									className={cn(
+										'mx-2 h-1 w-8 rounded-full transition-colors',
+										completedStepIds.includes(steps[index + 1]?.id ?? '')
+											? 'bg-green-500'
+											: isCompleted
+												? 'bg-green-500/50'
+												: 'bg-muted'
+									)}
+								/>
+							)}
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
 }