tablinum 0.0.1 → 0.1.1

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

@@ -1,322 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-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

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

package/examples/svelte/vite.config.ts

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

package/examples/vanilla/app.ts

@@ -1,219 +0,0 @@
-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

@@ -1,144 +0,0 @@
-<!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>