@linguanahq/cli 0.1.0

package/dist/templates/storefront/solidjs/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/templates/storefront/solidjs/tsconfig.json

@@ -0,0 +1,24 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"moduleResolution": "Bundler",
+		"strict": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"noEmit": true,
+		"types": ["vite/client", "node"],
+		"jsx": "preserve",
+		"jsxImportSource": "solid-js"
+	},
+	"include": [
+		"src/**/*.ts",
+		"src/**/*.tsx",
+		"src/**/*.vue",
+		"src/**/*.svelte",
+		"vite.config.ts"
+	]
+}

package/dist/templates/storefront/solidjs/vite.config.ts

@@ -0,0 +1,36 @@
+import { linguana } from "@linguanahq/vite";
+import { solid } from "@linguanahq/vite/solid";
+import { defineConfig, loadEnv } from "vite";
+import native from "vite-plugin-solid";
+import config from "./linguana.json" with { type: "json" };
+
+export default defineConfig(({ mode }) => {
+	const env = { ...loadEnv(mode, process.cwd(), ""), ...process.env };
+	const connected = config.mode === "connected";
+	if (
+		connected &&
+		(!env.LINGUANA_PROJECT_ID ||
+			!env.VITE_LINGUANA_PUBLISHABLE_KEY ||
+			env.LINGUANA_PROJECT_ID !== env.VITE_LINGUANA_PROJECT_ID ||
+			env.LINGUANA_ENVIRONMENT !== env.VITE_LINGUANA_ENVIRONMENT ||
+			env.LINGUANA_API_URL !== env.VITE_LINGUANA_API_URL)
+	)
+		throw new Error(
+			"Linguana environment is incomplete or inconsistent. Run linguana env pull for this build mode.",
+		);
+	return {
+		plugins: [
+			linguana({
+				adapter: solid(),
+				projectId: connected ? env.LINGUANA_PROJECT_ID! : "demo-storefront",
+				environment: connected ? env.LINGUANA_ENVIRONMENT : "development",
+				sourceLocale: config.sourceLocale,
+				apiUrl: connected ? env.LINGUANA_API_URL : undefined,
+				token: connected ? env.LINGUANA_PROJECT_TOKEN : undefined,
+				upload: connected && env.LINGUANA_UPLOAD === "true",
+				translation: false,
+			}),
+			native(),
+		],
+	};
+});

package/dist/templates/storefront/solidjs/wrangler.jsonc

@@ -0,0 +1,8 @@
+{
+  "name": "linguana-demo-storefront-solidjs",
+  "compatibility_date": "2026-10-01",
+  "assets": {
+    "directory": "./dist",
+    "not_found_handling": "single-page-application"
+  }
+}

package/dist/templates/storefront/svelte/.env.example

@@ -0,0 +1,15 @@
+# Demo mode works without credentials. Connect with npx @linguanahq/cli link.
+# Copying this file alone does not enable connected mode; use linguana.json.
+# Build/server only. NEVER prefix the project token with VITE_.
+LINGUANA_PROJECT_ID=
+LINGUANA_ENVIRONMENT=development
+LINGUANA_API_URL=https://linguana-api.mohammedibrahim.dev
+LINGUANA_PROJECT_TOKEN=
+LINGUANA_UPLOAD=false
+# Paid translation is disabled; this template does not enable it automatically.
+LINGUANA_TRANSLATE=false
+# Browser-safe values. A publishable key reads published catalogs only.
+VITE_LINGUANA_PROJECT_ID=
+VITE_LINGUANA_ENVIRONMENT=development
+VITE_LINGUANA_API_URL=https://linguana-api.mohammedibrahim.dev
+VITE_LINGUANA_PUBLISHABLE_KEY=

package/dist/templates/storefront/svelte/ASSETS.md

@@ -0,0 +1 @@
+All illustrations in public/assets were drawn for these templates and are covered by LICENSE (MIT). Sample writing and translations are also MIT. No remote images, tracking pixels, or font services are used. Product images and prices describe fictional demonstration goods.

package/dist/templates/storefront/svelte/DEPLOY.md

