@jtfmumm/patchwork-standalone-frame 0.1.0

package/dist/modal-styles.d.ts

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

package/dist/mount.d.ts

@@ -0,0 +1,2 @@
+import type { ToolRegistration } from "./index.ts";
+export declare function mountStandaloneApp<D>(rootElement: HTMLElement, tool: ToolRegistration<D>): void;

package/dist/new-doc-modal.d.ts

@@ -0,0 +1,8 @@
+interface NewDocModalProps {
+    isOpen: boolean;
+    defaultTitle: string;
+    onConfirm: (title: string) => void;
+    onCancel: () => void;
+}
+export declare function NewDocModal(props: NewDocModalProps): import("solid-js").JSX.Element;
+export {};

package/dist/share-modal.d.ts

@@ -0,0 +1,10 @@
+import type { AutomergeUrl } from "@automerge/automerge-repo";
+import { type AutomergeRepoKeyhive } from "@automerge/automerge-repo-keyhive";
+interface ShareModalProps {
+    isOpen: boolean;
+    docUrl: AutomergeUrl;
+    hive: AutomergeRepoKeyhive;
+    onClose: () => void;
+}
+export declare function ShareModal(props: ShareModalProps): import("solid-js").JSX.Element;
+export {};

package/dist/url-hash.d.ts

@@ -0,0 +1,3 @@
+import type { AutomergeUrl } from "@automerge/automerge-repo";
+export declare function getDocUrlFromHash(): AutomergeUrl | null;
+export declare function setDocUrlInHash(url: AutomergeUrl): void;

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@jtfmumm/patchwork-standalone-frame",
+  "version": "0.1.0",
+  "description": "Reusable standalone frame for patchwork tools with keyhive, doc history, and access control",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "@automerge/automerge-repo": "^2.5.2-alpha.0",
+    "@automerge/automerge-repo-keyhive": "0.1.0-alpha.17za",
+    "@automerge/automerge-repo-network-websocket": "^2.5.2-alpha.0",
+    "@automerge/automerge-repo-storage-indexeddb": "^2.5.2-alpha.0",
+    "solid-js": "^1.9.9"
+  },
+  "devDependencies": {
+    "@automerge/automerge-repo": "^2.5.2-alpha.0",
+    "@automerge/automerge-repo-keyhive": "0.1.0-alpha.17za",
+    "@automerge/automerge-repo-network-websocket": "^2.5.2-alpha.0",
+    "@automerge/automerge-repo-storage-indexeddb": "^2.5.2-alpha.0",
+    "solid-js": "^1.9.9",
+    "typescript": "^5.9.2",
+    "vite": "^6.0.3",
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.app.json --noEmit false --emitDeclarationOnly --outDir dist",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/confirm-modal.tsx

@@ -0,0 +1,68 @@
+import { Show, createEffect, onCleanup } from "solid-js";
+import { overlayStyle, cardStyle } from "./modal-styles.ts";
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmModal(props: ConfirmModalProps) {
+  createEffect(() => {
+    if (!props.isOpen) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") props.onCancel();
+    };
+    document.addEventListener("keydown", handleEscape);
+    onCleanup(() => document.removeEventListener("keydown", handleEscape));
+  });
+
+  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" }}>{props.title}</h3>
+          <p style={{ margin: "0 0 20px", "font-size": "13px", color: "#6b7280" }}>{props.message}</p>
+          <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={() => props.onConfirm()}
+              style={{
+                background: "#944",
+                border: "1px solid #a55",
+                color: "#fff",
+                padding: "4px 14px",
+                "border-radius": "4px",
+                cursor: "pointer",
+                "font-size": "12px",
+              }}
+            >
+              {props.confirmLabel ?? "Confirm"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Show>
+  );
+}

package/src/doc-history.ts

@@ -0,0 +1,58 @@
+export interface DocHistoryEntry {
+  url: string;
+  title: string;
+  lastOpened: number;
+}
+
+const HISTORY_CAP = 100;
+
+function historyKey(toolId: string, identityHexId: string): string {
+  return `${toolId}-doc-history-${identityHexId}`;
+}
+
+export function activeDocKey(toolId: string, identityHexId: string): string {
+  return `${toolId}-standalone-${identityHexId}`;
+}
+
+export function loadHistory(toolId: string, identityHexId: string): DocHistoryEntry[] {
+  try {
+    const raw = localStorage.getItem(historyKey(toolId, identityHexId));
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveHistory(toolId: string, identityHexId: string, entries: DocHistoryEntry[]): void {
+  localStorage.setItem(historyKey(toolId, identityHexId), JSON.stringify(entries));
+}
+
+export function upsertHistory(toolId: string, identityHexId: string, url: string, title: string): DocHistoryEntry[] {
+  const entries = loadHistory(toolId, identityHexId);
+  const idx = entries.findIndex((e) => e.url === url);
+  if (idx !== -1) {
+    entries[idx].title = title;
+    entries[idx].lastOpened = Date.now();
+  } else {
+    entries.push({ url, title, lastOpened: Date.now() });
+  }
+  entries.sort((a, b) => b.lastOpened - a.lastOpened);
+  const capped = entries.slice(0, HISTORY_CAP);
+  saveHistory(toolId, identityHexId, capped);
+  return capped;
+}
+
+export function removeFromHistory(toolId: string, identityHexId: string, url: string): DocHistoryEntry[] {
+  const entries = loadHistory(toolId, identityHexId).filter((e) => e.url !== url);
+  saveHistory(toolId, identityHexId, entries);
+  return entries;
+}
+
+export function truncateUrl(url: string): string {
+  const prefix = "automerge:";
+  if (url.startsWith(prefix)) {
+    const hash = url.slice(prefix.length);
+    return prefix + hash.slice(0, 12) + "...";
+  }
+  return url;
+}