@syncular/ui 0.0.0

package/src/demo/upload-area.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import {
+  type ChangeEvent,
+  forwardRef,
+  type ReactNode,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../lib/cn';
+
+interface UploadAreaProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  onChange?: (files: FileList | null) => void;
+  label?: string;
+  children?: ReactNode;
+}
+
+export const UploadArea = forwardRef<HTMLInputElement, UploadAreaProps>(
+  (
+    {
+      className,
+      onChange,
+      label = 'Click to upload media',
+      children,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    const setInputRef = useCallback(
+      (node: HTMLInputElement | null) => {
+        inputRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+          return;
+        }
+        if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+
+    const handleDragOver = (e: React.DragEvent<HTMLButtonElement>) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(true);
+    };
+
+    const handleDrop = (e: React.DragEvent<HTMLButtonElement>) => {
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      onChange?.(e.dataTransfer.files);
+    };
+
+    const handleDragLeave = () => {
+      setIsDragging(false);
+    };
+
+    const handleClick = () => {
+      if (disabled) return;
+      inputRef.current?.click();
+    };
+
+    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {
+      e.currentTarget.value = '';
+    };
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e.target.files);
+    };
+
+    return (
+      <>
+        <input
+          ref={setInputRef}
+          type="file"
+          className="sr-only"
+          onClick={handleInputClick}
+          onChange={handleChange}
+          disabled={disabled}
+          {...props}
+        />
+        <button
+          type="button"
+          className={cn(
+            'w-full relative border border-dashed border-border-bright rounded-lg p-4 text-center cursor-pointer transition-colors',
+            disabled && 'cursor-not-allowed opacity-60',
+            isDragging && 'border-flow/40 bg-flow/[0.02]',
+            !isDragging &&
+              !disabled &&
+              'hover:border-flow/40 hover:bg-flow/[0.02]',
+            className
+          )}
+          onClick={handleClick}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+          onDragLeave={handleDragLeave}
+          disabled={disabled}
+          aria-label={label}
+        >
+          {children ?? (
+            <>
+              <svg
+                className="w-6 h-6 mx-auto mb-2 text-neutral-600"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="17 8 12 3 7 8" />
+                <line x1="12" y1="3" x2="12" y2="15" />
+              </svg>
+              <div className="font-mono text-[10px] text-neutral-500">
+                {label}
+              </div>
+            </>
+          )}
+        </button>
+      </>
+    );
+  }
+);
+
+UploadArea.displayName = 'UploadArea';

package/src/forms/checkbox.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+type CheckboxProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Root> & {
+  label?: string;
+};
+
+const Checkbox = forwardRef<HTMLElement, CheckboxProps>(
+  ({ className, label, ...props }, ref) => {
+    const checkbox = (
+      <BaseCheckbox.Root
+        ref={ref}
+        className={cn(
+          'w-[15px] h-[15px] border-[1.5px] border-neutral-700 rounded-full flex items-center justify-center cursor-pointer transition-all duration-200',
+          'data-[checked]:bg-healthy data-[checked]:border-healthy data-[checked]:shadow-[0_0_6px_rgba(34,197,94,0.3)]',
+          className
+        )}
+        {...props}
+      >
+        <BaseCheckbox.Indicator className="flex items-center justify-center text-white">
+          <svg
+            width="8"
+            height="8"
+            viewBox="0 0 8 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1.5 4L3.25 5.75L6.5 2.25"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </BaseCheckbox.Indicator>
+      </BaseCheckbox.Root>
+    );
+
+    if (label) {
+      return (
+        <span className="inline-flex items-center gap-2 cursor-pointer font-mono text-[11px] text-neutral-400">
+          {checkbox}
+          <span>{label}</span>
+        </span>
+      );
+    }
+
+    return checkbox;
+  }
+);
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };
+export type { CheckboxProps };

package/src/forms/field.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Field as BaseField } from '@base-ui/react/field';
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from 'react';
+import { cn } from '../lib/cn';
+
+const Field = BaseField.Root;
+
+const FieldLabel = forwardRef<
+  ComponentRef<typeof BaseField.Label>,
+  ComponentPropsWithoutRef<typeof BaseField.Label>
+>(({ className, ...props }, ref) => (
+  <BaseField.Label
+    ref={ref}
+    className={cn(
+      'font-mono text-[9px] text-neutral-500 uppercase tracking-wider block mb-1.5',
+      className
+    )}
+    {...props}
+  />
+));
+FieldLabel.displayName = 'FieldLabel';
+
+const FieldDescription = forwardRef<
+  ComponentRef<typeof BaseField.Description>,
+  ComponentPropsWithoutRef<typeof BaseField.Description>
+>(({ className, ...props }, ref) => (
+  <BaseField.Description
+    ref={ref}
+    className={cn('font-mono text-[9px] text-neutral-600 mt-0.5', className)}
+    {...props}
+  />
+));
+FieldDescription.displayName = 'FieldDescription';
+
+const FieldError = forwardRef<
+  ComponentRef<typeof BaseField.Error>,
+  ComponentPropsWithoutRef<typeof BaseField.Error>
+>(({ className, ...props }, ref) => (
+  <BaseField.Error
+    ref={ref}
+    className={cn('font-mono text-[10px] text-offline mt-1', className)}
+    {...props}
+  />
+));
+FieldError.displayName = 'FieldError';
+
+const FieldContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn(className)} {...props} />
+));
+FieldContent.displayName = 'FieldContent';
+
+export { Field, FieldLabel, FieldDescription, FieldError, FieldContent };

