@syncular/ui 0.0.0

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

@@ -0,0 +1,129 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { SectionHeading } from './section-heading';
+
+export interface ExplanationSectionProps {
+  className?: string;
+}
+
+const features = [
+  {
+    title: 'Instant UI',
+    color: 'healthy',
+    description:
+      'Queries hit local SQLite in <1ms. No loading spinners, no network in the hot path.',
+  },
+  {
+    title: 'Offline by default',
+    color: 'flow',
+    description:
+      'Writes queue in a local outbox. Sync happens when connectivity returns.',
+  },
+  {
+    title: 'Commit-log sync',
+    color: 'flow',
+    description:
+      'Append-only log of changes. Incremental pulls. Easy to reason about and debug.',
+  },
+  {
+    title: 'Scope-based auth',
+    color: 'syncing',
+    description:
+      'Every change tagged with scope values. Pulls return only what\u2019s requested and allowed.',
+  },
+  {
+    title: 'Blob storage',
+    color: 'violet-400',
+    description:
+      'Sync binary files alongside structured data. Adapters for filesystem, database, and S3-compatible storage (S3/R2/MinIO).',
+  },
+  {
+    title: 'End-to-end encryption',
+    color: 'pink-400',
+    description:
+      'Field-level E2E encryption (XChaCha20-Poly1305) with BIP39 key sharing.',
+  },
+  {
+    title: 'Observability',
+    color: 'healthy',
+    description:
+      'Pluggable telemetry \u2014 logs, traces, metrics, exceptions. Sentry adapter or bring your own.',
+  },
+  {
+    title: 'Admin console',
+    color: 'flow',
+    description:
+      'Inspect commits, clients, and events. Trigger prune/compact and debug sync in production.',
+  },
+] as const;
+
+function colorClasses(color: string) {
+  switch (color) {
+    case 'healthy':
+      return { bg: 'bg-healthy/10', text: 'text-healthy' };
+    case 'flow':
+      return { bg: 'bg-flow/10', text: 'text-flow' };
+    case 'syncing':
+      return { bg: 'bg-syncing/10', text: 'text-syncing' };
+    case 'violet-400':
+      return { bg: 'bg-violet-400/10', text: 'text-violet-400' };
+    case 'pink-400':
+      return { bg: 'bg-pink-400/10', text: 'text-pink-400' };
+    default:
+      return { bg: 'bg-flow/10', text: 'text-flow' };
+  }
+}
+
+export const ExplanationSection = forwardRef<
+  HTMLElement,
+  ExplanationSectionProps
+>(function ExplanationSection({ className }, ref) {
+  return (
+    <section
+      ref={ref}
+      id="why-syncular"
+      className={cn('py-24 border-t border-border', className)}
+    >
+      <div className="max-w-[1400px] mx-auto px-6">
+        <SectionHeading
+          label="Why Syncular"
+          title="Everything you need for offline-first sync. Nothing you don't."
+        />
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {features.map((feature) => {
+            const colors = colorClasses(feature.color);
+            return (
+              <div
+                key={feature.title}
+                className="dashboard-panel rounded-lg p-6"
+              >
+                <div className="flex items-center gap-2 mb-4">
+                  <div
+                    className={cn(
+                      'w-8 h-8 rounded flex items-center justify-center',
+                      colors.bg
+                    )}
+                  >
+                    <div
+                      className={cn('w-2 h-2 rounded-full', colors.text)}
+                      style={{ backgroundColor: 'currentColor' }}
+                    />
+                  </div>
+                  <span className="font-display font-semibold text-white text-sm">
+                    {feature.title}
+                  </span>
+                </div>
+                <p className="text-sm text-neutral-400 leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/observable-universe/footer-bar.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+export interface FooterBarProps {
+  className?: string;
+}
+
+export const FooterBar = forwardRef<HTMLElement, FooterBarProps>(
+  function FooterBar({ className }, ref) {
+    return (
+      <footer
+        ref={ref}
+        className={cn('border-t border-border py-10', className)}
+      >
+        <div className="max-w-[1400px] mx-auto px-6 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <span className="font-display font-bold text-white text-sm">
+              syncular
+            </span>
+            <span
+              className="w-1.5 h-1.5 rounded-full bg-healthy inline-block"
+              style={{ boxShadow: '0 0 4px #22c55e' }}
+            />
+          </div>
+          <div className="font-mono text-[11px] text-neutral-600">
+            Offline-first sync for SQLite. Open source.
+          </div>
+        </div>
+      </footer>
+    );
+  }
+);

package/src/observable-universe/hero-dashboard-section.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { CommitStreamPanel } from './commit-stream-panel';
+import { ConnectedClientsPanel } from './connected-clients-panel';
+import { LiveMetricsBar } from './live-metrics-bar';
+import { SyncTopologyPanel } from './sync-topology-panel';
+import type {
+  ObservableClient,
+  ObservableMetrics,
+  ObservableStreamEntry,
+} from './types';
+
+export interface HeroDashboardSectionProps {
+  clients: ObservableClient[];
+  streamEntries: ObservableStreamEntry[];
+  metrics: ObservableMetrics;
+  streamRate?: string;
+  className?: string;
+}
+
+export const HeroDashboardSection = forwardRef<
+  HTMLElement,
+  HeroDashboardSectionProps
+>(function HeroDashboardSection(
+  { clients, streamEntries, metrics, streamRate, className },
+  ref
+) {
+  return (
+    <section
+      ref={ref}
+      className={cn('pt-16 pb-4 min-h-screen flex flex-col', className)}
+    >
+      {/* Title bar */}
+      <div className="max-w-[1400px] mx-auto w-full px-6 pt-6 pb-4">
+        <h1 className="font-display font-bold text-3xl md:text-4xl text-white leading-tight">
+          Offline-first SQL sync you can operate.
+        </h1>
+        <p className="font-display text-base text-neutral-500 mt-2 max-w-2xl">
+          Web, Electron, Expo. Local SQLite read and write path. Commit-log
+          sync. Scopes for partial sync and auth.
+        </p>
+        <div className="mt-3 flex items-center gap-2 flex-wrap">
+          <span className="font-mono text-[10px] uppercase tracking-widest text-amber-300 border border-amber-300/30 px-2 py-0.5 rounded">
+            Alpha
+          </span>
+          <span className="text-sm text-neutral-500">
+            APIs and storage layouts will change. Pin versions and expect manual
+            migrations between versions.
+          </span>
+        </div>
+      </div>
+
+      {/* Dashboard grid */}
+      <div
+        className="max-w-[1400px] mx-auto w-full px-6 flex-1 grid grid-cols-1 lg:grid-cols-[320px_1fr_320px] gap-3 pb-3"
+        style={{ minHeight: 520 }}
+      >
+        <ConnectedClientsPanel clients={clients} />
+        <SyncTopologyPanel clients={clients} />
+        <CommitStreamPanel entries={streamEntries} rate={streamRate} />
+      </div>
+
+      {/* Bottom strip: Live Metrics */}
+      <div className="max-w-[1400px] mx-auto w-full px-6 pb-6">
+        <LiveMetricsBar metrics={metrics} />
+      </div>
+    </section>
+  );
+});

package/src/observable-universe/index.ts

@@ -0,0 +1,16 @@
+export * from './architecture-section';
+export * from './code-section';
+export * from './commit-stream-panel';
+export * from './connected-clients-panel';
+export * from './constants';
+export * from './explanation-section';
+export * from './footer-bar';
+export * from './hero-dashboard-section';
+export * from './install-section';
+export * from './live-metrics-bar';
+export * from './observable-universe-header';
+export * from './observable-universe-landing';
+export * from './section-heading';
+export * from './sync-topology-panel';
+export * from './types';
+export * from './use-observable-universe-simulation';

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

@@ -0,0 +1,119 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+export interface InstallSectionProps {
+  docsHref?: string;
+  demoHref?: string;
+  githubHref?: string;
+  className?: string;
+}
+
+export const InstallSection = forwardRef<HTMLElement, InstallSectionProps>(
+  function InstallSection(
+    {
+      docsHref = '/docs',
+      demoHref,
+      githubHref = 'https://github.com/syncular/syncular',
+      className,
+    },
+    ref
+  ) {
+    return (
+      <section
+        ref={ref}
+        id="install"
+        className={cn('py-24 border-t border-border', className)}
+      >
+        <div className="max-w-[1400px] mx-auto px-6 text-center">
+          <span className="font-mono text-[11px] text-flow uppercase tracking-widest">
+            Get started
+          </span>
+          <h2 className="font-display font-bold text-2xl md:text-3xl text-white mt-4">
+            Syncular is modular. Install only what you need.
+          </h2>
+
+          <div className="mt-10 grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-4xl mx-auto text-left">
+            {/* Server install */}
+            <div className="code-block">
+              <div className="code-header">
+                <span className="w-2 h-2 rounded-full bg-healthy inline-block" />
+                <span>Server</span>
+              </div>
+              <pre className="font-mono text-sm px-6 py-4">
+                <code>
+                  <span className="text-neutral-500">$</span>{' '}
+                  <span className="text-white">bun add @syncular/server \</span>
+                  {'\n'}
+                  <span className="text-white">
+                    {'  '}@syncular/server-hono \
+                  </span>
+                  {'\n'}
+                  <span className="text-white">
+                    {'  '}@syncular/server-dialect-postgres \
+                  </span>
+                  {'\n'}
+                  <span className="text-white">{'  '}kysely pg hono</span>
+                </code>
+              </pre>
+            </div>
+
+            {/* Client install */}
+            <div className="code-block">
+              <div className="code-header">
+                <span className="w-2 h-2 rounded-full bg-flow inline-block" />
+                <span>Client</span>
+              </div>
+              <pre className="font-mono text-sm px-6 py-4">
+                <code>
+                  <span className="text-neutral-500">$</span>{' '}
+                  <span className="text-white">bun add @syncular/client \</span>
+                  {'\n'}
+                  <span className="text-white">
+                    {'  '}@syncular/client-react \
+                  </span>
+                  {'\n'}
+                  <span className="text-white">
+                    {'  '}@syncular/transport-http \
+                  </span>
+                  {'\n'}
+                  <span className="text-white">
+                    {'  '}@syncular/dialect-wa-sqlite kysely
+                  </span>
+                </code>
+              </pre>
+            </div>
+          </div>
+
+          <div className="mt-10 flex items-center justify-center gap-4 flex-wrap">
+            {docsHref ? (
+              <a
+                href={docsHref}
+                className="font-display font-medium text-sm bg-flow text-white px-6 py-2.5 rounded hover:bg-blue-600 transition-colors"
+              >
+                Read the docs
+              </a>
+            ) : null}
+            {demoHref ? (
+              <a
+                href={demoHref}
+                className="font-display font-medium text-sm border border-flow text-flow px-6 py-2.5 rounded hover:bg-flow/10 transition-colors"
+              >
+                Try the demo
+              </a>
+            ) : null}
+            {githubHref ? (
+              <a
+                href={githubHref}
+                className="font-display font-medium text-sm border border-border text-neutral-300 px-6 py-2.5 rounded hover:border-neutral-500 hover:text-white transition-colors"
+              >
+                View on GitHub
+              </a>
+            ) : null}
+          </div>
+        </div>
+      </section>
+    );
+  }
+);

package/src/observable-universe/live-metrics-bar.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import type { ObservableMetrics } from './types';
+
+export interface LiveMetricsBarProps {
+  metrics: ObservableMetrics;
+  className?: string;
+}
+
+export const LiveMetricsBar = forwardRef<HTMLDivElement, LiveMetricsBarProps>(
+  function LiveMetricsBar({ metrics, className }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'dashboard-panel rounded-lg px-6 py-3 flex items-center justify-between flex-wrap gap-4',
+          className
+        )}
+      >
+        <div className="flex items-center gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-flow inline-block" />
+          <span className="font-mono text-[11px] text-neutral-500 uppercase">
+            Commits/sec
+          </span>
+          <span className="font-mono text-sm text-white font-medium">
+            {metrics.commitsPerSec.toFixed(1)}
+          </span>
+        </div>
+        <div className="w-px h-4 bg-border" />
+        <div className="flex items-center gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-healthy inline-block" />
+          <span className="font-mono text-[11px] text-neutral-500 uppercase">
+            Avg Sync Latency
+          </span>
+          <span className="font-mono text-sm text-white font-medium">
+            {metrics.avgLatency}ms
+          </span>
+        </div>
+        <div className="w-px h-4 bg-border" />
+        <div className="flex items-center gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-syncing inline-block" />
+          <span className="font-mono text-[11px] text-neutral-500 uppercase">
+            Active Clients
+          </span>
+          <span className="font-mono text-sm text-white font-medium">
+            {metrics.activeClients}
+          </span>
+        </div>
+        <div className="w-px h-4 bg-border" />
+        <div className="flex items-center gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-healthy inline-block" />
+          <span className="font-mono text-[11px] text-neutral-500 uppercase">
+            Uptime
+          </span>
+          <span className="font-mono text-sm text-white font-medium">
+            {metrics.uptime}
+          </span>
+        </div>
+      </div>
+    );
+  }
+);

package/src/observable-universe/observable-universe-header.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { ExternalLink, Github, Star } from 'lucide-react';
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { UI_VERSION } from '../version';
+
+export interface ObservableUniverseHeaderTopicLink {
+  label: string;
+  href: string;
+}
+
+export interface ObservableUniverseHeaderProps {
+  topicLinks?: ObservableUniverseHeaderTopicLink[];
+  demoHref?: string;
+  consoleHref?: string;
+  githubHref?: string;
+  githubStars?: number | null;
+  className?: string;
+}
+
+const DEFAULT_TOPIC_LINKS: ObservableUniverseHeaderTopicLink[] = [
+  { label: 'Introduction', href: '/docs/introduction' },
+  { label: 'Build', href: '/docs/build' },
+  { label: 'Client SDK', href: '/docs/client-sdk' },
+  { label: 'Server', href: '/docs/server' },
+  { label: 'API', href: '/docs/api' },
+];
+
+function isExternalHref(href: string): boolean {
+  return href.startsWith('http://') || href.startsWith('https://');
+}
+
+function formatCompactCount(value: number): string {
+  if (value < 1000) return value.toString();
+  if (value < 10_000) {
+    const short = (value / 1000).toFixed(1);
+    return `${short.endsWith('.0') ? short.slice(0, -2) : short}k`;
+  }
+  if (value < 1_000_000) {
+    return `${Math.floor(value / 1000)}k`;
+  }
+  const short = (value / 1_000_000).toFixed(1);
+  return `${short.endsWith('.0') ? short.slice(0, -2) : short}m`;
+}
+
+export const ObservableUniverseHeader = forwardRef<
+  HTMLElement,
+  ObservableUniverseHeaderProps
+>(function ObservableUniverseHeader(
+  {
+    topicLinks = DEFAULT_TOPIC_LINKS,
+    demoHref,
+    consoleHref,
+    githubHref = 'https://github.com/syncular/syncular',
+    githubStars,
+    className,
+  },
+  ref
+) {
+  const formattedStars =
+    typeof githubStars === 'number' ? formatCompactCount(githubStars) : null;
+
+  return (
+    <nav
+      ref={ref}
+      className={cn(
+        'fixed top-0 left-0 right-0 z-50 border-b border-border',
+        className
+      )}
+      style={{
+        background: 'rgba(12,12,12,0.92)',
+        backdropFilter: 'blur(12px)',
+      }}
+    >
+      <div className="max-w-[1400px] mx-auto px-6 h-12 flex items-center gap-4">
+        <a href="/" className="flex items-center gap-3 shrink-0">
+          <span className="font-display font-bold text-white text-sm tracking-tight">
+            syncular
+          </span>
+          <span
+            className="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block"
+            style={{ boxShadow: '0 0 6px #f59e0b' }}
+          />
+          <span className="font-mono text-[10px] text-amber-300/80 uppercase tracking-widest">
+            alpha
+          </span>
+          <span className="font-mono text-[10px] text-neutral-500 tracking-wider">
+            v{UI_VERSION}
+          </span>
+        </a>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-5 overflow-x-auto whitespace-nowrap [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+            {topicLinks.map((topic) => (
+              <a
+                key={`${topic.label}:${topic.href}`}
+                href={topic.href}
+                className="font-mono text-[11px] text-neutral-500 hover:text-white transition-colors uppercase tracking-wider"
+              >
+                {topic.label}
+              </a>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {demoHref ? (
+            <a
+              href={demoHref}
+              target={isExternalHref(demoHref) ? '_blank' : undefined}
+              rel={isExternalHref(demoHref) ? 'noreferrer noopener' : undefined}
+              className="font-mono text-[11px] text-white transition-colors bg-purple-600 hover:bg-purple-500 px-3 py-1 rounded flex items-center gap-1.5"
+            >
+              Demo
+              <ExternalLink className="size-2.5 opacity-50" />
+            </a>
+          ) : null}
+          {consoleHref ? (
+            <a
+              href={consoleHref}
+              className="font-mono text-[11px] text-flow hover:text-white transition-colors border border-flow/40 px-2.5 py-1 rounded"
+            >
+              Console
+            </a>
+          ) : null}
+          {githubHref ? (
+            <a
+              href={githubHref}
+              target={isExternalHref(githubHref) ? '_blank' : undefined}
+              rel={
+                isExternalHref(githubHref) ? 'noreferrer noopener' : undefined
+              }
+              className={cn(
+                'text-neutral-400 hover:text-white transition-colors border border-border rounded inline-flex items-center',
+                formattedStars ? 'px-2.5 py-1 gap-1.5' : 'p-1.5'
+              )}
+              aria-label={
+                formattedStars ? `GitHub (${formattedStars} stars)` : 'GitHub'
+              }
+            >
+              <Github className="size-3.5" />
+              {formattedStars ? (
+                <span className="font-mono text-[10px] text-neutral-300 inline-flex items-center gap-1">
+                  <Star className="size-2.5" />
+                  {formattedStars}
+                </span>
+              ) : null}
+            </a>
+          ) : null}
+        </div>
+      </div>
+    </nav>
+  );
+});

package/src/observable-universe/observable-universe-landing.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { ArchitectureSection } from './architecture-section';
+import { CodeSection } from './code-section';
+import { ExplanationSection } from './explanation-section';
+import { FooterBar } from './footer-bar';
+import { HeroDashboardSection } from './hero-dashboard-section';
+import { InstallSection } from './install-section';
+import {
+  ObservableUniverseHeader,
+  type ObservableUniverseHeaderTopicLink,
+} from './observable-universe-header';
+import { useObservableUniverseSimulation } from './use-observable-universe-simulation';
+
+export interface ObservableUniverseLandingProps {
+  docsHref?: string;
+  topicLinks?: ObservableUniverseHeaderTopicLink[];
+  demoHref?: string;
+  consoleHref?: string;
+  githubHref?: string;
+  githubStars?: number | null;
+  className?: string;
+}
+
+export const ObservableUniverseLanding = forwardRef<
+  HTMLDivElement,
+  ObservableUniverseLandingProps
+>(function ObservableUniverseLanding(
+  {
+    docsHref,
+    topicLinks,
+    demoHref,
+    consoleHref,
+    githubHref,
+    githubStars,
+    className,
+  },
+  ref
+) {
+  const { clients, entries, metrics, streamRate } =
+    useObservableUniverseSimulation();
+
+  return (
+    <div
+      ref={ref}
+      className={cn('bg-surface text-foreground min-h-screen', className)}
+    >
+      <ObservableUniverseHeader
+        topicLinks={topicLinks}
+        demoHref={demoHref}
+        consoleHref={consoleHref}
+        githubHref={githubHref}
+        githubStars={githubStars}
+      />
+      <HeroDashboardSection
+        clients={clients}
+        streamEntries={entries}
+        metrics={metrics}
+        streamRate={streamRate}
+      />
+      <ExplanationSection />
+      <ArchitectureSection />
+      <CodeSection />
+      <InstallSection
+        docsHref={docsHref}
+        demoHref={demoHref}
+        githubHref={githubHref}
+      />
+      <FooterBar />
+    </div>
+  );
+});