@genomicx/ui 0.7.0 → 0.8.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/NavBar.d.ts +3 -1
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +130 -102
  5. package/package.json +1 -1
  6. package/src/styles/components.css +23 -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/NavBar.d.ts CHANGED
@@ -5,9 +5,11 @@ export interface NavBarProps {
5
5
  version?: string;
6
6
  /** Custom SVG icon element. Defaults to GenomicX rings logo. */
7
7
  icon?: ReactNode;
8
+ /** GitHub repository URL shown in the nav header */
9
+ githubUrl?: string;
8
10
  /** Extra items in the desktop nav (right side, before theme toggle) */
9
11
  actions?: ReactNode;
10
12
  /** Extra items in the mobile dropdown */
11
13
  mobileActions?: ReactNode;
12
14
  }
13
- export declare function NavBar({ appName, appSubtitle, version, icon, actions, mobileActions }: NavBarProps): import("react/jsx-runtime").JSX.Element;
15
+ export declare function NavBar({ appName, appSubtitle, version, icon, githubUrl, actions, mobileActions }: NavBarProps): import("react/jsx-runtime").JSX.Element;
package/dist/index.d.ts CHANGED
@@ -9,6 +9,8 @@ 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';
12
14
  export { loadWasmModule, createModuleInstance } from './wasm/loader';
13
15
  export type { EmscriptenModule, WasmModuleFactory } from './wasm/types';
14
16
  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 w, 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
