feat: add hosted embed URL functionality and enhance widget embed options with tabbed interface

apps/embeds/package.json

@@ -7,7 +7,7 @@
     "dev": "vite dev --port 5180",
     "prebuild": "pnpm --filter @cio/ui run build",
     "build:question-type-picker": "vite build --mode question-type-picker",
-    "build:course-widget": "vite build --mode course-widget",
+    "build:course-widget": "vite build --mode course-widget && cp src/widgets/course-widget/embed.html dist/course-widget/embed.html",
     "build": "rm -rf dist && pnpm build:question-type-picker && pnpm build:course-widget",
     "format": "prettier --write .",
     "preview": "vite preview --port 4180",

apps/embeds/src/widgets/course-widget/embed.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <title>ClassroomIO Course Widget</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        background: transparent;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="cio-mount"></div>
+    <script type="module">
+      const params = new URLSearchParams(location.search);
+      const key = params.get('key');
+      const apiBaseUrl = params.get('api');
+
+      if (!key) {
+        const note = document.createElement('p');
+        note.textContent = 'Missing widget key. Append ?key=<your-widget-key> to the URL.';
+        note.style.cssText = 'font:14px system-ui;padding:16px;color:#475569;';
+        document.body.appendChild(note);
+      } else {
+        const mount = document.getElementById('cio-mount');
+        const widgetDiv = document.createElement('div');
+        widgetDiv.setAttribute('data-cio-widget', 'course-widget');
+        widgetDiv.setAttribute('data-widget-key', key);
+        if (apiBaseUrl) {
+          widgetDiv.setAttribute('data-api-base-url', apiBaseUrl);
+        }
+        mount.appendChild(widgetDiv);
+
+        const script = document.createElement('script');
+        script.async = true;
+        script.type = 'module';
+        script.src = './course-widget.js';
+        document.body.appendChild(script);
+      }
+    </script>
+  </body>
+</html>

apps/embeds/vite.config.ts

@@ -13,7 +13,8 @@ const embedEntries = {
 } as const;
 const embedDevEntrypoints = {
   '/embeds/question-type-picker/question-type-picker.js': '/src/widgets/question-type-picker/bootstrap.ts',
-  '/embeds/course-widget/course-widget.js': '/src/widgets/course-widget/bootstrap.ts'
+  '/embeds/course-widget/course-widget.js': '/src/widgets/course-widget/bootstrap.ts',
+  '/embeds/course-widget/embed.html': '/src/widgets/course-widget/embed.html'
 } as const;
 
 function embedDevEntryPlugin() {