@genomicx/ui 0.5.0 → 0.7.0

package/dist/components/FileUpload.d.ts

@@ -0,0 +1,11 @@
+export interface FileUploadProps {
+    files: File[];
+    onFilesChange: (files: File[]) => void;
+    disabled?: boolean;
+    multiple?: boolean;
+    accept?: string;
+    label?: string;
+    hint?: string;
+    filterFn?: (file: File) => boolean;
+}
+export declare function FileUpload({ files, onFilesChange, disabled, multiple, accept, label, hint, filterFn, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,5 @@
+export interface ProgressBarProps {
+    value: number;
+    label?: string;
+}
+export declare function ProgressBar({ value, label }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -5,6 +5,10 @@ export { AppFooter } from './components/AppFooter';
 export { BugReportModal } from './components/BugReportModal';
 export { AppShell } from './components/AppShell';
 export { LogConsole } from './components/LogConsole';
+export { FileUpload } from './components/FileUpload';
+export type { FileUploadProps } from './components/FileUpload';
+export { ProgressBar } from './components/ProgressBar';
+export type { ProgressBarProps } from './components/ProgressBar';
 export { loadWasmModule, createModuleInstance } from './wasm/loader';
 export type { EmscriptenModule, WasmModuleFactory } from './wasm/types';
 export { downloadBlob, downloadText, downloadBuffer } from './utils/download';

package/dist/index.js

@@ -1,18 +1,18 @@
-import { jsxs as o, jsx as e, Fragment as v } from "react/jsx-runtime";
-import { useState as m, useRef as f } from "react";
-import { Link as d } from "react-router-dom";
-import u from "react-hot-toast";
-function p({ disabled: n = !1 }) {
-  const [a, l] = m(
+import { jsxs as l, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { useState as f, useRef as w, useCallback as x } from "react";
+import { Link as g } from "react-router-dom";
+import v from "react-hot-toast";
+function N({ disabled: n = !1 }) {
+  const [a, o] = f(
     () => document.documentElement.getAttribute("data-theme") || "dark"
-  ), t = (c) => {
-    l(c), document.documentElement.setAttribute("data-theme", c), localStorage.setItem("gx-theme", c);
+  ), r = (t) => {
+    o(t), document.documentElement.setAttribute("data-theme", t), localStorage.setItem("gx-theme", t);
   };
-  return /* @__PURE__ */ o("div", { className: `gx-theme-toggle${n ? " disabled" : ""}`, title: n ? "Theme switching disabled" : void 0, children: [
+  return /* @__PURE__ */ l("div", { className: `gx-theme-toggle${n ? " disabled" : ""}`, title: n ? "Theme switching disabled" : void 0, children: [
     /* @__PURE__ */ e(
       "button",
       {
-        onClick: () => !n && t("dark"),
+        onClick: () => !n && r("dark"),
         className: `gx-theme-btn${a === "dark" ? " active" : ""}`,
         "aria-label": "Dark theme",
         disabled: n,
@@ -22,7 +22,7 @@ function p({ disabled: n = !1 }) {
     /* @__PURE__ */ e(
       "button",
       {
-        onClick: () => !n && t("light"),
+        onClick: () => !n && r("light"),
         className: `gx-theme-btn${a === "light" ? " active" : ""}`,
         "aria-label": "Light theme",
         disabled: n,
@@ -31,129 +31,129 @@ function p({ disabled: n = !1 }) {
     )
   ] });
 }
-const N = () => /* @__PURE__ */ o("svg", { className: "gx-nav-logo-icon", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gx-accent)", strokeWidth: "2", children: [
+const y = () => /* @__PURE__ */ l("svg", { className: "gx-nav-logo-icon", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gx-accent)", strokeWidth: "2", children: [
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "6" }),
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "2" })
 ] });
-function k({ appName: n, appSubtitle: a, version: l, icon: t, actions: c, mobileActions: r }) {
-  const [s, i] = m(!1);
-  return /* @__PURE__ */ o("nav", { className: "gx-nav", children: [
-    /* @__PURE__ */ e("div", { className: "gx-nav-inner", children: /* @__PURE__ */ o("div", { className: "gx-nav-row", children: [
-      /* @__PURE__ */ o(d, { to: "/", className: "gx-nav-logo", children: [
-        t ?? /* @__PURE__ */ e(N, {}),
-        /* @__PURE__ */ o("div", { children: [
-          /* @__PURE__ */ o("h1", { className: "gx-nav-logo-name", children: [
+function M({ appName: n, appSubtitle: a, version: o, icon: r, actions: t, mobileActions: i }) {
+  const [s, c] = f(!1);
+  return /* @__PURE__ */ l("nav", { className: "gx-nav", children: [
+    /* @__PURE__ */ e("div", { className: "gx-nav-inner", children: /* @__PURE__ */ l("div", { className: "gx-nav-row", children: [
+      /* @__PURE__ */ l(g, { to: "/", className: "gx-nav-logo", children: [
+        r ?? /* @__PURE__ */ e(y, {}),
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ l("h1", { className: "gx-nav-logo-name", children: [
             n,
-            l && /* @__PURE__ */ o("span", { className: "gx-nav-logo-version", children: [
+            o && /* @__PURE__ */ l("span", { className: "gx-nav-logo-version", children: [
               "v",
-              l
+              o
             ] })
           ] }),
           a && /* @__PURE__ */ e("p", { className: "gx-nav-logo-sub", children: a })
         ] })
       ] }),
-      /* @__PURE__ */ o("div", { className: "gx-nav-desktop", children: [
-        c,
-        /* @__PURE__ */ e(d, { to: "/about", className: "gx-nav-link", children: "About" }),
-        /* @__PURE__ */ o("a", { href: "https://github.com/happykhan", target: "_blank", rel: "noopener noreferrer", className: "gx-nav-link", children: [
+      /* @__PURE__ */ l("div", { className: "gx-nav-desktop", children: [
+        t,
+        /* @__PURE__ */ e(g, { to: "/about", className: "gx-nav-link", children: "About" }),
+        /* @__PURE__ */ l("a", { href: "https://github.com/happykhan", target: "_blank", rel: "noopener noreferrer", className: "gx-nav-link", children: [
           "GitHub",
           /* @__PURE__ */ e("svg", { className: "gx-nav-link-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
         ] }),
-        /* @__PURE__ */ e(p, {})
+        /* @__PURE__ */ e(N, {})
       ] }),
-      /* @__PURE__ */ o("div", { className: "gx-nav-mobile-toggle", children: [
-        /* @__PURE__ */ e(p, {}),
-        /* @__PURE__ */ e("button", { onClick: () => i(!s), className: "gx-nav-hamburger", "aria-label": "Toggle menu", children: s ? /* @__PURE__ */ e("svg", { className: "gx-nav-hamburger-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ e("svg", { className: "gx-nav-hamburger-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }) })
+      /* @__PURE__ */ l("div", { className: "gx-nav-mobile-toggle", children: [
+        /* @__PURE__ */ e(N, {}),
+        /* @__PURE__ */ e("button", { onClick: () => c(!s), className: "gx-nav-hamburger", "aria-label": "Toggle menu", children: s ? /* @__PURE__ */ e("svg", { className: "gx-nav-hamburger-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ e("svg", { className: "gx-nav-hamburger-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }) })
       ] })
     ] }) }),
-    s && /* @__PURE__ */ o("div", { className: "gx-nav-dropdown", children: [
-      r,
-      /* @__PURE__ */ e(d, { to: "/about", onClick: () => i(!1), className: "gx-nav-dropdown-link", children: "About" }),
+    s && /* @__PURE__ */ l("div", { className: "gx-nav-dropdown", children: [
+      i,
+      /* @__PURE__ */ e(g, { to: "/about", onClick: () => c(!1), className: "gx-nav-dropdown-link", children: "About" }),
       /* @__PURE__ */ e("a", { href: "https://github.com/happykhan", target: "_blank", rel: "noopener noreferrer", className: "gx-nav-dropdown-link", children: "GitHub ↗" })
     ] })
   ] });
 }
-const w = [
+const B = [
   "A description of what happened and what you expected",
   "Your input files (if applicable)",
   "Browser name and version",
   "Steps to reproduce the issue"
 ];
-function b({ onClose: n, bugReportEmail: a, bugReportUrl: l, bugReportItems: t }) {
-  const c = t ?? w;
-  return /* @__PURE__ */ e("div", { className: "gx-modal-overlay", onClick: n, children: /* @__PURE__ */ o("div", { className: "gx-modal", onClick: (r) => r.stopPropagation(), children: [
-    /* @__PURE__ */ o("div", { className: "gx-modal-header", children: [
+function C({ onClose: n, bugReportEmail: a, bugReportUrl: o, bugReportItems: r }) {
+  const t = r ?? B;
+  return /* @__PURE__ */ e("div", { className: "gx-modal-overlay", onClick: n, children: /* @__PURE__ */ l("div", { className: "gx-modal", onClick: (i) => i.stopPropagation(), children: [
+    /* @__PURE__ */ l("div", { className: "gx-modal-header", children: [
       /* @__PURE__ */ e("h3", { className: "gx-modal-title", children: "Report a Bug" }),
       /* @__PURE__ */ e("button", { className: "gx-modal-close", onClick: n, "aria-label": "Close", children: "×" })
     ] }),
-    /* @__PURE__ */ o("div", { className: "gx-modal-body", children: [
+    /* @__PURE__ */ l("div", { className: "gx-modal-body", children: [
       /* @__PURE__ */ e("p", { children: "To report a bug, please email the following to:" }),
       /* @__PURE__ */ e("p", { className: "gx-modal-email", children: /* @__PURE__ */ e("a", { href: `mailto:${a}`, children: a }) }),
-      /* @__PURE__ */ o("div", { className: "gx-modal-checklist", children: [
+      /* @__PURE__ */ l("div", { className: "gx-modal-checklist", children: [
         /* @__PURE__ */ e("p", { className: "gx-modal-checklist-title", children: "Please include:" }),
-        /* @__PURE__ */ e("ol", { className: "gx-modal-checklist-items", children: c.map((r, s) => /* @__PURE__ */ e("li", { children: r }, s)) })
+        /* @__PURE__ */ e("ol", { className: "gx-modal-checklist-items", children: t.map((i, s) => /* @__PURE__ */ e("li", { children: i }, s)) })
       ] }),
-      l && /* @__PURE__ */ o("p", { className: "gx-modal-github-hint", children: [
+      o && /* @__PURE__ */ l("p", { className: "gx-modal-github-hint", children: [
         "You can also open an issue on",
         " ",
-        /* @__PURE__ */ e("a", { href: l, target: "_blank", rel: "noopener noreferrer", children: "GitHub" }),
+        /* @__PURE__ */ e("a", { href: o, target: "_blank", rel: "noopener noreferrer", children: "GitHub" }),
         "."
       ] })
     ] })
   ] }) });
 }
-function y({ appName: n = "GenomicX", bugReportEmail: a, bugReportUrl: l, onReportBug: t, bugReportItems: c }) {
-  const [r, s] = m(!1);
-  function i() {
-    a ? s(!0) : t && t();
+function L({ appName: n = "GenomicX", bugReportEmail: a, bugReportUrl: o, onReportBug: r, bugReportItems: t }) {
+  const [i, s] = f(!1);
+  function c() {
+    a ? s(!0) : r && r();
   }
-  return /* @__PURE__ */ o(v, { children: [
-    /* @__PURE__ */ e("footer", { className: "gx-footer", children: /* @__PURE__ */ e("div", { className: "gx-footer-inner", children: /* @__PURE__ */ o("div", { className: "gx-footer-content", children: [
-      /* @__PURE__ */ o("div", { className: "gx-footer-text", children: [
-        /* @__PURE__ */ o("p", { className: "gx-footer-text-title", children: [
+  return /* @__PURE__ */ l(p, { children: [
+    /* @__PURE__ */ e("footer", { className: "gx-footer", children: /* @__PURE__ */ e("div", { className: "gx-footer-inner", children: /* @__PURE__ */ l("div", { className: "gx-footer-content", children: [
+      /* @__PURE__ */ l("div", { className: "gx-footer-text", children: [
+        /* @__PURE__ */ l("p", { className: "gx-footer-text-title", children: [
           n,
           " — Powered by WebAssembly"
         ] }),
         /* @__PURE__ */ e("p", { className: "gx-footer-text-sub", children: "All processing runs locally in your browser — no data leaves your computer" })
       ] }),
-      /* @__PURE__ */ o("div", { className: "gx-footer-links", children: [
+      /* @__PURE__ */ l("div", { className: "gx-footer-links", children: [
         /* @__PURE__ */ e("a", { href: "https://genomicx.org", target: "_blank", rel: "noopener noreferrer", className: "gx-footer-link", children: "genomicx.org" }),
-        (a || l || t) && /* @__PURE__ */ e("button", { onClick: i, className: "gx-footer-link", children: "Report Bug" })
+        (a || o || r) && /* @__PURE__ */ e("button", { onClick: c, className: "gx-footer-link", children: "Report Bug" })
       ] })
     ] }) }) }),
-    r && a && /* @__PURE__ */ e(
-      b,
+    i && a && /* @__PURE__ */ e(
+      C,
       {
         onClose: () => s(!1),
         bugReportEmail: a,
-        bugReportUrl: l,
-        bugReportItems: c
+        bugReportUrl: o,
+        bugReportItems: t
       }
     )
   ] });
 }
-function T({ children: n, onReportBug: a, ...l }) {
-  return /* @__PURE__ */ o("div", { style: { minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--gx-bg)" }, children: [
-    /* @__PURE__ */ e(k, { ...l }),
+function W({ children: n, onReportBug: a, ...o }) {
+  return /* @__PURE__ */ l("div", { style: { minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--gx-bg)" }, children: [
+    /* @__PURE__ */ e(M, { ...o }),
     /* @__PURE__ */ e("main", { style: { flex: 1 }, children: n }),
-    /* @__PURE__ */ e(y, { appName: l.appName, onReportBug: a })
+    /* @__PURE__ */ e(L, { appName: o.appName, onReportBug: a })
   ] });
 }
-function j({ logs: n, progress: a, title: l = "Console" }) {
-  const t = f(null), c = () => {
+function H({ logs: n, progress: a, title: o = "Console" }) {
+  const r = w(null), t = () => {
     navigator.clipboard.writeText(n.join(`
 `)).then(() => {
-      u.success("Logs copied to clipboard!");
+      v.success("Logs copied to clipboard!");
     }).catch(() => {
-      u.error("Failed to copy logs");
+      v.error("Failed to copy logs");
     });
-  }, r = a && a.step !== "idle" && a.step !== "Complete!";
-  return /* @__PURE__ */ o("div", { className: "gx-console", children: [
-    r && /* @__PURE__ */ o("div", { className: "gx-console-progress", children: [
-      /* @__PURE__ */ o("div", { className: "gx-console-progress-row", children: [
+  }, i = a && a.step !== "idle" && a.step !== "Complete!";
+  return /* @__PURE__ */ l("div", { className: "gx-console", children: [
+    i && /* @__PURE__ */ l("div", { className: "gx-console-progress", children: [
+      /* @__PURE__ */ l("div", { className: "gx-console-progress-row", children: [
         /* @__PURE__ */ e("span", { className: "gx-console-progress-step", children: a.step }),
-        /* @__PURE__ */ o("span", { className: "gx-console-progress-pct", children: [
+        /* @__PURE__ */ l("span", { className: "gx-console-progress-pct", children: [
           a.percent,
           "%"
         ] })
@@ -161,68 +161,155 @@ function j({ logs: n, progress: a, title: l = "Console" }) {
       /* @__PURE__ */ e("div", { className: "progress-bg", children: /* @__PURE__ */ e("div", { className: "progress-bar", style: { width: `${a.percent}%` } }) }),
       a.message && /* @__PURE__ */ e("div", { className: "gx-console-progress-msg", children: a.message })
     ] }),
-    /* @__PURE__ */ o("div", { className: "gx-console-header", children: [
-      /* @__PURE__ */ o("div", { className: "gx-console-title-row", children: [
-        /* @__PURE__ */ e("h3", { className: "gx-console-title", children: l }),
-        /* @__PURE__ */ o("span", { className: "gx-console-count", children: [
+    /* @__PURE__ */ l("div", { className: "gx-console-header", children: [
+      /* @__PURE__ */ l("div", { className: "gx-console-title-row", children: [
+        /* @__PURE__ */ e("h3", { className: "gx-console-title", children: o }),
+        /* @__PURE__ */ l("span", { className: "gx-console-count", children: [
           "(",
           n.length,
           " messages)"
         ] })
       ] }),
-      /* @__PURE__ */ o("button", { onClick: c, className: "gx-console-copy", disabled: n.length === 0, children: [
+      /* @__PURE__ */ l("button", { onClick: t, className: "gx-console-copy", disabled: n.length === 0, children: [
         /* @__PURE__ */ e("svg", { className: "gx-console-copy-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
         "Copy"
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { ref: t, className: "gx-console-body", children: n.length === 0 ? /* @__PURE__ */ e("div", { className: "gx-console-empty", children: "No logs yet..." }) : n.map((s, i) => /* @__PURE__ */ e("div", { className: "gx-console-line", children: s }, i)) })
+    /* @__PURE__ */ e("div", { ref: r, className: "gx-console-body", children: n.length === 0 ? /* @__PURE__ */ e("div", { className: "gx-console-empty", children: "No logs yet..." }) : n.map((s, c) => /* @__PURE__ */ e("div", { className: "gx-console-line", children: s }, c)) })
   ] });
 }
-const M = "https://static.genomicx.org/wasm", h = /* @__PURE__ */ new Map();
-async function C(n, a = M) {
-  const l = `${a}/${n}`;
-  if (h.has(l)) return h.get(l);
-  const [t, c] = await Promise.all([
+function R({
+  files: n,
+  onFilesChange: a,
+  disabled: o = !1,
+  multiple: r = !0,
+  accept: t = ".fasta,.fa,.fna,.fsa,.fasta.gz,.fa.gz,.fna.gz",
+  label: i = "Drop files here or click to browse",
+  hint: s,
+  filterFn: c
+}) {
+  const m = x(
+    (d) => {
+      if (!d.target.files) return;
+      let h = Array.from(d.target.files);
+      c && (h = h.filter(c)), h.length > 0 && a(h);
+    },
+    [a, c]
+  ), b = x(
+    (d) => {
+      if (d.preventDefault(), !d.dataTransfer.files) return;
+      let h = Array.from(d.dataTransfer.files);
+      c && (h = h.filter(c)), h.length > 0 && a(h);
+    },
+    [a, c]
+  );
+  return /* @__PURE__ */ e("div", { className: "gx-file-upload", onDrop: b, onDragOver: (d) => d.preventDefault(), children: /* @__PURE__ */ l("label", { className: "gx-file-upload-area", children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "file",
+        multiple: r,
+        accept: t,
+        onChange: m,
+        disabled: o
+      }
+    ),
+    /* @__PURE__ */ l(
+      "svg",
+      {
+        className: "gx-file-upload-icon",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ e("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+          /* @__PURE__ */ e("polyline", { points: "17 8 12 3 7 8" }),
+          /* @__PURE__ */ e("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+        ]
+      }
+    ),
+    n.length === 0 ? /* @__PURE__ */ l(p, { children: [
+      /* @__PURE__ */ e("div", { className: "gx-file-upload-label", children: i }),
+      s && /* @__PURE__ */ e("div", { className: "gx-file-upload-hint", children: s })
+    ] }) : /* @__PURE__ */ l(p, { children: [
+      /* @__PURE__ */ l("div", { className: "gx-file-upload-label", children: [
+        n.length,
+        " file",
+        n.length !== 1 ? "s" : "",
+        " selected"
+      ] }),
+      /* @__PURE__ */ e("ul", { className: "gx-file-list", children: n.map((d) => /* @__PURE__ */ e("li", { children: d.name }, d.name)) })
+    ] })
+  ] }) });
+}
+function _({ value: n, label: a }) {
+  const o = Math.min(100, Math.max(0, n));
+  return /* @__PURE__ */ l("div", { className: "gx-progress-wrap", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "progress-bg",
+        role: "progressbar",
+        "aria-valuenow": Math.round(o),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        children: /* @__PURE__ */ e("div", { className: "progress-bar", style: { width: `${o}%` } })
+      }
+    ),
+    a && /* @__PURE__ */ e("p", { className: "gx-progress-label", children: a })
+  ] });
+}
+const A = "https://static.genomicx.org/wasm", u = /* @__PURE__ */ new Map();
+async function $(n, a = A) {
+  const o = `${a}/${n}`;
+  if (u.has(o)) return u.get(o);
+  const [r, t] = await Promise.all([
     fetch(`${a}/${n}.js`),
     fetch(`${a}/${n}.wasm`)
   ]);
-  if (!t.ok) throw new Error(`Failed to fetch ${n}.js: ${t.status}`);
-  if (!c.ok) throw new Error(`Failed to fetch ${n}.wasm: ${c.status}`);
-  const [r, s] = await Promise.all([
-    t.text(),
-    c.arrayBuffer()
-  ]), g = { factory: new Function("Module", r + "; return Module;")({}), wasmBinary: s };
-  return h.set(l, g), g;
+  if (!r.ok) throw new Error(`Failed to fetch ${n}.js: ${r.status}`);
+  if (!t.ok) throw new Error(`Failed to fetch ${n}.wasm: ${t.status}`);
+  const [i, s] = await Promise.all([
+    r.text(),
+    t.arrayBuffer()
+  ]), m = { factory: new Function("Module", i + "; return Module;")({}), wasmBinary: s };
+  return u.set(o, m), m;
 }
-async function z(n, a) {
-  const { factory: l, wasmBinary: t } = await C(n, a), c = [], r = [], s = await l({
-    wasmBinary: t.slice(0),
-    print: (i) => c.push(i),
-    printErr: (i) => r.push(i),
+async function S(n, a) {
+  const { factory: o, wasmBinary: r } = await $(n, a), t = [], i = [], s = await o({
+    wasmBinary: r.slice(0),
+    print: (c) => t.push(c),
+    printErr: (c) => i.push(c),
     noInitialRun: !0
   });
-  return s._stdout = c, s._stderr = r, s;
+  return s._stdout = t, s._stderr = i, s;
 }
-function x(n, a) {
-  const l = URL.createObjectURL(n), t = document.createElement("a");
-  t.href = l, t.download = a, t.click(), URL.revokeObjectURL(l);
+function k(n, a) {
+  const o = URL.createObjectURL(n), r = document.createElement("a");
+  r.href = o, r.download = a, r.click(), URL.revokeObjectURL(o);
 }
-function R(n, a, l = "text/plain") {
-  x(new Blob([n], { type: l }), a);
+function E(n, a, o = "text/plain") {
+  k(new Blob([n], { type: o }), a);
 }
-function W(n, a) {
-  x(new Blob([n]), a);
+function I(n, a) {
+  k(new Blob([n]), a);
 }
 export {
-  y as AppFooter,
-  T as AppShell,
-  b as BugReportModal,
-  j as LogConsole,
-  k as NavBar,
-  p as ThemeToggle,
-  z as createModuleInstance,
-  x as downloadBlob,
-  W as downloadBuffer,
-  R as downloadText,
-  C as loadWasmModule
+  L as AppFooter,
+  W as AppShell,
+  C as BugReportModal,
+  R as FileUpload,
+  H as LogConsole,
+  M as NavBar,
+  _ as ProgressBar,
+  N as ThemeToggle,
+  S as createModuleInstance,
+  k as downloadBlob,
+  I as downloadBuffer,
+  E as downloadText,
+  $ as loadWasmModule
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genomicx/ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Shared UI components, styles, and WASM loader for GenomicX tools",
   "type": "module",
   "main": "./dist/index.js",

package/src/styles/components.css

@@ -357,17 +357,44 @@ code {
 }
 .btn-secondary:hover { border-color: var(--gx-accent); color: var(--gx-accent); }
 
-.input-field {
+.input-field,
+.gx-input,
+.gx-select {
   background: var(--gx-bg);
   border: 1px solid var(--gx-border);
   color: var(--gx-text);
   border-radius: 6px;
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
+  font-family: inherit;
   transition: border-color var(--gx-transition);
   outline: none;
 }
-.input-field:focus { border-color: var(--gx-accent); }
+.input-field:focus,
+.gx-input:focus,
+.gx-select:focus { border-color: var(--gx-accent); box-shadow: 0 0 0 3px var(--gx-accent-dim); }
+
+/* ── gx-btn variants ─────────────────────────── */
+.gx-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 0.875rem;
+  padding: 0.6rem 1.25rem;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  transition: all var(--gx-transition);
+}
+.gx-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.gx-btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
+.gx-btn-primary { background: var(--gx-accent); color: var(--gx-text-inverted); }
+.gx-btn-primary:hover:not(:disabled) { background: var(--gx-accent-hover); }
+.gx-btn-secondary { background: transparent; color: var(--gx-text); border: 1px solid var(--gx-border); }
+.gx-btn-secondary:hover:not(:disabled) { border-color: var(--gx-accent); color: var(--gx-accent); }
 
 .label {
   display: block;
@@ -490,3 +517,76 @@ code {
   margin: 0;
 }
 .gx-modal-github-hint a { color: var(--gx-accent); text-decoration: underline; }
+
+/* ── FileUpload ──────────────────────────────── */
+.gx-file-upload {
+  width: 100%;
+}
+
+.gx-file-upload-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 140px;
+  border: 2px dashed var(--gx-border);
+  border-radius: var(--gx-radius-lg);
+  padding: 1.5rem;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+  background: var(--gx-bg-alt);
+}
+
+.gx-file-upload-area:hover {
+  border-color: var(--gx-accent);
+  background: var(--gx-accent-dim);
+}
+
+.gx-file-upload-area input[type="file"] {
+  display: none;
+}
+
+.gx-file-upload-icon {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 0.75rem;
+  color: var(--gx-accent);
+  opacity: 0.8;
+}
+
+.gx-file-upload-label {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--gx-text);
+  margin-bottom: 0.25rem;
+}
+
+.gx-file-upload-hint {
+  font-size: 0.8rem;
+  color: var(--gx-text-muted);
+}
+
+.gx-file-list {
+  list-style: none;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  font-size: 0.85rem;
+  color: var(--gx-text-muted);
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+/* ── ProgressBar ─────────────────────────────── */
+.gx-progress-wrap {
+  width: 100%;
+}
+
+.gx-progress-label {
+  margin: 0.5rem 0 0;
+  font-size: 0.85rem;
+  color: var(--gx-text-muted);
+}

package/src/styles/tokens.css

@@ -16,6 +16,7 @@
   --gx-success: #0d9488;
   --gx-warning: #F59E0B;
   --gx-error: #EF4444;
+  --gx-accent-dim: rgba(13, 148, 136, 0.1);
   --gx-nav-bg: rgba(255, 255, 255, 0.9);
   --gx-code-bg: #f1f5f9;
   --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -23,6 +24,7 @@
   --gx-max-width: 1280px;
   --gx-radius: 8px;
   --gx-radius-lg: 12px;
+  --gx-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
 }
 
 [data-theme="dark"] {
@@ -39,6 +41,7 @@
   --gx-accent: #2dd4bf;
   --gx-accent-hover: #14b8a6;
   --gx-indigo: #818cf8;
+  --gx-accent-dim: rgba(45, 212, 191, 0.12);
   --gx-nav-bg: rgba(15, 23, 42, 0.9);
   --gx-code-bg: #0f172a;
   --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);