@genomicx/ui 0.8.0 → 0.9.0

package/dist/components/StatusBadge.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type StatusBadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'muted';
+export interface StatusBadgeProps {
+    variant: StatusBadgeVariant;
+    children: ReactNode;
+}
+export declare function StatusBadge({ variant, children }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { ProgressBar } from './components/ProgressBar';
 export type { ProgressBarProps } from './components/ProgressBar';
 export { Alert } from './components/Alert';
 export type { AlertProps, AlertVariant } from './components/Alert';
+export { StatusBadge } from './components/StatusBadge';
+export type { StatusBadgeProps, StatusBadgeVariant } from './components/StatusBadge';
 export { loadWasmModule, createModuleInstance } from './wasm/loader';
 export type { EmscriptenModule, WasmModuleFactory } from './wasm/types';
 export { downloadBlob, downloadText, downloadBuffer } from './utils/download';

package/dist/index.js

@@ -36,8 +36,8 @@ const b = () => /* @__PURE__ */ l("svg", { className: "gx-nav-logo-icon", viewBo
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "6" }),
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "2" })
 ] });
-function M({ appName: a, appSubtitle: n, version: o, icon: r, githubUrl: t, actions: c, mobileActions: s }) {
-  const [i, m] = p(!1);
+function M({ appName: a, appSubtitle: n, version: o, icon: r, githubUrl: t, actions: c, mobileActions: i }) {
+  const [s, m] = p(!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: [
@@ -64,11 +64,11 @@ function M({ appName: a, appSubtitle: n, version: o, icon: r, githubUrl: t, acti
       ] }),
       /* @__PURE__ */ l("div", { className: "gx-nav-mobile-toggle", children: [
         /* @__PURE__ */ e(N, {}),
-        /* @__PURE__ */ e("button", { onClick: () => m(!i), className: "gx-nav-hamburger", "aria-label": "Toggle menu", children: i ? /* @__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__ */ e("button", { onClick: () => m(!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" }) }) })
       ] })
     ] }) }),
-    i && /* @__PURE__ */ l("div", { className: "gx-nav-dropdown", children: [
-      s,
+    s && /* @__PURE__ */ l("div", { className: "gx-nav-dropdown", children: [
+      i,
       /* @__PURE__ */ e(g, { to: "/about", onClick: () => m(!1), className: "gx-nav-dropdown-link", children: "About" }),
       t && /* @__PURE__ */ e("a", { href: t, target: "_blank", rel: "noopener noreferrer", className: "gx-nav-dropdown-link", children: "GitHub ↗" })
     ] })
@@ -92,7 +92,7 @@ function C({ onClose: a, bugReportEmail: n, bugReportUrl: o, bugReportItems: r }
       /* @__PURE__ */ e("p", { className: "gx-modal-email", children: /* @__PURE__ */ e("a", { href: `mailto:${n}`, children: n }) }),
       /* @__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: t.map((c, s) => /* @__PURE__ */ e("li", { children: c }, s)) })
+        /* @__PURE__ */ e("ol", { className: "gx-modal-checklist-items", children: t.map((c, i) => /* @__PURE__ */ e("li", { children: c }, i)) })
       ] }),
       o && /* @__PURE__ */ l("p", { className: "gx-modal-github-hint", children: [
         "You can also open an issue on",
@@ -104,9 +104,9 @@ function C({ onClose: a, bugReportEmail: n, bugReportUrl: o, bugReportItems: r }
   ] }) });
 }
 function L({ appName: a = "GenomicX", bugReportEmail: n, bugReportUrl: o, onReportBug: r, bugReportItems: t }) {
-  const [c, s] = p(!1);
-  function i() {
-    n ? s(!0) : r && r();
+  const [c, i] = p(!1);
+  function s() {
+    n ? i(!0) : r && r();
   }
   return /* @__PURE__ */ l(x, { children: [
     /* @__PURE__ */ e("footer", { className: "gx-footer", children: /* @__PURE__ */ e("div", { className: "gx-footer-inner", children: /* @__PURE__ */ l("div", { className: "gx-footer-content", children: [
@@ -119,13 +119,13 @@ function L({ appName: a = "GenomicX", bugReportEmail: n, bugReportUrl: o, onRepo
       ] }),
       /* @__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" }),
-        (n || o || r) && /* @__PURE__ */ e("button", { onClick: i, className: "gx-footer-link", children: "Report Bug" })
+        (n || o || r) && /* @__PURE__ */ e("button", { onClick: s, className: "gx-footer-link", children: "Report Bug" })
       ] })
     ] }) }) }),
     c && n && /* @__PURE__ */ e(
       C,
       {
-        onClose: () => s(!1),
+        onClose: () => i(!1),
         bugReportEmail: n,
         bugReportUrl: o,
         bugReportItems: t
@@ -175,33 +175,33 @@ function R({ logs: a, progress: n, title: o = "Console" }) {
         "Copy"
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { ref: r, className: "gx-console-body", children: a.length === 0 ? /* @__PURE__ */ e("div", { className: "gx-console-empty", children: "No logs yet..." }) : a.map((s, i) => /* @__PURE__ */ e("div", { className: "gx-console-line", children: s }, i)) })
+    /* @__PURE__ */ e("div", { ref: r, className: "gx-console-body", children: a.length === 0 ? /* @__PURE__ */ e("div", { className: "gx-console-empty", children: "No logs yet..." }) : a.map((i, s) => /* @__PURE__ */ e("div", { className: "gx-console-line", children: i }, s)) })
   ] });
 }
