@nifrajs/web-svelte 0.1.0-alpha.1

package/dist/mdx.js

@@ -0,0 +1,74 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import { compile } from "svelte/compiler";
+/**
+ * `@nifrajs/web-svelte/mdx` — compile `.mdx` routes/files to **Svelte** components. Svelte has no JSX
+ * runtime, so (unlike the JSX-family `mdxBunPlugin`) MDX-for-Svelte goes through `mdsvex` — Svelte's
+ * own Markdown compiler — which produces a `.svelte` module, then the standard `svelte/compiler` runs
+ * (`generate: "server"` for SSR, `"client"` for the browser). Pass it to `buildClient`/`buildServer`'s
+ * `plugins` alongside `svelteBunPlugin` (one handles `.svelte`, this one `.mdx`). `mdsvex` is an
+ * optional peer, lazy-loaded at build time.
+ *
+ * `<style>` blocks inside MDX are scoped + bundled exactly like `svelteBunPlugin`'s (own CSS namespace
+ * so the two plugins don't collide).
+ */
+const MDSVEX_MODULE = "mdsvex"; // non-literal so consumers don't need mdsvex's types to typecheck
+const STYLE_SUFFIX = "?svelte-mdx-css";
+const STYLE_NS = "nifra-svelte-mdx-css";
+/** Build a `Bun.build` plugin that loads `.mdx` files as Svelte components via mdsvex. `generate`:
+ * `"ssr"` for the server build, `"dom"` for the client (matches `svelteBunPlugin`). */
+export function svelteMdxBunPlugin(generate) {
+    const cssByPath = new Map();
+    return {
+        name: `nifra-svelte-mdx-${generate}`,
+        async setup(build) {
+            let mdsvexCompile;
+            try {
+                mdsvexCompile = (await import(__rewriteRelativeImportExtension(MDSVEX_MODULE))).compile;
+            }
+            catch {
+                throw new Error("@nifrajs/web-svelte/mdx: compiling `.mdx` for Svelte needs the `mdsvex` package — install it (`bun add mdsvex`).");
+            }
+            build.onLoad({ filter: /\.mdx(\?|$)/ }, async (args) => {
+                const path = args.path.split("?")[0] ?? args.path;
+                // 1. Markdown/MDX → Svelte source (mdsvex). `extensions` must include `.mdx` or mdsvex skips the
+                // file (returns undefined — it only processes its configured extensions, default `.svx`).
+                const pre = await mdsvexCompile(await Bun.file(path).text(), {
+                    filename: path,
+                    extensions: [".mdx", ".svx", ".md"],
+                });
+                if (!pre)
+                    throw new Error(`@nifrajs/web-svelte/mdx: mdsvex produced no output for ${path}`);
+                // 2. Svelte source → JS, exactly like `svelteBunPlugin`.
+                const { js, css } = compile(pre.code, {
+                    generate: generate === "ssr" ? "server" : "client",
+                    filename: path,
+                    css: "external",
+                });
+                if (generate === "dom" && css?.code) {
+                    cssByPath.set(path, css.code);
+                    return {
+                        contents: `${js.code}\nimport ${JSON.stringify(path + STYLE_SUFFIX)}\n`,
+                        loader: "js",
+                    };
+                }
+                return { contents: js.code, loader: "js" };
+            });
+            build.onResolve({ filter: /\?svelte-mdx-css$/ }, (args) => ({
+                path: args.path,
+                namespace: STYLE_NS,
+            }));
+            build.onLoad({ filter: /.*/, namespace: STYLE_NS }, (args) => ({
+                contents: cssByPath.get(args.path.slice(0, -STYLE_SUFFIX.length)) ?? "",
+                loader: "css",
+            }));
+        },
+    };
+}
+//# sourceMappingURL=mdx.js.map

package/dist/mdx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdx.js","sourceRoot":"","sources":["../src/mdx.ts"],"names":[],"mappings":"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"}

