@pie-element/element-player 0.1.1

package/README.md

@@ -0,0 +1,129 @@
+# PIE Element Player
+
+Self-contained web components for rendering PIE elements, following the same architecture as `@pie-framework/pie-players`.
+
+---
+
+## ⚠️ IMPORTANT: NOT FOR PUBLISHING
+
+**This package is currently marked as `private` and should NOT be published to npm.**
+
+### Build Issue
+
+The package has a dependency resolution issue that prevents it from building as a standalone library:
+
+- [element-loader.ts](src/lib/element-loader.ts) imports `$lib/element-imports` for local development mode
+- This import only exists in the element-demo app, not in this package
+- The import is marked as external in the build config as a workaround
+- For production use, this architecture needs to be refactored
+
+**Before publishing this package**, the following must be resolved:
+
+1. Refactor the element-loader to not depend on app-specific imports
+2. Either remove local development mode from the library OR provide a proper abstraction
+3. Ensure the build completes successfully without external dependencies on non-existent modules
+4. Remove the `"private": true` field from package.json
+
+**Issue tracked in**: Build fails with "Rollup failed to resolve import '$lib/element-imports'"
+
+---
+
+## Overview
+
+The element player is a **standalone web component bundle** (`pie-element-player.js`) that can be dropped into any HTML page with a simple `<script>` tag. It loads PIE elements via dynamic ESM imports.
+
+## Usage
+
+### ESM Player
+
+For elements with import maps:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>PIE Element Demo</title>
+</head>
+<body>
+  <pie-esm-element-player
+    id="player"
+    element-name="hotspot"
+  ></pie-esm-element-player>
+
+  <!-- Import map for module resolution -->
+  <script type="importmap">
+  {
+    "imports": {
+      "@pie-element/": "./packages/elements-svelte/"
+    }
+  }
+  </script>
+
+  <!-- Load the player bundle -->
+  <script type="module" src="/packages/shared/element-player/dist/pie-element-player.js"></script>
+
+  <script type="module">
+    const player = document.getElementById('player');
+    player.model = { /* PIE model */ };
+    player.session = { /* session data */ };
+  </script>
+</body>
+</html>
+```
+
+## Architecture
+
+### ESM Players
+
+**Interactive Player (`<pie-esm-element-player>`):**
+
+- Loads elements via dynamic ESM imports: `import('@pie-element/hotspot')`
+- Handles session state and user interactions
+- Manages math rendering internally (MathJax)
+- Emits `session-changed` events
+- Works with both React and Svelte elements
+
+**Print Player (`<pie-esm-print-player>`):**
+
+- Loads print exports: `import('@pie-element/hotspot/print')`
+- Stateless (no session management)
+- Optimized for print layouts
+- Manages math rendering internally (MathJax)
+- Role-based rendering (student/instructor)
+
+**Both players:**
+
+- Use import maps for module resolution
+- Self-contained (no external setup needed)
+- Handle math rendering automatically
+- Support for both React and Svelte elements
+
+## Testing Elements Locally
+
+Use the existing demo commands to test elements:
+
+```bash
+# Start demo server for Svelte elements
+bun cli dev:demo hotspot
+```
+
+**Prerequisites:**
+
+- Element must be built: `bun run turbo build --filter @pie-element/hotspot`
+- Element player must be built: `bun run turbo build --filter @pie-element/element-player`
+
+## Development
+
+### Local Development
+
+To test changes to player components:
+
+```bash
+# Build element-player
+cd packages/shared/element-player
+bun run build
+
+# Run element demo
+cd ../../../
+bun cli dev:demo hotspot
+```

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * PIE Element Player
+ *
+ * Self-contained web components for rendering PIE elements.
+ * Handles element loading, math rendering, and session management internally.
+ *
+ * Usage:
+ *   <pie-esm-element-player element-name="hotspot"></pie-esm-element-player>
+ *   <pie-esm-print-player element-name="hotspot" role="student"></pie-esm-print-player>
+ */
+import './app.css';
+export { EsmElementPlayer, EsmPrintPlayer } from './players';
+import './players';
+export type { ElementPlayerProps, PieController, Tab } from './lib/types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,WAAW,CAAC;AAGnB,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAG7D,OAAO,WAAW,CAAC;AAGnB,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC"}

package/dist/lib/element-loader.d.ts

@@ -0,0 +1,26 @@
+/**
+ * PIE Element Loader
+ *
+ * Dynamically loads PIE elements from CDN and registers them as custom elements.
+ * Based on the ESM loader pattern from pie-players.
+ */
+/**
+ * Load and register a PIE element as a custom element
+ *
+ * @param packagePath - Package path (e.g., '@pie-element/hotspot' or '@pie-element/hotspot/configure')
+ * @param tagName - Custom element tag name (e.g., 'hotspot-element')
+ * @param cdnUrl - Base CDN URL (e.g., 'http://localhost:5179' or 'https://esm.sh')
+ * @param debug - Enable debug logging
+ * @param optional - If true, suppress error logging (for optional components like configure)
+ */
+export declare function loadElement(packagePath: string, tagName: string, cdnUrl: string, debug?: boolean, optional?: boolean): Promise<void>;
+/**
+ * Load a PIE controller module
+ *
+ * @param packageName - Package name (e.g., '@pie-element/hotspot')
+ * @param cdnUrl - Base CDN URL
+ * @param debug - Enable debug logging
+ * @returns Controller object with model/score/outcome methods
+ */
+export declare function loadController(packageName: string, cdnUrl: string, debug?: boolean): Promise<any>;
+//# sourceMappingURL=element-loader.d.ts.map

package/dist/lib/element-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-loader.d.ts","sourceRoot":"","sources":["../../src/lib/element-loader.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH;;;;;;;;GAQG;AACH,wBAAsB,WAAW,CAC/B,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,KAAK,GAAE,OAAe,EACtB,QAAQ,GAAE,OAAe,GACxB,OAAO,CAAC,IAAI,CAAC,CAiEf;AAED;;;;;;;GAOG;AACH,wBAAsB,cAAc,CAClC,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,KAAK,GAAE,OAAe,GACrB,OAAO,CAAC,GAAG,CAAC,CAiDd"}

package/dist/lib/types.d.ts

@@ -0,0 +1,26 @@
+/**
+ * TypeScript type definitions for PIE Element Player
+ */
+export interface ElementPlayerProps {
+    elementName: string;
+    cdnUrl?: string;
+    model?: any;
+    session?: any;
+    mode?: 'gather' | 'view' | 'evaluate';
+    showConfigure?: boolean;
+    addCorrectResponse?: boolean;
+    debug?: boolean;
+}
+export interface PieController {
+    model?: (config: any, session: any, env: any) => Promise<any>;
+    score?: (model: any, session: any) => Promise<any>;
+    outcome?: (model: any, session: any, env: any) => Promise<any>;
+    createCorrectResponseSession?: (model: any, env: any) => Promise<any>;
+}
+export interface Tab {
+    id: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC9D,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC/D,4BAA4B,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CACvE;AAED,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/math-mathjax-Dwo4iuV6.js

@@ -0,0 +1,50 @@
+const c = "https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js";
+let n = null;
+function u(o) {
+  return typeof window > "u" || window.MathJax?.version ? Promise.resolve() : n || (n = new Promise((a, s) => {
+    const { useSingleDollar: l = !1, accessibility: r = !0, loadFonts: i = !0, srcUrl: d } = o, e = {
+      tex: {
+        packages: ["base", "ams", "autoload"],
+        macros: {
+          parallelogram: "\\lower.2em{\\Huge\\unicode{x25B1}}",
+          overarc: "\\overparen",
+          napprox: "\\not\\approx",
+          longdiv: "\\enclose{longdiv}"
+        }
+      },
+      options: {
+        enableMenu: r,
+        enableExplorer: r
+      },
+      startup: {
+        ready: () => {
+          window.MathJax?.startup.defaultReady && (window.MathJax.startup.defaultReady(), a());
+        },
+        defaultReady: () => {
+        }
+      }
+    };
+    l && e.tex && (e.tex.inlineMath = [
+      ["$", "$"],
+      ["\\(", "\\)"]
+    ], e.tex.processEscapes = !0), i || (e.chtml = { fontURL: "" }), window.MathJax = e;
+    const t = document.createElement("script");
+    t.src = d || c, t.async = !0, t.onload = () => {
+      setTimeout(a, 100);
+    }, t.onerror = () => {
+      s(new Error("Failed to load MathJax"));
+    }, document.head.appendChild(t);
+  }), n);
+}
+function p(o = {}) {
+  return async (a) => {
+    if (await u(o), !window.MathJax?.typesetPromise) {
+      console.warn("[mathjax-renderer] MathJax not loaded or missing typesetPromise.");
+      return;
+    }
+    await window.MathJax.typesetPromise([a]);
+  };
+}
+export {
+  p as m
+};