@lssm/example.learning-journey-ui-coaching 0.0.0-canary-20251217073102 → 0.0.0-canary-20251217083314

package/dist/libs/contracts/dist/docs/tech/templates/runtime.docblock.js

@@ -0,0 +1,20 @@
+import { registerDocBlocks } from "../../registry.js";
+
+//#region ../../libs/contracts/dist/docs/tech/templates/runtime.docblock.js
+const tech_templates_runtime_DocBlocks = [{
+	id: "docs.tech.templates.runtime",
+	title: "ContractSpec Template Runtime (Phase 9)",
+	summary: "Phase 9 introduces a full local-first runtime for templates so anyone can preview apps directly in the browser without provisioning any infrastructure.",
+	kind: "reference",
+	visibility: "public",
+	route: "/docs/tech/templates/runtime",
+	tags: [
+		"tech",
+		"templates",
+		"runtime"
+	],
+	body: "## ContractSpec Template Runtime (Phase 9)\n\nPhase 9 introduces a full local-first runtime for templates so anyone can preview apps directly in the browser without provisioning any infrastructure.\n\n### Building Blocks\n\n- **Local database** – `@lssm/lib.runtime-local` wraps `sql.js` (SQLite WASM) and `IndexedDB` so we can seed demo data, run migrations, and persist state between sessions. Tests point the runtime to `node_modules/sql.js/dist` so CI doesn’t need a browser.\n- **Local GraphQL** – `LocalGraphQLClient` wires Apollo Client + SchemaLink to resolvers for tasks, messaging, and i18n recipes. All `/templates`, `/studio`, and `/sandbox` previews use those resolvers so we never call remote APIs during demos.\n- **Template registry + installer** – `.../templates/registry.ts` stores the catalog (todos, messaging, recipes). `TemplateInstaller` can seed the runtime (`install`) or export a base64 snapshot via the new `saveTemplateToStudio` mutation.\n- **TemplateShell** – Shared UI wrapper that creates a `TemplateRuntimeProvider`, shows `LocalDataIndicator`, and (optionally) surfaces the new `SaveToStudioButton`.\n\n### Runtime Flows\n\n1. `/templates` now opens a modal that renders `TemplateShell` for each template. Users can explore without leaving the marketing site.\n2. `/studio` switches to a tabbed mini-app (Projects, Canvas, Specs, Deploy) to showcase Studio surfaces with mock data. Visitors see a **preview** shell, while authenticated users (Better Auth via Sigil) unlock full persistence, versioning, and deployment controls.\n3. `/sandbox` lets visitors pick a template and mode (Playground, Spec Editor, Visual Builder). The console at the bottom streams runtime events for transparency.\n\n### GraphQL Mutations\n\n- `saveTemplateToStudio(input: SaveTemplateInput!): SaveTemplateResult!` writes a placeholder project + spec so that templates installed from the sandbox appear in Studio. The mutation is intentionally simple right now: it records which template was imported, stores metadata, and returns `{ projectId, status: 'QUEUED' }` for the UI.\n- `saveCanvasDraft(input: SaveCanvasDraftInput!): CanvasVersion!` snapshots the current Visual Builder nodes to a draft version tied to a canvas overlay. Inputs include `canvasId`, arbitrary `nodes` JSON, and an optional `label`. The resolver enforces org/org access before calling `CanvasVersionManager`.\n- `deployCanvasVersion(input: DeployCanvasVersionInput!): CanvasVersion!` promotes a previously saved draft (`versionId`) to the deployed state. The returned object includes `status`, `nodes`, `createdAt`, and `createdBy` for UI timelines.\n- `undoCanvasVersion(input: UndoCanvasInput!): CanvasVersion` rewinds the visual builder to the prior snapshot (returns `null` when history is empty) so Studio’s toolbar can surface “Undo” without shelling out to local storage.\n\n### Studio GraphQL endpoint\n\n- The landing app exposes the Studio schema at `/api/studio/graphql` via Yoga so React Query hooks (`useStudioProjects`, `useCreateStudioProject`, `useDeployStudioProject`, etc.) can talk to the bundle without spinning up a separate server.\n\n### Spec Editor typing\n\n- Studio’s spec editor now preloads Monaco with ambient declarations for `@lssm/lib.contracts` and `zod`, so snippets receive autocomplete and inline errors even before the spec ships to the backend. The helper lives in `presentation/components/studio/organisms/monaco-spec-types.ts` and registers the extra libs once per browser session via `monaco.languages.typescript.typescriptDefaults.addExtraLib`.\n- Compiler options are aligned with our frontend toolchain (ES2020 + React JSX) which means drafts written in the editor behave like the compiled artifacts that flow through Studio pipelines.\n\n### Spec templates\n\n- Selecting a spec type now injects a ready-to-edit scaffold (capability, workflow, policy, dataview, component) so authors start from a canonical layout instead of a blank file. Templates live alongside `SpecEditor.tsx`, and we only overwrite the content when the previous value is empty or when the author explicitly switches types via the dropdown.\n\n### Spec preview\n\n- The validation side panel now embeds a `SpecPreview` widget that shows validation errors alongside transport artifacts (GraphQL schema, REST endpoints, component summaries) once a preview run completes. Tabs let authors toggle between “Validation” and “Artifacts,” mirroring the UX described in the Studio plan.\n\n### Testing\n\n- `src/templates/__tests__/runtime.test.ts` covers todos CRUD, messaging delivery, and recipe locale switching through the local GraphQL API.\n- Studio infrastructure tests live in `src/__tests__/e2e/project-lifecycle.test.ts` and continue to exercise project creation + deploy flows.\n\n### Next Steps\n\nFuture templates can register their React components via `registerTemplateComponents(templateId, components)` so TemplateShell can render them automatically. When new templates are added, remember to:\n\n1. Update the registry entry (schema + tags).\n2. Register components inside `presentation/components/templates`.\n3. Document the template under `docs/templates/`.\n\n\n\n\n\n"
+}];
+registerDocBlocks(tech_templates_runtime_DocBlocks);
+
+//#endregion

