@sprig-and-prose/sprig-ui 0.1.0

package/src/lib/components/Prose.svelte

@@ -0,0 +1,260 @@
+<script>
+  import { describeRenderMode } from '../stores/describeRenderMode.js';
+
+  /** @type {import('../data/universeStore.js').TextBlock | { raw?:string, normalized?:string } | undefined} */
+  export let textBlock;
+
+  /**
+   * Parse text into paragraphs (plain mode)
+   */
+  const toParagraphs = (s) => {
+    if (!s) return [];
+    // Split on blank lines; preserve paragraphs.
+    const parts = s.split(/\n\s*\n/g);
+    return parts.map((p) =>
+      p
+        .split('\n')          // soft breaks
+        .map((x) => x.trim())
+        .filter(Boolean)
+        .join(' ')
+    ).filter(Boolean);
+  };
+
+  /**
+   * Parse text into structured blocks (lists mode)
+   * Returns array of { type: 'paragraph' | 'unordered-list' | 'ordered-list', content: string | string[] }
+   */
+  const parseMarkdownLite = (s) => {
+    if (!s) return [];
+    
+    // Split by blank lines to get blocks
+    const blocks = s.split(/\n\s*\n/g).filter(block => block.trim());
+    const result = [];
+    
+    const unorderedPattern = /^[-—*]\s+/;
+    const orderedPattern = /^\d+\.\s+/;
+    
+    for (const block of blocks) {
+      const lines = block.split('\n').map(line => line.trim()).filter(Boolean);
+      if (lines.length === 0) continue;
+      
+      // Find where list items start (if any)
+      let unorderedStart = -1;
+      let orderedStart = -1;
+      
+      for (let i = 0; i < lines.length; i++) {
+        if (unorderedStart === -1 && unorderedPattern.test(lines[i])) {
+          unorderedStart = i;
+        }
+        if (orderedStart === -1 && orderedPattern.test(lines[i])) {
+          orderedStart = i;
+        }
+      }
+      
+      // Handle unordered list
+      if (unorderedStart >= 0 && (orderedStart === -1 || unorderedStart < orderedStart)) {
+        // Extract leading paragraph text (if any)
+        if (unorderedStart > 0) {
+          const leadingText = lines.slice(0, unorderedStart).join(' ');
+          if (leadingText.trim()) {
+            result.push({ type: 'paragraph', content: leadingText });
+          }
+        }
+        
+        // Extract list items (from first list item to end of block, or until non-list item)
+        const listItems = [];
+        let currentItem = null;
+        for (let i = unorderedStart; i < lines.length; i++) {
+          if (unorderedPattern.test(lines[i])) {
+            // If we have a current item, save it before starting a new one
+            if (currentItem !== null) {
+              listItems.push(currentItem);
+            }
+            const match = lines[i].match(/^[-—*]\s+(.+)$/);
+            currentItem = match && match[1] ? match[1] : '';
+          } else {
+            // Continuation line - append to current item
+            if (currentItem !== null) {
+              currentItem += ' ' + lines[i];
+            } else {
+              // Stop at first non-list item if we haven't started a list yet
+              break;
+            }
+          }
+        }
+        // Don't forget the last item
+        if (currentItem !== null) {
+          listItems.push(currentItem);
+        }
+        
+        if (listItems.length > 0) {
+          result.push({ type: 'unordered-list', content: listItems });
+        }
+        continue;
+      }
+      
+      // Handle ordered list
+      if (orderedStart >= 0) {
+        // Extract leading paragraph text (if any)
+        if (orderedStart > 0) {
+          const leadingText = lines.slice(0, orderedStart).join(' ');
+          if (leadingText.trim()) {
+            result.push({ type: 'paragraph', content: leadingText });
+          }
+        }
+        
+        // Extract list items
+        const listItems = [];
+        let currentItem = null;
+        for (let i = orderedStart; i < lines.length; i++) {
+          if (orderedPattern.test(lines[i])) {
+            // If we have a current item, save it before starting a new one
+            if (currentItem !== null) {
+              listItems.push(currentItem);
+            }
+            const match = lines[i].match(/^\d+\.\s+(.+)$/);
+            currentItem = match && match[1] ? match[1] : '';
+          } else {
+            // Continuation line - append to current item
+            if (currentItem !== null) {
+              currentItem += ' ' + lines[i];
+            } else {
+              // Stop at first non-list item if we haven't started a list yet
+              break;
+            }
+          }
+        }
+        // Don't forget the last item
+        if (currentItem !== null) {
+          listItems.push(currentItem);
+        }
+        
+        if (listItems.length > 0) {
+          result.push({ type: 'ordered-list', content: listItems });
+        }
+        continue;
+      }
+      
+      // Otherwise, treat as paragraph (preserve literal text)
+      const paragraphText = lines.join(' ');
+      result.push({ type: 'paragraph', content: paragraphText });
+    }
+    
+    return result;
+  };
+
+  $: text = textBlock?.normalized ?? textBlock?.raw ?? '';
+  $: mode = $describeRenderMode;
+  $: paragraphs = mode === 'plain' ? toParagraphs(text) : null;
+  $: blocks = mode === 'lists' ? parseMarkdownLite(text) : null;
+</script>
+
+{#if mode === 'plain'}
+  {#if paragraphs && paragraphs.length}
+    <div class="prose sp-prose">
+      {#each paragraphs as p}
+        <p>{p}</p>
+      {/each}
+    </div>
+  {:else}
+    <div class="empty">No description yet.</div>
+  {/if}
+{:else if mode === 'lists'}
+  {#if blocks && blocks.length}
+    <div class="prose sp-prose">
+      {#each blocks as block}
+        {#if block.type === 'paragraph'}
+          <p>{block.content}</p>
+        {:else if block.type === 'unordered-list'}
+          <ul>
+            {#each block.content as item}
+              <li>{item}</li>
+            {/each}
+          </ul>
+        {:else if block.type === 'ordered-list'}
+          <ol>
+            {#each block.content as item}
+              <li>{item}</li>
+            {/each}
+          </ol>
+        {/if}
+      {/each}
+    </div>
+  {:else}
+    <div class="empty">No description yet.</div>
+  {/if}
+{/if}
+
+<style>
+  .prose {
+    max-width: 70ch;
+    font-size: var(--sp-font-body);
+    line-height: var(--sp-line-body);
+  }
+
+  p {
+    font-size: var(--sp-font-body);
+    line-height: var(--sp-line-body);
+    margin-bottom: var(--sp-space-4);
+    color: var(--text-color);
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: var(--sp-space-6);
+  }
+
+  ul li {
+    font-size: var(--sp-font-body);
+    line-height: var(--sp-line-loose);
+    color: var(--text-secondary);
+    margin-bottom: var(--sp-space-3);
+    padding-left: var(--sp-space-6);
+    position: relative;
+  }
+
+  ul li::before {
+    content: '—';
+    position: absolute;
+    left: 0;
+    color: var(--text-tertiary);
+  }
+
+  ul li:last-child {
+    margin-bottom: 0;
+  }
+
+  ol {
+    margin-bottom: var(--sp-space-6);
+    padding-left: var(--sp-space-6);
+  }
+
+  ol li {
+    font-size: var(--sp-font-body);
+    line-height: var(--sp-line-body);
+    margin-bottom: var(--sp-space-3);
+    color: var(--text-color);
+  }
+
+  ol li:last-child {
+    margin-bottom: 0;
+  }
+
+  .empty {
+    color: var(--text-tertiary);
+    font-size: var(--sp-font-small);
+    padding: 10px 0;
+  }
+
+  @media (max-width: 480px) {
+    ul li {
+      padding-left: 20px;
+    }
+  }
+</style>
+

package/src/lib/components/RelationshipsSection.svelte

@@ -0,0 +1,122 @@
+<script>
+  import { getDisplayTitle } from '../format/title.js';
+  import { getDisplayKind } from '../format/kind.js';
+  import { getNodeRoute } from '../data/universeStore.js';
+
+  /** @type {Array<any>} */
+  export let relationships = [];
+</script>
+
+{#if relationships.length > 0}
+  <section class="relationships">
+    <h2 class="relationships-title">Relationships</h2>
+    <ul class="relationships-list">
+      {#each relationships as rel}
+        <li class="relationship-item">
+          <a class="relationship-link sprig-link" href={getNodeRoute(rel.otherNode)}>
+            <span class="relationship-label">{rel.label}</span>
+            <span class="relationship-separator">→</span>
+            <span class="relationship-name">{getDisplayTitle(rel.otherNode)}</span>
+            <span class="relationship-kind">{getDisplayKind(rel.otherNode)}</span>
+          </a>
+          {#if rel.desc}
+            <p class="relationship-description">{rel.desc}</p>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  </section>
+{/if}
+
+<style>
+  .relationships {
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 1px solid var(--hairline);
+  }
+
+  .relationships-title {
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-tiny);
+    letter-spacing: 0.02em;
+    text-transform: none;
+    color: var(--text-secondary);
+    margin: 0 0 0.75rem 0;
+  }
+
+  .relationships-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .relationship-item {
+    margin-bottom: 0.5rem;
+  }
+
+  .relationship-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .relationship-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 0;
+  }
+
+  .relationship-link.sprig-link {
+    text-decoration: none;
+  }
+
+  .relationship-link.sprig-link .relationship-name {
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.1875rem;
+    text-decoration-color: var(--sprig-link-underline);
+  }
+
+  .relationship-link.sprig-link:hover .relationship-name {
+    text-decoration-thickness: 1.5px;
+    text-decoration-color: var(--sprig-link-underline-hover);
+  }
+
+  .relationship-label {
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-small);
+    color: var(--text-secondary);
+  }
+
+  .relationship-separator {
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-small);
+    color: var(--text-tertiary);
+    opacity: 0.6;
+  }
+
+  .relationship-name {
+    font-family: var(--font-prose);
+    font-size: var(--sp-font-small);
+    color: inherit;
+  }
+
+  .relationship-kind {
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-tiny);
+    color: var(--text-tertiary);
+    margin-left: auto;
+  }
+
+  .relationship-description {
+    margin: 8px 0 0 0;
+    font-family: var(--font-prose);
+    font-size: var(--sp-font-body);
+    color: var(--text-secondary);
+    line-height: 1.6;
+    max-width: 70ch;
+  }
+
+  .relationship-item:not(:last-child) .relationship-description {
+    margin-bottom: 1.5rem;
+  }
+</style>

package/src/lib/components/UniverseHeader.svelte

@@ -0,0 +1,20 @@
+<script>
+  import PageHeader from './PageHeader.svelte';
+  import { getDisplayTitle } from '../format/title.js';
+
+  /** @type {{ node: any }} */
+  export let node;
+
+  const firstSentence = (s) => {
+    if (!s) return '';
+    const idx = s.indexOf('.');
+    return idx >= 0 ? s.slice(0, idx + 1) : s;
+  };
+
+  $: subtitle = node.describe?.normalized || node.describe?.raw
+    ? firstSentence(node.describe?.normalized ?? node.describe?.raw)
+    : null;
+</script>
+
+<PageHeader title={getDisplayTitle(node)} {subtitle} />
+