@sprig-and-prose/sprig-ui-csr 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprig-and-prose/sprig-ui-csr",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "bin": {
     "sprig-ui-csr": "./src/cli.js"
@@ -26,4 +26,3 @@
     "vite": "^6.0.0"
   }
 }
-

package/src/App.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, onDestroy } from 'svelte';
-  import { loadUniverseGraph } from './lib/data/universeStore.js';
+  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';
@@ -9,11 +9,32 @@
   import SeriesPage from './pages/SeriesPage.svelte';
   import AnthologyPage from './pages/AnthologyPage.svelte';
   import ConceptPage from './pages/ConceptPage.svelte';
+  import ReferencePage from './pages/ReferencePage.svelte';
 
   let loading = true;
+  /** @type {string | null} */
   let error = null;
   let currentRoute = getCurrentRoute();
 
+  $: seriesParams = currentRoute?.route === 'series'
+    ? /** @type {{ universe: string, series: string }} */ (currentRoute.params)
+    : null;
+  $: anthologyParams = currentRoute?.route === 'anthology'
+    ? /** @type {{ universe: string, anthology: string }} */ (currentRoute.params)
+    : null;
+  $: conceptParams = currentRoute?.route === 'concept'
+    ? /** @type {{ universe: string, id: string }} */ (currentRoute.params)
+    : null;
+  $: referenceParams = currentRoute?.route === 'reference'
+    ? /** @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';
@@ -35,11 +56,15 @@
       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) {
-      error = err.message || 'Failed to load manifest';
+      const message = err instanceof Error ? err.message : 'Failed to load manifest';
+      error = message;
       console.error('Error loading manifest:', err);
     } finally {
       loading = false;
@@ -48,10 +73,15 @@
 
   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;
 
@@ -78,6 +108,7 @@
   document.addEventListener('click', handleLinkClick);
 
   // Set up Server-Sent Events for manifest updates
+  /** @type {EventSource | null} */
   let eventSource = null;
 
   onMount(() => {
@@ -139,12 +170,14 @@
       {: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 if currentRoute.route === 'series' && seriesParams}
+          <SeriesPage params={seriesParams} />
+        {:else if currentRoute.route === 'anthology' && anthologyParams}
+          <AnthologyPage params={anthologyParams} />
+        {:else if currentRoute.route === 'concept' && conceptParams}
+          <ConceptPage params={conceptParams} />
+        {:else if currentRoute.route === 'reference' && referenceParams}
+          <ReferencePage params={referenceParams} />
         {:else}
           <div class="error">Unknown route: {currentRoute.route}</div>
         {/if}

package/src/lib/components/GlobalSearch.svelte

@@ -8,7 +8,7 @@
   /**
    * @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
+   * @typedef {{ node: NodeModel | any, name: string, kind: string, id: string, route: string, context: string | null }} SearchItem
    */
 
   /** @type {HTMLInputElement | null} */
@@ -56,6 +56,32 @@
       return null;
     }
 
+    if (node.kind === 'concept') {
+      if (!node.parent) return null;
+      
+      const ancestors = getAncestorChain(graph, node);
+      const parent = graph.nodes[node.parent];
+      
+      if (!parent) return null;
+      
+      // Check if concept is in a book or chapter
+      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)}`;
+      } else if (parent.kind === 'series') {
+        return `in ${getDisplayTitle(parent)}`;
+      } else if (parent.kind === 'anthology') {
+        return `in ${getDisplayTitle(parent)}`;
+      }
+      return null;
+    }
+
     return null;
   }
 
@@ -68,7 +94,7 @@
     if (!graph || !graph.nodes) return [];
 
     const items = [];
-    const searchableKinds = ['series', 'book', 'chapter'];
+    const searchableKinds = ['series', 'book', 'chapter', 'concept'];
 
     for (const node of Object.values(graph.nodes)) {
       if (!node || !searchableKinds.includes(node.kind)) continue;
@@ -86,6 +112,22 @@
       });
     }
 
+    if (graph.references) {
+      for (const ref of Object.values(graph.references)) {
+        if (!ref || !ref.id) continue;
+        const universeName = ref.id.split(':')[0];
+        const route = `/universes/${universeName}/reference/${encodeURIComponent(ref.id)}`;
+        items.push({
+          node: ref,
+          name: ref.title || ref.name,
+          kind: 'reference',
+          id: ref.id,
+          route,
+          context: null,
+        });
+      }
+    }
+
     return items;
   }
 
@@ -259,7 +301,7 @@
     <input
       bind:this={searchInput}
       type="text"
-      placeholder="Search Series, Books, Chapters… (Press / to focus)"
+      placeholder="Search Series, Books, Chapters, Concepts… (Press / to focus)"
       bind:value={query}
       class="search-input"
       role="combobox"

package/src/lib/data/universeStore.js

@@ -1,18 +1,19 @@
-import { writable, derived } from 'svelte/store';
+import { writable, derived, get } from 'svelte/store';
 
 /**
  * @typedef {{ line:number, col:number, offset:number }} Pos
  * @typedef {{ file:string, start:Pos, end:Pos }} SourceSpan
  * @typedef {{ raw:string, normalized?:string, source:SourceSpan }} TextBlock
- * @typedef {{ repository:string, paths:string[], describe?:TextBlock, source:SourceSpan }} ReferenceBlock
- * @typedef {{ id:string, kind:'universe'|'anthology'|'series'|'book'|'chapter'|'concept'|'relates', name:string, title?:string, parent?:string, children:string[], container?:string, describe?:TextBlock, endpoints?:string[], from?:Record<string, any>, references?:ReferenceBlock[] }} NodeModel
+ * @typedef {{ id:string, name:string, url:string, title?:string, describe?:TextBlock, note?:TextBlock }} RepositoryModel
+ * @typedef {{ id:string, name:string, kind?:string, title?:string, describe?:TextBlock, note?:TextBlock, urls:string[], repositoryRef?:string, paths?:string[] }} ReferenceModel
+ * @typedef {{ id:string, kind:'universe'|'anthology'|'series'|'book'|'chapter'|'concept'|'relates', name:string, title?:string, parent?:string, children:string[], container?:string, describe?:TextBlock, endpoints?:string[], from?:Record<string, any>, references?:string[] }} NodeModel
  * @typedef {{ name:string, root:string }} UniverseModel
- * @typedef {{ version:1, universes:Record<string, UniverseModel>, nodes:Record<string, NodeModel>, edges:Record<string, any>, diagnostics:any[], repositories?:Record<string, any>, generatedAt?:string }} UniverseGraph
+ * @typedef {{ version:1, universes:Record<string, UniverseModel>, nodes:Record<string, NodeModel>, edges:Record<string, any>, diagnostics:any[], repositories?:Record<string, RepositoryModel>, references?:Record<string, ReferenceModel>, generatedAt?:string }} UniverseGraph
  */
 
 export const universeGraph = writable(/** @type {UniverseGraph|null} */ (null));
 
-export const currentUniverseName = writable('Amaranthine');
+export const currentUniverseName = writable(/** @type {string|null} */ (null));
 
 export const currentUniverse = derived(
   [universeGraph, currentUniverseName],
@@ -223,6 +224,22 @@ export function getNodeRoute(node) {
   return `/universes/${universe}/concept/${encodeURIComponent(node.id)}`;
 }
 
+/**
+ * Auto-select the first universe if current universe is null or doesn't exist
+ * @param {UniverseGraph} graph - The loaded universe graph
+ */
+export function autoSelectFirstUniverse(graph) {
+  if (!graph || !graph.universes) return;
+  
+  const currentName = get(currentUniverseName);
+  const universeNames = Object.keys(graph.universes);
+  
+  // If no universe is selected, or the selected one doesn't exist, select the first one
+  if (universeNames.length > 0 && (!currentName || !graph.universes[currentName])) {
+    currentUniverseName.set(universeNames[0]);
+  }
+}
+
 /**
  * Fetch UniverseGraph JSON from a static path.
  * @param {string} url

package/src/lib/router.js

@@ -52,6 +52,18 @@ export function parseRoute(pathname) {
     };
   }
 
+  // Match /universes/:universe/reference/:id
+  const referenceMatch = path.match(/^universes\/([^/]+)\/reference\/(.+)$/);
+  if (referenceMatch) {
+    return {
+      route: 'reference',
+      params: {
+        universe: referenceMatch[1],
+        id: referenceMatch[2],
+      },
+    };
+  }
+
   // Unknown route
   return null;
 }