@@ -0,0 +1,23 @@
+# Deploy Common Goods
+
+Demo mode needs no Linguana account. Hosting authentication is separate from the Linguana CLI.
+
+## Cloudflare Workers
+
+Install dependencies, choose a unique Worker name in wrangler.jsonc, then:
+
+```sh
+npx wrangler login
+npm run build
+npx wrangler deploy
+```
+
+Wrangler serves dist as static assets with single-page navigation fallback. Deep article/product links continue to work.
+
+## Any static host
+
+Run `npm run build` and publish dist/. Configure unknown paths to serve /index.html with status 200 (SPA fallback). A static preview can be started with `npm run preview`. Do not publish the project root.
+
+## Connected deployments
+
+Pull the intended environment with `linguana env pull --environment production`. Configure the variables from .env.example in the build host, including the matching public project/environment values. Build tokens are secrets used by the compiler only. Never upload .env files or the CLI account session. LINGUANA_TRANSLATE remains false. Catalog publication is an explicit dashboard action.

package/dist/templates/storefront/svelte/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Linguana contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/templates/storefront/svelte/README.md

@@ -0,0 +1,36 @@
+# Common Goods
+
+Everyday essentials, considered carefully. Product browsing, a persistent cart, and room to make it yours.
+
+A standalone svelte app, generated from Linguana templates v0.1.0. Requires Node 22.12+ (or Bun).
+
+## Run
+
+```sh
+npm install
+npm run dev
+```
+
+You can also use pnpm, Yarn, or Bun. English, French, Spanish, and Arabic catalogs are bundled in demo mode. No Linguana API requests are made. The language cookie persists between visits. Arabic switches the document to RTL.
+
+## Connect your own project
+
+```sh
+npx @linguanahq/cli login
+npx @linguanahq/cli link
+npx @linguanahq/cli doctor
+```
+
+Linking writes nonsecret `linguana.json` and ignored `.env.local`. The account session stays outside this project. Only the public project ID, environment, API URL, and publishable key reach the browser. Build tokens never belong in `VITE_*` variables.
+
+Connected mode uses your published project catalogs and English source fallback. It does not load demo translations. Builds can upload the source manifest but do not start paid translations or publish catalogs. Review and publish translations in your dashboard. Existing project languages remain unchanged unless you pass `--locales`.
+
+To target another environment, use `linguana env pull --environment staging`, then `npm run build -- --mode staging`. Production uses `.env.production.local` and Vite's default production build mode. Configure matching private and public values on your build host; see .env.example.
+
+## Customize
+
+Edit native components in src/App.svelte, literal messages in src/Copy.svelte, source fallbacks in src/messages.ts, and bundled demo catalogs in src/demo-messages.ts. Keep explicit message IDs stable. Each Copy branch is an extractable literal message; structured items in src/model.ts hold identifiers, prices, dates, and media only. Build output includes .linguana/manifest.json for review.
+
+The basket persists locally, validates stored quantities, and uses illustrative USD prices. Checkout is simulated; no payments or real orders are accepted.
+
+Run `npm run check-types` and `npm run build` before deploying. Deployment instructions are in DEPLOY.md. Source and illustrations are MIT; see LICENSE and ASSETS.md.

package/dist/templates/storefront/svelte/_gitignore

@@ -0,0 +1,11 @@
+node_modules/
+dist/
+.output/
+.nitro/
+.tanstack/
+.wrangler/
+.env
+.env.local
+.env.*.local
+.linguana/
+*.log

package/dist/templates/storefront/svelte/index.html

@@ -0,0 +1,2 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Everyday essentials, considered carefully. Product browsing, a persistent cart, and room to make it yours."><meta name="theme-color" content="#234f45"><title>Common Goods</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>

package/dist/templates/storefront/svelte/linguana.json

@@ -0,0 +1,10 @@
+{
+	"schemaVersion": 1,
+	"framework": "svelte",
+	"template": "storefront",
+	"templateVersion": "0.1.0",
+	"mode": "demo",
+	"apiUrl": "https://linguana-api.mohammedibrahim.dev",
+	"sourceLocale": "en",
+	"defaultEnvironment": "development"
+}

package/dist/templates/storefront/svelte/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "storefront-svelte",
+	"version": "0.1.0",
+	"private": true,
+	"type": "module",
+	"license": "MIT",
+	"engines": {
+		"node": ">=22.12.0"
+	},
+	"scripts": {
+		"dev": "vite --host 127.0.0.1",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check-types": "svelte-check --tsconfig ./tsconfig.json",
+		"deploy": "npm run build && wrangler deploy"
+	},
+	"dependencies": {
+		"@linguanahq/catalog": "0.1.1",
+		"@linguanahq/core": "0.1.1",
+		"@linguanahq/svelte": "0.1.1",
+		"svelte": "^5.43.8"
+	},
+	"devDependencies": {
+		"@linguanahq/vite": "0.1.1",
+		"typescript": "^6.0.0",
+		"vite": "^8.1.3",
+		"@types/node": "^24.0.0",
+		"wrangler": "^4.127.0",
+		"@sveltejs/vite-plugin-svelte": "^7.1.1",
+		"svelte-check": "^4.3.3"
+	}
+}