package/dist/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { BunPlugin } from "bun";
+export declare function svelteBunPlugin(generate: "dom" | "ssr"): BunPlugin;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAsBpC,wBAAgB,eAAe,CAAC,QAAQ,EAAE,KAAK,GAAG,KAAK,GAAG,SAAS,CAqClE"}

package/dist/plugin.js

@@ -0,0 +1,58 @@
+import { compile } from "svelte/compiler";
+/**
+ * `@nifrajs/web-svelte/plugin` — the `.svelte` compiler Bun-plugin, in its OWN module (no `.svelte`
+ * imports). This matters for the SSR preload: `bun --preload` must register the plugin BEFORE any
+ * `.svelte` file is loaded. Importing it from the package root (`./index`) would eagerly load
+ * `Chain.svelte` (the adapter's fold) before the plugin is registered — so it lives here instead.
+ *
+ * `generate: "server"` for SSR, `"client"` for the browser (Svelte 5's client output is hydratable).
+ * Preload it for SSR (`bun --preload`) and pass it to `buildClient({ plugins: [...] })` for the client
+ * bundle. The compiler runs at build time, on `.svelte` files only.
+ *
+ * `<style>` blocks: Svelte scopes selectors (`.foo.svelte-<hash>`) and bakes the matching classes into
+ * the markup (both client + server output), so SSR HTML is already scoped. The **client** build emits
+ * the scoped stylesheet as a virtual `?svelte-css` module that `Bun.build`'s CSS bundler folds into the
+ * app stylesheet (served as a `<link>`); the SSR build drops it (the stylesheet ships from the client
+ * build — no double-emit). With `nifra dev`, `@sveltejs/vite-plugin-svelte` injects the CSS instead.
+ */
+const STYLE_SUFFIX = "?svelte-css";
+const STYLE_NS = "nifra-svelte-css";
+export function svelteBunPlugin(generate) {
+    // Compiled scoped CSS per `.svelte` file (client build only) — read back by the virtual-module loader.
+    const cssByPath = new Map();
+    return {
+        name: `nifra-svelte-${generate}`,
+        setup(build) {
+            // Match `.svelte`, tolerating a `?query` suffix (dev servers append one to bust Bun's import
+            // cache); strip it before reading the file off disk.
+            build.onLoad({ filter: /\.svelte(\?|$)/ }, async (args) => {
+                const path = args.path.split("?")[0] ?? args.path;
+                const source = await Bun.file(path).text();
+                const { js, css } = compile(source, {
+                    generate: generate === "ssr" ? "server" : "client",
+                    filename: path,
+                    css: "external", // emit the scoped stylesheet separately (not injected into the JS)
+                });
+                if (generate === "dom" && css?.code) {
+                    cssByPath.set(path, css.code);
+                    // Import the virtual style module so the bundler pulls the scoped CSS into the app stylesheet.
+                    return {
+                        contents: `${js.code}\nimport ${JSON.stringify(path + STYLE_SUFFIX)}\n`,
+                        loader: "js",
+                    };
+                }
+                return { contents: js.code, loader: "js" };
+            });
+            // Virtual CSS module: `<file>.svelte?svelte-css` → the compiled scoped stylesheet (css loader).
+            build.onResolve({ filter: /\?svelte-css$/ }, (args) => ({
+                path: args.path,
+                namespace: STYLE_NS,
+            }));
+            build.onLoad({ filter: /.*/, namespace: STYLE_NS }, (args) => ({
+                contents: cssByPath.get(args.path.slice(0, -STYLE_SUFFIX.length)) ?? "",
+                loader: "css",
+            }));
+        },
+    };
+}
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEzC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,YAAY,GAAG,aAAa,CAAA;AAClC,MAAM,QAAQ,GAAG,kBAAkB,CAAA;AAEnC,MAAM,UAAU,eAAe,CAAC,QAAuB;IACrD,uGAAuG;IACvG,MAAM,SAAS,GAAG,IAAI,GAAG,EAAkB,CAAA;IAC3C,OAAO;QACL,IAAI,EAAE,gBAAgB,QAAQ,EAAE;QAChC,KAAK,CAAC,KAAK;YACT,6FAA6F;YAC7F,qDAAqD;YACrD,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;gBACxD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAA;gBACjD,MAAM,MAAM,GAAG,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;gBAC1C,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE;oBAClC,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;oBAClD,QAAQ,EAAE,IAAI;oBACd,GAAG,EAAE,UAAU,EAAE,mEAAmE;iBACrF,CAAC,CAAA;gBACF,IAAI,QAAQ,KAAK,KAAK,IAAI,GAAG,EAAE,IAAI,EAAE,CAAC;oBACpC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,CAAA;oBAC7B,+FAA+F;oBAC/F,OAAO;wBACL,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,YAAY,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI;wBACvE,MAAM,EAAE,IAAI;qBACb,CAAA;gBACH,CAAC;gBACD,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;YAC5C,CAAC,CAAC,CAAA;YACF,gGAAgG;YAChG,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;gBACtD,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,SAAS,EAAE,QAAQ;aACpB,CAAC,CAAC,CAAA;YACH,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;gBAC7D,QAAQ,EAAE,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE;gBACvE,MAAM,EAAE,KAAK;aACd,CAAC,CAAC,CAAA;QACL,CAAC;KACF,CAAA;AACH,CAAC"}

