svelteplot 0.7.0-pr-276.0 → 0.7.0-pr-276.1

package/dist/ui/ExamplesGrid.svelte

@@ -1,14 +1,28 @@
 <script>
     import { resolve } from '$app/paths';
+    import { useDark } from './isDark.svelte';
     let { examples } = $props();
+
+    const exampleImages = import.meta.glob('../../snapshots/*/*.png', {
+        eager: true,
+        query: {
+            enhanced: true,
+            w: 640
+        }
+    });
+
+    const ds = useDark();
 </script>
 
 <div class="list">
     {#each examples as page, i (i)}
         <a href={resolve(page.url)}>
             <div>
-                {#if page.screenshot}
-                    <img src={page.screenshot} alt={page.title} />{/if}
+                <enhanced:img
+                    src={ds.isDark
+                        ? exampleImages[`../../snapshots/${page.key}.dark.png`].default.img.src
+                        : exampleImages[`../../snapshots/${page.key}.png`].default.img.src}
+                    alt={page.title} />
             </div>
             <h4>
                 {page.title}
@@ -49,7 +63,7 @@
         }
     }
 
-    .list img {
+    .list :global(img) {
         width: 100%;
         box-sizing: border-box;
         border-radius: 3px;

package/dist/ui/ExamplesPagePreview.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
+    import { useDark } from './isDark.svelte';
 
-    const exampleImages = import.meta.glob('../../../static/examples/*/*.png', {
+    const exampleImages = import.meta.glob('../../snapshots/*/*.png', {
         eager: true,
         query: {
             enhanced: true,
@@ -11,8 +12,7 @@
 
     let {
         paths,
-        pages,
-        isDark
+        pages
     }: {
         paths: Record<string, string[]>;
         pages: Record<
@@ -24,9 +24,10 @@
                 transforms?: string[];
             }
         >;
-        isDark: boolean;
     } = $props();
 
+    const ds = useDark();
+
     function sortPages(a: string, b: string) {
         const sortA = pages[a].sortKey ?? 10;
         const sortB = pages[b].sortKey ?? 10;
@@ -53,9 +54,9 @@
                             <enhanced:img
                                 title={pages[page].title}
                                 src={exampleImages[
-                                    `../../../static/examples/${page
+                                    `../../snapshots/${page
                                         .replace('./', '')
-                                        .replace('.svelte', isDark ? '.dark.png' : '.png')}`
+                                        .replace('.svelte', ds.isDark ? '.dark.png' : '.png')}`
                                 ].default}
                                 alt={pages[page].title} />
                             <div class="title">{pages[page].title}</div>

package/dist/ui/ExamplesPagePreview.svelte.d.ts

@@ -6,7 +6,6 @@ type $$ComponentProps = {
         sortKey?: number;
         transforms?: string[];
     }>;
-    isDark: boolean;
 };
 declare const ExamplesPagePreview: import("svelte").Component<$$ComponentProps, {}, "">;
 type ExamplesPagePreview = ReturnType<typeof ExamplesPagePreview>;

package/dist/ui/isDark.svelte.d.ts

@@ -0,0 +1,6 @@
+declare class DarkState {
+    isDark: boolean;
+    constructor();
+}
+export declare function useDark(): DarkState;
+export {};

package/dist/ui/isDark.svelte.js

@@ -0,0 +1,10 @@
+class DarkState {
+    isDark = $state(false);
+    constructor() {
+        this.isDark = false;
+    }
+}
+const darkState = new DarkState();
+export function useDark() {
+    return darkState;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.7.0-pr-276.0",
+    "version": "0.7.0-pr-276.1",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",