backpack-viewer 0.7.11 → 0.7.13

package/dist/extensions/share/src/index.js

@@ -1,323 +1,548 @@
-const L = "https://app.backpackontology.com";
-let f = L, T = `${f}/.well-known/oauth-authorization-server`;
-const P = new Uint8Array([66, 80, 65, 75]), R = 1;
-let m = null;
-async function M(t) {
-  const e = await t.settings.get("relay_url");
-  e && (f = e, T = `${f}/.well-known/oauth-authorization-server`), t.registerTaskbarIcon({
-    label: "Share",
-    iconText: "↗",
-    position: "bottom-center",
-    onClick: () => $(t)
-  });
-}
-function $(t) {
-  if (m && m.isVisible()) {
-    m.setVisible(!1);
-    return;
-  }
-  const e = t.getGraphName();
-  if (!e) return;
-  const a = document.createElement("div");
-  a.className = "share-panel-body", m ? (m.element.replaceChildren(), m.element.appendChild(a), m.setTitle(`Share "${e}"`), m.setVisible(!0), m.bringToFront()) : (a.textContent = "Loading...", m = t.mountPanel(a, {
-    title: `Share "${e}"`,
-    defaultPosition: { left: Math.max(100, (window.innerWidth - 380) / 2), top: Math.max(80, (window.innerHeight - 400) / 2) },
-    persistKey: "share-v2",
-    showFullscreenButton: !1,
-    onClose: () => {
-      m = null;
+const DEFAULT_RELAY_URL = "https://app.backpackontology.com";
+let RELAY_URL = DEFAULT_RELAY_URL;
+let OAUTH_METADATA_URL = `${RELAY_URL}/.well-known/oauth-authorization-server`;
+const BPAK_MAGIC = new Uint8Array([0x42, 0x50, 0x41, 0x4b]);
+const BPAK_VERSION = 0x01;
+let panel = null;
+export async function activate(viewer) {
+    const customRelay = await viewer.settings.get("relay_url");
+    if (customRelay) {
+        RELAY_URL = customRelay;
+        OAUTH_METADATA_URL = `${RELAY_URL}/.well-known/oauth-authorization-server`;
     }
-  })), C(t, a);
+    viewer.registerTaskbarIcon({
+        label: "Share",
+        iconText: "\u2197",
+        position: "bottom-center",
+        onClick: () => toggleSharePanel(viewer),
+    });
 }
-async function C(t, e) {
-  const a = await t.settings.get("relay_token");
-  e.replaceChildren(), a ? D(t, e, a) : I(t, e);
+function toggleSharePanel(viewer) {
+    if (panel && panel.isVisible()) {
+        panel.setVisible(false);
+        return;
+    }
+    const graphName = viewer.getGraphName();
+    if (!graphName)
+        return;
+    const body = document.createElement("div");
+    body.className = "share-panel-body";
+    if (panel) {
+        panel.element.replaceChildren();
+        panel.element.appendChild(body);
+        panel.setTitle(`Share "${graphName}"`);
+        panel.setVisible(true);
+        panel.bringToFront();
+    }
+    else {
+        body.textContent = "Loading...";
+        panel = viewer.mountPanel(body, {
+            title: `Share "${graphName}"`,
+            defaultPosition: { left: Math.max(100, (window.innerWidth - 380) / 2), top: Math.max(80, (window.innerHeight - 400) / 2) },
+            persistKey: "share-v2",
+            showFullscreenButton: false,
+            onClose: () => { panel = null; },
+        });
+    }
+    renderSharePanel(viewer, body);
 }
-function I(t, e) {
-  const a = document.createElement("div");
-  a.className = "share-upsell";
-  const n = document.createElement("h4");
-  n.textContent = "Share this graph with anyone", a.appendChild(n);
-  const s = document.createElement("p");
-  s.textContent = "Encrypt your graph and get a shareable link. Recipients open it in their browser — no install needed.", a.appendChild(s);
-  const o = document.createElement("button");
-  o.className = "share-cta-btn", o.textContent = "Sign in to share", o.addEventListener("click", () => Y(t, e)), a.appendChild(o);
-  const r = document.createElement("button");
-  r.className = "share-token-link", r.textContent = "Or paste an API token", r.addEventListener("click", () => B(t, e)), a.appendChild(r);
-  const c = document.createElement("p");
-  c.className = "share-trust", c.textContent = "Free account. Your graph is encrypted before upload — we can’t read it.", a.appendChild(c), e.replaceChildren(a);
+async function renderSharePanel(viewer, container) {
+    const token = await viewer.settings.get("relay_token");
+    container.replaceChildren();
+    if (!token) {
+        renderUpsell(viewer, container);
+    }
+    else {
+        renderSyncView(viewer, container, token);
+    }
 }
-function B(t, e) {
-  const a = document.createElement("div");
-  a.className = "share-token-input";
-  const n = document.createElement("p");
-  n.textContent = "Paste your API token from your account settings:", a.appendChild(n);
-  const s = document.createElement("input");
-  s.type = "password", s.placeholder = "Token", s.className = "share-input", a.appendChild(s);
-  const o = document.createElement("div");
-  o.className = "share-btn-row";
-  const r = document.createElement("button");
-  r.className = "share-btn-primary", r.textContent = "Save", r.addEventListener("click", async () => {
-    const i = s.value.trim();
-    i && (await t.settings.set("relay_token", i), C(t, e));
-  }), o.appendChild(r);
-  const c = document.createElement("button");
-  c.className = "share-btn-secondary", c.textContent = "Back", c.addEventListener("click", () => C(t, e)), o.appendChild(c), a.appendChild(o), e.replaceChildren(a);
+// --- Pre-auth: sign-in upsell ---
+function renderUpsell(viewer, container) {
+    const w = document.createElement("div");
+    w.className = "share-upsell";
+    const h = document.createElement("h4");
+    h.textContent = "Share this graph with anyone";
+    w.appendChild(h);
+    const p = document.createElement("p");
+    p.textContent = "Encrypt your graph and get a shareable link. Recipients open it in their browser \u2014 no install needed.";
+    w.appendChild(p);
+    const cta = document.createElement("button");
+    cta.className = "share-cta-btn";
+    cta.textContent = "Sign in to share";
+    cta.addEventListener("click", () => startOAuthFlow(viewer, container));
+    w.appendChild(cta);
+    const tokenLink = document.createElement("button");
+    tokenLink.className = "share-token-link";
+    tokenLink.textContent = "Or paste an API token";
+    tokenLink.addEventListener("click", () => renderTokenInput(viewer, container));
+    w.appendChild(tokenLink);
+    const trust = document.createElement("p");
+    trust.className = "share-trust";
+    trust.textContent = "Free account. Your graph is encrypted before upload \u2014 we can\u2019t read it.";
+    w.appendChild(trust);
+    container.replaceChildren(w);
 }
-async function O(t) {
-  try {
-    const e = await fetch(`${f}/api/graphs`, {
-      headers: { Authorization: `Bearer ${t}` }
+function renderTokenInput(viewer, container) {
+    const w = document.createElement("div");
+    w.className = "share-token-input";
+    const label = document.createElement("p");
+    label.textContent = "Paste your API token from your account settings:";
+    w.appendChild(label);
+    const input = document.createElement("input");
+    input.type = "password";
+    input.placeholder = "Token";
+    input.className = "share-input";
+    w.appendChild(input);
+    const row = document.createElement("div");
+    row.className = "share-btn-row";
+    const saveBtn = document.createElement("button");
+    saveBtn.className = "share-btn-primary";
+    saveBtn.textContent = "Save";
+    saveBtn.addEventListener("click", async () => {
+        const val = input.value.trim();
+        if (!val)
+            return;
+        await viewer.settings.set("relay_token", val);
+        renderSharePanel(viewer, container);
     });
-    if (e.status === 401) return { graphs: [], error: "unauthorized" };
-    if (!e.ok) return { graphs: [], error: `status ${e.status}` };
-    const a = await e.json();
-    return { graphs: Array.isArray(a) ? a : [] };
-  } catch (e) {
-    return { graphs: [], error: e.message };
-  }
-}
-async function D(t, e, a) {
-  const n = t.getGraphName(), s = document.createElement("div");
-  s.className = "share-loading", s.textContent = "Checking account…", e.replaceChildren(s);
-  const o = await O(a);
-  if (o.error === "unauthorized") {
-    await t.settings.remove("relay_token"), C(t, e);
-    return;
-  }
-  e.replaceChildren();
-  const r = o.graphs.find((c) => c.name === n);
-  r ? F(t, e, a, r) : V(t, e, a);
+    row.appendChild(saveBtn);
+    const backBtn = document.createElement("button");
+    backBtn.className = "share-btn-secondary";
+    backBtn.textContent = "Back";
+    backBtn.addEventListener("click", () => renderSharePanel(viewer, container));
+    row.appendChild(backBtn);
+    w.appendChild(row);
+    container.replaceChildren(w);
 }
-function F(t, e, a, n) {
-  const s = document.createElement("div");
-  s.className = "share-synced";
-  const o = document.createElement("h4");
-  if (o.textContent = "Synced to your account", s.appendChild(o), n.syncedAt) {
-    const d = document.createElement("p");
-    d.className = "share-note", d.textContent = `Last synced: ${new Date(n.syncedAt).toLocaleString()}`, s.appendChild(d);
-  }
-  const r = document.createElement("p");
-  r.className = "share-note", r.textContent = n.encrypted ? "Encrypted — server cannot read your data." : "Public — stored unencrypted.", s.appendChild(r);
-  const c = document.createElement("button");
-  c.className = "share-cta-btn", c.textContent = "Update & Share", c.addEventListener("click", async () => {
-    c.disabled = !0, c.textContent = n.encrypted ? "Encrypting…" : "Syncing…";
+async function fetchGraphs(token) {
     try {
-      await x(t, e, a, n.encrypted);
-    } catch (d) {
-      c.disabled = !1, c.textContent = "Update & Share", S(s), b(s, d.message);
+        const res = await fetch(`${RELAY_URL}/api/graphs`, {
+            headers: { "Authorization": `Bearer ${token}` },
+        });
+        if (res.status === 401)
+            return { graphs: [], error: "unauthorized" };
+        if (!res.ok)
+            return { graphs: [], error: `status ${res.status}` };
+        const data = await res.json();
+        return { graphs: Array.isArray(data) ? data : [] };
+    }
+    catch (err) {
+        return { graphs: [], error: err.message };
     }
-  }), s.appendChild(c);
-  const i = document.createElement("a");
-  i.href = f, i.target = "_blank", i.rel = "noopener", i.className = "share-token-link", i.textContent = "Open dashboard", s.appendChild(i), _(t, e, s);
 }
-function V(t, e, a) {
-  const n = document.createElement("div");
-  n.className = "share-form";
-  const s = document.createElement("p");
-  s.className = "share-description", s.textContent = "Your graph will be encrypted and synced to your Backpack account. You’ll get a shareable link.", n.appendChild(s);
-  const o = document.createElement("button");
-  o.className = "share-cta-btn", o.textContent = "Sync & Share", o.addEventListener("click", async () => {
-    o.disabled = !0, o.textContent = "Encrypting…";
-    try {
-      await x(t, e, a, !0);
-    } catch (c) {
-      o.disabled = !1, o.textContent = "Sync & Share";
-      const i = c.message;
-      if (i.includes("encrypted") && i.includes("limit")) {
-        z(t, e, a);
+async function renderSyncView(viewer, container, token) {
+    const graphName = viewer.getGraphName();
+    const loading = document.createElement("div");
+    loading.className = "share-loading";
+    loading.textContent = "Checking account\u2026";
+    container.replaceChildren(loading);
+    const result = await fetchGraphs(token);
+    if (result.error === "unauthorized") {
+        await viewer.settings.remove("relay_token");
+        renderSharePanel(viewer, container);
         return;
-      }
-      S(n), b(n, i);
     }
-  }), n.appendChild(o);
-  const r = document.createElement("p");
-  r.className = "share-trust", r.textContent = "Your first encrypted graph is free. Data is encrypted before upload — we can’t read it.", n.appendChild(r), _(t, e, n);
-}
-function z(t, e, a) {
-  const n = document.createElement("div");
-  n.className = "share-quota";
-  const s = document.createElement("h4");
-  s.textContent = "Encrypted limit reached", n.appendChild(s);
-  const o = document.createElement("p");
-  o.className = "share-description", o.textContent = "Your free account includes one encrypted graph, which is already in use.", n.appendChild(o);
-  const r = document.createElement("a");
-  r.href = `${f}/settings`, r.target = "_blank", r.rel = "noopener", r.className = "share-cta-btn share-btn-link", r.textContent = "Upgrade for unlimited encryption", n.appendChild(r);
-  const c = document.createElement("div");
-  c.className = "share-divider", n.appendChild(c);
-  const i = document.createElement("p");
-  i.className = "share-description", i.textContent = "Or share as a public graph:", n.appendChild(i);
-  const d = document.createElement("p");
-  d.className = "share-warning", d.textContent = "Your graph data will be stored unencrypted and visible to the server and anyone with the link.", n.appendChild(d);
-  const l = document.createElement("label");
-  l.className = "share-toggle-row";
-  const u = document.createElement("input");
-  u.type = "checkbox", l.appendChild(u);
-  const p = document.createElement("span");
-  p.textContent = "I understand this graph will not be encrypted", l.appendChild(p), n.appendChild(l);
-  const h = document.createElement("button");
-  h.className = "share-btn-secondary", h.textContent = "Share as public graph", h.disabled = !0, u.addEventListener("change", () => {
-    h.disabled = !u.checked;
-  }), h.addEventListener("click", async () => {
-    h.disabled = !0, h.textContent = "Syncing…";
-    try {
-      await x(t, e, a, !1, "public");
-    } catch (w) {
-      h.disabled = !1, h.textContent = "Share as public graph", S(n), b(n, w.message);
+    container.replaceChildren();
+    const existing = result.graphs.find(g => g.name === graphName);
+    if (existing) {
+        renderAlreadySynced(viewer, container, token, existing);
+    }
+    else {
+        renderSyncForm(viewer, container, token);
     }
-  }), n.appendChild(h), _(t, e, n);
-}
-function _(t, e, a) {
-  const n = document.createElement("div");
-  n.className = "share-footer";
-  const s = document.createElement("button");
-  s.className = "share-token-link", s.textContent = "Sign out", s.addEventListener("click", async () => {
-    await t.settings.remove("relay_token"), C(t, e);
-  }), n.appendChild(s), a.appendChild(n), e.replaceChildren(a);
 }
-function S(t) {
-  for (const e of t.querySelectorAll(".share-error")) e.remove();
+function renderAlreadySynced(viewer, container, token, graph) {
+    const w = document.createElement("div");
+    w.className = "share-synced";
+    const h = document.createElement("h4");
+    h.textContent = "Synced to your account";
+    w.appendChild(h);
+    if (graph.syncedAt) {
+        const time = document.createElement("p");
+        time.className = "share-note";
+        time.textContent = `Last synced: ${new Date(graph.syncedAt).toLocaleString()}`;
+        w.appendChild(time);
+    }
+    const badge = document.createElement("p");
+    badge.className = "share-note";
+    badge.textContent = graph.encrypted ? "Encrypted \u2014 server cannot read your data." : "Public \u2014 stored unencrypted.";
+    w.appendChild(badge);
+    const updateBtn = document.createElement("button");
+    updateBtn.className = "share-cta-btn";
+    updateBtn.textContent = "Update & Share";
+    updateBtn.addEventListener("click", async () => {
+        updateBtn.disabled = true;
+        updateBtn.textContent = graph.encrypted ? "Encrypting\u2026" : "Syncing\u2026";
+        try {
+            await doSyncAndShare(viewer, container, token, graph.encrypted);
+        }
+        catch (err) {
+            updateBtn.disabled = false;
+            updateBtn.textContent = "Update & Share";
+            clearErrors(w);
+            appendError(w, err.message);
+        }
+    });
+    w.appendChild(updateBtn);
+    const dashLink = document.createElement("a");
+    dashLink.href = RELAY_URL;
+    dashLink.target = "_blank";
+    dashLink.rel = "noopener";
+    dashLink.className = "share-token-link";
+    dashLink.textContent = "Open dashboard";
+    w.appendChild(dashLink);
+    appendFooter(viewer, container, w);
 }
-function b(t, e) {
-  const a = document.createElement("p");
-  a.className = "share-error", a.textContent = e, t.appendChild(a);
+function renderSyncForm(viewer, container, token) {
+    const w = document.createElement("div");
+    w.className = "share-form";
+    const desc = document.createElement("p");
+    desc.className = "share-description";
+    desc.textContent = "Your graph will be encrypted and synced to your Backpack account. You\u2019ll get a shareable link.";
+    w.appendChild(desc);
+    const syncBtn = document.createElement("button");
+    syncBtn.className = "share-cta-btn";
+    syncBtn.textContent = "Sync & Share";
+    syncBtn.addEventListener("click", async () => {
+        syncBtn.disabled = true;
+        syncBtn.textContent = "Encrypting\u2026";
+        try {
+            await doSyncAndShare(viewer, container, token, true);
+        }
+        catch (err) {
+            syncBtn.disabled = false;
+            syncBtn.textContent = "Sync & Share";
+            const msg = err.message;
+            if (msg.includes("encrypted") && msg.includes("limit")) {
+                renderQuotaExceeded(viewer, container, token);
+                return;
+            }
+            clearErrors(w);
+            appendError(w, msg);
+        }
+    });
+    w.appendChild(syncBtn);
+    const freeNote = document.createElement("p");
+    freeNote.className = "share-trust";
+    freeNote.textContent = "Your first encrypted graph is free. Data is encrypted before upload\u200a\u2014\u200awe can\u2019t read it.";
+    w.appendChild(freeNote);
+    appendFooter(viewer, container, w);
 }
-async function Y(t, e) {
-  try {
-    const n = await (await fetch(T)).json(), o = await (await fetch(n.registration_endpoint, { method: "POST" })).json(), r = K(), c = await H(r), i = window.location.origin + "/oauth/callback", d = crypto.randomUUID(), l = new URL(n.authorization_endpoint);
-    l.searchParams.set("client_id", o.client_id), l.searchParams.set("redirect_uri", i), l.searchParams.set("response_type", "code"), l.searchParams.set("code_challenge", c), l.searchParams.set("code_challenge_method", "S256"), l.searchParams.set("state", d), l.searchParams.has("scope") || l.searchParams.set("scope", "openid email profile offline_access"), sessionStorage.setItem("share_oauth_state", d), sessionStorage.setItem("share_oauth_token_endpoint", n.token_endpoint), sessionStorage.setItem("share_oauth_client_id", o.client_id), sessionStorage.setItem("share_oauth_code_verifier", r), sessionStorage.setItem("share_oauth_redirect_uri", i);
-    const u = window.open(l.toString(), "backpack-share-auth", "width=500,height=700"), p = async (h) => {
-      var k;
-      if (((k = h.data) == null ? void 0 : k.type) !== "backpack-oauth-callback") return;
-      window.removeEventListener("message", p);
-      const { code: w, returnedState: E } = h.data;
-      if (E === d) {
-        G();
+function renderQuotaExceeded(viewer, container, token) {
+    const w = document.createElement("div");
+    w.className = "share-quota";
+    const h = document.createElement("h4");
+    h.textContent = "Encrypted limit reached";
+    w.appendChild(h);
+    const desc = document.createElement("p");
+    desc.className = "share-description";
+    desc.textContent = "Your free account includes one encrypted graph, which is already in use.";
+    w.appendChild(desc);
+    const upgradeBtn = document.createElement("a");
+    upgradeBtn.href = `${RELAY_URL}/settings`;
+    upgradeBtn.target = "_blank";
+    upgradeBtn.rel = "noopener";
+    upgradeBtn.className = "share-cta-btn share-btn-link";
+    upgradeBtn.textContent = "Upgrade for unlimited encryption";
+    w.appendChild(upgradeBtn);
+    const divider = document.createElement("div");
+    divider.className = "share-divider";
+    w.appendChild(divider);
+    const publicLabel = document.createElement("p");
+    publicLabel.className = "share-description";
+    publicLabel.textContent = "Or share as a public graph:";
+    w.appendChild(publicLabel);
+    const warning = document.createElement("p");
+    warning.className = "share-warning";
+    warning.textContent = "Your graph data will be stored unencrypted and visible to the server and anyone with the link.";
+    w.appendChild(warning);
+    const confirmRow = document.createElement("label");
+    confirmRow.className = "share-toggle-row";
+    const confirmCb = document.createElement("input");
+    confirmCb.type = "checkbox";
+    confirmRow.appendChild(confirmCb);
+    const confirmLabel = document.createElement("span");
+    confirmLabel.textContent = "I understand this graph will not be encrypted";
+    confirmRow.appendChild(confirmLabel);
+    w.appendChild(confirmRow);
+    const publicBtn = document.createElement("button");
+    publicBtn.className = "share-btn-secondary";
+    publicBtn.textContent = "Share as public graph";
+    publicBtn.disabled = true;
+    confirmCb.addEventListener("change", () => {
+        publicBtn.disabled = !confirmCb.checked;
+    });
+    publicBtn.addEventListener("click", async () => {
+        publicBtn.disabled = true;
+        publicBtn.textContent = "Syncing\u2026";
         try {
-          const g = await (await fetch(n.token_endpoint, {
-            method: "POST",
-            headers: { "Content-Type": "application/x-www-form-urlencoded" },
-            body: new URLSearchParams({ grant_type: "authorization_code", code: w, redirect_uri: i, client_id: o.client_id, code_verifier: r }).toString()
-          })).json();
-          if (!g.access_token) {
-            b(e, "Token exchange failed: no access token returned.");
-            return;
-          }
-          await t.settings.set("relay_token", g.access_token), C(t, e);
-        } catch (y) {
-          b(e, `Token exchange failed: ${y.message}`);
+            await doSyncAndShare(viewer, container, token, false, "public");
+        }
+        catch (err) {
+            publicBtn.disabled = false;
+            publicBtn.textContent = "Share as public graph";
+            clearErrors(w);
+            appendError(w, err.message);
         }
-      }
-    };
-    window.addEventListener("message", p), (!u || u.closed) && (window.location.href = l.toString());
-  } catch (a) {
-    b(e, `Auth failed: ${a.message}`);
-  }
+    });
+    w.appendChild(publicBtn);
+    appendFooter(viewer, container, w);
+}
+function appendFooter(viewer, container, w) {
+    const footer = document.createElement("div");
+    footer.className = "share-footer";
+    const logoutBtn = document.createElement("button");
+    logoutBtn.className = "share-token-link";
+    logoutBtn.textContent = "Sign out";
+    logoutBtn.addEventListener("click", async () => {
+        await viewer.settings.remove("relay_token");
+        renderSharePanel(viewer, container);
+    });
+    footer.appendChild(logoutBtn);
+    w.appendChild(footer);
+    container.replaceChildren(w);
+}
+function clearErrors(parent) {
+    for (const el of parent.querySelectorAll(".share-error"))
+        el.remove();
+}
+function appendError(parent, msg) {
+    const el = document.createElement("p");
+    el.className = "share-error";
+    el.textContent = msg;
+    parent.appendChild(el);
 }
-async function x(t, e, a, n, s = "private") {
-  const o = t.getGraph(), r = t.getGraphName();
-  if (!o || !r) throw new Error("No graph loaded");
-  const c = new TextEncoder().encode(JSON.stringify(o));
-  let i, d, l = "";
-  if (n) {
-    const y = await import("../index-B8_hkT8R.js"), g = await y.generateX25519Identity(), U = await y.identityToRecipient(g), N = new y.Encrypter();
-    N.addRecipient(U), i = await N.encrypt(c), d = "age-v1", l = btoa(g).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-  } else
-    i = c, d = "plaintext";
-  const u = await j(r, i, d, o), p = `${f}/api/graphs/${encodeURIComponent(r)}/sync${s === "public" ? "?visibility=public" : ""}`, h = await v(a, p, {
-    method: "PUT",
-    headers: { "Content-Type": "application/octet-stream" },
-    body: u
-  });
-  if (!h.ok) {
-    if (h.status === 401)
-      throw await t.settings.remove("relay_token"), C(t, e), new Error("Session expired. Please sign in again.");
-    let y = `Sync failed (${h.status})`;
+// --- OAuth PKCE flow ---
+async function startOAuthFlow(viewer, container) {
     try {
-      const g = await h.json();
-      g.error && (y = g.error);
-    } catch {
+        const metaRes = await fetch(OAUTH_METADATA_URL);
+        const meta = (await metaRes.json());
+        const regRes = await fetch(meta.registration_endpoint, { method: "POST" });
+        const client = (await regRes.json());
+        const codeVerifier = generateCodeVerifier();
+        const codeChallenge = await generateCodeChallenge(codeVerifier);
+        const redirectUri = window.location.origin + "/oauth/callback";
+        const state = crypto.randomUUID();
+        const authUrl = new URL(meta.authorization_endpoint);
+        authUrl.searchParams.set("client_id", client.client_id);
+        authUrl.searchParams.set("redirect_uri", redirectUri);
+        authUrl.searchParams.set("response_type", "code");
+        authUrl.searchParams.set("code_challenge", codeChallenge);
+        authUrl.searchParams.set("code_challenge_method", "S256");
+        authUrl.searchParams.set("state", state);
+        if (!authUrl.searchParams.has("scope")) {
+            authUrl.searchParams.set("scope", "openid email profile offline_access");
+        }
+        sessionStorage.setItem("share_oauth_state", state);
+        sessionStorage.setItem("share_oauth_token_endpoint", meta.token_endpoint);
+        sessionStorage.setItem("share_oauth_client_id", client.client_id);
+        sessionStorage.setItem("share_oauth_code_verifier", codeVerifier);
+        sessionStorage.setItem("share_oauth_redirect_uri", redirectUri);
+        const popup = window.open(authUrl.toString(), "backpack-share-auth", "width=500,height=700");
+        const handler = async (event) => {
+            if (event.data?.type !== "backpack-oauth-callback")
+                return;
+            window.removeEventListener("message", handler);
+            const { code, returnedState } = event.data;
+            if (returnedState !== state)
+                return;
+            clearOAuthSessionStorage();
+            try {
+                const tokenRes = await fetch(meta.token_endpoint, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                    body: new URLSearchParams({ grant_type: "authorization_code", code, redirect_uri: redirectUri, client_id: client.client_id, code_verifier: codeVerifier }).toString(),
+                });
+                const tokenData = (await tokenRes.json());
+                if (!tokenData.access_token) {
+                    appendError(container, "Token exchange failed: no access token returned.");
+                    return;
+                }
+                await viewer.settings.set("relay_token", tokenData.access_token);
+                renderSharePanel(viewer, container);
+            }
+            catch (err) {
+                appendError(container, `Token exchange failed: ${err.message}`);
+            }
+        };
+        window.addEventListener("message", handler);
+        if (!popup || popup.closed) {
+            window.location.href = authUrl.toString();
+        }
+    }
+    catch (err) {
+        appendError(container, `Auth failed: ${err.message}`);
+    }
+}
+// --- Sync & Share ---
+async function doSyncAndShare(viewer, container, token, encrypted, visibility = "private") {
+    const graph = viewer.getGraph();
+    const graphName = viewer.getGraphName();
+    if (!graph || !graphName)
+        throw new Error("No graph loaded");
+    // Step 1: Build BPAK envelope
+    const graphJSON = new TextEncoder().encode(JSON.stringify(graph));
+    let payload;
+    let format;
+    let fragmentKey = "";
+    if (encrypted) {
+        const age = await import("age-encryption");
+        const secretKey = await age.generateX25519Identity();
+        const publicKey = await age.identityToRecipient(secretKey);
+        const e = new age.Encrypter();
+        e.addRecipient(publicKey);
+        payload = await e.encrypt(graphJSON);
+        format = "age-v1";
+        fragmentKey = btoa(secretKey).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+    }
+    else {
+        payload = graphJSON;
+        format = "plaintext";
     }
-    throw new Error(y);
-  }
-  const w = await v(a, `${f}/api/graphs/${encodeURIComponent(r)}/share`, {
-    method: "POST"
-  });
-  if (!w.ok) {
-    A(e, null, n, void 0);
-    return;
-  }
-  const E = await w.json(), k = l ? `${E.url}#k=${l}` : E.url;
-  A(e, k, n, E.expires_at);
+    const envelope = await buildEnvelope(graphName, payload, format, graph);
+    // Step 2: Sync to cloud
+    const syncUrl = `${RELAY_URL}/api/graphs/${encodeURIComponent(graphName)}/sync${visibility === "public" ? "?visibility=public" : ""}`;
+    const syncRes = await relayFetch(token, syncUrl, {
+        method: "PUT",
+        headers: { "Content-Type": "application/octet-stream" },
+        body: envelope,
+    });
+    if (!syncRes.ok) {
+        if (syncRes.status === 401) {
+            await viewer.settings.remove("relay_token");
+            renderSharePanel(viewer, container);
+            throw new Error("Session expired. Please sign in again.");
+        }
+        let errorMsg = `Sync failed (${syncRes.status})`;
+        try {
+            const body = await syncRes.json();
+            if (body.error)
+                errorMsg = body.error;
+        }
+        catch { /* ignore */ }
+        throw new Error(errorMsg);
+    }
+    // Step 3: Create share link
+    const shareRes = await relayFetch(token, `${RELAY_URL}/api/graphs/${encodeURIComponent(graphName)}/share`, {
+        method: "POST",
+    });
+    if (!shareRes.ok) {
+        // Sync succeeded but share link creation failed — still show success without link
+        renderSuccess(container, null, encrypted, undefined);
+        return;
+    }
+    const shareData = (await shareRes.json());
+    const shareLink = fragmentKey ? `${shareData.url}#k=${fragmentKey}` : shareData.url;
+    renderSuccess(container, shareLink, encrypted, shareData.expires_at);
 }
-async function v(t, e, a = {}) {
-  const n = new Headers(a.headers);
-  return n.set("Authorization", `Bearer ${t}`), fetch(e, { ...a, headers: n });
+async function relayFetch(token, url, init = {}) {
+    const headers = new Headers(init.headers);
+    headers.set("Authorization", `Bearer ${token}`);
+    return fetch(url, { ...init, headers });
 }
-async function j(t, e, a, n) {
-  const s = new Uint8Array(e).buffer, o = await crypto.subtle.digest("SHA-256", s), r = "sha256:" + Array.from(new Uint8Array(o)).map((h) => h.toString(16).padStart(2, "0")).join(""), c = /* @__PURE__ */ new Set();
-  for (const h of n.nodes) c.add(h.type);
-  const i = JSON.stringify({
-    format: a,
-    created_at: (/* @__PURE__ */ new Date()).toISOString(),
-    backpack_name: t,
-    graph_count: 1,
-    checksum: r,
-    node_count: n.nodes.length,
-    edge_count: n.edges.length,
-    node_types: Array.from(c)
-  }), d = new TextEncoder().encode(i), l = new ArrayBuffer(4);
-  new DataView(l).setUint32(0, d.length, !1);
-  const u = new Uint8Array(9 + d.length + e.length);
-  let p = 0;
-  return u.set(P, p), p += 4, u[p] = R, p += 1, u.set(new Uint8Array(l), p), p += 4, u.set(d, p), p += d.length, u.set(e, p), u;
+// --- BPAK envelope builder ---
+async function buildEnvelope(name, payload, format, graph) {
+    const payloadCopy = new Uint8Array(payload).buffer;
+    const hash = await crypto.subtle.digest("SHA-256", payloadCopy);
+    const checksum = "sha256:" + Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, "0")).join("");
+    // Collect node type names for dashboard stats
+    const typeSet = new Set();
+    for (const node of graph.nodes)
+        typeSet.add(node.type);
+    const header = JSON.stringify({
+        format,
+        created_at: new Date().toISOString(),
+        backpack_name: name,
+        graph_count: 1,
+        checksum,
+        node_count: graph.nodes.length,
+        edge_count: graph.edges.length,
+        node_types: Array.from(typeSet),
+    });
+    const headerBytes = new TextEncoder().encode(header);
+    const headerLenBuf = new ArrayBuffer(4);
+    new DataView(headerLenBuf).setUint32(0, headerBytes.length, false);
+    const result = new Uint8Array(4 + 1 + 4 + headerBytes.length + payload.length);
+    let off = 0;
+    result.set(BPAK_MAGIC, off);
+    off += 4;
+    result[off] = BPAK_VERSION;
+    off += 1;
+    result.set(new Uint8Array(headerLenBuf), off);
+    off += 4;
+    result.set(headerBytes, off);
+    off += headerBytes.length;
+    result.set(payload, off);
+    return result;
 }
-function A(t, e, a, n) {
-  const s = document.createElement("div");
-  s.className = "share-success";
-  const o = document.createElement("h4");
-  if (o.textContent = e ? "Synced & shared!" : "Synced!", s.appendChild(o), e) {
-    const r = document.createElement("div");
-    r.className = "share-link-row";
-    const c = document.createElement("input");
-    c.type = "text", c.readOnly = !0, c.value = e, c.className = "share-link-input", r.appendChild(c);
-    const i = document.createElement("button");
-    i.className = "share-btn-primary", i.textContent = "Copy", i.addEventListener("click", () => {
-      navigator.clipboard.writeText(e).then(() => {
-        i.textContent = "Copied!", setTimeout(() => {
-          i.textContent = "Copy";
-        }, 2e3);
-      }).catch(() => {
-        i.textContent = "Failed", setTimeout(() => {
-          i.textContent = "Copy";
-        }, 2e3);
-      });
-    }), r.appendChild(i), s.appendChild(r);
-  }
-  if (a) {
-    const r = document.createElement("p");
-    r.className = "share-note", r.textContent = "The decryption key is embedded in the link. Share the complete link — if the #k= part is removed, recipients won’t be able to decrypt. The server cannot read your data.", s.appendChild(r);
-  } else {
-    const r = document.createElement("p");
-    r.className = "share-note", r.textContent = "This graph is stored unencrypted. Anyone with the link can view it.", s.appendChild(r);
-  }
-  if (n) {
-    const r = document.createElement("p");
-    r.className = "share-note", r.textContent = `Expires: ${new Date(n).toLocaleDateString()}`, s.appendChild(r);
-  }
-  t.replaceChildren(s);
+// --- Success state ---
+function renderSuccess(container, shareLink, encrypted, expiresAt) {
+    const w = document.createElement("div");
+    w.className = "share-success";
+    const h = document.createElement("h4");
+    h.textContent = shareLink ? "Synced & shared!" : "Synced!";
+    w.appendChild(h);
+    if (shareLink) {
+        const row = document.createElement("div");
+        row.className = "share-link-row";
+        const input = document.createElement("input");
+        input.type = "text";
+        input.readOnly = true;
+        input.value = shareLink;
+        input.className = "share-link-input";
+        row.appendChild(input);
+        const copyBtn = document.createElement("button");
+        copyBtn.className = "share-btn-primary";
+        copyBtn.textContent = "Copy";
+        copyBtn.addEventListener("click", () => {
+            navigator.clipboard.writeText(shareLink).then(() => {
+                copyBtn.textContent = "Copied!";
+                setTimeout(() => { copyBtn.textContent = "Copy"; }, 2000);
+            }).catch(() => {
+                copyBtn.textContent = "Failed";
+                setTimeout(() => { copyBtn.textContent = "Copy"; }, 2000);
+            });
+        });
+        row.appendChild(copyBtn);
+        w.appendChild(row);
+    }
+    if (encrypted) {
+        const note = document.createElement("p");
+        note.className = "share-note";
+        note.textContent = "The decryption key is embedded in the link. Share the complete link \u2014 if the #k= part is removed, recipients won\u2019t be able to decrypt. The server cannot read your data.";
+        w.appendChild(note);
+    }
+    else {
+        const note = document.createElement("p");
+        note.className = "share-note";
+        note.textContent = "This graph is stored unencrypted. Anyone with the link can view it.";
+        w.appendChild(note);
+    }
+    if (expiresAt) {
+        const exp = document.createElement("p");
+        exp.className = "share-note";
+        exp.textContent = `Expires: ${new Date(expiresAt).toLocaleDateString()}`;
+        w.appendChild(exp);
+    }
+    container.replaceChildren(w);
 }
-function G() {
-  sessionStorage.removeItem("share_oauth_state"), sessionStorage.removeItem("share_oauth_token_endpoint"), sessionStorage.removeItem("share_oauth_client_id"), sessionStorage.removeItem("share_oauth_code_verifier"), sessionStorage.removeItem("share_oauth_redirect_uri");
+// --- OAuth session helpers ---
+function clearOAuthSessionStorage() {
+    sessionStorage.removeItem("share_oauth_state");
+    sessionStorage.removeItem("share_oauth_token_endpoint");
+    sessionStorage.removeItem("share_oauth_client_id");
+    sessionStorage.removeItem("share_oauth_code_verifier");
+    sessionStorage.removeItem("share_oauth_redirect_uri");
 }
-function K() {
-  const t = new Uint8Array(32);
-  return crypto.getRandomValues(t), btoa(String.fromCharCode(...t)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+// --- PKCE helpers ---
+function generateCodeVerifier() {
+    const arr = new Uint8Array(32);
+    crypto.getRandomValues(arr);
+    return btoa(String.fromCharCode(...arr)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
-async function H(t) {
-  const e = new TextEncoder().encode(t), a = new Uint8Array(e).buffer, n = await crypto.subtle.digest("SHA-256", a);
-  return btoa(String.fromCharCode(...new Uint8Array(n))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+async function generateCodeChallenge(verifier) {
+    const data = new TextEncoder().encode(verifier);
+    const dataCopy = new Uint8Array(data).buffer;
+    const digest = await crypto.subtle.digest("SHA-256", dataCopy);
+    return btoa(String.fromCharCode(...new Uint8Array(digest))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
-export {
-  M as activate
-};