package/dist/libs/contracts/dist/docs/tech/vscode-extension.docblock.js

@@ -0,0 +1,101 @@
+import { registerDocBlocks } from "../registry.js";
+
+//#region ../../libs/contracts/dist/docs/tech/vscode-extension.docblock.js
+const tech_vscode_extension_DocBlocks = [{
+	id: "docs.tech.vscode.extension",
+	title: "ContractSpec VS Code Extension",
+	summary: "VS Code extension for spec-first development with validation, scaffolding, and MCP integration.",
+	kind: "reference",
+	visibility: "public",
+	route: "/docs/tech/vscode/extension",
+	tags: [
+		"vscode",
+		"extension",
+		"tooling",
+		"dx"
+	],
+	body: `# ContractSpec VS Code Extension
+
+The ContractSpec VS Code extension provides spec-first development tooling directly in your editor.
+
+## Features
+
+- **Real-time Validation**: Get instant feedback on spec errors and warnings as you save files
+- **Build/Scaffold**: Generate handler and component skeletons from specs (no AI required)
+- **Spec Explorer**: List and navigate all specs in your workspace
+- **Dependency Analysis**: Visualize spec dependencies and detect cycles
+- **MCP Integration**: Search ContractSpec documentation via Model Context Protocol
+- **Snippets**: Code snippets for common ContractSpec patterns
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| \`ContractSpec: Validate Current Spec\` | Validate the currently open spec file |
+| \`ContractSpec: Validate All Specs\` | Validate all spec files in the workspace |
+| \`ContractSpec: Build/Scaffold\` | Generate handler/component from the current spec |
+| \`ContractSpec: List All Specs\` | Show all specs in the workspace |
+| \`ContractSpec: Analyze Dependencies\` | Analyze and visualize spec dependencies |
+| \`ContractSpec: Search Docs (MCP)\` | Search documentation via MCP |
+
+## Configuration
+
+| Setting | Description | Default |
+|---------|-------------|---------|
+| \`contractspec.api.baseUrl\` | Base URL for ContractSpec API (enables MCP + remote telemetry) | \`""\` |
+| \`contractspec.telemetry.posthogHost\` | PostHog host URL for direct telemetry | \`"https://eu.posthog.com"\` |
+| \`contractspec.telemetry.posthogProjectKey\` | PostHog project key for direct telemetry | \`""\` |
+| \`contractspec.validation.onSave\` | Run validation on save | \`true\` |
+| \`contractspec.validation.onOpen\` | Run validation on open | \`true\` |
+
+## Architecture
+
+The extension uses:
+- \`@lssm/module.contractspec-workspace\` for pure analysis + templates
+- \`@lssm/bundle.contractspec-workspace\` for workspace services + adapters
+
+This allows the extension to work without requiring the CLI to be installed.
+
+## Telemetry
+
+The extension uses a hybrid telemetry approach:
+1. If \`contractspec.api.baseUrl\` is configured → send to API \`/api/telemetry/ingest\`
+2. Otherwise → send directly to PostHog (if project key configured)
+
+Telemetry respects VS Code's telemetry settings. No file paths, source code, or PII is collected.
+`
+}, {
+	id: "docs.tech.vscode.snippets",
+	title: "ContractSpec Snippets",
+	summary: "Code snippets for common ContractSpec patterns in VS Code.",
+	kind: "reference",
+	visibility: "public",
+	route: "/docs/tech/vscode/snippets",
+	tags: [
+		"vscode",
+		"snippets",
+		"dx"
+	],
+	body: `# ContractSpec Snippets
+
+The VS Code extension includes snippets for common ContractSpec patterns.
+
+## Available Snippets
+
+| Prefix | Description |
+|--------|-------------|
+| \`contractspec-command\` | Create a new command (write operation) |
+| \`contractspec-query\` | Create a new query (read-only operation) |
+| \`contractspec-event\` | Create a new event |
+| \`contractspec-docblock\` | Create a new DocBlock |
+| \`contractspec-telemetry\` | Create a new TelemetrySpec |
+| \`contractspec-presentation\` | Create a new Presentation |
+
+## Usage
+
+Type the prefix in a TypeScript file and press Tab to expand the snippet. Tab through the placeholders to fill in your values.
+`
+}];
+registerDocBlocks(tech_vscode_extension_DocBlocks);
+
+//#endregion

