@genomicx/ui 0.1.0

package/dist/components/AppFooter.d.ts

@@ -0,0 +1,6 @@
+interface AppFooterProps {
+    appName?: string;
+    onReportBug?: () => void;
+}
+export declare function AppFooter({ appName, onReportBug }: AppFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AppShell.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { NavBarProps } from './NavBar';
+interface AppShellProps extends NavBarProps {
+    children: ReactNode;
+    onReportBug?: () => void;
+}
+export declare function AppShell({ children, onReportBug, ...navProps }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LogConsole.d.ts

@@ -0,0 +1,8 @@
+import { ProgressUpdate } from '../types/progress';
+interface LogConsoleProps {
+    logs: string[];
+    progress?: ProgressUpdate;
+    title?: string;
+}
+export declare function LogConsole({ logs, progress, title }: LogConsoleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NavBar.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface NavBarProps {
+    appName: string;
+    appSubtitle?: string;
+    version?: string;
+    /** Extra items in the desktop nav (right side, before theme toggle) */
+    actions?: ReactNode;
+    /** Extra items in the mobile dropdown */
+    mobileActions?: ReactNode;
+}
+export declare function NavBar({ appName, appSubtitle, version, actions, mobileActions }: NavBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ThemeToggle.d.ts

@@ -0,0 +1,3 @@
+export declare function ThemeToggle({ disabled }: {
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { ThemeToggle } from './components/ThemeToggle';
+export { NavBar } from './components/NavBar';
+export type { NavBarProps } from './components/NavBar';
+export { AppFooter } from './components/AppFooter';
+export { AppShell } from './components/AppShell';
+export { LogConsole } from './components/LogConsole';
+export { loadWasmModule, createModuleInstance } from './wasm/loader';
+export type { EmscriptenModule, WasmModuleFactory } from './wasm/types';
+export { downloadBlob, downloadText, downloadBuffer } from './utils/download';
+export type { ProgressUpdate } from './types/progress';

package/dist/index.js

@@ -0,0 +1,233 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useState as h, useRef as f } from "react";
+import { Link as m } from "react-router-dom";
+import u from "react-hot-toast";
+function p({ disabled: t = !1 }) {
+  const [r, a] = h(
+    () => document.documentElement.getAttribute("data-theme") || "light"
+  ), l = (n) => {
+    a(n), document.documentElement.setAttribute("data-theme", n), localStorage.setItem("gx-theme", n);
+  };
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: `flex items-center rounded-full border overflow-hidden text-xs font-medium ${t ? "opacity-40 pointer-events-none" : ""}`,
+      style: { borderColor: "var(--gx-border)" },
+      title: t ? "Theme switching disabled" : void 0,
+      children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => !t && l("dark"),
+            className: "px-3 py-1.5 transition-colors",
+            style: r === "dark" ? { background: "var(--gx-accent)", color: "var(--gx-text-inverted)" } : { color: "var(--gx-text-muted)" },
+            "aria-label": "Dark theme",
+            disabled: t,
+            children: /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("path", { d: "M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" }) })
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => !t && l("light"),
+            className: "px-3 py-1.5 transition-colors",
+            style: r === "light" ? { background: "var(--gx-accent)", color: "var(--gx-text-inverted)" } : { color: "var(--gx-text-muted)" },
+            "aria-label": "Light theme",
+            disabled: t,
+            children: /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("path", { fillRule: "evenodd", d: "M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z", clipRule: "evenodd" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function b({ appName: t, appSubtitle: r, version: a, actions: l, mobileActions: n }) {
+  const [s, c] = h(!1);
+  return /* @__PURE__ */ o("nav", { className: "sticky top-0 z-40", style: { background: "var(--gx-nav-bg)", backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)", borderBottom: "1px solid var(--gx-border)" }, children: [
+    /* @__PURE__ */ e("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ o("div", { className: "flex items-center justify-between h-[60px]", children: [
+      /* @__PURE__ */ o(m, { to: "/", className: "flex items-center gap-3 hover:opacity-90 transition-opacity", children: [
+        /* @__PURE__ */ o("svg", { className: "w-7 h-7", 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" })
+        ] }),
+        /* @__PURE__ */ o("div", { children: [
+          /* @__PURE__ */ o("h1", { className: "text-lg font-bold", style: { color: "var(--gx-text)" }, children: [
+            t,
+            a && /* @__PURE__ */ o("span", { className: "text-xs font-normal ml-1", style: { color: "var(--gx-text-muted)" }, children: [
+              "v",
+              a
+            ] })
+          ] }),
+          r && /* @__PURE__ */ e("p", { className: "text-xs", style: { color: "var(--gx-text-muted)" }, children: r })
+        ] })
+      ] }),
+      /* @__PURE__ */ o("div", { className: "hidden md:flex items-center gap-6", children: [
+        l,
+        /* @__PURE__ */ e(m, { to: "/about", className: "text-sm font-medium transition-colors", style: { color: "var(--gx-text-muted)" }, children: "About" }),
+        /* @__PURE__ */ o(
+          "a",
+          {
+            href: "https://github.com/happykhan",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-sm font-medium transition-colors inline-flex items-center gap-1",
+            style: { color: "var(--gx-text-muted)" },
+            children: [
+              "GitHub",
+              /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5", 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__ */ o("div", { className: "flex md:hidden items-center gap-3", children: [
+        /* @__PURE__ */ e(p, {}),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => c(!s),
+            className: "p-2 rounded",
+            style: { color: "var(--gx-text-muted)" },
+            "aria-label": "Toggle menu",
+            children: s ? /* @__PURE__ */ e("svg", { className: "w-5 h-5", 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: "w-5 h-5", 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: "md:hidden px-4 pb-4 space-y-2", style: { borderTop: "1px solid var(--gx-border)", background: "var(--gx-nav-bg)" }, children: [
+      n,
+      /* @__PURE__ */ e(m, { to: "/about", onClick: () => c(!1), className: "block text-sm py-2 transition-colors", style: { color: "var(--gx-text-muted)" }, children: "About" }),
+      /* @__PURE__ */ o(
+        "a",
+        {
+          href: "https://github.com/happykhan",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1 text-sm py-2 transition-colors",
+          style: { color: "var(--gx-text-muted)" },
+          children: [
+            "GitHub",
+            /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5", 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" }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function y({ appName: t = "GenomicX", onReportBug: r }) {
+  return /* @__PURE__ */ e("footer", { className: "mt-auto py-6", style: { borderTop: "1px solid var(--gx-border)", background: "var(--gx-bg-alt)" }, children: /* @__PURE__ */ e("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ o("div", { className: "flex flex-col md:flex-row justify-between items-center", children: [
+    /* @__PURE__ */ o("div", { className: "text-sm mb-4 md:mb-0", style: { color: "var(--gx-text-muted)" }, children: [
+      /* @__PURE__ */ o("p", { className: "font-semibold", style: { color: "var(--gx-text)" }, children: [
+        t,
+        " — Powered by BLAST & WebAssembly"
+      ] }),
+      /* @__PURE__ */ e("p", { className: "mt-1", children: "All processing runs locally in your browser — no data leaves your computer" })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "flex gap-6 text-sm", children: [
+      /* @__PURE__ */ e("a", { href: "https://genomicx.org", target: "_blank", rel: "noopener noreferrer", className: "transition-colors hover:text-[var(--gx-accent)]", style: { color: "var(--gx-text-muted)" }, children: "genomicx.org" }),
+      r && /* @__PURE__ */ e("button", { onClick: r, className: "transition-colors hover:text-[var(--gx-accent)]", style: { color: "var(--gx-text-muted)" }, children: "Report Bug" })
+    ] })
+  ] }) }) });
+}
+function C({ children: t, onReportBug: r, ...a }) {
+  return /* @__PURE__ */ o("div", { className: "min-h-screen flex flex-col", style: { background: "var(--gx-bg)" }, children: [
+    /* @__PURE__ */ e(b, { ...a }),
+    /* @__PURE__ */ e("main", { className: "flex-1", children: t }),
+    /* @__PURE__ */ e(y, { appName: a.appName, onReportBug: r })
+  ] });
+}
+function j({ logs: t, progress: r, title: a = "Console" }) {
+  const [l, n] = h(!0), s = f(null), c = () => {
+    navigator.clipboard.writeText(t.join(`
+`)).then(() => {
+      u.success("Logs copied to clipboard!");
+    }).catch(() => {
+      u.error("Failed to copy logs");
+    });
+  }, i = r && r.step !== "idle" && r.step !== "Complete!";
+  return /* @__PURE__ */ o("div", { className: "card mt-6", children: [
+    i && /* @__PURE__ */ o("div", { className: "mb-4 pb-4", style: { borderBottom: "1px solid var(--gx-border)" }, children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ e("span", { className: "text-sm font-medium", style: { color: "var(--gx-text)" }, children: r.step }),
+        /* @__PURE__ */ o("span", { className: "text-sm", style: { color: "var(--gx-text-muted)" }, children: [
+          r.percent,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "progress-bg", children: /* @__PURE__ */ e("div", { className: "progress-bar", style: { width: `${r.percent}%` } }) }),
+      r.message && /* @__PURE__ */ e("div", { className: "mt-2 text-xs", style: { color: "var(--gx-text-muted)" }, children: r.message })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e("button", { onClick: () => n(!l), style: { color: "var(--gx-text-muted)" }, children: l ? "▼" : "▶" }),
+        /* @__PURE__ */ e("h3", { className: "font-semibold", style: { color: "var(--gx-text)" }, children: a }),
+        /* @__PURE__ */ o("span", { className: "text-xs", style: { color: "var(--gx-text-muted)" }, children: [
+          "(",
+          t.length,
+          " messages)"
+        ] })
+      ] }),
+      /* @__PURE__ */ o("button", { onClick: c, className: "btn-secondary text-xs px-3 py-1", disabled: t.length === 0, children: [
+        /* @__PURE__ */ e("svg", { className: "w-4 h-4", 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"
+      ] })
+    ] }),
+    l && /* @__PURE__ */ e(
+      "div",
+      {
+        ref: s,
+        className: "font-mono text-xs p-4 rounded max-h-96 overflow-y-auto",
+        style: { background: "var(--gx-code-bg)", color: "var(--gx-accent)", border: "1px solid var(--gx-border)" },
+        children: t.length === 0 ? /* @__PURE__ */ e("div", { style: { color: "var(--gx-text-muted)" }, children: "No logs yet..." }) : t.map((d, g) => /* @__PURE__ */ e("div", { className: "mb-1 whitespace-pre-wrap break-all", children: d }, g))
+      }
+    )
+  ] });
+}
+const k = "https://static.genomicx.org/wasm", x = /* @__PURE__ */ new Map();
+async function N(t, r = k) {
+  const a = `${r}/${t}`;
+  if (x.has(a)) return x.get(a);
+  const [l, n] = await Promise.all([
+    fetch(`${r}/${t}.js`),
+    fetch(`${r}/${t}.wasm`)
+  ]);
+  if (!l.ok) throw new Error(`Failed to fetch ${t}.js: ${l.status}`);
+  if (!n.ok) throw new Error(`Failed to fetch ${t}.wasm: ${n.status}`);
+  const [s, c] = await Promise.all([
+    l.text(),
+    n.arrayBuffer()
+  ]), d = { factory: new Function("Module", s + "; return Module;")({}), wasmBinary: c };
+  return x.set(a, d), d;
+}
+async function A(t, r) {
+  const { factory: a, wasmBinary: l } = await N(t, r), n = [], s = [], c = await a({
+    wasmBinary: l.slice(0),
+    print: (i) => n.push(i),
+    printErr: (i) => s.push(i),
+    noInitialRun: !0
+  });
+  return c._stdout = n, c._stderr = s, c;
+}
+function v(t, r) {
+  const a = URL.createObjectURL(t), l = document.createElement("a");
+  l.href = a, l.download = r, l.click(), URL.revokeObjectURL(a);
+}
+function T(t, r, a = "text/plain") {
+  v(new Blob([t], { type: a }), r);
+}
+function z(t, r) {
+  v(new Blob([t]), r);
+}
+export {
+  y as AppFooter,
+  C as AppShell,
+  j as LogConsole,
+  b as NavBar,
+  p as ThemeToggle,
+  A as createModuleInstance,
+  v as downloadBlob,
+  z as downloadBuffer,
+  T as downloadText,
+  N as loadWasmModule
+};

package/dist/types/progress.d.ts

@@ -0,0 +1,5 @@
+export interface ProgressUpdate {
+    step: string;
+    percent: number;
+    message?: string;
+}

package/dist/utils/download.d.ts

@@ -0,0 +1,6 @@
+/** Trigger a browser file download from a Blob or string. */
+export declare function downloadBlob(blob: Blob, filename: string): void;
+/** Trigger a browser file download from a string. */
+export declare function downloadText(text: string, filename: string, mimeType?: string): void;
+/** Trigger a browser file download from an ArrayBuffer. */
+export declare function downloadBuffer(buffer: ArrayBuffer, filename: string): void;

package/dist/wasm/loader.d.ts

@@ -0,0 +1,15 @@
+import { EmscriptenModule, WasmModuleFactory } from './types';
+interface CachedModule {
+    factory: WasmModuleFactory;
+    wasmBinary: ArrayBuffer;
+}
+/**
+ * Load and cache an Emscripten WASM module by name.
+ * Fetches <name>.js and <name>.wasm from static.genomicx.org.
+ */
+export declare function loadWasmModule(name: string, baseUrl?: string): Promise<CachedModule>;
+/**
+ * Create a fresh Emscripten module instance (captures its own stdout/stderr).
+ */
+export declare function createModuleInstance(name: string, baseUrl?: string): Promise<EmscriptenModule>;
+export {};

package/dist/wasm/types.d.ts

@@ -0,0 +1,18 @@
+export interface EmscriptenModule {
+    callMain: (args: string[]) => void;
+    FS: {
+        writeFile: (path: string, data: string | Uint8Array) => void;
+        readFile: (path: string) => Uint8Array;
+        unlink: (path: string) => void;
+    };
+    _stdout: string[];
+    _stderr: string[];
+}
+export interface WasmModuleFactory {
+    (options: {
+        wasmBinary: ArrayBuffer;
+        print: (text: string) => void;
+        printErr: (text: string) => void;
+        noInitialRun: true;
+    }): Promise<EmscriptenModule>;
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@genomicx/ui",
+  "version": "0.1.0",
+  "description": "Shared UI components, styles, and WASM loader for GenomicX tools",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./styles/components.css": "./src/styles/components.css"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0",
+    "react-hot-toast": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-router-dom": "^7.0.0",
+    "react-hot-toast": "^2.4.0",
+    "typescript": "^5.5.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0"
+  }
+}

package/src/styles/components.css

@@ -0,0 +1,125 @@
+/* GenomicX Tailwind component classes — import after @tailwind directives */
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    background-color: var(--gx-bg);
+    color: var(--gx-text);
+    line-height: 1.7;
+    transition: background-color var(--gx-transition), color var(--gx-transition);
+    margin: 0;
+  }
+
+  * {
+    transition: background-color var(--gx-transition), border-color var(--gx-transition), color var(--gx-transition);
+  }
+
+  code {
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  }
+
+  ::-webkit-scrollbar { width: 10px; height: 10px; }
+  ::-webkit-scrollbar-track { background: var(--gx-bg); }
+  ::-webkit-scrollbar-thumb { background: var(--gx-border); border-radius: 999px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--gx-text-muted); }
+}
+
+@layer components {
+  .card {
+    background: var(--gx-bg-alt);
+    border: 1px solid var(--gx-border);
+    border-radius: var(--gx-radius-lg);
+    padding: 1.5rem;
+    transition: border-color var(--gx-transition);
+  }
+
+  .card:hover {
+    border-color: var(--gx-accent);
+  }
+
+  .btn-primary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    background: var(--gx-accent);
+    color: var(--gx-text-inverted);
+    font-weight: 600;
+    font-size: 0.875rem;
+    padding: 0.7rem 1.4rem;
+    border-radius: 6px;
+    border: none;
+    cursor: pointer;
+    transition: all var(--gx-transition);
+  }
+
+  .btn-primary:hover { background: var(--gx-accent-hover); }
+  .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+  .btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    background: transparent;
+    color: var(--gx-text);
+    font-weight: 600;
+    font-size: 0.875rem;
+    padding: 0.7rem 1.4rem;
+    border-radius: 6px;
+    border: 1px solid var(--gx-border);
+    cursor: pointer;
+    transition: all var(--gx-transition);
+  }
+
+  .btn-secondary:hover { border-color: var(--gx-accent); color: var(--gx-accent); }
+
+  .input-field {
+    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;
+    transition: border-color var(--gx-transition);
+    outline: none;
+  }
+
+  .input-field:focus { border-color: var(--gx-accent); }
+
+  .label {
+    display: block;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--gx-text);
+    margin-bottom: 0.5rem;
+  }
+
+  .section-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--gx-text);
+    margin-bottom: 1rem;
+    letter-spacing: -0.01em;
+  }
+
+  .progress-bg {
+    background: var(--gx-bg);
+    height: 6px;
+    border-radius: 999px;
+    overflow: hidden;
+  }
+
+  .progress-bar {
+    background: var(--gx-accent);
+    height: 6px;
+    border-radius: 999px;
+    transition: width 0.3s ease;
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,44 @@
+/* GenomicX Design Tokens */
+:root {
+  --gx-bg: #f8fafc;
+  --gx-bg-alt: #f1f5f9;
+  --gx-surface: #ffffff;
+  --gx-surface-hover: #f1f5f9;
+  --gx-bg-elevated: #ffffff;
+  --gx-text: #0f172a;
+  --gx-text-muted: #64748b;
+  --gx-text-bright: #0f172a;
+  --gx-text-inverted: #ffffff;
+  --gx-border: #e2e8f0;
+  --gx-accent: #0d9488;
+  --gx-accent-hover: #0f766e;
+  --gx-indigo: #6366F1;
+  --gx-success: #0d9488;
+  --gx-warning: #F59E0B;
+  --gx-error: #EF4444;
+  --gx-nav-bg: rgba(255, 255, 255, 0.9);
+  --gx-code-bg: #f1f5f9;
+  --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --gx-transition: 0.2s ease;
+  --gx-radius: 8px;
+  --gx-radius-lg: 12px;
+}
+
+[data-theme="dark"] {
+  --gx-bg: #0f172a;
+  --gx-bg-alt: #1e293b;
+  --gx-surface: #1e293b;
+  --gx-surface-hover: #334155;
+  --gx-bg-elevated: #1e293b;
+  --gx-text: #f1f5f9;
+  --gx-text-muted: #94a3b8;
+  --gx-text-bright: #f1f5f9;
+  --gx-text-inverted: #0f172a;
+  --gx-border: #334155;
+  --gx-accent: #2dd4bf;
+  --gx-accent-hover: #14b8a6;
+  --gx-indigo: #818cf8;
+  --gx-nav-bg: rgba(15, 23, 42, 0.9);
+  --gx-code-bg: #0f172a;
+  --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}