@sprig-and-prose/sprig-ui 0.1.0

package/src/App.svelte

@@ -0,0 +1,277 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { loadUniverseGraph, autoSelectFirstUniverse, universeGraph } from './lib/data/universeStore.js';
+  import { getCurrentRoute, navigate } from './lib/router.js';
+  import { theme } from './lib/stores/theme.js';
+  import { describeRenderMode } from './lib/stores/describeRenderMode.js';
+  import GlobalSearch from './lib/components/GlobalSearch.svelte';
+  import HomePage from './pages/HomePage.svelte';
+  import ConceptPage from './pages/ConceptPage.svelte';
+
+  let loading = true;
+  /** @type {string | null} */
+  let error = null;
+  let currentRoute = getCurrentRoute();
+
+  $: nodeParams = currentRoute?.route === 'node'
+    ? /** @type {{ universe: string, id: string }} */ (currentRoute.params)
+    : null;
+
+  // Reactively auto-select first universe when on home route and graph is loaded
+  // This runs whenever universeGraph or currentRoute changes
+  $: if ($universeGraph && currentRoute?.route === 'home') {
+    autoSelectFirstUniverse($universeGraph);
+  }
+
+  function toggleTheme() {
+    theme.update((t) => {
+      if (t === 'light') return 'dark';
+      if (t === 'dark') return 'auto';
+      return 'light'; // 'auto' -> 'light'
+    });
+  }
+
+  // Get display label for theme toggle
+  $: themeLabel = (() => {
+    if ($theme === 'auto') {
+      return 'Auto';
+    }
+    return $theme === 'dark' ? 'Light' : 'Dark';
+  })();
+
+  async function loadManifest() {
+    try {
+      loading = true;
+      error = null;
+      const { describeRenderMode: mode } = await loadUniverseGraph('/api/manifest');
+      
+      // Auto-selection is handled reactively above
+      
+      if (mode === 'lists' || mode === 'plain') {
+        describeRenderMode.set(mode);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to load manifest';
+      error = message;
+      console.error('Error loading manifest:', err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleRouteChange() {
+    currentRoute = getCurrentRoute();
+    // Auto-selection will happen reactively when route changes
+  }
+
+  // Intercept link clicks for client-side navigation
+  /**
+   * @param {MouseEvent} event
+   */
+  function handleLinkClick(event) {
+    if (!(event.target instanceof HTMLElement)) return;
+    const link = event.target.closest('a');
+    if (!link) return;
+
+    const href = link.getAttribute('href');
+    if (!href) return;
+
+    // Only handle internal links (not external or hash links)
+    if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('mailto:') || href.startsWith('#')) {
+      return;
+    }
+
+    // Check if it's an internal route
+    if (href.startsWith('/') || !href.includes('://')) {
+      event.preventDefault();
+      navigate(href);
+      handleRouteChange();
+    }
+  }
+
+  // Listen for popstate (back/forward button)
+  window.addEventListener('popstate', handleRouteChange);
+  
+  // Listen for link clicks
+  document.addEventListener('click', handleLinkClick);
+
+  // Set up Server-Sent Events for manifest updates
+  /** @type {EventSource | null} */
+  let eventSource = null;
+
+  onMount(() => {
+    if (typeof EventSource !== 'undefined') {
+      try {
+        eventSource = new EventSource('/api/events');
+        console.log('SSE EventSource created');
+        
+        // Listen for manifest change events
+        eventSource.addEventListener('manifest', async (e) => {
+          console.log('SSE manifest event received:', e.data);
+          await loadManifest();
+        });
+        
+        // Optional: refetch on connection open to be safe
+        eventSource.addEventListener('open', () => {
+          console.log('SSE connection opened');
+        });
+        
+        // Handle errors (EventSource auto-reconnects, so we can ignore or log minimally)
+        eventSource.addEventListener('error', (e) => {
+          // EventSource will auto-reconnect, so we don't need to do anything
+          // Just log if needed for debugging
+          if (eventSource && eventSource.readyState === EventSource.CLOSED) {
+            console.log('SSE connection closed');
+          } else if (eventSource && eventSource.readyState === EventSource.CONNECTING) {
+            console.log('SSE reconnecting...');
+          }
+        });
+      } catch (err) {
+        console.error('Failed to create EventSource:', err);
+      }
+    }
+
+    loadManifest();
+  });
+
+  onDestroy(() => {
+    if (eventSource) {
+      eventSource.close();
+      console.log('SSE EventSource closed');
+    }
+  });
+</script>
+
+<div class="app sprig-design">
+  <div class="page">
+    <div class="top-bar">
+      <GlobalSearch />
+      <button class="theme-toggle" on:click={toggleTheme} type="button" aria-label="Toggle theme">
+        {themeLabel}
+      </button>
+    </div>
+    <main class="main-content">
+      {#if loading}
+        <div class="loading">Loading…</div>
+      {:else if error}
+        <div class="error">Error: {error}</div>
+      {:else if currentRoute}
+        {#if currentRoute.route === 'home'}
+          <HomePage />
+        {:else if currentRoute.route === 'node' && nodeParams}
+          <ConceptPage params={nodeParams} />
+        {:else}
+          <div class="error">Unknown route: {currentRoute.route}</div>
+        {/if}
+      {:else}
+        <div class="error">Invalid route</div>
+      {/if}
+    </main>
+  </div>
+</div>
+
+<style>
+  .app {
+    min-height: 100vh;
+    width: 100%;
+  }
+
+  .page {
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .top-bar {
+    padding: 24px 32px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+    position: sticky;
+    top: 0;
+    /* Background texture applied via JavaScript in main.js to match body texture */
+    /* Use semi-transparent background to allow texture to show while covering scrolling content */
+    background-color: rgba(250, 250, 250, 0.95); /* Light mode base with slight transparency */
+    z-index: 100;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .top-bar {
+      background-color: rgba(36, 34, 31, 0.95); /* Dark mode base with slight transparency */
+    }
+  }
+
+  :global(html[data-theme="dark"]) .top-bar {
+    background-color: rgba(36, 34, 31, 0.95); /* Dark mode base with slight transparency */
+  }
+
+  :global(html[data-theme="light"]) .top-bar {
+    background-color: rgba(250, 250, 250, 0.95); /* Light mode base with slight transparency */
+  }
+
+  .main-content {
+    padding: 64px 32px;
+    min-height: calc(100vh - 200px);
+    width: 100%;
+  }
+
+  .theme-toggle {
+    background: var(--card-bg);
+    border: none;
+    border-radius: 4px;
+    color: var(--text-color);
+    font-family: var(--font-ui);
+    font-size: var(--sp-font-small);
+    padding: 8px 12px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 0.2s, opacity 0.2s;
+  }
+
+  .theme-toggle:hover {
+    background: var(--hover);
+    opacity: 0.8;
+  }
+
+  .theme-toggle:focus {
+    outline: 2px solid var(--text-tertiary);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  .loading,
+  .error {
+    color: var(--text-tertiary);
+    padding: 24px 0;
+    font-size: var(--sp-font-body);
+  }
+
+  .error {
+    color: #d32f2f;
+  }
+
+  @media (max-width: 768px) {
+    .top-bar {
+      padding: 20px 24px;
+    }
+
+    .main-content {
+      padding: 48px 24px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .top-bar {
+      padding: 16px 20px;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .main-content {
+      padding: 32px 20px;
+    }
+  }
+</style>

package/src/cli.js

@@ -0,0 +1,146 @@
+#!/usr/bin/env node
+
+import { readFileSync, existsSync, statSync } from 'fs';
+import { resolve, dirname, join } from 'path';
+import { createAppServer } from './server.js';
+
+/**
+ * Walks upward from startPath to find .sprig directory
+ * @param {string} startPath - Starting directory path
+ * @returns {string | null} - Path to directory containing .sprig, or null if not found
+ */
+function discoverSprigDir(startPath) {
+  let current = resolve(startPath);
+  const root = resolve('/');
+
+  while (current !== root) {
+    const sprigDirPath = join(current, '.sprig');
+    if (existsSync(sprigDirPath) && statSync(sprigDirPath).isDirectory()) {
+      return current;
+    }
+    current = dirname(current);
+  }
+
+  // Check root directory as well
+  const rootSprigDirPath = join(root, '.sprig');
+  if (existsSync(rootSprigDirPath) && statSync(rootSprigDirPath).isDirectory()) {
+    return root;
+  }
+
+  return null;
+}
+
+/**
+ * Parse command-line arguments
+ * @returns {{ port: number; manifest: string; manifestSpecified: boolean }}
+ */
+function parseArgs() {
+  const args = process.argv.slice(2);
+  let port = 5173;
+  let manifest = '';
+  let manifestSpecified = false;
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === '--port' || arg === '-p') {
+      const portValue = args[i + 1];
+      if (!portValue) {
+        console.error('Error: --port requires a value');
+        process.exit(1);
+      }
+      const parsedPort = parseInt(portValue, 10);
+      if (isNaN(parsedPort) || parsedPort < 1 || parsedPort > 65535) {
+        console.error('Error: --port must be a number between 1 and 65535');
+        process.exit(1);
+      }
+      port = parsedPort;
+      i++;
+    } else if (arg === '--manifest' || arg === '-m') {
+      const manifestValue = args[i + 1];
+      if (!manifestValue) {
+        console.error('Error: --manifest requires a value');
+        process.exit(1);
+      }
+      manifest = manifestValue;
+      manifestSpecified = true;
+      i++;
+    } else if (arg === '--help' || arg === '-h') {
+      console.log(`
+Usage: sprig-ui [options]
+
+Options:
+  -p, --port <number>     Port to listen on (default: 5173)
+  -m, --manifest <path>   Path to manifest.json file (default: auto-discovered)
+  -h, --help              Show this help message
+
+Discovery:
+  - Walks upward from current directory to find .sprig directory
+  - Default manifest location: <root>/.sprig/manifest.json
+  - Falls back to ./manifest.json if no .sprig directory found
+
+Examples:
+  sprig-ui
+  sprig-ui --port 3000
+  sprig-ui --manifest ./custom-manifest.json
+  sprig-ui -p 8080 -m ./data/manifest.json
+`);
+      process.exit(0);
+    } else {
+      console.error(`Error: Unknown option ${arg}`);
+      console.error('Use --help for usage information');
+      process.exit(1);
+    }
+  }
+
+  return { port, manifest, manifestSpecified };
+}
+
+
+function main() {
+  const { port, manifest, manifestSpecified } = parseArgs();
+  
+  // Determine manifest path with fallback chain:
+  // 1. Explicit --manifest flag
+  // 2. Discovered .sprig/manifest.json
+  // 3. ./manifest.json (fallback)
+  let manifestPath = manifest;
+  
+  if (!manifestSpecified) {
+    // Try to discover .sprig directory
+    const sprigRoot = discoverSprigDir(process.cwd());
+    if (sprigRoot) {
+      manifestPath = join(sprigRoot, '.sprig', 'manifest.json');
+    } else {
+      // Final fallback
+      manifestPath = './manifest.json';
+    }
+  }
+
+  const server = createAppServer(manifestPath);
+
+  server.listen(port, () => {
+    console.log(`Server running at http://localhost:${port}`);
+    console.log(`Manifest path: ${manifestPath}`);
+    console.log('Press Ctrl+C to stop');
+  });
+
+  // Handle graceful shutdown
+  process.on('SIGINT', () => {
+    console.log('\nShutting down server...');
+    server.close(() => {
+      console.log('Server stopped');
+      process.exit(0);
+    });
+  });
+
+  process.on('SIGTERM', () => {
+    console.log('\nShutting down server...');
+    server.close(() => {
+      console.log('Server stopped');
+      process.exit(0);
+    });
+  });
+}
+
+main();
+

package/src/lib/components/ContentsCard.svelte

@@ -0,0 +1,283 @@
+<script>
+  import { getNodeRoute } from '../data/universeStore.js';
+  import { getDisplayTitle } from '../format/title.js';
+
+  /** @type {import('../data/universeStore.js').NodeModel[]} */
+  export let children = [];
+
+  /**
+   * @param {string | undefined} dimensionId
+   * @returns {string}
+   */
+  function getDimensionKey(dimensionId) {
+    if (!dimensionId) return '__ungrouped__';
+    return dimensionId;
+  }
+
+  /**
+   * @param {string} value
+   * @returns {string}
+   */
+  function formatDimensionLabel(value) {
+    if (value === '__ungrouped__') return 'other';
+    const segment = value.split('.').pop() || value;
+    return segment.replace(/([a-z0-9])([A-Z])/g, '$1 $2').toLowerCase();
+  }
+
+  /**
+   * @param {string} kind
+   * @returns {string}
+   */
+  function formatKindSectionTitle(kind) {
+    if (kind === 'relationship') return 'relationships';
+    if (kind === 'relates') return 'relates';
+    return 'concepts';
+  }
+
+  $: groupedSections = (() => {
+    /** @type {Map<string, { key:string, title:string, items:any[], order:number }>} */
+    const byKey = new Map();
+    /** @type {Map<string, { key:string, title:string, items:any[], order:number }>} */
+    const otherByKind = new Map();
+    let nextOrder = 0;
+
+    // Seed groups from explicit dimension nodes first.
+    for (const child of children) {
+      if (child.kind !== 'dimension') continue;
+      byKey.set(child.id, {
+        key: child.id,
+        title: formatDimensionLabel(child.name || child.id),
+        items: [],
+        order: nextOrder++,
+      });
+    }
+
+    for (const child of children) {
+      // Dimension rows become section headers, not list entries.
+      if (child.kind === 'dimension') continue;
+
+      if (child.dimension) {
+        const key = getDimensionKey(child.dimension);
+        if (!byKey.has(key)) {
+          byKey.set(key, {
+            key,
+            title: formatDimensionLabel(key),
+            items: [],
+            order: nextOrder++,
+          });
+        }
+        const group = byKey.get(key);
+        if (group) {
+          group.items.push(child);
+        }
+      } else {
+        const kind = child.kind || 'concept';
+        if (!otherByKind.has(kind)) {
+          otherByKind.set(kind, {
+            key: `other:${kind}`,
+            title: formatKindSectionTitle(kind),
+            items: [],
+            order: nextOrder++,
+          });
+        }
+        const group = otherByKind.get(kind);
+        if (group) {
+          group.items.push(child);
+        }
+      }
+    }
+
+    const dimensionGroups = Array.from(byKey.values())
+      .map((group) => ({ ...group }))
+      .filter((group) => group.items.length > 0)
+      .sort((a, b) => a.order - b.order);
+
+    const otherOrder = ['concept', 'relationship', 'relates'];
+    const otherGroups = Array.from(otherByKind.values())
+      .map((group) => ({ ...group }))
+      .filter((group) => group.items.length > 0)
+      .sort((a, b) => {
+        const aKind = a.key.replace('other:', '');
+        const bKind = b.key.replace('other:', '');
+        const aIndex = otherOrder.indexOf(aKind);
+        const bIndex = otherOrder.indexOf(bKind);
+        if (aIndex !== bIndex) return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex);
+        return a.order - b.order;
+      });
+
+    return { dimensionGroups, otherGroups };
+  })();
+
+  $: dimensionGroups = groupedSections.dimensionGroups;
+  $: otherGroups = groupedSections.otherGroups;
+</script>
+
+<div class="card">
+  {#if dimensionGroups.length > 0 || otherGroups.length > 0}
+    {#each dimensionGroups as group}
+      <div class="title">{group.title}</div>
+      <ul class="list">
+        {#each group.items as child}
+          <li class="item">
+            <a class="link sprig-link" href={getNodeRoute(child)}>
+              <span class="name">{getDisplayTitle(child)}</span>
+            </a>
+          </li>
+        {/each}
+      </ul>
+    {/each}
+
+    {#if otherGroups.length > 0}
+      {#if dimensionGroups.length > 0}
+        <hr class="section-separator" />
+      {/if}
+      {#each otherGroups as group}
+        <div class="title">{group.title}</div>
+        <ul class="list">
+          {#each group.items as child}
+            <li class="item">
+              <a class="link sprig-link" href={getNodeRoute(child)}>
+                <span class="name">{getDisplayTitle(child)}</span>
+              </a>
+            </li>
+          {/each}
+        </ul>
+      {/each}
+    {/if}
+  {:else}
+    <p class="empty">No contents yet.</p>
+  {/if}
+</div>
+
+<style>
+  .card {
+    background-color: var(--card-bg);
+    border-radius: 4px;
+    padding: 24px;
+    font-size: var(--sp-font-small);
+    line-height: 1.6;
+    width: 100%;
+    position: sticky;
+    top: 32px;
+  }
+
+  .title {
+    font-size: var(--sp-font-small);
+    color: var(--text-tertiary);
+    letter-spacing: 0.5px;
+    margin: 0 0 0.75rem 0;
+    font-family: var(--font-ui);
+    font-weight: 400;
+  }
+
+  .title:not(:first-child) {
+    margin-top: 1.75rem;
+  }
+
+  .section-separator {
+    border: 0;
+    border-top: 1px solid var(--hairline);
+    margin: 1.5rem 0 0;
+  }
+
+  .list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 2px 0;
+  }
+
+  .item {
+    margin-bottom: 10px;
+    color: var(--text-secondary);
+  }
+
+  .item:last-child {
+    margin-bottom: 0;
+  }
+
+  .link {
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    font-family: inherit;
+    font-size: inherit;
+    gap: 0.75rem;
+    justify-content: space-between;
+    padding: 0;
+    text-align: left;
+    width: 100%;
+  }
+
+  /* Remove underline from link itself, show only on name */
+  .link.sprig-link {
+    text-decoration: none;
+  }
+
+  /* Show underline only on hover - no underline at rest */
+  .link.sprig-link .name {
+    text-decoration: none;
+  }
+
+  .link.sprig-link:hover .name {
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.25rem;
+    text-decoration-color: rgba(0, 0, 0, 0.25);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .link.sprig-link:hover .name {
+      text-decoration-color: rgba(255, 255, 255, 0.35);
+    }
+  }
+
+  :global(html[data-theme="dark"]) .link.sprig-link:hover .name {
+    text-decoration-color: rgba(255, 255, 255, 0.35);
+  }
+
+  :global(html[data-theme="light"]) .link.sprig-link:hover .name {
+    text-decoration-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .link:focus {
+    outline: 2px solid var(--text-tertiary);
+    outline-offset: 0.25rem;
+    border-radius: 2px;
+  }
+
+  .name {
+    font-size: var(--sp-font-body);
+    font-family: var(--font-prose);
+    font-weight: 400;
+    color: var(--text-color);
+  }
+
+  .empty {
+    color: var(--text-tertiary);
+    font-size: var(--sp-font-small);
+    margin: 0;
+    font-family: var(--font-ui);
+  }
+
+  @media (max-width: 768px) {
+    .card {
+      padding: 20px;
+      font-size: var(--sp-font-small);
+      position: static;
+    }
+
+    .item {
+      margin-bottom: 20px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .card {
+      padding: 18px;
+      font-size: var(--sp-font-tiny);
+    }
+  }
+</style>
+