@syncular/ui 0.0.0

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+export interface SectionHeadingProps {
+  label?: string;
+  title: string;
+  description?: string;
+  className?: string;
+}
+
+export const SectionHeading = forwardRef<HTMLDivElement, SectionHeadingProps>(
+  function SectionHeading({ label, title, description, className }, ref) {
+    return (
+      <div ref={ref} className={cn('max-w-2xl mb-16', className)}>
+        {label ? (
+          <span className="font-mono text-[11px] text-flow uppercase tracking-widest">
+            {label}
+          </span>
+        ) : null}
+        <h2 className="font-display font-bold text-2xl md:text-3xl text-white mt-4 leading-tight">
+          {title}
+        </h2>
+        {description ? (
+          <p className="text-neutral-400 mt-4 leading-relaxed">{description}</p>
+        ) : null}
+      </div>
+    );
+  }
+);

package/src/observable-universe/sync-topology-panel.tsx

@@ -0,0 +1,409 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { NODE_POSITIONS } from './constants';
+import type { ObservableClient } from './types';
+
+export interface SyncTopologyPanelProps {
+  clients: ObservableClient[];
+  className?: string;
+}
+
+const statusStroke: Record<ObservableClient['status'], string> = {
+  online: '#22c55e',
+  syncing: '#f59e0b',
+  offline: '#ef4444',
+};
+
+export const SyncTopologyPanel = forwardRef<
+  HTMLDivElement,
+  SyncTopologyPanelProps
+>(function SyncTopologyPanel({ clients, className }, ref) {
+  const server = NODE_POSITIONS.server;
+  const relay = NODE_POSITIONS.relay;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'dashboard-panel rounded-lg flex flex-col items-center justify-center relative overflow-hidden',
+        className
+      )}
+      style={{
+        backgroundImage:
+          'radial-gradient(circle at 1px 1px, #1a1a1a 1px, transparent 0)',
+        backgroundSize: '24px 24px',
+      }}
+    >
+      <div className="absolute top-3 left-4 z-10">
+        <span className="font-mono text-[11px] text-neutral-400 uppercase tracking-wider">
+          Sync Topology
+        </span>
+      </div>
+      <svg
+        viewBox="0 0 660 420"
+        className="w-full max-w-[660px] h-auto"
+        style={{ minHeight: 320 }}
+      >
+        {/* Orbit arcs */}
+        <ellipse
+          cx={server.x}
+          cy={server.y}
+          rx={155}
+          ry={155}
+          fill="none"
+          stroke="#1a1a1a"
+          strokeWidth={1}
+          strokeDasharray="4 8"
+        />
+        <ellipse
+          cx={relay.x}
+          cy={relay.y}
+          rx={140}
+          ry={140}
+          fill="none"
+          stroke="#1a1a1a"
+          strokeWidth={1}
+          strokeDasharray="4 8"
+        />
+
+        {/* Server-Relay backbone connection */}
+        <line
+          x1={server.x}
+          y1={server.y}
+          x2={relay.x}
+          y2={relay.y}
+          stroke="#8b5cf6"
+          strokeWidth={2}
+          opacity={0.4}
+        />
+        <line
+          x1={server.x}
+          y1={server.y}
+          x2={relay.x}
+          y2={relay.y}
+          stroke="#8b5cf6"
+          strokeWidth={1}
+          strokeDasharray="4 2"
+          opacity={0.7}
+        >
+          <animate
+            attributeName="stroke-dashoffset"
+            from="20"
+            to="0"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </line>
+
+        {/* Backbone particles */}
+        <circle r={3} fill="#8b5cf6" opacity={0.9}>
+          <animateMotion
+            dur="2s"
+            repeatCount="indefinite"
+            path={`M${server.x},${server.y} L${relay.x},${relay.y}`}
+          />
+          <animate
+            attributeName="opacity"
+            values="0;0.9;0.9;0"
+            dur="2s"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle r={3} fill="#8b5cf6" opacity={0.9}>
+          <animateMotion
+            dur="2s"
+            begin="1s"
+            repeatCount="indefinite"
+            path={`M${relay.x},${relay.y} L${server.x},${server.y}`}
+          />
+          <animate
+            attributeName="opacity"
+            values="0;0.9;0.9;0"
+            dur="2s"
+            begin="1s"
+            repeatCount="indefinite"
+          />
+        </circle>
+
+        {/* Backbone label */}
+        <text
+          x={(server.x + relay.x) / 2}
+          y={server.y - 18}
+          textAnchor="middle"
+          fill="#8b5cf6"
+          fontFamily="JetBrains Mono"
+          fontSize={8}
+          opacity={0.5}
+          letterSpacing={1.5}
+        >
+          BACKBONE
+        </text>
+
+        {/* Client connection lines */}
+        {clients.map((client) => {
+          const pos = NODE_POSITIONS[client.id];
+          if (!pos) return null;
+          const targetX = client.via === 'relay' ? relay.x : server.x;
+          const targetY = client.via === 'relay' ? relay.y : server.y;
+          const color = statusStroke[client.status];
+
+          let lineClass = 'line-active';
+          let strokeWidth = 1.5;
+
+          if (client.status === 'syncing') {
+            lineClass = 'line-syncing';
+            strokeWidth = 2.5;
+          } else if (client.status === 'offline') {
+            lineClass = 'line-offline';
+            strokeWidth = 1;
+          }
+
+          return (
+            <line
+              key={`conn-${client.id}`}
+              x1={targetX}
+              y1={targetY}
+              x2={pos.x}
+              y2={pos.y}
+              stroke={color}
+              strokeWidth={strokeWidth}
+              className={lineClass}
+            />
+          );
+        })}
+
+        {/* Data flow particles along active connections */}
+        {clients
+          .filter((c) => c.status !== 'offline')
+          .map((client) => {
+            const pos = NODE_POSITIONS[client.id];
+            if (!pos) return null;
+            const targetX = client.via === 'relay' ? relay.x : server.x;
+            const targetY = client.via === 'relay' ? relay.y : server.y;
+            const particleColor =
+              client.status === 'syncing' ? '#f59e0b' : '#22c55e';
+            const dur = client.status === 'syncing' ? '1.2s' : '2.5s';
+            const halfDur = `${Number.parseFloat(dur) / 2}s`;
+
+            return (
+              <g key={`particle-${client.id}`}>
+                <circle r={2} fill={particleColor} opacity={0.8}>
+                  <animateMotion
+                    dur={dur}
+                    repeatCount="indefinite"
+                    path={`M${targetX},${targetY} L${pos.x},${pos.y}`}
+                  />
+                  <animate
+                    attributeName="opacity"
+                    values="0;0.8;0.8;0"
+                    dur={dur}
+                    repeatCount="indefinite"
+                  />
+                </circle>
+                <circle r={2} fill={particleColor} opacity={0.6}>
+                  <animateMotion
+                    dur={dur}
+                    begin={halfDur}
+                    repeatCount="indefinite"
+                    path={`M${pos.x},${pos.y} L${targetX},${targetY}`}
+                  />
+                  <animate
+                    attributeName="opacity"
+                    values="0;0.6;0.6;0"
+                    dur={dur}
+                    begin={halfDur}
+                    repeatCount="indefinite"
+                  />
+                </circle>
+              </g>
+            );
+          })}
+
+        {/* Server node with pulse rings */}
+        <circle
+          cx={server.x}
+          cy={server.y}
+          r={40}
+          fill="none"
+          stroke="#3b82f6"
+          strokeWidth={0.5}
+          opacity={0.15}
+        >
+          <animate
+            attributeName="r"
+            from="30"
+            to="58"
+            dur="3s"
+            repeatCount="indefinite"
+          />
+          <animate
+            attributeName="opacity"
+            from="0.3"
+            to="0"
+            dur="3s"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx={server.x}
+          cy={server.y}
+          r={40}
+          fill="none"
+          stroke="#3b82f6"
+          strokeWidth={0.5}
+          opacity={0.15}
+        >
+          <animate
+            attributeName="r"
+            from="30"
+            to="58"
+            dur="3s"
+            begin="1.5s"
+            repeatCount="indefinite"
+          />
+          <animate
+            attributeName="opacity"
+            from="0.3"
+            to="0"
+            dur="3s"
+            begin="1.5s"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx={server.x}
+          cy={server.y}
+          r={30}
+          fill="#0c0c0c"
+          stroke="#3b82f6"
+          strokeWidth={2}
+          style={{
+            filter: 'drop-shadow(0 0 10px rgba(59,130,246,0.4))',
+          }}
+        />
+        <circle
+          cx={server.x}
+          cy={server.y}
+          r={16}
+          fill="rgba(59,130,246,0.15)"
+          stroke="#3b82f6"
+          strokeWidth={1}
+        />
+        <circle cx={server.x} cy={server.y} r={5} fill="#3b82f6" />
+        <text
+          x={server.x}
+          y={server.y + 46}
+          textAnchor="middle"
+          fill="#555"
+          fontFamily="JetBrains Mono"
+          fontSize={9}
+          letterSpacing={2}
+        >
+          SERVER
+        </text>
+
+        {/* Relay node with pulse ring */}
+        <circle
+          cx={relay.x}
+          cy={relay.y}
+          r={35}
+          fill="none"
+          stroke="#8b5cf6"
+          strokeWidth={0.5}
+          opacity={0.15}
+        >
+          <animate
+            attributeName="r"
+            from="24"
+            to="48"
+            dur="3.5s"
+            repeatCount="indefinite"
+          />
+          <animate
+            attributeName="opacity"
+            from="0.25"
+            to="0"
+            dur="3.5s"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx={relay.x}
+          cy={relay.y}
+          r={24}
+          fill="#0c0c0c"
+          stroke="#8b5cf6"
+          strokeWidth={2}
+          style={{
+            filter: 'drop-shadow(0 0 8px rgba(139,92,246,0.35))',
+          }}
+        />
+        <circle
+          cx={relay.x}
+          cy={relay.y}
+          r={12}
+          fill="rgba(139,92,246,0.15)"
+          stroke="#8b5cf6"
+          strokeWidth={1}
+        />
+        <circle cx={relay.x} cy={relay.y} r={4} fill="#8b5cf6" />
+        <text
+          x={relay.x}
+          y={relay.y + 40}
+          textAnchor="middle"
+          fill="#555"
+          fontFamily="JetBrains Mono"
+          fontSize={9}
+          letterSpacing={2}
+        >
+          RELAY
+        </text>
+
+        {/* Client nodes */}
+        {clients.map((client) => {
+          const pos = NODE_POSITIONS[client.id];
+          if (!pos) return null;
+          const fillColor = statusStroke[client.status];
+          const ringOpacity = client.status === 'offline' ? 0.3 : 1;
+
+          return (
+            <g key={client.id} opacity={ringOpacity}>
+              <circle
+                cx={pos.x}
+                cy={pos.y}
+                r={18}
+                fill="#0c0c0c"
+                stroke={fillColor}
+                strokeWidth={1.5}
+              />
+              <circle cx={pos.x} cy={pos.y} r={4} fill={fillColor} />
+              <text
+                x={pos.x}
+                y={pos.y + 28}
+                textAnchor="middle"
+                fill="#444"
+                fontFamily="JetBrains Mono"
+                fontSize={8}
+              >
+                {client.id}
+              </text>
+              <text
+                x={pos.x}
+                y={pos.y + 38}
+                textAnchor="middle"
+                fill="#333"
+                fontFamily="JetBrains Mono"
+                fontSize={7}
+              >
+                {client.type}
+                {client.via === 'relay' ? ' \u00b7 relay' : ''}
+              </text>
+            </g>
+          );
+        })}
+      </svg>
+    </div>
+  );
+});

