@jtfmumm/patchwork-standalone-frame 0.1.0

package/src/mount.tsx

@@ -0,0 +1,10 @@
+import { render } from "solid-js/web";
+import { StandaloneApp } from "./frame.tsx";
+import type { ToolRegistration } from "./index.ts";
+
+export function mountStandaloneApp<D>(
+  rootElement: HTMLElement,
+  tool: ToolRegistration<D>,
+): void {
+  render(() => <StandaloneApp tool={tool} />, rootElement);
+}

package/src/new-doc-modal.tsx

@@ -0,0 +1,98 @@
+import { Show, createEffect, createSignal, onCleanup } from "solid-js";
+import { overlayStyle, cardStyle } from "./modal-styles.ts";
+
+interface NewDocModalProps {
+  isOpen: boolean;
+  defaultTitle: string;
+  onConfirm: (title: string) => void;
+  onCancel: () => void;
+}
+
+export function NewDocModal(props: NewDocModalProps) {
+  const [title, setTitle] = createSignal("");
+  let inputRef: HTMLInputElement | undefined;
+
+  createEffect(() => {
+    if (!props.isOpen) return;
+    setTitle("");
+    requestAnimationFrame(() => inputRef?.focus());
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") props.onCancel();
+    };
+    document.addEventListener("keydown", handleEscape);
+    onCleanup(() => document.removeEventListener("keydown", handleEscape));
+  });
+
+  function submit() {
+    const t = title().trim();
+    props.onConfirm(t || props.defaultTitle);
+  }
+
+  return (
+    <Show when={props.isOpen}>
+      <div
+        onClick={(e) => { if (e.target === e.currentTarget) props.onCancel(); }}
+        style={overlayStyle}
+      >
+        <div
+          style={{ ...cardStyle, "min-width": "300px", "max-width": "400px" }}
+        >
+          <h3 style={{ margin: "0 0 12px", "font-size": "15px" }}>New Document</h3>
+          <input
+            ref={inputRef}
+            type="text"
+            placeholder={props.defaultTitle}
+            value={title()}
+            onInput={(e) => setTitle(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") submit();
+            }}
+            style={{
+              width: "100%",
+              background: "#15191e",
+              border: "1px solid #2a323c",
+              color: "#edf2f7",
+              "font-size": "14px",
+              padding: "8px 10px",
+              "border-radius": "4px",
+              outline: "none",
+              "box-sizing": "border-box",
+              "margin-bottom": "16px",
+            }}
+          />
+          <div style={{ display: "flex", "justify-content": "flex-end", gap: "8px" }}>
+            <button
+              onClick={() => props.onCancel()}
+              style={{
+                background: "none",
+                border: "1px solid #2a323c",
+                color: "#edf2f7",
+                padding: "4px 14px",
+                "border-radius": "4px",
+                cursor: "pointer",
+                "font-size": "12px",
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => submit()}
+              style={{
+                background: "#2a5a8a",
+                border: "1px solid #3a6a9a",
+                color: "#fff",
+                padding: "4px 14px",
+                "border-radius": "4px",
+                cursor: "pointer",
+                "font-size": "12px",
+              }}
+            >
+              Create
+            </button>
+          </div>
+        </div>
+      </div>
+    </Show>
+  );
+}

package/src/share-modal.tsx

