@cfasim-ui/docs 0.4.8 → 0.4.10

package/charts/LineChart/LineChart.md

@@ -355,6 +355,53 @@ floor, and `yMin <= 0` is ignored.
   </template>
 </ComponentDemo>
 
+### Confidence band
+
+Use the `areas` prop to fill a band between two y-series — useful for
+confidence intervals or min/max envelopes around a mean line. Each `Area`
+takes parallel `upper` and `lower` arrays (and an optional `x` array, just
+like `Series`).
+
+<ComponentDemo>
+  <LineChart
+    :data="[0, 4, 8, 15, 22, 30, 28, 20, 12, 5, 2]"
+    :areas="[
+      {
+        upper: [2, 8, 14, 22, 30, 38, 36, 28, 19, 11, 7],
+        lower: [0, 1, 3, 9, 15, 22, 21, 13, 6, 1, 0],
+        color: '#0057b7',
+        opacity: 0.15,
+      },
+    ]"
+    :height="220"
+    x-label="Days"
+    y-label="Cases"
+    tooltip-trigger="hover"
+  />
+
+<template #code>
+
+```vue
+<LineChart
+  :data="mean"
+  :areas="[
+    {
+      upper: ci95Hi,
+      lower: ci95Lo,
+      color: '#0057b7',
+      opacity: 0.15,
+    },
+  ]"
+  :height="220"
+  x-label="Days"
+  y-label="Cases"
+  tooltip-trigger="hover"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
 ### Area sections
 
 Highlight a range of a series line by filling the area between the line and the x-axis. Labels are rendered below the chart and automatically stack when they overlap.
@@ -749,6 +796,18 @@ interface Series {
 }
 ```
 