package/dist/templates/storefront/svelte/public/assets/collection.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#e7ecdc"/><path d="M0 455q400-65 800 0v145H0Z" fill="#d5d9c8"/><g transform="translate(-160 30) scale(.8)"><path d="M280 220h240l30 280H250Z" fill="#c7b48e"/><path d="M333 235v-65q67-80 134 0v65" fill="none" stroke="#a68f68" stroke-width="20"/><path d="M265 245h270M290 465h220" stroke="#dfd0b0" stroke-width="3"/><path d="M345 335h110v85H345Z" fill="#e2d5b7"/><path d="M383 358l18 25 18-25" fill="none" stroke="#778878" stroke-width="4"/></g><g transform="translate(300 -15) scale(.85)"><ellipse cx="410" cy="500" rx="130" ry="23" fill="#244f47"/><path d="M410 492V205q0-55 55-55" fill="none" stroke="#436d61" stroke-width="20"/><path d="M280 220q130-245 260 0Z" fill="#3d675b"/><ellipse cx="410" cy="220" rx="130" ry="18" fill="#e5cba1"/></g><g transform="translate(130 225) scale(.55)"><path d="M510 260h45q70 75-5 125h-45" fill="none" stroke="#a5755e" stroke-width="32"/><path d="M265 215h260l-18 240q-112 55-224 0Z" fill="#bf9176"/><ellipse cx="395" cy="215" rx="130" ry="30" fill="#d8b397"/><ellipse cx="395" cy="215" rx="105" ry="17" fill="#6b5748"/><path d="M290 245l12 150" stroke="#d8ad90" stroke-width="10"/></g></svg>

package/dist/templates/storefront/svelte/public/assets/product-1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#e8e3d9"/><ellipse cx="400" cy="519" rx="195" ry="22" fill="#263d3110"/><path d="M280 220h240l30 280H250Z" fill="#c7b48e"/><path d="M333 235v-65q67-80 134 0v65" fill="none" stroke="#a68f68" stroke-width="20"/><path d="M265 245h270M290 465h220" stroke="#dfd0b0" stroke-width="3"/><path d="M345 335h110v85H345Z" fill="#e2d5b7"/><path d="M383 358l18 25 18-25" fill="none" stroke="#778878" stroke-width="4"/></svg>

package/dist/templates/storefront/svelte/public/assets/product-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#e4e9e0"/><ellipse cx="400" cy="519" rx="195" ry="22" fill="#263d3110"/><path d="M510 260h45q70 75-5 125h-45" fill="none" stroke="#a5755e" stroke-width="32"/><path d="M265 215h260l-18 240q-112 55-224 0Z" fill="#bf9176"/><ellipse cx="395" cy="215" rx="130" ry="30" fill="#d8b397"/><ellipse cx="395" cy="215" rx="105" ry="17" fill="#6b5748"/><path d="M290 245l12 150" stroke="#d8ad90" stroke-width="10"/></svg>

package/dist/templates/storefront/svelte/public/assets/product-3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#eee8dc"/><ellipse cx="400" cy="519" rx="195" ry="22" fill="#263d3110"/><ellipse cx="410" cy="500" rx="130" ry="23" fill="#244f47"/><path d="M410 492V205q0-55 55-55" fill="none" stroke="#436d61" stroke-width="20"/><path d="M280 220q130-245 260 0Z" fill="#3d675b"/><ellipse cx="410" cy="220" rx="130" ry="18" fill="#e5cba1"/></svg>

package/dist/templates/storefront/svelte/public/assets/product-4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#ecece0"/><ellipse cx="400" cy="519" rx="195" ry="22" fill="#263d3110"/><path d="M270 170l245 20v320l-245-25Z" fill="#d5c0a0"/><path d="M270 155l245 20v320l-245-25Z" fill="#779487"/><path d="M294 158v314" stroke="#516f62" stroke-width="7"/><path d="M342 250l110 9m-110 15l110 9m-110 15l70 5" stroke="#b8c9b7" stroke-width="3"/></svg>

package/dist/templates/storefront/svelte/public/assets/product-5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#e8e3d9"/><ellipse cx="400" cy="519" rx="195" ry="22" fill="#263d3110"/><path d="M345 155h110v65l40 55v220q-95 45-190 0V275l40-55Z" fill="#87a39b"/><path d="M345 142h110v40H345Z" fill="#34584e"/><path d="M325 285v180" stroke="#bfd0c4" stroke-width="10"/><path d="M352 334h95v80h-95Z" fill="#a7bdb1"/></svg>

