@luxfi/ui 7.4.0 → 7.4.2

package/dist/vite.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+// src/vite.ts
+var DEDUPE = [
+  "react",
+  "react-dom",
+  "@tanstack/react-query",
+  "@hanzo/gui",
+  "@hanzogui/core",
+  "@hanzogui/web"
+];
+var INCLUDE = [
+  "react-native-web",
+  "@react-native/normalize-color",
+  "@hanzo/gui",
+  "@hanzogui/core",
+  "@luxfi/ui"
+];
+function luxUi(options = {}) {
+  return {
+    name: "@luxfi/ui",
+    config: () => ({
+      // The engine branches on these at module scope; without them it takes the
+      // native path in a browser bundle.
+      define: {
+        "process.env.EXPO_OS": JSON.stringify("web"),
+        "process.env.IS_WEB": JSON.stringify("true")
+      },
+      resolve: {
+        alias: { "react-native": "react-native-web" },
+        dedupe: [.../* @__PURE__ */ new Set([...DEDUPE, ...options.dedupe ?? []])]
+      },
+      optimizeDeps: {
+        include: [.../* @__PURE__ */ new Set([...INCLUDE, ...options.include ?? []])]
+      }
+    })
+  };
+}
+
+exports.luxUi = luxUi;

package/dist/vite.d.cts

@@ -0,0 +1,29 @@
+interface LuxUiViteOptions {
+    /**
+     * Extra packages to keep to a single physical copy. React, the gui engine and
+     * TanStack Query are always deduped.
+     */
+    readonly dedupe?: ReadonlyArray<string>;
+    /**
+     * Extra packages to pre-bundle. The engine, react-native-web and the CJS-only
+     * colour helper are always included.
+     */
+    readonly include?: ReadonlyArray<string>;
+}
+/** Minimal structural shape of a Vite plugin — avoids a hard `vite` type dep. */
+interface LuxUiVitePlugin {
+    readonly name: string;
+    readonly config: () => {
+        define: Record<string, string>;
+        resolve: {
+            alias: Record<string, string>;
+            dedupe: Array<string>;
+        };
+        optimizeDeps: {
+            include: Array<string>;
+        };
+    };
+}
+declare function luxUi(options?: LuxUiViteOptions): LuxUiVitePlugin;
+
+export { type LuxUiViteOptions, luxUi };

package/dist/vite.d.ts

@@ -0,0 +1,29 @@
+interface LuxUiViteOptions {
+    /**
+     * Extra packages to keep to a single physical copy. React, the gui engine and
+     * TanStack Query are always deduped.
+     */
+    readonly dedupe?: ReadonlyArray<string>;
+    /**
+     * Extra packages to pre-bundle. The engine, react-native-web and the CJS-only
+     * colour helper are always included.
+     */
+    readonly include?: ReadonlyArray<string>;
+}
+/** Minimal structural shape of a Vite plugin — avoids a hard `vite` type dep. */
+interface LuxUiVitePlugin {
+    readonly name: string;
+    readonly config: () => {
+        define: Record<string, string>;
+        resolve: {
+            alias: Record<string, string>;
+            dedupe: Array<string>;
+        };
+        optimizeDeps: {
+            include: Array<string>;
+        };
+    };
+}
+declare function luxUi(options?: LuxUiViteOptions): LuxUiVitePlugin;
+
+export { type LuxUiViteOptions, luxUi };

package/dist/vite.js

@@ -0,0 +1,38 @@
+// src/vite.ts
+var DEDUPE = [
+  "react",
+  "react-dom",
+  "@tanstack/react-query",
+  "@hanzo/gui",
+  "@hanzogui/core",
+  "@hanzogui/web"
+];
+var INCLUDE = [
+  "react-native-web",
+  "@react-native/normalize-color",
+  "@hanzo/gui",
+  "@hanzogui/core",
+  "@luxfi/ui"
+];
+function luxUi(options = {}) {
+  return {
+    name: "@luxfi/ui",
+    config: () => ({
+      // The engine branches on these at module scope; without them it takes the
+      // native path in a browser bundle.
+      define: {
+        "process.env.EXPO_OS": JSON.stringify("web"),
+        "process.env.IS_WEB": JSON.stringify("true")
+      },
+      resolve: {
+        alias: { "react-native": "react-native-web" },
+        dedupe: [.../* @__PURE__ */ new Set([...DEDUPE, ...options.dedupe ?? []])]
+      },
+      optimizeDeps: {
+        include: [.../* @__PURE__ */ new Set([...INCLUDE, ...options.include ?? []])]
+      }
+    })
+  };
+}
+
+export { luxUi };

