@syncular/ui 0.0.0

package/src/primitives/tabs.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+const Tabs = BaseTabs.Root;
+
+const TabsList = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof BaseTabs.List>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.List
+    ref={ref}
+    className={cn('flex items-center gap-0.5', className)}
+    {...props}
+  />
+));
+TabsList.displayName = 'TabsList';
+
+const tabsTriggerVariants = cva(
+  'inline-flex items-center justify-center cursor-pointer transition-all outline-none',
+  {
+    variants: {
+      variant: {
+        default:
+          'font-mono text-[10px] text-neutral-500 border border-transparent rounded-sm px-2.5 py-1 hover:text-neutral-300 data-[selected]:text-white data-[selected]:border-border-bright data-[selected]:bg-white/[0.03]',
+        pills:
+          'font-mono text-[10px] text-neutral-500 border border-transparent rounded-full px-3 py-1 hover:text-neutral-300 data-[selected]:text-white data-[selected]:border-border-bright data-[selected]:bg-white/[0.03]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+type TabsTriggerProps = ComponentPropsWithoutRef<typeof BaseTabs.Tab> &
+  VariantProps<typeof tabsTriggerVariants>;
+
+const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ className, variant, ...props }, ref) => (
+    <BaseTabs.Tab
+      ref={ref}
+      className={cn(tabsTriggerVariants({ variant, className }))}
+      {...props}
+    />
+  )
+);
+TabsTrigger.displayName = 'TabsTrigger';
+
+const TabsContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof BaseTabs.Panel>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.Panel
+    ref={ref}
+    className={cn('outline-none', className)}
+    {...props}
+  />
+));
+TabsContent.displayName = 'TabsContent';
+
+export { Tabs, TabsList, TabsTrigger, tabsTriggerVariants, TabsContent };
+export type { TabsTriggerProps };

package/src/primitives/tooltip.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import {
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  type ReactNode,
+} from 'react';
+import { cn } from '../lib/cn';
+
+const Tooltip = BaseTooltip.Root;
+
+const TooltipTrigger = BaseTooltip.Trigger;
+
+const TooltipContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof BaseTooltip.Popup> & {
+    sideOffset?: number;
+  }
+>(({ className, sideOffset = 4, children, ...props }, ref) => (
+  <BaseTooltip.Portal>
+    <BaseTooltip.Positioner sideOffset={sideOffset}>
+      <BaseTooltip.Popup
+        ref={ref}
+        className={cn(
+          'bg-[#1e1e1e] border border-neutral-700 rounded-md px-2.5 py-1.5 text-xs text-neutral-300 font-mono shadow-lg',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </BaseTooltip.Popup>
+    </BaseTooltip.Positioner>
+  </BaseTooltip.Portal>
+));
+TooltipContent.displayName = 'TooltipContent';
+
+/** @base-ui doesn't need a provider - this is a passthrough for backward compat */
+function TooltipProvider({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/styles/styles.css

@@ -0,0 +1,177 @@
+@import 'tailwindcss';
+@import './tokens.css';
+
+/* ── Base ── */
+body {
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.font-mono {
+  font-family: var(--font-mono), ui-monospace, monospace;
+}
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #333;
+  border-radius: 2px;
+}
+
+/* ── Animations ── */
+@keyframes dotPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes dashFlow {
+  0% {
+    stroke-dashoffset: 20;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes streamSlide {
+  0% {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  15% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pageIn {
+  0% {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scanSweep {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.6;
+  }
+  90% {
+    opacity: 0.6;
+  }
+  100% {
+    top: 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes heartbeat {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(1);
+  }
+  10% {
+    transform: scaleY(2.5);
+  }
+  25% {
+    transform: scaleY(1.5);
+  }
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.line-active {
+  stroke-dasharray: 4 2;
+  animation: dashFlow 1s linear infinite;
+}
+
+.stream-entry {
+  animation: streamSlide 0.35s ease-out;
+}
+
+.dot-pulse {
+  animation: dotPulse 1.4s ease-in-out infinite;
+}
+
+@keyframes flowPulse {
+  0% {
+    opacity: 0.15;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 0.15;
+  }
+}
+
+.flow-arrow {
+  animation: flowPulse 2s ease-in-out infinite;
+}
+
+@keyframes mediaLoad {
+  0% {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.dot-grid {
+  background-image: radial-gradient(
+    circle at 1px 1px,
+    #1a1a1a 1px,
+    transparent 0
+  );
+  background-size: 24px 24px;
+}
+
+.scan-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(59, 130, 246, 0.3),
+    transparent
+  );
+  animation: scanSweep 6s ease-in-out infinite;
+  pointer-events: none;
+}

package/src/styles/tokens.css

@@ -0,0 +1,47 @@
+@theme {
+  /* ── Surface ── */
+  --color-background: #0c0c0c;
+  --color-surface: #0c0c0c;
+  --color-panel: #111111;
+  --color-panel-alt: #0e0e0e;
+  --color-border: #1e1e1e;
+  --color-border-bright: #2a2a2a;
+
+  /* ── Status ── */
+  --color-healthy: #22c55e;
+  --color-syncing: #f59e0b;
+  --color-offline: #ef4444;
+
+  /* ── Flow ── */
+  --color-flow: #3b82f6;
+  --color-relay: #8b5cf6;
+  --color-encrypt: #f472b6;
+
+  /* ── Text ── */
+  --color-foreground: #e5e5e5;
+  --color-foreground-muted: #737373;
+
+  /* ── Semantic ── */
+  --color-primary: #22c55e;
+  --color-destructive: #ef4444;
+  --color-secondary: #1e1e1e;
+
+  /* ── Fonts ── */
+  --font-display: 'Inter Tight', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  /* ── Radii ── */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 10px;
+
+  /* ── Glows ── */
+  --sync-glow-healthy: 0 0 6px #22c55e;
+  --sync-glow-syncing: 0 0 6px #f59e0b;
+  --sync-glow-offline: 0 0 6px #ef4444;
+  --sync-glow-flow: 0 0 6px #3b82f6;
+  --sync-glow-relay: 0 0 6px #8b5cf6;
+  --sync-glow-encrypt: 0 0 6px #f472b6;
+}

package/src/version.ts

@@ -0,0 +1,3 @@
+import packageJson from '../package.json';
+
+export const UI_VERSION = packageJson.version;