8
  ), r = (t) => {
9
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, actions: t, mobileActions: i }) {
40
- const [s, c] = f(!1);
39
+ function M({ appName: a, appSubtitle: n, version: o, icon: r, githubUrl: t, actions: c, mobileActions: s }) {
40
+ const [i, 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
- t,
57
+ c,
58
58
  /* @__PURE__ */ e(g, { to: "/about", className: "gx-nav-link", children: "About" }),
59
- /* @__PURE__ */ l("a", { href: "https://github.com/happykhan", 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, actions: t, mobile
64
64
  ] }),
65
65
  /* @__PURE__ */ l("div", { className: "gx-nav-mobile-toggle", children: [
66
66
  /* @__PURE__ */ e(N, {}),
67
- /* @__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" }) }) })
67
+ /* @__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" }) }) })
68
68
  ] })
69
69
  ] }) }),
70
- s && /* @__PURE__ */ l("div", { className: "gx-nav-dropdown", children: [
71
- i,
72
- /* @__PURE__ */ e(g, { to: "/about", onClick: () => c(!1), className: "gx-nav-dropdown-link", children: "About" }),
73
- /* @__PURE__ */ e("a", { href: "https://github.com/happykhan", target: "_blank", rel: "noopener noreferrer", className: "gx-nav-dropdown-link", children: "GitHub ↗" })
70
+ i && /* @__PURE__ */ l("div", { className: "gx-nav-dropdown", children: [
71
+ s,
72
+ /* @__PURE__ */ e(g, { to: "/about", onClick: () => m(!1), className: "gx-nav-dropdown-link", children: "About" }),
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 }) {
83
+ function C({ onClose: a, bugReportEmail: n, bugReportUrl: o, bugReportItems: r }) {
84
84
  const t = 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: [
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: t.map((i, s) => /* @__PURE__ */ e("li", { children: i }, s)) })
95
+ /* @__PURE__ */ e("ol", { className: "gx-modal-checklist-items", children: t.map((c, s) => /* @__PURE__ */ e("li", { children: c }, s)) })
96
96
  ] }),
97
97
  o && /* @__PURE__ */ l("p", { className: "gx-modal-github-hint", children: [
98
98
  "You can also open an issue on",
@@ -103,107 +103,107 @@ 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: t }) {
107
- const [i, s] = f(!1);
108
- function c() {
109
- a ? s(!0) : r && r();
106
+ function L({ appName: a = "GenomicX", bugReportEmail: n, bugReportUrl: o, onReportBug: r, bugReportItems: t }) {
107
+ const [c, s] = p(!1);
108
+ function i() {
109
+ n ? s(!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: c, className: "gx-footer-link", children: "Report Bug" })
122
+ (n || o || r) && /* @__PURE__ */ e("button", { onClick: i, 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
128
  onClose: () => s(!1),
129
- bugReportEmail: a,
129
+ bugReportEmail: n,
130
130
  bugReportUrl: o,
131
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 = w(null), t = () => {
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: t, 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((s, c) => /* @__PURE__ */ e("div", { className: "gx-console-line", children: s }, c)) })
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((s, i) => /* @__PURE__ */ e("div", { className: "gx-console-line", children: s }, i)) })
179
179
  ] });
180
180
  }
181
- function R({
182
- files: n,
183
- onFilesChange: a,
181
+ function _({
182
+ files: a,
183
+ onFilesChange: n,
184
184
  disabled: o = !1,
185
185
  multiple: r = !0,
186
186
  accept: t = ".fasta,.fa,.fna,.fsa,.fasta.gz,.fa.gz,.fna.gz",
187
- label: i = "Drop files here or click to browse",
187
+ label: c = "Drop files here or click to browse",
188
188
  hint: s,
189
- filterFn: c
189
+ filterFn: i
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
- c && (h = h.filter(c)), h.length > 0 && a(h);
195
+ i && (h = h.filter(i)), h.length > 0 && n(h);
196
196
  },
197
- [a, c]
198
- ), b = x(
197
+ [n, i]
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
- c && (h = h.filter(c)), h.length > 0 && a(h);
202
+ i && (h = h.filter(i)), h.length > 0 && n(h);
203
203
  },
204
- [a, c]
204
+ [n, i]
205
205
  );
206
- return /* @__PURE__ */ e("div", { className: "gx-file-upload", onDrop: b, onDragOver: (d) => d.preventDefault(), children: /* @__PURE__ */ l("label", { className: "gx-file-upload-area", children: [
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(
208
208
  "input",
209
209
  {
@@ -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 }),
235
+ a.length === 0 ? /* @__PURE__ */ l(x, { children: [
236
+ /* @__PURE__ */ e("div", { className: "gx-file-upload-label", children: c }),
237
237
  s && /* @__PURE__ */ e("div", { className: "gx-file-upload-hint", children: s })
238
- ] }) : /* @__PURE__ */ l(p, { children: [
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 S({ 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,84 @@ 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
+ ] });
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 })
264
291
  ] });
265
292
  }
266
293
  const A = "https://static.genomicx.org/wasm", u = /* @__PURE__ */ new Map();
267
- async function $(n, a = A) {
268
- const o = `${a}/${n}`;
294
+ async function z(a, n = A) {
295
+ const o = `${n}/${a}`;
269
296
  if (u.has(o)) return u.get(o);
270
297
  const [r, t] = await Promise.all([
271
- fetch(`${a}/${n}.js`),
272
- fetch(`${a}/${n}.wasm`)
298
+ fetch(`${n}/${a}.js`),
299
+ fetch(`${n}/${a}.wasm`)
273
300
  ]);
274
- if (!r.ok) throw new Error(`Failed to fetch ${n}.js: ${r.status}`);
275
- if (!t.ok) throw new Error(`Failed to fetch ${n}.wasm: ${t.status}`);
276
- const [i, s] = await Promise.all([
301
+ if (!r.ok) throw new Error(`Failed to fetch ${a}.js: ${r.status}`);
302
+ if (!t.ok) throw new Error(`Failed to fetch ${a}.wasm: ${t.status}`);
303
+ const [c, s] = await Promise.all([
277
304
  r.text(),
278
305
  t.arrayBuffer()
279
- ]), m = { factory: new Function("Module", i + "; return Module;")({}), wasmBinary: s };
306
+ ]), m = { factory: new Function("Module", c + "; return Module;")({}), wasmBinary: s };
280
307
  return u.set(o, m), m;
281
308
  }
282
- async function S(n, a) {
283
- const { factory: o, wasmBinary: r } = await $(n, a), t = [], i = [], s = await o({
309
+ async function I(a, n) {
310
+ const { factory: o, wasmBinary: r } = await z(a, n), t = [], c = [], s = await o({
284
311
  wasmBinary: r.slice(0),
285
- print: (c) => t.push(c),
286
- printErr: (c) => i.push(c),
312
+ print: (i) => t.push(i),
313
+ printErr: (i) => c.push(i),
287
314
  noInitialRun: !0
288
315
  });
289
- return s._stdout = t, s._stderr = i, s;
316
+ return s._stdout = t, s._stderr = c, s;
290
317
  }
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);
318
+ function k(a, n) {
319
+ const o = URL.createObjectURL(a), r = document.createElement("a");
320
+ r.href = o, r.download = n, r.click(), URL.revokeObjectURL(o);
294
321
  }
295
- function E(n, a, o = "text/plain") {
296
- k(new Blob([n], { type: o }), a);
322
+ function O(a, n, o = "text/plain") {
323
+ k(new Blob([a], { type: o }), n);
297
324
  }
298
- function I(n, a) {
299
- k(new Blob([n]), a);
325
+ function P(a, n) {
326
+ k(new Blob([a]), n);
300
327
  }
301
328
  export {
329
+ E as Alert,
302
330
  L as AppFooter,
303
- W as AppShell,
331
+ H as AppShell,
304
332
  C as BugReportModal,
305
- R as FileUpload,
306
- H as LogConsole,
333
+ _ as FileUpload,
334
+ R as LogConsole,
307
335
  M as NavBar,
308
- _ as ProgressBar,
336
+ S as ProgressBar,
309
337
  N as ThemeToggle,
310
- S as createModuleInstance,
338
+ I as createModuleInstance,
311
339
  k as downloadBlob,
312
- I as downloadBuffer,
313
- E as downloadText,
314
- $ as loadWasmModule
340
+ P as downloadBuffer,
341
+ O as downloadText,
342
+ z as loadWasmModule
315
343
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@genomicx/ui",
3
- "version": "0.7.0",
3
+ "version": "0.8.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,26 @@ 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; }
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
  }