@decentnetwork/lan 0.1.130 → 0.1.132

package/dist/cli/commands.d.ts

@@ -297,6 +297,7 @@ export declare function cmdProxyRouter(args: {
     mode?: string;
     all?: boolean;
     routes?: string;
+    egress?: string;
     configDir?: string;
 }): Promise<void>;
 /**

package/dist/cli/commands.js

@@ -15,6 +15,7 @@ import { AclEngine } from "../acl/acl-engine.js";
 import { AuditLog } from "../acl/audit.js";
 import yaml from "js-yaml";
 import { startMultiExitRouter } from "../proxy/multi-exit-router.js";
+import { resolveEgressBindIp } from "../proxy/egress.js";
 import { startFriendUi } from "../ui/server.js";
 /**
  * Refuse to open a second Carrier peer with this identity if the
@@ -1321,6 +1322,17 @@ export async function cmdProxyRouter(args) {
         }
         defaultRegion = "direct";
     }
+    // Egress source binding for the DIRECT (no-region) path — keep it on the
+    // physical NIC instead of a Tailscale/overlay interface. CLI --egress wins
+    // over config proxy.egress.
+    const egressOpt = args.egress ?? config.proxy?.egress;
+    const egressBindIp = resolveEgressBindIp(egressOpt);
+    if (egressOpt && egressBindIp) {
+        console.log(`Direct egress bound to physical source ${egressBindIp} (egress=${egressOpt}).`);
+    }
+    else if (egressOpt) {
+        console.log(`egress=${egressOpt} requested but no physical NIC address found; using OS default egress.`);
+    }
     startMultiExitRouter({
         exits,
         regions,
@@ -1328,6 +1340,7 @@ export async function cmdProxyRouter(args) {
         listenHost: args.listen ?? "127.0.0.1",
         listenPort: args.port ?? 8889,
         mode,
+        egressBindIp,
     });
     // Keep the process alive; the router runs until Ctrl-C / signal.
     await new Promise(() => { });

package/dist/cli/index.js

@@ -329,6 +329,7 @@ async function main() {
         .option("listen", { type: "string", default: "127.0.0.1", describe: "Listen host (use 0.0.0.0 to reach from Windows → WSL)" })
         .option("mode", { choices: ["loadbalance", "failover"], default: "loadbalance" })
         .option("all", { type: "boolean", default: false, describe: "Route ALL hosts through exits (default: China-only split tunnel)" })
+        .option("egress", { type: "string", describe: "Bind the DIRECT internet dial to the physical NIC: 'physical' (auto) or an explicit source IPv4 — keeps egress off Tailscale/overlay" })
         .option("config-dir", { type: "string" }), async (argv) => {
         await cmdProxyRouter({
             exit: argv.exit,
@@ -337,6 +338,7 @@ async function main() {
             listen: argv.listen,
             mode: argv.mode,
             all: argv.all,
+            egress: argv.egress,
             configDir: argv["config-dir"],
         });
     })

package/dist/daemon/server.js

@@ -14,6 +14,7 @@ import { AuditLog } from "../acl/audit.js";
 import { AclEngine } from "../acl/acl-engine.js";
 import { PacketRouter } from "../router/packet-router.js";
 import { ConnectProxy } from "../proxy/connect-proxy.js";
+import { resolveEgressBindIp } from "../proxy/egress.js";
 import { DoraIntegration } from "../dora/dora-integration.js";
 import { DnsServer } from "../dns/server.js";
 import { IpcServer, ipcSocketPath } from "./ipc.js";
@@ -785,11 +786,19 @@ export class DaemonServer {
                 }
                 else {
                     try {
+                        const egressBindIp = resolveEgressBindIp(this.config.proxy.egress);
+                        if (this.config.proxy.egress && egressBindIp) {
+                            this.logger.info(`Proxy egress bound to physical source ${egressBindIp} (config proxy.egress=${this.config.proxy.egress})`);
+                        }
+                        else if (this.config.proxy.egress) {
+                            this.logger.warn(`Proxy egress=${this.config.proxy.egress} requested but no physical NIC address found; using OS default egress`);
+                        }
                         this.connectProxy = new ConnectProxy({
                             bindIp: tunIp,
                             port: this.config.proxy.port,
                             allowHosts: this.config.proxy.allowHosts ?? [],
                             allowConnectPorts: this.config.proxy.allowConnectPorts,
+                            egressBindIp,
                             resolvePeerName: (srcIp) => this.ipam.resolveIp(srcIp)?.name,
                             // Per-tunnel audit is opt-in: on a busy exit it floods the
                             // log (the 13 GB audit.log bug). Off by default; ACL and

package/dist/proxy/connect-proxy.d.ts

@@ -31,6 +31,10 @@ export interface ConnectProxyOptions {
     allowHosts?: string[];
     /** TCP ports the proxy will dial upstream. Defaults to [443, 80]. */
     allowConnectPorts?: number[];