package/dist/query.d.ts

@@ -0,0 +1,26 @@
+import { type QueryClient, type QueryState } from "@nifrajs/web";
+/**
+ * `@nifrajs/web-svelte/query` — Svelte bindings for the keyed query-cache, as **Svelte stores** (plain
+ * `.ts`). `useQuery(key, fn)` returns a `Readable<QueryState<T>>` augmented with `refetch` — read it
+ * reactively with `$query`. The store fetches on mount (the start notifier fires on the first
+ * `$`-subscription) and subscribes to the cache entry; concurrent `useQuery`s with the same key share
+ * one entry + one in-flight fetch (dedup). `useQueryClient` exposes `invalidateQueries`.
+ *
+ * The query client is created lazily **client-side only** (the `typeof window` guard) — on the server
+ * there is none, so `useQuery` holds the idle/pending state (queries are client-first; loaders are the
+ * SSR data source). The first client render uses the same idle snapshot, so no mismatch.
+ */
+import { type Readable } from "svelte/store";
+/** Access the query client to imperatively `invalidateQueries(keyOrPrefix)` (e.g. after a mutation). */
+export declare function useQueryClient(): Pick<QueryClient, "invalidateQueries">;
+/** A query store: a `Readable<QueryState<T>>` (read via `$`) plus `refetch`. */
+export type QueryStore<T> = Readable<QueryState<T>> & {
+    /** Force a refetch (ignores `staleTime`). */
+    readonly refetch: () => Promise<T>;
+};
+/**
+ * Subscribe to the keyed query for `key`, fetched via `fn`. Returns a store of `{ status, data, error,
+ * isFetching, updatedAt }` augmented with `refetch`. Fetches on mount (first `$`-subscription); SSR-idle.
+ */
+export declare function useQuery<T>(key: unknown, fn: () => Promise<T>): QueryStore<T>;
+//# sourceMappingURL=query.d.ts.map

package/dist/query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../src/query.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,UAAU,EAChB,MAAM,cAAc,CAAA;AACrB;;;;;;;;;;GAUG;AACH,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,cAAc,CAAA;AAStD,wGAAwG;AACxG,wBAAgB,cAAc,IAAI,IAAI,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAEvE;AAWD,gFAAgF;AAChF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG;IACpD,6CAA6C;IAC7C,QAAQ,CAAC,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,CAAA;CACnC,CAAA;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAe7E"}

package/dist/query.js

