@jtfmumm/patchwork-standalone-frame 0.1.0

package/src/frame.tsx

@@ -0,0 +1,660 @@
+import { createSignal, Show, For, onMount, onCleanup } from "solid-js";
+import {
+  Repo,
+  type AutomergeUrl,
+  type DocHandle,
+} from "@automerge/automerge-repo";
+import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb";
+import { BrowserWebSocketClientAdapter } from "@automerge/automerge-repo-network-websocket";
+import {
+  initializeAutomergeRepoKeyhive,
+  initKeyhiveWasm,
+  docIdFromAutomergeUrl,
+  Identifier,
+  uint8ArrayToHex,
+  type AutomergeRepoKeyhive,
+} from "@automerge/automerge-repo-keyhive";
+import type { ToolRegistration, ToolElement } from "./index.ts";
+import {
+  type DocHistoryEntry,
+  loadHistory,
+  upsertHistory,
+  removeFromHistory,
+  truncateUrl,
+  activeDocKey,
+} from "./doc-history.ts";
+import { getDocUrlFromHash, setDocUrlInHash } from "./url-hash.ts";
+import { ShareModal } from "./share-modal.tsx";
+import { ConfirmModal } from "./confirm-modal.tsx";
+import { NewDocModal } from "./new-doc-modal.tsx";
+
+// Init keyhive WASM at module level (must happen before initializeAutomergeRepoKeyhive)
+initKeyhiveWasm();
+
+declare global {
+  interface Window {
+    hive?: AutomergeRepoKeyhive;
+  }
+}
+
+export function StandaloneApp<D>(props: { tool: ToolRegistration<D> }) {
+  const tool = props.tool;
+
+  const [handle, setHandle] = createSignal<DocHandle<D> | null>(null);
+  const [docTitle, setDocTitle] = createSignal<string>("...");
+  const [history, setHistory] = createSignal<DocHistoryEntry[]>([]);
+  const [dropdownOpen, setDropdownOpen] = createSignal(false);
+  const [hive, setHive] = createSignal<AutomergeRepoKeyhive | null>(null);
+  const [identityHexId, setIdentityHexId] = createSignal<string>("");
+  const [shareModalOpen, setShareModalOpen] = createSignal(false);
+  const [confirmRemoveOpen, setConfirmRemoveOpen] = createSignal(false);
+  const [newDocModalOpen, setNewDocModalOpen] = createSignal(false);
+  const [copiedFeedback, setCopiedFeedback] = createSignal(false);
+  const [copiedUrlFeedback, setCopiedUrlFeedback] = createSignal(false);
+  const [ready, setReady] = createSignal(false);
+  const [docUnavailable, setDocUnavailable] = createSignal(false);
+  const [pendingDocUrl, setPendingDocUrl] = createSignal<string | null>(null);
+  const [loading, setLoading] = createSignal(false);
+
+  let repo!: Repo;
+  let titleCleanup: (() => void) | null = null;
+  let loadGeneration = 0;
+
+  function trackTitle(h: DocHandle<D>): void {
+    if (titleCleanup) {
+      titleCleanup();
+      titleCleanup = null;
+    }
+
+    const doc = h.doc() as D;
+    const initialTitle = doc ? tool.getTitle(doc) : tool.defaultTitle;
+    setDocTitle(initialTitle);
+    setHistory(upsertHistory(tool.id, identityHexId(), h.url, initialTitle));
+
+    const onChange = () => {
+      const d = h.doc() as D;
+      if (d) {
+        const t = tool.getTitle(d);
+        setDocTitle(t);
+        setHistory(upsertHistory(tool.id, identityHexId(), h.url, t));
+      }
+    };
+    h.on("change", onChange);
+    titleCleanup = () => h.off("change", onChange);
+  }
+
+  async function checkAccess(url: string): Promise<boolean> {
+    const h = hive();
+    if (!h) return true;
+    try {
+      const docId = docIdFromAutomergeUrl(url as AutomergeUrl);
+      const myId = h.active.individual.id;
+      const publicId = Identifier.publicId();
+      const [myAccess, publicAccess] = await Promise.all([
+        h.accessForDoc(myId, docId).catch(() => null),
+        h.accessForDoc(publicId, docId).catch(() => null),
+      ]);
+      console.log(`[${tool.name}] Access check for ${url.slice(0, 30)}...: my=${myAccess}, public=${publicAccess}`);
+      return !!(myAccess || publicAccess);
+    } catch (err) {
+      console.error(`[${tool.name}] Access check error for ${url}:`, err);
+      return true;
+    }
+  }
+
+  async function loadDoc(url: string): Promise<void> {
+    const gen = ++loadGeneration;
+
+    if (titleCleanup) { titleCleanup(); titleCleanup = null; }
+    setHandle(null);
+    setDocUnavailable(false);
+    setPendingDocUrl(null);
+    setLoading(true);
+    setDocTitle("Loading...");
+
+    try {
+      if (!(await checkAccess(url))) {
+        if (gen !== loadGeneration) return;
+        console.warn(`[${tool.name}] No access to doc: ${url}`);
+        setLoading(false);
+        setDocUnavailable(true);
+        setPendingDocUrl(url);
+        setDocUrlInHash(url as AutomergeUrl);
+        return;
+      }
+      if (gen !== loadGeneration) return;
+
+      const isDocReady = (h: DocHandle<D>) => {
+        const d = h.doc() as D;
+        if (!d) return false;
+        return tool.isDocReady ? tool.isDocReady(d) : !!d;
+      };
+
+      let docHandle = await repo.find<D>(url as AutomergeUrl);
+      await docHandle.whenReady();
+      if (gen !== loadGeneration) return;
+
+      if (!isDocReady(docHandle)) {
+        console.log(`[${tool.name}] Doc incomplete, forcing re-sync for: ${url.slice(0, 30)}...`);
+        try { repo.delete(url as AutomergeUrl); } catch { /* ignore */ }
+        await new Promise((r) => setTimeout(r, 100));
+        if (gen !== loadGeneration) return;
+
+        docHandle = await repo.find<D>(url as AutomergeUrl);
+        await docHandle.whenReady();
+        if (gen !== loadGeneration) return;
+      }
+
+      if (!isDocReady(docHandle)) {
+        setDocUrlInHash(url as AutomergeUrl);
+        await new Promise<void>((resolve) => {
+          const check = () => {
+            if (gen !== loadGeneration) { docHandle.off("change", check); resolve(); return; }
+            if (isDocReady(docHandle)) {
+              docHandle.off("change", check);
+              resolve();
+            }
+          };
+          docHandle.on("change", check);
+          setTimeout(() => { docHandle.off("change", check); resolve(); }, 30_000);
+        });
+        if (gen !== loadGeneration) return;
+      }
+
+      setLoading(false);
+      setDocUrlInHash(url as AutomergeUrl);
+      localStorage.setItem(activeDocKey(tool.id, identityHexId()), url);
+      trackTitle(docHandle);
+      setHandle(docHandle);
+    } catch (err) {
+      if (gen !== loadGeneration) return;
+      console.error(`[${tool.name}] Failed to load doc: ${url}`, err);
+      setLoading(false);
+      setDocUnavailable(true);
+      setPendingDocUrl(url);
+      setDocUrlInHash(url as AutomergeUrl);
+    }
+  }
+
+  async function createNewDoc(title: string = tool.defaultTitle): Promise<void> {
+    const h = hive();
+    if (!h) return;
+
+    const initialDoc = {} as Record<string, unknown>;
+    tool.init(initialDoc as D, repo);
+    if (tool.setTitle) tool.setTitle(initialDoc as D, title);
+    initialDoc["@patchwork"] = { type: tool.id };
+    const docHandle = await repo.create2<D>(initialDoc as D);
+    console.log(`[${tool.name}] Created document: ${docHandle.url}`);
+
+    await h.addSyncServerPullToDoc(docHandle.url);
+    await h.keyhiveStorage.saveKeyhiveWithHash(h.keyhive);
+
+    setHandle(docHandle);
+    setDocUrlInHash(docHandle.url);
+    localStorage.setItem(activeDocKey(tool.id, identityHexId()), docHandle.url);
+    trackTitle(docHandle);
+  }
+
+  function closeDoc(): void {
+    if (titleCleanup) {
+      titleCleanup();
+      titleCleanup = null;
+    }
+    setHandle(null);
+    setDocTitle("...");
+    setDocUnavailable(false);
+    setPendingDocUrl(null);
+    localStorage.removeItem(activeDocKey(tool.id, identityHexId()));
+    window.history.replaceState(null, "", window.location.pathname);
+  }
+
+  function removeDoc(): void {
+    const h = handle();
+    if (!h) return;
+    const url = h.url;
+    closeDoc();
+    repo.delete(url);
+    setHistory(removeFromHistory(tool.id, identityHexId(), url));
+  }
+
+  async function copyContactCard(): Promise<void> {
+    const h = hive();
+    if (!h) return;
+    try {
+      const json = h.active.contactCard.toJson();
+      await navigator.clipboard.writeText(json);
+      setCopiedFeedback(true);
+      setTimeout(() => setCopiedFeedback(false), 1500);
+    } catch (err) {
+      console.error(`[${tool.name}] Failed to copy contact card:`, err);
+    }
+  }
+
+  onMount(async () => {
+    const keyhiveStorage = new IndexedDBStorageAdapter(`${tool.id}-keyhive`);
+    const envSyncUrl = (import.meta as unknown as Record<string, Record<string, string>>).env?.VITE_SYNC_URL;
+    const networkAdapter = new BrowserWebSocketClientAdapter(
+      envSyncUrl || tool.syncUrl || "ws://localhost:3030"
+    );
+    const peerIdSuffix = `${tool.id}-${Math.random().toString(36).slice(2)}`;
+
+    const automergeRepoKeyhive = await initializeAutomergeRepoKeyhive({
+      storage: keyhiveStorage,
+      peerIdSuffix,
+      networkAdapter,
+      automaticArchiveIngestion: true,
+      onlyShareWithHardcodedServerPeerId: true,
+      cacheHashes: true,
+    });
+    window.hive = automergeRepoKeyhive;
+
+    repo = new Repo({
+      storage: new IndexedDBStorageAdapter(),
+      network: [automergeRepoKeyhive.networkAdapter],
+      peerId: automergeRepoKeyhive.peerId,
+      sharePolicy: async (peerId) => {
+        return peerId === automergeRepoKeyhive.syncServer?.peerId;
+      },
+      idFactory: automergeRepoKeyhive.idFactory,
+    });
+
+    automergeRepoKeyhive.linkRepo(repo);
+    setHive(automergeRepoKeyhive);
+
+    const hexId = uint8ArrayToHex(
+      automergeRepoKeyhive.active.individual.id.toBytes()
+    );
+    setIdentityHexId(hexId);
+    setHistory(loadHistory(tool.id, hexId));
+    setReady(true);
+
+    console.log(`[${tool.name}] Keyhive initialized, identity: 0x${hexId.slice(0, 12)}...`);
+
+    (automergeRepoKeyhive.networkAdapter as { on: (event: string, cb: () => void) => void }).on("ingest-remote", async () => {
+      const pending = pendingDocUrl();
+      if (pending) {
+        if (await checkAccess(pending)) {
+          console.log(`[${tool.name}] Access granted, loading: ${pending}`);
+          await loadDoc(pending);
+        }
+        return;
+      }
+
+      const h = handle();
+      if (h) {
+        if (!(await checkAccess(h.url))) {
+          console.log(`[${tool.name}] Access revoked for: ${h.url}`);
+          if (titleCleanup) { titleCleanup(); titleCleanup = null; }
+          setHandle(null);
+          setDocTitle("...");
+          setDocUnavailable(true);
+          setPendingDocUrl(h.url);
+        }
+      }
+    });
+
+    const hashUrl = getDocUrlFromHash();
+    if (hashUrl) {
+      console.log(`[${tool.name}] Loading doc from hash: ${hashUrl}`);
+      await loadDoc(hashUrl);
+      return;
+    }
+
+    const existingUrl = localStorage.getItem(activeDocKey(tool.id, hexId));
+    if (existingUrl) {
+      console.log(`[${tool.name}] Found existing doc: ${existingUrl}`);
+      await loadDoc(existingUrl);
+      return;
+    }
+
+    console.log(`[${tool.name}] No doc found, starting blank`);
+  });
+
+  onMount(() => {
+    const handleHashChange = async () => {
+      const hashUrl = getDocUrlFromHash();
+      if (hashUrl) {
+        console.log(`[${tool.name}] Hash changed, loading: ${hashUrl}`);
+        await loadDoc(hashUrl);
+      }
+    };
+    window.addEventListener("hashchange", handleHashChange);
+    onCleanup(() => window.removeEventListener("hashchange", handleHashChange));
+  });
+
+  onMount(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest("[data-doc-switcher]")) {
+        setDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    onCleanup(() => document.removeEventListener("mousedown", handleMouseDown));
+  });
+
+  return (
+    <div style={{ display: "flex", "flex-direction": "column", height: "100vh", background: "#1d232a" }}>
+      {/* Top bar */}
+      <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
+          onClick={() => setNewDocModalOpen(true)}
+          disabled={!ready()}
+          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",
+            opacity: ready() ? "1" : "0.4",
+          }}
+        >
+          + 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",
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              const val = e.currentTarget.value.trim();
+              if (val) {
+                const url = val.startsWith("automerge:") ? val : `automerge:${val}`;
+                void loadDoc(url);
+                e.currentTarget.value = "";
+              }
+            }
+          }}
+        />
+
+        <div data-doc-switcher style={{ position: "relative", "flex": "1", "min-width": "120px" }}>
+          <button
+            onClick={() => setDropdownOpen(!dropdownOpen())}
+            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" }}>
+              {docTitle()}
+            </span>
+            <span style={{ "flex-shrink": "0" }}>▾</span>
+          </button>
+
+          <Show when={dropdownOpen()}>
+            <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)",
+              }}
+            >
+              <For each={history()}>
+                {(entry) => (
+                  <div
+                    onClick={() => {
+                      void loadDoc(entry.url);
+                      setDropdownOpen(false);
+                    }}
+                    style={{
+                      padding: "8px 12px",
+                      cursor: "pointer",
+                      "border-bottom": "1px solid #15191e",
+                      overflow: "hidden",
+                      "text-overflow": "ellipsis",
+                      "white-space": "nowrap",
+                      color: handle()?.url === entry.url ? "#7ab4f5" : "#edf2f7",
+                      "font-weight": handle()?.url === entry.url ? "bold" : "normal",
+                    }}
+                    onMouseEnter={(e) => {
+                      (e.currentTarget as HTMLElement).style.background = "#1d232a";
+                    }}
+                    onMouseLeave={(e) => {
+                      (e.currentTarget as HTMLElement).style.background = "transparent";
+                    }}
+                  >
+                    {entry.title || "Untitled"}{" "}
+                    <span style={{ color: "#6b7280", "font-size": "12px" }}>
+                      {truncateUrl(entry.url)}
+                    </span>
+                  </div>
+                )}
+              </For>
+              <Show when={history().length === 0}>
+                <div style={{ padding: "8px 10px", color: "#6b7280", "font-style": "italic" }}>
+                  No documents yet
+                </div>
+              </Show>
+            </div>
+          </Show>
+        </div>
+
+        {/* Right-side buttons */}
+        <div style={{ display: "flex", "align-items": "center", "flex-shrink": "0", gap: "8px" }}>
+
+        {/* Share button */}
+        <Show when={handle() && hive()}>
+          <button
+            onClick={() => setShareModalOpen(true)}
+            style={{
+              background: "none",
+              border: "1px solid #2a323c",
+              color: "#edf2f7",
+              "font-size": "13px",
+              padding: "4px 10px",
+              "border-radius": "4px",
+              cursor: "pointer",
+              "white-space": "nowrap",
+            }}
+          >
+            Share
+          </button>
+        </Show>
+
+        {/* Copy URL button */}
+        <Show when={handle()}>
+          <button
+            onClick={async () => {
+              const h = handle();
+              if (!h) return;
+              await navigator.clipboard.writeText(h.url);
+              setCopiedUrlFeedback(true);
+              setTimeout(() => setCopiedUrlFeedback(false), 1500);
+            }}
+            style={{
+              background: "none",
+              border: "1px solid #2a323c",
+              color: copiedUrlFeedback() ? "#b5bd68" : "#edf2f7",
+              "font-size": "13px",
+              padding: "4px 10px",
+              "border-radius": "4px",
+              cursor: "pointer",
+              "white-space": "nowrap",
+            }}
+            title="Copy automerge URL"
+          >
+            {copiedUrlFeedback() ? "Copied!" : "Copy URL"}
+          </button>
+        </Show>
+
+        {/* Copy Contact Card button */}
+        <Show when={hive()}>
+          <button
+            onClick={() => void copyContactCard()}
+            style={{
+              background: "none",
+              border: "1px solid #2a323c",
+              color: copiedFeedback() ? "#b5bd68" : "#edf2f7",
+              "font-size": "13px",
+              padding: "4px 10px",
+              "border-radius": "4px",
+              cursor: "pointer",
+              "white-space": "nowrap",
+            }}
+          >
+            {copiedFeedback() ? "Copied!" : "Contact Card"}
+          </button>
+        </Show>
+
+        {/* Remove Doc button */}
+        <Show when={handle()}>
+          <button
+            onClick={() => setConfirmRemoveOpen(true)}
+            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
+          </button>
+        </Show>
+        </div>
+      </div>
+
+      {/* Tool area */}
+      <div style={{ flex: "1", "min-height": "0", overflow: "hidden" }}>
+        <Show
+          when={handle()}
+          keyed
+          fallback={
+            <div
+              style={{
+                display: "flex",
+                "flex-direction": "column",
+                "align-items": "center",
+                "justify-content": "center",
+                gap: "12px",
+                height: "100%",
+                color: docUnavailable() ? "#c66" : "#6b7280",
+                background: "#1d232a",
+                "font-family": "system-ui, sans-serif",
+                "font-size": "14px",
+              }}
+            >
+              <Show when={loading() || !ready()}>
+                <div style={{
+                  width: "24px",
+                  height: "24px",
+                  border: "2px solid #2a323c",
+                  "border-top-color": "#6b7280",
+                  "border-radius": "50%",
+                  animation: "spin 0.8s linear infinite",
+                }} />
+              </Show>
+              {docUnavailable()
+                ? "Document unavailable: you may not have access"
+                : loading()
+                  ? "Loading document..."
+                  : ready()
+                    ? "No document open"
+                    : "Initializing keyhive..."}
+            </div>
+          }
+        >
+          {(h) => {
+            const toolEl = document.createElement("div") as unknown as ToolElement;
+            toolEl.repo = repo;
+            toolEl.style.height = "100%";
+            return (
+              <div style={{ height: "100%" }} ref={(el) => {
+                el.appendChild(toolEl);
+                tool.render(h as DocHandle<D>, toolEl);
+              }} />
+            );
+          }}
+        </Show>
+      </div>
+
+      {/* Share Modal */}
+      <Show when={hive() && handle()}>
+        <ShareModal
+          isOpen={shareModalOpen()}
+          docUrl={handle()!.url}
+          hive={hive()!}
+          onClose={() => setShareModalOpen(false)}
+        />
+      </Show>
+
+      {/* New Doc Modal */}
+      <NewDocModal
+        isOpen={newDocModalOpen()}
+        defaultTitle={tool.defaultTitle}
+        onConfirm={(title) => {
+          setNewDocModalOpen(false);
+          void createNewDoc(title);
+        }}
+        onCancel={() => setNewDocModalOpen(false)}
+      />
+
+      {/* Confirm Remove Modal */}
+      <ConfirmModal
+        isOpen={confirmRemoveOpen()}
+        title="Remove Document"
+        message="Remove this document from your history? The document data will be deleted locally."
+        confirmLabel="Remove"
+        onConfirm={() => {
+          setConfirmRemoveOpen(false);
+          removeDoc();
+        }}
+        onCancel={() => setConfirmRemoveOpen(false)}
+      />
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+import type { Repo, DocHandle } from "@automerge/automerge-repo";
+import type { AutomergeRepoKeyhive } from "@automerge/automerge-repo-keyhive";
+
+export interface ToolElement extends HTMLDivElement {
+  repo: Repo;
+  hive?: AutomergeRepoKeyhive;
+}
+
+export interface ToolRegistration<D = unknown> {
+  id: string;
+  name: string;
+  defaultTitle: string;
+  init: (doc: D, repo: Repo) => void;
+  getTitle: (doc: D) => string;
+  syncUrl?: string;
+  setTitle?: (doc: D, title: string) => void;
+  isDocReady?: (doc: D) => boolean;
+  render: (handle: DocHandle<D>, element: ToolElement) => (() => void);
+}
+
+export { mountStandaloneApp } from "./mount.tsx";
+export { ShareModal } from "./share-modal.tsx";
+export { ConfirmModal } from "./confirm-modal.tsx";
+export { NewDocModal } from "./new-doc-modal.tsx";
+export { overlayStyle, cardStyle } from "./modal-styles.ts";

package/src/modal-styles.ts

@@ -0,0 +1,18 @@
+export const overlayStyle = {
+  position: "fixed",
+  inset: "0",
+  background: "rgba(0,0,0,0.5)",
+  display: "flex",
+  "align-items": "center",
+  "justify-content": "center",
+  "z-index": "2000",
+} as const
+
+export const cardStyle = {
+  background: "#191e24",
+  color: "#edf2f7",
+  "border-radius": "8px",
+  padding: "20px 24px",
+  "box-shadow": "0 8px 24px rgba(0,0,0,0.5)",
+  "font-family": "system-ui, sans-serif",
+} as const