@jtfmumm/patchwork-standalone-frame 0.3.1 → 0.4.0

package/README.md

@@ -32,7 +32,7 @@ pnpm add -D @jtfmumm/automerge-deps @jtfmumm/patchwork-standalone-vite vite
 
 ### 3. Configure automerge-deps
 
-Create `automerge-deps.json` to specify the tool and sync server:
+Create `automerge-deps.json` to specify the tool and sync server for fetching the tool:
 
 ```json
 {
@@ -57,13 +57,13 @@ This downloads the tool's FolderDoc from the sync server and writes it to `node_
 ```typescript
 import { Repo } from "@automerge/automerge-repo";
 import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb";
-import { BrowserWebSocketClientAdapter } from "@automerge/automerge-repo-network-websocket";
+import { WebSocketClientAdapter } from "@automerge/automerge-repo-network-websocket";
 import { mountStandaloneApp } from "@jtfmumm/patchwork-standalone-frame";
 import { plugins } from "my-tool";
 
 const repo = new Repo({
   storage: new IndexedDBStorageAdapter(),
-  network: [new BrowserWebSocketClientAdapter("wss://your-sync-server.example.com")],
+  network: [new WebSocketClientAdapter("wss://your-sync-server.example.com")],
 });
 
 const root = document.getElementById("root");
@@ -177,8 +177,27 @@ Pass `{ legacyMode: true, repo }` to use a plain automerge repo without keyhive.
 
 ### Keyhive mode (default)
 
-When `legacyMode` is not set, the frame initializes keyhive automatically, including WASM loading, repo creation, and access control. The sync server URL is resolved in this order:
+When `legacyMode` is not set, the frame initializes keyhive automatically, including WASM loading, repo creation, and access control.
 
-1. `VITE_SYNC_URL` environment variable
-2. `tool.syncUrl` from the registration
-3. `ws://localhost:3030` (default)
+```typescript
+import { plugins } from "my-tool";
+
+mountStandaloneApp(root, plugins, {
+  syncUrl: "wss://your-keyhive-sync-server.example.com",
+});
+```
+
+### Config options
+
+| Option | Description |
+|--------|-------------|
+| `legacyMode` | Use plain automerge docs without keyhive. Default: `false` |
+| `repo` | Pre-built repo for legacy mode. Required when `legacyMode` is `true` |
+| `syncUrl` | WebSocket sync server URL for keyhive mode |
+
+The sync server URL is resolved in this order:
+
+1. `config.syncUrl`
+2. `VITE_SYNC_URL` environment variable
+3. `tool.syncUrl` from the registration
+4. `ws://localhost:3030` (default)

package/dist/index.d.ts

@@ -15,17 +15,16 @@ export interface ToolRegistration<D = unknown> {
     isDocReady?: (doc: D) => boolean;
     render: (handle: DocHandle<D>, element: ToolElement) => (() => void);
 }
-/** Duck-typed doc handle — structurally compatible with automerge-repo DocHandle */
+/** Duck-typed doc handle — structurally compatible with automerge-repo 2.5.x DocHandle */
 export interface FrameDocHandle<D = unknown> {
     url: string;
     doc(): D | undefined;
-    whenReady(): Promise<unknown>;
     on(event: string, cb: (...args: unknown[]) => void): void;
     off(event: string, cb: (...args: unknown[]) => void): void;
 }
-/** Duck-typed repo — structurally compatible with automerge-repo Repo */
+/** Duck-typed repo — structurally compatible with automerge-repo 2.5.x Repo */
 export interface FrameRepo {
-    find<D = unknown>(url: string): FrameDocHandle<D>;
+    find<D = unknown>(url: string): Promise<FrameDocHandle<D>>;
     create<D = unknown>(initialValue: D): FrameDocHandle<D>;
     delete(url: string): void;
 }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { delegateEvents as xe, createComponent as m, insert as f, effect as D, style as E, memo as Z, setStyleProperty as X, template as w, use as Ee, setAttribute as He, render as Pe } from "solid-js/web";
+import { delegateEvents as xe, createComponent as m, insert as f, effect as D, style as E, memo as Z, setStyleProperty as X, template as w, use as Ee, setAttribute as Re, render as Pe } from "solid-js/web";
 import { createSignal as x, createEffect as ie, onCleanup as q, createMemo as we, Show as _, For as Me, onMount as $e } from "solid-js";
 const Fe = 100;
 function Oe(e, t) {
@@ -15,18 +15,18 @@ function ve(e, t) {
     return [];
   }
 }
