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

package/src/lib/references/linkForRepository.js

@@ -0,0 +1,42 @@
+import { get } from 'svelte/store';
+import { universeGraph } from '../data/universeStore.js';
+
+/**
+ * Builds a URL for a repository root
+ * @param {string} repository - Repository key (e.g., "amaranthine")
+ * @returns {string | null} - Full URL to the repository root, or null if repository is unconfigured
+ */
+export function linkForRepository(repository) {
+  const graph = get(universeGraph);
+  if (!graph?.repositories) {
+    return null;
+  }
+
+  const repoConfig = graph.repositories[repository];
+  if (!repoConfig) {
+    return null;
+  }
+
+  const { kind, options } = repoConfig;
+
+  // Handle GitHub repositories
+  if (kind === 'sprig-repository-github') {
+    // Prefer url if available, otherwise build from owner/repo
+    if (options?.url) {
+      const baseUrl = options.url;
+      // Remove trailing slash if present
+      return baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+    }
+    
+    const owner = options?.owner;
+    const repo = options?.repo;
+    if (owner && repo) {
+      const baseUrl = `https://github.com/${owner}/${repo}`;
+      // Remove trailing slash if present
+      return baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+    }
+  }
+
+  return null;
+}
+

package/src/lib/router.js

@@ -0,0 +1,75 @@
+/**
+ * Simple client-side router for CSR app
+ */
+
+/**
+ * Parse a route and extract parameters
+ * @param {string} pathname
+ * @returns {{ route: string, params: Record<string, string> } | null}
+ */
+export function parseRoute(pathname) {
+  // Remove leading/trailing slashes
+  const path = pathname.replace(/^\/+|\/+$/g, '');
+  
+  // Root route
+  if (!path || path === '') {
+    return { route: 'home', params: {} };
+  }
+
+  // Match /universes/:universe/series/:series
+  const seriesMatch = path.match(/^universes\/([^/]+)\/series\/([^/]+)$/);
+  if (seriesMatch) {
+    return {
+      route: 'series',
+      params: {
+        universe: seriesMatch[1],
+        series: seriesMatch[2],
+      },
+    };
+  }
+
+  // Match /universes/:universe/anthology/:anthology
+  const anthologyMatch = path.match(/^universes\/([^/]+)\/anthology\/([^/]+)$/);
+  if (anthologyMatch) {
+    return {
+      route: 'anthology',
+      params: {
+        universe: anthologyMatch[1],
+        anthology: anthologyMatch[2],
+      },
+    };
+  }
+
+  // Match /universes/:universe/concept/:id
+  const conceptMatch = path.match(/^universes\/([^/]+)\/concept\/(.+)$/);
+  if (conceptMatch) {
+    return {
+      route: 'concept',
+      params: {
+        universe: conceptMatch[1],
+        id: conceptMatch[2],
+      },
+    };
+  }
+
+  // Unknown route
+  return null;
+}
+
+/**
+ * Get current route from window.location
+ * @returns {{ route: string, params: Record<string, string> } | null}
+ */
+export function getCurrentRoute() {
+  return parseRoute(window.location.pathname);
+}
+
+/**
+ * Navigate to a new route
+ * @param {string} path
+ */
+export function navigate(path) {
+  window.history.pushState({}, '', path);
+  window.dispatchEvent(new PopStateEvent('popstate'));
+}
+

package/src/lib/stores/describeRenderMode.js

@@ -0,0 +1,9 @@
+import { writable } from 'svelte/store';
+
+/**
+ * Store for describe block rendering mode.
+ * Values: 'plain' | 'lists'
+ * Default: 'plain'
+ */
+export const describeRenderMode = writable(/** @type {'plain' | 'lists'} */ ('plain'));
+

package/src/lib/stores/theme.js

