backpack-viewer 0.7.0 → 0.7.2

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

@@ -0,0 +1,199 @@
+const E = "https://app.backpackontology.com", x = `${E}/.well-known/oauth-authorization-server`, _ = new Uint8Array([66, 80, 65, 75]), S = 1;
+let m = null;
+function I(e) {
+  e.registerTaskbarIcon({
+    label: "Share",
+    iconText: "↗",
+    position: "top-right",
+    onClick: () => N(e)
+  });
+}
+function N(e) {
+  if (m && m.isVisible()) {
+    m.setVisible(!1);
+    return;
+  }
+  const t = e.getGraphName();
+  if (!t) return;
+  const n = document.createElement("div");
+  n.className = "share-panel-body", m ? (m.element.replaceChildren(), m.element.appendChild(n), m.setTitle(`Share "${t}"`), m.setVisible(!0), m.bringToFront()) : (n.textContent = "Loading...", m = e.mountPanel(n, {
+    title: `Share "${t}"`,
+    defaultPosition: { left: window.innerWidth - 420, top: 80 },
+    showFullscreenButton: !1,
+    onClose: () => {
+      m = null;
+    }
+  })), C(e, n);
+}
+async function C(e, t) {
+  const n = await e.settings.get("relay_token");
+  t.replaceChildren(), n ? L(e, t, n) : A(e, t);
+}
+function A(e, t) {
+  const n = document.createElement("div");
+  n.className = "share-upsell", n.innerHTML = `
+    <h4>Share this graph with anyone</h4>
+    <p>Encrypt your graph and get a shareable link. Recipients open it in their browser — no install needed. Your data stays encrypted on our servers.</p>
+  `;
+  const a = document.createElement("button");
+  a.className = "share-cta-btn", a.textContent = "Sign in to share", a.addEventListener("click", () => T(e, t)), n.appendChild(a);
+  const s = document.createElement("button");
+  s.className = "share-token-link", s.textContent = "Or paste an API token", s.addEventListener("click", () => P(e, t)), n.appendChild(s);
+  const i = document.createElement("p");
+  i.className = "share-trust", i.textContent = "Free account. Your graph is encrypted before upload — we can't read it.", n.appendChild(i), t.replaceChildren(n);
+}
+function P(e, t) {
+  const n = document.createElement("div");
+  n.className = "share-token-input";
+  const a = document.createElement("p");
+  a.textContent = "Paste your API token from Backpack App settings:", n.appendChild(a);
+  const s = document.createElement("input");
+  s.type = "password", s.placeholder = "Token", s.className = "share-input", n.appendChild(s);
+  const i = document.createElement("div");
+  i.className = "share-btn-row";
+  const d = document.createElement("button");
+  d.className = "share-btn-primary", d.textContent = "Save", d.addEventListener("click", async () => {
+    const c = s.value.trim();
+    c && (await e.settings.set("relay_token", c), C(e, t));
+  }), i.appendChild(d);
+  const l = document.createElement("button");
+  l.className = "share-btn-secondary", l.textContent = "Back", l.addEventListener("click", () => C(e, t)), i.appendChild(l), n.appendChild(i), t.replaceChildren(n);
+}
+async function T(e, t) {
+  try {
+    const a = await (await e.fetch(x)).json(), i = await (await e.fetch(a.registration_endpoint, { method: "POST" })).json(), d = B(), l = await $(d), c = window.location.origin + "/oauth/callback", o = crypto.randomUUID(), r = new URL(a.authorization_endpoint);
+    r.searchParams.set("client_id", i.client_id), r.searchParams.set("redirect_uri", c), r.searchParams.set("response_type", "code"), r.searchParams.set("code_challenge", l), r.searchParams.set("code_challenge_method", "S256"), r.searchParams.set("state", o), r.searchParams.has("scope") || r.searchParams.set("scope", "openid email profile offline_access"), sessionStorage.setItem("share_oauth_state", o);
+    const h = window.open(r.toString(), "backpack-share-auth", "width=500,height=700"), g = async (p) => {
+      var f;
+      if (((f = p.data) == null ? void 0 : f.type) !== "backpack-oauth-callback") return;
+      window.removeEventListener("message", g);
+      const { code: u, returnedState: k } = p.data;
+      if (k !== o) return;
+      const w = await (await e.fetch(a.token_endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams({ grant_type: "authorization_code", code: u, redirect_uri: c, client_id: i.client_id, code_verifier: d }).toString()
+      })).json();
+      await e.settings.set("relay_token", w.access_token), C(e, t);
+    };
+    if (window.addEventListener("message", g), !h || h.closed) {
+      const p = document.createElement("p");
+      p.className = "share-error", p.textContent = "Popup blocked. ";
+      const u = document.createElement("a");
+      u.href = r.toString(), u.target = "_blank", u.textContent = "Click here to sign in", p.appendChild(u), t.appendChild(p);
+    }
+  } catch (n) {
+    const a = document.createElement("p");
+    a.className = "share-error", a.textContent = `Auth failed: ${n.message}`, t.appendChild(a);
+  }
+}
+function L(e, t, n) {
+  const a = document.createElement("div");
+  a.className = "share-form";
+  const s = document.createElement("label");
+  s.className = "share-toggle-row";
+  const i = document.createElement("input");
+  i.type = "checkbox", i.checked = !0, s.appendChild(i);
+  const d = document.createElement("span");
+  d.textContent = "Encrypt (recommended)", s.appendChild(d), a.appendChild(s);
+  const l = document.createElement("div");
+  l.className = "share-pass-row";
+  const c = document.createElement("input");
+  c.type = "password", c.placeholder = "Passphrase (optional)", c.className = "share-input", l.appendChild(c), a.appendChild(l);
+  const o = document.createElement("button");
+  o.className = "share-btn-primary", o.textContent = "Share", o.addEventListener("click", async () => {
+    o.disabled = !0, o.textContent = "Encrypting...";
+    try {
+      await U(e, t, n, i.checked, c.value.trim());
+    } catch (g) {
+      o.disabled = !1, o.textContent = "Share";
+      const p = document.createElement("p");
+      p.className = "share-error", p.textContent = g.message, a.appendChild(p);
+    }
+  }), a.appendChild(o);
+  const r = document.createElement("p");
+  r.className = "share-note", r.textContent = "Recipients open the link in their browser. No install needed.", a.appendChild(r);
+  const h = document.createElement("button");
+  h.className = "share-token-link", h.textContent = "Sign out", h.addEventListener("click", async () => {
+    await e.settings.remove("relay_token"), C(e, t);
+  }), a.appendChild(h), t.replaceChildren(a);
+}
+async function U(e, t, n, a, s) {
+  const i = e.getGraph(), d = e.getGraphName();
+  if (!i || !d) throw new Error("No graph loaded");
+  const l = new TextEncoder().encode(JSON.stringify(i));
+  let c, o, r = "";
+  if (a) {
+    const y = await import("../index-B-LFGJqd.js"), w = await y.generateX25519Identity(), f = await y.identityToRecipient(w), b = new y.Encrypter();
+    b.addRecipient(f), c = await b.encrypt(l), o = "age-v1", r = btoa(w).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+  } else
+    c = l, o = "plaintext";
+  const h = await R(d, c, o), g = {
+    "Content-Type": "application/octet-stream",
+    Authorization: `Bearer ${n}`
+  };
+  s && (g["X-Passphrase"] = s);
+  const p = await e.fetch(`${E}/v1/share`, {
+    method: "POST",
+    headers: g,
+    body: h
+  });
+  if (!p.ok) {
+    const y = await p.text().catch(() => "");
+    throw p.status === 401 ? (await e.settings.remove("relay_token"), C(e, t), new Error("Session expired. Please sign in again.")) : new Error(`Upload failed: ${y}`);
+  }
+  const u = await p.json(), k = r ? `${u.url}#k=${r}` : u.url;
+  v(t, k, a, u.expires_at);
+}
+async function R(e, t, n) {
+  const a = new ArrayBuffer(t.byteLength);
+  new Uint8Array(a).set(t);
+  const s = await crypto.subtle.digest("SHA-256", a), i = "sha256:" + Array.from(new Uint8Array(s)).map((h) => h.toString(16).padStart(2, "0")).join(""), d = JSON.stringify({
+    format: n,
+    created_at: (/* @__PURE__ */ new Date()).toISOString(),
+    backpack_name: e,
+    graph_count: 1,
+    checksum: i
+  }), l = new TextEncoder().encode(d), c = new ArrayBuffer(4);
+  new DataView(c).setUint32(0, l.length, !1);
+  const o = new Uint8Array(9 + l.length + t.length);
+  let r = 0;
+  return o.set(_, r), r += 4, o[r] = S, r += 1, o.set(new Uint8Array(c), r), r += 4, o.set(l, r), r += l.length, o.set(t, r), o;
+}
+function v(e, t, n, a) {
+  const s = document.createElement("div");
+  s.className = "share-success";
+  const i = document.createElement("h4");
+  i.textContent = "Shared!", s.appendChild(i);
+  const d = document.createElement("div");
+  d.className = "share-link-row";
+  const l = document.createElement("input");
+  l.type = "text", l.readOnly = !0, l.value = t, l.className = "share-link-input", d.appendChild(l);
+  const c = document.createElement("button");
+  if (c.className = "share-btn-primary", c.textContent = "Copy", c.addEventListener("click", () => {
+    navigator.clipboard.writeText(t), c.textContent = "Copied!", setTimeout(() => {
+      c.textContent = "Copy";
+    }, 2e3);
+  }), d.appendChild(c), s.appendChild(d), n) {
+    const o = document.createElement("p");
+    o.className = "share-note", o.textContent = "The decryption key is in the link. Anyone with the full link can view. The server cannot read your data.", s.appendChild(o);
+  }
+  if (a) {
+    const o = document.createElement("p");
+    o.className = "share-note", o.textContent = `Expires: ${new Date(a).toLocaleDateString()}`, s.appendChild(o);
+  }
+  e.replaceChildren(s);
+}
+function B() {
+  const e = new Uint8Array(32);
+  return crypto.getRandomValues(e), btoa(String.fromCharCode(...e)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+async function $(e) {
+  const t = new TextEncoder().encode(e), n = new ArrayBuffer(t.byteLength);
+  new Uint8Array(n).set(t);
+  const a = await crypto.subtle.digest("SHA-256", n);
+  return btoa(String.fromCharCode(...new Uint8Array(a))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+export {
+  I as activate
+};

package/dist/extensions/share/style.css

@@ -0,0 +1,151 @@
+.share-panel-body {
+  padding: 16px;
+  font-size: 13px;
+  color: var(--text);
+  min-width: 300px;
+}
+
+.share-upsell h4 {
+  margin: 0 0 8px;
+  font-size: 15px;
+}
+
+.share-upsell p {
+  margin: 0 0 12px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.share-cta-btn {
+  display: block;
+  width: 100%;
+  padding: 10px 16px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+
+.share-cta-btn:hover {
+  opacity: 0.9;
+}
+
+.share-token-link {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 4px 0;
+  text-decoration: underline;
+}
+
+.share-trust {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 12px;
+  line-height: 1.4;
+}
+
+.share-input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  color: var(--text);
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.share-btn-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.share-btn-primary {
+  padding: 8px 16px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.share-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.share-btn-secondary {
+  padding: 8px 16px;
+  background: var(--bg-secondary);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.share-toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  cursor: pointer;
+}
+
+.share-pass-row {
+  margin-bottom: 12px;
+}
+
+.share-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.share-note {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 8px;
+  line-height: 1.4;
+}
+
+.share-error {
+  color: var(--danger, #e53e3e);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.share-success h4 {
+  margin: 0 0 12px;
+  color: var(--text);
+}
+
+.share-link-row {
+  display: flex;
+  gap: 8px;
+}
+
+.share-link-input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  color: var(--text);
+  font-size: 12px;
+  font-family: monospace;
+  box-sizing: border-box;
+}
+
+.share-token-input p {
+  margin: 0 0 8px;
+  color: var(--text-muted);
+}

package/dist/extensions/share/vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+export default defineConfig({
+    build: {
+        lib: {
+            entry: resolve(__dirname, "src/index.ts"),
+            formats: ["es"],
+            fileName: () => "src/index.js",
+        },
+        outDir: resolve(__dirname, "../../dist/extensions/share"),
+        emptyOutDir: false,
+        rollupOptions: {
+            // Don't externalize anything — bundle all deps into one file
+            external: [],
+        },
+    },
+});

package/dist/server-api-routes.js

@@ -428,6 +428,24 @@ export async function handleApiRequest(req, res, ctx) {
                 return true;
             }
         }
+        // --- /oauth/callback (for Share extension OAuth popup) ---
+        if (url.startsWith("/oauth/callback") && method === "GET") {
+            res.writeHead(200, { "Content-Type": "text/html" });
+            res.end(`<!DOCTYPE html><html><body><script>
+        var params = new URLSearchParams(window.location.search);
+        var code = params.get("code");
+        var state = params.get("state");
+        if (window.opener && code) {
+          window.opener.postMessage({
+            type: "backpack-oauth-callback",
+            code: code,
+            returnedState: state
+          }, "*");
+        }
+        window.close();
+      </script></body></html>`);
+            return true;
+        }
         return false;
     }
     catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backpack-viewer",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Web-based graph visualizer for backpack-ontology — Canvas 2D, force-directed layout, live reload",
   "license": "Apache-2.0",
   "author": "Noah Irzinger",
@@ -14,7 +14,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "rm -rf dist && tsc && tsc -p tsconfig.extensions.json && cp src/style.css dist/ && node scripts/build-extensions.js && vite build",
+    "build": "rm -rf dist && tsc && tsc -p tsconfig.extensions.json && cp src/style.css dist/ && node scripts/build-extensions.js && node scripts/bundle-extensions.js && vite build",
     "preview": "vite preview",
     "serve": "node bin/serve.js",
     "prepare": "npm run build",