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

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@sprig-and-prose/sprig-ui-csr",
+  "version": "0.1.0",
+  "type": "module",
+  "bin": {
+    "sprig-ui-csr": "./src/cli.js"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node src/cli.js",
+    "format": "biome format . --write",
+    "lint": "biome lint .",
+    "typecheck": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@sprig-and-prose/sprig-design": "^0.1.5",
+    "@sprig-and-prose/sprig-texture": "^0.1.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.10",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@types/node": "^22.0.0",
+    "svelte": "^5.46.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}
+

package/src/App.svelte

@@ -0,0 +1,202 @@
+<script>
+  import { loadUniverseGraph } 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 SeriesPage from './pages/SeriesPage.svelte';
+  import AnthologyPage from './pages/AnthologyPage.svelte';
+  import ConceptPage from './pages/ConceptPage.svelte';
+
+  let loading = true;
+  let error = null;
+  let currentRoute = getCurrentRoute();
+
+  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');
+      if (mode === 'lists' || mode === 'plain') {
+        describeRenderMode.set(mode);
+      }
+    } catch (err) {
+      error = err.message || 'Failed to load manifest';
+      console.error('Error loading manifest:', err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleRouteChange() {
+    currentRoute = getCurrentRoute();
+  }
+
+  // Intercept link clicks for client-side navigation
+  function handleLinkClick(event) {
+    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);
+
+  loadManifest();
+</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 === 'series'}
+          <SeriesPage params={currentRoute.params} />
+        {:else if currentRoute.route === 'anthology'}
+          <AnthologyPage params={currentRoute.params} />
+        {:else if currentRoute.route === 'concept'}
+          <ConceptPage params={currentRoute.params} />
+        {: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-color: var(--bg-color);
+    z-index: 100;
+  }
+
+  .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-csr [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-csr
+  sprig-ui-csr --port 3000
+  sprig-ui-csr --manifest ./custom-manifest.json
+  sprig-ui-csr -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,167 @@
+<script>
+  import { getNodeRoute } from '../data/universeStore.js';
+  import { getDisplayTitle } from '../format/title.js';
+
+  /** @type {import('../data/universeStore.js').NodeModel[]} */
+  export let children = [];
+  /** @type {import('../data/universeStore.js').NodeModel | null} */
+  export let currentNode = null;
+  /** @type {string | null} */
+  export let title = null;
+  
+  $: titleText = title !== null
+    ? title
+    : currentNode?.kind === 'book' && children.length > 0
+      ? `Contents (Chapters in ${getDisplayTitle(currentNode)})`
+      : 'Contents';
+</script>
+
+<div class="card">
+  <div class="title">{titleText}</div>
+
+  {#if children.length > 0}
+    <ul class="list">
+      {#each children as child}
+        <li class="item">
+          <a class="link sprig-link" href={getNodeRoute(child)}>
+            <span class="name">{getDisplayTitle(child)}</span>
+            <span class="kind">{child.kind}</span>
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {: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-tiny);
+    color: var(--text-tertiary);
+    letter-spacing: 0.5px;
+    margin-bottom: 20px;
+    font-family: var(--font-ui);
+  }
+
+  .list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .item {
+    margin-bottom: 20px;
+    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);
+  }
+
+  .kind {
+    font-size: var(--sp-font-tiny);
+    color: var(--text-tertiary);
+    font-family: var(--font-ui);
+    font-style: italic;
+    font-weight: normal;
+    text-decoration: none;
+  }
+
+  .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>
+

package/src/lib/components/FooterStatus.svelte

@@ -0,0 +1,80 @@
+<script>
+  /** @type {import('../data/universeStore.js').UniverseGraph | null} */
+  export let graph = null;
+  /** @type {import('../data/universeStore.js').NodeModel | null} */
+  export let root = null;
+
+  /**
+   * @param {any} obj
+   */
+  const count = (obj) => (obj ? Object.keys(obj).length : 0);
+</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">Relationships</span>
+    <span class="value">{count(graph?.edges)}</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>
+