@stephen-netu/design-system 0.1.0 → 0.2.1

package/{src → dist}/l0-layout/epistemic/TrustView.svelte

@@ -1,9 +1,5 @@
 <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;
@@ -68,14 +64,14 @@
         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" />
+          <span class="placeholder-gauge">S{item.allay.stage}</span>
+           <span class="placeholder-badge">{item.assay?.gate ?? '—'}</span>
         </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}
+        {#if item.expert}<span class="placeholder-badge-sm"></span>{/if}
       </button>
     {/each}
 
@@ -163,7 +159,7 @@
   .item-info {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: var(--space-05);
     flex: 1;
     min-width: 0;
   }

package/dist/l0-layout/epistemic/TrustView.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { KnowledgeEpistemicDetail } from '../../epistemic/types.js';
+interface Props {
+    knowledge: KnowledgeEpistemicDetail[];
+    onitemclick?: (item: KnowledgeEpistemicDetail) => void;
+    class?: string;
+}
+declare const TrustView: import("svelte").Component<Props, {}, "">;
+type TrustView = ReturnType<typeof TrustView>;
+export default TrustView;
+//# sourceMappingURL=TrustView.svelte.d.ts.map

package/dist/l0-layout/epistemic/TrustView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrustView.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/epistemic/TrustView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAEvE,UAAU,KAAK;IACb,SAAS,EAAE,wBAAwB,EAAE,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuEH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/l0-layout/epistemic/index.d.ts

@@ -0,0 +1,8 @@
+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';
+//# sourceMappingURL=index.d.ts.map

package/dist/l0-layout/epistemic/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/epistemic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/l0-layout/grant/GrantCard.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import GrantStatusBadge from '../../u0-primitives/grant-badge/GrantStatusBadge.svelte';
+
+  interface Props {
+    title: string;
+    funder: string;
+    category: string;
+    status: string;
+    amountMax?: number | null;
+    deadline?: number | null;
+    description?: string;
+    selected?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    footer?: Snippet;
+  }
+
+  let {
+    title,
+    funder,
+    category,
+    status,
+    amountMax,
+    deadline,
+    description,
+    selected = false,
+    class: className = '',
+    onclick,
+    footer,
+  }: Props = $props();
+
+  function formatAmount(amount: number | null | undefined): string {
+    if (amount == null) return '';
+    if (amount >= 1_000_000) return `$${(amount / 1_000_000).toFixed(1)}M`;
+    if (amount >= 1_000) return `$${(amount / 1_000).toFixed(0)}K`;
+    return `$${amount}`;
+  }
+
+  function formatDeadline(ts: number | null | undefined): string {
+    if (ts == null) return '';
+    const d = new Date(ts);
+    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+  }
+
+  let isInteractive = $derived(!!onclick);
+  let cardClasses = $derived(
+    `ds-grant-card ${className}${isInteractive ? ' is-interactive' : ''}${selected ? ' is-selected' : ''}`
+  );
+</script>
+
+<div
+  class={cardClasses}
+  role={isInteractive ? 'button' : 'region'}
+  tabindex={isInteractive ? 0 : undefined}
+  onclick={onclick}
+  onkeydown={isInteractive ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onclick?.(new MouseEvent('click')); } } : undefined}
+  aria-pressed={isInteractive ? selected : undefined}
+>
+  <div class="ds-grant-card-header">
+    <h3 class="ds-grant-card-title" title={title}>{title}</h3>
+    <GrantStatusBadge {status} size="sm" />
+  </div>
+
+  <div class="ds-grant-card-meta">
+    <span class="ds-grant-card-funder">{funder}</span>
+    <span class="ds-grant-card-category">{category}</span>
+  </div>
+
+  {#if description}
+    <p class="ds-grant-card-description">{description}</p>
+  {/if}
+
+  <div class="ds-grant-card-footer">
+    {#if amountMax}
+      <span class="ds-grant-card-amount">{formatAmount(amountMax)}</span>
+    {/if}
+    {#if deadline}
+      <span class="ds-grant-card-deadline">Due {formatDeadline(deadline)}</span>
+    {/if}
+    {#if footer}
+      {@render footer()}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .ds-grant-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-4);
+    padding-top: calc(var(--space-4) - 3px);
+    border: 1px solid var(--border-default);
+    border-left: 3px solid transparent;
+    background: var(--color-bg-panel);
+    color: var(--color-text-primary);
+    transition: all var(--transition-fast);
+    font-family: var(--font-sans);
+  }
+
+  .ds-grant-card:hover:not(.is-selected) {
+    border-left-color: var(--color-accent);
+    border-top-color: var(--color-accent-muted);
+    border-right-color: var(--color-accent-muted);
+    border-bottom-color: var(--color-accent-muted);
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .ds-grant-card.is-selected {
+    border-color: var(--color-accent);
+    border-left-width: 3px;
+    background: var(--color-bg-panel-elevated);
+    box-shadow: inset 0 0 0 1px var(--color-accent-subtle);
+  }
+
+  .ds-grant-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  .ds-grant-card-title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    margin: 0;
+    line-height: 1.3;
+    flex: 1;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .ds-grant-card-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+  }
+
+  .ds-grant-card-funder {
+    font-weight: 500;
+  }
+
+  .ds-grant-card-category {
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .ds-grant-card-description {
+    font-size: var(--text-sm);
+    color: var(--color-text-secondary);
+    margin: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.4;
+  }
+
+  .ds-grant-card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: var(--text-xs);
+  }
+
+  .ds-grant-card-amount {
+    font-weight: 700;
+    color: var(--color-accent);
+  }
+
+  .ds-grant-card-deadline {
+    color: var(--color-text-muted);
+  }
+</style>

package/dist/l0-layout/grant/GrantCard.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    funder: string;
+    category: string;
+    status: string;
+    amountMax?: number | null;
+    deadline?: number | null;
+    description?: string;
+    selected?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    footer?: Snippet;
+}
+declare const GrantCard: import("svelte").Component<Props, {}, "">;
+type GrantCard = ReturnType<typeof GrantCard>;
+export default GrantCard;
+//# sourceMappingURL=GrantCard.svelte.d.ts.map

package/dist/l0-layout/grant/GrantCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrantCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/grant/GrantCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAuEH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/l0-layout/grant/GrantDraftEditor.svelte

@@ -0,0 +1,413 @@
+<script lang="ts">
+  import TextArea from '../../f0-forms/textarea/TextArea.svelte';
+
+  interface DraftSection {
+    name: string;
+    content: string;
+    word_count: number;
+    complete: boolean;
+  }
+
+  interface ReviewerNote {
+    author: string;
+    section: string | null;
+    content: string;
+    resolved: boolean;
+    created_at: number;
+  }
+
+  interface Props {
+    sections: DraftSection[];
+    reviewerNotes: ReviewerNote[];
+    status: string;
+    loading?: boolean;
+    class?: string;
+    onSectionEdit?: (sectionName: string, content: string) => void;
+    onAddNote?: (section: string | null, content: string) => void;
+    onToggleComplete?: (sectionName: string) => void;
+    onStatusChange?: (status: string) => void;
+  }
+
+  let {
+    sections,
+    reviewerNotes,
+    status,
+    loading = false,
+    class: className = '',
+    onSectionEdit,
+    onAddNote,
+    onToggleComplete,
+    onStatusChange,
+  }: Props = $props();
+
+  let editingSection = $state<string | null>(null);
+  let editContent = $state('');
+  let noteSection = $state('');
+  let noteContent = $state('');
+
+  let progress = $derived(() => {
+    if (!sections.length) return 0;
+    const done = sections.filter(s => s.complete).length;
+    return Math.round((done / sections.length) * 100);
+  });
+
+  function startEdit(section: DraftSection) {
+    editingSection = section.name;
+    editContent = section.content;
+  }
+
+  function cancelEdit() {
+    editingSection = null;
+    editContent = '';
+  }
+
+  function saveEdit() {
+    if (editingSection && onSectionEdit) {
+      onSectionEdit(editingSection, editContent);
+    }
+    editingSection = null;
+    editContent = '';
+  }
+
+  function submitNote() {
+    if (onAddNote && noteContent.trim()) {
+      onAddNote(noteSection || null, noteContent);
+      noteContent = '';
+      noteSection = '';
+    }
+  }
+
+  function formatDate(ts: number): string {
+    if (!ts) return '';
+    return new Date(ts).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  }
+</script>
+
+<div class="ds-draft-editor {className}">
+  <div class="ds-draft-editor-progress">
+    <div class="ds-draft-progress-bar">
+      <div class="ds-draft-progress-fill" style="width: {progress()}%"></div>
+    </div>
+    <span class="ds-draft-progress-label">{progress()}% complete</span>
+  </div>
+
+  <div class="ds-draft-editor-sections">
+    {#each sections as section (section.name)}
+      <div class="ds-draft-section">
+        <div class="ds-draft-section-header">
+          <h4 class="ds-draft-section-title">
+            {section.name}
+            {#if section.complete}
+              <span class="ds-draft-section-check" title="Complete">✓</span>
+            {/if}
+          </h4>
+          <span class="ds-draft-section-words">{section.word_count} words</span>
+        </div>
+
+        {#if editingSection === section.name}
+          <TextArea
+            bind:value={editContent}
+            rows={8}
+            class="ds-draft-section-editor"
+          />
+          <div class="ds-draft-section-actions">
+            <button class="ds-draft-btn-secondary" class:disabled={loading} onclick={cancelEdit}>Cancel</button>
+            <button class="ds-draft-btn-primary" class:disabled={loading} onclick={saveEdit}>
+              {loading ? 'Saving…' : 'Save'}
+            </button>
+          </div>
+        {:else}
+          <p class="ds-draft-section-preview">
+            {section.content || 'No content yet.'}
+          </p>
+          {#if onSectionEdit}
+            <button
+              class="ds-draft-btn-secondary"
+              onclick={() => startEdit(section)}
+            >
+              Edit
+            </button>
+          {/if}
+          {#if onToggleComplete}
+            <button
+              class="ds-draft-btn-secondary"
+              onclick={() => onToggleComplete(section.name)}
+            >
+              {section.complete ? 'Mark Incomplete' : 'Mark Complete'}
+            </button>
+          {/if}
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  <div class="ds-draft-editor-notes">
+    <h3 class="ds-draft-notes-header">Reviewer Notes</h3>
+
+    {#if reviewerNotes.length}
+      {#each reviewerNotes as note (note.created_at)}
+        <div class="ds-draft-note" class:is-resolved={note.resolved}>
+          <div class="ds-draft-note-meta">
+            <span class="ds-draft-note-author">{note.author}</span>
+            {#if note.section}
+              <span class="ds-draft-note-target">on {note.section}</span>
+            {/if}
+            <span class="ds-draft-note-date">{formatDate(note.created_at)}</span>
+            {#if note.resolved}
+              <span class="ds-draft-note-resolved">Resolved</span>
+            {/if}
+          </div>
+          <p class="ds-draft-note-content">{note.content}</p>
+        </div>
+      {/each}
+    {:else}
+      <p class="ds-draft-notes-empty">No reviewer notes yet.</p>
+    {/if}
+
+    {#if onAddNote}
+      <div class="ds-draft-add-note">
+        <h4 class="ds-draft-add-note-title">Add Note</h4>
+        <input
+          type="text"
+          class="ds-draft-note-input"
+          placeholder="Section (optional)…"
+          bind:value={noteSection}
+        />
+        <TextArea
+          bind:value={noteContent}
+          rows={3}
+          placeholder="Write a note…"
+        />
+        <button
+          class="ds-draft-btn-primary"
+          class:disabled={loading || !noteContent.trim()}
+          onclick={submitNote}
+        >
+          Add Note
+        </button>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .ds-draft-editor {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    max-width: 720px;
+  }
+
+  .ds-draft-editor-progress {
+    position: relative;
+  }
+
+  .ds-draft-progress-bar {
+    height: 6px;
+    background: var(--color-bg-panel-elevated);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+
+  .ds-draft-progress-fill {
+    height: 100%;
+    background: var(--color-accent);
+    border-radius: 3px;
+    transition: width var(--transition-normal);
+  }
+
+  .ds-draft-progress-label {
+    position: absolute;
+    right: 0;
+    top: -18px;
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+  }
+
+  .ds-draft-editor-sections {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .ds-draft-section {
+    padding: var(--space-4);
+    background: var(--color-bg-panel-elevated);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+  }
+
+  .ds-draft-section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-2);
+  }
+
+  .ds-draft-section-title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  .ds-draft-section-check {
+    color: var(--color-success);
+    font-weight: 700;
+  }
+
+  .ds-draft-section-words {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+  }
+
+  .ds-draft-section-preview {
+    font-size: var(--text-sm);
+    color: var(--color-text-secondary);
+    margin: 0 0 var(--space-2);
+    white-space: pre-wrap;
+    line-height: 1.4;
+    max-height: 80px;
+    overflow: hidden;
+  }
+
+  .ds-draft-section-actions {
+    display: flex;
+    gap: var(--space-2);
+    justify-content: flex-end;
+  }
+
+  .ds-draft-btn-primary {
+    background: var(--color-accent);
+    border: none;
+    border-radius: var(--radius-sm);
+    color: #111;
+    cursor: pointer;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    padding: 5px 12px;
+  }
+
+  .ds-draft-btn-primary.disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .ds-draft-btn-secondary {
+    background: transparent;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-primary);
+    cursor: pointer;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    padding: 5px 10px;
+    margin-right: var(--space-1);
+  }
+
+  .ds-draft-btn-secondary:hover {
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .ds-draft-btn-secondary.disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .ds-draft-editor-notes {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .ds-draft-notes-header {
+    font-size: var(--text-base);
+    font-weight: 600;
+    color: var(--color-accent);
+    margin: 0;
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--border-default);
+  }
+
+  .ds-draft-note {
+    padding: var(--space-3) var(--space-4);
+    background: var(--color-bg-panel-elevated);
+    border-left: 3px solid var(--color-warning);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  }
+
+  .ds-draft-note.is-resolved {
+    border-left-color: var(--color-success);
+    opacity: 0.7;
+  }
+
+  .ds-draft-note-meta {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+    margin-bottom: var(--space-1);
+    font-size: var(--text-xs);
+  }
+
+  .ds-draft-note-author {
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  .ds-draft-note-target {
+    color: var(--color-accent);
+  }
+
+  .ds-draft-note-date {
+    color: var(--color-text-muted);
+    margin-left: auto;
+  }
+
+  .ds-draft-note-resolved {
+    color: var(--color-success);
+    font-weight: 600;
+  }
+
+  .ds-draft-note-content {
+    font-size: var(--text-sm);
+    margin: 0;
+    white-space: pre-wrap;
+    color: var(--color-text-secondary);
+  }
+
+  .ds-draft-notes-empty {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    font-style: italic;
+  }
+
+  .ds-draft-add-note {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--border-default);
+  }
+
+  .ds-draft-add-note-title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .ds-draft-note-input {
+    background: var(--color-bg-panel-elevated);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-primary);
+    font-size: var(--text-sm);
+    padding: var(--space-2) var(--space-3);
+    width: 100%;
+  }
+</style>