+    /** Bind outbound (upstream) dials to this source IP so egress stays on the
+     *  physical NIC instead of a Tailscale/overlay interface. Undefined = OS
+     *  chooses. Resolve via resolveEgressBindIp() from config `proxy.egress`. */
+    egressBindIp?: string;
     /** Hook for resolving a source IP to a friendly peer name (audit/log). */
     resolvePeerName?: (sourceIp: string) => string | undefined;
     /** Called when a tunnel opens. */

package/dist/proxy/connect-proxy.js

@@ -20,8 +20,8 @@
  * peer is granted port 8888).
  */
 import http from "http";
-import net from "net";
 import { Logger } from "../utils/logger.js";
+import { egressConnect } from "./egress.js";
 export class ConnectProxy {
     opts;
     server = null;
@@ -128,7 +128,7 @@ export class ConnectProxy {
         let closed = false;
         let lastBytes = -1;
         let idleTimer;
-        const upstream = net.connect(port, host);
+        const upstream = egressConnect(port, host, this.opts.egressBindIp);
         const tearDown = (reason) => {
             if (closed)
                 return;

package/dist/proxy/egress.d.ts

@@ -0,0 +1,11 @@
+import net from "net";
+/** Primary physical (non-overlay, non-CGNAT) IPv4 — the address to bind egress
+ *  to so traffic leaves the real NIC instead of a Tailscale/overlay interface.
+ *  Prefers a public/global address over an RFC1918 one when both exist. */
+export declare function physicalEgressIp(): string | undefined;
+/** Resolve the configured egress option to a concrete bind IP (or undefined to
+ *  let the OS choose). Accepts "physical"/true (auto-pick the real NIC) or an
+ *  explicit IPv4 string. */
+export declare function resolveEgressBindIp(opt?: string | boolean): string | undefined;
+/** net.connect, optionally binding the outbound source to `bindIp`. */
+export declare function egressConnect(port: number, host: string, bindIp?: string): net.Socket;

package/dist/proxy/egress.js

@@ -0,0 +1,65 @@
+// Egress source binding for exit proxies.
+//
+// When a node acts as an internet exit (e.g. the CCTV exit), its outbound dials
+// follow the host's routing table. If the host also runs Tailscale / a VPN with
+// an exit node, that traffic can hairpin out through the overlay instead of the
+// real NIC — adding latency and defeating the point of a local exit. Binding the
+// dial's source address to the physical NIC's IP keeps egress on the underlying
+// physical network. Opt-in via `proxy.egress` in config: "physical" (auto-pick
+// the real NIC) or an explicit source IP.
+//
+// NOTE: source-IP binding picks the egress interface only when the routing table
+// would otherwise pick a virtual one by source selection. If the host installs a
+// VPN *default route* (e.g. Tailscale exit-node mode), the kernel still routes by
+// destination — in that case disable the host's exit-node setting or add a policy
+// route. This option covers the common multi-homed case (physical NIC + overlay).
+import net from "net";
+import { networkInterfaces } from "os";
+// Overlay / virtual interfaces whose addresses must NOT be used for egress.
+const VIRTUAL_IFACE_RE = /^(utun|tun|tap|wg|tailscale|ts\d|zt|ham|agentnet|awdl|llw|gif|stf|bridge|vnic|vmnet|veth|docker|br-|virbr|kube|cni|flannel|cali)/i;
+function isCgnat(addr) {
+    const o = addr.split(".").map(Number);
+    return o.length === 4 && o[0] === 100 && o[1] >= 64 && o[1] <= 127;
+}
+// Never usable as an egress source: CGNAT (Tailscale), link-local/APIPA
+// (169.254), and loopback.
+function isUnusableEgress(addr) {
+    return isCgnat(addr) || addr.startsWith("169.254.") || addr.startsWith("127.");
+}
+/** Primary physical (non-overlay, non-CGNAT) IPv4 — the address to bind egress
+ *  to so traffic leaves the real NIC instead of a Tailscale/overlay interface.
+ *  Prefers a public/global address over an RFC1918 one when both exist. */
+export function physicalEgressIp() {
+    const candidates = [];
+    for (const [name, list] of Object.entries(networkInterfaces())) {
+        if (!list || VIRTUAL_IFACE_RE.test(name))
+            continue;
+        for (const info of list) {
+            if (info.family !== "IPv4" || info.internal)
+                continue;
+            if (isUnusableEgress(info.address))
+                continue;
+            candidates.push(info.address);
+        }
+    }
+    if (candidates.length === 0)
+        return undefined;
+    // Prefer a non-RFC1918 (public) address — that's the real internet-facing NIC.
+    const isPrivate = (a) => a.startsWith("10.") || a.startsWith("192.168.") ||
+        /^172\.(1[6-9]|2\d|3[01])\./.test(a);
+    return candidates.find((a) => !isPrivate(a)) ?? candidates[0];
+}
+/** Resolve the configured egress option to a concrete bind IP (or undefined to
+ *  let the OS choose). Accepts "physical"/true (auto-pick the real NIC) or an
+ *  explicit IPv4 string. */
+export function resolveEgressBindIp(opt) {
+    if (opt === true || opt === "physical")
+        return physicalEgressIp();
+    if (typeof opt === "string" && opt && opt !== "physical")
+        return opt;
+    return undefined;
+}
+/** net.connect, optionally binding the outbound source to `bindIp`. */
+export function egressConnect(port, host, bindIp) {
+    return bindIp ? net.connect({ port, host, localAddress: bindIp }) : net.connect(port, host);
+}

package/dist/proxy/multi-exit-router.d.ts

@@ -28,6 +28,11 @@ export interface MultiExitRouterOptions {
     listenHost?: string;
     listenPort?: number;
     mode?: "loadbalance" | "failover";
+    /** Bind the DIRECT (no-region) internet dial to this source IP so egress
+     *  stays on the physical NIC, not a Tailscale/overlay interface. Only applies
+     *  to direct dials — exit dials must keep the OS source so they reach the
+     *  exit's agentnet vIP over the TUN. Resolve via resolveEgressBindIp(). */
+    egressBindIp?: string;
     log?: (msg: string) => void;
 }
 export declare const BUILTIN_REGION_DOMAINS: Record<string, string[]>;

package/dist/proxy/multi-exit-router.js

@@ -18,6 +18,7 @@
 //
 import http from "node:http";
 import net from "node:net";
+import { egressConnect } from "./egress.js";
 // Built-in domain lists, so a user can reference a region by name in
 // routes.yaml without hand-listing every domain. Override by giving the
 // region its own `domains` list.
@@ -240,7 +241,7 @@ export function startMultiExitRouter(opts) {
     // Google etc. aren't black-holed through a foreign exit.
     function directConnect(target, client, head) {
         const [host, portStr] = target.split(":");
-        const up = net.connect(Number(portStr) || 443, host);
+        const up = egressConnect(Number(portStr) || 443, host, opts.egressBindIp);
         up.setTimeout(CONNECT_TIMEOUT_MS, () => up.destroy());
         up.once("connect", () => {
             up.setTimeout(0);

package/dist/types.d.ts

@@ -134,6 +134,7 @@ export interface ProxyConfig {
     allowHosts?: string[];
     allowConnectPorts?: number[];
     auditTunnels?: boolean;
+    egress?: string;
 }
 export interface FriendsConfig {
     /** When true (default), the running daemon auto-accepts incoming

package/dist/ui/desktop/app.js

@@ -141,6 +141,16 @@ function dkFileSize(n) {
 function dkFileUrl(name) {
   return "/api/file-download?name=" + encodeURIComponent(name);
 }
+function dkFileDownloadUrl(name) {
+  return dkFileUrl(name) + "&dl=1";
+}
+function dkFileMediaKind(name) {
+  const ext = (String(name || "").split(".").pop() || "").toLowerCase();
+  if (["png", "jpg", "jpeg", "gif", "webp", "svg", "heic", "bmp"].includes(ext)) return "image";
+  if (["mp4", "mov", "webm", "m4v", "mkv", "avi"].includes(ext)) return "video";
+  if (["mp3", "m4a", "aac", "wav", "ogg", "flac", "opus"].includes(ext)) return "audio";
+  return "file";
+}
 function dkDayLabel(ts) {
   if (!ts) return "Today";
   const d = new Date(ts), now = /* @__PURE__ */ new Date();
@@ -271,6 +281,7 @@ function useDaemonData() {
           name: m.file.name,
           size: dkFileSize(m.file.size),
           dir: m.dir,
+          media: dkFileMediaKind(m.file.name),
           status: m.file.status,
           pct: m.file.status === "sending" && m.file.size ? Math.min(100, Math.floor((m.file.sent || 0) / m.file.size * 100)) : void 0
         } : void 0,
@@ -1021,10 +1032,37 @@ const inputStyle = {
 };
 function Msg({ m, peer, T }) {
   const mine = m.from === "me";
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: mine ? "flex-end" : "flex-start", alignItems: "flex-end", gap: 8, margin: "3px 0" } }, !mine && /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 24, radius: 6, dot: false }), /* @__PURE__ */ React.createElement("div", { style: { maxWidth: "64%", display: "flex", flexDirection: "column", alignItems: mine ? "flex-end" : "flex-start" } }, m.file ? React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: mine ? "flex-end" : "flex-start", alignItems: "flex-end", gap: 8, margin: "3px 0" } }, !mine && /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 24, radius: 6, dot: false }), /* @__PURE__ */ React.createElement("div", { style: { maxWidth: "64%", display: "flex", flexDirection: "column", alignItems: mine ? "flex-end" : "flex-start" } }, m.file ? !mine && m.file.status !== "sending" && m.file.status !== "failed" && (m.file.media === "image" || m.file.media === "video" || m.file.media === "audio") ? (
+    // Received media → inline preview / player, with name, size, download.
+    /* @__PURE__ */ React.createElement("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 6,
+      maxWidth: 300,
+      background: "var(--bub-them)",
+      border: "1px solid var(--line)",
+      borderRadius: 12,
+      padding: 6
+    } }, m.file.media === "image" && /* @__PURE__ */ React.createElement("a", { href: dkFileUrl(m.file.name), target: "_blank", rel: "noreferrer", style: { display: "block", lineHeight: 0 } }, /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: dkFileUrl(m.file.name),
+        alt: m.file.name,
+        style: { display: "block", maxWidth: "100%", maxHeight: 280, borderRadius: 8, objectFit: "cover" }
+      }
+    )), m.file.media === "video" && /* @__PURE__ */ React.createElement(
+      "video",
+      {
+        src: dkFileUrl(m.file.name),
+        controls: true,
+        preload: "metadata",
+        style: { maxWidth: "100%", maxHeight: 320, borderRadius: 8, background: "#000" }
+      }
+    ), m.file.media === "audio" && /* @__PURE__ */ React.createElement("audio", { src: dkFileUrl(m.file.name), controls: true, style: { width: "100%" } }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "0 2px" } }, /* @__PURE__ */ React.createElement("span", { style: { flex: 1, minWidth: 0, fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, m.file.name), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)", flexShrink: 0 } }, m.file.size), /* @__PURE__ */ React.createElement("a", { href: dkFileDownloadUrl(m.file.name), download: m.file.name, title: "download", style: { display: "inline-flex", flexShrink: 0 } }, /* @__PURE__ */ React.createElement(Icon, { name: "download", size: 15, stroke: 2, color: "var(--accent)" }))))
+  ) : React.createElement(
     mine ? "div" : "a",
     {
-      ...mine ? {} : { href: dkFileUrl(m.file.name), download: m.file.name, title: "download" },
+      ...mine ? {} : { href: dkFileDownloadUrl(m.file.name), download: m.file.name, title: "download" },
       style: {
         display: "flex",
         alignItems: "center",
@@ -1038,7 +1076,7 @@ function Msg({ m, peer, T }) {
         cursor: mine ? "default" : "pointer"
       }
     },
-    /* @__PURE__ */ React.createElement("div", { style: { width: 34, height: 34, borderRadius: 7, flexShrink: 0, background: mine ? "rgba(255,255,255,0.16)" : "var(--chip)", display: "flex", alignItems: "center", justifyContent: "center", color: mine ? "#fff" : "var(--accent)" } }, /* @__PURE__ */ React.createElement(Icon, { name: m.file.kind || "file", size: 18, stroke: 1.9 })),
+    /* @__PURE__ */ React.createElement("div", { style: { width: 34, height: 34, borderRadius: 7, flexShrink: 0, background: mine ? "rgba(255,255,255,0.16)" : "var(--chip)", display: "flex", alignItems: "center", justifyContent: "center", color: mine ? "#fff" : "var(--accent)" } }, /* @__PURE__ */ React.createElement(Icon, { name: m.file.media === "image" ? "image" : m.file.media === "video" ? "video" : m.file.media === "audio" ? "play" : "file", size: 18, stroke: 1.9 })),
     /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 12.5, fontWeight: 600, color: mine ? "#fff" : "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, m.file.name), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 11, color: mine ? "rgba(255,255,255,0.7)" : "var(--faint)", marginTop: 1 } }, m.file.status === "sending" ? `${m.file.size} \xB7 sending ${m.file.pct != null ? m.file.pct + "%" : "\u2026"}` : m.file.status === "failed" ? `${m.file.size} \xB7 failed` : mine ? `${m.file.size} \xB7 sent` : `${m.file.size} \xB7 download`)),
     mine ? m.file.status === "sending" ? /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.9)" } }, m.file.pct != null ? m.file.pct + "%" : "\u2026") : m.file.status === "failed" ? /* @__PURE__ */ React.createElement(Icon, { name: "x", size: 16, stroke: 2.4, color: "rgba(255,200,190,0.95)" }) : /* @__PURE__ */ React.createElement(Icon, { name: "checkCheck", size: 16, stroke: 2, color: "rgba(255,255,255,0.85)" }) : /* @__PURE__ */ React.createElement(Icon, { name: "download", size: 16, stroke: 2, color: "var(--accent)" })
   ) : /* @__PURE__ */ React.createElement("div", { style: {

package/dist/ui/server.js

@@ -13,7 +13,7 @@
 // empty because the daemon accepts immediately.
 //
 import http from "node:http";
-import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { existsSync, readFileSync, writeFileSync, statSync, createReadStream } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
 import yaml from "js-yaml";
@@ -291,7 +291,10 @@ export function startFriendUi(opts) {
                 }
                 return;
             }
-            // Download a received file by name, served from <configDir>/downloads.
+            // Serve a received file by name, from <configDir>/downloads. Used both for
+            // download (?dl=1 → attachment) and inline preview/playback (no dl → the
+            // right media content-type + inline disposition + HTTP Range so <video>/
+            // <audio> can seek without buffering the whole file).
             if (req.method === "GET" && url === "/api/file-download") {
                 if (!opts.downloadsDir) {
                     res.writeHead(404);
@@ -307,17 +310,55 @@ export function startFriendUi(opts) {
                     res.end("not found");
                     return;
                 }
+                const ext = (name.split(".").pop() || "").toLowerCase();
+                const MIME = {
+                    png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", gif: "image/gif",
+                    webp: "image/webp", svg: "image/svg+xml", heic: "image/heic", bmp: "image/bmp",
+                    mp4: "video/mp4", mov: "video/quicktime", webm: "video/webm", m4v: "video/x-m4v",
+                    mkv: "video/x-matroska", avi: "video/x-msvideo",
+                    mp3: "audio/mpeg", m4a: "audio/mp4", aac: "audio/aac", wav: "audio/wav",
+                    ogg: "audio/ogg", flac: "audio/flac", opus: "audio/opus",
+                    pdf: "application/pdf",
+                };
+                const ctype = MIME[ext] || "application/octet-stream";
+                const isMedia = ctype.startsWith("image/") || ctype.startsWith("video/") || ctype.startsWith("audio/");
+                const wantDownload = q.get("dl") === "1" || !isMedia;
                 // Content-Disposition must be ASCII — Node throws ERR_INVALID_CHAR on a
                 // non-ASCII header value (filenames from macOS contain U+202F before
                 // "PM", and others may be Chinese, etc.). Provide an ASCII-only
                 // `filename=` fallback plus the RFC 5987 `filename*=UTF-8''…` with the
                 // real (percent-encoded) name for clients that support it.
                 const asciiName = name.replace(/[^\x20-\x7e]/g, "_").replace(/"/g, "");
+                const disposition = `${wantDownload ? "attachment" : "inline"}; filename="${asciiName}"; filename*=UTF-8''${encodeURIComponent(name)}`;
+                const size = statSync(file).size;
+                const range = req.headers.range;
+                // Honour a single-range request (what browsers send for media seeking).
+                const m = range && /^bytes=(\d*)-(\d*)$/.exec(range);
+                if (m && !wantDownload) {
+                    let start = m[1] ? parseInt(m[1], 10) : 0;
+                    let end = m[2] ? parseInt(m[2], 10) : size - 1;
+                    if (Number.isNaN(start) || Number.isNaN(end) || start > end || end >= size) {
+                        res.writeHead(416, { "content-range": `bytes */${size}` });
+                        res.end();
+                        return;
+                    }
+                    res.writeHead(206, {
+                        "content-type": ctype,
+                        "content-disposition": disposition,
+                        "accept-ranges": "bytes",
+                        "content-range": `bytes ${start}-${end}/${size}`,
+                        "content-length": String(end - start + 1),
+                    });
+                    createReadStream(file, { start, end }).pipe(res);
+                    return;
+                }
                 res.writeHead(200, {
-                    "content-type": "application/octet-stream",
-                    "content-disposition": `attachment; filename="${asciiName}"; filename*=UTF-8''${encodeURIComponent(name)}`,
+                    "content-type": ctype,
+                    "content-disposition": disposition,
+                    "accept-ranges": "bytes",
+                    "content-length": String(size),
                 });
-                res.end(readFileSync(file));
+                createReadStream(file).pipe(res);
                 return;
             }
             if (req.method === "GET" && url === "/api/state") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/lan",
-  "version": "0.1.130",
+  "version": "0.1.132",
   "description": "Private virtual LAN for self-hosted services and AI agents, built on Elastos Carrier. NAT-traversal, name service, ACL, all over a peer-to-peer mesh — no public IP required.",
   "type": "module",
   "main": "./dist/index.js",
@@ -79,7 +79,7 @@
   },
   "dependencies": {
     "@decentnetwork/dora": "^0.1.11",
-    "@decentnetwork/peer": "^0.1.68",
+    "@decentnetwork/peer": "^0.1.69",
     "ink": "^5.2.1",
     "js-yaml": "^4.1.0",
     "react": "^18.3.1",