@@ -0,0 +1,55 @@
+import { createQueryClient, } from "@nifrajs/web";
+/**
+ * `@nifrajs/web-svelte/query` — Svelte bindings for the keyed query-cache, as **Svelte stores** (plain
+ * `.ts`). `useQuery(key, fn)` returns a `Readable<QueryState<T>>` augmented with `refetch` — read it
+ * reactively with `$query`. The store fetches on mount (the start notifier fires on the first
+ * `$`-subscription) and subscribes to the cache entry; concurrent `useQuery`s with the same key share
+ * one entry + one in-flight fetch (dedup). `useQueryClient` exposes `invalidateQueries`.
+ *
+ * The query client is created lazily **client-side only** (the `typeof window` guard) — on the server
+ * there is none, so `useQuery` holds the idle/pending state (queries are client-first; loaders are the
+ * SSR data source). The first client render uses the same idle snapshot, so no mismatch.
+ */
+import { readable } from "svelte/store";
+let client;
+function getClient() {
+    if (typeof window === "undefined")
+        return undefined; // SSR → no client (queries render idle)
+    if (client === undefined)
+        client = createQueryClient({ now: () => Date.now() });
+    return client;
+}
+/** Access the query client to imperatively `invalidateQueries(keyOrPrefix)` (e.g. after a mutation). */
+export function useQueryClient() {
+    return getClient() ?? { invalidateQueries: () => { } };
+}
+// Stable idle snapshot for the server / pre-fetch render.
+const IDLE = Object.freeze({
+    status: "pending",
+    data: undefined,
+    error: undefined,
+    isFetching: false,
+    updatedAt: Number.NEGATIVE_INFINITY,
+});
+/**
+ * Subscribe to the keyed query for `key`, fetched via `fn`. Returns a store of `{ status, data, error,
+ * isFetching, updatedAt }` augmented with `refetch`. Fetches on mount (first `$`-subscription); SSR-idle.
+ */
+export function useQuery(key, fn) {
+    const handle = getClient()?.query(key, fn);
+    const store = readable(handle ? handle.snapshot() : IDLE, (set) => {
+        if (handle === undefined)
+            return;
+        set(handle.snapshot());
+        const unsubscribe = handle.subscribe(() => set(handle.snapshot()));
+        handle.fetch().catch(() => { }); // fetch on mount (the first subscriber attached)
+        return unsubscribe;
+    });
+    const refetch = handle
+        ? handle.refetch
+        : (async () => {
+            throw new Error("[nifra/web-svelte] useQuery.refetch called with no query client (server?)");
+        });
+    return Object.assign(store, { refetch });
+}
+//# sourceMappingURL=query.js.map