package/dist/templates/storefront/svelte/public/assets/product-6.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#e4e9e0"/><ellipse cx="400" cy="519" rx="195" ry="22" fill="#263d3110"/><path d="M220 220q180 20 360-10-20 130 0 250-190-18-360 0 25-130 0-240Z" fill="#bf8a6f"/><path d="M239 240q160 10 321-9-14 114 0 207-169-14-321 0 17-110 0-198Z" stroke="#d7a990" stroke-width="3" fill="none"/><path d="M260 268l285 135M280 238l245 172M280 422l245-165" stroke="#c8967b" stroke-width="2"/></svg>

package/dist/templates/storefront/svelte/public/assets/product-7.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#eee8dc"/><ellipse cx="400" cy="519" rx="195" ry="22" fill="#263d3110"/><ellipse cx="400" cy="388" rx="230" ry="90" fill="#a98e63"/><ellipse cx="400" cy="365" rx="230" ry="90" fill="#d0b589"/><ellipse cx="400" cy="365" rx="199" ry="65" fill="#bda077"/><path d="M250 350q150-50 300 0M240 374q170 46 325-2" fill="none" stroke="#b19268" stroke-width="3"/><circle cx="342" cy="364" r="25" fill="none" stroke="#718278" stroke-width="9"/><path d="M365 365h80v18h-10v10h-13v-11h-53" fill="#718278"/></svg>

package/dist/templates/storefront/svelte/public/assets/product-8.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Original Linguana template illustration</title><rect width="800" height="600" fill="#ecece0"/><ellipse cx="400" cy="519" rx="195" ry="22" fill="#263d3110"/><circle cx="400" cy="310" r="180" fill="#788f83"/><circle cx="400" cy="310" r="162" fill="#ebe7d9"/><g stroke="#768075" stroke-width="5"><path d="M400 168v22m0 240v22M258 310h22m240 0h22M300 210l15 15m170 170l15 15M300 410l15-15m170-170l15-15"/></g><path d="M400 220v90l80 42" stroke="#3c584d" stroke-width="9" fill="none"/><circle cx="400" cy="310" r="9" fill="#a36e56"/></svg>

