@better-state/server 0.1.0 → 0.2.0

package/public/playground.html

@@ -9,293 +9,262 @@
 
     body {
       font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
-      background: #0a0a0f;
+      background: #0a0a12;
       color: #e2e8f0;
       min-height: 100vh;
-      padding: 2rem;
-    }
-
-    .header {
       display: flex;
       align-items: center;
-      gap: 0.75rem;
-      margin-bottom: 2rem;
-    }
-    .header h1 {
-      font-size: 1.5rem;
-      font-weight: 700;
-      letter-spacing: -0.02em;
-    }
-    .header h1 span { color: #36adf6; }
-    .badge {
-      font-size: 0.7rem;
-      background: rgba(12, 147, 231, 0.15);
-      color: #7cc8fb;
-      padding: 0.15rem 0.5rem;
-      border-radius: 9999px;
+      justify-content: center;
+      padding: 1.5rem;
     }
 
-    .status-bar {
-      display: flex;
-      gap: 1.5rem;
-      margin-bottom: 2rem;
-      font-size: 0.85rem;
-      color: #94a3b8;
-    }
-    .status-dot {
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      margin-right: 0.4rem;
-      vertical-align: middle;
+    .container { width: 100%; max-width: 520px; }
+
+    .header { margin-bottom: 1.5rem; }
+    .header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
+    .header h1 span { color: #38bdf8; }
+    .subtitle { font-size: 0.8rem; color: #64748b; margin-top: 0.25rem; }
+
+    .status {
+      display: flex; align-items: center; gap: 0.4rem;
+      font-size: 0.75rem; color: #94a3b8; margin-bottom: 1.5rem;
     }
-    .status-dot.green { background: #34d399; }
-    .status-dot.red { background: #f87171; }
-    .status-dot.yellow { background: #fbbf24; }
-
-    .grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-      margin-bottom: 2rem;
+    .dot {
+      width: 7px; height: 7px; border-radius: 50%;
+      transition: background 0.3s;
     }
+    .dot.connecting { background: #fbbf24; animation: pulse 1.2s infinite; }
+    .dot.connected { background: #34d399; }
+    .dot.disconnected { background: #f87171; }
+    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
 
     .card {
-      background: rgba(15, 23, 42, 0.6);
+      background: rgba(15, 23, 42, 0.7);
       border: 1px solid #1e293b;
-      border-radius: 12px;
-      padding: 1.25rem;
-    }
-    .card h2 {
-      font-size: 0.75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: #64748b;
+      border-radius: 16px;
+      padding: 1.5rem;
       margin-bottom: 1rem;
     }
 
-    .state-display {
-      background: #0f172a;
-      border: 1px solid #1e293b;
-      border-radius: 8px;
-      padding: 1rem;
-      font-family: "JetBrains Mono", "Fira Code", monospace;
-      font-size: 0.85rem;
-      min-height: 120px;
-      white-space: pre-wrap;
-      word-break: break-all;
-      color: #a5b4fc;
-      margin-bottom: 1rem;
+    .card-label {
+      font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
+      letter-spacing: 0.08em; color: #475569; margin-bottom: 1rem;
+    }
+
+    /* Counter */
+    .counter-value {
+      font-size: 4rem; font-weight: 800; text-align: center;
+      color: #38bdf8; padding: 0.5rem 0; transition: transform 0.15s;
+      font-variant-numeric: tabular-nums;
     }
+    .counter-value.bump { transform: scale(1.08); }
 
-    .controls { display: flex; gap: 0.5rem; flex-wrap: wrap; }
-
-    button {
-      background: linear-gradient(135deg, #0c93e7, #015da0);
-      color: white;
-      border: none;
-      padding: 0.5rem 1rem;
-      border-radius: 8px;
-      font-size: 0.8rem;
-      font-weight: 500;
-      cursor: pointer;
-      transition: opacity 0.15s;
+    .btn-row {
+      display: flex; gap: 0.5rem; margin-top: 1rem;
     }
-    button:hover { opacity: 0.85; }
-    button.secondary {
-      background: rgba(30, 41, 59, 0.8);
-      border: 1px solid #334155;
+    .btn {
+      flex: 1; padding: 0.6rem; border-radius: 10px;
+      font-size: 0.9rem; font-weight: 600; cursor: pointer;
+      border: 1px solid #1e293b; background: #1e293b; color: #e2e8f0;
+      transition: background 0.15s, border-color 0.15s;
     }
-    button.danger {
-      background: linear-gradient(135deg, #dc2626, #991b1b);
+    .btn:hover { background: #334155; border-color: #334155; }
+    .btn.primary { background: #2563eb; border-color: #2563eb; }
+    .btn.primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
+    .btn.danger { color: #f87171; }
+    .btn.danger:hover { background: #991b1b22; border-color: #7f1d1d; }
+
+    /* Todos */
+    .todo-input-row { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
+    .todo-input {
+      flex: 1; padding: 0.55rem 0.75rem; border-radius: 10px;
+      background: #0f172a; border: 1px solid #334155; color: #e2e8f0;
+      font-size: 0.85rem;
     }
+    .todo-input:focus { outline: none; border-color: #38bdf8; }
 
-    input[type="text"] {
-      background: #0f172a;
-      border: 1px solid #334155;
-      color: #e2e8f0;
-      padding: 0.5rem 0.75rem;
-      border-radius: 8px;
+    .todo-list { list-style: none; }
+    .todo-item {
+      display: flex; align-items: center; gap: 0.6rem;
+      padding: 0.5rem 0; border-bottom: 1px solid #1e293b;
       font-size: 0.85rem;
-      flex: 1;
-      min-width: 180px;
     }
-    input[type="text"]:focus { outline: none; border-color: #36adf6; }
+    .todo-item:last-child { border-bottom: none; }
+    .todo-check {
+      width: 18px; height: 18px; border-radius: 50%;
+      border: 2px solid #475569; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0; transition: all 0.2s;
+    }
+    .todo-check.done { background: #34d399; border-color: #34d399; }
+    .todo-check.done::after { content: "✓"; color: #0a0a12; font-size: 0.7rem; font-weight: 700; }
+    .todo-text { flex: 1; }
+    .todo-text.done { text-decoration: line-through; color: #64748b; }
+    .todo-delete {
+      background: none; border: none; color: #475569; cursor: pointer;
+      font-size: 1rem; padding: 0 0.25rem; transition: color 0.15s;
+    }
+    .todo-delete:hover { color: #f87171; }
+    .empty { color: #475569; font-size: 0.8rem; text-align: center; padding: 1rem 0; }
 
+    /* Log */
     .log {
-      background: #0f172a;
-      border: 1px solid #1e293b;
-      border-radius: 8px;
-      padding: 1rem;
+      background: #0a0a12; border: 1px solid #1e293b; border-radius: 10px;
+      padding: 0.75rem; max-height: 160px; overflow-y: auto;
       font-family: "JetBrains Mono", "Fira Code", monospace;
-      font-size: 0.75rem;
-      max-height: 300px;
-      overflow-y: auto;
-      line-height: 1.6;
-    }
-    .log .entry { margin-bottom: 0.25rem; }
-    .log .ts { color: #475569; }
-    .log .event { color: #34d399; }
-    .log .data { color: #94a3b8; }
-    .log .error { color: #f87171; }
-
-    .hint {
-      font-size: 0.8rem;
-      color: #475569;
-      margin-top: 0.5rem;
-      line-height: 1.5;
+      font-size: 0.7rem; line-height: 1.7;
     }
+    .log-entry .ts { color: #334155; }
+    .log-entry .ev { color: #34d399; }
+    .log-entry .dt { color: #64748b; }
 
-    @media (max-width: 768px) {
-      .grid { grid-template-columns: 1fr; }
+    .footer {
+      text-align: center; font-size: 0.7rem; color: #334155;
+      margin-top: 1.5rem; line-height: 1.6;
     }
+    .footer code { color: #475569; }
   </style>
 </head>
 <body>
-  <div class="header">
-    <h1><span>Better</span>-State</h1>
-    <span class="badge">Playground</span>
-  </div>
+  <div class="container">
+    <div class="header">
+      <h1><span>Better</span>-State</h1>
+      <div class="subtitle">Playground — open in multiple tabs to see real-time sync</div>
+    </div>
 
-  <div class="status-bar">
-    <div><span id="conn-dot" class="status-dot yellow"></span> <span id="conn-text">Connecting...</span></div>
-    <div>Client: <code id="client-id">—</code></div>
-    <div>Version: <code id="version">0</code></div>
-  </div>
+    <div class="status">
+      <div id="dot" class="dot connecting"></div>
+      <span id="status-text">connecting</span>
+    </div>
 
-  <div class="grid">
-    <!-- Counter state -->
+    <!-- Counter -->
     <div class="card">
-      <h2>State: counter</h2>
-      <div id="counter-display" class="state-display">0</div>
-      <div class="controls">
-        <button onclick="increment()">+ Increment</button>
-        <button onclick="decrement()" class="secondary">- Decrement</button>
-        <button onclick="resetCounter()" class="danger">Reset</button>
+      <div class="card-label">Synced Counter</div>
+      <div id="counter" class="counter-value">0</div>
+      <div class="btn-row">
+        <button class="btn" onclick="dec()">- 1</button>
+        <button class="btn danger" onclick="resetCounter()">Reset</button>
+        <button class="btn primary" onclick="inc()">+ 1</button>
       </div>
-      <p class="hint">Click buttons in multiple tabs — they all sync in real-time.</p>
     </div>
 
-    <!-- Todos state -->
+    <!-- Todos -->
     <div class="card">
-      <h2>State: todos</h2>
-      <div id="todos-display" class="state-display">[]</div>
-      <div class="controls">
-        <input id="todo-input" type="text" placeholder="Add a todo..." onkeydown="if(event.key==='Enter') addTodo()" />
-        <button onclick="addTodo()">Add</button>
-        <button onclick="clearTodos()" class="danger">Clear</button>
+      <div class="card-label">Synced Todo List</div>
+      <div class="todo-input-row">
+        <input id="input" class="todo-input" placeholder="Add a todo..." onkeydown="if(event.key==='Enter')addTodo()" />
+        <button class="btn primary" style="flex:none;padding:.55rem .9rem" onclick="addTodo()">Add</button>
       </div>
+      <ul id="list" class="todo-list">
+        <li class="empty">No todos yet</li>
+      </ul>
     </div>
-  </div>
 
-  <!-- Event log -->
-  <div class="card">
-    <h2>Event Log</h2>
-    <div id="log" class="log">
-      <div class="entry"><span class="ts">[init]</span> <span class="data">Waiting for connection...</span></div>
+    <!-- Log -->
+    <div class="card">
+      <div class="card-label">Event Log</div>
+      <div id="log" class="log"></div>
+    </div>
+
+    <div class="footer">
+      State powered by <code>@better-state/client</code><br/>
+      Changes sync instantly across every connected tab
     </div>
   </div>
 
   <script type="module">
-    // --- Config ---
-    // The API key is injected by the server into the page.
     const API_KEY = "__API_KEY__";
-    const SERVER_URL = window.location.origin;
-
-    // --- Load SDK ---
     const { createClient } = await import("/sdk/browser.mjs");
 
-    const log = document.getElementById("log");
-    const connDot = document.getElementById("conn-dot");
-    const connText = document.getElementById("conn-text");
-    const clientIdEl = document.getElementById("client-id");
-    const versionEl = document.getElementById("version");
-
-    function addLog(event, data, isError = false) {
-      const ts = new Date().toLocaleTimeString();
-      const entry = document.createElement("div");
-      entry.className = "entry";
-      entry.innerHTML = `<span class="ts">[${ts}]</span> <span class="${isError ? "error" : "event"}">${event}</span> <span class="data">${data}</span>`;
-      log.appendChild(entry);
-      log.scrollTop = log.scrollHeight;
+    const logEl = document.getElementById("log");
+    const counterEl = document.getElementById("counter");
+    const listEl = document.getElementById("list");
+    const dotEl = document.getElementById("dot");
+    const statusEl = document.getElementById("status-text");
+    const inputEl = document.getElementById("input");
+
+    function log(ev, data) {
+      const t = new Date().toLocaleTimeString("en", { hour12: false });
+      const d = document.createElement("div");
+      d.className = "log-entry";
+      d.innerHTML = `<span class="ts">${t}</span> <span class="ev">${ev}</span> <span class="dt">${data}</span>`;
+      logEl.appendChild(d);
+      logEl.scrollTop = logEl.scrollHeight;
     }
 
-    // --- Create client ---
-    const client = createClient(SERVER_URL, {
-      apiKey: API_KEY,
-      debug: true,
-    });
+    const bs = createClient(location.origin, { apiKey: API_KEY, debug: false });
 
-    clientIdEl.textContent = "connecting...";
+    bs.onStatusChange(s => {
+      dotEl.className = "dot " + s;
+      statusEl.textContent = s;
+      log("status", s);
+    });
 
-    // --- Counter state ---
-    const counter = client.state("counter", 0);
+    bs.onError(e => log("error", e.message));
 
-    counter.subscribe((val) => {
-      document.getElementById("counter-display").textContent = JSON.stringify(val, null, 2);
-      versionEl.textContent = counter.getVersion();
-      addLog("counter:update", `value=${val} version=${counter.getVersion()}`);
+    // Counter
+    const counter = bs.state("counter", 0);
+    counter.subscribe(v => {
+      counterEl.textContent = v;
+      counterEl.classList.add("bump");
+      setTimeout(() => counterEl.classList.remove("bump"), 150);
+      log("counter", `value=${v}`);
     });
 
-    // --- Todos state ---
-    const todos = client.state("todos", []);
+    window.inc = () => counter.update(n => n + 1);
+    window.dec = () => counter.update(n => n - 1);
+    window.resetCounter = () => counter.set(0);
 
-    todos.subscribe((val) => {
-      document.getElementById("todos-display").textContent = JSON.stringify(val, null, 2);
-      addLog("todos:update", `items=${Array.isArray(val) ? val.length : "?"}`);
-    });
+    // Todos
+    const todos = bs.state("todos", []);
 
-    // --- Connection status ---
-    // Poll connection status (simple approach)
-    setInterval(() => {
-      const connected = counter.getVersion() >= 0;
-      if (connText.textContent === "Connecting..." && counter.getVersion() > 0) {
-        connDot.className = "status-dot green";
-        connText.textContent = "Connected";
-        clientIdEl.textContent = client._clientId || "active";
+    function renderTodos(items) {
+      if (!Array.isArray(items) || items.length === 0) {
+        listEl.innerHTML = '<li class="empty">No todos yet</li>';
+        return;
       }
-    }, 500);
-
-    // Mark connected once we get first state
-    setTimeout(() => {
-      connDot.className = "status-dot green";
-      connText.textContent = "Connected";
-    }, 2000);
-
-    // --- Actions (exposed globally for onclick handlers) ---
-    window.increment = () => {
-      counter.update((n) => n + 1);
-      addLog("action", "increment");
-    };
+      listEl.innerHTML = items.map(t => `
+        <li class="todo-item">
+          <div class="todo-check ${t.done ? "done" : ""}" onclick="toggleTodo('${t.id}')"></div>
+          <span class="todo-text ${t.done ? "done" : ""}">${esc(t.text)}</span>
+          <button class="todo-delete" onclick="deleteTodo('${t.id}')">×</button>
+        </li>
+      `).join("");
+    }
 
-    window.decrement = () => {
-      counter.update((n) => n - 1);
-      addLog("action", "decrement");
-    };
+    function esc(s) {
+      const d = document.createElement("div");
+      d.textContent = s;
+      return d.innerHTML;
+    }
 
-    window.resetCounter = () => {
-      counter.update(() => 0);
-      addLog("action", "reset counter");
-    };
+    todos.subscribe(v => {
+      renderTodos(v);
+      log("todos", `count=${Array.isArray(v) ? v.length : 0}`);
+    });
 
     window.addTodo = () => {
-      const input = document.getElementById("todo-input");
-      const text = input.value.trim();
+      const text = inputEl.value.trim();
       if (!text) return;
       const id = crypto.randomUUID();
-      todos.update((list) => [...list, { id, text, done: false }]);
-      addLog("action", `add todo: "${text}"`);
-      input.value = "";
+      const current = todos.get();
+      todos.set([...(Array.isArray(current) ? current : []), { id, text, done: false }]);
+      inputEl.value = "";
+    };
+
+    window.toggleTodo = (id) => {
+      const current = todos.get();
+      if (!Array.isArray(current)) return;
+      todos.set(current.map(t => t.id === id ? { ...t, done: !t.done } : t));
     };
 
-    window.clearTodos = () => {
-      todos.update(() => []);
-      addLog("action", "clear todos");
+    window.deleteTodo = (id) => {
+      const current = todos.get();
+      if (!Array.isArray(current)) return;
+      todos.set(current.filter(t => t.id !== id));
     };
 
-    addLog("init", "SDK loaded, connecting to server...");
+    log("init", "SDK loaded");
   </script>
 </body>
 </html>