-function _({
+function S({
   files: a,
   onFilesChange: n,
   disabled: o = !1,
   multiple: r = !0,
   accept: t = ".fasta,.fa,.fna,.fsa,.fasta.gz,.fa.gz,.fna.gz",
   label: c = "Drop files here or click to browse",
-  hint: s,
-  filterFn: i
+  hint: i,
+  filterFn: s
 }) {
   const m = f(
     (d) => {
       if (!d.target.files) return;
       let h = Array.from(d.target.files);
-      i && (h = h.filter(i)), h.length > 0 && n(h);
+      s && (h = h.filter(s)), h.length > 0 && n(h);
     },
-    [n, i]
+    [n, s]
   ), w = f(
     (d) => {
       if (d.preventDefault(), !d.dataTransfer.files) return;
       let h = Array.from(d.dataTransfer.files);
-      i && (h = h.filter(i)), h.length > 0 && n(h);
+      s && (h = h.filter(s)), h.length > 0 && n(h);
     },
-    [n, i]
+    [n, s]
   );
   return /* @__PURE__ */ e("div", { className: "gx-file-upload", onDrop: w, onDragOver: (d) => d.preventDefault(), children: /* @__PURE__ */ l("label", { className: "gx-file-upload-area", children: [
     /* @__PURE__ */ e(
@@ -234,7 +234,7 @@ function _({
     ),
     a.length === 0 ? /* @__PURE__ */ l(x, { children: [
       /* @__PURE__ */ e("div", { className: "gx-file-upload-label", children: c }),
-      s && /* @__PURE__ */ e("div", { className: "gx-file-upload-hint", children: s })
+      i && /* @__PURE__ */ e("div", { className: "gx-file-upload-hint", children: i })
     ] }) : /* @__PURE__ */ l(x, { children: [
       /* @__PURE__ */ l("div", { className: "gx-file-upload-label", children: [
         a.length,
@@ -246,7 +246,7 @@ function _({
     ] })
   ] }) });
 }
-function S({ value: a, label: n }) {
+function _({ value: a, label: n }) {
   const o = Math.min(100, Math.max(0, a));
   return /* @__PURE__ */ l("div", { className: "gx-progress-wrap", children: [
     /* @__PURE__ */ e(
@@ -290,6 +290,9 @@ function E({ variant: a, children: n }) {
     /* @__PURE__ */ e("div", { className: "gx-alert-body", children: n })
   ] });
 }
+function I({ variant: a, children: n }) {
+  return /* @__PURE__ */ e("span", { className: `gx-badge gx-badge--${a}`, children: n });
+}
 const A = "https://static.genomicx.org/wasm", u = /* @__PURE__ */ new Map();
 async function z(a, n = A) {
   const o = `${n}/${a}`;
@@ -300,29 +303,29 @@ async function z(a, n = A) {
   ]);
   if (!r.ok) throw new Error(`Failed to fetch ${a}.js: ${r.status}`);
   if (!t.ok) throw new Error(`Failed to fetch ${a}.wasm: ${t.status}`);
-  const [c, s] = await Promise.all([
+  const [c, i] = await Promise.all([
     r.text(),
     t.arrayBuffer()
-  ]), m = { factory: new Function("Module", c + "; return Module;")({}), wasmBinary: s };
+  ]), m = { factory: new Function("Module", c + "; return Module;")({}), wasmBinary: i };
   return u.set(o, m), m;
 }
-async function I(a, n) {
-  const { factory: o, wasmBinary: r } = await z(a, n), t = [], c = [], s = await o({
+async function O(a, n) {
+  const { factory: o, wasmBinary: r } = await z(a, n), t = [], c = [], i = await o({
     wasmBinary: r.slice(0),
-    print: (i) => t.push(i),
-    printErr: (i) => c.push(i),
+    print: (s) => t.push(s),
+    printErr: (s) => c.push(s),
     noInitialRun: !0
   });
-  return s._stdout = t, s._stderr = c, s;
+  return i._stdout = t, i._stderr = c, i;
 }
 function k(a, n) {
   const o = URL.createObjectURL(a), r = document.createElement("a");
   r.href = o, r.download = n, r.click(), URL.revokeObjectURL(o);
 }
-function O(a, n, o = "text/plain") {
+function P(a, n, o = "text/plain") {
   k(new Blob([a], { type: o }), n);
 }
-function P(a, n) {
+function G(a, n) {
   k(new Blob([a]), n);
 }
 export {
@@ -330,14 +333,15 @@ export {
   L as AppFooter,
   H as AppShell,
   C as BugReportModal,
-  _ as FileUpload,
+  S as FileUpload,
   R as LogConsole,
   M as NavBar,
-  S as ProgressBar,
+  _ as ProgressBar,
+  I as StatusBadge,
   N as ThemeToggle,
-  I as createModuleInstance,
+  O as createModuleInstance,
   k as downloadBlob,
-  P as downloadBuffer,
-  O as downloadText,
+  G as downloadBuffer,
+  P as downloadText,
   z as loadWasmModule
 };

package/package.json

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

package/src/styles/components.css

@@ -613,3 +613,20 @@ code {
 .gx-alert-icon--success { color: var(--gx-success); }
 
 .gx-alert-body { flex: 1; }
+
+/* ── StatusBadge ─────────────────────────────── */
+.gx-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.6rem;
+  border-radius: var(--gx-radius-pill);
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 1px solid;
+  white-space: nowrap;
+}
+.gx-badge--success { background: color-mix(in srgb, var(--gx-success) 12%, transparent); border-color: color-mix(in srgb, var(--gx-success) 30%, transparent); color: var(--gx-success); }
+.gx-badge--warning { background: color-mix(in srgb, var(--gx-warning) 12%, transparent); border-color: color-mix(in srgb, var(--gx-warning) 30%, transparent); color: var(--gx-warning); }
+.gx-badge--error   { background: color-mix(in srgb, var(--gx-error) 12%, transparent);   border-color: color-mix(in srgb, var(--gx-error) 30%, transparent);   color: var(--gx-error); }
+.gx-badge--info    { background: color-mix(in srgb, var(--gx-info) 12%, transparent);    border-color: color-mix(in srgb, var(--gx-info) 30%, transparent);    color: var(--gx-info); }
+.gx-badge--muted   { background: color-mix(in srgb, var(--gx-text-muted) 12%, transparent); border-color: color-mix(in srgb, var(--gx-text-muted) 30%, transparent); color: var(--gx-text-muted); }