tablinum 0.0.1

package/examples/svelte/src/routes/+page.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { initDb, type AppSchema, type TodoRecord } from "$lib/db";
+	import type { Database, Collection, LiveQuery } from "localstr/svelte";
+
+	let db: Database<AppSchema> | null = $state(null);
+	let todos: Collection<AppSchema["todos"]> | null = $state(null);
+	let incomplete: LiveQuery<TodoRecord> | null = $state(null);
+	let done: LiveQuery<TodoRecord> | null = $state(null);
+
+	let title = $state("");
+	let importKeyHex = $state("");
+	let loading = $state(true);
+	let initError = $state<string | null>(null);
+	let imported = $state(false);
+	let keyCopied = $state(false);
+
+	async function init() {
+		try {
+			const result = await initDb();
+			db = result.db;
+			imported = result.imported;
+			todos = db.collection("todos");
+			incomplete = todos.where("done").equals(false).live();
+			done = todos.where("done").equals(true).live();
+			loading = false;
+		} catch (e: unknown) {
+			initError = e instanceof Error ? e.message : String(e);
+			loading = false;
+		}
+	}
+
+	init();
+
+	async function addTodo(e: SubmitEvent) {
+		e.preventDefault();
+		if (!todos || !title.trim()) return;
+		await todos.add({ title: title.trim(), done: false, priority: 1 });
+		title = "";
+	}
+
+	async function toggle(id: string, currentDone: boolean) {
+		if (!todos) return;
+		await todos.update(id, { done: !currentDone });
+	}
+
+	async function remove(id: string) {
+		if (!todos) return;
+		await todos.delete(id);
+	}
+
+	async function sync() {
+		if (!db) return;
+		await db.sync();
+	}
+
+	async function rebuild() {
+		if (!db) return;
+		await db.rebuild();
+	}
+
+	function copyKey() {
+		if (!db) return;
+		navigator.clipboard.writeText(db.exportKey()).then(
+			() => {
+				keyCopied = true;
+				setTimeout(() => (keyCopied = false), 2000);
+			},
+			() => {},
+		);
+	}
+
+	function importKey() {
+		const hex = importKeyHex.trim().toLowerCase();
+		if (hex.length !== 64) return;
+		if (!/^[0-9a-f]+$/.test(hex)) return;
+		window.location.search = `?key=${hex}`;
+	}
+
+	onDestroy(() => {
+		incomplete?.destroy();
+		done?.destroy();
+		db?.close();
+	});
+</script>
+
+<svelte:head>
+	<title>localstr Svelte Demo</title>
+</svelte:head>
+
+<main>
+	<h1>localstr Svelte Demo</h1>
+
+	{#if loading}
+		<p>Initializing database...</p>
+	{:else if initError}
+		<p class="error">Failed to initialize: {initError}</p>
+	{:else if todos && db}
+		<div class="key-section">
+			<label>Current key:</label>
+			<div class="key-display">{db.exportKey()}</div>
+			{#if imported}
+				<p class="imported-badge">Imported from URL</p>
+			{/if}
+			<div class="key-import">
+				<input
+					bind:value={importKeyHex}
+					placeholder="Paste hex private key to import..."
+				/>
+				<button onclick={importKey}>Import Key</button>
+			</div>
+		</div>
+
+		{#if db.status === "syncing"}
+			<p class="sync-status">Syncing...</p>
+		{/if}
+
+		{#if todos.error}
+			<p class="error">{todos.error.message}</p>
+		{/if}
+
+		<form onsubmit={addTodo}>
+			<input bind:value={title} placeholder="Add a todo..." autofocus />
+			<button type="submit">Add</button>
+		</form>
+
+		<p class="count">{todos.items.length} total</p>
+
+		<h2>Todo ({incomplete?.items.length ?? 0})</h2>
+		<ul>
+			{#each incomplete?.items ?? [] as todo}
+				<li>
+					<label>
+						<input
+							type="checkbox"
+							checked={false}
+							onchange={() => toggle(todo.id, todo.done)}
+						/>
+						<span>{todo.title}</span>
+					</label>
+					<button class="delete" onclick={() => remove(todo.id)}
+						>✕</button
+					>
+				</li>
+			{/each}
+		</ul>
+
+		<h2>Done ({done?.items.length ?? 0})</h2>
+		<ul>
+			{#each done?.items ?? [] as todo}
+				<li class="done">
+					<label>
+						<input
+							type="checkbox"
+							checked={true}
+							onchange={() => toggle(todo.id, todo.done)}
+						/>
+						<span>{todo.title}</span>
+					</label>
+					<button class="delete" onclick={() => remove(todo.id)}
+						>✕</button
+					>
+				</li>
+			{/each}
+		</ul>
+
+		<div class="actions">
+			<button onclick={sync}>Sync</button>
+			<button onclick={rebuild}>Rebuild</button>
+			<button onclick={copyKey}
+				>{keyCopied ? "Copied!" : "Copy Key"}</button
+			>
+		</div>
+	{/if}
+</main>
+
+<style>
+	* {
+		box-sizing: border-box;
+		margin: 0;
+		padding: 0;
+	}
+
+	main {
+		font-family: system-ui, sans-serif;
+		max-width: 600px;
+		margin: 2rem auto;
+		padding: 0 1rem;
+	}
+
+	h1 {
+		margin-bottom: 1rem;
+	}
+
+	h2 {
+		margin: 1rem 0 0.5rem;
+		font-size: 1rem;
+		color: #666;
+	}
+
+	form {
+		display: flex;
+		gap: 0.5rem;
+		margin-bottom: 1rem;
+	}
+
+	input[type="text"] {
+		flex: 1;
+		padding: 0.5rem;
+		font-size: 1rem;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+	}
+
+	input[type="checkbox"] {
+		flex: none;
+	}
+
+	button {
+		padding: 0.5rem 1rem;
+		font-size: 1rem;
+		cursor: pointer;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		background: #f5f5f5;
+	}
+
+	button:hover {
+		background: #e0e0e0;
+	}
+
+	ul {
+		list-style: none;
+	}
+
+	li {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0;
+		border-bottom: 1px solid #eee;
+	}
+
+	li label {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+	}
+
+	li.done span {
+		opacity: 0.5;
+		text-decoration: line-through;
+	}
+
+	.delete {
+		padding: 0.25rem 0.5rem;
+		font-size: 0.875rem;
+	}
+
+	.count {
+		color: #666;
+		margin-bottom: 0.5rem;
+	}
+
+	.actions {
+		display: flex;
+		gap: 0.5rem;
+		margin-top: 1.5rem;
+		flex-wrap: wrap;
+	}
+
+	.error {
+		color: #c00;
+		margin-bottom: 1rem;
+	}
+
+	.sync-status {
+		color: #06c;
+		margin-bottom: 0.5rem;
+	}
+
+	.key-section {
+		margin-bottom: 1rem;
+		padding: 0.75rem;
+		background: #f9f9f9;
+		border: 1px solid #ddd;
+		border-radius: 4px;
+	}
+
+	.key-section label {
+		display: block;
+		font-size: 0.85rem;
+		color: #666;
+		margin-bottom: 0.25rem;
+	}
+
+	.key-display {
+		font-family: monospace;
+		font-size: 0.8rem;
+		word-break: break-all;
+		color: #333;
+		margin-bottom: 0.5rem;
+	}
+
+	.key-import {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.key-import input {
+		font-family: monospace;
+		font-size: 0.8rem;
+	}
+
+	.imported-badge {
+		font-size: 0.8rem;
+		color: #06c;
+		margin-bottom: 0.5rem;
+	}
+</style>

package/examples/svelte/svelte.config.js

@@ -0,0 +1,16 @@
+import adapter from "@sveltejs/adapter-static";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    adapter: adapter({
+      fallback: "index.html",
+    }),
+    alias: {
+      "localstr/svelte": "../../src/svelte/index.svelte.ts",
+      localstr: "../../src/index.ts",
+    },
+  },
+};
+
+export default config;

package/examples/svelte/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true
+  }
+}

package/examples/svelte/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [sveltekit()],
+});

package/examples/vanilla/app.ts

@@ -0,0 +1,219 @@
+import { Effect, Stream } from "effect";
+import { field, collection, createLocalstr } from "../../src/index.ts";
+
+// Read key from URL if present: ?key=<hex>
+function getKeyFromUrl(): Uint8Array | undefined {
+  const params = new URLSearchParams(window.location.search);
+  const hex = params.get("key");
+  if (!hex || hex.length !== 64) return undefined;
+  const bytes = new Uint8Array(32);
+  for (let i = 0; i < 32; i++) {
+    bytes[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+  }
+  return bytes;
+}
+
+const log = (msg: string) => {
+  const el = document.getElementById("log")!;
+  el.textContent += msg + "\n";
+  el.scrollTop = el.scrollHeight;
+};
+
+const app = Effect.gen(function* () {
+  const todos = collection(
+    "todos",
+    {
+      title: field.string(),
+      done: field.boolean(),
+      priority: field.number(),
+    },
+    { indices: ["done", "priority"] },
+  );
+
+  const importedKey = getKeyFromUrl();
+  // Use a unique DB name per key so imported keys get a fresh DB
+  const dbSuffix = importedKey ? "-imported" : "";
+
+  const db = yield* createLocalstr({
+    schema: { todos },
+    relays: ["wss://relay.nostr.place"],
+    dbName: `localstr-demo${dbSuffix}`,
+    privateKey: importedKey,
+    onSyncError: (err) => {
+      log(`Sync error: ${err.message}`);
+    },
+  });
+
+  const col = db.collection("todos");
+  const fullKey = db.exportKey();
+
+  // Show key in UI
+  document.getElementById("key-display")!.textContent = fullKey;
+  if (importedKey) {
+    log("Imported key from URL");
+  }
+
+  // Wire up UI
+  const form = document.getElementById("add-form") as HTMLFormElement;
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const titleInput = document.getElementById("title") as HTMLInputElement;
+    const title = titleInput.value.trim();
+    if (!title) return;
+
+    Effect.runPromise(
+      Effect.gen(function* () {
+        const id = yield* col.add({ title, done: false, priority: 1 } as any);
+        log(`Added: "${title}" (${id})`);
+        titleInput.value = "";
+        yield* renderTodos();
+      }),
+    ).catch((err) => {
+      log(`Error: ${err}`);
+      if (err?.cause) log(`Cause: ${err.cause}`);
+      console.error(err);
+    });
+  });
+
+  const renderTodos = () =>
+    Effect.gen(function* () {
+      const all = yield* col.where("done").equals(false).sortBy("priority").get();
+      const done = yield* col.where("done").equals(true).get();
+      const count = yield* col.count();
+
+      const list = document.getElementById("todos")!;
+      list.innerHTML = "";
+
+      for (const todo of all) {
+        const li = document.createElement("li");
+        li.innerHTML = `
+          <span>${todo.title}</span>
+          <button data-id="${todo.id}" data-action="done">✓</button>
+          <button data-id="${todo.id}" data-action="delete">✕</button>
+        `;
+        list.appendChild(li);
+      }
+
+      for (const todo of done) {
+        const li = document.createElement("li");
+        li.style.opacity = "0.5";
+        li.style.textDecoration = "line-through";
+        li.innerHTML = `
+          <span>${todo.title}</span>
+          <button data-id="${todo.id}" data-action="delete">✕</button>
+        `;
+        list.appendChild(li);
+      }
+
+      document.getElementById("count")!.textContent = `${count} total`;
+    });
+
+  // Handle todo actions (done/delete)
+  document.getElementById("todos")!.addEventListener("click", (e) => {
+    const btn = (e.target as HTMLElement).closest("button");
+    if (!btn) return;
+    const id = btn.dataset.id!;
+    const action = btn.dataset.action!;
+
+    const effect =
+      action === "done"
+        ? Effect.gen(function* () {
+            yield* col.update(id, { done: true } as any);
+            log(`Completed: ${id}`);
+            yield* renderTodos();
+          })
+        : Effect.gen(function* () {
+            yield* col.delete(id);
+            log(`Deleted: ${id}`);
+            yield* renderTodos();
+          });
+
+    Effect.runPromise(effect).catch((err) => {
+      log(`Error: ${err}`);
+      if (err?.cause) log(`Cause: ${err.cause}`);
+      console.error(err);
+    });
+  });
+
+  // Sync button
+  document.getElementById("sync-btn")!.addEventListener("click", () => {
+    log("Syncing...");
+    Effect.runPromise(
+      Effect.gen(function* () {
+        yield* db.sync();
+        log("Sync complete");
+        yield* renderTodos();
+      }),
+    ).catch((err) => {
+      log(`Sync error: ${err}`);
+      if (err?.cause) log(`Cause: ${err.cause}`);
+      console.error(err);
+    });
+  });
+
+  // Rebuild button
+  document.getElementById("rebuild-btn")!.addEventListener("click", () => {
+    Effect.runPromise(
+      Effect.gen(function* () {
+        yield* db.rebuild();
+        log("Rebuilt records from events");
+        yield* renderTodos();
+      }),
+    ).catch((err) => {
+      log(`Error: ${err}`);
+      if (err?.cause) log(`Cause: ${err.cause}`);
+      console.error(err);
+    });
+  });
+
+  // Copy key button
+  document.getElementById("copy-btn")!.addEventListener("click", () => {
+    navigator.clipboard.writeText(fullKey).then(
+      () => log("Key copied to clipboard"),
+      () => log(`Key: ${fullKey}`),
+    );
+  });
+
+  // Import key button — reload page with key in URL
+  document.getElementById("import-btn")!.addEventListener("click", () => {
+    const input = document.getElementById("import-key") as HTMLInputElement;
+    const hex = input.value.trim();
+    if (hex.length !== 64) {
+      log("Error: key must be 64 hex characters");
+      return;
+    }
+    if (!/^[0-9a-f]+$/i.test(hex)) {
+      log("Error: key must be valid hex");
+      return;
+    }
+    window.location.search = `?key=${hex.toLowerCase()}`;
+  });
+
+  log("localstr initialized");
+  log(`Key: ${fullKey.slice(0, 16)}...`);
+
+  yield* renderTodos();
+
+  // Watch for changes (local + remote) and re-render automatically
+  yield* col.watch().pipe(
+    Stream.runForEach((todos) =>
+      Effect.gen(function* () {
+        console.log("[localstr:watch] todos changed:", todos);
+        yield* renderTodos();
+      }).pipe(
+        Effect.catch((_e) =>
+          Effect.sync(() => console.error("[localstr:watch] render error:", _e)),
+        ),
+      ),
+    ),
+  );
+});
+
+Effect.runPromise(Effect.scoped(app)).catch((err) => {
+  document.getElementById("log")!.textContent += `Fatal: ${err}\n`;
+  if (err?.cause) {
+    document.getElementById("log")!.textContent += `Cause: ${err.cause}\n`;
+    console.error("Cause:", err.cause);
+  }
+  console.error(err);
+});

