@sprig-and-prose/sprig-ui-csr 0.1.0

package/src/pages/SeriesPage.svelte

@@ -0,0 +1,657 @@
+<script>
+  import { currentSeries, seriesChildren, seriesRelationships, universeGraph, currentUniverseName, universeRootNode, getNodeRoute, currentSeriesId } from '../lib/data/universeStore.js';
+  import { getDisplayTitle } from '../lib/format/title.js';
+  import Prose from '../lib/components/Prose.svelte';
+  import ContentsCard from '../lib/components/ContentsCard.svelte';
+  import FooterStatus from '../lib/components/FooterStatus.svelte';
+  import PageHeader from '../lib/components/PageHeader.svelte';
+  import { linkForPath } from '../lib/references/linkForPath.js';
+  import { linkForRepository } from '../lib/references/linkForRepository.js';
+  import { isWildcardPath } from '../lib/references/isWildcardPath.js';
+
+  /** @type {{ universe: string, series: string }} */
+  export let params;
+
+  // Update stores reactively when params change
+  $: {
+    const seriesId = `${params.universe}:series:${params.series}`;
+    currentSeriesId.set(seriesId);
+    currentUniverseName.set(params.universe);
+  }
+
+  /**
+   * @typedef {{ raw?:string, normalized?:string, source?:any }} TextBlock
+   * @typedef {{ repository:string, paths:string[]|Array<{path:string, describe?:TextBlock}>, describe?:TextBlock }} ReferenceBlock
+   */
+
+  $: subtitle = (() => {
+    if (!$currentSeries || !$universeGraph) {
+      return $universeRootNode 
+        ? `A series in <a href="/">${getDisplayTitle($universeRootNode) || params.universe}</a>`
+        : `A series in ${params.universe}`;
+    }
+
+    // Check if series belongs to an anthology
+    const parentId = $currentSeries.parent;
+    if (parentId) {
+      const parentNode = $universeGraph.nodes[parentId];
+      if (parentNode && parentNode.kind === 'anthology') {
+        // Series is in an anthology
+        const anthologyRoute = getNodeRoute(parentNode);
+        const anthologyName = getDisplayTitle(parentNode);
+        const universeLink = $universeRootNode 
+          ? `<a href="/">${getDisplayTitle($universeRootNode) || params.universe}</a>`
+          : params.universe;
+        return `A series in <a href="${anthologyRoute}">${anthologyName}</a> (in ${universeLink})`;
+      }
+    }
+
+    // Series is not in an anthology
+    return $universeRootNode 
+      ? `A series in <a href="/">${getDisplayTitle($universeRootNode) || params.universe}</a>`
+      : `A series in ${params.universe}`;
+  })();
+
+  /**
+   * Normalize reference paths to handle both Shape A (strings) and Shape B (objects)
+   * @param {ReferenceBlock} ref
+   * @returns {Array<{path:string, describe?:TextBlock}>}
+   */
+  function normalizePaths(ref) {
+    if (!ref.paths || ref.paths.length === 0) return [];
+    
+    // Shape B: paths is array of objects
+    if (typeof ref.paths[0] === 'object' && ref.paths[0] !== null && 'path' in ref.paths[0]) {
+      return ref.paths.map((/** @type {{path:string, describe?:TextBlock}} */ p) => ({
+        path: p.path,
+        describe: p.describe,
+      }));
+    }
+    
+    // Shape A: paths is array of strings
+    return ref.paths.map((/** @type {string} */ p) => ({
+      path: p,
+      describe: undefined, // No per-path describe in Shape A
+    }));
+  }
+
+  // Group references by repository, preserving source order
+  $: groupedReferences = (() => {
+    const refs = $currentSeries?.references || [];
+    if (refs.length === 0) return [];
+
+    const groups = new Map();
+    const order = [];
+
+    for (const ref of refs) {
+      const repo = ref.repository;
+      if (!groups.has(repo)) {
+        groups.set(repo, {
+          referenceGroups: [],
+        });
+        order.push(repo);
+      }
+      
+      const group = groups.get(repo);
+      const normalizedPaths = normalizePaths(ref);
+      const pathEntries = normalizedPaths.map((pathEntry) => ({
+        path: pathEntry.path,
+        perPathDescribe: pathEntry.describe,
+      }));
+      
+      group.referenceGroups.push({
+        paths: pathEntries,
+        groupDescribe: ref.describe?.normalized || undefined,
+      });
+    }
+
+    return order.map((repo) => ({
+      repository: repo,
+      referenceGroups: groups.get(repo).referenceGroups,
+    }));
+  })();
+
+  // Expand/collapse state per repository group
+  let expandedGroups = new Set();
+
+  // Reactive repository URLs and path link generator - need to read from store reactively
+  $: repositoryUrls = (() => {
+    const graph = $universeGraph;
+    if (!graph?.repositories) return {};
+    const urls = {};
+    for (const [repoName, repoConfig] of Object.entries(graph.repositories)) {
+      const { kind, options } = repoConfig;
+      if (kind === 'sprig-repository-github') {
+        if (options?.url) {
+          urls[repoName] = options.url.endsWith('/') ? options.url.slice(0, -1) : options.url;
+        } else if (options?.owner && options?.repo) {
+          urls[repoName] = `https://github.com/${options.owner}/${options.repo}`;
+        }
+      }
+    }
+    return urls;
+  })();
+
+  // Helper function to generate path URLs reactively
+  function getPathUrl(repository, path) {
+    const graph = $universeGraph;
+    if (!graph?.repositories) return null;
+    const repoConfig = graph.repositories[repository];
+    if (!repoConfig) return null;
+    const { kind, options } = repoConfig;
+    const defaultBranch = options?.defaultBranch || 'main';
+    
+    if (kind === 'sprig-repository-github') {
+      let baseUrl;
+      if (options?.url) {
+        baseUrl = options.url;
+      } else if (options?.owner && options?.repo) {
+        baseUrl = `https://github.com/${options.owner}/${options.repo}`;
+      } else {
+        return null;
+      }
+      const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+      const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+      
+      if (isWildcardPath(path)) {
+        const lastSlashIndex = normalizedPath.lastIndexOf('/');
+        if (lastSlashIndex > 0) {
+          const folderPath = normalizedPath.slice(0, lastSlashIndex);
+          return `${normalizedBaseUrl}/tree/${defaultBranch}${folderPath}`;
+        }
+        return `${normalizedBaseUrl}/tree/${defaultBranch}`;
+      }
+      return `${normalizedBaseUrl}/blob/${defaultBranch}${normalizedPath}`;
+    }
+    return null;
+  }
+
+  /**
+   * @param {string} repository
+   */
+  function toggleGroup(repository) {
+    if (expandedGroups.has(repository)) {
+      expandedGroups.delete(repository);
+    } else {
+      expandedGroups.add(repository);
+    }
+    expandedGroups = expandedGroups; // Trigger reactivity
+  }
+
+  const DEFAULT_VISIBLE_PATHS = 3;
+
+  /**
+   * Get the anthology node for a series, if it belongs to one
+   * @param {any} graph
+   * @param {any} seriesNode
+   * @returns {any|null}
+   */
+  function getAnthologyForSeries(graph, seriesNode) {
+    if (!seriesNode?.parent || !graph) return null;
+    const parent = graph.nodes[seriesNode.parent];
+    return parent?.kind === 'anthology' ? parent : null;
+  }
+
+  /**
+   * Get the anthology context for any node by finding its parent series
+   * @param {any} graph
+   * @param {any} node
+   * @returns {any|null}
+   */
+  function getAnthologyForNode(graph, node) {
+    if (!node || !graph) return null;
+    
+    if (node.kind === 'series') {
+      return getAnthologyForSeries(graph, node);
+    }
+    
+    let currentParentId = node.parent;
+    while (currentParentId) {
+      const parentNode = graph.nodes[currentParentId];
+      if (!parentNode) break;
+      
+      if (parentNode.kind === 'series') {
+        return getAnthologyForSeries(graph, parentNode);
+      }
+      
+      currentParentId = parentNode.parent;
+    }
+    
+    return null;
+  }
+
+  $: currentSeriesAnthology = $currentSeries && $universeGraph 
+    ? getAnthologyForSeries($universeGraph, $currentSeries)
+    : null;
+</script>
+
+{#if $currentSeries}
+  <PageHeader title={getDisplayTitle($currentSeries)} {subtitle} />
+
+  <div class="grid">
+    <section class="narrative">
+      {#if $currentSeries.describe}
+        <Prose textBlock={$currentSeries.describe} />
+      {/if}
+    </section>
+
+    <aside class="index">
+      <ContentsCard children={$seriesChildren} />
+    </aside>
+  </div>
+
+  {#if $seriesRelationships.length > 0}
+    <section class="relationships">
+      <h2 class="relationships-title">Relationships</h2>
+      <ul class="relationships-list">
+        {#each $seriesRelationships as rel}
+          {@const otherAnthology = $universeGraph
+            ? getAnthologyForNode($universeGraph, rel.otherNode)
+            : null}
+          {@const isDifferentAnthology = otherAnthology && (
+            !currentSeriesAnthology || currentSeriesAnthology.id !== otherAnthology.id
+          )}
+          {@const displayName = isDifferentAnthology
+            ? `${getDisplayTitle(rel.otherNode)} (${getDisplayTitle(otherAnthology)})`
+            : getDisplayTitle(rel.otherNode)}
+          <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">{displayName}</span>
+              <span class="relationship-kind">{rel.otherNode.kind}</span>
+            </a>
+            {#if rel.desc}
+              <p class="relationship-description">{rel.desc}</p>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
+
+  {#if groupedReferences.length > 0}
+    <section class="references">
+      <h2 class="references-title">References</h2>
+      <p class="references-subtitle">Where this concept appears in code and docs.</p>
+
+      {#each groupedReferences as group}
+        {@const repoUrl = repositoryUrls[group.repository] || null}
+        {@const allPaths = group.referenceGroups.flatMap(rg => rg.paths)}
+        {@const isExpanded = expandedGroups.has(group.repository)}
+        {@const visibleRefGroups = (() => {
+          if (isExpanded) return group.referenceGroups;
+          let pathCount = 0;
+          const visible = [];
+          for (const refGroup of group.referenceGroups) {
+            if (pathCount + refGroup.paths.length <= DEFAULT_VISIBLE_PATHS) {
+              visible.push(refGroup);
+              pathCount += refGroup.paths.length;
+            } else {
+              break;
+            }
+          }
+          return visible;
+        })()}
+        {@const hiddenCount = allPaths.length - visibleRefGroups.reduce((sum, rg) => sum + rg.paths.length, 0)}
+
+        <div class="reference-group">
+          {#if repoUrl}
+            <a class="reference-repo-pill" href={repoUrl} target="_blank" rel="noopener noreferrer">
+              <span class="reference-repo-label">repo</span>
+              <span class="reference-repo-name">{group.repository}</span>
+            </a>
+          {:else}
+            <div class="reference-repo-pill reference-repo-pill--no-link">
+              <span class="reference-repo-label">repo</span>
+              <span class="reference-repo-name">{group.repository}</span>
+            </div>
+          {/if}
+          
+          <ul class="reference-paths-list">
+            {#each visibleRefGroups as refGroup, refGroupIndex}
+              {#each refGroup.paths as pathEntry, pathIndex}
+                {@const path = pathEntry.path}
+                {@const url = getPathUrl(group.repository, path)}
+                {@const isWildcard = isWildcardPath(path)}
+                {@const isLastInRefGroup = pathIndex === refGroup.paths.length - 1}
+                {@const isFirstInRefGroup = pathIndex === 0}
+                {@const isFirstRefGroup = refGroupIndex === 0}
+                <li class="reference-path-item" class:reference-path-item--tight={!isLastInRefGroup} class:reference-path-item--spaced={isFirstInRefGroup && !isFirstRefGroup}>
+                  {#if url}
+                    <a class="reference-path-link sprig-link sprig-link--quiet" href={url} target="_blank" rel="noopener noreferrer">
+                      <span class="reference-path-text">{path}</span>
+                      {#if isWildcard}
+                        <span class="reference-path-wildcard">(pattern)</span>
+                      {/if}
+                    </a>
+                  {:else}
+                    <span class="reference-path-text">{path}</span>
+                    {#if isWildcard}
+                      <span class="reference-path-wildcard">(pattern)</span>
+                    {/if}
+                  {/if}
+                  {#if pathEntry.perPathDescribe?.normalized}
+                    <p class="reference-description reference-description--per-path">{pathEntry.perPathDescribe.normalized}</p>
+                  {/if}
+                </li>
+              {/each}
+              {#if refGroup.groupDescribe}
+                <li class="reference-path-item reference-path-item--describe">
+                  <p class="reference-description reference-description--group">{refGroup.groupDescribe}</p>
+                </li>
+              {/if}
+            {/each}
+          </ul>
+          
+          {#if hiddenCount > 0 && !isExpanded}
+            <button
+              class="reference-expand-button"
+              on:click={() => toggleGroup(group.repository)}
+              type="button"
+            >
+              + {hiddenCount} more path{hiddenCount === 1 ? '' : 's'}
+            </button>
+          {/if}
+          {#if isExpanded && hiddenCount > 0}
+            <button
+              class="reference-expand-button"
+              on:click={() => toggleGroup(group.repository)}
+              type="button"
+            >
+              Show less
+            </button>
+          {/if}
+        </div>
+      {/each}
+    </section>
+  {/if}
+
+  {#if $universeGraph && $universeRootNode}
+    <FooterStatus graph={$universeGraph} root={$universeRootNode} />
+  {/if}
+{:else}
+  <div class="loading">Loading…</div>
+{/if}
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    gap: 64px;
+    align-items: start;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .narrative {
+    max-width: 680px;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .index {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .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: 2rem;
+  }
+
+  .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-tiny);
+    color: var(--text-secondary);
+  }
+
+  .relationship-separator {
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-tiny);
+    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;
+  }
+
+  .loading {
+    color: var(--text-tertiary);
+    padding: 24px 0;
+  }
+
+  .references {
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 1px solid var(--hairline);
+  }
+
+  .references-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;
+  }
+
+  .references-subtitle {
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-tiny);
+    color: var(--text-tertiary);
+    margin: 0 0 1.5rem 0;
+  }
+
+  .reference-group {
+    margin-bottom: 2rem;
+  }
+
+  .reference-group:last-child {
+    margin-bottom: 0;
+  }
+
+  .reference-repo-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background: var(--card-bg);
+    border-radius: 6px;
+    text-decoration: none;
+    color: inherit;
+    margin-bottom: 0.75rem;
+    transition: opacity 0.2s;
+  }
+
+  .reference-repo-pill:hover {
+    opacity: 0.8;
+  }
+
+  .reference-repo-pill--no-link {
+    cursor: default;
+  }
+
+  .reference-repo-pill--no-link:hover {
+    opacity: 1;
+  }
+
+  .reference-repo-label {
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-tiny);
+    letter-spacing: 0.05em;
+    text-transform: lowercase;
+    color: var(--text-tertiary);
+    font-weight: 400;
+  }
+
+  .reference-repo-name {
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-tiny);
+    color: var(--text-secondary);
+    font-weight: 400;
+  }
+
+  .reference-paths-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .reference-path-item {
+    margin-bottom: 0.75rem;
+  }
+
+  .reference-path-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .reference-path-item--tight {
+    margin-bottom: 0.25rem;
+  }
+
+  .reference-path-item--spaced {
+    margin-top: 0.75rem;
+  }
+
+  .reference-path-item--describe {
+    margin-top: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .reference-path-link {
+    display: block;
+    padding: 4px 0;
+  }
+
+  .reference-path-text {
+    font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: var(--sp-font-body);
+    color: inherit;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.01em;
+  }
+
+  .reference-path-wildcard {
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-tiny);
+    color: var(--text-tertiary);
+    margin-left: 4px;
+    font-weight: 400;
+  }
+
+  .reference-description {
+    margin: 6px 0 0 0;
+    font-family: var(--font-prose);
+    font-size: var(--sp-font-body);
+    color: var(--text-secondary);
+    line-height: 1.5;
+    max-width: 70ch;
+  }
+
+  .reference-description--per-path {
+    margin-top: 6px;
+  }
+
+  .reference-description--group {
+    margin: 0;
+  }
+
+  .reference-expand-button {
+    background: none;
+    border: none;
+    color: var(--text-tertiary);
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-tiny);
+    padding: 4px 0;
+    margin-top: 0.5rem;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .reference-expand-button:hover {
+    opacity: 0.8;
+  }
+
+  @media (max-width: 768px) {
+    .grid {
+      grid-template-columns: 1fr;
+      gap: 32px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .grid {
+      gap: 32px;
+    }
+  }
+</style>
+