package/dist/query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query.js","sourceRoot":"","sources":["../src/query.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,GAIlB,MAAM,cAAc,CAAA;AACrB;;;;;;;;;;GAUG;AACH,OAAO,EAAiB,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEtD,IAAI,MAA+B,CAAA;AACnC,SAAS,SAAS;IAChB,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,SAAS,CAAA,CAAC,wCAAwC;IAC5F,IAAI,MAAM,KAAK,SAAS;QAAE,MAAM,GAAG,iBAAiB,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;IAC/E,OAAO,MAAM,CAAA;AACf,CAAC;AAED,wGAAwG;AACxG,MAAM,UAAU,cAAc;IAC5B,OAAO,SAAS,EAAE,IAAI,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAA;AACvD,CAAC;AAED,0DAA0D;AAC1D,MAAM,IAAI,GAAsB,MAAM,CAAC,MAAM,CAAC;IAC5C,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,MAAM,CAAC,iBAAiB;CACpC,CAAC,CAAA;AAQF;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAI,GAAY,EAAE,EAAoB;IAC5D,MAAM,MAAM,GAA+B,SAAS,EAAE,EAAE,KAAK,CAAI,GAAG,EAAE,EAAE,CAAC,CAAA;IACzE,MAAM,KAAK,GAAG,QAAQ,CAAgB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE;QAC/E,IAAI,MAAM,KAAK,SAAS;YAAE,OAAM;QAChC,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAA;QACtB,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;QAClE,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA,CAAC,iDAAiD;QAChF,OAAO,WAAW,CAAA;IACpB,CAAC,CAAC,CAAA;IACF,MAAM,OAAO,GAAG,MAAM;QACpB,CAAC,CAAC,MAAM,CAAC,OAAO;QAChB,CAAC,CAAE,CAAC,KAAK,IAAI,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAA;QAC9F,CAAC,CAAsB,CAAA;IAC3B,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAA;AAC1C,CAAC"}

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@nifrajs/web-svelte",
+  "version": "0.1.0-alpha.1",
+  "description": "Svelte 5 render adapter for @nifrajs/web — SSR + hydration + the .svelte compiler Bun-plugin.",
+  "keywords": [
+    "bun",
+    "typescript",
+    "nifra",
+    "web-framework",
+    "full-stack",
+    "edge",
+    "ssr"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "bun": "./src/client.ts",
+      "types": "./dist/client.d.ts",
+      "default": "./dist/client.js"
+    },
+    "./plugin": {
+      "bun": "./src/plugin.ts",
+      "types": "./dist/plugin.d.ts",
+      "default": "./dist/plugin.js"
+    },
+    "./await": {
+      "types": "./dist/Await.svelte.d.ts",
+      "bun": "./src/Await.svelte",
+      "svelte": "./dist/Await.svelte",
+      "default": "./dist/Await.svelte"
+    },
+    "./fetcher": {
+      "bun": "./src/fetcher.ts",
+      "types": "./dist/fetcher.d.ts",
+      "default": "./dist/fetcher.js"
+    },
+    "./query": {
+      "bun": "./src/query.ts",
+      "types": "./dist/query.d.ts",
+      "default": "./dist/query.js"
+    },
+    "./image": {
+      "types": "./dist/Image.svelte.d.ts",
+      "bun": "./src/Image.svelte",
+      "svelte": "./dist/Image.svelte",
+      "default": "./dist/Image.svelte"
+    },
+    "./content": {
+      "types": "./dist/Content.svelte.d.ts",
+      "bun": "./src/Content.svelte",
+      "svelte": "./dist/Content.svelte",
+      "default": "./dist/Content.svelte"
+    },
+    "./i18n": {
+      "bun": "./src/i18n.ts",
+      "types": "./dist/i18n.d.ts",
+      "default": "./dist/i18n.js"
+    },
+    "./mdx": {
+      "bun": "./src/mdx.ts",
+      "types": "./dist/mdx.d.ts",
+      "default": "./dist/mdx.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && bun run ../../scripts/fix-dts.ts dist && cp src/*.svelte dist/ && cp src/*.svelte.d.ts dist/"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nifrajs/i18n": "workspace:*",
+    "@nifrajs/image": "workspace:*",
+    "@nifrajs/web": "workspace:*"
+  },
+  "peerDependencies": {
+    "mdsvex": "^0.12",
+    "svelte": "^5.3.0"
+  },
+  "peerDependenciesMeta": {
+    "mdsvex": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "svelte": "^5.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nifrajs/nifra.git",
+    "directory": "packages/web-svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/nifrajs/nifra/issues"
+  },
+  "homepage": "https://github.com/nifrajs/nifra#readme"
+}

package/src/Await.svelte

