@cfasim-ui/docs 0.6.3 → 0.7.0

package/components/_internal/input.css

@@ -0,0 +1,54 @@
+/* Shared text-field skin for TextInput/NumberInput. Global (not scoped)
+ * so both components can use one copy; prefixed to avoid consumer
+ * collisions. */
+
+.cfasim-input-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  font-size: var(--font-size-sm);
+}
+
+.cfasim-input-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cfasim-input {
+  display: block;
+  width: 100%;
+  height: 2.5em;
+  padding: 0 0.75em;
+  font-size: inherit;
+  background-color: var(--color-bg-0);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.cfasim-input:hover {
+  border-color: var(--color-border-hover);
+}
+
+.cfasim-input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.cfasim-input[aria-invalid="true"] {
+  border-color: var(--color-error);
+}
+
+.cfasim-input[aria-invalid="true"]:focus {
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent);
+}
+
+.cfasim-input::placeholder {
+  color: var(--color-text-tertiary);
+}

package/components/_internal/listbox.css

@@ -0,0 +1,53 @@
+/* Shared skin for the SelectBox/MultiSelect dropdown (reka-ui Select and
+ * Combobox portals render outside the component, so these are global).
+ * Sizing (width/max-height from the reka trigger vars) stays per-component. */
+
+.cfasim-listbox-content {
+  z-index: 100;
+  background: var(--color-bg-0);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.cfasim-listbox-viewport {
+  padding: 0.25em;
+}
+
+.cfasim-listbox-empty {
+  padding: 0.5em;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
+.cfasim-listbox-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.cfasim-listbox-item[data-highlighted] {
+  background: var(--color-primary);
+  color: white;
+}
+
+.cfasim-listbox-item[data-state="checked"] {
+  font-weight: 600;
+}
+
+.cfasim-listbox-indicator {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}

package/components/env.d.ts

@@ -0,0 +1,4 @@
+// Ambient declaration for side-effect CSS imports (e.g. `import "./x.css"`).
+// Required since TypeScript 6, which errors (TS2882) on side-effect imports
+// without a module declaration.
+declare module "*.css";

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.3",
+  "version": "0.7.0",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [
@@ -216,6 +216,13 @@
         "source": "charts/ChoroplethMap/ChoroplethMap.vue",
         "keywords": []
       },
+      {
+        "name": "DataTable",
+        "slug": "data-table",
+        "docs": "charts/DataTable/DataTable.md",
+        "source": "charts/DataTable/DataTable.vue",
+        "keywords": []
+      },
       {
         "name": "LineChart",
         "slug": "line-chart",
@@ -231,13 +238,6 @@
           "confidence band",
           "svg"
         ]
-      },
-      {
-        "name": "DataTable",
-        "slug": "data-table",
-        "docs": "charts/DataTable/DataTable.md",
-        "source": "charts/DataTable/DataTable.vue",
-        "keywords": []
       }
     ]
   }

package/package.json

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

package/pyodide/messages.ts

@@ -0,0 +1,23 @@
+export interface RunMessage {
+  id: number;
+  type?: "run";
+  python: string;
+  context?: Record<string, unknown>;
+}
+export interface CallMessage {
+  id: number;
+  type: "call";
+  module: string;
+  fn: string;
+  kwargs?: Record<string, unknown>;
+}
+export interface LoadModuleMessage {
+  id: number;
+  type: "loadModule";
+  module: string;
+}
+export type WorkerMessage = RunMessage | CallMessage | LoadModuleMessage;
+export type OutgoingMessage =
+  | Omit<RunMessage, "id">
+  | Omit<CallMessage, "id">
+  | Omit<LoadModuleMessage, "id">;

package/pyodide/pyodide.worker.ts

@@ -4,26 +4,7 @@ import {
   postErrorWithTransfer,
 } from "@cfasim-ui/shared/transfer";
 import type { ColumnDescriptor, ModelOutputsWire } from "@cfasim-ui/shared";
-
-interface RunMessage {
-  id: number;
-  type?: "run";
-  python: string;
-  context?: Record<string, unknown>;
-}
-interface CallMessage {
-  id: number;
-  type: "call";
-  module: string;
-  fn: string;
-  kwargs?: Record<string, unknown>;
-}
-interface LoadModuleMessage {
-  id: number;
-  type: "loadModule";
-  module: string;
-}
-type WorkerMessage = RunMessage | CallMessage | LoadModuleMessage;
+import type { WorkerMessage } from "./messages.js";
 
 let wheelMap: Record<string, string> = {};
 
