@syncular/ui 0.0.0

package/src/console/kpi-strip.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import type { MetricItem } from '../lib/types';
+
+export type KpiStripProps = ComponentPropsWithoutRef<'div'> & {
+  items: MetricItem[];
+};
+
+const dotColorMap: Record<string, string> = {
+  flow: 'bg-flow',
+  healthy: 'bg-healthy',
+  syncing: 'bg-syncing',
+  offline: 'bg-offline',
+  relay: 'bg-relay',
+  muted: 'bg-neutral-500',
+};
+
+const KpiStrip = forwardRef<HTMLDivElement, KpiStripProps>(
+  ({ className, items, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'border-b border-border px-6 py-3 flex items-center justify-between flex-wrap gap-4',
+        'bg-[linear-gradient(to_bottom,rgba(17,17,17,0.8),#0c0c0c)]',
+        className
+      )}
+      {...props}
+    >
+      {items.map((item, i) => (
+        <MetricInlineItem key={item.label} item={item} showDivider={i > 0} />
+      ))}
+    </div>
+  )
+);
+KpiStrip.displayName = 'KpiStrip';
+
+function MetricInlineItem({
+  item,
+  showDivider,
+}: {
+  item: MetricItem;
+  showDivider: boolean;
+}) {
+  const dotClass = dotColorMap[item.color ?? 'muted'] ?? 'bg-neutral-500';
+
+  return (
+    <>
+      {showDivider && <div className="w-px h-4 bg-border" />}
+      <div className="flex items-center gap-2">
+        <span className={cn('w-1.5 h-1.5 rounded-full', dotClass)} />
+        <span className="font-mono text-[10px] text-neutral-500 uppercase">
+          {item.label}
+        </span>
+        <span className="font-mono text-sm text-white font-semibold">
+          {item.value}
+          {item.unit && (
+            <span className="text-xs text-neutral-600">{item.unit}</span>
+          )}
+        </span>
+        {item.trend && (
+          <span
+            className={cn(
+              'font-mono text-[10px]',
+              item.trend.startsWith('+') ? 'text-healthy' : 'text-offline'
+            )}
+          >
+            {item.trend}
+          </span>
+        )}
+      </div>
+    </>
+  );
+}
+
+export { KpiStrip };

package/src/console/latency-percentiles.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+export type LatencyBucket = {
+  label: string;
+  pushMs: number;
+  pullMs: number;
+  /** Bar height as a percent (0-100) for push */
+  pushBarPercent: number;
+  /** Bar height as a percent (0-100) for pull */
+  pullBarPercent: number;
+};
+
+export type LatencyPercentilesBarProps = ComponentPropsWithoutRef<'div'> & {
+  buckets: LatencyBucket[];
+  /** Success rate 0-100 */
+  successRate?: number;
+  successLabel?: string;
+};
+
+const LatencyPercentilesBar = forwardRef<
+  HTMLDivElement,
+  LatencyPercentilesBarProps
+>(
+  (
+    {
+      className,
+      buckets,
+      successRate = 99.6,
+      successLabel = 'success',
+      ...props
+    },
+    ref
+  ) => {
+    const dashLength = (successRate / 100) * 88;
+    const gapLength = 88 - dashLength;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'px-5 py-3 border-b border-border flex items-center gap-8',
+          className
+        )}
+        {...props}
+      >
+        <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+          Latency
+        </span>
+        <div className="flex items-center gap-6">
+          {buckets.map((b) => (
+            <div key={b.label} className="flex items-center gap-2">
+              <span className="font-mono text-[9px] text-neutral-500">
+                {b.label}
+              </span>
+              <div className="flex gap-1 items-end h-5">
+                <div
+                  className="w-3 rounded-t bg-healthy/60"
+                  style={{ height: `${b.pushBarPercent}%` }}
+                />
+                <div
+                  className="w-3 rounded-t bg-flow/60"
+                  style={{ height: `${b.pullBarPercent}%` }}
+                />
+              </div>
+              <span className="font-mono text-[10px] text-neutral-400">
+                {b.pushMs} / {b.pullMs}ms
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {/* Donut */}
+        <div className="flex items-center gap-2 ml-auto">
+          <svg viewBox="0 0 36 36" className="w-7 h-7">
+            <circle
+              cx={18}
+              cy={18}
+              r={14}
+              fill="none"
+              stroke="#1e1e1e"
+              strokeWidth={4}
+            />
+            <circle
+              cx={18}
+              cy={18}
+              r={14}
+              fill="none"
+              stroke="#22c55e"
+              strokeWidth={4}
+              strokeDasharray={`${dashLength} ${gapLength}`}
+              transform="rotate(-90 18 18)"
+              strokeLinecap="round"
+            />
+          </svg>
+          <span className="font-mono text-[10px] text-neutral-400">
+            {successRate}%{' '}
+            <span className="text-neutral-600">{successLabel}</span>
+          </span>
+        </div>
+      </div>
+    );
+  }
+);
+LatencyPercentilesBar.displayName = 'LatencyPercentilesBar';
+
+export { LatencyPercentilesBar };

