@syncular/ui 0.0.0

package/src/demo/note-card.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { cn } from '../lib/cn';
+
+export interface NoteCardProps {
+  text: string;
+  author: string;
+  time: string;
+  isCiphertext?: boolean;
+  onDelete?: () => void;
+  className?: string;
+}
+
+export function NoteCard({
+  text,
+  author,
+  time,
+  isCiphertext,
+  onDelete,
+  className,
+}: NoteCardProps) {
+  return (
+    <div
+      className={cn(
+        'bg-panel-alt border border-[#1a1a1a] rounded-lg p-3 hover:border-[#282828] transition-[border-color]',
+        className
+      )}
+    >
+      {isCiphertext ? (
+        <p className="font-mono text-[10px] text-encrypt/30 break-all">
+          {text}
+        </p>
+      ) : (
+        <p className="text-sm text-neutral-300">{text}</p>
+      )}
+      <div className="mt-2 flex items-center gap-2 text-neutral-600 font-mono text-[9px]">
+        <span>by {author}</span>
+        <span>&middot;</span>
+        <span>{time}</span>
+        {onDelete ? (
+          <button
+            type="button"
+            onClick={onDelete}
+            className="ml-auto text-neutral-700 hover:text-offline transition-colors"
+          >
+            &times;
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/demo/sync-controls.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { cn } from '../lib/cn';
+import { Button } from '../primitives/button';
+
+export interface SyncControlsProps {
+  isOffline: boolean;
+  onToggleOffline?: () => void;
+  onReset?: () => void;
+  className?: string;
+}
+
+export function SyncControls({
+  isOffline,
+  onToggleOffline,
+  onReset,
+  className,
+}: SyncControlsProps) {
+  return (
+    <div className={cn('flex items-center gap-3', className)}>
+      {onToggleOffline ? (
+        <Button variant="ghost" size="sm" onClick={onToggleOffline}>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            {isOffline ? (
+              <>
+                <line x1="1" y1="1" x2="23" y2="23" />
+                <path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55" />
+                <path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39" />
+                <path d="M10.71 5.05A16 16 0 0 1 22.56 9" />
+                <path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88" />
+                <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
+                <line x1="12" y1="20" x2="12.01" y2="20" />
+              </>
+            ) : (
+              <>
+                <path d="M1.42 9a16 16 0 0 1 21.16 0" />
+                <path d="M5 12.55a11 11 0 0 1 14.08 0" />
+                <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
+                <line x1="12" y1="20" x2="12.01" y2="20" />
+              </>
+            )}
+          </svg>
+          {isOffline ? 'Go Online' : 'Go Offline'}
+        </Button>
+      ) : null}
+      {onReset ? (
+        <Button variant="ghost" size="sm" onClick={onReset}>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="23 4 23 10 17 10" />
+            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+          </svg>
+          Reset
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/src/demo/sync-status-badge.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { cn } from '../lib/cn';
+
+export type SyncStatus = 'synced' | 'syncing' | 'offline' | 'error';
+
+export interface SyncStatusBadgeProps {
+  status: SyncStatus;
+  className?: string;
+}
+
+const statusConfig: Record<SyncStatus, { text: string; color: string }> = {
+  synced: { text: 'Synced', color: 'text-healthy' },
+  syncing: { text: 'Syncing', color: 'text-syncing' },
+  offline: { text: 'Offline', color: 'text-offline' },
+  error: { text: 'Error', color: 'text-offline' },
+};
+
+const dotConfig: Record<SyncStatus, string> = {
+  synced: 'bg-healthy',
+  syncing: 'bg-syncing',
+  offline: 'bg-offline',
+  error: 'bg-offline',
+};
+
+export function SyncStatusBadge({ status, className }: SyncStatusBadgeProps) {
+  const config = statusConfig[status];
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <span className={cn('font-mono text-[10px]', config.color)}>
+        {config.text}
+      </span>
+      <span className={cn('w-1.5 h-1.5 rounded-full', dotConfig[status])} />
+    </div>
+  );
+}

package/src/demo/task-item.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface TaskItemProps {
+  checked: boolean;
+  text: string;
+  meta?: string;
+  trailing?: ReactNode;
+  onToggle?: () => void;
+  onDelete?: () => void;
+  className?: string;
+}
+
+export function TaskItem({
+  checked,
+  text,
+  meta,
+  trailing,
+  onToggle,
+  onDelete,
+  className,
+}: TaskItemProps) {
+  return (
+    <div
+      className={cn(
+        'group flex items-center gap-3 px-3 h-10 border-b border-[#161616] transition-colors relative',
+        'before:absolute before:left-0 before:top-[20%] before:bottom-[20%] before:w-[2px] before:bg-transparent before:transition-colors',
+        'hover:bg-white/[0.018] hover:before:bg-flow',
+        className
+      )}
+    >
+      <button
+        type="button"
+        onClick={onToggle}
+        className={cn(
+          'h-[15px] w-[15px] rounded-full border-[1.5px] flex-shrink-0 flex items-center justify-center transition-all duration-200',
+          'hover:scale-[1.15]',
+          checked
+            ? 'bg-healthy border-healthy shadow-[0_0_6px_rgba(34,197,94,0.3)]'
+            : 'border-neutral-700 hover:border-neutral-500'
+        )}
+      >
+        {checked ? (
+          <svg width="8" height="8" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M2.5 6L5 8.5L9.5 3.5"
+              stroke="white"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        ) : null}
+      </button>
+      <span
+        className={cn(
+          'text-[12.5px] leading-relaxed flex-1 truncate',
+          checked
+            ? 'line-through text-neutral-700 decoration-neutral-700'
+            : 'text-neutral-400'
+        )}
+      >
+        {text}
+      </span>
+      {trailing}
+      {meta ? (
+        <span className="font-mono text-[9px] text-neutral-700">{meta}</span>
+      ) : null}
+      {onDelete ? (
+        <button
+          type="button"
+          onClick={onDelete}
+          className="opacity-0 group-hover:opacity-100 text-neutral-600 hover:text-offline transition-all text-xs"
+          aria-label="Delete"
+        >
+          ×
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/demo/task-list.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface TaskListProps {
+  children: ReactNode;
+  emptyMessage?: string;
+  className?: string;
+}
+
+export function TaskList({
+  children,
+  emptyMessage = 'No tasks yet',
+  className,
+}: TaskListProps) {
+  // Check if children is empty
+  const hasChildren = Array.isArray(children)
+    ? children.filter(Boolean).length > 0
+    : Boolean(children);
+
+  return (
+    <div className={cn('min-h-[120px]', className)}>
+      {hasChildren ? (
+        <div className="space-y-0.5">{children}</div>
+      ) : (
+        <div className="flex items-center justify-center h-[120px]">
+          <p className="text-xs text-neutral-600">{emptyMessage}</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/demo/topology-panel.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface TopologyPanelProps {
+  label: string;
+  headerRight?: ReactNode;
+  minHeight?: number;
+  children: ReactNode;
+  className?: string;
+}
+
+export function TopologyPanel({
+  label,
+  headerRight,
+  minHeight = 220,
+  children,
+  className,
+}: TopologyPanelProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-[10px] border border-border bg-panel overflow-hidden',
+        className
+      )}
+    >
+      <div className="px-4 py-2.5 border-b border-border flex items-center justify-between">
+        <span className="font-mono text-[10px] uppercase tracking-[1.5px] text-neutral-500">
+          {label}
+        </span>
+        {headerRight ? (
+          <div className="flex items-center gap-4">{headerRight}</div>
+        ) : null}
+      </div>
+      <div
+        className="flex items-center justify-center relative dot-grid"
+        style={{ minHeight: `${minHeight}px` }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}