@genomicx/ui 0.7.1 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/Alert.d.ts +7 -0
  2. package/dist/components/StatusBadge.d.ts +7 -0
  3. package/dist/index.d.ts +4 -0
  4. package/dist/index.js +142 -110
  5. package/package.json +1 -1
  6. package/src/styles/components.css +40 -0
  7. package/src/styles/tokens.css +16 -0
package/dist/components/Alert.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { ReactNode } from 'react';
2
+ export type AlertVariant = 'info' | 'warning' | 'error' | 'success';
3
+ export interface AlertProps {
4
+ variant: AlertVariant;
5
+ children: ReactNode;
6
+ }
7
+ export declare function Alert({ variant, children }: AlertProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/StatusBadge.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { ReactNode } from 'react';
2
+ export type StatusBadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'muted';
3
+ export interface StatusBadgeProps {
4
+ variant: StatusBadgeVariant;
5
+ children: ReactNode;
6
+ }
7
+ export declare function StatusBadge({ variant, children }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
package/dist/index.d.ts CHANGED
@@ -9,6 +9,10 @@ export { FileUpload } from './components/FileUpload';
9
9
  export type { FileUploadProps } from './components/FileUpload';
10
10
  export { ProgressBar } from './components/ProgressBar';
11
11
  export type { ProgressBarProps } from './components/ProgressBar';
12
+ export { Alert } from './components/Alert';
13
+ export type { AlertProps, AlertVariant } from './components/Alert';
14
+ export { StatusBadge } from './components/StatusBadge';
15
+ export type { StatusBadgeProps, StatusBadgeVariant } from './components/StatusBadge';
12
16
  export { loadWasmModule, createModuleInstance } from './wasm/loader';
13
17
  export type { EmscriptenModule, WasmModuleFactory } from './wasm/types';
14
18
  export { downloadBlob, downloadText, downloadBuffer } from './utils/download';
package/dist/index.js CHANGED
@@ -1,62 +1,62 @@
1
- import { jsxs as l, jsx as e, Fragment as p } from "react/jsx-runtime";
2
- import { useState as f, useRef as b, useCallback as x } from "react";
1
+ import { jsxs as l, jsx as e, Fragment as x } from "react/jsx-runtime";
2
+ import { useState as p, useRef as y, useCallback as f } from "react";
3
3
  import { Link as g } from "react-router-dom";
4
4
  import v from "react-hot-toast";
5
- function N({ disabled: n = !1 }) {
6
- const [a, o] = f(
5
+ function N({ disabled: a = !1 }) {
6
+ const [n, o] = p(
7
7
  () => document.documentElement.getAttribute("data-theme") || "dark"
8
- ), r = (s) => {
9
- o(s), document.documentElement.setAttribute("data-theme", s), localStorage.setItem("gx-theme", s);
8
+ ), r = (t) => {
9
+ o(t), document.documentElement.setAttribute("data-theme", t), localStorage.setItem("gx-theme", t);
10
10
  };
11
- return /* @__PURE__ */ l("div", { className: `gx-theme-toggle${n ? " disabled" : ""}`, title: n ? "Theme switching disabled" : void 0, children: [
11
+ return /* @__PURE__ */ l("div", { className: `gx-theme-toggle${a ? " disabled" : ""}`, title: a ? "Theme switching disabled" : void 0, children: [
12
12
  /* @__PURE__ */ e(
13
13
  "button",
14
14
  {
15
- onClick: () => !n && r("dark"),
16
- className: `gx-theme-btn${a === "dark" ? " active" : ""}`,
15
+ onClick: () => !a && r("dark"),
16
+ className: `gx-theme-btn${n === "dark" ? " active" : ""}`,
17
17
  "aria-label": "Dark theme",
18
- disabled: n,
18
+ disabled: a,
19
19
  children: /* @__PURE__ */ e("svg", { className: "gx-theme-btn-icon", 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" }) })
20
20
  }
21
21
  ),
22
22
  /* @__PURE__ */ e(
23
23
  "button",
24
24
  {
25
- onClick: () => !n && r("light"),
26
- className: `gx-theme-btn${a === "light" ? " active" : ""}`,
25
+ onClick: () => !a && r("light"),
26
+ className: `gx-theme-btn${n === "light" ? " active" : ""}`,
27
27
  "aria-label": "Light theme",
28
- disabled: n,
28
+ disabled: a,
29
29
  children: /* @__PURE__ */ e("svg", { className: "gx-theme-btn-icon", 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" }) })
30
30
  }
31
31
  )
32
32
  ] });
33
33
  }
34
- const y = () => /* @__PURE__ */ l("svg", { className: "gx-nav-logo-icon", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gx-accent)", strokeWidth: "2", children: [
34
+ const b = () => /* @__PURE__ */ l("svg", { className: "gx-nav-logo-icon", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gx-accent)", strokeWidth: "2", children: [
35
35
  /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
36
36
  /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "6" }),
37
37
  /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "2" })
38
38
  ] });
39
- function M({ appName: n, appSubtitle: a, version: o, icon: r, githubUrl: s, actions: i, mobileActions: c }) {
40
- const [t, m] = f(!1);
39
+ function M({ appName: a, appSubtitle: n, version: o, icon: r, githubUrl: t, actions: c, mobileActions: i }) {
40
+ const [s, m] = p(!1);
41
41
  return /* @__PURE__ */ l("nav", { className: "gx-nav", children: [
42
42
  /* @__PURE__ */ e("div", { className: "gx-nav-inner", children: /* @__PURE__ */ l("div", { className: "gx-nav-row", children: [
43
43
  /* @__PURE__ */ l(g, { to: "/", className: "gx-nav-logo", children: [
44
- r ?? /* @__PURE__ */ e(y, {}),
44
+ r ?? /* @__PURE__ */ e(b, {}),
45
45
  /* @__PURE__ */ l("div", { children: [
46
46
  /* @__PURE__ */ l("h1", { className: "gx-nav-logo-name", children: [
47
- n,
47
+ a,
48
48
  o && /* @__PURE__ */ l("span", { className: "gx-nav-logo-version", children: [
49
49
  "v",
50
50
  o
51
51
  ] })
52
52
  ] }),
53
- a && /* @__PURE__ */ e("p", { className: "gx-nav-logo-sub", children: a })
53
+ n && /* @__PURE__ */ e("p", { className: "gx-nav-logo-sub", children: n })
54
54
  ] })
55
55
  ] }),
56
56
  /* @__PURE__ */ l("div", { className: "gx-nav-desktop", children: [
57
- i,
57
+ c,
58
58
  /* @__PURE__ */ e(g, { to: "/about", className: "gx-nav-link", children: "About" }),
59
- s && /* @__PURE__ */ l("a", { href: s, target: "_blank", rel: "noopener noreferrer", className: "gx-nav-link", children: [
59
+ t && /* @__PURE__ */ l("a", { href: t, target: "_blank", rel: "noopener noreferrer", className: "gx-nav-link", children: [
60
60
  "GitHub",
61
61
  /* @__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" }) })
62
62
  ] }),
@@ -64,13 +64,13 @@ function M({ appName: n, appSubtitle: a, version: o, icon: r, githubUrl: s, acti
64
64
  ] }),
65
65
  /* @__PURE__ */ l("div", { className: "gx-nav-mobile-toggle", children: [
66
66
  /* @__PURE__ */ e(N, {}),
67
- /* @__PURE__ */ e("button", { onClick: () => m(!t), className: "gx-nav-hamburger", "aria-label": "Toggle menu", children: t ? /* @__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" }) }) })
67
+ /* @__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" }) }) })
68
68
  ] })
69
69
  ] }) }),
70
- t && /* @__PURE__ */ l("div", { className: "gx-nav-dropdown", children: [
71
- c,
70
+ s && /* @__PURE__ */ l("div", { className: "gx-nav-dropdown", children: [
71
+ i,
72
72
  /* @__PURE__ */ e(g, { to: "/about", onClick: () => m(!1), className: "gx-nav-dropdown-link", children: "About" }),
73
- s && /* @__PURE__ */ e("a", { href: s, target: "_blank", rel: "noopener noreferrer", className: "gx-nav-dropdown-link", children: "GitHub ↗" })
73
+ t && /* @__PURE__ */ e("a", { href: t, target: "_blank", rel: "noopener noreferrer", className: "gx-nav-dropdown-link", children: "GitHub ↗" })
74
74
  ] })
75
75
  ] });
76
76
  }
@@ -80,19 +80,19 @@ const B = [
80
80
  "Browser name and version",
81
81
  "Steps to reproduce the issue"
82
82
  ];
83
- function C({ onClose: n, bugReportEmail: a, bugReportUrl: o, bugReportItems: r }) {
84
- const s = r ?? B;
85
- return /* @__PURE__ */ e("div", { className: "gx-modal-overlay", onClick: n, children: /* @__PURE__ */ l("div", { className: "gx-modal", onClick: (i) => i.stopPropagation(), children: [
83
+ function C({ onClose: a, bugReportEmail: n, bugReportUrl: o, bugReportItems: r }) {
84
+ const t = r ?? B;
85
+ return /* @__PURE__ */ e("div", { className: "gx-modal-overlay", onClick: a, children: /* @__PURE__ */ l("div", { className: "gx-modal", onClick: (c) => c.stopPropagation(), children: [
86
86
  /* @__PURE__ */ l("div", { className: "gx-modal-header", children: [
87
87
  /* @__PURE__ */ e("h3", { className: "gx-modal-title", children: "Report a Bug" }),
88
- /* @__PURE__ */ e("button", { className: "gx-modal-close", onClick: n, "aria-label": "Close", children: "×" })
88
+ /* @__PURE__ */ e("button", { className: "gx-modal-close", onClick: a, "aria-label": "Close", children: "×" })
89
89
  ] }),
90
90
  /* @__PURE__ */ l("div", { className: "gx-modal-body", children: [
91
91
  /* @__PURE__ */ e("p", { children: "To report a bug, please email the following to:" }),
92
- /* @__PURE__ */ e("p", { className: "gx-modal-email", children: /* @__PURE__ */ e("a", { href: `mailto:${a}`, children: a }) }),
92
+ /* @__PURE__ */ e("p", { className: "gx-modal-email", children: /* @__PURE__ */ e("a", { href: `mailto:${n}`, children: n }) }),
93
93
  /* @__PURE__ */ l("div", { className: "gx-modal-checklist", children: [
94
94
  /* @__PURE__ */ e("p", { className: "gx-modal-checklist-title", children: "Please include:" }),
95
- /* @__PURE__ */ e("ol", { className: "gx-modal-checklist-items", children: s.map((i, c) => /* @__PURE__ */ e("li", { children: i }, c)) })
95
+ /* @__PURE__ */ e("ol", { className: "gx-modal-checklist-items", children: t.map((c, i) => /* @__PURE__ */ e("li", { children: c }, i)) })
96
96
  ] }),
97
97
  o && /* @__PURE__ */ l("p", { className: "gx-modal-github-hint", children: [
98
98
  "You can also open an issue on",
@@ -103,105 +103,105 @@ function C({ onClose: n, bugReportEmail: a, bugReportUrl: o, bugReportItems: r }
103
103
  ] })
104
104
  ] }) });
105
105
  }
106
- function L({ appName: n = "GenomicX", bugReportEmail: a, bugReportUrl: o, onReportBug: r, bugReportItems: s }) {
107
- const [i, c] = f(!1);
108
- function t() {
109
- a ? c(!0) : r && r();
106
+ function L({ appName: a = "GenomicX", bugReportEmail: n, bugReportUrl: o, onReportBug: r, bugReportItems: t }) {
107
+ const [c, i] = p(!1);
108
+ function s() {
109
+ n ? i(!0) : r && r();
110
110
  }
111
- return /* @__PURE__ */ l(p, { children: [
111
+ return /* @__PURE__ */ l(x, { children: [
112
112
  /* @__PURE__ */ e("footer", { className: "gx-footer", children: /* @__PURE__ */ e("div", { className: "gx-footer-inner", children: /* @__PURE__ */ l("div", { className: "gx-footer-content", children: [
113
113
  /* @__PURE__ */ l("div", { className: "gx-footer-text", children: [
114
114
  /* @__PURE__ */ l("p", { className: "gx-footer-text-title", children: [
115
- n,
115
+ a,
116
116
  " — Powered by WebAssembly"
117
117
  ] }),
118
118
  /* @__PURE__ */ e("p", { className: "gx-footer-text-sub", children: "All processing runs locally in your browser — no data leaves your computer" })
119
119
  ] }),
120
120
  /* @__PURE__ */ l("div", { className: "gx-footer-links", children: [
121
121
  /* @__PURE__ */ e("a", { href: "https://genomicx.org", target: "_blank", rel: "noopener noreferrer", className: "gx-footer-link", children: "genomicx.org" }),
122
- (a || o || r) && /* @__PURE__ */ e("button", { onClick: t, className: "gx-footer-link", children: "Report Bug" })
122
+ (n || o || r) && /* @__PURE__ */ e("button", { onClick: s, className: "gx-footer-link", children: "Report Bug" })
123
123
  ] })
124
124
  ] }) }) }),
125
- i && a && /* @__PURE__ */ e(
125
+ c && n && /* @__PURE__ */ e(
126
126
  C,
127
127
  {
128
- onClose: () => c(!1),
129
- bugReportEmail: a,
128
+ onClose: () => i(!1),
129
+ bugReportEmail: n,
130
130
  bugReportUrl: o,
131
- bugReportItems: s
131
+ bugReportItems: t
132
132
  }
133
133
  )
134
134
  ] });
135
135
  }
136
- function W({ children: n, onReportBug: a, ...o }) {
136
+ function H({ children: a, onReportBug: n, ...o }) {
137
137
  return /* @__PURE__ */ l("div", { style: { minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--gx-bg)" }, children: [
138
138
  /* @__PURE__ */ e(M, { ...o }),
139
- /* @__PURE__ */ e("main", { style: { flex: 1 }, children: n }),
140
- /* @__PURE__ */ e(L, { appName: o.appName, onReportBug: a })
139
+ /* @__PURE__ */ e("main", { style: { flex: 1 }, children: a }),
140
+ /* @__PURE__ */ e(L, { appName: o.appName, onReportBug: n })
141
141
  ] });
142
142
  }
143
- function H({ logs: n, progress: a, title: o = "Console" }) {
144
- const r = b(null), s = () => {
145
- navigator.clipboard.writeText(n.join(`
143
+ function R({ logs: a, progress: n, title: o = "Console" }) {
144
+ const r = y(null), t = () => {
145
+ navigator.clipboard.writeText(a.join(`
146
146
  `)).then(() => {
147
147
  v.success("Logs copied to clipboard!");
148
148
  }).catch(() => {
149
149
  v.error("Failed to copy logs");
150
150
  });
151
- }, i = a && a.step !== "idle" && a.step !== "Complete!";
151
+ }, c = n && n.step !== "idle" && n.step !== "Complete!";
152
152
  return /* @__PURE__ */ l("div", { className: "gx-console", children: [
153
- i && /* @__PURE__ */ l("div", { className: "gx-console-progress", children: [
153
+ c && /* @__PURE__ */ l("div", { className: "gx-console-progress", children: [
154
154
  /* @__PURE__ */ l("div", { className: "gx-console-progress-row", children: [
155
- /* @__PURE__ */ e("span", { className: "gx-console-progress-step", children: a.step }),
155
+ /* @__PURE__ */ e("span", { className: "gx-console-progress-step", children: n.step }),
156
156
  /* @__PURE__ */ l("span", { className: "gx-console-progress-pct", children: [
157
- a.percent,
157
+ n.percent,
158
158
  "%"
159
159
  ] })
160
160
  ] }),
161
- /* @__PURE__ */ e("div", { className: "progress-bg", children: /* @__PURE__ */ e("div", { className: "progress-bar", style: { width: `${a.percent}%` } }) }),
162
- a.message && /* @__PURE__ */ e("div", { className: "gx-console-progress-msg", children: a.message })
161
+ /* @__PURE__ */ e("div", { className: "progress-bg", children: /* @__PURE__ */ e("div", { className: "progress-bar", style: { width: `${n.percent}%` } }) }),
162
+ n.message && /* @__PURE__ */ e("div", { className: "gx-console-progress-msg", children: n.message })
163
163
  ] }),
164
164
  /* @__PURE__ */ l("div", { className: "gx-console-header", children: [
165
165
  /* @__PURE__ */ l("div", { className: "gx-console-title-row", children: [
166
166
  /* @__PURE__ */ e("h3", { className: "gx-console-title", children: o }),
167
167
  /* @__PURE__ */ l("span", { className: "gx-console-count", children: [
168
168
  "(",
169
- n.length,
169
+ a.length,
170
170
  " messages)"
171
171
  ] })
172
172
  ] }),
173
- /* @__PURE__ */ l("button", { onClick: s, className: "gx-console-copy", disabled: n.length === 0, children: [
173
+ /* @__PURE__ */ l("button", { onClick: t, className: "gx-console-copy", disabled: a.length === 0, children: [
174
174
  /* @__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" }) }),
175
175
  "Copy"
176
176
  ] })
177
177
  ] }),
178
- /* @__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((c, t) => /* @__PURE__ */ e("div", { className: "gx-console-line", children: c }, t)) })
178
+ /* @__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)) })
179
179
  ] });
180
180
  }
181
- function R({
182
- files: n,
183
- onFilesChange: a,
181
+ function S({
182
+ files: a,
183
+ onFilesChange: n,
184
184
  disabled: o = !1,
185
185
  multiple: r = !0,
186
- accept: s = ".fasta,.fa,.fna,.fsa,.fasta.gz,.fa.gz,.fna.gz",
187
- label: i = "Drop files here or click to browse",
188
- hint: c,
189
- filterFn: t
186
+ accept: t = ".fasta,.fa,.fna,.fsa,.fasta.gz,.fa.gz,.fna.gz",
187
+ label: c = "Drop files here or click to browse",
188
+ hint: i,
189
+ filterFn: s
190
190
  }) {
191
- const m = x(
191
+ const m = f(
192
192
  (d) => {
193
193
  if (!d.target.files) return;
194
194
  let h = Array.from(d.target.files);
195
- t && (h = h.filter(t)), h.length > 0 && a(h);
195
+ s && (h = h.filter(s)), h.length > 0 && n(h);
196
196
  },
197
- [a, t]
198
- ), w = x(
197
+ [n, s]
198
+ ), w = f(
199
199
  (d) => {
200
200
  if (d.preventDefault(), !d.dataTransfer.files) return;
201
201
  let h = Array.from(d.dataTransfer.files);
202
- t && (h = h.filter(t)), h.length > 0 && a(h);
202
+ s && (h = h.filter(s)), h.length > 0 && n(h);
203
203
  },
204
- [a, t]
204
+ [n, s]
205
205
  );
206
206
  return /* @__PURE__ */ e("div", { className: "gx-file-upload", onDrop: w, onDragOver: (d) => d.preventDefault(), children: /* @__PURE__ */ l("label", { className: "gx-file-upload-area", children: [
207
207
  /* @__PURE__ */ e(
@@ -209,7 +209,7 @@ function R({
209
209
  {
210
210
  type: "file",
211
211
  multiple: r,
212
- accept: s,
212
+ accept: t,
213
213
  onChange: m,
214
214
  disabled: o
215
215
  }
@@ -232,22 +232,22 @@ function R({
232
232
  ]
233
233
  }
234
234
  ),
235
- n.length === 0 ? /* @__PURE__ */ l(p, { children: [
236
- /* @__PURE__ */ e("div", { className: "gx-file-upload-label", children: i }),
237
- c && /* @__PURE__ */ e("div", { className: "gx-file-upload-hint", children: c })
238
- ] }) : /* @__PURE__ */ l(p, { children: [
235
+ a.length === 0 ? /* @__PURE__ */ l(x, { children: [
236
+ /* @__PURE__ */ e("div", { className: "gx-file-upload-label", children: c }),
237
+ i && /* @__PURE__ */ e("div", { className: "gx-file-upload-hint", children: i })
238
+ ] }) : /* @__PURE__ */ l(x, { children: [
239
239
  /* @__PURE__ */ l("div", { className: "gx-file-upload-label", children: [
240
- n.length,
240
+ a.length,
241
241
  " file",
242
- n.length !== 1 ? "s" : "",
242
+ a.length !== 1 ? "s" : "",
243
243
  " selected"
244
244
  ] }),
245
- /* @__PURE__ */ e("ul", { className: "gx-file-list", children: n.map((d) => /* @__PURE__ */ e("li", { children: d.name }, d.name)) })
245
+ /* @__PURE__ */ e("ul", { className: "gx-file-list", children: a.map((d) => /* @__PURE__ */ e("li", { children: d.name }, d.name)) })
246
246
  ] })
247
247
  ] }) });
248
248
  }
249
- function _({ value: n, label: a }) {
250
- const o = Math.min(100, Math.max(0, n));
249
+ function _({ value: a, label: n }) {
250
+ const o = Math.min(100, Math.max(0, a));
251
251
  return /* @__PURE__ */ l("div", { className: "gx-progress-wrap", children: [
252
252
  /* @__PURE__ */ e(
253
253
  "div",
@@ -260,56 +260,88 @@ function _({ value: n, label: a }) {
260
260
  children: /* @__PURE__ */ e("div", { className: "progress-bar", style: { width: `${o}%` } })
261
261
  }
262
262
  ),
263
- a && /* @__PURE__ */ e("p", { className: "gx-progress-label", children: a })
263
+ n && /* @__PURE__ */ e("p", { className: "gx-progress-label", children: n })
264
264
  ] });
265
265
  }
266
+ const $ = {
267
+ info: /* @__PURE__ */ l("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
268
+ /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
269
+ /* @__PURE__ */ e("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
270
+ /* @__PURE__ */ e("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
271
+ ] }),
272
+ warning: /* @__PURE__ */ l("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
273
+ /* @__PURE__ */ e("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
274
+ /* @__PURE__ */ e("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
275
+ /* @__PURE__ */ e("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
276
+ ] }),
277
+ error: /* @__PURE__ */ l("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
278
+ /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
279
+ /* @__PURE__ */ e("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
280
+ /* @__PURE__ */ e("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
281
+ ] }),
282
+ success: /* @__PURE__ */ l("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
283
+ /* @__PURE__ */ e("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
284
+ /* @__PURE__ */ e("polyline", { points: "22 4 12 14.01 9 11.01" })
285
+ ] })
286
+ };
287
+ function E({ variant: a, children: n }) {
288
+ return /* @__PURE__ */ l("div", { className: `gx-alert gx-alert--${a}`, role: "alert", children: [
289
+ /* @__PURE__ */ e("span", { className: `gx-alert-icon gx-alert-icon--${a}`, children: $[a] }),
290
+ /* @__PURE__ */ e("div", { className: "gx-alert-body", children: n })
291
+ ] });
292
+ }
293
+ function I({ variant: a, children: n }) {
294
+ return /* @__PURE__ */ e("span", { className: `gx-badge gx-badge--${a}`, children: n });
295
+ }
266
296
  const A = "https://static.genomicx.org/wasm", u = /* @__PURE__ */ new Map();
267
- async function $(n, a = A) {
268
- const o = `${a}/${n}`;
297
+ async function z(a, n = A) {
298
+ const o = `${n}/${a}`;
269
299
  if (u.has(o)) return u.get(o);
270
- const [r, s] = await Promise.all([
271
- fetch(`${a}/${n}.js`),
272
- fetch(`${a}/${n}.wasm`)
300
+ const [r, t] = await Promise.all([
301
+ fetch(`${n}/${a}.js`),
302
+ fetch(`${n}/${a}.wasm`)
273
303
  ]);
274
- if (!r.ok) throw new Error(`Failed to fetch ${n}.js: ${r.status}`);
275
- if (!s.ok) throw new Error(`Failed to fetch ${n}.wasm: ${s.status}`);
276
- const [i, c] = await Promise.all([
304
+ if (!r.ok) throw new Error(`Failed to fetch ${a}.js: ${r.status}`);
305
+ if (!t.ok) throw new Error(`Failed to fetch ${a}.wasm: ${t.status}`);
306
+ const [c, i] = await Promise.all([
277
307
  r.text(),
278
- s.arrayBuffer()
279
- ]), m = { factory: new Function("Module", i + "; return Module;")({}), wasmBinary: c };
308
+ t.arrayBuffer()
309
+ ]), m = { factory: new Function("Module", c + "; return Module;")({}), wasmBinary: i };
280
310
  return u.set(o, m), m;
281
311
  }
282
- async function S(n, a) {
283
- const { factory: o, wasmBinary: r } = await $(n, a), s = [], i = [], c = await o({
312
+ async function O(a, n) {
313
+ const { factory: o, wasmBinary: r } = await z(a, n), t = [], c = [], i = await o({
284
314
  wasmBinary: r.slice(0),
285
- print: (t) => s.push(t),
286
- printErr: (t) => i.push(t),
315
+ print: (s) => t.push(s),
316
+ printErr: (s) => c.push(s),
287
317
  noInitialRun: !0
288
318
  });
289
- return c._stdout = s, c._stderr = i, c;
319
+ return i._stdout = t, i._stderr = c, i;
290
320
  }
291
- function k(n, a) {
292
- const o = URL.createObjectURL(n), r = document.createElement("a");
293
- r.href = o, r.download = a, r.click(), URL.revokeObjectURL(o);
321
+ function k(a, n) {
322
+ const o = URL.createObjectURL(a), r = document.createElement("a");
323
+ r.href = o, r.download = n, r.click(), URL.revokeObjectURL(o);
294
324
  }
295
- function E(n, a, o = "text/plain") {
296
- k(new Blob([n], { type: o }), a);
325
+ function P(a, n, o = "text/plain") {
326
+ k(new Blob([a], { type: o }), n);
297
327
  }
298
- function I(n, a) {
299
- k(new Blob([n]), a);
328
+ function G(a, n) {
329
+ k(new Blob([a]), n);
300
330
  }
301
331
  export {
332
+ E as Alert,
302
333
  L as AppFooter,
303
- W as AppShell,
334
+ H as AppShell,
304
335
  C as BugReportModal,
305
- R as FileUpload,
306
- H as LogConsole,
336
+ S as FileUpload,
337
+ R as LogConsole,
307
338
  M as NavBar,
308
339
  _ as ProgressBar,
340
+ I as StatusBadge,
309
341
  N as ThemeToggle,
310
- S as createModuleInstance,
342
+ O as createModuleInstance,
311
343
  k as downloadBlob,
312
- I as downloadBuffer,
313
- E as downloadText,
314
- $ as loadWasmModule
344
+ G as downloadBuffer,
345
+ P as downloadText,
346
+ z as loadWasmModule
315
347
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@genomicx/ui",
3
- "version": "0.7.1",
3
+ "version": "0.9.0",
4
4
  "description": "Shared UI components, styles, and WASM loader for GenomicX tools",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/styles/components.css CHANGED
@@ -590,3 +590,43 @@ code {
590
590
  font-size: 0.85rem;
591
591
  color: var(--gx-text-muted);
592
592
  }
593
+
594
+ /* ── Alert ───────────────────────────────────── */
595
+ .gx-alert {
596
+ display: flex;
597
+ gap: 0.75rem;
598
+ border-radius: var(--gx-radius);
599
+ border: 1px solid;
600
+ padding: 1rem;
601
+ font-size: 0.875rem;
602
+ color: var(--gx-text);
603
+ }
604
+ .gx-alert--info { background: color-mix(in srgb, var(--gx-info) 10%, transparent); border-color: color-mix(in srgb, var(--gx-info) 30%, transparent); }
605
+ .gx-alert--warning { background: color-mix(in srgb, var(--gx-warning) 10%, transparent); border-color: color-mix(in srgb, var(--gx-warning) 30%, transparent); }
606
+ .gx-alert--error { background: color-mix(in srgb, var(--gx-error) 10%, transparent); border-color: color-mix(in srgb, var(--gx-error) 30%, transparent); }
607
+ .gx-alert--success { background: color-mix(in srgb, var(--gx-success) 10%, transparent); border-color: color-mix(in srgb, var(--gx-success) 30%, transparent); }
608
+
609
+ .gx-alert-icon { flex-shrink: 0; }
610
+ .gx-alert-icon--info { color: var(--gx-info); }
611
+ .gx-alert-icon--warning { color: var(--gx-warning); }
612
+ .gx-alert-icon--error { color: var(--gx-error); }
613
+ .gx-alert-icon--success { color: var(--gx-success); }
614
+
615
+ .gx-alert-body { flex: 1; }
616
+
617
+ /* ── StatusBadge ─────────────────────────────── */
618
+ .gx-badge {
619
+ display: inline-flex;
620
+ align-items: center;
621
+ padding: 0.2rem 0.6rem;
622
+ border-radius: var(--gx-radius-pill);
623
+ font-size: 0.75rem;
624
+ font-weight: 600;
625
+ border: 1px solid;
626
+ white-space: nowrap;
627
+ }
628
+ .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); }
629
+ .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); }
630
+ .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); }
631
+ .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); }
632
+ .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); }
package/src/styles/tokens.css CHANGED
@@ -22,9 +22,18 @@
22
22
  --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
23
23
  --gx-transition: 0.2s ease;
24
24
  --gx-max-width: 1280px;
25
+ --gx-radius-sm: 4px;
25
26
  --gx-radius: 8px;
26
27
  --gx-radius-lg: 12px;
28
+ --gx-radius-pill: 999px;
29
+ --gx-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
27
30
  --gx-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
31
+ --gx-gradient: linear-gradient(135deg, #0d9488, #0f766e);
32
+ --gx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
33
+ --gx-tag-bg: rgba(13, 148, 136, 0.1);
34
+ --gx-tag-border: rgba(13, 148, 136, 0.25);
35
+ --gx-tag-text: #0f766e;
36
+ --gx-info: #3b82f6;
28
37
  }
29
38
 
30
39
  [data-theme="dark"] {
@@ -44,5 +53,12 @@
44
53
  --gx-accent-dim: rgba(45, 212, 191, 0.12);
45
54
  --gx-nav-bg: rgba(15, 23, 42, 0.9);
46
55
  --gx-code-bg: #0f172a;
56
+ --gx-bg-elevated: #1e293b;
47
57
  --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
58
+ --gx-gradient: linear-gradient(135deg, #2dd4bf, #14b8a6);
59
+ --gx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
60
+ --gx-tag-bg: rgba(45, 212, 191, 0.1);
61
+ --gx-tag-border: rgba(45, 212, 191, 0.25);
62
+ --gx-tag-text: #2dd4bf;
63
+ --gx-info: #60a5fa;
48
64
  }