@stephen-netu/design-system 0.1.0

package/src/l0-layout/epistemic/ParadigmLens.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import type { ParadigmDefinition } from '../../epistemic/types.js';
+
+  type ParadigmId = 'spatial' | 'temporal' | 'hierarchical' | 'graph' | 'trust';
+
+  interface Props {
+    activeParadigm?: ParadigmId;
+    onParadigmChange?: (id: ParadigmId) => void;
+    class?: string;
+  }
+
+  let { activeParadigm = 'spatial', onParadigmChange, class: className = '' }: Props = $props();
+
+  const PARADIGMS: ParadigmDefinition[] = [
+    {
+      id: 'spatial',
+      label: 'Spatial',
+      description: 'Knowledge arranged by position. Good for: spatial reasoning, clustering, free association.',
+      conceals: 'Temporal ordering, verification state, provenance chains.',
+      icon: '⊞',
+    },
+    {
+      id: 'temporal',
+      label: 'Temporal',
+      description: 'Knowledge ordered by creation tick. Good for: understanding sequence, causation, when knowledge arrived.',
+      conceals: 'Spatial relationships, clustering.',
+      icon: '⊟',
+    },
+    {
+      id: 'hierarchical',
+      label: 'Hierarchical',
+      description: 'Knowledge organized by source path and tags. Good for: file structure, categorical grouping.',
+      conceals: 'Cross-cutting relationships, temporal dynamics.',
+      icon: '⊠',
+    },
+    {
+      id: 'graph',
+      label: 'Graph',
+      description: 'Knowledge atoms as nodes, connections as edges. Good for: network structure, indirect connections.',
+      conceals: 'Spatial intuition, temporal sequence.',
+      icon: '⊡',
+    },
+    {
+      id: 'trust',
+      label: 'Trust',
+      description: 'Knowledge sorted by Allay stage. Good for: seeing what\'s trusted, contested, or unverified.',
+      conceals: 'Spatial, temporal, and structural organization.',
+      icon: '⊕',
+    },
+  ];
+
+  let hoveredParadigm: ParadigmDefinition | null = $state(null);
+
+  function select(id: ParadigmId) {
+    onParadigmChange?.(id);
+  }
+</script>
+
+<div class="ds-paradigm-lens {className}">
+  <div class="tab-bar" role="tablist">
+    {#each PARADIGMS as p}
+      <button
+        class="tab"
+        class:active={activeParadigm === p.id}
+        role="tab"
+        aria-selected={activeParadigm === p.id}
+        type="button"
+        onmouseenter={() => hoveredParadigm = p}
+        onmouseleave={() => hoveredParadigm = null}
+        onclick={() => select(p.id as ParadigmId)}
+      >
+        <span class="tab-icon">{p.icon}</span>
+        <span class="tab-label">{p.label}</span>
+      </button>
+    {/each}
+  </div>
+
+  {#if hoveredParadigm}
+    <div class="paradigm-tooltip">
+      <strong>{hoveredParadigm.label}</strong>
+      <p>{hoveredParadigm.description}</p>
+      <p class="conceals">Conceals: {hoveredParadigm.conceals}</p>
+    </div>
+  {:else}
+    {@const current = PARADIGMS.find(p => p.id === activeParadigm)}
+    {#if current}
+      <div class="paradigm-tooltip muted">
+        <strong>{current.label}</strong>
+        <p>{current.description}</p>
+        <p class="conceals">Conceals: {current.conceals}</p>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .ds-paradigm-lens {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    font-family: var(--font-sans);
+  }
+
+  .tab-bar {
+    display: flex;
+    gap: 2px;
+    border-bottom: 1px solid var(--border-default);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .tab-bar::-webkit-scrollbar { display: none; }
+
+  .tab {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-2) var(--space-3);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: color 150ms, border-color 150ms;
+  }
+
+  .tab:hover { color: var(--color-text-secondary); }
+
+  .tab.active {
+    color: var(--color-accent);
+    border-bottom-color: var(--color-accent);
+  }
+
+  .tab-icon { font-size: var(--text-sm); }
+  .tab-label { font-size: var(--text-xs); }
+
+  .paradigm-tooltip {
+    padding: var(--space-2) var(--space-3);
+    background: var(--color-bg-panel-elevated);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-subtle);
+    font-size: var(--text-xs);
+  }
+
+  .paradigm-tooltip.muted { opacity: 0.7; }
+
+  .paradigm-tooltip strong {
+    color: var(--color-text-primary);
+    font-weight: 600;
+    display: block;
+    margin-bottom: var(--space-1);
+  }
+
+  .paradigm-tooltip p {
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .paradigm-tooltip .conceals {
+    color: var(--color-text-muted);
+    margin-top: var(--space-1);
+    font-style: italic;
+  }
+</style>

package/src/l0-layout/epistemic/ProvenanceChain.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  import type { ProvenanceChainNode } from '../../epistemic/types.js';
+  import { getProvenanceNodeLabel } from '../../epistemic/utils.js';
+  import ExpertBadge from '../../u0-primitives/expert-badge/ExpertBadge.svelte';
+
+  interface Props {
+    nodes: ProvenanceChainNode[];
+    onnodeclick?: (node: ProvenanceChainNode) => void;
+    class?: string;
+  }
+
+  let { nodes, onnodeclick, class: className = '' }: Props = $props();
+
+  function getNodeActionLabel(node: ProvenanceChainNode): string | null {
+    switch (node.type) {
+      case 'file_source': return 'Open source';
+      case 'web_source': return 'Open URL';
+      case 'sigchain_witness': return 'View on chain';
+      case 'assay_evaluation': return 'View clearance';
+      case 'accord_replication': return 'View source Realm';
+      case 'agent_research': return 'View avenue';
+      default: return null;
+    }
+  }
+</script>
+
+<div class="ds-provenance-chain {className}">
+  {#each nodes as node, i}
+    <div class="node">
+      <!-- Timeline track -->
+      <div class="track">
+        <div class="bullet"></div>
+        {#if i < nodes.length - 1}
+          <div class="line"></div>
+        {/if}
+      </div>
+
+      <!-- Node content -->
+      <div class="content">
+        <div class="node-header">
+          <ExpertBadge expert={node.expert} size="sm" showName={false} />
+          <span class="node-label">{getProvenanceNodeLabel(node)}</span>
+          <span class="node-tick">tick {node.timestamp}</span>
+        </div>
+        <div class="node-expert-name">{node.expert.name}</div>
+
+        {#if getNodeActionLabel(node)}
+          <button
+            class="node-action"
+            type="button"
+            onclick={() => onnodeclick?.(node)}
+          >
+            {getNodeActionLabel(node)}
+          </button>
+        {/if}
+      </div>
+    </div>
+  {/each}
+
+  {#if nodes.length === 0}
+    <div class="empty">No provenance data available</div>
+  {/if}
+</div>
+
+<style>
+  .ds-provenance-chain {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--font-sans);
+  }
+
+  .node {
+    display: flex;
+    gap: var(--space-3);
+    min-height: 3rem;
+  }
+
+  .track {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    width: 16px;
+  }
+
+  .bullet {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-accent);
+    border: 2px solid var(--color-bg-panel);
+    outline: 1px solid var(--color-accent);
+    flex-shrink: 0;
+    margin-top: 4px;
+  }
+
+  .line {
+    width: 2px;
+    flex: 1;
+    background: var(--border-default);
+    min-height: 1.5rem;
+    margin-top: 4px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-bottom: var(--space-3);
+    flex: 1;
+  }
+
+  .node-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+  }
+
+  .node-label {
+    font-size: var(--text-xs);
+    color: var(--color-text-primary);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .node-tick {
+    font-size: var(--text-xs);
+    font-family: var(--font-mono);
+    color: var(--color-text-tertiary);
+    flex-shrink: 0;
+  }
+
+  .node-expert-name {
+    font-size: var(--text-xs);
+    color: var(--color-text-tertiary);
+    padding-left: 1px;
+  }
+
+  .node-action {
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    color: var(--color-accent);
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-align: left;
+  }
+
+  .node-action:hover {
+    color: var(--color-accent-hover);
+  }
+
+  .empty {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    font-style: italic;
+    padding: var(--space-4) 0;
+    text-align: center;
+  }
+</style>

package/src/l0-layout/epistemic/TrustView.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import type { KnowledgeEpistemicDetail } from '../../epistemic/types.js';
+  import AssayBadge from '../../u0-primitives/assay-badge/AssayBadge.svelte';
+  import AllayGauge from '../../u0-primitives/allay-gauge/AllayGauge.svelte';
+  import ExpertBadge from '../../u0-primitives/expert-badge/ExpertBadge.svelte';
+
+  interface Props {
+    knowledge: KnowledgeEpistemicDetail[];
+    onitemclick?: (item: KnowledgeEpistemicDetail) => void;
+    class?: string;
+  }
+
+  let { knowledge, onitemclick, class: className = '' }: Props = $props();
+
+  type GateGroup = 'Cleared' | 'Pending' | 'Blocked';
+  let activeGroup: GateGroup = $state('Cleared');
+
+  const groups: GateGroup[] = ['Cleared', 'Pending', 'Blocked'];
+
+  const sorted = $derived(
+    [...knowledge].sort((a, b) => b.allay.stage - a.allay.stage)
+  );
+
+  const cleared = $derived(sorted.filter(k => k.assay?.gate === 'Cleared'));
+  const blocked = $derived(sorted.filter(k => k.assay?.gate === 'Blocked'));
+  const pending = $derived(sorted.filter(k => !k.assay || (k.assay.gate !== 'Cleared' && k.assay.gate !== 'Blocked')));
+
+  function getGroup(group: GateGroup): KnowledgeEpistemicDetail[] {
+    switch (group) {
+      case 'Cleared': return cleared;
+      case 'Blocked': return blocked;
+      case 'Pending': return pending;
+    }
+  }
+
+  function groupCount(group: GateGroup): number {
+    return getGroup(group).length;
+  }
+</script>
+
+<div class="ds-trust-view {className}">
+  <!-- Group tabs -->
+  <div class="group-tabs" role="tablist">
+    {#each groups as group}
+      <button
+        class="group-tab"
+        class:active={activeGroup === group}
+        class:cleared={group === 'Cleared'}
+        class:blocked={group === 'Blocked'}
+        class:pending={group === 'Pending'}
+        role="tab"
+        aria-selected={activeGroup === group}
+        type="button"
+        onclick={() => activeGroup = group}
+      >
+        {group}
+        <span class="count">{groupCount(group)}</span>
+      </button>
+    {/each}
+  </div>
+
+  <!-- Knowledge list -->
+  <div class="knowledge-list">
+    {#each getGroup(activeGroup) as item}
+      <button
+        class="knowledge-item"
+        type="button"
+        onclick={() => onitemclick?.(item)}
+      >
+        <div class="item-gauges">
+          <AllayGauge stage={item.allay.stage} confidence={item.allay.confidence} size="sm" />
+          <AssayBadge clearance={item.assay ?? null} size="sm" />
+        </div>
+        <div class="item-info">
+          <span class="item-title">{item.title}</span>
+          <span class="item-source">{item.source}</span>
+        </div>
+        {#if item.expert}<ExpertBadge expert={item.expert} size="sm" showName={false} />{/if}
+      </button>
+    {/each}
+
+    {#if getGroup(activeGroup).length === 0}
+      <div class="empty">No {activeGroup.toLowerCase()} knowledge atoms</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .ds-trust-view {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--font-sans);
+  }
+
+  .group-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border-default);
+    margin-bottom: var(--space-3);
+  }
+
+  .group-tab {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-2) var(--space-4);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    transition: color 150ms, border-color 150ms;
+  }
+
+  .group-tab.active.cleared { color: var(--epistemic-cleared); border-bottom-color: var(--epistemic-cleared); }
+  .group-tab.active.blocked { color: var(--epistemic-blocked); border-bottom-color: var(--epistemic-blocked); }
+  .group-tab.active.pending { color: var(--epistemic-pending); border-bottom-color: var(--epistemic-pending); }
+
+  .count {
+    background: var(--color-bg-panel-elevated);
+    border-radius: var(--radius-full);
+    padding: 0 var(--space-1);
+    font-size: 10px;
+    font-family: var(--font-mono);
+    color: var(--color-text-secondary);
+  }
+
+  .knowledge-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .knowledge-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    background: var(--color-bg-panel-elevated);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    text-align: left;
+    transition: background 150ms, border-color 150ms;
+    width: 100%;
+  }
+
+  .knowledge-item:hover {
+    background: var(--color-bg-panel);
+    border-color: var(--border-hover);
+  }
+
+  .item-gauges {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+  }
+
+  .item-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .item-title {
+    font-size: var(--text-xs);
+    color: var(--color-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .item-source {
+    font-size: var(--text-xs);
+    font-family: var(--font-mono);
+    color: var(--color-text-tertiary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .empty {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    font-style: italic;
+    padding: var(--space-4);
+    text-align: center;
+  }
+</style>

package/src/l0-layout/epistemic/index.ts

@@ -0,0 +1,7 @@
+export { default as AssayDetailPanel } from './AssayDetailPanel.svelte';
+export { default as AllayDetailPanel } from './AllayDetailPanel.svelte';
+export { default as ProvenanceChain } from './ProvenanceChain.svelte';
+export { default as KnowledgeDetailPanel } from './KnowledgeDetailPanel.svelte';
+export { default as AvenueTrace } from './AvenueTrace.svelte';
+export { default as ParadigmLens } from './ParadigmLens.svelte';
+export { default as TrustView } from './TrustView.svelte';

package/src/l0-layout/grove/AccordCard.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import Card from '../../u0-primitives/card/Card.svelte';
+  import Badge from '../../u0-primitives/badge/Badge.svelte';
+
+  interface Props {
+    accordId: string;
+    domains: string[];
+    participantCount: number;
+    expiresAt: number;
+    groveId?: string;
+    class?: string;
+  }
+
+  let {
+    accordId,
+    domains,
+    participantCount,
+    expiresAt,
+    groveId,
+    class: className = ''
+  }: Props = $props();
+
+  let now = $state(Date.now());
+
+  $effect(() => {
+    const id = setInterval(() => { now = Date.now(); }, 60_000);
+    return () => clearInterval(id);
+  });
+
+  let timeRemaining = $derived.by(() => {
+    const diff = expiresAt - now;
+    if (diff <= 0) return 'Expired';
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    if (days > 0) return `${days}d ${hours}h`;
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    return `${hours}h ${minutes}m`;
+  });
+
+  let isExpired = $derived(expiresAt <= now);
+  let isExpiringSoon = $derived(!isExpired && (expiresAt - now) < 1000 * 60 * 60 * 24);
+</script>
+
+<Card variant="elevated" class="ds-accord-card {className}">
+  <div class="ds-accord-inner">
+    <div class="ds-accord-header">
+      <h3 class="ds-accord-name" title={accordId}>{accordId}</h3>
+      {#if groveId}
+        <span class="ds-accord-grove" title="Linked grove: {groveId}">{groveId}</span>
+      {/if}
+    </div>
+
+    <div class="ds-accord-domains">
+      {#each domains as domain}
+        <Badge variant="outline" color="accent" size="sm">{domain}</Badge>
+      {/each}
+    </div>
+
+    <div class="ds-accord-footer">
+      <span class="ds-accord-stat">
+        <span class="ds-accord-stat-value">{participantCount}</span>
+        <span class="ds-accord-stat-label">{participantCount === 1 ? 'realm' : 'realms'}</span>
+      </span>
+
+      <span
+        class="ds-accord-expiry"
+        class:is-expired={isExpired}
+        class:is-expiring-soon={isExpiringSoon}
+        title="Expires: {new Date(expiresAt).toLocaleString()}"
+      >
+        {timeRemaining}
+      </span>
+    </div>
+  </div>
+</Card>
+
+<style>
+  .ds-accord-inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    font-family: var(--font-sans);
+  }
+
+  .ds-accord-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+
+  .ds-accord-name {
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .ds-accord-grove {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    font-family: var(--font-mono);
+    flex-shrink: 0;
+  }
+
+  .ds-accord-domains {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+
+  .ds-accord-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: var(--space-2);
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .ds-accord-stat {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-1);
+  }
+
+  .ds-accord-stat-value {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text-primary);
+    font-family: var(--font-mono);
+  }
+
+  .ds-accord-stat-label {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+  }
+
+  .ds-accord-expiry {
+    font-size: var(--text-xs);
+    font-family: var(--font-mono);
+    color: var(--color-text-secondary);
+  }
+
+  .ds-accord-expiry.is-expiring-soon {
+    color: var(--color-warning);
+  }
+
+  .ds-accord-expiry.is-expired {
+    color: var(--color-error);
+  }
+</style>