@cfasim-ui/docs 0.3.11

package/components/TextInput/TextInput.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Hint from "../Hint/Hint.vue";
+
+const model = defineModel<string>();
+const local = ref(model.value);
+
+watch(model, (v) => {
+  local.value = v;
+});
+
+function commit() {
+  model.value = local.value;
+}
+
+const props = defineProps<{
+  label?: string;
+  hideLabel?: boolean;
+  placeholder?: string;
+  hint?: string;
+}>();
+</script>
+
+<template>
+  <label v-if="props.label" class="input-label">
+    <span
+      class="input-label-row"
+      :class="{ 'visually-hidden': props.hideLabel }"
+    >
+      {{ props.label }}
+      <Hint v-if="props.hint && !props.hideLabel" :text="props.hint" />
+    </span>
+    <input
+      type="text"
+      v-model="local"
+      :placeholder="props.placeholder"
+      @blur="commit"
+      @keydown.enter="commit"
+    />
+  </label>
+  <div v-else>
+    <input
+      type="text"
+      v-model="local"
+      :placeholder="props.placeholder"
+      @blur="commit"
+      @keydown.enter="commit"
+    />
+  </div>
+</template>
+
+<style scoped>
+.input-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  font-size: var(--font-size-sm);
+}
+
+.input-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+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);
+}
+
+input:hover {
+  border-color: var(--color-border-hover);
+}
+
+input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+input::placeholder {
+  color: var(--color-text-tertiary);
+}
+</style>

package/components/Toggle/Toggle.md

@@ -0,0 +1,81 @@
+# Toggle
+
+A boolean switch built on reka-ui.
+
+## Examples
+
+<script setup>
+import { ref } from 'vue'
+const enabled = ref(false)
+const disabled = ref(true)
+</script>
+
+### Basic
+
+<ComponentDemo>
+  <Toggle v-model="enabled" label="Enable vaccination" />
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const enabled = ref(false);
+</script>
+
+<Toggle v-model="enabled" label="Enable vaccination" />
+```
+
+  </template>
+</ComponentDemo>
+
+### With hint
+
+<ComponentDemo>
+  <Toggle
+    v-model="enabled"
+    label="Enable isolation"
+    hint="Whether symptomatic individuals are isolated"
+  />
+
+<template #code>
+
+```vue
+<Toggle
+  v-model="enabled"
+  label="Enable isolation"
+  hint="Whether symptomatic individuals are isolated"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Disabled
+
+<ComponentDemo>
+  <Toggle v-model="disabled" label="Locked setting" :disabled="true" />
+
+<template #code>
+
+```vue
+<Toggle v-model="value" label="Locked setting" :disabled="true" />
+```
+
+  </template>
+</ComponentDemo>
+
+## Model
+
+| Name | Type |
+|------|------|
+| `v-model` | `boolean` |
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `label` | `string` | Yes | — |
+| `hint` | `string` | No | — |
+| `disabled` | `boolean` | No | — |
+

