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

package/package.json

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

package/src/App.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { loadUniverseGraph } from './lib/data/universeStore.js';
+  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';
@@ -13,6 +14,12 @@
   let error = null;
   let currentRoute = getCurrentRoute();
 
+  // 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';
@@ -34,6 +41,9 @@
       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);
       }
@@ -47,6 +57,7 @@
 
   function handleRouteChange() {
     currentRoute = getCurrentRoute();
+    // Auto-selection will happen reactively when route changes
   }
 
   // Intercept link clicks for client-side navigation
@@ -76,7 +87,50 @@
   // Listen for link clicks
   document.addEventListener('click', handleLinkClick);
 
-  loadManifest();
+  // Set up Server-Sent Events for manifest updates
+  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">

package/src/lib/components/GlobalSearch.svelte

@@ -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;
@@ -259,7 +285,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,4 +1,4 @@
-import { writable, derived } from 'svelte/store';
+import { writable, derived, get } from 'svelte/store';
 
 /**
  * @typedef {{ line:number, col:number, offset:number }} Pos
@@ -12,7 +12,7 @@ import { writable, derived } from 'svelte/store';
 
 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 +223,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