@stephen-netu/design-system 0.1.0

package/src/epistemic/utils.ts

@@ -0,0 +1,32 @@
+// @kos/design-system — Epistemic shared utilities
+
+import type { ProvenanceChainNode } from './types.js';
+
+/**
+ * Returns a human-readable label for a provenance chain node type.
+ * Shared by ProvenanceChain and KnowledgeDetailPanel to avoid duplication.
+ */
+export function getProvenanceNodeLabel(node: ProvenanceChainNode): string {
+  switch (node.type) {
+    case 'human_draft': return 'Human drafted';
+    case 'file_source': return `File: ${(node.detail as { filePath: string }).filePath}`;
+    case 'web_source': return `Web: ${(node.detail as { url: string }).url}`;
+    case 'assay_evaluation': {
+      const d = node.detail as { checkpoint: string; gate: string; weightedSum: number };
+      return `ASSAY ${d.checkpoint} — ${d.gate} (${(d.weightedSum * 100).toFixed(0)}%)`;
+    }
+    case 'sigchain_witness': {
+      const d = node.detail as { witnessRef: string; assayConfidence: number };
+      return `Witnessed on sigchain — ${d.witnessRef}`;
+    }
+    case 'agent_research': return 'Agent research step';
+    case 'accord_replication': return 'Replicated via Accord';
+    case 'access_epoch': {
+      const d = node.detail as { accessCount: number };
+      return `${d.accessCount} accesses consolidated`;
+    }
+    case 'knowledge_merge': return 'Knowledge merge';
+    case 'supersession': return 'Supersedes prior entry';
+    default: return (node as ProvenanceChainNode).type;
+  }
+}