package/src/console/live-activity-feed.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { Badge } from '../primitives/badge';
+
+type FeedEventType = 'PUSH' | 'PULL' | 'ACK' | (string & {});
+
+export type FeedEntry = {
+  type: FeedEventType;
+  actor: string;
+  table: string;
+  time: string;
+};
+
+export type LiveActivityFeedProps = ComponentPropsWithoutRef<'div'> & {
+  entries: FeedEntry[];
+  isConnected?: boolean;
+  maxVisible?: number;
+  /** Height for the scroll area */
+  maxHeight?: string;
+};
+
+const badgeVariantMap: Record<string, 'syncing' | 'healthy' | 'flow'> = {
+  PUSH: 'syncing',
+  PULL: 'healthy',
+  ACK: 'flow',
+};
+
+const LiveActivityFeed = forwardRef<HTMLDivElement, LiveActivityFeedProps>(
+  (
+    {
+      className,
+      entries,
+      isConnected = true,
+      maxVisible = 20,
+      maxHeight,
+      ...props
+    },
+    ref
+  ) => {
+    const visibleEntries = entries.slice(0, maxVisible);
+
+    return (
+      <div
+        ref={ref}
+        className={cn('flex-shrink-0', className)}
+        style={{ width: 360 }}
+        {...props}
+      >
+        {/* Header */}
+        <div className="px-4 py-2.5 border-b border-border flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+              Live Feed
+            </span>
+            <span
+              className={cn(
+                'w-1.5 h-1.5 rounded-full',
+                isConnected
+                  ? 'bg-healthy animate-[dotPulse_1.5s_ease-in-out_infinite]'
+                  : 'bg-neutral-600'
+              )}
+            />
+          </div>
+          <span className="font-mono text-[9px] text-neutral-600">
+            {isConnected ? 'WebSocket' : 'Disconnected'}
+          </span>
+        </div>
+
+        {/* Entries */}
+        <div
+          className="px-3 py-2 space-y-0.5 overflow-y-auto"
+          style={maxHeight ? { maxHeight } : undefined}
+        >
+          {visibleEntries.length === 0 ? (
+            <div className="flex items-center justify-center h-[200px]">
+              <p className="text-neutral-500 text-sm font-mono">
+                {isConnected
+                  ? 'Waiting for activity...'
+                  : 'Connect to see live activity'}
+              </p>
+            </div>
+          ) : (
+            visibleEntries.map((entry, i) => (
+              <div
+                key={`${entry.time}-${i}`}
+                className="flex items-center gap-2 py-1 animate-[streamSlide_0.35s_ease-out]"
+              >
+                <Badge
+                  variant={badgeVariantMap[entry.type] ?? 'ghost'}
+                  className="text-[8px] px-1.5 py-0"
+                >
+                  {entry.type}
+                </Badge>
+                <span className="font-mono text-[10px] text-neutral-400 truncate flex-1">
+                  {entry.actor} &middot; {entry.table}
+                </span>
+                <span className="font-mono text-[9px] text-neutral-600">
+                  {entry.time}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+LiveActivityFeed.displayName = 'LiveActivityFeed';
+
+export { LiveActivityFeed };

package/src/console/maintenance-card.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import {
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  type ReactNode,
+} from 'react';
+import { cn } from '../lib/cn';
+import { Button } from '../primitives/button';
+
+export type MaintenanceStat = {
+  label: string;
+  value: ReactNode;
+  tone?: 'default' | 'syncing';
+};
+
+export type MaintenanceCardProps = ComponentPropsWithoutRef<'div'> & {
+  title: string;
+  description: string;
+  dotColor?: 'syncing' | 'flow' | 'healthy' | 'offline';
+  stats: MaintenanceStat[];
+  actionLabel: string;
+  actionVariant?: 'default' | 'primary' | 'destructive';
+  actionIcon?: ReactNode;
+  onAction?: () => void;
+};
+
+const dotColorMap: Record<string, string> = {
+  syncing: 'bg-syncing',
+  flow: 'bg-flow',
+  healthy: 'bg-healthy',
+  offline: 'bg-offline',
+};
+
+const MaintenanceCard = forwardRef<HTMLDivElement, MaintenanceCardProps>(
+  (
+    {
+      className,
+      title,
+      description,
+      dotColor = 'syncing',
+      stats,
+      actionLabel,
+      actionVariant = 'default',
+      actionIcon,
+      onAction,
+      ...props
+    },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        'bg-panel border border-border rounded-lg hover:border-border-bright transition',
+        className
+      )}
+      {...props}
+    >
+      {/* Header */}
+      <div className="px-4 py-2.5 border-b border-border flex items-center gap-2">
+        <span
+          className={cn('w-1.5 h-1.5 rounded-full', dotColorMap[dotColor])}
+        />
+        <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+          {title}
+        </span>
+      </div>
+
+      {/* Body */}
+      <div className="p-4">
+        <p className="font-mono text-[10px] text-neutral-500 leading-relaxed mb-4">
+          {description}
+        </p>
+
+        {/* Stats grid */}
+        <div
+          className={cn(
+            'grid gap-3 mb-4',
+            stats.length <= 2 ? 'grid-cols-2' : 'grid-cols-3'
+          )}
+        >
+          {stats.map((s) => (
+            <div key={s.label}>
+              <div className="font-mono text-[9px] text-neutral-600 uppercase tracking-wider mb-1">
+                {s.label}
+              </div>
+              <div
+                className={cn(
+                  'font-mono font-semibold',
+                  s.tone === 'syncing'
+                    ? 'text-sm text-syncing'
+                    : 'text-lg text-white'
+                )}
+              >
+                {s.value}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Action */}
+        <Button variant={actionVariant} size="md" onClick={onAction}>
+          {actionIcon}
+          {actionLabel}
+        </Button>
+      </div>
+    </div>
+  )
+);
+MaintenanceCard.displayName = 'MaintenanceCard';
+
+export { MaintenanceCard };

package/src/console/page-header.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface PageHeaderProps {
+  actions?: ReactNode;
+  className?: string;
+  description?: ReactNode;
+  title: ReactNode;
+}
+
+export function PageHeader({
+  actions,
+  className,
+  description,
+  title,
+}: PageHeaderProps) {
+  return (
+    <div className={cn('flex items-start justify-between', className)}>
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+        {description ? (
+          <p className="mt-1 text-sm text-neutral-500">{description}</p>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="flex items-center gap-2">{actions}</div>
+      ) : null}
+    </div>
+  );
+}

package/src/console/panel-shell.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+import { Card, CardContent } from '../primitives/card';
+
+export interface PanelShellProps {
+  actions?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  description?: ReactNode;
+  title?: ReactNode;
+}
+
+export function PanelShell({
+  actions,
+  children,
+  className,
+  contentClassName,
+  description,
+  title,
+}: PanelShellProps) {
+  return (
+    <Card className={cn('border-border', className)}>
+      {title || actions ? (
+        <div className="flex items-start justify-between px-4 pt-4">
+          <div>
+            {title ? <h3 className="text-lg font-semibold">{title}</h3> : null}
+            {description ? (
+              <p className="mt-1 text-sm text-neutral-500">{description}</p>
+            ) : null}
+          </div>
+          {actions ? (
+            <div className="flex items-center gap-2">{actions}</div>
+          ) : null}
+        </div>
+      ) : null}
+      <CardContent className={contentClassName}>{children}</CardContent>
+    </Card>
+  );
+}

package/src/console/preferences-panel.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { Button } from '../primitives/button';
+import { Switch } from '../primitives/switch';
+
+export type PreferenceOption = {
+  id: string;
+  label: string;
+};
+
+export type PreferenceFilterRow = {
+  type: 'filter';
+  label: string;
+  options: PreferenceOption[];
+  activeId: string;
+  onActiveChange: (id: string) => void;
+};
+
+export type PreferenceToggleRow = {
+  type: 'toggle';
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+};
+
+export type PreferenceRow = PreferenceFilterRow | PreferenceToggleRow;
+
+export type PreferencesPanelProps = ComponentPropsWithoutRef<'div'> & {
+  rows: PreferenceRow[];
+  onResetDefaults?: () => void;
+};
+
+const PreferencesPanel = forwardRef<HTMLDivElement, PreferencesPanelProps>(
+  ({ className, rows, onResetDefaults, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'bg-panel border border-border rounded-lg hover:border-border-bright transition',
+        className
+      )}
+      {...props}
+    >
+      {/* Header */}
+      <div className="px-4 py-2.5 border-b border-border flex items-center justify-between">
+        <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+          Preferences
+        </span>
+        {onResetDefaults && (
+          <Button variant="default" size="sm" onClick={onResetDefaults}>
+            Reset defaults
+          </Button>
+        )}
+      </div>
+
+      {/* Body */}
+      <div className="p-4 space-y-4">
+        {rows.map((row, i) => (
+          <PreferenceRowItem key={row.label} row={row} showDivider={i > 0} />
+        ))}
+      </div>
+    </div>
+  )
+);
+PreferencesPanel.displayName = 'PreferencesPanel';
+
+function PreferenceRowItem({
+  row,
+  showDivider,
+}: {
+  row: PreferenceRow;
+  showDivider: boolean;
+}) {
+  return (
+    <>
+      {showDivider && <div className="border-t border-border" />}
+      <div className="flex items-center justify-between">
+        {row.type === 'filter' ? (
+          <>
+            <span className="font-mono text-[11px] text-neutral-400">
+              {row.label}
+            </span>
+            <div className="flex gap-0.5">
+              {row.options.map((opt) => (
+                <button
+                  key={opt.id}
+                  type="button"
+                  onClick={() => row.onActiveChange(opt.id)}
+                  className={cn(
+                    'font-mono text-[10px] border rounded-sm px-2.5 py-0.5 cursor-pointer transition-all',
+                    opt.id === row.activeId
+                      ? 'text-white border-border-bright bg-white/[0.03]'
+                      : 'text-neutral-500 border-transparent hover:text-neutral-300'
+                  )}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </>
+        ) : (
+          <>
+            <div>
+              <span className="font-mono text-[11px] text-neutral-400">
+                {row.label}
+              </span>
+              {row.description && (
+                <p className="font-mono text-[9px] text-neutral-600 mt-0.5">
+                  {row.description}
+                </p>
+              )}
+            </div>
+            <Switch
+              checked={row.checked}
+              onCheckedChange={(val) => row.onCheckedChange(val)}
+            />
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+export { PreferencesPanel };

package/src/console/section-card.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Card, CardContent } from '../primitives/card';
+
+export interface SectionCardProps {
+  actions?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  description?: ReactNode;
+  title?: ReactNode;
+}
+
+export function SectionCard({
+  actions,
+  children,
+  className,
+  contentClassName,
+  description,
+  title,
+}: SectionCardProps) {
+  return (
+    <Card className={className}>
+      {title || actions ? (
+        <div className="flex items-start justify-between px-4 pt-4">
+          <div>
+            {title ? <h3 className="text-lg font-semibold">{title}</h3> : null}
+            {description ? (
+              <p className="mt-1 text-sm text-neutral-500">{description}</p>
+            ) : null}
+          </div>
+          {actions ? (
+            <div className="flex items-center gap-2">{actions}</div>
+          ) : null}
+        </div>
+      ) : null}
+      <CardContent className={contentClassName}>{children}</CardContent>
+    </Card>
+  );
+}