@crosslink/sdk-browser 0.1.0

package/dist/index.js

@@ -0,0 +1,4520 @@
+import {
+  JsonStore,
+  LocalStorageSecureStorage,
+  MemorySecureStorage
+} from "./chunk-FKNR6EFT.js";
+import {
+  AsyncStorageAdapter,
+  HydratedSecureStorage,
+  IndexedDbSecureStorage,
+  createSecureStorage
+} from "./chunk-RCHT4DYR.js";
+
+// src/client.ts
+import {
+  ClientLink,
+  DeviceIdentity,
+  createClaim,
+  filterEndpoints,
+  filterEndpointsForOrigin,
+  noopLogger,
+  normalPairingTarget,
+  parsePairingUri,
+  processChallenge,
+  signClaim,
+  toHttpUrl,
+  toWebSocketUrl,
+  DEVICE_LINK_RPC_METHOD
+} from "@crosslink/core";
+import { bytesToBase64 } from "@crosslink/protocol";
+import { unwrapBootstrapUri } from "@crosslink/core";
+import {
+  tryUpgradeToWebrtc
+} from "@crosslink/webrtc-adapter";
+
+// src/ws.ts
+function toBytes(data) {
+  if (data instanceof ArrayBuffer) return new Uint8Array(data);
+  if (ArrayBuffer.isView(data)) {
+    const view = data;
+    return new Uint8Array(view.buffer, view.byteOffset, view.byteLength);
+  }
+  if (typeof data === "string") throw new Error("unexpected text frame");
+  if (typeof Blob !== "undefined" && data instanceof Blob) {
+    return data.arrayBuffer().then((buf) => new Uint8Array(buf));
+  }
+  throw new Error("unsupported websocket message type");
+}
+function openWithTimeout(ws, timeoutMs) {
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    const timer = setTimeout(() => {
+      if (settled) return;
+      settled = true;
+      try {
+        ws.close();
+      } catch {
+      }
+      reject(new Error(`connection timed out after ${timeoutMs}ms`));
+    }, timeoutMs);
+    const onOpen = () => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      ws.removeEventListener?.("error", onError);
+      resolve();
+    };
+    const onError = (ev) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      const detail = ev;
+      reject(new Error(`connection failed: ${detail?.error?.message ?? detail?.message ?? "unknown"}`));
+    };
+    ws.addEventListener("open", onOpen);
+    ws.addEventListener("error", onError);
+  });
+}
+function wsTransport(ws, kind) {
+  try {
+    ws.binaryType = "arraybuffer";
+  } catch {
+  }
+  let dataHandler;
+  let closeHandler;
+  let closed = false;
+  ws.addEventListener("message", (ev) => {
+    if (closed) return;
+    let bytes;
+    try {
+      bytes = toBytes(ev.data);
+    } catch {
+      return;
+    }
+    if (bytes instanceof Uint8Array) {
+      dataHandler?.(bytes);
+      return;
+    }
+    void bytes.then((resolved) => {
+      if (!closed) dataHandler?.(resolved);
+    });
+  });
+  const onCloseOnce = () => {
+    if (closed) return;
+    closed = true;
+    closeHandler?.("ws-closed");
+  };
+  ws.addEventListener("close", onCloseOnce);
+  ws.addEventListener("error", () => {
+    try {
+      ws.close();
+    } catch {
+    }
+    onCloseOnce();
+  });
+  return {
+    kind,
+    onData(cb) {
+      dataHandler = cb;
+    },
+    onClose(cb) {
+      closeHandler = cb;
+    },
+    async send(bytes) {
+      if (closed || ws.readyState !== 1) throw new Error("transport closed");
+      ws.send(bytes);
+    },
+    close(reason) {
+      if (closed) return;
+      try {
+        ws.close(1e3, typeof reason === "string" ? reason.slice(0, 100) : void 0);
+      } catch {
+      }
+    }
+  };
+}
+
+// src/signaling-peer.ts
+var SignalingPeer = class _SignalingPeer {
+  constructor(ws) {
+    this.ws = ws;
+    ws.addEventListener("message", (ev) => {
+      let msg;
+      try {
+        msg = JSON.parse(String(ev.data));
+      } catch {
+        return;
+      }
+      if (msg.op === "pair_deliver" && typeof msg.blob === "string") {
+        const entry = { from: String(msg.from), blob: msg.blob };
+        const r = this.resolvers.shift();
+        if (r) r(entry);
+        else this.queue.push(entry);
+        return;
+      }
+      if (msg.op === "error") {
+        this.fail(new Error(`signaling error: ${JSON.stringify(msg.error ?? {})}`));
+      }
+      if (msg.op === "pair_not_found") {
+        this.fail(new Error("PAIRING_EXPIRED: code not found or expired"));
+      }
+    });
+    ws.addEventListener(
+      "close",
+      () => this.fail(new Error("signaling connection closed"))
+    );
+    ws.addEventListener("error", () => this.fail(new Error("signaling connection failed")));
+  }
+  ws;
+  queue = [];
+  resolvers = [];
+  failure;
+  failureWaiters = [];
+  static async open(wsFactory, timeoutMs = 1e4) {
+    const ws = wsFactory();
+    const peer = new _SignalingPeer(ws);
+    try {
+      await openWithTimeout(ws, timeoutMs);
+    } catch (err) {
+      throw new Error(`cannot reach signaling: ${String(err?.message ?? err)}`, { cause: err });
+    }
+    return peer;
+  }
+  /** Resolves a pairing code; returns psid, host connection id, and presence. */
+  async resolve(code) {
+    this.send({ op: "pair_resolve", code });
+    return new Promise((resolve, reject) => {
+      const onMsg = (ev) => {
+        let msg;
+        try {
+          msg = JSON.parse(String(ev.data));
+        } catch {
+          return;
+        }
+        if (msg.op === "pair_found") {
+          this.ws.removeEventListener?.("message", onMsg);
+          resolve({
+            psid: String(msg.psid),
+            hostConn: String(msg.host_conn),
+            app: msg.app
+          });
+        } else if (msg.op === "pair_not_found") {
+          this.ws.removeEventListener?.("message", onMsg);
+          reject(new Error("PAIRING_EXPIRED"));
+        } else if (msg.op === "error") {
+          this.ws.removeEventListener?.("message", onMsg);
+          reject(new Error(String(msg.error?.code ?? "error")));
+        }
+      };
+      this.ws.addEventListener("message", onMsg);
+    });
+  }
+  /** Sends an opaque blob to a connected peer (host or waiter). */
+  sendTo(connId, blob) {
+    this.send({ op: "pair_payload", to: connId, blob });
+  }
+  /** Awaits the next blob delivered from `fromConnId`. */
+  nextBlob(fromConnId, timeoutMs = 15e3) {
+    const idx = this.queue.findIndex((q) => q.from === fromConnId);
+    if (idx >= 0) return Promise.resolve(this.queue.splice(idx, 1)[0].blob);
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        this.failureWaiters = this.failureWaiters.filter((w) => w !== wake);
+        reject(new Error("timeout awaiting pairing reply"));
+      }, timeoutMs);
+      const wake = (err) => {
+        clearTimeout(timer);
+        err ? reject(err) : reject(new Error("peer closed"));
+      };
+      this.resolvers.push((entry) => {
+        clearTimeout(timer);
+        this.failureWaiters = this.failureWaiters.filter((w) => w !== wake);
+        if (entry.from === fromConnId) resolve(entry.blob);
+        else {
+          this.queue.push(entry);
+          this.resolvers.push((e2) => resolve(e2.blob));
+          reject(new Error("blob from unexpected sender"));
+        }
+      });
+      this.failureWaiters.push(wake);
+      if (this.failure) wake(this.failure);
+    });
+  }
+  close() {
+    try {
+      this.ws.close(1e3, "done");
+    } catch {
+    }
+  }
+  send(obj) {
+    this.ws.send(JSON.stringify(obj));
+  }
+  fail(err) {
+    this.failure = err;
+    const waiters = this.failureWaiters.splice(0);
+    for (const w of waiters) w(err);
+  }
+};
+
+// src/pairing-channel.ts
+var DirectPairingChannel = class _DirectPairingChannel {
+  constructor(ws) {
+    this.ws = ws;
+    try {
+      ws.binaryType = "arraybuffer";
+    } catch {
+    }
+    ws.addEventListener("message", (ev) => {
+      const frame = parseFrame(ev.data);
+      if (!frame) return;
+      if (frame instanceof Promise) {
+        void frame.then((resolved) => {
+          if (resolved) this.deliver(resolved);
+        });
+        return;
+      }
+      this.deliver(frame);
+    });
+    ws.addEventListener("close", () => this.fail(new Error("host closed the pairing connection")));
+    ws.addEventListener("error", () => this.fail(new Error("pairing connection failed")));
+  }
+  ws;
+  kind = "direct";
+  queue = [];
+  waiters = [];
+  failure;
+  static async open(url, wsFactory, timeoutMs) {
+    const ws = wsFactory(url);
+    const channel = new _DirectPairingChannel(ws);
+    try {
+      await openWithTimeout(ws, timeoutMs);
+    } catch (err) {
+      throw new Error(`cannot reach ${url}: ${String(err?.message ?? err)}`, { cause: err });
+    }
+    return channel;
+  }
+  async resolve(code) {
+    this.send({ kind: "pair_hello", code });
+    const frame = await this.next();
+    if (frame.kind === "pair_error") {
+      throw new Error(pairErrorMessage(frame));
+    }
+    if (frame.kind !== "pair_ready" || typeof frame.ps !== "string") {
+      throw new Error(`unexpected reply to pair_hello: ${String(frame.kind)}`);
+    }
+    return { psid: frame.ps, app: frame.app };
+  }
+  send(frame) {
+    this.ws.send(new TextEncoder().encode(JSON.stringify(frame)));
+  }
+  next() {
+    const queued = this.queue.shift();
+    if (queued) return Promise.resolve(queued);
+    if (this.failure) return Promise.reject(this.failure);
+    return new Promise((resolve, reject) => this.waiters.push({ resolve, reject }));
+  }
+  close() {
+    try {
+      this.ws.close();
+    } catch {
+    }
+  }
+  deliver(frame) {
+    const waiter = this.waiters.shift();
+    if (waiter) waiter.resolve(frame);
+    else this.queue.push(frame);
+  }
+  fail(err) {
+    if (this.failure) return;
+    this.failure = err;
+    for (const waiter of this.waiters.splice(0)) waiter.reject(err);
+  }
+};
+var BrokeredPairingChannel = class {
+  constructor(peer) {
+    this.peer = peer;
+  }
+  peer;
+  kind = "brokered";
+  hostConn = "";
+  async resolve(code) {
+    const found = await this.peer.resolve(code);
+    this.hostConn = found.hostConn;
+    return { psid: found.psid, app: found.app };
+  }
+  send(frame) {
+    this.peer.sendTo(this.hostConn, JSON.stringify(frame));
+  }
+  async next() {
+    const blob = await this.peer.nextBlob(this.hostConn);
+    return JSON.parse(blob);
+  }
+  close() {
+    this.peer.close();
+  }
+};
+function pairErrorMessage(frame) {
+  const error = frame.error;
+  return `PAIRING_FAILED${error?.code ? ` (${error.code})` : ""}: ${error?.message ?? "the host rejected the pairing attempt"}`;
+}
+function parseFrame(data) {
+  if (typeof Blob !== "undefined" && data instanceof Blob) {
+    return data.text().then(decodeJsonObject);
+  }
+  if (typeof data === "string") return decodeJsonObject(data);
+  try {
+    const bytes = data instanceof ArrayBuffer ? new Uint8Array(data) : ArrayBuffer.isView(data) ? new Uint8Array(data.buffer, data.byteOffset, data.byteLength) : null;
+    if (!bytes) return null;
+    return decodeJsonObject(new TextDecoder().decode(bytes));
+  } catch {
+    return null;
+  }
+}
+function decodeJsonObject(text) {
+  try {
+    const parsed = JSON.parse(text);
+    return parsed && typeof parsed === "object" ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+// src/client.ts
+var StorageBackedAppStore = class {
+  file;
+  constructor(storage) {
+    this.file = new JsonStore(storage, "crosslink.apps");
+  }
+  all() {
+    return this.file.load({ apps: {} }).apps;
+  }
+  list() {
+    return Object.values(this.all());
+  }
+  get(appId) {
+    return this.all()[appId];
+  }
+  upsert(record) {
+    const data = this.file.load({ apps: {} });
+    data.apps[record.appId] = record;
+    this.file.save(data);
+  }
+  remove(appId) {
+    const data = this.file.load({ apps: {} });
+    delete data.apps[appId];
+    this.file.save(data);
+  }
+};
+var CrosslinkClient = class _CrosslinkClient {
+  constructor(options = {}) {
+    this.options = options;
+    const storage = options.storage ?? new MemorySecureStorage();
+    this.storage = storage;
+    this.appStore = new StorageBackedAppStore(storage);
+    this.hints = new JsonStore(storage, "crosslink.hints");
+    this.log = (options.logger ?? noopLogger).child({ component: "crosslink-client" });
+    const seedKey = "crosslink.identity.seed";
+    const existing = storage.get(seedKey);
+    if (existing) {
+      this.identity = DeviceIdentity.fromSeed(base64ToBytesLocal(existing));
+    } else {
+      this.identity = DeviceIdentity.create();
+      storage.set(seedKey, bytesToBase64(this.identity.seed));
+      this.log.info("client.identity-created", { deviceId: this.identity.deviceId });
+    }
+  }
+  options;
+  log;
+  identity;
+  appStore;
+  hints;
+  link;
+  storage;
+  deviceCryptoStorage;
+  stateListeners = /* @__PURE__ */ new Set();
+  /**
+   * Builds a client whose identity and paired-app records are encrypted at
+   * rest with a non-extractable WebCrypto key, rather than sitting in
+   * `localStorage` in the clear. Prefer this over `new CrosslinkClient()` in
+   * browsers; the constructor stays synchronous for embedders that supply
+   * their own storage.
+   */
+  static async create(options = {}) {
+    if (options.storage) return new _CrosslinkClient(options);
+    const log = options.logger ?? noopLogger;
+    const { storage, kind, encrypted } = await createSecureStorage({
+      ...options.allowPlaintextFallback !== void 0 ? { allowPlaintextFallback: options.allowPlaintextFallback } : {},
+      onWriteError: (err, key) => log.error("client.storage-write-failed", { key, error: err })
+    });
+    if (!encrypted) {
+      log.warn("client.storage-not-encrypted", {
+        kind,
+        detail: "identity seed is stored in the clear; WebCrypto/IndexedDB unavailable"
+      });
+    } else {
+      log.info("client.storage", { kind });
+    }
+    return new _CrosslinkClient({ ...options, storage });
+  }
+  get deviceId() {
+    return this.identity.deviceId;
+  }
+  listApps() {
+    return this.appStore.list();
+  }
+  forget(appId) {
+    this.appStore.remove(appId);
+    this.link?.close();
+    this.link = void 0;
+  }
+  /**
+   * Runs the full pairing flow against a scanned QR / URI: resolve code via
+   * signaling, verify pinned fingerprint, verify challenge signature, confirm
+   * SAS, persist the paired-app record.
+   *
+   * Accepts either a raw `crosslink://pair?…` manifest URI or a hosted
+   * bootstrap URL (`https://…/…&pair=<manifest>`), because iOS Safari has no
+   * handler for the custom scheme — the phone's camera produces the hosted
+   * link and this call transparently unwraps it.
+   */
+  async pairFromQr(text, requestedCaps, codeOverride) {
+    if (!this.deviceCryptoStorage) {
+      try {
+        const storageModule = await import("./device-crypto-storage-NEJ3IT2Z.js");
+        this.deviceCryptoStorage = await storageModule.SecureDeviceCryptoStorage.open();
+      } catch (e) {
+        this.log.warn("client.device-crypto-init-failed", { error: String(e) });
+      }
+    }
+    const manifest = unwrapBootstrapUri(text);
+    const uri = parsePairingUri(manifest);
+    const rawCode = codeOverride ?? uri.code;
+    const code = uri.link ? rawCode : rawCode.replace(/\D/g, "");
+    if (!uri.link && code.length !== 9) {
+      throw new Error("A valid 9-digit pairing code is required");
+    }
+    const channel = await this.openPairingChannel(uri);
+    try {
+      const found = await channel.resolve(code);
+      if (!found.app.fingerprint.startsWith(uri.fp16)) {
+        this.log.error("client.fingerprint-mismatch", {
+          expected: uri.fp16,
+          got: found.app.fingerprint.slice(0, 16)
+        });
+        throw new Error("SECURITY: host fingerprint does not match the scanned code");
+      }
+      const { claim, state } = createClaim(this.identity, uri, this.options.deviceName ?? "browser", requestedCaps);
+      signClaim(this.identity, claim, found.psid);
+      channel.send(claim);
+      const challenge = await channel.next();
+      if (challenge.kind === "pair_error") throw new Error(pairErrorMessage(challenge));
+      const defaultConfirm = (req) => {
+        if (typeof window !== "undefined" && typeof window.confirm === "function") {
+          return window.confirm(
+            `Confirm pairing with "${req.hostName}"?
+
+SAS: ${req.sas}
+Capabilities: ${req.grantedCaps.join(", ") || "(none)"}`
+          );
+        }
+        return true;
+      };
+      const normalConfirm = this.options.onConfirmPairing ?? defaultConfirm;
+      const confirm = (req) => req.link ? true : normalConfirm(req);
+      const { complete, record } = await processChallenge(
+        this.identity,
+        uri,
+        state,
+        challenge,
+        confirm
+      );
+      channel.send(complete);
+      const done = await channel.next();
+      if (done.kind === "pair_error") throw new Error(pairErrorMessage(done));
+      record.lastConnected = Date.now();
+      this.appStore.upsert(record);
+      this.log.info("client.paired", {
+        appId: record.appId,
+        appName: record.appName,
+        grantedCaps: record.grantedCaps,
+        requestedCaps: requestedCaps ?? null
+      });
+      const hintsAll = this.hints.load({});
+      hintsAll[record.appId] = {
+        endpoints: uri.endpoints,
+        relay: found.app.relay,
+        lan: found.app.lan,
+        signalingUrl: uri.signalingUrl
+      };
+      this.hints.save(hintsAll);
+      return record;
+    } finally {
+      channel.close();
+    }
+  }
+  /**
+   * Picks how to carry out the pairing exchange.
+   *
+   * Direct endpoints are tried first and in QR order: a socket straight to the
+   * host is faster, keeps the exchange off any third party, and — crucially —
+   * needs no service to be deployed anywhere. Only when every direct endpoint
+   * refuses does this fall back to a signaling service, and if there is no
+   * signaling endpoint either, the error names every route that was tried
+   * rather than blaming a missing signaling URL.
+   */
+  async openPairingChannel(uri) {
+    const dialTimeoutMs = this.options.dialTimeoutMs ?? 1e4;
+    const failures = [];
+    const { usable, blocked } = filterEndpointsForOrigin(uri.endpoints, this.pageOrigin());
+    for (const entry of blocked) {
+      failures.push(`${entry.endpoint.kind} ${entry.endpoint.url}: ${entry.reason}`);
+      this.log.warn("client.endpoint-blocked", {
+        endpoint: entry.endpoint.kind,
+        reason: entry.reason
+      });
+    }
+    for (const endpoint of filterEndpoints(usable, ["lan", "wan", "tunnel"])) {
+      try {
+        const channel = await DirectPairingChannel.open(
+          toWebSocketUrl(endpoint.url),
+          (u) => this.ws(u),
+          dialTimeoutMs
+        );
+        this.log.info("client.pairing-channel", { kind: "direct", endpoint: endpoint.kind });
+        return channel;
+      } catch (err) {
+        failures.push(`${endpoint.kind} ${endpoint.url}: ${String(err?.message ?? err)}`);
+        this.log.debug("client.pairing-endpoint-failed", { endpoint: endpoint.kind, error: String(err) });
+      }
+    }
+    for (const endpoint of filterEndpoints(usable, ["sig"])) {
+      const wsUrl = `${toWebSocketUrl(endpoint.url).replace(/\/$/, "")}/ws`;
+      try {
+        const peer = await SignalingPeer.open(() => this.ws(wsUrl), dialTimeoutMs);
+        this.log.info("client.pairing-channel", { kind: "brokered", endpoint: endpoint.kind });
+        return new BrokeredPairingChannel(peer);
+      } catch (err) {
+        failures.push(`sig ${wsUrl}: ${String(err?.message ?? err)}`);
+      }
+    }
+    throw new Error(
+      `cannot reach the host on any route from this QR code.
+Tried:
+  ${failures.join("\n  ")}
+` + (blocked.length > 0 && usable.length === 0 ? "Every route this host advertises is insecure, and this page is served over https, so the browser refuses all of them. The host needs a wss:// route \u2014 a relay or a tunnel \u2014 to be reachable from an installable Crosslink origin." : 'If the phone is not on the same Wi-Fi, the host needs remote access (networkMode: "remote") or a signaling service.')
+    );
+  }
+  /**
+   * The origin of the page this client is running in, or null off-browser.
+   *
+   * Used to decide which advertised endpoints the browser will actually permit;
+   * a Node or native client has no such restriction and gets null.
+   */
+  pageOrigin() {
+    if (typeof location === "undefined") return null;
+    const origin = location.origin;
+    return origin && origin !== "null" ? origin : null;
+  }
+  /** Connects to a previously paired app; returns the RPC client when online. */
+  async connect(appId) {
+    const record = appId ? this.appStore.get(appId) : this.appStore.list()[0];
+    if (!record) throw new Error("no paired app" + (appId ? ` for ${appId}` : ""));
+    if (this.link && this.link.currentState !== "offline" && this.link.currentState !== "connecting" && this.link.currentState !== "reconnecting") return this.rpc();
+    const hintsAll = this.hints.load({});
+    const hints = hintsAll[record.appId] ?? {};
+    let presence = null;
+    if (hints.signalingUrl) {
+      const doFetch = this.options.fetch ?? globalThis.fetch;
+      try {
+        const res = await doFetch(
+          `${toHttpUrl(hints.signalingUrl).replace(/\/$/, "")}/apps/${encodeURIComponent(record.appId)}`
+        );
+        if (res.ok) {
+          presence = await res.json();
+          hintsAll[record.appId] = { ...hints, ...presence };
+          this.hints.save(hintsAll);
+        }
+      } catch (err) {
+        this.log.debug("client.presence-lookup-failed", { appId: record.appId, error: err });
+      }
+    }
+    const relay = presence?.relay ?? hints.relay;
+    const lan = presence?.lan ?? hints.lan;
+    const candidates = [];
+    const seenUrls = /* @__PURE__ */ new Set();
+    const addDirect = (url, kind) => {
+      if (seenUrls.has(url)) return;
+      seenUrls.add(url);
+      if (filterEndpointsForOrigin([{ kind: "lan", url }], this.pageOrigin()).usable.length === 0) {
+        this.log.warn("client.candidate-blocked", { kind, url });
+        return;
+      }
+      candidates.push({
+        // Both are direct sockets to the host; `lan` is the transport kind the
+        // protocol layer understands, and the endpoint kind is only about which
+        // network the address lives on.
+        kind: "lan",
+        connect: async () => {
+          const { ws: opened, ready } = openWs(url, (u) => this.ws(u), this.options.dialTimeoutMs ?? 1e4);
+          await ready;
+          return wsTransport(opened, "lan");
+        }
+      });
+      this.log.debug("client.candidate", { kind, url });
+    };
+    if (lan && lan.host) addDirect(`ws://${lan.host}:${lan.port}`, "lan");
+    for (const endpoint of filterEndpoints(hints.endpoints ?? [], ["lan", "wan", "tunnel"])) {
+      addDirect(toWebSocketUrl(endpoint.url), endpoint.kind === "wan" ? "wan" : "lan");
+    }
+    if (relay && this.options.networkMode !== "local-only") {
+      candidates.push({
+        kind: "crosslink-relayed",
+        connect: async () => {
+          const base = `${relay.url.replace(/^http/, "ws").replace(/\/$/, "")}/ws`;
+          const url = `${base}?channel=${encodeURIComponent(relay.channel)}&role=c` + (this.options.relayToken ? `&auth=${encodeURIComponent(this.options.relayToken)}` : "");
+          const { ws: opened, ready } = openWs(url, (u) => this.ws(u), this.options.dialTimeoutMs ?? 1e4);
+          await ready;
+          return wsTransport(opened, "crosslink-relayed");
+        }
+      });
+    }
+    if (candidates.length === 0) {
+      this.log.warn("client.no-candidates", { appId: record.appId });
+      throw new Error("no known transport for this app; re-pair or check host is online");
+    }
+    this.log.debug("client.connecting", {
+      appId: record.appId,
+      candidates: candidates.map((c) => c.kind)
+    });
+    this.link?.close();
+    const link = new ClientLink({
+      identity: this.identity,
+      appId: record.appId,
+      hostRecord: () => {
+        const rec = this.appStore.get(record.appId);
+        rec.lastConnected = Date.now();
+        return rec;
+      },
+      candidates,
+      autoReconnect: true,
+      requestTimeoutMs: this.options.requestTimeoutMs,
+      onStateChange: (state, detail) => this.publishState(state, detail),
+      logger: this.options.logger,
+      hybridPq: this.options.hybridPq ?? "disabled"
+    });
+    this.link = link;
+    await link.connect();
+    if (this.options.webrtc) {
+      this.tryWebrtcUpgrade(link);
+    }
+    return link.rpc;
+  }
+  /**
+   * Attempts to upgrade a relayed session to a direct WebRTC DataChannel.
+   * Runs asynchronously — the relayed session stays active regardless.
+   */
+  async tryWebrtcUpgrade(_link) {
+    if (!this.options.webrtc?.createPeer) return;
+    try {
+      const target = _link;
+      const ok = await tryUpgradeToWebrtc(target, {
+        createPeer: this.options.webrtc.createPeer,
+        timeoutMs: this.options.webrtc.timeoutMs
+      });
+      if (ok) {
+        this.log.info("client.webrtc-upgraded");
+      }
+    } catch (err) {
+      this.log.debug("client.webrtc-upgrade-failed", { error: err });
+    }
+  }
+  rpc() {
+    if (!this.link || !this.link.connected) throw new Error("not connected");
+    return this.link.rpc;
+  }
+  /**
+   * Mints a single-use device-link continuation URI over the current
+   * connection, so this same identity can silently re-establish trust from a
+   * fresh, storage-isolated context (e.g. after "Add to Home Screen" on iOS,
+   * which does not share IndexedDB/localStorage with the Safari tab that
+   * paired). Requires an active, authorized connection.
+   */
+  async createDeviceLink() {
+    return this.rpc().call(DEVICE_LINK_RPC_METHOD);
+  }
+  /** The live connection, exposed for adapters that upgrade the transport. */
+  get connection() {
+    return this.link;
+  }
+  /**
+   * Convenience for the iOS / Add-to-Home-Screen flow: accepts the long
+   * `https://…#pair=<uri>` link a phone camera produces, unwraps it, and
+   * delegates to `pairFromQr`.
+   */
+  async pairFromBootstrap(bootstrapUrl, requestedCaps, codeOverride) {
+    return this.pairFromQr(bootstrapUrl, requestedCaps, codeOverride);
+  }
+  /**
+   * Explicit pairing method taking a target host URI/manifest and entered 9-digit code.
+   */
+  async pairWithCode(targetUri, code, requestedCaps) {
+    return this.pairFromQr(normalPairingTarget(targetUri), requestedCaps, code);
+  }
+  /** True when the identity seed is encrypted at rest. */
+  get storageEncrypted() {
+    return this.storage.encrypted === true;
+  }
+  ws(url) {
+    return (this.options.webSocket ?? defaultWebSocket)(url);
+  }
+  get state() {
+    return this.link?.currentState ?? "offline";
+  }
+  /**
+   * Subscribes to connection-state changes; returns an unsubscribe function.
+   *
+   * Framework bindings need this. Without it the only way to observe state is
+   * the `onStateChange` constructor option — a single callback fixed at
+   * construction, which a React provider cannot use without polling.
+   */
+  onStateChange(listener) {
+    this.stateListeners.add(listener);
+    return () => {
+      this.stateListeners.delete(listener);
+    };
+  }
+  publishState(state, detail) {
+    this.options.onStateChange?.(state, detail);
+    for (const listener of [...this.stateListeners]) {
+      try {
+        listener(state, detail);
+      } catch (err) {
+        this.log.warn("client.state-listener-failed", { error: String(err) });
+      }
+    }
+  }
+  close() {
+    this.link?.close();
+    this.link = void 0;
+  }
+};
+function defaultWebSocket(url) {
+  const ctor = globalThis.WebSocket;
+  if (typeof ctor !== "function") {
+    throw new Error("WebSocket not available in this environment");
+  }
+  return new ctor(url);
+}
+function openWs(url, factory, timeoutMs) {
+  const ws = factory(url);
+  return { ws, ready: openWithTimeout(ws, timeoutMs) };
+}
+function base64ToBytesLocal(b64) {
+  const bin = atobSafe(b64);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+}
+function atobSafe(b64) {
+  if (typeof atob === "function") return atob(b64);
+  return Buffer.from(b64, "base64").toString("binary");
+}
+
+// src/index.ts
+import {
+  consoleLogger,
+  createLogger,
+  noopLogger as noopLogger2,
+  MemoryLogSink
+} from "@crosslink/core";
+
+// src/mock-ws.ts
+var CONNECTING = 0;
+var OPEN = 1;
+var CLOSING = 2;
+var CLOSED = 3;
+var MockSocket = class _MockSocket {
+  constructor(url, options = {}) {
+    this.url = url;
+    const open = () => {
+      if (this.readyState !== CONNECTING) return;
+      if (options.failToOpen) {
+        this.readyState = CLOSED;
+        this.emit("error", { type: "error" });
+        this.emit("close", { code: 1006, reason: "failed to open" });
+        return;
+      }
+      this.readyState = OPEN;
+      this.emit("open", { type: "open" });
+    };
+    if (options.openDelayMs && options.openDelayMs > 0) {
+      setTimeout(open, options.openDelayMs);
+    } else {
+      queueMicrotask(open);
+    }
+  }
+  url;
+  readyState = CONNECTING;
+  binaryType = "arraybuffer";
+  /** Everything this end has sent, in order. */
+  sent = [];
+  listeners = /* @__PURE__ */ new Map();
+  peer;
+  /** Joins two mock sockets so each one's sends arrive at the other. */
+  static pair(urlA = "ws://a", urlB = "ws://b") {
+    const a = new _MockSocket(urlA);
+    const b = new _MockSocket(urlB);
+    a.attach(b);
+    b.attach(a);
+    return [a, b];
+  }
+  attach(peer) {
+    this.peer = peer;
+  }
+  addEventListener(type, cb) {
+    let set = this.listeners.get(type);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(type, set);
+    }
+    set.add(cb);
+  }
+  removeEventListener(type, cb) {
+    this.listeners.get(type)?.delete(cb);
+  }
+  send(data) {
+    if (this.readyState !== OPEN) throw new Error("mock socket is not open");
+    this.sent.push(data);
+    queueMicrotask(() => this.peer?.deliver(data));
+  }
+  close(code = 1e3, reason = "") {
+    if (this.readyState === CLOSED || this.readyState === CLOSING) return;
+    this.readyState = CLOSED;
+    this.emit("close", { code, reason });
+    const peer = this.peer;
+    queueMicrotask(() => peer?.remoteClosed(code, reason));
+  }
+  /** Simulates a transport-level failure (not a clean close). */
+  fail(reason = "mock failure") {
+    if (this.readyState === CLOSED) return;
+    this.emit("error", { type: "error", reason });
+    this.readyState = CLOSED;
+    this.emit("close", { code: 1006, reason });
+    const peer = this.peer;
+    queueMicrotask(() => peer?.remoteClosed(1006, reason));
+  }
+  /** Pushes a message into this end as though the peer had sent it. */
+  deliver(data) {
+    if (this.readyState !== OPEN) return;
+    this.emit("message", { data });
+  }
+  remoteClosed(code, reason) {
+    if (this.readyState === CLOSED) return;
+    this.readyState = CLOSED;
+    this.emit("close", { code, reason });
+  }
+  emit(type, ev) {
+    for (const cb of [...this.listeners.get(type) ?? []]) {
+      try {
+        cb(ev);
+      } catch {
+      }
+    }
+  }
+};
+
+// src/notifications.ts
+import { NOTIFICATION_EVENT } from "@crosslink/core";
+var NotificationHandler = class {
+  constructor(options = {}) {
+    this.options = options;
+  }
+  options;
+  unsub;
+  seen = /* @__PURE__ */ new Set();
+  /**
+   * Begin listening for notifications over an RPC client.
+   * Returns an unsubscribe function.
+   */
+  start(rpc) {
+    if (this.options.autoRequestPermission && typeof Notification !== "undefined") {
+      Notification.requestPermission();
+    }
+    this.unsub = rpc.subscribe(
+      NOTIFICATION_EVENT,
+      ((payload) => {
+        if (!payload.id || this.seen.has(payload.id)) return;
+        this.seen.add(payload.id);
+        this.deliver(payload);
+      })
+    );
+    return () => this.stop();
+  }
+  stop() {
+    this.unsub?.();
+    this.unsub = void 0;
+  }
+  deliver(payload) {
+    if (this.options.onNotification) {
+      this.options.onNotification(payload);
+      return;
+    }
+    if (typeof Notification === "undefined") return;
+    if (Notification.permission !== "granted") return;
+    const n = new Notification(payload.title, {
+      body: payload.body,
+      tag: payload.id,
+      icon: payload.url
+    });
+    n.onclick = () => {
+      this.options.onClick?.(payload);
+      if (payload.url) window.open(payload.url, "_blank");
+      n.close();
+    };
+  }
+};
+
+// src/ui/pairing-source.ts
+var DEFAULT_BASE_PATH = "/__crosslink";
+var CONTROL_ROUTES = {
+  pairing: "/pairing",
+  networkMode: "/network-mode",
+  devices: "/devices",
+  revoke: "/revoke",
+  events: "/events"
+};
+function joinPath(base, route) {
+  return `${base.replace(/\/+$/, "")}${route}`;
+}
+async function describeFailure(res) {
+  const raw = await res.text().catch(() => "");
+  let message = raw.trim();
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed?.error) message = parsed.error;
+  } catch {
+  }
+  const error = new Error(message || `Request failed with status ${res.status}`);
+  error.code = `CL-P${res.status}`;
+  return error;
+}
+function createHttpPairingSource(basePath = DEFAULT_BASE_PATH) {
+  const base = basePath.replace(/\/+$/, "");
+  return {
+    devicesEndpoint: joinPath(base, CONTROL_ROUTES.devices),
+    revokeEndpoint: joinPath(base, CONTROL_ROUTES.revoke),
+    async getSession(mode) {
+      const url = new URL(joinPath(base, CONTROL_ROUTES.pairing), location.href);
+      if (mode) url.searchParams.set("mode", mode);
+      const res = await fetch(url.toString(), { headers: { accept: "application/json" } });
+      if (!res.ok) throw await describeFailure(res);
+      return await res.json();
+    },
+    async setNetworkMode(mode) {
+      const res = await fetch(joinPath(base, CONTROL_ROUTES.networkMode), {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ mode })
+      });
+      if (!res.ok) throw await describeFailure(res);
+    },
+    subscribe(listener) {
+      if (typeof EventSource === "undefined") return () => {
+      };
+      const stream = new EventSource(joinPath(base, CONTROL_ROUTES.events));
+      const invalidate = () => listener({ type: "invalidate" });
+      const connected = (event) => {
+        let deviceId;
+        try {
+          deviceId = JSON.parse(event.data).deviceId;
+        } catch {
+        }
+        listener({ type: "connected", deviceId });
+      };
+      const disconnected = (event) => {
+        let deviceId;
+        try {
+          deviceId = JSON.parse(event.data).deviceId;
+        } catch {
+        }
+        listener({ type: "disconnected", deviceId });
+      };
+      stream.addEventListener("crosslink.pairing-invalidated", invalidate);
+      stream.addEventListener("crosslink.device-connected", connected);
+      stream.addEventListener("crosslink.device-disconnected", disconnected);
+      return () => stream.close();
+    }
+  };
+}
+
+// src/ui/branding.ts
+var CROSSLINK_LOGO_VIEWBOX = "105 363 1060 222";
+var CROSSLINK_LOGO_PATH = "M233.73 383.42C254.47 380.94 275.68 386.3 293.3 397.22C298.36 400.36 310.34 407.06 306.92 414.39C305.05 418.41 299.18 424.66 294.5 424.16C290.7 423.75 283.6 416.8 279.92 414.57C271.58 409.53 262.05 406.61 252.45 405.27C210.49 399.39 171.23 433.96 172.83 476.5C174.51 521.08 215.67 550.01 258.38 541.73C267.91 539.88 276.87 535.81 284.85 530.38C288.81 527.68 292.08 522.77 297.47 523.95C299.49 524.39 307.14 531.68 307.85 533.67C308.39 535.19 308.34 536.9 307.92 538.44C307.04 541.58 302.8 544.02 300.34 545.88C285.61 557.02 267.9 563.4 249.5 564.79C194.73 568.93 147.61 523.68 151.02 468.5C152.07 451.5 158.16 436.04 167.48 421.97C173.81 412.42 182.42 403.72 192.26 397.74C205.14 389.9 218.77 385.21 233.73 383.42ZM791.59 387.27C795.36 386.55 802.6 386.03 805.44 389.07C807.56 391.34 807.21 394.63 807.24 397.5C807.3 404.17 807.27 410.83 807.25 417.5C807.15 451.5 807.23 485.5 807.25 519.5C807.26 529.5 807.29 539.5 807.27 549.5C807.26 554.33 807.43 559.18 801.47 559.66C797.97 559.94 791 560.91 788.25 558.23C786.05 556.09 786.66 552.28 786.64 549.5C786.6 542.17 786.66 534.83 786.64 527.5C786.54 494.5 786.59 461.5 786.65 428.5C786.67 418.17 786.7 407.83 786.62 397.5C786.59 393.48 786.61 388.22 791.59 387.27ZM1047.5 490.33C1049.96 490.3 1052.92 490.63 1055.26 489.73C1058.8 488.37 1065.75 479.23 1068.61 476.12C1077.64 466.3 1086.84 456.19 1096.5 447C1100.43 443.26 1119.54 442.69 1123.5 445.8C1123.66 451.35 1115.32 457.13 1111.53 461.04C1099.51 473.43 1087.04 485.6 1075.57 498.5C1077.87 503.34 1082.73 507.17 1086.35 511.17C1095.38 521.13 1104.32 531.19 1113.52 541C1115.75 543.37 1125.96 553.61 1126.66 555.81C1127.01 556.89 1126.75 557.43 1126.8 558.5C1123.25 560.55 1118.53 559.73 1114.5 559.69C1110.76 559.66 1106.1 560.51 1102.63 558.88C1098.64 557 1095.59 552.04 1092.65 548.84C1085.62 541.2 1078.7 533.45 1071.74 525.76C1063.43 516.58 1060.8 509.28 1046.79 512.5C1044.96 522.02 1046.59 534.66 1046.57 544.5C1046.57 548.23 1047.48 553.75 1045.59 557.14C1043.49 560.88 1026.82 562.35 1025.95 554.5C1024.58 542.11 1025.96 527.16 1025.95 514.5C1025.94 486.17 1025.87 457.83 1025.93 429.5C1025.95 418.83 1025.94 408.17 1025.9 397.5C1025.89 393.57 1025.68 388.29 1030.61 387.24C1032.49 386.84 1034.59 387.09 1036.5 387.09C1038.56 387.1 1040.88 386.81 1042.81 387.66C1048.5 390.17 1046.49 406.98 1046.51 412.56C1046.56 430.21 1046.47 447.85 1046.53 465.5C1046.56 473.31 1045.12 482.95 1047.5 490.33ZM844.74 395.34C862.3 390.41 870.21 415.48 853.62 421.22C835.59 427.47 827.09 400.31 844.74 395.34ZM463.67 441.41C471.92 440.68 480.11 442.01 487.94 444.53C494.65 446.69 500.51 450.23 506.18 454.35C510.98 457.84 514.79 462.48 518.32 467.22C546.74 505.4 518.83 560.06 472.5 563.08C464.08 563.63 455.77 562.3 447.8 559.63C440.61 557.23 433.85 553.39 428.12 548.4C387.12 512.7 410.35 446.13 463.67 441.41ZM938.73 441.43C964.07 438.8 988.77 454.5 996.81 478.63C1001.03 491.31 999.84 505.34 999.82 518.5C999.8 528.5 999.67 538.5 999.8 548.5C999.85 552.1 1000.71 557.37 996.66 559.21C994.79 560.06 992.49 559.69 990.5 559.67C987.56 559.65 983.54 560.44 981.08 558.44C978.66 556.48 979.13 553.29 979.15 550.5C979.17 544.5 979.16 538.5 979.16 532.5C979.15 506.82 985.32 474.05 954.7 463.73C950.67 462.38 946.75 461.96 942.5 462.04C938.21 462.13 934.22 463.12 930.27 464.75C909.54 473.31 908.83 490.84 908.83 510.5C908.83 519.5 908.79 528.5 908.78 537.5C908.78 543.14 909.77 549.73 908.6 555.26C907.36 561.17 892.64 561.43 889.51 557.98C887.34 555.6 888.08 551.45 888.05 548.5C887.98 539.83 888.06 531.17 888.07 522.5C888.08 510.07 886.92 496.94 889.34 484.69C894.17 460.27 914.52 443.93 938.73 441.43ZM370.81 444.44C378.29 443.39 385.96 443.92 393.5 443.91C396.8 443.91 400.83 443.49 403.26 446.23C405.44 448.69 404.78 452.49 404.76 455.5C404.75 457.24 404.95 459.11 404.32 460.76C401.95 466.94 387.89 464.88 382.5 464.89C368.82 464.9 356.04 469.36 350.54 483.06C345.38 495.93 347.67 523.81 347.69 538.5C347.7 543.73 349 550.79 347.34 555.78C345.69 560.75 334.22 560.97 330.2 559.33C326.24 557.72 327 552.92 327 549.5C327 540.5 326.98 531.5 327 522.5C327.02 510.28 326.04 497.62 328.16 485.54C331.95 463.92 349.33 447.47 370.81 444.44ZM632.82 448.5C630.99 452.96 625.86 456.37 622.98 460.46C622.01 461.84 620.99 464.11 619.29 464.68C614.01 466.44 601.31 464.28 594.65 465.33C578.59 467.86 566.31 480.49 563.75 496.48C562.92 501.66 563.12 506.77 564.57 511.83C566.29 517.82 569.39 523.27 573.67 527.82C584.18 538.98 597.17 538.99 611.5 539.08C626.5 539.17 640.93 539.33 651.61 527.14C656.22 521.88 659.71 515.44 660.73 508.46C661.28 504.62 660.22 499.75 661.65 496.17C663.77 490.82 677.12 490.22 680.29 494.22C682.78 497.37 681.9 502.8 681.67 506.5C680.91 518.95 675.64 530.73 667.69 540.21C651.84 559.1 633.43 559.88 610.5 559.75C595.85 559.66 582.93 559.16 570.01 551.47C529.05 527.1 536.59 463.2 580.88 447.43C593.12 443.07 605.72 444 618.5 443.95C623.82 443.92 630.4 442.77 632.82 448.5ZM672.17 556.5C672.3 555.53 672.1 554.9 672.51 553.96C673.37 551.95 676.41 550 677.9 548.38C680.43 545.62 682.15 542.33 684.5 539.46C697.35 538.01 711.53 541.69 723.35 534.86C748.05 520.57 750.19 485.59 725.32 470.15C716.44 464.64 706.56 464.92 696.5 464.91C681.72 464.89 667.28 463.66 655.36 473.89C648.93 479.41 644.84 487.35 643.27 495.62C642.39 500.25 644.05 506.55 640.99 510.49C636.17 516.71 623.36 514.7 622.14 506.47C618.6 482.48 637.65 455.23 659.96 447.48C671.89 443.34 684.08 443.97 696.5 443.96C712.53 443.94 727.02 445.31 740.35 455.09C776.51 481.63 768.28 540.25 726.62 556.17C714.11 560.95 700.63 559.64 687.5 559.74C682.23 559.78 675.73 561.11 672.17 556.5ZM843.71 444.37C848.02 443.53 856.53 442.92 858.52 447.96C860.51 453 859.14 467.45 859.13 473.5C859.09 492.83 859.08 512.17 859.13 531.5C859.15 538.17 859.16 544.83 859.1 551.5C859.07 555.16 858.76 558.98 854.37 559.61C850.62 560.16 841.54 561.12 839.26 557.25C836.93 553.29 838.56 539.46 838.55 534.5C838.47 514.17 838.44 493.83 838.52 473.5C838.55 467.55 837.15 452.54 839.22 447.7C839.97 445.93 841.87 444.73 843.71 444.37ZM461.77 462.42C418.77 469.25 416.23 530.16 458.13 541.44C464.19 543.07 470.34 543.03 476.49 541.92C517.97 534.45 519.66 475.76 479.83 463.58C474.06 461.82 467.74 461.46 461.77 462.42Z";
+var CROSSLINK_REPOSITORY = "https://github.com/jacobpowaza/crosslink";
+var CROSSLINK_ATTRIBUTION_TEXT = "Powered by";
+var CROSSLINK_ATTRIBUTION_LINK_TEXT = "Crosslink";
+var DEFAULT_ACCENT = "#38bdf8";
+var DEFAULT_DARK_BG = "#0b1120";
+var DEFAULT_LIGHT_BG = "#ffffff";
+var LOGO_MIN_CONTRAST = 3;
+var ATTRIBUTION_MIN_CONTRAST = 4.5;
+function parseColor(input) {
+  if (!input) return null;
+  const value = input.trim().toLowerCase();
+  const hex = value.match(/^#([0-9a-f]{3,8})$/);
+  if (hex) {
+    let digits = hex[1];
+    if (digits.length === 3 || digits.length === 4) {
+      digits = digits.slice(0, 3).split("").map((c) => c + c).join("");
+    }
+    if (digits.length < 6) return null;
+    return {
+      r: parseInt(digits.slice(0, 2), 16),
+      g: parseInt(digits.slice(2, 4), 16),
+      b: parseInt(digits.slice(4, 6), 16)
+    };
+  }
+  const rgb = value.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/);
+  if (rgb) {
+    return {
+      r: Math.min(255, Math.max(0, Number(rgb[1]))),
+      g: Math.min(255, Math.max(0, Number(rgb[2]))),
+      b: Math.min(255, Math.max(0, Number(rgb[3])))
+    };
+  }
+  return null;
+}
+function toHex({ r, g, b }) {
+  const part = (n) => Math.round(Math.min(255, Math.max(0, n))).toString(16).padStart(2, "0");
+  return `#${part(r)}${part(g)}${part(b)}`;
+}
+function relativeLuminance({ r, g, b }) {
+  const channel = (v) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function contrastRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const [hi, lo] = la >= lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function mix(a, b, amount) {
+  return {
+    r: a.r + (b.r - a.r) * amount,
+    g: a.g + (b.g - a.g) * amount,
+    b: a.b + (b.b - a.b) * amount
+  };
+}
+function ensureContrast(color, background, minRatio) {
+  if (contrastRatio(color, background) >= minRatio) return color;
+  const towards = relativeLuminance(background) > 0.4 ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 };
+  let best = color;
+  for (let step = 1; step <= 20; step += 1) {
+    const candidate = mix(color, towards, step / 20);
+    best = candidate;
+    if (contrastRatio(candidate, background) >= minRatio) return candidate;
+  }
+  return best;
+}
+function resolveCrosslinkTheme(theme = {}) {
+  const requestedBg = parseColor(theme.backgroundColor);
+  const appearance = theme.appearance === "light" || theme.appearance === "dark" ? theme.appearance : requestedBg ? relativeLuminance(requestedBg) > 0.4 ? "light" : "dark" : "dark";
+  const background = requestedBg ?? parseColor(appearance === "light" ? DEFAULT_LIGHT_BG : DEFAULT_DARK_BG);
+  const accent = parseColor(theme.accentColor) ?? parseColor(DEFAULT_ACCENT);
+  const text = parseColor(theme.textColor) ?? (appearance === "light" ? { r: 15, g: 23, b: 42 } : { r: 226, g: 232, b: 240 });
+  const surface = mix(background, appearance === "light" ? { r: 0, g: 0, b: 0 } : { r: 255, g: 255, b: 255 }, 0.06);
+  const muted = mix(text, background, 0.42);
+  const divider = mix(background, text, 0.18);
+  return {
+    appName: theme.appName?.trim() || "This app",
+    appIcon: theme.appIcon?.trim() || null,
+    accentColor: toHex(accent),
+    backgroundColor: toHex(background),
+    surfaceColor: toHex(surface),
+    textColor: toHex(text),
+    mutedColor: toHex(muted),
+    dividerColor: toHex(divider),
+    logoColor: toHex(ensureContrast(accent, background, LOGO_MIN_CONTRAST)),
+    attributionColor: toHex(ensureContrast(muted, background, ATTRIBUTION_MIN_CONTRAST)),
+    appearance
+  };
+}
+function cssSize(value, fallback) {
+  if (typeof value === "number") return `${value}px`;
+  return value || fallback;
+}
+function crosslinkLogoSvg(options = {}) {
+  const width = cssSize(options.width, "140px");
+  const style = `width:${width};height:auto;display:block;${options.color ? `color:${options.color};` : ""}${options.style ?? ""}`;
+  const className = options.className ? ` class="${options.className}"` : "";
+  const title = options.title ?? "Crosslink";
+  return [
+    `<svg viewBox="${CROSSLINK_LOGO_VIEWBOX}" fill="none" xmlns="http://www.w3.org/2000/svg"`,
+    ` role="img" aria-label="${title}"${className} style="${style}">`,
+    `<title>${title}</title>`,
+    `<path d="${CROSSLINK_LOGO_PATH}" fill="currentColor" fill-rule="evenodd"/>`,
+    `</svg>`
+  ].join("");
+}
+function createCrosslinkLogo(options = {}) {
+  const holder = document.createElement("span");
+  holder.className = "cl-logo-holder";
+  holder.style.cssText = "display:inline-flex;align-items:center";
+  holder.innerHTML = crosslinkLogoSvg(options);
+  return holder;
+}
+
+// src/ui/pairing-card.ts
+function resolvePairingCardTheme(theme) {
+  return resolveCrosslinkTheme({
+    ...theme,
+    backgroundColor: theme.backgroundColor ?? (theme.appearance === "light" ? "#ffffff" : "#000000")
+  });
+}
+var PAIRING_CARD_STYLES = `
+.cl-pair-card {
+  --cl-bg: #000000;
+  --cl-fg: #ffffff;
+  --cl-muted: #9a9a9a;
+  --cl-divider: #2a2a2a;
+  --cl-pill: #e7e7ea;
+  --cl-pill-text: #0a0a0a;
+  --cl-border: 1px solid #000000;
+  --cl-radius: 28px;
+  --cl-accent: #38bdf8;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  background: var(--cl-bg);
+  color: var(--cl-fg);
+  border: var(--cl-border);
+  border-radius: var(--cl-radius);
+  padding: 28px 32px;
+  margin: 20px 0;
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: 1.1fr auto 1fr auto 1fr;
+  align-items: center;
+  gap: 28px 28px;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  text-align: left;
+}
+.cl-pair-card * {
+  box-sizing: border-box;
+}
+
+/* \u2500\u2500 Route summary in the settings popover \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cl-route-summary {
+  border-top: 1px solid var(--cl-divider);
+  margin-top: 6px;
+  padding: 8px 12px 4px;
+  color: var(--cl-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+.cl-route-summary p {
+  margin: 0 0 4px;
+}
+
+/* \u2500\u2500 Cog Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cl-cog-btn {
+  position: absolute;
+  top: 14px;
+  right: 16px;
+  background: transparent;
+  border: none;
+  color: var(--cl-muted);
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, background 0.15s;
+  z-index: 20;
+}
+.cl-cog-btn:hover {
+  color: var(--cl-fg);
+  background: rgba(255, 255, 255, 0.1);
+}
+.cl-cog-btn svg {
+  width: 17px;
+  height: 17px;
+  display: block;
+}
+
+/* \u2500\u2500 Small Dropdown Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2500\u2500 Pending state while a setting is applied \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* A mode change is a round trip to the host \u2014 it asks a router for a mapping,
+   or re-derives which routes to advertise \u2014 so the popover says it is working
+   rather than looking like the click did nothing. */
+.cl-spinner {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  display: inline-block;
+  flex-shrink: 0;
+  animation: clSpin 0.7s linear infinite;
+}
+@keyframes clSpin {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cl-spinner { animation-duration: 2.4s; }
+  .cl-pair-refresh[data-busy="true"]::before { animation-duration: 2.4s; }
+}
+.cl-mode-pending {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--cl-muted);
+}
+.cl-mode-pending[hidden] {
+  display: none;
+}
+/* Inputs stay in the DOM and keep their checked state; they simply refuse a
+   second change until the first one has an answer. */
+.cl-settings-dropdown[data-pending="true"] .cl-dropdown-item {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.cl-pair-refresh[data-busy="true"]::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  vertical-align: -2px;
+  animation: clSpin 0.7s linear infinite;
+}
+
+.cl-settings-dropdown {
+  position: absolute;
+  top: 44px;
+  right: 14px;
+  width: 300px;
+  background: var(--cl-bg);
+  border: 1px solid var(--cl-divider);
+  border-radius: 12px;
+  padding: 8px;
+  z-index: 30;
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
+  animation: clDropdownFade 0.12s ease-out;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.cl-settings-dropdown[hidden] {
+  display: none;
+}
+@keyframes clDropdownFade {
+  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.cl-dropdown-header {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--cl-muted);
+  padding: 6px 8px 4px 8px;
+}
+.cl-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--cl-fg);
+  transition: background 0.12s;
+  position: relative;
+  user-select: none;
+}
+.cl-dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+.cl-dropdown-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+.cl-dropdown-label input[type="radio"] {
+  accent-color: var(--cl-accent);
+  cursor: pointer;
+  margin: 0;
+}
+.cl-info-knob-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cl-info-knob {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  color: var(--cl-muted);
+  font-size: 11px;
+  font-weight: 700;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.15s, color 0.15s;
+}
+.cl-info-knob:hover,
+.cl-info-knob:focus {
+  background: var(--cl-accent);
+  color: #082f49;
+}
+/* Tooltip on hover / focus */
+.cl-dropdown-tooltip {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  width: 250px;
+  background: #020617;
+  border: 1px solid var(--cl-divider);
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 11px;
+  line-height: 1.45;
+  color: #cbd5e1;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-2px);
+  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
+  z-index: 50;
+}
+.cl-info-knob-wrap:hover .cl-dropdown-tooltip,
+.cl-info-knob-wrap:focus-within .cl-dropdown-tooltip {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+.cl-dropdown-tooltip a {
+  color: var(--cl-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  display: inline-block;
+  margin-top: 6px;
+}
+
+/* \u2500\u2500 Columns \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cl-pair-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.cl-pair-logo {
+  height: 24px;
+  width: auto;
+  max-width: 140px;
+  display: block;
+  /* Contrast-corrected in resolveCrosslinkTheme; currentColor carries it
+     into the SVG path so one variable tints the whole mark. */
+  color: var(--cl-logo, var(--cl-fg));
+}
+.cl-pair-logo-wrap {
+  margin-bottom: 10px;
+}
+.cl-pair-app {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.cl-pair-app[hidden] {
+  display: none;
+}
+.cl-pair-app-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  object-fit: cover;
+  display: block;
+  flex-shrink: 0;
+}
+.cl-pair-app-icon svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+.cl-pair-app-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--cl-fg);
+  letter-spacing: -0.01em;
+}
+.cl-pair-status {
+  font-size: 11px;
+  color: var(--cl-muted);
+  margin: 8px 0 0 0;
+  text-align: center;
+  min-height: 14px;
+}
+.cl-pair-status[hidden] {
+  display: none;
+}
+.cl-pair-status-on {
+  color: #4ade80;
+  font-weight: 600;
+}
+.cl-pair-blurb {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--cl-muted);
+  max-width: 32ch;
+  margin: 0;
+}
+.cl-pair-blurb strong {
+  color: var(--cl-fg);
+  font-weight: 600;
+}
+.cl-pair-refresh {
+  appearance: none;
+  background: none;
+  border: none;
+  color: var(--cl-muted);
+  font: inherit;
+  font-size: 12px;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  padding: 0;
+  margin-top: 14px;
+  transition: color 0.15s;
+}
+.cl-pair-refresh:hover {
+  color: var(--cl-fg);
+}
+.cl-pair-refresh:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.cl-pair-divider {
+  width: 1px;
+  align-self: stretch;
+  background: var(--cl-divider);
+}
+.cl-pair-label {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: none;
+  color: var(--cl-fg);
+  margin: 0 0 14px 0;
+  text-align: center;
+}
+.cl-pair-center,
+.cl-pair-right {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.cl-qr-wrap {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 12px;
+  min-width: 176px;
+  min-height: 176px;
+  width: 176px;
+  height: 176px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.cl-qr-wrap svg {
+  width: 152px;
+  height: 152px;
+  display: block;
+}
+.cl-qr-wrap img {
+  width: 152px;
+  height: 152px;
+  display: block;
+  border-radius: 8px;
+}
+.cl-qr-placeholder {
+  color: #6b6b6b;
+  font-size: 12px;
+  text-align: center;
+  max-width: 140px;
+  line-height: 1.4;
+}
+.cl-qr-placeholder.cl-error {
+  color: #f87171;
+}
+.cl-error-code {
+  color: #991b1b;
+  font: 700 18px/1.2 "SF Mono", "Fira Code", monospace;
+  letter-spacing: 0.04em;
+}
+.cl-error-details-btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: #334155;
+  cursor: pointer;
+  font: 600 11px/1.2 inherit;
+  padding: 6px;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.cl-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: #e2e8f0;
+}
+.cl-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
+  animation: clSkeletonSweep 1.35s ease-in-out infinite;
+}
+.cl-qr-skeleton {
+  width: 132px;
+  height: 132px;
+  border-radius: 10px;
+}
+.cl-pill.cl-pill-skeleton {
+  min-width: 44px;
+  height: 52px;
+  padding: 0;
+}
+@keyframes clSkeletonSweep {
+  100% { transform: translateX(100%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cl-skeleton::after { animation: none; }
+}
+.cl-pair-code-pills {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  max-width: 200px;
+  justify-content: center;
+  min-height: 44px;
+  align-items: center;
+}
+.cl-pair-code-pills .cl-pill {
+  background: var(--cl-pill);
+  color: var(--cl-pill-text);
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+  border-radius: 12px;
+  padding: 14px 8px;
+  min-width: 44px;
+  text-align: center;
+  display: block;
+}
+.cl-pair-hint {
+  font-size: 11px;
+  color: var(--cl-muted);
+  margin: 12px 0 0 0;
+  text-align: center;
+}
+@media (max-width: 860px) {
+  .cl-pair-card {
+    grid-template-columns: 1fr;
+    text-align: center;
+    padding: 20px 24px;
+    gap: 20px;
+  }
+  .cl-pair-left,
+  .cl-pair-center,
+  .cl-pair-right {
+    min-width: 0;
+  }
+  .cl-pair-left {
+    align-items: center;
+  }
+  .cl-pair-card .cl-pair-divider {
+    width: 100%;
+    height: 1px;
+  }
+  .cl-pair-logo {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .cl-pair-blurb {
+    max-width: none;
+    overflow-wrap: anywhere;
+  }
+}
+
+/* \u2500\u2500 Connected Devices Modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cl-connected-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.75);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: clDropdownFade 0.15s ease-out;
+}
+.cl-error-modal {
+  max-width: 480px;
+}
+.cl-error-modal code {
+  color: #fca5a5;
+  font-size: 12px;
+}
+.cl-error-modal p {
+  color: #cbd5e1;
+  font-size: 13px;
+  line-height: 1.55;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.cl-connected-modal {
+  background: #0a0a0a;
+  border: 1px solid var(--cl-divider);
+  border-radius: 20px;
+  width: 92vw;
+  max-width: 640px;
+  max-height: 85vh;
+  padding: 24px 28px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
+  overflow-y: auto;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: var(--cl-fg);
+}
+.cl-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  gap: 16px;
+}
+.cl-modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.cl-modal-header button {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--cl-divider);
+  border-radius: 10px;
+  color: var(--cl-fg);
+  font-size: 20px;
+  line-height: 1;
+  padding: 4px 10px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.cl-modal-header button:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+.cl-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.cl-modal-error {
+  color: #f87171;
+  font-size: 12px;
+  padding: 8px 0;
+}
+.cl-device-card {
+  background: #121212;
+  border: 1px solid var(--cl-divider);
+  border-radius: 14px;
+  padding: 16px 18px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.cl-device-info {
+  flex: 1;
+  min-width: 0;
+}
+.cl-device-name {
+  font-weight: 600;
+  font-size: 15px;
+  margin-bottom: 4px;
+  letter-spacing: -0.01em;
+}
+.cl-device-meta {
+  font-size: 11px;
+  color: var(--cl-muted);
+  margin-bottom: 8px;
+  text-transform: capitalize;
+}
+.cl-device-detail {
+  font-size: 11px;
+  line-height: 1.5;
+  color: #c4c4c4;
+}
+.cl-device-detail strong {
+  color: var(--cl-muted);
+  font-weight: 600;
+}
+.cl-device-actions {
+  flex-shrink: 0;
+}
+.cl-revoke-btn {
+  background: #1a1a2e;
+  border: 1px solid #2a2a3a;
+  color: #e7e7ea;
+  border-radius: 8px;
+  padding: 7px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.cl-revoke-btn:hover {
+  background: #7f1d1d;
+  border-color: #f87171;
+  color: #f87171;
+}
+`.trim();
+var stylesInjected = false;
+function injectPairingCardStyles() {
+  if (stylesInjected || typeof document === "undefined") return;
+  const styleEl = document.createElement("style");
+  styleEl.id = "crosslink-pairing-card-styles";
+  styleEl.textContent = PAIRING_CARD_STYLES;
+  document.head.appendChild(styleEl);
+  stylesInjected = true;
+}
+var PairingCard = class {
+  element;
+  options;
+  logoEl;
+  blurbEl;
+  refreshBtn;
+  qrWrapEl;
+  codePillsEl;
+  hintEl;
+  settingsPopover;
+  routeSummaryEl;
+  modePendingEl;
+  appRowEl;
+  statusEl;
+  brand;
+  currentMode;
+  expiryTimer = null;
+  source = null;
+  refreshTimer = null;
+  unsubscribeSource = null;
+  destroyed = false;
+  inFlight = null;
+  refreshQueued = false;
+  connectedDevices = /* @__PURE__ */ new Set();
+  constructor(options = {}) {
+    this.options = options;
+    this.brand = resolvePairingCardTheme({
+      appName: options.appName,
+      appIcon: options.appIcon,
+      ...options.brand
+    });
+    this.currentMode = normalizeNetworkMode(options.networkMode);
+    if (options.injectStyles !== false) {
+      injectPairingCardStyles();
+    }
+    this.element = document.createElement("div");
+    this.element.className = "cl-pair-card";
+    this.applyBrand();
+    this.applyTheme(options.theme);
+    const cogBtn = document.createElement("button");
+    cogBtn.className = "cl-cog-btn";
+    cogBtn.title = "Connection Settings";
+    cogBtn.setAttribute("aria-label", "Connection Settings");
+    cogBtn.innerHTML = `
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="3"/>
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+      </svg>
+    `;
+    cogBtn.addEventListener("click", () => this.toggleSettings());
+    this.settingsPopover = this.createSettingsPopover();
+    const left = document.createElement("div");
+    left.className = "cl-pair-left";
+    this.logoEl = document.createElement("div");
+    this.logoEl.className = "cl-pair-logo-wrap";
+    this.renderBrandMark();
+    this.appRowEl = document.createElement("div");
+    this.appRowEl.className = "cl-pair-app";
+    this.renderAppRow();
+    this.blurbEl = document.createElement("p");
+    this.blurbEl.className = "cl-pair-blurb";
+    this.blurbEl.innerHTML = options.blurb ?? `<strong>Connect another device</strong> with Crosslink. The framework authenticates trusted devices and protects application data end to end across supported transports.`;
+    this.refreshBtn = document.createElement("button");
+    this.refreshBtn.className = "cl-pair-refresh";
+    this.refreshBtn.textContent = "Refresh code";
+    this.refreshBtn.addEventListener("click", () => void this.refresh());
+    left.appendChild(this.logoEl);
+    left.appendChild(this.blurbEl);
+    left.appendChild(this.refreshBtn);
+    const div1 = document.createElement("div");
+    div1.className = "cl-pair-divider";
+    const center = document.createElement("div");
+    center.className = "cl-pair-center";
+    const qrLabel = document.createElement("h3");
+    qrLabel.className = "cl-pair-label";
+    qrLabel.textContent = "Scan this on your device";
+    this.qrWrapEl = document.createElement("div");
+    this.qrWrapEl.className = "cl-qr-wrap";
+    this.renderQr(options.qr);
+    center.appendChild(this.appRowEl);
+    center.appendChild(qrLabel);
+    center.appendChild(this.qrWrapEl);
+    const div2 = document.createElement("div");
+    div2.className = "cl-pair-divider";
+    const right = document.createElement("div");
+    right.className = "cl-pair-right";
+    const codeLabel = document.createElement("h3");
+    codeLabel.className = "cl-pair-label";
+    codeLabel.textContent = "Pairing Code";
+    this.codePillsEl = document.createElement("div");
+    this.codePillsEl.className = "cl-pair-code-pills";
+    this.renderCode(options.code);
+    this.hintEl = document.createElement("p");
+    this.hintEl.className = "cl-pair-hint";
+    this.renderExpiry(options.expiresAt);
+    this.statusEl = document.createElement("p");
+    this.statusEl.className = "cl-pair-status";
+    this.statusEl.setAttribute("role", "status");
+    this.statusEl.setAttribute("aria-live", "polite");
+    this.renderStatus(options.status ?? null, false);
+    right.appendChild(codeLabel);
+    right.appendChild(this.codePillsEl);
+    right.appendChild(this.hintEl);
+    right.appendChild(this.statusEl);
+    this.element.appendChild(cogBtn);
+    this.element.appendChild(this.settingsPopover);
+    this.element.appendChild(left);
+    this.element.appendChild(div1);
+    this.element.appendChild(center);
+    this.element.appendChild(div2);
+    this.element.appendChild(right);
+    if (options.target) {
+      this.mount(options.target);
+    }
+    if (typeof document !== "undefined" && typeof document.addEventListener === "function") {
+      document.addEventListener("click", (e) => {
+        if (!this.element.contains(e.target)) {
+          this.toggleSettings(false);
+        }
+      });
+    }
+    if (options.source !== false) this.attachSource(options.source ?? true);
+  }
+  /* ------------------- self-driving session lifecycle ------------------ */
+  /**
+   * Connects the card to a session source and starts the loop.
+   *
+   * Called from the constructor when `options.source` is set. Split out so a
+   * card built before its transport exists — an Electron renderer waiting for
+   * a preload bridge, say — can start driving later without a second class.
+   */
+  attachSource(source) {
+    this.source = typeof source === "object" ? source : createHttpPairingSource(source === true ? void 0 : source);
+    this.options.devicesEndpoint ??= this.source.devicesEndpoint;
+    this.options.revokeEndpoint ??= this.source.revokeEndpoint;
+    this.unsubscribeSource = this.source.subscribe?.((event) => this.handleSourceEvent(event)) ?? null;
+    void this.refresh();
+  }
+  /**
+   * Mints a fresh pairing session and renders it.
+   *
+   * Concurrent calls collapse onto the one in flight. The expiry timer, the
+   * refresh button and a host-side invalidation can all fire inside the same
+   * second, and three codes minted back to back would invalidate two of them
+   * before anybody could finish scanning.
+   *
+   * Collapsing cannot simply drop the extra calls, though. A request that
+   * arrives mid-flight may be the one that matters — the host reporting that a
+   * device just redeemed the code being minted — so it is remembered and run
+   * once the current mint settles, leaving the card showing a live code rather
+   * than one that is already spent.
+   */
+  async refresh() {
+    if (!this.source) {
+      await this.handleRefresh();
+      return;
+    }
+    if (this.destroyed) return;
+    if (this.inFlight) {
+      this.refreshQueued = true;
+      return this.inFlight;
+    }
+    this.inFlight = this.mintSession().finally(() => {
+      this.inFlight = null;
+      if (this.refreshQueued && !this.destroyed) {
+        this.refreshQueued = false;
+        void this.refresh();
+      }
+    });
+    return this.inFlight;
+  }
+  async mintSession() {
+    const source = this.source;
+    if (!source) return;
+    this.clearRefreshTimer();
+    this.update({ loading: true, error: null });
+    try {
+      const session = await source.getSession(this.currentMode);
+      if (this.destroyed) return;
+      if (session.application) this.adoptHostApplication(session.application);
+      if (session.networkMode) this.currentMode = normalizeNetworkMode(session.networkMode);
+      this.update({
+        loading: false,
+        error: null,
+        qr: session.qrSvg ?? null,
+        code: session.code,
+        expiresAt: session.expiresAt,
+        networkMode: this.currentMode,
+        endpoints: session.endpoints ?? null,
+        remoteNote: session.remoteNote ?? null,
+        status: this.sessionStatusText(),
+        connected: this.connectedDevices.size > 0
+      });
+      this.scheduleSessionRefresh(session.expiresAt);
+      this.options.onSession?.(session);
+    } catch (err) {
+      if (this.destroyed) return;
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.update({
+        loading: false,
+        error: error.message || "Crosslink could not create a pairing code.",
+        errorCode: error.code ?? "CL-P001"
+      });
+      this.options.onError?.(error);
+      this.refreshTimer = setTimeout(() => void this.refresh(), 5e3);
+    }
+  }
+  /**
+   * Takes the application's identity from the host.
+   *
+   * `createCrosslinkServer` is already configured with an `application` block —
+   * name, icon, accent, background — so a page that mounts the card needs to
+   * repeat none of it. Options still win where they are given: an application
+   * that wants the pairing screen to differ from its host metadata says so
+   * explicitly, and nothing here overrides that.
+   */
+  adoptHostApplication(app) {
+    const explicit = {
+      appName: this.options.appName,
+      appIcon: this.options.appIcon,
+      ...this.options.brand
+    };
+    const merged = {
+      appName: explicit.appName ?? app.name,
+      appIcon: explicit.appIcon ?? app.icon ?? void 0,
+      accentColor: explicit.accentColor ?? app.accentColor,
+      backgroundColor: explicit.backgroundColor ?? app.backgroundColor,
+      textColor: explicit.textColor ?? app.textColor,
+      appearance: explicit.appearance ?? app.appearance
+    };
+    const resolved = resolvePairingCardTheme(merged);
+    if (JSON.stringify(resolved) === JSON.stringify(this.brand)) return;
+    this.brand = resolved;
+    this.applyBrand();
+    this.renderAppRow();
+  }
+  sessionStatusText() {
+    const count = this.connectedDevices.size;
+    if (count === 0) return "Waiting for a device to scan";
+    return count === 1 ? "Device connected" : `${count} devices connected`;
+  }
+  scheduleSessionRefresh(expiresAt) {
+    this.clearRefreshTimer();
+    const lead = (this.options.refreshLeadSeconds ?? 15) * 1e3;
+    const delay = Math.max(1e3, expiresAt - Date.now() - lead);
+    this.refreshTimer = setTimeout(() => void this.refresh(), delay);
+  }
+  clearRefreshTimer() {
+    if (this.refreshTimer !== null) {
+      clearTimeout(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+  }
+  handleSourceEvent(event) {
+    if (this.destroyed) return;
+    switch (event.type) {
+      case "invalidate":
+        void this.refresh();
+        break;
+      case "connected":
+        this.connectedDevices.add(event.deviceId ?? "device");
+        this.update({ status: this.sessionStatusText(), connected: true });
+        this.options.onDeviceConnected?.(event.deviceId);
+        break;
+      case "disconnected":
+        this.connectedDevices.delete(event.deviceId ?? "device");
+        this.update({
+          status: this.sessionStatusText(),
+          connected: this.connectedDevices.size > 0
+        });
+        break;
+    }
+  }
+  normalizeMode(mode) {
+    return normalizeNetworkMode(mode);
+  }
+  createSettingsPopover() {
+    const pop = document.createElement("div");
+    pop.className = "cl-settings-dropdown";
+    pop.hidden = true;
+    const remoteUrl = this.options.remoteGuideUrl || "https://crosslink.mintlify.site/guides/remote-access";
+    const secUrl = this.options.securityGuideUrl || "https://crosslink.mintlify.site/security/overview";
+    const lanUrl = this.options.lanGuideUrl || "https://crosslink.mintlify.site/guides/connection-modes";
+    const norm = this.normalizeMode(this.currentMode);
+    pop.innerHTML = `
+      <div class="cl-dropdown-header">Connection Mode</div>
+
+      <!-- Automatic (default) -->
+      <label class="cl-dropdown-item">
+        <div class="cl-dropdown-label">
+          <input type="radio" name="cl-net-mode" value="auto" ${norm === "auto" ? "checked" : ""}>
+          <span>Automatic</span>
+        </div>
+        <div class="cl-info-knob-wrap">
+          <button type="button" class="cl-info-knob" aria-label="Info">&#8505;</button>
+          <div class="cl-dropdown-tooltip">
+            <strong>How it works:</strong> The pairing payload carries every available route, and the connecting device picks the first one that answers &mdash; local first, then other confirmed routes.<br>
+            <strong>Security:</strong> Crosslink authenticates devices and encrypts application data end to end whichever route wins.
+            <a href="${lanUrl}" target="_blank" rel="noopener noreferrer">Mintlify docs &rarr;</a>
+          </div>
+        </div>
+      </label>
+
+      <!-- Same network only -->
+      <label class="cl-dropdown-item">
+        <div class="cl-dropdown-label">
+          <input type="radio" name="cl-net-mode" value="local-only" ${norm === "local-only" ? "checked" : ""}>
+          <span>Same network only</span>
+        </div>
+        <div class="cl-info-knob-wrap">
+          <button type="button" class="cl-info-knob" aria-label="Info">&#8505;</button>
+          <div class="cl-dropdown-tooltip">
+            <strong>How it works:</strong> Direct connection on the current Wi-Fi or LAN. No remote transport is advertised.<br>
+            <strong>Security:</strong> The same Crosslink authentication and end-to-end encryption apply on the local link.
+            <a href="${lanUrl}" target="_blank" rel="noopener noreferrer">Mintlify docs &rarr;</a>
+          </div>
+        </div>
+      </label>
+
+      <!-- LAN + relay -->
+      <label class="cl-dropdown-item">
+        <div class="cl-dropdown-label">
+          <input type="radio" name="cl-net-mode" value="lan-and-relay" ${norm === "lan-and-relay" ? "checked" : ""}>
+          <span>Same network + relay</span>
+        </div>
+        <div class="cl-info-knob-wrap">
+          <button type="button" class="cl-info-knob" aria-label="Info">&#8505;</button>
+          <div class="cl-dropdown-tooltip">
+            <strong>How it works:</strong> Adds a configured relay so another device can reach the host when a direct local route is unavailable.<br>
+            <strong>Security:</strong> Crosslink encrypts application data before it reaches the relay and authenticates it at the destination.
+            <a href="${secUrl}" target="_blank" rel="noopener noreferrer">Mintlify docs &rarr;</a>
+          </div>
+        </div>
+      </label>
+
+      <!-- Remote -->
+      <label class="cl-dropdown-item">
+        <div class="cl-dropdown-label">
+          <input type="radio" name="cl-net-mode" value="remote" ${norm === "remote" ? "checked" : ""}>
+          <span>Reachable from anywhere</span>
+        </div>
+        <div class="cl-info-knob-wrap">
+          <button type="button" class="cl-info-knob" aria-label="Info">&#8505;</button>
+          <div class="cl-dropdown-tooltip">
+            <strong>How it works:</strong> Advertises a confirmed internet route, such as a router mapping or configured tunnel. If none is available, Crosslink reports that instead of claiming remote reachability.<br>
+            <strong>Security:</strong> The framework keeps device authentication and end-to-end encryption in place on the public route.
+            <a href="${remoteUrl}" target="_blank" rel="noopener noreferrer">Mintlify docs &rarr;</a>
+          </div>
+        </div>
+      </label>
+    `;
+    this.modePendingEl = document.createElement("div");
+    this.modePendingEl.className = "cl-mode-pending";
+    this.modePendingEl.setAttribute("role", "status");
+    this.modePendingEl.setAttribute("aria-live", "polite");
+    this.modePendingEl.hidden = true;
+    const spinner = document.createElement("span");
+    spinner.className = "cl-spinner";
+    const pendingText = document.createElement("span");
+    pendingText.textContent = "Applying\u2026";
+    this.modePendingEl.append(spinner, pendingText);
+    pop.appendChild(this.modePendingEl);
+    this.routeSummaryEl = document.createElement("div");
+    this.routeSummaryEl.className = "cl-route-summary";
+    this.routeSummaryEl.hidden = true;
+    pop.appendChild(this.routeSummaryEl);
+    const radios = pop.querySelectorAll('input[name="cl-net-mode"]');
+    radios.forEach((r) => {
+      r.addEventListener("change", (e) => {
+        this.setNetworkMode(normalizeNetworkMode(e.target.value));
+      });
+    });
+    const devicesHeader = document.createElement("div");
+    devicesHeader.className = "cl-dropdown-header";
+    devicesHeader.style.marginTop = "4px";
+    devicesHeader.textContent = "Devices";
+    pop.appendChild(devicesHeader);
+    const devicesItem = document.createElement("label");
+    devicesItem.className = "cl-dropdown-item";
+    devicesItem.innerHTML = `
+      <div class="cl-dropdown-label">
+        <span>Connected Devices</span>
+      </div>
+    `;
+    devicesItem.addEventListener("click", () => this.openConnectedDevicesModal());
+    pop.appendChild(devicesItem);
+    return pop;
+  }
+  toggleSettings(open) {
+    const isHidden = this.settingsPopover.hidden;
+    const shouldOpen = open !== void 0 ? open : isHidden;
+    this.settingsPopover.hidden = !shouldOpen;
+  }
+  setNetworkMode(mode) {
+    const norm = this.normalizeMode(mode);
+    this.currentMode = norm;
+    try {
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem("crosslink.networkMode", norm);
+      }
+    } catch {
+    }
+    const radio = this.settingsPopover.querySelector(`input[value="${norm}"]`);
+    if (radio) radio.checked = true;
+    if (this.source) {
+      void this.applyNetworkMode(norm);
+      return;
+    }
+    if (this.options.onNetworkModeChange) {
+      this.options.onNetworkModeChange(norm);
+    }
+  }
+  async applyNetworkMode(mode) {
+    this.setSettingsPending(true);
+    try {
+      await this.source?.setNetworkMode?.(mode);
+      await this.options.onNetworkModeChange?.(mode);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.update({
+        loading: false,
+        error: error.message,
+        errorCode: error.code ?? "CL-P001"
+      });
+      this.options.onError?.(error);
+      this.setSettingsPending(false);
+      return;
+    }
+    try {
+      await this.refresh();
+    } finally {
+      this.setSettingsPending(false);
+    }
+  }
+  /**
+   * Shows the popover as busy and refuses further changes until it settles.
+   *
+   * The radios keep their state rather than being re-rendered: the user has
+   * already chosen, and the question is only whether the host agrees yet.
+   */
+  setSettingsPending(pending) {
+    this.modePendingEl.hidden = !pending;
+    if (pending) this.settingsPopover.setAttribute("data-pending", "true");
+    else this.settingsPopover.removeAttribute("data-pending");
+    this.settingsPopover.querySelectorAll('input[name="cl-net-mode"]').forEach((radio) => {
+      radio.disabled = pending;
+    });
+  }
+  getNetworkMode() {
+    return this.currentMode;
+  }
+  mount(target) {
+    const container = typeof target === "string" ? document.querySelector(target) : target;
+    if (!container) throw new Error(`PairingCard target element not found: ${String(target)}`);
+    container.appendChild(this.element);
+    return this;
+  }
+  update(state) {
+    if (state.loading) {
+      this.renderLoading();
+      this.refreshBtn.disabled = true;
+      this.refreshBtn.setAttribute("data-busy", "true");
+    } else {
+      this.refreshBtn.disabled = false;
+      this.refreshBtn.removeAttribute("data-busy");
+    }
+    if (state.networkMode) {
+      this.syncNetworkMode(normalizeNetworkMode(state.networkMode));
+    }
+    if (state.status !== void 0 || state.connected !== void 0) {
+      this.renderStatus(state.status ?? null, state.connected === true);
+    }
+    if (state.endpoints !== void 0 || state.remoteNote !== void 0) {
+      this.renderRoutes(state.endpoints ?? null, state.remoteNote ?? null);
+    }
+    if (state.error) {
+      this.renderError(state.errorCode || "CL-P001", state.error);
+      this.hintEl.textContent = "";
+      return this;
+    }
+    if (state.qr !== void 0) {
+      this.renderQr(state.qr);
+    }
+    if (state.code !== void 0) {
+      this.renderCode(state.code);
+    }
+    if (state.expiresAt !== void 0) {
+      this.renderExpiry(state.expiresAt);
+    }
+    return this;
+  }
+  applyTheme(theme) {
+    if (!theme) return this;
+    const style = this.element.style;
+    if (theme.bg) style.setProperty("--cl-bg", theme.bg);
+    if (theme.fg) style.setProperty("--cl-fg", theme.fg);
+    if (theme.muted) style.setProperty("--cl-muted", theme.muted);
+    if (theme.divider) style.setProperty("--cl-divider", theme.divider);
+    if (theme.pill) style.setProperty("--cl-pill", theme.pill);
+    if (theme.pillText) style.setProperty("--cl-pill-text", theme.pillText);
+    if (theme.border) style.setProperty("--cl-border", theme.border);
+    if (theme.radius) style.setProperty("--cl-radius", theme.radius);
+    return this;
+  }
+  setBlurb(html) {
+    this.blurbEl.innerHTML = html;
+    return this;
+  }
+  syncNetworkMode(mode) {
+    this.currentMode = mode;
+    const radio = this.settingsPopover.querySelector(`input[value="${mode}"]`);
+    if (radio) radio.checked = true;
+  }
+  /**
+   * Draws the Crosslink mark. It takes no argument on purpose: the mark is the
+   * one element of this card an application cannot swap out, so there is no
+   * code path here that renders something else in its place.
+   */
+  renderBrandMark() {
+    this.logoEl.replaceChildren();
+    this.logoEl.innerHTML = crosslinkLogoSvg({ className: "cl-pair-logo", width: "140px" });
+  }
+  /** The application's own icon and name, beside the framework mark. */
+  renderAppRow() {
+    this.appRowEl.replaceChildren();
+    const icon = this.brand.appIcon;
+    if (icon) {
+      if (icon.trim().startsWith("<svg")) {
+        const holder = document.createElement("span");
+        holder.className = "cl-pair-app-icon";
+        holder.innerHTML = icon;
+        this.appRowEl.appendChild(holder);
+      } else {
+        const img = document.createElement("img");
+        img.className = "cl-pair-app-icon";
+        img.src = icon;
+        img.alt = "";
+        this.appRowEl.appendChild(img);
+      }
+    }
+    const name = document.createElement("span");
+    name.className = "cl-pair-app-name";
+    name.textContent = this.brand.appName;
+    this.appRowEl.appendChild(name);
+    this.appRowEl.hidden = !icon && this.brand.appName === "This app";
+  }
+  renderStatus(status, connected) {
+    this.statusEl.textContent = status ?? "";
+    this.statusEl.hidden = !status;
+    this.statusEl.classList.toggle("cl-pair-status-on", connected);
+  }
+  /**
+   * Applies the application palette to the card's CSS variables.
+   *
+   * The mark inherits `--cl-logo`. On this card that is the card's own
+   * foreground rather than the application accent: the pairing card is a
+   * Crosslink surface, and drawing the wordmark in the app's colour reads as
+   * the application's logo instead of the framework's. The application accent
+   * still drives the card's own accented elements. `resolveCrosslinkTheme`
+   * derives the foreground from the background, so it clears contrast on a
+   * light card as well as a dark one.
+   */
+  applyBrand() {
+    const style = this.element.style;
+    style.setProperty("--cl-bg", this.brand.backgroundColor);
+    style.setProperty("--cl-fg", this.brand.textColor);
+    style.setProperty("--cl-muted", this.brand.mutedColor);
+    style.setProperty("--cl-divider", this.brand.dividerColor);
+    style.setProperty("--cl-accent", this.brand.accentColor);
+    style.setProperty("--cl-logo", this.brand.textColor);
+    style.setProperty("--cl-attribution", this.brand.attributionColor);
+    this.applyTheme(this.options.theme);
+  }
+  /** Re-themes a mounted card; the mark and attribution are unaffected. */
+  setBrand(brand) {
+    this.brand = resolvePairingCardTheme({ ...this.options.brand, ...brand });
+    this.applyBrand();
+    this.renderAppRow();
+    return this;
+  }
+  /** The palette actually in use, after contrast correction. */
+  getBrand() {
+    return this.brand;
+  }
+  renderQr(qr) {
+    this.qrWrapEl.replaceChildren();
+    if (!qr) {
+      this.renderQrSkeleton();
+      return;
+    }
+    if (qr.trim().startsWith("<svg")) {
+      this.qrWrapEl.innerHTML = qr;
+    } else {
+      const img = document.createElement("img");
+      img.src = qr;
+      img.alt = "Scan to pair";
+      this.qrWrapEl.appendChild(img);
+    }
+  }
+  renderCode(code) {
+    this.codePillsEl.replaceChildren();
+    if (!code) {
+      this.renderCodeSkeleton();
+      return;
+    }
+    const cleanDigits = String(code).replace(/\D/g, "");
+    for (const ch of cleanDigits) {
+      const span = document.createElement("span");
+      span.className = "cl-pill";
+      span.textContent = ch;
+      this.codePillsEl.appendChild(span);
+    }
+  }
+  renderLoading() {
+    this.renderQrSkeleton();
+    this.renderCodeSkeleton();
+    this.hintEl.textContent = "Generating a secure pairing code\u2026";
+  }
+  renderQrSkeleton() {
+    this.qrWrapEl.replaceChildren();
+    const skeleton = document.createElement("span");
+    skeleton.className = "cl-skeleton cl-qr-skeleton";
+    skeleton.setAttribute("aria-label", "Generating QR code");
+    this.qrWrapEl.appendChild(skeleton);
+  }
+  renderCodeSkeleton() {
+    this.codePillsEl.replaceChildren();
+    for (let index = 0; index < 9; index++) {
+      const skeleton = document.createElement("span");
+      skeleton.className = "cl-pill cl-pill-skeleton cl-skeleton";
+      skeleton.setAttribute("aria-hidden", "true");
+      this.codePillsEl.appendChild(skeleton);
+    }
+  }
+  renderError(code, message) {
+    this.qrWrapEl.replaceChildren();
+    this.codePillsEl.replaceChildren();
+    const shortCode = String(code).toUpperCase().replace(/[^A-Z0-9-]/g, "").slice(0, 12) || "CL-P001";
+    const wrap = document.createElement("div");
+    wrap.className = "cl-qr-placeholder cl-error";
+    const codeEl = document.createElement("div");
+    codeEl.className = "cl-error-code";
+    codeEl.textContent = shortCode;
+    const details = document.createElement("button");
+    details.type = "button";
+    details.className = "cl-error-details-btn";
+    details.textContent = "View details";
+    details.addEventListener("click", () => this.openErrorModal(shortCode, message));
+    wrap.append(codeEl, details);
+    this.qrWrapEl.appendChild(wrap);
+  }
+  openErrorModal(code, message) {
+    const backdrop = document.createElement("div");
+    backdrop.className = "cl-connected-modal-backdrop";
+    const modal = document.createElement("div");
+    modal.className = "cl-connected-modal cl-error-modal";
+    modal.setAttribute("role", "dialog");
+    modal.setAttribute("aria-modal", "true");
+    const header = document.createElement("div");
+    header.className = "cl-modal-header";
+    const title = document.createElement("h3");
+    title.textContent = "Pairing error";
+    const close = document.createElement("button");
+    close.type = "button";
+    close.setAttribute("aria-label", "Close error details");
+    close.innerHTML = "&times;";
+    close.addEventListener("click", () => backdrop.remove());
+    header.append(title, close);
+    const body = document.createElement("div");
+    body.className = "cl-modal-body";
+    const codeEl = document.createElement("code");
+    codeEl.textContent = code;
+    const messageEl = document.createElement("p");
+    messageEl.textContent = message;
+    body.append(codeEl, messageEl);
+    modal.append(header, body);
+    backdrop.appendChild(modal);
+    backdrop.addEventListener("click", (event) => {
+      if (event.target === backdrop) backdrop.remove();
+    });
+    document.body.appendChild(backdrop);
+    close.focus();
+  }
+  renderExpiry(expiresAt) {
+    clearInterval(this.expiryTimer);
+    if (!expiresAt) {
+      this.hintEl.textContent = "";
+      return;
+    }
+    if (typeof expiresAt === "string") {
+      this.hintEl.textContent = expiresAt;
+      return;
+    }
+    const updateCountdown = () => {
+      const remainingSec = Math.max(0, Math.round((expiresAt - Date.now()) / 1e3));
+      if (remainingSec <= 0) {
+        this.hintEl.textContent = "code expired \u2014 click refresh";
+        clearInterval(this.expiryTimer);
+      } else {
+        const mins = Math.floor(remainingSec / 60);
+        const secs = remainingSec % 60;
+        this.hintEl.textContent = mins > 0 ? `expires in ${mins}m ${secs}s` : `expires in ${secs}s`;
+      }
+    };
+    updateCountdown();
+    this.expiryTimer = setInterval(updateCountdown, 1e3);
+  }
+  /**
+   * Shows the routes the current QR advertises.
+   *
+   * Naming them is the honest version of a connectivity indicator: if the host
+   * asked for remote access and the router said no, there is simply no `wan`
+   * route in the list, and the note says why.
+   */
+  renderRoutes(endpoints, note) {
+    const el = this.routeSummaryEl;
+    const labels = {
+      lan: "this network",
+      wan: "the internet, directly",
+      sig: "a signaling service",
+      relay: "a relay service",
+      tunnel: "a provider tunnel"
+    };
+    el.replaceChildren();
+    const lines = [];
+    if (endpoints && endpoints.length > 0) {
+      lines.push(`Reachable over: ${endpoints.map((e) => labels[e.kind] ?? e.kind).join(", ")}.`);
+    } else if (endpoints) {
+      lines.push("This host currently advertises no route.");
+    }
+    if (note) lines.push(note);
+    el.hidden = lines.length === 0;
+    for (const line of lines) {
+      const p = document.createElement("p");
+      p.textContent = line;
+      el.appendChild(p);
+    }
+  }
+  async handleRefresh() {
+    if (this.options.onRefresh) {
+      this.refreshBtn.disabled = true;
+      try {
+        await this.options.onRefresh();
+      } finally {
+        this.refreshBtn.disabled = false;
+      }
+    }
+  }
+  async openConnectedDevicesModal() {
+    const endpoint = this.options.devicesEndpoint || "/api/devices";
+    try {
+      const res = await fetch(endpoint);
+      if (!res.ok) throw new Error(`Failed to fetch devices: ${res.status}`);
+      const data = await res.json();
+      const devices = (data.devices || data || []).filter((device) => typeof device.revokedAt !== "number");
+      this.renderConnectedDevicesModal(devices);
+    } catch (err) {
+      this.renderConnectedDevicesModal([], String(err?.message || err));
+    }
+  }
+  renderConnectedDevicesModal(devices, errorMsg) {
+    const existingBackdrop = document.querySelector(".cl-connected-modal-backdrop");
+    if (existingBackdrop) existingBackdrop.remove();
+    const backdrop = document.createElement("div");
+    backdrop.className = "cl-connected-modal-backdrop";
+    backdrop.style.cssText = "position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.75);z-index:100;display:flex;align-items:center;justify-content:center;animation:clDropdownFade 0.15s ease-out;";
+    const modal = document.createElement("div");
+    modal.className = "cl-connected-modal";
+    const header = document.createElement("div");
+    header.className = "cl-modal-header";
+    const title = document.createElement("h3");
+    title.textContent = "Connected Devices";
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.setAttribute("aria-label", "Close");
+    closeBtn.innerHTML = "&times;";
+    closeBtn.addEventListener("click", () => backdrop.remove());
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    const body = document.createElement("div");
+    body.className = "cl-modal-body";
+    if (errorMsg) {
+      const errorEl = document.createElement("div");
+      errorEl.className = "cl-modal-error";
+      errorEl.textContent = errorMsg;
+      body.appendChild(errorEl);
+    }
+    if (devices.length === 0 && !errorMsg) {
+      const emptyEl = document.createElement("p");
+      emptyEl.style.cssText = "color:var(--cl-muted);text-align:center;padding:20px 0;";
+      emptyEl.textContent = "No paired devices found.";
+      body.appendChild(emptyEl);
+    } else {
+      for (const dev of devices) {
+        const card = document.createElement("div");
+        card.className = "cl-device-card";
+        const statusText = dev.status || (dev.revokedAt ? "Revoked" : dev.lastConnected ? Date.now() - dev.lastConnected < 3e5 ? "Online" : "Offline" : "Unknown");
+        const statusColor = statusText === "Online" ? "#4ade80" : statusText === "Revoked" ? "#f87171" : "#9a9a9a";
+        const trustedText = dev.revokedAt ? "Not trusted" : "Trusted";
+        const firstPaired = dev.firstPaired ? new Date(dev.firstPaired).toLocaleString() : "Unknown";
+        const lastConnected = dev.lastConnected ? new Date(dev.lastConnected).toLocaleString() : "Never";
+        const info = document.createElement("div");
+        info.className = "cl-device-info";
+        const name = document.createElement("div");
+        name.className = "cl-device-name";
+        name.textContent = dev.name || "Unnamed Device";
+        const meta = document.createElement("div");
+        meta.className = "cl-device-meta";
+        meta.textContent = [dev.deviceType, dev.location].filter(Boolean).join(" \u2022 ");
+        const detail = document.createElement("div");
+        detail.className = "cl-device-detail";
+        const rows = [
+          ["Device ID", String(dev.deviceId ?? "")],
+          ["IP", dev.ipAddress || "Not available"],
+          ["First paired", firstPaired],
+          ["Last connected", lastConnected],
+          ["Status", statusText, statusColor],
+          ["Trusted", trustedText]
+        ];
+        for (const [label, value, color] of rows) {
+          const line = document.createElement("div");
+          const strong = document.createElement("strong");
+          strong.textContent = `${label}: `;
+          const val = document.createElement("span");
+          val.textContent = value;
+          if (color) val.style.cssText = `color:${color};font-weight:600;`;
+          line.append(strong, val);
+          detail.appendChild(line);
+        }
+        info.appendChild(name);
+        info.appendChild(meta);
+        info.appendChild(detail);
+        const actions = document.createElement("div");
+        actions.className = "cl-device-actions";
+        const revokeBtn = document.createElement("button");
+        revokeBtn.className = "cl-revoke-btn";
+        revokeBtn.textContent = "Revoke Access";
+        revokeBtn.addEventListener("click", async () => {
+          revokeBtn.disabled = true;
+          revokeBtn.textContent = "Revoking...";
+          try {
+            const revokeEndpoint = this.options.revokeEndpoint || "/api/revoke";
+            const res = await fetch(revokeEndpoint, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ deviceId: dev.deviceId })
+            });
+            const result = await res.json().catch(() => null);
+            if (!res.ok || result?.ok !== true) throw new Error("Revoke failed");
+            card.remove();
+          } catch (e) {
+            revokeBtn.textContent = "Failed";
+            revokeBtn.style.background = "#7f1d1d";
+          }
+        });
+        actions.appendChild(revokeBtn);
+        card.appendChild(info);
+        card.appendChild(actions);
+        body.appendChild(card);
+      }
+    }
+    modal.appendChild(header);
+    modal.appendChild(body);
+    backdrop.appendChild(modal);
+    document.body.appendChild(backdrop);
+    backdrop.addEventListener("click", (e) => {
+      if (e.target === backdrop) {
+        backdrop.remove();
+      }
+    });
+  }
+  destroy() {
+    this.destroyed = true;
+    this.refreshQueued = false;
+    clearInterval(this.expiryTimer);
+    this.clearRefreshTimer();
+    this.unsubscribeSource?.();
+    this.unsubscribeSource = null;
+    this.element.remove();
+  }
+};
+function normalizeNetworkMode(mode) {
+  switch (mode) {
+    case "local":
+    case "local-only":
+      return "local-only";
+    case "lan-and-relay":
+    case "relay":
+      return "lan-and-relay";
+    case "remote":
+    case "open-lan":
+    case "open-lan-remote":
+      return "remote";
+    // ngrok/cloudflared were provider tunnels, which are now an opt-in host
+    // configuration rather than a mode the user picks in the browser.
+    case "ngrok":
+    case "cloudflare":
+    case "cloudflared":
+    case "open-lan-cloudflared":
+      return "auto";
+    default:
+      return "auto";
+  }
+}
+function createPairingCard(options = {}) {
+  return new PairingCard(options);
+}
+
+// src/ui/powered-by-crosslink.ts
+function cssLength(value, fallback) {
+  if (typeof value === "number") return `${value}px`;
+  return value || fallback;
+}
+var PoweredByCrosslink = class {
+  element;
+  options;
+  constructor(options = {}) {
+    this.options = options;
+    this.element = document.createElement("div");
+    this.render();
+    if (options.target) this.mount(options.target);
+  }
+  mount(target = document.body) {
+    const container = typeof target === "string" ? document.querySelector(target) : target;
+    if (!container) throw new Error(`PoweredByCrosslink target not found: ${String(target)}`);
+    if (this.element.parentElement !== container) container.appendChild(this.element);
+    return this;
+  }
+  update(options) {
+    this.options = { ...this.options, ...options };
+    this.render();
+    return this;
+  }
+  destroy() {
+    this.element.remove();
+  }
+  render() {
+    const placement = this.options.placement ?? "bottom-center";
+    const offset = cssLength(this.options.offset, "8px");
+    const size = cssLength(this.options.size, "11px");
+    const position = [];
+    if (placement !== "inline") {
+      position.push("position:fixed", `z-index:${this.options.zIndex ?? 100002}`);
+      if (placement.startsWith("top")) position.push(`top:calc(${offset} + env(safe-area-inset-top))`);
+      else position.push(`bottom:calc(${offset} + env(safe-area-inset-bottom))`);
+      if (placement.endsWith("left")) position.push(`left:${offset}`);
+      else if (placement.endsWith("right")) position.push(`right:${offset}`);
+      else position.push("left:50%", "transform:translateX(-50%)");
+    }
+    this.element.className = `cl-powered-by-crosslink${this.options.className ? ` ${this.options.className}` : ""}`;
+    this.element.style.cssText = [
+      ...position,
+      "display:inline-flex",
+      "align-items:center",
+      "gap:.32em",
+      "max-width:calc(100vw - 24px)",
+      "padding:4px 7px",
+      "border-radius:999px",
+      `background:${this.options.background ?? "rgba(0,0,0,.58)"}`,
+      `color:${this.options.color ?? "#94a3b8"}`,
+      `font:${size}/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif`,
+      "white-space:nowrap",
+      "box-sizing:border-box"
+    ].join(";");
+    this.element.textContent = "";
+    const brand = resolveCrosslinkTheme({
+      accentColor: this.options.accentColor,
+      backgroundColor: this.options.backgroundColor ?? this.options.background
+    });
+    const prefix = document.createElement("span");
+    prefix.textContent = this.options.text ?? CROSSLINK_ATTRIBUTION_TEXT;
+    const link = document.createElement("a");
+    link.href = CROSSLINK_REPOSITORY;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.setAttribute("aria-label", CROSSLINK_ATTRIBUTION_LINK_TEXT);
+    link.style.cssText = "color:inherit;display:inline-flex;align-items:center;text-decoration:none";
+    link.innerHTML = crosslinkLogoSvg({
+      width: cssLength(this.options.logoWidth, "58px"),
+      color: this.options.accentColor ? brand.logoColor : void 0,
+      title: CROSSLINK_ATTRIBUTION_LINK_TEXT
+    });
+    this.element.append(prefix, link);
+    if (this.options.suffix) {
+      const suffix = document.createElement("span");
+      suffix.textContent = this.options.suffix;
+      this.element.appendChild(suffix);
+    }
+  }
+};
+function createPoweredByCrosslink(options = {}) {
+  return new PoweredByCrosslink(options);
+}
+
+// src/offline/offline-shell.ts
+import {
+  toHttpUrl as toHttpUrl2
+} from "@crosslink/core";
+var DEFAULT_OFFLINE_CONFIG = {
+  title: "Trying to reconnect",
+  message: "Crosslink can't reach the app on your computer yet. We'll keep trying automatically.",
+  icon: "",
+  appName: "Crosslink",
+  themeColor: "#000000",
+  bgColor: "#000000",
+  accentColor: "",
+  textColor: "",
+  appearance: "auto",
+  debuggingUrl: "https://crosslink.mintlify.site/resources/debugging-mobile-reconnect"
+};
+var CrosslinkOfflineShell = class {
+  client;
+  options;
+  currentState = "connecting";
+  reachabilityTimer = null;
+  reconnectTimer = null;
+  visibilityHandler = null;
+  onlineHandler = null;
+  isPageVisible = true;
+  attemptCount = 0;
+  isAttempting = false;
+  offlineElement = null;
+  constructor(options) {
+    this.options = {
+      clientOptions: options.clientOptions,
+      offline: { ...DEFAULT_OFFLINE_CONFIG, ...options.offline },
+      onConnected: options.onConnected,
+      onAuthRequired: options.onAuthRequired,
+      onStateChange: options.onStateChange ?? (() => {
+      }),
+      minRetryDelay: options.minRetryDelay ?? 1e3,
+      maxRetryDelay: options.maxRetryDelay ?? 3e4,
+      reachabilityCheckInterval: options.reachabilityCheckInterval ?? 1e4,
+      serviceWorkerUrl: options.serviceWorkerUrl ?? "/sw.js",
+      autoRegisterServiceWorker: options.autoRegisterServiceWorker ?? true,
+      autoMountOfflineUI: options.autoMountOfflineUI ?? true,
+      container: options.container
+    };
+    if (options.client) {
+      this.client = options.client;
+    } else {
+      const origOnStateChange = options.clientOptions?.onStateChange;
+      const clientOpts = {
+        ...options.clientOptions,
+        onStateChange: (state, detail) => {
+          origOnStateChange?.(state, detail);
+          this.handleClientStateChange(state, detail);
+        }
+      };
+      this.client = new CrosslinkClient(clientOpts);
+    }
+    this.setupVisibilityHandlers();
+    this.setupOnlineHandler();
+  }
+  /**
+   * Initialize and start the offline shell. This should be called early
+   * in the PWA lifecycle, before attempting any connection.
+   */
+  async start() {
+    if (this.options.autoRegisterServiceWorker && typeof navigator !== "undefined" && "serviceWorker" in navigator) {
+      try {
+        await navigator.serviceWorker.register(this.options.serviceWorkerUrl);
+      } catch (e) {
+        console.warn("[OfflineShell] Service worker registration notice:", e);
+      }
+    }
+    const apps = this.client.listApps();
+    if (apps.length === 0) {
+      this.setState("authentication-required");
+      await this.options.onAuthRequired();
+      return;
+    }
+    await this.attemptSilentAuth(apps[0]);
+  }
+  /**
+   * Attempt silent cryptographic authentication with the paired host.
+   * This is the core "trusted device" flow - no user interaction required.
+   */
+  async attemptSilentAuth(app) {
+    if (this.isAttempting) return;
+    this.isAttempting = true;
+    if (this.currentState !== "reconnecting") {
+      this.setState("connecting");
+    }
+    try {
+      const rpc = await this.client.connect(app.appId);
+      this.isAttempting = false;
+      this.cancelTimers();
+      this.unmountOfflineUI();
+      this.setState("connected");
+      await this.options.onConnected(rpc, this.client);
+    } catch (err) {
+      this.isAttempting = false;
+      await this.handleConnectionError(err, app);
+    }
+  }
+  /**
+   * Handle connection state changes from underlying ClientLink.
+   */
+  handleClientStateChange(state, detail) {
+    if (state === "revoked" || state === "unauthorized") {
+      this.unmountOfflineUI();
+      this.cancelTimers();
+      this.setState("authentication-required", detail);
+      this.options.onAuthRequired();
+    } else if (state === "offline" && this.currentState === "connected") {
+      this.showHostOffline();
+    }
+  }
+  /**
+   * Handle connection errors and determine the correct state.
+   * Critical: distinguish between "host offline" vs "authentication required / revoked".
+   */
+  async handleConnectionError(err, app) {
+    const msg = String(err?.message ?? err ?? "").toLowerCase();
+    const clientState = this.client.state;
+    const isAuthFailure = msg.includes("revoked") || msg.includes("device_revoked") || msg.includes("device-revoked") || msg.includes("unauthorized") || msg.includes("not paired") || msg.includes("fingerprint") || msg.includes("signature invalid") || msg.includes("challenge nonce") || clientState === "revoked" || clientState === "unauthorized";
+    if (isAuthFailure) {
+      this.unmountOfflineUI();
+      this.cancelTimers();
+      this.setState("authentication-failed");
+      await this.options.onAuthRequired();
+      return;
+    }
+    this.showHostOffline();
+  }
+  /**
+   * Show the host-offline UI and start periodic reconnection attempts.
+   */
+  showHostOffline() {
+    this.setState("host-offline");
+    if (this.options.autoMountOfflineUI) {
+      this.mountOfflineUI();
+    }
+    this.scheduleReconnect();
+    this.startReachabilityChecks();
+  }
+  /**
+   * Schedule a reconnection attempt with exponential backoff and jitter.
+   */
+  scheduleReconnect() {
+    if (this.reconnectTimer) return;
+    const delay = Math.min(
+      this.options.maxRetryDelay,
+      this.options.minRetryDelay * Math.pow(1.5, Math.min(this.attemptCount, 8))
+    );
+    const jitter = delay * (0.8 + Math.random() * 0.4);
+    const delaySec = Math.max(1, Math.round(jitter / 1e3));
+    this.updateOfflineStatus(`Reconnecting in ${delaySec}s\u2026`);
+    this.reconnectTimer = setTimeout(async () => {
+      this.reconnectTimer = null;
+      this.attemptCount++;
+      await this.reconnectNow();
+    }, jitter);
+  }
+  /**
+   * Immediately trigger a silent reconnection attempt.
+   */
+  async reconnectNow() {
+    if (this.currentState === "connected" || this.isAttempting) return;
+    const apps = this.client.listApps();
+    if (apps.length === 0) {
+      this.setState("authentication-required");
+      await this.options.onAuthRequired();
+      return;
+    }
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.setState("reconnecting", { attempt: this.attemptCount });
+    this.updateOfflineStatus("Trying to reconnect\u2026");
+    await this.attemptSilentAuth(apps[0]);
+  }
+  /**
+   * Start periodic reachability checks while in host-offline state.
+   */
+  startReachabilityChecks() {
+    if (this.reachabilityTimer) return;
+    const check = async () => {
+      if (this.currentState !== "host-offline" && this.currentState !== "reconnecting") {
+        this.cancelReachabilityChecks();
+        return;
+      }
+      const apps = this.client.listApps();
+      if (apps.length === 0) return;
+      const result = await this.checkHostReachability(apps[0].appId);
+      if (result.reachable) {
+        this.cancelReachabilityChecks();
+        await this.reconnectNow();
+      }
+    };
+    this.reachabilityTimer = setInterval(check, this.options.reachabilityCheckInterval);
+  }
+  cancelReachabilityChecks() {
+    if (this.reachabilityTimer) {
+      clearInterval(this.reachabilityTimer);
+      this.reachabilityTimer = null;
+    }
+  }
+  /**
+   * Check if the host signaling/relay is reachable.
+   */
+  async checkHostReachability(appId) {
+    const hints = this.getHints(appId);
+    if (!hints) {
+      return { reachable: false };
+    }
+    if (hints.signalingUrl) {
+      try {
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 4e3);
+        const fetchFn = this.options.clientOptions?.fetch ?? globalThis.fetch;
+        const res = await fetchFn(`${toHttpUrl2(hints.signalingUrl).replace(/\/$/, "")}/apps/${encodeURIComponent(appId)}`, {
+          signal: controller.signal,
+          cache: "no-store"
+        });
+        clearTimeout(timeout);
+        if (res.ok) {
+          const data = await res.json().catch(() => ({}));
+          return {
+            reachable: true,
+            hostInfo: {
+              relay: data.relay,
+              lan: data.lan,
+              fingerprint: data.fingerprint
+            }
+          };
+        }
+      } catch {
+      }
+    }
+    return { reachable: false };
+  }
+  cancelTimers() {
+    this.cancelReachabilityChecks();
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.attemptCount = 0;
+  }
+  setState(state, detail) {
+    if (this.currentState !== state) {
+      this.currentState = state;
+      this.options.onStateChange(state, detail);
+    }
+  }
+  getHints(appId) {
+    try {
+      const hints = this.client.hints?.load?.({});
+      return hints?.[appId] ?? null;
+    } catch {
+      return null;
+    }
+  }
+  setupVisibilityHandlers() {
+    if (typeof document === "undefined") return;
+    this.visibilityHandler = () => {
+      this.isPageVisible = !document.hidden;
+      if (this.isPageVisible && (this.currentState === "host-offline" || this.currentState === "reconnecting")) {
+        this.reconnectNow().catch(() => {
+        });
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityHandler);
+  }
+  setupOnlineHandler() {
+    if (typeof window === "undefined") return;
+    this.onlineHandler = () => {
+      if (this.currentState === "host-offline" || this.currentState === "reconnecting") {
+        this.reconnectNow().catch(() => {
+        });
+      }
+    };
+    window.addEventListener("online", this.onlineHandler);
+  }
+  /**
+   * Mount the offline UI into the DOM
+   */
+  mountOfflineUI() {
+    if (typeof document === "undefined") return;
+    if (!this.offlineElement) {
+      const fullConfig = {
+        ...DEFAULT_OFFLINE_CONFIG,
+        ...this.options.offline
+      };
+      this.offlineElement = createOfflineUI(fullConfig, () => this.forceReconnect());
+    }
+    const container = this.options.container ?? document.body;
+    if (container && !container.contains(this.offlineElement)) {
+      container.appendChild(this.offlineElement);
+    }
+  }
+  /**
+   * Unmount the offline UI from the DOM
+   */
+  unmountOfflineUI() {
+    if (this.offlineElement && this.offlineElement.parentElement) {
+      this.offlineElement.remove();
+    }
+    this.offlineElement = null;
+  }
+  /**
+   * Update the status text shown in the offline UI
+   */
+  updateOfflineStatus(text) {
+    if (typeof document === "undefined") return;
+    const statusEl = document.getElementById("crosslink-offline-status");
+    if (statusEl) {
+      statusEl.textContent = text;
+    }
+  }
+  /**
+   * Get current connection state
+   */
+  getState() {
+    return this.currentState;
+  }
+  /**
+   * Force a reconnection attempt immediately (e.g. user taps "Retry")
+   */
+  async forceReconnect() {
+    this.attemptCount = 0;
+    await this.reconnectNow();
+  }
+  /**
+   * Clean up resources, event listeners, and timers
+   */
+  destroy() {
+    this.cancelTimers();
+    this.unmountOfflineUI();
+    if (typeof document !== "undefined" && this.visibilityHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityHandler);
+      this.visibilityHandler = null;
+    }
+    if (typeof window !== "undefined" && this.onlineHandler) {
+      window.removeEventListener("online", this.onlineHandler);
+      this.onlineHandler = null;
+    }
+  }
+  /**
+   * Get the underlying CrosslinkClient
+   */
+  getClient() {
+    return this.client;
+  }
+};
+function createOfflineUI(config, onRetry) {
+  const resolved = { ...DEFAULT_OFFLINE_CONFIG, ...config };
+  const brand = resolveCrosslinkTheme({
+    appName: resolved.appName,
+    appIcon: resolved.icon,
+    accentColor: resolved.accentColor || void 0,
+    backgroundColor: resolved.bgColor || void 0,
+    textColor: resolved.textColor || void 0,
+    appearance: resolved.appearance === "auto" ? void 0 : resolved.appearance
+  });
+  const container = document.createElement("div");
+  container.id = "crosslink-offline-shell";
+  container.style.cssText = `
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+    background: ${brand.backgroundColor};
+    color: ${brand.textColor};
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 32px 24px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    text-align: center;
+    box-sizing: border-box;
+    overflow: hidden;
+  `;
+  if (brand.appIcon) {
+    const icon = document.createElement("img");
+    icon.src = brand.appIcon;
+    icon.alt = "";
+    icon.style.cssText = "width:56px;height:56px;border-radius:14px;margin-bottom:18px;object-fit:cover";
+    container.appendChild(icon);
+  }
+  const appName = document.createElement("div");
+  appName.id = "crosslink-offline-appname";
+  appName.textContent = brand.appName;
+  appName.style.cssText = `font-size:13px;font-weight:600;letter-spacing:.02em;color:${brand.mutedColor};margin-bottom:16px`;
+  container.appendChild(appName);
+  const title = document.createElement("h1");
+  title.textContent = resolved.title || `${brand.appName} is unavailable`;
+  title.style.cssText = `
+    font-size: 21px;
+    font-weight: 700;
+    margin: 0 0 10px 0;
+    color: ${brand.textColor};
+    letter-spacing: -0.02em;
+  `;
+  container.appendChild(title);
+  const message = document.createElement("p");
+  message.style.cssText = `
+    color: ${brand.mutedColor};
+    font-size: 14px;
+    line-height: 1.55;
+    max-width: 300px;
+    margin: 0 0 28px 0;
+    white-space: pre-line;
+  `;
+  message.textContent = resolved.message || `Crosslink isn't currently able to reach the computer running ${brand.appName}.`;
+  container.appendChild(message);
+  const statusWrap = document.createElement("div");
+  statusWrap.style.cssText = `margin-bottom: 24px;`;
+  const status = document.createElement("span");
+  status.id = "crosslink-offline-status";
+  status.style.cssText = `color:${brand.mutedColor};font-size:13px;font-weight:400`;
+  status.textContent = "Trying to reconnect\u2026";
+  statusWrap.appendChild(status);
+  container.appendChild(statusWrap);
+  if (onRetry) {
+    const retryBtn = document.createElement("button");
+    retryBtn.textContent = "Attempt reopening the app";
+    retryBtn.style.cssText = `
+      background: ${brand.surfaceColor};
+      border: 1px solid ${brand.dividerColor};
+      color: ${brand.textColor};
+      padding: 8px 20px;
+      border-radius: 999px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s ease;
+    `;
+    retryBtn.onclick = () => {
+      onRetry();
+    };
+    container.appendChild(retryBtn);
+  }
+  const guide = document.createElement("a");
+  guide.href = resolved.debuggingUrl;
+  guide.target = "_blank";
+  guide.rel = "noopener noreferrer";
+  guide.textContent = "Still not working? Open the debugging guide";
+  guide.style.cssText = `color:${brand.mutedColor};font-size:12px;margin-top:18px;text-underline-offset:3px`;
+  container.appendChild(guide);
+  const brandFooter = document.createElement("div");
+  brandFooter.id = "crosslink-offline-brand";
+  brandFooter.style.cssText = "position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px";
+  const logoContainer = document.createElement("div");
+  logoContainer.style.cssText = "display:flex;justify-content:center;opacity:.95";
+  logoContainer.innerHTML = crosslinkLogoSvg({ width: "132px", color: brand.logoColor });
+  const attribution = document.createElement("div");
+  attribution.style.cssText = `font-size:11px;color:${brand.attributionColor}`;
+  const prefix = document.createElement("span");
+  prefix.textContent = `${CROSSLINK_ATTRIBUTION_TEXT} `;
+  const link = document.createElement("a");
+  link.href = CROSSLINK_REPOSITORY;
+  link.target = "_blank";
+  link.rel = "noopener noreferrer";
+  link.textContent = CROSSLINK_ATTRIBUTION_LINK_TEXT;
+  link.style.cssText = "color:inherit;font-weight:700;text-underline-offset:2px";
+  attribution.append(prefix, link);
+  brandFooter.append(logoContainer, attribution);
+  container.appendChild(brandFooter);
+  return container;
+}
+function updateOfflineStatus(text) {
+  if (typeof document === "undefined") return;
+  const status = document.getElementById("crosslink-offline-status");
+  if (status) status.textContent = text;
+}
+function removeOfflineUI() {
+  if (typeof document === "undefined") return;
+  const shell = document.getElementById("crosslink-offline-shell");
+  shell?.remove();
+}
+
+// src/offline/mobile-bootstrap.ts
+import {
+  linkPairingTarget,
+  normalPairingTarget as normalPairingTarget2,
+  parsePairingUri as parsePairingUri2,
+  unwrapBootstrapUri as unwrapBootstrapUri2,
+  BOOTSTRAP_FRAGMENT_KEY
+} from "@crosslink/core";
+
+// src/offline/environment.ts
+function isStandaloneDisplay() {
+  if (typeof window === "undefined") return false;
+  const iosStandalone = window.navigator.standalone === true;
+  const displayMode = typeof window.matchMedia === "function" && window.matchMedia("(display-mode: standalone)").matches;
+  return iosStandalone || displayMode;
+}
+function describeBootstrapEnvironment() {
+  if (typeof window === "undefined" || typeof location === "undefined") {
+    return {
+      origin: null,
+      secureContext: false,
+      serviceWorkerAvailable: false,
+      webCryptoAvailable: typeof crypto !== "undefined" && Boolean(crypto.subtle),
+      standalone: false,
+      installable: false,
+      insecureTransportBlocked: false,
+      limitations: []
+    };
+  }
+  const origin = location.origin && location.origin !== "null" ? location.origin : null;
+  const secureContext = window.isSecureContext === true;
+  const serviceWorkerAvailable = secureContext && typeof navigator !== "undefined" && "serviceWorker" in navigator;
+  const webCryptoAvailable = typeof crypto !== "undefined" && Boolean(crypto.subtle);
+  const insecureTransportBlocked = location.protocol === "https:";
+  const limitations = [];
+  if (!secureContext) {
+    limitations.push(
+      `${origin ?? "This origin"} is not a secure context, so the browser will not register a service worker: this device can pair and use the app, but it cannot cache Crosslink's offline screen and an installed launch will show the browser's own error page when the host is unreachable.`
+    );
+  }
+  if (!webCryptoAvailable) {
+    limitations.push(
+      "Web Crypto is unavailable on this origin, so this device's Crosslink identity is stored without encryption at rest. Anything with access to this browser profile can read it."
+    );
+  }
+  if (insecureTransportBlocked) {
+    limitations.push(
+      "This page is served over https, so the browser blocks insecure ws:// routes as mixed content. The host must advertise a wss:// route \u2014 a relay or a tunnel \u2014 for this install to reach it."
+    );
+  }
+  return {
+    origin,
+    secureContext,
+    serviceWorkerAvailable,
+    webCryptoAvailable,
+    standalone: isStandaloneDisplay(),
+    installable: secureContext && serviceWorkerAvailable,
+    insecureTransportBlocked,
+    limitations
+  };
+}
+
+// src/offline/mobile-bootstrap.ts
+var INSTALL_HANDOFF_QUERY_KEY = "crosslink_install";
+var INSTALL_HANDOFF_COOKIE = "crosslink_install";
+var INSTALL_HANDOFF_CONTEXT_COOKIE = "crosslink_install_context";
+function readCookie(name) {
+  if (typeof document === "undefined") return null;
+  const prefix = `${name}=`;
+  for (const part of String(document.cookie ?? "").split(";")) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith(prefix)) return decodeSafely(trimmed.slice(prefix.length));
+  }
+  return null;
+}
+function cookieAttributes(maxAge) {
+  const secure = typeof location !== "undefined" && location.protocol === "https:" ? "; Secure" : "";
+  return `; Path=/; Max-Age=${Math.max(0, Math.floor(maxAge))}; SameSite=Strict${secure}`;
+}
+function persistInstallHandoff(handoffId, targetUri, expiresAt) {
+  if (typeof document === "undefined") return;
+  const maxAge = Math.max(1, Math.ceil((expiresAt - Date.now()) / 1e3));
+  document.cookie = `${INSTALL_HANDOFF_COOKIE}=${encodeURIComponent(handoffId)}${cookieAttributes(maxAge)}`;
+  document.cookie = `${INSTALL_HANDOFF_CONTEXT_COOKIE}=${encodeURIComponent(JSON.stringify({ targetUri, expiresAt }))}${cookieAttributes(maxAge)}`;
+}
+function clearInstallCookies() {
+  if (typeof document === "undefined") return;
+  document.cookie = `${INSTALL_HANDOFF_COOKIE}=${cookieAttributes(0)}`;
+  document.cookie = `${INSTALL_HANDOFF_CONTEXT_COOKIE}=${cookieAttributes(0)}`;
+}
+function decodeSafely(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+function isStandalone() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia?.("(display-mode: standalone)")?.matches === true || window.navigator?.standalone === true;
+}
+async function resetDeviceStorage() {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.clear();
+    sessionStorage.clear();
+    if (window.indexedDB?.databases) {
+      const dbs = await window.indexedDB.databases();
+      for (const db of dbs) {
+        if (db.name) window.indexedDB.deleteDatabase(db.name);
+      }
+    } else {
+      window.indexedDB?.deleteDatabase("crosslink-secure-storage");
+    }
+    if ("caches" in window) {
+      const keys = await caches.keys();
+      for (const k of keys) await caches.delete(k);
+    }
+  } catch (e) {
+    console.warn("[Crosslink] Storage reset warning:", e);
+  }
+}
+var BOOTSTRAP_STYLES = `
+/* \u2500\u2500 Crosslink Mobile Framework Styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cl-screen-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  background: #000000;
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 20px;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  text-align: center;
+  overflow-y: auto;
+  -webkit-tap-highlight-color: transparent;
+}
+.cl-screen-overlay * {
+  box-sizing: border-box;
+}
+
+/* \u2500\u2500 Crosslink Logo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cl-crosslink-logo {
+  width: 150px;
+  height: auto;
+  margin-bottom: 20px;
+  display: block;
+  opacity: 0.95;
+}
+
+/* \u2500\u2500 Screen A: Pairing Screen \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cl-pair-screen {
+  background: #000000;
+  gap: 20px;
+}
+.cl-pair-title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0;
+  color: #ffffff;
+}
+.cl-pair-desc {
+  font-size: 14px;
+  color: #a1a1aa;
+  max-width: 290px;
+  line-height: 1.5;
+  margin: 0;
+}
+.cl-pair-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  max-width: 260px;
+  margin: 8px 0;
+}
+.cl-pair-digit {
+  width: 72px;
+  height: 64px;
+  font-size: 26px;
+  text-align: center;
+  border-radius: 14px;
+  border: 1px solid #27272a;
+  background: #111111;
+  color: #ffffff;
+  font-weight: 700;
+  outline: none;
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.cl-pair-digit:focus {
+  border-color: #ffffff;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+}
+.cl-pair-err {
+  font-size: 13px;
+  color: #f87171;
+  min-height: 20px;
+  margin: 0;
+  line-height: 1.4;
+  max-width: 280px;
+}
+.cl-pair-reset {
+  margin-top: 12px;
+  background: transparent;
+  border: none;
+  color: #71717a;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 6px 12px;
+  border-radius: 6px;
+  text-decoration: underline;
+  transition: color 0.15s;
+}
+.cl-pair-reset:hover {
+  color: #a1a1aa;
+}
+
+/* \u2500\u2500 Screen B: Add to Home Screen (Screen B) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cl-bootstrap-screen {
+  background: #000000;
+  justify-content: center;
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  height: 100dvh;
+}
+.cl-bootstrap-appname {
+  font-size: 21px;
+  font-weight: 600;
+  color: #ffffff;
+  margin-top: 12px;
+  letter-spacing: -0.01em;
+}
+.cl-continue-btn {
+  margin-top: 20px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: #ffffff;
+  padding: 11px 24px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.cl-continue-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+.cl-bootstrap-nudge {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(4px + env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  pointer-events: none;
+}
+.cl-bootstrap-nudge span {
+  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive, sans-serif;
+  font-size: 21px;
+  color: #ffffff;
+  opacity: 0.92;
+  text-align: center;
+  max-width: 280px;
+  line-height: 1.2;
+}
+.cl-bootstrap-nudge svg {
+  width: 34px;
+  height: 52px;
+  color: #ffffff;
+  opacity: 0.92;
+}
+
+/* \u2500\u2500 SAS Modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cl-sas-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 100001;
+  background: #000000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 20px;
+  gap: 14px;
+  text-align: center;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.cl-sas-modal h2 { font-size: 18px; color: #fff; margin: 0; }
+.cl-sas-modal p { color: #a1a1aa; font-size: 13px; margin: 0; }
+.cl-sas-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  width: 100%;
+  max-width: 240px;
+  margin: 10px 0;
+}
+.cl-sas-grid span {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1.5;
+  background: #111111;
+  border: 1px solid #27272a;
+  border-radius: 10px;
+  font-size: 24px;
+  font-weight: 700;
+  color: #ffffff;
+  font-variant-numeric: tabular-nums;
+}
+.cl-sas-caps { color: #a1a1aa; font-size: 12px; }
+.cl-sas-actions { display: flex; gap: 12px; margin-top: 10px; }
+.cl-sas-actions button {
+  padding: 10px 22px;
+  border-radius: 999px;
+  border: none;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.cl-sas-ok { background: #ffffff; color: #000000; }
+.cl-sas-no { background: #111111; color: #ffffff; border: 1px solid #27272a !important; }
+`.trim();
+var stylesInjected2 = false;
+function injectBootstrapStyles() {
+  if (stylesInjected2 || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.id = "crosslink-bootstrap-styles";
+  style.textContent = BOOTSTRAP_STYLES;
+  document.head.appendChild(style);
+  stylesInjected2 = true;
+}
+var CrosslinkMobileBootstrap = class {
+  client;
+  options;
+  state = "initializing";
+  currentScreenElement = null;
+  reconnectTimer = null;
+  reachabilityTimer = null;
+  visibilityHandler = null;
+  onlineHandler = null;
+  isAttempting = false;
+  attemptCount = 0;
+  activeRpc = null;
+  targetPairingUri = null;
+  poweredBy = null;
+  environment = null;
+  constructor(options) {
+    this.options = options;
+    injectBootstrapStyles();
+    if (options.client) {
+      this.client = options.client;
+    } else {
+      const clientOpts = {
+        ...options.clientOptions,
+        ...options.clientOptions?.storage ? {} : typeof localStorage !== "undefined" ? { storage: new LocalStorageSecureStorage(localStorage) } : {},
+        deviceName: options.clientOptions?.deviceName ?? "mobile",
+        onConfirmPairing: (req) => this.showSasConfirmation(req),
+        onStateChange: (state, detail) => this.handleClientStateChange(state, detail)
+      };
+      this.client = new CrosslinkClient(clientOpts);
+    }
+    this.setupListeners();
+  }
+  /**
+   * Start the authoritative bootstrap state machine.
+   * This is the single entry point controlling what the mobile device sees.
+   */
+  async start() {
+    this.ensurePoweredBy();
+    this.environment = describeBootstrapEnvironment();
+    for (const limitation of this.environment.limitations) {
+      console.warn(`[crosslink] ${limitation}`);
+    }
+    this.options.onEnvironment?.(this.environment);
+    if (this.options.autoRegisterServiceWorker !== false && this.environment.serviceWorkerAvailable) {
+      try {
+        await navigator.serviceWorker.register(this.options.serviceWorkerUrl ?? "/sw.js");
+      } catch (e) {
+        console.warn("[crosslink] service worker registration failed", e);
+      }
+    }
+    this.extractPairingUriFromLocation();
+    if (typeof location !== "undefined") {
+      const params = new URLSearchParams(location.search);
+      if (params.has("reset") || location.hash.includes("reset")) {
+        await resetDeviceStorage();
+        if (this.targetPairingUri) {
+          try {
+            localStorage.setItem("crosslink.pendingPair", this.targetPairingUri);
+          } catch {
+          }
+        }
+        location.href = location.pathname;
+        return;
+      }
+    }
+    const installHandoff = await this.discoverInstallHandoff();
+    if (this.client.listApps().length === 0 && installHandoff) {
+      try {
+        console.info("[crosslink/install] redeeming handoff", {
+          standalone: isStandalone(),
+          source: installHandoff.source
+        });
+        const uri = linkPairingTarget(installHandoff.targetUri, installHandoff.handoffId);
+        await this.client.pairFromQr(uri, this.options.capabilities);
+        this.targetPairingUri = installHandoff.targetUri;
+        this.clearInstallState();
+        console.info("[crosslink/install] linked device created; credentials persisted");
+      } catch (err) {
+        console.warn("[crosslink/install] handoff unavailable/expired; falling back to normal pairing", {
+          error: String(err?.message ?? err)
+        });
+        this.targetPairingUri = installHandoff.targetUri;
+        this.clearInstallState();
+      }
+    }
+    const apps = this.client.listApps();
+    if (apps.length === 0) {
+      this.transitionTo("pairing-required");
+      return;
+    }
+    await this.attemptSilentAuth(apps[0]);
+  }
+  extractPairingUriFromLocation() {
+    if (this.options.pairingUri) {
+      this.targetPairingUri = this.options.pairingUri;
+      return;
+    }
+    if (typeof location === "undefined") return;
+    const fromHash = new URLSearchParams(location.hash.replace(/^#/, "")).get(BOOTSTRAP_FRAGMENT_KEY);
+    const fromQuery = new URLSearchParams(location.search).get(BOOTSTRAP_FRAGMENT_KEY);
+    const pairParam = fromHash || fromQuery || "";
+    if (pairParam) {
+      this.targetPairingUri = unwrapBootstrapUri2(decodeSafely(pairParam));
+      try {
+        localStorage.setItem("crosslink.pendingPair", this.targetPairingUri);
+      } catch {
+      }
+    } else {
+      try {
+        this.targetPairingUri = localStorage.getItem("crosslink.pendingPair");
+      } catch {
+      }
+    }
+  }
+  async discoverInstallHandoff() {
+    let urlId = "";
+    if (typeof location !== "undefined") {
+      urlId = new URLSearchParams(location.search).get(INSTALL_HANDOFF_QUERY_KEY) ?? "";
+    }
+    const cookieId = readCookie(INSTALL_HANDOFF_COOKIE) ?? "";
+    const contextRaw = readCookie(INSTALL_HANDOFF_CONTEXT_COOKIE);
+    let targetUri = "";
+    let expiresAt = 0;
+    if (contextRaw) {
+      try {
+        const context = JSON.parse(contextRaw);
+        targetUri = typeof context.targetUri === "string" ? normalPairingTarget2(context.targetUri) : "";
+        expiresAt = typeof context.expiresAt === "number" ? context.expiresAt : 0;
+      } catch {
+      }
+    }
+    const handoffId = cookieId || urlId;
+    if (handoffId && targetUri && expiresAt > Date.now()) {
+      return {
+        handoffId,
+        targetUri,
+        expiresAt,
+        source: cookieId ? "cookie" : "url"
+      };
+    }
+    if (urlId && typeof fetch === "function") {
+      try {
+        const response = await fetch(`/__crosslink/install/${encodeURIComponent(urlId)}`, {
+          credentials: "same-origin",
+          cache: "no-store"
+        });
+        if (response.ok) {
+          const recovered = await response.json();
+          if (typeof recovered.uri === "string" && typeof recovered.expiresAt === "number") {
+            return {
+              handoffId: urlId,
+              targetUri: normalPairingTarget2(recovered.uri),
+              expiresAt: recovered.expiresAt,
+              source: "url"
+            };
+          }
+        }
+      } catch {
+      }
+    }
+    if (handoffId || contextRaw) {
+      if (targetUri) this.targetPairingUri = targetUri;
+      this.clearInstallState();
+    }
+    if (this.targetPairingUri) {
+      try {
+        const parsed = parsePairingUri2(unwrapBootstrapUri2(this.targetPairingUri));
+        if (parsed.link && parsed.code) {
+          return {
+            handoffId: parsed.code,
+            targetUri: normalPairingTarget2(this.targetPairingUri),
+            expiresAt: Number.MAX_SAFE_INTEGER,
+            source: "legacy-link"
+          };
+        }
+      } catch {
+      }
+    }
+    return null;
+  }
+  clearInstallState() {
+    clearInstallCookies();
+    if (typeof localStorage !== "undefined") localStorage.removeItem("crosslink.pendingPair");
+    if (typeof location === "undefined" || typeof history === "undefined") return;
+    try {
+      const clean = new URL(location.href);
+      clean.searchParams.delete(INSTALL_HANDOFF_QUERY_KEY);
+      const hashParams = new URLSearchParams(clean.hash.replace(/^#/, ""));
+      const pair = hashParams.get(BOOTSTRAP_FRAGMENT_KEY);
+      if (pair) {
+        try {
+          if (parsePairingUri2(unwrapBootstrapUri2(decodeSafely(pair))).link) {
+            hashParams.delete(BOOTSTRAP_FRAGMENT_KEY);
+          }
+        } catch {
+        }
+      }
+      clean.hash = hashParams.toString() ? `#${hashParams.toString()}` : "";
+      history.replaceState(history.state, "", `${clean.pathname}${clean.search}${clean.hash}`);
+    } catch {
+    }
+  }
+  getEffectiveAppId() {
+    if (this.options.appId) return this.options.appId;
+    const apps = this.client.listApps();
+    if (apps.length > 0) return apps[0].appId;
+    if (this.targetPairingUri) {
+      try {
+        const parsed = parsePairingUri2(this.targetPairingUri);
+        if (parsed.appId) return parsed.appId;
+      } catch {
+      }
+    }
+    return "default";
+  }
+  completedOnboardingApps = /* @__PURE__ */ new Set();
+  isOnboardingCompleted(appId) {
+    if (isStandalone()) return true;
+    if (this.completedOnboardingApps.has(appId)) return true;
+    if (typeof localStorage !== "undefined") {
+      return localStorage.getItem(`crosslink.onboarding.${appId}`) === "true";
+    }
+    return false;
+  }
+  markOnboardingCompleted(appId) {
+    this.completedOnboardingApps.add(appId);
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem(`crosslink.onboarding.${appId}`, "true");
+    }
+  }
+  clearOnboarding(appId) {
+    this.completedOnboardingApps.delete(appId);
+    if (typeof localStorage !== "undefined") {
+      localStorage.removeItem(`crosslink.onboarding.${appId}`);
+    }
+  }
+  /** Prepares the cookie-first Safari -> standalone install boundary. */
+  async prepareDeviceLinkHandoff() {
+    if (isStandalone() || typeof location === "undefined") return;
+    try {
+      const { handoffId, uri, expiresAt } = await this.client.createDeviceLink();
+      const targetUri = normalPairingTarget2(uri);
+      this.targetPairingUri = targetUri;
+      persistInstallHandoff(handoffId, targetUri, expiresAt);
+      const manifest = document.querySelector?.('link[rel="manifest"]');
+      if (manifest?.href) {
+        const manifestUrl = new URL(manifest.href, location.href);
+        manifestUrl.searchParams.set(INSTALL_HANDOFF_QUERY_KEY, handoffId);
+        manifestUrl.searchParams.set("v", String(expiresAt));
+        manifest.href = manifestUrl.toString();
+      }
+      if (typeof history !== "undefined") {
+        const launch = new URL(location.href);
+        launch.searchParams.set(INSTALL_HANDOFF_QUERY_KEY, handoffId);
+        launch.hash = "";
+        history.replaceState(history.state, "", `${launch.pathname}${launch.search}`);
+      }
+      console.info("[crosslink/install] handoff prepared", {
+        currentPath: location.pathname,
+        manifestPath: manifest?.href ? new URL(manifest.href).pathname : null,
+        launchHasHandoff: true,
+        expiresAt
+      });
+    } catch (err) {
+      console.warn("[crosslink/install] could not prepare handoff", {
+        error: String(err?.message ?? err)
+      });
+    }
+  }
+  /**
+   * Silent cryptographic authentication with stored credentials.
+   */
+  async attemptSilentAuth(app) {
+    if (this.isAttempting) return;
+    this.isAttempting = true;
+    try {
+      const rpc = await this.client.connect(app.appId);
+      this.activeRpc = rpc;
+      this.isAttempting = false;
+      this.cancelTimers();
+      if (!this.isOnboardingCompleted(app.appId)) {
+        await this.prepareDeviceLinkHandoff();
+        this.transitionTo("add-to-home-screen");
+      } else {
+        this.transitionTo("authorized");
+      }
+    } catch (err) {
+      this.isAttempting = false;
+      await this.handleAuthError(err, app);
+    }
+  }
+  async handleAuthError(err, app) {
+    const msg = String(err?.message ?? err ?? "").toLowerCase();
+    const clientState = this.client.state;
+    const isAuthFailure = msg.includes("revoked") || msg.includes("device_revoked") || msg.includes("device-revoked") || msg.includes("unauthorized") || msg.includes("not paired") || msg.includes("signature invalid") || msg.includes("challenge nonce") || clientState === "revoked" || clientState === "unauthorized";
+    if (isAuthFailure) {
+      this.client.forget(app.appId);
+      this.clearOnboarding(app.appId);
+      this.transitionTo("pairing-required", { reason: "revoked" });
+      return;
+    }
+    this.transitionTo("offline");
+    this.scheduleReconnect();
+  }
+  handleClientStateChange(state, detail) {
+    if (state === "revoked" || state === "unauthorized") {
+      const appId = this.getEffectiveAppId();
+      this.client.forget(appId);
+      this.clearOnboarding(appId);
+      this.transitionTo("pairing-required", { reason: "revoked", ...detail });
+    } else if (state === "offline" && this.state === "authorized") {
+      this.transitionTo("offline");
+      this.scheduleReconnect();
+    }
+  }
+  /**
+   * Transition state machine to a new state and mount appropriate UI.
+   */
+  transitionTo(newState, detail) {
+    this.ensurePoweredBy();
+    this.state = newState;
+    this.options.onStateChange?.(newState, detail);
+    this.unmountCurrentScreen();
+    if (newState === "authorized") {
+      let rpc = this.activeRpc;
+      if (!rpc) {
+        try {
+          rpc = this.client.rpc();
+        } catch {
+        }
+      }
+      if (rpc) {
+        this.options.onAuthorized(rpc, this.client);
+      }
+      return;
+    }
+    this.options.onUnauthorized?.();
+    const container = this.options.container ?? (typeof document !== "undefined" ? document.body : null);
+    if (!container) return;
+    switch (newState) {
+      case "pairing-required":
+      case "pairing": {
+        const pairingEl = this.createPairingScreen((code) => this.handlePairingSubmit(code));
+        this.currentScreenElement = pairingEl;
+        container.appendChild(pairingEl);
+        break;
+      }
+      case "add-to-home-screen": {
+        const appId = this.getEffectiveAppId();
+        const bootstrapEl = this.createAddToHomeScreen(() => {
+          this.markOnboardingCompleted(appId);
+          this.transitionTo("authorized");
+        });
+        this.currentScreenElement = bootstrapEl;
+        container.appendChild(bootstrapEl);
+        break;
+      }
+      case "offline": {
+        const offlineConfig = {
+          ...DEFAULT_OFFLINE_CONFIG,
+          ...this.options.offline,
+          appName: this.options.appName || this.options.offline?.appName || "Crosslink"
+        };
+        const offlineEl = createOfflineUI(offlineConfig, () => this.forceReconnect());
+        this.currentScreenElement = offlineEl;
+        container.appendChild(offlineEl);
+        break;
+      }
+    }
+  }
+  unmountCurrentScreen() {
+    if (this.currentScreenElement && this.currentScreenElement.parentElement) {
+      this.currentScreenElement.remove();
+    }
+    this.currentScreenElement = null;
+  }
+  ensurePoweredBy() {
+    if (typeof document === "undefined") return;
+    if (!this.poweredBy) this.poweredBy = new PoweredByCrosslink(this.options.poweredBy);
+    const target = this.options.poweredBy?.target ?? document.body;
+    this.poweredBy.mount(target);
+  }
+  /**
+   * Handle user submitting pairing code on Pairing Screen (Screen A).
+   */
+  async handlePairingSubmit(code) {
+    const errEl = document.getElementById("cl-pair-err");
+    if (errEl) {
+      errEl.textContent = "Verifying pairing code\u2026";
+      errEl.style.color = "#38bdf8";
+    }
+    try {
+      const targetUri = this.targetPairingUri ?? (typeof localStorage !== "undefined" ? localStorage.getItem("crosslink.pendingPair") : null);
+      if (!targetUri) {
+        throw new Error("scan the QR code on your computer to start pairing");
+      }
+      const normalTarget = normalPairingTarget2(targetUri);
+      this.targetPairingUri = normalTarget;
+      this.clearInstallState();
+      console.info("[crosslink/pairing] falling back to NORMAL pairing");
+      await this.client.pairWithCode(normalTarget, code, this.options.capabilities ?? []);
+      if (typeof localStorage !== "undefined") localStorage.removeItem("crosslink.pendingPair");
+      const apps = this.client.listApps();
+      if (apps.length > 0) {
+        await this.attemptSilentAuth(apps[0]);
+      }
+    } catch (err) {
+      if (errEl) {
+        errEl.textContent = `Pairing failed: ${err.message || String(err)}`;
+        errEl.style.color = "#f87171";
+      }
+    }
+  }
+  /**
+   * Create prebuilt Pairing Screen UI (Screen A).
+   */
+  createPairingScreen(onVerify) {
+    const overlay = document.createElement("div");
+    overlay.id = "crosslink-pairing-screen";
+    overlay.className = "cl-screen-overlay cl-pair-screen";
+    const logoContainer = document.createElement("div");
+    logoContainer.style.cssText = "display:flex;justify-content:center";
+    logoContainer.innerHTML = crosslinkLogoSvg({ width: "140px", className: "cl-crosslink-logo" });
+    overlay.appendChild(logoContainer);
+    const title = document.createElement("h2");
+    title.className = "cl-pair-title";
+    title.textContent = "Pairing Required";
+    overlay.appendChild(title);
+    const desc = document.createElement("p");
+    desc.className = "cl-pair-desc";
+    desc.textContent = "Type the 9-digit pairing code shown on your computer to connect.";
+    overlay.appendChild(desc);
+    const grid = document.createElement("div");
+    grid.className = "cl-pair-grid";
+    const inputs = [];
+    for (let i = 0; i < 9; i++) {
+      const input = document.createElement("input");
+      input.type = "text";
+      input.inputMode = "numeric";
+      input.maxLength = 1;
+      input.className = "cl-pair-digit";
+      input.setAttribute("aria-label", `Digit ${i + 1}`);
+      input.addEventListener("input", (e) => {
+        const val = input.value.replace(/\D/g, "");
+        input.value = val ? val[0] : "";
+        if (val && i < 8) {
+          inputs[i + 1].focus();
+        }
+        const fullCode = inputs.map((inp) => inp.value.replace(/\D/g, "")).join("");
+        if (fullCode.length === 9) {
+          onVerify(fullCode);
+        }
+      });
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Backspace" && !input.value && i > 0) {
+          inputs[i - 1].focus();
+        }
+      });
+      input.addEventListener("paste", (e) => {
+        e.preventDefault();
+        const text = e.clipboardData?.getData("text") || "";
+        const digits = text.replace(/\D/g, "").slice(0, 9);
+        for (let j = 0; j < digits.length; j++) {
+          if (inputs[j]) inputs[j].value = digits[j];
+        }
+        if (digits.length === 9) {
+          onVerify(digits);
+        } else if (digits.length > 0 && inputs[digits.length]) {
+          inputs[digits.length].focus();
+        }
+      });
+      grid.appendChild(input);
+      inputs.push(input);
+    }
+    overlay.appendChild(grid);
+    const err = document.createElement("p");
+    err.id = "cl-pair-err";
+    err.className = "cl-pair-err";
+    overlay.appendChild(err);
+    const resetBtn = document.createElement("button");
+    resetBtn.className = "cl-pair-reset";
+    resetBtn.textContent = "Reset connection data";
+    resetBtn.onclick = async () => {
+      await resetDeviceStorage();
+      location.reload();
+    };
+    overlay.appendChild(resetBtn);
+    setTimeout(() => inputs[0]?.focus(), 100);
+    return overlay;
+  }
+  /**
+   * Create prebuilt Add to Home Screen UI (Screen B).
+   */
+  createAddToHomeScreen(onContinue) {
+    const overlay = document.createElement("div");
+    overlay.id = "crosslink-bootstrap-screen";
+    overlay.className = "cl-screen-overlay cl-bootstrap-screen";
+    const logoContainer = document.createElement("div");
+    logoContainer.style.cssText = "display:flex;justify-content:center";
+    logoContainer.innerHTML = crosslinkLogoSvg({ width: "170px", className: "cl-crosslink-logo" });
+    overlay.appendChild(logoContainer);
+    const title = document.createElement("h2");
+    title.className = "cl-bootstrap-appname";
+    title.textContent = this.options.onboarding?.appName || this.options.appName || "Crosslink";
+    overlay.appendChild(title);
+    const btn = document.createElement("button");
+    btn.className = "cl-continue-btn";
+    btn.innerHTML = "Continue in browser &rarr;";
+    btn.onclick = () => onContinue();
+    overlay.appendChild(btn);
+    const nudge = document.createElement("div");
+    nudge.className = "cl-bootstrap-nudge";
+    nudge.innerHTML = `
+      <span>Add to home screen</span>
+      <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M24 5 C 24 16, 24 27, 24 39" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none"/>
+        <path d="M16 31 L 24 40 L 32 31" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+      </svg>
+    `;
+    overlay.appendChild(nudge);
+    return overlay;
+  }
+  /**
+   * Prebuilt SAS Confirmation Modal.
+   */
+  showSasConfirmation(req) {
+    return new Promise((resolve) => {
+      const modal = document.createElement("div");
+      modal.id = "crosslink-sas-modal";
+      modal.className = "cl-sas-modal";
+      const logoContainer = document.createElement("div");
+      logoContainer.style.cssText = "display:flex;justify-content:center;margin-bottom:8px";
+      logoContainer.innerHTML = crosslinkLogoSvg({ width: "120px", className: "cl-crosslink-logo" });
+      modal.appendChild(logoContainer);
+      const title = document.createElement("h2");
+      title.textContent = "Verify Security Code";
+      modal.appendChild(title);
+      const p = document.createElement("p");
+      p.textContent = "Confirm the numbers match on your computer:";
+      modal.appendChild(p);
+      const grid = document.createElement("div");
+      grid.className = "cl-sas-grid";
+      for (const ch of req.sas.replace(/\s/g, "")) {
+        const span = document.createElement("span");
+        span.textContent = ch;
+        grid.appendChild(span);
+      }
+      modal.appendChild(grid);
+      const caps = document.createElement("p");
+      caps.className = "cl-sas-caps";
+      caps.textContent = "Capabilities: " + (req.grantedCaps.join(", ") || "(none)");
+      modal.appendChild(caps);
+      const actions = document.createElement("div");
+      actions.className = "cl-sas-actions";
+      const okBtn = document.createElement("button");
+      okBtn.className = "cl-sas-ok";
+      okBtn.textContent = "They match";
+      okBtn.onclick = () => {
+        modal.remove();
+        resolve(true);
+      };
+      const noBtn = document.createElement("button");
+      noBtn.className = "cl-sas-no";
+      noBtn.textContent = "Cancel";
+      noBtn.onclick = () => {
+        modal.remove();
+        resolve(false);
+      };
+      actions.append(okBtn, noBtn);
+      modal.appendChild(actions);
+      document.body.appendChild(modal);
+    });
+  }
+  scheduleReconnect() {
+    if (this.reconnectTimer) return;
+    const delay = Math.min(3e4, 1e3 * Math.pow(1.5, Math.min(this.attemptCount, 8)));
+    const jitter = delay * (0.8 + Math.random() * 0.4);
+    this.reconnectTimer = setTimeout(async () => {
+      this.reconnectTimer = null;
+      this.attemptCount++;
+      await this.forceReconnect();
+    }, jitter);
+  }
+  async forceReconnect() {
+    const apps = this.client.listApps();
+    if (apps.length === 0) {
+      this.transitionTo("pairing-required");
+      return;
+    }
+    this.client.close();
+    await this.attemptSilentAuth(apps[0]);
+  }
+  cancelTimers() {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.reachabilityTimer) {
+      clearInterval(this.reachabilityTimer);
+      this.reachabilityTimer = null;
+    }
+    this.attemptCount = 0;
+  }
+  setupListeners() {
+    if (typeof document === "undefined" || typeof window === "undefined") return;
+    this.visibilityHandler = () => {
+      if (!document.hidden && this.state === "offline") {
+        this.forceReconnect().catch(() => {
+        });
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityHandler);
+    this.onlineHandler = () => {
+      if (this.state === "offline") {
+        this.forceReconnect().catch(() => {
+        });
+      }
+    };
+    window.addEventListener("online", this.onlineHandler);
+  }
+  /** What this origin permits, once `start()` has probed it. */
+  getEnvironment() {
+    return this.environment;
+  }
+  getState() {
+    return this.state;
+  }
+  getClient() {
+    return this.client;
+  }
+  destroy() {
+    this.cancelTimers();
+    this.unmountCurrentScreen();
+    this.poweredBy?.destroy();
+    this.poweredBy = null;
+    if (typeof document !== "undefined" && this.visibilityHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityHandler);
+    }
+    if (typeof window !== "undefined" && this.onlineHandler) {
+      window.removeEventListener("online", this.onlineHandler);
+    }
+  }
+};
+
+// src/offline/service-worker.ts
+var DEFAULT_SERVICE_WORKER_CONFIG = {
+  version: "2.0.0",
+  precacheAssets: [
+    "./mobile.html",
+    "./bundle.js",
+    "./manifest.webmanifest",
+    "./crosslink-mark.svg",
+    "./icon-192.png",
+    "./icon-512.png"
+  ],
+  navigationTimeoutMs: 4e3
+};
+function generateServiceWorker(config = {}) {
+  const version = config.version || DEFAULT_SERVICE_WORKER_CONFIG.version;
+  const precacheAssets = config.precacheAssets || DEFAULT_SERVICE_WORKER_CONFIG.precacheAssets;
+  const navigationTimeoutMs = config.navigationTimeoutMs ?? DEFAULT_SERVICE_WORKER_CONFIG.navigationTimeoutMs ?? 4e3;
+  const cacheName = `crosslink-shell-v${version}`;
+  const assetsJson = JSON.stringify(precacheAssets, null, 2);
+  return `/* Crosslink PWA Service Worker \u2014 Generated by Crosslink Framework */
+const CACHE_NAME = "${cacheName}";
+const PRECACHE_ASSETS = ${assetsJson};
+const NAVIGATION_TIMEOUT_MS = ${navigationTimeoutMs};
+
+// Endpoints and patterns that must NEVER be cached (security, credentials, active RPC/presence)
+const NEVER_CACHE_PATTERNS = [
+  "/api/",
+  "/rpc/",
+  "/ws",
+  "/pair",
+  "/verify-pair",
+  "/challenge",
+  "/session",
+  "/__crosslink/install/",
+  "/revoke",
+  "/events"
+];
+
+function isSecuritySensitive(url) {
+  const path = url.pathname;
+  return NEVER_CACHE_PATTERNS.some((pattern) => path.includes(pattern));
+}
+
+async function fetchNavigation(request) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), NAVIGATION_TIMEOUT_MS);
+  try {
+    const response = await fetch(request, { signal: controller.signal });
+    if (!response || !response.ok) throw new Error("host navigation unavailable");
+    return response;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(async (cache) => {
+      // Robust asset caching: fetch individually so one missing asset doesn't abort entire install
+      for (const asset of PRECACHE_ASSETS) {
+        try {
+          const res = await fetch(asset, { cache: "no-cache" });
+          if (res.ok) {
+            await cache.put(asset, res);
+          }
+        } catch (err) {
+          console.warn("[Crosslink SW] Precache missed:", asset);
+        }
+      }
+    })
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys
+          .filter((key) => key.startsWith("crosslink-") && key !== CACHE_NAME)
+          .map((key) => caches.delete(key))
+      )
+    ).then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  if (request.method !== "GET") return;
+
+  const url = new URL(request.url);
+  // Ignore cross-origin requests
+  if (url.origin !== self.location.origin) return;
+
+  // Never cache auth or API calls
+  if (isSecuritySensitive(url)) {
+    return;
+  }
+
+  // Install-specific manifests and bootstrap navigations carry only an opaque
+  // handoff id, but serving a cached response for another install would still
+  // lose or cross-wire the handoff. Always go to the network for them.
+  if (url.searchParams.has("crosslink_install")) {
+    event.respondWith(fetch(request, { cache: "no-store" }));
+    return;
+  }
+
+  // 1. Navigation requests: network-first with offline fallback to cached shell
+  if (request.mode === "navigate") {
+    event.respondWith(
+      fetchNavigation(request)
+        .then((response) => {
+          if (response && response.ok) {
+            const copy = response.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(request, copy));
+          }
+          return response;
+        })
+        .catch(async () => {
+          // Host is offline: return cached shell
+          const cached =
+            (await caches.match(request, { ignoreSearch: true })) ||
+            (await caches.match("./mobile.html", { ignoreSearch: true })) ||
+            (await caches.match("/mobile.html", { ignoreSearch: true })) ||
+            (await caches.match("/", { ignoreSearch: true }));
+          if (cached) return cached;
+          return new Response("Application is offline", {
+            status: 503,
+            statusText: "Offline",
+            headers: { "Content-Type": "text/plain" }
+          });
+        })
+    );
+    return;
+  }
+
+  // 2. Static shell assets: cache-first with network fallback
+  event.respondWith(
+    caches.match(request, { ignoreSearch: true }).then((hit) => {
+      if (hit) return hit;
+      return fetch(request).then((response) => {
+        if (response && response.ok) {
+          const copy = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(request, copy));
+        }
+        return response;
+      });
+    })
+  );
+});
+
+self.addEventListener("message", (event) => {
+  if (event.data === "skipWaiting") {
+    self.skipWaiting();
+  }
+});
+`;
+}
+var DEFAULT_SERVICE_WORKER = generateServiceWorker();
+function createServiceWorkerConfig(pwaConfig) {
+  const assets = [
+    pwaConfig.startUrl || "./mobile.html",
+    "./bundle.js",
+    pwaConfig.manifestPath || "./manifest.webmanifest",
+    "./crosslink-mark.svg"
+  ];
+  if (pwaConfig.icons) {
+    for (const icon of pwaConfig.icons) {
+      if (icon.src && !assets.includes(icon.src)) {
+        assets.push(icon.src);
+      }
+    }
+  }
+  return {
+    version: pwaConfig.version || "1.0.0",
+    precacheAssets: assets
+  };
+}
+
+// src/index.ts
+function createCrosslinkClient(options = {}) {
+  const storage = options.storage ?? (typeof localStorage !== "undefined" ? new LocalStorageSecureStorage(localStorage) : void 0);
+  return new CrosslinkClient({ ...options, storage });
+}
+function createSecureCrosslinkClient(options = {}) {
+  return CrosslinkClient.create(options);
+}
+export {
+  ATTRIBUTION_MIN_CONTRAST,
+  AsyncStorageAdapter,
+  BrokeredPairingChannel,
+  CONTROL_ROUTES,
+  CROSSLINK_ATTRIBUTION_LINK_TEXT,
+  CROSSLINK_ATTRIBUTION_TEXT,
+  CROSSLINK_LOGO_PATH,
+  CROSSLINK_LOGO_VIEWBOX,
+  CROSSLINK_REPOSITORY,
+  CrosslinkClient,
+  CrosslinkMobileBootstrap,
+  CrosslinkOfflineShell,
+  DEFAULT_OFFLINE_CONFIG,
+  DEFAULT_SERVICE_WORKER,
+  DEFAULT_SERVICE_WORKER_CONFIG,
+  DirectPairingChannel,
+  HydratedSecureStorage,
+  INSTALL_HANDOFF_CONTEXT_COOKIE,
+  INSTALL_HANDOFF_COOKIE,
+  INSTALL_HANDOFF_QUERY_KEY,
+  IndexedDbSecureStorage,
+  JsonStore,
+  LOGO_MIN_CONTRAST,
+  LocalStorageSecureStorage,
+  MemoryLogSink,
+  MemorySecureStorage,
+  MockSocket,
+  NotificationHandler,
+  PairingCard,
+  PoweredByCrosslink,
+  SignalingPeer,
+  consoleLogger,
+  contrastRatio,
+  createCrosslinkClient,
+  createCrosslinkLogo,
+  createHttpPairingSource,
+  createLogger,
+  createOfflineUI,
+  createPairingCard,
+  createPoweredByCrosslink,
+  createSecureCrosslinkClient,
+  createSecureStorage,
+  createServiceWorkerConfig,
+  crosslinkLogoSvg,
+  describeBootstrapEnvironment,
+  generateServiceWorker,
+  injectBootstrapStyles,
+  injectPairingCardStyles,
+  isStandalone,
+  noopLogger2 as noopLogger,
+  normalizeNetworkMode,
+  parseColor,
+  removeOfflineUI,
+  resetDeviceStorage,
+  resolveCrosslinkTheme,
+  updateOfflineStatus,
+  wsTransport
+};