@contractspec/example.learning-journey-ui-gamified 1.57.0 → 1.58.0

package/package.json

@@ -1,67 +1,183 @@
 {
   "name": "@contractspec/example.learning-journey-ui-gamified",
-  "version": "1.57.0",
+  "version": "1.58.0",
   "description": "Duolingo-style gamified learning UI for drills and quests.",
   "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./dist/index.js",
-    "./components": "./dist/components/index.js",
-    "./components/DayCalendar": "./dist/components/DayCalendar.js",
-    "./components/FlashCard": "./dist/components/FlashCard.js",
-    "./components/MasteryRing": "./dist/components/MasteryRing.js",
-    "./docs": "./dist/docs/index.js",
-    "./docs/learning-journey-ui-gamified.docblock": "./dist/docs/learning-journey-ui-gamified.docblock.js",
-    "./example": "./dist/example.js",
-    "./GamifiedMiniApp": "./dist/GamifiedMiniApp.js",
-    "./views": "./dist/views/index.js",
-    "./views/Overview": "./dist/views/Overview.js",
-    "./views/Progress": "./dist/views/Progress.js",
-    "./views/Steps": "./dist/views/Steps.js",
-    "./views/Timeline": "./dist/views/Timeline.js",
-    "./*": "./*"
+    ".": "./src/index.ts",
+    "./components": "./src/components/index.ts",
+    "./components/DayCalendar": "./src/components/DayCalendar.tsx",
+    "./components/FlashCard": "./src/components/FlashCard.tsx",
+    "./components/index": "./src/components/index.ts",
+    "./components/MasteryRing": "./src/components/MasteryRing.tsx",
+    "./docs": "./src/docs/index.ts",
+    "./docs/index": "./src/docs/index.ts",
+    "./docs/learning-journey-ui-gamified.docblock": "./src/docs/learning-journey-ui-gamified.docblock.ts",
+    "./example": "./src/example.ts",
+    "./GamifiedMiniApp": "./src/GamifiedMiniApp.tsx",
+    "./views": "./src/views/index.ts",
+    "./views/index": "./src/views/index.ts",
+    "./views/Overview": "./src/views/Overview.tsx",
+    "./views/Progress": "./src/views/Progress.tsx",
+    "./views/Steps": "./src/views/Steps.tsx",
+    "./views/Timeline": "./src/views/Timeline.tsx"
   },
   "scripts": {
     "publish:pkg": "bun publish --tolerate-republish --ignore-scripts --verbose",
     "publish:pkg:canary": "bun publish:pkg --tag canary",
-    "build": "bun build:types && bun build:bundle",
-    "build:bundle": "tsdown",
-    "build:types": "tsc --noEmit",
-    "dev": "bun build:bundle --watch",
+    "build": "bun run prebuild && bun run build:bundle && bun run build:types",
+    "build:bundle": "contractspec-bun-build transpile",
+    "build:types": "contractspec-bun-build types",
+    "dev": "contractspec-bun-build dev",
     "clean": "rimraf dist .turbo",
     "lint": "bun lint:fix",
     "lint:fix": "eslint src --fix",
     "lint:check": "eslint src",
-    "test": "bun test"
+    "test": "bun test",
+    "prebuild": "contractspec-bun-build prebuild",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@contractspec/lib.contracts": "1.57.0",
-    "@contractspec/example.learning-journey-ui-shared": "1.57.0",
-    "@contractspec/example.learning-journey-duo-drills": "1.57.0",
-    "@contractspec/example.learning-journey-quest-challenges": "1.57.0",
-    "@contractspec/module.learning-journey": "1.57.0",
-    "@contractspec/lib.design-system": "1.57.0",
-    "@contractspec/lib.ui-kit-web": "1.57.0",
+    "@contractspec/lib.contracts": "1.58.0",
+    "@contractspec/example.learning-journey-ui-shared": "1.58.0",
+    "@contractspec/example.learning-journey-duo-drills": "1.58.0",
+    "@contractspec/example.learning-journey-quest-challenges": "1.58.0",
+    "@contractspec/module.learning-journey": "1.58.0",
+    "@contractspec/lib.design-system": "1.58.0",
+    "@contractspec/lib.ui-kit-web": "1.58.0",
     "react": "19.2.4"
   },
   "devDependencies": {
-    "@contractspec/tool.tsdown": "1.57.0",
-    "@contractspec/tool.typescript": "1.57.0",
+    "@contractspec/tool.typescript": "1.58.0",
     "@types/react": "^19.2.13",
-    "tsdown": "^0.20.3",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "@contractspec/tool.bun": "1.57.0"
   },
   "peerDependencies": {
     "react": "^19.2.4"
   },
   "publishConfig": {
     "exports": {
-      ".": "./dist/index.js",
-      "./example": "./dist/example.js",
-      "./docs": "./dist/docs/index.js",
-      "./views": "./dist/views/index.js",
-      "./components": "./dist/components/index.js",
-      "./*": "./*"
+      ".": {
+        "types": "./dist/index.d.ts",
+        "bun": "./dist/index.js",
+        "node": "./dist/node/index.mjs",
+        "browser": "./dist/browser/index.js",
+        "default": "./dist/index.js"
+      },
+      "./components": {
+        "types": "./dist/components/index.d.ts",
+        "bun": "./dist/components/index.js",
+        "node": "./dist/node/components/index.mjs",
+        "browser": "./dist/browser/components/index.js",
+        "default": "./dist/components/index.js"
+      },
+      "./components/DayCalendar": {
+        "types": "./dist/components/DayCalendar.d.ts",
+        "bun": "./dist/components/DayCalendar.js",
+        "node": "./dist/node/components/DayCalendar.mjs",
+        "browser": "./dist/browser/components/DayCalendar.js",
+        "default": "./dist/components/DayCalendar.js"
+      },
+      "./components/FlashCard": {
+        "types": "./dist/components/FlashCard.d.ts",
+        "bun": "./dist/components/FlashCard.js",
+        "node": "./dist/node/components/FlashCard.mjs",
+        "browser": "./dist/browser/components/FlashCard.js",
+        "default": "./dist/components/FlashCard.js"
+      },
+      "./components/index": {
+        "types": "./dist/components/index.d.ts",
+        "bun": "./dist/components/index.js",
+        "node": "./dist/node/components/index.mjs",
+        "browser": "./dist/browser/components/index.js",
+        "default": "./dist/components/index.js"
+      },
+      "./components/MasteryRing": {
+        "types": "./dist/components/MasteryRing.d.ts",
+        "bun": "./dist/components/MasteryRing.js",
+        "node": "./dist/node/components/MasteryRing.mjs",
+        "browser": "./dist/browser/components/MasteryRing.js",
+        "default": "./dist/components/MasteryRing.js"
+      },
+      "./docs": {
+        "types": "./dist/docs/index.d.ts",
+        "bun": "./dist/docs/index.js",
+        "node": "./dist/node/docs/index.mjs",
+        "browser": "./dist/browser/docs/index.js",
+        "default": "./dist/docs/index.js"
+      },
+      "./docs/index": {
+        "types": "./dist/docs/index.d.ts",
+        "bun": "./dist/docs/index.js",
+        "node": "./dist/node/docs/index.mjs",
+        "browser": "./dist/browser/docs/index.js",
+        "default": "./dist/docs/index.js"
+      },
+      "./docs/learning-journey-ui-gamified.docblock": {
+        "types": "./dist/docs/learning-journey-ui-gamified.docblock.d.ts",
+        "bun": "./dist/docs/learning-journey-ui-gamified.docblock.js",
+        "node": "./dist/node/docs/learning-journey-ui-gamified.docblock.mjs",
+        "browser": "./dist/browser/docs/learning-journey-ui-gamified.docblock.js",
+        "default": "./dist/docs/learning-journey-ui-gamified.docblock.js"
+      },
+      "./example": {
+        "types": "./dist/example.d.ts",
+        "bun": "./dist/example.js",
+        "node": "./dist/node/example.mjs",
+        "browser": "./dist/browser/example.js",
+        "default": "./dist/example.js"
+      },
+      "./GamifiedMiniApp": {
+        "types": "./dist/GamifiedMiniApp.d.ts",
+        "bun": "./dist/GamifiedMiniApp.js",
+        "node": "./dist/node/GamifiedMiniApp.mjs",
+        "browser": "./dist/browser/GamifiedMiniApp.js",
+        "default": "./dist/GamifiedMiniApp.js"
+      },
+      "./views": {
+        "types": "./dist/views/index.d.ts",
+        "bun": "./dist/views/index.js",
+        "node": "./dist/node/views/index.mjs",
+        "browser": "./dist/browser/views/index.js",
+        "default": "./dist/views/index.js"
+      },
+      "./views/index": {
+        "types": "./dist/views/index.d.ts",
+        "bun": "./dist/views/index.js",
+        "node": "./dist/node/views/index.mjs",
+        "browser": "./dist/browser/views/index.js",
+        "default": "./dist/views/index.js"
+      },
+      "./views/Overview": {
+        "types": "./dist/views/Overview.d.ts",
+        "bun": "./dist/views/Overview.js",
+        "node": "./dist/node/views/Overview.mjs",
+        "browser": "./dist/browser/views/Overview.js",
+        "default": "./dist/views/Overview.js"
+      },
+      "./views/Progress": {
+        "types": "./dist/views/Progress.d.ts",
+        "bun": "./dist/views/Progress.js",
+        "node": "./dist/node/views/Progress.mjs",
+        "browser": "./dist/browser/views/Progress.js",
+        "default": "./dist/views/Progress.js"
+      },
+      "./views/Steps": {
+        "types": "./dist/views/Steps.d.ts",
+        "bun": "./dist/views/Steps.js",
+        "node": "./dist/node/views/Steps.mjs",
+        "browser": "./dist/browser/views/Steps.js",
+        "default": "./dist/views/Steps.js"
+      },
+      "./views/Timeline": {
+        "types": "./dist/views/Timeline.d.ts",
+        "bun": "./dist/views/Timeline.js",
+        "node": "./dist/node/views/Timeline.mjs",
+        "browser": "./dist/browser/views/Timeline.js",
+        "default": "./dist/views/Timeline.js"
+      }
     },
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/tsdown.config.js

@@ -1,5 +1,4 @@
-import { defineConfig } from 'tsdown';
-import { moduleLibrary, withDevExports } from '@contractspec/tool.tsdown';
+import { defineConfig, moduleLibrary, withDevExports } from '@contractspec/tool.bun';
 
 export default defineConfig(() => ({
   ...moduleLibrary,

package/.turbo/turbo-build$colon$bundle.log

@@ -1,59 +0,0 @@
-$ tsdown
-ℹ tsdown v0.20.3 powered by rolldown v1.0.0-rc.3
-ℹ config file: /home/runner/work/contractspec/contractspec/packages/examples/learning-journey-ui-gamified/tsdown.config.js 
-ℹ entry: src/GamifiedMiniApp.tsx, src/example.ts, src/index.ts, src/docs/index.ts, src/docs/learning-journey-ui-gamified.docblock.ts, src/components/DayCalendar.tsx, src/components/FlashCard.tsx, src/components/MasteryRing.tsx, src/components/index.ts, src/views/Overview.tsx, src/views/Progress.tsx, src/views/Steps.tsx, src/views/Timeline.tsx, src/views/index.ts
-ℹ target: esnext
-ℹ tsconfig: tsconfig.json
-ℹ Build start
-ℹ Cleaning 50 files
-ℹ dist/views/Overview.js                                  6.10 kB │ gzip: 1.61 kB
-ℹ dist/views/Timeline.js                                  5.75 kB │ gzip: 1.45 kB
-ℹ dist/views/Progress.js                                  5.62 kB │ gzip: 1.57 kB
-ℹ dist/components/FlashCard.js                            2.94 kB │ gzip: 1.03 kB
-ℹ dist/GamifiedMiniApp.js                                 2.32 kB │ gzip: 0.79 kB
-ℹ dist/components/MasteryRing.js                          2.15 kB │ gzip: 0.88 kB
-ℹ dist/views/Steps.js                                     1.63 kB │ gzip: 0.68 kB
-ℹ dist/components/DayCalendar.js                          1.51 kB │ gzip: 0.68 kB
-ℹ dist/example.js                                         0.92 kB │ gzip: 0.51 kB
-ℹ dist/docs/learning-journey-ui-gamified.docblock.js      0.83 kB │ gzip: 0.47 kB
-ℹ dist/index.js                                           0.65 kB │ gzip: 0.23 kB
-ℹ dist/views/index.js                                     0.21 kB │ gzip: 0.11 kB
-ℹ dist/components/index.js                                0.19 kB │ gzip: 0.11 kB
-ℹ dist/docs/index.js                                      0.05 kB │ gzip: 0.07 kB
-ℹ dist/views/Timeline.js.map                              9.32 kB │ gzip: 2.53 kB
-ℹ dist/views/Progress.js.map                              8.35 kB │ gzip: 2.53 kB
-ℹ dist/views/Overview.js.map                              7.85 kB │ gzip: 2.37 kB
-ℹ dist/components/FlashCard.js.map                        4.21 kB │ gzip: 1.56 kB
-ℹ dist/GamifiedMiniApp.js.map                             3.62 kB │ gzip: 1.30 kB
-ℹ dist/components/MasteryRing.js.map                      3.43 kB │ gzip: 1.34 kB
-ℹ dist/views/Steps.js.map                                 2.36 kB │ gzip: 1.04 kB
-ℹ dist/components/DayCalendar.js.map                      2.28 kB │ gzip: 0.99 kB
-ℹ dist/example.js.map                                     1.38 kB │ gzip: 0.70 kB
-ℹ dist/docs/learning-journey-ui-gamified.docblock.js.map  1.17 kB │ gzip: 0.63 kB
-ℹ dist/GamifiedMiniApp.d.ts.map                           0.31 kB │ gzip: 0.20 kB
-ℹ dist/components/FlashCard.d.ts.map                      0.28 kB │ gzip: 0.19 kB
-ℹ dist/components/MasteryRing.d.ts.map                    0.28 kB │ gzip: 0.18 kB
-ℹ dist/components/DayCalendar.d.ts.map                    0.26 kB │ gzip: 0.18 kB
-ℹ dist/views/Overview.d.ts.map                            0.24 kB │ gzip: 0.18 kB
-ℹ dist/views/Steps.d.ts.map                               0.19 kB │ gzip: 0.16 kB
-ℹ dist/views/Progress.d.ts.map                            0.19 kB │ gzip: 0.15 kB
-ℹ dist/views/Timeline.d.ts.map                            0.19 kB │ gzip: 0.16 kB
-ℹ dist/example.d.ts.map                                   0.13 kB │ gzip: 0.13 kB
-ℹ dist/index.d.ts                                         0.62 kB │ gzip: 0.22 kB
-ℹ dist/GamifiedMiniApp.d.ts                               0.59 kB │ gzip: 0.33 kB
-ℹ dist/components/FlashCard.d.ts                          0.53 kB │ gzip: 0.31 kB
-ℹ dist/views/Overview.d.ts                                0.45 kB │ gzip: 0.29 kB
-ℹ dist/components/MasteryRing.d.ts                        0.45 kB │ gzip: 0.28 kB
-ℹ dist/components/DayCalendar.d.ts                        0.41 kB │ gzip: 0.24 kB
-ℹ dist/views/Steps.d.ts                                   0.36 kB │ gzip: 0.25 kB
-ℹ dist/views/Progress.d.ts                                0.35 kB │ gzip: 0.24 kB
-ℹ dist/views/Timeline.d.ts                                0.35 kB │ gzip: 0.24 kB
-ℹ dist/example.d.ts                                       0.25 kB │ gzip: 0.17 kB
-ℹ dist/views/index.d.ts                                   0.21 kB │ gzip: 0.11 kB
-ℹ dist/components/index.d.ts                              0.19 kB │ gzip: 0.11 kB
-ℹ dist/docs/index.d.ts                                    0.01 kB │ gzip: 0.03 kB
-ℹ dist/docs/learning-journey-ui-gamified.docblock.d.ts    0.01 kB │ gzip: 0.03 kB
-ℹ 47 files, total: 81.69 kB
-[PLUGIN_TIMINGS] Warning: Your build spent significant time in plugin `tsdown:external`. See https://rolldown.rs/options/checks#plugintimings for more details.
-
-✔ Build complete in 27518ms

package/dist/GamifiedMiniApp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GamifiedMiniApp.js","names":[],"sources":["../src/GamifiedMiniApp.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useCallback } from 'react';\nimport { Card, CardContent } from '@contractspec/lib.ui-kit-web/ui/card';\nimport {\n  ViewTabs,\n  useLearningProgress,\n  type LearningView,\n  type LearningMiniAppProps,\n} from '@contractspec/example.learning-journey-ui-shared';\nimport { Overview } from './views/Overview';\nimport { Steps } from './views/Steps';\nimport { Progress } from './views/Progress';\nimport { Timeline } from './views/Timeline';\n\ntype GamifiedMiniAppProps = Omit<LearningMiniAppProps, 'progress'> & {\n  progress?: LearningMiniAppProps['progress'];\n};\n\nexport function GamifiedMiniApp({\n  track,\n  progress: externalProgress,\n  onStepComplete: externalOnStepComplete,\n  onViewChange,\n  initialView = 'overview',\n}: GamifiedMiniAppProps) {\n  const [currentView, setCurrentView] = useState<LearningView>(initialView);\n\n  // Use internal progress if not provided externally\n  const { progress: internalProgress, completeStep: internalCompleteStep } =\n    useLearningProgress(track);\n\n  const progress = externalProgress ?? internalProgress;\n\n  const handleViewChange = useCallback(\n    (view: LearningView) => {\n      setCurrentView(view);\n      onViewChange?.(view);\n    },\n    [onViewChange]\n  );\n\n  const handleStepComplete = useCallback(\n    (stepId: string) => {\n      if (externalOnStepComplete) {\n        externalOnStepComplete(stepId);\n      } else {\n        internalCompleteStep(stepId);\n      }\n    },\n    [externalOnStepComplete, internalCompleteStep]\n  );\n\n  const handleStartFromOverview = useCallback(() => {\n    setCurrentView('steps');\n    onViewChange?.('steps');\n  }, [onViewChange]);\n\n  const renderView = () => {\n    const viewProps = {\n      track,\n      progress,\n      onStepComplete: handleStepComplete,\n    };\n\n    switch (currentView) {\n      case 'overview':\n        return <Overview {...viewProps} onStart={handleStartFromOverview} />;\n      case 'steps':\n        return <Steps {...viewProps} />;\n      case 'progress':\n        return <Progress {...viewProps} />;\n      case 'timeline':\n        return <Timeline {...viewProps} />;\n      default:\n        return <Overview {...viewProps} onStart={handleStartFromOverview} />;\n    }\n  };\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Navigation */}\n      <Card>\n        <CardContent className=\"p-4\">\n          <ViewTabs currentView={currentView} onViewChange={handleViewChange} />\n        </CardContent>\n      </Card>\n\n      {/* Current View */}\n      {renderView()}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,gBAAgB,EAC9B,OACA,UAAU,kBACV,gBAAgB,wBAChB,cACA,cAAc,cACS;CACvB,MAAM,CAAC,aAAa,kBAAkB,SAAuB,YAAY;CAGzE,MAAM,EAAE,UAAU,kBAAkB,cAAc,yBAChD,oBAAoB,MAAM;CAE5B,MAAM,WAAW,oBAAoB;CAErC,MAAM,mBAAmB,aACtB,SAAuB;AACtB,iBAAe,KAAK;AACpB,iBAAe,KAAK;IAEtB,CAAC,aAAa,CACf;CAED,MAAM,qBAAqB,aACxB,WAAmB;AAClB,MAAI,uBACF,wBAAuB,OAAO;MAE9B,sBAAqB,OAAO;IAGhC,CAAC,wBAAwB,qBAAqB,CAC/C;CAED,MAAM,0BAA0B,kBAAkB;AAChD,iBAAe,QAAQ;AACvB,iBAAe,QAAQ;IACtB,CAAC,aAAa,CAAC;CAElB,MAAM,mBAAmB;EACvB,MAAM,YAAY;GAChB;GACA;GACA,gBAAgB;GACjB;AAED,UAAQ,aAAR;GACE,KAAK,WACH,QAAO,oBAAC;IAAS,GAAI;IAAW,SAAS;KAA2B;GACtE,KAAK,QACH,QAAO,oBAAC,SAAM,GAAI,YAAa;GACjC,KAAK,WACH,QAAO,oBAAC,YAAS,GAAI,YAAa;GACpC,KAAK,WACH,QAAO,oBAAC,YAAS,GAAI,YAAa;GACpC,QACE,QAAO,oBAAC;IAAS,GAAI;IAAW,SAAS;KAA2B;;;AAI1E,QACE,qBAAC;EAAI,WAAU;aAEb,oBAAC,kBACC,oBAAC;GAAY,WAAU;aACrB,oBAAC;IAAsB;IAAa,cAAc;KAAoB;IAC1D,GACT,EAGN,YAAY;GACT"}

package/dist/components/DayCalendar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DayCalendar.js","names":[],"sources":["../../src/components/DayCalendar.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\n\ninterface DayCalendarProps {\n  totalDays: number;\n  currentDay: number;\n  completedDays: number[];\n}\n\nexport function DayCalendar({\n  totalDays,\n  currentDay,\n  completedDays,\n}: DayCalendarProps) {\n  const days = Array.from({ length: totalDays }, (_, i) => i + 1);\n\n  return (\n    <div className=\"grid grid-cols-7 gap-2\">\n      {days.map((day) => {\n        const isCompleted = completedDays.includes(day);\n        const isCurrent = day === currentDay;\n        const isLocked = day > currentDay;\n\n        return (\n          <div\n            key={day}\n            className={cn(\n              'flex h-12 w-12 flex-col items-center justify-center rounded-lg border text-sm font-medium transition-all',\n              isCompleted && 'border-green-500 bg-green-500/10 text-green-500',\n              isCurrent &&\n                !isCompleted &&\n                'border-violet-500 bg-violet-500/10 text-violet-500 ring-2 ring-violet-500/50',\n              isLocked && 'border-muted bg-muted/50 text-muted-foreground',\n              !isCompleted && !isCurrent && !isLocked && 'border-border bg-card'\n            )}\n          >\n            {isCompleted ? (\n              <span className=\"text-lg\">✓</span>\n            ) : isLocked ? (\n              <span className=\"text-lg\">🔒</span>\n            ) : (\n              <>\n                <span className=\"text-muted-foreground text-xs\">Day</span>\n                <span>{day}</span>\n              </>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAUA,SAAgB,YAAY,EAC1B,WACA,YACA,iBACmB;AAGnB,QACE,oBAAC;EAAI,WAAU;YAHJ,MAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,GAAG,MAAM,IAAI,EAAE,CAIrD,KAAK,QAAQ;GACjB,MAAM,cAAc,cAAc,SAAS,IAAI;GAC/C,MAAM,YAAY,QAAQ;GAC1B,MAAM,WAAW,MAAM;AAEvB,UACE,oBAAC;IAEC,WAAW,GACT,4GACA,eAAe,mDACf,aACE,CAAC,eACD,gFACF,YAAY,kDACZ,CAAC,eAAe,CAAC,aAAa,CAAC,YAAY,wBAC5C;cAEA,cACC,oBAAC;KAAK,WAAU;eAAU;MAAQ,GAChC,WACF,oBAAC;KAAK,WAAU;eAAU;MAAS,GAEnC,4CACE,oBAAC;KAAK,WAAU;eAAgC;MAAU,EAC1D,oBAAC,oBAAM,MAAW,IACjB;MAnBA,IAqBD;IAER;GACE"}

package/dist/components/FlashCard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlashCard.js","names":[],"sources":["../../src/components/FlashCard.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Button } from '@contractspec/lib.design-system';\nimport { Card, CardContent } from '@contractspec/lib.ui-kit-web/ui/card';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport type { LearningJourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';\n\ninterface FlashCardProps {\n  step: LearningJourneyStepSpec;\n  isCompleted: boolean;\n  isCurrent: boolean;\n  onComplete?: () => void;\n}\n\nexport function FlashCard({\n  step,\n  isCompleted,\n  isCurrent,\n  onComplete,\n}: FlashCardProps) {\n  const [isFlipped, setIsFlipped] = useState(false);\n\n  return (\n    <Card\n      className={cn(\n        'relative cursor-pointer overflow-hidden transition-all duration-300',\n        isCurrent && 'ring-primary ring-2',\n        isCompleted && 'opacity-60'\n      )}\n      onClick={() => !isCompleted && setIsFlipped(!isFlipped)}\n    >\n      <CardContent className=\"p-6\">\n        {/* Front of card */}\n        <div\n          className={cn(\n            'space-y-4 transition-opacity duration-200',\n            isFlipped ? 'opacity-0' : 'opacity-100'\n          )}\n        >\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <h3 className=\"text-lg font-semibold\">{step.title}</h3>\n              {step.description && (\n                <p className=\"text-muted-foreground mt-1 text-sm\">\n                  {step.description}\n                </p>\n              )}\n            </div>\n            {step.xpReward && (\n              <span className=\"rounded-full bg-green-500/10 px-2 py-1 text-xs font-semibold text-green-500\">\n                +{step.xpReward} XP\n              </span>\n            )}\n          </div>\n\n          {isCompleted && (\n            <div className=\"flex items-center gap-2 text-green-500\">\n              <span>✓</span>\n              <span className=\"text-sm font-medium\">Completed</span>\n            </div>\n          )}\n\n          {isCurrent && !isCompleted && (\n            <p className=\"text-muted-foreground text-xs\">\n              Tap to reveal action\n            </p>\n          )}\n        </div>\n\n        {/* Back of card (action) */}\n        {isFlipped && !isCompleted && (\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center gap-4 bg-gradient-to-br from-violet-500/10 to-violet-600/10 p-6\">\n            <p className=\"text-center text-sm\">\n              {step.instructions ?? 'Complete this step to earn XP'}\n            </p>\n            <div className=\"flex gap-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => setIsFlipped(false)}\n              >\n                Back\n              </Button>\n              <Button\n                size=\"sm\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onComplete?.();\n                }}\n              >\n                Mark Complete\n              </Button>\n            </div>\n          </div>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,UAAU,EACxB,MACA,aACA,WACA,cACiB;CACjB,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,QACE,oBAAC;EACC,WAAW,GACT,uEACA,aAAa,uBACb,eAAe,aAChB;EACD,eAAe,CAAC,eAAe,aAAa,CAAC,UAAU;YAEvD,qBAAC;GAAY,WAAU;cAErB,qBAAC;IACC,WAAW,GACT,6CACA,YAAY,cAAc,cAC3B;;KAED,qBAAC;MAAI,WAAU;iBACb,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAG,WAAU;kBAAyB,KAAK;SAAW,EACtD,KAAK,eACJ,oBAAC;QAAE,WAAU;kBACV,KAAK;SACJ;QAEF,EACL,KAAK,YACJ,qBAAC;OAAK,WAAU;;QAA8E;QAC1F,KAAK;QAAS;;QACX;OAEL;KAEL,eACC,qBAAC;MAAI,WAAU;iBACb,oBAAC,oBAAK,MAAQ,EACd,oBAAC;OAAK,WAAU;iBAAsB;QAAgB;OAClD;KAGP,aAAa,CAAC,eACb,oBAAC;MAAE,WAAU;gBAAgC;OAEzC;;KAEF,EAGL,aAAa,CAAC,eACb,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAE,WAAU;eACV,KAAK,gBAAgB;MACpB,EACJ,qBAAC;KAAI,WAAU;gBACb,oBAAC;MACC,SAAQ;MACR,MAAK;MACL,eAAe,aAAa,MAAM;gBACnC;OAEQ,EACT,oBAAC;MACC,MAAK;MACL,UAAU,MAAM;AACd,SAAE,iBAAiB;AACnB,qBAAc;;gBAEjB;OAEQ;MACL;KACF;IAEI;GACT"}

package/dist/components/MasteryRing.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MasteryRing.js","names":[],"sources":["../../src/components/MasteryRing.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\n\ninterface MasteryRingProps {\n  label: string;\n  percentage: number;\n  size?: 'sm' | 'md' | 'lg';\n  color?: 'green' | 'blue' | 'violet' | 'orange';\n}\n\nconst sizeStyles = {\n  sm: { container: 'h-16 w-16', text: 'text-xs', ring: 48, stroke: 4 },\n  md: { container: 'h-24 w-24', text: 'text-sm', ring: 72, stroke: 6 },\n  lg: { container: 'h-32 w-32', text: 'text-base', ring: 96, stroke: 8 },\n};\n\nconst colorStyles = {\n  green: 'stroke-green-500',\n  blue: 'stroke-blue-500',\n  violet: 'stroke-violet-500',\n  orange: 'stroke-orange-500',\n};\n\nexport function MasteryRing({\n  label,\n  percentage,\n  size = 'md',\n  color = 'violet',\n}: MasteryRingProps) {\n  const styles = sizeStyles[size];\n  const radius = (styles.ring - styles.stroke) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDashoffset = circumference - (percentage / 100) * circumference;\n\n  return (\n    <div\n      className={cn(\n        'relative flex flex-col items-center gap-1',\n        styles.container\n      )}\n    >\n      <svg\n        className=\"absolute -rotate-90\"\n        width={styles.ring}\n        height={styles.ring}\n        viewBox={`0 0 ${styles.ring} ${styles.ring}`}\n      >\n        {/* Background ring */}\n        <circle\n          cx={styles.ring / 2}\n          cy={styles.ring / 2}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={styles.stroke}\n          className=\"stroke-muted\"\n        />\n        {/* Progress ring */}\n        <circle\n          cx={styles.ring / 2}\n          cy={styles.ring / 2}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={styles.stroke}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={strokeDashoffset}\n          className={cn('transition-all duration-500', colorStyles[color])}\n        />\n      </svg>\n      <div className=\"flex h-full flex-col items-center justify-center\">\n        <span className={cn('font-bold', styles.text)}>\n          {Math.round(percentage)}%\n        </span>\n      </div>\n      <span className={cn('text-muted-foreground mt-1 truncate', styles.text)}>\n        {label}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAWA,MAAM,aAAa;CACjB,IAAI;EAAE,WAAW;EAAa,MAAM;EAAW,MAAM;EAAI,QAAQ;EAAG;CACpE,IAAI;EAAE,WAAW;EAAa,MAAM;EAAW,MAAM;EAAI,QAAQ;EAAG;CACpE,IAAI;EAAE,WAAW;EAAa,MAAM;EAAa,MAAM;EAAI,QAAQ;EAAG;CACvE;AAED,MAAM,cAAc;CAClB,OAAO;CACP,MAAM;CACN,QAAQ;CACR,QAAQ;CACT;AAED,SAAgB,YAAY,EAC1B,OACA,YACA,OAAO,MACP,QAAQ,YACW;CACnB,MAAM,SAAS,WAAW;CAC1B,MAAM,UAAU,OAAO,OAAO,OAAO,UAAU;CAC/C,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,mBAAmB,gBAAiB,aAAa,MAAO;AAE9D,QACE,qBAAC;EACC,WAAW,GACT,6CACA,OAAO,UACR;;GAED,qBAAC;IACC,WAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,SAAS,OAAO,OAAO,KAAK,GAAG,OAAO;eAGtC,oBAAC;KACC,IAAI,OAAO,OAAO;KAClB,IAAI,OAAO,OAAO;KAClB,GAAG;KACH,MAAK;KACL,aAAa,OAAO;KACpB,WAAU;MACV,EAEF,oBAAC;KACC,IAAI,OAAO,OAAO;KAClB,IAAI,OAAO,OAAO;KAClB,GAAG;KACH,MAAK;KACL,aAAa,OAAO;KACpB,eAAc;KACd,iBAAiB;KACC;KAClB,WAAW,GAAG,+BAA+B,YAAY,OAAO;MAChE;KACE;GACN,oBAAC;IAAI,WAAU;cACb,qBAAC;KAAK,WAAW,GAAG,aAAa,OAAO,KAAK;gBAC1C,KAAK,MAAM,WAAW,EAAC;MACnB;KACH;GACN,oBAAC;IAAK,WAAW,GAAG,uCAAuC,OAAO,KAAK;cACpE;KACI;;GACH"}

package/dist/docs/learning-journey-ui-gamified.docblock.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"learning-journey-ui-gamified.docblock.js","names":[],"sources":["../../src/docs/learning-journey-ui-gamified.docblock.ts"],"sourcesContent":["import type { DocBlock } from '@contractspec/lib.contracts/docs';\nimport { registerDocBlocks } from '@contractspec/lib.contracts/docs';\n\nconst blocks: DocBlock[] = [\n  {\n    id: 'docs.examples.learning-journey-ui-gamified',\n    title: 'Learning Journey UI — Gamified',\n    summary:\n      'UI mini-app components for gamified learning: flashcards, mastery, streak/calendar.',\n    kind: 'reference',\n    visibility: 'public',\n    route: '/docs/examples/learning-journey-ui-gamified',\n    tags: ['learning', 'ui', 'gamified'],\n    body: `## Includes\\n- Gamified mini-app shell\\n- Views: overview, steps, progress, timeline\\n- Components: flash card, mastery ring, day calendar\\n\\n## Notes\\n- Compose with design system components.\\n- Respect prefers-reduced-motion; keep tap targets large.`,\n  },\n];\n\nregisterDocBlocks(blocks);\n"],"mappings":";;;AAiBA,kBAd2B,CACzB;CACE,IAAI;CACJ,OAAO;CACP,SACE;CACF,MAAM;CACN,YAAY;CACZ,OAAO;CACP,MAAM;EAAC;EAAY;EAAM;EAAW;CACpC,MAAM;CACP,CACF,CAEwB"}

package/dist/example.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"example.js","names":[],"sources":["../src/example.ts"],"sourcesContent":["import { defineExample } from '@contractspec/lib.contracts';\n\nconst example = defineExample({\n  meta: {\n    key: 'learning-journey-ui-gamified',\n    version: '1.0.0',\n    title: 'Learning Journey UI — Gamified',\n    description:\n      'UI mini-app for gamified learning: flashcards, mastery ring, calendar.',\n    kind: 'ui',\n    visibility: 'public',\n    stability: 'experimental',\n    owners: ['@platform.core'],\n    tags: ['learning', 'ui', 'gamified'],\n  },\n  docs: {\n    rootDocId: 'docs.examples.learning-journey-ui-gamified',\n  },\n  entrypoints: {\n    packageName: '@contractspec/example.learning-journey-ui-gamified',\n    docs: './docs',\n  },\n  surfaces: {\n    templates: true,\n    sandbox: { enabled: true, modes: ['playground', 'markdown'] },\n    studio: { enabled: true, installable: true },\n    mcp: { enabled: true },\n  },\n});\n\nexport default example;\n"],"mappings":";;;AAEA,MAAM,UAAU,cAAc;CAC5B,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aACE;EACF,MAAM;EACN,YAAY;EACZ,WAAW;EACX,QAAQ,CAAC,iBAAiB;EAC1B,MAAM;GAAC;GAAY;GAAM;GAAW;EACrC;CACD,MAAM,EACJ,WAAW,8CACZ;CACD,aAAa;EACX,aAAa;EACb,MAAM;EACP;CACD,UAAU;EACR,WAAW;EACX,SAAS;GAAE,SAAS;GAAM,OAAO,CAAC,cAAc,WAAW;GAAE;EAC7D,QAAQ;GAAE,SAAS;GAAM,aAAa;GAAM;EAC5C,KAAK,EAAE,SAAS,MAAM;EACvB;CACF,CAAC"}

package/dist/views/Overview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Overview.js","names":[],"sources":["../../src/views/Overview.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@contractspec/lib.design-system';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from '@contractspec/lib.ui-kit-web/ui/card';\nimport {\n  XpBar,\n  StreakCounter,\n  BadgeDisplay,\n} from '@contractspec/example.learning-journey-ui-shared';\nimport type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';\n\ninterface GamifiedOverviewProps extends LearningViewProps {\n  onStart?: () => void;\n}\n\nexport function Overview({ track, progress, onStart }: GamifiedOverviewProps) {\n  const totalXp =\n    track.totalXp ??\n    track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) +\n      (track.completionRewards?.xpBonus ?? 0);\n\n  const completedSteps = progress.completedStepIds.length;\n  const totalSteps = track.steps.length;\n  const isComplete = completedSteps === totalSteps;\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Hero Card */}\n      <Card className=\"overflow-hidden bg-gradient-to-br from-violet-500/10 via-purple-500/10 to-fuchsia-500/10\">\n        <CardContent className=\"p-6\">\n          <div className=\"flex flex-col items-center gap-4 text-center md:flex-row md:text-left\">\n            <div className=\"flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 text-4xl shadow-lg\">\n              {isComplete ? '🏆' : '🎯'}\n            </div>\n            <div className=\"flex-1\">\n              <h1 className=\"text-2xl font-bold\">{track.name}</h1>\n              <p className=\"text-muted-foreground mt-1\">{track.description}</p>\n            </div>\n            <div className=\"flex items-center gap-3\">\n              <StreakCounter days={progress.streakDays} size=\"lg\" />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Stats Grid */}\n      <div className=\"grid gap-4 md:grid-cols-3\">\n        <Card>\n          <CardHeader className=\"pb-2\">\n            <CardTitle className=\"text-muted-foreground text-sm font-medium\">\n              XP Progress\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-3xl font-bold text-violet-500\">\n              {progress.xpEarned.toLocaleString()}\n            </div>\n            <XpBar\n              current={progress.xpEarned}\n              max={totalXp}\n              showLabel={false}\n              size=\"sm\"\n            />\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader className=\"pb-2\">\n            <CardTitle className=\"text-muted-foreground text-sm font-medium\">\n              Steps Completed\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"text-3xl font-bold\">\n              {completedSteps}{' '}\n              <span className=\"text-muted-foreground text-lg\">\n                / {totalSteps}\n              </span>\n            </div>\n            <div className=\"bg-muted mt-2 h-2 w-full overflow-hidden rounded-full\">\n              <div\n                className=\"h-full bg-green-500 transition-all duration-500\"\n                style={{ width: `${(completedSteps / totalSteps) * 100}%` }}\n              />\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader className=\"pb-2\">\n            <CardTitle className=\"text-muted-foreground text-sm font-medium\">\n              Badges Earned\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <BadgeDisplay badges={progress.badges} size=\"lg\" />\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Next Step Preview */}\n      {!isComplete && (\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <span>🎯</span>\n              <span>Next Challenge</span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            {(() => {\n              const nextStep = track.steps.find(\n                (s) => !progress.completedStepIds.includes(s.id)\n              );\n              if (!nextStep) return null;\n\n              return (\n                <div className=\"flex items-center justify-between gap-4\">\n                  <div>\n                    <h3 className=\"font-semibold\">{nextStep.title}</h3>\n                    <p className=\"text-muted-foreground text-sm\">\n                      {nextStep.description}\n                    </p>\n                  </div>\n                  <div className=\"flex items-center gap-3\">\n                    {nextStep.xpReward && (\n                      <span className=\"rounded-full bg-green-500/10 px-3 py-1 text-sm font-semibold text-green-500\">\n                        +{nextStep.xpReward} XP\n                      </span>\n                    )}\n                    <Button onClick={onStart}>Start</Button>\n                  </div>\n                </div>\n              );\n            })()}\n          </CardContent>\n        </Card>\n      )}\n\n      {/* Completion Message */}\n      {isComplete && (\n        <Card className=\"border-green-500/50 bg-green-500/5\">\n          <CardContent className=\"flex items-center gap-4 p-6\">\n            <div className=\"text-4xl\">🎉</div>\n            <div>\n              <h3 className=\"text-lg font-semibold text-green-500\">\n                Track Complete!\n              </h3>\n              <p className=\"text-muted-foreground\">\n                You've mastered all {totalSteps} challenges and earned{' '}\n                {progress.xpEarned} XP.\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,SAAS,EAAE,OAAO,UAAU,WAAkC;CAC5E,MAAM,UACJ,MAAM,WACN,MAAM,MAAM,QAAQ,KAAK,MAAM,OAAO,EAAE,YAAY,IAAI,EAAE,IACvD,MAAM,mBAAmB,WAAW;CAEzC,MAAM,iBAAiB,SAAS,iBAAiB;CACjD,MAAM,aAAa,MAAM,MAAM;CAC/B,MAAM,aAAa,mBAAmB;AAEtC,QACE,qBAAC;EAAI,WAAU;;GAEb,oBAAC;IAAK,WAAU;cACd,oBAAC;KAAY,WAAU;eACrB,qBAAC;MAAI,WAAU;;OACb,oBAAC;QAAI,WAAU;kBACZ,aAAa,OAAO;SACjB;OACN,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAG,WAAU;mBAAsB,MAAM;UAAU,EACpD,oBAAC;SAAE,WAAU;mBAA8B,MAAM;UAAgB;SAC7D;OACN,oBAAC;QAAI,WAAU;kBACb,oBAAC;SAAc,MAAM,SAAS;SAAY,MAAK;UAAO;SAClD;;OACF;MACM;KACT;GAGP,qBAAC;IAAI,WAAU;;KACb,qBAAC,mBACC,oBAAC;MAAW,WAAU;gBACpB,oBAAC;OAAU,WAAU;iBAA4C;QAErD;OACD,EACb,qBAAC,0BACC,oBAAC;MAAI,WAAU;gBACZ,SAAS,SAAS,gBAAgB;OAC/B,EACN,oBAAC;MACC,SAAS,SAAS;MAClB,KAAK;MACL,WAAW;MACX,MAAK;OACL,IACU,IACT;KAEP,qBAAC,mBACC,oBAAC;MAAW,WAAU;gBACpB,oBAAC;OAAU,WAAU;iBAA4C;QAErD;OACD,EACb,qBAAC,0BACC,qBAAC;MAAI,WAAU;;OACZ;OAAgB;OACjB,qBAAC;QAAK,WAAU;mBAAgC,MAC3C;SACE;;OACH,EACN,oBAAC;MAAI,WAAU;gBACb,oBAAC;OACC,WAAU;OACV,OAAO,EAAE,OAAO,GAAI,iBAAiB,aAAc,IAAI,IAAI;QAC3D;OACE,IACM,IACT;KAEP,qBAAC,mBACC,oBAAC;MAAW,WAAU;gBACpB,oBAAC;OAAU,WAAU;iBAA4C;QAErD;OACD,EACb,oBAAC,yBACC,oBAAC;MAAa,QAAQ,SAAS;MAAQ,MAAK;OAAO,GACvC,IACT;;KACH;GAGL,CAAC,cACA,qBAAC,mBACC,oBAAC,wBACC,qBAAC;IAAU,WAAU;eACnB,oBAAC,oBAAK,OAAS,EACf,oBAAC,oBAAK,mBAAqB;KACjB,GACD,EACb,oBAAC,gCACS;IACN,MAAM,WAAW,MAAM,MAAM,MAC1B,MAAM,CAAC,SAAS,iBAAiB,SAAS,EAAE,GAAG,CACjD;AACD,QAAI,CAAC,SAAU,QAAO;AAEtB,WACE,qBAAC;KAAI,WAAU;gBACb,qBAAC,oBACC,oBAAC;MAAG,WAAU;gBAAiB,SAAS;OAAW,EACnD,oBAAC;MAAE,WAAU;gBACV,SAAS;OACR,IACA,EACN,qBAAC;MAAI,WAAU;iBACZ,SAAS,YACR,qBAAC;OAAK,WAAU;;QAA8E;QAC1F,SAAS;QAAS;;QACf,EAET,oBAAC;OAAO,SAAS;iBAAS;QAAc;OACpC;MACF;OAEN,GACQ,IACT;GAIR,cACC,oBAAC;IAAK,WAAU;cACd,qBAAC;KAAY,WAAU;gBACrB,oBAAC;MAAI,WAAU;gBAAW;OAAQ,EAClC,qBAAC,oBACC,oBAAC;MAAG,WAAU;gBAAuC;OAEhD,EACL,qBAAC;MAAE,WAAU;;OAAwB;OACd;OAAW;OAAuB;OACtD,SAAS;OAAS;;OACjB,IACA;MACM;KACT;;GAEL"}

package/dist/views/Progress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Progress.js","names":[],"sources":["../../src/views/Progress.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from '@contractspec/lib.ui-kit-web/ui/card';\nimport {\n  XpBar,\n  BadgeDisplay,\n} from '@contractspec/example.learning-journey-ui-shared';\nimport { MasteryRing } from '../components/MasteryRing';\nimport type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';\n\nexport function Progress({ track, progress }: LearningViewProps) {\n  const totalXp =\n    track.totalXp ??\n    track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) +\n      (track.completionRewards?.xpBonus ?? 0);\n\n  const completedSteps = progress.completedStepIds.length;\n  const totalSteps = track.steps.length;\n  const percentComplete =\n    totalSteps > 0 ? (completedSteps / totalSteps) * 100 : 0;\n\n  // Group steps by metadata surface for mastery rings\n  const surfaces = new Map<string, { total: number; completed: number }>();\n  track.steps.forEach((step) => {\n    const surface = (step.metadata?.surface as string) ?? 'general';\n    const current = surfaces.get(surface) ?? { total: 0, completed: 0 };\n    surfaces.set(surface, {\n      total: current.total + 1,\n      completed:\n        current.completed +\n        (progress.completedStepIds.includes(step.id) ? 1 : 0),\n    });\n  });\n\n  const surfaceColors: ('green' | 'blue' | 'violet' | 'orange')[] = [\n    'green',\n    'blue',\n    'violet',\n    'orange',\n  ];\n\n  return (\n    <div className=\"space-y-6\">\n      {/* XP Progress */}\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"flex items-center gap-2\">\n            <span>⚡</span>\n            <span>Experience Points</span>\n          </CardTitle>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <div className=\"flex items-baseline gap-2\">\n            <span className=\"text-4xl font-bold text-violet-500\">\n              {progress.xpEarned.toLocaleString()}\n            </span>\n            <span className=\"text-muted-foreground\">\n              / {totalXp.toLocaleString()} XP\n            </span>\n          </div>\n          <XpBar\n            current={progress.xpEarned}\n            max={totalXp}\n            showLabel={false}\n            size=\"lg\"\n          />\n\n          {track.completionRewards?.xpBonus && percentComplete < 100 && (\n            <p className=\"text-muted-foreground text-sm\">\n              🎁 Complete all steps for a{' '}\n              <span className=\"font-semibold text-green-500\">\n                +{track.completionRewards.xpBonus} XP\n              </span>{' '}\n              bonus!\n            </p>\n          )}\n        </CardContent>\n      </Card>\n\n      {/* Mastery Rings */}\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"flex items-center gap-2\">\n            <span>🎯</span>\n            <span>Skill Mastery</span>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap justify-center gap-6\">\n            {Array.from(surfaces.entries()).map(([surface, data], index) => (\n              <MasteryRing\n                key={surface}\n                label={surface.charAt(0).toUpperCase() + surface.slice(1)}\n                percentage={(data.completed / data.total) * 100}\n                color={surfaceColors[index % surfaceColors.length]}\n                size=\"lg\"\n              />\n            ))}\n            <MasteryRing\n              label=\"Overall\"\n              percentage={percentComplete}\n              color=\"violet\"\n              size=\"lg\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Badges */}\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"flex items-center gap-2\">\n            <span>🏅</span>\n            <span>Badges Earned</span>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <BadgeDisplay badges={progress.badges} size=\"lg\" maxVisible={10} />\n          {progress.badges.length === 0 && (\n            <p className=\"text-muted-foreground text-sm\">\n              Complete the track to earn your first badge!\n            </p>\n          )}\n        </CardContent>\n      </Card>\n\n      {/* Step Breakdown */}\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"flex items-center gap-2\">\n            <span>📊</span>\n            <span>Step Breakdown</span>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"space-y-2\">\n            {track.steps.map((step) => {\n              const isCompleted = progress.completedStepIds.includes(step.id);\n              return (\n                <div\n                  key={step.id}\n                  className=\"flex items-center justify-between rounded-lg border p-3\"\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <span\n                      className={\n                        isCompleted ? 'text-green-500' : 'text-muted-foreground'\n                      }\n                    >\n                      {isCompleted ? '✓' : '○'}\n                    </span>\n                    <span\n                      className={\n                        isCompleted\n                          ? 'text-foreground'\n                          : 'text-muted-foreground'\n                      }\n                    >\n                      {step.title}\n                    </span>\n                  </div>\n                  {step.xpReward && (\n                    <span\n                      className={`text-sm font-medium ${isCompleted ? 'text-green-500' : 'text-muted-foreground'}`}\n                    >\n                      {isCompleted ? '+' : ''}\n                      {step.xpReward} XP\n                    </span>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/views/Steps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Steps.js","names":[],"sources":["../../src/views/Steps.tsx"],"sourcesContent":["'use client';\n\nimport { FlashCard } from '../components/FlashCard';\nimport type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';\n\nexport function Steps({ track, progress, onStepComplete }: LearningViewProps) {\n  const currentStepIndex = track.steps.findIndex(\n    (s) => !progress.completedStepIds.includes(s.id)\n  );\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Header */}\n      <div className=\"text-center\">\n        <h2 className=\"text-xl font-bold\">Complete Your Challenges</h2>\n        <p className=\"text-muted-foreground\">\n          Tap each card to reveal the action, then mark as complete\n        </p>\n      </div>\n\n      {/* Card Stack */}\n      <div className=\"grid gap-4 md:grid-cols-2\">\n        {track.steps.map((step, index) => {\n          const isCompleted = progress.completedStepIds.includes(step.id);\n          const isCurrent = index === currentStepIndex;\n\n          return (\n            <FlashCard\n              key={step.id}\n              step={step}\n              isCompleted={isCompleted}\n              isCurrent={isCurrent}\n              onComplete={() => onStepComplete?.(step.id)}\n            />\n          );\n        })}\n      </div>\n\n      {/* Progress Summary */}\n      <div className=\"text-muted-foreground text-center text-sm\">\n        {progress.completedStepIds.length} of {track.steps.length} completed\n        {track.completionRewards?.xpBonus && (\n          <span className=\"ml-2 text-green-500\">\n            (+{track.completionRewards.xpBonus} XP bonus on completion)\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,SAAgB,MAAM,EAAE,OAAO,UAAU,kBAAqC;CAC5E,MAAM,mBAAmB,MAAM,MAAM,WAClC,MAAM,CAAC,SAAS,iBAAiB,SAAS,EAAE,GAAG,CACjD;AAED,QACE,qBAAC;EAAI,WAAU;;GAEb,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eAAoB;MAA6B,EAC/D,oBAAC;KAAE,WAAU;eAAwB;MAEjC;KACA;GAGN,oBAAC;IAAI,WAAU;cACZ,MAAM,MAAM,KAAK,MAAM,UAAU;AAIhC,YACE,oBAAC;MAEO;MACN,aAPgB,SAAS,iBAAiB,SAAS,KAAK,GAAG;MAQ3D,WAPc,UAAU;MAQxB,kBAAkB,iBAAiB,KAAK,GAAG;QAJtC,KAAK,GAKV;MAEJ;KACE;GAGN,qBAAC;IAAI,WAAU;;KACZ,SAAS,iBAAiB;KAAO;KAAK,MAAM,MAAM;KAAO;KACzD,MAAM,mBAAmB,WACxB,qBAAC;MAAK,WAAU;;OAAsB;OACjC,MAAM,kBAAkB;OAAQ;;OAC9B;;KAEL;;GACF"}

package/dist/views/Timeline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Timeline.js","names":[],"sources":["../../src/views/Timeline.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from '@contractspec/lib.ui-kit-web/ui/card';\nimport { DayCalendar } from '../components/DayCalendar';\nimport type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';\n\nexport function Timeline({ track, progress }: LearningViewProps) {\n  // Check if this is a quest with day unlocks\n  const hasQuestDays = track.steps.some(\n    (s) => s.availability?.unlockOnDay !== undefined\n  );\n\n  if (hasQuestDays) {\n    // Quest-style calendar view\n    const totalDays = Math.max(\n      ...track.steps.map((s) => s.availability?.unlockOnDay ?? 1),\n      7\n    );\n\n    const completedDays = track.steps\n      .filter((s) => progress.completedStepIds.includes(s.id))\n      .map((s) => s.availability?.unlockOnDay ?? 1);\n\n    // Current day is the first incomplete day\n    const currentDay =\n      track.steps.find((s) => !progress.completedStepIds.includes(s.id))\n        ?.availability?.unlockOnDay ?? 1;\n\n    return (\n      <div className=\"space-y-6\">\n        {/* Header */}\n        <div className=\"text-center\">\n          <h2 className=\"text-xl font-bold\">{track.name}</h2>\n          <p className=\"text-muted-foreground\">\n            Complete each day's challenge to progress\n          </p>\n        </div>\n\n        {/* Calendar Grid */}\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <span>📅</span>\n              <span>Your Journey</span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"flex justify-center\">\n            <DayCalendar\n              totalDays={totalDays}\n              currentDay={currentDay}\n              completedDays={completedDays}\n            />\n          </CardContent>\n        </Card>\n\n        {/* Daily Steps */}\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <span>📝</span>\n              <span>Daily Challenges</span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"space-y-3\">\n              {track.steps.map((step) => {\n                const day = step.availability?.unlockOnDay ?? 1;\n                const isCompleted = progress.completedStepIds.includes(step.id);\n                const isLocked = day > currentDay;\n\n                return (\n                  <div\n                    key={step.id}\n                    className={`flex items-start gap-4 rounded-lg border p-4 ${\n                      isLocked ? 'opacity-50' : ''\n                    }`}\n                  >\n                    <div className=\"bg-muted flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-semibold\">\n                      {isCompleted ? '✓' : isLocked ? '🔒' : day}\n                    </div>\n                    <div className=\"flex-1\">\n                      <h4 className=\"font-semibold\">{step.title}</h4>\n                      <p className=\"text-muted-foreground text-sm\">\n                        {step.description}\n                      </p>\n                    </div>\n                    {step.xpReward && (\n                      <span\n                        className={`text-sm font-medium ${\n                          isCompleted\n                            ? 'text-green-500'\n                            : 'text-muted-foreground'\n                        }`}\n                      >\n                        +{step.xpReward} XP\n                      </span>\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    );\n  }\n\n  // Drill-style timeline (step order)\n  return (\n    <div className=\"space-y-6\">\n      {/* Header */}\n      <div className=\"text-center\">\n        <h2 className=\"text-xl font-bold\">Learning Path</h2>\n        <p className=\"text-muted-foreground\">\n          Follow the steps to master this skill\n        </p>\n      </div>\n\n      {/* Timeline */}\n      <Card>\n        <CardContent className=\"p-6\">\n          <div className=\"relative\">\n            {/* Vertical line */}\n            <div className=\"bg-border absolute top-0 left-5 h-full w-0.5\" />\n\n            {/* Steps */}\n            <div className=\"space-y-6\">\n              {track.steps.map((step, index) => {\n                const isCompleted = progress.completedStepIds.includes(step.id);\n                const isCurrent =\n                  !isCompleted &&\n                  track.steps\n                    .slice(0, index)\n                    .every((s) => progress.completedStepIds.includes(s.id));\n\n                return (\n                  <div key={step.id} className=\"relative flex gap-4 pl-2\">\n                    {/* Node */}\n                    <div\n                      className={`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 ${\n                        isCompleted\n                          ? 'border-green-500 bg-green-500 text-white'\n                          : isCurrent\n                            ? 'border-violet-500 bg-violet-500 text-white'\n                            : 'border-border bg-background'\n                      }`}\n                    >\n                      {isCompleted ? '✓' : index + 1}\n                    </div>\n\n                    {/* Content */}\n                    <div className=\"flex-1 pb-4\">\n                      <div className=\"flex items-start justify-between gap-2\">\n                        <div>\n                          <h4\n                            className={`font-semibold ${\n                              isCompleted\n                                ? 'text-foreground'\n                                : isCurrent\n                                  ? 'text-violet-500'\n                                  : 'text-muted-foreground'\n                            }`}\n                          >\n                            {step.title}\n                          </h4>\n                          <p className=\"text-muted-foreground mt-1 text-sm\">\n                            {step.description}\n                          </p>\n                        </div>\n                        {step.xpReward && (\n                          <span\n                            className={`shrink-0 rounded-full px-2 py-1 text-xs font-semibold ${\n                              isCompleted\n                                ? 'bg-green-500/10 text-green-500'\n                                : 'bg-muted text-muted-foreground'\n                            }`}\n                          >\n                            +{step.xpReward} XP\n                          </span>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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"}