@tokshare/pick 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,2415 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// ../protocol/src/limits.ts
+var MiB = 1024 * 1024;
+var LIMITS = {
+  /** Free tier ceilings, in decimal megabytes as phones show sizes. A site can ask for less, never more. */
+  maxFileBytes: 5e7,
+  maxFiles: 20,
+  maxSessionBytes: 2e8,
+  /** Up to this size a file goes up in one presigned PUT; above it, multipart. */
+  singlePutBytes: 16 * MiB,
+  /** Multipart parts are all the same size (R2), at least 5 MiB; we use 8 MiB. */
+  minPartBytes: 8 * MiB,
+  maxParts: 1e4,
+  /** How many part URLs the phone may ask for at once. */
+  partBatch: 10,
+  /** Session lifetime. */
+  idleMs: 30 * 6e4,
+  absoluteMs: 2 * 60 * 6e4,
+  /** A ready file is deleted this long after it arrived, downloaded or not. */
+  fileTtlMs: 10 * 6e4,
+  /** The typed short code works for this long after the session is created. */
+  codeTtlMs: 10 * 6e4,
+  /** Times the desktop may download one file (retries after a dropped connection). */
+  maxDownloads: 3,
+  /** Presigned URLs expire after this many seconds. */
+  presignSeconds: 15 * 60,
+  /** Bytes of a finished upload read back to check its real type. */
+  sniffBytes: 4096,
+  /** Direct (local network) transfers: bytes per data-channel message, how long the phone waits for
+   *  the link before using the cloud, and for the website's "got" after the last byte. */
+  directChunkBytes: 64 * 1024,
+  directConnectMs: 8e3,
+  directWaitMs: 2500,
+  directConfirmMs: 2e4,
+  /** Largest WebRTC setup message the relay passes on. */
+  maxSignalBytes: 16384
+};
+
+// ../protocol/src/errors.ts
+var PickError = class extends Error {
+  constructor(code, message, status = 400) {
+    super(message || code);
+    __publicField(this, "code");
+    __publicField(this, "status");
+    this.name = "PickError";
+    this.code = code;
+    this.status = status;
+  }
+};
+
+// ../protocol/src/filename.ts
+function extensionOf(name) {
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot).toLowerCase() : "";
+}
+
+// ../protocol/src/mime.ts
+function parseAccept(accept = "") {
+  const rule = { extensions: [], types: [], wildcards: [] };
+  for (const raw of accept.split(",")) {
+    const token = raw.trim().toLowerCase();
+    if (!token) continue;
+    if (token.startsWith(".")) rule.extensions.push(token);
+    else if (/^[a-z0-9.+-]+\/\*$/.test(token)) rule.wildcards.push(token.slice(0, -1));
+    else if (/^[a-z0-9.+-]+\/[a-z0-9.+-]+$/.test(token)) rule.types.push(token);
+  }
+  return rule;
+}
+function typeMatches(rule, type) {
+  const lower = type.toLowerCase();
+  return rule.types.includes(lower) || rule.wildcards.some((prefix) => lower.startsWith(prefix));
+}
+function matchesAccept(accept, name, type) {
+  const rule = parseAccept(accept);
+  if (!rule.extensions.length && !rule.types.length && !rule.wildcards.length) return true;
+  return rule.extensions.includes(extensionOf(name)) || Boolean(type) && typeMatches(rule, type);
+}
+var ascii = (bytes, start, length) => String.fromCharCode(...bytes.subarray(start, start + length));
+var starts = (bytes, signature, offset = 0) => signature.every((value, index) => bytes[offset + index] === value);
+function sniff(bytes) {
+  if (bytes.length < 4) return null;
+  if (starts(bytes, [255, 216, 255])) return "image/jpeg";
+  if (starts(bytes, [137, 80, 78, 71, 13, 10, 26, 10])) return "image/png";
+  if (ascii(bytes, 0, 4) === "GIF8") return "image/gif";
+  if (ascii(bytes, 0, 4) === "RIFF" && ascii(bytes, 8, 4) === "WEBP") return "image/webp";
+  if (ascii(bytes, 0, 4) === "RIFF" && ascii(bytes, 8, 4) === "WAVE") return "audio/wav";
+  if (ascii(bytes, 0, 4) === "RIFF" && ascii(bytes, 8, 4) === "AVI ") return "video/x-msvideo";
+  if (ascii(bytes, 4, 4) === "ftyp") {
+    const brand = ascii(bytes, 8, 4);
+    if (/^(heic|heix|hevc|hevx|heim|heis)$/.test(brand)) return "image/heic";
+    if (brand === "mif1" || brand === "msf1") return "image/heif";
+    if (brand === "avif" || brand === "avis") return "image/avif";
+    if (brand === "qt  ") return "video/quicktime";
+    if (/^(M4A |M4B )$/.test(brand)) return "audio/mp4";
+    if (/^3g/.test(brand)) return "video/3gpp";
+    return "video/mp4";
+  }
+  if (ascii(bytes, 0, 5) === "%PDF-") return "application/pdf";
+  if (starts(bytes, [80, 75, 3, 4]) || starts(bytes, [80, 75, 5, 6])) return "application/zip";
+  if (starts(bytes, [31, 139])) return "application/gzip";
+  if (starts(bytes, [55, 122, 188, 175, 39, 28])) return "application/x-7z-compressed";
+  if (ascii(bytes, 0, 4) === "Rar!") return "application/vnd.rar";
+  if (ascii(bytes, 0, 3) === "ID3" || starts(bytes, [255, 251]) || starts(bytes, [255, 243])) return "audio/mpeg";
+  if (ascii(bytes, 0, 4) === "OggS") return "audio/ogg";
+  if (ascii(bytes, 0, 4) === "fLaC") return "audio/flac";
+  if (starts(bytes, [26, 69, 223, 163])) return "video/webm";
+  if (starts(bytes, [208, 207, 17, 224, 161, 177, 26, 225])) return "application/x-ole-storage";
+  if (ascii(bytes, 0, 2) === "MZ") return "application/x-msdownload";
+  if (starts(bytes, [127, 69, 76, 70])) return "application/x-elf";
+  if (starts(bytes, [207, 250, 237, 254]) || starts(bytes, [254, 237, 250, 207])) return "application/x-mach-binary";
+  const head = ascii(bytes, 0, Math.min(bytes.length, 256)).replace(/^/, "").trimStart().toLowerCase();
+  if (head.startsWith("<svg") || head.startsWith("<?xml") && head.includes("<svg")) return "image/svg+xml";
+  if (head.startsWith("<!doctype html") || head.startsWith("<html")) return "text/html";
+  return null;
+}
+var ZIP_FAMILY = /^(application\/(zip|x-zip-compressed|epub\+zip|vnd\.android\.package-archive|java-archive|vnd\.openxmlformats-officedocument\..+|vnd\.oasis\.opendocument\..+))$/;
+var OLE_FAMILY = /^application\/(msword|vnd\.ms-excel|vnd\.ms-powerpoint|vnd\.ms-outlook|x-ole-storage)$/;
+var DANGEROUS = /* @__PURE__ */ new Set(["application/x-msdownload", "application/x-elf", "application/x-mach-binary", "text/html", "image/svg+xml"]);
+function checkSniffed(accept, name, declared, sniffed) {
+  if (!sniffed) return true;
+  const rule = parseAccept(accept);
+  const declaredLower = declared.toLowerCase();
+  const compatible = (type) => type === sniffed || sniffed === "application/zip" && ZIP_FAMILY.test(type) || sniffed === "application/x-ole-storage" && OLE_FAMILY.test(type) || sniffed === "image/heif" && type === "image/heic" || sniffed === "video/mp4" && /^(video|audio)\//.test(type);
+  if (DANGEROUS.has(sniffed)) {
+    return rule.types.includes(sniffed) || sniffed === "image/svg+xml" && rule.extensions.includes(".svg");
+  }
+  if (!rule.types.length && !rule.wildcards.length) return true;
+  if (rule.types.some(compatible)) return true;
+  if (rule.wildcards.some((prefix) => sniffed.startsWith(prefix))) return true;
+  return rule.extensions.includes(extensionOf(name)) && (compatible(declaredLower) || !declaredLower);
+}
+
+// src/config.ts
+var DEFAULT_RELAY = "https://tokshare-pick.pjturki.workers.dev";
+var SDK_VERSION = "0.1.0";
+
+// src/direct.ts
+function verifyDirectFile(meta, chunks, size, accept, maxBytes) {
+  if (size !== meta.size || size > maxBytes) return { ok: false, code: "size_mismatch" };
+  const head = new Uint8Array(Math.min(size, LIMITS.sniffBytes));
+  let filled = 0;
+  for (const chunk of chunks) {
+    if (filled >= head.length) break;
+    const take = chunk.subarray(0, head.length - filled);
+    head.set(take, filled);
+    filled += take.length;
+  }
+  const sniffed = sniff(head);
+  if (!checkSniffed(accept, meta.name, meta.type, sniffed)) return { ok: false, code: "type_rejected" };
+  const file = new File(chunks, meta.name, { type: meta.type || sniffed || "", lastModified: meta.lastModified });
+  return { ok: true, file, sniffed };
+}
+var DirectReceiver = class _DirectReceiver {
+  constructor(signal, handlers) {
+    __publicField(this, "signal", signal);
+    __publicField(this, "handlers", handlers);
+    __publicField(this, "pc", null);
+    __publicField(this, "channel", null);
+    __publicField(this, "id", "");
+    __publicField(this, "isOpen", false);
+    __publicField(this, "current", null);
+  }
+  static supported() {
+    return typeof RTCPeerConnection === "function";
+  }
+  onSignal(d) {
+    if (d.kind === "offer" && d.sdp) {
+      this.answer(d.pc, d.sdp);
+      return;
+    }
+    if (d.pc !== this.id || !this.pc) return;
+    if (d.kind === "ice" && d.candidate) this.pc.addIceCandidate(d.candidate).catch(() => void 0);
+    else if (d.kind === "bye") this.close();
+  }
+  /** A new offer replaces any earlier link (the phone reloaded, or retried after a network change). */
+  answer(id, sdp) {
+    if (!_DirectReceiver.supported()) return;
+    this.close();
+    this.id = id;
+    const pc = new RTCPeerConnection({ iceServers: [] });
+    this.pc = pc;
+    pc.onicecandidate = (event) => {
+      if (this.id === id) this.signal({ pc: id, kind: "ice", candidate: event.candidate ? event.candidate.toJSON() : null });
+    };
+    pc.onconnectionstatechange = () => {
+      if (this.id === id && (pc.connectionState === "failed" || pc.connectionState === "closed")) this.close();
+    };
+    pc.ondatachannel = (event) => {
+      if (this.id !== id) return;
+      const channel = event.channel;
+      channel.binaryType = "arraybuffer";
+      this.channel = channel;
+      const opened = () => {
+        if (this.channel === channel && !this.isOpen) {
+          this.isOpen = true;
+          this.handlers.state(true);
+        }
+      };
+      channel.onopen = opened;
+      channel.onclose = () => {
+        if (this.channel === channel) this.close();
+      };
+      channel.onmessage = (message) => this.onMessage(channel, message.data);
+      if (channel.readyState === "open") opened();
+    };
+    pc.setRemoteDescription({ type: "offer", sdp }).then(() => pc.createAnswer()).then((answer) => pc.setLocalDescription(answer)).then(() => {
+      if (this.id === id) this.signal({ pc: id, kind: "answer", sdp: pc.localDescription.sdp });
+    }).catch(() => this.close());
+  }
+  onMessage(channel, data) {
+    if (typeof data !== "string") {
+      const current = this.current;
+      if (!current || !(data instanceof ArrayBuffer)) return;
+      current.chunks.push(new Uint8Array(data));
+      current.received += data.byteLength;
+      if (current.received > current.size) {
+        current.chunks = [];
+        return;
+      }
+      this.handlers.progress(current.id, current.received, current.size);
+      return;
+    }
+    let message;
+    try {
+      message = JSON.parse(data);
+    } catch {
+      return;
+    }
+    if (message.t === "file" && typeof message.id === "string" && Number.isSafeInteger(message.size)) {
+      this.current = { id: message.id, size: message.size, chunks: [], received: 0 };
+    } else if (message.t === "end" && this.current?.id === message.id) {
+      const { id, chunks, received } = this.current;
+      this.current = null;
+      this.handlers.complete(id, chunks, received).then((result) => result, () => ({ ok: false, code: "failed" })).then((result) => {
+        const reply = result.ok ? { t: "got", id } : { t: "bad", id, code: result.code };
+        try {
+          channel.send(JSON.stringify(reply));
+        } catch {
+        }
+      });
+    }
+  }
+  close() {
+    const wasOpen = this.isOpen;
+    this.isOpen = false;
+    const { pc, channel } = this;
+    this.pc = null;
+    this.channel = null;
+    this.current = null;
+    try {
+      channel?.close();
+    } catch {
+    }
+    try {
+      pc?.close();
+    } catch {
+    }
+    if (wasOpen) this.handlers.state(false);
+  }
+};
+
+// src/announce.ts
+var HIDDEN_KEY = "tokshare.announce.hidden";
+var LINK = "https://tokshare.vercel.app/?ref=pick";
+var hidden = () => {
+  try {
+    return localStorage.getItem(HIDDEN_KEY) === "1";
+  } catch {
+    return false;
+  }
+};
+function announcement(enabled, t) {
+  if (enabled === false || hidden()) return null;
+  const box = document.createElement("p");
+  box.className = "announce";
+  const dot = document.createElement("i");
+  dot.setAttribute("aria-hidden", "true");
+  const text = document.createElement("span");
+  text.textContent = `${t("announceText")} `;
+  const link = document.createElement("a");
+  link.href = LINK;
+  link.target = "_blank";
+  link.rel = "noopener";
+  link.textContent = t("announceLink");
+  text.append(link);
+  const hide = document.createElement("button");
+  hide.type = "button";
+  hide.className = "announce-hide";
+  hide.textContent = "\xD7";
+  hide.setAttribute("aria-label", t("announceHide"));
+  hide.addEventListener("click", () => {
+    try {
+      localStorage.setItem(HIDDEN_KEY, "1");
+    } catch {
+    }
+    box.remove();
+  });
+  box.append(dot, text, hide);
+  return box;
+}
+
+// src/i18n.ts
+var en = {
+  title: "Pick files from your phone",
+  titleOne: "Pick a file from your phone",
+  scan: "Scan with your phone's camera",
+  orType: "No camera? Open {host} on your phone and type",
+  loading: "Getting a code\u2026",
+  waiting: "Waiting for your phone\u2026",
+  connected: "Connected: {label}",
+  connectedDirect: "Connected over Wi-Fi: {label}",
+  disconnect: "Not you? Disconnect",
+  phoneLeft: "Your phone disconnected. It reconnects by itself when the page is open.",
+  approveTitle: "Approve this phone?",
+  approveMatch: "Your phone should show {match}.",
+  approve: "Approve",
+  reject: "Reject",
+  sending: "Sending from phone {percent}%",
+  receiving: "Receiving {percent}%",
+  received: "Received",
+  failed: "Not received",
+  cancel: "Cancel",
+  done: "Done",
+  useFiles: "Use {count} files",
+  useFile: "Use this file",
+  expired: "This code expired.",
+  newCode: "Get a new code",
+  error: "Couldn't start: {message}",
+  tryAgain: "Try again",
+  close: "Close",
+  privacy: "Files go straight to this site and are deleted from TokShare once received.",
+  // Upload field
+  dropTitle: "Drag & drop files here",
+  dropTitleOne: "Drag & drop a file here",
+  dropActive: "Drop to add",
+  or: "or",
+  browse: "Browse files",
+  usePhone: "Use your phone",
+  hintTypes: "{types} \xB7 up to {size}",
+  hintAny: "Any file \xB7 up to {size}",
+  hintCount: "Up to {count} files",
+  phoneTitle: "Scan with your phone",
+  phoneStep1: "Open your phone's camera and scan the code",
+  phoneStep2: "Pick photos or files on your phone",
+  phoneStep3: "They appear here as they arrive",
+  phoneCode: "No camera? Open {host} and type",
+  back: "Back",
+  doneWithPhone: "Done",
+  sourcePhone: "From phone",
+  sourceDevice: "This device",
+  remove: "Remove {name}",
+  tooLarge: "{name} is larger than {size}.",
+  wrongType: "{name} isn't an accepted file type.",
+  tooMany: "You can add up to {count} files.",
+  fileCount: "{count} files",
+  clearAll: "Remove all",
+  // TokShare for desktop
+  announceText: "Move photos between your phone and your own PC anytime, over Wi-Fi.",
+  announceLink: "Get TokShare for desktop",
+  announceHide: "Hide"
+};
+var ar = {
+  title: "\u0627\u062E\u062A\u0631 \u0645\u0644\u0641\u0627\u062A \u0645\u0646 \u0647\u0627\u062A\u0641\u0643",
+  titleOne: "\u0627\u062E\u062A\u0631 \u0645\u0644\u0641\u064B\u0627 \u0645\u0646 \u0647\u0627\u062A\u0641\u0643",
+  scan: "\u0627\u0645\u0633\u062D \u0627\u0644\u0631\u0645\u0632 \u0628\u0643\u0627\u0645\u064A\u0631\u0627 \u0647\u0627\u062A\u0641\u0643",
+  orType: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0643\u0627\u0645\u064A\u0631\u0627\u061F \u0627\u0641\u062A\u062D {host} \u0639\u0644\u0649 \u0647\u0627\u062A\u0641\u0643 \u0648\u0627\u0643\u062A\u0628",
+  loading: "\u062C\u0627\u0631\u064D \u062A\u062C\u0647\u064A\u0632 \u0627\u0644\u0631\u0645\u0632\u2026",
+  waiting: "\u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631 \u0647\u0627\u062A\u0641\u0643\u2026",
+  connected: "\u0645\u062A\u0635\u0644: {label}",
+  connectedDirect: "\u0645\u062A\u0635\u0644 \u0639\u0628\u0631 Wi-Fi: {label}",
+  disconnect: "\u0644\u064A\u0633 \u0647\u0627\u062A\u0641\u0643\u061F \u0627\u0641\u0635\u0644\u0647",
+  phoneLeft: "\u0627\u0646\u0642\u0637\u0639 \u0627\u062A\u0635\u0627\u0644 \u0647\u0627\u062A\u0641\u0643. \u0633\u064A\u0639\u0648\u062F \u062A\u0644\u0642\u0627\u0626\u064A\u064B\u0627 \u0645\u0627 \u062F\u0627\u0645\u062A \u0627\u0644\u0635\u0641\u062D\u0629 \u0645\u0641\u062A\u0648\u062D\u0629 \u0639\u0644\u064A\u0647.",
+  approveTitle: "\u0647\u0644 \u062A\u0648\u0627\u0641\u0642 \u0639\u0644\u0649 \u0647\u0630\u0627 \u0627\u0644\u0647\u0627\u062A\u0641\u061F",
+  approveMatch: "\u064A\u062C\u0628 \u0623\u0646 \u064A\u0639\u0631\u0636 \u0647\u0627\u062A\u0641\u0643 \u0627\u0644\u0631\u0642\u0645 {match}.",
+  approve: "\u0645\u0648\u0627\u0641\u0642\u0629",
+  reject: "\u0631\u0641\u0636",
+  sending: "\u062C\u0627\u0631\u064D \u0627\u0644\u0625\u0631\u0633\u0627\u0644 \u0645\u0646 \u0627\u0644\u0647\u0627\u062A\u0641 {percent}%",
+  receiving: "\u062C\u0627\u0631\u064D \u0627\u0644\u0627\u0633\u062A\u0644\u0627\u0645 {percent}%",
+  received: "\u062A\u0645 \u0627\u0644\u0627\u0633\u062A\u0644\u0627\u0645",
+  failed: "\u0644\u0645 \u064A\u064F\u0633\u062A\u0644\u0645",
+  cancel: "\u0625\u0644\u063A\u0627\u0621",
+  done: "\u062A\u0645",
+  useFiles: "\u0627\u0633\u062A\u062E\u062F\u0645 {count} \u0645\u0644\u0641\u0627\u062A",
+  useFile: "\u0627\u0633\u062A\u062E\u062F\u0645 \u0647\u0630\u0627 \u0627\u0644\u0645\u0644\u0641",
+  expired: "\u0627\u0646\u062A\u0647\u062A \u0635\u0644\u0627\u062D\u064A\u0629 \u0647\u0630\u0627 \u0627\u0644\u0631\u0645\u0632.",
+  newCode: "\u0627\u062D\u0635\u0644 \u0639\u0644\u0649 \u0631\u0645\u0632 \u062C\u062F\u064A\u062F",
+  error: "\u062A\u0639\u0630\u0651\u0631 \u0627\u0644\u0628\u062F\u0621: {message}",
+  tryAgain: "\u062D\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649",
+  close: "\u0625\u063A\u0644\u0627\u0642",
+  privacy: "\u062A\u0635\u0644 \u0627\u0644\u0645\u0644\u0641\u0627\u062A \u0645\u0628\u0627\u0634\u0631\u0629 \u0625\u0644\u0649 \u0647\u0630\u0627 \u0627\u0644\u0645\u0648\u0642\u0639\u060C \u0648\u064A\u062D\u0630\u0641\u0647\u0627 TokShare \u0641\u0648\u0631 \u0627\u0633\u062A\u0644\u0627\u0645\u0647\u0627.",
+  dropTitle: "\u0627\u0633\u062D\u0628 \u0627\u0644\u0645\u0644\u0641\u0627\u062A \u0648\u0623\u0641\u0644\u062A\u0647\u0627 \u0647\u0646\u0627",
+  dropTitleOne: "\u0627\u0633\u062D\u0628 \u0645\u0644\u0641\u064B\u0627 \u0648\u0623\u0641\u0644\u062A\u0647 \u0647\u0646\u0627",
+  dropActive: "\u0623\u0641\u0644\u062A \u0644\u0644\u0625\u0636\u0627\u0641\u0629",
+  or: "\u0623\u0648",
+  browse: "\u062A\u0635\u0641\u0651\u062D \u0627\u0644\u0645\u0644\u0641\u0627\u062A",
+  usePhone: "\u0627\u0633\u062A\u062E\u062F\u0645 \u0647\u0627\u062A\u0641\u0643",
+  hintTypes: "{types} \xB7 \u062D\u062A\u0649 {size}",
+  hintAny: "\u0623\u064A \u0645\u0644\u0641 \xB7 \u062D\u062A\u0649 {size}",
+  hintCount: "\u062D\u062A\u0649 {count} \u0645\u0644\u0641\u0627\u062A",
+  phoneTitle: "\u0627\u0645\u0633\u062D \u0627\u0644\u0631\u0645\u0632 \u0628\u0647\u0627\u062A\u0641\u0643",
+  phoneStep1: "\u0627\u0641\u062A\u062D \u0643\u0627\u0645\u064A\u0631\u0627 \u0647\u0627\u062A\u0641\u0643 \u0648\u0627\u0645\u0633\u062D \u0627\u0644\u0631\u0645\u0632",
+  phoneStep2: "\u0627\u062E\u062A\u0631 \u0627\u0644\u0635\u0648\u0631 \u0623\u0648 \u0627\u0644\u0645\u0644\u0641\u0627\u062A \u0639\u0644\u0649 \u0647\u0627\u062A\u0641\u0643",
+  phoneStep3: "\u062A\u0638\u0647\u0631 \u0647\u0646\u0627 \u0641\u0648\u0631 \u0648\u0635\u0648\u0644\u0647\u0627",
+  phoneCode: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0643\u0627\u0645\u064A\u0631\u0627\u061F \u0627\u0641\u062A\u062D {host} \u0648\u0627\u0643\u062A\u0628",
+  back: "\u0631\u062C\u0648\u0639",
+  doneWithPhone: "\u062A\u0645",
+  sourcePhone: "\u0645\u0646 \u0627\u0644\u0647\u0627\u062A\u0641",
+  sourceDevice: "\u0647\u0630\u0627 \u0627\u0644\u062C\u0647\u0627\u0632",
+  remove: "\u0625\u0632\u0627\u0644\u0629 {name}",
+  tooLarge: "{name} \u0623\u0643\u0628\u0631 \u0645\u0646 {size}.",
+  wrongType: "{name} \u0644\u064A\u0633 \u0645\u0646 \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0645\u0644\u0641\u0627\u062A \u0627\u0644\u0645\u0642\u0628\u0648\u0644\u0629.",
+  tooMany: "\u064A\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 {count} \u0645\u0644\u0641\u0627\u062A \u0643\u062D\u062F \u0623\u0642\u0635\u0649.",
+  fileCount: "{count} \u0645\u0644\u0641\u0627\u062A",
+  clearAll: "\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0643\u0644",
+  announceText: "\u0627\u0646\u0642\u0644 \u0627\u0644\u0635\u0648\u0631 \u0628\u064A\u0646 \u0647\u0627\u062A\u0641\u0643 \u0648\u0643\u0645\u0628\u064A\u0648\u062A\u0631\u0643 \u0641\u064A \u0623\u064A \u0648\u0642\u062A \u0639\u0628\u0631 Wi-Fi.",
+  announceLink: "\u062D\u0645\u0651\u0644 TokShare \u0644\u0644\u0643\u0645\u0628\u064A\u0648\u062A\u0631",
+  announceHide: "\u0625\u062E\u0641\u0627\u0621"
+};
+var STRINGS = { en, ar };
+function resolveLocale(requested) {
+  if (requested === "en" || requested === "ar") return requested;
+  const page = typeof document !== "undefined" ? document.documentElement.lang : "";
+  const language = page || (typeof navigator !== "undefined" ? navigator.language : "en");
+  return /^ar\b/i.test(language) ? "ar" : "en";
+}
+function translator(locale, overrides = {}) {
+  return (key, values = {}) => (overrides[key] ?? STRINGS[locale][key]).replace(/\{(\w+)\}/g, (_, name) => String(values[name] ?? ""));
+}
+function formatBytes(bytes, locale) {
+  const units = locale === "ar" ? ["\u0628\u0627\u064A\u062A", "\u0643.\u0628", "\u0645.\u0628", "\u062C.\u0628"] : ["B", "KB", "MB", "GB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1e3 && unit < units.length - 1) {
+    value /= 1e3;
+    unit++;
+  }
+  return `${(value >= 100 || unit === 0 ? Math.round(value) : Math.round(value * 10) / 10).toLocaleString(locale)} ${units[unit]}`;
+}
+
+// ../../node_modules/.pnpm/uqr@0.1.3/node_modules/uqr/dist/index.mjs
+var QrCodeDataType = /* @__PURE__ */ ((QrCodeDataType2) => {
+  QrCodeDataType2[QrCodeDataType2["Border"] = -1] = "Border";
+  QrCodeDataType2[QrCodeDataType2["Data"] = 0] = "Data";
+  QrCodeDataType2[QrCodeDataType2["Function"] = 1] = "Function";
+  QrCodeDataType2[QrCodeDataType2["Position"] = 2] = "Position";
+  QrCodeDataType2[QrCodeDataType2["Timing"] = 3] = "Timing";
+  QrCodeDataType2[QrCodeDataType2["Alignment"] = 4] = "Alignment";
+  return QrCodeDataType2;
+})(QrCodeDataType || {});
+var LOW = [0, 1];
+var MEDIUM = [1, 0];
+var QUARTILE = [2, 3];
+var HIGH = [3, 2];
+var EccMap = {
+  L: LOW,
+  M: MEDIUM,
+  Q: QUARTILE,
+  H: HIGH
+};
+var NUMERIC_REGEX = /^\d*$/;
+var ALPHANUMERIC_REGEX = /^[A-Z0-9 $%*+./:-]*$/;
+var ALPHANUMERIC_CHARSET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:";
+var MIN_VERSION = 1;
+var MAX_VERSION = 40;
+var PENALTY_N1 = 3;
+var PENALTY_N2 = 3;
+var PENALTY_N3 = 40;
+var PENALTY_N4 = 10;
+var ECC_CODEWORDS_PER_BLOCK = [
+  // Version: (note that index 0 is for padding, and is set to an illegal value)
+  // 0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40    Error correction level
+  [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+  // Low
+  [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
+  // Medium
+  [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+  // Quartile
+  [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30]
+  // High
+];
+var NUM_ERROR_CORRECTION_BLOCKS = [
+  // Version: (note that index 0 is for padding, and is set to an illegal value)
+  // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40    Error correction level
+  [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
+  // Low
+  [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
+  // Medium
+  [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
+  // Quartile
+  [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81]
+  // High
+];
+var QrCode = class {
+  /* -- Constructor (low level) and fields -- */
+  // Creates a new QR Code with the given version number,
+  // error correction level, data codeword bytes, and mask number.
+  // This is a low-level API that most users should not use directly.
+  // A mid-level API is the encodeSegments() function.
+  constructor(version, ecc, dataCodewords, msk) {
+    /* -- Fields -- */
+    // The width and height of this QR Code, measured in modules, between
+    // 21 and 177 (inclusive). This is equal to version * 4 + 17.
+    __publicField(this, "size");
+    // The index of the mask pattern used in this QR Code, which is between 0 and 7 (inclusive).
+    // Even if a QR Code is created with automatic masking requested (mask = -1),
+    // the resulting object still has a mask value between 0 and 7.
+    __publicField(this, "mask");
+    // The modules of this QR Code (false = light, true = dark).
+    // Immutable after constructor finishes. Accessed through getModule().
+    __publicField(this, "modules", []);
+    __publicField(this, "types", []);
+    this.version = version;
+    this.ecc = ecc;
+    if (version < MIN_VERSION || version > MAX_VERSION)
+      throw new RangeError("Version value out of range");
+    if (msk < -1 || msk > 7)
+      throw new RangeError("Mask value out of range");
+    this.size = version * 4 + 17;
+    const row = Array.from({ length: this.size }).fill(false);
+    for (let i = 0; i < this.size; i++) {
+      this.modules.push(row.slice());
+      this.types.push(row.map(() => 0));
+    }
+    this.drawFunctionPatterns();
+    const allCodewords = this.addEccAndInterleave(dataCodewords);
+    this.drawCodewords(allCodewords);
+    if (msk === -1) {
+      let minPenalty = 1e9;
+      for (let i = 0; i < 8; i++) {
+        this.applyMask(i);
+        this.drawFormatBits(i);
+        const penalty = this.getPenaltyScore();
+        if (penalty < minPenalty) {
+          msk = i;
+          minPenalty = penalty;
+        }
+        this.applyMask(i);
+      }
+    }
+    this.mask = msk;
+    this.applyMask(msk);
+    this.drawFormatBits(msk);
+  }
+  /* -- Accessor methods -- */
+  // Returns the color of the module (pixel) at the given coordinates, which is false
+  // for light or true for dark. The top left corner has the coordinates (x=0, y=0).
+  // If the given coordinates are out of bounds, then false (light) is returned.
+  getModule(x, y) {
+    return x >= 0 && x < this.size && y >= 0 && y < this.size && this.modules[y][x];
+  }
+  /* -- Private helper methods for constructor: Drawing function modules -- */
+  // Reads this object's version field, and draws and marks all function modules.
+  drawFunctionPatterns() {
+    for (let i = 0; i < this.size; i++) {
+      this.setFunctionModule(6, i, i % 2 === 0, QrCodeDataType.Timing);
+      this.setFunctionModule(i, 6, i % 2 === 0, QrCodeDataType.Timing);
+    }
+    this.drawFinderPattern(3, 3);
+    this.drawFinderPattern(this.size - 4, 3);
+    this.drawFinderPattern(3, this.size - 4);
+    const alignPatPos = this.getAlignmentPatternPositions();
+    const numAlign = alignPatPos.length;
+    for (let i = 0; i < numAlign; i++) {
+      for (let j = 0; j < numAlign; j++) {
+        if (!(i === 0 && j === 0 || i === 0 && j === numAlign - 1 || i === numAlign - 1 && j === 0))
+          this.drawAlignmentPattern(alignPatPos[i], alignPatPos[j]);
+      }
+    }
+    this.drawFormatBits(0);
+    this.drawVersion();
+  }
+  // Draws two copies of the format bits (with its own error correction code)
+  // based on the given mask and this object's error correction level field.
+  drawFormatBits(mask) {
+    const data = this.ecc[1] << 3 | mask;
+    let rem = data;
+    for (let i = 0; i < 10; i++)
+      rem = rem << 1 ^ (rem >>> 9) * 1335;
+    const bits = (data << 10 | rem) ^ 21522;
+    for (let i = 0; i <= 5; i++)
+      this.setFunctionModule(8, i, getBit(bits, i));
+    this.setFunctionModule(8, 7, getBit(bits, 6));
+    this.setFunctionModule(8, 8, getBit(bits, 7));
+    this.setFunctionModule(7, 8, getBit(bits, 8));
+    for (let i = 9; i < 15; i++)
+      this.setFunctionModule(14 - i, 8, getBit(bits, i));
+    for (let i = 0; i < 8; i++)
+      this.setFunctionModule(this.size - 1 - i, 8, getBit(bits, i));
+    for (let i = 8; i < 15; i++)
+      this.setFunctionModule(8, this.size - 15 + i, getBit(bits, i));
+    this.setFunctionModule(8, this.size - 8, true);
+  }
+  // Draws two copies of the version bits (with its own error correction code),
+  // based on this object's version field, iff 7 <= version <= 40.
+  drawVersion() {
+    if (this.version < 7)
+      return;
+    let rem = this.version;
+    for (let i = 0; i < 12; i++)
+      rem = rem << 1 ^ (rem >>> 11) * 7973;
+    const bits = this.version << 12 | rem;
+    for (let i = 0; i < 18; i++) {
+      const color = getBit(bits, i);
+      const a = this.size - 11 + i % 3;
+      const b = Math.floor(i / 3);
+      this.setFunctionModule(a, b, color);
+      this.setFunctionModule(b, a, color);
+    }
+  }
+  // Draws a 9*9 finder pattern including the border separator,
+  // with the center module at (x, y). Modules can be out of bounds.
+  drawFinderPattern(x, y) {
+    for (let dy = -4; dy <= 4; dy++) {
+      for (let dx = -4; dx <= 4; dx++) {
+        const dist = Math.max(Math.abs(dx), Math.abs(dy));
+        const xx = x + dx;
+        const yy = y + dy;
+        if (xx >= 0 && xx < this.size && yy >= 0 && yy < this.size)
+          this.setFunctionModule(xx, yy, dist !== 2 && dist !== 4, QrCodeDataType.Position);
+      }
+    }
+  }
+  // Draws a 5*5 alignment pattern, with the center module
+  // at (x, y). All modules must be in bounds.
+  drawAlignmentPattern(x, y) {
+    for (let dy = -2; dy <= 2; dy++) {
+      for (let dx = -2; dx <= 2; dx++) {
+        this.setFunctionModule(
+          x + dx,
+          y + dy,
+          Math.max(Math.abs(dx), Math.abs(dy)) !== 1,
+          QrCodeDataType.Alignment
+        );
+      }
+    }
+  }
+  // Sets the color of a module and marks it as a function module.
+  // Only used by the constructor. Coordinates must be in bounds.
+  setFunctionModule(x, y, isDark, type = QrCodeDataType.Function) {
+    this.modules[y][x] = isDark;
+    this.types[y][x] = type;
+  }
+  /* -- Private helper methods for constructor: Codewords and masking -- */
+  // Returns a new byte string representing the given data with the appropriate error correction
+  // codewords appended to it, based on this object's version and error correction level.
+  addEccAndInterleave(data) {
+    const ver = this.version;
+    const ecl = this.ecc;
+    if (data.length !== getNumDataCodewords(ver, ecl))
+      throw new RangeError("Invalid argument");
+    const numBlocks = NUM_ERROR_CORRECTION_BLOCKS[ecl[0]][ver];
+    const blockEccLen = ECC_CODEWORDS_PER_BLOCK[ecl[0]][ver];
+    const rawCodewords = Math.floor(getNumRawDataModules(ver) / 8);
+    const numShortBlocks = numBlocks - rawCodewords % numBlocks;
+    const shortBlockLen = Math.floor(rawCodewords / numBlocks);
+    const blocks = [];
+    const rsDiv = reedSolomonComputeDivisor(blockEccLen);
+    for (let i = 0, k = 0; i < numBlocks; i++) {
+      const dat = data.slice(k, k + shortBlockLen - blockEccLen + (i < numShortBlocks ? 0 : 1));
+      k += dat.length;
+      const ecc = reedSolomonComputeRemainder(dat, rsDiv);
+      if (i < numShortBlocks)
+        dat.push(0);
+      blocks.push(dat.concat(ecc));
+    }
+    const result = [];
+    for (let i = 0; i < blocks[0].length; i++) {
+      blocks.forEach((block, j) => {
+        if (i !== shortBlockLen - blockEccLen || j >= numShortBlocks)
+          result.push(block[i]);
+      });
+    }
+    return result;
+  }
+  // Draws the given sequence of 8-bit codewords (data and error correction) onto the entire
+  // data area of this QR Code. Function modules need to be marked off before this is called.
+  drawCodewords(data) {
+    if (data.length !== Math.floor(getNumRawDataModules(this.version) / 8))
+      throw new RangeError("Invalid argument");
+    let i = 0;
+    for (let right = this.size - 1; right >= 1; right -= 2) {
+      if (right === 6)
+        right = 5;
+      for (let vert = 0; vert < this.size; vert++) {
+        for (let j = 0; j < 2; j++) {
+          const x = right - j;
+          const upward = (right + 1 & 2) === 0;
+          const y = upward ? this.size - 1 - vert : vert;
+          if (!this.types[y][x] && i < data.length * 8) {
+            this.modules[y][x] = getBit(data[i >>> 3], 7 - (i & 7));
+            i++;
+          }
+        }
+      }
+    }
+  }
+  // XORs the codeword modules in this QR Code with the given mask pattern.
+  // The function modules must be marked and the codeword bits must be drawn
+  // before masking. Due to the arithmetic of XOR, calling applyMask() with
+  // the same mask value a second time will undo the mask. A final well-formed
+  // QR Code needs exactly one (not zero, two, etc.) mask applied.
+  applyMask(mask) {
+    if (mask < 0 || mask > 7)
+      throw new RangeError("Mask value out of range");
+    for (let y = 0; y < this.size; y++) {
+      for (let x = 0; x < this.size; x++) {
+        let invert;
+        switch (mask) {
+          case 0:
+            invert = (x + y) % 2 === 0;
+            break;
+          case 1:
+            invert = y % 2 === 0;
+            break;
+          case 2:
+            invert = x % 3 === 0;
+            break;
+          case 3:
+            invert = (x + y) % 3 === 0;
+            break;
+          case 4:
+            invert = (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0;
+            break;
+          case 5:
+            invert = x * y % 2 + x * y % 3 === 0;
+            break;
+          case 6:
+            invert = (x * y % 2 + x * y % 3) % 2 === 0;
+            break;
+          case 7:
+            invert = ((x + y) % 2 + x * y % 3) % 2 === 0;
+            break;
+          default:
+            throw new Error("Unreachable");
+        }
+        if (!this.types[y][x] && invert)
+          this.modules[y][x] = !this.modules[y][x];
+      }
+    }
+  }
+  // Calculates and returns the penalty score based on state of this QR Code's current modules.
+  // This is used by the automatic mask choice algorithm to find the mask pattern that yields the lowest score.
+  getPenaltyScore() {
+    let result = 0;
+    for (let y = 0; y < this.size; y++) {
+      let runColor = false;
+      let runX = 0;
+      const runHistory = [0, 0, 0, 0, 0, 0, 0];
+      for (let x = 0; x < this.size; x++) {
+        if (this.modules[y][x] === runColor) {
+          runX++;
+          if (runX === 5)
+            result += PENALTY_N1;
+          else if (runX > 5)
+            result++;
+        } else {
+          this.finderPenaltyAddHistory(runX, runHistory);
+          if (!runColor)
+            result += this.finderPenaltyCountPatterns(runHistory) * PENALTY_N3;
+          runColor = this.modules[y][x];
+          runX = 1;
+        }
+      }
+      result += this.finderPenaltyTerminateAndCount(runColor, runX, runHistory) * PENALTY_N3;
+    }
+    for (let x = 0; x < this.size; x++) {
+      let runColor = false;
+      let runY = 0;
+      const runHistory = [0, 0, 0, 0, 0, 0, 0];
+      for (let y = 0; y < this.size; y++) {
+        if (this.modules[y][x] === runColor) {
+          runY++;
+          if (runY === 5)
+            result += PENALTY_N1;
+          else if (runY > 5)
+            result++;
+        } else {
+          this.finderPenaltyAddHistory(runY, runHistory);
+          if (!runColor)
+            result += this.finderPenaltyCountPatterns(runHistory) * PENALTY_N3;
+          runColor = this.modules[y][x];
+          runY = 1;
+        }
+      }
+      result += this.finderPenaltyTerminateAndCount(runColor, runY, runHistory) * PENALTY_N3;
+    }
+    for (let y = 0; y < this.size - 1; y++) {
+      for (let x = 0; x < this.size - 1; x++) {
+        const color = this.modules[y][x];
+        if (color === this.modules[y][x + 1] && color === this.modules[y + 1][x] && color === this.modules[y + 1][x + 1]) {
+          result += PENALTY_N2;
+        }
+      }
+    }
+    let dark = 0;
+    for (const row of this.modules)
+      dark = row.reduce((sum, color) => sum + (color ? 1 : 0), dark);
+    const total = this.size * this.size;
+    const k = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
+    result += k * PENALTY_N4;
+    return result;
+  }
+  /* -- Private helper functions -- */
+  // Returns an ascending list of positions of alignment patterns for this version number.
+  // Each position is in the range [0,177), and are used on both the x and y axes.
+  // This could be implemented as lookup table of 40 variable-length lists of integers.
+  getAlignmentPatternPositions() {
+    if (this.version === 1) {
+      return [];
+    } else {
+      const numAlign = Math.floor(this.version / 7) + 2;
+      const step = this.version === 32 ? 26 : Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2;
+      const result = [6];
+      for (let pos = this.size - 7; result.length < numAlign; pos -= step)
+        result.splice(1, 0, pos);
+      return result;
+    }
+  }
+  // Can only be called immediately after a light run is added, and
+  // returns either 0, 1, or 2. A helper function for getPenaltyScore().
+  finderPenaltyCountPatterns(runHistory) {
+    const n = runHistory[1];
+    const core = n > 0 && runHistory[2] === n && runHistory[3] === n * 3 && runHistory[4] === n && runHistory[5] === n;
+    return (core && runHistory[0] >= n * 4 && runHistory[6] >= n ? 1 : 0) + (core && runHistory[6] >= n * 4 && runHistory[0] >= n ? 1 : 0);
+  }
+  // Must be called at the end of a line (row or column) of modules. A helper function for getPenaltyScore().
+  finderPenaltyTerminateAndCount(currentRunColor, currentRunLength, runHistory) {
+    if (currentRunColor) {
+      this.finderPenaltyAddHistory(currentRunLength, runHistory);
+      currentRunLength = 0;
+    }
+    currentRunLength += this.size;
+    this.finderPenaltyAddHistory(currentRunLength, runHistory);
+    return this.finderPenaltyCountPatterns(runHistory);
+  }
+  // Pushes the given value to the front and drops the last value. A helper function for getPenaltyScore().
+  finderPenaltyAddHistory(currentRunLength, runHistory) {
+    if (runHistory[0] === 0)
+      currentRunLength += this.size;
+    runHistory.pop();
+    runHistory.unshift(currentRunLength);
+  }
+};
+function appendBits(val, len, bb) {
+  if (len < 0 || len > 31 || val >>> len !== 0)
+    throw new RangeError("Value out of range");
+  for (let i = len - 1; i >= 0; i--)
+    bb.push(val >>> i & 1);
+}
+function getBit(x, i) {
+  return (x >>> i & 1) !== 0;
+}
+var QrSegment = class {
+  // Creates a new QR Code segment with the given attributes and data.
+  // The character count (numChars) must agree with the mode and the bit buffer length,
+  // but the constraint isn't checked. The given bit buffer is cloned and stored.
+  constructor(mode, numChars, bitData) {
+    this.mode = mode;
+    this.numChars = numChars;
+    this.bitData = bitData;
+    if (numChars < 0)
+      throw new RangeError("Invalid argument");
+    this.bitData = bitData.slice();
+  }
+  /* -- Methods -- */
+  // Returns a new copy of the data bits of this segment.
+  getData() {
+    return this.bitData.slice();
+  }
+};
+var MODE_NUMERIC = [1, 10, 12, 14];
+var MODE_ALPHANUMERIC = [2, 9, 11, 13];
+var MODE_BYTE = [4, 8, 16, 16];
+function numCharCountBits(mode, ver) {
+  return mode[Math.floor((ver + 7) / 17) + 1];
+}
+function makeBytes(data) {
+  const bb = [];
+  for (const b of data)
+    appendBits(b, 8, bb);
+  return new QrSegment(MODE_BYTE, data.length, bb);
+}
+function makeNumeric(digits) {
+  if (!isNumeric(digits))
+    throw new RangeError("String contains non-numeric characters");
+  const bb = [];
+  for (let i = 0; i < digits.length; ) {
+    const n = Math.min(digits.length - i, 3);
+    appendBits(Number.parseInt(digits.substring(i, i + n), 10), n * 3 + 1, bb);
+    i += n;
+  }
+  return new QrSegment(MODE_NUMERIC, digits.length, bb);
+}
+function makeAlphanumeric(text) {
+  if (!isAlphanumeric(text))
+    throw new RangeError("String contains unencodable characters in alphanumeric mode");
+  const bb = [];
+  let i;
+  for (i = 0; i + 2 <= text.length; i += 2) {
+    let temp = ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)) * 45;
+    temp += ALPHANUMERIC_CHARSET.indexOf(text.charAt(i + 1));
+    appendBits(temp, 11, bb);
+  }
+  if (i < text.length)
+    appendBits(ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)), 6, bb);
+  return new QrSegment(MODE_ALPHANUMERIC, text.length, bb);
+}
+function makeSegments(text) {
+  if (text === "")
+    return [];
+  else if (isNumeric(text))
+    return [makeNumeric(text)];
+  else if (isAlphanumeric(text))
+    return [makeAlphanumeric(text)];
+  else
+    return [makeBytes(toUtf8ByteArray(text))];
+}
+function isNumeric(text) {
+  return NUMERIC_REGEX.test(text);
+}
+function isAlphanumeric(text) {
+  return ALPHANUMERIC_REGEX.test(text);
+}
+function getTotalBits(segs, version) {
+  let result = 0;
+  for (const seg of segs) {
+    const ccbits = numCharCountBits(seg.mode, version);
+    if (seg.numChars >= 1 << ccbits)
+      return Number.POSITIVE_INFINITY;
+    result += 4 + ccbits + seg.bitData.length;
+  }
+  return result;
+}
+function toUtf8ByteArray(str) {
+  str = encodeURI(str);
+  const result = [];
+  for (let i = 0; i < str.length; i++) {
+    if (str.charAt(i) !== "%") {
+      result.push(str.charCodeAt(i));
+    } else {
+      result.push(Number.parseInt(str.substring(i + 1, i + 3), 16));
+      i += 2;
+    }
+  }
+  return result;
+}
+function getNumRawDataModules(ver) {
+  if (ver < MIN_VERSION || ver > MAX_VERSION)
+    throw new RangeError("Version number out of range");
+  let result = (16 * ver + 128) * ver + 64;
+  if (ver >= 2) {
+    const numAlign = Math.floor(ver / 7) + 2;
+    result -= (25 * numAlign - 10) * numAlign - 55;
+    if (ver >= 7)
+      result -= 36;
+  }
+  return result;
+}
+function getNumDataCodewords(ver, ecl) {
+  return Math.floor(getNumRawDataModules(ver) / 8) - ECC_CODEWORDS_PER_BLOCK[ecl[0]][ver] * NUM_ERROR_CORRECTION_BLOCKS[ecl[0]][ver];
+}
+function reedSolomonComputeDivisor(degree) {
+  if (degree < 1 || degree > 255)
+    throw new RangeError("Degree out of range");
+  const result = [];
+  for (let i = 0; i < degree - 1; i++)
+    result.push(0);
+  result.push(1);
+  let root = 1;
+  for (let i = 0; i < degree; i++) {
+    for (let j = 0; j < result.length; j++) {
+      result[j] = reedSolomonMultiply(result[j], root);
+      if (j + 1 < result.length)
+        result[j] ^= result[j + 1];
+    }
+    root = reedSolomonMultiply(root, 2);
+  }
+  return result;
+}
+function reedSolomonComputeRemainder(data, divisor) {
+  const result = divisor.map((_) => 0);
+  for (const b of data) {
+    const factor = b ^ result.shift();
+    result.push(0);
+    divisor.forEach((coef, i) => result[i] ^= reedSolomonMultiply(coef, factor));
+  }
+  return result;
+}
+function reedSolomonMultiply(x, y) {
+  if (x >>> 8 !== 0 || y >>> 8 !== 0)
+    throw new RangeError("Byte out of range");
+  let z = 0;
+  for (let i = 7; i >= 0; i--) {
+    z = z << 1 ^ (z >>> 7) * 285;
+    z ^= (y >>> i & 1) * x;
+  }
+  return z;
+}
+function encodeSegments(segs, ecl, minVersion = 1, maxVersion = 40, mask = -1, boostEcl = true) {
+  if (!(MIN_VERSION <= minVersion && minVersion <= maxVersion && maxVersion <= MAX_VERSION) || mask < -1 || mask > 7) {
+    throw new RangeError("Invalid value");
+  }
+  let version;
+  let dataUsedBits;
+  for (version = minVersion; ; version++) {
+    const dataCapacityBits2 = getNumDataCodewords(version, ecl) * 8;
+    const usedBits = getTotalBits(segs, version);
+    if (usedBits <= dataCapacityBits2) {
+      dataUsedBits = usedBits;
+      break;
+    }
+    if (version >= maxVersion)
+      throw new RangeError("Data too long");
+  }
+  for (const newEcl of [MEDIUM, QUARTILE, HIGH]) {
+    if (boostEcl && dataUsedBits <= getNumDataCodewords(version, newEcl) * 8)
+      ecl = newEcl;
+  }
+  const bb = [];
+  for (const seg of segs) {
+    appendBits(seg.mode[0], 4, bb);
+    appendBits(seg.numChars, numCharCountBits(seg.mode, version), bb);
+    for (const b of seg.getData())
+      bb.push(b);
+  }
+  const dataCapacityBits = getNumDataCodewords(version, ecl) * 8;
+  appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb);
+  appendBits(0, (8 - bb.length % 8) % 8, bb);
+  for (let padByte = 236; bb.length < dataCapacityBits; padByte ^= 236 ^ 17)
+    appendBits(padByte, 8, bb);
+  const dataCodewords = Array.from({ length: Math.ceil(bb.length / 8) }, () => 0);
+  bb.forEach((b, i) => dataCodewords[i >>> 3] |= b << 7 - (i & 7));
+  return new QrCode(version, ecl, dataCodewords, mask);
+}
+function encode(data, options) {
+  const {
+    ecc = "L",
+    boostEcc = false,
+    minVersion = 1,
+    maxVersion = 40,
+    maskPattern = -1,
+    border = 1
+  } = options || {};
+  const segment = typeof data === "string" ? makeSegments(data) : Array.isArray(data) ? [makeBytes(data)] : void 0;
+  if (!segment)
+    throw new Error(`uqr only supports encoding string and binary data, but got: ${typeof data}`);
+  const qr = encodeSegments(
+    segment,
+    EccMap[ecc],
+    minVersion,
+    maxVersion,
+    maskPattern,
+    boostEcc
+  );
+  const result = addBorder({
+    version: qr.version,
+    maskPattern: qr.mask,
+    size: qr.size,
+    data: qr.modules,
+    types: qr.types
+  }, border);
+  if (options?.invert)
+    result.data = result.data.map((row) => row.map((mod) => !mod));
+  options?.onEncoded?.(result);
+  return result;
+}
+function addBorder(input, border = 1) {
+  if (!border)
+    return input;
+  const { size } = input;
+  const newSize = size + border * 2;
+  input.size = newSize;
+  input.data.forEach((row) => {
+    for (let i = 0; i < border; i++) {
+      row.unshift(false);
+      row.push(false);
+    }
+  });
+  for (let i = 0; i < border; i++) {
+    input.data.unshift(Array.from({ length: newSize }, (_) => false));
+    input.data.push(Array.from({ length: newSize }, (_) => false));
+  }
+  const b = QrCodeDataType.Border;
+  input.types.forEach((row) => {
+    for (let i = 0; i < border; i++) {
+      row.unshift(b);
+      row.push(b);
+    }
+  });
+  for (let i = 0; i < border; i++) {
+    input.types.unshift(Array.from({ length: newSize }, (_) => b));
+    input.types.push(Array.from({ length: newSize }, (_) => b));
+  }
+  return input;
+}
+
+// src/qr.ts
+function drawQr(canvas, text, cssSize) {
+  const qr = encode(text, { ecc: "M", border: 2 });
+  const scale = Math.max(1, Math.min(window.devicePixelRatio || 1, 3));
+  canvas.width = canvas.height = Math.round(cssSize * scale);
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  const cell = canvas.width / qr.size;
+  context.fillStyle = "#fff";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.fillStyle = "#000";
+  qr.data.forEach((line, y) => line.forEach((dark, x) => {
+    if (dark) context.fillRect(Math.floor(x * cell), Math.floor(y * cell), Math.ceil(cell), Math.ceil(cell));
+  }));
+}
+var formatCode = (code) => `${code.slice(0, 4)}-${code.slice(4)}`;
+
+// src/theme.ts
+function luminance(color) {
+  const match = /rgba?\(([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+%?))?\)/.exec(color);
+  if (!match) return null;
+  const alpha = match[4] === void 0 ? 1 : match[4].endsWith("%") ? Number.parseFloat(match[4]) / 100 : Number(match[4]);
+  if (alpha < 0.5) return null;
+  const [r, g, b] = [match[1], match[2], match[3]].map((value) => {
+    const channel = Number(value) / 255;
+    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function pageTheme(element) {
+  for (let node = element; node; node = node.parentElement) {
+    const value = luminance(getComputedStyle(node).backgroundColor);
+    if (value !== null) return value < 0.3 ? "dark" : "light";
+  }
+  const scheme = getComputedStyle(document.documentElement).colorScheme || "";
+  if (/\bdark\b/.test(scheme) && !/\blight\b/.test(scheme)) return "dark";
+  if (/\blight\b/.test(scheme) && /\bdark\b/.test(scheme)) return matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return "light";
+}
+function resolveTheme(requested, element) {
+  return requested === "light" || requested === "dark" ? requested : pageTheme(element);
+}
+
+// src/styles.ts
+var STYLES = `
+:host { all: initial; }
+.overlay {
+  /* Light. Lime is unreadable as text on white, so links and focus rings use a deeper violet. */
+  --accent: var(--tsp-accent, #c8ff4d);
+  --accent-text: var(--tsp-accent-text, #0b0d12);
+  --accent-ink: var(--tsp-accent-ink, var(--tsp-accent, #6b4fe0));
+  --accent-2: var(--tsp-accent-2, var(--tsp-accent, #8a6cf5));
+  --button-edge: rgba(11, 13, 18, .1);
+  --bg: var(--tsp-bg, #fff);
+  --text: var(--tsp-text, #0b0d12);
+  --muted: var(--tsp-muted, #5d6270);
+  --line: var(--tsp-line, rgba(11, 13, 18, .12));
+  --track: rgba(11, 13, 18, .08);
+  --ok: #1a8a4c;
+  --error: #c42f3d;
+  --radius: var(--tsp-radius, 18px);
+  position: fixed; inset: 0; z-index: 2147483000;
+  display: grid; place-items: center; padding: 16px;
+  background: rgba(9, 11, 16, .6);
+  font: 15px/1.5 var(--tsp-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif);
+  color: var(--text);
+  animation: fade .15s ease-out;
+}
+@media (prefers-color-scheme: dark) {
+  .overlay[data-theme="auto"] { --accent-ink: var(--tsp-accent-ink, var(--tsp-accent, #c8ff4d)); --accent-2: var(--tsp-accent-2, var(--tsp-accent, #9a7cff)); --button-edge: transparent; --bg: var(--tsp-bg, #12151c); --text: var(--tsp-text, #f4f4f5); --muted: var(--tsp-muted, #9297a4); --line: var(--tsp-line, rgba(255,255,255,.09)); --track: rgba(255,255,255,.08); --ok: #c8ff4d; --error: #ff8a94; }
+}
+.overlay[data-theme="dark"] { --accent-ink: var(--tsp-accent-ink, var(--tsp-accent, #c8ff4d)); --accent-2: var(--tsp-accent-2, var(--tsp-accent, #9a7cff)); --button-edge: transparent; --bg: var(--tsp-bg, #12151c); --text: var(--tsp-text, #f4f4f5); --muted: var(--tsp-muted, #9297a4); --line: var(--tsp-line, rgba(255,255,255,.09)); --track: rgba(255,255,255,.08); --ok: #c8ff4d; --error: #ff8a94; }
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+.dialog {
+  width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
+  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
+  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); padding: 20px; display: grid; gap: 14px; outline: none;
+}
+.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
+.icon-button { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; color: var(--muted); }
+.icon-button:hover { background: var(--track); color: var(--text); }
+.qr-block { display: grid; justify-items: center; gap: 8px; text-align: center; }
+.qr { width: 220px; height: 220px; border-radius: 12px; background: #fff; border: 1px solid var(--line); image-rendering: pixelated; }
+.lead { margin: 4px 0 0; font-weight: 600; }
+.muted { margin: 0; color: var(--muted); font-size: 13.5px; }
+.small { font-size: 12px; }
+.code { display: inline-block; direction: ltr; font: 700 15px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 1.5px; color: var(--text); padding: 2px 8px; border-radius: 6px; background: var(--track); }
+.status { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; text-align: center; font-size: 14px; min-height: 22px; }
+.approval { display: grid; gap: 8px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 14px; text-align: center; }
+.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+.files:empty { display: none; }
+.file { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
+.file .name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file .meta { color: var(--muted); font-size: 12px; }
+.file .bar { height: 4px; border-radius: 4px; background: var(--track); overflow: hidden; margin-top: 3px; }
+.file .fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .2s; }
+.file.received .meta { color: var(--ok); }
+.file.received .fill { background: var(--ok); }
+.file.failed .meta { color: var(--error); }
+.file.failed .bar { display: none; }
+.footer { display: grid; gap: 12px; }
+.buttons { display: flex; gap: 10px; justify-content: flex-end; }
+button.primary, button.secondary { font: inherit; font-weight: 600; cursor: pointer; border-radius: 12px; padding: 10px 16px; min-height: 42px; border: 1px solid transparent; }
+button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--button-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
+button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, #fff); }
+button.primary:disabled { opacity: .45; cursor: default; box-shadow: none; }
+button.secondary { background: transparent; color: var(--text); border-color: var(--line); }
+button.secondary:hover { background: var(--track); }
+button.link { all: unset; cursor: pointer; color: var(--accent-ink); font-weight: 600; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
+button:focus-visible, .icon-button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
+/* ---- TokShare for desktop ---- */
+.announce { margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent-2) 7%, transparent); color: var(--muted); font-size: 12.5px; line-height: 1.45; text-align: start; }
+.announce i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
+.announce span { flex: 1; min-width: 0; }
+.announce a { color: var(--accent-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
+.announce-hide { all: unset; cursor: pointer; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; color: var(--muted); }
+.announce-hide:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
+.announce-hide:focus-visible, .announce a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-ink) 60%, transparent); outline-offset: 2px; }
+@keyframes fade { from { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .overlay { animation: none; } .file .fill { transition: none; } }
+`;
+
+// src/modal.ts
+function mountModal(controller, options) {
+  const locale = resolveLocale(options.locale);
+  const t = translator(locale, options.strings);
+  const previousFocus = document.activeElement;
+  const host = document.createElement("div");
+  host.setAttribute("data-tokshare-pick", "");
+  const root = host.attachShadow({ mode: "open" });
+  if ("adoptedStyleSheets" in Document.prototype && "replaceSync" in CSSStyleSheet.prototype) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(STYLES);
+    root.adoptedStyleSheets = [sheet];
+  } else {
+    const style = document.createElement("style");
+    style.textContent = STYLES;
+    root.append(style);
+  }
+  const el = (tag, className = "", text = "") => {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text) node.textContent = text;
+    return node;
+  };
+  const overlay = el("div", "overlay");
+  overlay.dataset.theme = resolveTheme(options.theme, document.body);
+  const dialog = el("div", "dialog");
+  dialog.setAttribute("role", "dialog");
+  dialog.setAttribute("aria-modal", "true");
+  dialog.setAttribute("aria-labelledby", "tsp-title");
+  dialog.dir = locale === "ar" ? "rtl" : "ltr";
+  dialog.lang = locale;
+  dialog.tabIndex = -1;
+  const header = el("div", "header");
+  const title = el("h2", "title", t(options.multiple === false ? "titleOne" : "title"));
+  title.id = "tsp-title";
+  const closeButton = el("button", "icon-button", "\xD7");
+  closeButton.type = "button";
+  closeButton.setAttribute("aria-label", t("close"));
+  header.append(title, closeButton);
+  const qrBlock = el("div", "qr-block");
+  const canvas = el("canvas", "qr");
+  canvas.setAttribute("role", "img");
+  canvas.setAttribute("aria-label", t("scan"));
+  const scan = el("p", "lead", t("scan"));
+  const typeLine = el("p", "muted");
+  const code = el("span", "code");
+  qrBlock.append(canvas, scan, typeLine);
+  const status = el("div", "status");
+  status.setAttribute("role", "status");
+  status.setAttribute("aria-live", "polite");
+  const list = el("ul", "files");
+  const footer = el("div", "footer");
+  const privacy = el("p", "muted small", t("privacy"));
+  const buttons = el("div", "buttons");
+  const cancelButton = el("button", "secondary", t("cancel"));
+  cancelButton.type = "button";
+  const doneButton = el("button", "primary", t("done"));
+  doneButton.type = "button";
+  doneButton.disabled = true;
+  buttons.append(cancelButton, doneButton);
+  const promo = announcement(options.announce, t);
+  footer.append(...promo ? [promo] : [], privacy, buttons);
+  dialog.append(header, qrBlock, status, list, footer);
+  overlay.append(dialog);
+  root.append(overlay);
+  document.body.append(host);
+  dialog.focus();
+  const rows = /* @__PURE__ */ new Map();
+  let phoneLabel = "";
+  const setStatus = (text, extra) => {
+    status.replaceChildren(el("span", "", text), ...extra ? [extra] : []);
+  };
+  const showQr = (claimUrl, value) => {
+    drawQr(canvas, claimUrl, 220);
+    const host2 = new URL(claimUrl).host;
+    code.textContent = `${value.slice(0, 4)}-${value.slice(4)}`;
+    typeLine.replaceChildren(document.createTextNode(`${t("orType", { host: host2 })} `), code);
+    qrBlock.hidden = false;
+    setStatus(t("waiting"));
+  };
+  const updateDone = () => {
+    const count = controller.files.length;
+    doneButton.disabled = count === 0;
+    doneButton.textContent = count === 0 ? t("done") : count === 1 ? t("useFile") : t("useFiles", { count });
+  };
+  const renderRow = (row) => {
+    const label = row.state === "sending" ? t("sending", { percent: row.percent }) : row.state === "receiving" ? t("receiving", { percent: row.percent }) : t(row.state);
+    row.element.className = `file ${row.state}`;
+    const bar = el("span", "bar");
+    const fill = el("i", "fill");
+    fill.style.width = `${row.state === "received" ? 100 : row.percent}%`;
+    bar.append(fill);
+    row.element.replaceChildren(el("span", "name", row.meta.name), el("span", "meta", `${formatBytes(row.meta.size, locale)} \xB7 ${label}`), bar);
+  };
+  const rowFor = (meta) => {
+    let row = rows.get(meta.id);
+    if (!row) {
+      row = { element: el("li"), meta, state: "sending", percent: 0 };
+      rows.set(meta.id, row);
+      list.append(row.element);
+    }
+    return row;
+  };
+  let direct = false;
+  const showConnected = () => {
+    const disconnect = el("button", "link", t("disconnect"));
+    disconnect.type = "button";
+    disconnect.addEventListener("click", () => {
+      controller.disconnect().catch(() => void 0);
+    });
+    setStatus(t(direct ? "connectedDirect" : "connected", { label: phoneLabel }), disconnect);
+  };
+  const closeModal = () => {
+    document.removeEventListener("keydown", onKey, true);
+    host.remove();
+    previousFocus?.focus?.();
+  };
+  const onKey = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      controller.cancel();
+    }
+    if (event.key === "Tab") {
+      const focusable = [...root.querySelectorAll("button:not([disabled])")];
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = root.activeElement;
+      if (event.shiftKey && (active === first || active === dialog)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  document.addEventListener("keydown", onKey, true);
+  closeButton.addEventListener("click", () => controller.cancel());
+  cancelButton.addEventListener("click", () => controller.cancel());
+  doneButton.addEventListener("click", () => controller.finish());
+  overlay.addEventListener("click", (event) => {
+    if (event.target === overlay) controller.cancel();
+  });
+  qrBlock.hidden = true;
+  setStatus(t("loading"));
+  controller.on("ready", ({ claimUrl, code: value }) => showQr(claimUrl, value));
+  controller.on("phone", ({ phone, needsApproval, match }) => {
+    phoneLabel = phone.label;
+    qrBlock.hidden = true;
+    if (needsApproval) {
+      const box = el("div", "approval");
+      const approve = el("button", "primary", t("approve"));
+      const reject = el("button", "secondary", t("reject"));
+      approve.type = reject.type = "button";
+      approve.addEventListener("click", () => {
+        controller.approve();
+        showConnected();
+      });
+      reject.addEventListener("click", () => controller.reject());
+      box.append(el("strong", "", t("approveTitle")), el("span", "muted", `${phone.label} \xB7 ${t("approveMatch", { match: match ?? "" })}`), el("div", "buttons", ""));
+      box.lastElementChild.append(reject, approve);
+      status.replaceChildren(box);
+      approve.focus();
+    } else showConnected();
+  });
+  controller.on("phone_left", () => {
+    direct = false;
+    setStatus(t("phoneLeft"));
+  });
+  controller.on("direct", ({ connected }) => {
+    direct = connected;
+    if (phoneLabel) showConnected();
+  });
+  controller.on("file_started", (meta) => renderRow(rowFor(meta)));
+  controller.on("progress", (progress) => {
+    const row = rows.get(progress.id);
+    if (!row) return;
+    row.state = progress.phase === "upload" ? "sending" : "receiving";
+    row.percent = progress.total ? Math.floor(progress.sent / progress.total * 100) : 0;
+    renderRow(row);
+  });
+  controller.on("received", ({ id }) => {
+    const row = rows.get(id);
+    if (row) {
+      row.state = "received";
+      renderRow(row);
+    }
+    updateDone();
+  });
+  controller.on("file_failed", ({ id }) => {
+    const row = rows.get(id);
+    if (row) {
+      row.state = "failed";
+      renderRow(row);
+    }
+  });
+  controller.on("error", (error) => {
+    qrBlock.hidden = true;
+    const retry = el("button", "link", t("tryAgain"));
+    retry.type = "button";
+    retry.addEventListener("click", () => {
+      setStatus(t("loading"));
+      controller.restart();
+    });
+    setStatus(t("error", { message: error.message }), retry);
+  });
+  controller.on("close", (reason) => {
+    if (reason === "finished" || reason === "canceled" || controller.files.length) return closeModal();
+    qrBlock.hidden = true;
+    const again = el("button", "link", t("newCode"));
+    again.type = "button";
+    again.addEventListener("click", () => {
+      setStatus(t("loading"));
+      controller.restart();
+    });
+    setStatus(t("expired"), again);
+  });
+  controller.done.then(closeModal);
+}
+
+// src/session.ts
+async function post(url, body) {
+  let response;
+  try {
+    response = await fetch(url, { method: "POST", headers: { "Content-Type": "text/plain" }, body: JSON.stringify(body), cache: "no-store", credentials: "omit" });
+  } catch {
+    throw new PickError("network", "Can't reach TokShare Pick.", 0);
+  }
+  if (!response.ok) {
+    const data = await response.json().catch(() => ({}));
+    throw new PickError(data.error || "internal", data.message || `HTTP ${response.status}`, response.status);
+  }
+  return response;
+}
+var RelaySession = class _RelaySession {
+  constructor(relay, info, onEvent) {
+    __publicField(this, "info");
+    __publicField(this, "relay");
+    __publicField(this, "ws", null);
+    __publicField(this, "lastSeq", 0);
+    __publicField(this, "closed", false);
+    __publicField(this, "attempt", 0);
+    __publicField(this, "pinger");
+    __publicField(this, "onEvent");
+    this.relay = relay;
+    this.info = info;
+    this.onEvent = onEvent;
+  }
+  static async create(relay, key, options, onEvent) {
+    const response = await post(`${relay}/v1/sessions`, { key, options, client: `sdk/${SDK_VERSION}` });
+    const session = new _RelaySession(relay, await response.json(), onEvent);
+    session.connect();
+    return session;
+  }
+  connect() {
+    if (this.closed) return;
+    const ws = new WebSocket(this.info.wsUrl);
+    this.ws = ws;
+    ws.addEventListener("open", () => {
+      this.attempt = 0;
+      ws.send(JSON.stringify({ t: "auth", token: this.info.desktopToken, lastSeq: this.lastSeq }));
+      this.pinger = setInterval(() => {
+        if (ws.readyState === WebSocket.OPEN) ws.send("ping");
+      }, 25e3);
+    });
+    ws.addEventListener("message", (message) => {
+      if (message.data === "pong") return;
+      let event;
+      try {
+        event = JSON.parse(message.data);
+      } catch {
+        return;
+      }
+      if ("seq" in event && event.t !== "hello") {
+        if (event.seq <= this.lastSeq) return;
+        this.lastSeq = event.seq;
+      }
+      if (event.t === "closed") this.closed = true;
+      this.onEvent(event);
+    });
+    ws.addEventListener("close", (event) => {
+      clearInterval(this.pinger);
+      if (this.closed || event.code === 4401) return;
+      setTimeout(() => this.connect(), Math.min(1e4, 400 * 2 ** this.attempt++));
+    });
+  }
+  send(command) {
+    if (this.ws?.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify(command));
+  }
+  /** Streams a finished file from the relay. Reports bytes received; retries a dropped stream. */
+  async download(meta, onProgress) {
+    for (let attempt = 0; ; attempt++) {
+      try {
+        const response = await post(`${this.relay}/v1/sessions/${this.info.sid}/files/${meta.id}/download`, { token: this.info.desktopToken });
+        const reader = response.body.getReader();
+        const chunks = [];
+        let received = 0;
+        for (; ; ) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          chunks.push(value);
+          received += value.byteLength;
+          onProgress(received);
+        }
+        if (received !== meta.size) throw new PickError("network", "Incomplete download.", 0);
+        return new File(chunks, meta.name, { type: meta.type || meta.sniffed || "", lastModified: meta.lastModified });
+      } catch (error) {
+        if (!(error instanceof PickError && error.code === "network") || attempt >= 2) throw error;
+        await new Promise((resolve) => setTimeout(resolve, 600 * (attempt + 1)));
+      }
+    }
+  }
+  /** A file that came over the direct link: delivered (counted, phone told), or refused and why. */
+  directResult(id, ok, code) {
+    return post(`${this.relay}/v1/sessions/${this.info.sid}/files/${id}/direct`, { token: this.info.desktopToken, ok, ...code ? { code } : {} }).catch(() => void 0);
+  }
+  ack(id) {
+    return post(`${this.relay}/v1/sessions/${this.info.sid}/files/${id}/ack`, { token: this.info.desktopToken }).catch(() => void 0);
+  }
+  /** Forget the connected phone and get a new QR and code. */
+  async rekey() {
+    const response = await post(`${this.relay}/v1/sessions/${this.info.sid}/rekey`, { token: this.info.desktopToken });
+    const fresh = await response.json();
+    Object.assign(this.info, fresh);
+    return fresh;
+  }
+  /** Ends the session: the relay deletes anything left. Uses a beacon while the page is unloading. */
+  close(unloading = false) {
+    if (this.closed) return;
+    this.closed = true;
+    clearInterval(this.pinger);
+    const url = `${this.relay}/v1/sessions/${this.info.sid}/close`;
+    const body = JSON.stringify({ token: this.info.desktopToken });
+    if (unloading && typeof navigator !== "undefined" && navigator.sendBeacon) navigator.sendBeacon(url, new Blob([body], { type: "text/plain" }));
+    else post(url, { token: this.info.desktopToken }).catch(() => void 0);
+    try {
+      this.ws?.close(1e3, "closed");
+    } catch {
+    }
+  }
+  get isClosed() {
+    return this.closed;
+  }
+};
+
+// src/picker.ts
+function open(options) {
+  if (!options || typeof options.key !== "string") throw new PickError("key_invalid", "Pass your publishable key: open({ key: 'pk_live_\u2026' }).");
+  const relay = (options.relay || DEFAULT_RELAY).replace(/\/+$/, "");
+  const handlers = /* @__PURE__ */ new Map();
+  const emit = (event, detail) => {
+    for (const handler of handlers.get(event) ?? []) {
+      try {
+        handler(detail);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+  const files = [];
+  const handled = /* @__PURE__ */ new Set();
+  const metas = /* @__PURE__ */ new Map();
+  const pending = /* @__PURE__ */ new Set();
+  const directDone = /* @__PURE__ */ new Set();
+  const metaWaiters = /* @__PURE__ */ new Map();
+  let session = null;
+  let receiver = null;
+  let settled = false;
+  let resolveDone;
+  const done = new Promise((resolve) => {
+    resolveDone = resolve;
+  });
+  const multiple = options.multiple !== false;
+  const sessionOptions = {
+    ...options.accept !== void 0 ? { accept: options.accept } : {},
+    multiple,
+    ...options.maxFiles !== void 0 ? { maxFiles: options.maxFiles } : {},
+    ...options.maxFileBytes !== void 0 ? { maxFileBytes: options.maxFileBytes } : {},
+    ...options.resizeImages ? { resizeImages: options.resizeImages } : {},
+    ...options.confirmPhone ? { confirmPhone: true } : {},
+    ...options.siteName ? { siteName: options.siteName } : {},
+    ...options.locale === "ar" || options.locale === "en" ? { locale: options.locale } : {},
+    ...options.direct === false ? { direct: false } : {}
+  };
+  let maxFiles = multiple ? options.maxFiles ?? 20 : 1;
+  const settle = (reason, result) => {
+    if (settled) return;
+    settled = true;
+    removeEventListener("pagehide", onPageHide);
+    receiver?.close();
+    session?.close();
+    emit("close", reason);
+    resolveDone(result);
+  };
+  const onPageHide = () => session?.close(true);
+  const receive = (meta) => {
+    if (directDone.has(meta.id)) {
+      session?.ack(meta.id);
+      return;
+    }
+    if (handled.has(meta.id) || !session) return;
+    handled.add(meta.id);
+    const current = session;
+    const task = current.download(meta, (received) => emit("progress", { id: meta.id, name: meta.name, sent: received, total: meta.size, phase: "download" })).then(async (file) => {
+      await current.ack(meta.id);
+      if (settled) return;
+      files.push(file);
+      emit("received", { id: meta.id, file });
+      emit("file", file);
+      if (files.length >= maxFiles) controller.finish();
+    }).catch((error) => emit("file_failed", { id: meta.id, code: error instanceof PickError ? error.code : "network" })).finally(() => pending.delete(task));
+    pending.add(task);
+  };
+  const knownMeta = (id) => {
+    const meta = metas.get(id);
+    if (meta) return Promise.resolve(meta);
+    return new Promise((resolve) => {
+      const timer = setTimeout(() => {
+        metaWaiters.delete(id);
+        resolve(null);
+      }, 1e4);
+      metaWaiters.set(id, (value) => {
+        clearTimeout(timer);
+        metaWaiters.delete(id);
+        resolve(value);
+      });
+    });
+  };
+  const completeDirect = async (id, chunks, size) => {
+    const current = session;
+    const meta = await knownMeta(id);
+    if (!current || !meta || settled || handled.has(id)) return { ok: false, code: "failed" };
+    const result = verifyDirectFile(meta, chunks, size, current.info.options.accept, current.info.options.maxFileBytes);
+    if (!result.ok) {
+      current.directResult(id, false, result.code);
+      return result;
+    }
+    handled.add(id);
+    directDone.add(id);
+    current.directResult(id, true);
+    files.push(result.file);
+    emit("received", { id, file: result.file });
+    emit("file", result.file);
+    if (files.length >= maxFiles) controller.finish();
+    return { ok: true };
+  };
+  const directReceiver = (current) => {
+    if (options.direct === false || !DirectReceiver.supported()) return null;
+    if (!receiver) {
+      receiver = new DirectReceiver((d) => current.send({ t: "rtc", d }), {
+        progress: (id, received, total) => emit("progress", { id, name: metas.get(id)?.name ?? "", sent: received, total, phase: "upload" }),
+        complete: completeDirect,
+        state: (connected) => emit("direct", { connected })
+      });
+    }
+    return receiver;
+  };
+  const onEvent = (event) => {
+    switch (event.t) {
+      case "rtc":
+        if (session) directReceiver(session)?.onSignal(event.d);
+        break;
+      case "hello":
+        for (const meta of event.files) {
+          if (!handled.has(meta.id)) {
+            metas.set(meta.id, meta);
+            emit("file_started", meta);
+          }
+          receive(meta);
+        }
+        break;
+      case "phone":
+        emit("phone", { phone: event.phone, needsApproval: event.needsApproval, ...event.match ? { match: event.match } : {} });
+        break;
+      case "phone_left":
+        receiver?.close();
+        emit("phone_left", void 0);
+        break;
+      case "file_started":
+        metas.set(event.file.id, event.file);
+        metaWaiters.get(event.file.id)?.(event.file);
+        emit("file_started", event.file);
+        break;
+      case "progress":
+        emit("progress", { id: event.id, name: metas.get(event.id)?.name ?? "", sent: event.sent, total: event.total, phase: "upload" });
+        break;
+      case "file_ready":
+        receive(event.file);
+        break;
+      case "file_failed":
+        emit("file_failed", { id: event.id, code: event.code });
+        break;
+      case "phone_done":
+        if (files.length || pending.size) controller.finish();
+        break;
+      case "closed":
+        if (files.length) settle(event.reason, [...files]);
+        else emit("close", event.reason);
+        break;
+    }
+  };
+  const start = () => {
+    RelaySession.create(relay, options.key, sessionOptions, onEvent).then((created) => {
+      if (settled) {
+        created.close();
+        return;
+      }
+      session = created;
+      maxFiles = created.info.options.maxFiles;
+      emit("ready", { claimUrl: created.info.claimUrl, code: created.info.code });
+    }, (error) => emit("error", error));
+  };
+  const controller = {
+    done,
+    get files() {
+      return files;
+    },
+    get claimUrl() {
+      return session?.info.claimUrl ?? null;
+    },
+    get code() {
+      return session?.info.code ?? null;
+    },
+    on(event, handler) {
+      if (!handlers.has(event)) handlers.set(event, /* @__PURE__ */ new Set());
+      handlers.get(event).add(handler);
+      return () => handlers.get(event)?.delete(handler);
+    },
+    finish() {
+      if (settled) return;
+      Promise.allSettled([...pending]).then(() => settle("finished", [...files]));
+    },
+    cancel() {
+      settle("canceled", []);
+    },
+    approve() {
+      session?.send({ t: "approve" });
+    },
+    reject() {
+      session?.send({ t: "reject" });
+    },
+    async disconnect() {
+      if (!session) return;
+      receiver?.close();
+      const fresh = await session.rekey();
+      emit("ready", fresh);
+    },
+    restart() {
+      if (settled) return;
+      receiver?.close();
+      receiver = null;
+      session?.close();
+      session = null;
+      start();
+    }
+  };
+  addEventListener("pagehide", onPageHide);
+  options.signal?.addEventListener("abort", () => controller.cancel(), { once: true });
+  if (options.ui !== false) mountModal(controller, options);
+  start();
+  return controller;
+}
+function pick(options) {
+  return open(options).done;
+}
+function attach(input, options) {
+  if (!(input instanceof HTMLInputElement) || input.type !== "file") throw new PickError("bad_request", 'attach() needs an <input type="file">.');
+  return async () => {
+    const received = await pick({ ...options, accept: input.accept, multiple: input.multiple });
+    if (!received.length) return received;
+    const transfer = new DataTransfer();
+    if (options.mode === "append" && input.multiple) for (const file of Array.from(input.files ?? [])) transfer.items.add(file);
+    for (const file of input.multiple ? received : received.slice(0, 1)) transfer.items.add(file);
+    input.files = transfer.files;
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+    return received;
+  };
+}
+
+// src/fieldStyles.ts
+var FIELD_STYLES = `
+:host { display: block; }
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+.wrap {
+  /* Light. Lime is unreadable as text or a thin line on white, so those use a deeper violet. */
+  --accent: var(--tsp-accent, #c8ff4d);
+  --accent-text: var(--tsp-accent-text, #0b0d12);
+  --accent-ink: var(--tsp-accent-ink, var(--tsp-accent, #6b4fe0));
+  --accent-2: var(--tsp-accent-2, var(--tsp-accent, #8a6cf5));
+  --button-edge: rgba(11, 13, 18, .1);
+  --bg: var(--tsp-bg, #ffffff);
+  --surface: var(--tsp-surface, #f6f7f9);
+  --text: var(--tsp-text, #0b0d12);
+  --muted: var(--tsp-muted, #5d6270);
+  --line: var(--tsp-line, rgba(11, 13, 18, .12));
+  --ok: #1a8a4c;
+  --error: #c42f3d;
+  --radius: var(--tsp-radius, 18px);
+  container-type: inline-size;
+  font: 14px/1.5 var(--tsp-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif);
+  color: var(--text);
+}
+@media (prefers-color-scheme: dark) {
+  .wrap[data-theme="auto"] { --accent-ink: var(--tsp-accent-ink, var(--tsp-accent, #c8ff4d)); --accent-2: var(--tsp-accent-2, var(--tsp-accent, #9a7cff)); --button-edge: transparent; --bg: var(--tsp-bg, #171a22); --surface: var(--tsp-surface, #12151c); --text: var(--tsp-text, #f4f4f5); --muted: var(--tsp-muted, #9297a4); --line: var(--tsp-line, rgba(255,255,255,.09)); --ok: #c8ff4d; --error: #ff8a94; }
+}
+.wrap[data-theme="dark"] { --accent-ink: var(--tsp-accent-ink, var(--tsp-accent, #c8ff4d)); --accent-2: var(--tsp-accent-2, var(--tsp-accent, #9a7cff)); --button-edge: transparent; --bg: var(--tsp-bg, #171a22); --surface: var(--tsp-surface, #12151c); --text: var(--tsp-text, #f4f4f5); --muted: var(--tsp-muted, #9297a4); --line: var(--tsp-line, rgba(255,255,255,.09)); --ok: #c8ff4d; --error: #ff8a94; }
+
+/* ---- drop zone ---- */
+.zone {
+  position: relative;
+  border: 1.5px dashed color-mix(in srgb, var(--accent-ink) 42%, transparent);
+  border-radius: var(--radius);
+  background:
+    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%),
+    var(--surface);
+  padding: 30px 22px;
+  min-height: 232px;
+  display: grid;
+  align-items: center;
+  transition: border-color .18s, background-color .18s, box-shadow .18s;
+}
+.zone[data-state="idle"]:hover { border-color: color-mix(in srgb, var(--accent-ink) 70%, transparent); }
+.zone[data-drag] {
+  border-style: solid;
+  border-color: var(--accent-ink);
+  background-color: color-mix(in srgb, var(--accent-ink) 8%, var(--surface));
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-ink) 16%, transparent);
+}
+.zone[data-drag] .tile { transform: translateY(-3px) scale(1.06); }
+.idle { display: grid; justify-items: center; text-align: center; gap: 6px; }
+.tile {
+  width: 56px; height: 56px; margin-bottom: 8px;
+  display: grid; place-items: center;
+  border-radius: 16px;
+  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent));
+  color: var(--accent-text);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px var(--button-edge), 0 12px 26px -6px color-mix(in srgb, var(--accent) 45%, transparent);
+  transition: transform .2s;
+}
+svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
+.tile svg { width: 26px; height: 26px; stroke-width: 2; }
+.title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
+.hint { margin: 0; color: var(--muted); font-size: 13px; }
+.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
+.or { color: var(--muted); font-size: 12.5px; }
+
+button { font: inherit; cursor: pointer; }
+.primary, .ghost {
+  display: inline-flex; align-items: center; gap: 8px;
+  min-height: 40px; padding: 8px 16px;
+  border-radius: 11px; font-weight: 600; font-size: 14px;
+  border: 1px solid transparent;
+  transition: transform .12s, box-shadow .15s, background-color .15s, border-color .15s;
+}
+.primary { background: var(--accent); color: var(--accent-text); border-color: var(--button-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
+.primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 28px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
+.ghost { background: var(--bg); color: var(--text); border-color: var(--line); }
+.ghost:hover { border-color: color-mix(in srgb, var(--accent-ink) 55%, transparent); color: var(--accent-ink); }
+.primary:active, .ghost:active { transform: translateY(1px); }
+.primary.small { min-height: 34px; padding: 6px 14px; font-size: 13px; }
+.link { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; font-size: 13px; }
+.link:hover { color: var(--text); }
+button:focus-visible, .link:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-ink) 60%, transparent); outline-offset: 2px; border-radius: 10px; }
+[dir="rtl"] .flip { transform: scaleX(-1); }
+
+/* ---- phone, inside the field ---- */
+.phone-view { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
+.qr-box { position: relative; width: 184px; height: 184px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(15, 18, 30, .1); }
+.qr { width: 100%; height: 100%; display: block; image-rendering: pixelated; transition: opacity .25s, filter .25s; }
+.qr-box.dim .qr { opacity: .18; filter: blur(1px); }
+.qr-loading { display: none; position: absolute; inset: 8px; border-radius: 10px; background: linear-gradient(100deg, #eef0f5 30%, #f8f9fc 50%, #eef0f5 70%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
+.qr-box.loading .qr-loading { display: block; }
+.phone-info { display: grid; gap: 10px; min-width: 0; }
+.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 7px; }
+.steps li { counter-increment: step; display: flex; gap: 10px; align-items: baseline; color: var(--muted); font-size: 13.5px; }
+.steps li::before { content: counter(step); flex: none; width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 14%, transparent); transform: translateY(4px); }
+.code-line { margin: 0; color: var(--muted); font-size: 12.5px; }
+.code-line b { direction: ltr; display: inline-block; font: 700 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 1.2px; color: var(--text); background: var(--bg); border: 1px solid var(--line); padding: 1px 7px; border-radius: 6px; }
+.status { margin: 0; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
+.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .6; }
+.status.live i { background: var(--ok); opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: pulse 1.8s infinite; }
+.phone-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
+.announce-slot { grid-column: 1 / -1; }
+/* ---- TokShare for desktop ---- */
+.announce { margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent-2) 7%, transparent); color: var(--muted); font-size: 12.5px; line-height: 1.45; text-align: start; }
+.announce i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
+.announce span { flex: 1; min-width: 0; }
+.announce a { color: var(--accent-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
+.announce-hide { all: unset; cursor: pointer; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; color: var(--muted); }
+.announce-hide:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
+.announce-hide:focus-visible, .announce a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-ink) 60%, transparent); outline-offset: 2px; }
+
+/* ---- messages and list ---- */
+.message { margin: 10px 2px 0; color: var(--error); font-size: 13px; }
+.list-head { display: flex; justify-content: space-between; align-items: center; margin: 14px 2px 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
+.list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
+.list-head:not([hidden]) + .list { margin-top: 0; }
+.item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px 9px 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); animation: rise .2s ease-out; }
+.thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--accent-ink) 12%, transparent); color: var(--accent-ink); font-size: 10.5px; font-weight: 800; letter-spacing: .4px; }
+.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.body { display: grid; gap: 2px; min-width: 0; }
+.name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.meta { color: var(--muted); font-size: 12px; }
+.bar { height: 4px; border-radius: 4px; margin-top: 4px; background: color-mix(in srgb, var(--accent-ink) 12%, transparent); overflow: hidden; }
+.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: inherit; transition: width .2s; }
+.item.failed .meta { color: var(--error); }
+.remove { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
+.remove:hover { background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); }
+.remove svg { width: 16px; height: 16px; }
+
+@container (max-width: 520px) {
+  .zone { padding: 24px 16px; }
+  .phone-view { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; }
+  .steps li { text-align: start; }
+  .status { justify-self: center; }
+}
+@keyframes shimmer { to { background-position: -200% 0; } }
+@keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
+@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
+@media (prefers-reduced-motion: reduce) { .zone, .tile, .qr, .bar i, .item { transition: none; animation: none; } .qr-loading, .status.live i { animation: none; } }
+`;
+
+// src/field.ts
+var ICONS = {
+  upload: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15V4m0 0L7.5 8.5M12 4l4.5 4.5M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"/></svg>',
+  folder: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z"/></svg>',
+  phone: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="2.5" width="10" height="19" rx="2.5"/><path d="M11 18.5h2"/></svg>',
+  close: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7 7 17"/></svg>',
+  back: '<svg viewBox="0 0 24 24" aria-hidden="true" class="flip"><path d="M14.5 6 8.5 12l6 6"/></svg>'
+};
+function parseSize(value) {
+  if (value === null || value === void 0 || value === "") return void 0;
+  if (typeof value === "number") return value > 0 ? value : void 0;
+  const match = /^\s*([\d.]+)\s*(b|kb|mb|gb)?\s*$/i.exec(value);
+  if (!match) return void 0;
+  const units = { b: 1, kb: 1e3, mb: 1e6, gb: 1e9 };
+  const bytes = Number(match[1]) * units[(match[2] ?? "b").toLowerCase()];
+  return bytes > 0 ? Math.round(bytes) : void 0;
+}
+function acceptLabel(accept) {
+  return accept.split(",").map((part) => part.trim()).filter(Boolean).map((part) => {
+    if (part.endsWith("/*")) return part.slice(0, -2).replace(/^./, (letter) => letter.toUpperCase()) + "s";
+    if (part.startsWith(".")) return part.slice(1).toUpperCase();
+    const sub = part.split("/")[1] ?? part;
+    return sub === "jpeg" ? "JPG" : sub.replace(/^(x-|vnd\.)/, "").split(/[.+-]/)[0].toUpperCase();
+  }).filter((label, index, all) => all.indexOf(label) === index).join(", ");
+}
+var isPhonePage = () => typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches && innerWidth < 820;
+function mountField(target, options) {
+  const container = typeof target === "string" ? document.querySelector(target) : target;
+  if (!container) throw new Error(`TokShare Pick: ${String(target)} not found`);
+  const locale = resolveLocale(options.locale);
+  const t = translator(locale, options.strings);
+  const multiple = options.multiple !== false;
+  const maxFiles = multiple ? Math.min(options.maxFiles ?? LIMITS.maxFiles, LIMITS.maxFiles) : 1;
+  const maxBytes = Math.min(options.maxFileBytes ?? LIMITS.maxFileBytes, LIMITS.maxFileBytes);
+  const accept = options.accept ?? "";
+  const phoneMode = options.phone === false ? false : options.phone ?? "inline";
+  const showPhone = phoneMode !== false && (options.phoneOnMobile || !isPhonePage());
+  const input = document.createElement("input");
+  input.type = "file";
+  input.hidden = true;
+  input.multiple = multiple;
+  if (accept) input.accept = accept;
+  if (options.name) input.name = options.name;
+  const host = document.createElement("div");
+  host.setAttribute("data-tokshare-pick-field", "");
+  container.append(host, input);
+  const root = host.attachShadow({ mode: "open" });
+  if ("adoptedStyleSheets" in Document.prototype && "replaceSync" in CSSStyleSheet.prototype) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(FIELD_STYLES);
+    root.adoptedStyleSheets = [sheet];
+  } else {
+    const style = document.createElement("style");
+    style.textContent = FIELD_STYLES;
+    root.append(style);
+  }
+  const hint = [
+    accept ? t("hintTypes", { types: acceptLabel(accept), size: formatBytes(maxBytes, locale) }) : t("hintAny", { size: formatBytes(maxBytes, locale) }),
+    multiple ? t("hintCount", { count: maxFiles }) : ""
+  ].filter(Boolean).join(" \xB7 ");
+  const wrap = document.createElement("div");
+  wrap.className = "wrap";
+  wrap.dir = locale === "ar" ? "rtl" : "ltr";
+  wrap.lang = locale;
+  wrap.dataset.theme = resolveTheme(options.theme, container);
+  wrap.innerHTML = `
+    <div class="zone" data-state="idle" role="group">
+      <div class="idle">
+        <div class="tile">${ICONS.upload}</div>
+        <p class="title"></p>
+        <p class="hint"></p>
+        <div class="actions">
+          <button type="button" class="primary browse">${ICONS.folder}<span></span></button>
+          <span class="or"></span>
+          <button type="button" class="ghost phone">${ICONS.phone}<span></span></button>
+        </div>
+      </div>
+      <div class="phone-view" hidden>
+        <div class="qr-box"><canvas class="qr" role="img"></canvas><div class="qr-loading"></div></div>
+        <div class="phone-info">
+          <p class="title phone-title"></p>
+          <ol class="steps"><li></li><li></li><li></li></ol>
+          <p class="code-line"></p>
+          <p class="status" role="status" aria-live="polite"><i></i><span></span></p>
+          <div class="phone-actions">
+            <button type="button" class="link back">${ICONS.back}<span></span></button>
+            <button type="button" class="primary small done" hidden></button>
+          </div>
+        </div>
+        <div class="announce-slot"></div>
+      </div>
+      <input type="file" class="native" hidden>
+    </div>
+    <p class="message" role="alert" hidden></p>
+    <div class="list-head" hidden><span class="count"></span><button type="button" class="link clear"></button></div>
+    <ul class="list"></ul>`;
+  root.append(wrap);
+  const $ = (selector) => wrap.querySelector(selector);
+  const zone = $(".zone");
+  const native = $(".native");
+  native.multiple = multiple;
+  if (accept) native.accept = accept;
+  $(".idle .title").textContent = options.label ?? t(multiple ? "dropTitle" : "dropTitleOne");
+  $(".hint").textContent = hint;
+  $(".browse span").textContent = t("browse");
+  $(".or").textContent = t("or");
+  $(".phone span").textContent = t("usePhone");
+  $(".phone-title").textContent = t("phoneTitle");
+  const steps = wrap.querySelectorAll(".steps li");
+  ["phoneStep1", "phoneStep2", "phoneStep3"].forEach((key, index) => {
+    steps[index].textContent = t(key);
+  });
+  $(".back span").textContent = t("back");
+  $(".done").textContent = t("doneWithPhone");
+  $(".clear").textContent = t("clearAll");
+  if (!showPhone) {
+    $(".phone").hidden = true;
+    $(".or").hidden = true;
+  }
+  const promo = announcement(options.announce, t);
+  if (promo) $(".announce-slot").append(promo);
+  else $(".announce-slot").remove();
+  const items = [];
+  const handlers = /* @__PURE__ */ new Set();
+  let picker = null;
+  let messageTimer;
+  const files = () => items.filter((item) => item.file && !item.failed).map((item) => item.file);
+  const say = (text) => {
+    const message = $(".message");
+    message.textContent = text;
+    message.hidden = !text;
+    clearTimeout(messageTimer);
+    if (text) messageTimer = setTimeout(() => {
+      message.hidden = true;
+    }, 6e3);
+  };
+  const sync = () => {
+    const transfer = new DataTransfer();
+    for (const file of files()) transfer.items.add(file);
+    input.files = transfer.files;
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+    for (const handler of handlers) handler(files());
+  };
+  const renderList = () => {
+    const list = $(".list");
+    const shown = items.length;
+    $(".list-head").hidden = shown < 2;
+    $(".count").textContent = t("fileCount", { count: shown });
+    for (const item of items) {
+      if (!item.element) {
+        item.element = document.createElement("li");
+        list.append(item.element);
+      }
+      renderItem(item);
+    }
+  };
+  const renderItem = (item) => {
+    const row = item.element;
+    const extension = (item.name.split(".").pop() ?? "").slice(0, 4).toUpperCase();
+    const pending = !item.file && !item.failed;
+    row.className = `item${pending ? " pending" : ""}${item.failed ? " failed" : ""}`;
+    row.replaceChildren();
+    const thumb = document.createElement("div");
+    thumb.className = "thumb";
+    if (item.url) {
+      const image = document.createElement("img");
+      image.alt = "";
+      image.src = item.url;
+      image.addEventListener("error", () => {
+        image.remove();
+        thumb.textContent = extension;
+      });
+      thumb.append(image);
+    } else thumb.textContent = extension || "FILE";
+    const body = document.createElement("div");
+    body.className = "body";
+    const name = document.createElement("span");
+    name.className = "name";
+    name.textContent = item.name;
+    const meta = document.createElement("span");
+    meta.className = "meta";
+    const state = item.failed ? t("failed") : pending ? t(item.phase === "download" ? "receiving" : "sending", { percent: item.percent }) : "";
+    meta.textContent = [formatBytes(item.size, locale), item.source === "phone" ? t("sourcePhone") : t("sourceDevice"), state].filter(Boolean).join(" \xB7 ");
+    body.append(name, meta);
+    if (pending) {
+      const bar = document.createElement("span");
+      bar.className = "bar";
+      const fill = document.createElement("i");
+      fill.style.width = `${item.percent}%`;
+      bar.append(fill);
+      body.append(bar);
+    }
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.className = "remove";
+    remove.innerHTML = ICONS.close;
+    remove.setAttribute("aria-label", t("remove", { name: item.name }));
+    remove.hidden = pending;
+    remove.addEventListener("click", () => removeItem(item));
+    row.append(thumb, body, remove);
+  };
+  const removeItem = (item) => {
+    const index = items.indexOf(item);
+    if (index < 0) return;
+    items.splice(index, 1);
+    if (item.url) URL.revokeObjectURL(item.url);
+    item.element?.remove();
+    renderList();
+    sync();
+  };
+  const makeItem = (file, source) => ({
+    key: Math.random().toString(36).slice(2),
+    file,
+    name: file.name,
+    size: file.size,
+    source,
+    percent: 100,
+    ...file.type.startsWith("image/") ? { url: URL.createObjectURL(file) } : {}
+  });
+  const addFiles = (incoming, source) => {
+    const problems = [];
+    if (!multiple && incoming.length) {
+      for (const item of [...items]) removeItem(item);
+      incoming = incoming.slice(0, 1);
+    }
+    for (const file of incoming) {
+      if (items.filter((item) => !item.failed).length >= maxFiles) {
+        problems.push(t("tooMany", { count: maxFiles }));
+        break;
+      }
+      if (file.size > maxBytes) {
+        problems.push(t("tooLarge", { name: file.name, size: formatBytes(maxBytes, locale) }));
+        continue;
+      }
+      if (!matchesAccept(accept, file.name, file.type)) {
+        problems.push(t("wrongType", { name: file.name }));
+        continue;
+      }
+      items.push(makeItem(file, source));
+    }
+    say(problems.join(" "));
+    renderList();
+    sync();
+  };
+  $(".browse").addEventListener("click", () => native.click());
+  native.addEventListener("change", () => {
+    addFiles(Array.from(native.files ?? []), "device");
+    native.value = "";
+  });
+  let depth = 0;
+  zone.addEventListener("dragenter", (event) => {
+    event.preventDefault();
+    depth++;
+    if (zone.dataset.state === "idle") zone.dataset.drag = "true";
+  });
+  zone.addEventListener("dragover", (event) => {
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+  });
+  zone.addEventListener("dragleave", () => {
+    if (--depth <= 0) {
+      depth = 0;
+      delete zone.dataset.drag;
+    }
+  });
+  zone.addEventListener("drop", (event) => {
+    event.preventDefault();
+    depth = 0;
+    delete zone.dataset.drag;
+    if (zone.dataset.state === "idle") addFiles(Array.from(event.dataTransfer?.files ?? []), "device");
+  });
+  $(".clear").addEventListener("click", () => {
+    for (const item of [...items]) removeItem(item);
+  });
+  const setStatus = (text, live = false) => {
+    $(".status span").textContent = text;
+    $(".status").classList.toggle("live", live);
+  };
+  const showIdle = () => {
+    zone.dataset.state = "idle";
+    $(".idle").hidden = false;
+    $(".phone-view").hidden = true;
+    $(".phone").focus();
+  };
+  const pendingByRelay = /* @__PURE__ */ new Map();
+  const openInline = () => {
+    zone.dataset.state = "phone";
+    $(".idle").hidden = true;
+    $(".phone-view").hidden = false;
+    $(".qr-box").classList.add("loading");
+    $(".done").hidden = true;
+    $(".code-line").textContent = "";
+    setStatus(t("loading"));
+    const room = Math.max(1, maxFiles - files().length);
+    const current = open({ ...options, ui: false, multiple, maxFiles: multiple ? room : 1, maxFileBytes: maxBytes, accept });
+    picker = current;
+    current.on("ready", ({ claimUrl, code }) => {
+      drawQr($(".qr"), claimUrl, 168);
+      $(".qr").setAttribute("aria-label", t("phoneTitle"));
+      $(".qr-box").classList.remove("loading", "dim");
+      const line = $(".code-line");
+      const strong = document.createElement("b");
+      strong.textContent = formatCode(code);
+      line.replaceChildren(document.createTextNode(`${t("phoneCode", { host: new URL(claimUrl).host })} `), strong);
+      setStatus(t("waiting"));
+    });
+    let phoneLabel = "";
+    current.on("phone", ({ phone, needsApproval }) => {
+      phoneLabel = phone.label;
+      $(".qr-box").classList.add("dim");
+      setStatus(t("connected", { label: phone.label }), true);
+      if (needsApproval) current.approve();
+    });
+    current.on("direct", ({ connected }) => {
+      if (phoneLabel) setStatus(t(connected ? "connectedDirect" : "connected", { label: phoneLabel }), true);
+    });
+    current.on("phone_left", () => setStatus(t("phoneLeft")));
+    current.on("file_started", (meta) => {
+      const item = { key: meta.id, file: null, name: meta.name, size: meta.size, source: "phone", percent: 0 };
+      pendingByRelay.set(meta.id, item);
+      items.push(item);
+      renderList();
+    });
+    current.on("progress", ({ id, sent, total, phase }) => {
+      const item = pendingByRelay.get(id);
+      if (!item) return;
+      const share = total ? sent / total : 0;
+      item.phase = phase;
+      item.percent = Math.min(99, Math.floor(phase === "upload" ? share * 90 : 90 + share * 10));
+      renderItem(item);
+    });
+    current.on("received", ({ id, file }) => {
+      const pending = pendingByRelay.get(id);
+      pendingByRelay.delete(id);
+      const ready = makeItem(file, "phone");
+      if (pending) {
+        Object.assign(pending, { file, name: file.name, size: file.size, percent: 100, ...ready.url ? { url: ready.url } : {} });
+        if (!multiple) for (const other of items.filter((item) => item !== pending)) removeItem(other);
+        renderItem(pending);
+      } else items.push(ready);
+      renderList();
+      sync();
+      $(".done").hidden = false;
+    });
+    current.on("file_failed", ({ id }) => {
+      const item = pendingByRelay.get(id);
+      if (item) {
+        item.failed = true;
+        renderItem(item);
+      }
+    });
+    current.on("error", (error) => setStatus(t("error", { message: error.message })));
+    current.on("close", (reason) => {
+      for (const item of pendingByRelay.values()) {
+        item.failed = true;
+        renderItem(item);
+      }
+      pendingByRelay.clear();
+      if (picker === current) picker = null;
+      if (reason === "finished" || reason === "canceled") showIdle();
+      else {
+        $(".qr-box").classList.add("dim");
+        setStatus(t("expired"));
+      }
+    });
+  };
+  const closeInline = () => {
+    if (picker) picker.finish();
+    else showIdle();
+  };
+  $(".phone").addEventListener("click", () => {
+    if (phoneMode === "modal") {
+      const room = Math.max(1, maxFiles - files().length);
+      open({ ...options, ui: true, multiple, maxFiles: multiple ? room : 1, maxFileBytes: maxBytes, accept }).done.then((received) => addFiles(received, "phone"));
+    } else openInline();
+  });
+  $(".back").addEventListener("click", closeInline);
+  $(".done").addEventListener("click", closeInline);
+  wrap.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && zone.dataset.state === "phone") closeInline();
+  });
+  return {
+    get files() {
+      return files();
+    },
+    input,
+    on(_event, handler) {
+      handlers.add(handler);
+      return () => handlers.delete(handler);
+    },
+    remove(file) {
+      const item = items.find((candidate) => candidate.file === file);
+      if (item) removeItem(item);
+    },
+    clear() {
+      for (const item of [...items]) removeItem(item);
+    },
+    destroy() {
+      picker?.cancel();
+      for (const item of items) if (item.url) URL.revokeObjectURL(item.url);
+      host.remove();
+      input.remove();
+    }
+  };
+}
+function defineFieldElement(defaults = {}, tag = "tokshare-pick-field") {
+  if (typeof customElements === "undefined" || customElements.get(tag)) return;
+  customElements.define(tag, class extends HTMLElement {
+    constructor() {
+      super(...arguments);
+      __publicField(this, "controller", null);
+    }
+    connectedCallback() {
+      if (this.controller) return;
+      const attribute = (name) => this.getAttribute(name) ?? void 0;
+      const phone = attribute("phone");
+      const maxFiles = Number(attribute("max-files"));
+      const resize = Number(attribute("resize"));
+      const maxFileBytes = parseSize(attribute("max-size"));
+      this.controller = mountField(this, {
+        ...defaults,
+        key: attribute("key") ?? defaults.key ?? "",
+        ...attribute("relay") ?? defaults.relay ? { relay: attribute("relay") ?? defaults.relay } : {},
+        ...attribute("name") ? { name: attribute("name") } : {},
+        ...attribute("accept") ? { accept: attribute("accept") } : {},
+        multiple: this.hasAttribute("multiple"),
+        ...maxFiles > 0 ? { maxFiles } : {},
+        ...maxFileBytes ? { maxFileBytes } : {},
+        ...resize > 0 ? { resizeImages: { maxDimension: resize } } : {},
+        ...phone === "off" ? { phone: false } : phone === "modal" ? { phone: "modal" } : {},
+        ...attribute("locale") ? { locale: attribute("locale") } : {},
+        ...attribute("theme") ? { theme: attribute("theme") } : {},
+        ...attribute("label") ? { label: attribute("label") } : {},
+        ...attribute("direct") === "off" ? { direct: false } : {},
+        ...attribute("announce") === "off" ? { announce: false } : {}
+      });
+      this.controller.on("change", (files) => this.dispatchEvent(new CustomEvent("files", { detail: files, bubbles: true })));
+    }
+    disconnectedCallback() {
+      this.controller?.destroy();
+      this.controller = null;
+    }
+    get files() {
+      return this.controller?.files ?? [];
+    }
+    clear() {
+      this.controller?.clear();
+    }
+  });
+}
+
+// src/index.ts
+var TokSharePick = { pick, open, attach, mountField, defineFieldElement };
+export {
+  DEFAULT_RELAY,
+  PickError,
+  SDK_VERSION,
+  TokSharePick,
+  attach,
+  defineFieldElement,
+  mountField,
+  open,
+  parseSize,
+  pick
+};
+//# sourceMappingURL=index.js.map