@stephen-netu/design-system 0.1.0

package/src/u0-primitives/assay-badge/AssayBadge.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { AssayClearanceView } from '../../epistemic/types.js';
+
+  interface Props {
+    clearance: AssayClearanceView | null;
+    size?: 'sm' | 'md';
+    interactive?: boolean;
+    onclick?: () => void;
+    class?: string;
+  }
+
+  let {
+    clearance,
+    size = 'md',
+    interactive = false,
+    onclick,
+    class: className = '',
+  }: Props = $props();
+
+  // Derive display state from clearance
+  const state = $derived(
+    clearance === null ? 'pending' :
+    clearance.isDegraded ? 'degraded' :
+    clearance.gate === 'Cleared' ? 'cleared' : 'blocked'
+  );
+
+  const dotColor = $derived(
+    state === 'cleared'  ? 'var(--epistemic-cleared)' :
+    state === 'blocked'  ? 'var(--epistemic-blocked)' :
+    state === 'degraded' ? 'var(--epistemic-degraded)' :
+    /* pending */          'var(--epistemic-pending)'
+  );
+
+  const label = $derived(
+    state === 'cleared'  ? 'Cleared' :
+    state === 'blocked'  ? 'Blocked' :
+    state === 'degraded' ? 'Degraded' :
+    'Pending'
+  );
+
+  const title = $derived(
+    clearance === null ? 'ASSAY: Not yet evaluated' :
+    `ASSAY ${label} at ${clearance.checkpoint} — weighted: ${clearance.weightedSum.toFixed(2)}`
+  );
+
+  function handleClick() {
+    if (interactive && onclick) onclick();
+  }
+</script>
+
+<button
+  class="ds-assay-badge size-{size} state-{state} {className}"
+  class:interactive
+  {title}
+  onclick={handleClick}
+  type="button"
+  aria-label="ASSAY clearance: {label}"
+  tabindex={interactive ? 0 : -1}
+>
+  <span class="dot" style="background-color: {dotColor}; box-shadow: 0 0 4px {dotColor};"></span>
+  {#if size === 'md'}
+    <span class="label">{label}</span>
+  {/if}
+</button>
+
+<style>
+  .ds-assay-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-full);
+    border: 1px solid var(--border-subtle);
+    background: transparent;
+    cursor: default;
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    transition: background var(--transition-fast, 120ms), border-color var(--transition-fast, 120ms);
+  }
+
+  .ds-assay-badge.interactive {
+    cursor: pointer;
+  }
+
+  .ds-assay-badge.interactive:hover {
+    background: var(--color-bg-panel-elevated);
+    border-color: var(--border-hover);
+  }
+
+  .ds-assay-badge.size-sm {
+    padding: 2px;
+    border: none;
+    background: transparent;
+  }
+
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .size-sm .dot {
+    width: 6px;
+    height: 6px;
+  }
+
+  .label {
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+  }
+
+  /* State-specific label colors */
+  .state-cleared .label { color: var(--epistemic-cleared); }
+  .state-blocked .label  { color: var(--epistemic-blocked); }
+  .state-pending .label  { color: var(--epistemic-pending); }
+  .state-degraded .label { color: var(--epistemic-degraded); }
+</style>

