@sprig-and-prose/sprig-ui 0.1.0

package/src/main.js

@@ -0,0 +1,154 @@
+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) {
+        // Apply texture to body
+        document.body.style.backgroundImage = `url(${url})`;
+        document.body.style.backgroundRepeat = 'repeat';
+        document.body.style.backgroundSize = '1024px 1024px';
+        document.body.style.backgroundAttachment = 'fixed';
+        
+        // Apply same texture to top bar so it matches the background
+        const topBar = document.querySelector('.top-bar');
+        if (topBar) {
+          topBar.style.backgroundImage = `url(${url})`;
+          topBar.style.backgroundRepeat = 'repeat';
+          topBar.style.backgroundSize = '1024px 1024px';
+          topBar.style.backgroundAttachment = 'fixed';
+          topBar.style.backgroundPosition = '0 0'; // Align with body
+        }
+      }
+    }
+
+    // Generate both textures
+    const { url: lightUrl } = await generateTexture({
+      key: 'sprig-ui-light',
+      palette: parchment,
+      preset: subtle,
+    });
+    textureState.light = lightUrl;
+
+    const { url: darkUrl } = await generateTexture({
+      key: 'sprig-ui-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/ConceptPage.svelte

@@ -0,0 +1,88 @@
+<script>
+  import { universeGraph, currentUniverseName, getNodeRoute, getRelationshipsForNode, getAncestorChain, organizeChildren } from '../lib/data/universeStore.js';
+  import { getDisplayTitle } from '../lib/format/title.js';
+  import { getDisplayKind } from '../lib/format/kind.js';
+  import Prose from '../lib/components/Prose.svelte';
+  import ContentsCard from '../lib/components/ContentsCard.svelte';
+  import NodePageLayout from '../lib/components/NodePageLayout.svelte';
+  import RelationshipsSection from '../lib/components/RelationshipsSection.svelte';
+
+  /** @type {{ universe: string, id: string }} */
+  export let params;
+
+  $: currentUniverseName.set(params.universe);
+
+  $: nodeId = decodeURIComponent(params.id);
+  $: currentNode = $universeGraph?.nodes[nodeId];
+  $: childIds = currentNode?.children || [];
+  $: rawChildren = childIds
+    .map((id) => $universeGraph?.nodes[id])
+    .filter(Boolean) || [];
+  $: sameDimensionPeers = (() => {
+    if (!currentNode?.dimension || !$universeGraph?.nodes) return [];
+    return Object.values($universeGraph.nodes)
+      .filter((node) => node.id !== currentNode.id)
+      .filter((node) => node.dimension === currentNode.dimension);
+  })();
+  $: navChildren = (() => {
+    const byId = new Map();
+    for (const child of rawChildren) {
+      if (child) {
+        byId.set(child.id, child);
+      }
+    }
+    for (const peer of sameDimensionPeers) {
+      byId.set(peer.id, peer);
+    }
+    return Array.from(byId.values());
+  })();
+  $: organizedChildren = currentNode ? organizeChildren(navChildren) : { primary: [], other: [] };
+  $: hasIndex = organizedChildren.primary.length > 0 || organizedChildren.other.length > 0;
+  $: relationships = currentNode ? getRelationshipsForNode($universeGraph, nodeId) : [];
+  $: ancestors = currentNode ? getAncestorChain($universeGraph, currentNode) : [];
+
+  $: subtitle = (() => {
+    if (!currentNode) return '';
+    const displayKind = getDisplayKind(currentNode);
+    if (ancestors.length > 0) {
+      const parent = ancestors[0];
+      return `A ${displayKind} in <a href="${getNodeRoute(parent)}">${getDisplayTitle(parent)}</a>`;
+    }
+    return `A ${displayKind} in ${params.universe}`;
+  })();
+</script>
+
+{#if currentNode}
+  <NodePageLayout
+    title={getDisplayTitle(currentNode)}
+    {subtitle}
+    graph={$universeGraph}
+    showIndex={hasIndex}
+  >
+    <svelte:fragment slot="narrative">
+      <Prose textBlock={currentNode.describe} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="index">
+      {@const allChildren = [...organizedChildren.primary, ...organizedChildren.other]}
+      <ContentsCard children={allChildren} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="sections">
+      <RelationshipsSection
+        {relationships}
+      />
+    </svelte:fragment>
+  </NodePageLayout>
+{:else}
+  <div class="loading">Loading…</div>
+{/if}
+
+<style>
+  .loading {
+    color: var(--text-tertiary);
+    padding: 24px 0;
+  }
+</style>
+
+

package/src/pages/HomePage.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { getDisplayTitle } from '../lib/format/title.js';
+  import { universeRootNode, rootChildren, universeGraph } from '../lib/data/universeStore.js';
+  import Prose from '../lib/components/Prose.svelte';
+  import ContentsCard from '../lib/components/ContentsCard.svelte';
+  import NodePageLayout from '../lib/components/NodePageLayout.svelte';
+
+  /** @param {string} s */
+  const firstSentence = (s) => {
+    if (!s) return '';
+    const idx = s.indexOf('.');
+    return idx >= 0 ? s.slice(0, idx + 1) : s;
+  };
+
+  $: subtitle = $universeRootNode?.describe?.normalized || $universeRootNode?.describe?.raw
+    ? firstSentence($universeRootNode.describe?.normalized ?? $universeRootNode.describe?.raw)
+    : null;
+
+  $: hasIndex = $rootChildren.primary.length > 0 || $rootChildren.other.length > 0;
+</script>
+
+{#if $universeRootNode}
+  <NodePageLayout
+    title={getDisplayTitle($universeRootNode)}
+    {subtitle}
+    graph={$universeGraph}
+    showIndex={hasIndex}
+  >
+    <svelte:fragment slot="narrative">
+      <Prose textBlock={$universeRootNode.describe} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="index">
+      {@const allChildren = [...$rootChildren.primary, ...$rootChildren.other]}
+      <ContentsCard children={allChildren} />
+    </svelte:fragment>
+  </NodePageLayout>
+{:else}
+  <div class="loading">Loading…</div>
+{/if}
+
+<style>
+  .loading {
+    color: var(--text-tertiary);
+    padding: 24px 0;
+  }
+</style>
+

package/src/server.js

@@ -0,0 +1,115 @@
+import { createServer } from 'http';
+import { readFileSync, existsSync, statSync } from 'fs';
+import { join, extname, resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const mimeTypes = {
+  '.html': 'text/html',
+  '.js': 'application/javascript',
+  '.json': 'application/json',
+  '.css': 'text/css',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.eot': 'application/vnd.ms-fontobject',
+};
+
+/**
+ * Create and return the HTTP server
+ * @param {string} manifestPath - Path to manifest.json file
+ * @returns {import('http').Server}
+ */
+export function createAppServer(manifestPath) {
+  const distDir = resolve(__dirname, '../dist');
+  const manifestFilePath = resolve(process.cwd(), manifestPath);
+
+  const server = createServer((req, res) => {
+    const url = new URL(req.url || '/', `http://${req.headers.host}`);
+    const pathname = url.pathname;
+
+    // Handle /_ui/* routes - serve static files from dist/
+    if (pathname.startsWith('/_ui/')) {
+      // Remove /_ui prefix to get the file path relative to dist/
+      const filePath = pathname.slice(5); // Remove '/_ui/'
+      const fullPath = join(distDir, filePath);
+
+      // Security: ensure file is within dist directory
+      const resolvedPath = resolve(fullPath);
+      if (!resolvedPath.startsWith(resolve(distDir))) {
+        res.writeHead(403, { 'Content-Type': 'text/plain' });
+        res.end('Forbidden');
+        return;
+      }
+
+      if (!existsSync(resolvedPath) || !statSync(resolvedPath).isFile()) {
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('Not Found');
+        return;
+      }
+
+      try {
+        const content = readFileSync(resolvedPath);
+        const ext = extname(resolvedPath);
+        const contentType = mimeTypes[ext] || 'application/octet-stream';
+
+        res.writeHead(200, { 'Content-Type': contentType });
+        res.end(content);
+      } catch (error) {
+        res.writeHead(500, { 'Content-Type': 'text/plain' });
+        res.end('Internal Server Error');
+      }
+      return;
+    }
+
+    // Handle /api/manifest route
+    if (pathname === '/api/manifest') {
+      if (!existsSync(manifestFilePath) || !statSync(manifestFilePath).isFile()) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Manifest not found' }));
+        return;
+      }
+
+      try {
+        const content = readFileSync(manifestFilePath, 'utf-8');
+        const headers = {
+          'Content-Type': 'application/json',
+          'X-Describe-Render-Mode': 'lists',
+        };
+        res.writeHead(200, headers);
+        res.end(content);
+      } catch (error) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Error reading manifest' }));
+      }
+      return;
+    }
+
+    // All other routes - serve index.html for client-side routing
+    const indexPath = join(distDir, 'index.html');
+    if (!existsSync(indexPath)) {
+      res.writeHead(404, { 'Content-Type': 'text/plain' });
+      res.end('Not Found - dist/index.html does not exist. Run "npm run build" first.');
+      return;
+    }
+
+    try {
+      const content = readFileSync(indexPath, 'utf-8');
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.end(content);
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'text/plain' });
+      res.end('Internal Server Error');
+    }
+  });
+
+  return server;
+}
+