package/dist/templates/storefront/svelte/src/App.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+import { getLinguana } from "@linguanahq/svelte";
+import { onMount } from "svelte";
+import Copy from "./Copy.svelte";
+import { demoLocales } from "./i18n";
+import { messages } from "./messages";
+import {
+	initialState,
+	items,
+	quantity,
+	readCart,
+	type State,
+	saveCart,
+} from "./model";
+
+const client = getLinguana();
+let snapshot = $state(client.getSnapshot());
+const locale = () => snapshot.locale;
+const locales = () =>
+	snapshot.availableLocales.length
+		? snapshot.availableLocales
+		: demoLocales.filter((item) => item.code === "en");
+const translate = (...args: Parameters<typeof client.translate>) => {
+	void snapshot.locale;
+	return client.translate(...args);
+};
+const changeLocale = (value: string) => void client.setLocale(value);
+let data = $state(initialState());
+const set = <K extends keyof State>(key: K, value: State[K]) => {
+	data[key] = value;
+};
+onMount(() => {
+	set("cart", readCart());
+	const unsubscribe = client.subscribe(() => {
+		snapshot = client.getSnapshot();
+	});
+	const pop = () => set("path", window.location.pathname);
+	window.addEventListener("popstate", pop);
+	return () => {
+		unsubscribe();
+		window.removeEventListener("popstate", pop);
+	};
+});
+$effect(() => {
+	document.documentElement.lang = locale();
+	document.documentElement.dir = locale().startsWith("ar") ? "rtl" : "ltr";
+});
+const msg = (id: string, values?: Record<string, string | number>) =>
+	String(translate(id, messages[id] ?? id, values));
+const value = (event: Event | { currentTarget: EventTarget | null }) =>
+	(event.currentTarget as HTMLInputElement).value;
+const money = (amount: number) =>
+	new Intl.NumberFormat(locale(), {
+		style: "currency",
+		currency: "USD",
+		maximumFractionDigits: 2,
+	}).format(amount);
+const date = (input: string) =>
+	new Intl.DateTimeFormat(locale(), {
+		dateStyle: "medium",
+		timeZone: "UTC",
+	}).format(new Date(input));
+const visible = () =>
+	items
+		.filter(
+			(item) =>
+				(data.category === "all" || item.category === data.category) &&
+				`${msg(`${item.id}Title`)} ${msg(`${item.id}Summary`)}`
+					.toLocaleLowerCase(locale())
+					.includes(data.query.toLocaleLowerCase(locale()).trim()),
+		)
+		.sort((a, b) =>
+			data.sort === "low"
+				? a.price - b.price
+				: data.sort === "high"
+					? b.price - a.price
+					: 0,
+		);
+const detailHref = (id: string) =>
+	`/products/${items.find((item) => item.id === id)!.slug}`;
+const detail = () => items.find((item) => detailHref(item.id) === data.path);
+const notFound = () =>
+	data.path !== "/" && data.path !== "/cart" && detail() === undefined;
+const clearFilters = () => {
+	set("query", "");
+	set("category", "all");
+};
+const count = () =>
+	Object.values(data.cart).reduce((total, count) => total + count, 0);
+const cartItems = () => items.filter((item) => (data.cart[item.id] ?? 0) > 0);
+const total = () =>
+	cartItems().reduce(
+		(total, item) => total + item.price * data.cart[item.id]!,
+		0,
+	);
+const updateCart = (id: string, count: number) => {
+	const cart = { ...data.cart };
+	if (count <= 0) delete cart[id];
+	else cart[id] = quantity(count);
+	set("cart", cart);
+	saveCart(cart);
+};
+const add = (id: string, count: number) => {
+	updateCart(id, (data.cart[id] ?? 0) + count);
+	set("added", true);
+	set("checkout", false);
+};
+const checkout = () => {
+	set("cart", {});
+	saveCart({});
+	set("checkout", true);
+	set("added", false);
+};
+const submit = (event: { preventDefault(): void }) => {
+	event.preventDefault();
+	const valid = Boolean(
+		data.name.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email),
+	);
+	set("error", !valid);
+	set("sent", valid);
+};
+const navigate = (event: {
+	currentTarget: EventTarget | null;
+	preventDefault(): void;
+	metaKey: boolean;
+	ctrlKey: boolean;
+	shiftKey: boolean;
+	altKey: boolean;
+	button: number;
+}) => {
+	if (
+		event.metaKey ||
+		event.ctrlKey ||
+		event.shiftKey ||
+		event.altKey ||
+		event.button !== 0
+	)
+		return;
+	const target = new URL((event.currentTarget as HTMLAnchorElement).href);
+	if (target.origin !== window.location.origin) return;
+	event.preventDefault();
+	window.history.pushState({}, "", target.pathname);
+	set("path", target.pathname);
+	set("quantity", 1);
+	set("added", false);
+	window.scrollTo(0, 0);
+};
+</script>
+<div class="site storefront"><a href="#main" class="skip-link"><Copy name="skip"></Copy></a>
+<header class="site-header"><a href="/" class="brand" onclick={(event) => { navigate(event); }} aria-label={'Common Goods — ' + msg('home')}><span class="brand-mark" aria-hidden="true">◒</span>
+Common Goods</a>
+<nav aria-label={msg('home')}><a href="/" onclick={(event) => { navigate(event); }}><Copy name="collection"></Copy></a>
+<a href="/cart" onclick={(event) => { navigate(event); }}><Copy name="cart"></Copy>
+<span class="cart-count">{count()}</span></a>
+<label class="locale-picker"><span class="sr-only"><Copy name="language"></Copy></span>
+<select value={locale()} aria-label={msg('language')} onchange={(event) => { changeLocale(value(event)); }}>{#each locales() as language (language.code)}<option value={language.code}>{language.nativeName}</option>{/each}</select></label></nav></header>
+<main id="main">{#if data.path === "/"}<section class="hero store-hero"><div class="hero-copy"><p class="eyebrow"><Copy name="eyebrow"></Copy></p>
+<h1 ><Copy name="headline"></Copy></h1>
+<p class="intro"><Copy name="intro"></Copy></p>
+<a href="#collection" class="button"><Copy name="shop"></Copy>
+ ↗</a></div>
+<img src="/assets/collection.svg" alt={msg('collection')} class="hero-image" width="800" height="600" loading="lazy" /></section>
+<section class="section" id="collection"><div class="section-heading"><h2 ><Copy name="collection"></Copy></h2>
+<Copy name="count" values={{ count: visible().length }}></Copy></div>
+<div class="filters"><fieldset class="filter-buttons" aria-label={msg('collection' in messages ? 'collection' : 'latest')}><button type="button" class={data.category === 'all' ? 'chip active' : 'chip'} aria-pressed={data.category === 'all'} onclick={(event) => { set('category', 'all'); }}><Copy name="all"></Copy></button>
+<button type="button" class={data.category === 'homeware' ? 'chip active' : 'chip'} aria-pressed={data.category === 'homeware'} onclick={(event) => { set('category', 'homeware'); }}><Copy name="homeware"></Copy></button>
+<button type="button" class={data.category === 'carry' ? 'chip active' : 'chip'} aria-pressed={data.category === 'carry'} onclick={(event) => { set('category', 'carry'); }}><Copy name="carry"></Copy></button>
+<button type="button" class={data.category === 'desk' ? 'chip active' : 'chip'} aria-pressed={data.category === 'desk'} onclick={(event) => { set('category', 'desk'); }}><Copy name="desk"></Copy></button></fieldset>
+<label class="search"><span class="sr-only"><Copy name="search"></Copy></span>
+<input type="search" placeholder={msg('search')} value={data.query} oninput={(event) => { set('query', value(event)); }} /></label>
+<label class="sort"><span class="sr-only"><Copy name="sort"></Copy></span>
+<select value={data.sort} onchange={(event) => { set('sort', value(event)); }}><option value="featured"><Copy name="featured"></Copy></option>
+<option value="low"><Copy name="low"></Copy></option>
+<option value="high"><Copy name="high"></Copy></option></select></label></div>
+<div class="product-grid">{#each visible() as item (item.id)}<article class="product-card"><a href={detailHref(item.id)} onclick={(event) => { navigate(event); }}><img src={item.image} alt={msg(item.id + "Title")} class="" width="800" height="600" loading="lazy" /></a>
+<div class="product-heading"><h3 ><a href={detailHref(item.id)} onclick={(event) => { navigate(event); }}><Copy name={item.id + "Title"}></Copy></a></h3>
+<span >{money(item.price)}</span></div>
+<p class="muted"><Copy name={item.category}></Copy></p>
+<button type="button" class="add-button" onclick={(event) => { add(item.id, 1); }}><Copy name="add"></Copy></button></article>{/each}</div>
+{#if visible().length === 0}<div class="empty" role="status"><h3 ><Copy name="empty"></Copy></h3>
+<p ><Copy name="emptyHint"></Copy></p>
+<button type="button" class="button" onclick={(event) => { clearFilters(); }}><Copy name="clear"></Copy></button></div>{/if}</section>{/if}
+{#if detail() !== undefined}<section class="product-detail section"><img src={detail()!.image} alt={msg(detail()!.id + "Title")} class="detail-image" width="800" height="600" loading="lazy" />
+<div ><a href="/" onclick={(event) => { navigate(event); }}><Copy name="back"></Copy></a>
+<p class="eyebrow"><Copy name={detail()!.category}></Copy></p>
+<h1 ><Copy name={detail()!.id + "Title"}></Copy></h1>
+<p class="price">{money(detail()!.price)}</p>
+<p class="intro"><Copy name={detail()!.id + "Summary"}></Copy></p>
+<label class="quantity"><Copy name="qty"></Copy>
+<input type="number" min="1" max="99" value={data.quantity} oninput={(event) => { set('quantity', quantity(value(event))); }} /></label>
+<button type="button" class="button" onclick={(event) => { add(detail()!.id, data.quantity); }}><Copy name="add"></Copy></button>
+<p class="muted fine"><Copy name="shipping"></Copy></p></div></section>{/if}
+{#if data.path === "/cart"}<section class="section basket"><p class="eyebrow"><Copy name="count" values={{ count: count() }}></Copy></p>
+<h1 ><Copy name="cart"></Copy></h1>
+{#if count() === 0}<div class="empty"><p ><Copy name="emptyCart"></Copy></p>
+<a href="/" onclick={(event) => { navigate(event); }}><Copy name="shop"></Copy></a></div>{/if}
+{#each cartItems() as item (item.id)}<div class="cart-row"><img src={item.image} alt={msg(item.id + "Title")} class="" width="800" height="600" loading="lazy" />
+<div ><h2 ><a href={detailHref(item.id)} onclick={(event) => { navigate(event); }}><Copy name={item.id + "Title"}></Copy></a></h2>
+<span >{money(item.price)}</span></div>
+<label class="quantity"><span class="sr-only"><Copy name="qty"></Copy></span>
+<input type="number" min="1" max="99" value={data.cart[item.id]} oninput={(event) => { updateCart(item.id, quantity(value(event))); }} aria-label={msg('qty') + ': ' + msg(item.id + 'Title')} /></label>
+<button type="button" class="text-button" onclick={(event) => { updateCart(item.id, 0); }}><Copy name="remove"></Copy></button></div>{/each}
+{#if count() > 0}<div class="cart-total"><strong ><Copy name="total"></Copy></strong>
+<strong >{money(total())}</strong></div>
+<button type="button" class="button" onclick={(event) => { checkout(); }}><Copy name="checkout"></Copy></button>{/if}
+<p class="muted"><Copy name="checkoutNote"></Copy></p>
+<p class="muted fine"><Copy name="shipping"></Copy></p>
+{#if data.checkout}<p role="status" class="success"><Copy name="checkoutDone"></Copy></p>{/if}</section>{/if}
+{#if data.added}<div role="status" class="toast"><Copy name="added"></Copy>
+<a href="/cart" onclick={(event) => { navigate(event); }}><Copy name="cart"></Copy></a></div>{/if}
+{#if notFound()}<section class="section empty"><p class="eyebrow">404</p>
+<h1 ><Copy name="missing"></Copy></h1>
+<p ><Copy name="missingHint"></Copy></p>
+<a href="/" onclick={(event) => { navigate(event); }}><Copy name="back"></Copy></a></section>{/if}</main>
+<footer class="site-footer"><div ><a href="/" class="brand" onclick={(event) => { navigate(event); }}>Common Goods</a>
+<p ><Copy name="about"></Copy></p></div>
+<p class="fine"><Copy name="demo"></Copy>
+<a href="https://linguana.mohammedibrahim.dev" rel="noreferrer">Linguana ↗</a></p></footer></div>

package/dist/templates/storefront/svelte/src/Copy.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+import T from "@linguanahq/svelte/T.svelte";
+
+let {
+	name,
+	values = {},
+}: { name: string; values?: Record<string, string | number> } = $props();
+</script>
+{#if name === 'language'}<T id="language" defaultMessage={"Language"} {values} />
+{:else if name === 'skip'}<T id="skip" defaultMessage={"Skip to content"} {values} />
+{:else if name === 'home'}<T id="home" defaultMessage={"Home"} {values} />
+{:else if name === 'search'}<T id="search" defaultMessage={"Search"} {values} />
+{:else if name === 'all'}<T id="all" defaultMessage={"All"} {values} />
+{:else if name === 'empty'}<T id="empty" defaultMessage={"Nothing here yet."} {values} />
+{:else if name === 'emptyHint'}<T id="emptyHint" defaultMessage={"Try another search or clear your filters."} {values} />
+{:else if name === 'clear'}<T id="clear" defaultMessage={"Clear filters"} {values} />
+{:else if name === 'missing'}<T id="missing" defaultMessage={"This page took a different path."} {values} />
+{:else if name === 'missingHint'}<T id="missingHint" defaultMessage={"We could not find that page. There is plenty to discover back home."} {values} />
+{:else if name === 'back'}<T id="back" defaultMessage={"Back to home"} {values} />
+{:else if name === 'demo'}<T id="demo" defaultMessage={"A multilingual demo, made with Linguana."} {values} />
+{:else if name === 'email'}<T id="email" defaultMessage={"Email address"} {values} />
+{:else if name === 'name'}<T id="name" defaultMessage={"Your name"} {values} />
+{:else if name === 'simulated'}<T id="simulated" defaultMessage={"Demo only. Your information stays in this browser."} {values} />
+{:else if name === 'sent'}<T id="sent" defaultMessage={"Thank you, {name}! This was a demo; nothing was sent."} {values} />
+{:else if name === 'formError'}<T id="formError" defaultMessage={"Please enter your name and a valid email address."} {values} />
+{:else if name === 'eyebrow'}<T id="eyebrow" defaultMessage={"Fewer things. Better chosen."} {values} />
+{:else if name === 'headline'}<T id="headline" defaultMessage={"Good things for the everyday."} {values} />
+{:else if name === 'intro'}<T id="intro" defaultMessage={"Useful objects, honest materials, and small details that make a difference. Find your new everyday favourite."} {values} />
+{:else if name === 'collection'}<T id="collection" defaultMessage={"The everyday collection"} {values} />
+{:else if name === 'shop'}<T id="shop" defaultMessage={"Explore the collection"} {values} />
+{:else if name === 'homeware'}<T id="homeware" defaultMessage={"At home"} {values} />
+{:else if name === 'carry'}<T id="carry" defaultMessage={"On the go"} {values} />
+{:else if name === 'desk'}<T id="desk" defaultMessage={"At your desk"} {values} />
+{:else if name === 'sort'}<T id="sort" defaultMessage={"Sort by"} {values} />
+{:else if name === 'featured'}<T id="featured" defaultMessage={"Featured"} {values} />
+{:else if name === 'low'}<T id="low" defaultMessage={"Price: low to high"} {values} />
+{:else if name === 'high'}<T id="high" defaultMessage={"Price: high to low"} {values} />
+{:else if name === 'cart'}<T id="cart" defaultMessage={"Your basket"} {values} />
+{:else if name === 'count'}<T id="count" defaultMessage={"{count, plural, one {# item} other {# items}}"} {values} />
+{:else if name === 'add'}<T id="add" defaultMessage={"Add to basket"} {values} />
+{:else if name === 'added'}<T id="added" defaultMessage={"Added to your basket"} {values} />
+{:else if name === 'qty'}<T id="qty" defaultMessage={"Quantity"} {values} />
+{:else if name === 'remove'}<T id="remove" defaultMessage={"Remove"} {values} />
+{:else if name === 'total'}<T id="total" defaultMessage={"Total"} {values} />
+{:else if name === 'checkout'}<T id="checkout" defaultMessage={"Simulate checkout"} {values} />
+{:else if name === 'checkoutNote'}<T id="checkoutNote" defaultMessage={"This is a demo shop. No payments or real orders are accepted."} {values} />
+{:else if name === 'checkoutDone'}<T id="checkoutDone" defaultMessage={"Demo complete. No payment was taken and no order was placed."} {values} />
+{:else if name === 'emptyCart'}<T id="emptyCart" defaultMessage={"Your basket is waiting for something good."} {values} />
+{:else if name === 'shipping'}<T id="shipping" defaultMessage={"Illustrative prices in USD. No shipping or taxes are charged in this demo."} {values} />
+{:else if name === 'about'}<T id="about" defaultMessage={"Considered objects. A little less ordinary."} {values} />
+{:else if name === 'p1Title'}<T id="p1Title" defaultMessage={"Everyday tote"} {values} />
+{:else if name === 'p1Summary'}<T id="p1Summary" defaultMessage={"Heavy cotton canvas, generous handles, and room for your daily detours."} {values} />
+{:else if name === 'p2Title'}<T id="p2Title" defaultMessage={"Morning mug"} {values} />
+{:else if name === 'p2Summary'}<T id="p2Summary" defaultMessage={"A warm ceramic finish and an easy grip. Made for the first quiet cup."} {values} />
+{:else if name === 'p3Title'}<T id="p3Title" defaultMessage={"Arc desk lamp"} {values} />
+{:else if name === 'p3Summary'}<T id="p3Summary" defaultMessage={"A gentle pool of light, a weighted base, and a shape that feels at home."} {values} />
+{:else if name === 'p4Title'}<T id="p4Title" defaultMessage={"Field notebook"} {values} />
+{:else if name === 'p4Summary'}<T id="p4Summary" defaultMessage={"Lay-flat binding and plain recycled pages for ideas without a deadline."} {values} />
+{:else if name === 'p5Title'}<T id="p5Title" defaultMessage={"Day bottle"} {values} />
+{:else if name === 'p5Summary'}<T id="p5Summary" defaultMessage={"Brushed steel with a simple screw cap. A reusable companion for the road."} {values} />
+{:else if name === 'p6Title'}<T id="p6Title" defaultMessage={"Linen cushion"} {values} />
+{:else if name === 'p6Summary'}<T id="p6Summary" defaultMessage={"Soft washed linen in an earthy tone. An invitation to slow down."} {values} />
+{:else if name === 'p7Title'}<T id="p7Title" defaultMessage={"Oak catchall"} {values} />
+{:else if name === 'p7Summary'}<T id="p7Summary" defaultMessage={"A small home for keys, coins, and the things you put down at the door."} {values} />
+{:else if name === 'p8Title'}<T id="p8Title" defaultMessage={"Quiet clock"} {values} />
+{:else if name === 'p8Summary'}<T id="p8Summary" defaultMessage={"A clean face and a silent movement. Keep time without the ticking."} {values} />{/if}

package/dist/templates/storefront/svelte/src/Root.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { createLinguana, setLinguana } from "@linguanahq/svelte";
+import { onDestroy } from "svelte";
+import App from "./App.svelte";
+import { optionsFor } from "./i18n";
+
+const { client } = createLinguana(optionsFor());
+setLinguana(client);
+onDestroy(() => client.dispose());
+</script>
+<App />