svelteplot 0.6.0 → 0.7.0-pr-274.0

package/dist/ui/ExamplesPagePreview.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+    import { resolve } from '$app/paths';
+
+    const exampleImages = import.meta.glob('../../../static/examples/*/*.png', {
+        eager: true,
+        query: {
+            enhanced: true,
+            w: 440
+        }
+    });
+
+    let {
+        paths,
+        pages,
+        isDark
+    }: {
+        paths: Record<string, string[]>;
+        pages: Record<
+            string,
+            {
+                title: string;
+                description?: string;
+                sortKey?: number;
+                transforms?: string[];
+            }
+        >;
+        isDark: boolean;
+    } = $props();
+
+    function sortPages(a: string, b: string) {
+        const sortA = pages[a].sortKey ?? 10;
+        const sortB = pages[b].sortKey ?? 10;
+        return sortA - sortB;
+    }
+</script>
+
+<div class="column-container">
+    {#each Object.entries(paths).sort( (a, b) => a[0].localeCompare(b[0]) ) as [group, groupPages] (group)}
+        <div>
+            <h2 id={group}>
+                <a href={resolve(`/examples/${group}`)}
+                    >{pages[groupPages.find((p) => p.endsWith('/_index.svelte'))]?.title ??
+                        group}</a>
+            </h2>
+            <div class="example-grid">
+                {#each groupPages
+                    .sort(sortPages)
+                    .filter((p) => !p.endsWith('/_index.svelte')) as page (page)}
+                    <a
+                        animate:slide
+                        href={resolve(page.replace('./', './examples/').replace('.svelte', ''))}
+                        ><div>
+                            <enhanced:img
+                                title={pages[page].title}
+                                src={exampleImages[
+                                    `../../../static/examples/${page
+                                        .replace('./', '')
+                                        .replace('.svelte', isDark ? '.dark.png' : '.png')}`
+                                ].default}
+                                alt={pages[page].title} />
+                            <div class="title">{pages[page].title}</div>
+                        </div></a>
+                {/each}
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style>
+    :global(.content) h2 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem;
+        text-transform: capitalize;
+        border: 0;
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+    }
+
+    .column-container {
+        container-type: inline-size;
+
+        h3 {
+            break-before: avoid-column;
+            text-transform: capitalize;
+        }
+    }
+
+    .example-grid {
+        --example-grid-columns: 5;
+
+        /* width: 100%; */
+        display: grid;
+        /* overflow-x: clip; */
+        grid-template-columns: repeat(var(--example-grid-columns), 1fr);
+        grid-auto-rows: 1fr;
+        gap: 1.25rem;
+
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        .title {
+            font-size: 0.75rem;
+            opacity: 0.8;
+            line-height: 1.2;
+            text-decoration: none;
+        }
+    }
+
+    @container (max-width: 800px) {
+        .example-grid {
+            --example-grid-columns: 4;
+        }
+    }
+    @container (max-width: 600px) {
+        .example-grid {
+            --example-grid-columns: 3;
+        }
+    }
+    @container (max-width: 500px) {
+        .example-grid {
+            --example-grid-columns: 2;
+        }
+    }
+
+    .example-grid :global(img) {
+        height: auto !important;
+        aspect-ratio: 4 / 3;
+        object-fit: cover;
+        width: 100%;
+        height: auto;
+
+        position: relative;
+        transition: transform 0.05s ease-out;
+        &:hover {
+            transform: scale(1.5);
+            object-fit: contain;
+            z-index: 1;
+
+            background: fixed var(--svelteplot-bg);
+
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+    }
+</style>

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    paths: Record<string, string[]>;
+    pages: Record<string, {
+        title: string;
+        description?: string;
+        sortKey?: number;
+        transforms?: string[];
+    }>;
+    isDark: boolean;
+};
+declare const ExamplesPagePreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExamplesPagePreview = ReturnType<typeof ExamplesPagePreview>;
+export default ExamplesPagePreview;

package/package.json

