@samizdata/create-mozaic 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,20 @@
-# Temporary Holding Version
+# create-mozaic
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Scaffold a mozaic analysis project: R/Python data scripts plus Svelte charts built as static embeds.
+
+```bash
+pnpm create @samizdata/mozaic budget-2026 --locales ro,ru --title "Budget 2026"
+```
+
+| Option              |                                                                                 |
+| ------------------- | ------------------------------------------------------------------------------- |
+| `--locales`         | comma-separated `en`, `ro`, `ru` (default `en`)                                 |
+| `--title`           | project title                                                                   |
+| `--name`            | package name (default: from the folder)                                         |
+| `--mozaic`, `--cli` | a version range, or a local path to `packages/mozaic` / `packages/cli` (linked) |
+| `--no-git`          | skip `git init`                                                                 |
+| `--install`         | run `pnpm install`                                                              |
+
+The generated project contains `analysis/` (R and Python), `data/`, `src/charts/` with an example chart,
+a preview page, embed routes, `mozaic.config.ts`, a house style in `src/lib/theme.ts` (mozaic's `base`; swap in an outlet's brand theme), a `justfile`, `AGENTS.md`, a Claude Code skill and a
+GitHub Pages deploy workflow.

package/bin/create-mozaic.js

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+import { run } from '../src/index.js';
+
+run(process.argv.slice(2)).then(
+	(code) => process.exit(code),
+	(error) => {
+		console.error(`create-mozaic: ${error instanceof Error ? error.message : error}`);
+		process.exit(1);
+	}
+);

package/package.json

@@ -1,6 +1,35 @@
 {
   "name": "@samizdata/create-mozaic",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Scaffold a mozaic analysis project: R/Python data scripts plus Svelte charts built as static embeds.",
+  "license": "GPL-3.0-or-later",
+  "author": "Nicu Calcea",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/samizdata-co/mozaic.git",
+    "directory": "packages/create-mozaic"
+  },
+  "homepage": "https://github.com/samizdata-co/mozaic#readme",
+  "bugs": "https://github.com/samizdata-co/mozaic/issues",
+  "type": "module",
+  "bin": {
+    "create-mozaic": "./bin/create-mozaic.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "template"
+  ],
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.12"
+  },
+  "engines": {
+    "node": ">=22.17"
+  },
+  "scripts": {
+    "test": "vitest --run",
+    "check": "tsc -p jsconfig.json"
+  }
 }

package/src/index.js

