@neuromatch/course-kit 0.0.0-stage → 0.1.0

package/dist/assets/cells/runtime-widget.mjs

@@ -0,0 +1,4 @@
+// GENERATED by npm run build in course-kit/js. Do not edit.
+var h="nma-no-fallback";var m=n=>n.includes(h)?n:`${n.replace(/\s*$/,"")}
+# ${h}
+`;var a=n=>`nma-cell-${n}`;function f(n){return{core:new URL("../thebe-core.min.js",n).href,lite:new URL("../thebe-lite.min.js",n).href}}var b="Starting Python\u2026 the first run takes about 10 seconds",p=()=>!!(window.thebeCore?.api&&window.thebeLite);async function x(n){if(p())return;if(n&&typeof document<"u"){let{core:t,lite:i}=f(n);for(let r of[t,i]){if(document.querySelector(`script[src="${r}"]`))continue;let o=document.createElement("script");o.src=r,document.head.appendChild(o)}}let e=Date.now()+3e4;for(;!p();){if(Date.now()>e)throw new Error("thebe did not load");await new Promise(t=>setTimeout(t,50))}}var c=class{constructor(e){this.path=e,this.cells=null,this.edits={},this.ran=new Set,this.ready=null,this.bundleUrl=null,this.kernel=null,this.queue=Promise.resolve(),this.listeners=new Set,this.outs=new Map,this.cellsReady=new Promise(t=>this._resolveCells=t)}setCells(e){this.cells=e,this._resolveCells(e)}subscribe(e){return this.listeners.add(e),()=>this.listeners.delete(e)}emit(e){for(let t of this.listeners)t(e)}register(e,t){return this.outs.set(e,t),this.ready&&this.ready.nb.getCellById(a(e))?.attachToDOM(t),()=>{this.outs.get(e)===t&&this.outs.delete(e)}}boot(){return this.kernel||=(async()=>{this.emit({kernel:"starting",message:b}),await x(this.bundleUrl);let e=window.thebeCore.api,t=e.makeEvents(),i=e.makeConfiguration({useJupyterLite:!0},t),r=e.makeServer(i);await r.connectToJupyterLiteServer();let o=e.makeRenderMimeRegistry(i.mathjax),l=await this.cellsReady,s=e.setupNotebookFromBlocks(l.map(u=>({id:a(u.index),source:u.code})),i,o),d=await r.startNewSession(o);s.attachSession(d),this.ready={api:e,config:i,server:r,rendermime:o,session:d,nb:s};for(let[u,y]of this.outs)s.getCellById(a(u))?.attachToDOM(y);return this.emit({kernel:"ready"}),this.ready})(),this.kernel.catch(()=>{this.kernel=null}),this.kernel}run(e,t){let i=this.queue.then(async()=>{let r=await this.boot();for(let l of this.cells){if(l.index>=e)break;if(this.ran.has(l.index))continue;let s=await this.exec(r,l.index,this.edits[l.index]??l.code);if(s.error)return{error:s.error,failedIndex:l.index}}let o=await this.exec(r,e,m(t));return{error:o.error,failedIndex:o.error?e:null}});return this.queue=i.catch(()=>{}),i}runAll(){let e=this.queue.then(async()=>{let t=await this.boot();for(let i of this.cells){let r=await this.exec(t,i.index,this.edits[i.index]??i.code);if(r.error)return{error:r.error,failedIndex:i.index}}return{error:null,failedIndex:null}});return this.queue=e.catch(()=>{}),e}async exec(e,t,i){let r=e.nb.getCellById(a(t));this.emit({index:t,state:"running"});let o=await r.execute(i);this.ran.add(t);let l=o==null?{ename:"InternalError"}:o.error?.[0]??null,s=l&&{...l,ename:String(l.ename??"Error").replace(/^<class '(.*)'>$/,"$1")};return this.emit({index:t,state:s?"error":"done",count:r.executionCount,error:s}),{error:s}}async restart(){let e=await this.kernel;await e.server.shutdownAllSessions();let t=await e.server.startNewSession(e.rendermime);e.nb.attachSession(t),e.session=t,this.ran.clear(),this.queue=Promise.resolve(),this.emit({kernel:"ready",restarted:!0})}async dispose(){if(!this.kernel)return;let e=await this.kernel.catch(()=>null);await e?.server.shutdownAllSessions(),e?.server.dispose()}};function w(){let n=location.pathname,e=window.NMA_CELLS||={};return e.runtime?.path!==n&&(e.runtime?.dispose(),e.runtime=new c(n)),e.runtime}function k(n){let e=n.querySelector('link[rel="stylesheet"]')??n.getRootNode().querySelector('link[rel="stylesheet"]');if(!e||document.head.querySelector("link[data-nma-cells]"))return;let t=document.createElement("link");t.rel="stylesheet",t.href=e.href,t.dataset.nmaCells="",document.head.appendChild(t)}function g(n){if((n.cells??[]).length===0||typeof document>"u")return;let t=document.getElementById("nma-run-all-bar");if(!t){t=document.createElement("div"),t.id="nma-run-all-bar",t.className="nma-run-all-bar",t.innerHTML='<button type="button" class="nma-run-all">\u25B6 Run all</button><span class="nma-run-all-status" role="status" aria-live="polite"></span>',document.body.appendChild(t);let r=t.querySelector(".nma-run-all"),o=t.querySelector(".nma-run-all-status"),l=s=>{t._running=s,r.disabled=s,r.textContent=s?"\u23F3 Running\u2026":"\u25B6 Run all"};r.addEventListener("click",async()=>{if(!t._running){l(!0),o.textContent="";try{let s=await t._rt.runAll();o.textContent=s.error?`\u2717 stopped at cell ${s.failedIndex+1}`:"\u2713 ran all cells"}catch(s){o.textContent=`\u2717 ${s?.message??s}`}finally{l(!1)}}})}t._rt=n,t._off?.();let i=t.querySelector(".nma-run-all-status");t._off=n.subscribe(r=>{t._running&&(r.kernel==="starting"?i.textContent="Starting\u2026":typeof r.index=="number"&&r.state==="running"&&(i.textContent=`Running cell ${r.index+1}\u2026`))})}var I={render({model:n,el:e}){k(e);let t=w();t.bundleUrl||=import.meta.url,t.setCells(n.get("cells")),g(t)}};export{I as default};