package/dist/libs/contracts/dist/docs/tech/workflows/overview.docblock.js

@@ -0,0 +1,20 @@
+import { registerDocBlocks } from "../../registry.js";
+
+//#region ../../libs/contracts/dist/docs/tech/workflows/overview.docblock.js
+const tech_workflows_overview_DocBlocks = [{
+	id: "docs.tech.workflows.overview",
+	title: "WorkflowSpec Overview",
+	summary: "WorkflowSpec provides a declarative, versioned format for long-running flows that mix automation and human review. Specs stay inside `@lssm/lib.contracts` (`src/workflow/spec.ts`) so the same definition powers runtime execution, documentation, and future generation.",
+	kind: "reference",
+	visibility: "public",
+	route: "/docs/tech/workflows/overview",
+	tags: [
+		"tech",
+		"workflows",
+		"overview"
+	],
+	body: "# WorkflowSpec Overview\n\n## Purpose\n\nWorkflowSpec provides a declarative, versioned format for long-running flows that mix automation and human review. Specs stay inside `@lssm/lib.contracts` (`src/workflow/spec.ts`) so the same definition powers runtime execution, documentation, and future generation.\n\n## Core Types\n\n- `WorkflowMeta`: ownership metadata (`title`, `domain`, `owners`, `tags`, `stability`) plus `name` and `version`.\n- `WorkflowDefinition`:\n  - `entryStepId?`: optional explicit entry point (defaults to first step).\n  - `steps[]`: ordered list of `Step` descriptors.\n  - `transitions[]`: directed edges between steps with optional expressions.\n  - `sla?`: aggregated timing hints for the overall flow or per-step budgets.\n  - `compensation?`: fallback operations executed when a workflow is rolled back or fails.\n- `Step`:\n  - `type`: `human`, `automation`, or `decision`.\n  - `action`: references either a `ContractSpec` (`operation`) or `FormSpec` (`form`).\n  - Optional `guard`, `timeoutMs`, and retry policy (`maxAttempts`, `backoff`, `delayMs`, `maxDelayMs?`).\n  - `requiredIntegrations?`: integration slot ids that must be bound before the step may execute.\n  - `requiredCapabilities?`: `CapabilityRef[]` that must be enabled in the resolved app config.\n- `Transition`: `from` → `to` with optional `condition` string (simple data expressions).\n\n## Registry & Validation\n\n- `WorkflowRegistry` (`src/workflow/spec.ts`) stores specs by key `<name>.v<version>` and exposes `register`, `list`, and `get`.\n- `validateWorkflowSpec()` (`src/workflow/validation.ts`) checks:\n  - Duplicate step IDs.\n  - Unknown `from`/`to` transitions.\n  - Empty guards/conditions.\n  - Reachability from the entry step.\n  - Cycles in the graph.\n  - Operation/Form references against provided registries.\n- `assertWorkflowSpecValid()` wraps validation and throws `WorkflowValidationError` when errors remain.\n\n## Runtime\n\n- `WorkflowRunner` (`src/workflow/runner.ts`) executes workflows and coordinates steps.\n  - `start(name, version?, initialData?)` returns a `workflowId`.\n  - `executeStep(workflowId, input?)` runs the current step (automation or human).\n  - `getState(workflowId)` retrieves the latest state snapshot.\n  - `cancel(workflowId)` marks the workflow as cancelled.\n  - `preFlightCheck(name, version?, resolvedConfig?)` evaluates integration/capability requirements before the workflow starts.\n  - Throws `WorkflowPreFlightError` if required integration slots are unbound or required capabilities are disabled.\n- `StateStore` (`src/workflow/state.ts`) abstracts persistence. V1 ships with:\n  - `InMemoryStateStore` (`src/workflow/adapters/memory-store.ts`) for tests/dev.\n  - Placeholder factories for file/database adapters (`adapters/file-adapter.ts`, `adapters/db-adapter.ts`).\n- Guard evaluation: expression guards run through `evaluateExpression()` (`src/workflow/expression.ts`); custom policy guards can be provided via `guardEvaluator`.\n- Events: the runner emits `workflow.started`, `workflow.step_completed`, `workflow.step_failed`, and `workflow.cancelled` through the optional `eventEmitter`.\n- React bindings (`@lssm/lib.presentation-runtime-react`):\n  - `useWorkflow` hook (polls state, exposes `executeStep`, `cancel`, `refresh`).\n  - `WorkflowStepper` progress indicator using design-system Stepper.\n  - `WorkflowStepRenderer` helper to render human/automation/decision steps with sensible fallbacks.\n\n## Authoring Checklist\n\n1. Reuse existing operations/forms; create new specs when missing.\n2. Prefer explicit `entryStepId` for clarity (especially with decision branches).\n3. Give automation steps an `operation` and human steps a `form` (warnings surface otherwise).\n4. Use short, meaningful step IDs (`submit`, `review`, `finalize`) to simplify analytics.\n5. Keep guard expressions deterministic; complex policy logic should move to PolicySpec (Phase 2).\n\n## Testing\n\n- Add unit tests for new workflows via `assertWorkflowSpecValid`.\n- Use the new Vitest suites (`validation.test.ts`, `expression.test.ts`, `runner.test.ts`) as examples.\n- CLI support will arrive in Phase 1 PR 3 (`contractspec create --type workflow`).\n\n## Tooling\n\n- `contractspec create --type workflow` scaffolds a WorkflowSpec with interactive prompts.\n- `contractspec build <spec.workflow.ts>` generates a runner scaffold (`.runner.ts`) wired to `WorkflowRunner` and the in-memory store.\n- `contractspec validate` understands `.workflow.ts` files and checks core structure (meta, steps, transitions).\n\n## Next Steps (Non-MVP)\n\n- Persistence adapters (database/file) for workflow state (Phase 2).\n- React bindings (`useWorkflow`, `WorkflowStepper`) and presentation-runtime integration (PR 3).\n- Policy engine integration (`guard.type === 'policy'` validated against PolicySpec).\n- Telemetry hooks for step execution metrics.\n\n"
+}];
+registerDocBlocks(tech_workflows_overview_DocBlocks);
+
+//#endregion