package/src/u0-primitives/assay-badge/AssaySignalBar.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { AssaySignalView } from '../../epistemic/types.js';
+
+  interface Props {
+    signal: AssaySignalView;
+    class?: string;
+  }
+
+  let { signal, class: className = '' }: Props = $props();
+
+  const resultColor = $derived(
+    signal.result === 'Pass' ? 'var(--epistemic-cleared)' :
+    signal.result === 'Fail' ? 'var(--epistemic-blocked)' :
+    'var(--epistemic-degraded)'
+  );
+
+  const confidenceStr = $derived(
+    signal.confidence !== null ? `${Math.round(signal.confidence * 100)}%` : '—'
+  );
+</script>
+
+<div class="signal-bar {className}" class:hard-gate={signal.isHardGate}>
+  <span class="signal-indicator" style="color: {resultColor}">
+    {signal.isHardGate ? '■' : '□'}
+  </span>
+  <span class="signal-id">{signal.id}</span>
+  <span class="signal-result" style="color: {resultColor}">
+    {signal.result === 'Unavailable' ? 'unavail' : signal.result}
+  </span>
+  <span class="signal-confidence">{confidenceStr}</span>
+  {#if signal.result === 'Fail' && signal.reason}
+    <span class="signal-reason">{signal.reason}</span>
+  {/if}
+</div>
+
+<style>
+  .signal-bar {
+    display: grid;
+    grid-template-columns: 1.2rem 1fr auto auto;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) 0;
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+  }
+
+  .signal-bar:not(:last-child) {
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .signal-indicator {
+    font-size: var(--text-sm);
+    flex-shrink: 0;
+  }
+
+  .signal-id {
+    color: var(--color-text-primary);
+    font-size: var(--text-xs);
+  }
+
+  .signal-result {
+    font-weight: 600;
+    font-size: var(--text-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .signal-confidence {
+    color: var(--color-text-tertiary);
+    font-size: var(--text-xs);
+    min-width: 3rem;
+    text-align: right;
+  }
+
+  .signal-reason {
+    grid-column: 2 / -1;
+    color: var(--epistemic-blocked);
+    font-size: var(--text-xs);
+    font-style: italic;
+    padding-top: var(--space-1);
+  }
+</style>

package/src/u0-primitives/assay-badge/index.ts

@@ -0,0 +1,2 @@
+export { default as AssayBadge } from './AssayBadge.svelte';
+export { default as AssaySignalBar } from './AssaySignalBar.svelte';

package/src/u0-primitives/avatar/Avatar.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    src?: string;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    status?: 'online' | 'offline' | 'away' | 'busy' | 'typing' | null;
+    class?: string;
+  }
+
+  let {
+    src,
+    name = '',
+    size = 'md',
+    status = null,
+    class: className = ''
+  }: Props = $props();
+
+  let hasError = $state(false);
+
+  let fallbackInitials = $derived(
+    name
+      .split(' ')
+      .map(n => n[0])
+      .slice(0, 2)
+      .join('')
+      .toUpperCase()
+  );
+
+  function handleError() {
+    hasError = true;
+  }
+</script>
+
+<div class="ds-avatar-wrapper size-{size} {className}">
+  <div class="ds-avatar-inner" aria-label={name}>
+    {#if src && !hasError}
+      <img 
+        class="ds-avatar-image" 
+        {src} 
+        alt={name} 
+        onerror={handleError}
+      />
+    {:else}
+      <div class="ds-avatar-fallback">
+        <span class="ds-avatar-initials">{fallbackInitials || '?'}</span>
+      </div>
+    {/if}
+  </div>
+
+  {#if status}
+    <div class="ds-avatar-status status-{status}" title={status}>
+      {#if status === 'typing'}
+        <span class="typing-dot"></span>
+        <span class="typing-dot"></span>
+        <span class="typing-dot"></span>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ds-avatar-wrapper {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full);
+  }
+
+  .ds-avatar-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    background: var(--color-bg-panel-elevated);
+    border: 1px solid var(--border-subtle);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .ds-avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .ds-avatar-fallback {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--color-bg-panel-elevated), var(--color-bg-panel));
+    color: var(--color-text-secondary);
+  }
+
+  .ds-avatar-initials {
+    font-family: var(--font-sans);
+    font-weight: 600;
+  }
+
+  /* --- Sizes --- */
+  .size-sm { 
+    width: 1.5rem; 
+    height: 1.5rem; 
+  }
+  .size-sm .ds-avatar-initials { font-size: var(--text-xs); }
+
+  .size-md { 
+    width: 2.25rem; 
+    height: 2.25rem; 
+  }
+  .size-md .ds-avatar-initials { font-size: var(--text-sm); }
+
+  .size-lg { 
+    width: 3rem; 
+    height: 3rem; 
+  }
+  .size-lg .ds-avatar-initials { font-size: var(--text-lg); }
+
+  .size-xl {
+    width: 4rem;
+    height: 4rem;
+  }
+  .size-xl .ds-avatar-initials { font-size: var(--text-xl); }
+
+  /* --- Status Dot --- */
+  .ds-avatar-status {
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    width: 25%;
+    height: 25%;
+    min-width: 10px;
+    min-height: 10px;
+    border-radius: var(--radius-full);
+    background-color: var(--color-offline);
+    border: 2px solid var(--color-bg-app); /* Cuts a ring out of the avatar */
+    z-index: 10;
+  }
+
+  .status-online { background-color: var(--color-online); box-shadow: 0 0 6px rgba(74, 222, 128, 0.4); }
+  .status-away { background-color: var(--color-away); }
+  .status-busy { background-color: var(--color-busy); }
+  .status-offline { background-color: var(--color-offline); }
+  
+  .status-typing { 
+    background-color: var(--color-typing);
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    width: auto;
+    padding: 0 4px;
+    min-width: 16px;
+    border-radius: var(--radius-full);
+    box-shadow: var(--shadow-glow);
+  }
+
+  .typing-dot {
+    width: 3px;
+    height: 3px;
+    background-color: #111;
+    border-radius: var(--radius-full);
+    animation: typing-bounce 1.4s infinite ease-in-out both;
+  }
+
+  .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+  .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+
+  @keyframes typing-bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1); }
+  }
+</style>

