@contractspec/example.learning-journey-ui-onboarding 4.0.0 → 4.0.2

package/.turbo/turbo-build.log

@@ -2,30 +2,30 @@ $ contractspec-bun-build prebuild
 $ bun run build:bundle && bun run build:types
 $ contractspec-bun-build transpile
 [contractspec-bun-build] transpile target=bun root=src entries=15 noBundle=false
-Bundled 15 modules in 41ms
+Bundled 15 modules in 23ms
 
-  ./OnboardingMiniApp.js                            15.85 KB   (entry point)
-  ./index.js                                        18.78 KB   (entry point)
-  ./learning-journey-ui-onboarding.feature.js       503 bytes  (entry point)
-  views/index.js                                    14.96 KB   (entry point)
-  views/Overview.js                                 3.83 KB    (entry point)
-  views/Progress.js                                 3.56 KB    (entry point)
-  views/Steps.js                                    3.62 KB    (entry point)
-  views/Timeline.js                                 4.0 KB     (entry point)
-  components/index.js                               4.44 KB    (entry point)
-  components/CodeSnippet.js                         0.99 KB    (entry point)
-  components/JourneyMap.js                          1.42 KB    (entry point)
-  components/StepChecklist.js                       2.1 KB     (entry point)
-  docs/index.js                                     0.66 KB    (entry point)
-  docs/learning-journey-ui-onboarding.docblock.js   0.66 KB    (entry point)
-  ./example.js                                      0.71 KB    (entry point)
+  ./OnboardingMiniApp.js                            15.85 KB  (entry point)
+  ./index.js                                        18.79 KB  (entry point)
+  ./learning-journey-ui-onboarding.feature.js       0.51 KB   (entry point)
+  views/index.js                                    14.96 KB  (entry point)
+  views/Overview.js                                 3.83 KB   (entry point)
+  views/Progress.js                                 3.56 KB   (entry point)
+  views/Steps.js                                    3.62 KB   (entry point)
+  views/Timeline.js                                 4.0 KB    (entry point)
+  components/index.js                               4.44 KB   (entry point)
+  components/CodeSnippet.js                         0.99 KB   (entry point)
+  components/JourneyMap.js                          1.42 KB   (entry point)
+  components/StepChecklist.js                       2.1 KB    (entry point)
+  docs/index.js                                     0.66 KB   (entry point)
+  docs/learning-journey-ui-onboarding.docblock.js   0.66 KB   (entry point)
+  ./example.js                                      0.71 KB   (entry point)
 
 [contractspec-bun-build] transpile target=node root=src entries=15 noBundle=false
-Bundled 15 modules in 38ms
+Bundled 15 modules in 48ms
 
   ./OnboardingMiniApp.js                            15.79 KB   (entry point)
-  ./index.js                                        18.70 KB   (entry point)
-  ./learning-journey-ui-onboarding.feature.js       495 bytes  (entry point)
+  ./index.js                                        18.72 KB   (entry point)
+  ./learning-journey-ui-onboarding.feature.js       504 bytes  (entry point)
   views/index.js                                    14.90 KB   (entry point)
   views/Overview.js                                 3.81 KB    (entry point)
   views/Progress.js                                 3.54 KB    (entry point)
@@ -40,11 +40,11 @@ Bundled 15 modules in 38ms
   ./example.js                                      0.70 KB    (entry point)
 
 [contractspec-bun-build] transpile target=browser root=src entries=15 noBundle=false
-Bundled 15 modules in 34ms
+Bundled 15 modules in 33ms
 
   ./OnboardingMiniApp.js                            15.79 KB   (entry point)
-  ./index.js                                        18.70 KB   (entry point)
-  ./learning-journey-ui-onboarding.feature.js       495 bytes  (entry point)
+  ./index.js                                        18.72 KB   (entry point)
+  ./learning-journey-ui-onboarding.feature.js       504 bytes  (entry point)
   views/index.js                                    14.90 KB   (entry point)
   views/Overview.js                                 3.81 KB    (entry point)
   views/Progress.js                                 3.54 KB    (entry point)
@@ -60,3 +60,4 @@ Bundled 15 modules in 34ms
 
 $ contractspec-bun-build types
 $ contractspec-bun-build types
+$ contractspec-bun-build types

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @contractspec/example.learning-journey-ui-onboarding
 
+## 4.0.2
+
+### Patch Changes
+
+- chore: auto-bump internal dependents
+- Updated dependencies because of chore: auto-bump internal dependents
+- Updated dependencies because of Add focused design-system subpaths and harden ThemeSpec runtime, Tailwind bridge, form-control helpers, and form renderer internals without changing root-import compatibility.
+- Updated dependencies because of Add a ThemeSpec-aware and TranslationSpec-aware design-system form/control layer with stack primitives, exported control wrappers, and FormSpec renderer alignment.
+- Updated dependencies because of Add FormSpec layout hints, semantic field rendering, and portable text/textarea input-group addons.
+- Updated dependencies because of Keep design-system FormRender mobile-safe by preserving shared renderer imports for Metro aliases and hardening generated package artifacts.
+- Updated dependencies because of Add ThemeSpec light/dark modes and a design-system Tailwind bridge for CSS variables, presets, CSS text, and OKLCH color pass-through.
+- Updated dependencies because of Add a canonical typed result system for ContractSpec success and failure propagation across operations, workflows, jobs, server adapters, MCP, GraphQL, and React clients.
+  - @contractspec/example.learning-journey-platform-tour@4.0.1
+  - @contractspec/example.learning-journey-studio-onboarding@4.0.1
+  - @contractspec/example.learning-journey-ui-shared@4.0.2
+  - @contractspec/lib.ui-kit-core@3.8.1
+  - @contractspec/module.learning-journey@4.0.1
+  - @contractspec/lib.design-system@3.11.0
+  - @contractspec/lib.contracts-spec@5.5.0
+  - @contractspec/lib.ui-kit-web@3.10.3
+
+## 4.0.1
+
+### Patch Changes
+
+- chore: auto-bump internal dependents
+- Updated dependencies because of chore: auto-bump internal dependents
+  - @contractspec/example.learning-journey-ui-shared@4.0.1
+  - @contractspec/lib.design-system@3.10.1
+  - @contractspec/lib.ui-kit-web@3.10.2
+
 ## 4.0.0
 
 ### Major Changes

package/dist/browser/example.js

@@ -1 +1 @@
-import{defineExample as g}from"@contractspec/lib.contracts-spec";var h=g({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI — Onboarding",description:"UI mini-app for onboarding patterns: checklists, code snippets, journey map.",kind:"ui",visibility:"public",stability:"experimental",owners:["@platform.core"],tags:["learning","ui","onboarding"]},docs:{rootDocId:"docs.examples.learning-journey-ui-onboarding"},entrypoints:{packageName:"@contractspec/example.learning-journey-ui-onboarding",docs:"./docs"},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","markdown"]},studio:{enabled:!0,installable:!0},mcp:{enabled:!0}}}),q=h;export{q as default};
+import{defineExample as c}from"@contractspec/lib.contracts-spec/examples";var h=c({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:"@contractspec/example.learning-journey-ui-onboarding"}}),q=h;export{q as default,h as ExamplesLearningJourneyUiOnboardingExample};

package/dist/browser/index.js

