@lxpack/runtime 0.1.0

package/dist/styles.css

@@ -0,0 +1,246 @@
+:root {
+  --lxpack-bg: #0f1419;
+  --lxpack-surface: #1a2332;
+  --lxpack-border: #2d3a4f;
+  --lxpack-text: #e8edf4;
+  --lxpack-muted: #8b9cb3;
+  --lxpack-accent: #3b82f6;
+  --lxpack-accent-hover: #2563eb;
+  --lxpack-success: #22c55e;
+  --lxpack-radius: 8px;
+  --lxpack-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--lxpack-font);
+  background: var(--lxpack-bg);
+  color: var(--lxpack-text);
+  line-height: 1.6;
+}
+
+.lxpack-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.lxpack-header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--lxpack-border);
+  background: var(--lxpack-surface);
+}
+
+.lxpack-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.lxpack-version {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+  color: var(--lxpack-muted);
+}
+
+.lxpack-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.lxpack-nav {
+  width: 220px;
+  flex-shrink: 0;
+  padding: 1rem;
+  border-right: 1px solid var(--lxpack-border);
+  background: var(--lxpack-surface);
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  overflow-y: auto;
+}
+
+.lxpack-nav-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--lxpack-radius);
+  color: var(--lxpack-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.lxpack-nav-item:hover {
+  background: var(--lxpack-bg);
+}
+
+.lxpack-nav-item.active {
+  border-color: var(--lxpack-accent);
+  background: color-mix(in srgb, var(--lxpack-accent) 15%, transparent);
+}
+
+.lxpack-nav-item.completed::after {
+  content: " ✓";
+  color: var(--lxpack-success);
+}
+
+.lxpack-content {
+  flex: 1;
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+.lxpack-markdown h1,
+.lxpack-markdown h2,
+.lxpack-markdown h3 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.lxpack-markdown h1:first-child {
+  margin-top: 0;
+}
+
+.lxpack-markdown code {
+  background: var(--lxpack-surface);
+  padding: 0.125em 0.375em;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.lxpack-markdown pre {
+  background: var(--lxpack-surface);
+  padding: 1rem;
+  border-radius: var(--lxpack-radius);
+  overflow-x: auto;
+}
+
+.lxpack-interaction-frame {
+  width: 100%;
+  min-height: 480px;
+  border: 1px solid var(--lxpack-border);
+  border-radius: var(--lxpack-radius);
+  background: #fff;
+}
+
+.lxpack-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--lxpack-border);
+  background: var(--lxpack-surface);
+}
+
+.lxpack-progress-bar {
+  height: 6px;
+  background: var(--lxpack-bg);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.lxpack-progress-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--lxpack-accent);
+  transition: width 0.3s ease;
+}
+
+.lxpack-nav-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.lxpack-nav-buttons button {
+  padding: 0.5rem 1rem;
+  font: inherit;
+  border-radius: var(--lxpack-radius);
+  border: 1px solid var(--lxpack-border);
+  background: var(--lxpack-bg);
+  color: var(--lxpack-text);
+  cursor: pointer;
+}
+
+.lxpack-nav-buttons button:hover:not(:disabled) {
+  border-color: var(--lxpack-accent);
+}
+
+.lxpack-nav-buttons button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.lxpack-complete-btn {
+  margin-left: auto;
+  background: var(--lxpack-accent) !important;
+  border-color: var(--lxpack-accent) !important;
+}
+
+.lxpack-complete-btn:hover:not(:disabled) {
+  background: var(--lxpack-accent-hover) !important;
+}
+
+.lxpack-error {
+  color: #f87171;
+}
+
+.lxpack-assessment {
+  max-width: 640px;
+}
+
+.lxpack-assessment h2 {
+  margin-top: 0;
+}
+
+.lxpack-question {
+  border: 1px solid var(--lxpack-border);
+  border-radius: var(--lxpack-radius);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.lxpack-choice {
+  display: block;
+  margin: 0.5rem 0;
+  cursor: pointer;
+}
+
+.lxpack-assessment-feedback {
+  margin-top: 1rem;
+}
+
+.lxpack-success-text {
+  color: var(--lxpack-success);
+}
+
+.lxpack-nav-assessment {
+  font-style: italic;
+}
+
+.lxpack-description {
+  color: var(--lxpack-muted);
+  margin: 0.25rem 0 0;
+}
+
+@media (max-width: 768px) {
+  .lxpack-body {
+    flex-direction: column;
+  }
+
+  .lxpack-nav {
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    border-right: none;
+    border-bottom: 1px solid var(--lxpack-border);
+  }
+}

package/dist/types.d.ts

@@ -0,0 +1,28 @@
+import type { CourseManifest, Lesson } from "@lxpack/validators";
+export interface CourseProgress {
+    currentLessonId: string;
+    completedLessons: string[];
+    assessmentScores: Record<string, number>;
+    suspendData: Record<string, unknown>;
+}
+export interface RuntimeConfig {
+    manifest: CourseManifest;
+    baseUrl: string;
+    mode: "preview" | "standalone" | "scorm12";
+    progress?: CourseProgress;
+}
+export interface TrackEvent {
+    type: string;
+    id?: string;
+    data?: Record<string, unknown>;
+}
+export interface LxpackAPI {
+    track: (event: TrackEvent) => void;
+    completeLesson: (lessonId: string) => void;
+    getProgress: () => CourseProgress;
+    setVariable: (key: string, value: unknown) => void;
+    getVariable: (key: string) => unknown;
+    submitAssessment: (assessmentId: string, score: number, passingScore: number) => void;
+}
+export type { CourseManifest, Lesson };
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,MAAM,cAAc,CAAC;IAClC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,gBAAgB,EAAE,CAChB,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,KACjB,IAAI,CAAC;CACX;AAED,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@lxpack/runtime",
+  "version": "0.1.0",
+  "description": "Web-native course runtime for LXPack",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eddiethedean/lxpack.git",
+    "directory": "packages/runtime"
+  },
+  "bugs": {
+    "url": "https://github.com/eddiethedean/lxpack/issues"
+  },
+  "homepage": "https://github.com/eddiethedean/lxpack#readme",
+  "keywords": [
+    "lxpack",
+    "scorm",
+    "lms",
+    "elearning",
+    "runtime"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/runtime.d.ts",
+      "import": "./dist/runtime.js"
+    },
+    "./client": "./dist/client.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "marked": "^15.0.7",
+    "yaml": "^2.7.0",
+    "@lxpack/validators": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.10",
+    "happy-dom": "^17.4.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.2",
+    "vitest": "^3.1.1"
+  },
+  "scripts": {
+    "build": "vite build && vite build -c vite.runtime.config.ts && tsc -p tsconfig.build.json --emitDeclarationOnly && cp src/styles.css dist/styles.css",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  }
+}