@@ -63,8 +44,8 @@ async function fetchPyodidePackages(): Promise<string[]> {
 
 const pyodideReadyPromise = (async () => {
   const [pyodideModule, packages] = await Promise.all([
-    // @ts-expect-error - Pyodide types from CDN
     import(
+      // @ts-expect-error - Pyodide types from CDN
       /* @vite-ignore */ "https://cdn.jsdelivr.net/pyodide/v0.29.3/full/pyodide.mjs"
     ),
     fetchPyodidePackages(),

package/pyodide/pyodideWorkerApi.ts

@@ -1,53 +1,18 @@
 import type { TransferableResponse } from "@cfasim-ui/shared";
-import { unwrapResponse } from "@cfasim-ui/shared";
+import {
+  unwrapResponse,
+  describeWorkerError,
+  MESSAGEERROR_TEXT,
+} from "@cfasim-ui/shared";
+import type { WorkerMessage, OutgoingMessage } from "./messages.js";
 
 let lastId = 0;
 function getId(): number {
   return ++lastId;
 }
 
-interface RunMessage {
-  id: number;
-  type?: "run";
-  python: string;
-  context?: Record<string, unknown>;
-}
-interface CallMessage {
-  id: number;
-  type: "call";
-  module: string;
-  fn: string;
-  kwargs?: Record<string, unknown>;
-}
-interface LoadModuleMessage {
-  id: number;
-  type: "loadModule";
-  module: string;
-}
-type WorkerMessage = RunMessage | CallMessage | LoadModuleMessage;
-type OutgoingMessage =
-  | Omit<RunMessage, "id">
-  | Omit<CallMessage, "id">
-  | Omit<LoadModuleMessage, "id">;
-
 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)";
-}
-
 /**
  * Worker names are arbitrary string keys. Workers are spawned lazily on first
  * use; each one is an independent Pyodide interpreter. Use distinct names when
@@ -96,9 +61,7 @@ function getWorker(name: string): WorkerEntry {
       failAll(describeWorkerError(e));
     });
     worker.addEventListener("messageerror", () => {
-      failAll(
-        "Worker received a message it could not deserialize (messageerror)",
-      );
+      failAll(MESSAGEERROR_TEXT);
     });
     entry = newEntry;
     workers.set(name, entry);

package/shared/index.ts

@@ -14,6 +14,7 @@ export type {
   ModelOutputsWire,
 } from "./ModelOutput.js";
 export { modelOutputToCSV } from "./csv.js";
+export { describeWorkerError, MESSAGEERROR_TEXT } from "./workerError.js";
 export { formatNumber, isNumberFormat } from "./formatNumber.js";
 export type { NumberFormat, NumberFormatPreset } from "./formatNumber.js";
 export {

package/shared/workerError.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 — or a dynamic CDN import inside it — fails to evaluate);
+ * fall back to a hint about likely causes rather than an empty string.
+ */
+export 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)";
+}
+
+export const MESSAGEERROR_TEXT =
+  "Worker received a message it could not deserialize (messageerror)";

package/wasm/messages.ts

@@ -0,0 +1,6 @@
+export interface WorkerMessage {
+  id: number;
+  model: string;
+  fn: string;
+  args: string[];
+}

package/wasm/wasm.worker.ts

@@ -3,13 +3,7 @@ import {
   postModelOutputsWithTransfer,
   postErrorWithTransfer,
 } from "@cfasim-ui/shared/transfer";
-
-interface WorkerMessage {
-  id: number;
-  model: string;
-  fn: string;
-  args: string[];
-}
+import type { WorkerMessage } from "./messages.js";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const modulePromises = new Map<string, Promise<Record<string, any>>>();

package/wasm/wasmWorkerApi.ts

@@ -1,30 +1,13 @@
 import type { TransferableResponse } from "@cfasim-ui/shared";
-import { unwrapResponse } from "@cfasim-ui/shared";
-
-interface WorkerMessage {
-  id: number;
-  model: string;
-  fn: string;
-  args: string[];
-}
+import {
+  unwrapResponse,
+  describeWorkerError,
+  MESSAGEERROR_TEXT,
+} from "@cfasim-ui/shared";
+import type { WorkerMessage } from "./messages.js";
 
 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.
@@ -40,6 +23,7 @@ function newWorker(): Worker {
     type: "module",
   });
   function failAll(message: string) {
+    if (workerDeadError) return;
     workerDeadError = new Error(message);
     const rejects = Array.from(pendingRejects.values());
     pendingRejects.clear();
@@ -49,9 +33,7 @@ function newWorker(): Worker {
     failAll(describeWorkerError(e));
   });
   w.addEventListener("messageerror", () => {
-    failAll(
-      "Worker received a message it could not deserialize (messageerror)",
-    );
+    failAll(MESSAGEERROR_TEXT);
   });
   return w;
 }