@contractspec/example.learning-journey-ui-onboarding 0.0.0-canary-20260113170453

package/dist/views/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","names":[],"sources":["../../src/views/Timeline.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from '@contractspec/lib.ui-kit-web/ui/card';\nimport { JourneyMap } from '../components/JourneyMap';\nimport type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';\n\nexport function Timeline({ track, progress }: LearningViewProps) {\n  // Find current step\n  const currentStepId =\n    track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.id ??\n    null;\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Header */}\n      <div className=\"text-center\">\n        <h2 className=\"text-xl font-bold\">Your Learning Journey</h2>\n        <p className=\"text-muted-foreground\">\n          Follow the path through each surface and feature\n        </p>\n      </div>\n\n      {/* Journey Map */}\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"flex items-center gap-2\">\n            <span>🗺️</span>\n            <span>Journey Map</span>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <JourneyMap\n            steps={track.steps}\n            completedStepIds={progress.completedStepIds}\n            currentStepId={currentStepId}\n          />\n        </CardContent>\n      </Card>\n\n      {/* Detailed Timeline */}\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"flex items-center gap-2\">\n            <span>📍</span>\n            <span>Step by Step</span>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"relative\">\n            {/* Vertical line */}\n            <div className=\"bg-border absolute top-0 left-4 h-full w-0.5\" />\n\n            {/* Steps */}\n            <div className=\"space-y-6\">\n              {track.steps.map((step, index) => {\n                const isCompleted = progress.completedStepIds.includes(step.id);\n                const isCurrent = step.id === currentStepId;\n                const surface = (step.metadata?.surface as string) ?? 'general';\n\n                return (\n                  <div key={step.id} className=\"relative flex gap-4 pl-2\">\n                    {/* Node */}\n                    <div\n                      className={`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${\n                        isCompleted\n                          ? 'border-green-500 bg-green-500 text-white'\n                          : isCurrent\n                            ? 'border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20'\n                            : 'border-border bg-background text-muted-foreground'\n                      }`}\n                    >\n                      {isCompleted ? '✓' : index + 1}\n                    </div>\n\n                    {/* Content */}\n                    <div className=\"flex-1 pb-2\">\n                      <div className=\"rounded-lg border p-4\">\n                        <div className=\"flex items-start justify-between gap-2\">\n                          <div>\n                            <div className=\"flex items-center gap-2\">\n                              <h4\n                                className={`font-semibold ${\n                                  isCompleted\n                                    ? 'text-green-500'\n                                    : isCurrent\n                                      ? 'text-blue-500'\n                                      : 'text-foreground'\n                                }`}\n                              >\n                                {step.title}\n                              </h4>\n                              <span className=\"bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs\">\n                                {surface}\n                              </span>\n                            </div>\n                            <p className=\"text-muted-foreground mt-1 text-sm\">\n                              {step.description}\n                            </p>\n                          </div>\n                          {step.xpReward && (\n                            <span\n                              className={`shrink-0 rounded-full px-2 py-1 text-xs font-semibold ${\n                                isCompleted\n                                  ? 'bg-green-500/10 text-green-500'\n                                  : 'bg-muted text-muted-foreground'\n                              }`}\n                            >\n                              +{step.xpReward} XP\n                            </span>\n                          )}\n                        </div>\n\n                        {/* Status */}\n                        <div className=\"mt-3 text-xs\">\n                          {isCompleted ? (\n                            <span className=\"text-green-500\">✓ Completed</span>\n                          ) : isCurrent ? (\n                            <span className=\"text-blue-500\">→ In Progress</span>\n                          ) : (\n                            <span className=\"text-muted-foreground\">\n                              ○ Not Started\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,SAAS,EAAE,OAAO,YAA+B;CAE/D,MAAM,gBACJ,MAAM,MAAM,MAAM,MAAM,CAAC,SAAS,iBAAiB,SAAS,EAAE,GAAG,CAAC,EAAE,MACpE;AAEF,QACE,qBAAC;EAAI,WAAU;;GAEb,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eAAoB;MAA0B,EAC5D,oBAAC;KAAE,WAAU;eAAwB;MAEjC;KACA;GAGN,qBAAC,mBACC,oBAAC,wBACC,qBAAC;IAAU,WAAU;eACnB,oBAAC,oBAAK,QAAU,EAChB,oBAAC,oBAAK,gBAAkB;KACd,GACD,EACb,oBAAC,yBACC,oBAAC;IACC,OAAO,MAAM;IACb,kBAAkB,SAAS;IACZ;KACf,GACU,IACT;GAGP,qBAAC,mBACC,oBAAC,wBACC,qBAAC;IAAU,WAAU;eACnB,oBAAC,oBAAK,OAAS,EACf,oBAAC,oBAAK,iBAAmB;KACf,GACD,EACb,oBAAC,yBACC,qBAAC;IAAI,WAAU;eAEb,oBAAC,SAAI,WAAU,iDAAiD,EAGhE,oBAAC;KAAI,WAAU;eACZ,MAAM,MAAM,KAAK,MAAM,UAAU;MAChC,MAAM,cAAc,SAAS,iBAAiB,SAAS,KAAK,GAAG;MAC/D,MAAM,YAAY,KAAK,OAAO;MAC9B,MAAM,UAAW,KAAK,UAAU,WAAsB;AAEtD,aACE,qBAAC;OAAkB,WAAU;kBAE3B,oBAAC;QACC,WAAW,wGACT,cACI,6CACA,YACE,mEACA;kBAGP,cAAc,MAAM,QAAQ;SACzB,EAGN,oBAAC;QAAI,WAAU;kBACb,qBAAC;SAAI,WAAU;oBACb,qBAAC;UAAI,WAAU;qBACb,qBAAC,oBACC,qBAAC;WAAI,WAAU;sBACb,oBAAC;YACC,WAAW,iBACT,cACI,mBACA,YACE,kBACA;sBAGP,KAAK;aACH,EACL,oBAAC;YAAK,WAAU;sBACb;aACI;YACH,EACN,oBAAC;WAAE,WAAU;qBACV,KAAK;YACJ,IACA,EACL,KAAK,YACJ,qBAAC;WACC,WAAW,yDACT,cACI,mCACA;;YAEP;YACG,KAAK;YAAS;;YACX;WAEL,EAGN,oBAAC;UAAI,WAAU;oBACZ,cACC,oBAAC;WAAK,WAAU;qBAAiB;YAAkB,GACjD,YACF,oBAAC;WAAK,WAAU;qBAAgB;YAAoB,GAEpD,oBAAC;WAAK,WAAU;qBAAwB;YAEjC;WAEL;UACF;SACF;SAjEE,KAAK,GAkET;OAER;MACE;KACF,GACM,IACT;;GACH"}

