@sprig-and-prose/sprig-ui 0.1.0

package/src/lib/components/FooterStatus.svelte

@@ -0,0 +1,83 @@
+<script>
+  /** @type {import('../data/universeStore.js').UniverseGraph | null} */
+  export let graph = null;
+
+  /** @param {Record<string, any> | null | undefined} obj */
+  const count = (obj) => (obj ? Object.keys(obj).length : 0);
+  $: dimensionCount = count(graph?.nodes && Object.fromEntries(
+    Object.entries(graph.nodes).filter(([, node]) => node?.kind === 'dimension'),
+  ));
+  $: relationshipCount = count(graph?.relationshipsById) + count(graph?.relatesById);
+</script>
+
+<footer class="footer">
+  <div class="left">
+    <span class="label">Grounding</span>
+    <span class="value">Coming soon</span>
+  </div>
+
+  <div class="right">
+    <span class="label">Nodes</span>
+    <span class="value">{count(graph?.nodes)}</span>
+    <span class="dot">•</span>
+    <span class="label">Dimensions</span>
+    <span class="value">{dimensionCount}</span>
+    <span class="dot">•</span>
+    <span class="label">Relationships</span>
+    <span class="value">{relationshipCount}</span>
+  </div>
+</footer>
+
+<style>
+  .footer {
+    padding: 2rem 0;
+    border-top: 1px solid var(--border-color);
+    margin-top: 4rem;
+    width: 100%;
+    overflow-x: hidden;
+    display: flex;
+    justify-content: space-between;
+    gap: 18px;
+    font-size: var(--sp-font-tiny);
+    color: var(--text-tertiary);
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .left, .right {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .label {
+    color: var(--text-tertiary);
+  }
+
+  .value {
+    color: var(--text-secondary);
+  }
+
+  .dot {
+    color: var(--text-tertiary);
+  }
+
+  @media (max-width: 768px) {
+    .footer {
+      padding: 2rem 0;
+      margin-top: 48px;
+      font-size: var(--sp-font-tiny);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .footer {
+      padding: 1.5rem 0;
+      margin-top: 40px;
+      font-size: var(--sp-font-tiny);
+    }
+  }
+</style>
+

package/src/lib/components/GlobalSearch.svelte

@@ -0,0 +1,428 @@
+<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 { getDisplayKind } from '../format/kind.js';
+  import { navigate } from '../router.js';
+
+  /**
+   * @typedef {import('../data/universeStore.js').UniverseGraph} UniverseGraph
+   * @typedef {import('../data/universeStore.js').NodeModel} NodeModel
+   * @typedef {{ node: NodeModel | any, 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;
+
+  function buildContext(graph, node) {
+    const ancestors = getAncestorChain(graph, node);
+    if (ancestors.length === 0) return null;
+    return `in ${getDisplayTitle(ancestors[0])}`;
+  }
+
+  /**
+   * Build search index from universe graph nodes.
+   * @param {UniverseGraph | null} graph
+   * @returns {SearchItem[]}
+   */
+  function buildSearchIndex(graph) {
+    if (!graph) return [];
+
+    const items = [];
+    const searchableKinds = ['concept', 'dimension', 'relationship', 'relates'];
+
+    if (graph.nodes) {
+      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: getDisplayKind(node),
+          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) {
+    // Ignore "/" key since it's the focus key
+    if (event.key === '/') {
+      event.preventDefault();
+      return;
+    }
+
+    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 concepts, dimensions, relationships… (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">{item.node != null ? getDisplayTitle(item.node) : item.name}</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(--card-bg);
+    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/NodePageLayout.svelte

@@ -0,0 +1,65 @@
+<script>
+  import PageHeader from './PageHeader.svelte';
+  import FooterStatus from './FooterStatus.svelte';
+
+  export let title;
+  export let subtitle;
+  export let graph;
+  export let showIndex = false;
+</script>
+
+<PageHeader {title} {subtitle} />
+
+<div class="grid">
+  <section class="narrative">
+    <slot name="narrative" />
+  </section>
+
+  {#if showIndex}
+    <aside class="index">
+      <slot name="index" />
+    </aside>
+  {/if}
+</div>
+
+<slot name="sections" />
+
+{#if graph}
+  <FooterStatus {graph} />
+{/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%;
+  }
+
+  @media (max-width: 768px) {
+    .grid {
+      grid-template-columns: 1fr;
+      gap: 32px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .grid {
+      gap: 32px;
+    }
+  }
+</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>
+