@@ -1,134 +1,136 @@
 {
-  "name": "svelteplot",
-  "version": "0.6.0",
-  "license": "ISC",
-  "author": {
-    "name": "Gregor Aisch",
-    "email": "gka@users.noreply.github.com"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+    "name": "svelteplot",
+    "version": "0.7.0-pr-274.0",
+    "license": "ISC",
+    "author": {
+        "name": "Gregor Aisch",
+        "email": "gka@users.noreply.github.com"
     },
-    "./*.js": {
-      "import": "./dist/*.js"
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "test": "npm run test:unit",
+        "test:visual": "node scripts/visual-regression.js",
+        "vr:report": "node scripts/vr-report.js",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "lint": "prettier --check src && eslint src",
+        "format": "prettier --write .",
+        "test:unit": "vitest",
+        "prepack": "npx svelte-package",
+        "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
+        "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/",
+        "screenshots": "node screenshot-examples.js",
+        "check-js-extensions": "node scripts/check-js-extensions.js src"
     },
-    "./*.svelte": {
-      "import": "./dist/*.svelte"
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "svelte": "./dist/index.js"
+        },
+        "./*.js": {
+            "import": "./dist/*.js"
+        },
+        "./*.svelte": {
+            "import": "./dist/*.svelte"
+        },
+        "./core/*.svelte": {
+            "import": "./dist/core/*.svelte"
+        },
+        "./marks/*.svelte": {
+            "import": "./dist/marks/*.svelte"
+        },
+        "./transforms": {
+            "import": "./dist/transforms/index.js"
+        }
     },
-    "./core/*.svelte": {
-      "import": "./dist/core/*.svelte"
+    "main": "./dist/index.js",
+    "files": [
+        "dist",
+        "!dist/**/*.test.*",
+        "!dist/**/*.spec.*"
+    ],
+    "devDependencies": {
+        "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
+        "@emotion/css": "^11.13.5",
+        "@sveltejs/adapter-auto": "^7.0.0",
+        "@sveltejs/adapter-static": "^3.0.10",
+        "@sveltejs/enhanced-img": "^0.6.1",
+        "@sveltejs/eslint-config": "^8.3.4",
+        "@sveltejs/kit": "^2.48.5",
+        "@sveltejs/package": "^2.5.4",
+        "@sveltejs/vite-plugin-svelte": "5.1.1",
+        "@sveltepress/theme-default": "^6.0.4",
+        "@sveltepress/twoslash": "^1.2.2",
+        "@sveltepress/vite": "^1.2.2",
+        "@testing-library/svelte": "^5.2.9",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/d3-array": "^3.2.2",
+        "@types/d3-color": "^3.1.3",
+        "@types/d3-dsv": "^3.0.7",
+        "@types/d3-geo": "^3.1.0",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-path": "^3.1.1",
+        "@types/d3-quadtree": "^3.0.6",
+        "@types/d3-random": "^3.0.3",
+        "@types/d3-scale": "^4.0.9",
+        "@types/d3-scale-chromatic": "^3.1.0",
+        "@types/d3-shape": "^3.1.7",
+        "@types/geojson": "^7946.0.16",
+        "@types/topojson": "^3.2.6",
+        "@types/topojson-client": "^3.1.5",
+        "@typescript-eslint/eslint-plugin": "^8.46.4",
+        "@typescript-eslint/parser": "^8.46.4",
+        "csstype": "^3.2.1",
+        "d3-dsv": "^3.0.1",
+        "d3-fetch": "^3.0.1",
+        "d3-force": "^3.0.0",
+        "eslint": "^9.39.1",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-svelte": "3.13.0",
+        "jsdom": "^27.2.0",
+        "prettier": "^3.6.2",
+        "prettier-plugin-svelte": "^3.4.0",
+        "puppeteer": "^24.30.0",
+        "remark-code-extra": "^1.0.1",
+        "remark-code-frontmatter": "^1.0.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "sass": "^1.94.0",
+        "svelte-check": "^4.3.4",
+        "svelte-eslint-parser": "1.4.0",
+        "svelte-highlight": "^7.9.0",
+        "svg-path-parser": "^1.1.0",
+        "topojson-client": "^3.1.0",
+        "ts-essentials": "^10.1.1",
+        "tslib": "^2.8.1",
+        "typedoc": "^0.28.14",
+        "typedoc-plugin-markdown": "^4.9.0",
+        "typescript": "^5.9.3",
+        "vite": "^6.4.1",
+        "vitest": "^4.0.9",
+        "vitest-matchmedia-mock": "^2.0.3",
+        "yoctocolors": "^2.1.2"
     },
-    "./marks/*.svelte": {
-      "import": "./dist/marks/*.svelte"
-    },
-    "./transforms": {
-      "import": "./dist/transforms/index.js"
+    "types": "./dist/index.d.ts",
+    "type": "module",
+    "dependencies": {
+        "d3-array": "^3.2.4",
+        "d3-color": "^3.1.0",
+        "d3-format": "^3.1.0",
+        "d3-geo": "^3.1.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-path": "^3.1.0",
+        "d3-quadtree": "^3.0.1",
+        "d3-random": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.1.0",
+        "d3-shape": "^3.2.0",
+        "d3-time": "^3.1.0",
+        "es-toolkit": "^1.41.0",
+        "fast-equals": "^5.3.3",
+        "interval-tree-1d": "^1.0.4",
+        "merge-deep": "^3.0.3",
+        "svelte": "5"
     }
-  },
-  "main": "./dist/index.js",
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "devDependencies": {
-    "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
-    "@emotion/css": "^11.13.5",
-    "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/eslint-config": "^8.3.4",
-    "@sveltejs/kit": "^2.47.3",
-    "@sveltejs/package": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "5.1.1",
-    "@sveltepress/theme-default": "^6.0.4",
-    "@sveltepress/twoslash": "^1.2.2",
-    "@sveltepress/vite": "^1.2.2",
-    "@testing-library/svelte": "^5.2.8",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/d3-array": "^3.2.2",
-    "@types/d3-color": "^3.1.3",
-    "@types/d3-dsv": "^3.0.7",
-    "@types/d3-geo": "^3.1.0",
-    "@types/d3-interpolate": "^3.0.4",
-    "@types/d3-path": "^3.1.1",
-    "@types/d3-quadtree": "^3.0.6",
-    "@types/d3-random": "^3.0.3",
-    "@types/d3-scale": "^4.0.9",
-    "@types/d3-scale-chromatic": "^3.1.0",
-    "@types/d3-shape": "^3.1.7",
-    "@types/geojson": "^7946.0.16",
-    "@types/topojson": "^3.2.6",
-    "@types/topojson-client": "^3.1.5",
-    "@typescript-eslint/eslint-plugin": "^8.46.2",
-    "@typescript-eslint/parser": "^8.46.2",
-    "csstype": "^3.1.3",
-    "d3-dsv": "^3.0.1",
-    "d3-fetch": "^3.0.1",
-    "d3-force": "^3.0.0",
-    "eslint": "^9.38.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "3.12.5",
-    "jsdom": "^26.1.0",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "puppeteer": "^24.26.1",
-    "remark-code-extra": "^1.0.1",
-    "remark-code-frontmatter": "^1.0.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.93.2",
-    "svelte-check": "^4.3.3",
-    "svelte-eslint-parser": "1.4.0",
-    "svelte-highlight": "^7.9.0",
-    "svg-path-parser": "^1.1.0",
-    "topojson-client": "^3.1.0",
-    "ts-essentials": "^10.1.1",
-    "tslib": "^2.8.1",
-    "typedoc": "^0.28.14",
-    "typedoc-plugin-markdown": "^4.9.0",
-    "typescript": "^5.9.3",
-    "vite": "^6.4.1",
-    "vitest": "^3.2.4",
-    "vitest-matchmedia-mock": "^2.0.3",
-    "yoctocolors": "^2.1.2"
-  },
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "dependencies": {
-    "d3-array": "^3.2.4",
-    "d3-color": "^3.1.0",
-    "d3-format": "^3.1.0",
-    "d3-geo": "^3.1.1",
-    "d3-interpolate": "^3.0.1",
-    "d3-path": "^3.1.0",
-    "d3-quadtree": "^3.0.1",
-    "d3-random": "^3.0.1",
-    "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.1.0",
-    "d3-shape": "^3.2.0",
-    "d3-time": "^3.1.0",
-    "es-toolkit": "^1.41.0",
-    "fast-equals": "^5.3.2",
-    "interval-tree-1d": "^1.0.4",
-    "merge-deep": "^3.0.3",
-    "svelte": "5.43.0"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "npm run test:unit",
-    "test:visual": "node scripts/visual-regression.js",
-    "vr:report": "node scripts/vr-report.js",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check src && eslint src",
-    "format": "prettier --write .",
-    "test:unit": "vitest",
-    "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
-    "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/",
-    "screenshots": "node screenshot-examples.js",
-    "check-js-extensions": "node scripts/check-js-extensions.js src"
-  }
-}
+}