@syncular/ui 0.0.0

package/src/demo/client-panel.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export type ClientPanelColor =
+  | 'flow'
+  | 'relay'
+  | 'healthy'
+  | 'syncing'
+  | 'encrypt';
+
+const colorMap: Record<ClientPanelColor, string> = {
+  flow: 'bg-flow',
+  relay: 'bg-relay',
+  healthy: 'bg-healthy',
+  syncing: 'bg-syncing',
+  encrypt: 'bg-encrypt',
+};
+
+export interface ClientPanelProps {
+  label: string;
+  color: ClientPanelColor;
+  status?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+export function ClientPanel({
+  label,
+  color,
+  status,
+  footer,
+  children,
+  className,
+}: ClientPanelProps) {
+  return (
+    <div
+      className={cn('rounded-[10px] border border-border bg-panel', className)}
+    >
+      <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
+        <div className="flex items-center gap-2">
+          <div className={cn('w-2 h-2 rounded-full', colorMap[color])} />
+          <span className="font-mono text-[10px] uppercase tracking-[1.5px] text-neutral-500">
+            {label}
+          </span>
+        </div>
+        {status ? (
+          <div className="flex items-center gap-2">{status}</div>
+        ) : null}
+      </div>
+      <div className="p-3">{children}</div>
+      {footer ? (
+        <div className="border-t border-border px-3 py-2 flex items-center justify-between">
+          {footer}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/demo/conflict-panel.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface ConflictPanelProps {
+  visible: boolean;
+  children: ReactNode;
+  className?: string;
+}
+
+export function ConflictPanel({
+  visible,
+  children,
+  className,
+}: ConflictPanelProps) {
+  return (
+    <div className={cn('mt-3', className)} hidden={!visible}>
+      <div className="font-mono text-[10px] text-syncing uppercase tracking-wider mb-2">
+        Pending Conflicts
+      </div>
+      <div className="space-y-1">{children}</div>
+    </div>
+  );
+}

package/src/demo/demo-header.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+import { UI_VERSION } from '../version';
+
+export interface DemoHeaderProps {
+  title: string;
+  subtitle: string;
+  right?: ReactNode;
+  className?: string;
+}
+
+export function DemoHeader({
+  title,
+  subtitle,
+  right,
+  className,
+}: DemoHeaderProps) {
+  const versionBadge = (
+    <span className="font-mono text-[10px] text-neutral-600 border border-border rounded px-2 py-0.5">
+      v{UI_VERSION}
+    </span>
+  );
+
+  return (
+    <div className={cn('flex items-center justify-between mb-5', className)}>
+      <div>
+        <h2 className="font-display font-semibold text-lg text-white">
+          {title}
+        </h2>
+        <p className="font-mono text-[11px] text-neutral-500 mt-0.5">
+          {subtitle}
+        </p>
+      </div>
+      {right || versionBadge ? (
+        <div className="flex items-center gap-3">
+          {versionBadge}
+          {right}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/demo/demo-section.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface DemoSectionProps {
+  active: boolean;
+  children: ReactNode;
+  className?: string;
+}
+
+export function DemoSection({ active, children, className }: DemoSectionProps) {
+  return (
+    <div
+      className={cn(className)}
+      style={{
+        display: active ? 'block' : 'none',
+        animation: active ? 'pageIn 0.3s ease-out' : undefined,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/demo/encrypted-badge.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { cn } from '../lib/cn';
+
+export interface EncryptedBadgeProps {
+  locked: boolean;
+  label?: string;
+  className?: string;
+}
+
+export function EncryptedBadge({
+  locked,
+  label,
+  className,
+}: EncryptedBadgeProps) {
+  const resolvedLabel = label ?? (locked ? 'E2EE Active' : 'decrypted');
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[3px] font-mono text-[9px] uppercase tracking-[0.5px]',
+        locked
+          ? 'bg-encrypt/10 border border-encrypt/20 text-encrypt'
+          : 'bg-healthy/10 border border-healthy/20 text-healthy',
+        className
+      )}
+    >
+      {locked ? (
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </svg>
+      ) : (
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      )}
+      {resolvedLabel}
+    </span>
+  );
+}

package/src/demo/encryption-flow-diagram.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { cn } from '../lib/cn';
+
+export interface EncryptionFlowDiagramProps {
+  className?: string;
+}
+
+function Arrow() {
+  return (
+    <svg className="w-8 h-6 text-neutral-600 flow-arrow" viewBox="0 0 32 24">
+      <path
+        d="M4 12h20m-5-5l5 5-5 5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        fill="none"
+      />
+    </svg>
+  );
+}
+
+export function EncryptionFlowDiagram({
+  className,
+}: EncryptionFlowDiagramProps) {
+  return (
+    <div className={cn('panel', className)}>
+      <div className="panel-header">
+        <span className="panel-label">Encryption Architecture</span>
+      </div>
+      <div className="p-6">
+        <div className="flex items-center justify-center gap-4 flex-wrap">
+          {/* Passphrase */}
+          <div className="text-center">
+            <div className="font-mono text-[10px] text-neutral-400 mb-1">
+              Passphrase
+            </div>
+            <div className="px-3 py-1.5 border border-border rounded font-mono text-xs text-white bg-panel-alt">
+              &bull;&bull;&bull;&bull;&bull;&bull;&bull;
+            </div>
+          </div>
+
+          <Arrow />
+
+          {/* PBKDF2 */}
+          <div className="text-center">
+            <div className="font-mono text-[10px] text-neutral-400 mb-1">
+              PBKDF2
+            </div>
+            <div className="px-3 py-1.5 border border-syncing/30 rounded font-mono text-xs text-syncing bg-syncing/[0.05]">
+              100k iterations
+            </div>
+          </div>
+
+          <Arrow />
+
+          {/* Derived Key */}
+          <div className="text-center">
+            <div className="font-mono text-[10px] text-neutral-400 mb-1">
+              Derived Key
+            </div>
+            <div className="px-3 py-1.5 border border-encrypt/30 rounded font-mono text-xs text-encrypt bg-encrypt/[0.05]">
+              256-bit
+            </div>
+          </div>
+
+          <Arrow />
+
+          {/* XChaCha20 */}
+          <div className="text-center">
+            <div className="font-mono text-[10px] text-neutral-400 mb-1">
+              XChaCha20
+            </div>
+            <div className="px-3 py-1.5 border border-flow/30 rounded font-mono text-xs text-flow bg-flow/[0.05]">
+              encrypt/decrypt
+            </div>
+          </div>
+
+          <Arrow />
+
+          {/* Server */}
+          <div className="text-center">
+            <div className="font-mono text-[10px] text-neutral-400 mb-1">
+              Server
+            </div>
+            <div className="px-3 py-1.5 border border-border rounded font-mono text-xs text-neutral-500 bg-panel-alt">
+              ciphertext only
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/demo/index.ts

@@ -0,0 +1,26 @@
+export * from './actor-panel';
+export * from './catalog-table';
+export * from './channel-selector';
+export * from './client-panel';
+export * from './conflict-panel';
+export * from './demo-header';
+export * from './demo-section';
+export * from './encrypted-badge';
+export * from './encryption-flow-diagram';
+export * from './info-panel';
+export * from './media-gallery';
+export * from './media-thumbnail';
+export * from './metric-card';
+export * from './mnemonic-display';
+export * from './note-card';
+export * from './sync-controls';
+export * from './sync-status-badge';
+export * from './task-item';
+export * from './task-list';
+export * from './topology-panel';
+export * from './topology-svg-keyshare';
+export * from './topology-svg-media';
+export * from './topology-svg-split';
+export * from './topology-svg-symmetric';
+export * from './transfer-log';
+export * from './upload-area';

package/src/demo/info-panel.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface InfoPanelProps {
+  icon: ReactNode;
+  title: string;
+  description: ReactNode;
+  className?: string;
+}
+
+export function InfoPanel({
+  icon,
+  title,
+  description,
+  className,
+}: InfoPanelProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-[10px] border border-border bg-panel p-6',
+        className
+      )}
+    >
+      <div className="flex items-start gap-6">
+        <div className="w-10 h-10 rounded-lg bg-flow/10 border border-flow/20 flex items-center justify-center flex-shrink-0">
+          {icon}
+        </div>
+        <div>
+          <h3 className="font-display font-semibold text-white text-sm mb-1">
+            {title}
+          </h3>
+          <p className="text-neutral-400 text-sm leading-relaxed max-w-2xl">
+            {description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/demo/media-gallery.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface MediaGalleryProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function MediaGallery({ children, className }: MediaGalleryProps) {
+  return (
+    <div className={cn('grid grid-cols-3 gap-2', className)}>{children}</div>
+  );
+}

package/src/demo/media-thumbnail.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface MediaThumbnailProps {
+  filename: string;
+  statusColor?: string;
+  bgColor?: string;
+  icon?: ReactNode;
+  src?: string;
+  className?: string;
+}
+
+export function MediaThumbnail({
+  filename,
+  statusColor,
+  bgColor,
+  icon,
+  src,
+  className,
+}: MediaThumbnailProps) {
+  return (
+    <div
+      className={cn(
+        'relative aspect-square rounded-[6px] overflow-hidden border border-border cursor-default transition-[border-color] hover:border-border-bright',
+        className
+      )}
+    >
+      <div
+        className="w-full h-full flex items-center justify-center"
+        style={bgColor ? { background: bgColor } : undefined}
+      >
+        {src ? (
+          <img
+            src={src}
+            alt={filename}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          icon
+        )}
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 px-1.5 py-[3px] bg-black/70 backdrop-blur-[4px] font-mono text-[8px] text-neutral-400 flex items-center justify-between">
+        <span className="truncate">{filename}</span>
+        {statusColor ? (
+          <span
+            className="w-[5px] h-[5px] rounded-full flex-shrink-0"
+            style={{ background: statusColor }}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/demo/metric-card.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface MetricCardProps {
+  label: string;
+  value: ReactNode;
+  subtext?: string;
+  dotColor?: 'healthy' | 'syncing' | 'flow';
+  dotPulse?: boolean;
+  progress?: number;
+  progressColor?: 'healthy' | 'syncing' | 'flow';
+  progressLabel?: string;
+  className?: string;
+}
+
+const dotColorMap = {
+  healthy: 'bg-healthy',
+  syncing: 'bg-syncing',
+  flow: 'bg-flow',
+};
+
+const progressColorMap = {
+  healthy: 'bg-healthy',
+  syncing: 'bg-syncing',
+  flow: 'bg-flow',
+};
+
+export function MetricCard({
+  label,
+  value,
+  subtext,
+  dotColor,
+  dotPulse,
+  progress,
+  progressColor = 'healthy',
+  progressLabel,
+  className,
+}: MetricCardProps) {
+  return (
+    <div
+      className={cn('bg-panel border border-border rounded-lg p-4', className)}
+    >
+      <div className="flex items-center justify-between mb-2">
+        <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-wider">
+          {label}
+        </span>
+        {dotColor ? (
+          <span
+            className={cn(
+              'w-1.5 h-1.5 rounded-full',
+              dotColorMap[dotColor],
+              dotPulse && 'dot-pulse'
+            )}
+          />
+        ) : null}
+      </div>
+      <div className="font-display text-2xl font-bold text-white">{value}</div>
+      {subtext ? (
+        <div className="font-mono text-[10px] text-neutral-600 mt-1">
+          {subtext}
+        </div>
+      ) : null}
+      {progress !== undefined ? (
+        <div className="mt-2">
+          <div className="h-[3px] bg-border rounded-full overflow-hidden">
+            <div
+              className={cn(
+                'h-full rounded-full transition-all duration-800 ease-out',
+                progressColorMap[progressColor]
+              )}
+              style={{ width: `${Math.min(100, progress)}%` }}
+            />
+          </div>
+          {progressLabel ? (
+            <div className="font-mono text-[10px] text-neutral-600 mt-1">
+              {progressLabel}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/demo/mnemonic-display.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { cn } from '../lib/cn';
+
+export interface MnemonicDisplayProps {
+  words: string[];
+  copyValue?: string;
+  className?: string;
+  copyButtonTone?: 'default' | 'prominent';
+}
+
+function fallbackCopy(text: string): boolean {
+  if (typeof document === 'undefined') return false;
+
+  const el = document.createElement('textarea');
+  el.value = text;
+  el.setAttribute('readonly', 'true');
+  el.style.position = 'fixed';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+  el.select();
+
+  let ok = false;
+  try {
+    ok = document.execCommand('copy');
+  } catch {
+    ok = false;
+  } finally {
+    document.body.removeChild(el);
+  }
+
+  return ok;
+}
+
+export function MnemonicDisplay({
+  words,
+  copyValue,
+  className,
+  copyButtonTone = 'default',
+}: MnemonicDisplayProps) {
+  const [copyStatus, setCopyStatus] = useState<'idle' | 'copied' | 'error'>(
+    'idle'
+  );
+
+  const handleCopy = useCallback(async () => {
+    const text = copyValue ?? words.join(' ');
+    if (text.trim().length === 0) return;
+
+    try {
+      if (typeof navigator !== 'undefined' && navigator.clipboard) {
+        await navigator.clipboard.writeText(text);
+      } else if (!fallbackCopy(text)) {
+        setCopyStatus('error');
+        return;
+      }
+      setCopyStatus('copied');
+    } catch {
+      setCopyStatus(fallbackCopy(text) ? 'copied' : 'error');
+    }
+  }, [copyValue, words]);
+
+  useEffect(() => {
+    if (copyStatus === 'idle') return;
+    const timeout = window.setTimeout(() => setCopyStatus('idle'), 1600);
+    return () => window.clearTimeout(timeout);
+  }, [copyStatus]);
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <div className="flex items-center justify-between">
+        <span className="font-mono text-[10px] uppercase tracking-wider text-neutral-500">
+          Recovery Mnemonic
+        </span>
+        <button
+          type="button"
+          onClick={() => {
+            void handleCopy();
+          }}
+          className={cn(
+            'px-2.5 py-1 rounded font-mono text-[10px] uppercase tracking-wider transition-colors',
+            copyButtonTone === 'prominent'
+              ? 'border border-flow/40 bg-flow/[0.06] text-flow hover:bg-flow/[0.12]'
+              : 'border border-encrypt/20 bg-encrypt/[0.08] text-encrypt hover:bg-encrypt/[0.14]'
+          )}
+        >
+          {copyStatus === 'copied'
+            ? 'Copied'
+            : copyStatus === 'error'
+              ? 'Copy Failed'
+              : 'Copy Mnemonic'}
+        </button>
+      </div>
+      <button
+        type="button"
+        aria-label="Copy mnemonic words"
+        onClick={() => {
+          void handleCopy();
+        }}
+        className="flex flex-wrap gap-2 cursor-copy"
+      >
+        {words.map((word, i) => (
+          <span
+            key={`${i}-${word}`}
+            className="inline-flex items-center gap-1 px-2 py-[3px] bg-encrypt/[0.08] border border-encrypt/15 rounded-[4px] font-mono text-[11px] text-encrypt"
+          >
+            <span className="text-[9px] opacity-40">{i + 1}</span>
+            {word}
+          </span>
+        ))}
+      </button>
+    </div>
+  );
+}