@@ -0,0 +1,349 @@
+import {
+  createSignal,
+  createEffect,
+  Show,
+  For,
+  onCleanup,
+  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 { overlayStyle, cardStyle } from "./modal-styles.ts";
+
+type DocAccessList = Record<string, string>;
+
+interface ShareModalProps {
+  isOpen: boolean;
+  docUrl: AutomergeUrl;
+  hive: AutomergeRepoKeyhive;
+  onClose: () => void;
+}
+
+const ACCESS_LEVELS = ["Pull", "Read", "Write", "Admin"] as const;
+
+async function fetchAccessList(
+  hive: AutomergeRepoKeyhive,
+  docUrl: AutomergeUrl
+): Promise<DocAccessList> {
+  const keyhiveDocId = docIdFromAutomergeUrl(docUrl);
+  const accessList: DocAccessList = {};
+  const members = await hive.docMemberCapabilities(keyhiveDocId);
+  members.forEach((capability) => {
+    const hexId = uint8ArrayToHex(capability.who.id.toBytes());
+    accessList[hexId] = capability.can.toString();
+  });
+  return accessList;
+}
+
+const shareCardStyle = {
+  ...cardStyle,
+  width: "420px",
+  "max-height": "80vh",
+  "overflow-y": "auto",
+} as const;
+
+const btnStyle = {
+  background: "none",
+  border: "1px solid #2a323c",
+  color: "#edf2f7",
+  padding: "4px 12px",
+  "border-radius": "4px",
+  cursor: "pointer",
+  "font-size": "12px",
+} as const;
+
+const sectionTitleStyle = {
+  "font-size": "13px",
+  color: "#6b7280",
+  margin: "16px 0 8px",
+} as const;
+
+const dividerStyle = {
+  border: "none",
+  "border-top": "1px solid #2a323c",
+  margin: "12px 0",
+} as const;
+
+export function ShareModal(props: ShareModalProps) {
+  const [contactCardInput, setContactCardInput] = createSignal("");
+  const [docAccessList, setDocAccessList] = createSignal<DocAccessList>({});
+  const [isLoadingAccessList, setIsLoadingAccessList] = createSignal(true);
+  const [currentUserAccess, setCurrentUserAccess] = createSignal<string | undefined>(undefined);
+  const [isSubmitting, setIsSubmitting] = createSignal(false);
+  const keyhiveDocId = createMemo(() => docIdFromAutomergeUrl(props.docUrl));
+
+  const currentUserHexId = createMemo(() => {
+    const id = props.hive.active.individual.id;
+    return id ? uint8ArrayToHex(id.toBytes()) : null;
+  });
+
+  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);
+  });
+
+  const publicHexId = createMemo(() => {
+    const publicId = Identifier.publicId();
+    return uint8ArrayToHex(publicId.toBytes());
+  });
+
+  const currentPublicAccess = createMemo(() => {
+    const accessList = docAccessList();
+    return accessList[publicHexId()] || null;
+  });
+
+  const isAdmin = createMemo(() => currentUserAccess() === "Admin");
+
+  createEffect(() => {
+    if (!props.isOpen) 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());
+        if (!cancelled) setCurrentUserAccess(access ? access.toString() : undefined);
+      } catch (err) {
+        if (!cancelled) { console.error("[ShareModal] Error checking access:", err); setCurrentUserAccess(undefined); }
+      }
+    })();
+    onCleanup(() => { cancelled = true; });
+  });
+
+  createEffect(() => {
+    if (!props.isOpen) return;
+    let cancelled = false;
+    (async () => {
+      if (!cancelled) setIsLoadingAccessList(true);
+      try {
+        const accessList = await fetchAccessList(props.hive, props.docUrl);
+        if (!cancelled) { setDocAccessList(accessList); setIsLoadingAccessList(false); }
+      } catch (err) {
+        if (!cancelled) { console.error("[ShareModal] Error loading access list:", err); setDocAccessList({}); setIsLoadingAccessList(false); }
+      }
+    })();
+    onCleanup(() => { cancelled = true; });
+  });
+
+  createEffect(() => {
+    if (!props.isOpen) return;
+    const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape") props.onClose(); };
+    document.addEventListener("keydown", handleEscape);
+    onCleanup(() => document.removeEventListener("keydown", handleEscape));
+  });
+
+  const handleAddMember = async (e: Event) => {
+    e.preventDefault();
+    const input = contactCardInput().trim();
+    if (!input) return;
+    setIsSubmitting(true);
+    try {
+      const contactCard = ContactCard.fromJson(input);
+      if (!contactCard) throw new Error("Invalid ContactCard JSON");
+      const access = Access.tryFromString("write");
+      if (!access) throw new Error("Invalid access level");
+      await props.hive.addMemberToDoc(props.docUrl, contactCard, access);
+      setContactCardInput("");
+    } catch (err) {
+      console.error("[ShareModal]", err);
+    } finally {
+      const accessList = await fetchAccessList(props.hive, props.docUrl);
+      setDocAccessList(accessList);
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRemoveMember = async (hexId: string) => {
+    try {
+      await props.hive.revokeMemberFromDoc(props.docUrl, hexId);
+    } catch (err) {
+      console.error("[ShareModal]", err);
+    } finally {
+      const accessList = await fetchAccessList(props.hive, props.docUrl);
+      setDocAccessList(accessList);
+    }
+  };
+
+  const handleMakePublic = async () => {
+    try {
+      const access = Access.tryFromString("write");
+      if (!access) throw new Error("Invalid access level");
+      await props.hive.setPublicAccess(props.docUrl, access);
+    } catch (err) {
+      console.error("[ShareModal]", err);
+    } finally {
+      const accessList = await fetchAccessList(props.hive, props.docUrl);
+      setDocAccessList(accessList);
+    }
+  };
+
+  const handleMakePrivate = async () => {
+    try {
+      await props.hive.revokeMemberFromDoc(props.docUrl, publicHexId());
+    } catch (err) {
+      console.error("[ShareModal]", err);
+    } finally {
+      const accessList = await fetchAccessList(props.hive, props.docUrl);
+      setDocAccessList(accessList);
+    }
+  };
+
+  const formatHexId = (hexId: string) => `0x${hexId.slice(0, 12)}...`;
+
+  const sortedMembers = createMemo(() =>
+    Object.entries(docAccessList()).sort(([a], [b]) => a.localeCompare(b))
+  );
+
+  return (
+    <Show when={props.isOpen}>
+      <div
+        onClick={(e) => { if (e.target === e.currentTarget) props.onClose(); }}
+        style={overlayStyle}
+      >
+        <div style={shareCardStyle} onClick={(e) => e.stopPropagation()}>
+          <div style={{ display: "flex", "justify-content": "space-between", "align-items": "center", "margin-bottom": "8px" }}>
+            <h2 style={{ margin: "0", "font-size": "16px" }}>Share this document</h2>
+            <button
+              onClick={() => props.onClose()}
+              style={{ ...btnStyle, border: "none", "font-size": "18px", padding: "0 4px" }}
+              aria-label="Close modal"
+            >
+              &times;
+            </button>
+          </div>
+
+          {/* Public access */}
+          <section>
+            <h3 style={sectionTitleStyle}>Public Access</h3>
+            <div style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+              <Show when={currentPublicAccess()}>
+                <span style={{ "font-size": "13px" }}>
+                  This document is <strong>public</strong>
+                </span>
+              </Show>
+              <Show when={isAdmin()}>
+                <Show when={currentPublicAccess()}>
+                  <button style={btnStyle} onClick={handleMakePrivate}>Revoke Public Access</button>
+                </Show>
+                <Show when={!currentPublicAccess()}>
+                  <button style={btnStyle} onClick={handleMakePublic}>Make Public</button>
+                </Show>
+              </Show>
+            </div>
+          </section>
+
+          <Show when={isAdmin()}>
+            <hr style={dividerStyle} />
+
+            <form onSubmit={handleAddMember}>
+              <textarea
+                placeholder="Paste ContactCard JSON..."
+                value={contactCardInput()}
+                onInput={(e) => setContactCardInput(e.currentTarget.value)}
+                rows={3}
+                style={{
+                  width: "100%",
+                  background: "#15191e",
+                  border: "1px solid #2a323c",
+                  color: "#edf2f7",
+                  "border-radius": "4px",
+                  padding: "6px 8px",
+                  "font-size": "12px",
+                  "font-family": "monospace",
+                  resize: "vertical",
+                  "box-sizing": "border-box",
+                }}
+              />
+              <div style={{ display: "flex", "justify-content": "flex-end", "margin-top": "6px" }}>
+                <button
+                  type="submit"
+                  style={{ ...btnStyle, opacity: isSubmitting() || !contactCardInput().trim() ? "0.5" : "1" }}
+                  disabled={isSubmitting() || !contactCardInput().trim()}
+                >
+                  {isSubmitting() ? "Adding..." : "Add Member"}
+                </button>
+              </div>
+            </form>
+
+            <hr style={dividerStyle} />
+          </Show>
+
+          {/* Members list */}
+          <section>
+            <h3 style={sectionTitleStyle}>Current Access</h3>
+
+            <Show when={isLoadingAccessList()}>
+              <p style={{ "font-size": "13px", color: "#6b7280" }}>Loading...</p>
+            </Show>
+
+            <Show when={!isLoadingAccessList() && sortedMembers().length === 0}>
+              <p style={{ "font-size": "13px", color: "#6b7280" }}>No users have access yet</p>
+            </Show>
+
+            <Show when={!isLoadingAccessList() && sortedMembers().length > 0}>
+              <div>
+                <For each={sortedMembers()}>
+                  {([hexId, access]) => {
+                    const isCurrentUser = hexId === currentUserHexId();
+                    const isSyncServer = hexId === syncServerHexId();
+                    const isPublic = hexId === publicHexId();
+                    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;
+
+                    const displayName = () => {
+                      if (isCurrentUser) return "You";
+                      if (isSyncServer) return "Sync Server";
+                      if (isPublic) return "Public";
+                      return formatHexId(hexId);
+                    };
+
+                    return (
+                      <div style={{
+                        display: "flex",
+                        "justify-content": "space-between",
+                        "align-items": "center",
+                        padding: "4px 0",
+                        "border-bottom": "1px solid #15191e",
+                        "font-size": "13px",
+                      }}>
+                        <div>
+                          <span style={{
+                            color: isCurrentUser ? "#7ab4f5" : isPublic ? "#b5bd68" : "#edf2f7",
+                            "margin-right": "8px",
+                          }}>
+                            {displayName()}
+                          </span>
+                          <span style={{ color: "#6b7280", "font-size": "11px" }}>{access}</span>
+                        </div>
+                        <Show when={canRemove}>
+                          <button
+                            onClick={() => handleRemoveMember(hexId)}
+                            style={{ ...btnStyle, color: "#c66", border: "1px solid #944", padding: "2px 8px" }}
+                            aria-label="Remove member"
+                          >
+                            Revoke
+                          </button>
+                        </Show>
+                      </div>
+                    );
+                  }}
+                </For>
+              </div>
+            </Show>
+          </section>
+        </div>
+      </div>
+    </Show>
+  );
+}

package/src/url-hash.ts

@@ -0,0 +1,13 @@
+import type { AutomergeUrl } from "@automerge/automerge-repo";
+
+export function getDocUrlFromHash(): AutomergeUrl | null {
+  const hash = window.location.hash.slice(1);
+  if (hash && hash.startsWith("automerge:")) {
+    return hash as AutomergeUrl;
+  }
+  return null;
+}
+
+export function setDocUrlInHash(url: AutomergeUrl): void {
+  window.history.replaceState(null, "", `#${url}`);
+}