package/dist/white-label.cjs

@@ -0,0 +1,132 @@
+'use strict';
+
+// src/white-label.ts
+var LUX_BRAND = {
+  lux: "#7000FF",
+  zoo: "#6C5EFB",
+  hanzo: "#EA580C",
+  pars: "#1C3879",
+  // bootno.de is its own white label with its own IdP (id.bootno.de) — accent
+  // taken from the bootnode console's own brand default, not invented here.
+  bootnode: "#3B82F6"
+};
+var PARS_GOLD = "#C8A45C";
+var ORGS = {
+  lux: {
+    org: "lux",
+    name: "Lux",
+    domain: "lux.network",
+    iamDomain: "lux.id",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  zoo: {
+    org: "zoo",
+    name: "Zoo",
+    domain: "zoo.ngo",
+    // Zoo's IdP is `id.zoo.network`, not a `zoo.id` apex — the one row in this
+    // table where the issuer is not `<org>.id`, and the one every hand-rolled
+    // per-app branding map got wrong.
+    iamDomain: "id.zoo.network",
+    accent: LUX_BRAND.zoo,
+    accentForeground: "#FFFFFF"
+  },
+  bootnode: {
+    org: "bootnode",
+    name: "Bootnode",
+    domain: "bootno.de",
+    iamDomain: "id.bootno.de",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  hanzo: {
+    org: "hanzo",
+    name: "Hanzo",
+    domain: "hanzo.ai",
+    iamDomain: "hanzo.id",
+    accent: LUX_BRAND.hanzo,
+    accentForeground: "#FFFFFF"
+  },
+  pars: {
+    org: "pars",
+    name: "Pars",
+    domain: "pars.id",
+    iamDomain: "pars.id",
+    accent: LUX_BRAND.pars,
+    accentForeground: PARS_GOLD
+  }
+};
+var DOMAIN_ORG = [
+  ["lux.network", "lux"],
+  ["lux.cloud", "lux"],
+  ["lux.id", "lux"],
+  ["lux.finance", "lux"],
+  ["zoo.ngo", "zoo"],
+  ["zoo.network", "zoo"],
+  ["zoo.cloud", "zoo"],
+  ["zoo.id", "zoo"],
+  ["hanzo.ai", "hanzo"],
+  ["hanzo.cloud", "hanzo"],
+  ["hanzo.id", "hanzo"],
+  ["pars.id", "pars"],
+  ["parsdao.org", "pars"],
+  ["bootno.de", "bootnode", "platform"]
+];
+var DEFAULT_ORG = "lux";
+function normalizeHost(host) {
+  const noPort = host.trim().toLowerCase().split(":")[0] ?? "";
+  return noPort.replace(/\.$/, "");
+}
+function isUnder(host, domain) {
+  return host === domain || host.endsWith(`.${domain}`);
+}
+function matchDomain(host) {
+  let best;
+  for (const entry of DOMAIN_ORG) {
+    if (isUnder(host, entry[0]) && (!best || entry[0].length > best[0].length)) {
+      best = entry;
+    }
+  }
+  return best;
+}
+function appSlug(host, domain, apexApp) {
+  const sub = host === domain ? "" : host.slice(0, -(domain.length + 1));
+  const leftmost = sub.split(".")[0] ?? "";
+  if (leftmost && leftmost !== "www") return leftmost;
+  if (apexApp) return apexApp;
+  const label = domain.split(".")[0] ?? "";
+  const tld = domain.split(".").slice(1).join(".");
+  return tld.split(".")[0] || label;
+}
+function isLocal(host) {
+  return host === "localhost" || host.endsWith(".localhost") || host === "127.0.0.1" || host === "0.0.0.0" || host === "[::1]" || host.endsWith(".local");
+}
+function resolveWhiteLabel(host) {
+  const h = normalizeHost(host ?? "");
+  const match = h ? matchDomain(h) : void 0;
+  const org = match ? match[1] : DEFAULT_ORG;
+  const identity = ORGS[org];
+  const app = match ? appSlug(h, match[0], match[2]) : h && isLocal(h) ? "local" : "app";
+  return {
+    ...identity,
+    host: h,
+    app,
+    theme: `dark_${org}`,
+    issuer: `https://${identity.iamDomain}`,
+    clientId: `${org}-${app}`
+  };
+}
+function currentHost() {
+  return typeof window === "undefined" ? "" : window.location.host;
+}
+function orgIdentity(org) {
+  return ORGS[org];
+}
+
+exports.DEFAULT_ORG = DEFAULT_ORG;
+exports.LUX_BRAND = LUX_BRAND;
+exports.PARS_GOLD = PARS_GOLD;
+exports.currentHost = currentHost;
+exports.orgIdentity = orgIdentity;
+exports.orgs = ORGS;
+exports.resolveWhiteLabel = resolveWhiteLabel;

package/dist/white-label.d.cts

@@ -0,0 +1,59 @@
+declare const LUX_BRAND: {
+    readonly lux: "#7000FF";
+    readonly zoo: "#6C5EFB";
+    readonly hanzo: "#EA580C";
+    readonly pars: "#1C3879";
+    readonly bootnode: "#3B82F6";
+};
+declare const PARS_GOLD = "#C8A45C";
+type LuxBrand = keyof typeof LUX_BRAND;
+type Org = LuxBrand;
+interface OrgIdentity {
+    /** Org id — also the gui child-theme suffix (`dark_lux`, `dark_zoo`, …). */
+    readonly org: Org;
+    /** Display name for chrome (header, title, sign-in copy). */
+    readonly name: string;
+    /** Canonical apex domain. */
+    readonly domain: string;
+    /** IAM/OIDC host. The issuer is `https://` + this. */
+    readonly iamDomain: string;
+    /** Brand accent hex — the same value the gui child-theme row is built from. */
+    readonly accent: string;
+    /** Foreground used on top of the accent. */
+    readonly accentForeground: string;
+}
+declare const ORGS: Readonly<Record<Org, OrgIdentity>>;
+declare const DEFAULT_ORG: Org;
+interface WhiteLabel extends OrgIdentity {
+    /** Hostname the identity was resolved from, port stripped, lowercased. */
+    readonly host: string;
+    /** App slug taken from the hostname — `mpc.lux.cloud` → `mpc`. */
+    readonly app: string;
+    /** gui child-theme row to hand GuiProvider — `dark_lux`, `dark_zoo`, … */
+    readonly theme: string;
+    /** OIDC issuer — `https://lux.id`. */
+    readonly issuer: string;
+    /** IAM client id, `<org>-<app>` per the fleet naming scheme — `lux-mpc`. */
+    readonly clientId: string;
+}
+/**
+ * Resolve the full white-label identity from a Host header value.
+ *
+ * Pure and total: an unknown or missing host falls back to the Lux row rather
+ * than throwing, so a preview URL or a health probe never blanks the UI.
+ *
+ *   resolveWhiteLabel('mpc.lux.cloud')  // org lux,  clientId lux-mpc,   issuer https://lux.id
+ *   resolveWhiteLabel('zoo.network')    // org zoo,  clientId zoo-network, issuer https://zoo.id
+ *   resolveWhiteLabel('id.pars.id')     // org pars, clientId pars-id,   issuer https://pars.id
+ */
+declare function resolveWhiteLabel(host?: string | null): WhiteLabel;
+/**
+ * The current host in a browser, or '' during SSR / prerender.
+ * Server code must pass `req.headers.host` to resolveWhiteLabel explicitly —
+ * there is no ambient request here, and guessing would bake in a brand.
+ */
+declare function currentHost(): string;
+/** Identity for the org id itself, for the rare surface that is not host-routed. */
+declare function orgIdentity(org: Org): OrgIdentity;
+
+export { DEFAULT_ORG, LUX_BRAND, type LuxBrand, type Org, type OrgIdentity, PARS_GOLD, type WhiteLabel, currentHost, orgIdentity, ORGS as orgs, resolveWhiteLabel };

package/dist/white-label.d.ts

@@ -0,0 +1,59 @@
+declare const LUX_BRAND: {
+    readonly lux: "#7000FF";
+    readonly zoo: "#6C5EFB";
+    readonly hanzo: "#EA580C";
+    readonly pars: "#1C3879";
+    readonly bootnode: "#3B82F6";
+};
+declare const PARS_GOLD = "#C8A45C";
+type LuxBrand = keyof typeof LUX_BRAND;
+type Org = LuxBrand;
+interface OrgIdentity {
+    /** Org id — also the gui child-theme suffix (`dark_lux`, `dark_zoo`, …). */
+    readonly org: Org;
+    /** Display name for chrome (header, title, sign-in copy). */
+    readonly name: string;
+    /** Canonical apex domain. */
+    readonly domain: string;
+    /** IAM/OIDC host. The issuer is `https://` + this. */
+    readonly iamDomain: string;
+    /** Brand accent hex — the same value the gui child-theme row is built from. */
+    readonly accent: string;
+    /** Foreground used on top of the accent. */
+    readonly accentForeground: string;
+}
+declare const ORGS: Readonly<Record<Org, OrgIdentity>>;
+declare const DEFAULT_ORG: Org;
+interface WhiteLabel extends OrgIdentity {
+    /** Hostname the identity was resolved from, port stripped, lowercased. */
+    readonly host: string;
+    /** App slug taken from the hostname — `mpc.lux.cloud` → `mpc`. */
+    readonly app: string;
+    /** gui child-theme row to hand GuiProvider — `dark_lux`, `dark_zoo`, … */
+    readonly theme: string;
+    /** OIDC issuer — `https://lux.id`. */
+    readonly issuer: string;
+    /** IAM client id, `<org>-<app>` per the fleet naming scheme — `lux-mpc`. */
+    readonly clientId: string;
+}
+/**
+ * Resolve the full white-label identity from a Host header value.
+ *
+ * Pure and total: an unknown or missing host falls back to the Lux row rather
+ * than throwing, so a preview URL or a health probe never blanks the UI.
+ *
+ *   resolveWhiteLabel('mpc.lux.cloud')  // org lux,  clientId lux-mpc,   issuer https://lux.id
+ *   resolveWhiteLabel('zoo.network')    // org zoo,  clientId zoo-network, issuer https://zoo.id
+ *   resolveWhiteLabel('id.pars.id')     // org pars, clientId pars-id,   issuer https://pars.id
+ */
+declare function resolveWhiteLabel(host?: string | null): WhiteLabel;
+/**
+ * The current host in a browser, or '' during SSR / prerender.
+ * Server code must pass `req.headers.host` to resolveWhiteLabel explicitly —
+ * there is no ambient request here, and guessing would bake in a brand.
+ */
+declare function currentHost(): string;
+/** Identity for the org id itself, for the rare surface that is not host-routed. */
+declare function orgIdentity(org: Org): OrgIdentity;
+
+export { DEFAULT_ORG, LUX_BRAND, type LuxBrand, type Org, type OrgIdentity, PARS_GOLD, type WhiteLabel, currentHost, orgIdentity, ORGS as orgs, resolveWhiteLabel };

package/dist/white-label.js

@@ -0,0 +1,124 @@
+// src/white-label.ts
+var LUX_BRAND = {
+  lux: "#7000FF",
+  zoo: "#6C5EFB",
+  hanzo: "#EA580C",
+  pars: "#1C3879",
+  // bootno.de is its own white label with its own IdP (id.bootno.de) — accent
+  // taken from the bootnode console's own brand default, not invented here.
+  bootnode: "#3B82F6"
+};
+var PARS_GOLD = "#C8A45C";
+var ORGS = {
+  lux: {
+    org: "lux",
+    name: "Lux",
+    domain: "lux.network",
+    iamDomain: "lux.id",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  zoo: {
+    org: "zoo",
+    name: "Zoo",
+    domain: "zoo.ngo",
+    // Zoo's IdP is `id.zoo.network`, not a `zoo.id` apex — the one row in this
+    // table where the issuer is not `<org>.id`, and the one every hand-rolled
+    // per-app branding map got wrong.
+    iamDomain: "id.zoo.network",
+    accent: LUX_BRAND.zoo,
+    accentForeground: "#FFFFFF"
+  },
+  bootnode: {
+    org: "bootnode",
+    name: "Bootnode",
+    domain: "bootno.de",
+    iamDomain: "id.bootno.de",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  hanzo: {
+    org: "hanzo",
+    name: "Hanzo",
+    domain: "hanzo.ai",
+    iamDomain: "hanzo.id",
+    accent: LUX_BRAND.hanzo,
+    accentForeground: "#FFFFFF"
+  },
+  pars: {
+    org: "pars",
+    name: "Pars",
+    domain: "pars.id",
+    iamDomain: "pars.id",
+    accent: LUX_BRAND.pars,
+    accentForeground: PARS_GOLD
+  }
+};
+var DOMAIN_ORG = [
+  ["lux.network", "lux"],
+  ["lux.cloud", "lux"],
+  ["lux.id", "lux"],
+  ["lux.finance", "lux"],
+  ["zoo.ngo", "zoo"],
+  ["zoo.network", "zoo"],
+  ["zoo.cloud", "zoo"],
+  ["zoo.id", "zoo"],
+  ["hanzo.ai", "hanzo"],
+  ["hanzo.cloud", "hanzo"],
+  ["hanzo.id", "hanzo"],
+  ["pars.id", "pars"],
+  ["parsdao.org", "pars"],
+  ["bootno.de", "bootnode", "platform"]
+];
+var DEFAULT_ORG = "lux";
+function normalizeHost(host) {
+  const noPort = host.trim().toLowerCase().split(":")[0] ?? "";
+  return noPort.replace(/\.$/, "");
+}
+function isUnder(host, domain) {
+  return host === domain || host.endsWith(`.${domain}`);
+}
+function matchDomain(host) {
+  let best;
+  for (const entry of DOMAIN_ORG) {
+    if (isUnder(host, entry[0]) && (!best || entry[0].length > best[0].length)) {
+      best = entry;
+    }
+  }
+  return best;
+}
+function appSlug(host, domain, apexApp) {
+  const sub = host === domain ? "" : host.slice(0, -(domain.length + 1));
+  const leftmost = sub.split(".")[0] ?? "";
+  if (leftmost && leftmost !== "www") return leftmost;
+  if (apexApp) return apexApp;
+  const label = domain.split(".")[0] ?? "";
+  const tld = domain.split(".").slice(1).join(".");
+  return tld.split(".")[0] || label;
+}
+function isLocal(host) {
+  return host === "localhost" || host.endsWith(".localhost") || host === "127.0.0.1" || host === "0.0.0.0" || host === "[::1]" || host.endsWith(".local");
+}
+function resolveWhiteLabel(host) {
+  const h = normalizeHost(host ?? "");
+  const match = h ? matchDomain(h) : void 0;
+  const org = match ? match[1] : DEFAULT_ORG;
+  const identity = ORGS[org];
+  const app = match ? appSlug(h, match[0], match[2]) : h && isLocal(h) ? "local" : "app";
+  return {
+    ...identity,
+    host: h,
+    app,
+    theme: `dark_${org}`,
+    issuer: `https://${identity.iamDomain}`,
+    clientId: `${org}-${app}`
+  };
+}
+function currentHost() {
+  return typeof window === "undefined" ? "" : window.location.host;
+}
+function orgIdentity(org) {
+  return ORGS[org];
+}
+
+export { DEFAULT_ORG, LUX_BRAND, PARS_GOLD, currentHost, orgIdentity, ORGS as orgs, resolveWhiteLabel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.4.0",
+  "version": "7.4.2",
   "description": "Cross-platform DeFi UI components built on @hanzo/gui (Tamagui). Native mobile + web.",
   "type": "module",
   "license": "MIT",
@@ -35,6 +35,46 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./gui": {
+      "types": "./dist/gui.d.ts",
+      "import": "./dist/gui.js",
+      "require": "./dist/gui.cjs"
+    },
+    "./white-label": {
+      "types": "./dist/white-label.d.ts",
+      "import": "./dist/white-label.js",
+      "require": "./dist/white-label.cjs"
+    },
+    "./iam": {
+      "types": "./dist/iam.d.ts",
+      "import": "./dist/iam.js",
+      "require": "./dist/iam.cjs"
+    },
+    "./identity": {
+      "types": "./dist/identity.d.ts",
+      "import": "./dist/identity.js",
+      "require": "./dist/identity.cjs"
+    },
+    "./chrome": {
+      "types": "./dist/chrome.d.ts",
+      "import": "./dist/chrome.js",
+      "require": "./dist/chrome.cjs"
+    },
+    "./use-narrow": {
+      "types": "./dist/use-narrow.d.ts",
+      "import": "./dist/use-narrow.js",
+      "require": "./dist/use-narrow.cjs"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js",
+      "require": "./dist/vite.cjs"
+    },
+    "./next": {
+      "types": "./dist/next.d.ts",
+      "import": "./dist/next.js",
+      "require": "./dist/next.cjs"
+    },
     "./tokens.css": "./tokens.css",
     "./accordion": {
       "types": "./dist/accordion.d.ts",
@@ -111,6 +151,11 @@
       "import": "./dist/icon-button.js",
       "require": "./dist/icon-button.cjs"
     },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js",
+      "require": "./dist/icons.cjs"
+    },
     "./image": {
       "types": "./dist/image.d.ts",
       "import": "./dist/image.js",
@@ -250,7 +295,9 @@
     "build": "tsup",
     "build:check": "tsc --noEmit",
     "clean": "rm -rf dist",
-    "dev": "tsup --watch"
+    "dev": "tsup --watch",
+    "harness": "vite --config harness/vite.config.ts",
+    "test": "playwright test"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -266,41 +313,60 @@
     "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@tanstack/react-query": "^5.76.0",
     "@uidotdev/usehooks": "^2.4.1",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.31.0",
-    "react-icons": "^5.4.0",
+    "lucide-react": "^1.27.0",
     "sonner": "^2.0.0",
-    "tailwind-merge": "^3.0.0",
-    "@tanstack/react-query": "^5.76.0",
-    "@hanzo/gui": "^7.3.0",
-    "@hanzogui/config": "^7.3.0",
-    "@hanzogui/core": "^7.3.0",
-    "@hanzogui/web": "^7.3.0"
+    "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19",
     "@hanzo/gui": "^7.3.0",
+    "@hanzogui/colors": "^7.3.0",
     "@hanzogui/config": "^7.3.0",
+    "@hanzogui/core": "^7.3.0",
+    "@hanzogui/lucide-icons-2": "^7.3.0",
     "@hanzogui/themes": "^7.3.0",
-    "@hanzogui/colors": "^7.3.0",
-    "@hanzogui/lucide-icons-2": "^7.3.0"
+    "@hanzogui/web": "^7.3.0",
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "peerDependenciesMeta": {
-    "@hanzogui/themes": { "optional": true },
-    "@hanzogui/colors": { "optional": true },
-    "@hanzogui/lucide-icons-2": { "optional": true }
+    "@hanzogui/themes": {
+      "optional": true
+    },
+    "@hanzogui/colors": {
+      "optional": true
+    },
+    "@hanzogui/lucide-icons-2": {
+      "optional": true
+    },
+    "@hanzogui/core": {
+      "optional": true
+    },
+    "@hanzogui/web": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@hanzo/gui": "7.3.0",
+    "@hanzogui/colors": "7.3.0",
     "@hanzogui/config": "7.3.0",
+    "@hanzogui/core": "7.3.0",
     "@hanzogui/themes": "7.3.0",
-    "@hanzogui/colors": "7.3.0",
+    "@hanzogui/web": "7.3.0",
+    "@playwright/test": "^1.58",
+    "@tailwindcss/vite": "^4",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-native-web": "^0.21.0",
+    "tailwindcss": "^4",
     "tsup": "^8.5.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^8"
   }
-}
+}