package/src/f0-forms/checkbox/Checkbox.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  interface Props {
+    checked?: boolean;
+    label?: string;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    class?: string;
+    id?: string;
+    name?: string;
+    onchange?: (e: Event) => void;
+  }
+
+  let {
+    checked = $bindable(false),
+    label = '',
+    disabled = false,
+    indeterminate = false,
+    class: className = '',
+    id,
+    name,
+    onchange
+  }: Props = $props();
+
+  let inputRef = $state<HTMLInputElement | null>(null);
+
+  $effect(() => {
+    if (inputRef) {
+      inputRef.indeterminate = indeterminate;
+    }
+  });
+
+
+</script>
+
+<label
+  class="ds-checkbox {className}"
+  class:is-disabled={disabled}
+  class:is-checked={checked}
+  class:is-indeterminate={indeterminate}
+>
+  <input
+    bind:this={inputRef}
+    bind:checked
+    type="checkbox"
+    {id}
+    {name}
+    {disabled}
+    {onchange}
+    class="ds-checkbox-native"
+  />
+
+  <div
+    class="ds-checkbox-box"
+    role="presentation"
+  >
+    {#if checked && !indeterminate}
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="ds-checkbox-icon">
+        <polyline points="3.5 8.5 6.5 11.5 12.5 4.5" />
+      </svg>
+    {:else if indeterminate}
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" class="ds-checkbox-icon">
+        <line x1="4" y1="8" x2="12" y2="8" />
+      </svg>
+    {/if}
+  </div>
+
+  {#if label}
+    <span class="ds-checkbox-label">{label}</span>
+  {/if}
+</label>
+
+<style>
+  .ds-checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    color: var(--color-text-primary);
+  }
+
+  .ds-checkbox.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ds-checkbox-native {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .ds-checkbox-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: 1.5px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    background: var(--color-bg-panel);
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+  }
+
+  .ds-checkbox:hover:not(.is-disabled) .ds-checkbox-box {
+    border-color: var(--border-hover);
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .ds-checkbox.is-checked .ds-checkbox-box,
+  .ds-checkbox.is-indeterminate .ds-checkbox-box {
+    background: var(--color-accent, #b87333);
+    border-color: var(--color-accent, #b87333);
+  }
+
+  .ds-checkbox.is-checked:hover:not(.is-disabled) .ds-checkbox-box,
+  .ds-checkbox.is-indeterminate:hover:not(.is-disabled) .ds-checkbox-box {
+    background: var(--color-accent-hover, #c4813d);
+    border-color: var(--color-accent-hover, #c4813d);
+  }
+
+  .ds-checkbox-native:focus-visible + .ds-checkbox-box {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .ds-checkbox-icon {
+    width: 12px;
+    height: 12px;
+    color: var(--color-bg-app, #1a1a1a);
+    animation: ds-check-in 150ms ease-out;
+  }
+
+  .ds-checkbox-label {
+    line-height: 1.4;
+  }
+
+  @keyframes ds-check-in {
+    from {
+      transform: scale(0.5);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+</style>

package/src/f0-forms/field/FormField.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  interface Props {
+    id: string; // Required for a11y linking
+    label: string | Snippet;
+    error?: string;
+    helper?: string;
+    class?: string;
+    children: Snippet; // The input component goes here
+  }
+
+  let {
+    id,
+    label,
+    error,
+    helper,
+    class: className = '',
+    children
+  }: Props = $props();
+</script>
+
+<div class="ds-form-field {className}">
+  <div class="ds-form-label-row">
+    <label for={id} class="ds-form-label">
+      {#if typeof label === 'string'}
+        {label}
+      {:else}
+        {@render label()}
+      {/if}
+      
+      {#if error}
+        <span class="ds-form-error-text" role="alert">{error}</span>
+      {/if}
+    </label>
+  </div>
+
+  <div class="ds-form-input-container">
+    {@render children()}
+  </div>
+
+  {#if helper && !error}
+    <div class="ds-form-helper-text" id="{id}-helper">
+      {helper}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ds-form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    width: 100%;
+    font-family: var(--font-sans);
+  }
+
+  .ds-form-label-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+
+  .ds-form-label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-3);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-text-primary);
+    cursor: pointer;
+  }
+
+  .ds-form-error-text {
+    font-size: var(--text-xs);
+    font-weight: 400;
+    color: var(--color-error);
+    animation: ds-slide-in-up var(--transition-fast) ease-out;
+  }
+
+  .ds-form-input-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .ds-form-helper-text {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    line-height: 1.4;
+  }
+</style>

package/src/f0-forms/index.ts

@@ -0,0 +1,11 @@
+// F0 Forms — Form primitives and validation
+
+export { default as FormField } from './field/FormField.svelte';
+export { default as SearchBar } from './search/SearchBar.svelte';
+export { default as TextArea } from './textarea/TextArea.svelte';
+export { default as Checkbox } from './checkbox/Checkbox.svelte';
+export { default as RadioGroup } from './radio/RadioGroup.svelte';
+export { default as Select } from './select/Select.svelte';
+export { default as FormToggle } from './toggle/FormToggle.svelte';
+export { required, minLength, maxLength, pattern, compose } from './validation/validate';
+export type { Validator } from './validation/validate';

package/src/f0-forms/radio/RadioGroup.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  interface RadioOption {
+    value: string;
+    label: string;
+  }
+
+  interface Props {
+    options: RadioOption[];
+    selected?: string;
+    name: string;
+    label?: string;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    options,
+    selected = $bindable(''),
+    name,
+    label,
+    disabled = false,
+    orientation = 'vertical',
+    class: className = '',
+    onchange
+  }: Props = $props();
+
+  function handleSelect(value: string) {
+    if (disabled) return;
+    selected = value;
+    onchange?.(value);
+  }
+
+  function handleKeydown(e: KeyboardEvent, index: number) {
+    const isVertical = orientation === 'vertical';
+    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+
+    let newIndex = index;
+    if (e.key === nextKey) {
+      e.preventDefault();
+      newIndex = (index + 1) % options.length;
+    } else if (e.key === prevKey) {
+      e.preventDefault();
+      newIndex = (index - 1 + options.length) % options.length;
+    } else {
+      return;
+    }
+
+    handleSelect(options[newIndex].value);
+    // Focus the new radio button
+    const group = (e.currentTarget as HTMLElement).closest('.ds-radio-group');
+    const radios = group?.querySelectorAll<HTMLElement>('.ds-radio-input');
+    radios?.[newIndex]?.focus();
+  }
+</script>
+
+<div
+  class="ds-radio-group {className}"
+  class:is-horizontal={orientation === 'horizontal'}
+  class:is-disabled={disabled}
+  role="radiogroup"
+  aria-label={label}
+>
+  {#each options as option, i}
+    <label
+      class="ds-radio-option"
+      class:is-selected={selected === option.value}
+    >
+      <input
+        type="radio"
+        {name}
+        value={option.value}
+        checked={selected === option.value}
+        {disabled}
+        onchange={() => handleSelect(option.value)}
+        onkeydown={(e) => handleKeydown(e, i)}
+        class="ds-radio-input"
+        tabindex={selected === option.value || (!selected && i === 0) ? 0 : -1}
+      />
+
+      <div class="ds-radio-dot" role="presentation">
+        {#if selected === option.value}
+          <div class="ds-radio-dot-inner"></div>
+        {/if}
+      </div>
+
+      <span class="ds-radio-label">{option.label}</span>
+    </label>
+  {/each}
+</div>
+
+<style>
+  .ds-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    font-family: var(--font-sans);
+  }
+
+  .ds-radio-group.is-horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+  }
+
+  .ds-radio-group.is-disabled {
+    opacity: 0.5;
+  }
+
+  .ds-radio-option {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+    font-size: var(--text-sm);
+    color: var(--color-text-primary);
+  }
+
+  .ds-radio-group.is-disabled .ds-radio-option {
+    cursor: not-allowed;
+  }
+
+  .ds-radio-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .ds-radio-dot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: 1.5px solid var(--border-default);
+    border-radius: 50%;
+    background: var(--color-bg-panel);
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+  }
+
+  .ds-radio-option:hover:not(:has(:disabled)) .ds-radio-dot {
+    border-color: var(--border-hover);
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .ds-radio-option.is-selected .ds-radio-dot {
+    border-color: var(--color-accent, #b87333);
+  }
+
+  .ds-radio-option.is-selected:hover:not(:has(:disabled)) .ds-radio-dot {
+    border-color: var(--color-accent-hover, #c4813d);
+  }
+
+  .ds-radio-input:focus-visible + .ds-radio-dot {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .ds-radio-dot-inner {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-accent, #b87333);
+    animation: ds-radio-in 150ms ease-out;
+  }
+
+  .ds-radio-label {
+    line-height: 1.4;
+  }
+
+  @keyframes ds-radio-in {
+    from {
+      transform: scale(0);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+</style>

package/src/f0-forms/search/SearchBar.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { Search } from '@lucide/svelte';
+  import Input from '../../u0-primitives/input/Input.svelte';
+  
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    shortcut?: string;
+    class?: string;
+    disabled?: boolean;
+    onsearch?: (value: string) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = 'Search...',
+    shortcut = '⌘K',
+    class: className = '',
+    disabled = false,
+    onsearch
+  }: Props = $props();
+
+  let inputRef = $state<HTMLElement | null>(null);
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      onsearch?.(value);
+    }
+  }
+
+  // Handle global shortcut to focus
+  function handleWindowKeydown(e: KeyboardEvent) {
+    if (disabled) return;
+    
+    // Check for Cmd/Ctrl + K (or whatever the shortcut implies)
+    // This is a simplified check; in a real app you'd parse `shortcut`
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+      e.preventDefault();
+      const inputEl = inputRef?.querySelector('input');
+      inputEl?.focus();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleWindowKeydown} />
+
+<div class="ds-searchbar {className}" bind:this={inputRef}>
+  <Input
+    type="search"
+    bind:value
+    {placeholder}
+    {disabled}
+    class="ds-search-input"
+  >
+    {#snippet iconLeading()}
+      <Search size={16} />
+    {/snippet}
+    
+    {#snippet iconTrailing()}
+      {#if shortcut && !value}
+        <div class="ds-search-shortcut">
+          <kbd>{shortcut}</kbd>
+        </div>
+      {/if}
+    {/snippet}
+  </Input>
+</div>
+
+<style>
+  .ds-searchbar {
+    position: relative;
+    width: 100%;
+    max-width: 400px; /* Sensible default */
+  }
+
+  /* Make the input perfectly round the edges for a distinct search look */
+  :global(.ds-search-input.ds-input-wrapper) {
+    border-radius: var(--radius-full);
+    background: var(--color-bg-app); /* Deep integration look by default */
+  }
+
+  .ds-search-shortcut {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ds-search-shortcut kbd {
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    color: var(--color-text-muted);
+    background: var(--color-bg-panel);
+    border: 1px solid var(--border-subtle);
+    padding: 2px 6px;
+    border-radius: var(--radius-sm, 4px);
+    pointer-events: none;
+    user-select: none;
+  }
+</style>