@decentnetwork/lan 0.1.89 → 0.1.90

package/dist/ui/desktop/app.js

@@ -0,0 +1,1443 @@
+const ICON_PATHS = {
+  // ---- tab bar (the four must feel like one set) ----
+  users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+  grid: '<rect x="3" y="3" width="7.5" height="7.5" rx="1.6"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.6"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.6"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.6"/>',
+  wallet: '<path d="M19 7V6a2 2 0 0 0-2-2H6a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h12a2 2 0 0 0 2-2v-1"/><path d="M3 7a3 3 0 0 0 3 3h13a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-3"/><circle cx="16.5" cy="14" r="1.15" fill="currentColor" stroke="none"/>',
+  userRound: '<circle cx="12" cy="8" r="4.5"/><path d="M20 21a8 8 0 0 0-16 0"/>',
+  // ---- actions / chrome ----
+  search: '<circle cx="11" cy="11" r="7.5"/><path d="m21 21-4.3-4.3"/>',
+  plus: '<path d="M5 12h14M12 5v14"/>',
+  chevronRight: '<path d="m9 18 6-6-6-6"/>',
+  chevronLeft: '<path d="m15 18-6-6 6-6"/>',
+  info: '<circle cx="12" cy="12" r="9.5"/><path d="M12 16.5v-5M12 7.6h.01"/>',
+  more: '<circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/>',
+  x: '<path d="M18 6 6 18M6 6l12 12"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  checkCheck: '<path d="M18 6 7 17l-5-5"/><path d="m22 10-7.6 7.6L13 16"/>',
+  copy: '<rect x="9" y="9" width="12" height="12" rx="2.4"/><path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"/>',
+  refresh: '<path d="M21 12a9 9 0 1 1-2.6-6.3"/><path d="M21 4v4.5h-4.5"/>',
+  edit: '<path d="M11 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"/>',
+  qr: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><path d="M14 14h3v3M21 14v.01M14 21h.01M17 21h.01M21 17v4"/>',
+  // ---- app tiles ----
+  video: '<path d="m22 8.5-5.4 3.5 5.4 3.5V8.5Z"/><rect x="2" y="6" width="14.5" height="12" rx="3"/>',
+  sparkles: '<path d="M12 3.5 13.6 9 19 10.5 13.6 12 12 17.5 10.4 12 5 10.5 10.4 9 12 3.5Z"/><path d="M19 3.5v3.2M20.6 5.1h-3.2"/><path d="M5 16v2.4M6.2 17.2H3.8"/>',
+  mic: '<rect x="9" y="2.5" width="6" height="11.5" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0"/><path d="M12 17.5v3.5"/>',
+  flask: '<path d="M9.5 3v6.2L4.8 17.4A2 2 0 0 0 6.5 20.5h11a2 2 0 0 0 1.7-3.1L14.5 9.2V3"/><path d="M8.5 3h7"/><path d="M7.3 15h9.4"/>',
+  headphones: '<path d="M3.5 14v-1.5a8.5 8.5 0 0 1 17 0V14"/><path d="M3.5 14.5a2.5 2.5 0 0 1 2.5-2.5h0a1.5 1.5 0 0 1 1.5 1.5v3.5a1.5 1.5 0 0 1-1.5 1.5h0a2.5 2.5 0 0 1-2.5-2.5Z"/><path d="M20.5 14.5a2.5 2.5 0 0 0-2.5-2.5h0a1.5 1.5 0 0 0-1.5 1.5v3.5a1.5 1.5 0 0 0 1.5 1.5h0a2.5 2.5 0 0 0 2.5-2.5Z"/>',
+  globe: '<circle cx="12" cy="12" r="9.5"/><path d="M2.5 12h19"/><path d="M12 2.5a14 14 0 0 1 0 19 14 14 0 0 1 0-19Z"/>',
+  store: '<path d="M4 9.5V19a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 20 19V9.5"/><path d="M3 6.5 4.5 3.5h15L21 6.5a2.5 2.5 0 0 1-4.5 1.5 2.5 2.5 0 0 1-4.5 0 2.5 2.5 0 0 1-4.5 0A2.5 2.5 0 0 1 3 6.5Z"/>',
+  // ---- chat composer ----
+  camera: '<path d="M14.5 4.5h-5L7.2 7.2H4.5A2.5 2.5 0 0 0 2 9.7V18a2.5 2.5 0 0 0 2.5 2.5h15A2.5 2.5 0 0 0 22 18V9.7a2.5 2.5 0 0 0-2.5-2.5h-2.7L14.5 4.5Z"/><circle cx="12" cy="13.5" r="3.2"/>',
+  phone: '<path d="M16.5 21a2 2 0 0 0 2-2.2 1.9 1.9 0 0 0-.6-1.2l-2-1.7a2 2 0 0 0-2.4-.1l-.9.6a14 14 0 0 1-5-5l.6-.9a2 2 0 0 0-.1-2.4l-1.7-2a1.9 1.9 0 0 0-1.2-.6A2 2 0 0 0 3 5.5 16 16 0 0 0 16.5 21Z"/>',
+  bolt: '<path d="M13 2 4 13h7l-1 9 9-11h-7l1-9Z"/>',
+  arrowUp: '<path d="M12 20V5M6 11l6-6 6 6"/>',
+  send: '<path d="M21.5 4.5 10.5 13.5"/><path d="M21.5 4.5 14.8 21.5 11 13l-8.5-3.8 19-4.7Z"/>',
+  // ---- account ----
+  shield: '<path d="M12 21.5s7.5-3.8 7.5-9.5V5.5L12 2.8 4.5 5.5V12c0 5.7 7.5 9.5 7.5 9.5Z"/>',
+  download: '<path d="M12 3.5v11M7.5 10l4.5 4.5 4.5-4.5"/><path d="M5 20.5h14"/>',
+  migrate: '<path d="M8 4 4 8l4 4"/><path d="M4 8h13a3 3 0 0 1 3 3v1"/><path d="m16 20 4-4-4-4"/><path d="M20 16H7a3 3 0 0 1-3-3v-1"/>',
+  starCoin: '<circle cx="12" cy="12" r="9"/><path d="m12 7.2 1.4 2.9 3.2.4-2.3 2.2.6 3.1-2.9-1.5-2.9 1.5.6-3.1L8.4 10.5l3.2-.4L12 7.2Z" fill="currentColor" stroke="none"/>',
+  link: '<path d="M10.5 13.5a4 4 0 0 0 5.7 0l2.3-2.3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M13.5 10.5a4 4 0 0 0-5.7 0l-2.3 2.3a4 4 0 0 0 5.7 5.7l1-1"/>',
+  trendingUp: '<path d="M22 7.5 13.5 16l-4.5-4.5L2 18.5"/><path d="M16.5 7.5H22v5.5"/>',
+  bell: '<path d="M18 8.5a6 6 0 0 0-12 0c0 6.5-2.5 8-2.5 8h17S18 15 18 8.5Z"/><path d="M13.7 20.5a2 2 0 0 1-3.4 0"/>',
+  bot: '<rect x="3.5" y="9" width="17" height="11" rx="3"/><path d="M12 4.5v4.5"/><circle cx="12" cy="3" r="1.4"/><path d="M8.5 14.5h.01M15.5 14.5h.01"/><path d="M2 13.5v3M22 13.5v3"/>',
+  scan: '<path d="M3 8V6a3 3 0 0 1 3-3h2"/><path d="M16 3h2a3 3 0 0 1 3 3v2"/><path d="M21 16v2a3 3 0 0 1-3 3h-2"/><path d="M8 21H6a3 3 0 0 1-3-3v-2"/><path d="M7 12h10"/>',
+  userPlus: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/>',
+  at: '<circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.9 7.9"/>',
+  keyRound: '<circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/>',
+  alert: '<path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4M12 17h.01"/>',
+  chevronDown: '<path d="m6 9 6 6 6-6"/>',
+  eye: '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
+  book: '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z"/>',
+  trash: '<path d="M3 6h18"/><path d="M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6"/><path d="M18.5 6l-1 13.5a2 2 0 0 1-2 1.5h-7a2 2 0 0 1-2-1.5L5.5 6"/><path d="M10 10.5v6M14 10.5v6"/>',
+  arrowDown: '<path d="M12 4v15M6 13l6 6 6-6"/>',
+  shrink: '<path d="M4 14h6v6"/><path d="M20 10h-6V4"/><path d="m14 10 7-7"/><path d="m3 21 7-7"/>',
+  speaker: '<path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="M16 9a3 3 0 0 1 0 6"/><path d="M19 7a6 6 0 0 1 0 10"/>',
+  micFill: '<rect x="9" y="2.5" width="6" height="11.5" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0"/><path d="M12 17.5v3.5"/>'
+};
+function Icon({ name, size = 24, stroke = 1.75, color = "currentColor", fill = "none", style }) {
+  const d = ICON_PATHS[name];
+  if (!d) return null;
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill,
+      stroke: color,
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { display: "block", flexShrink: 0, ...style },
+      dangerouslySetInnerHTML: { __html: d }
+    }
+  );
+}
+Object.assign(window, { Icon, ICON_PATHS });
+Object.assign(ICON_PATHS, {
+  message: '<path d="M21 12a8.5 8.5 0 0 1-12.2 7.7L3 21l1.3-5.8A8.5 8.5 0 1 1 21 12Z"/>',
+  network: '<circle cx="12" cy="5" r="2.4"/><circle cx="5" cy="19" r="2.4"/><circle cx="19" cy="19" r="2.4"/><path d="M10.6 6.9 6.4 16.7M13.4 6.9l4.2 9.8M7.4 19h9.2"/>',
+  route: '<circle cx="6.5" cy="18.5" r="2.4"/><circle cx="17.5" cy="5.5" r="2.4"/><path d="M9 18.5h5.5a3.5 3.5 0 0 0 0-7h-4a3.5 3.5 0 0 1 0-7H15"/>',
+  globe2: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z"/>',
+  server: '<rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><path d="M7 7.5h.01M7 16.5h.01"/>',
+  power: '<path d="M12 4v8"/><path d="M7.6 7.2a7 7 0 1 0 8.8 0"/>',
+  ban: '<circle cx="12" cy="12" r="9"/><path d="m5.6 5.6 12.8 12.8"/>',
+  terminal: '<path d="m4.5 17 6-6-6-6"/><path d="M12 18.5h7.5"/>',
+  signal: '<path d="M4.8 12.8a10 10 0 0 1 14.4 0"/><path d="M8.3 16.3a5 5 0 0 1 7.4 0"/><path d="M12 19.6h.01"/>',
+  paperclip: '<path d="m20.5 9-8.7 8.7a4.2 4.2 0 0 1-6-6l8.6-8.6a2.8 2.8 0 0 1 4 4l-8.6 8.6a1.4 1.4 0 0 1-2-2l7.9-7.9"/>',
+  file: '<path d="M14 3v5h5"/><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/>',
+  fileText: '<path d="M14 3v5h5"/><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/><path d="M8.5 13h7M8.5 16.5h5"/>',
+  image: '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9.5" r="1.6"/><path d="m4 17 4.5-4.5a2 2 0 0 1 2.8 0L20 21"/>',
+  arrowRight: '<path d="M5 12h13M13 6l6 6-6 6"/>',
+  dotFill: '<circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"/>',
+  hash: '<path d="M4 9h16M3.5 15h16M10 4 8 20M16 4l-2 16"/>',
+  sliders: '<path d="M4 6h11M4 12h7M4 18h13"/><circle cx="18" cy="6" r="2"/><circle cx="13.5" cy="12" r="2"/><circle cx="19" cy="18" r="2"/>',
+  unlink: '<path d="M9 15 5.5 18.5a3.5 3.5 0 0 1-5-5L4 10"/><path d="m15 9 3.5-3.5a3.5 3.5 0 0 1 5 5L20 14"/><path d="M8 8 4 4M16 16l4 4M3 11h2M11 3v2"/>',
+  zap: '<path d="M13 2 4 13h7l-1 9 9-11h-7l1-9Z"/>',
+  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/>',
+  plug: '<path d="M9 2v6M15 2v6"/><path d="M7 8h10v3a5 5 0 0 1-10 0V8Z"/><path d="M12 16v6"/>'
+});
+function dkHash(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function dkRng(a) {
+  return function() {
+    a |= 0;
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function dkIdenticon(seed) {
+  const rnd = dkRng(dkHash(seed || "x"));
+  const hue = Math.floor(rnd() * 360);
+  const grid = [];
+  for (let y = 0; y < 5; y++) {
+    const row = [];
+    for (let x = 0; x < 3; x++) row.push(rnd() > 0.5);
+    grid.push([row[0], row[1], row[2], row[1], row[0]]);
+  }
+  return { cells: grid, hue };
+}
+function dkClock(ts) {
+  if (!ts) return "";
+  const d = new Date(ts);
+  return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
+}
+function dkDayLabel(ts) {
+  if (!ts) return "Today";
+  const d = new Date(ts), now = /* @__PURE__ */ new Date();
+  if (d.toDateString() === now.toDateString()) return "Today";
+  const y = new Date(now.getTime() - 864e5);
+  if (d.toDateString() === y.toDateString()) return "Yesterday";
+  return d.toLocaleDateString();
+}
+async function dkGet(path) {
+  const r = await fetch(path, { headers: { "cache-control": "no-cache" } });
+  return r.json();
+}
+async function dkPost(path, body) {
+  const r = await fetch(path, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body || {})
+  });
+  try {
+    return await r.json();
+  } catch (e) {
+    return { ok: r.ok };
+  }
+}
+const dkApi = {
+  send: (userid, text) => dkPost("/api/chat-send", { userid, text }),
+  add: (address) => dkPost("/api/add", { address }),
+  accept: (userid) => dkPost("/api/accept", { userid }),
+  reject: (userid) => dkPost("/api/reject", { userid }),
+  remove: (userid) => dkPost("/api/friend-remove", { userid }),
+  alias: (userid, alias) => dkPost("/api/friend-alias", { userid, alias }),
+  markRead: (userid) => dkPost("/api/chat-mark-read", { userid })
+};
+const DK_ME_FALLBACK = {
+  name: "\u2026",
+  handle: "@decentnetwork/peer",
+  userId: "",
+  carrier: "",
+  netKey: "",
+  ip: "",
+  online: false,
+  lanVer: "",
+  peerVer: "",
+  channel: "@next",
+  wire: "163"
+};
+function useDaemonData() {
+  const [snap, setSnap] = React.useState({
+    me: DK_ME_FALLBACK,
+    peers: [],
+    requests: [],
+    exits: [],
+    activeExit: null,
+    loaded: false
+  });
+  const [threads, setThreads] = React.useState({});
+  const refresh = React.useCallback(async () => {
+    var _a;
+    try {
+      const d = await dkGet("/api/desktop");
+      setSnap({
+        me: d.me || DK_ME_FALLBACK,
+        peers: d.peers || [],
+        requests: d.requests || [],
+        exits: d.exits || [],
+        activeExit: (_a = d.activeExit) != null ? _a : null,
+        loaded: true
+      });
+    } catch (e) {
+    }
+  }, []);
+  React.useEffect(() => {
+    refresh();
+    const t = setInterval(refresh, 2500);
+    return () => clearInterval(t);
+  }, [refresh]);
+  const loadThread = React.useCallback(async (peerId) => {
+    if (!peerId) return;
+    try {
+      const d = await dkGet("/api/chat-history?peer=" + encodeURIComponent(peerId));
+      const arr = d.chats && d.chats[peerId] || [];
+      const msgs = arr.map((m) => ({
+        from: m.dir === "out" ? "me" : "them",
+        time: dkClock(m.ts),
+        text: m.text,
+        status: m.dir === "out" ? "read" : void 0
+      }));
+      const withDay = msgs.length ? [{ day: dkDayLabel(arr[0].ts) }].concat(msgs) : [];
+      setThreads((t) => Object.assign({}, t, { [peerId]: withDay }));
+    } catch (e) {
+    }
+  }, []);
+  return Object.assign({}, snap, { threads, refresh, loadThread });
+}
+Object.assign(window, {
+  dkHash,
+  dkIdenticon,
+  dkClock,
+  dkDayLabel,
+  dkApi,
+  useDaemonData,
+  DK_ME_FALLBACK
+});
+function DkIdenticon({ seed, size = 30, radius = 7 }) {
+  const { cells, hue } = dkIdenticon(seed);
+  const cell = size / 5;
+  const fg = `oklch(0.62 0.15 ${hue})`;
+  const bg = `oklch(var(--ident-l) 0.05 ${hue})`;
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: { display: "block", borderRadius: radius } }, /* @__PURE__ */ React.createElement("rect", { width: size, height: size, fill: bg }), cells.map((row, y) => row.map((on, x) => on ? /* @__PURE__ */ React.createElement("rect", { key: `${x}-${y}`, x: x * cell, y: y * cell, width: cell + 0.4, height: cell + 0.4, fill: fg }) : null)));
+}
+function DkBot({ seed, size = 30, radius = 7 }) {
+  const hue = dkIdenticon(seed).hue;
+  return /* @__PURE__ */ React.createElement("div", { style: {
+    width: size,
+    height: size,
+    borderRadius: radius,
+    flexShrink: 0,
+    background: `linear-gradient(150deg, oklch(0.6 0.17 ${hue}), oklch(0.5 0.18 ${(hue + 30) % 360}))`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  } }, /* @__PURE__ */ React.createElement(Icon, { name: "bot", size: size * 0.56, color: "#fff", stroke: 1.9 }));
+}
+function DkAvatar({ peer, size = 30, radius = 7, dot = true }) {
+  const d = Math.max(8, size * 0.3);
+  return /* @__PURE__ */ React.createElement("div", { style: { position: "relative", width: size, height: size, flexShrink: 0 } }, peer.agent ? /* @__PURE__ */ React.createElement(DkBot, { seed: peer.id, size, radius }) : /* @__PURE__ */ React.createElement(DkIdenticon, { seed: peer.userId || peer.id, size, radius }), dot && /* @__PURE__ */ React.createElement("span", { style: {
+    position: "absolute",
+    right: -2,
+    bottom: -2,
+    width: d,
+    height: d,
+    borderRadius: 999,
+    background: peer.online ? "var(--online)" : "var(--off)",
+    border: "2px solid var(--panel)",
+    boxSizing: "border-box"
+  } }));
+}
+function StatusDot({ online, size = 8 }) {
+  return /* @__PURE__ */ React.createElement("span", { style: {
+    width: size,
+    height: size,
+    borderRadius: 999,
+    flexShrink: 0,
+    background: online ? "var(--online)" : "var(--off)",
+    boxShadow: online ? "0 0 0 3px color-mix(in oklab, var(--online), transparent 80%)" : "none"
+  } });
+}
+function Mono({ children, dim, size = 12.5, copy, title }) {
+  const [hit, setHit] = React.useState(false);
+  const onCopy = (e) => {
+    e.stopPropagation();
+    try {
+      navigator.clipboard.writeText(copy === true ? String(children) : copy);
+    } catch (e2) {
+    }
+    setHit(true);
+    setTimeout(() => setHit(false), 900);
+  };
+  return /* @__PURE__ */ React.createElement("span", { title, onClick: copy ? onCopy : void 0, style: {
+    fontFamily: "var(--mono)",
+    fontSize: size,
+    letterSpacing: -0.2,
+    color: dim ? "var(--dim)" : "var(--text)",
+    cursor: copy ? "pointer" : "default",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 5,
+    whiteSpace: "nowrap"
+  } }, children, copy && /* @__PURE__ */ React.createElement(Icon, { name: hit ? "check" : "copy", size: 12, stroke: 2, color: hit ? "var(--online)" : "var(--faint)" }));
+}
+function shortKey(s, head = 6, tail = 5) {
+  if (!s || s.length <= head + tail + 1) return s;
+  return s.slice(0, head) + "\u2026" + s.slice(-tail);
+}
+function RouteTag({ peer }) {
+  if (!peer.online) return /* @__PURE__ */ React.createElement(Tag, { tone: "off" }, "offline");
+  const relay = peer.via === "relay";
+  const via = peer.via || "online";
+  return /* @__PURE__ */ React.createElement(Tag, { tone: relay ? "warn" : "ok" }, peer.ping != null ? `${via} \xB7 ${peer.ping}ms` : via);
+}
+function Tag({ children, tone = "neutral", style }) {
+  const tones = {
+    neutral: { bg: "var(--chip)", fg: "var(--dim)", bd: "transparent" },
+    ok: { bg: "color-mix(in oklab, var(--online), transparent 86%)", fg: "var(--online)", bd: "transparent" },
+    warn: { bg: "color-mix(in oklab, var(--warn), transparent 86%)", fg: "var(--warn)", bd: "transparent" },
+    off: { bg: "var(--chip)", fg: "var(--faint)", bd: "transparent" },
+    accent: { bg: "color-mix(in oklab, var(--accent), transparent 86%)", fg: "var(--accent)", bd: "transparent" },
+    danger: { bg: "color-mix(in oklab, var(--danger), transparent 88%)", fg: "var(--danger)", bd: "transparent" }
+  };
+  const t = tones[tone] || tones.neutral;
+  return /* @__PURE__ */ React.createElement("span", { style: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    height: 18,
+    padding: "0 6px",
+    borderRadius: 4,
+    background: t.bg,
+    color: t.fg,
+    border: `1px solid ${t.bd}`,
+    fontFamily: "var(--mono)",
+    fontSize: 11,
+    fontWeight: 600,
+    letterSpacing: -0.1,
+    lineHeight: 1,
+    whiteSpace: "nowrap",
+    ...style
+  } }, children);
+}
+function Unread({ n }) {
+  if (!n) return null;
+  return /* @__PURE__ */ React.createElement("span", { style: {
+    minWidth: 18,
+    height: 18,
+    padding: "0 5px",
+    borderRadius: 999,
+    flexShrink: 0,
+    background: "var(--accent)",
+    color: "#fff",
+    fontFamily: "var(--mono)",
+    fontSize: 11,
+    fontWeight: 700,
+    lineHeight: "18px",
+    textAlign: "center"
+  } }, n);
+}
+function Btn({ children, icon, tone = "ghost", onClick, size = "md", title, style }) {
+  const tones = {
+    ghost: { bg: "transparent", fg: "var(--text)", bd: "var(--line)" },
+    solid: { bg: "var(--accent)", fg: "#fff", bd: "transparent" },
+    soft: { bg: "var(--chip)", fg: "var(--text)", bd: "transparent" },
+    ok: { bg: "color-mix(in oklab, var(--online), transparent 84%)", fg: "var(--online)", bd: "transparent" },
+    danger: { bg: "transparent", fg: "var(--danger)", bd: "color-mix(in oklab, var(--danger), transparent 70%)" }
+  };
+  const t = tones[tone] || tones.ghost;
+  const h = size === "sm" ? 26 : size === "lg" ? 36 : 30;
+  return /* @__PURE__ */ React.createElement("button", { onClick, title, style: {
+    height: h,
+    padding: icon && !children ? 0 : "0 11px",
+    minWidth: icon && !children ? h : "auto",
+    borderRadius: 6,
+    cursor: "pointer",
+    fontFamily: "var(--mono)",
+    fontWeight: 600,
+    fontSize: size === "sm" ? 12 : 12.5,
+    letterSpacing: -0.1,
+    background: t.bg,
+    color: t.fg,
+    border: `1px solid ${t.bd}`,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    whiteSpace: "nowrap",
+    ...style
+  } }, icon && /* @__PURE__ */ React.createElement(Icon, { name: icon, size: 15, stroke: 2 }), children);
+}
+function Section({ label, count, trailing, style }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "0 2px", ...style } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, fontWeight: 700, letterSpacing: 1, textTransform: "uppercase", color: "var(--faint)" } }, label), count != null && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, fontWeight: 700, color: "var(--faint)" } }, count), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, height: 1, background: "var(--line)" } }), trailing);
+}
+Object.assign(window, { DkIdenticon, DkBot, DkAvatar, StatusDot, Mono, shortKey, RouteTag, Tag, Unread, Btn, Section });
+const __TWEAKS_STYLE = `
+  .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
+    max-height:calc(100vh - 32px);display:flex;flex-direction:column;
+    transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom right;
+    background:rgba(250,249,247,.78);color:#29261b;
+    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
+    border:.5px solid rgba(255,255,255,.6);border-radius:14px;
+    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
+    font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
+  .twk-hd{display:flex;align-items:center;justify-content:space-between;
+    padding:10px 8px 10px 14px;cursor:move;user-select:none}
+  .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
+  .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
+    width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
+  .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
+  .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
+    overflow-y:auto;overflow-x:hidden;min-height:0;
+    scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
+  .twk-body::-webkit-scrollbar{width:8px}
+  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
+  .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
+    border:2px solid transparent;background-clip:content-box}
+  .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
+    border:2px solid transparent;background-clip:content-box}
+  .twk-row{display:flex;flex-direction:column;gap:5px}
+  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
+  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
+    color:rgba(41,38,27,.72)}
+  .twk-lbl>span:first-child{font-weight:500}
+  .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
+
+  .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
+    color:rgba(41,38,27,.45);padding:10px 0 0}
+  .twk-sect:first-child{padding-top:0}
+
+  .twk-field{appearance:none;box-sizing:border-box;width:100%;min-width:0;height:26px;padding:0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;
+    background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
+  .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
+  select.twk-field{padding-right:22px;
+    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
+    background-repeat:no-repeat;background-position:right 8px center}
+
+  .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
+    border-radius:999px;background:rgba(0,0,0,.12);outline:none}
+  .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
+    width:14px;height:14px;border-radius:50%;background:#fff;
+    border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+  .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
+    background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+
+  .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
+    background:rgba(0,0,0,.06);user-select:none}
+  .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
+    background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
+    transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
+  .twk-seg.dragging .twk-seg-thumb{transition:none}
+  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
+    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
+    border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
+    overflow-wrap:anywhere}
+
+  .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
+    background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
+  .twk-toggle[data-on="1"]{background:#34c759}
+  .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
+    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
+  .twk-toggle[data-on="1"] i{transform:translateX(14px)}
+
+  .twk-num{display:flex;align-items:center;box-sizing:border-box;min-width:0;height:26px;padding:0 0 0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
+  .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
+    user-select:none;padding-right:8px}
+  .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
+    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
+    outline:none;color:inherit;-moz-appearance:textfield}
+  .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
+    -webkit-appearance:none;margin:0}
+  .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
+
+  .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
+    background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
+  .twk-btn:hover{background:rgba(0,0,0,.88)}
+  .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
+  .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
+
+  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
+    background:transparent;flex-shrink:0}
+  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}
+  .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
+  .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
+
+  .twk-chips{display:flex;gap:6px}
+  .twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:46px;
+    padding:0;border:0;border-radius:6px;overflow:hidden;cursor:default;
+    box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);
+    transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}
+  .twk-chip:hover{transform:translateY(-1px);
+    box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.12)}
+  .twk-chip[data-on="1"]{box-shadow:0 0 0 1.5px rgba(0,0,0,.85),
+    0 2px 6px rgba(0,0,0,.15)}
+  .twk-chip>span{position:absolute;top:0;bottom:0;right:0;width:34%;
+    display:flex;flex-direction:column;box-shadow:-1px 0 0 rgba(0,0,0,.1)}
+  .twk-chip>span>i{flex:1;box-shadow:0 -1px 0 rgba(0,0,0,.1)}
+  .twk-chip>span>i:first-child{box-shadow:none}
+  .twk-chip svg{position:absolute;top:6px;left:6px;width:13px;height:13px;
+    filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
+`;
+function useTweaks(defaults) {
+  const [values, setValues] = React.useState(defaults);
+  const setTweak = React.useCallback((keyOrEdits, val) => {
+    const edits = typeof keyOrEdits === "object" && keyOrEdits !== null ? keyOrEdits : { [keyOrEdits]: val };
+    setValues((prev) => ({ ...prev, ...edits }));
+    window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
+    window.dispatchEvent(new CustomEvent("tweakchange", { detail: edits }));
+  }, []);
+  return [values, setTweak];
+}
+function TweaksPanel({ title = "Tweaks", children }) {
+  const [open, setOpen] = React.useState(false);
+  const dragRef = React.useRef(null);
+  const offsetRef = React.useRef({ x: 16, y: 16 });
+  const PAD = 16;
+  const clampToViewport = React.useCallback(() => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const w = panel.offsetWidth, h = panel.offsetHeight;
+    const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
+    const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
+    offsetRef.current = {
+      x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
+      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y))
+    };
+    panel.style.right = offsetRef.current.x + "px";
+    panel.style.bottom = offsetRef.current.y + "px";
+  }, []);
+  React.useEffect(() => {
+    if (!open) return;
+    clampToViewport();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", clampToViewport);
+      return () => window.removeEventListener("resize", clampToViewport);
+    }
+    const ro = new ResizeObserver(clampToViewport);
+    ro.observe(document.documentElement);
+    return () => ro.disconnect();
+  }, [open, clampToViewport]);
+  React.useEffect(() => {
+    const onMsg = (e) => {
+      var _a;
+      const t = (_a = e == null ? void 0 : e.data) == null ? void 0 : _a.type;
+      if (t === "__activate_edit_mode") setOpen(true);
+      else if (t === "__deactivate_edit_mode") setOpen(false);
+    };
+    window.addEventListener("message", onMsg);
+    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
+    return () => window.removeEventListener("message", onMsg);
+  }, []);
+  const dismiss = () => {
+    setOpen(false);
+    window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
+  };
+  const onDragStart = (e) => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const r = panel.getBoundingClientRect();
+    const sx = e.clientX, sy = e.clientY;
+    const startRight = window.innerWidth - r.right;
+    const startBottom = window.innerHeight - r.bottom;
+    const move = (ev) => {
+      offsetRef.current = {
+        x: startRight - (ev.clientX - sx),
+        y: startBottom - (ev.clientY - sy)
+      };
+      clampToViewport();
+    };
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  };
+  if (!open) return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, __TWEAKS_STYLE), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: dragRef,
+      className: "twk-panel",
+      "data-omelette-chrome": "",
+      style: { right: offsetRef.current.x, bottom: offsetRef.current.y }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "twk-hd", onMouseDown: onDragStart }, /* @__PURE__ */ React.createElement("b", null, title), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "twk-x",
+        "aria-label": "Close tweaks",
+        onMouseDown: (e) => e.stopPropagation(),
+        onClick: dismiss
+      },
+      "\u2715"
+    )),
+    /* @__PURE__ */ React.createElement("div", { className: "twk-body" }, children)
+  ));
+}
+function TweakSection({ label, children }) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "twk-sect" }, label), children);
+}
+function TweakRow({ label, value, children, inline = false }) {
+  return /* @__PURE__ */ React.createElement("div", { className: inline ? "twk-row twk-row-h" : "twk-row" }, /* @__PURE__ */ React.createElement("div", { className: "twk-lbl" }, /* @__PURE__ */ React.createElement("span", null, label), value != null && /* @__PURE__ */ React.createElement("span", { className: "twk-val" }, value)), children);
+}
+function TweakSlider({ label, value, min = 0, max = 100, step = 1, unit = "", onChange }) {
+  return /* @__PURE__ */ React.createElement(TweakRow, { label, value: `${value}${unit}` }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "range",
+      className: "twk-slider",
+      min,
+      max,
+      step,
+      value,
+      onChange: (e) => onChange(Number(e.target.value))
+    }
+  ));
+}
+function TweakToggle({ label, value, onChange }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "twk-row twk-row-h" }, /* @__PURE__ */ React.createElement("div", { className: "twk-lbl" }, /* @__PURE__ */ React.createElement("span", null, label)), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "twk-toggle",
+      "data-on": value ? "1" : "0",
+      role: "switch",
+      "aria-checked": !!value,
+      onClick: () => onChange(!value)
+    },
+    /* @__PURE__ */ React.createElement("i", null)
+  ));
+}
+function TweakRadio({ label, value, options, onChange }) {
+  var _a;
+  const trackRef = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  const valueRef = React.useRef(value);
+  valueRef.current = value;
+  const labelLen = (o) => String(typeof o === "object" ? o.label : o).length;
+  const maxLen = options.reduce((m, o) => Math.max(m, labelLen(o)), 0);
+  const fitsAsSegments = maxLen <= ((_a = { 2: 16, 3: 10 }[options.length]) != null ? _a : 0);
+  if (!fitsAsSegments) {
+    const resolve = (s) => {
+      const m = options.find((o) => String(typeof o === "object" ? o.value : o) === s);
+      return m === void 0 ? s : typeof m === "object" ? m.value : m;
+    };
+    return /* @__PURE__ */ React.createElement(
+      TweakSelect,
+      {
+        label,
+        value,
+        options,
+        onChange: (s) => onChange(resolve(s))
+      }
+    );
+  }
+  const opts = options.map((o) => typeof o === "object" ? o : { value: o, label: o });
+  const idx = Math.max(0, opts.findIndex((o) => o.value === value));
+  const n = opts.length;
+  const segAt = (clientX) => {
+    const r = trackRef.current.getBoundingClientRect();
+    const inner = r.width - 4;
+    const i = Math.floor((clientX - r.left - 2) / inner * n);
+    return opts[Math.max(0, Math.min(n - 1, i))].value;
+  };
+  const onPointerDown = (e) => {
+    setDragging(true);
+    const v0 = segAt(e.clientX);
+    if (v0 !== valueRef.current) onChange(v0);
+    const move = (ev) => {
+      if (!trackRef.current) return;
+      const v = segAt(ev.clientX);
+      if (v !== valueRef.current) onChange(v);
+    };
+    const up = () => {
+      setDragging(false);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+  return /* @__PURE__ */ React.createElement(TweakRow, { label }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: trackRef,
+      role: "radiogroup",
+      onPointerDown,
+      className: dragging ? "twk-seg dragging" : "twk-seg"
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "twk-seg-thumb",
+        style: {
+          left: `calc(2px + ${idx} * (100% - 4px) / ${n})`,
+          width: `calc((100% - 4px) / ${n})`
+        }
+      }
+    ),
+    opts.map((o) => /* @__PURE__ */ React.createElement("button", { key: o.value, type: "button", role: "radio", "aria-checked": o.value === value }, o.label))
+  ));
+}
+function TweakSelect({ label, value, options, onChange }) {
+  return /* @__PURE__ */ React.createElement(TweakRow, { label }, /* @__PURE__ */ React.createElement("select", { className: "twk-field", value, onChange: (e) => onChange(e.target.value) }, options.map((o) => {
+    const v = typeof o === "object" ? o.value : o;
+    const l = typeof o === "object" ? o.label : o;
+    return /* @__PURE__ */ React.createElement("option", { key: v, value: v }, l);
+  })));
+}
+function TweakText({ label, value, placeholder, onChange }) {
+  return /* @__PURE__ */ React.createElement(TweakRow, { label }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      className: "twk-field",
+      type: "text",
+      value,
+      placeholder,
+      onChange: (e) => onChange(e.target.value)
+    }
+  ));
+}
+function TweakNumber({ label, value, min, max, step = 1, unit = "", onChange }) {
+  const clamp = (n) => {
+    if (min != null && n < min) return min;
+    if (max != null && n > max) return max;
+    return n;
+  };
+  const startRef = React.useRef({ x: 0, val: 0 });
+  const onScrubStart = (e) => {
+    e.preventDefault();
+    startRef.current = { x: e.clientX, val: value };
+    const decimals = (String(step).split(".")[1] || "").length;
+    const move = (ev) => {
+      const dx = ev.clientX - startRef.current.x;
+      const raw = startRef.current.val + dx * step;
+      const snapped = Math.round(raw / step) * step;
+      onChange(clamp(Number(snapped.toFixed(decimals))));
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "twk-num" }, /* @__PURE__ */ React.createElement("span", { className: "twk-num-lbl", onPointerDown: onScrubStart }, label), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "number",
+      value,
+      min,
+      max,
+      step,
+      onChange: (e) => onChange(clamp(Number(e.target.value)))
+    }
+  ), unit && /* @__PURE__ */ React.createElement("span", { className: "twk-num-unit" }, unit));
+}
+function __twkIsLight(hex) {
+  const h = String(hex).replace("#", "");
+  const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h.padEnd(6, "0");
+  const n = parseInt(x.slice(0, 6), 16);
+  if (Number.isNaN(n)) return true;
+  const r = n >> 16 & 255, g = n >> 8 & 255, b = n & 255;
+  return r * 299 + g * 587 + b * 114 > 148e3;
+}
+const __TwkCheck = ({ light }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 14 14", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    d: "M3 7.2 5.8 10 11 4.2",
+    fill: "none",
+    strokeWidth: "2.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: light ? "rgba(0,0,0,.78)" : "#fff"
+  }
+));
+function TweakColor({ label, value, options, onChange }) {
+  if (!options || !options.length) {
+    return /* @__PURE__ */ React.createElement("div", { className: "twk-row twk-row-h" }, /* @__PURE__ */ React.createElement("div", { className: "twk-lbl" }, /* @__PURE__ */ React.createElement("span", null, label)), /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "color",
+        className: "twk-swatch",
+        value,
+        onChange: (e) => onChange(e.target.value)
+      }
+    ));
+  }
+  const key = (o) => String(JSON.stringify(o)).toLowerCase();
+  const cur = key(value);
+  return /* @__PURE__ */ React.createElement(TweakRow, { label }, /* @__PURE__ */ React.createElement("div", { className: "twk-chips", role: "radiogroup" }, options.map((o, i) => {
+    const colors = Array.isArray(o) ? o : [o];
+    const [hero, ...rest] = colors;
+    const sup = rest.slice(0, 4);
+    const on = key(o) === cur;
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: i,
+        type: "button",
+        className: "twk-chip",
+        role: "radio",
+        "aria-checked": on,
+        "data-on": on ? "1" : "0",
+        "aria-label": colors.join(", "),
+        title: colors.join(" \xB7 "),
+        style: { background: hero },
+        onClick: () => onChange(o)
+      },
+      sup.length > 0 && /* @__PURE__ */ React.createElement("span", null, sup.map((c, j) => /* @__PURE__ */ React.createElement("i", { key: j, style: { background: c } }))),
+      on && /* @__PURE__ */ React.createElement(__TwkCheck, { light: __twkIsLight(hero) })
+    );
+  })));
+}
+function TweakButton({ label, onClick, secondary = false }) {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: secondary ? "twk-btn secondary" : "twk-btn",
+      onClick
+    },
+    label
+  );
+}
+Object.assign(window, {
+  useTweaks,
+  TweaksPanel,
+  TweakSection,
+  TweakRow,
+  TweakSlider,
+  TweakToggle,
+  TweakRadio,
+  TweakSelect,
+  TweakText,
+  TweakNumber,
+  TweakColor,
+  TweakButton
+});
+function RequestsBlock({ T, requests, onAct }) {
+  if (!requests.length) return null;
+  return /* @__PURE__ */ React.createElement("div", { style: { padding: "4px 0 8px" } }, /* @__PURE__ */ React.createElement(Section, { label: T.requests, count: requests.length, style: { margin: "4px 4px 8px" } }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6 } }, requests.map((r) => /* @__PURE__ */ React.createElement("div", { key: r.id, style: {
+    padding: "9px 10px",
+    borderRadius: 8,
+    background: "var(--panel-2)",
+    border: "1px solid var(--line)",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(DkIdenticon, { seed: r.carrier, size: 26, radius: 6 }), /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React.createElement(Mono, { size: 12, copy: r.carrier, title: r.carrier }, shortKey(r.carrier, 8, 6)), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)", marginTop: 2 } }, "via ", r.via, " \xB7 ", r.time))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 6 } }, /* @__PURE__ */ React.createElement(Btn, { tone: "ok", icon: "check", size: "sm", onClick: () => onAct(r.id, "accept"), style: { flex: 1 } }, T.accept), /* @__PURE__ */ React.createElement(Btn, { tone: "danger", icon: "x", size: "sm", onClick: () => onAct(r.id, "reject"), style: { flex: 1 } }, T.reject))))));
+}
+function PeerRow({ peer, T, active, onClick }) {
+  const name = peer.alias || peer.userId;
+  return /* @__PURE__ */ React.createElement("button", { onClick, style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    width: "100%",
+    textAlign: "left",
+    padding: "var(--row-pad)",
+    borderRadius: 8,
+    cursor: "pointer",
+    fontFamily: "inherit",
+    border: "1px solid " + (active ? "var(--line)" : "transparent"),
+    background: active ? "var(--panel-2)" : "transparent"
+  } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 32, radius: 7 }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, /* @__PURE__ */ React.createElement("span", { style: {
+    fontFamily: peer.alias ? "var(--ui)" : "var(--mono)",
+    fontSize: 13.5,
+    fontWeight: 600,
+    color: "var(--text)",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  } }, peer.alias || shortKey(peer.userId, 8, 5)), peer.agent && /* @__PURE__ */ React.createElement(Icon, { name: "bot", size: 13, color: "var(--faint)", stroke: 2 }), peer.wire === "64" && /* @__PURE__ */ React.createElement(Tag, { tone: "off", style: { height: 15, fontSize: 9.5, padding: "0 4px" } }, "w64")), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 2 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)" } }, peer.ip), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)", fontSize: 11 } }, "\xB7"), /* @__PURE__ */ React.createElement("span", { style: {
+    fontSize: 11,
+    color: "var(--dim)",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    flex: 1,
+    minWidth: 0
+  } }, peer.lastMsg))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4, flexShrink: 0 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)" } }, peer.lastTime), peer.unread ? /* @__PURE__ */ React.createElement(Unread, { n: peer.unread }) : /* @__PURE__ */ React.createElement(StatusDot, { online: peer.online })));
+}
+function PeerSidebar({ T, peers, requests, activeId, onSelect, onAct, onAdd }) {
+  const [q, setQ] = React.useState("");
+  const [addr, setAddr] = React.useState("");
+  const submitAddr = () => {
+    if (addr.trim()) {
+      onAdd(addr);
+      setAddr("");
+    }
+  };
+  const filtered = peers.filter((p) => {
+    if (!q) return true;
+    const s = (p.alias || "") + " " + p.userId + " " + p.ip;
+    return s.toLowerCase().includes(q.toLowerCase());
+  });
+  const online = peers.filter((p) => p.online).length;
+  return /* @__PURE__ */ React.createElement("div", { style: { width: 320, flexShrink: 0, borderRight: "1px solid var(--line)", display: "flex", flexDirection: "column", background: "var(--panel)" } }, /* @__PURE__ */ React.createElement("div", { style: { padding: "12px 12px 10px", borderBottom: "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 7 } }, /* @__PURE__ */ React.createElement("input", { value: addr, onChange: (e) => setAddr(e.target.value), onKeyDown: (e) => {
+    if (e.key === "Enter") submitAddr();
+  }, placeholder: T.addPlaceholder, style: inputStyle }), /* @__PURE__ */ React.createElement(Btn, { tone: "solid", icon: "userPlus", onClick: submitAddr }, T.add)), /* @__PURE__ */ React.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Icon, { name: "search", size: 15, color: "var(--faint)", stroke: 2, style: { position: "absolute", left: 9 } }), /* @__PURE__ */ React.createElement("input", { value: q, onChange: (e) => setQ(e.target.value), placeholder: T.search, style: { ...inputStyle, paddingLeft: 30 } }))), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", padding: "10px 8px 16px" } }, /* @__PURE__ */ React.createElement(RequestsBlock, { T, requests, onAct }), /* @__PURE__ */ React.createElement(Section, { label: T.peers, count: `${online}/${peers.length}`, style: { margin: "6px 4px 8px" } }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 2 } }, filtered.map((p) => /* @__PURE__ */ React.createElement(PeerRow, { key: p.id, peer: p, T, active: p.id === activeId, onClick: () => onSelect(p.id) })), !filtered.length && /* @__PURE__ */ React.createElement("div", { style: { padding: 16, textAlign: "center", fontFamily: "var(--mono)", fontSize: 12, color: "var(--faint)" } }, "no matches"))));
+}
+const inputStyle = {
+  flex: 1,
+  height: 32,
+  borderRadius: 7,
+  border: "1px solid var(--line)",
+  background: "var(--panel-2)",
+  color: "var(--text)",
+  fontFamily: "var(--mono)",
+  fontSize: 12.5,
+  padding: "0 10px",
+  outline: "none",
+  minWidth: 0
+};
+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 ? /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "10px 12px",
+    borderRadius: 10,
+    background: mine ? "var(--bub-me)" : "var(--bub-them)",
+    border: "1px solid " + (mine ? "transparent" : "var(--line)"),
+    minWidth: 200
+  } }, /* @__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: { 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.size)), /* @__PURE__ */ React.createElement(Icon, { name: "download", size: 16, stroke: 2, color: mine ? "rgba(255,255,255,0.85)" : "var(--dim)" })) : /* @__PURE__ */ React.createElement("div", { style: {
+    padding: "8px 12px",
+    borderRadius: 12,
+    borderBottomRightRadius: mine ? 4 : 12,
+    borderBottomLeftRadius: mine ? 12 : 4,
+    background: mine ? "var(--bub-me)" : "var(--bub-them)",
+    color: mine ? "#fff" : "var(--text)",
+    border: "1px solid " + (mine ? "transparent" : "var(--line)"),
+    fontFamily: "var(--ui)",
+    fontSize: 13.5,
+    lineHeight: 1.4,
+    letterSpacing: -0.1,
+    wordBreak: "break-word"
+  } }, m.text), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 4, margin: "3px 3px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10, color: "var(--faint)" } }, m.time), mine && m.status && /* @__PURE__ */ React.createElement(Icon, { name: "checkCheck", size: 12, stroke: 2.2, color: m.status === "read" ? "var(--accent)" : "var(--faint)" }))));
+}
+function Conversation({ T, peer, lang, thread: threadProp, onSend, onAlias, onRemove, onBlock, onOpenNet, onCall }) {
+  const scrollRef = React.useRef(null);
+  const thread = threadProp && threadProp.length ? threadProp : [{ day: "Today" }, { from: "them", time: "\u2014", text: lang === "zh" ? "\u6682\u65E0\u6D88\u606F\u8BB0\u5F55\uFF0C\u53D1\u4E2A\u6D88\u606F\u6253\u4E2A\u62DB\u547C\u5427\u3002" : "No messages yet. Say hi." }];
+  React.useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [peer.id, threadProp]);
+  const [menu, setMenu] = React.useState(false);
+  const [draft, setDraft] = React.useState("");
+  React.useEffect(() => {
+    setDraft("");
+  }, [peer.id]);
+  const sendDraft = () => {
+    if (draft.trim()) {
+      onSend(draft);
+      setDraft("");
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement("div", { style: { height: 60, flexShrink: 0, borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 12, padding: "0 16px", background: "var(--panel)" } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 34, radius: 8 }), /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: peer.alias ? "var(--ui)" : "var(--mono)", fontSize: 15, fontWeight: 700, color: "var(--text)" } }, peer.alias || shortKey(peer.userId, 10, 6)), peer.agent && /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, "agent"), /* @__PURE__ */ React.createElement(RouteTag, { peer })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 2 } }, /* @__PURE__ */ React.createElement(Mono, { size: 11.5, dim: true, copy: peer.userId, title: peer.userId }, shortKey(peer.userId, 10, 6)), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement("button", { onClick: () => onOpenNet(peer), style: { background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--accent)", display: "inline-flex", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React.createElement(Icon, { name: "network", size: 12, stroke: 2 }), " ", peer.ip))), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(Btn, { icon: "phone", title: T.call, onClick: () => onCall(peer) }), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(Btn, { icon: "more", onClick: () => setMenu((v) => !v) }), menu && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { onClick: () => setMenu(false), style: { position: "fixed", inset: 0, zIndex: 40 } }), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", right: 0, top: 36, zIndex: 50, width: 180, background: "var(--panel-2)", border: "1px solid var(--line)", borderRadius: 9, padding: 6, boxShadow: "0 14px 40px rgba(0,0,0,0.4)" } }, /* @__PURE__ */ React.createElement(MenuItem, { icon: "phone", label: T.call, onClick: () => {
+    setMenu(false);
+    onCall(peer);
+  } }), /* @__PURE__ */ React.createElement(MenuItem, { icon: "hash", label: T.alias, onClick: () => {
+    setMenu(false);
+    onAlias(peer);
+  } }), /* @__PURE__ */ React.createElement(MenuItem, { icon: "file", label: T.sendFile, onClick: () => setMenu(false) }), /* @__PURE__ */ React.createElement("div", { style: { height: 1, background: "var(--line)", margin: "5px 4px" } }), /* @__PURE__ */ React.createElement(MenuItem, { icon: "ban", label: T.block, danger: true, onClick: () => {
+    setMenu(false);
+    onBlock(peer);
+  } }), /* @__PURE__ */ React.createElement(MenuItem, { icon: "trash", label: T.remove, danger: true, onClick: () => {
+    setMenu(false);
+    onRemove(peer);
+  } }))))), /* @__PURE__ */ React.createElement("div", { ref: scrollRef, style: { flex: 1, overflow: "auto", padding: "18px 22px" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 760, margin: "0 auto" } }, thread.map((m, i) => m.day ? /* @__PURE__ */ React.createElement("div", { key: i, style: { display: "flex", justifyContent: "center", margin: "14px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, fontWeight: 600, color: "var(--faint)", background: "var(--chip)", padding: "3px 10px", borderRadius: 999 } }, m.day)) : /* @__PURE__ */ React.createElement(Msg, { key: i, m, peer, T })))), /* @__PURE__ */ React.createElement("div", { style: { flexShrink: 0, borderTop: "1px solid var(--line)", padding: "12px 16px", background: "var(--panel)" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 760, margin: "0 auto", display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React.createElement(Btn, { icon: "paperclip", title: T.attach }), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          sendDraft();
+        }
+      },
+      placeholder: `${T.message} ${peer.alias || shortKey(peer.userId, 6, 4)}\u2026`,
+      style: { flex: 1, height: 38, borderRadius: 9, border: "1px solid var(--line)", background: "var(--panel-2)", color: "var(--text)", fontFamily: "var(--ui)", fontSize: 13.5, padding: "0 14px", outline: "none", minWidth: 0 }
+    }
+  ), /* @__PURE__ */ React.createElement(Btn, { tone: "solid", icon: "arrowUp", title: T.send, onClick: sendDraft }))));
+}
+function MenuItem({ icon, label, onClick, danger }) {
+  return /* @__PURE__ */ React.createElement("button", { onClick, style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    width: "100%",
+    textAlign: "left",
+    padding: "8px 9px",
+    borderRadius: 6,
+    border: "none",
+    cursor: "pointer",
+    background: "transparent",
+    fontFamily: "var(--mono)",
+    fontSize: 12.5,
+    fontWeight: 600,
+    color: danger ? "var(--danger)" : "var(--text)"
+  } }, /* @__PURE__ */ React.createElement(Icon, { name: icon, size: 15, stroke: 2, color: danger ? "var(--danger)" : "var(--dim)" }), " ", label);
+}
+function ChatEmpty({ T }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, color: "var(--faint)", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "message", size: 40, stroke: 1.4, color: "var(--line)" }), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 13 } }, T.pickPeer));
+}
+function ChatTab({ T, lang, peers, requests, activeId, onSelect, onAct, onRemove, onBlock, onOpenNet, onCall }) {
+  const peer = peers.find((p) => p.id === activeId);
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", minWidth: 0 } }, /* @__PURE__ */ React.createElement(PeerSidebar, { T, peers, requests, activeId, onSelect, onAct }), peer ? /* @__PURE__ */ React.createElement(Conversation, { T, peer, lang, onRemove, onBlock, onOpenNet, onCall }) : /* @__PURE__ */ React.createElement(ChatEmpty, { T }));
+}
+Object.assign(window, { ChatTab });
+function StatTile({ label, value, sub, tone }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0, padding: "13px 15px", borderRadius: 10, background: "var(--panel)", border: "1px solid var(--line)" } }, /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 10.5, fontWeight: 700, letterSpacing: 1, textTransform: "uppercase", color: "var(--faint)" } }, label), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 21, fontWeight: 700, letterSpacing: -0.5, marginTop: 5, color: tone || "var(--text)" } }, value), sub && /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--dim)", marginTop: 2 } }, sub));
+}
+function MyNode({ T, me, activeExit, peers, reqCount = 0 }) {
+  const online = peers.filter((p) => p.online).length;
+  const direct = peers.filter((p) => p.online && p.via === "direct").length;
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 14, padding: "16px 18px", borderRadius: 12, background: "var(--panel)", border: "1px solid var(--line)" } }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(DkIdenticon, { seed: me.userId, size: 46, radius: 11 }), /* @__PURE__ */ React.createElement("span", { style: { position: "absolute", right: -3, bottom: -3, width: 14, height: 14, borderRadius: 999, background: "var(--online)", border: "2.5px solid var(--panel)" } })), /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 9 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 17, fontWeight: 700, color: "var(--text)" } }, me.name), /* @__PURE__ */ React.createElement(Tag, { tone: "ok" }, "online"), /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, me.channel)), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 5 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--faint)" } }, T.myIp), /* @__PURE__ */ React.createElement(Mono, { size: 13, copy: me.ip }, me.ip), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--faint)" } }, "wire ", me.wire), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--faint)" } }, "lan ", me.lanVer, " / peer ", me.peerVer))), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(Btn, { icon: "copy", onClick: () => {
+    try {
+      navigator.clipboard.writeText(me.carrier);
+    } catch (e) {
+    }
+  } }, T.copyAddr)), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 12 } }, /* @__PURE__ */ React.createElement(StatTile, { label: T.peersOnline, value: `${online}/${peers.length}`, sub: `${direct} ${T.direct}`, tone: "var(--online)" }), /* @__PURE__ */ React.createElement(StatTile, { label: T.activeEgress, value: activeExit ? activeExit : T.directEgress, sub: activeExit ? "china \xB7 cn-sh-01" : T.noProxy, tone: activeExit ? "var(--warn)" : "var(--text)" }), /* @__PURE__ */ React.createElement(StatTile, { label: T.wireLabel, value: me.wire, sub: `${me.channel} \xB7 ${T.lossless}` }), /* @__PURE__ */ React.createElement(StatTile, { label: T.reqs, value: String(reqCount), sub: T.pending, tone: reqCount ? "var(--accent)" : "var(--text)" })));
+}
+function PeerTable({ T, peers, onOpenChat }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { borderRadius: 11, border: "1px solid var(--line)", overflow: "hidden", background: "var(--panel)" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 0.8fr 90px", gap: 0, padding: "9px 16px", borderBottom: "1px solid var(--line)", background: "var(--panel-2)" } }, [T.colPeer, T.colVip, T.colPath, T.colWire, ""].map((h, i) => /* @__PURE__ */ React.createElement("span", { key: i, style: { fontFamily: "var(--mono)", fontSize: 10.5, fontWeight: 700, letterSpacing: 0.8, textTransform: "uppercase", color: "var(--faint)", textAlign: i === 4 ? "right" : "left" } }, h))), peers.map((p, i) => /* @__PURE__ */ React.createElement("div", { key: p.id, style: {
+    display: "grid",
+    gridTemplateColumns: "1.4fr 1fr 1fr 0.8fr 90px",
+    gap: 0,
+    alignItems: "center",
+    padding: "11px 16px",
+    borderBottom: i < peers.length - 1 ? "1px solid var(--line)" : "none"
+  } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer: p, size: 26, radius: 6 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: p.alias ? "var(--ui)" : "var(--mono)", fontSize: 13, fontWeight: 600, color: "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, p.alias || shortKey(p.userId, 8, 5)), p.agent && /* @__PURE__ */ React.createElement(Icon, { name: "bot", size: 12, color: "var(--faint)", stroke: 2 })), /* @__PURE__ */ React.createElement(Mono, { size: 12.5, dim: true, copy: p.ip }, p.ip), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(RouteTag, { peer: p })), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: p.wire === "64" ? "var(--warn)" : "var(--dim)" } }, p.wire === "64" ? "old\xB764" : "new\xB7163"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6 } }, /* @__PURE__ */ React.createElement(Btn, { icon: "message", size: "sm", title: T.openChat, onClick: () => onOpenChat(p.id) }), /* @__PURE__ */ React.createElement(Btn, { icon: "signal", size: "sm", title: T.ping })))));
+}
+function ExitCard({ T, region, activeExit, onSetExit }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { borderRadius: 11, border: "1px solid var(--line)", overflow: "hidden", background: "var(--panel)" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "11px 14px", borderBottom: "1px solid var(--line)", background: "var(--panel-2)" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, fontWeight: 700, letterSpacing: 0.5, padding: "2px 7px", borderRadius: 5, background: "var(--chip)", color: "var(--dim)" } }, region.flag), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 13.5, fontWeight: 600, color: "var(--text)" } }, region.label), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)" } }, region.nodes.filter((n) => n.online).length, "/", region.nodes.length, " ", T.up)), /* @__PURE__ */ React.createElement("div", null, region.nodes.map((n, i) => {
+    const active = n.ip === activeExit;
+    return /* @__PURE__ */ React.createElement("div", { key: n.ip, style: { display: "flex", alignItems: "center", gap: 12, padding: "10px 14px", borderBottom: i < region.nodes.length - 1 ? "1px solid var(--line)" : "none", background: active ? "color-mix(in oklab, var(--accent), transparent 92%)" : "transparent" } }, /* @__PURE__ */ React.createElement(StatusDot, { online: n.online }), /* @__PURE__ */ React.createElement(Mono, { size: 13, copy: n.ip }, n.ip), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)" } }, n.host), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), n.online ? /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: n.ping > 200 ? "var(--warn)" : "var(--dim)" } }, n.ping, "ms") : /* @__PURE__ */ React.createElement(Tag, { tone: "off" }, "offline"), active ? /* @__PURE__ */ React.createElement(Btn, { tone: "ok", icon: "check", size: "sm", onClick: () => onSetExit(null) }, T.routing) : /* @__PURE__ */ React.createElement(Btn, { size: "sm", icon: "route", onClick: () => n.online && onSetExit(n.ip), style: { opacity: n.online ? 1 : 0.4 } }, T.routeThru));
+  })));
+}
+function NetworkTab({ T, me, peers, exits, activeExit, reqCount, onSetExit, onOpenChat }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 1040, margin: "0 auto", padding: "24px 28px 60px", display: "flex", flexDirection: "column", gap: 26 } }, /* @__PURE__ */ React.createElement(MyNode, { T, me, activeExit, peers, reqCount }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 } }, /* @__PURE__ */ React.createElement(Section, { label: T.peerRouting, count: peers.length }), /* @__PURE__ */ React.createElement(PeerTable, { T, peers, onOpenChat })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 } }, /* @__PURE__ */ React.createElement(Section, { label: T.exitNodes, trailing: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 6 } }, /* @__PURE__ */ React.createElement(Btn, { icon: "plus", size: "sm" }, T.addExit)) }), activeExit && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "11px 14px", borderRadius: 10, background: "color-mix(in oklab, var(--warn), transparent 90%)", border: "1px solid color-mix(in oklab, var(--warn), transparent 70%)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "route", size: 17, color: "var(--warn)", stroke: 2 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--text)" } }, T.egressVia), /* @__PURE__ */ React.createElement(Mono, { size: 13, copy: activeExit }, activeExit), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(Btn, { tone: "danger", icon: "unlink", size: "sm", onClick: () => onSetExit(null) }, T.stopRouting)), /* @__PURE__ */ React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 } }, exits.map((r) => /* @__PURE__ */ React.createElement(ExitCard, { key: r.region, T, region: r, activeExit, onSetExit }))))));
+}
+Object.assign(window, { NetworkTab });
+function FieldRow({ label, value, mono = true, copy, qr, last }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 14, padding: "13px 16px", borderBottom: last ? "none" : "1px solid var(--line)" } }, /* @__PURE__ */ React.createElement("span", { style: { width: 130, flexShrink: 0, fontFamily: "var(--mono)", fontSize: 11.5, fontWeight: 600, color: "var(--faint)", textTransform: "uppercase", letterSpacing: 0.5 } }, label), /* @__PURE__ */ React.createElement("span", { style: { flex: 1, minWidth: 0, fontFamily: mono ? "var(--mono)" : "var(--ui)", fontSize: 13.5, color: "var(--text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, value), copy && /* @__PURE__ */ React.createElement(Btn, { icon: "copy", size: "sm", onClick: () => {
+    try {
+      navigator.clipboard.writeText(value);
+    } catch (e) {
+    }
+  } }), qr && /* @__PURE__ */ React.createElement(Btn, { icon: "qr", size: "sm" }));
+}
+function Card({ label, children, trailing }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 10 } }, /* @__PURE__ */ React.createElement(Section, { label, trailing }), /* @__PURE__ */ React.createElement("div", { style: { borderRadius: 11, border: "1px solid var(--line)", overflow: "hidden", background: "var(--panel)" } }, children));
+}
+function ProfileTab({ T, me }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto", background: "var(--bg)" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: 760, margin: "0 auto", padding: "24px 28px 60px", display: "flex", flexDirection: "column", gap: 24 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 18, padding: "20px 22px", borderRadius: 14, background: "var(--panel)", border: "1px solid var(--line)" } }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(DkIdenticon, { seed: me.userId, size: 68, radius: 16 }), /* @__PURE__ */ React.createElement("span", { style: { position: "absolute", right: -3, bottom: -3, width: 18, height: 18, borderRadius: 999, background: "var(--online)", border: "3px solid var(--panel)" } })), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 22, fontWeight: 700, letterSpacing: -0.5, color: "var(--text)" } }, me.name), /* @__PURE__ */ React.createElement(Tag, { tone: "ok" }, "online")), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 13, color: "var(--dim)", marginTop: 4 } }, me.handle)), /* @__PURE__ */ React.createElement(Btn, { icon: "edit" }, T.editProfile)), /* @__PURE__ */ React.createElement(Card, { label: T.identity }, /* @__PURE__ */ React.createElement(FieldRow, { label: T.userId, value: me.userId, copy: true }), /* @__PURE__ */ React.createElement(FieldRow, { label: T.carrierAddr, value: me.carrier, copy: true, qr: true }), /* @__PURE__ */ React.createElement(FieldRow, { label: T.netKey, value: me.netKey, copy: true, last: true })), /* @__PURE__ */ React.createElement(Card, { label: T.network }, /* @__PURE__ */ React.createElement(FieldRow, { label: T.virtualIp, value: me.ip, copy: true }), /* @__PURE__ */ React.createElement(FieldRow, { label: T.wireLabel, value: `${me.wire} \xB7 lossless`, mono: false }), /* @__PURE__ */ React.createElement(FieldRow, { label: T.version, value: `lan ${me.lanVer} \xB7 peer ${me.peerVer} \xB7 ${me.channel}`, last: true })), /* @__PURE__ */ React.createElement(Card, { label: T.dangerZone }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 13, padding: "14px 16px" } }, /* @__PURE__ */ React.createElement("div", { style: { width: 34, height: 34, borderRadius: 8, flexShrink: 0, background: "color-mix(in oklab, var(--danger), transparent 86%)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--danger)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "trash", size: 17, stroke: 2 })), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 13.5, fontWeight: 600, color: "var(--danger)" } }, T.deleteNode), /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--ui)", fontSize: 12, color: "var(--faint)", marginTop: 1 } }, T.deleteSub)), /* @__PURE__ */ React.createElement(Btn, { tone: "danger", size: "sm" }, T.delete)))));
+}
+Object.assign(window, { ProfileTab });
+function CallBtn({ icon, label, onClick, active, danger, wide }) {
+  const bg = danger ? "var(--danger)" : active ? "var(--accent)" : "var(--chip)";
+  const fg = danger || active ? "#fff" : "var(--text)";
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement("button", { onClick, style: {
+    width: wide ? 76 : 56,
+    height: 56,
+    borderRadius: wide ? 18 : 999,
+    cursor: "pointer",
+    background: bg,
+    color: fg,
+    border: "1px solid " + (active || danger ? "transparent" : "var(--line)"),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  } }, /* @__PURE__ */ React.createElement(Icon, { name: icon, size: 22, stroke: 2 })), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)" } }, label));
+}
+function VideoTile({ peer, label, self, big }) {
+  return /* @__PURE__ */ React.createElement("div", { style: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    borderRadius: big ? 14 : 12,
+    overflow: "hidden",
+    background: "repeating-linear-gradient(45deg, var(--panel) 0 14px, var(--panel-2) 14px 28px)",
+    border: "1px solid var(--line)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  } }, !self && /* @__PURE__ */ React.createElement(DkIdenticon, { seed: peer.userId, size: big ? 92 : 44, radius: big ? 22 : 12 }), self && /* @__PURE__ */ React.createElement(Icon, { name: "userRound", size: big ? 60 : 30, color: "var(--faint)", stroke: 1.4 }), /* @__PURE__ */ React.createElement("span", { style: {
+    position: "absolute",
+    left: 10,
+    bottom: 9,
+    fontFamily: "var(--mono)",
+    fontSize: 11,
+    fontWeight: 600,
+    color: "var(--dim)",
+    background: "color-mix(in oklab, var(--bg), transparent 25%)",
+    padding: "3px 8px",
+    borderRadius: 6
+  } }, label));
+}
+function CallOverlay({ T, peer, mode, onSetMode, onEnd }) {
+  const [secs, setSecs] = React.useState(0);
+  const [muted, setMuted] = React.useState(false);
+  const [spk, setSpk] = React.useState(true);
+  React.useEffect(() => {
+    const id = setInterval(() => setSecs((s) => s + 1), 1e3);
+    return () => clearInterval(id);
+  }, []);
+  const mm = String(Math.floor(secs / 60)).padStart(2, "0");
+  const ss = String(secs % 60).padStart(2, "0");
+  const video = mode === "video";
+  const name = peer.alias || shortKey(peer.userId, 10, 6);
+  const controls = /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 18, alignItems: "flex-start" } }, /* @__PURE__ */ React.createElement(CallBtn, { icon: muted ? "micFill" : "mic", label: muted ? T.unmute : T.mute, active: muted, onClick: () => setMuted((m) => !m) }), /* @__PURE__ */ React.createElement(CallBtn, { icon: "video", label: video ? T.audioOnly : T.toVideo, active: video, onClick: () => onSetMode(video ? "audio" : "video") }), /* @__PURE__ */ React.createElement(CallBtn, { icon: "speaker", label: T.speaker, active: spk, onClick: () => setSpk((s) => !s) }), /* @__PURE__ */ React.createElement(CallBtn, { icon: "phone", label: T.endCall, danger: true, wide: true, onClick: onEnd }));
+  return /* @__PURE__ */ React.createElement("div", { style: { position: "fixed", inset: 0, zIndex: 70, background: "var(--bg)", display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React.createElement("div", { style: { height: 52, flexShrink: 0, display: "flex", alignItems: "center", gap: 10, padding: "0 18px", borderBottom: "1px solid var(--line)" } }, /* @__PURE__ */ React.createElement(Icon, { name: video ? "video" : "phone", size: 16, color: "var(--accent)", stroke: 2 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 13, fontWeight: 700, color: "var(--text)" } }, name), /* @__PURE__ */ React.createElement(Tag, { tone: peer.via === "relay" ? "warn" : "ok" }, T.connected, " \xB7 ", peer.via, " ", peer.ping, "ms"), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 14, fontWeight: 700, color: "var(--text)", letterSpacing: 1 } }, mm, ":", ss)), video ? /* @__PURE__ */ React.createElement("div", { style: { flex: 1, position: "relative", padding: 18 } }, /* @__PURE__ */ React.createElement(VideoTile, { peer, label: "video \xB7 " + name, big: true }), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", right: 30, bottom: 30, width: 220, height: 148 } }, /* @__PURE__ */ React.createElement(VideoTile, { peer, label: T.you, self: true })), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", left: 0, right: 0, bottom: 30, display: "flex", justifyContent: "center" } }, /* @__PURE__ */ React.createElement("div", { style: { padding: "16px 26px", borderRadius: 20, background: "color-mix(in oklab, var(--panel), transparent 8%)", border: "1px solid var(--line)" } }, controls))) : /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 22 } }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React.createElement("span", { style: { position: "absolute", width: 150, height: 150, borderRadius: 999, border: "2px solid var(--accent)", animation: "dkpulse 2s ease-out infinite" } }), /* @__PURE__ */ React.createElement(DkIdenticon, { seed: peer.userId, size: 108, radius: 26 })), /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 22, fontWeight: 700, color: "var(--text)" } }, name), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, justifyContent: "center", marginTop: 8 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--faint)" } }, peer.ip), /* @__PURE__ */ React.createElement(Tag, { tone: peer.via === "relay" ? "warn" : "ok" }, peer.via, " \xB7 ", peer.ping, "ms"))), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 18 } }, controls)));
+}
+Object.assign(window, { CallOverlay });
+const DK_DEFAULTS = (
+  /*EDITMODE-BEGIN*/
+  {
+    "theme": "dark",
+    "accent": "#7B6CF6",
+    "density": "compact",
+    "lang": "en",
+    "startTab": "chat"
+  }
+);
+function dkTheme(theme, accent) {
+  const base = {
+    "--ui": "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace",
+    "--mono": "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace",
+    "--accent": accent
+  };
+  if (theme === "light") return {
+    ...base,
+    "--ident-l": "0.92",
+    "--bg": "oklch(0.965 0.004 264)",
+    "--panel": "#ffffff",
+    "--panel-2": "oklch(0.975 0.004 264)",
+    "--line": "oklch(0.9 0.006 264)",
+    "--text": "oklch(0.26 0.013 264)",
+    "--dim": "oklch(0.5 0.013 264)",
+    "--faint": "oklch(0.62 0.011 264)",
+    "--chip": "oklch(0.945 0.006 264)",
+    "--online": "oklch(0.62 0.16 150)",
+    "--off": "oklch(0.8 0.01 264)",
+    "--warn": "oklch(0.66 0.15 60)",
+    "--danger": "oklch(0.58 0.21 25)",
+    "--bub-me": accent,
+    "--bub-them": "oklch(0.97 0.004 264)",
+    "--rail": "oklch(0.99 0.003 264)"
+  };
+  return {
+    ...base,
+    "--ident-l": "0.32",
+    "--bg": "oklch(0.165 0.012 264)",
+    "--panel": "oklch(0.205 0.013 264)",
+    "--panel-2": "oklch(0.235 0.014 264)",
+    "--line": "oklch(0.295 0.014 264)",
+    "--text": "oklch(0.93 0.008 264)",
+    "--dim": "oklch(0.68 0.012 264)",
+    "--faint": "oklch(0.52 0.013 264)",
+    "--chip": "oklch(0.27 0.014 264)",
+    "--online": "oklch(0.78 0.17 150)",
+    "--off": "oklch(0.42 0.01 264)",
+    "--warn": "oklch(0.78 0.15 70)",
+    "--danger": "oklch(0.68 0.2 22)",
+    "--bub-me": accent,
+    "--bub-them": "oklch(0.255 0.014 264)",
+    "--rail": "oklch(0.185 0.013 264)"
+  };
+}
+const STR = {
+  en: {
+    chat: "Chat",
+    network: "Network",
+    profile: "Profile",
+    addPlaceholder: "paste a friend's carrier address\u2026",
+    add: "Add",
+    search: "search peers / ip\u2026",
+    requests: "Friend requests",
+    accept: "accept",
+    reject: "reject",
+    peers: "Peers",
+    call: "Voice call",
+    alias: "Set alias",
+    sendFile: "Send file",
+    block: "Block peer",
+    remove: "Remove friend",
+    attach: "Attach file",
+    message: "Message",
+    send: "Send",
+    pickPeer: "Select a peer to open the conversation",
+    myIp: "my ip",
+    copyAddr: "copy address",
+    peersOnline: "peers online",
+    direct: "direct (LAN)",
+    activeEgress: "active egress",
+    directEgress: "direct",
+    noProxy: "no proxy",
+    wireLabel: "wire",
+    lossless: "lossless",
+    reqs: "requests",
+    pending: "pending inbound",
+    peerRouting: "Peer routing",
+    colPeer: "peer",
+    colVip: "virtual ip",
+    colPath: "path",
+    colWire: "wire",
+    openChat: "Open chat",
+    ping: "Ping",
+    exitNodes: "Exit nodes",
+    addExit: "add exit",
+    up: "up",
+    routing: "routing",
+    routeThru: "route",
+    egressVia: "all egress routed via",
+    stopRouting: "stop",
+    identity: "Identity",
+    userId: "user id",
+    carrierAddr: "carrier address",
+    netKey: "network key",
+    virtualIp: "virtual ip",
+    version: "version",
+    editProfile: "edit",
+    dangerZone: "Danger zone",
+    deleteNode: "Delete this node",
+    deleteSub: "Permanently remove identity & keys from this device",
+    delete: "delete",
+    settings: "Settings",
+    call: "Call",
+    connected: "connected",
+    mute: "mute",
+    unmute: "unmute",
+    speaker: "speaker",
+    toVideo: "video",
+    audioOnly: "audio",
+    endCall: "end",
+    you: "you",
+    meeting: "Meeting",
+    meetingRooms: "Meeting rooms",
+    nextVersion: "next version",
+    createRoom: "New room",
+    meetingDesc: "Spin up audio & video rooms across servers and invite peers by virtual IP. Group calls, screen share, and shared exit routing land in the next release."
+  },
+  zh: {
+    chat: "\u804A\u5929",
+    network: "\u7F51\u7EDC",
+    profile: "\u6211\u7684",
+    addPlaceholder: "\u7C98\u8D34\u597D\u53CB\u7684 carrier \u5730\u5740\u2026",
+    add: "\u6DFB\u52A0",
+    search: "\u641C\u7D22\u597D\u53CB / IP\u2026",
+    requests: "\u597D\u53CB\u8BF7\u6C42",
+    accept: "\u63A5\u53D7",
+    reject: "\u62D2\u7EDD",
+    peers: "\u597D\u53CB",
+    call: "\u8BED\u97F3\u901A\u8BDD",
+    alias: "\u8BBE\u7F6E\u5907\u6CE8",
+    sendFile: "\u53D1\u9001\u6587\u4EF6",
+    block: "\u62C9\u9ED1",
+    remove: "\u5220\u9664\u597D\u53CB",
+    attach: "\u9644\u4EF6",
+    message: "\u6D88\u606F",
+    send: "\u53D1\u9001",
+    pickPeer: "\u9009\u62E9\u4E00\u4F4D\u597D\u53CB\u5F00\u59CB\u4F1A\u8BDD",
+    myIp: "\u6211\u7684 IP",
+    copyAddr: "\u590D\u5236\u5730\u5740",
+    peersOnline: "\u5728\u7EBF\u597D\u53CB",
+    direct: "\u76F4\u8FDE (\u5C40\u57DF\u7F51)",
+    activeEgress: "\u5F53\u524D\u51FA\u53E3",
+    directEgress: "\u76F4\u8FDE",
+    noProxy: "\u65E0\u4EE3\u7406",
+    wireLabel: "\u534F\u8BAE",
+    lossless: "\u65E0\u635F",
+    reqs: "\u8BF7\u6C42",
+    pending: "\u5F85\u5904\u7406",
+    peerRouting: "\u8282\u70B9\u8DEF\u7531",
+    colPeer: "\u597D\u53CB",
+    colVip: "\u865A\u62DF IP",
+    colPath: "\u8DEF\u5F84",
+    colWire: "\u534F\u8BAE",
+    openChat: "\u6253\u5F00\u804A\u5929",
+    ping: "Ping",
+    exitNodes: "\u51FA\u53E3\u8282\u70B9",
+    addExit: "\u6DFB\u52A0\u51FA\u53E3",
+    up: "\u5728\u7EBF",
+    routing: "\u4F7F\u7528\u4E2D",
+    routeThru: "\u8DEF\u7531",
+    egressVia: "\u5168\u90E8\u51FA\u53E3\u6D41\u91CF\u7ECF\u7531",
+    stopRouting: "\u505C\u6B62",
+    identity: "\u8EAB\u4EFD",
+    userId: "\u7528\u6237 ID",
+    carrierAddr: "Carrier \u5730\u5740",
+    netKey: "\u7F51\u7EDC\u516C\u94A5",
+    virtualIp: "\u865A\u62DF IP",
+    version: "\u7248\u672C",
+    editProfile: "\u7F16\u8F91",
+    dangerZone: "\u5371\u9669\u64CD\u4F5C",
+    deleteNode: "\u5220\u9664\u6B64\u8282\u70B9",
+    deleteSub: "\u4ECE\u672C\u8BBE\u5907\u6C38\u4E45\u79FB\u9664\u8EAB\u4EFD\u4E0E\u5BC6\u94A5",
+    delete: "\u5220\u9664",
+    settings: "\u8BBE\u7F6E",
+    call: "\u901A\u8BDD",
+    connected: "\u5DF2\u8FDE\u63A5",
+    mute: "\u9759\u97F3",
+    unmute: "\u53D6\u6D88\u9759\u97F3",
+    speaker: "\u626C\u58F0\u5668",
+    toVideo: "\u89C6\u9891",
+    audioOnly: "\u8BED\u97F3",
+    endCall: "\u6302\u65AD",
+    you: "\u6211",
+    meeting: "\u4F1A\u8BAE",
+    meetingRooms: "\u4F1A\u8BAE\u623F\u95F4",
+    nextVersion: "\u4E0B\u4E2A\u7248\u672C",
+    createRoom: "\u65B0\u5EFA\u623F\u95F4",
+    meetingDesc: "\u8DE8\u670D\u52A1\u5668\u521B\u5EFA\u97F3\u89C6\u9891\u623F\u95F4\uFF0C\u901A\u8FC7\u865A\u62DF IP \u9080\u8BF7\u597D\u53CB\u3002\u7FA4\u7EC4\u901A\u8BDD\u3001\u5C4F\u5E55\u5171\u4EAB\u4E0E\u5171\u4EAB\u51FA\u53E3\u8DEF\u7531\u5C06\u5728\u4E0B\u4E2A\u7248\u672C\u4E0A\u7EBF\u3002"
+  }
+};
+function RailBtn({ icon, label, active, soon, onClick }) {
+  return /* @__PURE__ */ React.createElement("button", { onClick, title: label, style: {
+    width: 52,
+    height: 52,
+    borderRadius: 11,
+    cursor: "pointer",
+    fontFamily: "var(--mono)",
+    position: "relative",
+    border: "1px solid " + (active ? "var(--line)" : "transparent"),
+    background: active ? "var(--panel-2)" : "transparent",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3
+  } }, /* @__PURE__ */ React.createElement(Icon, { name: icon, size: 20, stroke: active ? 2.1 : 1.8, color: active ? "var(--accent)" : "var(--dim)" }), /* @__PURE__ */ React.createElement("span", { style: { fontSize: 9, fontWeight: 600, letterSpacing: 0.2, color: active ? "var(--accent)" : "var(--faint)" } }, label), soon && /* @__PURE__ */ React.createElement("span", { style: { position: "absolute", top: 5, right: 6, width: 6, height: 6, borderRadius: 999, background: "var(--warn)" } }));
+}
+function MeetingTab({ T, lang }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 18, background: "var(--bg)", padding: 24 } }, /* @__PURE__ */ React.createElement("div", { style: { width: 72, height: 72, borderRadius: 18, background: "var(--panel)", border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--accent)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "video", size: 32, stroke: 1.7 })), /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", maxWidth: 440 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 9, justifyContent: "center" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 19, fontWeight: 700, color: "var(--text)" } }, T.meetingRooms), /* @__PURE__ */ React.createElement(Tag, { tone: "warn" }, T.nextVersion)), /* @__PURE__ */ React.createElement("p", { style: { fontFamily: "var(--ui)", fontSize: 13, lineHeight: 1.55, color: "var(--dim)", marginTop: 10 } }, T.meetingDesc)), /* @__PURE__ */ React.createElement(Btn, { icon: "plus", style: { opacity: 0.5, pointerEvents: "none" } }, T.createRoom));
+}
+function DkApp() {
+  const [t, setTweak] = useTweaks(DK_DEFAULTS);
+  const [tab, setTab] = React.useState(t.startTab || "chat");
+  const [activeId, setActiveId] = React.useState(null);
+  const [call, setCall] = React.useState(null);
+  const data = useDaemonData();
+  const me = data.me;
+  const peers = data.peers;
+  const requests = data.requests;
+  const exits = data.exits;
+  const activeExit = data.activeExit;
+  const T = STR[t.lang] || STR.en;
+  const vars = dkTheme(t.theme, t.accent);
+  const rowPad = t.density === "comfortable" ? "11px 12px" : "7px 10px";
+  React.useEffect(() => {
+    if (!activeId && peers.length) setActiveId(peers[0].id);
+  }, [peers, activeId]);
+  React.useEffect(() => {
+    if (!activeId) return;
+    data.loadThread(activeId);
+    dkApi.markRead(activeId).then(data.refresh);
+  }, [activeId]);
+  const onSelect = (id) => setActiveId(id);
+  const onAct = (id, kind) => {
+    const r = requests.find((x) => x.id === id);
+    const uid = r && r.userid || id;
+    (kind === "accept" ? dkApi.accept(uid) : dkApi.reject(uid)).then(data.refresh);
+  };
+  const onRemove = (peer) => {
+    dkApi.remove(peer.id).then(data.refresh);
+    if (peer.id === activeId) setActiveId(null);
+  };
+  const onAdd = (address) => {
+    if (address && address.trim()) dkApi.add(address.trim()).then(data.refresh);
+  };
+  const onSend = (text) => {
+    if (!activeId || !text || !text.trim()) return;
+    dkApi.send(activeId, text.trim()).then(() => data.loadThread(activeId)).then(data.refresh);
+  };
+  const onAlias = (peer) => {
+    const a = window.prompt("Set alias for this peer (empty to clear):", peer.alias || "");
+    if (a !== null) dkApi.alias(peer.id, a).then(data.refresh);
+  };
+  const onSetExit = () => {
+  };
+  const onOpenChat = (id) => {
+    setActiveId(id);
+    setTab("chat");
+  };
+  const onOpenNet = () => setTab("network");
+  const nav = [
+    { id: "chat", icon: "message", label: T.chat },
+    { id: "network", icon: "network", label: T.network },
+    { id: "meeting", icon: "video", label: T.meeting, soon: true },
+    { id: "profile", icon: "userRound", label: T.profile }
+  ];
+  return /* @__PURE__ */ React.createElement("div", { style: { ...vars, "--row-pad": rowPad, position: "fixed", inset: 0, display: "flex", background: "var(--bg)", color: "var(--text)", fontFamily: "var(--ui)" } }, /* @__PURE__ */ React.createElement("div", { style: { width: 68, flexShrink: 0, borderRight: "1px solid var(--line)", background: "var(--rail)", display: "flex", flexDirection: "column", alignItems: "center", padding: "14px 0", gap: 8 } }, /* @__PURE__ */ React.createElement("div", { style: { width: 38, height: 38, borderRadius: 10, background: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 8 } }, /* @__PURE__ */ React.createElement(Icon, { name: "terminal", size: 20, color: "#fff", stroke: 2.2 })), nav.map((n) => /* @__PURE__ */ React.createElement(RailBtn, { key: n.id, icon: n.icon, label: n.label, active: tab === n.id, soon: n.soon, onClick: () => setTab(n.id) })), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer: { ...me, id: me.userId, agent: false }, size: 36, radius: 9 }))), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React.createElement("div", { style: { height: 46, flexShrink: 0, borderBottom: "1px solid var(--line)", background: "var(--panel)", display: "flex", alignItems: "center", gap: 12, padding: "0 16px" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 14, fontWeight: 700, letterSpacing: -0.3, color: "var(--text)" } }, "decentlan"), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12, color: "var(--faint)" } }, "\xB7 ", nav.find((n) => n.id === tab).label.toLowerCase()), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, me.channel, " \xB7 lan ", me.lanVer), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 7, padding: "0 4px" } }, /* @__PURE__ */ React.createElement(StatusDot, { online: me.online }), /* @__PURE__ */ React.createElement(Mono, { size: 12.5, copy: me.ip }, me.ip)), /* @__PURE__ */ React.createElement("span", { style: { width: 1, height: 22, background: "var(--line)" } }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer: { ...me, id: me.userId, agent: false }, size: 26, radius: 7 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, fontWeight: 600, color: "var(--text)" } }, me.name))), tab === "chat" && /* @__PURE__ */ React.createElement(ChatTab, { T, lang: t.lang, peers, requests, activeId, thread: data.threads[activeId], onSelect, onAct, onAdd, onSend, onAlias, onRemove, onBlock: onRemove, onOpenNet, onCall: (p) => setCall({ peer: p, mode: "audio" }) }), tab === "network" && /* @__PURE__ */ React.createElement(NetworkTab, { T, me, peers, exits, activeExit, reqCount: requests.length, onSetExit, onOpenChat }), tab === "meeting" && /* @__PURE__ */ React.createElement(MeetingTab, { T, lang: t.lang }), tab === "profile" && /* @__PURE__ */ React.createElement(ProfileTab, { T, me })), call && /* @__PURE__ */ React.createElement(CallOverlay, { T, peer: call.peer, mode: call.mode, onSetMode: (m) => setCall((c) => ({ ...c, mode: m })), onEnd: () => setCall(null) }), /* @__PURE__ */ React.createElement(TweaksPanel, null, /* @__PURE__ */ React.createElement(TweakSection, { label: t.lang === "zh" ? "\u5916\u89C2" : "Appearance" }), /* @__PURE__ */ React.createElement(
+    TweakRadio,
+    {
+      label: t.lang === "zh" ? "\u4E3B\u9898" : "Theme",
+      value: t.theme,
+      options: [{ value: "dark", label: t.lang === "zh" ? "\u6DF1\u8272" : "Dark" }, { value: "light", label: t.lang === "zh" ? "\u6D45\u8272" : "Light" }],
+      onChange: (v) => setTweak("theme", v)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    TweakColor,
+    {
+      label: t.lang === "zh" ? "\u5F3A\u8C03\u8272" : "Accent",
+      value: t.accent,
+      options: ["#7B6CF6", "#3B82F6", "#10B981", "#F59E0B", "#EC4899", "#E0584B"],
+      onChange: (v) => setTweak("accent", v)
+    }
+  ), /* @__PURE__ */ React.createElement(TweakSection, { label: t.lang === "zh" ? "\u5E03\u5C40" : "Layout" }), /* @__PURE__ */ React.createElement(
+    TweakRadio,
+    {
+      label: t.lang === "zh" ? "\u5BC6\u5EA6" : "Density",
+      value: t.density,
+      options: [{ value: "compact", label: t.lang === "zh" ? "\u7D27\u51D1" : "Compact" }, { value: "comfortable", label: t.lang === "zh" ? "\u5BBD\u677E" : "Comfy" }],
+      onChange: (v) => setTweak("density", v)
+    }
+  ), /* @__PURE__ */ React.createElement(TweakSection, { label: t.lang === "zh" ? "\u8BED\u8A00" : "Language" }), /* @__PURE__ */ React.createElement(
+    TweakRadio,
+    {
+      label: t.lang === "zh" ? "\u754C\u9762\u8BED\u8A00" : "On-screen",
+      value: t.lang,
+      options: [{ value: "en", label: "EN" }, { value: "zh", label: "\u4E2D\u6587" }],
+      onChange: (v) => setTweak("lang", v)
+    }
+  ), /* @__PURE__ */ React.createElement(TweakSection, { label: t.lang === "zh" ? "\u8DF3\u8F6C" : "Jump to" }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" } }, nav.map((n) => /* @__PURE__ */ React.createElement("button", { key: n.id, onClick: () => setTab(n.id), style: {
+    flex: "1 0 30%",
+    height: 32,
+    borderRadius: 8,
+    cursor: "pointer",
+    fontFamily: "var(--mono)",
+    border: "1px solid rgba(255,255,255,0.14)",
+    background: tab === n.id ? "rgba(255,255,255,0.18)" : "rgba(255,255,255,0.06)",
+    color: "#fff",
+    fontSize: 12,
+    fontWeight: 600
+  } }, n.label)))));
+}
+ReactDOM.createRoot(document.getElementById("root")).render(/* @__PURE__ */ React.createElement(DkApp, null));