package/dist/libs/design-system/dist/_virtual/rolldown_runtime.js

@@ -0,0 +1,5 @@
+//#region ../../libs/design-system/dist/_virtual/rolldown_runtime.js
+var __esmMin = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+
+//#endregion
+export { __esmMin };

package/dist/libs/design-system/dist/components/atoms/Button.js

@@ -0,0 +1,33 @@
+import { Button } from "../../ui-kit-web/dist/ui/button.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+
+//#region ../../libs/design-system/dist/components/atoms/Button.js
+function Button$1({ children, loading, spinnerPlacement = "start", onPress, onPressIn, onPressOut, onLongPress, onTouchStart, onTouchEnd, onTouchCancel, onMouseDown, onMouseUp, onClick, className, disabled, ...rest }) {
+	const isDisabled = Boolean(disabled || loading);
+	const content = !rest.asChild ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		loading && spinnerPlacement === "start" ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : null,
+		children,
+		loading && spinnerPlacement === "end" ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : null
+	] }) : children;
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		className,
+		disabled: isDisabled,
+		"aria-busy": loading ? true : void 0,
+		"aria-disabled": isDisabled ? true : void 0,
+		onPress: onPress || onClick,
+		onClick: onPress || onClick,
+		onMouseDown: onMouseDown || onPressIn,
+		onMouseUp: onMouseUp || onPressOut,
+		onTouchStart,
+		onTouchEnd: onTouchEnd || onPressOut,
+		onTouchCancel: onTouchCancel || onPressOut,
+		type: rest?.type ?? "button",
+		children: content
+	});
+}
+
+//#endregion
+export { Button$1 };

