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

package/src/components/TipFeed.tsx

@@ -4,98 +4,98 @@ import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
 import type { LearningJourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
 
 interface TipFeedItem {
-  step: LearningJourneyStepSpec;
-  isCompleted: boolean;
-  completedAt?: string;
+	step: LearningJourneyStepSpec;
+	isCompleted: boolean;
+	completedAt?: string;
 }
 
 interface TipFeedProps {
-  items: TipFeedItem[];
+	items: TipFeedItem[];
 }
 
 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 TipFeed({ items }: TipFeedProps) {
-  if (items.length === 0) {
-    return (
-      <div className="text-muted-foreground py-8 text-center">
-        No tips yet. Start engaging with coaching tips!
-      </div>
-    );
-  }
+	if (items.length === 0) {
+		return (
+			<div className="py-8 text-center text-muted-foreground">
+				No tips yet. Start engaging with coaching tips!
+			</div>
+		);
+	}
 
-  return (
-    <div className="relative">
-      {/* Timeline line */}
-      <div className="bg-border absolute top-0 left-4 h-full w-0.5" />
+	return (
+		<div className="relative">
+			{/* Timeline line */}
+			<div className="absolute top-0 left-4 h-full w-0.5 bg-border" />
 
-      {/* Feed items */}
-      <div className="space-y-4">
-        {items.map((item) => {
-          const tipId = (item.step.metadata?.tipId as string) ?? 'default';
-          const icon = TIP_ICONS[tipId] ?? TIP_ICONS.default;
+			{/* Feed items */}
+			<div className="space-y-4">
+				{items.map((item) => {
+					const tipId = (item.step.metadata?.tipId as string) ?? 'default';
+					const icon = TIP_ICONS[tipId] ?? TIP_ICONS.default;
 
-          return (
-            <div key={item.step.id} className="relative flex gap-4 pl-2">
-              {/* Node */}
-              <div
-                className={cn(
-                  'relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm',
-                  item.isCompleted
-                    ? 'bg-green-500 text-white'
-                    : 'bg-muted text-muted-foreground'
-                )}
-              >
-                {item.isCompleted ? '✓' : icon}
-              </div>
+					return (
+						<div key={item.step.id} className="relative flex gap-4 pl-2">
+							{/* Node */}
+							<div
+								className={cn(
+									'relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm',
+									item.isCompleted
+										? 'bg-green-500 text-white'
+										: 'bg-muted text-muted-foreground'
+								)}
+							>
+								{item.isCompleted ? '✓' : icon}
+							</div>
 
-              {/* Content */}
-              <div className="bg-card flex-1 rounded-lg border p-3">
-                <div className="flex items-start justify-between gap-2">
-                  <div>
-                    <p className="font-medium">{item.step.title}</p>
-                    <p className="text-muted-foreground mt-0.5 text-sm">
-                      {item.step.description}
-                    </p>
-                  </div>
-                  {item.step.xpReward && (
-                    <span
-                      className={cn(
-                        'shrink-0 text-xs font-medium',
-                        item.isCompleted
-                          ? 'text-green-500'
-                          : 'text-muted-foreground'
-                      )}
-                    >
-                      +{item.step.xpReward} XP
-                    </span>
-                  )}
-                </div>
+							{/* Content */}
+							<div className="flex-1 rounded-lg border bg-card p-3">
+								<div className="flex items-start justify-between gap-2">
+									<div>
+										<p className="font-medium">{item.step.title}</p>
+										<p className="mt-0.5 text-muted-foreground text-sm">
+											{item.step.description}
+										</p>
+									</div>
+									{item.step.xpReward && (
+										<span
+											className={cn(
+												'shrink-0 font-medium text-xs',
+												item.isCompleted
+													? 'text-green-500'
+													: 'text-muted-foreground'
+											)}
+										>
+											+{item.step.xpReward} XP
+										</span>
+									)}
+								</div>
 
-                {/* Timestamp */}
-                <div className="text-muted-foreground mt-2 flex items-center gap-2 text-xs">
-                  {item.isCompleted ? (
-                    <span className="text-green-500">
-                      ✓ Completed
-                      {item.completedAt && ` • ${item.completedAt}`}
-                    </span>
-                  ) : (
-                    <span>Pending action</span>
-                  )}
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
+								{/* Timestamp */}
+								<div className="mt-2 flex items-center gap-2 text-muted-foreground text-xs">
+									{item.isCompleted ? (
+										<span className="text-green-500">
+											✓ Completed
+											{item.completedAt && ` • ${item.completedAt}`}
+										</span>
+									) : (
+										<span>Pending action</span>
+									)}
+								</div>
+							</div>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
 }

package/src/components/index.ts

@@ -1,3 +1,3 @@
-export { TipCard } from './TipCard';
 export { EngagementMeter } from './EngagementMeter';
+export { TipCard } from './TipCard';
 export { TipFeed } from './TipFeed';

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

@@ -2,16 +2,16 @@ import type { DocBlock } from '@contractspec/lib.contracts-spec/docs';
 import { registerDocBlocks } from '@contractspec/lib.contracts-spec/docs';
 
 const blocks: DocBlock[] = [
-  {
-    id: 'docs.examples.learning-journey-ui-coaching',
-    title: 'Learning Journey UI — Coaching',
-    summary: 'UI mini-app components for coaching: tips, engagement, progress.',
-    kind: 'reference',
-    visibility: 'public',
-    route: '/docs/examples/learning-journey-ui-coaching',
-    tags: ['learning', 'ui', 'coaching'],
-    body: `## Includes\n- Coaching mini-app shell\n- Views: overview, steps, progress, timeline\n- Components: tip card, engagement meter, tip feed\n\n## Notes\n- Compose using design system components.\n- Keep accessibility and mobile-friendly tap targets.`,
-  },
+	{
+		id: 'docs.examples.learning-journey-ui-coaching',
+		title: 'Learning Journey UI — Coaching',
+		summary: 'UI mini-app components for coaching: tips, engagement, progress.',
+		kind: 'reference',
+		visibility: 'public',
+		route: '/docs/examples/learning-journey-ui-coaching',
+		tags: ['learning', 'ui', 'coaching'],
+		body: `## Includes\n- Coaching mini-app shell\n- Views: overview, steps, progress, timeline\n- Components: tip card, engagement meter, tip feed\n\n## Notes\n- Compose using design system components.\n- Keep accessibility and mobile-friendly tap targets.`,
+	},
 ];
 
 registerDocBlocks(blocks);

package/src/example.ts

@@ -1,31 +1,31 @@
 import { defineExample } from '@contractspec/lib.contracts-spec';
 
 const example = defineExample({
-  meta: {
-    key: 'learning-journey-ui-coaching',
-    version: '1.0.0',
-    title: 'Learning Journey UI — Coaching',
-    description:
-      'UI mini-app for coaching patterns: tips, engagement meter, progress.',
-    kind: 'ui',
-    visibility: 'public',
-    stability: 'experimental',
-    owners: ['@platform.core'],
-    tags: ['learning', 'ui', 'coaching'],
-  },
-  docs: {
-    rootDocId: 'docs.examples.learning-journey-ui-coaching',
-  },
-  entrypoints: {
-    packageName: '@contractspec/example.learning-journey-ui-coaching',
-    docs: './docs',
-  },
-  surfaces: {
-    templates: true,
-    sandbox: { enabled: true, modes: ['playground', 'markdown'] },
-    studio: { enabled: true, installable: true },
-    mcp: { enabled: true },
-  },
+	meta: {
+		key: 'learning-journey-ui-coaching',
+		version: '1.0.0',
+		title: 'Learning Journey UI — Coaching',
+		description:
+			'UI mini-app for coaching patterns: tips, engagement meter, progress.',
+		kind: 'ui',
+		visibility: 'public',
+		stability: 'experimental',
+		owners: ['@platform.core'],
+		tags: ['learning', 'ui', 'coaching'],
+	},
+	docs: {
+		rootDocId: 'docs.examples.learning-journey-ui-coaching',
+	},
+	entrypoints: {
+		packageName: '@contractspec/example.learning-journey-ui-coaching',
+		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

@@ -1,11 +1,9 @@
 // Main mini-app
 export { CoachingMiniApp } from './CoachingMiniApp';
-
-// Views
-export { Overview, Steps, Progress, Timeline } from './views';
-
 // Components
-export { TipCard, EngagementMeter, TipFeed } from './components';
-export * from './learning-journey-ui-coaching.feature';
+export { EngagementMeter, TipCard, TipFeed } from './components';
 export { default as example } from './example';
+export * from './learning-journey-ui-coaching.feature';
+// Views
+export { Overview, Progress, Steps, Timeline } from './views';
 import './docs';

package/src/learning-journey-ui-coaching.feature.ts

@@ -1,17 +1,17 @@
 import { defineFeature } from '@contractspec/lib.contracts-spec';
 
 export const LearningJourneyUiCoachingFeature = defineFeature({
-  meta: {
-    key: 'learning-journey-ui-coaching',
-    version: '1.0.0',
-    title: 'Learning Journey UI: Coaching',
-    description:
-      'Coaching UI with tip cards, engagement tracking, and multi-view navigation',
-    domain: 'learning-journey',
-    owners: ['@examples'],
-    tags: ['learning', 'ui', 'coaching', 'tips'],
-    stability: 'experimental',
-  },
+	meta: {
+		key: 'learning-journey-ui-coaching',
+		version: '1.0.0',
+		title: 'Learning Journey UI: Coaching',
+		description:
+			'Coaching UI with tip cards, engagement tracking, and multi-view navigation',
+		domain: 'learning-journey',
+		owners: ['@examples'],
+		tags: ['learning', 'ui', 'coaching', 'tips'],
+		stability: 'experimental',
+	},
 
-  docs: ['docs.examples.learning-journey-ui-coaching'],
+	docs: ['docs.examples.learning-journey-ui-coaching'],
 });

package/src/views/Overview.tsx

@@ -1,157 +1,157 @@
 'use client';
 
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+import {
+	StreakCounter,
+	XpBar,
+} from '@contractspec/example.learning-journey-ui-shared';
 import { Button } from '@contractspec/lib.design-system';
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
 } from '@contractspec/lib.ui-kit-web/ui/card';
-import {
-  XpBar,
-  StreakCounter,
-} from '@contractspec/example.learning-journey-ui-shared';
 import { TipCard } from '../components/TipCard';
-import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
 
 interface CoachingOverviewProps extends LearningViewProps {
-  onStart?: () => void;
+	onStart?: () => void;
 }
 
 export function Overview({
-  track,
-  progress,
-  onStepComplete,
-  onStart,
+	track,
+	progress,
+	onStepComplete,
+	onStart,
 }: CoachingOverviewProps) {
-  const totalXp =
-    track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
+	const totalXp =
+		track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
 
-  const completedSteps = progress.completedStepIds.length;
-  const totalSteps = track.steps.length;
-  const pendingSteps = totalSteps - completedSteps;
+	const completedSteps = progress.completedStepIds.length;
+	const totalSteps = track.steps.length;
+	const pendingSteps = totalSteps - completedSteps;
 
-  // Get active tips (incomplete ones)
-  const activeTips = track.steps
-    .filter((s) => !progress.completedStepIds.includes(s.id))
-    .slice(0, 3);
+	// Get active tips (incomplete ones)
+	const activeTips = track.steps
+		.filter((s) => !progress.completedStepIds.includes(s.id))
+		.slice(0, 3);
 
-  return (
-    <div className="space-y-6">
-      {/* Header Card */}
-      <Card className="overflow-hidden bg-gradient-to-br from-amber-500/10 via-orange-500/10 to-red-500/10">
-        <CardContent className="p-6">
-          <div className="flex flex-col items-center gap-4 text-center md:flex-row md:text-left">
-            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 text-3xl shadow-lg">
-              💡
-            </div>
-            <div className="flex-1">
-              <h1 className="text-2xl font-bold">{track.name}</h1>
-              <p className="text-muted-foreground mt-1">{track.description}</p>
-            </div>
-            <div className="flex items-center gap-4">
-              <StreakCounter days={progress.streakDays} size="lg" />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+	return (
+		<div className="space-y-6">
+			{/* Header Card */}
+			<Card className="overflow-hidden bg-gradient-to-br from-amber-500/10 via-orange-500/10 to-red-500/10">
+				<CardContent className="p-6">
+					<div className="flex flex-col items-center gap-4 text-center md:flex-row md:text-left">
+						<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 text-3xl shadow-lg">
+							💡
+						</div>
+						<div className="flex-1">
+							<h1 className="font-bold text-2xl">{track.name}</h1>
+							<p className="mt-1 text-muted-foreground">{track.description}</p>
+						</div>
+						<div className="flex items-center gap-4">
+							<StreakCounter days={progress.streakDays} size="lg" />
+						</div>
+					</div>
+				</CardContent>
+			</Card>
 
-      {/* Quick Stats */}
-      <div className="grid gap-4 md:grid-cols-3">
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-muted-foreground text-sm font-medium">
-              Active Tips
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-3xl font-bold text-amber-500">
-              {pendingSteps}
-            </div>
-            <p className="text-muted-foreground text-sm">tips for you today</p>
-          </CardContent>
-        </Card>
+			{/* Quick Stats */}
+			<div className="grid gap-4 md:grid-cols-3">
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="font-medium text-muted-foreground text-sm">
+							Active Tips
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="font-bold text-3xl text-amber-500">
+							{pendingSteps}
+						</div>
+						<p className="text-muted-foreground text-sm">tips for you today</p>
+					</CardContent>
+				</Card>
 
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-muted-foreground text-sm font-medium">
-              Tips Actioned
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-3xl font-bold text-green-500">
-              {completedSteps}
-            </div>
-            <p className="text-muted-foreground text-sm">
-              out of {totalSteps} total
-            </p>
-          </CardContent>
-        </Card>
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="font-medium text-muted-foreground text-sm">
+							Tips Actioned
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="font-bold text-3xl text-green-500">
+							{completedSteps}
+						</div>
+						<p className="text-muted-foreground text-sm">
+							out of {totalSteps} total
+						</p>
+					</CardContent>
+				</Card>
 
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-muted-foreground text-sm font-medium">
-              XP Earned
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-3xl font-bold text-orange-500">
-              {progress.xpEarned}
-            </div>
-            <XpBar
-              current={progress.xpEarned}
-              max={totalXp}
-              showLabel={false}
-              size="sm"
-            />
-          </CardContent>
-        </Card>
-      </div>
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="font-medium text-muted-foreground text-sm">
+							XP Earned
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="font-bold text-3xl text-orange-500">
+							{progress.xpEarned}
+						</div>
+						<XpBar
+							current={progress.xpEarned}
+							max={totalXp}
+							showLabel={false}
+							size="sm"
+						/>
+					</CardContent>
+				</Card>
+			</div>
 
-      {/* Active Tips Preview */}
-      {activeTips.length > 0 && (
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle className="flex items-center gap-2">
-              <span>💡</span>
-              <span>Tips for You</span>
-            </CardTitle>
-            {activeTips.length < pendingSteps && (
-              <Button variant="outline" size="sm" onClick={onStart}>
-                View All ({pendingSteps})
-              </Button>
-            )}
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {activeTips.map((step) => (
-              <TipCard
-                key={step.id}
-                step={step}
-                isCompleted={false}
-                isCurrent={step.id === activeTips[0]?.id}
-                onComplete={() => onStepComplete?.(step.id)}
-              />
-            ))}
-          </CardContent>
-        </Card>
-      )}
+			{/* Active Tips Preview */}
+			{activeTips.length > 0 && (
+				<Card>
+					<CardHeader className="flex flex-row items-center justify-between">
+						<CardTitle className="flex items-center gap-2">
+							<span>💡</span>
+							<span>Tips for You</span>
+						</CardTitle>
+						{activeTips.length < pendingSteps && (
+							<Button variant="outline" size="sm" onClick={onStart}>
+								View All ({pendingSteps})
+							</Button>
+						)}
+					</CardHeader>
+					<CardContent className="space-y-3">
+						{activeTips.map((step) => (
+							<TipCard
+								key={step.id}
+								step={step}
+								isCompleted={false}
+								isCurrent={step.id === activeTips[0]?.id}
+								onComplete={() => onStepComplete?.(step.id)}
+							/>
+						))}
+					</CardContent>
+				</Card>
+			)}
 
-      {/* All Complete */}
-      {pendingSteps === 0 && (
-        <Card className="border-green-500/50 bg-green-500/5">
-          <CardContent className="flex items-center gap-4 p-6">
-            <div className="text-4xl">🎉</div>
-            <div>
-              <h3 className="text-lg font-semibold text-green-500">
-                All Tips Actioned!
-              </h3>
-              <p className="text-muted-foreground">
-                Great job! You've addressed all {totalSteps} coaching tips.
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
+			{/* All Complete */}
+			{pendingSteps === 0 && (
+				<Card className="border-green-500/50 bg-green-500/5">
+					<CardContent className="flex items-center gap-4 p-6">
+						<div className="text-4xl">🎉</div>
+						<div>
+							<h3 className="font-semibold text-green-500 text-lg">
+								All Tips Actioned!
+							</h3>
+							<p className="text-muted-foreground">
+								Great job! You've addressed all {totalSteps} coaching tips.
+							</p>
+						</div>
+					</CardContent>
+				</Card>
+			)}
+		</div>
+	);
 }