@syncular/ui 0.0.4-25 → 0.0.4-32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncular/ui",
-  "version": "0.0.4-25",
+  "version": "0.0.4-32",
   "description": "Reusable Syncular UI components and styles",
   "license": "MIT",
   "author": "Benjamin Kniffler",
@@ -81,7 +81,8 @@
         "default": "./dist/navigation/index.js"
       }
     },
-    "./styles.css": "./src/styles/styles.css",
+    "./styles.css": "./dist/styles.css",
+    "./styles.source.css": "./src/styles/styles.css",
     "./styles/tokens.css": "./src/styles/tokens.css",
     "./package.json": "./package.json"
   },
@@ -91,7 +92,8 @@
   ],
   "scripts": {
     "tsgo": "tsgo --noEmit",
-    "build": "tsgo",
+    "build:css": "bunx @tailwindcss/cli -i src/styles/styles.css -o dist/styles.css",
+    "build": "tsgo && bun run build:css",
     "release": "bunx syncular-publish"
   },
   "peerDependencies": {
@@ -102,13 +104,14 @@
     "@base-ui/react": "^1.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.564.0",
+    "lucide-react": "^0.575.0",
     "recharts": "^3.7.0",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.18"
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.0"
   },
   "devDependencies": {
     "@syncular/config": "0.0.0",
+    "@tailwindcss/cli": "^4.2.0",
     "@types/react": "^19.2.14"
   }
 }

package/src/console/api-keys-table.tsx