+### Area
+
+```ts
+interface Area {
+  upper: LineChartData;
+  lower: LineChartData;
+  x?: LineChartData; // optional parallel x-values
+  color?: string;
+  opacity?: number;
+}
+```
+
 ### AreaSection
 
 ```ts

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.8",
+  "version": "0.4.10",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [
@@ -172,6 +172,8 @@
           "time-series",
           "series",
           "axis",
+          "area",
+          "confidence band",
           "svg"
         ]
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {

package/pyodide/pyodide.worker.ts

@@ -2,7 +2,7 @@ import {
   postWithTransfer,
   postModelOutputsWithTransfer,
   postErrorWithTransfer,
-} from "@cfasim-ui/shared";
+} from "@cfasim-ui/shared/transfer";
 import type { ColumnDescriptor, ModelOutputsWire } from "@cfasim-ui/shared";
 
 interface RunMessage {
@@ -231,12 +231,17 @@ function send(id: number, result: unknown) {
   }
 }
 
+// Silence the unhandled-rejection warning if init fails before any message
+// arrives. Each message's onmessage handler still awaits the promise inside
+// its own try/catch, so the rejection is reported back to the caller.
+pyodideReadyPromise.catch(() => {});
+
 self.onmessage = async (event: MessageEvent<WorkerMessage>) => {
-  const pyodide = await pyodideReadyPromise;
   const msg = event.data;
   const { id } = msg;
 
   try {
+    const pyodide = await pyodideReadyPromise;
     if (msg.type === "loadModule") {
       await ensureModule(pyodide, msg.module);
       postWithTransfer(self, id, true);

package/pyodide/pyodideWorkerApi.ts

@@ -30,24 +30,22 @@ type OutgoingMessage =
   | Omit<CallMessage, "id">
   | Omit<LoadModuleMessage, "id">;
 
-function requestResponse(
-  worker: Worker,
-  msg: OutgoingMessage,
-): Promise<{ result?: unknown; error?: string }> {
-  return new Promise((resolve) => {
-    const id = getId();
-    function listener(event: MessageEvent<TransferableResponse>) {
-      if (event.data?.id !== id) return;
-      worker.removeEventListener("message", listener);
-      if (event.data.error) {
-        resolve({ error: event.data.error });
-      } else {
-        resolve({ result: unwrapResponse(event.data) });
-      }
-    }
-    worker.addEventListener("message", listener);
-    worker.postMessage({ id, ...msg } as WorkerMessage);
-  });
+export type PyodideResponse = { result?: unknown; error?: string };
+
+/**
+ * Convert a worker `ErrorEvent` into a human-readable message. Cross-origin
+ * worker failures sanitize the event so every field is null/empty (e.g. a
+ * dynamic `import("https://cdn…")` that fails at module evaluation): in
+ * that case we fall back to a hint about likely causes instead of an
+ * empty string, which would otherwise surface as a blank error.
+ */
+function describeWorkerError(e: ErrorEvent): string {
+  const msg = e.message || e.error?.message || "";
+  if (msg) {
+    if (e.filename) return `${msg} (${e.filename}:${e.lineno})`;
+    return msg;
+  }
+  return "Worker failed to load (no error details available — most often a cross-origin script load failure or a syntax error in the worker module)";
 }
 
 /**
@@ -61,7 +59,11 @@ const DEFAULT_WORKER = "default";
 
 interface WorkerEntry {
   worker: Worker;
-  modules: Map<string, Promise<{ result?: unknown; error?: string }>>;
+  modules: Map<string, Promise<PyodideResponse>>;
+  /** Pending request id → resolver, so a worker-level crash can drain them all. */
+  pending: Map<number, (r: PyodideResponse) => void>;
+  /** Set once the worker has fired an error event — any further call short-circuits to this error. */
+  deadError: string | null;
 }
 
 const workers = new Map<string, WorkerEntry>();
@@ -74,7 +76,31 @@ function getWorker(name: string): WorkerEntry {
     const worker = new Worker(new URL("./pyodide.worker.ts", import.meta.url), {
       type: "module",
     });
-    entry = { worker, modules: new Map() };
+    const newEntry: WorkerEntry = {
+      worker,
+      modules: new Map(),
+      pending: new Map(),
+      deadError: null,
+    };
+    function failAll(message: string) {
+      if (newEntry.deadError) return;
+      newEntry.deadError = message;
+      // Drop cached module promises so a future loadModule on a respawned
+      // worker (if the caller chooses to retry) re-installs.
+      newEntry.modules.clear();
+      const pending = Array.from(newEntry.pending.values());
+      newEntry.pending.clear();
+      for (const resolve of pending) resolve({ error: message });
+    }
+    worker.addEventListener("error", (e: ErrorEvent) => {
+      failAll(describeWorkerError(e));
+    });
+    worker.addEventListener("messageerror", () => {
+      failAll(
+        "Worker received a message it could not deserialize (messageerror)",
+      );
+    });
+    entry = newEntry;
     workers.set(name, entry);
     for (const mod of sharedModules) {
       ensureModuleOn(entry, mod);
@@ -83,13 +109,38 @@ function getWorker(name: string): WorkerEntry {
   return entry;
 }
 
+function requestResponse(
+  entry: WorkerEntry,
+  msg: OutgoingMessage,
+): Promise<PyodideResponse> {
+  if (entry.deadError) {
+    return Promise.resolve({ error: entry.deadError });
+  }
+  return new Promise((resolve) => {
+    const id = getId();
+    entry.pending.set(id, resolve);
+    function listener(event: MessageEvent<TransferableResponse>) {
+      if (event.data?.id !== id) return;
+      entry.worker.removeEventListener("message", listener);
+      entry.pending.delete(id);
+      if (event.data.error) {
+        resolve({ error: event.data.error });
+      } else {
+        resolve({ result: unwrapResponse(event.data) });
+      }
+    }
+    entry.worker.addEventListener("message", listener);
+    entry.worker.postMessage({ id, ...msg } as WorkerMessage);
+  });
+}
+
 function ensureModuleOn(
   entry: WorkerEntry,
   moduleName: string,
-): Promise<{ result?: unknown; error?: string }> {
+): Promise<PyodideResponse> {
   let p = entry.modules.get(moduleName);
   if (!p) {
-    p = requestResponse(entry.worker, {
+    p = requestResponse(entry, {
       type: "loadModule",
       module: moduleName,
     });
@@ -106,9 +157,7 @@ function ensureModuleOn(
  * worker, and on any future worker the moment it spawns. Returns once the
  * default worker has finished installing.
  */
-export async function loadModule(
-  moduleName: string,
-): Promise<{ result?: unknown; error?: string }> {
+export async function loadModule(moduleName: string): Promise<PyodideResponse> {
   sharedModules.add(moduleName);
   // Always install on the default worker — that's what callers expect when
   // the function name has no "OnWorker" suffix.
@@ -129,7 +178,7 @@ export async function loadModule(
 export async function loadModuleOnWorker(
   moduleName: string,
   worker: WorkerName,
-): Promise<{ result?: unknown; error?: string }> {
+): Promise<PyodideResponse> {
   return ensureModuleOn(getWorker(worker), moduleName);
 }
 
@@ -142,8 +191,8 @@ export async function asyncRunPython(
   script: string,
   context?: Record<string, unknown>,
   worker: WorkerName = DEFAULT_WORKER,
-): Promise<{ result?: unknown; error?: string }> {
-  return requestResponse(getWorker(worker).worker, {
+): Promise<PyodideResponse> {
+  return requestResponse(getWorker(worker), {
     type: "run",
     python: script,
     context,
@@ -160,11 +209,11 @@ export async function callPython(
   fn: string,
   kwargs?: Record<string, unknown>,
   worker: WorkerName = DEFAULT_WORKER,
-): Promise<{ result?: unknown; error?: string }> {
+): Promise<PyodideResponse> {
   const entry = getWorker(worker);
   const installResult = await ensureModuleOn(entry, module);
   if (installResult.error) return installResult;
-  return requestResponse(entry.worker, {
+  return requestResponse(entry, {
     type: "call",
     module,
     fn,

package/wasm/wasm.worker.ts

@@ -2,7 +2,7 @@ import {
   postWithTransfer,
   postModelOutputsWithTransfer,
   postErrorWithTransfer,
-} from "@cfasim-ui/shared";
+} from "@cfasim-ui/shared/transfer";
 
 interface WorkerMessage {
   id: number;

package/wasm/wasmWorkerApi.ts

@@ -10,23 +10,62 @@ interface WorkerMessage {
 
 let lastId = 0;
 
+/**
+ * Convert a worker `ErrorEvent` into a human-readable message. Cross-origin
+ * worker failures sanitize the event so every field is null/empty (e.g.
+ * the worker's module fails to evaluate); fall back to a hint rather than
+ * an empty string.
+ */
+function describeWorkerError(e: ErrorEvent): string {
+  const msg = e.message || e.error?.message || "";
+  if (msg) {
+    if (e.filename) return `${msg} (${e.filename}:${e.lineno})`;
+    return msg;
+  }
+  return "Worker failed to load (no error details available — most often a cross-origin script load failure or a syntax error in the worker module)";
+}
+
+// Rejects keyed by request id so `cancelWasm` can fail in-flight promises
+// when we terminate the worker mid-run, and so worker-level errors can drain
+// every pending call at once.
+const pendingRejects = new Map<number, (reason: Error) => void>();
+
+// Set once the worker fires an `error` / `messageerror` event. Subsequent
+// `runWasm` calls short-circuit with this error so the caller sees a real
+// rejection instead of waiting forever on a worker that will never reply.
+let workerDeadError: Error | null = null;
+
 function newWorker(): Worker {
-  return new Worker(new URL("./wasm.worker.ts", import.meta.url), {
+  const w = new Worker(new URL("./wasm.worker.ts", import.meta.url), {
     type: "module",
   });
+  function failAll(message: string) {
+    workerDeadError = new Error(message);
+    const rejects = Array.from(pendingRejects.values());
+    pendingRejects.clear();
+    for (const reject of rejects) reject(workerDeadError);
+  }
+  w.addEventListener("error", (e: ErrorEvent) => {
+    failAll(describeWorkerError(e));
+  });
+  w.addEventListener("messageerror", () => {
+    failAll(
+      "Worker received a message it could not deserialize (messageerror)",
+    );
+  });
+  return w;
 }
 
 let worker = newWorker();
 
-// Rejects keyed by request id so `cancelWasm` can fail in-flight promises
-// when we terminate the worker mid-run.
-const pendingRejects = new Map<number, (reason: Error) => void>();
-
 export function runWasm(
   model: string,
   fn: string,
   ...args: string[]
 ): Promise<unknown> {
+  if (workerDeadError) {
+    return Promise.reject(workerDeadError);
+  }
   return new Promise((resolve, reject) => {
     const id = ++lastId;
     // Capture the current worker so a later `cancelWasm` that swaps the
@@ -63,6 +102,7 @@ export function cancelWasm(): void {
   worker.terminate();
   const rejects = Array.from(pendingRejects.values());
   pendingRejects.clear();
+  workerDeadError = null;
   worker = newWorker();
   for (const reject of rejects) {
     reject(new Error("cancelled"));