package/dist/libs/design-system/dist/ui-kit-web/dist/ui/button.js

@@ -0,0 +1,55 @@
+import { cn, init_utils } from "../ui-kit-core/dist/utils.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region ../../libs/design-system/dist/ui-kit-web/dist/ui/button.js
+init_utils();
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+			outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2 has-[>svg]:px-3",
+			sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+			icon: "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const Button = React$1.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		"data-slot": "button",
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		"data-slot": "button",
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+export { Button };

package/dist/libs/design-system/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js

@@ -0,0 +1,13 @@
+import { __esmMin } from "../../../../_virtual/rolldown_runtime.js";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region ../../libs/design-system/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+var init_utils = __esmMin((() => {}));
+init_utils();
+
+//#endregion
+export { cn, init_utils };

package/dist/libs/ui-kit-web/dist/ui/card.js

@@ -0,0 +1,36 @@
+import { cn } from "../ui-kit-core/dist/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../../libs/ui-kit-web/dist/ui/card.js
+function Card({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-2xs", className),
+		...props
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
+		...props
+	});
+}
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-title",
+		className: cn("leading-none font-semibold", className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: cn("px-6", className),
+		...props
+	});
+}
+
+//#endregion
+export { Card, CardContent, CardHeader, CardTitle };

package/dist/libs/ui-kit-web/dist/ui/utils.js

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region ../../libs/ui-kit-web/dist/ui/utils.js
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn };

package/dist/libs/ui-kit-web/dist/ui-kit-core/dist/utils.js

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region ../../libs/ui-kit-web/dist/ui-kit-core/dist/utils.js
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn };

package/dist/views/Overview.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime5 from "react/jsx-runtime";
+import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
+
+//#region src/views/Overview.d.ts
+interface CoachingOverviewProps extends LearningViewProps {
+  onStart?: () => void;
+}
+declare function Overview({
+  track,
+  progress,
+  onStepComplete,
+  onStart
+}: CoachingOverviewProps): react_jsx_runtime5.JSX.Element;
+//#endregion
+export { Overview };

package/dist/views/Overview.js

