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

package/src/lib/components/GlobalSearch.svelte

@@ -0,0 +1,451 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { universeGraph } from '../data/universeStore.js';
+  import { getNodeRoute, getAncestorChain } from '../data/universeStore.js';
+  import { getDisplayTitle } from '../format/title.js';
+  import { navigate } from '../router.js';
+
+  /**
+   * @typedef {import('../data/universeStore.js').UniverseGraph} UniverseGraph
+   * @typedef {import('../data/universeStore.js').NodeModel} NodeModel
+   * @typedef {{ node: NodeModel, name: string, kind: string, id: string, route: string, context: string | null }} SearchItem
+   */
+
+  /** @type {HTMLInputElement | null} */
+  let searchInput = null;
+  let query = '';
+  let searchIndex = /** @type {SearchItem[]} */ ([]);
+  let activeIndex = /** @type {number | null} */ (null);
+  let listboxId = 'search-results-listbox';
+  /** @type {HTMLDivElement | null} */
+  let resultsDropdown = null;
+  let isManuallyClosed = false;
+
+  /**
+   * Build context string for a node
+   * @param {UniverseGraph} graph
+   * @param {NodeModel} node
+   * @returns {string | null}
+   */
+  function buildContext(graph, node) {
+    if (node.kind === 'series') {
+      return null;
+    }
+
+    if (node.kind === 'book') {
+      if (!node.parent) return null;
+      const series = graph.nodes[node.parent];
+      if (!series || series.kind !== 'series') return null;
+      return `Book in ${getDisplayTitle(series)}`;
+    }
+
+    if (node.kind === 'chapter') {
+      const ancestors = getAncestorChain(graph, node);
+      if (ancestors.length === 0) return null;
+      
+      const book = ancestors.find(a => a.kind === 'book');
+      const series = ancestors.find(a => a.kind === 'series');
+      
+      if (book && series) {
+        return `in ${getDisplayTitle(book)} (in ${getDisplayTitle(series)})`;
+      } else if (book) {
+        return `in ${getDisplayTitle(book)}`;
+      } else if (series) {
+        return `in ${getDisplayTitle(series)}`;
+      }
+      return null;
+    }
+
+    return null;
+  }
+
+  /**
+   * Build search index from universe graph
+   * @param {UniverseGraph | null} graph
+   * @returns {SearchItem[]}
+   */
+  function buildSearchIndex(graph) {
+    if (!graph || !graph.nodes) return [];
+
+    const items = [];
+    const searchableKinds = ['series', 'book', 'chapter'];
+
+    for (const node of Object.values(graph.nodes)) {
+      if (!node || !searchableKinds.includes(node.kind)) continue;
+
+      const route = getNodeRoute(node);
+      const context = buildContext(graph, node);
+
+      items.push({
+        node,
+        name: node.name,
+        kind: node.kind,
+        id: node.id,
+        route,
+        context,
+      });
+    }
+
+    return items;
+  }
+
+  /**
+   * Search nodes with ranking
+   * @param {SearchItem[]} index
+   * @param {string} searchQuery
+   * @returns {SearchItem[]}
+   */
+  function searchNodes(index, searchQuery) {
+    if (!searchQuery.trim()) return [];
+
+    const queryLower = searchQuery.toLowerCase().trim();
+    const prefixMatches = [];
+    const substringMatches = [];
+
+    for (const item of index) {
+      const nameLower = item.name.toLowerCase();
+      
+      if (nameLower.startsWith(queryLower)) {
+        prefixMatches.push(item);
+      } else if (nameLower.includes(queryLower)) {
+        substringMatches.push(item);
+      }
+    }
+
+    prefixMatches.sort((a, b) => a.name.localeCompare(b.name));
+    substringMatches.sort((a, b) => a.name.localeCompare(b.name));
+
+    const results = [...prefixMatches, ...substringMatches];
+    return results.slice(0, 10);
+  }
+
+  // Build search index reactively when graph changes
+  $: {
+    if ($universeGraph) {
+      searchIndex = buildSearchIndex($universeGraph);
+    }
+  }
+
+  // Perform search reactively
+  $: results = query.trim() ? searchNodes(searchIndex, query) : [];
+  
+  // Reset active index and manual close flag when query or results change
+  $: {
+    activeIndex = null;
+    if (query.trim().length > 0) {
+      isManuallyClosed = false;
+    }
+  }
+  
+  // Compute isOpen: show dropdown if we have results, query is not empty, and not manually closed
+  $: isOpen = results.length > 0 && query.trim().length > 0 && !isManuallyClosed;
+
+  /**
+   * Scroll active item into view
+   */
+  function scrollActiveIntoView() {
+    if (activeIndex === null || !resultsDropdown) return;
+    
+    const optionId = `search-option-${activeIndex}`;
+    const optionElement = resultsDropdown.querySelector(`#${optionId}`);
+    if (optionElement) {
+      optionElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }
+
+  /**
+   * Handle keyboard navigation in search input
+   * @param {KeyboardEvent} event
+   */
+  function handleInputKeydown(event) {
+    if (event.key === 'Tab') {
+      return;
+    }
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      if (!isOpen || results.length === 0) return;
+      
+      if (activeIndex === null) {
+        activeIndex = 0;
+      } else {
+        activeIndex = Math.min(activeIndex + 1, results.length - 1);
+      }
+      scrollActiveIntoView();
+      return;
+    }
+
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (!isOpen || results.length === 0) return;
+      
+      if (activeIndex === null) {
+        activeIndex = results.length - 1;
+      } else {
+        activeIndex = Math.max(activeIndex - 1, 0);
+      }
+      scrollActiveIntoView();
+      return;
+    }
+
+    if (event.key === 'Enter' && isOpen && activeIndex !== null && results[activeIndex]) {
+      event.preventDefault();
+      const item = results[activeIndex];
+      handleResultClick(item);
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      isManuallyClosed = true;
+      activeIndex = null;
+      searchInput?.focus();
+      return;
+    }
+  }
+
+  /**
+   * Handle global keyboard shortcuts (for `/` to focus)
+   * @param {KeyboardEvent} event
+   */
+  function handleGlobalKeydown(event) {
+    const activeElement = document.activeElement;
+    const isInputElement = activeElement && (
+      activeElement.tagName === 'INPUT' ||
+      activeElement.tagName === 'TEXTAREA' ||
+      (activeElement instanceof HTMLElement && activeElement.isContentEditable)
+    );
+
+    if (event.key === '/' && !isInputElement) {
+      event.preventDefault();
+      searchInput?.focus();
+    }
+  }
+
+  /**
+   * Handle result click
+   * @param {SearchItem} item
+   */
+  function handleResultClick(item) {
+    query = '';
+    isOpen = false;
+    activeIndex = null;
+    navigate(item.route);
+    // Trigger route change event
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  }
+
+  /**
+   * Handle mouse hover on result item
+   * @param {number} index
+   */
+  function handleResultHover(index) {
+    activeIndex = index;
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', handleGlobalKeydown);
+  });
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('keydown', handleGlobalKeydown);
+    }
+  });
+</script>
+
+<div class="search-container">
+  <div class="search-wrapper">
+    <input
+      bind:this={searchInput}
+      type="text"
+      placeholder="Search Series, Books, Chapters… (Press / to focus)"
+      bind:value={query}
+      class="search-input"
+      role="combobox"
+      aria-label="Search"
+      aria-expanded={isOpen}
+      aria-controls={listboxId}
+      aria-activedescendant={activeIndex !== null ? `search-option-${activeIndex}` : undefined}
+      aria-autocomplete="list"
+      on:keydown={handleInputKeydown}
+    />
+    
+    {#if isOpen && results.length > 0}
+      <div
+        bind:this={resultsDropdown}
+        class="results-dropdown"
+        role="listbox"
+        id={listboxId}
+      >
+        {#each results as item, index (item.id)}
+          {@const optionId = `search-option-${index}`}
+          {@const isActive = activeIndex === index}
+          <a
+            href={item.route}
+            class="result-item"
+            class:result-item--active={isActive}
+            role="option"
+            id={optionId}
+            aria-selected={isActive}
+            on:click|preventDefault={() => handleResultClick(item)}
+            on:mouseenter={() => handleResultHover(index)}
+          >
+            <div class="result-content">
+              <div class="result-title">{getDisplayTitle(item.node)}</div>
+              <div class="result-meta">
+                <span class="result-kind">{item.kind}</span>
+                {#if item.context}
+                  <span class="result-context">{item.context}</span>
+                {/if}
+              </div>
+            </div>
+          </a>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .search-container {
+    display: flex;
+    flex: 1;
+  }
+
+  .search-wrapper {
+    position: relative;
+    max-width: 500px;
+    width: 100%;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 10px 14px;
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-small);
+    color: var(--text-color);
+    background: var(--card-bg);
+    border: none;
+    border-radius: 4px;
+    outline: none;
+    transition: box-shadow 0.2s;
+  }
+
+  .search-input:focus {
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .search-input:focus {
+      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  :global(html[data-theme="dark"]) .search-input:focus {
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
+  }
+
+  .search-input::placeholder {
+    color: var(--text-tertiary);
+  }
+
+  .results-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    max-height: 400px;
+    overflow-y: auto;
+    z-index: 1000;
+    margin-top: 4px;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .results-dropdown {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  :global(html[data-theme="dark"]) .results-dropdown {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .result-item {
+    display: block;
+    padding: 12px 14px;
+    text-decoration: none;
+    color: inherit;
+    border-bottom: 1px solid var(--hairline);
+    transition: background-color 0.15s;
+    cursor: pointer;
+  }
+
+  .result-item:last-child {
+    border-bottom: none;
+  }
+
+  .result-item:hover,
+  .result-item:focus {
+    background: var(--hover);
+    outline: none;
+  }
+
+  .result-item:focus-visible {
+    outline: 2px solid var(--text-tertiary);
+    outline-offset: -2px;
+  }
+
+  .result-item--active {
+    background: var(--hover);
+  }
+
+  .result-item--active .result-title {
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    text-decoration-color: var(--text-secondary);
+  }
+
+  .result-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .result-title {
+    font-family: var(--font-prose);
+    font-size: var(--sp-font-body);
+    color: var(--text-color);
+    font-weight: 400;
+  }
+
+  .result-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-tiny);
+  }
+
+  .result-kind {
+    color: var(--text-tertiary);
+    text-transform: capitalize;
+    font-weight: 400;
+  }
+
+  .result-context {
+    color: var(--text-secondary);
+  }
+
+  .result-context::before {
+    content: '·';
+    margin-right: 4px;
+    color: var(--text-tertiary);
+  }
+</style>
+

package/src/lib/components/PageHeader.svelte

@@ -0,0 +1,116 @@
+<script>
+  import { getDisplayTitle } from '../format/title.js';
+
+  /** @type {string} */
+  export let title;
+  
+  /** @type {string | null} */
+  export let subtitle = null;
+  
+  /** @type {any} */
+  export let subtitleNode = null;
+</script>
+
+<header class="header">
+  <div>
+    <h1 class="title">{title}</h1>
+    {#if subtitle}
+      <p class="subtitle">{@html subtitle}</p>
+    {:else if subtitleNode}
+      <p class="subtitle">{getDisplayTitle(subtitleNode)}</p>
+    {/if}
+  </div>
+</header>
+
+<style>
+  .header {
+    margin-bottom: 48px;
+  }
+
+  .title {
+    font-size: var(--sp-font-h1);
+    font-weight: 400;
+    line-height: 1.2;
+    margin-bottom: 0;
+    color: var(--text-color);
+    letter-spacing: -0.5px;
+    font-family: var(--font-prose);
+  }
+
+  .subtitle {
+    margin: 0;
+    font-size: var(--sp-font-body);
+    line-height: 1.6;
+    color: var(--text-color);
+    font-family: var(--font-ui);
+    margin-top: 0;
+  }
+
+  .subtitle :global(a) {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.25rem;
+    text-decoration-color: rgba(0, 0, 0, 0.25);
+    transition: text-decoration-thickness 150ms ease, text-decoration-color 150ms ease;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .subtitle :global(a) {
+      text-decoration-color: rgba(255, 255, 255, 0.35);
+    }
+  }
+
+  :global(html[data-theme="dark"]) .subtitle :global(a) {
+    text-decoration-color: rgba(255, 255, 255, 0.35);
+  }
+
+  :global(html[data-theme="light"]) .subtitle :global(a) {
+    text-decoration-color: rgba(0, 0, 0, 0.25);
+  }
+
+  .subtitle :global(a:hover) {
+    text-decoration-thickness: 1.5px;
+    text-decoration-color: rgba(0, 0, 0, 0.4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .subtitle :global(a:hover) {
+      text-decoration-color: rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  :global(html[data-theme="dark"]) .subtitle :global(a:hover) {
+    text-decoration-color: rgba(255, 255, 255, 0.5);
+  }
+
+  :global(html[data-theme="light"]) .subtitle :global(a:hover) {
+    text-decoration-color: rgba(0, 0, 0, 0.4);
+  }
+
+  @media (max-width: 768px) {
+    .title {
+      font-size: 36px;
+      margin-bottom: 32px;
+      letter-spacing: -0.3px;
+    }
+
+    .subtitle {
+      font-size: var(--sp-font-body);
+      line-height: 1.65;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .title {
+      font-size: 32px;
+      margin-bottom: 28px;
+      letter-spacing: -0.2px;
+    }
+
+    .subtitle {
+      font-size: var(--sp-font-body);
+    }
+  }
+</style>
+