package/src/forms/index.ts

@@ -0,0 +1,6 @@
+export * from './checkbox';
+export * from './field';
+export * from './select';
+export * from './textarea';
+export * from './toggle';
+export * from './toggle-group';

package/src/forms/select.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+const Select = BaseSelect.Root;
+
+const SelectTrigger = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof BaseSelect.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <BaseSelect.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-between bg-surface border border-border rounded-md px-3 py-1.5 font-mono text-[12px] text-foreground cursor-pointer hover:border-border-bright transition',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </BaseSelect.Trigger>
+));
+SelectTrigger.displayName = 'SelectTrigger';
+
+const SelectValue = BaseSelect.Value;
+
+const SelectContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof BaseSelect.Popup> & {
+    portalProps?: ComponentPropsWithoutRef<typeof BaseSelect.Portal>;
+    positionerProps?: ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;
+  }
+>(({ className, portalProps, positionerProps, ...props }, ref) => (
+  <BaseSelect.Portal {...portalProps}>
+    <BaseSelect.Positioner {...positionerProps}>
+      <BaseSelect.Popup
+        ref={ref}
+        className={cn(
+          'bg-panel border border-border rounded-md py-1 shadow-lg z-50',
+          className
+        )}
+        {...props}
+      />
+    </BaseSelect.Positioner>
+  </BaseSelect.Portal>
+));
+SelectContent.displayName = 'SelectContent';
+
+const SelectItem = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof BaseSelect.Item>
+>(({ className, ...props }, ref) => (
+  <BaseSelect.Item
+    ref={ref}
+    className={cn(
+      'font-mono text-[11px] px-3 py-1.5 text-neutral-400 cursor-pointer hover:bg-white/[0.03] hover:text-white data-[highlighted]:bg-white/[0.03] data-[highlighted]:text-white outline-none',
+      className
+    )}
+    {...props}
+  />
+));
+SelectItem.displayName = 'SelectItem';
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem };

package/src/forms/textarea.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+type TextareaProps = ComponentPropsWithoutRef<'textarea'>;
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        'bg-surface border border-border rounded-md px-3 py-2 font-mono text-[12px] text-foreground outline-none w-full transition focus:border-flow placeholder:text-neutral-600 resize-none min-h-[80px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
+export type { TextareaProps };

package/src/forms/toggle-group.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+type ToggleGroupProps = ComponentPropsWithoutRef<typeof BaseToggleGroup>;
+
+const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseToggleGroup
+      ref={ref}
+      className={cn('flex items-center gap-0.5', className)}
+      {...props}
+    />
+  )
+);
+ToggleGroup.displayName = 'ToggleGroup';
+
+export { ToggleGroup };
+export type { ToggleGroupProps };
+
+// Re-export Toggle as ToggleGroupItem for backward compat
+export { Toggle as ToggleGroupItem } from './toggle';