@@ -56,7 +56,7 @@ const ApiKeysTable = forwardRef<HTMLDivElement, ApiKeysTableProps>(
       {/* Rows */}
       {keys.map((k, i) => (
         <div
-          key={k.name}
+          key={`${k.name}:${k.prefix}:${i}`}
           className={cn(
             'font-mono text-[11px] leading-7 px-4 flex items-center gap-4 hover:bg-white/[0.015] transition-colors cursor-default',
             i < keys.length - 1 && 'border-b border-[#141414]'

package/src/console/danger-action-card.tsx

@@ -24,9 +24,13 @@ export function DangerActionCard({
   return (
     <Card className={cn('border-offline/20', className)}>
       <CardContent className="flex flex-col gap-3">
-        <h3 className="text-lg font-semibold text-offline">{title}</h3>
+        <h3 className="font-mono text-[10px] text-offline uppercase tracking-widest">
+          {title}
+        </h3>
         {description ? (
-          <p className="text-sm text-neutral-500">{description}</p>
+          <p className="font-mono text-[10px] text-neutral-500">
+            {description}
+          </p>
         ) : null}
         {stats ? <div>{stats}</div> : null}
         {onAction ? (

package/src/console/empty-state.tsx

@@ -24,7 +24,7 @@ export function EmptyState({
       )}
     >
       {icon ? <div className="text-neutral-500">{icon}</div> : null}
-      <p className="text-sm text-neutral-500">{message}</p>
+      <p className="font-mono text-[10px] text-neutral-500">{message}</p>
       {action ? <div>{action}</div> : null}
     </div>
   );

package/src/console/fleet-table.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import type { SyncClientNode } from '../lib/types';
+import { Badge } from '../primitives/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../primitives/table';
+
+export type FleetTableProps = ComponentPropsWithoutRef<'div'> & {
+  clients: SyncClientNode[];
+  headSeq: number;
+  onEvict?: (clientId: string) => void;
+};
+
+function getLagColor(lag: number) {
+  if (lag === 0) return '#22c55e';
+  if (lag < 10) return '#f59e0b';
+  if (lag < 50) return '#f97316';
+  return '#ef4444';
+}
+
+const statusBadgeVariant = {
+  online: 'healthy',
+  syncing: 'syncing',
+  offline: 'offline',
+} as const;
+
+const FleetTable = forwardRef<HTMLDivElement, FleetTableProps>(
+  ({ className, clients, headSeq, onEvict, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('w-full', className)} {...props}>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Client</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Type</TableHead>
+              <TableHead>Cursor</TableHead>
+              <TableHead>Lag</TableHead>
+              <TableHead>Dialect</TableHead>
+              <TableHead>Mode</TableHead>
+              {onEvict && <TableHead>Actions</TableHead>}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {clients.map((client) => {
+              const lag = Math.max(0, headSeq - client.cursor);
+              const pct =
+                headSeq > 0
+                  ? Math.min(100, (client.cursor / headSeq) * 100)
+                  : 100;
+              const lagColor = getLagColor(lag);
+
+              return (
+                <TableRow key={client.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+                        style={{
+                          background: lagColor,
+                          boxShadow: `0 0 4px ${lagColor}`,
+                        }}
+                      />
+                      <span
+                        className="font-mono text-[11px] text-white truncate"
+                        title={client.id}
+                      >
+                        {client.id.length > 18
+                          ? `${client.id.substring(0, 18)}\u2026`
+                          : client.id}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={statusBadgeVariant[client.status]}>
+                      {client.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <span className="font-mono text-[10px] text-neutral-400">
+                      {client.type}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <span className="font-mono text-[11px] text-white font-medium">
+                      #{client.cursor.toLocaleString()}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div className="w-[60px] h-[3px] rounded-full bg-surface overflow-hidden">
+                        <div
+                          className="h-full rounded-full transition-all"
+                          style={{ width: `${pct}%`, background: lagColor }}
+                        />
+                      </div>
+                      <span
+                        className="font-mono text-[10px] font-medium"
+                        style={{ color: lagColor }}
+                      >
+                        {lag === 0 ? '0' : `${lag}`}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <span className="font-mono text-[10px] text-neutral-400">
+                      {client.dialect}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      variant={client.mode === 'realtime' ? 'flow' : 'ghost'}
+                    >
+                      {client.mode}
+                    </Badge>
+                  </TableCell>
+                  {onEvict && (
+                    <TableCell>
+                      <button
+                        type="button"
+                        onClick={() => onEvict(client.id)}
+                        className="inline-flex items-center gap-1 rounded-md font-mono text-[9px] px-2 py-1 border border-transparent text-neutral-600 hover:border-offline/50 hover:text-offline hover:bg-offline/[0.06] cursor-pointer transition-all opacity-0 group-hover:opacity-100"
+                      >
+                        evict
+                      </button>
+                    </TableCell>
+                  )}
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  }
+);
+FleetTable.displayName = 'FleetTable';
+
+export { FleetTable };

package/src/console/handlers-table.tsx

@@ -46,7 +46,7 @@ const HandlersTable = forwardRef<HTMLDivElement, HandlersTableProps>(
         {/* Rows */}
         {handlers.map((h, i) => (
           <div
-            key={h.table}
+            key={`${h.table}:${i}`}
             className={cn(
               'font-mono text-[11px] leading-7 px-4 flex items-center gap-4 hover:bg-white/[0.015] transition-colors cursor-default',
               i < handlers.length - 1 && 'border-b border-[#141414]'

package/src/console/index.ts

@@ -9,6 +9,7 @@ export * from './danger-action-card';
 export * from './empty-state';
 export * from './filter-bar';
 export * from './fleet-card';
+export * from './fleet-table';
 export * from './handlers-table';
 export * from './kpi-card';
 export * from './kpi-strip';

package/src/console/panel-shell.tsx

@@ -26,9 +26,15 @@ export function PanelShell({
       {title || actions ? (
         <div className="flex items-start justify-between px-4 pt-4">
           <div>
-            {title ? <h3 className="text-lg font-semibold">{title}</h3> : null}
+            {title ? (
+              <h3 className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+                {title}
+              </h3>
+            ) : null}
             {description ? (
-              <p className="mt-1 text-sm text-neutral-500">{description}</p>
+              <p className="mt-1 font-mono text-[10px] text-neutral-500">
+                {description}
+              </p>
             ) : null}
           </div>
           {actions ? (

package/src/console/section-card.tsx

@@ -25,9 +25,15 @@ export function SectionCard({
       {title || actions ? (
         <div className="flex items-start justify-between px-4 pt-4">
           <div>
-            {title ? <h3 className="text-lg font-semibold">{title}</h3> : null}
+            {title ? (
+              <h3 className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+                {title}
+              </h3>
+            ) : null}
             {description ? (
-              <p className="mt-1 text-sm text-neutral-500">{description}</p>
+              <p className="mt-1 font-mono text-[10px] text-neutral-500">
+                {description}
+              </p>
             ) : null}
           </div>
           {actions ? (

package/src/primitives/dialog.tsx

@@ -94,7 +94,7 @@ const DialogDescription = forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseDialog.Description
     ref={ref}
-    className={cn('text-sm text-neutral-400', className)}
+    className={cn('font-mono text-[10px] text-neutral-500', className)}
     {...props}
   />
 ));

package/src/primitives/index.ts

@@ -13,3 +13,4 @@ export * from './switch';
 export * from './table';
 export * from './tabs';
 export * from './tooltip';
+export * from './typography';

package/src/primitives/typography.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+/**
+ * Dialog/panel body text — primary weight.
+ * `font-mono text-[11px] text-neutral-300`
+ */
+const Text = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<'p'>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('font-mono text-[11px] text-neutral-300', className)}
+      {...props}
+    />
+  )
+);
+Text.displayName = 'Text';
+
+/**
+ * Secondary / meta text — smaller, muted.
+ * `font-mono text-[10px] text-neutral-500`
+ */
+const TextMuted = forwardRef<
+  HTMLParagraphElement,
+  ComponentPropsWithoutRef<'p'>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('font-mono text-[10px] text-neutral-500', className)}
+    {...props}
+  />
+));
+TextMuted.displayName = 'TextMuted';
+
+/**
+ * Inline code / monospace value.
+ * `font-mono text-[11px] text-white`
+ */
+const TextCode = forwardRef<HTMLElement, ComponentPropsWithoutRef<'code'>>(
+  ({ className, ...props }, ref) => (
+    <code
+      ref={ref}
+      className={cn('font-mono text-[11px] text-white', className)}
+      {...props}
+    />
+  )
+);
+TextCode.displayName = 'TextCode';
+
+/**
+ * Uppercase monospace label — section headers, code block labels.
+ * `font-mono text-[9px] uppercase tracking-wider text-neutral-500`
+ */
+const TextLabel = forwardRef<HTMLSpanElement, ComponentPropsWithoutRef<'span'>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(
+        'font-mono text-[9px] uppercase tracking-wider text-neutral-500',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TextLabel.displayName = 'TextLabel';
+
+/**
+ * Pre-formatted code block.
+ * `font-mono text-[11px] text-neutral-300 p-3 rounded border border-border bg-panel-alt overflow-x-auto`
+ */
+const CodeBlock = forwardRef<HTMLPreElement, ComponentPropsWithoutRef<'pre'>>(
+  ({ className, ...props }, ref) => (
+    <pre
+      ref={ref}
+      className={cn(
+        'font-mono text-[11px] text-neutral-300 p-3 rounded border border-border bg-panel-alt overflow-x-auto',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+CodeBlock.displayName = 'CodeBlock';
+
+export { Text, TextMuted, TextCode, TextLabel, CodeBlock };

package/src/styles/styles.css

@@ -1,29 +1,33 @@
-@import 'tailwindcss';
+@import 'tailwindcss' source(none);
 @import './tokens.css';
 
+/* Explicitly scan UI component source files for Tailwind class usage */
+@source "..";
+
 /* ── Base ── */
-body {
-  background: var(--color-background);
-  color: var(--color-foreground);
-  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
+:where(.syncular-console-root, .syncular-ui-root) {
+  background: var(--syncular-color-background);
+  color: var(--syncular-color-foreground);
+  font-family: var(--syncular-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;
+:where(.syncular-console-root, .syncular-ui-root) .font-mono {
+  font-family: var(--syncular-font-mono), ui-monospace, monospace;
 }
 
 /* ── Scrollbar ── */
-::-webkit-scrollbar {
+:where(.syncular-console-root, .syncular-ui-root) ::-webkit-scrollbar {
   width: 3px;
   height: 3px;
 }
-::-webkit-scrollbar-track {
+:where(.syncular-console-root, .syncular-ui-root) ::-webkit-scrollbar-track {
   background: transparent;
 }
-::-webkit-scrollbar-thumb {
+:where(.syncular-console-root, .syncular-ui-root) ::-webkit-scrollbar-thumb {
   background: #333;
   border-radius: 2px;
 }
@@ -112,16 +116,16 @@ body {
   }
 }
 
-.line-active {
+:where(.syncular-console-root, .syncular-ui-root) .line-active {
   stroke-dasharray: 4 2;
   animation: dashFlow 1s linear infinite;
 }
 
-.stream-entry {
+:where(.syncular-console-root, .syncular-ui-root) .stream-entry {
   animation: streamSlide 0.35s ease-out;
 }
 
-.dot-pulse {
+:where(.syncular-console-root, .syncular-ui-root) .dot-pulse {
   animation: dotPulse 1.4s ease-in-out infinite;
 }
 
@@ -137,7 +141,7 @@ body {
   }
 }
 
-.flow-arrow {
+:where(.syncular-console-root, .syncular-ui-root) .flow-arrow {
   animation: flowPulse 2s ease-in-out infinite;
 }
 
@@ -152,7 +156,7 @@ body {
   }
 }
 
-.dot-grid {
+:where(.syncular-console-root, .syncular-ui-root) .dot-grid {
   background-image: radial-gradient(
     circle at 1px 1px,
     #1a1a1a 1px,
@@ -161,7 +165,7 @@ body {
   background-size: 24px 24px;
 }
 
-.scan-line {
+:where(.syncular-console-root, .syncular-ui-root) .scan-line {
   position: absolute;
   left: 0;
   right: 0;

package/src/styles/tokens.css

@@ -1,47 +1,110 @@
-@theme {
+@theme inline {
+  --color-background: var(--syncular-color-background);
+  --color-surface: var(--syncular-color-surface);
+  --color-panel: var(--syncular-color-panel);
+  --color-panel-alt: var(--syncular-color-panel-alt);
+  --color-border: var(--syncular-color-border);
+  --color-border-bright: var(--syncular-color-border-bright);
+
+  --color-healthy: var(--syncular-color-healthy);
+  --color-syncing: var(--syncular-color-syncing);
+  --color-offline: var(--syncular-color-offline);
+
+  --color-flow: var(--syncular-color-flow);
+  --color-relay: var(--syncular-color-relay);
+  --color-encrypt: var(--syncular-color-encrypt);
+
+  --color-foreground: var(--syncular-color-foreground);
+  --color-foreground-muted: var(--syncular-color-foreground-muted);
+
+  --color-primary: var(--syncular-color-primary);
+  --color-destructive: var(--syncular-color-destructive);
+  --color-secondary: var(--syncular-color-secondary);
+
+  --font-display: var(--syncular-font-display);
+  --font-mono: var(--syncular-font-mono);
+
+  --radius-sm: var(--syncular-radius-sm);
+  --radius-md: var(--syncular-radius-md);
+  --radius-lg: var(--syncular-radius-lg);
+  --radius-xl: var(--syncular-radius-xl);
+}
+
+:where(.syncular-console-root, .syncular-ui-root) {
   /* ── Surface ── */
-  --color-background: #0c0c0c;
-  --color-surface: #0c0c0c;
-  --color-panel: #111111;
-  --color-panel-alt: #0e0e0e;
-  --color-border: #1e1e1e;
-  --color-border-bright: #2a2a2a;
+  --syncular-color-background: #0c0c0c;
+  --syncular-color-surface: #0c0c0c;
+  --syncular-color-panel: #111111;
+  --syncular-color-panel-alt: #0e0e0e;
+  --syncular-color-border: #1e1e1e;
+  --syncular-color-border-bright: #2a2a2a;
 
   /* ── Status ── */
-  --color-healthy: #22c55e;
-  --color-syncing: #f59e0b;
-  --color-offline: #ef4444;
+  --syncular-color-healthy: #22c55e;
+  --syncular-color-syncing: #f59e0b;
+  --syncular-color-offline: #ef4444;
 
   /* ── Flow ── */
-  --color-flow: #3b82f6;
-  --color-relay: #8b5cf6;
-  --color-encrypt: #f472b6;
+  --syncular-color-flow: #3b82f6;
+  --syncular-color-relay: #8b5cf6;
+  --syncular-color-encrypt: #f472b6;
 
   /* ── Text ── */
-  --color-foreground: #e5e5e5;
-  --color-foreground-muted: #737373;
+  --syncular-color-foreground: #e5e5e5;
+  --syncular-color-foreground-muted: #737373;
 
   /* ── Semantic ── */
-  --color-primary: #22c55e;
-  --color-destructive: #ef4444;
-  --color-secondary: #1e1e1e;
+  --syncular-color-primary: #22c55e;
+  --syncular-color-destructive: #ef4444;
+  --syncular-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;
+  --syncular-font-display: 'Inter Tight', system-ui, sans-serif;
+  --syncular-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;
+  --syncular-radius-sm: 4px;
+  --syncular-radius-md: 6px;
+  --syncular-radius-lg: 8px;
+  --syncular-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;
+  --syncular-glow-healthy: 0 0 6px #22c55e;
+  --syncular-glow-syncing: 0 0 6px #f59e0b;
+  --syncular-glow-offline: 0 0 6px #ef4444;
+  --syncular-glow-flow: 0 0 6px #3b82f6;
+  --syncular-glow-relay: 0 0 6px #8b5cf6;
+  --syncular-glow-encrypt: 0 0 6px #f472b6;
+
+  /* Backward token aliases used by chart primitives */
+  --color-background: var(--syncular-color-background);
+  --color-surface: var(--syncular-color-surface);
+  --color-panel: var(--syncular-color-panel);
+  --color-panel-alt: var(--syncular-color-panel-alt);
+  --color-border: var(--syncular-color-border);
+  --color-border-bright: var(--syncular-color-border-bright);
+  --color-healthy: var(--syncular-color-healthy);
+  --color-syncing: var(--syncular-color-syncing);
+  --color-offline: var(--syncular-color-offline);
+  --color-flow: var(--syncular-color-flow);
+  --color-relay: var(--syncular-color-relay);
+  --color-encrypt: var(--syncular-color-encrypt);
+  --color-foreground: var(--syncular-color-foreground);
+  --color-foreground-muted: var(--syncular-color-foreground-muted);
+  --color-primary: var(--syncular-color-primary);
+  --color-destructive: var(--syncular-color-destructive);
+  --color-secondary: var(--syncular-color-secondary);
+  --font-display: var(--syncular-font-display);
+  --font-mono: var(--syncular-font-mono);
+  --radius-sm: var(--syncular-radius-sm);
+  --radius-md: var(--syncular-radius-md);
+  --radius-lg: var(--syncular-radius-lg);
+  --radius-xl: var(--syncular-radius-xl);
+  --sync-glow-healthy: var(--syncular-glow-healthy);
+  --sync-glow-syncing: var(--syncular-glow-syncing);
+  --sync-glow-offline: var(--syncular-glow-offline);
+  --sync-glow-flow: var(--syncular-glow-flow);
+  --sync-glow-relay: var(--syncular-glow-relay);
+  --sync-glow-encrypt: var(--syncular-glow-encrypt);
 }