package/examples/vanilla/index.html

@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>localstr demo</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        font-family: system-ui, sans-serif;
+        max-width: 600px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+      }
+      h1 {
+        margin-bottom: 1rem;
+      }
+      form {
+        display: flex;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+      }
+      input {
+        flex: 1;
+        padding: 0.5rem;
+        font-size: 1rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      button {
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        cursor: pointer;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        background: #f5f5f5;
+      }
+      button:hover {
+        background: #e0e0e0;
+      }
+      ul {
+        list-style: none;
+        margin-bottom: 1rem;
+      }
+      li {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 0;
+        border-bottom: 1px solid #eee;
+      }
+      li span {
+        flex: 1;
+      }
+      li button {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.875rem;
+      }
+      #count {
+        color: #666;
+        margin-bottom: 1rem;
+      }
+      .actions {
+        display: flex;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+        flex-wrap: wrap;
+      }
+      #log {
+        background: #1a1a1a;
+        color: #0f0;
+        padding: 1rem;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 0.8rem;
+        white-space: pre-wrap;
+        max-height: 200px;
+        overflow-y: auto;
+      }
+      .key-section {
+        margin-bottom: 1rem;
+        padding: 0.75rem;
+        background: #f9f9f9;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+      }
+      .key-section label {
+        display: block;
+        font-size: 0.85rem;
+        color: #666;
+        margin-bottom: 0.25rem;
+      }
+      .key-display {
+        font-family: monospace;
+        font-size: 0.8rem;
+        word-break: break-all;
+        color: #333;
+        margin-bottom: 0.5rem;
+      }
+      .key-import {
+        display: flex;
+        gap: 0.5rem;
+      }
+      .key-import input {
+        font-family: monospace;
+        font-size: 0.8rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>localstr demo</h1>
+
+    <div class="key-section">
+      <label>Current key:</label>
+      <div class="key-display" id="key-display">loading...</div>
+      <div class="key-import">
+        <input id="import-key" type="text" placeholder="Paste hex private key to import..." />
+        <button id="import-btn">Import Key</button>
+      </div>
+    </div>
+
+    <form id="add-form">
+      <input id="title" type="text" placeholder="Add a todo..." autofocus />
+      <button type="submit">Add</button>
+    </form>
+
+    <div id="count"></div>
+    <ul id="todos"></ul>
+
+    <div class="actions">
+      <button id="sync-btn">Sync</button>
+      <button id="rebuild-btn">Rebuild</button>
+      <button id="copy-btn">Copy Key</button>
+    </div>
+
+    <div id="log"></div>
+
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>