package/src/forms/toggle.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+type ToggleProps = ComponentPropsWithoutRef<typeof BaseToggle>;
+
+const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ className, ...props }, ref) => (
+    <BaseToggle
+      ref={ref}
+      className={cn(
+        'font-mono text-[10px] text-neutral-500 border border-transparent rounded-sm px-2.5 py-1 cursor-pointer transition-all hover:text-neutral-300 data-[pressed]:text-white data-[pressed]:border-border-bright data-[pressed]:bg-white/[0.03]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Toggle.displayName = 'Toggle';
+
+export { Toggle };
+export type { ToggleProps };

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './charts';
+export * from './console';
+export * from './forms';
+export * from './lib/cn';
+export * from './lib/types';
+export * from './navigation';
+export * from './primitives';

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/types.ts

@@ -0,0 +1,69 @@
+export type ClientStatus = 'online' | 'syncing' | 'offline';
+
+/** @deprecated Use SyncClientNode */
+export type SyncClient = SyncClientNode;
+
+export type SyncClientNode = {
+  id: string;
+  type: string;
+  status: ClientStatus;
+  cursor: number;
+  actor: string;
+  mode: 'realtime' | 'polling';
+  dialect: string;
+  scopes: string[];
+  lastSeen: string;
+};
+
+export type CommitStreamEntry = {
+  seq: number;
+  actor: string;
+  changes: number;
+  tables: string;
+  time: string;
+};
+
+export type StreamOperation = {
+  type: 'commit' | 'push' | 'pull';
+  id: string;
+  outcome: string;
+  duration: string;
+  actor: string;
+  client: string;
+  detail: string;
+  time: string;
+};
+
+export type MetricItem = {
+  label: string;
+  value: string | number;
+  color?: string;
+  trend?: string;
+  unit?: string;
+};
+
+export type NavItem = {
+  id: string;
+  label: string;
+  href?: string;
+};
+
+export type FilterGroup = {
+  label?: string;
+  options: { id: string; label: string }[];
+  activeId: string;
+  onActiveChange: (id: string) => void;
+};
+
+export type ApiKeyEntry = {
+  name: string;
+  type: string;
+  prefix: string;
+  created: string;
+};
+
+export type HandlerEntry = {
+  table: string;
+  dependsOn: string | null;
+  chunkTtl: string;
+};

package/src/navigation/index.ts

@@ -0,0 +1,5 @@
+export * from './nav-pill';
+export * from './nav-pill-group';
+export * from './status-dot';
+export * from './syncular-brand';
+export * from './top-navigation';

package/src/navigation/nav-pill-group.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+import type { NavItem } from '../lib/types';
+import { NavPill } from './nav-pill';
+
+export type NavPillGroupProps = {
+  items: readonly NavItem[];
+  activeId: string;
+  onItemChange?: (id: string) => void;
+  renderItem?: (
+    item: NavItem,
+    props: { active: boolean; onClick: () => void }
+  ) => ReactNode;
+  className?: string;
+};
+
+export function NavPillGroup({
+  items,
+  activeId,
+  onItemChange,
+  renderItem,
+  className,
+}: NavPillGroupProps) {
+  return (
+    <div className={cn('flex items-center gap-0.5', className)}>
+      {items.map((item) => {
+        const active = item.id === activeId;
+        const onClick = () => onItemChange?.(item.id);
+
+        if (renderItem) {
+          return (
+            <span key={item.id}>{renderItem(item, { active, onClick })}</span>
+          );
+        }
+
+        return (
+          <NavPill key={item.id} active={active} onClick={onClick}>
+            {item.label}
+          </NavPill>
+        );
+      })}
+    </div>
+  );
+}

package/src/navigation/nav-pill.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export type NavPillProps = {
+  active?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+  className?: string;
+};
+
+export function NavPill({
+  active,
+  onClick,
+  children,
+  className,
+}: NavPillProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'font-mono text-[10px] tracking-[1.5px] uppercase bg-transparent border-none px-3.5 py-1 cursor-pointer relative transition-colors',
+        active ? 'text-white' : 'text-neutral-500 hover:text-neutral-300',
+        className
+      )}
+    >
+      {children}
+      {active && (
+        <span className="absolute -bottom-2.5 left-1/2 -translate-x-1/2 w-4 h-0.5 bg-flow rounded-sm shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
+      )}
+    </button>
+  );
+}

package/src/navigation/status-dot.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/cn';
+
+const statusDotVariants = cva('rounded-full inline-block flex-shrink-0', {
+  variants: {
+    color: {
+      healthy: 'bg-healthy',
+      syncing: 'bg-syncing',
+      offline: 'bg-offline',
+      flow: 'bg-flow',
+      relay: 'bg-relay',
+      encrypt: 'bg-encrypt',
+      muted: 'bg-neutral-500',
+    },
+    size: {
+      sm: 'w-1.5 h-1.5',
+      md: 'w-2 h-2',
+      lg: 'w-2.5 h-2.5',
+    },
+    glow: {
+      true: '',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    color: 'healthy',
+    size: 'sm',
+    glow: false,
+  },
+});
+
+const glowMap: Record<string, string> = {
+  healthy: '0 0 6px #22c55e',
+  syncing: '0 0 6px #f59e0b',
+  offline: '0 0 6px #ef4444',
+  flow: '0 0 6px #3b82f6',
+  relay: '0 0 6px #8b5cf6',
+  encrypt: '0 0 6px #f472b6',
+  muted: 'none',
+};
+
+export type StatusDotProps = VariantProps<typeof statusDotVariants> & {
+  className?: string;
+  pulse?: boolean;
+};
+
+export function StatusDot({
+  color,
+  size,
+  glow,
+  pulse,
+  className,
+}: StatusDotProps) {
+  return (
+    <span
+      className={cn(
+        statusDotVariants({ color, size, glow }),
+        pulse && 'dot-pulse',
+        className
+      )}
+      style={glow ? { boxShadow: glowMap[color ?? 'healthy'] } : undefined}
+    />
+  );
+}

package/src/navigation/syncular-brand.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { cn } from '../lib/cn';
+import { UI_VERSION } from '../version';
+import { StatusDot } from './status-dot';
+
+export type SyncularBrandProps = {
+  label?: string;
+  className?: string;
+};
+
+export function SyncularBrand({ label, className }: SyncularBrandProps) {
+  return (
+    <div className={cn('flex items-center gap-3', className)}>
+      <StatusDot color="healthy" size="md" glow />
+      <span className="font-display font-bold text-white text-sm tracking-tight">
+        syncular
+      </span>
+      {label && (
+        <span className="font-mono text-[9px] text-neutral-600 uppercase tracking-widest">
+          {label}
+        </span>
+      )}
+      <span className="font-mono text-[9px] text-neutral-600 tracking-wider">
+        v{UI_VERSION}
+      </span>
+    </div>
+  );
+}