@@ -0,0 +1,27 @@
+<!--
+  Await.svelte — the `<Await>` primitive for deferred loader/action data (`defer()`), built on Svelte's
+  native `{#await}` block + scoped-snippet props: `children(value)` (resolved), `pending`, `error(err)`.
+
+  Svelte SSR renders the PENDING branch of `{#await}` (it does not block on the promise), so the server
+  emits the fallback and the client resolves it (hydration / soft-nav) — matching nifra's non-blocking
+  `defer()` (like the Vue adapter; contrast React/Preact, which stream the resolved content into the SSR
+  HTML). An already-resolved `resolve` (a plain value, or a client nav that awaited it) renders directly.
+  Plain-JS script (no TS) so it needs no svelte TS preprocessor.
+-->
+<script>
+  let { resolve, children, pending, error } = $props()
+  const isDeferred = (v) =>
+    v != null && typeof v === "object" && v.__velo_deferred === true
+</script>
+
+{#if isDeferred(resolve)}
+  {#await resolve.promise}
+    {@render pending?.()}
+  {:then value}
+    {@render children?.(value)}
+  {:catch err}
+    {@render error?.(err)}
+  {/await}
+{:else}
+  {@render children?.(resolve)}
+{/if}

package/src/Await.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Deferred } from "@nifrajs/web"
+import type { Component, Snippet } from "svelte"
+
+/**
+ * Hand-written types for `Await.svelte` (svelte-package would generate this from the component). The
+ * internal build resolves `*.svelte` via the ambient `svelte-shim.d.ts`; this file is what *consumers*
+ * resolve through the `./await` export's `types` condition.
+ */
+export interface AwaitProps {
+  /** A `Deferred<T>` from a loader/action's `defer(...)`, or an already-resolved value. */
+  resolve: Deferred<unknown> | unknown
+  /** Rendered with the resolved value (the default snippet). */
+  children?: Snippet<[unknown]>
+  /** Rendered while the deferred is pending (the SSR + pre-resolve state). */
+  pending?: Snippet
+  /** Rendered if the deferred rejects. */
+  error?: Snippet<[unknown]>
+}
+
+declare const Await: Component<AwaitProps>
+export default Await

package/src/Chain.svelte

@@ -0,0 +1,35 @@
+<!--
+  Chain.svelte — folds a nifra layout chain (outermost layout → page) into nested Svelte components:
+  the page (innermost, chain[last]) receives `props` (the loader data); each layout wraps the rest via
+  its `children` snippet ({@render children()} in the layout). Recurses on itself. This is the Svelte
+  analogue of the React/Vue `compose` — Svelte components are compiled (not callable), so the fold is a
+  component, not a function returning a node.
+-->
+<script>
+  import Self from "./Chain.svelte"
+  let { chain, props } = $props()
+</script>
+
+{#if chain.length <= 1}
+  {#if chain[0]}
+    {@const Page = chain[0]}
+    <Page {...props} />
+  {/if}
+{:else if chain[0] && chain[0].__veloErrorBoundary}
+  <!-- nifra `_error` boundary marker (from errorBoundary()): wrap the rest in <svelte:boundary>; the
+       `failed` snippet renders the route's _error component with the serialized error. -->
+  {@const Fallback = chain[0].__veloErrorBoundary}
+  <svelte:boundary>
+    <Self chain={chain.slice(1)} {props} />
+    {#snippet failed(error)}
+      <Fallback data={{ name: error?.name ?? "Error", message: String(error?.message ?? error) }} />
+    {/snippet}
+  </svelte:boundary>
+{:else}
+  {@const Layout = chain[0]}
+  <Layout>
+    {#snippet children()}
+      <Self chain={chain.slice(1)} {props} />
+    {/snippet}
+  </Layout>
+{/if}

package/src/Content.svelte

@@ -0,0 +1,13 @@
+<!--
+  Content.svelte — render trusted pre-rendered HTML (e.g. a @nifrajs/content collection entry's `.html`)
+  into the DOM via Svelte's {@html}. Pairs with content collections: <Content html={entry.html} />.
+  `as` picks the wrapper element; extra attributes in `...rest` (class/style/id/data-*) pass through.
+
+  Security: {@html} injects raw HTML, so `html` MUST be trusted (your own Markdown/content, rendered at
+  build/server time) — never pass user-supplied HTML without sanitizing it first. Plain-JS script.
+-->
+<script>
+  let { html, as = "div", ...rest } = $props()
+</script>
+
+<svelte:element this={as} {...rest}>{@html html}</svelte:element>

package/src/Content.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from "svelte"
+
+/**
+ * Hand-written types for `Content.svelte` (svelte-package would generate this). Consumers resolve this
+ * through the `./content` export's `types` condition.
+ */
+export interface ContentProps {
+  /** Trusted, pre-rendered HTML (e.g. `entry.html`). */
+  html: string
+  /** Wrapper element (default `"div"`). */
+  as?: string
+  /** DOM passthrough (`class`, `style`, `id`, `data-*`, …). */
+  [key: string]: unknown
+}
+
+declare const Content: Component<ContentProps>
+export default Content

package/src/I18nProvider.svelte

@@ -0,0 +1,20 @@
+<!--
+  I18nProvider.svelte — provides a nifra i18n `Formatter` (built from `locale` + `messages`) to the
+  subtree via Svelte context; consumers read it with `useT()` from `@nifrajs/web-svelte/i18n`. The
+  formatter is `$derived`, so switching locale rebuilds it. `locale` + `messages` are serializable, so
+  SSR renders the negotiated catalog and the client rebuilds the same formatter on hydrate (no
+  mismatch). Plain-JS script. The context key is a string (kept in sync with i18n.ts's `useT`) so this
+  component needs no `.ts` import.
+-->
+<script>
+  import { createFormatter } from "@nifrajs/i18n"
+  import { setContext } from "svelte"
+
+  let { locale, messages, children } = $props()
+
+  const formatter = $derived(createFormatter(locale, messages))
+  // A getter (not the value) so consumers read the current `$derived` formatter reactively.
+  setContext("@nifrajs/web-svelte:i18n", () => formatter)
+</script>
+
+{@render children?.()}

package/src/I18nProvider.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Messages } from "@nifrajs/i18n"
+import type { Component, Snippet } from "svelte"
+
+/** Hand-written types for `I18nProvider.svelte` (consumers resolve these via the `./i18n` re-export). */
+export interface I18nProviderProps {
+  /** The active locale (e.g. `"en"`, `"fr-CA"`). */
+  locale: string
+  /** The ICU message catalog for `locale`. */
+  messages: Messages
+  /** The subtree that reads the formatter via `useT()`. */
+  children?: Snippet
+}
+
+declare const I18nProvider: Component<I18nProviderProps>
+export default I18nProvider

package/src/Image.svelte

@@ -0,0 +1,27 @@
+<!--
+  Image.svelte — a CLS-safe responsive <Image> for nifra + Svelte. A thin wrapper over `resolveImage` +
+  `toHtmlAttrs` from @nifrajs/image: it computes the responsive <img> attributes (src/srcset/sizes/width/
+  height/loading/decoding/fetchpriority — lowercase HTML names) and renders an <img>. Any extra
+  attributes (class/style/id/data-*/handlers in `...rest`) pass through. `width`+`height` are required
+  (reserve layout space — no CLS); `priority` marks the LCP image. Resizing is delegated to the
+  `loader` (an image CDN); nifra bundles no codec. Plain-JS script (no TS preprocessor needed).
+-->
+<script>
+  import { resolveImage, toHtmlAttrs } from "@nifrajs/image"
+
+  let { src, width, height, alt, sizes, widths, quality, loading, priority, loader, ...rest } = $props()
+
+  // `$derived` keeps the attributes in sync if props change. Build ImageProps omitting unset optionals;
+  // resolveImage validates width/height > 0 (the CLS contract) and builds the responsive srcSet.
+  const attrs = $derived.by(() => {
+    const input = { src, width, height, alt }
+    if (sizes !== undefined) input.sizes = sizes
+    if (widths !== undefined) input.widths = widths
+    if (quality !== undefined) input.quality = quality
+    if (loading !== undefined) input.loading = loading
+    if (priority !== undefined) input.priority = priority
+    return toHtmlAttrs(resolveImage(input, loader))
+  })
+</script>
+
+<img {...rest} {...attrs} />

package/src/Image.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { ImageLoader, ImageProps } from "@nifrajs/image"
+import type { Component } from "svelte"
+import type { HTMLImgAttributes } from "svelte/elements"
+
+/**
+ * Hand-written types for `Image.svelte` (svelte-package would generate this). The internal build
+ * resolves `*.svelte` via the ambient `svelte-shim.d.ts`; this file is what *consumers* resolve through
+ * the `./image` export's `types` condition.
+ */
+type ComputedAttrs =
+  | "src"
+  | "srcset"
+  | "sizes"
+  | "width"
+  | "height"
+  | "alt"
+  | "loading"
+  | "decoding"
+  | "fetchpriority"
+
+export interface ImageComponentProps
+  extends ImageProps,
+    Omit<HTMLImgAttributes, ComputedAttrs | keyof ImageProps> {
+  /** CDN URL builder. Defaults to the identity loader (no transform — still CLS-safe + lazy). */
+  loader?: ImageLoader
+}
+
+declare const Image: Component<ImageComponentProps>
+export default Image

package/src/Router.svelte

@@ -0,0 +1,27 @@
+<!--
+  Router.svelte — the reactive root for client navigation. Holds the agnostic store's snapshot in
+  `$state`, subscribes via `$effect` (cleaned up on unmount), and renders the matched layout chain
+  through `Chain.svelte`. `$derived` recomputes the chain + props on every store change, so client
+  navigations swap routes without a full reload. The initial snapshot matches the SSR markup (the
+  server rendered `Chain` for the same matched route), so `hydrate` reconciles cleanly.
+
+  Runes (`$state`/`$effect`/`$derived`) only work in compiled `.svelte` files — which is why this
+  reactive root is a component, not a function in `client.ts`.
+-->
+<script>
+  import Chain from "./Chain.svelte"
+  let { router, routes } = $props()
+
+  let snapshot = $state(router.snapshot())
+  $effect(() => router.subscribe(() => { snapshot = router.snapshot() }))
+
+  let chain = $derived(routes[snapshot.routeId] ?? [])
+  let props = $derived({
+    data: snapshot.data,
+    actionData: snapshot.actionData,
+    pending: snapshot.pending,
+    ...(snapshot.submission ? { submission: snapshot.submission } : {}),
+  })
+</script>
+
+<Chain {chain} {props} />

package/src/client.ts

@@ -0,0 +1,33 @@
+import type { MountRouterOptions, RenderProps } from "@nifrajs/web"
+/**
+ * @nifrajs/web-svelte/client — Svelte 5 client runtime. `hydrate` hydrates a single SSR'd route via the
+ * recursive `Chain`; `mountRouter` hydrates the reactive `Router` component, which subscribes to the
+ * agnostic store and re-renders the matched chain on every client navigation (no full reload). Both
+ * use Svelte's `hydrate` (reconcile against the SSR markup). Kept in its own entry so server code
+ * stays out of the client bundle.
+ */
+import { hydrate as svelteHydrate } from "svelte"
+import Chain from "./Chain.svelte"
+import { setMountedRouter } from "./fetcher.ts"
+import Router from "./Router.svelte"
+
+// The `_error` boundary marker — Chain.svelte renders it as a <svelte:boundary>. Re-exported here so
+// nifra's client codegen resolves it from `@nifrajs/web-svelte/client` alongside `mountRouter`.
+export { errorBoundary } from "./error.ts"
+
+/** Hydrate a server-rendered Svelte layout `chain` (with the loader `props`) inside `container`. */
+export function hydrate(chain: readonly unknown[], props: RenderProps, container: unknown): void {
+  svelteHydrate(Chain, { target: container as Element, props: { chain, props } })
+}
+
+/**
+ * Hydrate a stateful Svelte Router. The `Router` component holds the store snapshot in `$state` and
+ * re-renders the matched layout chain on each store change — so client navigations swap routes without
+ * a full reload. Its initial render matches the SSR markup (the server rendered `Chain` for the same
+ * matched route), so hydration reconciles cleanly.
+ */
+export function mountRouter(options: MountRouterOptions): void {
+  const { router, routes, container } = options
+  setMountedRouter(router) // expose it to useFetcher/useFetchers (same page, client-only)
+  svelteHydrate(Router, { target: container as Element, props: { router, routes } })
+}