@genomicx/ui 0.3.0 → 0.4.0

package/dist/components/AppFooter.d.ts

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

package/dist/components/NavBar.d.ts

@@ -3,9 +3,11 @@ export interface NavBarProps {
     appName: string;
     appSubtitle?: string;
     version?: string;
+    /** Custom SVG icon element. Defaults to GenomicX rings logo. */
+    icon?: ReactNode;
     /** 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;
+export declare function NavBar({ appName, appSubtitle, version, icon, actions, mobileActions }: NavBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -1,9 +1,9 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as v, useRef as p } from "react";
+import { useState as x, useRef as p } from "react";
 import { Link as d } from "react-router-dom";
 import g from "react-hot-toast";
 function u({ disabled: n = !1 }) {
-  const [o, t] = v(
+  const [o, t] = x(
     () => document.documentElement.getAttribute("data-theme") || "dark"
   ), l = (r) => {
     t(r), document.documentElement.setAttribute("data-theme", r), localStorage.setItem("gx-theme", r);
@@ -31,16 +31,17 @@ function u({ disabled: n = !1 }) {
     )
   ] });
 }
-function f({ appName: n, appSubtitle: o, version: t, actions: l, mobileActions: r }) {
-  const [c, s] = v(!1);
+const f = () => /* @__PURE__ */ a("svg", { className: "gx-nav-logo-icon", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gx-accent)", strokeWidth: "2", children: [
+  /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "6" }),
+  /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "2" })
+] });
+function N({ appName: n, appSubtitle: o, version: t, icon: l, actions: r, mobileActions: i }) {
+  const [c, s] = x(!1);
   return /* @__PURE__ */ a("nav", { className: "gx-nav", children: [
     /* @__PURE__ */ e("div", { className: "gx-nav-inner", children: /* @__PURE__ */ a("div", { className: "gx-nav-row", children: [
       /* @__PURE__ */ a(d, { to: "/", className: "gx-nav-logo", children: [
-        /* @__PURE__ */ a("svg", { className: "gx-nav-logo-icon", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gx-accent)", strokeWidth: "2", children: [
-          /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "6" }),
-          /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "2" })
-        ] }),
+        l ?? /* @__PURE__ */ e(f, {}),
         /* @__PURE__ */ a("div", { children: [
           /* @__PURE__ */ a("h1", { className: "gx-nav-logo-name", children: [
             n,
@@ -53,7 +54,7 @@ function f({ appName: n, appSubtitle: o, version: t, actions: l, mobileActions:
         ] })
       ] }),
       /* @__PURE__ */ a("div", { className: "gx-nav-desktop", children: [
-        l,
+        r,
         /* @__PURE__ */ e(d, { to: "/about", className: "gx-nav-link", children: "About" }),
         /* @__PURE__ */ a("a", { href: "https://github.com/happykhan", target: "_blank", rel: "noopener noreferrer", className: "gx-nav-link", children: [
           "GitHub",
@@ -67,13 +68,13 @@ function f({ appName: n, appSubtitle: o, version: t, actions: l, mobileActions:
       ] })
     ] }) }),
     c && /* @__PURE__ */ a("div", { className: "gx-nav-dropdown", children: [
-      r,
+      i,
       /* @__PURE__ */ e(d, { to: "/about", onClick: () => s(!1), className: "gx-nav-dropdown-link", children: "About" }),
       /* @__PURE__ */ e("a", { href: "https://github.com/happykhan", target: "_blank", rel: "noopener noreferrer", className: "gx-nav-dropdown-link", children: "GitHub ↗" })
     ] })
   ] });
 }
-function N({ appName: n = "GenomicX", onReportBug: o }) {
+function k({ appName: n = "GenomicX", onReportBug: o, bugReportUrl: t }) {
   return /* @__PURE__ */ e("footer", { className: "gx-footer", children: /* @__PURE__ */ e("div", { className: "gx-footer-inner", children: /* @__PURE__ */ a("div", { className: "gx-footer-content", children: [
     /* @__PURE__ */ a("div", { className: "gx-footer-text", children: [
       /* @__PURE__ */ a("p", { className: "gx-footer-text-title", children: [
@@ -84,18 +85,19 @@ function N({ appName: n = "GenomicX", onReportBug: o }) {
     ] }),
     /* @__PURE__ */ a("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" }),
-      o && /* @__PURE__ */ e("button", { onClick: o, className: "gx-footer-link", children: "Report Bug" })
+      t && /* @__PURE__ */ e("a", { href: t, target: "_blank", rel: "noopener noreferrer", className: "gx-footer-link", children: "Report Bug" }),
+      o && !t && /* @__PURE__ */ e("button", { onClick: o, className: "gx-footer-link", children: "Report Bug" })
     ] })
   ] }) }) });
 }
-function B({ children: n, onReportBug: o, ...t }) {
+function C({ children: n, onReportBug: o, ...t }) {
   return /* @__PURE__ */ a("div", { style: { minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--gx-bg)" }, children: [
-    /* @__PURE__ */ e(f, { ...t }),
+    /* @__PURE__ */ e(N, { ...t }),
     /* @__PURE__ */ e("main", { style: { flex: 1 }, children: n }),
-    /* @__PURE__ */ e(N, { appName: t.appName, onReportBug: o })
+    /* @__PURE__ */ e(k, { appName: t.appName, onReportBug: o })
   ] });
 }
-function C({ logs: n, progress: o, title: t = "Console" }) {
+function $({ logs: n, progress: o, title: t = "Console" }) {
   const l = p(null), r = () => {
     navigator.clipboard.writeText(n.join(`
 `)).then(() => {
@@ -103,9 +105,9 @@ function C({ logs: n, progress: o, title: t = "Console" }) {
     }).catch(() => {
       g.error("Failed to copy logs");
     });
-  }, c = o && o.step !== "idle" && o.step !== "Complete!";
+  }, i = o && o.step !== "idle" && o.step !== "Complete!";
   return /* @__PURE__ */ a("div", { className: "gx-console", children: [
-    c && /* @__PURE__ */ a("div", { className: "gx-console-progress", children: [
+    i && /* @__PURE__ */ a("div", { className: "gx-console-progress", children: [
       /* @__PURE__ */ a("div", { className: "gx-console-progress-row", children: [
         /* @__PURE__ */ e("span", { className: "gx-console-progress-step", children: o.step }),
         /* @__PURE__ */ a("span", { className: "gx-console-progress-pct", children: [
@@ -130,11 +132,11 @@ function C({ logs: n, progress: o, title: t = "Console" }) {
         "Copy"
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { ref: l, className: "gx-console-body", children: n.length === 0 ? /* @__PURE__ */ e("div", { className: "gx-console-empty", children: "No logs yet..." }) : n.map((s, i) => /* @__PURE__ */ e("div", { className: "gx-console-line", children: s }, i)) })
+    /* @__PURE__ */ e("div", { ref: l, className: "gx-console-body", children: n.length === 0 ? /* @__PURE__ */ e("div", { className: "gx-console-empty", children: "No logs yet..." }) : n.map((c, s) => /* @__PURE__ */ e("div", { className: "gx-console-line", children: c }, s)) })
   ] });
 }
-const k = "https://static.genomicx.org/wasm", h = /* @__PURE__ */ new Map();
-async function b(n, o = k) {
+const b = "https://static.genomicx.org/wasm", h = /* @__PURE__ */ new Map();
+async function w(n, o = b) {
   const t = `${o}/${n}`;
   if (h.has(t)) return h.get(t);
   const [l, r] = await Promise.all([
@@ -143,40 +145,40 @@ async function b(n, o = k) {
   ]);
   if (!l.ok) throw new Error(`Failed to fetch ${n}.js: ${l.status}`);
   if (!r.ok) throw new Error(`Failed to fetch ${n}.wasm: ${r.status}`);
-  const [c, s] = await Promise.all([
+  const [i, c] = await Promise.all([
     l.text(),
     r.arrayBuffer()
-  ]), m = { factory: new Function("Module", c + "; return Module;")({}), wasmBinary: s };
+  ]), m = { factory: new Function("Module", i + "; return Module;")({}), wasmBinary: c };
   return h.set(t, m), m;
 }
-async function $(n, o) {
-  const { factory: t, wasmBinary: l } = await b(n, o), r = [], c = [], s = await t({
+async function j(n, o) {
+  const { factory: t, wasmBinary: l } = await w(n, o), r = [], i = [], c = await t({
     wasmBinary: l.slice(0),
-    print: (i) => r.push(i),
-    printErr: (i) => c.push(i),
+    print: (s) => r.push(s),
+    printErr: (s) => i.push(s),
     noInitialRun: !0
   });
-  return s._stdout = r, s._stderr = c, s;
+  return c._stdout = r, c._stderr = i, c;
 }
-function x(n, o) {
+function v(n, o) {
   const t = URL.createObjectURL(n), l = document.createElement("a");
   l.href = t, l.download = o, l.click(), URL.revokeObjectURL(t);
 }
-function j(n, o, t = "text/plain") {
-  x(new Blob([n], { type: t }), o);
+function A(n, o, t = "text/plain") {
+  v(new Blob([n], { type: t }), o);
 }
-function A(n, o) {
-  x(new Blob([n]), o);
+function z(n, o) {
+  v(new Blob([n]), o);
 }
 export {
-  N as AppFooter,
-  B as AppShell,
-  C as LogConsole,
-  f as NavBar,
+  k as AppFooter,
+  C as AppShell,
+  $ as LogConsole,
+  N as NavBar,
   u as ThemeToggle,
-  $ as createModuleInstance,
-  x as downloadBlob,
-  A as downloadBuffer,
-  j as downloadText,
-  b as loadWasmModule
+  j as createModuleInstance,
+  v as downloadBlob,
+  z as downloadBuffer,
+  A as downloadText,
+  w as loadWasmModule
 };

package/package.json

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

package/src/styles/tokens.css

@@ -20,6 +20,7 @@
   --gx-code-bg: #f1f5f9;
   --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   --gx-transition: 0.2s ease;
+  --gx-max-width: 1280px;
   --gx-radius: 8px;
   --gx-radius-lg: 12px;
 }