@@ -0,0 +1,98 @@
+import { writable } from 'svelte/store';
+
+/**
+ * Get system preference for color scheme
+ * @returns {'light' | 'dark'}
+ */
+function getSystemPreference() {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+/**
+ * Get initial theme: manual preference from localStorage, or system preference
+ * @returns {'light' | 'dark' | 'auto'}
+ */
+function getInitialTheme() {
+  if (typeof localStorage === 'undefined') return 'auto';
+  const stored = localStorage.getItem('theme');
+  if (stored === 'light' || stored === 'dark') return stored;
+  return 'auto'; // 'auto' means use system preference
+}
+
+/**
+ * Get effective theme (resolves 'auto' to system preference)
+ * @param {'light' | 'dark' | 'auto'} theme
+ * @returns {'light' | 'dark'}
+ */
+function getEffectiveTheme(theme) {
+  if (theme === 'auto') {
+    return getSystemPreference();
+  }
+  return theme;
+}
+
+const initial = getInitialTheme();
+export const theme = writable(initial);
+
+// Apply theme to document
+function applyTheme(themeValue) {
+  if (typeof document === 'undefined') return;
+  const effective = getEffectiveTheme(themeValue);
+  document.documentElement.dataset.theme = effective;
+}
+
+// Listen for system preference changes when theme is 'auto'
+let mediaQuery = null;
+let mediaQueryListener = null;
+
+function setupSystemPreferenceListener() {
+  if (typeof window === 'undefined') return;
+  if (mediaQuery) return; // Already set up
+  
+  mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  mediaQueryListener = () => {
+    // Re-read current theme value and reapply if it's 'auto'
+    const unsubscribe = theme.subscribe((t) => {
+      unsubscribe(); // Immediately unsubscribe to avoid memory leak
+      if (t === 'auto') {
+        applyTheme('auto');
+      }
+    });
+  };
+  mediaQuery.addEventListener('change', mediaQueryListener);
+}
+
+function cleanupSystemPreferenceListener() {
+  if (mediaQuery && mediaQueryListener) {
+    mediaQuery.removeEventListener('change', mediaQueryListener);
+    mediaQuery = null;
+    mediaQueryListener = null;
+  }
+}
+
+// Subscribe to theme changes
+let currentThemeValue = initial;
+theme.subscribe((t) => {
+  currentThemeValue = t;
+  applyTheme(t);
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem('theme', t);
+  }
+  
+  // Setup/cleanup system preference listener based on theme
+  if (t === 'auto') {
+    setupSystemPreferenceListener();
+  } else {
+    cleanupSystemPreferenceListener();
+  }
+});
+
+// Initialize: apply theme and setup listener if needed
+if (typeof window !== 'undefined') {
+  applyTheme(initial);
+  if (initial === 'auto') {
+    setupSystemPreferenceListener();
+  }
+}
+

package/src/main.js