package/src/u0-primitives/badge/Badge.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'status' | 'count' | 'dot' | 'outline';
+    color?: 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'status',
+    color = 'accent',
+    size = 'md',
+    class: className = '',
+    children
+  }: Props = $props();
+</script>
+
+<div 
+  class="ds-badge variant-{variant} color-{color} size-{size} {className}"
+  role="status"
+>
+  {#if variant === 'dot'}
+    <!-- Empty dot badge -->
+  {:else if children}
+    <span class="ds-badge-content">
+      {@render children()}
+    </span>
+  {/if}
+</div>
+
+<style>
+  .ds-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-sans);
+    font-weight: 600;
+    white-space: nowrap;
+    border-radius: var(--radius-full);
+    transition: all var(--transition-fast);
+  }
+
+  /* --- Variants --- */
+  
+  /* Status (Subtle background, colored text) */
+  .variant-status {
+    border: 1px solid transparent;
+  }
+  
+  .variant-status.color-accent {
+    background: var(--color-accent-subtle);
+    color: var(--color-accent-hover);
+    border-color: rgba(184, 115, 51, 0.2);
+  }
+
+  .variant-status.color-success {
+    background: color-mix(in srgb, var(--color-success) 15%, transparent);
+    color: color-mix(in srgb, var(--color-success) 70%, var(--color-text-primary));
+    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
+  }
+
+  .variant-status.color-warning {
+    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
+    color: color-mix(in srgb, var(--color-warning) 70%, var(--color-text-primary));
+    border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
+  }
+
+  .variant-status.color-error {
+    background: color-mix(in srgb, var(--color-error) 15%, transparent);
+    color: color-mix(in srgb, var(--color-error) 70%, var(--color-text-primary));
+    border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
+  }
+
+  .variant-status.color-info {
+    background: color-mix(in srgb, var(--color-info) 15%, transparent);
+    color: color-mix(in srgb, var(--color-info) 70%, var(--color-text-primary));
+    border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
+  }
+
+  .variant-status.color-neutral {
+    background: var(--color-bg-panel-elevated);
+    color: var(--color-text-secondary);
+    border-color: var(--border-default);
+  }
+
+  /* Count (Solid background, white/dark text) */
+  .variant-count {
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  }
+
+  .variant-count.color-accent { background: var(--color-accent); color: #111; }
+  .variant-count.color-success { background: var(--color-success); color: #fff; }
+  .variant-count.color-warning { background: var(--color-warning); color: #111; }
+  .variant-count.color-error { background: var(--color-error); color: #fff; }
+  .variant-count.color-info { background: var(--color-info); color: #fff; }
+  .variant-count.color-neutral { background: var(--color-text-tertiary); color: #fff; }
+
+  /* Outline */
+  .variant-outline {
+    background: transparent;
+    border: 1px solid currentColor;
+  }
+
+  .variant-outline.color-accent { color: var(--color-accent-hover); }
+  .variant-outline.color-success { color: var(--color-success); }
+  .variant-outline.color-warning { color: var(--color-warning); }
+  .variant-outline.color-error { color: var(--color-error); }
+  .variant-outline.color-info { color: var(--color-info); }
+  .variant-outline.color-neutral { color: var(--color-text-secondary); }
+
+  /* Dot (Small pulsing indicator) */
+  .variant-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    padding: 0;
+    border-radius: var(--radius-full);
+    box-shadow: 0 0 0 2px var(--color-bg-app);
+  }
+
+  .variant-dot.color-accent { background: var(--color-accent); }
+  .variant-dot.color-success { background: var(--color-success); }
+  .variant-dot.color-warning { background: var(--color-warning); }
+  .variant-dot.color-error { background: var(--color-error); }
+  .variant-dot.color-info { background: var(--color-info); }
+  .variant-dot.color-neutral { background: var(--color-text-tertiary); }
+
+  /* --- Sizes --- */
+  
+  .size-sm:not(.variant-dot) {
+    padding: 0.1rem 0.35rem;
+    font-size: 0.65rem;
+    line-height: 1;
+  }
+
+  .size-md:not(.variant-dot) {
+    padding: 0.15rem 0.5rem;
+    font-size: var(--text-xs);
+    line-height: 1.2;
+  }
+
+  .size-lg:not(.variant-dot) {
+    padding: 0.25rem 0.75rem;
+    font-size: var(--text-sm);
+    line-height: 1.4;
+  }
+</style>