@@ -0,0 +1,157 @@
+import { spawn } from 'node:child_process';
+import { cp, readdir, readFile, rename, stat, writeFile } from 'node:fs/promises';
+import { basename, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+
+export const LOCALES = ['en', 'ro', 'ru'];
+const TEMPLATE = fileURLToPath(new URL('../template', import.meta.url));
+// mozaic, @samizdata/mozaic-cli and create-mozaic are released together with the same version.
+const { version } = createRequire(import.meta.url)('../package.json');
+const TEXT = /\.(svelte|ts|js|json|md|yml|yaml|toml|R|py|csv|html|txt)$|^(justfile|_gitignore)$/;
+
+/**
+ * @typedef {{ dir: string, name?: string, title?: string, locales?: string[], mozaic?: string, cli?: string }} ScaffoldOptions
+ */
+
+/** @param {string} value */
+export function slugify(value) {
+	return value
+		.normalize('NFKD')
+		.replace(/[̀-ͯ]/g, '')
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, '-')
+		.replace(/^-|-$/g, '');
+}
+
+/**
+ * A dependency spec for mozaic packages: a version range, or `link:` for a local path.
+ * @param {string} value
+ */
+function spec(value) {
+	return /^[.~/]/.test(value) ? `link:${resolve(value)}` : value;
+}
+
+/**
+ * @param {string} dir
+ * @returns {AsyncGenerator<string>}
+ */
+async function* walk(dir) {
+	for (const entry of await readdir(dir, { withFileTypes: true })) {
+		const path = join(dir, entry.name);
+		if (entry.isDirectory()) yield* walk(path);
+		else yield path;
+	}
+}
+
+/**
+ * Copy the template into `dir` and fill in its placeholders.
+ * @param {ScaffoldOptions} options
+ * @returns {Promise<{ dir: string, name: string }>}
+ */
+export async function scaffold(options) {
+	const dir = resolve(options.dir);
+	const name = slugify(options.name ?? basename(dir));
+	if (!name) throw new Error('Could not derive a project name; pass --name.');
+	const locales = options.locales ?? ['en'];
+	const unknown = locales.filter((l) => !LOCALES.includes(l));
+	if (unknown.length || !locales.length)
+		throw new Error(`Unknown locale(s) ${unknown.join(', ')}. Locales: ${LOCALES.join(', ')}.`);
+
+	const existing = await readdir(dir).catch(() => []);
+	if (existing.length) throw new Error(`${dir} is not empty.`);
+
+	await cp(TEMPLATE, dir, {
+		recursive: true,
+		filter: (src) => !/[/\\](node_modules|\.svelte-kit|build)([/\\]|$)/.test(src)
+	});
+	await rename(join(dir, '_gitignore'), join(dir, '.gitignore'));
+
+	/** @type {Record<string, string>} */
+	const replacements = {
+		__PROJECT_NAME__: name,
+		__PROJECT_TITLE__: options.title ?? name,
+		__LOCALES__: JSON.stringify(locales).replace(/"/g, "'"),
+		__MOZAIC_SPEC__: spec(options.mozaic ?? `^${version}`),
+		__CLI_SPEC__: spec(options.cli ?? `^${version}`)
+	};
+	for await (const file of walk(dir)) {
+		if (!TEXT.test(basename(file))) continue;
+		const source = await readFile(file, 'utf8');
+		const filled = source.replace(/__[A-Z_]+__/g, (token) => replacements[token] ?? token);
+		if (filled !== source) await writeFile(file, filled);
+	}
+	return { dir, name };
+}
+
+/**
+ * @param {string} command
+ * @param {string[]} args
+ * @param {string} cwd
+ */
+function exec(command, args, cwd) {
+	return new Promise((ok, fail) => {
+		const child = spawn(command, args, { cwd, stdio: 'inherit', shell: process.platform === 'win32' });
+		child.on('exit', (code) => (code === 0 ? ok(undefined) : fail(new Error(`${command} ${args.join(' ')} failed`))));
+		child.on('error', fail);
+	});
+}
+
+const HELP = `create-mozaic — start a new mozaic analysis project
+
+Usage:
+  pnpm create @samizdata/mozaic <dir> [options]
+
+Options:
+  --locales <list>      comma-separated: ${LOCALES.join(',')} (default: en)
+  --title <text>        project title (default: the folder name)
+  --name <slug>         package name (default: from the folder name)
+  --mozaic <spec|path>  mozaic version, or a local path to packages/mozaic
+  --cli <spec|path>     @samizdata/mozaic-cli version, or a local path to packages/cli
+  --git / --no-git      initialise a git repository (default: yes)
+  --install             run pnpm install afterwards
+`;
+
+/**
+ * @param {string[]} argv
+ * @returns {Promise<number>}
+ */
+export async function run(argv) {
+	/** @type {Record<string, string | boolean>} */
+	const options = {};
+	/** @type {string[]} */
+	const positionals = [];
+	for (let i = 0; i < argv.length; i++) {
+		const arg = argv[i];
+		if (!arg.startsWith('--')) positionals.push(arg);
+		else if (arg.startsWith('--no-')) options[arg.slice(5)] = false;
+		else if (arg.includes('=')) options[arg.slice(2, arg.indexOf('='))] = arg.slice(arg.indexOf('=') + 1);
+		else if (argv[i + 1] && !argv[i + 1].startsWith('--')) options[arg.slice(2)] = argv[++i];
+		else options[arg.slice(2)] = true;
+	}
+	if (options.help || !positionals[0]) {
+		console.log(HELP);
+		return options.help ? 0 : 1;
+	}
+
+	const str = (/** @type {string} */ key) =>
+		typeof options[key] === 'string' ? /** @type {string} */ (options[key]) : undefined;
+	const { dir, name } = await scaffold({
+		dir: positionals[0],
+		name: str('name'),
+		title: str('title'),
+		locales: str('locales')?.split(','),
+		mozaic: str('mozaic'),
+		cli: str('cli')
+	});
+	if (options.git !== false)
+		await exec('git', ['init', '-q'], dir).catch(() => console.warn('git init failed; skipping.'));
+	if (options.install) await exec('pnpm', ['install'], dir);
+
+	const relative = positionals[0];
+	console.log(
+		`\nCreated ${name} in ${dir}\n\nNext:\n  cd ${relative}\n${options.install ? '' : '  pnpm install\n'}  pnpm dev\n`
+	);
+	await stat(dir);
+	return 0;
+}

package/template/.claude/skills/mozaic-chart/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: mozaic-chart
+description: Build or change a chart in this mozaic analysis project. Use when asked to add a chart, change how a chart looks, or chart new data.
+---
+
+# Build a mozaic chart
+
+1. **Data.** Find or create the tidy CSV in `data/processed/`. If it does not exist, add a step to
+   the analysis script (`analysis/R` or `analysis/py`) that writes it, and run it.
+2. **Form.** Pick the chart from what the data must show: magnitude → bars; change over time →
+   lines; parts of a whole → stacked bars (`StackedBarChart`) or a waffle; parts of a whole across groups of different sizes → mosaic (`MosaicChart`); distribution → beeswarm or histogram;
+   geography → choropleth; two values per item → dumbbell or slope; one item at two dates → arrow plot (`ArrowChart`), or bars
+   with a dot for the earlier date (`BarDotChart`) when the latest value matters most. One number → no chart.
+3. **Files.** Copy `src/charts/example/` to `src/charts/<slug>/`. Edit `data.ts` (import the CSV
+   with `?raw`, parse with `csvParse(raw, autoType)`, type the rows), `messages.ts` (title,
+   subtitle, alt, notes, source per language) and `Chart.svelte`.
+4. **Compose.** If a recipe in `@samizdata/mozaic/recipes` fits (`BarChart`, `ColumnChart`, `LineChart`,
+   `ScatterChart`, `ArrowChart`, `BarDotChart`, `StackedBarChart`, `MosaicChart`), wrap it: pass the data, accessors and strings. A new
+   form that other charts could reuse goes into mozaic as a recipe, not into this project.
+   Otherwise use `Chart` / `Header` / `Plot` / `Svg` / marks / guides / `Footer` from mozaic.
+   Prefer existing marks (`Bars`, `Line`, `Area`, `Points`, `Rects`, `Text`, `GeoPath`, `Treemap`,
+   `Waffle`, `Dumbbell`, `Slope`, `Beeswarm`) and annotations (`Callout`, `RefLine`, `RefBand`,
+   `Label`). Write raw SVG with `usePlot()` scales only when no mark fits.
+5. **Register** the chart in `src/charts/index.ts` (slug, title, component, print widths).
+6. **Check.** Run `pnpm check`. Open the preview with `pnpm dev` and look at the chart at 320 px
+   and 1000 px, in every language and in print; fix overlaps, clipped labels and empty states.
+7. **Build.** `pnpm build` must succeed; `pnpm export` produces print files when needed.

package/template/.github/workflows/deploy.yml

@@ -0,0 +1,38 @@
+# Builds the embeds and deploys them to GitHub Pages on every push to main.
+# Enable Pages (Settings → Pages → Source: GitHub Actions) before the first run.
+# Pages serves the site from a sub-path; embed pages use relative links, so that works.
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 12
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm check
+      - run: pnpm build
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: build
+      - id: deployment
+        uses: actions/deploy-pages@v4

package/template/AGENTS.md

@@ -0,0 +1,32 @@
+# AGENTS.md
+
+This repository holds the data analysis and charts for one story, built with
+the mozaic chart library (Svelte 5 + d3). House style: `src/lib/theme.ts`. Languages: see
+`mozaic.config.ts`.
+
+## Where things go
+
+- Data wrangling: `analysis/R` or `analysis/py`. Output tidy CSV to `data/processed/`.
+- Charts: `src/charts/<slug>/` with `Chart.svelte` (the chart), `data.ts` (load and type the
+  CSV), `messages.ts` (every user-facing string, per language). Register in `src/charts/index.ts`.
+- Do not edit `src/routes/embed/**`, `manifest.json` or `embed.js` routes; they are generic.
+
+## Chart conventions
+
+- Wrap everything in `<Chart {style} {locale} {medium} {width} alt="…">` with `Header`
+  (`Title`, `Subtitle`), a `Plot`, and `Footer` (`Notes`, `Source`).
+- Scales are plain d3 scales. Set the domain; `<Plot>` sets the range.
+- Draw in `<Svg>`; tooltips go in `<Html>`. Use `{#snippet children(plot)}` on `<Plot>`
+  to get ranged scales for tooltip positions.
+- Colours: `style.palettes` (the theme each chart receives); assign categorical colours by entity in order.
+  Text uses text colours (`var(--mz-color-text)`), never data colours.
+- Every chart needs `alt` text, a legend for 2+ series, and strings in every language.
+- Use the theme's breakpoints (`plot.breakpoint`) for small-screen layouts.
+
+## Before you finish
+
+- `pnpm check` passes.
+- Look at the preview (`pnpm dev`) at 320 px and 1000 px, in every language, and in print medium.
+- `pnpm build` succeeds.
+
+The full component reference and examples are in the mozaic docs site (the library's `apps/docs`).

package/template/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/template/README.md

@@ -0,0 +1,57 @@
+# __PROJECT_TITLE__
+
+Charts for one piece of analysis, built with mozaic. The house style is in
+`src/lib/theme.ts`.
+
+## Layout
+
+```
+analysis/        R and Python scripts: data/raw → data/processed
+data/raw/        source files (not committed)
+data/processed/  tidy CSV the charts read (committed)
+src/charts/      one folder per chart (Chart.svelte, data.ts, messages.ts) + index.ts registry
+src/lib/theme.ts the house style
+src/routes/      preview page, embed pages, manifest, embed.js (no need to edit)
+mozaic.config.ts project name, languages, public URL
+```
+
+## Workflow
+
+```bash
+pnpm install
+just data      # run the analysis scripts (or: Rscript analysis/R/01_prepare.R)
+pnpm dev       # preview at http://localhost:5173
+pnpm check     # type-check
+pnpm build     # static embeds in build/
+pnpm export    # SVG, PDF and PNG in exports/ (needs a Chromium; see below)
+```
+
+## Adding a chart
+
+1. Write the data to `data/processed/<name>.csv` from your analysis script (tidy, one row per observation).
+2. Copy `src/charts/example/` to `src/charts/<name>/` and edit `data.ts`, `messages.ts` and `Chart.svelte`.
+3. Register it in `src/charts/index.ts`.
+4. Check it in the preview at small (320 px) and large widths, in each language, and in print.
+
+See `AGENTS.md` for the conventions, and the mozaic gallery for examples to copy.
+
+## Publishing
+
+`pnpm build` writes a static site to `build/`. Upload it anywhere (the included
+GitHub Actions workflow deploys to GitHub Pages). Set `baseUrl` in
+`mozaic.config.ts` to the public URL so the preview page shows correct embed codes.
+
+Each chart is at `embed/<slug>/<locale>/`. To embed it, paste the code from the
+preview page into the CMS. It is an iframe plus `embed.js`, which resizes the
+iframe to fit the chart.
+
+## Print and image export
+
+`pnpm export` renders every embed with a headless Chromium and writes, per chart
+and language:
+
+- `web.png` (2×) and `web.svg` at 640 px
+- `print-<width>.svg` and `print-<width>.pdf` for each print width in `src/charts/index.ts`
+
+SVG text stays editable. If no Chromium is found, run `npx playwright install chromium`
+or pass `--browser /path/to/chrome`.

package/template/_gitignore

@@ -0,0 +1,13 @@
+node_modules
+.svelte-kit
+build
+exports
+.DS_Store
+.env
+.env.*
+data/raw/*
+!data/raw/.gitkeep
+.venv
+__pycache__
+.Rhistory
+renv/library

package/template/analysis/R/01_prepare.R

@@ -0,0 +1,21 @@
+# Prepare data for the charts.
+# Reads raw files from data/raw/ and writes tidy, long-format CSV to data/processed/.
+# Run from the project root: Rscript analysis/R/01_prepare.R
+# Uses base R only; add packages with renv (renv::init()) if you need them.
+
+raw_dir <- "data/raw"
+out_dir <- "data/processed"
+dir.create(out_dir, showWarnings = FALSE, recursive = TRUE)
+
+# Replace this block with your own wrangling. It writes the example dataset.
+years <- 2015:2024
+start <- c(North = 42, South = 35, Capital = 55)
+growth <- c(North = 1.6, South = 0.95, Capital = 3.9)
+dip_2020 <- c(North = 4, South = 3, Capital = 7)
+rows <- do.call(rbind, lapply(names(start), function(region) {
+  value <- start[[region]] + growth[[region]] * (years - 2015) - ifelse(years == 2020, dip_2020[[region]], 0)
+  data.frame(year = years, region = region, value = round(value))
+}))
+
+write.csv(rows, file.path(out_dir, "example.csv"), row.names = FALSE, quote = FALSE)
+message("Wrote ", nrow(rows), " rows to ", file.path(out_dir, "example.csv"))

package/template/analysis/py/prepare.py

@@ -0,0 +1,37 @@
+"""Prepare data for the charts.
+
+Reads raw files from data/raw/ and writes tidy, long-format CSV to
+data/processed/. Run from the project root: uv run analysis/py/prepare.py
+Uses the standard library only; add pandas/polars to pyproject.toml if needed.
+"""
+
+import csv
+from pathlib import Path
+
+OUT = Path("data/processed")
+
+
+def main() -> None:
+    OUT.mkdir(parents=True, exist_ok=True)
+    # Replace this with your own wrangling. It writes the example dataset.
+    start = {"North": 42, "South": 35, "Capital": 55}
+    growth = {"North": 1.6, "South": 0.95, "Capital": 3.9}
+    dip_2020 = {"North": 4, "South": 3, "Capital": 7}
+    rows = [
+        {
+            "year": year,
+            "region": region,
+            "value": round(start[region] + growth[region] * (year - 2015) - (dip_2020[region] if year == 2020 else 0)),
+        }
+        for region in start
+        for year in range(2015, 2025)
+    ]
+    with (OUT / "example.csv").open("w", newline="", encoding="utf-8") as f:
+        writer = csv.DictWriter(f, fieldnames=["year", "region", "value"], lineterminator="\n")
+        writer.writeheader()
+        writer.writerows(rows)
+    print(f"Wrote {len(rows)} rows to {OUT / 'example.csv'}")
+
+
+if __name__ == "__main__":
+    main()

package/template/data/processed/example.csv

@@ -0,0 +1,31 @@
+year,region,value
+2015,North,42
+2016,North,44
+2017,North,45
+2018,North,47
+2019,North,48
+2020,North,46
+2021,North,52
+2022,North,53
+2023,North,55
+2024,North,56
+2015,South,35
+2016,South,36
+2017,South,37
+2018,South,38
+2019,South,39
+2020,South,37
+2021,South,41
+2022,South,42
+2023,South,43
+2024,South,44
+2015,Capital,55
+2016,Capital,59
+2017,Capital,63
+2018,Capital,67
+2019,Capital,71
+2020,Capital,68
+2021,Capital,78
+2022,Capital,82
+2023,Capital,86
+2024,Capital,90

package/template/justfile

@@ -0,0 +1,25 @@
+# Common tasks. Install just: https://just.systems
+
+# Run the data pipeline (R and Python scripts) to refresh data/processed/
+data:
+    Rscript analysis/R/01_prepare.R
+    # uv run analysis/py/prepare.py
+
+# Preview every chart at http://localhost:5173
+dev:
+    pnpm dev
+
+# Type-check the charts
+check:
+    pnpm check
+
+# Build static embeds into build/
+build:
+    pnpm build
+
+# Export SVG, PDF and PNG files into exports/ (needs a Chromium)
+export: build
+    pnpm export
+
+# Everything: data, build, export
+all: data build export

package/template/mozaic.config.ts

@@ -0,0 +1,15 @@
+import type { LocaleCode } from '@samizdata/mozaic/locale';
+
+/** Project settings. Charts are registered in src/charts/index.ts. */
+export const config = {
+	/** Used in URLs and file names. */
+	project: '__PROJECT_NAME__',
+	title: '__PROJECT_TITLE__',
+	/** Languages to build. The first is the default. */
+	locales: __LOCALES__ as LocaleCode[],
+	/**
+	 * Public URL where `build/` will be deployed, with a trailing slash, e.g.
+	 * `https://charts.example.com/__PROJECT_NAME__/`. Used for embed codes.
+	 */
+	baseUrl: ''
+};

package/template/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "__PROJECT_NAME__",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"export": "mozaic export build",
+		"prepare": "svelte-kit sync || echo ''"
+	},
+	"dependencies": {
+		"d3-array": "^3.2.4",
+		"d3-dsv": "^3.0.1",
+		"d3-format": "^3.1.0",
+		"d3-geo": "^3.1.1",
+		"d3-scale": "^4.0.2",
+		"d3-shape": "^3.2.0",
+		"d3-time-format": "^4.1.0",
+		"@samizdata/mozaic": "__MOZAIC_SPEC__"
+	},
+	"devDependencies": {
+		"@samizdata/mozaic-cli": "__CLI_SPEC__",
+		"@sveltejs/adapter-static": "^4.0.0",
+		"@sveltejs/kit": "^3.1.0",
+		"@sveltejs/vite-plugin-svelte": "^7.3.1",
+		"@types/d3-array": "^3.2.1",
+		"@types/d3-dsv": "^3.0.7",
+		"@types/d3-scale": "^4.0.8",
+		"@types/d3-shape": "^3.1.6",
+		"svelte": "^5.57.2",
+		"svelte-check": "^4.7.7",
+		"typescript": "^6.0.3",
+		"vite": "^8.3.5"
+	},
+	"engines": {
+		"node": ">=22.17"
+	}
+}

package/template/pyproject.toml

@@ -0,0 +1,6 @@
+[project]
+name = "__PROJECT_NAME__-analysis"
+version = "0.1.0"
+description = "Data preparation for __PROJECT_TITLE__"
+requires-python = ">=3.12"
+dependencies = []

package/template/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/template/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="text-scale" content="scale" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>