@plures/design-dojo 0.5.2 → 0.7.1

package/dist/app/SyncIndicator.svelte

@@ -0,0 +1,219 @@
+<!--
+  SyncIndicator — Compact persistent indicator showing Hyperswarm sync state.
+
+  States:
+  - "synced"   — green steady pulse: all peers up to date
+  - "syncing"  — animated spinner: active data exchange
+  - "offline"  — grey: no peers reachable
+  - "conflict" — yellow/amber: conflicting records need resolution
+
+  Displays a peer-count badge. Click fires `onclick` so the host can open
+  PeerStatusPanel.
+-->
+<script lang="ts">
+  import type { SyncStatus } from "./Sync.types.js";
+
+  interface Props {
+    status: SyncStatus;
+    /** Number of currently connected peers. */
+    peerCount?: number;
+    /** Accessible label prefix. Defaults to "Sync status". */
+    label?: string;
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired when the indicator is activated (click / Enter / Space). */
+    onclick?: () => void;
+  }
+
+  let {
+    status,
+    peerCount = 0,
+    label = "Sync status",
+    class: className = "",
+    onclick,
+  }: Props = $props();
+
+  const STATUS_LABEL: Record<SyncStatus, string> = {
+    synced:   "synced",
+    syncing:  "syncing",
+    offline:  "offline",
+    conflict: "conflict",
+  };
+
+  const PEER_LABEL = $derived(
+    peerCount === 0
+      ? "no devices connected"
+      : peerCount === 1
+        ? "1 device connected"
+        : `${peerCount} devices connected`,
+  );
+
+  const ariaLabel = $derived(`${label}: ${STATUS_LABEL[status]}, ${PEER_LABEL}`);
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onclick?.();
+    }
+  }
+</script>
+
+<div
+  class="sync-indicator sync-indicator--{status} {className}"
+  role="button"
+  tabindex="0"
+  aria-label={ariaLabel}
+  onclick={onclick}
+  onkeydown={handleKeydown}
+>
+  <!-- Animated ring + icon -->
+  <div class="sync-indicator__ring" aria-hidden="true">
+    {#if status === "syncing"}
+      <div class="sync-indicator__spinner"></div>
+    {:else}
+      <div class="sync-indicator__dot"></div>
+    {/if}
+  </div>
+
+  <!-- Textual status -->
+  <span class="sync-indicator__label">
+    {STATUS_LABEL[status]}
+  </span>
+
+  <!-- Peer-count badge -->
+  {#if peerCount > 0}
+    <span class="sync-indicator__badge" aria-hidden="true">
+      {peerCount}
+    </span>
+  {/if}
+</div>
+
+<style>
+  .sync-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: 6px var(--space-3, 12px) 6px 8px;
+    border-radius: var(--radius-full, 9999px);
+    border: 1px solid var(--color-border, #2a2a2a);
+    background: var(--surface-1, #141414);
+    cursor: pointer;
+    user-select: none;
+    font-size: var(--text-sm, 14px);
+    font-weight: 500;
+    color: var(--color-text-muted, #888);
+    outline: none;
+    transition: border-color 0.15s, background 0.15s;
+  }
+
+  .sync-indicator:hover,
+  .sync-indicator:focus-visible {
+    background: var(--surface-2, #1e1e1e);
+    border-color: var(--color-text-muted, #888);
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sync-indicator { transition: none; }
+  }
+
+  /* ── Ring wrapper ── */
+  .sync-indicator__ring {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  /* ── Steady dot ── */
+  .sync-indicator__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  /* ── Spinning ring (syncing) ── */
+  .sync-indicator__spinner {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-right-color: currentColor;
+    animation: sync-spin 0.9s linear infinite;
+  }
+
+  @keyframes sync-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sync-indicator__spinner {
+      animation: none;
+      border-top-color: currentColor;
+      border-right-color: transparent;
+    }
+  }
+
+  /* ── Label ── */
+  .sync-indicator__label {
+    line-height: 1;
+  }
+
+  /* ── Badge ── */
+  .sync-indicator__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: var(--radius-full, 9999px);
+    font-size: 11px;
+    font-weight: 700;
+    font-family: var(--font-mono, monospace);
+    background: currentColor;
+    /* invert text so it reads over the badge colour */
+    color: var(--surface-0, #0a0a0a);
+  }
+
+  /* ── Status colour variants ── */
+  .sync-indicator--synced {
+    color: var(--color-success, #22c55e);
+    border-color: color-mix(in srgb, var(--color-success, #22c55e) 30%, transparent);
+  }
+
+  .sync-indicator--synced .sync-indicator__dot {
+    animation: sync-pulse 2.4s ease-in-out infinite;
+  }
+
+  @keyframes sync-pulse {
+    0%, 100% { opacity: 1;   transform: scale(1);    }
+    50%       { opacity: 0.5; transform: scale(0.75); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sync-indicator--synced .sync-indicator__dot {
+      animation: none;
+    }
+  }
+
+  .sync-indicator--syncing {
+    color: var(--color-info, #3b82f6);
+    border-color: color-mix(in srgb, var(--color-info, #3b82f6) 30%, transparent);
+  }
+
+  .sync-indicator--offline {
+    color: var(--color-text-muted, #888);
+    border-color: var(--color-border, #2a2a2a);
+  }
+
+  .sync-indicator--conflict {
+    color: var(--color-warning, #f59e0b);
+    border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 30%, transparent);
+  }
+</style>

package/dist/app/SyncIndicator.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SyncStatus } from "./Sync.types.js";
+interface Props {
+    status: SyncStatus;
+    /** Number of currently connected peers. */
+    peerCount?: number;
+    /** Accessible label prefix. Defaults to "Sync status". */
+    label?: string;
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired when the indicator is activated (click / Enter / Space). */
+    onclick?: () => void;
+}
+declare const SyncIndicator: import("svelte").Component<Props, {}, "">;
+type SyncIndicator = ReturnType<typeof SyncIndicator>;
+export default SyncIndicator;

package/dist/app/SyncTimeline.svelte

@@ -0,0 +1,299 @@
+<!--
+  SyncTimeline — Visual timeline of recent Hyperswarm sync events.
+
+  Shows what was synced (memories, procedures, state, ledger), when,
+  to/from which peer, and the direction of data flow. Useful for
+  debugging sync issues.
+
+  Features:
+  - Chronological list, newest first
+  - Colour-coded by record type
+  - Direction indicator (in / out)
+  - Peer name resolved from peer list
+  - Empty state
+  - Accessible
+-->
+<script lang="ts">
+  import type { Peer, SyncEvent, SyncRecordType } from "./Sync.types.js";
+
+  interface Props {
+    events: SyncEvent[];
+    peers: Peer[];
+    /** Maximum events to show. Default: 50. */
+    maxEvents?: number;
+    /** Custom CSS class. */
+    class?: string;
+  }
+
+  let { events, peers, maxEvents = 50, class: className = "" }: Props = $props();
+
+  // ── Colour per record type ────────────────────────────────────────────────
+  const TYPE_COLOR: Record<SyncRecordType, string> = {
+    memory:    "#6366f1",
+    procedure: "#22c55e",
+    state:     "#3b82f6",
+    ledger:    "#f59e0b",
+  };
+
+  const TYPE_ICON: Record<SyncRecordType, string> = {
+    memory:    "◈",
+    procedure: "⬡",
+    state:     "◉",
+    ledger:    "▣",
+  };
+
+  // ── Peer lookup ───────────────────────────────────────────────────────────
+  const peerMap = $derived(new Map(peers.map((p) => [p.id, p])));
+
+  function peerName(id: string): string {
+    return peerMap.get(id)?.name ?? id.slice(0, 8);
+  }
+
+  // ── Sorted events ─────────────────────────────────────────────────────────
+  const sorted = $derived(
+    [...events]
+      .sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())
+      .slice(0, maxEvents),
+  );
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+  function formatTime(d: Date): string {
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  }
+
+  function formatDate(d: Date): string {
+    return d.toLocaleDateString([], { month: "short", day: "numeric" });
+  }
+
+  function isToday(d: Date): boolean {
+    const now = new Date();
+    return (
+      d.getFullYear() === now.getFullYear() &&
+      d.getMonth()    === now.getMonth()    &&
+      d.getDate()     === now.getDate()
+    );
+  }
+
+  function formatTimestamp(d: Date): string {
+    return isToday(d) ? formatTime(d) : `${formatDate(d)} ${formatTime(d)}`;
+  }
+</script>
+
+<div class="sync-tl {className}" aria-label="Sync event timeline">
+  <header class="sync-tl__header">
+    <span class="sync-tl__title">Sync History</span>
+    {#if sorted.length > 0}
+      <span class="sync-tl__count" aria-label="{sorted.length}{events.length > maxEvents ? '+' : ''} events{events.length > maxEvents ? ', showing newest ' + maxEvents : ''}">
+        {sorted.length}{events.length > maxEvents ? "+" : ""}
+      </span>
+    {/if}
+  </header>
+
+  {#if sorted.length === 0}
+    <p class="sync-tl__empty">No sync events recorded yet.</p>
+  {:else}
+    <ol class="sync-tl__list" role="list">
+      {#each sorted as ev (ev.id)}
+        {@const color = TYPE_COLOR[ev.type]}
+        {@const icon = TYPE_ICON[ev.type]}
+        <li
+          class="sync-tl__event"
+          aria-label="{ev.direction === 'in' ? 'Received' : 'Sent'} {ev.count} {ev.type} record{ev.count !== 1 ? 's' : ''} {ev.direction === 'in' ? 'from' : 'to'} {peerName(ev.peerId)} at {formatTimestamp(ev.timestamp)}"
+        >
+          <!-- Spine -->
+          <div class="sync-tl__spine" aria-hidden="true">
+            <span class="sync-tl__icon" style:color={color}>{icon}</span>
+            <span class="sync-tl__line"></span>
+          </div>
+
+          <!-- Body -->
+          <div class="sync-tl__body">
+            <div class="sync-tl__row">
+              <!-- Type tag -->
+              <span
+                class="sync-tl__type-tag"
+                style:--type-color={color}
+              >{ev.type}</span>
+
+              <!-- Direction + count -->
+              <span class="sync-tl__direction" aria-hidden="true">
+                {ev.direction === "in" ? "↓" : "↑"}
+              </span>
+              <span class="sync-tl__count-badge">
+                {ev.count} record{ev.count !== 1 ? "s" : ""}
+              </span>
+
+              <!-- Peer -->
+              <span class="sync-tl__peer">
+                {ev.direction === "in" ? "from" : "to"}
+                <strong>{peerName(ev.peerId)}</strong>
+              </span>
+
+              <!-- Timestamp -->
+              <time
+                class="sync-tl__time"
+                datetime={ev.timestamp.toISOString()}
+              >{formatTimestamp(ev.timestamp)}</time>
+            </div>
+          </div>
+        </li>
+      {/each}
+    </ol>
+  {/if}
+</div>
+
+<style>
+  .sync-tl {
+    display: flex;
+    flex-direction: column;
+    background: var(--surface-1, #141414);
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-lg, 16px);
+    overflow: hidden;
+  }
+
+  /* ── Header ── */
+  .sync-tl__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3, 12px) var(--space-4, 16px);
+    border-bottom: 1px solid var(--color-border, #2a2a2a);
+    background: var(--surface-2, #1e1e1e);
+  }
+
+  .sync-tl__title {
+    font-size: var(--text-sm, 14px);
+    font-weight: 600;
+    color: var(--color-text, #e8e8e8);
+  }
+
+  .sync-tl__count {
+    font-size: var(--text-xs, 12px);
+    font-family: var(--font-mono, monospace);
+    font-weight: 700;
+    color: var(--color-text-muted, #888);
+    background: var(--surface-1, #141414);
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-full, 9999px);
+    padding: 2px 8px;
+  }
+
+  /* ── Empty ── */
+  .sync-tl__empty {
+    margin: 0;
+    padding: var(--space-6, 24px) var(--space-4, 16px);
+    color: var(--color-text-subtle, #555);
+    font-size: var(--text-sm, 14px);
+    text-align: center;
+  }
+
+  /* ── List ── */
+  .sync-tl__list {
+    list-style: none;
+    margin: 0;
+    padding: var(--space-3, 12px) var(--space-4, 16px);
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    max-height: 420px;
+    overflow-y: auto;
+  }
+
+  /* ── Event row ── */
+  .sync-tl__event {
+    display: grid;
+    grid-template-columns: 20px 1fr;
+    gap: var(--space-3, 12px);
+    min-height: 40px;
+  }
+
+  /* ── Spine ── */
+  .sync-tl__spine {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 10px;
+  }
+
+  .sync-tl__icon {
+    font-size: 14px;
+    line-height: 1;
+    flex-shrink: 0;
+    z-index: 1;
+  }
+
+  .sync-tl__line {
+    flex: 1;
+    width: 1px;
+    background: var(--color-border, #2a2a2a);
+    margin-top: 3px;
+    min-height: 8px;
+  }
+
+  .sync-tl__event:last-child .sync-tl__line {
+    display: none;
+  }
+
+  /* ── Body ── */
+  .sync-tl__body {
+    padding: 8px 0 16px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1, 4px);
+  }
+
+  .sync-tl__row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-1, 4px) var(--space-2, 8px);
+  }
+
+  /* ── Type tag ── */
+  .sync-tl__type-tag {
+    font-size: var(--text-xs, 12px);
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: var(--radius-full, 9999px);
+    background: color-mix(in srgb, var(--type-color, #6366f1) 15%, var(--surface-2, #1e1e1e));
+    color: var(--type-color, #6366f1);
+    border: 1px solid color-mix(in srgb, var(--type-color, #6366f1) 30%, transparent);
+    white-space: nowrap;
+    text-transform: capitalize;
+  }
+
+  /* ── Direction ── */
+  .sync-tl__direction {
+    font-size: var(--text-sm, 14px);
+    font-weight: 700;
+    color: var(--color-text-muted, #888);
+  }
+
+  /* ── Record count ── */
+  .sync-tl__count-badge {
+    font-size: var(--text-xs, 12px);
+    font-family: var(--font-mono, monospace);
+    color: var(--color-text-muted, #888);
+  }
+
+  /* ── Peer ── */
+  .sync-tl__peer {
+    font-size: var(--text-xs, 12px);
+    color: var(--color-text-subtle, #555);
+  }
+
+  .sync-tl__peer strong {
+    color: var(--color-text, #e8e8e8);
+    font-weight: 600;
+  }
+
+  /* ── Timestamp ── */
+  .sync-tl__time {
+    font-size: 11px;
+    font-family: var(--font-mono, monospace);
+    color: var(--color-text-subtle, #555);
+    margin-left: auto;
+    white-space: nowrap;
+  }
+</style>

package/dist/app/SyncTimeline.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Peer, SyncEvent } from "./Sync.types.js";
+interface Props {
+    events: SyncEvent[];
+    peers: Peer[];
+    /** Maximum events to show. Default: 50. */
+    maxEvents?: number;
+    /** Custom CSS class. */
+    class?: string;
+}
+declare const SyncTimeline: import("svelte").Component<Props, {}, "">;
+type SyncTimeline = ReturnType<typeof SyncTimeline>;
+export default SyncTimeline;