package/dist/assets/feedback/widget.mjs

@@ -0,0 +1,146 @@
+// Feedback widget for {nma-feedback} (anywidget ESM, loaded by the MyST theme
+// in the browser, no kernel needed). feedback/plugin.mjs fills the model:
+//   section_id, url, project, user_key
+//
+// It does what vibecheck's DatatopsContentReviewContainer does in notebooks:
+// 🙂 sends right away, 😐/🙁 ask for a comment first. The request body matches
+// vibecheck's, so site and notebook feedback land in the same datatops project.
+
+const CHOICES = [
+  { name: 'happy', emoji: '🙂', color: '#aaffaa', label: 'Happy' },
+  { name: 'medium', emoji: '😐', color: '#dddd77', label: 'Neutral' },
+  { name: 'sad', emoji: '🙁', color: '#ffaaaa', label: 'Unhappy' },
+];
+
+const STYLE = `
+.nma-fb { margin: 0.75rem 0; font-size: 0.95rem; }
+.nma-fb-label { opacity: 0.75; margin: 0 0 0.35rem; }
+.nma-fb-buttons { display: flex; gap: 0.5rem; }
+.nma-fb-buttons button {
+  font-size: 1.6rem; line-height: 1; padding: 0.35rem 0.6rem; cursor: pointer;
+  border: 2px solid transparent; border-radius: 0.4rem; color: #000;
+}
+.nma-fb-buttons button[aria-pressed="true"] { border-color: #666; }
+.nma-fb-buttons button:disabled { cursor: default; opacity: 0.6; }
+.nma-fb-comment { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: stretch; }
+.nma-fb-comment[hidden] { display: none; }
+.nma-fb-comment textarea {
+  flex: 1; min-height: 3rem; padding: 0.4rem; font: inherit; color: inherit;
+  background: transparent; border: 1px solid #888; border-radius: 0.3rem;
+}
+.nma-fb-comment button {
+  padding: 0 1rem; cursor: pointer; font: inherit; color: inherit;
+  background: transparent; border: 1px solid #888; border-radius: 0.3rem;
+}
+.nma-fb-status { margin: 0.4rem 0 0; }
+.nma-fb-status.error { color: #c62828; }
+`;
+
+/** vibecheck's timestamp format: ISO 8601 in UTC without the trailing Z. */
+export function timestamp(date = new Date()) {
+  return date.toISOString().replace(/Z$/, '');
+}
+
+/** POST one response to datatops. Resolves true on success, false otherwise. */
+export async function send(settings, buttonName, feedback, fetchImpl = globalThis.fetch) {
+  const base = settings.url.replace(/\/+$/, '');
+  try {
+    const response = await fetchImpl(`${base}/api/v1/projects/${encodeURIComponent(settings.project)}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-User-Key': settings.user_key },
+      body: JSON.stringify({
+        button_name: buttonName,
+        feedback,
+        section_id: settings.section_id,
+        timestamp_utc: timestamp(),
+      }),
+    });
+    if (!response.ok) return false;
+    const result = await response.json();
+    return result?.status === 'success';
+  } catch {
+    return false;
+  }
+}
+
+function element(tag, props = {}, children = []) {
+  const node = document.createElement(tag);
+  Object.assign(node, props);
+  node.append(...children);
+  return node;
+}
+
+function render({ model, el }) {
+  const settings = Object.fromEntries(
+    ['section_id', 'url', 'project', 'user_key'].map((key) => [key, model.get(key)]),
+  );
+  let selected = null;
+
+  const buttons = CHOICES.map((choice) => {
+    const button = element('button', {
+      type: 'button',
+      textContent: choice.emoji,
+      title: choice.label,
+    });
+    button.style.background = choice.color;
+    button.setAttribute('aria-label', choice.label);
+    button.setAttribute('aria-pressed', 'false');
+    button.addEventListener('click', () => choose(choice.name));
+    return button;
+  });
+  const textarea = element('textarea', { placeholder: 'We want your feedback!', rows: 2 });
+  textarea.setAttribute('aria-label', 'Your feedback');
+  const submit = element('button', { type: 'button', textContent: 'Submit' });
+  const comment = element('div', { className: 'nma-fb-comment', hidden: true }, [textarea, submit]);
+  const status = element('p', { className: 'nma-fb-status' });
+  status.setAttribute('role', 'status');
+
+  const root = element('div', { className: 'nma-fb' }, [
+    element('style', { textContent: STYLE }),
+    element('p', { className: 'nma-fb-label', textContent: 'How did this section go?' }),
+    element('div', { className: 'nma-fb-buttons' }, buttons),
+    comment,
+    status,
+  ]);
+
+  function setBusy(busy) {
+    buttons.forEach((b) => (b.disabled = busy));
+    submit.disabled = busy;
+    textarea.disabled = busy;
+  }
+
+  async function submitFeedback(buttonName, text) {
+    setBusy(true);
+    status.className = 'nma-fb-status';
+    status.textContent = 'Sending…';
+    if (await send(settings, buttonName, text)) {
+      comment.hidden = true;
+      buttons.forEach((b) => (b.disabled = true));
+      status.textContent = 'Thanks for your feedback!';
+    } else {
+      setBusy(false);
+      status.className = 'nma-fb-status error';
+      status.textContent = "Couldn't send feedback, please try again.";
+    }
+  }
+
+  function choose(name) {
+    selected = name;
+    CHOICES.forEach((choice, i) => buttons[i].setAttribute('aria-pressed', String(choice.name === name)));
+    if (name === 'happy') {
+      comment.hidden = true;
+      submitFeedback('happy', '');
+    } else {
+      comment.hidden = false;
+      status.textContent = '';
+      textarea.focus();
+    }
+  }
+
+  submit.addEventListener('click', () => submitFeedback(selected, textarea.value));
+
+  el.replaceChildren(root);
+  return () => el.replaceChildren();
+}
+
+export default { render };

package/dist/assets/scrolly/engine.mjs

@@ -0,0 +1,140 @@
+// Scrollytelling engine (one per scrolly page, emitted by scrolly.mjs).
+//
+// - Copies the page layout stylesheet (scrolly.css, attached to this widget
+//   so MyST bundles it) from the widget's shadow root into the document.
+// - Tracks which step card is on screen and shows the matching stage view.
+// - Draws the progress bar, section label and the "Enable Python" pill.
+// - Plays muted videos in the active view and pauses the others.
+// - Publishes the page's code cells on window.NMA_SCROLLY for runnable.mjs.
+//
+// Without JavaScript the page is a plain linear document.
+
+const STYLE = `
+.hud { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px; padding: 14px 28px; pointer-events: none; font-family: var(--nm-font-head, system-ui, sans-serif); }
+.sec { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nm-mint, #5efbd7); min-width: 12ch; }
+.bar { flex: 1; height: 3px; background: rgba(255,255,255,0.14); border-radius: 3px; overflow: hidden; }
+.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--nm-salmon, #fb7a7a), var(--nm-mint, #5efbd7)); transition: width 0.4s; }
+.py[hidden] { display: none; }
+.py { pointer-events: auto; flex: none; font: 600 0.74rem var(--nm-font-head, system-ui, sans-serif); letter-spacing: 0.04em; border: 1px solid var(--nm-mint, #5efbd7); border-radius: 999px; padding: 0.3rem 0.85rem; cursor: pointer; max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--nm-mint, #5efbd7); color: var(--nm-indigo, #2a2952); }
+.py[data-state="loading"] { background: transparent; color: var(--nm-mint, #5efbd7); cursor: progress; }
+.py[data-state="ready"] { background: transparent; color: var(--nm-mint, #5efbd7); cursor: default; }
+.py[data-state="error"] { background: var(--nm-salmon, #fb7a7a); border-color: var(--nm-salmon, #fb7a7a); }
+`;
+
+// Section width (px) from which the stage sits beside the cards.
+// Keep in sync with the @container breakpoint in scrolly.css.
+const WIDE = 760;
+
+const PY_LABELS = { idle: 'Enable Python ▸', ready: 'Python ready', error: 'Python failed. Retry' };
+
+/** Copy the layout stylesheet link from the shadow root into <head> (once). */
+function installPageStyles(el) {
+  const link = el.querySelector('link[rel="stylesheet"]');
+  if (!link || document.head.querySelector('link[data-nma-scrolly]')) return;
+  const copy = document.createElement('link');
+  copy.rel = 'stylesheet';
+  copy.href = link.href;
+  copy.dataset.nmaScrolly = '';
+  document.head.appendChild(copy);
+}
+
+function render({ model, el }) {
+  installPageStyles(el);
+  const host = el.getRootNode().host;
+  const container = host && host.closest('.scrolly');
+  if (!container) {
+    el.textContent = 'scrolly engine: no enclosing .scrolly section';
+    return;
+  }
+  window.NMA_SCROLLY = {
+    ...(window.NMA_SCROLLY || {}),
+    cells: model.get('cells') || [],
+    pyodideUrl: model.get('pyodideUrl'),
+    edits: (window.NMA_SCROLLY && window.NMA_SCROLLY.edits) || {},
+  };
+
+  const map = model.get('map') || [];
+  const hero = model.get('hero') || [];
+  const sections = model.get('sections') || [];
+  const steps = [...container.querySelectorAll(':scope > .scrolly-steps > .scrolly-step')];
+  const views = [...container.querySelectorAll(':scope > .scrolly-stage > .scrolly-view')];
+
+  const style = document.createElement('style');
+  style.textContent = STYLE;
+  const hud = document.createElement('div');
+  hud.className = 'hud';
+  hud.innerHTML = '<span class="sec"></span><div class="bar"><i></i></div><button type="button" class="py"></button>';
+  el.append(style, hud);
+  const secEl = hud.querySelector('.sec');
+  const barEl = hud.querySelector('.bar i');
+  const pyBtn = hud.querySelector('.py');
+
+  let active = -1;
+  function activate(i) {
+    if (i === active || i < 0) return;
+    active = i;
+    steps.forEach((s, k) => s.classList.toggle('is-active', k === i));
+    const v = map[i] ?? -1;
+    views.forEach((x, k) => {
+      const on = k === v;
+      x.classList.toggle('is-active', on);
+      x.querySelectorAll('video').forEach((video) => {
+        if (!on) video.pause();
+        else if (video.muted || video.autoplay) video.play().catch(() => {});
+      });
+    });
+    container.classList.toggle('is-hero-active', !!hero[i]);
+    secEl.textContent = sections[i] || '';
+    barEl.style.width = `${((i + 1) / steps.length) * 100}%`;
+  }
+
+  let io;
+  let lastKey = '';
+  function observe() {
+    const H = window.innerHeight;
+    const wide = container.clientWidth >= WIDE;
+    const key = `${H}|${wide}`;
+    if (io && key === lastKey) return;
+    lastKey = key;
+    if (io) io.disconnect();
+    const top = parseFloat(getComputedStyle(container).getPropertyValue('--scrolly-top')) || 0;
+    const line = wide ? Math.round(H * 0.5) : Math.round(top + 0.55 * H + 48);
+    io = new IntersectionObserver(
+      (entries) => entries.forEach((e) => e.isIntersecting && activate(steps.indexOf(e.target.closest('.scrolly-step')))),
+      { rootMargin: `-${line}px 0px -${Math.max(0, H - line - 1)}px 0px`, threshold: 0 },
+    );
+    steps.forEach((s) => io.observe(s.querySelector('.scrolly-card') || s));
+  }
+  window.addEventListener('resize', observe);
+  const ro = new ResizeObserver(observe); // the section's width changes with the menus, not just the window
+  ro.observe(container);
+
+  const showPy = (state, msg) => {
+    pyBtn.hidden = false;
+    pyBtn.dataset.state = state;
+    pyBtn.textContent = state === 'loading' ? msg : PY_LABELS[state] || PY_LABELS.idle;
+    pyBtn.title = state === 'error' ? msg : 'Runs Python in your browser (Pyodide). Downloaded once, then cached.';
+  };
+  const onPy = (e) => showPy(e.detail.state, e.detail.msg);
+  window.addEventListener('nma-py', onPy);
+  pyBtn.hidden = true; // shown once runnable.mjs creates the runtime
+  if (window.NMA_PY) showPy(window.NMA_PY.state, window.NMA_PY.msg);
+  pyBtn.addEventListener('click', async () => {
+    const py = window.NMA_PY;
+    if (py && (py.state === 'idle' || py.state === 'error')) py.ensure().catch(() => {});
+  });
+
+  activate(0);
+  observe();
+  container.dataset.ready = 'true';
+  container._activate = activate; // test hook
+
+  return () => {
+    if (io) io.disconnect();
+    window.removeEventListener('resize', observe);
+    ro.disconnect();
+    window.removeEventListener('nma-py', onPy);
+  };
+}
+
+export default { render };

package/dist/assets/scrolly/runnable.css

@@ -0,0 +1,67 @@
+/* Runnable Python panel (inside the widget's shadow DOM).
+   Colours come from the --nm-* variables set on .scrolly in scrolly.css. */
+:host { display: block; width: 100%; }
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+
+.fl-codebox {
+  width: 100%;
+  background: #14131f;
+  border: 1px solid rgba(185, 184, 255, 0.28);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 12px 34px rgba(8, 7, 30, 0.5);
+  color: #ecebff;
+  font-family: var(--nm-font-body, system-ui, sans-serif);
+  text-align: left;
+}
+.fl-codehead { display: flex; justify-content: space-between; padding: 0.45rem 1rem; background: #22214a; font: 600 0.72rem var(--nm-font-head, system-ui, sans-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nm-lilac, #b9b8ff); }
+
+.fl-params { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 0.55rem 1rem; background: #1b1a36; border-bottom: 1px solid rgba(185, 184, 255, 0.2); }
+.fl-params label { display: flex; align-items: center; gap: 0.5rem; font: 600 0.8rem ui-monospace, Consolas, monospace; color: var(--nm-lilac, #b9b8ff); }
+.fl-params input[type=range] { width: 9rem; accent-color: var(--nm-mint, #5efbd7); }
+.fl-params output { min-width: 4ch; color: var(--nm-mint, #5efbd7); text-align: right; }
+.fl-params select { font: inherit; background: #14131f; color: var(--nm-mint, #5efbd7); border: 1px solid rgba(185, 184, 255, 0.4); border-radius: 6px; padding: 0.15rem 0.4rem; }
+
+.fl-editor { position: relative; max-height: 46vh; overflow: auto; }
+.fl-editor .fl-hl, .fl-editor .fl-ta {
+  margin: 0;
+  padding: 0.9rem 1.1rem;
+  font: 0.85rem/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
+  white-space: pre;
+  tab-size: 4;
+}
+.fl-editor .fl-hl { color: #ecebff; overflow: hidden; pointer-events: none; }
+.fl-editor .fl-ta {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  color: transparent; caret-color: var(--nm-mint, #5efbd7); background: transparent; border: 0; outline: 0; resize: none; overflow: hidden;
+}
+.fl-editor .fl-ta::selection { background: rgba(94, 251, 215, 0.28); }
+.fl-editor:focus-within { box-shadow: inset 0 0 0 2px rgba(94, 251, 215, 0.55); }
+
+.fl-actions { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem; background: #1b1a36; border-top: 1px solid rgba(185, 184, 255, 0.2); }
+.mode-output .fl-actions { border-top: 0; background: transparent; padding: 0.35rem 0.6rem; }
+.fl-actions button { font: 600 0.78rem var(--nm-font-head, system-ui, sans-serif); border: 0; border-radius: 999px; padding: 0.3rem 0.95rem; cursor: pointer; }
+.fl-run { background: var(--nm-mint, #5efbd7); color: var(--nm-indigo, #2a2952); }
+.fl-run:disabled { opacity: 0.55; cursor: progress; }
+.fl-reset, .fl-toggle { background: transparent; color: var(--nm-lilac, #b9b8ff); border: 1px solid rgba(185, 184, 255, 0.5) !important; }
+.fl-status { font-size: 0.76rem; color: var(--nm-muted, #b4b3e6); }
+
+.fl-out { border-top: 1px solid rgba(185, 184, 255, 0.2); background: #0e0d18; padding: 0.55rem 1.1rem 0.75rem; }
+.mode-output .fl-out { border-top: 0; }
+.fl-out pre { margin: 0.25rem 0 0; font: 0.84rem/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; color: #c9f5ea; white-space: pre-wrap; max-height: 30vh; overflow: auto; }
+.fl-figs img { display: block; max-width: 100%; max-height: 48vh; margin: 0.5rem auto 0; border-radius: 8px; background: #fff; }
+.fl-err { color: var(--nm-salmon, #fb7a7a); font-size: 0.86rem; margin-top: 0.3rem; }
+.fl-err details { margin-top: 0.25rem; color: var(--nm-muted, #b4b3e6); }
+.fl-err pre { font: 0.74rem/1.5 ui-monospace, Consolas, monospace; color: #f5c1c1; }
+.fl-note { margin: 0 0 0.3rem; font-size: 0.78rem; color: var(--nm-salmon, #fb7a7a); }
+.fl-empty { margin: 0; font-size: 0.8rem; color: var(--nm-muted, #b4b3e6); font-style: italic; }
+
+.tk-c { color: #8b8ac7; font-style: italic; }
+.tk-s { color: var(--nm-mint, #5efbd7); font-style: normal; }
+.tk-k { color: var(--nm-salmon, #fb7a7a); font-style: normal; }
+.tk-n { color: var(--nm-lilac, #b9b8ff); font-style: normal; }
+.tk-f { color: #7cc4ff; font-style: normal; }
+.tk-b { font-style: normal; color: #fff; background: rgba(251, 122, 122, 0.35); border-radius: 4px; }
+
+.is-collapsed .fl-editor { display: none; }