@@ -0,0 +1,152 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from "../libs/ui-kit-web/dist/ui/card.js";
+import { XpBar } from "../examples/learning-journey-ui-shared/dist/components/XpBar.js";
+import { StreakCounter } from "../examples/learning-journey-ui-shared/dist/components/StreakCounter.js";
+import "../examples/learning-journey-ui-shared/dist/index.js";
+import { Button$1 } from "../libs/design-system/dist/components/atoms/Button.js";
+import { TipCard } from "../components/TipCard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/views/Overview.tsx
+function Overview({ track, progress, onStepComplete, onStart }) {
+	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 activeTips = track.steps.filter((s) => !progress.completedStepIds.includes(s.id)).slice(0, 3);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsx(Card, {
+				className: "overflow-hidden bg-gradient-to-br from-amber-500/10 via-orange-500/10 to-red-500/10",
+				children: /* @__PURE__ */ jsx(CardContent, {
+					className: "p-6",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-center gap-4 text-center md:flex-row md:text-left",
+						children: [
+							/* @__PURE__ */ jsx("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",
+								children: "💡"
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex-1",
+								children: [/* @__PURE__ */ jsx("h1", {
+									className: "text-2xl font-bold",
+									children: track.name
+								}), /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground mt-1",
+									children: track.description
+								})]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "flex items-center gap-4",
+								children: /* @__PURE__ */ jsx(StreakCounter, {
+									days: progress.streakDays,
+									size: "lg"
+								})
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-4 md:grid-cols-3",
+				children: [
+					/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
+						className: "pb-2",
+						children: /* @__PURE__ */ jsx(CardTitle, {
+							className: "text-muted-foreground text-sm font-medium",
+							children: "Active Tips"
+						})
+					}), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx("div", {
+						className: "text-3xl font-bold text-amber-500",
+						children: pendingSteps
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm",
+						children: "tips for you today"
+					})] })] }),
+					/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
+						className: "pb-2",
+						children: /* @__PURE__ */ jsx(CardTitle, {
+							className: "text-muted-foreground text-sm font-medium",
+							children: "Tips Actioned"
+						})
+					}), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx("div", {
+						className: "text-3xl font-bold text-green-500",
+						children: completedSteps
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground text-sm",
+						children: [
+							"out of ",
+							totalSteps,
+							" total"
+						]
+					})] })] }),
+					/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
+						className: "pb-2",
+						children: /* @__PURE__ */ jsx(CardTitle, {
+							className: "text-muted-foreground text-sm font-medium",
+							children: "XP Earned"
+						})
+					}), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx("div", {
+						className: "text-3xl font-bold text-orange-500",
+						children: progress.xpEarned
+					}), /* @__PURE__ */ jsx(XpBar, {
+						current: progress.xpEarned,
+						max: totalXp,
+						showLabel: false,
+						size: "sm"
+					})] })] })
+				]
+			}),
+			activeTips.length > 0 && /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, {
+				className: "flex flex-row items-center justify-between",
+				children: [/* @__PURE__ */ jsxs(CardTitle, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", { children: "💡" }), /* @__PURE__ */ jsx("span", { children: "Tips for You" })]
+				}), activeTips.length < pendingSteps && /* @__PURE__ */ jsxs(Button$1, {
+					variant: "outline",
+					size: "sm",
+					onClick: onStart,
+					children: [
+						"View All (",
+						pendingSteps,
+						")"
+					]
+				})]
+			}), /* @__PURE__ */ jsx(CardContent, {
+				className: "space-y-3",
+				children: activeTips.map((step) => /* @__PURE__ */ jsx(TipCard, {
+					step,
+					isCompleted: false,
+					isCurrent: step.id === activeTips[0]?.id,
+					onComplete: () => onStepComplete?.(step.id)
+				}, step.id))
+			})] }),
+			pendingSteps === 0 && /* @__PURE__ */ jsx(Card, {
+				className: "border-green-500/50 bg-green-500/5",
+				children: /* @__PURE__ */ jsxs(CardContent, {
+					className: "flex items-center gap-4 p-6",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-4xl",
+						children: "🎉"
+					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+						className: "text-lg font-semibold text-green-500",
+						children: "All Tips Actioned!"
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground",
+						children: [
+							"Great job! You've addressed all ",
+							totalSteps,
+							" coaching tips."
+						]
+					})] })]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { Overview };

