@lssm/example.learning-journey-ui-onboarding 1.43.4 → 6.0.2

package/dist/components/JourneyMap.d.ts

@@ -1,17 +1,8 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
-import { LearningJourneyStepSpec } from "@lssm/module.learning-journey/track-spec";
-
-//#region src/components/JourneyMap.d.ts
+import type { JourneyStepSpec } from '@lssm/module.learning-journey/track-spec';
 interface JourneyMapProps {
-  steps: LearningJourneyStepSpec[];
-  completedStepIds: string[];
-  currentStepId?: string | null;
+    steps: JourneyStepSpec[];
+    completedStepIds: string[];
+    currentStepId?: string | null;
 }
-declare function JourneyMap({
-  steps,
-  completedStepIds,
-  currentStepId
-}: JourneyMapProps): react_jsx_runtime1.JSX.Element;
-//#endregion
-export { JourneyMap };
-//# sourceMappingURL=JourneyMap.d.ts.map
+export declare function JourneyMap({ steps, completedStepIds, currentStepId, }: JourneyMapProps): import("react").JSX.Element;
+export {};

package/dist/components/JourneyMap.js

@@ -1,49 +1,3 @@
 'use client';
-
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
-
-//#region src/components/JourneyMap.tsx
-const SURFACE_ICONS = {
-	templates: "📋",
-	"spec-editor": "✏️",
-	regenerator: "🔄",
-	playground: "🎮",
-	evolution: "🤖",
-	dashboard: "📊",
-	settings: "⚙️",
-	default: "📍"
-};
-function JourneyMap({ steps, completedStepIds, currentStepId }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "relative overflow-x-auto pb-4",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-max items-center gap-2",
-			children: steps.map((step, index) => {
-				const isCompleted = completedStepIds.includes(step.id);
-				const isCurrent = step.id === currentStepId;
-				const icon = SURFACE_ICONS[step.metadata?.surface ?? "default"] ?? SURFACE_ICONS.default;
-				return /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col items-center gap-2",
-						children: [/* @__PURE__ */ jsx("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"),
-							children: isCompleted ? "✓" : icon
-						}), /* @__PURE__ */ jsx("div", {
-							className: "text-center",
-							children: /* @__PURE__ */ jsx("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"),
-								children: step.title
-							})
-						})]
-					}), index < steps.length - 1 && /* @__PURE__ */ jsx("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") })]
-				}, step.id);
-			})
-		})
-	});
-}
-
-//#endregion
-export { JourneyMap };
-//# sourceMappingURL=JourneyMap.js.map
+// @bun
+import{Box as t}from"@lssm/lib.design-system/layout";import{P as g,Text as f}from"@lssm/lib.design-system/typography";import{cn as s}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as r,jsxs as m}from"react/jsx-runtime";var c={templates:"\uD83D\uDCCB","spec-editor":"\u270F\uFE0F",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"\u2699\uFE0F",default:"\uD83D\uDCCD"};function N({steps:a,completedStepIds:l,currentStepId:u}){return r(t,{className:"relative overflow-x-auto pb-4",children:r(t,{className:"flex min-w-max items-center gap-2",children:a.map((o,i)=>{let e=l.includes(o.id),n=o.id===u,d=o.metadata?.surface??"default",x=c[d]??c.default;return m(t,{className:"flex items-center",children:[m(t,{className:"flex flex-col items-center gap-2",children:[r(t,{className:s("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",e&&"border-green-500 bg-green-500/10",n&&!e&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!e&&!n&&"border-muted bg-muted/50"),children:r(f,{children:e?"\u2713":x})}),r(t,{className:"text-center",children:r(g,{className:s("max-w-[100px] truncate font-medium text-xs",e&&"text-green-500",n&&!e&&"text-violet-500",!e&&!n&&"text-muted-foreground"),children:o.title})})]}),i<a.length-1&&r(t,{className:s("mx-2 h-1 w-8 rounded-full transition-colors",l.includes(a[i+1]?.id??"")?"bg-green-500":e?"bg-green-500/50":"bg-muted")})]},o.id)})})})}export{N as JourneyMap};

package/dist/components/StepChecklist.d.ts

@@ -1,25 +1,12 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
-import { LearningJourneyStepSpec } from "@lssm/module.learning-journey/track-spec";
-
-//#region src/components/StepChecklist.d.ts
+import type { JourneyStepSpec } from '@lssm/module.learning-journey/track-spec';
 interface StepChecklistProps {
-  step: LearningJourneyStepSpec;
-  stepNumber: number;
-  isCompleted: boolean;
-  isCurrent: boolean;
-  isExpanded: boolean;
-  onToggle: () => void;
-  onComplete?: () => void;
+    step: JourneyStepSpec;
+    stepNumber: number;
+    isCompleted: boolean;
+    isCurrent: boolean;
+    isExpanded: boolean;
+    onToggle: () => void;
+    onComplete?: () => void;
 }
-declare function StepChecklist({
-  step,
-  stepNumber,
-  isCompleted,
-  isCurrent,
-  isExpanded,
-  onToggle,
-  onComplete
-}: StepChecklistProps): react_jsx_runtime2.JSX.Element;
-//#endregion
-export { StepChecklist };
-//# sourceMappingURL=StepChecklist.d.ts.map
+export declare function StepChecklist({ step, stepNumber, isCompleted, isCurrent, isExpanded, onToggle, onComplete, }: StepChecklistProps): import("react").JSX.Element;
+export {};

package/dist/components/StepChecklist.js

@@ -1,80 +1,3 @@
 'use client';