package/dist/views/index.d.ts

@@ -0,0 +1,5 @@
+import { Overview } from "./Overview.js";
+import { Steps } from "./Steps.js";
+import { Progress as ProgressView } from "./Progress.js";
+import { Timeline } from "./Timeline.js";
+export { Overview, ProgressView as Progress, Steps, Timeline };

package/dist/views/index.js

@@ -0,0 +1,6 @@
+import { Overview } from "./Overview.js";
+import { Steps } from "./Steps.js";
+import { Progress as ProgressView } from "./Progress.js";
+import { Timeline } from "./Timeline.js";
+
+export { Overview, ProgressView as Progress, Steps, Timeline };

package/example.ts

@@ -0,0 +1 @@
+export { default } from './src/example';

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@contractspec/example.learning-journey-ui-onboarding",
+  "version": "0.0.0-canary-20260113170453",
+  "description": "Developer onboarding UI with checklists and journey maps.",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./components": "./dist/components/index.js",
+    "./components/CodeSnippet": "./dist/components/CodeSnippet.js",
+    "./components/JourneyMap": "./dist/components/JourneyMap.js",
+    "./components/StepChecklist": "./dist/components/StepChecklist.js",
+    "./docs": "./dist/docs/index.js",
+    "./docs/learning-journey-ui-onboarding.docblock": "./dist/docs/learning-journey-ui-onboarding.docblock.js",
+    "./example": "./dist/example.js",
+    "./OnboardingMiniApp": "./dist/OnboardingMiniApp.js",
+    "./views": "./dist/views/index.js",
+    "./views/Overview": "./dist/views/Overview.js",
+    "./views/Progress": "./dist/views/Progress.js",
+    "./views/Steps": "./dist/views/Steps.js",
+    "./views/Timeline": "./dist/views/Timeline.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.ui-kit-core": "0.0.0-canary-20260113170453",
+    "@contractspec/lib.contracts": "0.0.0-canary-20260113170453",
+    "@contractspec/example.learning-journey-ui-shared": "0.0.0-canary-20260113170453",
+    "@contractspec/example.learning-journey-studio-onboarding": "0.0.0-canary-20260113170453",
+    "@contractspec/example.learning-journey-platform-tour": "0.0.0-canary-20260113170453",
+    "@contractspec/module.learning-journey": "0.0.0-canary-20260113170453",
+    "@contractspec/lib.design-system": "0.0.0-canary-20260113170453",
+    "@contractspec/lib.ui-kit-web": "0.0.0-canary-20260113170453",
+    "react": "19.2.3"
+  },
+  "devDependencies": {
+    "@contractspec/tool.tsdown": "0.0.0-canary-20260113170453",
+    "@contractspec/tool.typescript": "0.0.0-canary-20260113170453",
+    "@types/react": "^19.2.8",
+    "tsdown": "^0.19.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.js",
+      "./example": "./dist/example.js",
+      "./docs": "./dist/docs/index.js",
+      "./views": "./dist/views/index.js",
+      "./components": "./dist/components/index.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-onboarding"
+  },
+  "homepage": "https://contractspec.io"
+}

