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

package/src/pages/ConceptPage.svelte

@@ -0,0 +1,873 @@
+<script>
+  import { universeGraph, currentUniverseName, universeRootNode, getNodeRoute, getRelationshipsForNode, getAncestorChain } 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, id: string }} */
+  export let params;
+
+  // Update universe name reactively when params change
+  $: 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
+   */
+
+  // Decode the node ID from URL
+  $: nodeId = decodeURIComponent(params.id);
+  $: currentNode = $universeGraph?.nodes[nodeId];
+  $: children = currentNode?.children?.map((id) => $universeGraph?.nodes[id]).filter(Boolean) || [];
+  $: relationships = currentNode ? getRelationshipsForNode($universeGraph, nodeId) : [];
+  $: ancestors = currentNode ? getAncestorChain($universeGraph, currentNode) : [];
+  $: showContextLine = currentNode && (currentNode.kind === 'book' || currentNode.kind === 'chapter' || (currentNode.kind === 'concept' && currentNode.parent));
+  $: documentation = currentNode?.documentation || [];
+
+  /**
+   * 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;
+  }
+
+  $: currentAnthology = currentNode && $universeGraph
+    ? getAnthologyForNode($universeGraph, currentNode)
+    : null;
+  
+  // Get chapter siblings when viewing a chapter page (excluding current chapter)
+  $: chapterSiblings = (() => {
+    if (!currentNode || currentNode.kind !== 'chapter' || !$universeGraph) return [];
+    const book = ancestors[0];
+    if (!book || book.kind !== 'book') return [];
+    return (book.children || [])
+      .map((id) => $universeGraph.nodes[id])
+      .filter(Boolean)
+      .filter((node) => node.kind === 'chapter' && node.id !== currentNode.id);
+  })();
+
+  /**
+   * 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,
+    }));
+  }
+
+  // Group references by repository, preserving source order
+  $: groupedReferences = (() => {
+    const refs = currentNode?.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;
+
+  $: subtitle = (() => {
+    if (showContextLine) {
+      if (currentNode.kind === 'book' && ancestors[0]) {
+        const series = ancestors[0];
+        const seriesRoute = getNodeRoute(series);
+        return `A book in the <a href="${seriesRoute}">${getDisplayTitle(series)}</a> series`;
+      } else if (currentNode.kind === 'chapter' && ancestors[0] && ancestors[1]) {
+        const book = ancestors[0];
+        const series = ancestors[1];
+        const bookRoute = getNodeRoute(book);
+        const seriesRoute = getNodeRoute(series);
+        return `A chapter in <a href="${bookRoute}">${getDisplayTitle(book)}</a>, within the <a href="${seriesRoute}">${getDisplayTitle(series)}</a> series`;
+      } else if (currentNode.kind === 'concept' && currentNode.parent && $universeGraph) {
+        const parentNode = $universeGraph.nodes[currentNode.parent];
+        if (parentNode) {
+          const parentRoute = getNodeRoute(parentNode);
+          const parentTitle = getDisplayTitle(parentNode);
+          
+          if (parentNode.kind === 'book' && ancestors.length > 0) {
+            const series = ancestors.find(a => a.kind === 'series');
+            if (series) {
+              const seriesRoute = getNodeRoute(series);
+              return `A concept in <a href="${parentRoute}">${parentTitle}</a>, within the <a href="${seriesRoute}">${getDisplayTitle(series)}</a> series`;
+            } else {
+              return `A concept in <a href="${parentRoute}">${parentTitle}</a>`;
+            }
+          } else if (parentNode.kind === 'series') {
+            return `A concept in the <a href="${parentRoute}">${parentTitle}</a> series`;
+          } else if (parentNode.kind === 'anthology') {
+            return `A concept in <a href="${parentRoute}">${parentTitle}</a>`;
+          } else {
+            return `A concept in <a href="${parentRoute}">${parentTitle}</a>`;
+          }
+        }
+      }
+      return `${currentNode.kind} in ${params.universe}`;
+    } else {
+      if (currentNode.kind === 'concept') {
+        return `A concept in ${params.universe}`;
+      } else {
+        return `${currentNode.kind} in ${params.universe}`;
+      }
+    }
+  })();
+</script>
+
+{#if currentNode}
+  <PageHeader title={getDisplayTitle(currentNode)} {subtitle} />
+
+  <div class="grid">
+    <section class="narrative">
+      <Prose textBlock={currentNode.describe} />
+    </section>
+
+    {#if children.length > 0}
+      <aside class="index">
+        <ContentsCard children={children} currentNode={currentNode} />
+      </aside>
+    {/if}
+  </div>
+
+  {#if currentNode.kind === 'chapter' && chapterSiblings.length > 0}
+    <section class="chapter-navigation">
+      <h2 class="chapter-navigation-title">In this book</h2>
+      <ul class="chapter-navigation-list">
+        {#each chapterSiblings as chapter}
+          <li class="chapter-navigation-item">
+            <a 
+              class="chapter-navigation-link sprig-link" 
+              href={getNodeRoute(chapter)}
+            >
+              {getDisplayTitle(chapter)}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
+
+  {#if relationships.length > 0}
+    <section class="relationships">
+      <h2 class="relationships-title">Relationships</h2>
+      <ul class="relationships-list">
+        {#each relationships as rel}
+          {@const otherAnthology = $universeGraph
+            ? getAnthologyForNode($universeGraph, rel.otherNode)
+            : null}
+          {@const isDifferentAnthology = otherAnthology && (
+            !currentAnthology || currentAnthology.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 documentation.length > 0}
+    <section class="documentation">
+      <h2 class="documentation-title">Documentation</h2>
+      <p class="documentation-subtitle">Additional documentation for this concept.</p>
+
+      <ul class="documentation-list">
+        {#each documentation as doc}
+          {@const cleanPath = doc.path.startsWith('/') ? doc.path.slice(1) : doc.path}
+          {@const pathWithoutDocs = cleanPath.startsWith('docs/') ? cleanPath.slice(5) : cleanPath}
+          {@const pathParts = pathWithoutDocs.split('/').map(p => encodeURIComponent(p))}
+          {@const docUrl = `/universes/${params.universe}/docs/${pathParts.join('/')}`}
+          {@const docTitle = doc.title || doc.path.split('/').pop() || doc.path}
+          <li class="documentation-item">
+            <a class="documentation-link sprig-link" href={docUrl}>
+              <span class="documentation-title-text">{docTitle}</span>
+              {#if doc.kind}
+                <span class="documentation-kind">{doc.kind}</span>
+              {/if}
+            </a>
+            {#if doc.path !== docTitle}
+              <p class="documentation-path">{doc.path}</p>
+            {/if}
+            {#if doc.describe?.normalized}
+              <p class="documentation-description">{doc.describe.normalized}</p>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
+
+  <FooterStatus graph={$universeGraph} root={$universeRootNode} />
+{: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%;
+  }
+
+  .chapter-navigation {
+    margin-top: 20px;
+    padding-top: 18px;
+  }
+
+  .chapter-navigation-title {
+    font-family: var(--font-prose);
+    font-size: var(--sp-font-small);
+    letter-spacing: 0;
+    text-transform: none;
+    color: var(--text-secondary);
+    margin: 0 0 0.5rem 0;
+    font-weight: 400;
+  }
+
+  .chapter-navigation-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .chapter-navigation-item {
+    margin-bottom: 0.4rem;
+  }
+
+  .chapter-navigation-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .chapter-navigation-link {
+    display: inline-block;
+    font-family: var(--font-prose);
+    font-size: var(--sp-font-body);
+    font-weight: 400;
+    color: inherit;
+    padding: 2px 0;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.1875rem;
+    text-decoration-color: var(--sprig-link-underline);
+  }
+
+  .chapter-navigation-link:hover {
+    text-decoration-thickness: 1.5px;
+    text-decoration-color: var(--sprig-link-underline-hover);
+  }
+
+  .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;
+  }
+
+  .documentation {
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 1px solid var(--hairline);
+  }
+
+  .documentation-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;
+  }
+
+  .documentation-subtitle {
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-tiny);
+    color: var(--text-tertiary);
+    margin: 0 0 1.5rem 0;
+  }
+
+  .documentation-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .documentation-item {
+    margin-bottom: 1.5rem;
+  }
+
+  .documentation-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .documentation-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 0;
+    text-decoration: none;
+  }
+
+  .documentation-title-text {
+    font-family: var(--font-prose);
+    font-size: var(--sp-font-body);
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.1875rem;
+    text-decoration-color: var(--sprig-link-underline);
+  }
+
+  .documentation-link:hover .documentation-title-text {
+    text-decoration-thickness: 1.5px;
+    text-decoration-color: var(--sprig-link-underline-hover);
+  }
+
+  .documentation-kind {
+    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;
+    padding: 2px 6px;
+    background: var(--card-bg);
+    border-radius: 4px;
+  }
+
+  .documentation-path {
+    margin: 6px 0 0 0;
+    font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: var(--sp-font-tiny);
+    color: var(--text-tertiary);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.01em;
+  }
+
+  .documentation-description {
+    margin: 8px 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;
+  }
+
+  @media (max-width: 768px) {
+    .grid {
+      grid-template-columns: 1fr;
+      gap: 32px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .grid {
+      gap: 32px;
+    }
+  }
+</style>
+