package/dist/views/Progress.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
+
+//#region src/views/Progress.d.ts
+declare function ProgressView({
+  track,
+  progress
+}: LearningViewProps): react_jsx_runtime4.JSX.Element;
+//#endregion
+export { ProgressView as Progress, ProgressView };

package/dist/views/Progress.js

@@ -0,0 +1,117 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from "../libs/ui-kit-web/dist/ui/card.js";
+import { XpBar } from "../examples/learning-journey-ui-shared/dist/components/XpBar.js";
+import { StreakCounter } from "../examples/learning-journey-ui-shared/dist/components/StreakCounter.js";
+import { BadgeDisplay } from "../examples/learning-journey-ui-shared/dist/components/BadgeDisplay.js";
+import "../examples/learning-journey-ui-shared/dist/index.js";
+import { EngagementMeter } from "../components/EngagementMeter.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/views/Progress.tsx
+function ProgressView({ track, progress }) {
+	const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
+	const completedSteps = progress.completedStepIds.length;
+	const pendingSteps = track.steps.length - completedSteps;
+	const actioned = Math.floor(completedSteps * .7);
+	const acknowledged = completedSteps - actioned;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", { children: "📊" }), /* @__PURE__ */ jsx("span", { children: "Engagement Overview" })]
+			}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(EngagementMeter, {
+				actioned,
+				acknowledged,
+				pending: pendingSteps,
+				streak: progress.streakDays
+			}) })] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-4 md:grid-cols-2",
+				children: [/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
+					className: "pb-2",
+					children: /* @__PURE__ */ jsx(CardTitle, {
+						className: "text-muted-foreground text-sm font-medium",
+						children: "XP Earned"
+					})
+				}), /* @__PURE__ */ jsxs(CardContent, {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-3xl font-bold text-orange-500",
+							children: progress.xpEarned
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [
+								"/ ",
+								totalXp,
+								" XP"
+							]
+						})]
+					}), /* @__PURE__ */ jsx(XpBar, {
+						current: progress.xpEarned,
+						max: totalXp,
+						showLabel: false,
+						size: "lg"
+					})]
+				})] }), /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
+					className: "pb-2",
+					children: /* @__PURE__ */ jsx(CardTitle, {
+						className: "text-muted-foreground text-sm font-medium",
+						children: "Engagement Streak"
+					})
+				}), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-4",
+					children: [/* @__PURE__ */ jsx(StreakCounter, {
+						days: progress.streakDays,
+						size: "lg"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground text-sm",
+						children: progress.streakDays > 0 ? "Keep going!" : "Start your streak today!"
+					})]
+				}) })] })]
+			}),
+			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", { children: "🏅" }), /* @__PURE__ */ jsx("span", { children: "Achievements" })]
+			}) }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx(BadgeDisplay, {
+				badges: progress.badges,
+				size: "lg",
+				maxVisible: 10
+			}), progress.badges.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: "Action tips to unlock achievements!"
+			})] })] }),
+			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", { children: "💡" }), /* @__PURE__ */ jsx("span", { children: "Tip Status" })]
+			}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
+				className: "space-y-3",
+				children: track.steps.map((step) => {
+					const isCompleted = progress.completedStepIds.includes(step.id);
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between rounded-lg border p-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: isCompleted ? "text-green-500" : "text-amber-500",
+								children: isCompleted ? "✓" : "○"
+							}), /* @__PURE__ */ jsx("span", {
+								className: isCompleted ? "text-muted-foreground" : "text-foreground",
+								children: step.title
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							className: `text-sm ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
+							children: isCompleted ? "Actioned" : "Pending"
+						})]
+					}, step.id);
+				})
+			}) })] })
+		]
+	});
+}
+
+//#endregion
+export { ProgressView as Progress, ProgressView };

package/dist/views/Steps.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
+
+//#region src/views/Steps.d.ts
+declare function Steps({
+  track,
+  progress,
+  onStepComplete
+}: LearningViewProps): react_jsx_runtime3.JSX.Element;
+//#endregion
+export { Steps };