@@ -0,0 +1,143 @@
+import './styles/app.css';
+import './lib/stores/theme.js'; // Initialize theme store
+import { theme } from './lib/stores/theme.js';
+import { get } from 'svelte/store';
+import App from './App.svelte';
+import { mount } from 'svelte';
+
+const target = document.getElementById('app');
+if (!target) {
+  throw new Error('Target element #app not found');
+}
+
+const app = mount(App, {
+  target,
+});
+
+// Initialize texture generation after component mounts (outside component to avoid effect_orphan)
+async function initTexture() {
+  try {
+    const textureModule = await import('@sprig-and-prose/sprig-texture');
+    const { generateTexture, releaseObjectUrl, sprigGrey, parchment, subtle } = textureModule;
+
+    const textureState = {
+      light: null,
+      dark: null,
+    };
+
+    /**
+     * Get system preference for color scheme
+     * @returns {'light' | 'dark'}
+     */
+    function getSystemPreference() {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    /**
+     * Get effective theme (resolves 'auto' to system preference)
+     * @param {'light' | 'dark' | 'auto'} themeValue
+     * @returns {'light' | 'dark'}
+     */
+    function getEffectiveTheme(themeValue) {
+      if (themeValue === 'auto') {
+        return getSystemPreference();
+      }
+      return themeValue;
+    }
+
+    function updateTexture(themeValue) {
+      const effectiveTheme = getEffectiveTheme(themeValue);
+      const url = effectiveTheme === 'dark' ? textureState.dark : textureState.light;
+      if (url) {
+        document.body.style.backgroundImage = `url(${url})`;
+        document.body.style.backgroundRepeat = 'repeat';
+        document.body.style.backgroundSize = '1024px 1024px';
+        document.body.style.backgroundAttachment = 'fixed';
+      }
+    }
+
+    // Generate both textures
+    const { url: lightUrl } = await generateTexture({
+      key: 'sprig-ui-csr-light',
+      palette: parchment,
+      preset: subtle,
+    });
+    textureState.light = lightUrl;
+
+    const { url: darkUrl } = await generateTexture({
+      key: 'sprig-ui-csr-dark',
+      palette: sprigGrey,
+      preset: subtle,
+    });
+    textureState.dark = darkUrl;
+
+    // Track current theme value
+    let currentThemeValue = get(theme);
+    
+    // Listen for system preference changes when theme is 'auto'
+    let mediaQuery = null;
+    let mediaQueryListener = null;
+
+    function setupSystemPreferenceListener() {
+      if (typeof window === 'undefined') return;
+      if (mediaQuery) return; // Already set up
+      
+      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      mediaQueryListener = () => {
+        // Only update texture if current theme is 'auto'
+        if (currentThemeValue === 'auto') {
+          updateTexture('auto');
+        }
+      };
+      mediaQuery.addEventListener('change', mediaQueryListener);
+    }
+
+    function cleanupSystemPreferenceListener() {
+      if (mediaQuery && mediaQueryListener) {
+        mediaQuery.removeEventListener('change', mediaQueryListener);
+        mediaQuery = null;
+        mediaQueryListener = null;
+      }
+    }
+
+    // Subscribe to theme changes
+    const unsubscribe = theme.subscribe((themeValue) => {
+      currentThemeValue = themeValue;
+      updateTexture(themeValue);
+      
+      // Setup/cleanup system preference listener based on theme
+      if (themeValue === 'auto') {
+        setupSystemPreferenceListener();
+      } else {
+        cleanupSystemPreferenceListener();
+      }
+    });
+
+    // Apply initial texture
+    updateTexture(get(theme));
+    
+    // Setup listener if initial theme is 'auto'
+    if (get(theme) === 'auto') {
+      setupSystemPreferenceListener();
+    }
+
+    // Store cleanup on window for potential cleanup
+    window.__textureCleanup = () => {
+      unsubscribe();
+      cleanupSystemPreferenceListener();
+      if (textureState.light) {
+        releaseObjectUrl(textureState.light);
+      }
+      if (textureState.dark) {
+        releaseObjectUrl(textureState.dark);
+      }
+    };
+  } catch (error) {
+    console.error('Failed to generate texture:', error);
+  }
+}
+
+// Initialize texture after component is mounted
+setTimeout(initTexture, 0);
+
+export default app;

package/src/pages/AnthologyPage.svelte

@@ -0,0 +1,84 @@
+<script>
+  import { currentAnthology, anthologySeries, universeGraph, currentUniverseName, universeRootNode, getNodeRoute, currentAnthologyId } from '../lib/data/universeStore.js';
+  import { getDisplayTitle } from '../lib/format/title.js';
+  import Prose from '../lib/components/Prose.svelte';
+  import ContentsCard from '../lib/components/ContentsCard.svelte';
+  import FooterStatus from '../lib/components/FooterStatus.svelte';
+  import PageHeader from '../lib/components/PageHeader.svelte';
+
+  /** @type {{ universe: string, anthology: string }} */
+  export let params;
+
+  // Update stores reactively when params change
+  $: {
+    const anthologyId = `${params.universe}:anthology:${params.anthology}`;
+    currentAnthologyId.set(anthologyId);
+    currentUniverseName.set(params.universe);
+  }
+
+  $: subtitle = $universeRootNode 
+    ? `An anthology in <a href="/">${getDisplayTitle($universeRootNode) || params.universe}</a>`
+    : `An anthology in ${params.universe}`;
+</script>
+
+{#if $currentAnthology}
+  <PageHeader title={getDisplayTitle($currentAnthology)} {subtitle} />
+
+  <div class="grid">
+    <section class="narrative">
+      {#if $currentAnthology.describe}
+        <Prose textBlock={$currentAnthology.describe} />
+      {/if}
+    </section>
+
+    <aside class="index">
+      <ContentsCard children={$anthologySeries} />
+    </aside>
+  </div>
+
+  <FooterStatus graph={$universeGraph} root={$universeRootNode} />
+{:else}
+  <div class="loading">Loading…</div>
+{/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%;
+  }
+
+  .loading {
+    color: var(--text-tertiary);
+    padding: 24px 0;
+  }
+
+  @media (max-width: 768px) {
+    .grid {
+      grid-template-columns: 1fr;
+      gap: 32px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .grid {
+      gap: 32px;
+    }
+  }
+</style>
+