@syncular/ui 0.0.0

package/src/navigation/top-navigation.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export type TopNavigationProps = {
+  brand?: ReactNode;
+  center?: ReactNode;
+  right?: ReactNode;
+  className?: string;
+};
+
+export function TopNavigation({
+  brand,
+  center,
+  right,
+  className,
+}: TopNavigationProps) {
+  return (
+    <nav
+      className={cn(
+        'fixed top-0 left-0 right-0 z-100 h-[42px] border-b border-border bg-surface/88 backdrop-blur-lg flex items-center justify-between px-5',
+        className
+      )}
+    >
+      <div className="flex items-center gap-3">{brand}</div>
+      <div className="flex items-center gap-0.5">{center}</div>
+      <div className="flex items-center gap-2">{right}</div>
+    </nav>
+  );
+}

package/src/observable-universe/architecture-section.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { SectionHeading } from './section-heading';
+
+export interface ArchitectureSectionProps {
+  className?: string;
+}
+
+export const ArchitectureSection = forwardRef<
+  HTMLElement,
+  ArchitectureSectionProps
+>(function ArchitectureSection({ className }, ref) {
+  return (
+    <section
+      ref={ref}
+      id="architecture"
+      className={cn('py-24 border-t border-border', className)}
+    >
+      <div className="max-w-[1400px] mx-auto px-6">
+        <SectionHeading
+          label="How sync works"
+          title="Local SQLite on every client. Commit log for change tracking. Server as the source of truth."
+        />
+
+        {/* Architecture diagram */}
+        <div className="dashboard-panel rounded-lg p-8 md:p-12 overflow-x-auto">
+          <div className="flex items-center justify-center gap-0 min-w-[700px]">
+            {/* Client A */}
+            <div className="flex flex-col items-center gap-2 shrink-0">
+              <div className="w-32 border border-border rounded-lg p-4 text-center bg-panel">
+                <div className="font-mono text-[10px] text-neutral-500 uppercase mb-1">
+                  Client A
+                </div>
+                <div className="font-mono text-xs text-white">SQLite</div>
+                <div className="font-mono text-[10px] text-neutral-600 mt-1">
+                  outbox + local DB
+                </div>
+              </div>
+            </div>
+
+            {/* Arrow */}
+            <div className="flex flex-col items-center gap-1 px-3 shrink-0">
+              <svg width="60" height="24" viewBox="0 0 60 24">
+                <path
+                  d="M0 12h52m-6-5l6 5-6 5"
+                  stroke="#3b82f6"
+                  strokeWidth="1.5"
+                  fill="none"
+                  strokeLinecap="round"
+                />
+              </svg>
+              <span className="font-mono text-[9px] text-flow">HTTP / WS</span>
+            </div>
+
+            {/* Transport */}
+            <div className="flex flex-col items-center gap-2 shrink-0">
+              <div
+                className="w-28 border border-flow/30 rounded-lg p-4 text-center"
+                style={{ background: 'rgba(59,130,246,0.05)' }}
+              >
+                <div className="font-mono text-[10px] text-flow uppercase mb-1">
+                  Transport
+                </div>
+                <div className="font-mono text-xs text-white">Push / Pull</div>
+                <div className="font-mono text-[10px] text-neutral-600 mt-1">
+                  delta sync
+                </div>
+              </div>
+            </div>
+
+            {/* Arrow */}
+            <div className="flex flex-col items-center gap-1 px-3 shrink-0">
+              <svg width="60" height="24" viewBox="0 0 60 24">
+                <path
+                  d="M0 12h52m-6-5l6 5-6 5"
+                  stroke="#3b82f6"
+                  strokeWidth="1.5"
+                  fill="none"
+                  strokeLinecap="round"
+                />
+              </svg>
+              <span className="font-mono text-[9px] text-flow">commits</span>
+            </div>
+
+            {/* Server */}
+            <div className="flex flex-col items-center gap-2 shrink-0">
+              <div
+                className="w-36 border-2 border-flow rounded-lg p-4 text-center relative"
+                style={{
+                  background: 'rgba(59,130,246,0.08)',
+                  boxShadow: '0 0 20px rgba(59,130,246,0.15)',
+                }}
+              >
+                <div className="font-mono text-[10px] text-flow uppercase mb-1">
+                  Server
+                </div>
+                <div className="font-mono text-xs text-white font-medium">
+                  Commit Log
+                </div>
+                <div className="font-mono text-[10px] text-neutral-600 mt-1">
+                  source of truth
+                </div>
+              </div>
+            </div>
+
+            {/* Arrow */}
+            <div className="flex flex-col items-center gap-1 px-3 shrink-0">
+              <svg width="60" height="24" viewBox="0 0 60 24">
+                <path
+                  d="M0 12h52m-6-5l6 5-6 5"
+                  stroke="#3b82f6"
+                  strokeWidth="1.5"
+                  fill="none"
+                  strokeLinecap="round"
+                />
+              </svg>
+              <span className="font-mono text-[9px] text-flow">commits</span>
+            </div>
+
+            {/* Transport */}
+            <div className="flex flex-col items-center gap-2 shrink-0">
+              <div
+                className="w-28 border border-flow/30 rounded-lg p-4 text-center"
+                style={{ background: 'rgba(59,130,246,0.05)' }}
+              >
+                <div className="font-mono text-[10px] text-flow uppercase mb-1">
+                  Transport
+                </div>
+                <div className="font-mono text-xs text-white">Push / Pull</div>
+                <div className="font-mono text-[10px] text-neutral-600 mt-1">
+                  delta sync
+                </div>
+              </div>
+            </div>
+
+            {/* Arrow */}
+            <div className="flex flex-col items-center gap-1 px-3 shrink-0">
+              <svg width="60" height="24" viewBox="0 0 60 24">
+                <path
+                  d="M0 12h52m-6-5l6 5-6 5"
+                  stroke="#3b82f6"
+                  strokeWidth="1.5"
+                  fill="none"
+                  strokeLinecap="round"
+                />
+              </svg>
+              <span className="font-mono text-[9px] text-flow">HTTP / WS</span>
+            </div>
+
+            {/* Client B */}
+            <div className="flex flex-col items-center gap-2 shrink-0">
+              <div className="w-32 border border-border rounded-lg p-4 text-center bg-panel">
+                <div className="font-mono text-[10px] text-neutral-500 uppercase mb-1">
+                  Client B
+                </div>
+                <div className="font-mono text-xs text-white">SQLite</div>
+                <div className="font-mono text-[10px] text-neutral-600 mt-1">
+                  outbox + local DB
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Step cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-6">
+          <div className="dashboard-panel rounded-lg p-5">
+            <div className="font-mono text-[10px] text-healthy uppercase tracking-wider mb-2">
+              Bootstrap
+            </div>
+            <p className="text-sm text-neutral-400 leading-relaxed">
+              First sync sends a point-in-time snapshot, chunked and compressed
+              for large datasets.
+            </p>
+          </div>
+          <div className="dashboard-panel rounded-lg p-5">
+            <div className="font-mono text-[10px] text-syncing uppercase tracking-wider mb-2">
+              Push
+            </div>
+            <p className="text-sm text-neutral-400 leading-relaxed">
+              Client writes locally, queues in outbox, pushes to server. Server
+              validates and writes to commit log.
+            </p>
+          </div>
+          <div className="dashboard-panel rounded-lg p-5">
+            <div className="font-mono text-[10px] text-flow uppercase tracking-wider mb-2">
+              Pull
+            </div>
+            <p className="text-sm text-neutral-400 leading-relaxed">
+              Client sends its cursor. Server returns commits since then,
+              filtered by scopes.
+            </p>
+          </div>
+          <div className="dashboard-panel rounded-lg p-5">
+            <div className="font-mono text-[10px] text-violet-400 uppercase tracking-wider mb-2">
+              Realtime
+            </div>
+            <p className="text-sm text-neutral-400 leading-relaxed">
+              WebSocket wakes clients on new commits. Data still flows over
+              HTTP.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/observable-universe/code-section.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { SectionHeading } from './section-heading';
+
+export interface CodeSectionProps {
+  className?: string;
+}
+
+const dialects = [
+  {
+    dialect: 'Postgres',
+    runtime: 'Node.js / Bun / Edge',
+    href: '/docs/server/dialects',
+  },
+  {
+    dialect: 'SQLite',
+    runtime: 'Node.js / Bun',
+    href: '/docs/server/dialects',
+  },
+  {
+    dialect: 'wa-sqlite',
+    runtime: 'Browser (WASM)',
+    clientOnly: true,
+    href: '/docs/build/runtimes/web',
+  },
+  {
+    dialect: 'PGlite',
+    runtime: 'Browser (WASM)',
+    href: '/docs/build/runtimes/web',
+  },
+  {
+    dialect: 'better-sqlite3',
+    runtime: 'Node.js / Electron',
+    href: '/docs/build/runtimes/bun-node',
+  },
+  {
+    dialect: 'sqlite3',
+    runtime: 'Node.js',
+    href: '/docs/build/runtimes/bun-node',
+  },
+  {
+    dialect: 'Bun SQLite',
+    runtime: 'Bun',
+    href: '/docs/build/runtimes/bun-node',
+  },
+  {
+    dialect: 'Expo SQLite',
+    runtime: 'React Native',
+    clientOnly: true,
+    href: '/docs/build/runtimes/expo',
+  },
+  {
+    dialect: 'Nitro SQLite',
+    runtime: 'React Native',
+    clientOnly: true,
+    href: '/docs/build/runtimes/expo',
+  },
+  {
+    dialect: 'LibSQL',
+    runtime: 'Turso / LibSQL',
+    href: '/docs/server/dialects',
+  },
+  {
+    dialect: 'Neon',
+    runtime: 'Neon Postgres (serverless)',
+    href: '/docs/build/runtimes/cloudflare',
+  },
+  {
+    dialect: 'D1',
+    runtime: 'Cloudflare Workers',
+    href: '/docs/build/runtimes/cloudflare',
+  },
+];
+
+export const CodeSection = forwardRef<HTMLElement, CodeSectionProps>(
+  function CodeSection({ className }, ref) {
+    return (
+      <section
+        ref={ref}
+        id="databases"
+        className={cn('py-24 border-t border-border', className)}
+      >
+        <div className="max-w-[1400px] mx-auto px-6">
+          <SectionHeading
+            label="Runs everywhere"
+            title="Pick the dialect for your runtime. Mix and match client and server."
+          />
+
+          <div className="max-w-3xl">
+            <div className="dashboard-panel rounded-lg overflow-hidden">
+              <div className="px-6 py-4 border-b border-border">
+                <div className="flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full bg-flow inline-block" />
+                  <span className="font-mono text-[11px] text-flow uppercase tracking-wider">
+                    Supported dialects
+                  </span>
+                </div>
+              </div>
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-border">
+                    <th className="text-left text-[11px] font-mono text-neutral-500 uppercase tracking-wider px-6 py-3">
+                      Dialect
+                    </th>
+                    <th className="text-left text-[11px] font-mono text-neutral-500 uppercase tracking-wider px-6 py-3">
+                      Runtime
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {dialects.map((row) => (
+                    <tr key={row.dialect} className="border-b border-border/50">
+                      <td className="px-6 py-3 font-mono text-sm text-white">
+                        <a
+                          href={row.href}
+                          className="underline decoration-border underline-offset-4 transition-colors hover:text-flow hover:decoration-flow"
+                        >
+                          {row.dialect}
+                        </a>
+                      </td>
+                      <td className="px-6 py-3 text-sm text-neutral-400">
+                        {row.runtime}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+);

package/src/observable-universe/commit-stream-panel.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import type { ObservableStreamEntry } from './types';
+
+export interface CommitStreamPanelProps {
+  entries: ObservableStreamEntry[];
+  rate?: string;
+  className?: string;
+}
+
+function formatDetail(entry: ObservableStreamEntry) {
+  if (entry.operation === 'PUSH') {
+    return {
+      color: 'text-amber-400',
+      detail: (
+        <>
+          <span className="text-neutral-500">{entry.table}</span>
+          {'  '}
+          <span className="text-neutral-400">{entry.mutation}</span>
+          {'  '}
+          <span className="text-neutral-500">
+            +{entry.commits} commit{entry.commits > 1 ? 's' : ''}
+          </span>
+        </>
+      ),
+    };
+  }
+  if (entry.operation === 'PULL') {
+    return {
+      color: 'text-emerald-400',
+      detail: (
+        <>
+          <span className="text-neutral-500">{entry.table}</span>
+          {'  '}
+          <span className="text-neutral-400">
+            +{entry.commits} commit{entry.commits > 1 ? 's' : ''}
+          </span>{' '}
+          <span className="text-neutral-600">(synced)</span>
+        </>
+      ),
+    };
+  }
+  return {
+    color: 'text-blue-400',
+    detail: (
+      <>
+        <span className="text-neutral-500">sync complete</span>{' '}
+        <span className="text-neutral-600">(0 conflicts)</span>
+      </>
+    ),
+  };
+}
+
+export const CommitStreamPanel = forwardRef<
+  HTMLDivElement,
+  CommitStreamPanelProps
+>(function CommitStreamPanel({ entries, rate, className }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn('dashboard-panel rounded-lg flex flex-col', className)}
+    >
+      <div className="px-4 py-3 border-b border-border flex items-center justify-between">
+        <span className="font-mono text-[11px] text-neutral-400 uppercase tracking-wider">
+          Commit Stream
+        </span>
+        {rate ? (
+          <span className="font-mono text-[11px] text-healthy">{rate}</span>
+        ) : null}
+      </div>
+      <div className="flex-1 overflow-hidden relative">
+        <div
+          className="absolute inset-x-0 top-0 h-6 z-10 pointer-events-none"
+          style={{
+            background: 'linear-gradient(to bottom, #111111, transparent)',
+          }}
+        />
+        <div
+          className="absolute inset-x-0 bottom-0 h-8 z-10 pointer-events-none"
+          style={{
+            background: 'linear-gradient(to top, #111111, transparent)',
+          }}
+        />
+        <div
+          className="p-3 space-y-0.5 overflow-hidden"
+          style={{ maxHeight: '100%' }}
+        >
+          {entries.map((entry) => {
+            const { color, detail } = formatDetail(entry);
+            return (
+              <div
+                key={entry.id}
+                className="stream-entry font-mono text-[9px] leading-5 whitespace-nowrap"
+              >
+                <span className="text-neutral-600">{entry.timestamp}</span>
+                {'  '}
+                <span className={cn('font-medium', color)}>
+                  {entry.operation.padEnd(4)}
+                </span>
+                {'  '}
+                <span className="text-neutral-400">
+                  {entry.clientId.padEnd(10)}
+                </span>
+                {'  '}
+                {detail}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/observable-universe/connected-clients-panel.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import type { ObservableClient } from './types';
+
+export interface ConnectedClientsPanelProps {
+  clients: ObservableClient[];
+  className?: string;
+}
+
+function formatSyncTime(client: ObservableClient) {
+  if (client.status === 'syncing') {
+    return `pushing ${client.syncingCommits ?? 0} commits...`;
+  }
+  if (client.lastSync === 0) return 'just now';
+  if (client.lastSync < 60) return `${client.lastSync}s ago`;
+  return `${Math.floor(client.lastSync / 60)}m ago`;
+}
+
+function statusDotChar(status: ObservableClient['status']) {
+  if (status === 'online') return '\u25CF';
+  if (status === 'syncing') return '\u25D0';
+  return '\u25CB';
+}
+
+const statusDotClass: Record<ObservableClient['status'], string> = {
+  online: 'text-healthy',
+  syncing: 'text-syncing animate-[dotPulse_1s_ease-in-out_infinite]',
+  offline: 'text-offline',
+};
+
+const statusTextClass: Record<ObservableClient['status'], string> = {
+  online: 'text-emerald-500',
+  syncing: 'text-amber-500',
+  offline: 'text-red-500',
+};
+
+export const ConnectedClientsPanel = forwardRef<
+  HTMLDivElement,
+  ConnectedClientsPanelProps
+>(function ConnectedClientsPanel({ clients, className }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn('dashboard-panel rounded-lg flex flex-col', className)}
+    >
+      <div className="px-4 py-3 border-b border-border flex items-center justify-between">
+        <span className="font-mono text-[11px] text-neutral-400 uppercase tracking-wider">
+          Connected Clients
+        </span>
+        <span className="font-mono text-[11px] text-neutral-600">
+          {clients.length} nodes
+        </span>
+      </div>
+      <div className="flex-1 overflow-auto p-2 space-y-1">
+        {clients.map((client) => (
+          <div
+            key={client.id}
+            className="flex items-start gap-3 px-3 py-2.5 rounded hover:bg-white/[0.02] transition-colors"
+          >
+            <span
+              className={cn(
+                'font-mono text-sm mt-0.5 shrink-0',
+                statusDotClass[client.status]
+              )}
+            >
+              {statusDotChar(client.status)}
+            </span>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-xs text-white truncate">
+                  {client.id}
+                </span>
+                <span className="font-mono text-[10px] text-neutral-600">
+                  ({client.type})
+                </span>
+                {client.via === 'relay' ? (
+                  <span className="font-mono text-[9px] text-violet-400/60 border border-violet-400/20 rounded px-1 ml-1">
+                    relay
+                  </span>
+                ) : null}
+              </div>
+              <div className="flex items-center gap-3 mt-0.5">
+                <span
+                  className={cn(
+                    'font-mono text-[10px]',
+                    statusTextClass[client.status]
+                  )}
+                >
+                  {client.status}
+                </span>
+                <span className="font-mono text-[10px] text-neutral-600">
+                  sync: {formatSyncTime(client)}
+                </span>
+              </div>
+              <div className="font-mono text-[10px] text-neutral-600 mt-0.5">
+                commits:{' '}
+                <span className="text-neutral-400">
+                  {client.commits.toLocaleString()}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

package/src/observable-universe/constants.ts

@@ -0,0 +1,84 @@
+import type { ObservableClient } from './types';
+
+export const INITIAL_CLIENTS: ObservableClient[] = [
+  {
+    id: 'client-a',
+    type: 'mobile',
+    status: 'online',
+    lastSync: 2,
+    commits: 847,
+    via: 'direct',
+  },
+  {
+    id: 'client-b',
+    type: 'desktop',
+    status: 'online',
+    lastSync: 0,
+    commits: 1203,
+    via: 'direct',
+  },
+  {
+    id: 'client-c',
+    type: 'tablet',
+    status: 'syncing',
+    lastSync: 0,
+    commits: 445,
+    syncingCommits: 3,
+    via: 'direct',
+  },
+  {
+    id: 'client-d',
+    type: 'edge',
+    status: 'offline',
+    lastSync: 240,
+    commits: 201,
+    via: 'direct',
+  },
+  {
+    id: 'client-e',
+    type: 'mobile',
+    status: 'online',
+    lastSync: 1,
+    commits: 312,
+    via: 'relay',
+  },
+  {
+    id: 'client-f',
+    type: 'laptop',
+    status: 'online',
+    lastSync: 3,
+    commits: 589,
+    via: 'relay',
+  },
+  {
+    id: 'client-g',
+    type: 'iot',
+    status: 'offline',
+    lastSync: 180,
+    commits: 67,
+    via: 'relay',
+  },
+];
+
+export const TABLES = ['todos', 'projects', 'notes', 'users'];
+export const MUTATIONS = ['INSERT', 'UPDATE', 'DELETE'] as const;
+export const OPERATIONS = [
+  'PUSH',
+  'PULL',
+  'ACK',
+  'PUSH',
+  'PULL',
+  'PUSH',
+] as const;
+
+export const NODE_POSITIONS: Record<string, { x: number; y: number }> = {
+  server: { x: 195, y: 210 },
+  relay: { x: 465, y: 210 },
+  'client-a': { x: 52, y: 100 },
+  'client-b': { x: 38, y: 220 },
+  'client-c': { x: 52, y: 340 },
+  'client-d': { x: 195, y: 390 },
+  'client-e': { x: 608, y: 100 },
+  'client-f': { x: 622, y: 220 },
+  'client-g': { x: 608, y: 340 },
+};