-
-import { Button } from "@lssm/lib.design-system";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@lssm/lib.ui-kit-core";
-
-//#region src/components/StepChecklist.tsx
-function StepChecklist({ step, stepNumber, isCompleted, isCurrent, isExpanded, onToggle, onComplete }) {
-	return /* @__PURE__ */ jsxs("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"),
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "flex w-full items-center gap-4 p-4 text-left",
-			onClick: onToggle,
-			children: [
-				/* @__PURE__ */ jsx("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"),
-					children: isCompleted ? "✓" : stepNumber
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "min-w-0 flex-1",
-					children: [/* @__PURE__ */ jsx("h4", {
-						className: cn("font-semibold", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-foreground", !isCompleted && !isCurrent && "text-muted-foreground"),
-						children: step.title
-					}), !isExpanded && step.description && /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground truncate text-sm",
-						children: step.description
-					})]
-				}),
-				step.xpReward && /* @__PURE__ */ jsxs("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"),
-					children: [
-						"+",
-						step.xpReward,
-						" XP"
-					]
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
-					children: "▼"
-				})
-			]
-		}), isExpanded && /* @__PURE__ */ jsxs("div", {
-			className: "border-t px-4 py-4",
-			children: [
-				step.description && /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground mb-4",
-					children: step.description
-				}),
-				step.instructions && /* @__PURE__ */ jsxs("div", {
-					className: "bg-muted mb-4 rounded-lg p-4",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "mb-2 text-sm font-medium",
-						children: "Instructions:"
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground text-sm",
-						children: step.instructions
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-wrap gap-2",
-					children: [step.actionUrl && /* @__PURE__ */ jsx(Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => window.open(step.actionUrl, "_blank"),
-						children: step.actionLabel ?? "Try it"
-					}), !isCompleted && /* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						onClick: onComplete,
-						children: "Mark as Complete"
-					})]
-				})
-			]
-		})]
-	});
-}
-
-//#endregion
-export { StepChecklist };
-//# sourceMappingURL=StepChecklist.js.map
+// @bun
+import{Button as c}from"@lssm/lib.design-system";import{Box as a}from"@lssm/lib.design-system/layout";import{H4 as b,P as s,Text as l}from"@lssm/lib.design-system/typography";import{cn as i}from"@lssm/lib.ui-kit-core";import{jsx as o,jsxs as r}from"react/jsx-runtime";function k({step:e,stepNumber:u,isCompleted:t,isCurrent:n,isExpanded:m,onToggle:x,onComplete:d}){return r(a,{className:i("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",n&&!t&&"border-violet-500 bg-violet-500/5",!t&&!n&&"border-border"),children:[r(c,{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:x,children:[o(a,{className:i("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",t&&"border-green-500 bg-green-500 text-white",n&&!t&&"border-violet-500 text-violet-500",!t&&!n&&"border-muted-foreground text-muted-foreground"),children:o(l,{children:t?"\u2713":u})}),r(a,{className:"min-w-0 flex-1",children:[o(b,{className:i("font-semibold",t&&"text-green-500",n&&!t&&"text-foreground",!t&&!n&&"text-muted-foreground"),children:e.title}),!m&&e.description&&o(s,{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&r(l,{className:i("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",t?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),o(l,{className:i("shrink-0 transition-transform",m&&"rotate-180"),children:"\u25BC"})]}),m&&r(a,{className:"border-t px-4 py-4",children:[e.description&&o(s,{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&r(a,{className:"mb-4 rounded-lg bg-muted p-4",children:[o(s,{className:"mb-2 font-medium text-sm",children:"Instructions:"}),o(s,{className:"text-muted-foreground text-sm",children:e.instructions})]}),r(a,{className:"flex flex-wrap gap-2",children:[e.actionUrl&&o(c,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&o(c,{size:"sm",onClick:d,children:o(l,{asChild:!0,children:o(l,{children:"Mark as Complete"})})})]})]})]})}export{k as StepChecklist};

package/dist/components/index.d.ts

@@ -1,4 +1,3 @@
-import { CodeSnippet } from "./CodeSnippet.js";
-import { JourneyMap } from "./JourneyMap.js";
-import { StepChecklist } from "./StepChecklist.js";
-export { CodeSnippet, JourneyMap, StepChecklist };
+export { CodeSnippet } from './CodeSnippet.js';
+export { JourneyMap } from './JourneyMap.js';
+export { StepChecklist } from './StepChecklist.js';

package/dist/components/index.js

@@ -1,5 +1,2 @@
-import { StepChecklist } from "./StepChecklist.js";
-import { JourneyMap } from "./JourneyMap.js";
-import { CodeSnippet } from "./CodeSnippet.js";
-
-export { CodeSnippet, JourneyMap, StepChecklist };
+// @bun
+import{Button as v}from"@lssm/lib.design-system";import{Box as N}from"@lssm/lib.design-system/layout";import{Text as i}from"@lssm/lib.design-system/typography";import{useState as k}from"react";import{jsx as a,jsxs as g,Fragment as C}from"react/jsx-runtime";function P({code:e,language:d="typescript",title:t}){let[o,s]=k(!1);return g(N,{className:"overflow-hidden rounded-lg border bg-muted/50",children:[g(N,{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[g(N,{className:"flex items-center gap-2",children:[a(i,{className:"font-medium text-muted-foreground text-xs uppercase",children:d}),t&&g(C,{children:[a(i,{className:"text-muted-foreground",children:"\u2022"}),a(i,{className:"text-sm",children:t})]})]}),a(v,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(e),s(!0),setTimeout(()=>s(!1),2000)},className:"h-7 text-xs",children:a(i,{asChild:!0,children:a(i,{children:o?"\u2713 Copied":"Copy"})})})]}),a("pre",{className:"overflow-x-auto p-4",children:a("code",{className:"text-sm",children:a(i,{asChild:!0,children:a(i,{children:e})})})})]})}import{Box as l}from"@lssm/lib.design-system/layout";import{P as J,Text as M}from"@lssm/lib.design-system/typography";import{cn as y}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as m,jsxs as S}from"react/jsx-runtime";var h={templates:"\uD83D\uDCCB","spec-editor":"\u270F\uFE0F",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"\u2699\uFE0F",default:"\uD83D\uDCCD"};function R({steps:e,completedStepIds:d,currentStepId:t}){return m(l,{className:"relative overflow-x-auto pb-4",children:m(l,{className:"flex min-w-max items-center gap-2",children:e.map((o,s)=>{let n=d.includes(o.id),x=o.id===t,T=o.metadata?.surface??"default",w=h[T]??h.default;return S(l,{className:"flex items-center",children:[S(l,{className:"flex flex-col items-center gap-2",children:[m(l,{className:y("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",n&&"border-green-500 bg-green-500/10",x&&!n&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!n&&!x&&"border-muted bg-muted/50"),children:m(M,{children:n?"\u2713":w})}),m(l,{className:"text-center",children:m(J,{className:y("max-w-[100px] truncate font-medium text-xs",n&&"text-green-500",x&&!n&&"text-violet-500",!n&&!x&&"text-muted-foreground"),children:o.title})})]}),s<e.length-1&&m(l,{className:y("mx-2 h-1 w-8 rounded-full transition-colors",d.includes(e[s+1]?.id??"")?"bg-green-500":n?"bg-green-500/50":"bg-muted")})]},o.id)})})})}import{Button as B}from"@lssm/lib.design-system";import{Box as u}from"@lssm/lib.design-system/layout";import{H4 as z,P as b,Text as p}from"@lssm/lib.design-system/typography";import{cn as f}from"@lssm/lib.ui-kit-core";import{jsx as r,jsxs as c}from"react/jsx-runtime";function I({step:e,stepNumber:d,isCompleted:t,isCurrent:o,isExpanded:s,onToggle:n,onComplete:x}){return c(u,{className:f("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",o&&!t&&"border-violet-500 bg-violet-500/5",!t&&!o&&"border-border"),children:[c(B,{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:n,children:[r(u,{className:f("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",t&&"border-green-500 bg-green-500 text-white",o&&!t&&"border-violet-500 text-violet-500",!t&&!o&&"border-muted-foreground text-muted-foreground"),children:r(p,{children:t?"\u2713":d})}),c(u,{className:"min-w-0 flex-1",children:[r(z,{className:f("font-semibold",t&&"text-green-500",o&&!t&&"text-foreground",!t&&!o&&"text-muted-foreground"),children:e.title}),!s&&e.description&&r(b,{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&c(p,{className:f("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",t?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),r(p,{className:f("shrink-0 transition-transform",s&&"rotate-180"),children:"\u25BC"})]}),s&&c(u,{className:"border-t px-4 py-4",children:[e.description&&r(b,{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&c(u,{className:"mb-4 rounded-lg bg-muted p-4",children:[r(b,{className:"mb-2 font-medium text-sm",children:"Instructions:"}),r(b,{className:"text-muted-foreground text-sm",children:e.instructions})]}),c(u,{className:"flex flex-wrap gap-2",children:[e.actionUrl&&r(B,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&r(B,{size:"sm",onClick:x,children:r(p,{asChild:!0,children:r(p,{children:"Mark as Complete"})})})]})]})]})}export{P as CodeSnippet,R as JourneyMap,I as StepChecklist};

package/dist/docs/index.d.ts

@@ -1 +1 @@
-export { };
+import './learning-journey-ui-onboarding.docblock.js';

package/dist/docs/index.js

@@ -1 +1,9 @@
-import "./learning-journey-ui-onboarding.docblock.js";
+// @bun
+import{registerDocBlocks as n}from"@lssm/lib.contracts-spec/docs";var e=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI \u2014 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
+- Onboarding mini-app shell
+- Views: overview, steps, progress, timeline
+- Components: step checklist, code snippet, journey map
+
+## Notes
+- Compose with design system components.
+- Ensure accessible labels and keyboard navigation.`}];n(e);

package/dist/docs/learning-journey-ui-onboarding.docblock.d.ts

@@ -1 +1 @@
-export { };
+export {};

package/dist/docs/learning-journey-ui-onboarding.docblock.js

@@ -1,20 +1,9 @@
-import { registerDocBlocks } from "@lssm/lib.contracts/docs";
+// @bun
+import{registerDocBlocks as n}from"@lssm/lib.contracts-spec/docs";var e=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI \u2014 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
+- Onboarding mini-app shell
+- Views: overview, steps, progress, timeline
+- Components: step checklist, code snippet, journey map
 
-//#region src/docs/learning-journey-ui-onboarding.docblock.ts
-registerDocBlocks([{
-	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.`
-}]);
-
-//#endregion
-//# sourceMappingURL=learning-journey-ui-onboarding.docblock.js.map
+## Notes
+- Compose with design system components.
+- Ensure accessible labels and keyboard navigation.`}];n(e);

package/dist/example.d.ts

@@ -1,33 +1,3 @@
-//#region src/example.d.ts
-declare const example: {
-  readonly id: "learning-journey-ui-onboarding";
-  readonly title: "Learning Journey UI — Onboarding";
-  readonly summary: "UI mini-app for onboarding patterns: checklists, code snippets, journey map.";
-  readonly tags: readonly ["learning", "ui", "onboarding"];
-  readonly kind: "ui";
-  readonly visibility: "public";
-  readonly docs: {
-    readonly rootDocId: "docs.examples.learning-journey-ui-onboarding";
-  };
-  readonly entrypoints: {
-    readonly packageName: "@lssm/example.learning-journey-ui-onboarding";
-    readonly docs: "./docs";
-  };
-  readonly surfaces: {
-    readonly templates: true;
-    readonly sandbox: {
-      readonly enabled: true;
-      readonly modes: readonly ["playground", "markdown"];
-    };
-    readonly studio: {
-      readonly enabled: true;
-      readonly installable: true;
-    };
-    readonly mcp: {
-      readonly enabled: true;
-    };
-  };
-};
-//#endregion
-export { example as default };
-//# sourceMappingURL=example.d.ts.map
+declare const ExamplesLearningJourneyUiOnboardingExample: import("@lssm/lib.contracts-spec").ExampleSpec;
+export default ExamplesLearningJourneyUiOnboardingExample;
+export { ExamplesLearningJourneyUiOnboardingExample };

package/dist/example.js

@@ -1,35 +1,2 @@
-//#region src/example.ts
-const example = {
-	id: "learning-journey-ui-onboarding",
-	title: "Learning Journey UI — Onboarding",
-	summary: "UI mini-app for onboarding patterns: checklists, code snippets, journey map.",
-	tags: [
-		"learning",
-		"ui",
-		"onboarding"
-	],
-	kind: "ui",
-	visibility: "public",
-	docs: { rootDocId: "docs.examples.learning-journey-ui-onboarding" },
-	entrypoints: {
-		packageName: "@lssm/example.learning-journey-ui-onboarding",
-		docs: "./docs"
-	},
-	surfaces: {
-		templates: true,
-		sandbox: {
-			enabled: true,
-			modes: ["playground", "markdown"]
-		},
-		studio: {
-			enabled: true,
-			installable: true
-		},
-		mcp: { enabled: true }
-	}
-};
-var example_default = example;
-
-//#endregion
-export { example_default as default };
-//# sourceMappingURL=example.js.map
+// @bun
+import{defineExample as e}from"@lssm/lib.contracts-spec/examples";var n=e({meta:{key:"examples.learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey Ui Onboarding",description:"Developer onboarding UI with checklists and journey maps.",kind:"template",visibility:"experimental",stability:"experimental",owners:["@contractspec-core"],tags:["package","examples","learning-journey-ui-onboarding"]},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","specs"]},studio:{enabled:!1,installable:!1},mcp:{enabled:!1}},entrypoints:{packageName:"@lssm/example.learning-journey-ui-onboarding"}}),r=n;export{n as ExamplesLearningJourneyUiOnboardingExample,r as default};

package/dist/index.d.ts

@@ -1,12 +1,7 @@
-import { OnboardingMiniApp } from "./OnboardingMiniApp.js";
-import { CodeSnippet } from "./components/CodeSnippet.js";
-import { JourneyMap } from "./components/JourneyMap.js";
-import { StepChecklist } from "./components/StepChecklist.js";
-import "./components/index.js";
-import example from "./example.js";
-import { Overview } from "./views/Overview.js";
-import { Steps } from "./views/Steps.js";
-import { Progress as ProgressView } from "./views/Progress.js";
-import { Timeline } from "./views/Timeline.js";
-import "./views/index.js";
-export { CodeSnippet, JourneyMap, OnboardingMiniApp, Overview, ProgressView as Progress, StepChecklist, Steps, Timeline, example };
+export { CodeSnippet, JourneyMap, StepChecklist } from './components/index.js';
+export { default as example } from './example.js';
+export * from './learning-journey-ui-onboarding.feature.js';
+export { OnboardingMiniApp } from './OnboardingMiniApp.js';
+export { Overview, Progress, Steps, Timeline } from './views/index.js';
+import './docs/index.js';
+export * from './example.js';

package/dist/index.js

@@ -1,14 +1,9 @@
-import { Overview } from "./views/Overview.js";
-import { StepChecklist } from "./components/StepChecklist.js";
-import { Steps } from "./views/Steps.js";
-import { Progress as ProgressView } from "./views/Progress.js";
-import { JourneyMap } from "./components/JourneyMap.js";
-import { Timeline } from "./views/Timeline.js";
-import { OnboardingMiniApp } from "./OnboardingMiniApp.js";
-import example_default from "./example.js";
-import "./views/index.js";
-import { CodeSnippet } from "./components/CodeSnippet.js";
-import "./components/index.js";
-import "./docs/index.js";
+// @bun
+import{Button as be}from"@lssm/lib.design-system";import{Box as se}from"@lssm/lib.design-system/layout";import{Text as L}from"@lssm/lib.design-system/typography";import{useState as Ne}from"react";import{jsx as S,jsxs as F,Fragment as Ce}from"react/jsx-runtime";function me({code:e,language:n="typescript",title:s}){let[t,m]=Ne(!1);return F(se,{className:"overflow-hidden rounded-lg border bg-muted/50",children:[F(se,{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[F(se,{className:"flex items-center gap-2",children:[S(L,{className:"font-medium text-muted-foreground text-xs uppercase",children:n}),s&&F(Ce,{children:[S(L,{className:"text-muted-foreground",children:"\u2022"}),S(L,{className:"text-sm",children:s})]})]}),S(be,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(e),m(!0),setTimeout(()=>m(!1),2000)},className:"h-7 text-xs",children:S(L,{asChild:!0,children:S(L,{children:t?"\u2713 Copied":"Copy"})})})]}),S("pre",{className:"overflow-x-auto p-4",children:S("code",{className:"text-sm",children:S(L,{asChild:!0,children:S(L,{children:e})})})})]})}import{Box as H}from"@lssm/lib.design-system/layout";import{P as ye,Text as Te}from"@lssm/lib.design-system/typography";import{cn as ne}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as j,jsxs as ce}from"react/jsx-runtime";var de={templates:"\uD83D\uDCCB","spec-editor":"\u270F\uFE0F",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"\u2699\uFE0F",default:"\uD83D\uDCCD"};function K({steps:e,completedStepIds:n,currentStepId:s}){return j(H,{className:"relative overflow-x-auto pb-4",children:j(H,{className:"flex min-w-max items-center gap-2",children:e.map((t,m)=>{let a=n.includes(t.id),l=t.id===s,C=t.metadata?.surface??"default",b=de[C]??de.default;return ce(H,{className:"flex items-center",children:[ce(H,{className:"flex flex-col items-center gap-2",children:[j(H,{className:ne("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",a&&"border-green-500 bg-green-500/10",l&&!a&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!a&&!l&&"border-muted bg-muted/50"),children:j(Te,{children:a?"\u2713":b})}),j(H,{className:"text-center",children:j(ye,{className:ne("max-w-[100px] truncate font-medium text-xs",a&&"text-green-500",l&&!a&&"text-violet-500",!a&&!l&&"text-muted-foreground"),children:t.title})})]}),m<e.length-1&&j(H,{className:ne("mx-2 h-1 w-8 rounded-full transition-colors",n.includes(e[m+1]?.id??"")?"bg-green-500":a?"bg-green-500/50":"bg-muted")})]},t.id)})})})}import{Button as ae}from"@lssm/lib.design-system";import{Box as M}from"@lssm/lib.design-system/layout";import{H4 as he,P as Y,Text as X}from"@lssm/lib.design-system/typography";import{cn as U}from"@lssm/lib.ui-kit-core";import{jsx as w,jsxs as R}from"react/jsx-runtime";function W({step:e,stepNumber:n,isCompleted:s,isCurrent:t,isExpanded:m,onToggle:a,onComplete:l}){return R(M,{className:U("rounded-xl border transition-all",s&&"border-green-500/50 bg-green-500/5",t&&!s&&"border-violet-500 bg-violet-500/5",!s&&!t&&"border-border"),children:[R(ae,{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:a,children:[w(M,{className:U("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",s&&"border-green-500 bg-green-500 text-white",t&&!s&&"border-violet-500 text-violet-500",!s&&!t&&"border-muted-foreground text-muted-foreground"),children:w(X,{children:s?"\u2713":n})}),R(M,{className:"min-w-0 flex-1",children:[w(he,{className:U("font-semibold",s&&"text-green-500",t&&!s&&"text-foreground",!s&&!t&&"text-muted-foreground"),children:e.title}),!m&&e.description&&w(Y,{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&R(X,{className:U("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",s?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),w(X,{className:U("shrink-0 transition-transform",m&&"rotate-180"),children:"\u25BC"})]}),m&&R(M,{className:"border-t px-4 py-4",children:[e.description&&w(Y,{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&R(M,{className:"mb-4 rounded-lg bg-muted p-4",children:[w(Y,{className:"mb-2 font-medium text-sm",children:"Instructions:"}),w(Y,{className:"text-muted-foreground text-sm",children:e.instructions})]}),R(M,{className:"flex flex-wrap gap-2",children:[e.actionUrl&&w(ae,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!s&&w(ae,{size:"sm",onClick:l,children:w(X,{asChild:!0,children:w(X,{children:"Mark as Complete"})})})]})]})]})}import{defineExample as we}from"@lssm/lib.contracts-spec/examples";var Be=we({meta:{key:"examples.learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey Ui Onboarding",description:"Developer onboarding UI with checklists and journey maps.",kind:"template",visibility:"experimental",stability:"experimental",owners:["@contractspec-core"],tags:["package","examples","learning-journey-ui-onboarding"]},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","specs"]},studio:{enabled:!1,installable:!1},mcp:{enabled:!1}},entrypoints:{packageName:"@lssm/example.learning-journey-ui-onboarding"}}),Se=Be;import{defineFeature as Pe}from"@lssm/lib.contracts-spec/features";var ht=Pe({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI: Onboarding",description:"Developer onboarding UI with checklists, journey maps, and step-by-step progress",domain:"learning-journey",owners:["@examples"],tags:["learning","ui","onboarding","checklists"],stability:"experimental"},docs:["docs.examples.learning-journey-ui-onboarding"]});import{useLearningProgress as $e,ViewTabs as ze}from"@lssm/example.learning-journey-ui-shared";import{Box as De}from"@lssm/lib.design-system/layout";import{Card as Fe,CardContent as Ke}from"@lssm/lib.ui-kit-web/ui/card";import{useCallback as ie,useState as Ye}from"react";import{XpBar as ve}from"@lssm/example.learning-journey-ui-shared";import{Button as Ie}from"@lssm/lib.design-system";import{Box as N}from"@lssm/lib.design-system/layout";import{H1 as ke,H3 as Le,P as J,Text as f}from"@lssm/lib.design-system/typography";import{Card as V,CardContent as E,CardHeader as _,CardTitle as G}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as He}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as o,jsxs as x}from"react/jsx-runtime";function A({track:e,progress:n,onStart:s}){let t=e.steps.length,m=n.completedStepIds.length,a=t>0?m/t*100:0,l=m===t,C=t-m,b=C*5,g=e.totalXp??e.steps.reduce((p,B)=>p+(B.xpReward??0),0)+(e.completionRewards?.xp??0);return x(N,{className:"space-y-6",children:[o(V,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:o(E,{className:"p-8",children:x(N,{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[o(N,{className:"flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg",children:o(f,{children:l?"\uD83C\uDF89":"\uD83D\uDE80"})}),x(N,{className:"flex-1",children:[o(ke,{className:"font-bold text-2xl",children:e.name}),o(J,{className:"mt-1 max-w-2xl text-muted-foreground",children:e.description}),!l&&x(J,{className:"mt-3 text-muted-foreground text-sm",children:["\u23F1\uFE0F Estimated time:"," ",b>0?`~${b} minutes`:"Less than a minute"]})]}),!l&&o(Ie,{size:"lg",onClick:s,children:o(f,{asChild:!0,children:o(f,{children:m>0?"Continue":"Get Started"})})})]})})}),x(N,{className:"grid gap-4 md:grid-cols-3",children:[x(V,{children:[o(_,{className:"pb-2",children:o(G,{className:"font-medium text-muted-foreground text-sm",children:o(f,{asChild:!0,children:o(f,{children:"Progress"})})})}),x(E,{children:[x(N,{className:"font-bold text-3xl",children:[Math.round(a),o(f,{asChild:!0,children:o(f,{children:"%"})})]}),o(He,{value:a,className:"mt-2 h-2"}),x(J,{className:"mt-2 text-muted-foreground text-sm",children:[m," of ",t," steps completed"]})]})]}),x(V,{children:[o(_,{className:"pb-2",children:o(G,{className:"font-medium text-muted-foreground text-sm",children:o(f,{asChild:!0,children:o(f,{children:"XP Earned"})})})}),x(E,{children:[o(N,{className:"font-bold text-3xl text-blue-500",children:o(f,{children:n.xpEarned})}),o(ve,{current:n.xpEarned,max:g,showLabel:!1,size:"sm"})]})]}),x(V,{children:[o(_,{className:"pb-2",children:o(G,{className:"font-medium text-muted-foreground text-sm",children:o(f,{asChild:!0,children:o(f,{children:"Time Remaining"})})})}),x(E,{children:[o(N,{className:"font-bold text-3xl",children:o(f,{children:l?"\u2713":`~${b}m`})}),o(J,{className:"mt-2 text-muted-foreground text-sm",children:l?"All done!":`${C} steps to go`})]})]})]}),x(V,{children:[o(_,{children:x(G,{className:"flex items-center gap-2",children:[o(f,{children:"\uD83D\uDCCB"}),o(f,{children:"Your Journey"})]})}),o(E,{children:o(N,{className:"space-y-3",children:e.steps.map((p,B)=>{let v=n.completedStepIds.includes(p.id),k=!v&&e.steps.slice(0,B).every((y)=>n.completedStepIds.includes(y.id));return x(N,{className:"flex items-center gap-4 rounded-lg border p-3",children:[o(N,{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${v?"bg-green-500 text-white":k?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:o(f,{children:v?"\u2713":B+1})}),o(N,{className:"min-w-0 flex-1",children:o(J,{className:`font-medium ${v?"text-green-500":k?"text-foreground":"text-muted-foreground"}`,children:p.title})}),p.xpReward&&x(f,{className:"text-muted-foreground text-sm",children:["+",p.xpReward," XP"]})]},p.id)})})})]}),l&&o(V,{className:"border-green-500/50 bg-green-500/5",children:x(E,{className:"flex items-center gap-4 p-6",children:[o(N,{className:"text-4xl",children:o(f,{children:"\uD83C\uDF89"})}),x(N,{children:[o(Le,{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),x(J,{className:"text-muted-foreground",children:["You've completed all ",t," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as je,XpBar as Re}from"@lssm/example.learning-journey-ui-shared";import{Box as u}from"@lssm/lib.design-system/layout";import{P as Oe,Text as c}from"@lssm/lib.design-system/typography";import{Card as q,CardContent as Q,CardHeader as Z,CardTitle as ee}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as Me}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as r,jsxs as i}from"react/jsx-runtime";function te({track:e,progress:n}){let s=e.steps.length,t=n.completedStepIds.length,m=s>0?t/s*100:0,a=e.totalXp??e.steps.reduce((b,g)=>b+(g.xpReward??0),0)+(e.completionRewards?.xp??0),l=s-t,C=l*5;return i(u,{className:"space-y-6",children:[i(q,{children:[r(Z,{children:i(ee,{className:"flex items-center gap-2",children:[r(c,{children:"\uD83D\uDCC8"}),r(c,{children:"Your Progress"})]})}),i(Q,{className:"space-y-6",children:[r(u,{className:"flex items-center justify-center",children:i(u,{className:"relative flex h-40 w-40 items-center justify-center",children:[i("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[r("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),r("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${m*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),i(u,{className:"text-center",children:[i(u,{className:"font-bold text-3xl",children:[Math.round(m),r(c,{asChild:!0,children:r(c,{children:"%"})})]}),r(u,{className:"text-muted-foreground text-sm",children:r(c,{children:"Complete"})})]})]})}),i(u,{className:"grid grid-cols-3 gap-4 text-center",children:[i(u,{children:[r(u,{className:"font-bold text-2xl text-green-500",children:r(c,{children:t})}),r(u,{className:"text-muted-foreground text-sm",children:r(c,{children:"Completed"})})]}),i(u,{children:[r(u,{className:"font-bold text-2xl text-orange-500",children:r(c,{children:l})}),r(u,{className:"text-muted-foreground text-sm",children:r(c,{children:"Remaining"})})]}),i(u,{children:[r(u,{className:"font-bold text-2xl",children:i(c,{children:[C,"m"]})}),r(u,{className:"text-muted-foreground text-sm",children:r(c,{children:"Est. Time"})})]})]})]})]}),i(q,{children:[r(Z,{children:i(ee,{className:"flex items-center gap-2",children:[r(c,{children:"\u26A1"}),r(c,{children:"Experience Points"})]})}),i(Q,{className:"space-y-4",children:[i(u,{className:"flex items-baseline gap-2",children:[r(c,{className:"font-bold text-3xl text-blue-500",children:n.xpEarned}),i(c,{className:"text-muted-foreground",children:["/ ",a," XP"]})]}),r(Re,{current:n.xpEarned,max:a,showLabel:!1,size:"lg"})]})]}),i(q,{children:[r(Z,{children:i(ee,{className:"flex items-center gap-2",children:[r(c,{children:"\uD83C\uDFC5"}),r(c,{children:"Achievements"})]})}),i(Q,{children:[r(je,{badges:n.badges,size:"lg"}),n.badges.length===0&&e.completionRewards?.badgeKey&&i(Oe,{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',e.completionRewards.badgeKey,'" badge!']})]})]}),i(q,{children:[r(Z,{children:i(ee,{className:"flex items-center gap-2",children:[r(c,{children:"\uD83D\uDCCB"}),r(c,{children:"Step Details"})]})}),r(Q,{children:r(u,{className:"space-y-3",children:e.steps.map((b,g)=>{let p=n.completedStepIds.includes(b.id),B=p?100:0;return i(u,{className:"space-y-1",children:[i(u,{className:"flex items-center justify-between text-sm",children:[i(c,{className:p?"text-green-500":"text-foreground",children:[g+1,". ",b.title]}),r(c,{className:p?"text-green-500":"text-muted-foreground",children:p?"\u2713":"Pending"})]}),r(Me,{value:B,className:"h-1"})]},b.id)})})})]})]})}import{Box as z}from"@lssm/lib.design-system/layout";import{H2 as Je,P as Ve,Text as le}from"@lssm/lib.design-system/typography";import{Progress as Ee}from"@lssm/lib.ui-kit-web/ui/progress";import{useState as Xe}from"react";import{jsx as D,jsxs as O}from"react/jsx-runtime";function oe({track:e,progress:n,onStepComplete:s}){let[t,m]=Xe(()=>e.steps.find((p)=>!n.completedStepIds.includes(p.id))?.id??null),a=n.completedStepIds.length,l=e.steps.length,C=l>0?a/l*100:0,b=e.steps.findIndex((g)=>!n.completedStepIds.includes(g.id));return O(z,{className:"space-y-6",children:[O(z,{className:"space-y-2",children:[O(z,{className:"flex items-center justify-between",children:[D(Je,{className:"font-bold text-xl",children:"Complete Each Step"}),O(le,{className:"text-muted-foreground text-sm",children:[a," / ",l," completed"]})]}),D(Ee,{value:C,className:"h-2"})]}),D(z,{className:"space-y-3",children:e.steps.map((g,p)=>{let B=n.completedStepIds.includes(g.id),v=p===b;return D(W,{step:g,stepNumber:p+1,isCompleted:B,isCurrent:v,isExpanded:t===g.id,onToggle:()=>m(t===g.id?null:g.id),onComplete:()=>{s?.(g.id);let k=e.steps[p+1];if(k&&!n.completedStepIds.includes(k.id))m(k.id)}},g.id)})}),e.completionRewards&&C<100&&D(z,{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:O(Ve,{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",e.completionRewards.xp&&O(le,{className:"ml-2 font-semibold text-blue-500",children:["+",e.completionRewards.xp," XP bonus"]}),e.completionRewards.badgeKey&&O(le,{className:"ml-2 font-semibold text-amber-500",children:['+ "',e.completionRewards.badgeKey,'" badge']})]})})]})}import{Box as T}from"@lssm/lib.design-system/layout";import{H2 as Ue,H4 as Ae,P as pe,Text as P}from"@lssm/lib.design-system/typography";import{Card as xe,CardContent as ue,CardHeader as ge,CardTitle as fe}from"@lssm/lib.ui-kit-web/ui/card";import{jsx as d,jsxs as h}from"react/jsx-runtime";function re({track:e,progress:n}){let s=e.steps.find((t)=>!n.completedStepIds.includes(t.id))?.id??null;return h(T,{className:"space-y-6",children:[h(T,{className:"text-center",children:[d(Ue,{className:"font-bold text-xl",children:"Your Learning Journey"}),d(pe,{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),h(xe,{children:[d(ge,{children:h(fe,{className:"flex items-center gap-2",children:[d(P,{children:"\uD83D\uDDFA\uFE0F"}),d(P,{children:"Journey Map"})]})}),d(ue,{children:d(K,{steps:e.steps,completedStepIds:n.completedStepIds,currentStepId:s})})]}),h(xe,{children:[d(ge,{children:h(fe,{className:"flex items-center gap-2",children:[d(P,{children:"\uD83D\uDCCD"}),d(P,{children:"Step by Step"})]})}),d(ue,{children:h(T,{className:"relative",children:[d(T,{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),d(T,{className:"space-y-6",children:e.steps.map((t,m)=>{let a=n.completedStepIds.includes(t.id),l=t.id===s,C=t.metadata?.surface??"general";return h(T,{className:"relative flex gap-4 pl-2",children:[d(T,{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${a?"border-green-500 bg-green-500 text-white":l?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:d(P,{children:a?"\u2713":m+1})}),d(T,{className:"flex-1 pb-2",children:h(T,{className:"rounded-lg border p-4",children:[h(T,{className:"flex items-start justify-between gap-2",children:[h(T,{children:[h(T,{className:"flex items-center gap-2",children:[d(Ae,{className:`font-semibold ${a?"text-green-500":l?"text-blue-500":"text-foreground"}`,children:t.title}),d(P,{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:C})]}),d(pe,{className:"mt-1 text-muted-foreground text-sm",children:t.description})]}),t.xpReward&&h(P,{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${a?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",t.xpReward," XP"]})]}),d(T,{className:"mt-3 text-xs",children:a?d(P,{className:"text-green-500",children:"\u2713 Completed"}):l?d(P,{className:"text-blue-500",children:"\u2192 In Progress"}):d(P,{className:"text-muted-foreground",children:"\u25CB Not Started"})})]})})]},t.id)})})]})})]})]})}import{jsx as I,jsxs as _e}from"react/jsx-runtime";function We({track:e,progress:n,onStepComplete:s,onViewChange:t,initialView:m="overview"}){let[a,l]=Ye(m),{progress:C,completeStep:b}=$e(e),g=n??C,p=ie((y)=>{l(y),t?.(y)},[t]),B=ie((y)=>{if(s)s(y);else b(y)},[s,b]),v=ie(()=>{l("steps"),t?.("steps")},[t]);return _e(De,{className:"space-y-6",children:[I(Fe,{children:I(Ke,{className:"p-4",children:I(ze,{currentView:a,onViewChange:p})})}),(()=>{let y={track:e,progress:g,onStepComplete:B};switch(a){case"overview":return I(A,{...y,onStart:v});case"steps":return I(oe,{...y});case"progress":return I(te,{...y});case"timeline":return I(re,{...y});default:return I(A,{...y,onStart:v})}})()]})}import{registerDocBlocks as Ge}from"@lssm/lib.contracts-spec/docs";var qe=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI \u2014 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
+- Onboarding mini-app shell
+- Views: overview, steps, progress, timeline
+- Components: step checklist, code snippet, journey map
 
-export { CodeSnippet, JourneyMap, OnboardingMiniApp, Overview, ProgressView as Progress, StepChecklist, Steps, Timeline, example_default as example };
+## Notes
+- Compose with design system components.
+- Ensure accessible labels and keyboard navigation.`}];Ge(qe);export{me as CodeSnippet,Be as ExamplesLearningJourneyUiOnboardingExample,K as JourneyMap,ht as LearningJourneyUiOnboardingFeature,We as OnboardingMiniApp,A as Overview,te as Progress,W as StepChecklist,oe as Steps,re as Timeline,Se as example};

package/dist/learning-journey-ui-onboarding.feature.d.ts

@@ -0,0 +1 @@
+export declare const LearningJourneyUiOnboardingFeature: import("@lssm/lib.contracts-spec").FeatureModuleSpec;

package/dist/learning-journey-ui-onboarding.feature.js

@@ -0,0 +1,2 @@
+// @bun
+import{defineFeature as e}from"@lssm/lib.contracts-spec/features";var r=e({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI: Onboarding",description:"Developer onboarding UI with checklists, journey maps, and step-by-step progress",domain:"learning-journey",owners:["@examples"],tags:["learning","ui","onboarding","checklists"],stability:"experimental"},docs:["docs.examples.learning-journey-ui-onboarding"]});export{r as LearningJourneyUiOnboardingFeature};

package/dist/node/OnboardingMiniApp.js

@@ -0,0 +1,2 @@
+'use client';
+import{useLearningProgress as Le,ViewTabs as Re}from"@lssm/example.learning-journey-ui-shared";import{Box as Ve}from"@lssm/lib.design-system/layout";import{Card as Me,CardContent as Xe}from"@lssm/lib.ui-kit-web/ui/card";import{useCallback as Z,useState as Ee}from"react";import{XpBar as ce}from"@lssm/example.learning-journey-ui-shared";import{Button as pe}from"@lssm/lib.design-system";import{Box as N}from"@lssm/lib.design-system/layout";import{H1 as ue,H3 as ge,P as M,Text as f}from"@lssm/lib.design-system/typography";import{Card as X,CardContent as E,CardHeader as z,CardTitle as K}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as fe}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as t,jsxs as p}from"react/jsx-runtime";function _({track:e,progress:s,onStart:a}){let o=e.steps.length,i=s.completedStepIds.length,n=o>0?i/o*100:0,l=i===o,C=o-i,b=C*5,g=e.totalXp??e.steps.reduce((c,y)=>c+(y.xpReward??0),0)+(e.completionRewards?.xp??0);return p(N,{className:"space-y-6",children:[t(X,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:t(E,{className:"p-8",children:p(N,{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[t(N,{className:"flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg",children:t(f,{children:l?"\uD83C\uDF89":"\uD83D\uDE80"})}),p(N,{className:"flex-1",children:[t(ue,{className:"font-bold text-2xl",children:e.name}),t(M,{className:"mt-1 max-w-2xl text-muted-foreground",children:e.description}),!l&&p(M,{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",b>0?`~${b} minutes`:"Less than a minute"]})]}),!l&&t(pe,{size:"lg",onClick:a,children:t(f,{asChild:!0,children:t(f,{children:i>0?"Continue":"Get Started"})})})]})})}),p(N,{className:"grid gap-4 md:grid-cols-3",children:[p(X,{children:[t(z,{className:"pb-2",children:t(K,{className:"font-medium text-muted-foreground text-sm",children:t(f,{asChild:!0,children:t(f,{children:"Progress"})})})}),p(E,{children:[p(N,{className:"font-bold text-3xl",children:[Math.round(n),t(f,{asChild:!0,children:t(f,{children:"%"})})]}),t(fe,{value:n,className:"mt-2 h-2"}),p(M,{className:"mt-2 text-muted-foreground text-sm",children:[i," of ",o," steps completed"]})]})]}),p(X,{children:[t(z,{className:"pb-2",children:t(K,{className:"font-medium text-muted-foreground text-sm",children:t(f,{asChild:!0,children:t(f,{children:"XP Earned"})})})}),p(E,{children:[t(N,{className:"font-bold text-3xl text-blue-500",children:t(f,{children:s.xpEarned})}),t(ce,{current:s.xpEarned,max:g,showLabel:!1,size:"sm"})]})]}),p(X,{children:[t(z,{className:"pb-2",children:t(K,{className:"font-medium text-muted-foreground text-sm",children:t(f,{asChild:!0,children:t(f,{children:"Time Remaining"})})})}),p(E,{children:[t(N,{className:"font-bold text-3xl",children:t(f,{children:l?"✓":`~${b}m`})}),t(M,{className:"mt-2 text-muted-foreground text-sm",children:l?"All done!":`${C} steps to go`})]})]})]}),p(X,{children:[t(z,{children:p(K,{className:"flex items-center gap-2",children:[t(f,{children:"\uD83D\uDCCB"}),t(f,{children:"Your Journey"})]})}),t(E,{children:t(N,{className:"space-y-3",children:e.steps.map((c,y)=>{let S=s.completedStepIds.includes(c.id),H=!S&&e.steps.slice(0,y).every((T)=>s.completedStepIds.includes(T.id));return p(N,{className:"flex items-center gap-4 rounded-lg border p-3",children:[t(N,{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${S?"bg-green-500 text-white":H?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:t(f,{children:S?"✓":y+1})}),t(N,{className:"min-w-0 flex-1",children:t(M,{className:`font-medium ${S?"text-green-500":H?"text-foreground":"text-muted-foreground"}`,children:c.title})}),c.xpReward&&p(f,{className:"text-muted-foreground text-sm",children:["+",c.xpReward," XP"]})]},c.id)})})})]}),l&&t(X,{className:"border-green-500/50 bg-green-500/5",children:p(E,{className:"flex items-center gap-4 p-6",children:[t(N,{className:"text-4xl",children:t(f,{children:"\uD83C\uDF89"})}),p(N,{children:[t(ge,{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),p(M,{className:"text-muted-foreground",children:["You've completed all ",o," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as be,XpBar as Ne}from"@lssm/example.learning-journey-ui-shared";import{Box as u}from"@lssm/lib.design-system/layout";import{P as Ce,Text as x}from"@lssm/lib.design-system/typography";import{Card as Y,CardContent as D,CardHeader as F,CardTitle as U}from"@lssm/lib.ui-kit-web/ui/card";import{Progress as Te}from"@lssm/lib.ui-kit-web/ui/progress";import{jsx as r,jsxs as m}from"react/jsx-runtime";function ee({track:e,progress:s}){let a=e.steps.length,o=s.completedStepIds.length,i=a>0?o/a*100:0,n=e.totalXp??e.steps.reduce((b,g)=>b+(g.xpReward??0),0)+(e.completionRewards?.xp??0),l=a-o,C=l*5;return m(u,{className:"space-y-6",children:[m(Y,{children:[r(F,{children:m(U,{className:"flex items-center gap-2",children:[r(x,{children:"\uD83D\uDCC8"}),r(x,{children:"Your Progress"})]})}),m(D,{className:"space-y-6",children:[r(u,{className:"flex items-center justify-center",children:m(u,{className:"relative flex h-40 w-40 items-center justify-center",children:[m("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[r("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),r("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${i*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),m(u,{className:"text-center",children:[m(u,{className:"font-bold text-3xl",children:[Math.round(i),r(x,{asChild:!0,children:r(x,{children:"%"})})]}),r(u,{className:"text-muted-foreground text-sm",children:r(x,{children:"Complete"})})]})]})}),m(u,{className:"grid grid-cols-3 gap-4 text-center",children:[m(u,{children:[r(u,{className:"font-bold text-2xl text-green-500",children:r(x,{children:o})}),r(u,{className:"text-muted-foreground text-sm",children:r(x,{children:"Completed"})})]}),m(u,{children:[r(u,{className:"font-bold text-2xl text-orange-500",children:r(x,{children:l})}),r(u,{className:"text-muted-foreground text-sm",children:r(x,{children:"Remaining"})})]}),m(u,{children:[r(u,{className:"font-bold text-2xl",children:m(x,{children:[C,"m"]})}),r(u,{className:"text-muted-foreground text-sm",children:r(x,{children:"Est. Time"})})]})]})]})]}),m(Y,{children:[r(F,{children:m(U,{className:"flex items-center gap-2",children:[r(x,{children:"⚡"}),r(x,{children:"Experience Points"})]})}),m(D,{className:"space-y-4",children:[m(u,{className:"flex items-baseline gap-2",children:[r(x,{className:"font-bold text-3xl text-blue-500",children:s.xpEarned}),m(x,{className:"text-muted-foreground",children:["/ ",n," XP"]})]}),r(Ne,{current:s.xpEarned,max:n,showLabel:!1,size:"lg"})]})]}),m(Y,{children:[r(F,{children:m(U,{className:"flex items-center gap-2",children:[r(x,{children:"\uD83C\uDFC5"}),r(x,{children:"Achievements"})]})}),m(D,{children:[r(be,{badges:s.badges,size:"lg"}),s.badges.length===0&&e.completionRewards?.badgeKey&&m(Ce,{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',e.completionRewards.badgeKey,'" badge!']})]})]}),m(Y,{children:[r(F,{children:m(U,{className:"flex items-center gap-2",children:[r(x,{children:"\uD83D\uDCCB"}),r(x,{children:"Step Details"})]})}),r(D,{children:r(u,{className:"space-y-3",children:e.steps.map((b,g)=>{let c=s.completedStepIds.includes(b.id),y=c?100:0;return m(u,{className:"space-y-1",children:[m(u,{className:"flex items-center justify-between text-sm",children:[m(x,{className:c?"text-green-500":"text-foreground",children:[g+1,". ",b.title]}),r(x,{className:c?"text-green-500":"text-muted-foreground",children:c?"✓":"Pending"})]}),r(Te,{value:y,className:"h-1"})]},b.id)})})})]})]})}import{Box as A}from"@lssm/lib.design-system/layout";import{H2 as we,P as he,Text as q}from"@lssm/lib.design-system/typography";import{Progress as ye}from"@lssm/lib.ui-kit-web/ui/progress";import{useState as Pe}from"react";import{Button as G}from"@lssm/lib.design-system";import{Box as J}from"@lssm/lib.design-system/layout";import{H4 as Be,P as W,Text as O}from"@lssm/lib.design-system/typography";import{cn as j}from"@lssm/lib.ui-kit-core";import{jsx as h,jsxs as I}from"react/jsx-runtime";function te({step:e,stepNumber:s,isCompleted:a,isCurrent:o,isExpanded:i,onToggle:n,onComplete:l}){return I(J,{className:j("rounded-xl border transition-all",a&&"border-green-500/50 bg-green-500/5",o&&!a&&"border-violet-500 bg-violet-500/5",!a&&!o&&"border-border"),children:[I(G,{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:n,children:[h(J,{className:j("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",a&&"border-green-500 bg-green-500 text-white",o&&!a&&"border-violet-500 text-violet-500",!a&&!o&&"border-muted-foreground text-muted-foreground"),children:h(O,{children:a?"✓":s})}),I(J,{className:"min-w-0 flex-1",children:[h(Be,{className:j("font-semibold",a&&"text-green-500",o&&!a&&"text-foreground",!a&&!o&&"text-muted-foreground"),children:e.title}),!i&&e.description&&h(W,{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&I(O,{className:j("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",a?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),h(O,{className:j("shrink-0 transition-transform",i&&"rotate-180"),children:"▼"})]}),i&&I(J,{className:"border-t px-4 py-4",children:[e.description&&h(W,{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&I(J,{className:"mb-4 rounded-lg bg-muted p-4",children:[h(W,{className:"mb-2 font-medium text-sm",children:"Instructions:"}),h(W,{className:"text-muted-foreground text-sm",children:e.instructions})]}),I(J,{className:"flex flex-wrap gap-2",children:[e.actionUrl&&h(G,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!a&&h(G,{size:"sm",onClick:l,children:h(O,{asChild:!0,children:h(O,{children:"Mark as Complete"})})})]})]})]})}import{jsx as k,jsxs as L}from"react/jsx-runtime";function oe({track:e,progress:s,onStepComplete:a}){let[o,i]=Pe(()=>e.steps.find((c)=>!s.completedStepIds.includes(c.id))?.id??null),n=s.completedStepIds.length,l=e.steps.length,C=l>0?n/l*100:0,b=e.steps.findIndex((g)=>!s.completedStepIds.includes(g.id));return L(A,{className:"space-y-6",children:[L(A,{className:"space-y-2",children:[L(A,{className:"flex items-center justify-between",children:[k(we,{className:"font-bold text-xl",children:"Complete Each Step"}),L(q,{className:"text-muted-foreground text-sm",children:[n," / ",l," completed"]})]}),k(ye,{value:C,className:"h-2"})]}),k(A,{className:"space-y-3",children:e.steps.map((g,c)=>{let y=s.completedStepIds.includes(g.id),S=c===b;return k(te,{step:g,stepNumber:c+1,isCompleted:y,isCurrent:S,isExpanded:o===g.id,onToggle:()=>i(o===g.id?null:g.id),onComplete:()=>{a?.(g.id);let H=e.steps[c+1];if(H&&!s.completedStepIds.includes(H.id))i(H.id)}},g.id)})}),e.completionRewards&&C<100&&k(A,{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:L(he,{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",e.completionRewards.xp&&L(q,{className:"ml-2 font-semibold text-blue-500",children:["+",e.completionRewards.xp," XP bonus"]}),e.completionRewards.badgeKey&&L(q,{className:"ml-2 font-semibold text-amber-500",children:['+ "',e.completionRewards.badgeKey,'" badge']})]})})]})}import{Box as B}from"@lssm/lib.design-system/layout";import{H2 as He,H4 as Ie,P as ne,Text as P}from"@lssm/lib.design-system/typography";import{Card as le,CardContent as me,CardHeader as de,CardTitle as ie}from"@lssm/lib.ui-kit-web/ui/card";import{Box as R}from"@lssm/lib.design-system/layout";import{P as Se,Text as ve}from"@lssm/lib.design-system/typography";import{cn as Q}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as V,jsxs as se}from"react/jsx-runtime";var re={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function ae({steps:e,completedStepIds:s,currentStepId:a}){return V(R,{className:"relative overflow-x-auto pb-4",children:V(R,{className:"flex min-w-max items-center gap-2",children:e.map((o,i)=>{let n=s.includes(o.id),l=o.id===a,C=o.metadata?.surface??"default",b=re[C]??re.default;return se(R,{className:"flex items-center",children:[se(R,{className:"flex flex-col items-center gap-2",children:[V(R,{className:Q("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",n&&"border-green-500 bg-green-500/10",l&&!n&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!n&&!l&&"border-muted bg-muted/50"),children:V(ve,{children:n?"✓":b})}),V(R,{className:"text-center",children:V(Se,{className:Q("max-w-[100px] truncate font-medium text-xs",n&&"text-green-500",l&&!n&&"text-violet-500",!n&&!l&&"text-muted-foreground"),children:o.title})})]}),i<e.length-1&&V(R,{className:Q("mx-2 h-1 w-8 rounded-full transition-colors",s.includes(e[i+1]?.id??"")?"bg-green-500":n?"bg-green-500/50":"bg-muted")})]},o.id)})})})}import{jsx as d,jsxs as w}from"react/jsx-runtime";function xe({track:e,progress:s}){let a=e.steps.find((o)=>!s.completedStepIds.includes(o.id))?.id??null;return w(B,{className:"space-y-6",children:[w(B,{className:"text-center",children:[d(He,{className:"font-bold text-xl",children:"Your Learning Journey"}),d(ne,{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),w(le,{children:[d(de,{children:w(ie,{className:"flex items-center gap-2",children:[d(P,{children:"\uD83D\uDDFA️"}),d(P,{children:"Journey Map"})]})}),d(me,{children:d(ae,{steps:e.steps,completedStepIds:s.completedStepIds,currentStepId:a})})]}),w(le,{children:[d(de,{children:w(ie,{className:"flex items-center gap-2",children:[d(P,{children:"\uD83D\uDCCD"}),d(P,{children:"Step by Step"})]})}),d(me,{children:w(B,{className:"relative",children:[d(B,{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),d(B,{className:"space-y-6",children:e.steps.map((o,i)=>{let n=s.completedStepIds.includes(o.id),l=o.id===a,C=o.metadata?.surface??"general";return w(B,{className:"relative flex gap-4 pl-2",children:[d(B,{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${n?"border-green-500 bg-green-500 text-white":l?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:d(P,{children:n?"✓":i+1})}),d(B,{className:"flex-1 pb-2",children:w(B,{className:"rounded-lg border p-4",children:[w(B,{className:"flex items-start justify-between gap-2",children:[w(B,{children:[w(B,{className:"flex items-center gap-2",children:[d(Ie,{className:`font-semibold ${n?"text-green-500":l?"text-blue-500":"text-foreground"}`,children:o.title}),d(P,{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:C})]}),d(ne,{className:"mt-1 text-muted-foreground text-sm",children:o.description})]}),o.xpReward&&w(P,{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${n?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",o.xpReward," XP"]})]}),d(B,{className:"mt-3 text-xs",children:n?d(P,{className:"text-green-500",children:"✓ Completed"}):l?d(P,{className:"text-blue-500",children:"→ In Progress"}):d(P,{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},o.id)})})]})})]})]})}import{jsx as v,jsxs as Je}from"react/jsx-runtime";function Lt({track:e,progress:s,onStepComplete:a,onViewChange:o,initialView:i="overview"}){let[n,l]=Ee(i),{progress:C,completeStep:b}=Le(e),g=s??C,c=Z((T)=>{l(T),o?.(T)},[o]),y=Z((T)=>{if(a)a(T);else b(T)},[a,b]),S=Z(()=>{l("steps"),o?.("steps")},[o]);return Je(Ve,{className:"space-y-6",children:[v(Me,{children:v(Xe,{className:"p-4",children:v(Re,{currentView:n,onViewChange:c})})}),(()=>{let T={track:e,progress:g,onStepComplete:y};switch(n){case"overview":return v(_,{...T,onStart:S});case"steps":return v(oe,{...T});case"progress":return v(ee,{...T});case"timeline":return v(xe,{...T});default:return v(_,{...T,onStart:S})}})()]})}export{Lt as OnboardingMiniApp};

package/dist/node/components/CodeSnippet.js

@@ -0,0 +1,2 @@
+'use client';
+import{Button as m}from"@lssm/lib.design-system";import{Box as s}from"@lssm/lib.design-system/layout";import{Text as t}from"@lssm/lib.design-system/typography";import{useState as d}from"react";import{jsx as e,jsxs as o,Fragment as x}from"react/jsx-runtime";function C({code:a,language:p="typescript",title:r}){let[n,i]=d(!1);return o(s,{className:"overflow-hidden rounded-lg border bg-muted/50",children:[o(s,{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[o(s,{className:"flex items-center gap-2",children:[e(t,{className:"font-medium text-muted-foreground text-xs uppercase",children:p}),r&&o(x,{children:[e(t,{className:"text-muted-foreground",children:"•"}),e(t,{className:"text-sm",children:r})]})]}),e(m,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(a),i(!0),setTimeout(()=>i(!1),2000)},className:"h-7 text-xs",children:e(t,{asChild:!0,children:e(t,{children:n?"✓ Copied":"Copy"})})})]}),e("pre",{className:"overflow-x-auto p-4",children:e("code",{className:"text-sm",children:e(t,{asChild:!0,children:e(t,{children:a})})})})]})}export{C as CodeSnippet};

package/dist/node/components/JourneyMap.js

@@ -0,0 +1,2 @@
+'use client';
+import{Box as t}from"@lssm/lib.design-system/layout";import{P as g,Text as f}from"@lssm/lib.design-system/typography";import{cn as s}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as r,jsxs as m}from"react/jsx-runtime";var c={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function N({steps:a,completedStepIds:l,currentStepId:u}){return r(t,{className:"relative overflow-x-auto pb-4",children:r(t,{className:"flex min-w-max items-center gap-2",children:a.map((o,i)=>{let e=l.includes(o.id),n=o.id===u,d=o.metadata?.surface??"default",x=c[d]??c.default;return m(t,{className:"flex items-center",children:[m(t,{className:"flex flex-col items-center gap-2",children:[r(t,{className:s("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",e&&"border-green-500 bg-green-500/10",n&&!e&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!e&&!n&&"border-muted bg-muted/50"),children:r(f,{children:e?"✓":x})}),r(t,{className:"text-center",children:r(g,{className:s("max-w-[100px] truncate font-medium text-xs",e&&"text-green-500",n&&!e&&"text-violet-500",!e&&!n&&"text-muted-foreground"),children:o.title})})]}),i<a.length-1&&r(t,{className:s("mx-2 h-1 w-8 rounded-full transition-colors",l.includes(a[i+1]?.id??"")?"bg-green-500":e?"bg-green-500/50":"bg-muted")})]},o.id)})})})}export{N as JourneyMap};

package/dist/node/components/StepChecklist.js

@@ -0,0 +1,2 @@
+'use client';
+import{Button as c}from"@lssm/lib.design-system";import{Box as a}from"@lssm/lib.design-system/layout";import{H4 as b,P as s,Text as l}from"@lssm/lib.design-system/typography";import{cn as i}from"@lssm/lib.ui-kit-core";import{jsx as o,jsxs as r}from"react/jsx-runtime";function k({step:e,stepNumber:u,isCompleted:t,isCurrent:n,isExpanded:m,onToggle:x,onComplete:d}){return r(a,{className:i("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",n&&!t&&"border-violet-500 bg-violet-500/5",!t&&!n&&"border-border"),children:[r(c,{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:x,children:[o(a,{className:i("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",t&&"border-green-500 bg-green-500 text-white",n&&!t&&"border-violet-500 text-violet-500",!t&&!n&&"border-muted-foreground text-muted-foreground"),children:o(l,{children:t?"✓":u})}),r(a,{className:"min-w-0 flex-1",children:[o(b,{className:i("font-semibold",t&&"text-green-500",n&&!t&&"text-foreground",!t&&!n&&"text-muted-foreground"),children:e.title}),!m&&e.description&&o(s,{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&r(l,{className:i("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",t?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),o(l,{className:i("shrink-0 transition-transform",m&&"rotate-180"),children:"▼"})]}),m&&r(a,{className:"border-t px-4 py-4",children:[e.description&&o(s,{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&r(a,{className:"mb-4 rounded-lg bg-muted p-4",children:[o(s,{className:"mb-2 font-medium text-sm",children:"Instructions:"}),o(s,{className:"text-muted-foreground text-sm",children:e.instructions})]}),r(a,{className:"flex flex-wrap gap-2",children:[e.actionUrl&&o(c,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&o(c,{size:"sm",onClick:d,children:o(l,{asChild:!0,children:o(l,{children:"Mark as Complete"})})})]})]})]})}export{k as StepChecklist};

package/dist/node/components/index.js

@@ -0,0 +1 @@
+import{Button as v}from"@lssm/lib.design-system";import{Box as N}from"@lssm/lib.design-system/layout";import{Text as i}from"@lssm/lib.design-system/typography";import{useState as k}from"react";import{jsx as a,jsxs as g,Fragment as C}from"react/jsx-runtime";function P({code:e,language:d="typescript",title:t}){let[o,s]=k(!1);return g(N,{className:"overflow-hidden rounded-lg border bg-muted/50",children:[g(N,{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[g(N,{className:"flex items-center gap-2",children:[a(i,{className:"font-medium text-muted-foreground text-xs uppercase",children:d}),t&&g(C,{children:[a(i,{className:"text-muted-foreground",children:"•"}),a(i,{className:"text-sm",children:t})]})]}),a(v,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(e),s(!0),setTimeout(()=>s(!1),2000)},className:"h-7 text-xs",children:a(i,{asChild:!0,children:a(i,{children:o?"✓ Copied":"Copy"})})})]}),a("pre",{className:"overflow-x-auto p-4",children:a("code",{className:"text-sm",children:a(i,{asChild:!0,children:a(i,{children:e})})})})]})}import{Box as l}from"@lssm/lib.design-system/layout";import{P as J,Text as M}from"@lssm/lib.design-system/typography";import{cn as y}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as m,jsxs as S}from"react/jsx-runtime";var h={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function R({steps:e,completedStepIds:d,currentStepId:t}){return m(l,{className:"relative overflow-x-auto pb-4",children:m(l,{className:"flex min-w-max items-center gap-2",children:e.map((o,s)=>{let n=d.includes(o.id),x=o.id===t,T=o.metadata?.surface??"default",w=h[T]??h.default;return S(l,{className:"flex items-center",children:[S(l,{className:"flex flex-col items-center gap-2",children:[m(l,{className:y("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",n&&"border-green-500 bg-green-500/10",x&&!n&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!n&&!x&&"border-muted bg-muted/50"),children:m(M,{children:n?"✓":w})}),m(l,{className:"text-center",children:m(J,{className:y("max-w-[100px] truncate font-medium text-xs",n&&"text-green-500",x&&!n&&"text-violet-500",!n&&!x&&"text-muted-foreground"),children:o.title})})]}),s<e.length-1&&m(l,{className:y("mx-2 h-1 w-8 rounded-full transition-colors",d.includes(e[s+1]?.id??"")?"bg-green-500":n?"bg-green-500/50":"bg-muted")})]},o.id)})})})}import{Button as B}from"@lssm/lib.design-system";import{Box as u}from"@lssm/lib.design-system/layout";import{H4 as z,P as b,Text as p}from"@lssm/lib.design-system/typography";import{cn as f}from"@lssm/lib.ui-kit-core";import{jsx as r,jsxs as c}from"react/jsx-runtime";function I({step:e,stepNumber:d,isCompleted:t,isCurrent:o,isExpanded:s,onToggle:n,onComplete:x}){return c(u,{className:f("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",o&&!t&&"border-violet-500 bg-violet-500/5",!t&&!o&&"border-border"),children:[c(B,{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:n,children:[r(u,{className:f("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",t&&"border-green-500 bg-green-500 text-white",o&&!t&&"border-violet-500 text-violet-500",!t&&!o&&"border-muted-foreground text-muted-foreground"),children:r(p,{children:t?"✓":d})}),c(u,{className:"min-w-0 flex-1",children:[r(z,{className:f("font-semibold",t&&"text-green-500",o&&!t&&"text-foreground",!t&&!o&&"text-muted-foreground"),children:e.title}),!s&&e.description&&r(b,{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&c(p,{className:f("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",t?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),r(p,{className:f("shrink-0 transition-transform",s&&"rotate-180"),children:"▼"})]}),s&&c(u,{className:"border-t px-4 py-4",children:[e.description&&r(b,{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&c(u,{className:"mb-4 rounded-lg bg-muted p-4",children:[r(b,{className:"mb-2 font-medium text-sm",children:"Instructions:"}),r(b,{className:"text-muted-foreground text-sm",children:e.instructions})]}),c(u,{className:"flex flex-wrap gap-2",children:[e.actionUrl&&r(B,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&r(B,{size:"sm",onClick:x,children:r(p,{asChild:!0,children:r(p,{children:"Mark as Complete"})})})]})]})]})}export{P as CodeSnippet,R as JourneyMap,I as StepChecklist};

package/dist/node/docs/index.js

@@ -0,0 +1,8 @@
+import{registerDocBlocks as n}from"@lssm/lib.contracts-spec/docs";var e=[{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
+- Onboarding mini-app shell
+- Views: overview, steps, progress, timeline
+- Components: step checklist, code snippet, journey map
+
+## Notes
+- Compose with design system components.
+- Ensure accessible labels and keyboard navigation.`}];n(e);

package/dist/node/docs/learning-journey-ui-onboarding.docblock.js

@@ -0,0 +1,8 @@
+import{registerDocBlocks as n}from"@lssm/lib.contracts-spec/docs";var e=[{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
+- Onboarding mini-app shell
+- Views: overview, steps, progress, timeline
+- Components: step checklist, code snippet, journey map
+
+## Notes
+- Compose with design system components.
+- Ensure accessible labels and keyboard navigation.`}];n(e);

package/dist/node/example.js

@@ -0,0 +1 @@
+import{defineExample as e}from"@lssm/lib.contracts-spec/examples";var n=e({meta:{key:"examples.learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey Ui Onboarding",description:"Developer onboarding UI with checklists and journey maps.",kind:"template",visibility:"experimental",stability:"experimental",owners:["@contractspec-core"],tags:["package","examples","learning-journey-ui-onboarding"]},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","specs"]},studio:{enabled:!1,installable:!1},mcp:{enabled:!1}},entrypoints:{packageName:"@lssm/example.learning-journey-ui-onboarding"}}),r=n;export{n as ExamplesLearningJourneyUiOnboardingExample,r as default};