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

package/src/pages/HomePage.svelte

@@ -0,0 +1,80 @@
+<script>
+  import { universeRootNode, rootChildren, rootAnthologies, rootUngroupedSeries, universeGraph } from '../lib/data/universeStore.js';
+  import UniverseHeader from '../lib/components/UniverseHeader.svelte';
+  import Prose from '../lib/components/Prose.svelte';
+  import ContentsCard from '../lib/components/ContentsCard.svelte';
+  import FooterStatus from '../lib/components/FooterStatus.svelte';
+</script>
+
+{#if $universeRootNode}
+  <UniverseHeader node={$universeRootNode} />
+
+  <div class="grid">
+    <section class="narrative">
+      <Prose textBlock={$universeRootNode.describe} />
+    </section>
+
+    <aside class="index">
+      {#if $rootAnthologies.length > 0}
+        <ContentsCard children={$rootAnthologies} title="Anthologies" />
+        {#if $rootUngroupedSeries.length > 0}
+          <div class="other-series">
+            <ContentsCard children={$rootUngroupedSeries} title="Other series" />
+          </div>
+        {/if}
+      {:else}
+        <ContentsCard children={$rootChildren} title="Concepts in this universe" />
+      {/if}
+    </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%;
+  }
+
+  .other-series {
+    margin-top: 1rem;
+  }
+
+  .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>
+