-function Re(e, t, l) {
+function He(e, t, l) {
   localStorage.setItem(Oe(e, t), JSON.stringify(l));
 }
 function Ie(e, t, l, g) {
   const u = ve(e, t), p = u.findIndex(($) => $.url === l);
   p !== -1 ? (u[p].title = g, u[p].lastOpened = Date.now()) : u.push({ url: l, title: g, lastOpened: Date.now() }), u.sort(($, v) => v.lastOpened - $.lastOpened);
   const k = u.slice(0, Fe);
-  return Re(e, t, k), k;
+  return He(e, t, k), k;
 }
 function Ne(e, t, l) {
   const g = ve(e, t).filter((u) => u.url !== l);
-  return Re(e, t, g), g;
+  return He(e, t, g), g;
 }
 function Ve(e) {
   const t = "automerge:";
@@ -95,14 +95,14 @@ const Ze = {
   margin: "12px 0"
 };
 function et(e) {
-  const [t, l] = x(""), [g, u] = x({}), [p, k] = x(!0), [$, v] = x(void 0), [N, U] = x(!1), [oe, H] = x(null), [A, ae] = x(null), [ee, te] = x(null), [G, be] = x("");
+  const [t, l] = x(""), [g, u] = x({}), [p, k] = x(!0), [$, v] = x(void 0), [N, U] = x(!1), [oe, R] = x(null), [A, ae] = x(null), [ee, te] = x(null), [G, be] = x("");
   ie(() => {
     if (!e.isOpen) return;
     let a = !1;
     (async () => {
       const s = await ye();
       if (a) return;
-      H(s.docIdFromAutomergeUrl(e.docUrl));
+      R(s.docIdFromAutomergeUrl(e.docUrl));
       const C = e.hive.active.individual.id;
       ae(C ? s.uint8ArrayToHex(C.toBytes()) : null);
       const z = e.hive.syncServer;
@@ -299,8 +299,8 @@ function et(e) {
             children: ([S, K]) => {
               const V = S === A(), M = S === ee(), n = S === G(), r = De.indexOf($()), h = De.indexOf(K), c = r >= 0 && h >= 0 && h <= r && !V && !M, b = () => V ? "You" : M ? "Sync Server" : n ? "Public" : pe(S);
               return (() => {
-                var y = Xe(), J = y.firstChild, R = J.firstChild, W = R.nextSibling;
-                return X(R, "color", V ? "#7ab4f5" : n ? "#b5bd68" : "#edf2f7"), f(R, b), f(W, K), f(y, m(_, {
+                var y = Xe(), J = y.firstChild, H = J.firstChild, W = H.nextSibling;
+                return X(H, "color", V ? "#7ab4f5" : n ? "#b5bd68" : "#edf2f7"), f(H, b), f(W, K), f(y, m(_, {
                   when: c,
                   get children() {
                     var o = Qe();
@@ -385,12 +385,12 @@ function it(e) {
       }, v.$$keydown = (A) => {
         A.key === "Enter" && u();
       }, v.$$input = (A) => l(A.currentTarget.value);
-      var H = g;
-      return typeof H == "function" ? Ee(H, v) : g = v, U.$$click = () => e.onCancel(), oe.$$click = () => u(), D((A) => {
+      var R = g;
+      return typeof R == "function" ? Ee(R, v) : g = v, U.$$click = () => e.onCancel(), oe.$$click = () => u(), D((A) => {
         var ae = Ce, ee = {
           ...Se
         }, te = e.defaultTitle;
-        return A.e = E(p, ae, A.e), A.t = E(k, ee, A.t), te !== A.a && He(v, "placeholder", A.a = te), A;
+        return A.e = E(p, ae, A.e), A.t = E(k, ee, A.t), te !== A.a && Re(v, "placeholder", A.a = te), A;
       }, {
         e: void 0,
         t: void 0,
@@ -403,17 +403,17 @@ xe(["click", "input", "keydown"]);
 const ot = {};
 var at = /* @__PURE__ */ w('<div style="padding:8px 10px;color:#6b7280;font-style:italic">No documents yet'), lt = /* @__PURE__ */ w('<div style="position:absolute;top:34px;left:0;background:#191e24;border:1px solid #2a323c;border-radius:4px;max-height:400px;overflow-y:auto;min-width:280px;max-width:420px;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.4)">'), ct = /* @__PURE__ */ w('<button style="background:none;border:1px solid #2a323c;color:#edf2f7;font-size:13px;padding:4px 10px;border-radius:4px;cursor:pointer;white-space:nowrap">Share'), st = /* @__PURE__ */ w('<button title="Copy automerge URL"style="background:none;border:1px solid #2a323c;font-size:13px;padding:4px 10px;border-radius:4px;cursor:pointer;white-space:nowrap">'), dt = /* @__PURE__ */ w('<button style="background:none;border:1px solid #2a323c;font-size:13px;padding:4px 10px;border-radius:4px;cursor:pointer;white-space:nowrap">'), ut = /* @__PURE__ */ w('<button style="background:none;border:1px solid #944;color:#c66;font-size:13px;padding:4px 10px;border-radius:4px;cursor:pointer;white-space:nowrap">Remove Doc'), ft = /* @__PURE__ */ w('<div style=display:flex;flex-direction:column;height:100vh;background:#1d232a><div style="display:flex;align-items:center;height:52px;min-height:52px;background:#191e24;color:#edf2f7;font-size:14px;font-family:system-ui, sans-serif;padding:0 12px;border-bottom:1px solid #15191e;box-sizing:border-box"><button style="background:none;border:1px solid #2a323c;color:#edf2f7;font-size:13px;padding:4px 10px;border-radius:4px;cursor:pointer;flex-shrink:0;margin-right:12px;white-space:nowrap">+ New</button><input type=text placeholder="Paste automerge:… URL"style="background:#15191e;border:1px solid #2a323c;color:#edf2f7;font-size:13px;padding:4px 10px;border-radius:4px;width:200px;min-width:80px;flex-shrink:1;margin-right:12px;outline:none"><div data-doc-switcher style=position:relative;flex:1;min-width:120px><button style="background:none;border:none;color:#edf2f7;font-size:14px;cursor:pointer;padding:4px 8px;border-radius:4px;max-width:100%;display:flex;align-items:center;gap:4px"><span style=overflow:hidden;text-overflow:ellipsis;white-space:nowrap></span><span style=flex-shrink:0>▾</span></button></div><div style=display:flex;align-items:center;flex-shrink:0;gap:8px></div></div><div style=flex:1;min-height:0;overflow:hidden>'), ht = /* @__PURE__ */ w('<div style="padding:8px 12px;cursor:pointer;border-bottom:1px solid #15191e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"> <span style=color:#6b7280;font-size:12px>'), gt = /* @__PURE__ */ w('<div style="width:24px;height:24px;border:2px solid #2a323c;border-top-color:#6b7280;border-radius:50%;animation:spin 0.8s linear infinite">'), pt = /* @__PURE__ */ w('<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;background:#1d232a;font-family:system-ui, sans-serif;font-size:14px">'), mt = /* @__PURE__ */ w("<div style=height:100%>");
 function yt(e) {
-  const t = e.tool, [l, g] = x(null), [u, p] = x("..."), [k, $] = x([]), [v, N] = x(!1), [U, oe] = x(null), [H, A] = x(""), [ae, ee] = x(!1), [te, G] = x(!1), [be, Q] = x(!1), [le, fe] = x(!1), [he, ge] = x(!1), [ne, pe] = x(!1), [re, a] = x(!1), [s, C] = x(null), [z, P] = x(!1);
+  const t = e.tool, [l, g] = x(null), [u, p] = x("..."), [k, $] = x([]), [v, N] = x(!1), [U, oe] = x(null), [R, A] = x(""), [ae, ee] = x(!1), [te, G] = x(!1), [be, Q] = x(!1), [le, fe] = x(!1), [he, ge] = x(!1), [ne, pe] = x(!1), [re, a] = x(!1), [s, C] = x(null), [z, P] = x(!1);
   let T, L = null, F = 0;
   function j(n) {
     L && (L(), L = null);
     const r = n.doc(), h = r ? t.getTitle(r) : t.defaultTitle;
-    p(h), $(Ie(t.id, H(), n.url, h));
+    p(h), $(Ie(t.id, R(), n.url, h));
     const c = () => {
       const b = n.doc();
       if (b) {
         const y = t.getTitle(b);
-        p(y), $(Ie(t.id, H(), n.url, y));
+        p(y), $(Ie(t.id, R(), n.url, y));
       }
     };
     n.on("change", c), L = () => n.off("change", c);
@@ -425,8 +425,8 @@ function yt(e) {
       const {
         docIdFromAutomergeUrl: h,
         Identifier: c
-      } = await import("@automerge/automerge-repo-keyhive"), b = h(n), y = r.active.individual.id, J = c.publicId(), [R, W] = await Promise.all([r.accessForDoc(y, b).catch(() => null), r.accessForDoc(J, b).catch(() => null)]);
-      return console.log(`[${t.name}] Access check for ${n.slice(0, 30)}...: my=${R}, public=${W}`), !!(R || W);
+      } = await import("@automerge/automerge-repo-keyhive"), b = h(n), y = r.active.individual.id, J = c.publicId(), [H, W] = await Promise.all([r.accessForDoc(y, b).catch(() => null), r.accessForDoc(J, b).catch(() => null)]);
+      return console.log(`[${t.name}] Access check for ${n.slice(0, 30)}...: my=${H}, public=${W}`), !!(H || W);
     } catch (h) {
       return console.error(`[${t.name}] Access check error for ${n}:`, h), !0;
     }
@@ -445,15 +445,15 @@ function yt(e) {
         const y = b.doc();
         return y ? t.isDocReady ? t.isDocReady(y) : !!y : !1;
       };
-      let c = T.find(n);
-      if (await c.whenReady(), r !== F) return;
+      let c = await T.find(n);
+      if (r !== F) return;
       if (!h(c)) {
         console.log(`[${t.name}] Doc incomplete, forcing re-sync for: ${n.slice(0, 30)}...`);
         try {
           T.delete(n);
         } catch {
         }
-        if (await new Promise((b) => setTimeout(b, 100)), r !== F || (c = T.find(n), await c.whenReady(), r !== F)) return;
+        if (await new Promise((b) => setTimeout(b, 100)), r !== F || (c = await T.find(n), r !== F)) return;
       }
       if (!h(c) && (se(n), await new Promise((b) => {
         const y = () => {
@@ -468,7 +468,7 @@ function yt(e) {
         }, 3e4);
       }), r !== F))
         return;
-      P(!1), se(n), localStorage.setItem(me(t.id, H()), n), j(c), g(c);
+      P(!1), se(n), localStorage.setItem(me(t.id, R()), n), j(c), g(c);
     } catch (h) {
       if (r !== F) return;
       console.error(`[${t.name}] Failed to load doc: ${n}`, h), P(!1), a(!0), C(n), se(n);
@@ -481,16 +481,16 @@ function yt(e) {
     };
     const h = U();
     let c;
-    h ? (c = await T.create2(r), console.log(`[${t.name}] Created document (keyhive): ${c.url}`), await h.addSyncServerPullToDoc(c.url), await h.keyhiveStorage.saveKeyhiveWithHash(h.keyhive)) : (c = T.create(r), console.log(`[${t.name}] Created document (legacy): ${c.url}`)), g(c), se(c.url), localStorage.setItem(me(t.id, H()), c.url), j(c);
+    h ? (c = await T.create2(r), console.log(`[${t.name}] Created document (keyhive): ${c.url}`), await h.addSyncServerPullToDoc(c.url), await h.keyhiveStorage.saveKeyhiveWithHash(h.keyhive)) : (c = T.create(r), console.log(`[${t.name}] Created document (legacy): ${c.url}`)), g(c), se(c.url), localStorage.setItem(me(t.id, R()), c.url), j(c);
   }
   function K() {
-    L && (L(), L = null), g(null), p("..."), a(!1), C(null), localStorage.removeItem(me(t.id, H())), window.history.replaceState(null, "", window.location.pathname);
+    L && (L(), L = null), g(null), p("..."), a(!1), C(null), localStorage.removeItem(me(t.id, R())), window.history.replaceState(null, "", window.location.pathname);
   }
   function V() {
     const n = l();
     if (!n) return;
     const r = n.url;
-    K(), T.delete(r), $(Ne(t.id, H(), r));
+    K(), T.delete(r), $(Ne(t.id, R(), r));
   }
   async function M() {
     const n = U();
@@ -521,7 +521,7 @@ function yt(e) {
         BrowserWebSocketClientAdapter: b
       }, y] = await Promise.all([import("@automerge/automerge-repo"), import("@automerge/automerge-repo-storage-indexeddb"), import("@automerge/automerge-repo-network-websocket"), import("@automerge/automerge-repo-keyhive")]);
       y.initKeyhiveWasm();
-      const J = new c(`${t.id}-keyhive`), R = ot?.VITE_SYNC_URL, W = new b(e.config?.syncUrl || R || t.syncUrl || "ws://localhost:3030"), o = `${t.id}-${Math.random().toString(36).slice(2)}`, d = await y.initializeAutomergeRepoKeyhive({
+      const J = new c(`${t.id}-keyhive`), H = ot?.VITE_SYNC_URL, W = new b(e.config?.syncUrl || H || t.syncUrl || "ws://localhost:3030"), o = `${t.id}-${Math.random().toString(36).slice(2)}`, d = await y.initializeAutomergeRepoKeyhive({
         storage: J,
         peerIdSuffix: o,
         networkAdapter: W,
@@ -554,7 +554,7 @@ function yt(e) {
       console.log(`[${t.name}] Loading doc from hash: ${n}`), await i(n);
       return;
     }
-    const r = localStorage.getItem(me(t.id, H()));
+    const r = localStorage.getItem(me(t.id, R()));
     if (r) {
       console.log(`[${t.name}] Found existing doc: ${r}`), await i(r);
       return;
@@ -574,7 +574,7 @@ function yt(e) {
   }), (() => {
     var n = ft(), r = n.firstChild, h = r.firstChild, c = h.nextSibling, b = c.nextSibling, y = b.firstChild, J = y.firstChild;
     J.nextSibling;
-    var R = b.nextSibling, W = r.nextSibling;
+    var H = b.nextSibling, W = r.nextSibling;
     return h.$$click = () => Q(!0), c.$$keydown = (o) => {
       if (o.key === "Enter") {
         const d = o.currentTarget.value.trim();
@@ -618,7 +618,7 @@ function yt(e) {
           }
         }), null), o;
       }
-    }), null), f(R, m(_, {
+    }), null), f(H, m(_, {
       get when() {
         return Z(() => !!l())() && U();
       },
@@ -626,7 +626,7 @@ function yt(e) {
         var o = ct();
         return o.$$click = () => ee(!0), o;
       }
-    }), null), f(R, m(_, {
+    }), null), f(H, m(_, {
       get when() {
         return l();
       },
@@ -637,7 +637,7 @@ function yt(e) {
           d && (await navigator.clipboard.writeText(d.url), ge(!0), setTimeout(() => ge(!1), 1500));
         }, f(o, () => he() ? "Copied!" : "Copy URL"), D((d) => X(o, "color", he() ? "#b5bd68" : "#edf2f7")), o;
       }
-    }), null), f(R, m(_, {
+    }), null), f(H, m(_, {
       get when() {
         return U();
       },
@@ -645,7 +645,7 @@ function yt(e) {
         var o = dt();
         return o.$$click = () => void M(), f(o, () => le() ? "Copied!" : "Contact Card"), D((d) => X(o, "color", le() ? "#b5bd68" : "#edf2f7")), o;
       }
-    }), null), f(R, m(_, {
+    }), null), f(H, m(_, {
       get when() {
         return l();
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jtfmumm/patchwork-standalone-frame",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Reusable standalone frame for patchwork tools with keyhive, doc history, and access control",
   "type": "module",
   "main": "./dist/index.js",

package/src/frame.tsx

@@ -115,8 +115,7 @@ export function StandaloneApp<D>(props: { tool: ToolRegistration<D>; config?: St
         return tool.isDocReady ? tool.isDocReady(d) : !!d;
       };
 
-      let docHandle = repo.find<D>(url);
-      await docHandle.whenReady();
+      let docHandle = await repo.find<D>(url);
       if (gen !== loadGeneration) return;
 
       if (!isDocReady(docHandle)) {
@@ -125,8 +124,7 @@ export function StandaloneApp<D>(props: { tool: ToolRegistration<D>; config?: St
         await new Promise((r) => setTimeout(r, 100));
         if (gen !== loadGeneration) return;
 
-        docHandle = repo.find<D>(url);
-        await docHandle.whenReady();
+        docHandle = await repo.find<D>(url);
         if (gen !== loadGeneration) return;
       }
 

package/src/index.ts

@@ -18,18 +18,17 @@ export interface ToolRegistration<D = unknown> {
   render: (handle: DocHandle<D>, element: ToolElement) => (() => void);
 }
 
-/** Duck-typed doc handle — structurally compatible with automerge-repo DocHandle */
+/** Duck-typed doc handle — structurally compatible with automerge-repo 2.5.x DocHandle */
 export interface FrameDocHandle<D = unknown> {
   url: string;
   doc(): D | undefined;
-  whenReady(): Promise<unknown>;
   on(event: string, cb: (...args: unknown[]) => void): void;
   off(event: string, cb: (...args: unknown[]) => void): void;
 }
 
-/** Duck-typed repo — structurally compatible with automerge-repo Repo */
+/** Duck-typed repo — structurally compatible with automerge-repo 2.5.x Repo */
 export interface FrameRepo {
-  find<D = unknown>(url: string): FrameDocHandle<D>;
+  find<D = unknown>(url: string): Promise<FrameDocHandle<D>>;
   create<D = unknown>(initialValue: D): FrameDocHandle<D>;
   delete(url: string): void;
 }