@jtfmumm/patchwork-standalone-frame 0.2.0 → 0.3.0

package/dist/share-modal.d.ts

@@ -1,5 +1,5 @@
 import type { AutomergeUrl } from "@automerge/automerge-repo";
-import { type AutomergeRepoKeyhive } from "@automerge/automerge-repo-keyhive";
+import type { AutomergeRepoKeyhive } from "@automerge/automerge-repo-keyhive";
 interface ShareModalProps {
     isOpen: boolean;
     docUrl: AutomergeUrl;

package/package.json

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

package/src/share-modal.tsx

@@ -7,14 +7,7 @@ import {
   createMemo,
 } from "solid-js";
 import type { AutomergeUrl } from "@automerge/automerge-repo";
-import {
-  Access,
-  ContactCard,
-  docIdFromAutomergeUrl,
-  Identifier,
-  uint8ArrayToHex,
-  type AutomergeRepoKeyhive,
-} from "@automerge/automerge-repo-keyhive";
+import type { AutomergeRepoKeyhive } from "@automerge/automerge-repo-keyhive";
 import { overlayStyle, cardStyle } from "./modal-styles.ts";
 
 type DocAccessList = Record<string, string>;
@@ -26,17 +19,34 @@ interface ShareModalProps {
   onClose: () => void;
 }
 
+// Lazy-loaded keyhive utilities — resolved once on first use
+let keyhiveModule: {
+  docIdFromAutomergeUrl: (url: AutomergeUrl) => unknown;
+  uint8ArrayToHex: (bytes: Uint8Array) => string;
+  ContactCard: { fromJson: (json: string) => unknown };
+  Identifier: { publicId: () => { toBytes: () => Uint8Array } };
+  Access: { tryFromString: (s: string) => unknown };
+} | null = null;
+
+async function getKeyhive() {
+  if (!keyhiveModule) {
+    keyhiveModule = await import("@automerge/automerge-repo-keyhive") as unknown as typeof keyhiveModule;
+  }
+  return keyhiveModule!;
+}
+
 const ACCESS_LEVELS = ["Pull", "Read", "Write", "Admin"] as const;
 
 async function fetchAccessList(
   hive: AutomergeRepoKeyhive,
   docUrl: AutomergeUrl
 ): Promise<DocAccessList> {
-  const keyhiveDocId = docIdFromAutomergeUrl(docUrl);
+  const kh = await getKeyhive();
+  const keyhiveDocId = kh.docIdFromAutomergeUrl(docUrl);
   const accessList: DocAccessList = {};
-  const members = await hive.docMemberCapabilities(keyhiveDocId);
+  const members = await hive.docMemberCapabilities(keyhiveDocId as Parameters<typeof hive.docMemberCapabilities>[0]);
   members.forEach((capability) => {
-    const hexId = uint8ArrayToHex(capability.who.id.toBytes());
+    const hexId = kh.uint8ArrayToHex(capability.who.id.toBytes());
     accessList[hexId] = capability.can.toString();
   });
   return accessList;
@@ -77,41 +87,56 @@ export function ShareModal(props: ShareModalProps) {
   const [isLoadingAccessList, setIsLoadingAccessList] = createSignal(true);
   const [currentUserAccess, setCurrentUserAccess] = createSignal<string | undefined>(undefined);
   const [isSubmitting, setIsSubmitting] = createSignal(false);
-  const keyhiveDocId = createMemo(() => docIdFromAutomergeUrl(props.docUrl));
+  const [keyhiveDocIdVal, setKeyhiveDocIdVal] = createSignal<unknown>(null);
+  const [currentUserHexIdVal, setCurrentUserHexIdVal] = createSignal<string | null>(null);
+  const [syncServerHexIdVal, setSyncServerHexIdVal] = createSignal<string | null>(null);
+  const [publicHexIdVal, setPublicHexIdVal] = createSignal<string>("");
 
-  const currentUserHexId = createMemo(() => {
-    const id = props.hive.active.individual.id;
-    return id ? uint8ArrayToHex(id.toBytes()) : null;
-  });
+  // Load keyhive and compute derived values when modal opens
+  createEffect(() => {
+    if (!props.isOpen) return;
+    let cancelled = false;
+    (async () => {
+      const kh = await getKeyhive();
+      if (cancelled) return;
 
-  const syncServerHexId = createMemo(() => {
-    const syncServer = props.hive.syncServer;
-    if (!syncServer) return null;
-    const contactCard = ContactCard.fromJson(syncServer.contactCard.toJson());
-    if (!contactCard) return null;
-    return uint8ArrayToHex(contactCard.individualId.bytes);
-  });
+      setKeyhiveDocIdVal(kh.docIdFromAutomergeUrl(props.docUrl));
 
-  const publicHexId = createMemo(() => {
-    const publicId = Identifier.publicId();
-    return uint8ArrayToHex(publicId.toBytes());
+      const id = props.hive.active.individual.id;
+      setCurrentUserHexIdVal(id ? kh.uint8ArrayToHex(id.toBytes()) : null);
+
+      const syncServer = props.hive.syncServer;
+      if (syncServer) {
+        const contactCard = kh.ContactCard.fromJson(syncServer.contactCard.toJson());
+        if (contactCard) {
+          setSyncServerHexIdVal(kh.uint8ArrayToHex((contactCard as { individualId: { bytes: Uint8Array } }).individualId.bytes));
+        }
+      }
+
+      const publicId = kh.Identifier.publicId();
+      setPublicHexIdVal(kh.uint8ArrayToHex(publicId.toBytes()));
+    })();
+    onCleanup(() => { cancelled = true; });
   });
 
   const currentPublicAccess = createMemo(() => {
     const accessList = docAccessList();
-    return accessList[publicHexId()] || null;
+    const pubId = publicHexIdVal();
+    return pubId ? (accessList[pubId] || null) : null;
   });
 
   const isAdmin = createMemo(() => currentUserAccess() === "Admin");
 
   createEffect(() => {
     if (!props.isOpen) return;
+    const docId = keyhiveDocIdVal();
+    if (!docId) return;
     let cancelled = false;
     (async () => {
       const id = props.hive.active.individual.id;
       if (!id) { if (!cancelled) setCurrentUserAccess(undefined); return; }
       try {
-        const access = await props.hive.accessForDoc(id, keyhiveDocId());
+        const access = await props.hive.accessForDoc(id, docId as Parameters<typeof props.hive.accessForDoc>[1]);
         if (!cancelled) setCurrentUserAccess(access ? access.toString() : undefined);
       } catch (err) {
         if (!cancelled) { console.error("[ShareModal] Error checking access:", err); setCurrentUserAccess(undefined); }
@@ -148,11 +173,12 @@ export function ShareModal(props: ShareModalProps) {
     if (!input) return;
     setIsSubmitting(true);
     try {
-      const contactCard = ContactCard.fromJson(input);
+      const kh = await getKeyhive();
+      const contactCard = kh.ContactCard.fromJson(input);
       if (!contactCard) throw new Error("Invalid ContactCard JSON");
-      const access = Access.tryFromString("write");
+      const access = kh.Access.tryFromString("write");
       if (!access) throw new Error("Invalid access level");
-      await props.hive.addMemberToDoc(props.docUrl, contactCard, access);
+      await props.hive.addMemberToDoc(props.docUrl, contactCard as Parameters<typeof props.hive.addMemberToDoc>[1], access as Parameters<typeof props.hive.addMemberToDoc>[2]);
       setContactCardInput("");
     } catch (err) {
       console.error("[ShareModal]", err);
@@ -176,9 +202,10 @@ export function ShareModal(props: ShareModalProps) {
 
   const handleMakePublic = async () => {
     try {
-      const access = Access.tryFromString("write");
+      const kh = await getKeyhive();
+      const access = kh.Access.tryFromString("write");
       if (!access) throw new Error("Invalid access level");
-      await props.hive.setPublicAccess(props.docUrl, access);
+      await props.hive.setPublicAccess(props.docUrl, access as Parameters<typeof props.hive.setPublicAccess>[1]);
     } catch (err) {
       console.error("[ShareModal]", err);
     } finally {
@@ -189,7 +216,7 @@ export function ShareModal(props: ShareModalProps) {
 
   const handleMakePrivate = async () => {
     try {
-      await props.hive.revokeMemberFromDoc(props.docUrl, publicHexId());
+      await props.hive.revokeMemberFromDoc(props.docUrl, publicHexIdVal());
     } catch (err) {
       console.error("[ShareModal]", err);
     } finally {
@@ -294,9 +321,9 @@ export function ShareModal(props: ShareModalProps) {
               <div>
                 <For each={sortedMembers()}>
                   {([hexId, access]) => {
-                    const isCurrentUser = hexId === currentUserHexId();
-                    const isSyncServer = hexId === syncServerHexId();
-                    const isPublic = hexId === publicHexId();
+                    const isCurrentUser = hexId === currentUserHexIdVal();
+                    const isSyncServer = hexId === syncServerHexIdVal();
+                    const isPublic = hexId === publicHexIdVal();
                     const myAccessIdx = ACCESS_LEVELS.indexOf(currentUserAccess() as typeof ACCESS_LEVELS[number]);
                     const memberAccessIdx = ACCESS_LEVELS.indexOf(access as typeof ACCESS_LEVELS[number]);
                     const canRemove = myAccessIdx >= 0 && memberAccessIdx >= 0 && memberAccessIdx <= myAccessIdx && !isCurrentUser && !isSyncServer;