npm - @pyreon/zero - Versions diffs - 0.19.0 → 0.21.0 - Mend

@pyreon/zero 0.19.0 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md +1 -1
package/lib/{api-routes-CQiOi3q5.js → api-routes-CMsLztoj.js} +1 -1
package/lib/favicon.js +120 -6
package/lib/{fs-router-BVY4lTH_.js → fs-router-Bacdhsq-.js} +2 -2
package/lib/image-plugin.js +14 -7
package/lib/image-types.js +0 -0
package/lib/server.js +2741 -144
package/lib/types/favicon.d.ts +34 -4
package/lib/types/i18n-routing.d.ts +2 -4
package/lib/types/image-types.d.ts +55 -0
package/lib/types/index.d.ts +3 -5
package/lib/types/link.d.ts +2 -4
package/lib/types/server.d.ts +19 -7
package/lib/types/theme.d.ts +1 -2
package/package.json +15 -10
package/src/favicon.ts +189 -12
package/src/image-plugin.ts +59 -14
package/src/image-types.ts +60 -0
package/lib/vite-plugin-8TXXFqdP.js +0 -2491
package/src/image-types.d.ts +0 -51

package/lib/types/favicon.d.ts CHANGED Viewed

@@ -1,6 +1,22 @@
 import { Plugin } from "vite";
 //#region src/favicon.d.ts