package/src/observable-universe/types.ts

@@ -0,0 +1,26 @@
+export interface ObservableClient {
+  id: string;
+  type: string;
+  status: 'online' | 'syncing' | 'offline';
+  lastSync: number;
+  commits: number;
+  syncingCommits?: number;
+  via: 'direct' | 'relay';
+}
+
+export interface ObservableStreamEntry {
+  id: string;
+  timestamp: string;
+  operation: 'PUSH' | 'PULL' | 'ACK';
+  clientId: string;
+  table: string;
+  mutation: 'INSERT' | 'UPDATE' | 'DELETE';
+  commits: number;
+}
+
+export interface ObservableMetrics {
+  commitsPerSec: number;
+  avgLatency: number;
+  activeClients: number;
+  uptime: string;
+}

package/src/observable-universe/use-observable-universe-simulation.ts

@@ -0,0 +1,111 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { INITIAL_CLIENTS, MUTATIONS, OPERATIONS, TABLES } from './constants';
+import type {
+  ObservableClient,
+  ObservableMetrics,
+  ObservableStreamEntry,
+} from './types';
+
+function randomId() {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+function randomPick<T>(arr: readonly T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)]!;
+}
+
+function timestamp() {
+  const d = new Date();
+  return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}.${d.getMilliseconds().toString().padStart(3, '0')}`;
+}
+
+export function useObservableUniverseSimulation() {
+  const [clients, setClients] = useState<ObservableClient[]>(INITIAL_CLIENTS);
+  const [entries, setEntries] = useState<ObservableStreamEntry[]>([]);
+  const [metrics, setMetrics] = useState<ObservableMetrics>({
+    commitsPerSec: 12.4,
+    avgLatency: 34,
+    activeClients: INITIAL_CLIENTS.filter((c) => c.status !== 'offline').length,
+    uptime: '99.97%',
+  });
+
+  const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  const generateEntry = useCallback((): ObservableStreamEntry => {
+    const onlineClients = clients.filter((c) => c.status !== 'offline');
+    const client =
+      onlineClients.length > 0
+        ? randomPick(onlineClients)
+        : randomPick(clients);
+    return {
+      id: randomId(),
+      timestamp: timestamp(),
+      operation: randomPick(OPERATIONS) as 'PUSH' | 'PULL' | 'ACK',
+      clientId: client.id,
+      table: randomPick(TABLES),
+      mutation: randomPick(MUTATIONS),
+      commits: Math.ceil(Math.random() * 5),
+    };
+  }, [clients]);
+
+  useEffect(() => {
+    const tick = () => {
+      const entry = generateEntry();
+      setEntries((prev) => [entry, ...prev].slice(0, 40));
+      setMetrics((prev) => ({
+        ...prev,
+        commitsPerSec: Number.parseFloat((10 + Math.random() * 8).toFixed(1)),
+        avgLatency: Math.floor(25 + Math.random() * 30),
+      }));
+    };
+
+    intervalRef.current = setInterval(tick, 800 + Math.random() * 400);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [generateEntry]);
+
+  // Periodically shuffle client statuses
+  useEffect(() => {
+    const shuffle = setInterval(() => {
+      setClients((prev) =>
+        prev.map((c) => {
+          if (Math.random() > 0.15) return c;
+          const statuses: ObservableClient['status'][] = [
+            'online',
+            'syncing',
+            'offline',
+          ];
+          const newStatus = randomPick(statuses);
+          return {
+            ...c,
+            status: newStatus,
+            lastSync:
+              newStatus === 'offline'
+                ? c.lastSync + 10
+                : Math.floor(Math.random() * 5),
+            syncingCommits:
+              newStatus === 'syncing'
+                ? Math.floor(Math.random() * 5) + 1
+                : undefined,
+          };
+        })
+      );
+      setMetrics((prev) => ({
+        ...prev,
+        activeClients: clients.filter((c) => c.status !== 'offline').length,
+      }));
+    }, 3000);
+
+    return () => clearInterval(shuffle);
+  }, [clients]);
+
+  return {
+    clients,
+    entries,
+    metrics,
+    streamRate: `${metrics.commitsPerSec}/s`,
+  };
+}

package/src/primitives/alert.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../lib/cn';
+
+const alertVariants = cva('border rounded-lg p-3 font-mono text-[11px]', {
+  variants: {
+    variant: {
+      default: 'border-border bg-panel',
+      destructive: 'border-offline/20 bg-offline/5 text-offline',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type AlertProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof alertVariants>;
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="alert"
+      className={cn(alertVariants({ variant, className }))}
+      {...props}
+    />
+  )
+);
+Alert.displayName = 'Alert';
+
+const AlertTitle = forwardRef<
+  HTMLHeadingElement,
+  HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('font-medium text-white mb-1', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-neutral-400', className)} {...props} />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, alertVariants, AlertTitle, AlertDescription };
+export type { AlertProps };

package/src/primitives/badge.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+const badgeVariants = cva(
+  'inline-flex items-center gap-1 px-2 py-0.5 rounded-sm font-mono text-[9px] uppercase tracking-wider',
+  {
+    variants: {
+      variant: {
+        default: 'bg-white/[0.05] text-neutral-300 border border-border-bright',
+        destructive: 'bg-offline/10 text-offline border border-offline/20',
+        ghost: 'bg-transparent text-neutral-500 border border-border-bright',
+        outline: 'bg-transparent text-neutral-400 border border-border-bright',
+        secondary: 'bg-panel text-neutral-400 border border-border',
+        healthy: 'bg-healthy/10 text-healthy border border-healthy/20',
+        syncing: 'bg-syncing/10 text-syncing border border-syncing/20',
+        offline: 'bg-offline/10 text-offline border border-offline/20',
+        flow: 'bg-flow/10 text-flow border border-flow/20',
+        relay: 'bg-relay/10 text-relay border border-relay/20',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+type BadgeProps = ComponentPropsWithoutRef<'span'> &
+  VariantProps<typeof badgeVariants>;
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(badgeVariants({ variant, className }))}
+      {...props}
+    />
+  )
+);
+Badge.displayName = 'Badge';
+
+export { Badge, badgeVariants };
+export type { BadgeProps };