package/src/OnboardingMiniApp.tsx

@@ -0,0 +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,
+} from '@contractspec/example.learning-journey-ui-shared';
+import { Overview } from './views/Overview';
+import { Steps } from './views/Steps';
+import { Progress } from './views/Progress';
+import { Timeline } from './views/Timeline';
+
+type OnboardingMiniAppProps = Omit<LearningMiniAppProps, 'progress'> & {
+  progress?: LearningMiniAppProps['progress'];
+};
+
+export function OnboardingMiniApp({
+  track,
+  progress: externalProgress,
+  onStepComplete: externalOnStepComplete,
+  onViewChange,
+  initialView = 'overview',
+}: OnboardingMiniAppProps) {
+  const [currentView, setCurrentView] = useState<LearningView>(initialView);
+
+  // Use internal progress if not provided externally
+  const { progress: internalProgress, completeStep: internalCompleteStep } =
+    useLearningProgress(track);
+
+  const progress = externalProgress ?? internalProgress;
+
+  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 handleStartFromOverview = useCallback(() => {
+    setCurrentView('steps');
+    onViewChange?.('steps');
+  }, [onViewChange]);
+
+  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} />;
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Navigation */}
+      <Card>
+        <CardContent className="p-4">
+          <ViewTabs currentView={currentView} onViewChange={handleViewChange} />
+        </CardContent>
+      </Card>
+
+      {/* Current View */}
+      {renderView()}
+    </div>
+  );
+}

package/src/components/CodeSnippet.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@contractspec/lib.design-system';
+
+interface CodeSnippetProps {
+  code: string;
+  language?: string;
+  title?: string;
+}
+
+export function CodeSnippet({
+  code,
+  language = 'typescript',
+  title,
+}: CodeSnippetProps) {
+  const [copied, setCopied] = useState(false);
+
+  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>
+
+      {/* Code */}
+      <pre className="overflow-x-auto p-4">
+        <code className="text-sm">{code}</code>
+      </pre>
+    </div>
+  );
+}