+/**
+ * Stable content hash (FNV-1a, 32-bit) of the favicon source file(s),
+ * rendered as a `?v=<hex>` cache-bust query for the injected `<head>`
+ * links. Browsers cache favicons extremely aggressively (often per-
+ * session / effectively forever), so with a stable URL a changed icon
+ * is never re-fetched by returning visitors. Same source bytes →
+ * identical query (no needless cache churn); changed bytes → new query
+ * → browser re-downloads. Falls back to `''` (no query, prior
+ * behaviour) if a source can't be read — never break the build over a
+ * cache-bust nicety. NOTE: this versions everything referenced via
+ * `<link>` (svg/png/apple-touch/manifest). The bare `/favicon.ico`
+ * convention request (browsers fetch it with no link tag) and the
+ * `site.webmanifest`'s internal icon entries keep stable URLs — those
+ * rely on host cache headers / are re-resolved on PWA (re)install.
+ */
+declare function faviconVersionQuery(paths: string[]): string;
 interface FaviconLocaleConfig {
   /** Locale-specific source icon (SVG or PNG). */
   source: string;
@@ -19,9 +35,21 @@ interface FaviconPluginConfig {
   /** Generate web manifest. Default: true */
   manifest?: boolean;
   /**
-   * Dark mode favicon (SVG only).
-   * When provided, the SVG favicon uses prefers-color-scheme media query
-   * to switch between light and dark variants.
+   * Dark-mode favicon source.
+   *
+   * When provided, the plugin emits theme-aware `light`/`dark` variants
+   * (`favicon-light.svg` / `favicon-dark.svg` for SVG sources, plus the
+   * `*-light-*` / `*-dark-*` PNG/apple-touch set) tagged with
+   * `data-favicon-theme`. The injected blocking theme-swap script and
+   * `initTheme()` toggle their `media` attribute so the displayed
+   * favicon follows the app's resolved theme — including a manual
+   * in-app theme toggle, not just the OS `prefers-color-scheme`.
+   *
+   * For SVG sources a `favicon.svg` is also emitted that wraps both
+   * variants behind an OS `prefers-color-scheme` query — kept as the
+   * no-JS / direct-`/favicon.svg`-reference fallback only (it cannot
+   * follow a manual toggle, which is why the `data-favicon-theme`
+   * variants above are what the reactive mechanism actually uses).
    */
   darkSource?: string;
   /**
@@ -94,6 +122,8 @@ declare function faviconLinks(locale: string | undefined, config: FaviconPluginC
   type?: string;
   sizes?: string;
   href: string;
+  'data-favicon-theme'?: string;
+  media?: string;
 }>;
 interface IcoEntry {
   buffer: Buffer;
@@ -102,5 +132,5 @@ interface IcoEntry {
 /** @internal Exported for testing */
 declare function createIcoFromPngs(entries: IcoEntry[]): Uint8Array;
 //#endregion
-export { FaviconLocaleConfig, FaviconPluginConfig, IcoEntry, createIcoFromPngs, faviconLinks, faviconPlugin };
+export { FaviconLocaleConfig, FaviconPluginConfig, IcoEntry, createIcoFromPngs, faviconLinks, faviconPlugin, faviconVersionQuery };
 //# sourceMappingURL=favicon2.d.ts.map

package/lib/types/i18n-routing.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-import * as _$_pyreon_core0 from "@pyreon/core";
-import * as _$_pyreon_reactivity0 from "@pyreon/reactivity";
 import { Plugin } from "vite";
 //#region src/types.d.ts
 type RenderMode = 'ssr' | 'ssg' | 'spa' | 'isr';
@@ -265,9 +263,9 @@ declare function createLocaleContext(locale: string, path: string, config: I18nR
  */
 declare function i18nRouting(config: I18nRoutingConfig): Plugin;
 /** @internal Context for the current locale. */
-declare const LocaleCtx: _$_pyreon_core0.Context<string>;
+declare const LocaleCtx: import("@pyreon/core").Context<string>;
 /** Current locale signal — set by the server middleware or client-side detection. */
-declare const localeSignal: _$_pyreon_reactivity0.Signal<string>;
+declare const localeSignal: import("@pyreon/reactivity").Signal<string>;
 /**
  * Read the current locale reactively.
  *

package/lib/types/image-types.d.ts ADDED Viewed

@@ -0,0 +1,55 @@
+/**
+ * Ambient type declarations for the custom image-import queries that
+ * `@pyreon/zero`'s `imagePlugin` introduces (`?optimize` / `?component`
+ * / `?raw`). Shipped + exported so the documented usage type-checks out
+ * of the box — no consumer hand-authoring required.
+ *
+ * Add ONE line to any tsconfig-covered `.d.ts` (e.g. `src/env.d.ts`):
+ *   /// <reference types="@pyreon/zero/image-types" />
+ *
+ * Or via tsconfig.json:
+ *   "types": ["@pyreon/zero/image-types"]
+ *
+ * This is an ambient-only **script** (no top-level import/export) so
+ * every `declare module` below is a global module augmentation. The
+ * `ProcessedImage` shape is referenced via the package self-ref
+ * `import('@pyreon/zero/image-plugin')` (resolution-stable in the
+ * published layout, and re-uses the plugin's own type so it can never
+ * drift out of sync).
+ */
+//#region src/image-types.d.ts
+declare module '*.jpg?optimize' {
+  const image: import('@pyreon/zero/image-plugin').ProcessedImage;
+  export default image;
+}
+declare module '*.jpeg?optimize' {
+  const image: import('@pyreon/zero/image-plugin').ProcessedImage;
+  export default image;
+}
+declare module '*.png?optimize' {
+  const image: import('@pyreon/zero/image-plugin').ProcessedImage;
+  export default image;
+}
+declare module '*.webp?optimize' {
+  const image: import('@pyreon/zero/image-plugin').ProcessedImage;
+  export default image;
+}
+declare module '*.avif?optimize' {
+  const image: import('@pyreon/zero/image-plugin').ProcessedImage;
+  export default image;
+}
+declare module '*.svg?component' {
+  const component: import('@pyreon/core').ComponentFn<{
+    width?: number;
+    height?: number;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }>;
+  export default component;
+}
+declare module '*.svg?raw' {
+  const svg: string;
+  export default svg;
+}
+//# sourceMappingURL=image-types2.d.ts.map

package/lib/types/index.d.ts CHANGED Viewed

@@ -1,6 +1,4 @@
-import * as _$_pyreon_core0 from "@pyreon/core";
 import { ComponentFn, Ref, SvgAttributes, VNodeChild } from "@pyreon/core";
-import * as _$_pyreon_reactivity0 from "@pyreon/reactivity";
 import { LoaderContext, NavigationGuard } from "@pyreon/router";
 import { Middleware } from "@pyreon/server";
@@ -272,7 +270,7 @@ interface LinkProps {
 /** Props passed to a custom component via createLink. */
 interface LinkRenderProps {
   href: string;
-  ref: _$_pyreon_core0.Ref<HTMLAnchorElement>;
+  ref: import('@pyreon/core').Ref<HTMLAnchorElement>;
   onClick: (e: MouseEvent) => void;
   onMouseEnter: () => void;
   onTouchStart: () => void;
@@ -289,7 +287,7 @@ interface LinkRenderProps {
 /** Return type of useLink. */
 interface UseLinkReturn {
   /** Ref object — attach to the root element for viewport-based prefetch. */
-  ref: _$_pyreon_core0.Ref<HTMLAnchorElement>;
+  ref: import('@pyreon/core').Ref<HTMLAnchorElement>;
   /** Click handler — performs client-side navigation. */
   handleClick: (e: MouseEvent) => void;
   /** Mouse enter handler — triggers hover prefetch. */
@@ -1191,7 +1189,7 @@ declare function buildMetaTags(props: Omit<MetaProps, 'title' | 'description' |
 //#region src/theme.d.ts
 type Theme = 'light' | 'dark' | 'system';
 /** Reactive theme signal. */
-declare const theme: _$_pyreon_reactivity0.Signal<Theme>;
+declare const theme: import("@pyreon/reactivity").Signal<Theme>;
 /**
  * Set the default theme for SSR (when `matchMedia` is unavailable).
  * Call once at server startup before rendering.

package/lib/types/link.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-import * as _$_pyreon_core0 from "@pyreon/core";
 //#region src/link.d.ts
 interface LinkProps {
   /** Target URL path. */
@@ -26,7 +24,7 @@ interface LinkProps {
 /** Props passed to a custom component via createLink. */
 interface LinkRenderProps {
   href: string;
-  ref: _$_pyreon_core0.Ref<HTMLAnchorElement>;
+  ref: import('@pyreon/core').Ref<HTMLAnchorElement>;
   onClick: (e: MouseEvent) => void;
   onMouseEnter: () => void;
   onTouchStart: () => void;
@@ -43,7 +41,7 @@ interface LinkRenderProps {
 /** Return type of useLink. */
 interface UseLinkReturn {
   /** Ref object — attach to the root element for viewport-based prefetch. */
-  ref: _$_pyreon_core0.Ref<HTMLAnchorElement>;
+  ref: import('@pyreon/core').Ref<HTMLAnchorElement>;
   /** Click handler — performs client-side navigation. */
   handleClick: (e: MouseEvent) => void;
   /** Mouse enter handler — triggers hover prefetch. */

package/lib/types/server.d.ts CHANGED Viewed

@@ -1,6 +1,4 @@
-import * as _$_pyreon_core0 from "@pyreon/core";
 import { ComponentFn } from "@pyreon/core";
-import * as _$_pyreon_router0 from "@pyreon/router";
 import { RouteRecord } from "@pyreon/router";
 import { Middleware, MiddlewareContext } from "@pyreon/server";
 import { Plugin } from "vite";
@@ -36,8 +34,8 @@ interface CreateAppOptions {
  * Used internally by entry-server and entry-client.
  */
 declare function createApp(options: CreateAppOptions): {
-  App: () => _$_pyreon_core0.VNode;
-  router: _$_pyreon_router0.Router<string>;
+  App: () => import("@pyreon/core").VNode;
+  router: import("@pyreon/router").Router<string>;
 };
 //#endregion
 //#region src/api-routes.d.ts
@@ -1038,9 +1036,21 @@ interface FaviconPluginConfig {
   /** Generate web manifest. Default: true */
   manifest?: boolean;
   /**
-   * Dark mode favicon (SVG only).
-   * When provided, the SVG favicon uses prefers-color-scheme media query
-   * to switch between light and dark variants.
+   * Dark-mode favicon source.
+   *
+   * When provided, the plugin emits theme-aware `light`/`dark` variants
+   * (`favicon-light.svg` / `favicon-dark.svg` for SVG sources, plus the
+   * `*-light-*` / `*-dark-*` PNG/apple-touch set) tagged with
+   * `data-favicon-theme`. The injected blocking theme-swap script and
+   * `initTheme()` toggle their `media` attribute so the displayed
+   * favicon follows the app's resolved theme — including a manual
+   * in-app theme toggle, not just the OS `prefers-color-scheme`.
+   *
+   * For SVG sources a `favicon.svg` is also emitted that wraps both
+   * variants behind an OS `prefers-color-scheme` query — kept as the
+   * no-JS / direct-`/favicon.svg`-reference fallback only (it cannot
+   * follow a manual toggle, which is why the `data-favicon-theme`
+   * variants above are what the reactive mechanism actually uses).
    */
   darkSource?: string;
   /**
@@ -1113,6 +1123,8 @@ declare function faviconLinks(locale: string | undefined, config: FaviconPluginC
   type?: string;
   sizes?: string;
   href: string;
+  'data-favicon-theme'?: string;
+  media?: string;
 }>;
 //#endregion
 //#region src/icon.d.ts

package/lib/types/theme.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
-import * as _$_pyreon_reactivity0 from "@pyreon/reactivity";
 import { VNodeChild } from "@pyreon/core";
 //#region src/theme.d.ts
 type Theme = 'light' | 'dark' | 'system';
 /** Reactive theme signal. */
-declare const theme: _$_pyreon_reactivity0.Signal<Theme>;
+declare const theme: import("@pyreon/reactivity").Signal<Theme>;
 /**
  * Set the default theme for SSR (when `matchMedia` is unavailable).
  * Call once at server startup before rendering.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/zero",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Pyreon Zero — zero-config full-stack framework powered by Pyreon and Vite",
   "license": "MIT",
   "author": "Vit Bokisch",
@@ -84,6 +84,11 @@
       "import": "./lib/image-plugin.js",
       "types": "./lib/types/image-plugin.d.ts"
     },
+    "./image-types": {
+      "bun": "./src/image-types.ts",
+      "import": "./lib/image-types.js",
+      "types": "./lib/types/image-types.d.ts"
+    },
     "./actions": {
       "bun": "./src/actions.ts",
       "import": "./lib/actions.js",
@@ -168,15 +173,15 @@
     "lint": "oxlint ."
   },
   "dependencies": {
-    "@pyreon/core": "^0.19.0",
-    "@pyreon/head": "^0.19.0",
-    "@pyreon/meta": "^0.19.0",
-    "@pyreon/reactivity": "^0.19.0",
-    "@pyreon/router": "^0.19.0",
-    "@pyreon/runtime-dom": "^0.19.0",
-    "@pyreon/runtime-server": "^0.19.0",
-    "@pyreon/server": "^0.19.0",
-    "@pyreon/vite-plugin": "^0.19.0",
+    "@pyreon/core": "^0.21.0",
+    "@pyreon/head": "^0.21.0",
+    "@pyreon/meta": "^0.21.0",
+    "@pyreon/reactivity": "^0.21.0",
+    "@pyreon/router": "^0.21.0",
+    "@pyreon/runtime-dom": "^0.21.0",
+    "@pyreon/runtime-server": "^0.21.0",
+    "@pyreon/server": "^0.21.0",
+    "@pyreon/vite-plugin": "^0.21.0",
     "vite": "^8.0.0"
   },
   "devDependencies": {

package/src/favicon.ts CHANGED Viewed

@@ -1,8 +1,43 @@
-import { existsSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
 import type { Plugin } from 'vite'
+/**
+ * Stable content hash (FNV-1a, 32-bit) of the favicon source file(s),
+ * rendered as a `?v=<hex>` cache-bust query for the injected `<head>`
+ * links. Browsers cache favicons extremely aggressively (often per-
+ * session / effectively forever), so with a stable URL a changed icon
+ * is never re-fetched by returning visitors. Same source bytes →
+ * identical query (no needless cache churn); changed bytes → new query
+ * → browser re-downloads. Falls back to `''` (no query, prior
+ * behaviour) if a source can't be read — never break the build over a
+ * cache-bust nicety. NOTE: this versions everything referenced via
+ * `<link>` (svg/png/apple-touch/manifest). The bare `/favicon.ico`
+ * convention request (browsers fetch it with no link tag) and the
+ * `site.webmanifest`'s internal icon entries keep stable URLs — those
+ * rely on host cache headers / are re-resolved on PWA (re)install.
+ */
+export function faviconVersionQuery(paths: string[]): string {
+  let h = 0x811c9dc5
+  let any = false
+  for (const p of paths) {
+    let buf: Buffer
+    try {
+      buf = readFileSync(p)
+    } catch {
+      continue
+    }
+    any = true
+    for (let i = 0; i < buf.length; i++) {
+      h ^= buf[i]!
+      h = Math.imul(h, 0x01000193)
+    }
+  }
+  if (!any) return ''
+  return `?v=${(h >>> 0).toString(16).padStart(8, '0')}`
+}
 let sharpWarned = false
 function warnSharpMissing() {
   if (sharpWarned) return
@@ -46,9 +81,21 @@ export interface FaviconPluginConfig {
   /** Generate web manifest. Default: true */
   manifest?: boolean
   /**
-   * Dark mode favicon (SVG only).
-   * When provided, the SVG favicon uses prefers-color-scheme media query
-   * to switch between light and dark variants.
+   * Dark-mode favicon source.
+   *
+   * When provided, the plugin emits theme-aware `light`/`dark` variants
+   * (`favicon-light.svg` / `favicon-dark.svg` for SVG sources, plus the
+   * `*-light-*` / `*-dark-*` PNG/apple-touch set) tagged with
+   * `data-favicon-theme`. The injected blocking theme-swap script and
+   * `initTheme()` toggle their `media` attribute so the displayed
+   * favicon follows the app's resolved theme — including a manual
+   * in-app theme toggle, not just the OS `prefers-color-scheme`.
+   *
+   * For SVG sources a `favicon.svg` is also emitted that wraps both
+   * variants behind an OS `prefers-color-scheme` query — kept as the
+   * no-JS / direct-`/favicon.svg`-reference fallback only (it cannot
+   * follow a manual toggle, which is why the `data-favicon-theme`
+   * variants above are what the reactive mechanism actually uses).
    */
   darkSource?: string
   /**
@@ -126,6 +173,17 @@ export function faviconPlugin(config: FaviconPluginConfig): Plugin {
   let root = ''
   let isBuild = false
+  // Lazily computed once per build/dev session (source rarely changes
+  // within a run; recomputing per index.html transform is wasteful).
+  let versionQuery: string | null = null
+  function getVersionQuery(): string {
+    if (versionQuery === null) {
+      const paths = [join(root, config.source)]
+      if (config.darkSource) paths.push(join(root, config.darkSource))
+      versionQuery = faviconVersionQuery(paths)
+    }
+    return versionQuery
+  }
   return {
     name: 'pyreon-zero-favicon',
@@ -156,7 +214,11 @@ export function faviconPlugin(config: FaviconPluginConfig): Plugin {
       }
       server.middlewares.use(async (req, res, next) => {
-        const url = req.url ?? ''
+        // Strip the `?v=<hash>` cache-bust query (and any query) before
+        // matching — the injected links carry it; dev serves fresh
+        // (`Cache-Control: no-cache`) so the version is irrelevant here,
+        // but a query in the path would break every name match below.
+        const url = (req.url ?? '').split('?')[0]!
         // Resolve locale-specific source
         const localeSource = resolveLocaleSource(url, config, root)
@@ -164,6 +226,34 @@ export function faviconPlugin(config: FaviconPluginConfig): Plugin {
         const svgPath = localeSource ? localeSource.sourcePath : sourcePath
         const isSvgSource = localeSource ? localeSource.source.endsWith('.svg') : config.source.endsWith('.svg')
+        // Serve the per-theme SVG variants (the app-toggle path):
+        // /favicon-light.svg → source, /favicon-dark.svg → darkSource.
+        // Dev-badge / devSource override applies to the light variant
+        // only (it is the active default the swap toggles to), matching
+        // the /favicon.svg handler's intent.
+        if (
+          isSvgSource &&
+          (svgUrl.endsWith('/favicon-light.svg') ||
+            svgUrl.endsWith('/favicon-dark.svg'))
+        ) {
+          const isDarkVariant = svgUrl.endsWith('/favicon-dark.svg')
+          const variantPath = isDarkVariant ? (darkPath ?? svgPath) : svgPath
+          try {
+            let content = await readFile(variantPath, 'utf-8')
+            if (!isDarkVariant) {
+              if (autoDevBadge) content = addDevBadgeToSvg(content)
+              else if (devSourcePath && existsSync(devSourcePath)) {
+                content = await readFile(devSourcePath, 'utf-8')
+              }
+            }
+            res.setHeader('Content-Type', 'image/svg+xml')
+            res.end(content)
+            return
+          } catch {
+            /* fall through */
+          }
+        }
         // Serve favicon.svg — in dev, add dev badge overlay if configured
         if (svgUrl.endsWith('/favicon.svg') && isSvgSource) {
           try {
@@ -257,8 +347,22 @@ export function faviconPlugin(config: FaviconPluginConfig): Plugin {
         injectTo: 'head'
       }> = []
-      // SVG favicon (with prefers-color-scheme media query when dark variant exists)
-      if (isSvg) {
+      // SVG favicon. Browsers prefer an SVG favicon over PNG when both
+      // are present, so the SVG link MUST carry the same
+      // `data-favicon-theme` contract the PNG dual-variant uses —
+      // otherwise the theme-swap script / initTheme() (which only touch
+      // `[data-favicon-theme]`) can never change the displayed icon and
+      // the whole reactive-favicon feature is silently dead in every
+      // SVG-capable browser. When a dark variant exists, emit TWO
+      // theme-aware SVG links (mirroring the PNG pattern); the static
+      // `/favicon.svg` (an OS `prefers-color-scheme` wrapped dual) stays
+      // emitted as the no-JS / direct-reference fallback only.
+      if (isSvg && hasDark) {
+        tags.push(
+          { tag: 'link', attrs: { rel: 'icon', type: 'image/svg+xml', href: '/favicon-light.svg', 'data-favicon-theme': 'light' }, injectTo: 'head' },
+          { tag: 'link', attrs: { rel: 'icon', type: 'image/svg+xml', href: '/favicon-dark.svg', 'data-favicon-theme': 'dark', media: 'not all' }, injectTo: 'head' },
+        )
+      } else if (isSvg) {
         tags.push({
           tag: 'link',
           attrs: { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
@@ -316,12 +420,44 @@ export function faviconPlugin(config: FaviconPluginConfig): Plugin {
         } as any)
       }
+      // Cache-bust: stamp the source content hash onto every injected
+      // favicon/manifest link href so a changed icon is actually
+      // re-downloaded by returning visitors (theme-swap toggles `media`,
+      // not `href`, so this is orthogonal to the light/dark variants).
+      const v = getVersionQuery()
+      if (v) {
+        for (const t of tags) {
+          if (t.tag === 'link' && t.attrs.href) t.attrs.href += v
+        }
+      }
       return tags
     },
     async generateBundle() {
       if (!isBuild) return
+      // `faviconPlugin` is in the plugin list and a `source` is configured
+      // (it's a required field), so the user clearly WANTS favicons. If
+      // `sharp` is missing, the old behaviour was a single swallow-able
+      // `console.warn` + emit nothing — i.e. silently ship a production
+      // site with zero favicons. That's the footgun. Fail the build loudly
+      // with an actionable message instead. Dev keeps the soft warning
+      // (see `warnSharpMissing`) so local iteration isn't blocked.
+      try {
+        await import('sharp')
+      } catch {
+        this.error(
+          '[Pyreon] faviconPlugin: a favicon `source` is configured but ' +
+            '`sharp` is not installed — NO favicons would be generated and ' +
+            'the production build would silently ship none.\n' +
+            '  Fix:    bun add -D sharp   (or: npm i -D sharp)\n' +
+            `  Source: ${config.source}\n` +
+            'To intentionally build without favicons, remove faviconPlugin() ' +
+            'from your Vite plugins.',
+        )
+      }
       // Generate favicons for the base (default) source
       await generateFaviconSet.call(this, root, config.source, config.darkSource, '', config, themeColor, backgroundColor, generateManifest)
@@ -420,6 +556,22 @@ async function generateFaviconSet(
       if (existsSync(darkPath)) {
         const darkSvg = await readFile(darkPath, 'utf-8')
         finalSvg = wrapSvgWithDarkMode(svgContent, darkSvg)
+        // Per-theme SVG variants for the app-toggle path:
+        // transformIndexHtml / faviconLinks emit
+        // `/favicon-light.svg` + `/favicon-dark.svg` with
+        // `data-favicon-theme` so the theme-swap actually changes the
+        // SVG (the wrapped `favicon.svg` is OS-`prefers-color-scheme`
+        // only — kept above as the no-JS / direct-ref fallback).
+        this.emitFile({
+          type: 'asset',
+          fileName: `${prefix}favicon-light.svg`,
+          source: svgContent,
+        })
+        this.emitFile({
+          type: 'asset',
+          fileName: `${prefix}favicon-dark.svg`,
+          source: darkSvg,
+        })
       }
     }
@@ -517,14 +669,39 @@ async function generateFaviconSet(
 export function faviconLinks(
   locale: string | undefined,
   config: FaviconPluginConfig,
-): Array<{ rel: string; type?: string; sizes?: string; href: string }> {
+): Array<{
+  rel: string
+  type?: string
+  sizes?: string
+  href: string
+  'data-favicon-theme'?: string
+  media?: string
+}> {
   const hasLocaleOverride = locale && config.locales?.[locale]
   const prefix = hasLocaleOverride ? `/${locale}` : ''
   const isSvg = (hasLocaleOverride ? config.locales![locale]!.source : config.source).endsWith('.svg')
-  const links: Array<{ rel: string; type?: string; sizes?: string; href: string }> = []
-  if (isSvg) {
+  const hasDark = !!config.darkSource
+  const links: Array<{
+    rel: string
+    type?: string
+    sizes?: string
+    href: string
+    'data-favicon-theme'?: string
+    media?: string
+  }> = []
+  // Mirror transformIndexHtml: a single static SVG link would always
+  // win over the theme-toggled PNGs (browsers prefer SVG), silently
+  // killing reactive switching for SSR'd pages too. Emit the two
+  // theme-aware SVG variants so initTheme()'s `[data-favicon-theme]`
+  // swap reaches the SVG. `/favicon.svg` stays the no-JS fallback.
+  if (isSvg && hasDark) {
+    links.push(
+      { rel: 'icon', type: 'image/svg+xml', href: `${prefix}/favicon-light.svg`, 'data-favicon-theme': 'light' },
+      { rel: 'icon', type: 'image/svg+xml', href: `${prefix}/favicon-dark.svg`, 'data-favicon-theme': 'dark', media: 'not all' },
+    )
+  } else if (isSvg) {
     links.push({ rel: 'icon', type: 'image/svg+xml', href: `${prefix}/favicon.svg` })
   }