package/components/Toggle/Toggle.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb, useId } from "reka-ui";
+import Hint from "../Hint/Hint.vue";
+
+const model = defineModel<boolean>();
+
+const props = defineProps<{
+  label: string;
+  hint?: string;
+  disabled?: boolean;
+}>();
+
+const id = useId();
+</script>
+
+<template>
+  <div class="toggle">
+    <label :for="id">{{ label }}</label>
+    <Hint v-if="props.hint" :text="props.hint" />
+    <SwitchRoot :id="id" v-model="model" :disabled="disabled" class="switch">
+      <SwitchThumb class="thumb" />
+    </SwitchRoot>
+  </div>
+</template>
+
+<style scoped>
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.toggle label {
+  user-select: none;
+}
+
+.switch {
+  --switch-w: 2.25em;
+  --switch-h: 1.25em;
+  --thumb-size: 1em;
+  --thumb-offset: 0.125em;
+
+  position: relative;
+  width: var(--switch-w);
+  height: var(--switch-h);
+  flex-shrink: 0;
+  background: var(--color-border-hover);
+  border-radius: var(--switch-h);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.switch[data-state="checked"] {
+  background: var(--color-primary);
+}
+
+.switch[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.thumb {
+  display: block;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  background: white;
+  border-radius: 50%;
+  position: absolute;
+  top: var(--thumb-offset);
+  left: var(--thumb-offset);
+  transition: transform 0.15s;
+}
+
+.switch[data-state="checked"] .thumb {
+  transform: translateX(
+    calc(var(--switch-w) - var(--thumb-size) - var(--thumb-offset) * 2)
+  );
+}
+</style>

package/components/index.ts

@@ -0,0 +1,15 @@
+export { default as Box } from "./Box/Box.vue";
+export type { BoxVariant } from "./Box/Box.vue";
+export { default as Button } from "./Button/Button.vue";
+export { default as Expander } from "./Expander/Expander.vue";
+export { default as Hint } from "./Hint/Hint.vue";
+export { default as Icon } from "./Icon/Icon.vue";
+export { default as LightDarkToggle } from "./LightDarkToggle/LightDarkToggle.vue";
+export { default as NumberInput } from "./NumberInput/NumberInput.vue";
+export { default as SelectBox } from "./SelectBox/SelectBox.vue";
+export type { SelectOption } from "./SelectBox/SelectBox.vue";
+export { default as SidebarLayout } from "./SidebarLayout/SidebarLayout.vue";
+export type { Tab } from "./SidebarLayout/SidebarLayout.vue";
+export { default as Spinner } from "./Spinner/Spinner.vue";
+export { default as TextInput } from "./TextInput/TextInput.vue";
+export { default as Toggle } from "./Toggle/Toggle.vue";

package/index.json

@@ -0,0 +1,121 @@
+{
+  "version": "0.3.11",
+  "package": "@cfasim-ui/docs",
+  "content": {
+    "components": [
+      {
+        "name": "Box",
+        "slug": "box",
+        "docs": "components/Box/Box.md",
+        "source": "components/Box/Box.vue",
+        "keywords": []
+      },
+      {
+        "name": "Button",
+        "slug": "button",
+        "docs": "components/Button/Button.md",
+        "source": "components/Button/Button.vue",
+        "keywords": [
+          "button",
+          "click",
+          "action",
+          "primary",
+          "secondary"
+        ]
+      },
+      {
+        "name": "Expander",
+        "slug": "expander",
+        "docs": "components/Expander/Expander.md",
+        "source": "components/Expander/Expander.vue",
+        "keywords": []
+      },
+      {
+        "name": "Hint",
+        "slug": "hint",
+        "docs": "components/Hint/Hint.md",
+        "source": "components/Hint/Hint.vue",
+        "keywords": []
+      },
+      {
+        "name": "Icon",
+        "slug": "icon",
+        "docs": "components/Icon/Icon.md",
+        "source": "components/Icon/Icon.vue",
+        "keywords": []
+      },
+      {
+        "name": "NumberInput",
+        "slug": "number-input",
+        "docs": "components/NumberInput/NumberInput.md",
+        "source": "components/NumberInput/NumberInput.vue",
+        "keywords": []
+      },
+      {
+        "name": "SelectBox",
+        "slug": "select-box",
+        "docs": "components/SelectBox/SelectBox.md",
+        "source": "components/SelectBox/SelectBox.vue",
+        "keywords": []
+      },
+      {
+        "name": "SidebarLayout",
+        "slug": "sidebar-layout",
+        "docs": "components/SidebarLayout/SidebarLayout.md",
+        "source": "components/SidebarLayout/SidebarLayout.vue",
+        "keywords": []
+      },
+      {
+        "name": "Spinner",
+        "slug": "spinner",
+        "docs": "components/Spinner/Spinner.md",
+        "source": "components/Spinner/Spinner.vue",
+        "keywords": []
+      },
+      {
+        "name": "TextInput",
+        "slug": "text-input",
+        "docs": "components/TextInput/TextInput.md",
+        "source": "components/TextInput/TextInput.vue",
+        "keywords": []
+      },
+      {
+        "name": "Toggle",
+        "slug": "toggle",
+        "docs": "components/Toggle/Toggle.md",
+        "source": "components/Toggle/Toggle.vue",
+        "keywords": []
+      }
+    ],
+    "charts": [
+      {
+        "name": "ChoroplethMap",
+        "slug": "choropleth-map",
+        "docs": "charts/ChoroplethMap/ChoroplethMap.md",
+        "source": "charts/ChoroplethMap/ChoroplethMap.vue",
+        "keywords": []
+      },
+      {
+        "name": "LineChart",
+        "slug": "line-chart",
+        "docs": "charts/LineChart/LineChart.md",
+        "source": "charts/LineChart/LineChart.vue",
+        "keywords": [
+          "line",
+          "chart",
+          "time-series",
+          "series",
+          "axis",
+          "svg"
+        ]
+      },
+      {
+        "name": "DataTable",
+        "slug": "data-table",
+        "docs": "charts/DataTable/DataTable.md",
+        "source": "charts/DataTable/DataTable.vue",
+        "keywords": []
+      }
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@cfasim-ui/docs",
+  "version": "0.3.11",
+  "description": "LLM-friendly component and chart documentation for cfasim-ui",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CDCgov/cfa-simulator.git",
+    "directory": "cfasim-ui/docs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "index.json",
+    "components",
+    "charts",
+    "shared",
+    "pyodide",
+    "wasm",
+    "theme"
+  ],
+  "scripts": {}
+}

package/pyodide/index.ts

@@ -0,0 +1,7 @@
+export {
+  asyncRunPython,
+  loadModule,
+  loadModuleOnWorker,
+  type WorkerName,
+} from "./pyodideWorkerApi.js";
+export { useModel } from "./useModel.js";

package/pyodide/pyodide.worker.ts

@@ -0,0 +1,233 @@
+import {
+  postWithTransfer,
+  postModelOutputsWithTransfer,
+  postErrorWithTransfer,
+} from "@cfasim-ui/shared";
+import type { ColumnDescriptor, ModelOutputsWire } from "@cfasim-ui/shared";
+
+interface WorkerMessage {
+  id: number;
+  type?: "run" | "loadModule";
+  python?: string;
+  module?: string;
+  context?: Record<string, unknown>;
+}
+
+let wheelMap: Record<string, string> = {};
+
+const baseUrl = import.meta.env.BASE_URL ?? "/";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let micropip: any;
+
+const pyodideReadyPromise = (async () => {
+  // @ts-expect-error - Pyodide types from CDN
+  const { loadPyodide } = await import(
+    /* @vite-ignore */ "https://cdn.jsdelivr.net/pyodide/v0.29.3/full/pyodide.mjs"
+  );
+  // Load micropip and numpy in parallel with Pyodide bootstrap
+  const pyodide = await loadPyodide({
+    packages: ["micropip", "numpy"],
+  });
+
+  micropip = pyodide.pyimport("micropip");
+
+  // Build module→wheel lookup but don't install yet
+  const res = await fetch(`${self.location.origin}${baseUrl}wheels.json`);
+  const wheelFiles: string[] = await res.json();
+  for (const filename of wheelFiles) {
+    const moduleName = filename.split("-")[0];
+    wheelMap[moduleName] = filename;
+  }
+
+  return pyodide;
+})();
+
+let installPromise: Promise<void> | null = null;
+
+function installAllWheels(): Promise<void> {
+  if (!installPromise) {
+    installPromise = (async () => {
+      const urls = Object.values(wheelMap).map(
+        (f) => `${self.location.origin}${baseUrl}${f}`,
+      );
+      if (urls.length > 0) {
+        await micropip.install(urls);
+      }
+    })();
+    installPromise.catch(() => {
+      installPromise = null;
+    });
+  }
+  return installPromise;
+}
+
+const modulePromises = new Map<string, Promise<void>>();
+
+function ensureModule(
+  pyodide: Awaited<typeof pyodideReadyPromise>,
+  moduleName: string,
+): Promise<void> {
+  if (!modulePromises.has(moduleName)) {
+    if (!wheelMap[moduleName]) throw new Error(`Unknown module: ${moduleName}`);
+    const promise = (async () => {
+      await installAllWheels();
+      pyodide.pyimport(moduleName);
+    })();
+    promise.catch(() => {
+      modulePromises.delete(moduleName);
+    });
+    modulePromises.set(moduleName, promise);
+  }
+  return modulePromises.get(moduleName)!;
+}
+
+// Map Python struct format characters to TypedArray constructors
+const FORMAT_TO_TYPED_ARRAY: Record<
+  string,
+  new (buffer: ArrayBuffer) => ArrayBufferView
+> = {
+  b: Int8Array,
+  B: Uint8Array,
+  h: Int16Array,
+  H: Uint16Array,
+  i: Int32Array,
+  I: Uint32Array,
+  f: Float32Array,
+  d: Float64Array,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractNumpyBuffer(proxy: any): ArrayBuffer {
+  const pyBuffer = proxy.getBuffer();
+  const Ctor = FORMAT_TO_TYPED_ARRAY[pyBuffer.format] ?? Float64Array;
+  const typed = new Ctor(
+    pyBuffer.data.buffer.slice(
+      pyBuffer.data.byteOffset,
+      pyBuffer.data.byteOffset + pyBuffer.data.byteLength,
+    ),
+  );
+  pyBuffer.release();
+  return typed.buffer as ArrayBuffer;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function convertModelOutputs(jsResult: any): ModelOutputsWire | null {
+  if (!jsResult || typeof jsResult !== "object" || !jsResult.__modelOutputs) {
+    return null;
+  }
+
+  const outputs: ModelOutputsWire["outputs"] = {};
+  for (const [key, outputProxy] of Object.entries(
+    jsResult.outputs as Record<string, Record<string, unknown>>,
+  )) {
+    const wire = outputProxy as {
+      length: number;
+      columns: { name: string; type: string; enumLabels?: string[] }[];
+      buffers: unknown[];
+    };
+
+    const buffers: ArrayBuffer[] = [];
+    for (const buf of wire.buffers) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (buf && typeof buf === "object" && (buf as any).getBuffer) {
+        buffers.push(extractNumpyBuffer(buf));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if ((buf as any).destroy) (buf as any).destroy();
+      } else if (buf instanceof ArrayBuffer) {
+        buffers.push(buf);
+      } else if (ArrayBuffer.isView(buf)) {
+        buffers.push(
+          buf.buffer.slice(
+            buf.byteOffset,
+            buf.byteOffset + buf.byteLength,
+          ) as ArrayBuffer,
+        );
+      }
+    }
+
+    outputs[key] = {
+      __modelOutput: true,
+      length: wire.length,
+      columns: wire.columns as ColumnDescriptor[],
+      buffers,
+    };
+  }
+
+  return { __modelOutputs: true, outputs };
+}
+
+self.onmessage = async (event: MessageEvent<WorkerMessage>) => {
+  const pyodide = await pyodideReadyPromise;
+  const { id, type, python, module: moduleName, context } = event.data;
+
+  try {
+    if (type === "loadModule" && moduleName) {
+      await ensureModule(pyodide, moduleName);
+      postWithTransfer(self, id, true);
+      return;
+    }
+
+    let globals;
+    if (context) {
+      const dict = pyodide.globals.get("dict");
+      globals = dict(Object.entries(context));
+    }
+
+    const t0 = performance.now();
+
+    // Use synchronous runPython (models don't use top-level await)
+    const rawResult = pyodide.runPython(
+      python!,
+      globals ? { globals } : undefined,
+    );
+
+    const tPython = performance.now();
+
+    // Destroy PyProxy if returned to prevent memory leaks
+    let result = rawResult;
+    if (rawResult && typeof rawResult === "object" && rawResult.destroy) {
+      if (rawResult.toJs) {
+        result = rawResult.toJs({ dict_converter: Object.fromEntries });
+      } else if (rawResult.getBuffer) {
+        // Single numpy array: use getBuffer() for direct typed array access
+        const pyBuffer = rawResult.getBuffer();
+        const Ctor = FORMAT_TO_TYPED_ARRAY[pyBuffer.format] ?? Float64Array;
+        result = new Ctor(
+          pyBuffer.data.buffer.slice(
+            pyBuffer.data.byteOffset,
+            pyBuffer.data.byteOffset + pyBuffer.data.byteLength,
+          ),
+        );
+        pyBuffer.release();
+      } else {
+        result = rawResult.toString();
+      }
+      rawResult.destroy();
+    }
+
+    // Destroy globals proxy if created
+    if (globals && globals.destroy) {
+      globals.destroy();
+    }
+
+    const tConvert = performance.now();
+    const bench = {
+      python_ms: Math.round((tPython - t0) * 10) / 10,
+      convert_ms: Math.round((tConvert - tPython) * 10) / 10,
+    };
+    console.log(
+      `[pyodide-worker] python=${bench.python_ms}ms convert=${bench.convert_ms}ms`,
+    );
+
+    // Check for ModelOutputs wire format
+    const modelOutputs = convertModelOutputs(result);
+    if (modelOutputs) {
+      postModelOutputsWithTransfer(self, id, modelOutputs);
+    } else {
+      postWithTransfer(self, id, result);
+    }
+  } catch (error) {
+    postErrorWithTransfer(self, id, error);
+  }
+};