package/src/components/JourneyMap.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+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;
+}
+
+const SURFACE_ICONS: Record<string, string> = {
+  templates: '📋',
+  'spec-editor': '✏️',
+  regenerator: '🔄',
+  playground: '🎮',
+  evolution: '🤖',
+  dashboard: '📊',
+  settings: '⚙️',
+  default: '📍',
+};
+
+export function JourneyMap({
+  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 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>
+
+              {/* 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>
+  );
+}

package/src/components/StepChecklist.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { Button } from '@contractspec/lib.design-system';
+import { cn } from '@contractspec/lib.ui-kit-core';
+import type { LearningJourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
+
+interface StepChecklistProps {
+  step: LearningJourneyStepSpec;
+  stepNumber: number;
+  isCompleted: boolean;
+  isCurrent: boolean;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onComplete?: () => void;
+}
+
+export function StepChecklist({
+  step,
+  stepNumber,
+  isCompleted,
+  isCurrent,
+  isExpanded,
+  onToggle,
+  onComplete,
+}: StepChecklistProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-xl border transition-all',
+        isCompleted && 'border-green-500/50 bg-green-500/5',
+        isCurrent && !isCompleted && 'border-violet-500 bg-violet-500/5',
+        !isCompleted && !isCurrent && 'border-border'
+      )}
+    >
+      {/* Header */}
+      <button
+        type="button"
+        className="flex w-full items-center gap-4 p-4 text-left"
+        onClick={onToggle}
+      >
+        {/* Checkbox/Number */}
+        <div
+          className={cn(
+            'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors',
+            isCompleted && 'border-green-500 bg-green-500 text-white',
+            isCurrent && !isCompleted && 'border-violet-500 text-violet-500',
+            !isCompleted &&
+              !isCurrent &&
+              'border-muted-foreground text-muted-foreground'
+          )}
+        >
+          {isCompleted ? '✓' : stepNumber}
+        </div>
+
+        {/* Title & Description */}
+        <div className="min-w-0 flex-1">
+          <h4
+            className={cn(
+              'font-semibold',
+              isCompleted && 'text-green-500',
+              isCurrent && !isCompleted && 'text-foreground',
+              !isCompleted && !isCurrent && 'text-muted-foreground'
+            )}
+          >
+            {step.title}
+          </h4>
+          {!isExpanded && step.description && (
+            <p className="text-muted-foreground truncate text-sm">
+              {step.description}
+            </p>
+          )}
+        </div>
+
+        {/* XP Badge */}
+        {step.xpReward && (
+          <span
+            className={cn(
+              'shrink-0 rounded-full px-2 py-1 text-xs font-semibold',
+              isCompleted
+                ? 'bg-green-500/10 text-green-500'
+                : 'bg-muted text-muted-foreground'
+            )}
+          >
+            +{step.xpReward} XP
+          </span>
+        )}
+
+        {/* Expand indicator */}
+        <span
+          className={cn(
+            'shrink-0 transition-transform',
+            isExpanded && 'rotate-180'
+          )}
+        >
+          ▼
+        </span>
+      </button>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className="border-t px-4 py-4">
+          {step.description && (
+            <p className="text-muted-foreground mb-4">{step.description}</p>
+          )}
+
+          {step.instructions && (
+            <div className="bg-muted mb-4 rounded-lg p-4">
+              <p className="mb-2 text-sm font-medium">Instructions:</p>
+              <p className="text-muted-foreground text-sm">
+                {step.instructions}
+              </p>
+            </div>
+          )}
+
+          {/* Action buttons */}
+          <div className="flex flex-wrap gap-2">
+            {step.actionUrl && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => window.open(step.actionUrl, '_blank')}
+              >
+                {step.actionLabel ?? 'Try it'}
+              </Button>
+            )}
+            {!isCompleted && (
+              <Button size="sm" onClick={onComplete}>
+                Mark as Complete
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export { StepChecklist } from './StepChecklist';
+export { CodeSnippet } from './CodeSnippet';
+export { JourneyMap } from './JourneyMap';

package/src/docs/index.ts

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

package/src/docs/learning-journey-ui-onboarding.docblock.ts

@@ -0,0 +1,18 @@
+import type { DocBlock } from '@contractspec/lib.contracts/docs';
+import { registerDocBlocks } from '@contractspec/lib.contracts/docs';
+
+const blocks: DocBlock[] = [
+  {
+    id: 'docs.examples.learning-journey-ui-onboarding',
+    title: 'Learning Journey UI — Onboarding',
+    summary:
+      'UI mini-app components for onboarding: checklists, snippets, and journey mapping.',
+    kind: 'reference',
+    visibility: 'public',
+    route: '/docs/examples/learning-journey-ui-onboarding',
+    tags: ['learning', 'ui', 'onboarding'],
+    body: `## Includes\n- Onboarding mini-app shell\n- Views: overview, steps, progress, timeline\n- Components: step checklist, code snippet, journey map\n\n## Notes\n- Compose with design system components.\n- Ensure accessible labels and keyboard navigation.`,
+  },
+];
+
+registerDocBlocks(blocks);

package/src/example.ts

@@ -0,0 +1,31 @@
+import { defineExample } from '@contractspec/lib.contracts';
+
+const example = defineExample({
+  meta: {
+    key: 'learning-journey-ui-onboarding',
+    version: '1.0.0',
+    title: 'Learning Journey UI — Onboarding',
+    description:
+      'UI mini-app for onboarding patterns: checklists, code snippets, journey map.',
+    kind: 'ui',
+    visibility: 'public',
+    stability: 'experimental',
+    owners: ['@platform.core'],
+    tags: ['learning', 'ui', 'onboarding'],
+  },
+  docs: {
+    rootDocId: 'docs.examples.learning-journey-ui-onboarding',
+  },
+  entrypoints: {
+    packageName: '@contractspec/example.learning-journey-ui-onboarding',
+    docs: './docs',
+  },
+  surfaces: {
+    templates: true,
+    sandbox: { enabled: true, modes: ['playground', 'markdown'] },
+    studio: { enabled: true, installable: true },
+    mcp: { enabled: true },
+  },
+});
+
+export default example;

package/src/index.ts

@@ -0,0 +1,10 @@
+// Main mini-app
+export { OnboardingMiniApp } from './OnboardingMiniApp';
+
+// Views
+export { Overview, Steps, Progress, Timeline } from './views';
+
+// Components
+export { StepChecklist, CodeSnippet, JourneyMap } from './components';
+export { default as example } from './example';
+import './docs';