@@ -1,8 +1,8 @@
-import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as E,CardHeader as O,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as L}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,B=y.completedStepIds.length,v=N>0?B/N*100:0,J=B===N,U=N-B,R=U*5,Q=f.totalXp??f.steps.reduce((K,Z)=>K+(Z.xpReward??0),0)+(f.completionRewards?.xp??0);return L("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(E,{className:"p-8",children:L("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("div",{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:J?"\uD83C\uDF89":"\uD83D\uDE80"}),L("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!J&&L("p",{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",R>0?`~${R} minutes`:"Less than a minute"]})]}),!J&&z(Nf,{size:"lg",onClick:b,children:B>0?"Continue":"Get Started"})]})})}),L("div",{className:"grid gap-4 md:grid-cols-3",children:[L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),L(E,{children:[L("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),L("p",{className:"mt-2 text-muted-foreground text-sm",children:[B," of ",N," steps completed"]})]})]}),L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),L(E,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:Q,showLabel:!1,size:"sm"})]})]}),L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),L(E,{children:[z("div",{className:"font-bold text-3xl",children:J?"✓":`~${R}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:J?"All done!":`${U} steps to go`})]})]})]}),L(M,{children:[z(O,{children:L(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(E,{children:z("div",{className:"space-y-3",children:f.steps.map((K,Z)=>{let $=y.completedStepIds.includes(K.id),D=!$&&f.steps.slice(0,Z).every((W)=>y.completedStepIds.includes(W.id));return L("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${$?"bg-green-500 text-white":D?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:$?"✓":Z+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${$?"text-green-500":D?"text-foreground":"text-muted-foreground"}`,children:K.title})}),K.xpReward&&L("span",{className:"text-muted-foreground text-sm",children:["+",K.xpReward," XP"]})]},K.id)})})})]}),J&&z(M,{className:"border-green-500/50 bg-green-500/5",children:L(E,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),L("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),L("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as h,jsxs as q}from"react/jsx-runtime";function l({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,B=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((R,Q)=>R+(Q.xpReward??0),0)+(f.completionRewards?.xp??0),J=b-N,U=J*5;return q("div",{className:"space-y-6",children:[q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCC8"}),h("span",{children:"Your Progress"})]})}),q(w,{className:"space-y-6",children:[h("div",{className:"flex items-center justify-center",children:q("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[q("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${B*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),q("div",{className:"text-center",children:[q("div",{className:"font-bold text-3xl",children:[Math.round(B),"%"]}),h("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),q("div",{className:"grid grid-cols-3 gap-4 text-center",children:[q("div",{children:[h("div",{className:"font-bold text-2xl text-green-500",children:N}),h("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),q("div",{children:[h("div",{className:"font-bold text-2xl text-orange-500",children:J}),h("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),q("div",{children:[q("div",{className:"font-bold text-2xl",children:[U,"m"]}),h("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"⚡"}),h("span",{children:"Experience Points"})]})}),q(w,{className:"space-y-4",children:[q("div",{className:"flex items-baseline gap-2",children:[h("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),q("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),h(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83C\uDFC5"}),h("span",{children:"Achievements"})]})}),q(w,{children:[h(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&q("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCB"}),h("span",{children:"Step Details"})]})}),h(w,{children:h("div",{className:"space-y-3",children:f.steps.map((R,Q)=>{let K=y.completedStepIds.includes(R.id),Z=K?100:0;return q("div",{className:"space-y-1",children:[q("div",{className:"flex items-center justify-between text-sm",children:[q("span",{className:K?"text-green-500":"text-foreground",children:[Q+1,". ",R.title]}),h("span",{className:K?"text-green-500":"text-muted-foreground",children:K?"✓":"Pending"})]}),h(zf,{value:Z,className:"h-1"})]},R.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as _,jsxs as A}from"react/jsx-runtime";function S({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:B,onToggle:v,onComplete:J}){return A("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[A("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[_("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"✓":y}),A("div",{className:"min-w-0 flex-1",children:[_("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!B&&f.description&&_("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&A("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),_("span",{className:P("shrink-0 transition-transform",B&&"rotate-180"),children:"▼"})]}),B&&A("div",{className:"border-t px-4 py-4",children:[f.description&&_("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&A("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[_("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),_("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),A("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&_(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&_(C,{size:"sm",onClick:J,children:"Mark as Complete"})]})]})]})}import{Progress as hf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as Jf}from"react";import{jsx as m,jsxs as X}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,B]=Jf(()=>{return f.steps.find((K)=>!y.completedStepIds.includes(K.id))?.id??null}),v=y.completedStepIds.length,J=f.steps.length,U=J>0?v/J*100:0,R=f.steps.findIndex((Q)=>!y.completedStepIds.includes(Q.id));return X("div",{className:"space-y-6",children:[X("div",{className:"space-y-2",children:[X("div",{className:"flex items-center justify-between",children:[m("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),X("span",{className:"text-muted-foreground text-sm",children:[v," / ",J," completed"]})]}),m(hf,{value:U,className:"h-2"})]}),m("div",{className:"space-y-3",children:f.steps.map((Q,K)=>{let Z=y.completedStepIds.includes(Q.id),$=K===R;return m(S,{step:Q,stepNumber:K+1,isCompleted:Z,isCurrent:$,isExpanded:N===Q.id,onToggle:()=>B(N===Q.id?null:Q.id),onComplete:()=>{b?.(Q.id);let D=f.steps[K+1];if(D&&!y.completedStepIds.includes(D.id))B(D.id)}},Q.id)})}),f.completionRewards&&U<100&&m("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:X("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xp&&X("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xp," XP bonus"]}),f.completionRewards.badgeKey&&X("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as F,jsxs as p}from"react/jsx-runtime";var x={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function n({steps:f,completedStepIds:y,currentStepId:b}){return F("div",{className:"relative overflow-x-auto pb-4",children:F("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,B)=>{let v=y.includes(N.id),J=N.id===b,U=N.metadata?.surface??"default",R=x[U]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[F("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",J&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!J&&"border-muted bg-muted/50"),children:v?"✓":R}),F("div",{className:"text-center",children:F("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",J&&!v&&"text-violet-500",!v&&!J&&"text-muted-foreground"),children:N.title})})]}),B<f.length-1&&F("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[B+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as G,jsxs as Y}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return Y("div",{className:"space-y-6",children:[Y("div",{className:"text-center",children:[G("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),G("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),Y(j,{children:[G(t,{children:Y(e,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDDFA️"}),G("span",{children:"Journey Map"})]})}),G(r,{children:G(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),Y(j,{children:[G(t,{children:Y(e,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDCCD"}),G("span",{children:"Step by Step"})]})}),G(r,{children:Y("div",{className:"relative",children:[G("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),G("div",{className:"space-y-6",children:f.steps.map((N,B)=>{let v=y.completedStepIds.includes(N.id),J=N.id===b,U=N.metadata?.surface??"general";return Y("div",{className:"relative flex gap-4 pl-2",children:[G("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":J?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"✓":B+1}),G("div",{className:"flex-1 pb-2",children:Y("div",{className:"rounded-lg border p-4",children:[Y("div",{className:"flex items-start justify-between gap-2",children:[Y("div",{children:[Y("div",{className:"flex items-center gap-2",children:[G("h4",{className:`font-semibold ${v?"text-green-500":J?"text-blue-500":"text-foreground"}`,children:N.title}),G("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:U})]}),G("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&Y("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),G("div",{className:"mt-3 text-xs",children:v?G("span",{className:"text-green-500",children:"✓ Completed"}):J?G("span",{className:"text-blue-500",children:"→ In Progress"}):G("span",{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as qf,ViewTabs as Bf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Gf,CardContent as Kf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Lf}from"react";import{jsx as u,jsxs as Rf}from"react/jsx-runtime";function Qf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:B="overview"}){let[v,J]=Lf(B),{progress:U,completeStep:R}=qf(f),Q=y??U,K=a((W)=>{J(W),N?.(W)},[N]),Z=a((W)=>{if(b)b(W);else R(W)},[b,R]),$=a(()=>{J("steps"),N?.("steps")},[N]);return Rf("div",{className:"space-y-6",children:[u(Gf,{children:u(Kf,{className:"p-4",children:u(Bf,{currentView:v,onViewChange:K})})}),(()=>{let W={track:f,progress:Q,onStepComplete:Z};switch(v){case"overview":return u(H,{...W,onStart:$});case"steps":return u(k,{...W});case"progress":return u(l,{...W});case"timeline":return u(d,{...W});default:return u(H,{...W,onStart:$})}})()]})}import{Button as Uf}from"@contractspec/lib.design-system";import{useState as Wf}from"react";import{jsx as T,jsxs as c,Fragment as Yf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,B]=Wf(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[T("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Yf,{children:[T("span",{className:"text-muted-foreground",children:"•"}),T("span",{className:"text-sm",children:b})]})]}),T(Uf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),B(!0),setTimeout(()=>B(!1),2000)},className:"h-7 text-xs",children:N?"✓ Copied":"Copy"})]}),T("pre",{className:"overflow-x-auto p-4",children:T("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as Zf}from"@contractspec/lib.contracts-spec/docs";var $f=[{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
+import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as F,CardHeader as m,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as R}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,G=y.completedStepIds.length,v=N>0?G/N*100:0,q=G===N,Z=N-G,Y=Z*5,W=f.totalXp??f.steps.reduce((Q,_)=>Q+(_.xpReward??0),0)+(f.completionRewards?.xp??0);return R("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(F,{className:"p-8",children:R("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("div",{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:q?"\uD83C\uDF89":"\uD83D\uDE80"}),R("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!q&&R("p",{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",Y>0?`~${Y} minutes`:"Less than a minute"]})]}),!q&&z(Nf,{size:"lg",onClick:b,children:G>0?"Continue":"Get Started"})]})})}),R("div",{className:"grid gap-4 md:grid-cols-3",children:[R(M,{children:[z(m,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),R(F,{children:[R("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),R("p",{className:"mt-2 text-muted-foreground text-sm",children:[G," of ",N," steps completed"]})]})]}),R(M,{children:[z(m,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),R(F,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:W,showLabel:!1,size:"sm"})]})]}),R(M,{children:[z(m,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),R(F,{children:[z("div",{className:"font-bold text-3xl",children:q?"✓":`~${Y}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:q?"All done!":`${Z} steps to go`})]})]})]}),R(M,{children:[z(m,{children:R(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(F,{children:z("div",{className:"space-y-3",children:f.steps.map((Q,_)=>{let D=y.completedStepIds.includes(Q.id),A=!D&&f.steps.slice(0,_).every(($)=>y.completedStepIds.includes($.id));return R("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${D?"bg-green-500 text-white":A?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:D?"✓":_+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${D?"text-green-500":A?"text-foreground":"text-muted-foreground"}`,children:Q.title})}),Q.xpReward&&R("span",{className:"text-muted-foreground text-sm",children:["+",Q.xpReward," XP"]})]},Q.id)})})})]}),q&&z(M,{className:"border-green-500/50 bg-green-500/5",children:R(F,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),R("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),R("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as h,jsxs as B}from"react/jsx-runtime";function S({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,G=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((Y,W)=>Y+(W.xpReward??0),0)+(f.completionRewards?.xp??0),q=b-N,Z=q*5;return B("div",{className:"space-y-6",children:[B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCC8"}),h("span",{children:"Your Progress"})]})}),B(w,{className:"space-y-6",children:[h("div",{className:"flex items-center justify-center",children:B("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[B("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${G*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),B("div",{className:"text-center",children:[B("div",{className:"font-bold text-3xl",children:[Math.round(G),"%"]}),h("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),B("div",{className:"grid grid-cols-3 gap-4 text-center",children:[B("div",{children:[h("div",{className:"font-bold text-2xl text-green-500",children:N}),h("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),B("div",{children:[h("div",{className:"font-bold text-2xl text-orange-500",children:q}),h("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),B("div",{children:[B("div",{className:"font-bold text-2xl",children:[Z,"m"]}),h("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"⚡"}),h("span",{children:"Experience Points"})]})}),B(w,{className:"space-y-4",children:[B("div",{className:"flex items-baseline gap-2",children:[h("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),B("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),h(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83C\uDFC5"}),h("span",{children:"Achievements"})]})}),B(w,{children:[h(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&B("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCB"}),h("span",{children:"Step Details"})]})}),h(w,{children:h("div",{className:"space-y-3",children:f.steps.map((Y,W)=>{let Q=y.completedStepIds.includes(Y.id),_=Q?100:0;return B("div",{className:"space-y-1",children:[B("div",{className:"flex items-center justify-between text-sm",children:[B("span",{className:Q?"text-green-500":"text-foreground",children:[W+1,". ",Y.title]}),h("span",{className:Q?"text-green-500":"text-muted-foreground",children:Q?"✓":"Pending"})]}),h(zf,{value:_,className:"h-1"})]},Y.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as L,jsxs as X}from"react/jsx-runtime";function l({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:G,onToggle:v,onComplete:q}){return X("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[X("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[L("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"✓":y}),X("div",{className:"min-w-0 flex-1",children:[L("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!G&&f.description&&L("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&X("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),L("span",{className:P("shrink-0 transition-transform",G&&"rotate-180"),children:"▼"})]}),G&&X("div",{className:"border-t px-4 py-4",children:[f.description&&L("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&X("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[L("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),L("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),X("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&L(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&L(C,{size:"sm",onClick:q,children:"Mark as Complete"})]})]})]})}import{Progress as hf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as qf}from"react";import{jsx as O,jsxs as u}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,G]=qf(()=>{return f.steps.find((Q)=>!y.completedStepIds.includes(Q.id))?.id??null}),v=y.completedStepIds.length,q=f.steps.length,Z=q>0?v/q*100:0,Y=f.steps.findIndex((W)=>!y.completedStepIds.includes(W.id));return u("div",{className:"space-y-6",children:[u("div",{className:"space-y-2",children:[u("div",{className:"flex items-center justify-between",children:[O("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),u("span",{className:"text-muted-foreground text-sm",children:[v," / ",q," completed"]})]}),O(hf,{value:Z,className:"h-2"})]}),O("div",{className:"space-y-3",children:f.steps.map((W,Q)=>{let _=y.completedStepIds.includes(W.id),D=Q===Y;return O(l,{step:W,stepNumber:Q+1,isCompleted:_,isCurrent:D,isExpanded:N===W.id,onToggle:()=>G(N===W.id?null:W.id),onComplete:()=>{b?.(W.id);let A=f.steps[Q+1];if(A&&!y.completedStepIds.includes(A.id))G(A.id)}},W.id)})}),f.completionRewards&&Z<100&&O("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:u("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xp&&u("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xp," XP bonus"]}),f.completionRewards.badgeKey&&u("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as T,jsxs as p}from"react/jsx-runtime";var x={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function n({steps:f,completedStepIds:y,currentStepId:b}){return T("div",{className:"relative overflow-x-auto pb-4",children:T("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,G)=>{let v=y.includes(N.id),q=N.id===b,Z=N.metadata?.surface??"default",Y=x[Z]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[T("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",q&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!q&&"border-muted bg-muted/50"),children:v?"✓":Y}),T("div",{className:"text-center",children:T("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",q&&!v&&"text-violet-500",!v&&!q&&"text-muted-foreground"),children:N.title})})]}),G<f.length-1&&T("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[G+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as K,jsxs as J}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return J("div",{className:"space-y-6",children:[J("div",{className:"text-center",children:[K("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),K("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),J(j,{children:[K(t,{children:J(e,{className:"flex items-center gap-2",children:[K("span",{children:"\uD83D\uDDFA️"}),K("span",{children:"Journey Map"})]})}),K(r,{children:K(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),J(j,{children:[K(t,{children:J(e,{className:"flex items-center gap-2",children:[K("span",{children:"\uD83D\uDCCD"}),K("span",{children:"Step by Step"})]})}),K(r,{children:J("div",{className:"relative",children:[K("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),K("div",{className:"space-y-6",children:f.steps.map((N,G)=>{let v=y.completedStepIds.includes(N.id),q=N.id===b,Z=N.metadata?.surface??"general";return J("div",{className:"relative flex gap-4 pl-2",children:[K("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":q?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"✓":G+1}),K("div",{className:"flex-1 pb-2",children:J("div",{className:"rounded-lg border p-4",children:[J("div",{className:"flex items-start justify-between gap-2",children:[J("div",{children:[J("div",{className:"flex items-center gap-2",children:[K("h4",{className:`font-semibold ${v?"text-green-500":q?"text-blue-500":"text-foreground"}`,children:N.title}),K("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:Z})]}),K("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&J("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),K("div",{className:"mt-3 text-xs",children:v?K("span",{className:"text-green-500",children:"✓ Completed"}):q?K("span",{className:"text-blue-500",children:"→ In Progress"}):K("span",{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as Bf,ViewTabs as Gf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Kf,CardContent as Qf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Rf}from"react";import{jsx as U,jsxs as Yf}from"react/jsx-runtime";function Wf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:G="overview"}){let[v,q]=Rf(G),{progress:Z,completeStep:Y}=Bf(f),W=y??Z,Q=a(($)=>{q($),N?.($)},[N]),_=a(($)=>{if(b)b($);else Y($)},[b,Y]),D=a(()=>{q("steps"),N?.("steps")},[N]);return Yf("div",{className:"space-y-6",children:[U(Kf,{children:U(Qf,{className:"p-4",children:U(Gf,{currentView:v,onViewChange:Q})})}),(()=>{let $={track:f,progress:W,onStepComplete:_};switch(v){case"overview":return U(H,{...$,onStart:D});case"steps":return U(k,{...$});case"progress":return U(S,{...$});case"timeline":return U(d,{...$});default:return U(H,{...$,onStart:D})}})()]})}import{Button as Zf}from"@contractspec/lib.design-system";import{useState as $f}from"react";import{jsx as E,jsxs as c,Fragment as Jf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,G]=$f(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[E("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Jf,{children:[E("span",{className:"text-muted-foreground",children:"•"}),E("span",{className:"text-sm",children:b})]})]}),E(Zf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),G(!0),setTimeout(()=>G(!1),2000)},className:"h-7 text-xs",children:N?"✓ Copied":"Copy"})]}),E("pre",{className:"overflow-x-auto p-4",children:E("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as _f}from"@contractspec/lib.contracts-spec/docs";var Df=[{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.`}];Zf($f);import{defineExample as _f}from"@contractspec/lib.contracts-spec";var uf=_f({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI — Onboarding",description:"UI mini-app for onboarding patterns: checklists, code snippets, journey map.",kind:"ui",visibility:"public",stability:"experimental",owners:["@platform.core"],tags:["learning","ui","onboarding"]},docs:{rootDocId:"docs.examples.learning-journey-ui-onboarding"},entrypoints:{packageName:"@contractspec/example.learning-journey-ui-onboarding",docs:"./docs"},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","markdown"]},studio:{enabled:!0,installable:!0},mcp:{enabled:!0}}}),Df=uf;import{defineFeature as Af}from"@contractspec/lib.contracts-spec";var _0=Af({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{Df as example,d as Timeline,k as Steps,S as StepChecklist,l as Progress,H as Overview,Qf as OnboardingMiniApp,_0 as LearningJourneyUiOnboardingFeature,n as JourneyMap,s as CodeSnippet};
+- Ensure accessible labels and keyboard navigation.`}];_f(Df);import{defineExample as Lf}from"@contractspec/lib.contracts-spec/examples";var Uf=Lf({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:"@contractspec/example.learning-journey-ui-onboarding"}}),Af=Uf;import{defineFeature as Xf}from"@contractspec/lib.contracts-spec/features";var L0=Xf({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{Af as example,d as Timeline,k as Steps,l as StepChecklist,S as Progress,H as Overview,Wf as OnboardingMiniApp,L0 as LearningJourneyUiOnboardingFeature,n as JourneyMap,Uf as ExamplesLearningJourneyUiOnboardingExample,s as CodeSnippet};

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

@@ -1 +1 @@
-import{defineFeature as g}from"@contractspec/lib.contracts-spec";var j=g({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{j as LearningJourneyUiOnboardingFeature};
+import{defineFeature as g}from"@contractspec/lib.contracts-spec/features";var j=g({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{j as LearningJourneyUiOnboardingFeature};

package/dist/example.d.ts

@@ -1,2 +1,3 @@
-declare const example: import("@contractspec/lib.contracts-spec").ExampleSpec;
-export default example;
+declare const ExamplesLearningJourneyUiOnboardingExample: import("@contractspec/lib.contracts-spec").ExampleSpec;
+export default ExamplesLearningJourneyUiOnboardingExample;
+export { ExamplesLearningJourneyUiOnboardingExample };

package/dist/example.js

@@ -1,2 +1,2 @@
 // @bun
-import{defineExample as g}from"@contractspec/lib.contracts-spec";var h=g({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI \u2014 Onboarding",description:"UI mini-app for onboarding patterns: checklists, code snippets, journey map.",kind:"ui",visibility:"public",stability:"experimental",owners:["@platform.core"],tags:["learning","ui","onboarding"]},docs:{rootDocId:"docs.examples.learning-journey-ui-onboarding"},entrypoints:{packageName:"@contractspec/example.learning-journey-ui-onboarding",docs:"./docs"},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","markdown"]},studio:{enabled:!0,installable:!0},mcp:{enabled:!0}}}),q=h;export{q as default};
+import{defineExample as c}from"@contractspec/lib.contracts-spec/examples";var h=c({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:"@contractspec/example.learning-journey-ui-onboarding"}}),q=h;export{q as default,h as ExamplesLearningJourneyUiOnboardingExample};

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export * from './learning-journey-ui-onboarding.feature';
 export { OnboardingMiniApp } from './OnboardingMiniApp';
 export { Overview, Progress, Steps, Timeline } from './views';
 import './docs';
+export * from './example';

package/dist/index.js

@@ -1,9 +1,9 @@
 // @bun
-import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as E,CardHeader as O,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as L}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,B=y.completedStepIds.length,v=N>0?B/N*100:0,J=B===N,U=N-B,R=U*5,Q=f.totalXp??f.steps.reduce((K,Z)=>K+(Z.xpReward??0),0)+(f.completionRewards?.xp??0);return L("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(E,{className:"p-8",children:L("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("div",{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:J?"\uD83C\uDF89":"\uD83D\uDE80"}),L("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!J&&L("p",{className:"mt-3 text-muted-foreground text-sm",children:["\u23F1\uFE0F Estimated time:"," ",R>0?`~${R} minutes`:"Less than a minute"]})]}),!J&&z(Nf,{size:"lg",onClick:b,children:B>0?"Continue":"Get Started"})]})})}),L("div",{className:"grid gap-4 md:grid-cols-3",children:[L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),L(E,{children:[L("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),L("p",{className:"mt-2 text-muted-foreground text-sm",children:[B," of ",N," steps completed"]})]})]}),L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),L(E,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:Q,showLabel:!1,size:"sm"})]})]}),L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),L(E,{children:[z("div",{className:"font-bold text-3xl",children:J?"\u2713":`~${R}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:J?"All done!":`${U} steps to go`})]})]})]}),L(M,{children:[z(O,{children:L(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(E,{children:z("div",{className:"space-y-3",children:f.steps.map((K,Z)=>{let $=y.completedStepIds.includes(K.id),D=!$&&f.steps.slice(0,Z).every((W)=>y.completedStepIds.includes(W.id));return L("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${$?"bg-green-500 text-white":D?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:$?"\u2713":Z+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${$?"text-green-500":D?"text-foreground":"text-muted-foreground"}`,children:K.title})}),K.xpReward&&L("span",{className:"text-muted-foreground text-sm",children:["+",K.xpReward," XP"]})]},K.id)})})})]}),J&&z(M,{className:"border-green-500/50 bg-green-500/5",children:L(E,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),L("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),L("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as h,jsxs as q}from"react/jsx-runtime";function l({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,B=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((R,Q)=>R+(Q.xpReward??0),0)+(f.completionRewards?.xp??0),J=b-N,U=J*5;return q("div",{className:"space-y-6",children:[q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCC8"}),h("span",{children:"Your Progress"})]})}),q(w,{className:"space-y-6",children:[h("div",{className:"flex items-center justify-center",children:q("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[q("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${B*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),q("div",{className:"text-center",children:[q("div",{className:"font-bold text-3xl",children:[Math.round(B),"%"]}),h("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),q("div",{className:"grid grid-cols-3 gap-4 text-center",children:[q("div",{children:[h("div",{className:"font-bold text-2xl text-green-500",children:N}),h("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),q("div",{children:[h("div",{className:"font-bold text-2xl text-orange-500",children:J}),h("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),q("div",{children:[q("div",{className:"font-bold text-2xl",children:[U,"m"]}),h("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\u26A1"}),h("span",{children:"Experience Points"})]})}),q(w,{className:"space-y-4",children:[q("div",{className:"flex items-baseline gap-2",children:[h("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),q("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),h(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83C\uDFC5"}),h("span",{children:"Achievements"})]})}),q(w,{children:[h(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&q("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCB"}),h("span",{children:"Step Details"})]})}),h(w,{children:h("div",{className:"space-y-3",children:f.steps.map((R,Q)=>{let K=y.completedStepIds.includes(R.id),Z=K?100:0;return q("div",{className:"space-y-1",children:[q("div",{className:"flex items-center justify-between text-sm",children:[q("span",{className:K?"text-green-500":"text-foreground",children:[Q+1,". ",R.title]}),h("span",{className:K?"text-green-500":"text-muted-foreground",children:K?"\u2713":"Pending"})]}),h(zf,{value:Z,className:"h-1"})]},R.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as _,jsxs as A}from"react/jsx-runtime";function S({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:B,onToggle:v,onComplete:J}){return A("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[A("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[_("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"\u2713":y}),A("div",{className:"min-w-0 flex-1",children:[_("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!B&&f.description&&_("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&A("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),_("span",{className:P("shrink-0 transition-transform",B&&"rotate-180"),children:"\u25BC"})]}),B&&A("div",{className:"border-t px-4 py-4",children:[f.description&&_("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&A("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[_("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),_("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),A("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&_(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&_(C,{size:"sm",onClick:J,children:"Mark as Complete"})]})]})]})}import{Progress as hf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as Jf}from"react";import{jsx as m,jsxs as X}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,B]=Jf(()=>{return f.steps.find((K)=>!y.completedStepIds.includes(K.id))?.id??null}),v=y.completedStepIds.length,J=f.steps.length,U=J>0?v/J*100:0,R=f.steps.findIndex((Q)=>!y.completedStepIds.includes(Q.id));return X("div",{className:"space-y-6",children:[X("div",{className:"space-y-2",children:[X("div",{className:"flex items-center justify-between",children:[m("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),X("span",{className:"text-muted-foreground text-sm",children:[v," / ",J," completed"]})]}),m(hf,{value:U,className:"h-2"})]}),m("div",{className:"space-y-3",children:f.steps.map((Q,K)=>{let Z=y.completedStepIds.includes(Q.id),$=K===R;return m(S,{step:Q,stepNumber:K+1,isCompleted:Z,isCurrent:$,isExpanded:N===Q.id,onToggle:()=>B(N===Q.id?null:Q.id),onComplete:()=>{b?.(Q.id);let D=f.steps[K+1];if(D&&!y.completedStepIds.includes(D.id))B(D.id)}},Q.id)})}),f.completionRewards&&U<100&&m("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:X("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xp&&X("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xp," XP bonus"]}),f.completionRewards.badgeKey&&X("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as F,jsxs as p}from"react/jsx-runtime";var x={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:f,completedStepIds:y,currentStepId:b}){return F("div",{className:"relative overflow-x-auto pb-4",children:F("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,B)=>{let v=y.includes(N.id),J=N.id===b,U=N.metadata?.surface??"default",R=x[U]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[F("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",J&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!J&&"border-muted bg-muted/50"),children:v?"\u2713":R}),F("div",{className:"text-center",children:F("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",J&&!v&&"text-violet-500",!v&&!J&&"text-muted-foreground"),children:N.title})})]}),B<f.length-1&&F("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[B+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as G,jsxs as Y}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return Y("div",{className:"space-y-6",children:[Y("div",{className:"text-center",children:[G("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),G("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),Y(j,{children:[G(t,{children:Y(e,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDDFA\uFE0F"}),G("span",{children:"Journey Map"})]})}),G(r,{children:G(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),Y(j,{children:[G(t,{children:Y(e,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDCCD"}),G("span",{children:"Step by Step"})]})}),G(r,{children:Y("div",{className:"relative",children:[G("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),G("div",{className:"space-y-6",children:f.steps.map((N,B)=>{let v=y.completedStepIds.includes(N.id),J=N.id===b,U=N.metadata?.surface??"general";return Y("div",{className:"relative flex gap-4 pl-2",children:[G("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":J?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"\u2713":B+1}),G("div",{className:"flex-1 pb-2",children:Y("div",{className:"rounded-lg border p-4",children:[Y("div",{className:"flex items-start justify-between gap-2",children:[Y("div",{children:[Y("div",{className:"flex items-center gap-2",children:[G("h4",{className:`font-semibold ${v?"text-green-500":J?"text-blue-500":"text-foreground"}`,children:N.title}),G("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:U})]}),G("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&Y("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),G("div",{className:"mt-3 text-xs",children:v?G("span",{className:"text-green-500",children:"\u2713 Completed"}):J?G("span",{className:"text-blue-500",children:"\u2192 In Progress"}):G("span",{className:"text-muted-foreground",children:"\u25CB Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as qf,ViewTabs as Bf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Gf,CardContent as Kf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Lf}from"react";import{jsx as u,jsxs as Rf}from"react/jsx-runtime";function Qf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:B="overview"}){let[v,J]=Lf(B),{progress:U,completeStep:R}=qf(f),Q=y??U,K=a((W)=>{J(W),N?.(W)},[N]),Z=a((W)=>{if(b)b(W);else R(W)},[b,R]),$=a(()=>{J("steps"),N?.("steps")},[N]);return Rf("div",{className:"space-y-6",children:[u(Gf,{children:u(Kf,{className:"p-4",children:u(Bf,{currentView:v,onViewChange:K})})}),(()=>{let W={track:f,progress:Q,onStepComplete:Z};switch(v){case"overview":return u(H,{...W,onStart:$});case"steps":return u(k,{...W});case"progress":return u(l,{...W});case"timeline":return u(d,{...W});default:return u(H,{...W,onStart:$})}})()]})}import{Button as Uf}from"@contractspec/lib.design-system";import{useState as Wf}from"react";import{jsx as T,jsxs as c,Fragment as Yf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,B]=Wf(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[T("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Yf,{children:[T("span",{className:"text-muted-foreground",children:"\u2022"}),T("span",{className:"text-sm",children:b})]})]}),T(Uf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),B(!0),setTimeout(()=>B(!1),2000)},className:"h-7 text-xs",children:N?"\u2713 Copied":"Copy"})]}),T("pre",{className:"overflow-x-auto p-4",children:T("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as Zf}from"@contractspec/lib.contracts-spec/docs";var $f=[{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
+import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as F,CardHeader as m,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as R}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,G=y.completedStepIds.length,v=N>0?G/N*100:0,q=G===N,Z=N-G,Y=Z*5,W=f.totalXp??f.steps.reduce((Q,_)=>Q+(_.xpReward??0),0)+(f.completionRewards?.xp??0);return R("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(F,{className:"p-8",children:R("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("div",{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:q?"\uD83C\uDF89":"\uD83D\uDE80"}),R("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!q&&R("p",{className:"mt-3 text-muted-foreground text-sm",children:["\u23F1\uFE0F Estimated time:"," ",Y>0?`~${Y} minutes`:"Less than a minute"]})]}),!q&&z(Nf,{size:"lg",onClick:b,children:G>0?"Continue":"Get Started"})]})})}),R("div",{className:"grid gap-4 md:grid-cols-3",children:[R(M,{children:[z(m,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),R(F,{children:[R("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),R("p",{className:"mt-2 text-muted-foreground text-sm",children:[G," of ",N," steps completed"]})]})]}),R(M,{children:[z(m,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),R(F,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:W,showLabel:!1,size:"sm"})]})]}),R(M,{children:[z(m,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),R(F,{children:[z("div",{className:"font-bold text-3xl",children:q?"\u2713":`~${Y}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:q?"All done!":`${Z} steps to go`})]})]})]}),R(M,{children:[z(m,{children:R(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(F,{children:z("div",{className:"space-y-3",children:f.steps.map((Q,_)=>{let D=y.completedStepIds.includes(Q.id),A=!D&&f.steps.slice(0,_).every(($)=>y.completedStepIds.includes($.id));return R("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${D?"bg-green-500 text-white":A?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:D?"\u2713":_+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${D?"text-green-500":A?"text-foreground":"text-muted-foreground"}`,children:Q.title})}),Q.xpReward&&R("span",{className:"text-muted-foreground text-sm",children:["+",Q.xpReward," XP"]})]},Q.id)})})})]}),q&&z(M,{className:"border-green-500/50 bg-green-500/5",children:R(F,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),R("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),R("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as h,jsxs as B}from"react/jsx-runtime";function S({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,G=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((Y,W)=>Y+(W.xpReward??0),0)+(f.completionRewards?.xp??0),q=b-N,Z=q*5;return B("div",{className:"space-y-6",children:[B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCC8"}),h("span",{children:"Your Progress"})]})}),B(w,{className:"space-y-6",children:[h("div",{className:"flex items-center justify-center",children:B("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[B("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${G*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),B("div",{className:"text-center",children:[B("div",{className:"font-bold text-3xl",children:[Math.round(G),"%"]}),h("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),B("div",{className:"grid grid-cols-3 gap-4 text-center",children:[B("div",{children:[h("div",{className:"font-bold text-2xl text-green-500",children:N}),h("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),B("div",{children:[h("div",{className:"font-bold text-2xl text-orange-500",children:q}),h("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),B("div",{children:[B("div",{className:"font-bold text-2xl",children:[Z,"m"]}),h("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"\u26A1"}),h("span",{children:"Experience Points"})]})}),B(w,{className:"space-y-4",children:[B("div",{className:"flex items-baseline gap-2",children:[h("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),B("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),h(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83C\uDFC5"}),h("span",{children:"Achievements"})]})}),B(w,{children:[h(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&B("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCB"}),h("span",{children:"Step Details"})]})}),h(w,{children:h("div",{className:"space-y-3",children:f.steps.map((Y,W)=>{let Q=y.completedStepIds.includes(Y.id),_=Q?100:0;return B("div",{className:"space-y-1",children:[B("div",{className:"flex items-center justify-between text-sm",children:[B("span",{className:Q?"text-green-500":"text-foreground",children:[W+1,". ",Y.title]}),h("span",{className:Q?"text-green-500":"text-muted-foreground",children:Q?"\u2713":"Pending"})]}),h(zf,{value:_,className:"h-1"})]},Y.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as L,jsxs as X}from"react/jsx-runtime";function l({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:G,onToggle:v,onComplete:q}){return X("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[X("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[L("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"\u2713":y}),X("div",{className:"min-w-0 flex-1",children:[L("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!G&&f.description&&L("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&X("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),L("span",{className:P("shrink-0 transition-transform",G&&"rotate-180"),children:"\u25BC"})]}),G&&X("div",{className:"border-t px-4 py-4",children:[f.description&&L("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&X("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[L("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),L("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),X("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&L(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&L(C,{size:"sm",onClick:q,children:"Mark as Complete"})]})]})]})}import{Progress as hf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as qf}from"react";import{jsx as O,jsxs as u}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,G]=qf(()=>{return f.steps.find((Q)=>!y.completedStepIds.includes(Q.id))?.id??null}),v=y.completedStepIds.length,q=f.steps.length,Z=q>0?v/q*100:0,Y=f.steps.findIndex((W)=>!y.completedStepIds.includes(W.id));return u("div",{className:"space-y-6",children:[u("div",{className:"space-y-2",children:[u("div",{className:"flex items-center justify-between",children:[O("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),u("span",{className:"text-muted-foreground text-sm",children:[v," / ",q," completed"]})]}),O(hf,{value:Z,className:"h-2"})]}),O("div",{className:"space-y-3",children:f.steps.map((W,Q)=>{let _=y.completedStepIds.includes(W.id),D=Q===Y;return O(l,{step:W,stepNumber:Q+1,isCompleted:_,isCurrent:D,isExpanded:N===W.id,onToggle:()=>G(N===W.id?null:W.id),onComplete:()=>{b?.(W.id);let A=f.steps[Q+1];if(A&&!y.completedStepIds.includes(A.id))G(A.id)}},W.id)})}),f.completionRewards&&Z<100&&O("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:u("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xp&&u("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xp," XP bonus"]}),f.completionRewards.badgeKey&&u("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as T,jsxs as p}from"react/jsx-runtime";var x={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:f,completedStepIds:y,currentStepId:b}){return T("div",{className:"relative overflow-x-auto pb-4",children:T("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,G)=>{let v=y.includes(N.id),q=N.id===b,Z=N.metadata?.surface??"default",Y=x[Z]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[T("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",q&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!q&&"border-muted bg-muted/50"),children:v?"\u2713":Y}),T("div",{className:"text-center",children:T("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",q&&!v&&"text-violet-500",!v&&!q&&"text-muted-foreground"),children:N.title})})]}),G<f.length-1&&T("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[G+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as K,jsxs as J}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return J("div",{className:"space-y-6",children:[J("div",{className:"text-center",children:[K("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),K("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),J(j,{children:[K(t,{children:J(e,{className:"flex items-center gap-2",children:[K("span",{children:"\uD83D\uDDFA\uFE0F"}),K("span",{children:"Journey Map"})]})}),K(r,{children:K(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),J(j,{children:[K(t,{children:J(e,{className:"flex items-center gap-2",children:[K("span",{children:"\uD83D\uDCCD"}),K("span",{children:"Step by Step"})]})}),K(r,{children:J("div",{className:"relative",children:[K("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),K("div",{className:"space-y-6",children:f.steps.map((N,G)=>{let v=y.completedStepIds.includes(N.id),q=N.id===b,Z=N.metadata?.surface??"general";return J("div",{className:"relative flex gap-4 pl-2",children:[K("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":q?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"\u2713":G+1}),K("div",{className:"flex-1 pb-2",children:J("div",{className:"rounded-lg border p-4",children:[J("div",{className:"flex items-start justify-between gap-2",children:[J("div",{children:[J("div",{className:"flex items-center gap-2",children:[K("h4",{className:`font-semibold ${v?"text-green-500":q?"text-blue-500":"text-foreground"}`,children:N.title}),K("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:Z})]}),K("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&J("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),K("div",{className:"mt-3 text-xs",children:v?K("span",{className:"text-green-500",children:"\u2713 Completed"}):q?K("span",{className:"text-blue-500",children:"\u2192 In Progress"}):K("span",{className:"text-muted-foreground",children:"\u25CB Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as Bf,ViewTabs as Gf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Kf,CardContent as Qf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Rf}from"react";import{jsx as U,jsxs as Yf}from"react/jsx-runtime";function Wf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:G="overview"}){let[v,q]=Rf(G),{progress:Z,completeStep:Y}=Bf(f),W=y??Z,Q=a(($)=>{q($),N?.($)},[N]),_=a(($)=>{if(b)b($);else Y($)},[b,Y]),D=a(()=>{q("steps"),N?.("steps")},[N]);return Yf("div",{className:"space-y-6",children:[U(Kf,{children:U(Qf,{className:"p-4",children:U(Gf,{currentView:v,onViewChange:Q})})}),(()=>{let $={track:f,progress:W,onStepComplete:_};switch(v){case"overview":return U(H,{...$,onStart:D});case"steps":return U(k,{...$});case"progress":return U(S,{...$});case"timeline":return U(d,{...$});default:return U(H,{...$,onStart:D})}})()]})}import{Button as Zf}from"@contractspec/lib.design-system";import{useState as $f}from"react";import{jsx as E,jsxs as c,Fragment as Jf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,G]=$f(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[E("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Jf,{children:[E("span",{className:"text-muted-foreground",children:"\u2022"}),E("span",{className:"text-sm",children:b})]})]}),E(Zf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),G(!0),setTimeout(()=>G(!1),2000)},className:"h-7 text-xs",children:N?"\u2713 Copied":"Copy"})]}),E("pre",{className:"overflow-x-auto p-4",children:E("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as _f}from"@contractspec/lib.contracts-spec/docs";var Df=[{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.`}];Zf($f);import{defineExample as _f}from"@contractspec/lib.contracts-spec";var uf=_f({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI \u2014 Onboarding",description:"UI mini-app for onboarding patterns: checklists, code snippets, journey map.",kind:"ui",visibility:"public",stability:"experimental",owners:["@platform.core"],tags:["learning","ui","onboarding"]},docs:{rootDocId:"docs.examples.learning-journey-ui-onboarding"},entrypoints:{packageName:"@contractspec/example.learning-journey-ui-onboarding",docs:"./docs"},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","markdown"]},studio:{enabled:!0,installable:!0},mcp:{enabled:!0}}}),Df=uf;import{defineFeature as Af}from"@contractspec/lib.contracts-spec";var _0=Af({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{Df as example,d as Timeline,k as Steps,S as StepChecklist,l as Progress,H as Overview,Qf as OnboardingMiniApp,_0 as LearningJourneyUiOnboardingFeature,n as JourneyMap,s as CodeSnippet};
+- Ensure accessible labels and keyboard navigation.`}];_f(Df);import{defineExample as Lf}from"@contractspec/lib.contracts-spec/examples";var Uf=Lf({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:"@contractspec/example.learning-journey-ui-onboarding"}}),Af=Uf;import{defineFeature as Xf}from"@contractspec/lib.contracts-spec/features";var L0=Xf({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{Af as example,d as Timeline,k as Steps,l as StepChecklist,S as Progress,H as Overview,Wf as OnboardingMiniApp,L0 as LearningJourneyUiOnboardingFeature,n as JourneyMap,Uf as ExamplesLearningJourneyUiOnboardingExample,s as CodeSnippet};

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

@@ -1,2 +1,2 @@
 // @bun
-import{defineFeature as g}from"@contractspec/lib.contracts-spec";var j=g({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{j as LearningJourneyUiOnboardingFeature};
+import{defineFeature as g}from"@contractspec/lib.contracts-spec/features";var j=g({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{j as LearningJourneyUiOnboardingFeature};

package/dist/node/example.js

@@ -1 +1 @@
-import{defineExample as g}from"@contractspec/lib.contracts-spec";var h=g({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI — Onboarding",description:"UI mini-app for onboarding patterns: checklists, code snippets, journey map.",kind:"ui",visibility:"public",stability:"experimental",owners:["@platform.core"],tags:["learning","ui","onboarding"]},docs:{rootDocId:"docs.examples.learning-journey-ui-onboarding"},entrypoints:{packageName:"@contractspec/example.learning-journey-ui-onboarding",docs:"./docs"},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","markdown"]},studio:{enabled:!0,installable:!0},mcp:{enabled:!0}}}),q=h;export{q as default};
+import{defineExample as c}from"@contractspec/lib.contracts-spec/examples";var h=c({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:"@contractspec/example.learning-journey-ui-onboarding"}}),q=h;export{q as default,h as ExamplesLearningJourneyUiOnboardingExample};

package/dist/node/index.js

@@ -1,8 +1,8 @@
-import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as E,CardHeader as O,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as L}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,B=y.completedStepIds.length,v=N>0?B/N*100:0,J=B===N,U=N-B,R=U*5,Q=f.totalXp??f.steps.reduce((K,Z)=>K+(Z.xpReward??0),0)+(f.completionRewards?.xp??0);return L("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(E,{className:"p-8",children:L("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("div",{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:J?"\uD83C\uDF89":"\uD83D\uDE80"}),L("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!J&&L("p",{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",R>0?`~${R} minutes`:"Less than a minute"]})]}),!J&&z(Nf,{size:"lg",onClick:b,children:B>0?"Continue":"Get Started"})]})})}),L("div",{className:"grid gap-4 md:grid-cols-3",children:[L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),L(E,{children:[L("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),L("p",{className:"mt-2 text-muted-foreground text-sm",children:[B," of ",N," steps completed"]})]})]}),L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),L(E,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:Q,showLabel:!1,size:"sm"})]})]}),L(M,{children:[z(O,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),L(E,{children:[z("div",{className:"font-bold text-3xl",children:J?"✓":`~${R}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:J?"All done!":`${U} steps to go`})]})]})]}),L(M,{children:[z(O,{children:L(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(E,{children:z("div",{className:"space-y-3",children:f.steps.map((K,Z)=>{let $=y.completedStepIds.includes(K.id),D=!$&&f.steps.slice(0,Z).every((W)=>y.completedStepIds.includes(W.id));return L("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${$?"bg-green-500 text-white":D?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:$?"✓":Z+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${$?"text-green-500":D?"text-foreground":"text-muted-foreground"}`,children:K.title})}),K.xpReward&&L("span",{className:"text-muted-foreground text-sm",children:["+",K.xpReward," XP"]})]},K.id)})})})]}),J&&z(M,{className:"border-green-500/50 bg-green-500/5",children:L(E,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),L("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),L("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as h,jsxs as q}from"react/jsx-runtime";function l({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,B=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((R,Q)=>R+(Q.xpReward??0),0)+(f.completionRewards?.xp??0),J=b-N,U=J*5;return q("div",{className:"space-y-6",children:[q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCC8"}),h("span",{children:"Your Progress"})]})}),q(w,{className:"space-y-6",children:[h("div",{className:"flex items-center justify-center",children:q("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[q("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${B*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),q("div",{className:"text-center",children:[q("div",{className:"font-bold text-3xl",children:[Math.round(B),"%"]}),h("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),q("div",{className:"grid grid-cols-3 gap-4 text-center",children:[q("div",{children:[h("div",{className:"font-bold text-2xl text-green-500",children:N}),h("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),q("div",{children:[h("div",{className:"font-bold text-2xl text-orange-500",children:J}),h("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),q("div",{children:[q("div",{className:"font-bold text-2xl",children:[U,"m"]}),h("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"⚡"}),h("span",{children:"Experience Points"})]})}),q(w,{className:"space-y-4",children:[q("div",{className:"flex items-baseline gap-2",children:[h("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),q("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),h(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83C\uDFC5"}),h("span",{children:"Achievements"})]})}),q(w,{children:[h(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&q("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),q(I,{children:[h(g,{children:q(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCB"}),h("span",{children:"Step Details"})]})}),h(w,{children:h("div",{className:"space-y-3",children:f.steps.map((R,Q)=>{let K=y.completedStepIds.includes(R.id),Z=K?100:0;return q("div",{className:"space-y-1",children:[q("div",{className:"flex items-center justify-between text-sm",children:[q("span",{className:K?"text-green-500":"text-foreground",children:[Q+1,". ",R.title]}),h("span",{className:K?"text-green-500":"text-muted-foreground",children:K?"✓":"Pending"})]}),h(zf,{value:Z,className:"h-1"})]},R.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as _,jsxs as A}from"react/jsx-runtime";function S({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:B,onToggle:v,onComplete:J}){return A("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[A("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[_("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"✓":y}),A("div",{className:"min-w-0 flex-1",children:[_("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!B&&f.description&&_("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&A("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),_("span",{className:P("shrink-0 transition-transform",B&&"rotate-180"),children:"▼"})]}),B&&A("div",{className:"border-t px-4 py-4",children:[f.description&&_("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&A("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[_("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),_("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),A("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&_(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&_(C,{size:"sm",onClick:J,children:"Mark as Complete"})]})]})]})}import{Progress as hf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as Jf}from"react";import{jsx as m,jsxs as X}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,B]=Jf(()=>{return f.steps.find((K)=>!y.completedStepIds.includes(K.id))?.id??null}),v=y.completedStepIds.length,J=f.steps.length,U=J>0?v/J*100:0,R=f.steps.findIndex((Q)=>!y.completedStepIds.includes(Q.id));return X("div",{className:"space-y-6",children:[X("div",{className:"space-y-2",children:[X("div",{className:"flex items-center justify-between",children:[m("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),X("span",{className:"text-muted-foreground text-sm",children:[v," / ",J," completed"]})]}),m(hf,{value:U,className:"h-2"})]}),m("div",{className:"space-y-3",children:f.steps.map((Q,K)=>{let Z=y.completedStepIds.includes(Q.id),$=K===R;return m(S,{step:Q,stepNumber:K+1,isCompleted:Z,isCurrent:$,isExpanded:N===Q.id,onToggle:()=>B(N===Q.id?null:Q.id),onComplete:()=>{b?.(Q.id);let D=f.steps[K+1];if(D&&!y.completedStepIds.includes(D.id))B(D.id)}},Q.id)})}),f.completionRewards&&U<100&&m("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:X("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xp&&X("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xp," XP bonus"]}),f.completionRewards.badgeKey&&X("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as F,jsxs as p}from"react/jsx-runtime";var x={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function n({steps:f,completedStepIds:y,currentStepId:b}){return F("div",{className:"relative overflow-x-auto pb-4",children:F("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,B)=>{let v=y.includes(N.id),J=N.id===b,U=N.metadata?.surface??"default",R=x[U]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[F("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",J&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!J&&"border-muted bg-muted/50"),children:v?"✓":R}),F("div",{className:"text-center",children:F("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",J&&!v&&"text-violet-500",!v&&!J&&"text-muted-foreground"),children:N.title})})]}),B<f.length-1&&F("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[B+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as G,jsxs as Y}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return Y("div",{className:"space-y-6",children:[Y("div",{className:"text-center",children:[G("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),G("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),Y(j,{children:[G(t,{children:Y(e,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDDFA️"}),G("span",{children:"Journey Map"})]})}),G(r,{children:G(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),Y(j,{children:[G(t,{children:Y(e,{className:"flex items-center gap-2",children:[G("span",{children:"\uD83D\uDCCD"}),G("span",{children:"Step by Step"})]})}),G(r,{children:Y("div",{className:"relative",children:[G("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),G("div",{className:"space-y-6",children:f.steps.map((N,B)=>{let v=y.completedStepIds.includes(N.id),J=N.id===b,U=N.metadata?.surface??"general";return Y("div",{className:"relative flex gap-4 pl-2",children:[G("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":J?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"✓":B+1}),G("div",{className:"flex-1 pb-2",children:Y("div",{className:"rounded-lg border p-4",children:[Y("div",{className:"flex items-start justify-between gap-2",children:[Y("div",{children:[Y("div",{className:"flex items-center gap-2",children:[G("h4",{className:`font-semibold ${v?"text-green-500":J?"text-blue-500":"text-foreground"}`,children:N.title}),G("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:U})]}),G("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&Y("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),G("div",{className:"mt-3 text-xs",children:v?G("span",{className:"text-green-500",children:"✓ Completed"}):J?G("span",{className:"text-blue-500",children:"→ In Progress"}):G("span",{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as qf,ViewTabs as Bf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Gf,CardContent as Kf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Lf}from"react";import{jsx as u,jsxs as Rf}from"react/jsx-runtime";function Qf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:B="overview"}){let[v,J]=Lf(B),{progress:U,completeStep:R}=qf(f),Q=y??U,K=a((W)=>{J(W),N?.(W)},[N]),Z=a((W)=>{if(b)b(W);else R(W)},[b,R]),$=a(()=>{J("steps"),N?.("steps")},[N]);return Rf("div",{className:"space-y-6",children:[u(Gf,{children:u(Kf,{className:"p-4",children:u(Bf,{currentView:v,onViewChange:K})})}),(()=>{let W={track:f,progress:Q,onStepComplete:Z};switch(v){case"overview":return u(H,{...W,onStart:$});case"steps":return u(k,{...W});case"progress":return u(l,{...W});case"timeline":return u(d,{...W});default:return u(H,{...W,onStart:$})}})()]})}import{Button as Uf}from"@contractspec/lib.design-system";import{useState as Wf}from"react";import{jsx as T,jsxs as c,Fragment as Yf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,B]=Wf(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[T("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Yf,{children:[T("span",{className:"text-muted-foreground",children:"•"}),T("span",{className:"text-sm",children:b})]})]}),T(Uf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),B(!0),setTimeout(()=>B(!1),2000)},className:"h-7 text-xs",children:N?"✓ Copied":"Copy"})]}),T("pre",{className:"overflow-x-auto p-4",children:T("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as Zf}from"@contractspec/lib.contracts-spec/docs";var $f=[{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
+import{XpBar as ff}from"@contractspec/example.learning-journey-ui-shared";import{Button as Nf}from"@contractspec/lib.design-system";import{Card as M,CardContent as F,CardHeader as m,CardTitle as V}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as bf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as z,jsxs as R}from"react/jsx-runtime";function H({track:f,progress:y,onStart:b}){let N=f.steps.length,G=y.completedStepIds.length,v=N>0?G/N*100:0,q=G===N,Z=N-G,Y=Z*5,W=f.totalXp??f.steps.reduce((Q,_)=>Q+(_.xpReward??0),0)+(f.completionRewards?.xp??0);return R("div",{className:"space-y-6",children:[z(M,{className:"overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10",children:z(F,{className:"p-8",children:R("div",{className:"flex flex-col items-center gap-6 text-center md:flex-row md:text-left",children:[z("div",{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:q?"\uD83C\uDF89":"\uD83D\uDE80"}),R("div",{className:"flex-1",children:[z("h1",{className:"font-bold text-2xl",children:f.name}),z("p",{className:"mt-1 max-w-2xl text-muted-foreground",children:f.description}),!q&&R("p",{className:"mt-3 text-muted-foreground text-sm",children:["⏱️ Estimated time:"," ",Y>0?`~${Y} minutes`:"Less than a minute"]})]}),!q&&z(Nf,{size:"lg",onClick:b,children:G>0?"Continue":"Get Started"})]})})}),R("div",{className:"grid gap-4 md:grid-cols-3",children:[R(M,{children:[z(m,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Progress"})}),R(F,{children:[R("div",{className:"font-bold text-3xl",children:[Math.round(v),"%"]}),z(bf,{value:v,className:"mt-2 h-2"}),R("p",{className:"mt-2 text-muted-foreground text-sm",children:[G," of ",N," steps completed"]})]})]}),R(M,{children:[z(m,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),R(F,{children:[z("div",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),z(ff,{current:y.xpEarned,max:W,showLabel:!1,size:"sm"})]})]}),R(M,{children:[z(m,{className:"pb-2",children:z(V,{className:"font-medium text-muted-foreground text-sm",children:"Time Remaining"})}),R(F,{children:[z("div",{className:"font-bold text-3xl",children:q?"✓":`~${Y}m`}),z("p",{className:"mt-2 text-muted-foreground text-sm",children:q?"All done!":`${Z} steps to go`})]})]})]}),R(M,{children:[z(m,{children:R(V,{className:"flex items-center gap-2",children:[z("span",{children:"\uD83D\uDCCB"}),z("span",{children:"Your Journey"})]})}),z(F,{children:z("div",{className:"space-y-3",children:f.steps.map((Q,_)=>{let D=y.completedStepIds.includes(Q.id),A=!D&&f.steps.slice(0,_).every(($)=>y.completedStepIds.includes($.id));return R("div",{className:"flex items-center gap-4 rounded-lg border p-3",children:[z("div",{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-semibold text-sm ${D?"bg-green-500 text-white":A?"bg-blue-500 text-white":"bg-muted text-muted-foreground"}`,children:D?"✓":_+1}),z("div",{className:"min-w-0 flex-1",children:z("p",{className:`font-medium ${D?"text-green-500":A?"text-foreground":"text-muted-foreground"}`,children:Q.title})}),Q.xpReward&&R("span",{className:"text-muted-foreground text-sm",children:["+",Q.xpReward," XP"]})]},Q.id)})})})]}),q&&z(M,{className:"border-green-500/50 bg-green-500/5",children:R(F,{className:"flex items-center gap-4 p-6",children:[z("div",{className:"text-4xl",children:"\uD83C\uDF89"}),R("div",{children:[z("h3",{className:"font-semibold text-green-500 text-lg",children:"Onboarding Complete!"}),R("p",{className:"text-muted-foreground",children:["You've completed all ",N," steps. Welcome aboard!"]})]})]})})]})}import{BadgeDisplay as yf,XpBar as vf}from"@contractspec/example.learning-journey-ui-shared";import{Card as I,CardContent as w,CardHeader as g,CardTitle as o}from"@contractspec/lib.ui-kit-web/ui/card";import{Progress as zf}from"@contractspec/lib.ui-kit-web/ui/progress";import{jsx as h,jsxs as B}from"react/jsx-runtime";function S({track:f,progress:y}){let b=f.steps.length,N=y.completedStepIds.length,G=b>0?N/b*100:0,v=f.totalXp??f.steps.reduce((Y,W)=>Y+(W.xpReward??0),0)+(f.completionRewards?.xp??0),q=b-N,Z=q*5;return B("div",{className:"space-y-6",children:[B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCC8"}),h("span",{children:"Your Progress"})]})}),B(w,{className:"space-y-6",children:[h("div",{className:"flex items-center justify-center",children:B("div",{className:"relative flex h-40 w-40 items-center justify-center",children:[B("svg",{className:"absolute h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",className:"stroke-muted"}),h("circle",{cx:"50",cy:"50",r:"45",fill:"none",strokeWidth:"8",strokeLinecap:"round",strokeDasharray:`${G*2.83} 283`,className:"stroke-blue-500 transition-all duration-500"})]}),B("div",{className:"text-center",children:[B("div",{className:"font-bold text-3xl",children:[Math.round(G),"%"]}),h("div",{className:"text-muted-foreground text-sm",children:"Complete"})]})]})}),B("div",{className:"grid grid-cols-3 gap-4 text-center",children:[B("div",{children:[h("div",{className:"font-bold text-2xl text-green-500",children:N}),h("div",{className:"text-muted-foreground text-sm",children:"Completed"})]}),B("div",{children:[h("div",{className:"font-bold text-2xl text-orange-500",children:q}),h("div",{className:"text-muted-foreground text-sm",children:"Remaining"})]}),B("div",{children:[B("div",{className:"font-bold text-2xl",children:[Z,"m"]}),h("div",{className:"text-muted-foreground text-sm",children:"Est. Time"})]})]})]})]}),B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"⚡"}),h("span",{children:"Experience Points"})]})}),B(w,{className:"space-y-4",children:[B("div",{className:"flex items-baseline gap-2",children:[h("span",{className:"font-bold text-3xl text-blue-500",children:y.xpEarned}),B("span",{className:"text-muted-foreground",children:["/ ",v," XP"]})]}),h(vf,{current:y.xpEarned,max:v,showLabel:!1,size:"lg"})]})]}),B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83C\uDFC5"}),h("span",{children:"Achievements"})]})}),B(w,{children:[h(yf,{badges:y.badges,size:"lg"}),y.badges.length===0&&f.completionRewards?.badgeKey&&B("p",{className:"text-muted-foreground text-sm",children:['Complete all steps to earn the "',f.completionRewards.badgeKey,'" badge!']})]})]}),B(I,{children:[h(g,{children:B(o,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCB"}),h("span",{children:"Step Details"})]})}),h(w,{children:h("div",{className:"space-y-3",children:f.steps.map((Y,W)=>{let Q=y.completedStepIds.includes(Y.id),_=Q?100:0;return B("div",{className:"space-y-1",children:[B("div",{className:"flex items-center justify-between text-sm",children:[B("span",{className:Q?"text-green-500":"text-foreground",children:[W+1,". ",Y.title]}),h("span",{className:Q?"text-green-500":"text-muted-foreground",children:Q?"✓":"Pending"})]}),h(zf,{value:_,className:"h-1"})]},Y.id)})})})]})]})}import{Button as C}from"@contractspec/lib.design-system";import{cn as P}from"@contractspec/lib.ui-kit-core";import{jsx as L,jsxs as X}from"react/jsx-runtime";function l({step:f,stepNumber:y,isCompleted:b,isCurrent:N,isExpanded:G,onToggle:v,onComplete:q}){return X("div",{className:P("rounded-xl border transition-all",b&&"border-green-500/50 bg-green-500/5",N&&!b&&"border-violet-500 bg-violet-500/5",!b&&!N&&"border-border"),children:[X("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:v,children:[L("div",{className:P("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",b&&"border-green-500 bg-green-500 text-white",N&&!b&&"border-violet-500 text-violet-500",!b&&!N&&"border-muted-foreground text-muted-foreground"),children:b?"✓":y}),X("div",{className:"min-w-0 flex-1",children:[L("h4",{className:P("font-semibold",b&&"text-green-500",N&&!b&&"text-foreground",!b&&!N&&"text-muted-foreground"),children:f.title}),!G&&f.description&&L("p",{className:"truncate text-muted-foreground text-sm",children:f.description})]}),f.xpReward&&X("span",{className:P("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",b?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",f.xpReward," XP"]}),L("span",{className:P("shrink-0 transition-transform",G&&"rotate-180"),children:"▼"})]}),G&&X("div",{className:"border-t px-4 py-4",children:[f.description&&L("p",{className:"mb-4 text-muted-foreground",children:f.description}),f.instructions&&X("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[L("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),L("p",{className:"text-muted-foreground text-sm",children:f.instructions})]}),X("div",{className:"flex flex-wrap gap-2",children:[f.actionUrl&&L(C,{variant:"outline",size:"sm",onClick:()=>window.open(f.actionUrl,"_blank"),children:f.actionLabel??"Try it"}),!b&&L(C,{size:"sm",onClick:q,children:"Mark as Complete"})]})]})]})}import{Progress as hf}from"@contractspec/lib.ui-kit-web/ui/progress";import{useState as qf}from"react";import{jsx as O,jsxs as u}from"react/jsx-runtime";function k({track:f,progress:y,onStepComplete:b}){let[N,G]=qf(()=>{return f.steps.find((Q)=>!y.completedStepIds.includes(Q.id))?.id??null}),v=y.completedStepIds.length,q=f.steps.length,Z=q>0?v/q*100:0,Y=f.steps.findIndex((W)=>!y.completedStepIds.includes(W.id));return u("div",{className:"space-y-6",children:[u("div",{className:"space-y-2",children:[u("div",{className:"flex items-center justify-between",children:[O("h2",{className:"font-bold text-xl",children:"Complete Each Step"}),u("span",{className:"text-muted-foreground text-sm",children:[v," / ",q," completed"]})]}),O(hf,{value:Z,className:"h-2"})]}),O("div",{className:"space-y-3",children:f.steps.map((W,Q)=>{let _=y.completedStepIds.includes(W.id),D=Q===Y;return O(l,{step:W,stepNumber:Q+1,isCompleted:_,isCurrent:D,isExpanded:N===W.id,onToggle:()=>G(N===W.id?null:W.id),onComplete:()=>{b?.(W.id);let A=f.steps[Q+1];if(A&&!y.completedStepIds.includes(A.id))G(A.id)}},W.id)})}),f.completionRewards&&Z<100&&O("div",{className:"rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",children:u("p",{className:"text-sm",children:["\uD83C\uDF81 Complete all steps to unlock:",f.completionRewards.xp&&u("span",{className:"ml-2 font-semibold text-blue-500",children:["+",f.completionRewards.xp," XP bonus"]}),f.completionRewards.badgeKey&&u("span",{className:"ml-2 font-semibold text-amber-500",children:['+ "',f.completionRewards.badgeKey,'" badge']})]})})]})}import{cn as i}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as T,jsxs as p}from"react/jsx-runtime";var x={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function n({steps:f,completedStepIds:y,currentStepId:b}){return T("div",{className:"relative overflow-x-auto pb-4",children:T("div",{className:"flex min-w-max items-center gap-2",children:f.map((N,G)=>{let v=y.includes(N.id),q=N.id===b,Z=N.metadata?.surface??"default",Y=x[Z]??x.default;return p("div",{className:"flex items-center",children:[p("div",{className:"flex flex-col items-center gap-2",children:[T("div",{className:i("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",v&&"border-green-500 bg-green-500/10",q&&!v&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!v&&!q&&"border-muted bg-muted/50"),children:v?"✓":Y}),T("div",{className:"text-center",children:T("p",{className:i("max-w-[100px] truncate font-medium text-xs",v&&"text-green-500",q&&!v&&"text-violet-500",!v&&!q&&"text-muted-foreground"),children:N.title})})]}),G<f.length-1&&T("div",{className:i("mx-2 h-1 w-8 rounded-full transition-colors",y.includes(f[G+1]?.id??"")?"bg-green-500":v?"bg-green-500/50":"bg-muted")})]},N.id)})})})}import{Card as j,CardContent as r,CardHeader as t,CardTitle as e}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as K,jsxs as J}from"react/jsx-runtime";function d({track:f,progress:y}){let b=f.steps.find((N)=>!y.completedStepIds.includes(N.id))?.id??null;return J("div",{className:"space-y-6",children:[J("div",{className:"text-center",children:[K("h2",{className:"font-bold text-xl",children:"Your Learning Journey"}),K("p",{className:"text-muted-foreground",children:"Follow the path through each surface and feature"})]}),J(j,{children:[K(t,{children:J(e,{className:"flex items-center gap-2",children:[K("span",{children:"\uD83D\uDDFA️"}),K("span",{children:"Journey Map"})]})}),K(r,{children:K(n,{steps:f.steps,completedStepIds:y.completedStepIds,currentStepId:b})})]}),J(j,{children:[K(t,{children:J(e,{className:"flex items-center gap-2",children:[K("span",{children:"\uD83D\uDCCD"}),K("span",{children:"Step by Step"})]})}),K(r,{children:J("div",{className:"relative",children:[K("div",{className:"absolute top-0 left-4 h-full w-0.5 bg-border"}),K("div",{className:"space-y-6",children:f.steps.map((N,G)=>{let v=y.completedStepIds.includes(N.id),q=N.id===b,Z=N.metadata?.surface??"general";return J("div",{className:"relative flex gap-4 pl-2",children:[K("div",{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${v?"border-green-500 bg-green-500 text-white":q?"border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20":"border-border bg-background text-muted-foreground"}`,children:v?"✓":G+1}),K("div",{className:"flex-1 pb-2",children:J("div",{className:"rounded-lg border p-4",children:[J("div",{className:"flex items-start justify-between gap-2",children:[J("div",{children:[J("div",{className:"flex items-center gap-2",children:[K("h4",{className:`font-semibold ${v?"text-green-500":q?"text-blue-500":"text-foreground"}`,children:N.title}),K("span",{className:"rounded bg-muted px-2 py-0.5 text-muted-foreground text-xs",children:Z})]}),K("p",{className:"mt-1 text-muted-foreground text-sm",children:N.description})]}),N.xpReward&&J("span",{className:`shrink-0 rounded-full px-2 py-1 font-semibold text-xs ${v?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"}`,children:["+",N.xpReward," XP"]})]}),K("div",{className:"mt-3 text-xs",children:v?K("span",{className:"text-green-500",children:"✓ Completed"}):q?K("span",{className:"text-blue-500",children:"→ In Progress"}):K("span",{className:"text-muted-foreground",children:"○ Not Started"})})]})})]},N.id)})})]})})]})]})}import{useLearningProgress as Bf,ViewTabs as Gf}from"@contractspec/example.learning-journey-ui-shared";import{Card as Kf,CardContent as Qf}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as a,useState as Rf}from"react";import{jsx as U,jsxs as Yf}from"react/jsx-runtime";function Wf({track:f,progress:y,onStepComplete:b,onViewChange:N,initialView:G="overview"}){let[v,q]=Rf(G),{progress:Z,completeStep:Y}=Bf(f),W=y??Z,Q=a(($)=>{q($),N?.($)},[N]),_=a(($)=>{if(b)b($);else Y($)},[b,Y]),D=a(()=>{q("steps"),N?.("steps")},[N]);return Yf("div",{className:"space-y-6",children:[U(Kf,{children:U(Qf,{className:"p-4",children:U(Gf,{currentView:v,onViewChange:Q})})}),(()=>{let $={track:f,progress:W,onStepComplete:_};switch(v){case"overview":return U(H,{...$,onStart:D});case"steps":return U(k,{...$});case"progress":return U(S,{...$});case"timeline":return U(d,{...$});default:return U(H,{...$,onStart:D})}})()]})}import{Button as Zf}from"@contractspec/lib.design-system";import{useState as $f}from"react";import{jsx as E,jsxs as c,Fragment as Jf}from"react/jsx-runtime";function s({code:f,language:y="typescript",title:b}){let[N,G]=$f(!1);return c("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[c("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[c("div",{className:"flex items-center gap-2",children:[E("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:y}),b&&c(Jf,{children:[E("span",{className:"text-muted-foreground",children:"•"}),E("span",{className:"text-sm",children:b})]})]}),E(Zf,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(f),G(!0),setTimeout(()=>G(!1),2000)},className:"h-7 text-xs",children:N?"✓ Copied":"Copy"})]}),E("pre",{className:"overflow-x-auto p-4",children:E("code",{className:"text-sm",children:f})})]})}import{registerDocBlocks as _f}from"@contractspec/lib.contracts-spec/docs";var Df=[{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.`}];Zf($f);import{defineExample as _f}from"@contractspec/lib.contracts-spec";var uf=_f({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI — Onboarding",description:"UI mini-app for onboarding patterns: checklists, code snippets, journey map.",kind:"ui",visibility:"public",stability:"experimental",owners:["@platform.core"],tags:["learning","ui","onboarding"]},docs:{rootDocId:"docs.examples.learning-journey-ui-onboarding"},entrypoints:{packageName:"@contractspec/example.learning-journey-ui-onboarding",docs:"./docs"},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","markdown"]},studio:{enabled:!0,installable:!0},mcp:{enabled:!0}}}),Df=uf;import{defineFeature as Af}from"@contractspec/lib.contracts-spec";var _0=Af({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{Df as example,d as Timeline,k as Steps,S as StepChecklist,l as Progress,H as Overview,Qf as OnboardingMiniApp,_0 as LearningJourneyUiOnboardingFeature,n as JourneyMap,s as CodeSnippet};
+- Ensure accessible labels and keyboard navigation.`}];_f(Df);import{defineExample as Lf}from"@contractspec/lib.contracts-spec/examples";var Uf=Lf({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:"@contractspec/example.learning-journey-ui-onboarding"}}),Af=Uf;import{defineFeature as Xf}from"@contractspec/lib.contracts-spec/features";var L0=Xf({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{Af as example,d as Timeline,k as Steps,l as StepChecklist,S as Progress,H as Overview,Wf as OnboardingMiniApp,L0 as LearningJourneyUiOnboardingFeature,n as JourneyMap,Uf as ExamplesLearningJourneyUiOnboardingExample,s as CodeSnippet};

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

@@ -1 +1 @@
-import{defineFeature as g}from"@contractspec/lib.contracts-spec";var j=g({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{j as LearningJourneyUiOnboardingFeature};
+import{defineFeature as g}from"@contractspec/lib.contracts-spec/features";var j=g({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{j as LearningJourneyUiOnboardingFeature};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/example.learning-journey-ui-onboarding",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Developer onboarding UI with checklists and journey maps.",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -127,24 +127,24 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@contractspec/lib.ui-kit-core": "3.8.0",
-    "@contractspec/lib.contracts-spec": "5.4.0",
-    "@contractspec/example.learning-journey-ui-shared": "4.0.0",
-    "@contractspec/example.learning-journey-studio-onboarding": "4.0.0",
-    "@contractspec/example.learning-journey-platform-tour": "4.0.0",
-    "@contractspec/module.learning-journey": "4.0.0",
-    "@contractspec/lib.design-system": "3.10.0",
-    "@contractspec/lib.ui-kit-web": "3.10.1",
+    "@contractspec/lib.ui-kit-core": "3.8.1",
+    "@contractspec/lib.contracts-spec": "5.5.0",
+    "@contractspec/example.learning-journey-ui-shared": "4.0.2",
+    "@contractspec/example.learning-journey-studio-onboarding": "4.0.1",
+    "@contractspec/example.learning-journey-platform-tour": "4.0.1",
+    "@contractspec/module.learning-journey": "4.0.1",
+    "@contractspec/lib.design-system": "3.11.0",
+    "@contractspec/lib.ui-kit-web": "3.10.3",
     "react": "19.2.0"
   },
   "devDependencies": {
     "@contractspec/tool.typescript": "3.7.13",
     "@types/react": "^19.2.14",
     "typescript": "^5.9.3",
-    "@contractspec/tool.bun": "3.7.14"
+    "@contractspec/tool.bun": "3.7.15"
   },
   "peerDependencies": {
-    "react": "^19.2.4"
+    "react": "19.2.0"
   },
   "publishConfig": {
     "exports": {

package/src/example.ts

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

package/src/index.ts

@@ -8,3 +8,5 @@ export { OnboardingMiniApp } from './OnboardingMiniApp';
 // Views
 export { Overview, Progress, Steps, Timeline } from './views';
 import './docs';
+
+export * from './example';

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

@@ -1,4 +1,4 @@
-import { defineFeature } from '@contractspec/lib.contracts-spec';
+import { defineFeature } from '@contractspec/lib.contracts-spec/features';
 
 export const LearningJourneyUiOnboardingFeature = defineFeature({
 	meta: {